Why end user license agreements (EULA) have bad User Experience?

Quote

History is testimony to the fact and so are the analytical figures that hardly any end user reads software license agreements. It is being said that less that 8% of end users spare some time and patience to read the license agreements and rest of the 92% hardly bother.

· Is it that users are curious to install the software or get a service as quickly as possible and see what underthehood is?

· Is it the length of the agreement or complex wording for which one needs to hire a legal expert to understand it fully?

· Is it the time constraints which follows a user all over his life?

If you ask me? I would sincerely express that I had tried many times to read license agreements to understand them, but every attempt was a failure. I never found them intuitive, user friendly, interesting, easy to understand and what is highly shitty about them is time consuming and lengthy.

But what is nightmare to us now, is definitely giving us window to dig deep into this puzzle and try to resolve this and make history.

If you are reading/watching news daily like me then it is not hard to remember that latest happenings in the world regarding user privacy issues which had grabbed the attention of people around the world. From Facebook/Google/Microsoft to NSA/Snowden leaks, people are clear that their user privacy had been compromised and when same is being challenged in the courts. It had been found hardly any user had read the agreements before accepting.

It is not the fault of the users who are not reading the license agreements and later found themselves in trap. It is the fault of BAD User Experience of license agreements.

No more than 8% of users read the License Agreements in full.

Every one of us know how much is being written, read, trained and widely acclaimed about User Experience. User Experience had resolved lots of complex puzzles and therefore giving more freedom, contextual approaches,user friendly and every thing which makes sense.

I therefore request your great attention and patience to let us think about it and let us share the ideas, and work on it as a common goal. Our mind is the ocean of ideas, whether good or bad, whether small or big. Sometimes small idea acts as catalyst for a big idea and I am sure we lack any.

So let us put our IDEAS forward!

Advertisements

Global Style Sheet

Standard

Hi Friends,

Today I am gonna to share with you a style file which I feel are including some of the classes/styles which we almost use in every web project on which we are working. We are repeating writing the same code across different web projects, if you are not but atleast i am doing the same. 🙂

Today after getting some time I thought why not to make a general style sheet which will contain some of the common styles which we require almost in all projects. Atleast we can save some time and our patience. Let me show you all the styles code in that file first and then explain each one of them.

*
{
padding: 0px;
margin: 0px;
}

BODY, HTML
{
height: 100%;
width: 100%;
}

BODY
{
font-family: 'Arial' , 'Helvetica' , 'Sans-Serif';
font-size: 12px;
color: #323232;
}

img
{
border: none;
}

a
{
text-decoration: none;
}
a:hover
{
text-decoration: underline;
}
/*------ For Clear ------- */
.clear
{
clear: both;
}
.clearLeft
{
clear: left;
}
.clearRight
{
clear: right;
}
/*------ For Floats ------- */
.floatLeft
{
float: left;
}
.floatRigth
{
float: right;
}

/*------ For Border Radius ------- */
.borderRadius
{
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
-ms-border-radius: 5px;
}

/*------ For Box Shadow ------- */

.boxOuterShadow
{
box-shadow: 1px 1px 5px rgba(0,0,0, 0.3);
-webkit-box-shadow: 1px 1px 5px rgba(0,0,0, 0.3);
-moz-box-shadow: 1px 1px 5px rgba(0,0,0, 0.3);
-o-box-shadow: 1px 1px 5px rgba(0,0,0, 0.3);
-ms-box-shadow: 1px 1px 5px rgba(0,0,0, 0.3);
}

.boxInnerShadow
{
box-shadow: inset -1px -1px 5px rgba(0,0,0, 0.3);
-webkit-box-shadow: inset -1px -1px 5px rgba(0,0,0, 0.3);
-moz-box-shadow: inset -1px -1px 5px rgba(0,0,0, 0.3);
-o-box-shadow: inset -1px -1px 5px rgba(0,0,0, 0.3);
-ms-box-shadow: inset -1px -1px 5px rgba(0,0,0, 0.3);
}
/*------ For Text Shadow ------- */

.textShadow

{
text-shadow: 1px 1px 1px rgba(0,0,0, 0.5);
-webkit-text-shadow: 1px 1px 1px rgba(0,0,0, 0.5);
-moz-text-shadow: 1px 1px 1px rgba(0,0,0, 0.5);
-o-text-shadow: 1px 1px 1px rgba(0,0,0, 0.5);
-ms-text-shadow: 1px 1px 1px rgba(0,0,0, 0.5);
}
/*------ For Color Gradient ------- */

.colorGradient
{
background: #a6a6a6; /* Old browsers */
background: -moz-linear-gradient(top, #a6a6a6 1%, #eaeaea 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#a6a6a6), color-stop(100%,#eaeaea)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #a6a6a6 1%,#eaeaea 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #a6a6a6 1%,#eaeaea 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #a6a6a6 1%,#eaeaea 100%); /* IE10+ */
background: linear-gradient(to bottom, #a6a6a6 1%,#eaeaea 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6a6a6', endColorstr='#eaeaea',GradientType=0 ); /* IE6-8 */
}</pre>
/*------- For flexible images ----*/

img {
 max-width: 100%;
 height: auto;
 width: auto\9; /* ie8 */
}

&nbsp;

/*------- For flexible videos ----*/

video embed,
video object,
video iframe {
 width: 100%;
 height: auto;
}

&nbsp;

/*------- Adjust text size in iPhone ----*/

html {
 -webkit-text-size-adjust: none;
}

&nbsp;

/*------- Adjust overflow in 100% width (if padding applied) ----*/

.boxSizing
{
 -moz-box-sizing:border-box;
 -webkit-box-sizing:border-box;
 box-sizing:border-box;
}

&nbsp;

By simply going through the above code you might had got the idea what i am trying to do by making the general style sheet file. Basically I have tried to separate those common/repetitive styles from the general style file and then saving them separately as commons.css file. Later on I can link this style sheet to any web project/file and do some color and font settings as per the requirements and use the same as and when I require them. I know I haven’t as yet put all the possible commonalities inside this style sheet and would definitely update this sheet as and when i find anything which should be in this file. I am also humbly requesting you friends to kindly suggest and update this files if you find any interesting style which should become part of this file. Let me explain all the styles and their functionality one by one First i have wrote global browser resetting style, which goes like this

*
{
padding: 0px;
margin: 0px;
}

The above style helps to reset different browser specific style settings. Star (*) means all the DOM elements and set their padding and margins to zero(0). I would also like to inform here that it is not the recommander way to reset the browser, rather we have a good approach which is from YAHOO. 2nd style tends to set all webpage HTML, BODY element height and width to 100%. This depends on your project requirements and you can edit the code as per the requirements. The code looks like this

BODY, HTML
{
height: 100%;
width: 100%;
}

3rd style is the general BODY element. It is my usual practice to define the general font styles in body tag and specifically changing the font style properties where ever is required. The code of which looks like this

BODY
{
font-family: 'Arial' , 'Helvetica' , 'Sans-Serif';
font-size: 12px;
color: #323232;
}

4th style is to reset the <img> tag and set its border property to none, as i had seen many browsers unnecessarily showing the blue border across the image.

img
{
border: none;
}

5th styles is to keep the general and modern style look and feel of links. By default there won’t be any underline and on hover link will show the underline and this also helps in user experience.

a
{
text-decoration: none;
}
a:hover
{
text-decoration: underline;
}

6th styles is to clear the floating of divs

.clear
{
clear: both;
}
.clearLeft
{
clear: left;
}
.clearRight
{
clear: right;
}

7th style is for floats. If you want any div to float left or right, you now need to just add the appropriate class to that div.

.floatLeft
{
float: left;
}
.floatRigth
{
float: right;
}

8th styles talks about border radius which we commonly use across different divs and have to tirelessly write browser specific code across the divs. You can add border radius to any div to which you want border radius, simply you have to just add this class to that div in markups. This code of which is like this.

.borderRadius
{
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
-ms-border-radius: 5px;
}

9th style is to add box shadow to the divs, both inner and outer shadows. Code to add outer shadow looks like this

.boxOuterShadow
{
box-shadow: 1px 1px 5px rgba(0,0,0, 0.3);
-webkit-box-shadow: 1px 1px 5px rgba(0,0,0, 0.3);
-moz-box-shadow: 1px 1px 5px rgba(0,0,0, 0.3);
-o-box-shadow: 1px 1px 5px rgba(0,0,0, 0.3);
-ms-box-shadow: 1px 1px 5px rgba(0,0,0, 0.3);
}

and code for inner shadow looks like this

.boxInnerShadow
{
box-shadow: inset -1px -1px 5px rgba(0,0,0, 0.3);
-webkit-box-shadow: inset -1px -1px 5px rgba(0,0,0, 0.3);
-moz-box-shadow: inset -1px -1px 5px rgba(0,0,0, 0.3);
-o-box-shadow: inset -1px -1px 5px rgba(0,0,0, 0.3);
-ms-box-shadow: inset -1px -1px 5px rgba(0,0,0, 0.3);
}

10th style is to add shadow to the text.

.textShadow
{
text-shadow: 1px 1px 1px rgba(0,0,0, 0.5);
-webkit-text-shadow: 1px 1px 1px rgba(0,0,0, 0.5);
-moz-text-shadow: 1px 1px 1px rgba(0,0,0, 0.5);
-o-text-shadow: 1px 1px 1px rgba(0,0,0, 0.5);
-ms-text-shadow: 1px 1px 1px rgba(0,0,0, 0.5);
}

11th styles is for color gradients. Designers/developers can change the color values and get the desired color as per their requirements.

.colorGradient
{
background: #a6a6a6; /* Old browsers */
background: -moz-linear-gradient(top, #a6a6a6 1%, #eaeaea 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#a6a6a6), color-stop(100%,#eaeaea)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #a6a6a6 1%,#eaeaea 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #a6a6a6 1%,#eaeaea 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #a6a6a6 1%,#eaeaea 100%); /* IE10+ */
background: linear-gradient(to bottom, #a6a6a6 1%,#eaeaea 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6a6a6', endColorstr='#eaeaea',GradientType=0 ); /* IE6-8 */
}

</pre>
/*------- For flexible images ----*/

img {
 max-width: 100%;
 height: auto;
 width: auto\9; /* ie8 */
 box-shadow:inset 0px 0px 5px #E88738;
}
<pre>

The above code helps to make images responsive in responsive design.

</pre>
/*------- For flexible videos ----*/

video embed,
video object,
video iframe {
 width: 100%;
 height: auto;
}
<pre>

The above codes makes videos responsive in responsive design.


</pre>
/*------- Adjust text size in iPhone ----*/

html {
 -webkit-text-size-adjust: none;
}
<pre>

The above code does text adjustments in webkit supporting browsers for iPhone devices.


</pre>
/*------- Adjust overflow in 100% width (if padding applied) ----*/

.boxSizing
{
 -moz-box-sizing:border-box;
 -webkit-box-sizing:border-box;
 box-sizing:border-box;
}
<pre>

Box-sizing is interesting CSS3 property. When we apply padding to a div whose width is 100%, its width start to increase, in-order to keep it 100% and have some padding, we should include box-sizing property into the divs code.
Please note as i already mentioned this is not the end of the styles which can be put in this file, as and when i come up with other style snippets which i feel should be in this file shall be definately updated, in the same breath i am requesting you all friends to suggest few if you feel we can make this file much usable and interesting. Thanks in advance and enjoy reading.