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

A Date with #GoogleGlass

Standard

google-glass-hd-wallpaper

Today I am going to introduce you with Google’s latest flagship product/project namely as GLASS. If we ask Google to tell us about Google Glass they say “It’s surprisingly simple”, not bad and not contrary to its age old mantra which is simplicity at its core. As Google clearly mentions and believes in that when people comes to Google they come for definite meaningful purpose which is to get some INFORMATION. If we read 10 points of Google philosophy we will get more information and their deep love in simplicity. If we consult their recent revamp of design, one comes to think that Google could have created much better and jazzy UI for their products, but yet they have followed their philosophy and love of simplicity which clearly reflecting from its design. Let us see how it feels when wearing a GLASS.

To be frank enough Google Glass app is not a mobile app or website on a transparent background. To understand fully we have to read some technical specification of Glass and go through Google Glass quick guide.

Some of the important ideas nicely written by Max Firtman in his blog post on mobilexweb.com are:

Important Ideas:

  • Users don’t browse the web on Glass (well, they can ask questions to Google but there is no API for that yet)
  • Users don’t install apps, they authorize just Glassware to communicate with the device as we authorize a website/app to access our Facebook/Google+ account
  • We need to let the user decide when to access your services and data, we should not force the user to read what we have to say
  • Create an specific and optimized architecture for Google Glass
  • While everybody thinks on Glass with AR (Augmented Reality), today the device is not offering AR features. We can send contextual information, images and videos to user’s device but we will not augment the reality on user’s vision.
  • It’s not a mobile replacement; it’s not a desktop replacement. It’s a new and different kind of device.

The base interactional screen of Google Glass are called as Google Cards and the apps specifically designed/developed for GLASS are called as GLASSWARE. The Glass resolution is nHD display of 640/360 [1/9th of full HD]. Google Glass had 5MP camera, conduction transducer audio, accelerometer, a touch lateral panel, Bluetooth, WIFI etc. For more information about the specifications refer to Google Glass tech specifics.

Google Glass Cards can be created using:

  • Plain text
  • Text + Media (Images, Video, Audio)
  • HTML5

And there are lots of Glass cards templates available and had been recommended by Google to go through those before creating your new card. For more information related to Google Glass UI guidelines.

Google had provided online emulator for Glass for those thirsty developers who want to see how Glassware looks in glass and for those thirsty buyers who want to buy one but unfortunately Google had stop to ship any more as they had already reached to the limit. Let me inform potential future buyers of Google Glass that Google has priced it around $1500 and as per the policies they are selling it to single person and that person is not allowed to lend it to any of his friend(s) or any family member. Google has equal right to cancel the account of that person who would be found violating the Google Glass policies.

Weird #GoogleGlass

Google had shipped lots of Glasses to the explorers and many different feedback are coming from those fortunate users, some are bad and some are good and its release and their experience had unfolded the Pandora box of questions that curiously needs some convincing answers from Google. Some one nicely concluded Google Glass as “New child in technology arena” which has still to learn and still to explore before it greatly mesmerizes the users. Mike Butcher pened down his experience with Google Glass [Did I mentioned that during this experience he had already violated Google usage policies..?] had mentioned the same thing that Glass needs to learn lot and update lot before it creates ripples in the technology market.

Important Links:

Official documentation: https://developers.google.com/glass

API and starter projects: https://developers.google.com/glass/downloads

Playground (card simulator): https://developers.google.com/glass/playground

CSS only Dropdown menu

Standard

Hi Friends!

Today i am gonna to talk about how to create CSS ONLY DROPDOWN MENU for our web project. I know you had been though lots of dropdown menus, but many use CSS/Javascript/JQuery dropdown menus. But what today i am gonna to show you how to create pure css dropdown menu.

Below given is the screen shot which we will get after writing down CSS and HTML code about which i am going to discuss later.

CSS only Dropdown menu

Let me first show you the CSS code i had created for above dropdown menu:


/*------ Main Nav starts -------*/

 .mainNav
{
    height: 40px;
    border: solid 1px #a6a6a6;
	background: #a6a6a6;
	background: -webkit-gradient(linear, left top, left bottom, from(#d3d3d3), to(#f7f7f7));
	background: -moz-linear-gradient(top,  #d3d3d3,  #f7f7f7);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#d3d3d3', endColorstr='#f7f7f7');
    margin: 40px 15px;
}

.mainNav ul
{
    list-style: none;
    padding: 0px;
    margin: 0px;
}

.mainNav ul li
{
    display: inline-block;
    padding: 0px;
    margin: 0;
}

.mainNav ul li.nav
{
    font-family: SegoeUI;
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 500;
    line-height:40px;
    padding: 0 20px;
    border-right:1px solid #d3d3d3;
}

.mainNav ul li.nav:hover
{
    background: rgba(8,102,198,0.8);
    border-right:1px solid rgba(6,80,155,1);
    cursor:pointer;
    color:#fff !Important;
}

.mainNav ul li.nav span
{
    cursor:pointer;
}

.mainNav ul li.nav .dropdown
{
    display:none;
}

.mainNav ul li.nav:hover .dropdown,
.mainNav ul li.nav:hover .dropdown:focus
{
    position:absolute;
    display: block;
    background: rgba(8,102,198,0.8);
    height:auto;
    max-width:150px;
    box-shadow: 5px 5px 15px rgba(0,0,0,0.2);
    margin:0 0 0 -20px;

}

.mainNav ul li.nav:hover .dropdown ul
{
    list-style: none;
    padding: 0px;
    margin:0;
    overflow:hidden;
}

.mainNav ul li.nav:hover .dropdown ul li
{
    width:100%;
    padding:0px;
    margin: 0px;
}

.mainNav ul li.nav:hover .dropdown ul li a.subNav
{
    display:inline-block;
    min-width:100%;
    font-family: SegoeUI;
    color: #fff;
    font-size: 12px;
    padding:0 0 0 25px;
    line-height:30px;
    text-transform:none;
    border-bottom:1px dotted rgba(68,208,254,0.8);
}

.mainNav ul li.nav:hover .dropdown ul li a.subNav:hover
{
    background-color: rgba(6,80,155, 0.4);
}

/*------- Menu icons starts-----------*/

li.file
{
    background:url(../Images/Icons/1.png) no-repeat 4px center;
}

li.chart
{
    background:url(../Images/Icons/11.png) no-repeat 4px center;
}

li.home
{
    background:url(../Images/Icons/17.png) no-repeat 4px center;
}

li.meeting
{
    background:url(../Images/Icons/18.png) no-repeat 4px center;
}

li.stickynote
{
    background:url(../Images/Icons/26.png) no-repeat 4px center;
}

li.save
{
    background:url(../Images/Icons/22.png) no-repeat 4px center;
}

li.briefcase
{
    background:url(../Images/Icons/27.png) no-repeat 4px center;
}

li.print
{
    background:url(../Images/Icons/16.png) no-repeat 4px center;
}

/*------- Menu icons ends-----------*/

/*------ Main Nav Ends -------*/

and now let me show you the HTML code for dropdown menu:

</pre>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title>:: Multi level DD menu ::</title>
 <link href="CSS/Menu.css" rel="stylesheet" type="text/css" />
</head>
<body>
 <div class="mainWrapper">
 <div class="mainNav boxShadow borderRadius">
 <ul>
 <li class="nav"><span onclick="javascript:window.open('http://www.vitizon.com','_blank')">Home</span>
 <div class="dropdown">
 <ul>
 <li class="file"><a href="http://www.vitizon.com" class="subNav">New File</a></li>
 <li class="chart"><a href="http://www.vitizon.com" class="subNav">Charts</a></li>
 <li class="home"><a href="http://www.vitizon.com" class="subNav">Home</a></li>
 <li class="meeting"><a href="http://www.vitizon.com" class="subNav">Meeting</a></li>
 <li class="stickynote"><a href="http://www.vitizon.com" class="subNav">Sticky Notes</a></li>
 <li class="save"><a href="http://www.vitizon.com" class="subNav">Save</a></li>
 <li class="briefcase"><a href="http://www.vitizon.com" class="subNav">Business Files</a></li>
 <li class="print"><a href="http://www.vitizon.com" class="subNav">Print</a></li>
 </ul>
 </div>
 </li>

 <li class="nav"><span onclick="javascript:window.open('http://www.vitizon.com','_blank')">About Us</span>
 <div class="dropdown">
 <ul>
 <li class="file"><a href="http://www.vitizon.com" class="subNav">New File</a></li>
 <li class="chart"><a href="http://www.vitizon.com" class="subNav">Charts</a></li>
 <li class="home"><a href="http://www.vitizon.com" class="subNav">Home</a></li>
 <li class="meeting"><a href="http://www.vitizon.com" class="subNav">Meeting</a></li>
 <li class="stickynote"><a href="http://www.vitizon.com" class="subNav">Sticky Notes</a></li>
 <li class="save"><a href="http://www.vitizon.com" class="subNav">Save</a></li>
 <li class="briefcase"><a href="http://www.vitizon.com" class="subNav">Business Files</a></li>
 <li class="print"><a href="http://www.vitizon.com" class="subNav">Print</a></li>
 </ul>
 </div>
 </li>

 <li class="nav"><span onclick="javascript:window.open('http://www.vitizon.com','_blank')">products</span>
 <div class="dropdown">
 <ul>
 <li class="file"><a href="http://www.vitizon.com" class="subNav">New File</a></li>
 <li class="chart"><a href="http://www.vitizon.com" class="subNav">Charts</a></li>
 <li class="home"><a href="http://www.vitizon.com" class="subNav">Home</a></li>
 <li class="meeting"><a href="http://www.vitizon.com" class="subNav">Meeting</a></li>
 <li class="stickynote"><a href="http://www.vitizon.com" class="subNav">Sticky Notes</a></li>
 <li class="save"><a href="http://www.vitizon.com" class="subNav">Save</a></li>
 <li class="briefcase"><a href="http://www.vitizon.com" class="subNav">Business Files</a></li>
 <li class="print"><a href="http://www.vitizon.com" class="subNav">Print</a></li>
 </ul>
 </div>
 </li>

 <li class="nav"><span onclick="javascript:window.open('http://www.vitizon.com','_blank')">services</span>
 <div class="dropdown">
 <ul>
 <li class="file"><a href="http://www.vitizon.com" class="subNav">New File</a></li>
 <li class="chart"><a href="http://www.vitizon.com" class="subNav">Charts</a></li>
 <li class="home"><a href="http://www.vitizon.com" class="subNav">Home</a></li>
 <li class="meeting"><a href="http://www.vitizon.com" class="subNav">Meeting</a></li>
 <li class="stickynote"><a href="http://www.vitizon.com" class="subNav">Sticky Notes</a></li>
 <li class="save"><a href="http://www.vitizon.com" class="subNav">Save</a></li>
 <li class="briefcase"><a href="http://www.vitizon.com" class="subNav">Business Files</a></li>
 <li class="print"><a href="http://www.vitizon.com" class="subNav">Solutions overviews</a></li>
 </ul>
 </div>
 </li>

 <li class="nav"><span onclick="javascript:window.open('http://www.vitizon.com','_blank')">FAQ's</span>
 <div class="dropdown">
 <ul>
 <li class="file"><a href="http://www.vitizon.com" class="subNav">New File</a></li>
 <li class="chart"><a href="http://www.vitizon.com" class="subNav">Charts</a></li>
 <li class="home"><a href="http://www.vitizon.com" class="subNav">Home</a></li>
 <li class="meeting"><a href="http://www.vitizon.com" class="subNav">Meeting</a></li>
 <li class="stickynote"><a href="http://www.vitizon.com" class="subNav">Sticky Notes</a></li>
 <li class="save"><a href="http://www.vitizon.com" class="subNav">Save</a></li>
 <li class="briefcase"><a href="http://www.vitizon.com" class="subNav">Business Files</a></li>
 <li class="print"><a href="http://www.vitizon.com" class="subNav">Solutions overviews</a></li>
 </ul>
 </div>
 </li>

 <li class="nav"><span onclick="javascript:window.open('http://www.vitizon.com','_blank')">Careers</span>
 <div class="dropdown">
 <ul>
 <li class="file"><a href="http://www.vitizon.com" class="subNav">New Jobs</a></li>
 <li class="chart"><a href="http://www.vitizon.com" class="subNav">Company Tour</a></li>
 <li class="home"><a href="http://www.vitizon.com" class="subNav">Why to join us</a></li>
 <li class="meeting"><a href="http://www.vitizon.com" class="subNav">Submit resume</a></li>
 </ul>
 </div>
 </li>

 <li class="nav"><span onclick="javascript:window.open('http://www.vitizon.com','_blank')">Contact us</span>
 <div class="dropdown">
 <ul>
 <li class="file"><a href="http://www.vitizon.com" class="subNav">Location</a></li>
 <li class="chart"><a href="http://www.vitizon.com" class="subNav">Office Address</a></li>
 <li class="home"><a href="http://www.vitizon.com" class="subNav">Enquiry</a></li>
 </ul>
 </div>
 </li>
 </ul>
 </div>
 </div>
</body>
</html>
<pre>

Create a HTML page say index.html with in any editor of your choice and paste the HTML code with in it. Now copy the CSS code and create new css file namely “Menu” and put it is CSS folder of the project.

Note i have used some dummy icon images you can use your own and name them as per your needs and put them within the image folder. The Icon image size is 16×16. I had used the icons from site . I hope you will like this and i am eagerly waiting for your comments/suggestions and i would like to mention that all are free to use this code in their projects and update the same.