This blog topic is being published as a serial. This is the first of four parts.
Part 1: The User Interface Is Your GUI Sticky?
..
The Graphical User Interface (GUI) or, more commonly, the User Interface (UI) is what contributes most to the visitor experience. The objective is to make the experience as positive as possible so visitors will buy and/or come back to buy. Making your site simple to navigate, error free and comfortable is essential to keeping visitors on the site and getting them back to buy your product or take other action again.
..
The “stickiness" of a web site refers to the characteristics that make a visitor linger and/or return for subsequent visits.
..
The UI is one key to making a site sticky. The UI design stages the flow of the search and site “browsing” as well as the transactional flow of a sale or call to action. For the purposes of this series, I am going to assume the call to action is a sale, but it could also be to write a legislator or other action that serves the site owner’s purposes.
..
What are the basics of good user interface design? There are three main elements:
....
1. The look and feel of the site;
2. The utility of the content presentation; and,
3. Ease of achieving the user’s goal(s).
..
Look and Feel
..
Let’s start with the look and feel of the site. A gaudy site might look interesting, but all the bright colors, waving flags, and gyrating dancers are going to keep your visitor from seeing what you want them to see: your messages and how to find what they are looking for. Similarly, most of us spent 12 or more years learning to read black letters on white paper, so when we encounter red letters on a black background we find them very hard to read. That’s not to say your site should look like a newspaper, color goes a long way to making a site appealing. Just use colors that provide good contrast for easy reading or just intersperse the black on white text with relevant illustrations and photographs. Think back to the illustrated children’s books you have encountered. Another good trick is to look at magazine articles and advertisements. After all, the web page is a page, too, and those magazine layouts have good lessons for web designers. One big difference between a web site and a magazine is that users have come to expect the page header and navigation elements on each page to remain relatively constant. Since magazines have no interactive navigation elements like the web page hyperlink can provide, this commonality of navigation tools is important on a web site. The magazine publisher assumes the reader will refer back to the table of contents for navigation. So the “buttons” and other hyperlinks to other sections of your web site should be clear, easy to find, and consistent from page to page.
..
Also, stick with the proven typography proportional fonts: Times New Roman, Garamond, Sans Serif (Verdana), etc. If you use an offbeat font, not only is it hard to read, but if the user does not have the font on their PC, their browser may interpret the font such that it is practically illegible. Refer to the inset to see how my browser interprets Lucida Casual, a font not resident on my computer and some other more common fonts. I suggest you use these more common fonts to be sure your visitor does not see something that is very difficult or impossible to read.
Another look and feel element that is critical is everything you want the user to act on should be visible without scrolling the page down or to the right. Make your content fit and check to be sure it fits on various sizes of monitor at various popular screen resolutions. Some web designers refer to this placement as “above the fold”. The term relates to newspapers, which typically have a horizontal fold midway down the page. Keeping your primary message clear and prominently “above the fold” makes sure it is seen at first glance and increases the chance the visitor will take the time to see more of the site.
Content Presentation
Have you seen a web site where the product for sale has several pictures? You are excited to get such detail and you happily click on a picture’s thumbnail. Then you find the picture is HUGE, taking a long time to load, requiring you to scroll to see it. Then, adding more complexity, you have to close the window, and click the next one. Compare that experience to a site where the photos are properly sized and all you have to do to see the next one is click “next”. The former approach is poor content presentation and makes a visitor quickly want to look elsewhere. One of the biggest payoffs in site redesign is to consider the user in developing easy to access content and properly sized photographs.
When my team redesigned the Homes.com real estate portal in 2006-7, enhancing the user experience was the primary goal. We even removed some elements that provided advertising revenue to the business because they were an irritant to the visitor. Visitors use Homes.com to quickly and efficiently search for homes in a specific geographic area and to get as much information about each listing that attracts their interest. So, our mission was to present as many listings on the search page as practical considering page load times and aesthetics; present the listings with a primary photo of sufficient size to see the property clearly; and make it easy and fast to see more details about a listing, the listing agent, and the neighborhood. Once our design team focused on those goals, the changes we needed to make on individual pages became pretty obvious. Note that the changes were not in design alone; we had to use new programming techniques, revise the database structure and write new data base packages to speed things up.
This concept of content relevance to the user’s purpose is an essential element of good design. Too often, web developers worry about the site owners’ needs and do not adequately consider the use experience. This can result in causing visitors to leave before buying and the web site getting less traffic due to poor relevance and presentation.
Help Them Find What They Want (and buy it)
When was the last time you went to a commerce site and had trouble finding the search box? Isn’t that annoying? Did you stay or leave for another site? This illustrates a primary rule for web page presentation and navigation: MAKE IT EASY to do what the user came to do. For example, a pet peeve of mine is the drop down box for states. I can type VA or FL a lot faster than I can scroll and select “Florida” or “Virginia” from a drop down list. A user friendly way to accomplish the same purpose is to ask for the zip code and populate the city, state and country fields for the user from your own data base. This saves the user time and keystrokes and assures your application gets accurate information. Besides, what’s the point of spelling out the state? All shipping documents use the 2 letter state abbreviations anyway. (Yeah, I know the Internet is multinational; but if you have a .com site in English, get real. Your primary audience is the USA and maybe Canada. Just have a checkbox for international customers to invoke a different data entry form.)
Another annoyance with drop down lists is list positioning by the first letter only. “V” usually turns up Vermont and if I type “A” afterwards, I end up at the top of the list. If your developers insist on using drop down lists, ask them to use positioning based upon all user entries.
A similar rule of thumb is “three clicks to buy”. Your visitor should be able to find, select and start the checkout process in three clicks. This is especially true for sites with just one or a few products where searching is unnecessary. However, if a visitor types something in a search box, he should be able to buy from the results list and proceed to check out. A related annoyance is when you add an item to the “cart” and the system takes you to the cart for checkout. Why not offer them the option to continue shopping or check out now as many sites now do? If they want to continue shopping, return them to the page they were on, if not, display the page to start the check out process.
Conclusion
As you consider new web pages, remember the three “R”s: Readability; Relevance and Rationality. Your pages should be readable on a small laptop screen in unfavorable lighting. Your message should be prominent and “above the fold”. Be sure your content is relevant to the user's purposes for visiting and presented accordingly. Finally, make sure your site navigation is rational, and again, that it absolutely facilitates the visitor’s reasons for being there.
.jpg)