Feature Knowledge Base Article
December 2007
Taking Care of Your Users
Now more than ever we are seeing the web being used in very ambitious and creative ways. The prevailing “Web 2.0” mindset has meant the development of thriving online communities and browser-based applications that perform the same duties as tried-and-true desktop software. The broadening versatility of web presences has the potential to lead to confusion, as varying functions mean varying expectations for how users are to interact with them. Now more than ever, site owners and developers have to put a lot of care and attention into their user interface, commonly abbreviated and addressed as UI. Even if you’re working on a “standard” website, and not an advanced, highly interactive application, you would do well to plan your design around a reliable, intuitive user interface.
The Potential for Confusion
Creating a website to perform the functions of a desktop application automatically fosters a bit of a paradox. Users are accustomed to a certain way of interacting with software, which is traditionally quite different from website navigation. Desktop software interfaces are mostly driven by icons and buttons, situated on customizable toolbars. Web sites have historically been text-driven more than anything, with a minimal amount of customizability on the part of the user.
So which type of interface do you focus on? You’ll find that the more successful web apps strike a balance between both.
The Pieces of a Good UI
User-friendly web apps have a lot of interface elements and philosophies in common with each other. They include:
- Making sure the browser still works like a browser: Functions built into the web browser that a user has grown accustomed to using should still have some impact on the application. AJAX-style functions, which change only portions of a page, aren’t affected by things like the Back or Refresh buttons as normal pages are. Be sure that this phenomenon doesn’t impact your site’s functionality in a way that might confuse a user who relies on these browser elements.
- Giving users notice that something is changing or has changed: Many users are accustomed to seeing an entire web page load or reload to indicate that something has happened. In other words the screen will be blank for a fraction of a second before everything shows up with the changes in place. If only an element within the page is changing, the application creator must work in some visual cues, such as changing the background colour of the element. This is also why those little “Loading” animations are so popular in interactive web functions.
- Retain consistent and familiar page elements: Even if portions of an application are drastically different, or if a single web presence has several applications contained within it, the user needs to feel that he or she isn’t being sent to a dozen different sites. Having a toolbar or banner across the top of the page with company branding and main site navigation goes a long way towards making the user comfortable. It also has the added bonus of being good marketing.
- Plenty of help: Even the most intuitive web software can have some confusing points. Good sites will have FAQs and site search capabilities. Really good sites may even have some contextual help menus. Quality software is always well documented. Quality web-based software should naturally follow suit.
Convention versus Innovation
Perhaps the toughest decision to make when planning your UI is deciding whether you want to go with what users know, or take a chance on something new. You may look at a popular interface element and think that you can do better. But you have to weigh that decision against the fact that users are probably acclimated to the “old way” of doing things, and your fresh take has to be very intuitive to overcome this familiarity.
The history of the Web is littered with examples of UI innovations. Its maturation from informational (and mostly textual) resource to fully interactive, even communal environment has pretty much necessitated it. User expectations have fostered change as well, as people become generally more comfortable and savvy when surfing, along with expecting a certain visual oomph to go with their browsing experience. Advancing technology, such as larger monitors, increased video display power, and ever-increasing connection speeds enable experimentation without sacrificing usability. Below are some common web elements, and how they’ve evolved over the years in the hands of daring web presence creators:
- Hyperlinks: Where there was once only blue underlined text now could be any colour and style to blend elegantly into site content. Designers also no longer feel the need to include descriptive icons or “Click Here” hints to guide users, as they are more capable of finding and following hyperlinks on their own.
- Navigation: Sites have had some kind of nav bar either down the left side or across the top of the page since time immemorial, and it continues to be a prevailing design trend. As mentioned in our previous article, however, growing numbers of designers are relocating their navigation to give more focus to the important part of their sites: the content.
- Images: With larger displays and faster connections, designers aren’t afraid of having larger, more intricate pictures on their sites. High quality imagery has gone from mere eye candy to integral site elements.
- Layouts: The growth of screen real estate has led to an explosion of layout experiments, some obviously standing the test of time better than others. A good example of recent innovation is the three column layout, commonly adopted by news-style (or similar, frequently updated) sites, wherein the navigation goes in the narrower left column, content in the widest centre column, and supplemental info or advertising down the right.
Another challenge to consider is ever-evolving UI trends. As indicated here, as well as numerous past Knowledge Base articles, layout design conventions are as fickle as modern fashion at times.
Important For Other Kinds of Websites, Too
As you can see, careful UI planning is important for every web presence, not just interactive web applications. This has been true for years, but has recently gained importance in leaps and bounds.
One factor affecting UI for all web sites is the increasing relevance of web standards. One of the purposes of web standards is to increase usability, so it only makes sense for designers to follow such guidelines when setting up a web presence. A lot of modern UI conventions are shaped by W3C standards and accessibility guidelines.
With “Web 2.0” applications and social networks becoming so popular (and profitable), their respective UIs have become very influential across the web. Given that people who aren’t even all that internet savvy are frequenting the likes of YouTube, Google, or Facebook, interface elements from those sites become very familiar and natural for all users. Designers will borrow liberally from them, knowing that the learning curve for the interface has already been traversed.
Some of the advanced programming seen in web applications is also ideal to integrate into just about any website, giving it some much needed interactivity and user appeal. Scripting techniques such as Ajax can be used to enrich site elements such as forms or image galleries. Designers should therefore adhere to the same UI guidelines for such elements that developers of large-scale applications would.
Taking This to Your Part of the Web
Whether you’re planning on creating your own web app, or are redesigning and modernizing your site, you must put some serious consideration into your user interface. You can spark some interest by experimenting with elements to give users a unique experience, but be sure to balance it with some familiar components to make people feel comfortable. When searching for ideas, look no further than the types of sites you frequent, what kinds of functions they provide, and how they make it easy for you to use them. No matter what your ultimate goal, looking after your users with a quality interface goes a long way towards your eventual success.
Sean Simons, Wenex Technologies