Sunday, February 06, 2011

User Interface Design Tips, Techniques, and Principles

1. Tips and Techniques

The following tips and techniques that I have learned over the years should prove valuable:
  1. Consistency, consistency, consistency. I believe the most important thing you can possibly do is ensure your user interface works consistently. If you can double-click on items in one list and have something happen, then you should be able to double-click on items in any other list and have the same sort of thing happen. Put your buttons in consistent places on all your windows, use the same wording in labels and messages, and use a consistent color scheme throughout. Consistency in your user interface enables your users to build an accurate mental model of the way it works, and accurate mental models lead to lower training and support costs.
  2. Set standards and stick to them. The only way you can ensure consistency within your application is to set user interface design standards, and then stick to them.  You should follow Agile Modeling (AM)’s Apply Modeling Standards practice in all aspects of software development, including user interface design.
  3. Be prepared to hold the line. When you are developing the user interface for your system you will discover that your stakeholders often have some unusual ideas as to how the user interface should be developed.  You should definitely listen to these ideas but you also need to make your stakeholders aware of your corporate UI standards and the need to conform to them. 
  4. Explain the rules. Your users need to know how to work with the application you built for them. When an application works consistently, it means you only have to explain the rules once. This is a lot easier than explaining in detail exactly how to use each feature in an application step-by-step.
  5. Navigation between major user interface items is important. If it is difficult to get from one screen to another, then your users will quickly become frustrated and give up. When the flow between screens matches the flow of the work the user is trying to accomplish, then your application will make sense to your users. Because different users work in different ways, your system needs to be flexible enough to support their various approaches. User interface-flow diagrams should optionally be developed to further your understanding of the flow of your user interface.
  6. Navigation within a screen is important. In Western societies, people read left to right and top to bottom. Because people are used to this, should you design screens that are also organized left to right and top to bottom when designing a user interface for people from this culture? You want to organize navigation between widgets on your screen in a manner users will find familiar to them.
  7. Word your messages and labels effectively. The text you display on your screens is a primary source of information for your users. If your text is worded poorly, then your interface will be perceived poorly by your users. Using full words and sentences, as opposed to abbreviations and codes, makes your text easier to understand.  Your messages should be worded positively, imply that the user is in control, and provide insight into how to use the application properly. For example, which message do you find more appealing “You have input the wrong information” or “An account number should be eight digits in length.” Furthermore, your messages should be worded consistently and displayed in a consistent place on the screen. Although the messages “The person’s first name must be input” and “An account number should be input” are separately worded well, together they are inconsistent. In light of the first message, a better wording of the second message would be “The account number must be input” to make the two messages consistent.
  8. Understand the UI widgets. You should use the right widget for the right task, helping to increase the consistency in your application and probably making it easier to build the application in the first place. The only way you can learn how to use widgets properly is to read and understand the user-interface standards and guidelines your organization has adopted.
  9. Look at other applications with a grain of salt. Unless you know another application has been verified to follow the user interface-standards and guidelines of your organization, don’t assume the application is doing things right. Although looking at the work of others to get ideas is always a good idea, until you know how to distinguish between good user interface design and bad user interface design, you must be careful. Too many developers make the mistake of imitating the user interface of poorly designed software.
  10. Use color appropriately. Color should be used sparingly in your applications and, if you do use it, you must also use a secondary indicator. The problem is that some of your users may be color blind and if you are using color to highlight something on a screen, then you need to do something else to make it stand out if you want these people to notice it. You also want to use colors in your application consistently, so you have a common look and feel throughout your application.
  11. Follow the contrast rule. If you are going to use color in your application, you need to ensure that your screens are still readable. The best way to do this is to follow the contrast rule: Use dark text on light backgrounds and light text on dark backgrounds. Reading blue text on a white background is easy, but reading blue text on a red background is difficult. The problem is not enough contrast exists between blue and red to make it easy to read, whereas there is a lot of contrast between blue and white.
  12. Align fields effectively. When a screen has more than one editing field, you want to organize the fields in a way that is both visually appealing and efficient. I have always found the best way to do so is to left-justify edit fields: in other words, make the left-hand side of each edit field line up in a straight line, one over the other. The corresponding labels should be right-justified and placed immediately beside the field. This is a clean and efficient way to organize the fields on a screen.
  13. Expect your users to make mistakes. How many times have you accidentally deleted some text in one of your files or deleted the file itself? Were you able to recover from these mistakes or were you forced to redo hours, or even days, of work? The reality is that to err is human, so you should design your user interface to recover from mistakes made by your users. 
  14. Justify data appropriately. For columns of data, common practice is to right-justify integers, decimal align floating-point numbers, and to left-justify strings.
  15. Your design should be intuitable. In other words, if your users don’t know how to use your software, they should be able to determine how to use it by making educated guesses. Even when the guesses are wrong, your system should provide reasonable results from which your users can readily understand and ideally learn.
  16. Don’t create busy user interfaces. Crowded screens are difficult to understand and, hence, are difficult to use. Experimental results show that the overall density of the screen should not exceed 40 percent, whereas local density within groupings should not exceed 62 percent.
  17. Group things effectively. Items that are logically connected should be grouped together on the screen to communicate they are connected, whereas items that have nothing to do with each other should be separated. You can use white space between collections of items to group them and/or you can put boxes around them to accomplish the same thing.
  18. Take an evolutionary approach.  Techniques such as user interface prototyping and Agile Model Driven Development (AMDD) are critical to your success as a developer.

2. UI Design Principles

Let’s start with the fundamentals of user interface design. Constantine and Lockwood describe a collection of principles for improving the quality of your user interface design. These principles are
  1. The structure principle. Your design should organize the user interface purposefully, in meaningful and useful ways based on clear, consistent models that are apparent and recognizable to users, putting related things together and separating unrelated things, differentiating dissimilar things and making similar things resemble one another. The structure principle is concerned with your overall user interface architecture.
  2. The simplicity principle. Your design should make simple, common tasks simple to do, communicating clearly and simply in the user’s own language, and providing good shortcuts that are meaningfully related to longer procedures.
  3. The visibility principle. Your design should keep all needed options and materials for a given task visible without distracting the user with extraneous or redundant information. Good designs don’t overwhelm users with too many alternatives or confuse them with unneeded information.
  4. The feedback principle. Your design should keep users informed of actions or interpretations, changes of state or condition, and errors or exceptions that are relevant and of interest to the user through clear, concise, and unambiguous language familiar to users.
  5. The tolerance principle. Your design should be flexible and tolerant, reducing the cost of mistakes and misuse by allowing undoing and redoing, while also preventing errors wherever possible by tolerating varied inputs and sequences and by interpreting all reasonable actions reasonable.
  6. The reuse principle. Your design should reuse internal and external components and behaviors, maintaining consistency with purpose rather than merely arbitrary consistency, thus reducing the need for users to rethink and remember.

top 10 adsense earners in tamilnadu

Name: Srinivas Tamada Location: Chennai, India but now is in USA Blog: http://www.9lessons.info Blog Niche: Ajax, PHP, Web Design. ...

Labels

Abbreviations Acting choices actress-actors addons ads adsense drawbacks advantages advantages of chennai Advantages of Links directory advantages of plastic cheppal stand advices affiliates all ads amazon android articles asp ASP dot Net design issues astrolgy autobiography automobile avoid hacking avoid snake bite backgrounds banners BCS Best category for best collections best PPT Presentations best things biodata blog Blog Advertising blog stats blogger blogger drawbacks blogs Browser errors Browser Issues bus ticketing machines business business loss Business Plan Business rental business wise drawbacks Buying Expired Domains capgemini Car buying tips certified professional cheat frauds Cinema industry cities clients Closed IT/Software companies closed websites codings Commented topics of my blog comments companies Construction contacts Copyright creativity Credit Card Prefix Numbers css CSS drawbacks CSS elements combination CSS errors css ID rules css limitations css links css selectors Cute babies cv demonetization design category disclaim DNS error Documentation domain drawbacks Drawbacks in Madurai bus stand drawbacks of legins drawbacks of strike drawbacks_others duty education electronics emails embedded empty post emptyland Error Code and Message eshop Extra expenses Face detection apps use family FAQ FENG OFFICE finance loans firecrackers firewall nonblockable sites food For sales Free fresh content friends fun general - new - temp GHS girls google google Ads Google Adsense Revenue Sharing Sites government GPS merits graphicsbg Green earth Hacking Methods hand held machines handicapped reservation header wordings health Helpful Slogams HM home shifting how to avoid social media spam HTML html encoder HTML5 website layout IBM IDEA IE IE problems india infosys internet Internet/Social Media Marketing interview questions ISBN IT hardware products for rental IT Hardware-software ja jallikattu javascripts job job analysis joomla KSRTC kvic links links_background verification websites links_blogs Links_certifications links_different websites links_letterwise Links_mobile websites Links_My Designs links_my SMM links_other states Links_Product_brand websites links_Reciprocal Links links_SEO/SEM links_Tamilnadu links_tenders links_tools links_UI design links_use for all* list list of industrial estate list of IT parks list of toll free numbers M2M Madurai Madurai 2020 Mail box folder maintenance Malayalam Malayalam movie my reviews manjula miss Manufacturing Industries marketing marketing ideas me at divisional sports MNC site bugs mobile monthly extra Multiple options in codings my my achievements my achivements My advt - ads My all ads My best collections my best ideas my comments My cousin's post in FB My donations my friends with actor actress My Google dashboard My horoscope my linkedin profile My online interview My Portfolio my posts links My questions my SEO experience my social media profiles my stack overflow profiles My Stackoverflow site answers My works Names nested html Netscape Navigator new blogs New build house for sale New Concepts news online earnings online generators online scams open office drawbacks Open source Opera orkut drawbacks Others view our grandparents Our ID and Numbers outsource statistics own ideas own ideas_aboutme own views page pixel collapse when scrolling in firefox Page Speed Performance parallax scrolling websites Partners Personals photos Photos - art Photos_actress photos_screenshots PHP plans Plots for sale poems policy Pollution Facts powercut Powerpoint press release Problems and solutions - ATM Problems and solutions - Education Problems and solutions - Hardware Problems and solutions - Mobilephones Problems and solutions - NGO Problems and solutions - Software Problems and solutions - Website problems in browsing center/internet cafe Products programmers problems programs proxy software Quality guidelines Rajamani realesate reasons for power shortage Recent comments relatives relatives business resume RS 232 dotmatrix printers rti sales SBI search engine search type websites security Security Alert regarding Serious CMS Attack SEM portfolio SEO Difficulty SEO for blogs SEO portfolio SEO tools SEO-SMM-ORM Plan SEO/SEM sil ads Site Tags siteworth slogans SMS benefits Social Interest - public use social media marketing Social Media Optimization social media widgets softland-palmtec software errors Software Testing Softwares solairaja sports SQL SQL queries stars statistics stop software patents tablet Grip and interaction Tamil - Tamilar - Tamilnadu TATA TCS technicals Technology tenders Testing Tips text magics Thanks Things to do before you die in India Things to Watch in 2014 thirumalai Tips Tips - Buseness tips Tips - Health tips Tips - life tips tips for demo video preparation Tips for doing SEO/SMM Tips for Good-Employee Tips for HR Tips for old money top 10 adsense earners in tamilnadu tours Travels TV UI Certifications Q & A UI design useful best software latest versions Useful websites for HTML Developer videos visa vista icons w3c standards wallpapers ways to find a job Web design Web design and developments Web developments Web Services web UI design shapes webhosting Website Features website templates Widgets collections Yahoo சுயசரிதம்

:: Useful web links List