Do’s and Don’ts of UI Design

This blog is based on my meeting with Tom, Usability Manager of Guardian. I have added the suggestions he made to my presentation “Best Practices for Web UI”. Here is a quick list of Do’s and Dont’s of Web Application UI.

Do’s

• Be consistent!
  • Use the same icon for the same link or activity (eg. Home, delete, add etc..)
  • Links color
  • Button styles
  • Style all pop-ups the same
  • Illustration style (use of lines, color pallets, representation of people)
  • Icon size
  • Providing feedback to the user
  • Using Fonts (including Font size)
• Layout
  • Anticipate the reading order – place content/navigation/buttons on the page where the user will need them
  • Design to a grid and stick to it http://www.smashingmagazine.com
  • Use consistent and familiar layouts (eg, header, body, footer)
  • Consider framing your page to delineate margins
  • Anticipate the limitations of XHTML/CSS and proper DIV based layout
  • Leave breathing room – ample margins (including image/branding elements)
  • Don’t leave empty space
  • Centre the application in the window – don’t left-align it (Or use liquid layout)
  • Hide non-relevant content
  • Consider that fixed-width layouts are generally easier to develop and design for (but fluid layouts are officially more accessible, though this is still being debated furiously by the UI community)
• Color
  • Choose a basic color combination and stick to it throughout your application. Eg:, foreground, background, highlight 1, highlight 2 ( kuler.adobe.com)
  • You can use gradient tints of single colors, but these are ideally subtle
  • Ensure foreground and background elements are sufficiently contrasting
    http://snook.ca/technical/colour_contrast/colour.html
• Text
  • Limit your font-set – no more than two fonts in a site/application
  • Use web-safe fonts http://www.fonttester.com/help/list_of_web_safe_fonts.html
  • Use the same font for the same purpose (eg. Georgia for heading at www.guardian.co.uk, Arial for body text)
  • Choose your main font and stick to it
  • Use variations of your font set to denote types of content (links in different colors, sub-headings in bold or colors, headings etc..)
• Navigation
  • Place navigation in the same places throughout a site / application
  • Place navigation where users expect to see it (top/left, next buttons bottom-right, etc)
  • Place relevant navigation close to its content
  • Group navigation by appropriate themes/topics/actions
  • Keep navigation simple and relevant to the user
  • Use descriptive links
  • Highlight important / relevant links over others on page (eg, submit buttons)
• IA
  • Anticipate your users’ needs – do they want to be led through a process (wizard) or to enter all of their info at once (form)
• Content and naming / terminology
  • Create user expectation
  • Follow through designs to sub-pages
  • Use language that the user expects or is familiar with
  • Call elements by recognizable names
  • One named element should do the same thing through the application
• Technical
  • Test designs in every possible scenario before it is deployed

Don’ts

• Navigation
  • Hide critical information from the user or force them to interact to see it
• Color
  • Use too extreme gradients
  • Use gradients with very different colors
  • Use dark shadows
  • Use colors that don’t contrast
  • Use colors that are inappropriate for color-blind users (Eg, red on green)
• Fonts
  • Use many fonts
  • Use more than one font too often
• Layout
  • Overload the user with too many options
  • Place the same function/button in different places on different pages (relative to the content)

Conclusion

This list is neither exhaustive nor the final word in UI design. Creativity comes from breaking rules, while best practices help leverage conventional wisdom to create simple and effective UI quickly. A good UI designer will combine creativity and convention to create the perfect interface for the client’s needs.

You are welcome to add to this list via your comments…

What does poor website usability cost you?

Recently I read an wonderful article about poor usability. Its really a must read article. Here I've given for you.


Product returns in the U.S. cost a hundred billion dollars a year, and a recent study by Elke den Ouden, of Philips Electronics, found that at least half of returned products have nothing wrong with them. Consumers just couldn’t figure out how to use them.

That’s one of several interesting observations James Surowiecki makes in a recent Financial Page column in the New Yorker. Surowiecki’s piece focuses on the obstacles to creating usable consumer products, but you don’t have to leap too far to make a comparison or two to website usability.

The Philips Electronics study cited above got me wondering about the revenue e-commerce site owners leave on the table when they offer visitors a sub par user experience. While it would be somewhere between disingenuous and stupid to count every site abandon as an order sacrificed to poor usability, it’s worth considering what fraction of these missed opportunities better usability could in fact reclaim. And then think about that portion’s worth in terms of revenue, customer satisfaction and lifetime value.

Also interesting, especially in light of Surowiecki’s authorship of The Wisdom of Crowds is his explanation of why consumer electronics products continue to suffer from “feature creep” despite designers and engineers increasingly knowing better. Dependent on their position in the purchase cycle, the crowd may not actually be so wise.

It turns out that when we look at a new product in a store we tend to think that the more features there are, the better. It’s only once we get the product home and try to use it that we realize the virtues of simplicity. A recent study by a trio of marketing academics—Debora Viana Thompson, Rebecca W. Hamilton, and Roland T. Rust—found that when consumers were given a choice of three models, of varying complexity, of a digital device, more than sixty per cent chose the one with the most features. Then, when the subjects were given the chance to customize their product, choosing from twenty-five features, they behaved like kids in a candy store. (Twenty features was the average.) But, when they were asked to use the digital device, so-called “feature fatigue” set in. They became frustrated with the plethora of options they had created, and ended up happier with a simpler product.

Fascinating stuff in and of itself, and it seems like there’s at least one instructive parallel to the site design process. Just because users say they want a feature (think focus group) does not mean they’ll be ready, willing, or able to use and enjoy this feature if you go ahead and add it your site.

Whether you’re designing a cell phone, a software application or a new payment method for your Checkout, the challenge is that each additional feature demands that your user make an additional decision. That decision can be as seemingly benign as “Can I afford to ignore this button?” or as expletive inducing as “What the &*%#! is this third scroll bar for?” But what can you do, ignore your customers’ requests? There’s no perfect answer. But your implementation can make a difference and user testing early and often significantly increases your chances for success.

Usability Issues on shutterstock.com

I am using shutterstock.com for downloading corporate images. Due to bad usability of downloading , I need to wait for long time to download some images. I need to cross following pages.
1. Searching
2. Select an thumb size Image ( we can select only one image at a time)
3. It will show the selected image in big size . Click to download at various resolution.
4. Type the security key & Press "Enter".
5. Again search it

If I want to download 5 images at a time in same catagory, I have to do all the above five steps for everytime. It would take more than 20 mins even my browser much faster. Its a good example for BAD Usability.
Lot of simple solutions to fix this usability issue.

My solution is
1.Select multiple images at search result page.
2. List the selected images with (default is Medium resolution) resolution. If you want to change the resolution, change it there by multiple or single. Give a security code on the same page. ( convert all image files into a zip file ) download it.

If you have any other solutions, Post your comment here.

Usability Joke

Recently I read an article about usability engineering. Its really fun and fantastic examples for lack of usability engineering.
I agree with that auther. 80% of software company doesn't care about usability. Most of my friends in software industry don't know my role.
Following conversation always happening with my friends ( s/w professionals).

Friend : What are you doing now.
Me : I am working as a Usability Engineer in a s/w company.
Friend: What is that?
Me : You know How google is being first in Internet industry ? Why not yahoo?

( I will start the usability story from there..)ok come back to the topic. Read this article here..http://www.ataricommunity.com/forums/showthread.php?t=633417

Realize how important usability is.

Competitors of Usability Manager

Today I found few tools like my dream tool, Usability Manager.

First one is CarettaSoftware's GUI Design Studio 2.4. Its a specialised tool for Software Designers, Analysts, Usability Engineers, Project Managers and Consultants.

Second is Axure RP pro. It is dedicated to helping others design applications that are more useful and more usable. Similar to GUI Design Studio.

My UsabilityManager is more advanced tool for usability engineering. It covers not only Image Prototype, WireFrame and specification, but also can do Usability Testing, Heuristic evaluation in a unique way.

The Usability Testing report will have complete details of End User actions. And It will suggest where will you improve the usability design.

A prototype for Usability Engineering Tool

Being an Usability Engineer, i searched a lot for a complete Usability Tool. I got a few, but they are limited with their functionality. Later i thought of making use of zoho products to build such a Tool.
For Example, Zoho Creator can be used for conducting "Usability Reviews". Zoho Wiki can be used to gather "Usability Requirements". Toondoo can be used for "Usabiity Prototype Designing" ( Both WireFrame and Architecture ).


By using these ideas, I have done a prototype for this Usability Tool.


How this tool will perform ?


I. Usability Requirement Collection :



1 Select an existing project or Create a new project.



2 Create modules and write the requirement details for that modules



3 Create child module(s), if any.





II ) Usability Prototype :















1 Image Prototype ( Architecture, Web Interface, Java Interface, .Net Interface etc., )














2 HTML Prototype


III. Usability Testing :

1. Install the Browser Agent in both the Server and Client systems.


2. Write the Usability Test Case and send it to the usability testing participants ( optional )



3. Record the Usability Engineer's Actions on the Web Application ( That means the expected result )



4. Connect the Server and conduct the Usability Testing by participants in Client systems.



5. This Tool will compare the Expected Result (UI Engineer's actions) with Usability Testing results (Participant actions) and generate the result.


6. Usability Engineers can view the participant's actions by their recorded scripts.




IV. Usability Review :

1. Using a simple form, collect the Usability Issues details.

2. Using these details, Report page as well as few charts (like Severity Graph, Issues Graph and Location Graph) can be generated.

3. Write a Review document and report it to your head.

An Interesting imagination about web 2.0

Recently I read an article about " Future of web 2.0" . Author "Nat Torington" describes the web 2.o future upto 2022. But I think the life span of web 2.0 won't be long. Some other new technology will be beaten in future. But It is purely depending on browser's revolution and usability needs.

The Future of Web 2.0
I've been in Singapore this week, giving presentations on Web 2.0 and helping the government's Infocomm Development Agency with their plans to foster startups in the country. I often get asked about the future of Web 2.0--is it a bubble, when will it be replaced by something new? Fortunately we've done a lot of work on this at the O'Reilly Radar lately, and I'm able to lay out a clear vision of the future for them. It goes something like this ...

2004: Web 2.0 coined, the movement named.

2006: "You" named TIME Magazine's "Person of the Year", a tribute to Web 2.0.

2007: You are here.

2008: Firefox 3.14159 ships (those geeks at Mozilla just won't be able to help themselves, and the resulting flamewar and developer resignations over whether to call it "PiFox" or not will lead to it being dubbed "PyreFox"). This version adds offline support to Ajax web applications. People will want to call the result "Web 3.0" but that term was claimed in advance by the Semantic Web so the blogosphere will quickly decide to call this Web 2.86 but the period will be quickly quickly lost (to the condemnation of purists) and the media will refer to "Web 286".

2009: Semantic web researchers develop a deductive calculator that solves arbitrary problems using the math knowledge encoded in the web. It would be heavily adopted by school children to solve their homework but it will require the problems be expressed in TeX markup and the only papers to have been expressed in the format will be from a obscure Russian grad school that specializes in the geometric expression of information theory results in Riemann spaces. The imminent arrival of Web 3.0 will be predicted.

2009: The fascination with widgets leads Firefox 4 to integrate with the native operating system's desktop to offer a new cross-platform widget environment. Out of respect for the diligent workers still building the Semantic Web, it is agreed that we'll reserve "3.0" for their work. Bloggers skip that number and go straight to Web 3.1.

2010: Semantic Web developers release a new XML format. This will be hailed as the final step to the completion of Web 3.0.

2010: The growing proliferation of complex user interfaces built with Ajax, Flex, and anything else web developers can get their hands on will lead to growing calls for standardisation. The W3C will fail to be able to do this, but a consensus API and widget set from the leading Ajax toolkits will emerge and be implemented by Firefox 5 and then, several months later, IE 12. Because it's almost 100% of the way to Tim's vision of the Internet Operating system, he'll argue (and win) that it should be called Web 95.

2011: Semantic Web researchers will unveil a game that tricks kids into adding tuples to an RDF data store. Despite being hailed as the gateway to Web 3.0, all that will result is the world's most complete database of Pokemon characters.

2012: The clandestine Mozilla thin client system will launch--an entire bootable platform, built on Linux, that only exists to run the web server. The war over whether it should be GNOME or KDE will have been settled by producing two versions, which hampers adoption rates initially. Finally the two projects will be forced to merge or kill the best chance they have to overthrow Windows ("2011 is the year of the Linux desktop", headlines will pronounce) and the GNODE (as it will be known)-powered Firefox 6 will sweep the world. Headlines pronounce Web 98.

2013: A long delay will pass without much innovation, during which time Firefox 6 will achieve near-complete market penetration before the arrival of malware targeting it. The Mozilla team, caught between bug fixes and new features, will struggle to finish Firefox 7. Their solution will be to acquire Opera and release it on top of OpenSolaris as an "Enterprise-ready Firefox". The resulting fragmentation of the web (thought to be over after IE 13 was retired when Microsoft turned into a pure services company in 2012) results in chaos. Mozilla will promise but never-deliver a web portability tool dubbed "No Trouble", and in its honour wags will dub this era "Web NT".

2013: Semantic Web researchers will unveil a new RDF database for Java 6 Enterprise Edition ("Raging Marmot"). Parties will be thrown in honour of the arrival of Web 3.0.
2015: Mozilla will EOL their Opera line, integrate the few remaining features they liked into Firefox. To win back the faith of their users, they'll invest heavily in designers and UI specialists. The resulting focus on user experience will cause this incarnation of the web to be known as "Web XP".

2020: After many years of development and malware fighting, Mozilla will drastically revise downward the feature set for Firefox 7. They'll skip version 7, and release "Firefox X". X will support RSS for blogs, IM, twitter, and the new communication system that flashes updates from your friends every 2 seconds in yellow on black 64pt type as you work. "Crack", as the system will be called, will be so addictive that it drives sales of Firefox X through the roof (the Mozilla Corporation will have burned through its cash reserves attempting to get Firefox 7 out the door and must consequently put a price tag on X). From the profits and resulting IPO Mozilla will launch the Mozilla Benevolence Fund, dedicated to solving disease, eliminating hunger, and spreading warm fuzzies in the third world. Within six months, the body count of Crack users found dead in the glow of their screens (unable to leave because of the addictive sense of connection provided by Crack) will turn public opinion and Wall Street against Mozilla but the genie is out of the bottle. As the corpses stack up in city streets, the professional time-wasting class known as Knowledge Workers will have been eliminated from the world. We'll return to a hunter-gatherer-like society in which the strong survive and the weak are feasted upon. As civilization crumbles, bards will proclaim we are able to see into a new world that's free of offices and cities, a world where mankind lives in rolling green fields and cloud-filled skies. In honour of this view of the world, the bards proclaim the age of Web Vista.

2022: The last Semantic Web researcher announces a Sudoku solver that operates on RDF-expressed puzzles. The failure of the last functioning laptop (a milspec Pentium from 2008) is all that prevents the arrival of Web 3.0.