Real World DotNetNuke - Part III
The User Interface – Top 10 Tips for the Web
The user interface is one of the most important aspects of any development project. A user decides quickly whether your application is useable or not, regardless of what it “can do”. If the user interface is clunky or confusing, most people will move on to an alternative solution even without the bells and whistles. Their job is to perform tasks, your job is to make it easy to perform these tasks.
Developers are a rare breed and they tend to concentrate on how things work, rather than how to work things. Sure DotNetNuke gives you this wonderful framework to allow users to edit text from their browser, but anyone who has spent considerable time constructing a beautiful page knows how frustrating it is when they happen to click on the page and hit the backspace button. Or the back button on the keyboard, or the little back button on the side of the mouse. You have just lost all of your work!
How productive is this serious flaw of browser technology? How many times have you written the ultimate riposte on a forum only to watch it disappear into never-never-land?
The number one complaint about web based user interfaces is the ability to obliterate your work in the blink of an eye. While there are technical explanations for why this occurs, and manual techniques to help prevent loss, there has not been enough effort to resolve this recurring nightmare of an issue.
If we could come up with ways to prevent this from happening and drop it in the core of DotNetNuke, it would really change the world. Therein lies a challenge to everyone reading this – save the data from each control on a form to fix this data entry loss once and for all – creating the defacto standard for user friendly web applications.
[Subliminal seduction: AJAX]
That will be the hard part. The following examples are extremely easy to fix and should be a part of your everyday implementation of user interfaces.
10) Don’t repeat words
Data grids, views and repeaters are very useful in any application, yet it is far too easy to replicate information. Try not to use the “Select, Edit, Delete” technique on detail lines. Ideally use a hyperlink to the data you want to drill down to edit, and/or a simple graphic to indicate operations such as delete. It is much more intuitive for the user.
9) Don’t conditionally hide things
Nothing is worse than trying to guess where a field or option is if it hidden and only displayed when something else is changed. At least display the hidden fields grayed out (disabled), then enable or disable them accordingly to your logic. This helps users remember where these features are.
Added bonus: Tool tips are not the best way to display important information.
8) Don’t be negative
Use simple words or phrases for fieldname and never use “Not” within a fieldname or label. Checkboxes should be as intuitive as possible, checked means yes, not checked means no. Adding “Not” or “Disabled” to a field or description will confuse a user and probably give yourself grief when you are coding around the data.
For a great example of how not to describe things, in Microsoft Internet Explorer select Tools|Options and click on the Advanced tab. Read through the settings and you will quickly understand how it can be confusing.
7) Limit Drop Down Listbox Information
Listboxes are great for a limited amount of data, anything more than a page is a waste and will cause operator data entry errors. Populating a listbox from an entire customer or item list is a no-no, use a search textbox to list related results instead. Add a hyperlink to the results to help the user get there quickly.
This issue is combined with #9 and #10 on www.snowcovered.com. The product information is already displayed in one module, duplicated in the Place Your Order module and hidden in the drop down list.
Listboxes with multi-select should be replaced with a checkbox list.
Often you can use other techniques to get the job accomplished. For example, instead of making an order entry form with a drop down list box of customers let the user find a customer and use a New Order button on the customer information page.
6) Careful with colors
This is a personal issue because I suffer from colorblindness. I don’t know how many times I’ve seen a colored ball or square that represents something, but the legend and data it refers to is useless to me when I just can’t see the difference between colors. Please use different shapes or other techniques to convey this type of information.
508 Accessibility Guidelines, Subpart B, Section 1194.21, Subsection (i)
5) Click here
Users do not need to be told to “click here.” If the text does not clearly indicate a link, redesign the content so it does. Also, never use double clicks in a web application as they will totally confuse a user.
Consider the Three Click Rule. If a user can’t find what they are looking for within three clicks, they are likely to get frustrated and leave your site. (Although scientifically refuted, the concept is valuable and helpful to focus on the true needs of users.
While we’re on the subject of clicking, never, ever, tell a user not to click something twice. Disable the button or display a new page so they can’t do it in the first place! This is by far the best example of indolence and creates all sorts of opportunity for users to break your application (or keep your customer service department busy). There is absolutely no excuse for any developer to tell a user not to press something on the screen.
4) Content Complexity
The name of the game is not to overwhelm your viewer with as much information that can possibly fit on a page. Use extra white space, single line paragraphs, and a consistent font to display data to the user. Use the skin to change appearance application wide, and rarely use italics, bold, or special colors.
Unless you are a graphics designer, or writing a game, your modules should be planned around the task at hand. You don’t need exciting graphics or flash animations to find customers, view daily sales, or print an invoice.
3) Data Entry – Errors
Data fields should be validated as mistakes are made, not in a group after the submit button is pressed, and definitely not in a popup or msgbox. Page by page validation is extremely confusing and rarely helps a user understand what to fix in the first place.
This is a difficult process today with server post-backs and page refreshing, but I think you will see some “refreshing” enhancements soon using Ajax.
2) Data Entry - Formatting Clues
The most ridiculous (and quite common) user interface issue is to tell the user how to format something. “Don’t enter dashes or spaces” for a credit card is a great example. Give me a break. If a programmer could not add this functionality with a few lines of code, they should not be writing applications, never mind applications that deal with money!
cc = cc.Replace("-", "")
cc = cc.Replace(" ", "")
1) Make Users Successful
Remember that the user interface will ultimately determine the effectiveness and popularity of your program. You may have implemented many features in your system, but when a user can’t complete their tasks easily and efficiently they will find other ways (and other applications) to get the job done.
Your user interface should be designed with one simple goal – to make your users successful. When they are successful at their job, everyone can share the rewards.
[I hope you have enjoyed my ramblings thus far. I intend to continue with a few more topics to cover the basics, and then get into some real code from real projects.]