Saturday, September 22, 2012

UI Designs DOs and DON’Ts with Examples

Examples of user interface bad practices.

CSE.lk


If you go to CSE site(http://www.cse.lk/welcome.htm) any state look up need a ‘my cse’ account and if you go to their home page you may see that there is a place to sign in to their account, but it is very hard to find where to start a account. They should place it at the top.
This is where you find a place to sign up, right at the bottom and hidden from all.
 
clip_image001[4]clip_image002[4]clip_image004[4]



When you click there, you are directed to another page .There you find following currently unavailable massage. That massage is also not meeting the specification. They should emphasize more on the color on the heading so it will get more attention.
clip_image006[4]
Just blow that same page you find a “Sign Up” button again, which do not give a respond at all. At least it should give a same error massage again. Best possible way is to remove that icon temporary from that page.
clip_image008[4]




transparency.lk


Go to URL(http://www.transparency.lk/) and you will be at their home page.
clip_image009[4]I must tell you that this site is actually a good one but there was a highly annoying bad UI design with banners, which was rotating right up the page.


clip_image011[4]

Each banner is designed in such a way that user feels that they are clickable.
clip_image012[4]clip_image014[4]

clip_image015[4]clip_image017[4]


However, there do not respond at all. So what is the solution for that? Either they have to design those banners again or they have to design them to lead users to right place

keellssuper.lk


This is a worst one I saw when I was searching through the internet. It is like a full mess, lot of things all over the place and cannot find anything.
clip_image019[4]


I have marked there lot of components doing various thing, in various shapes colours, font sizes and it violated lot of good practices which are listed below. Therefore, to improve the site they have to re-design their site according to below best practices
·         Certain aspects of an interface should behave in consistent ways at all times for all screens
·         Organize data fields to match user expectations, or to organize user input
·         Do not use more than four different font sizes per screen
·         Do not use more than four different colors on a screen
·         On text, screens do not use more than three fonts on a single screen
·         Use a balanced screen layout - do not put too much information at the top of the screen - try to balance information in each screen quadrant
·         Use plenty of 'white space' around text blocks - use at least 50% white space for text screens
·         Group information logically
·         In the best case, they can accommodate user preferences by allowing some degree of customization of screen layout, appearance, icons etc.




Examples of user interface good practices.


mountlaviniahotel.lk


Go to their home page (http://www.mountlaviniahotel.lk/) and at the top try to do a reservation and then click proceed. If you do that, you will find that it is there main purpose using the web site and they have just placed reservation function in the ideal place. In addition, if you click in the date place it gives you a calendar that makes It much easy (same with the other fields).
clip_image020[4]clip_image022[4]

After selecting the values and if you press ‘proceed’, you will get a error massage telling what parts are missing (if you didn’t fill any required field). If not you will be getting screen like below
clip_image024[4]

As you can see, there is very simple design. They have got 2 things right here
·         Break complex tasks into simpler tasks
·         Break long sequences into separate steps
They have 4 simple steps and they show that in the corner, giving the user the filling of this is not a long form. At the most right of the page as I have boxed they show a summary of what we have filled up to now. Therefore, if there is any mistake you can go back and correct that.



odel.lk


Another great site I saw in the search of good .lk sites. This has lot of good things that make this a good UI. Go to their home page (http://www.odel.lk)
clip_image025[4]clip_image027[4]

As I have boxed, there is a very easy navigation that covers whole site. Main things that I see in this site are Consistency, simplicity ease of use. If you go MEN > T-shirts in the main menu, you will be directed to following page.
clip_image029[4]

I have boxed a part that they allow you to choose what you need and they filter the results according to our choice. The Banner “Mens T-Shirts” helps you to find where you are. If you go to any other page, they are also similar to this, which shows the consistency. Just click on a product to add that to you cart or to find more information.
clip_image031[4]
At the right of the screen you get a short summery of the product and in left you get couple of screen shorts that give all the information in a one view. Just great!

No comments:

Post a Comment