Project Management

Designing websites for total user experience: Elements checklist

Ryan Boudreaux describes the complex combination of elements that go into the total web design, including traditional design features, and web apps and services. He includes some checklists to help your client focus on which elements should be included.

Getting the customer to "yes" can be a daunting task, especially when they are not entirely sure what it is they want their website to accomplish. They see all the new bells and whistles on other sites, or a great new feature on their competitor's site, and they want to have those features too. Gathering expectations of the customers your client serves takes a separate approach, including usability testing. As web developers, we have to balance what is good for both our clients and the customers they serve.

The web has changed a lot from the early 1990's in its complexity. Today, the user experience (UX) involves an interaction between the users and the web page documents; moving from "web design" to "interaction / interface design" takes on many forms. Are you a web designer or has your job description changed to "interaction designer," "user interface engineer," or "applications programmer"?

From brainstorming ideas with your client to hammering down a central point means you have to distill the overall scope, design, content, interaction, and experience that you want to create. This includes several topics which I will address below, including Look and Feel, Features, Controls, and Services.

Look and Feel

Maybe the website color scheme needs to be updated, or the text and topography needs a facelift. The branding and way the corporate culture is communicated are reflected on the site, but does it really reveal the organization? "Look" is the visual aspect of the web documents, the page size, content areas, layout, and fonts. "Feel" refers to the effect of the encounter on the user -- the event, the happening -- is it friendly, inviting, formal, helpful, or is it a puzzling, quizzical, mystifying, and perplexing experience? What emotions or reactions do viewers get when they visit your web pages? The fonts, backgrounds, images, textures, and colors all add to the total user experience.

Features

Ever heard the phrase "scope creep"? I am sure you have heard that phrase at some point in your web development projects or other projects for that matter. Having a list of the available features creates a starting point, and going from the industry standard to additional requests is difficult to assess. Helping the client to choose the right set of features for their site can differentiate them from their competition. Ultimately, the site will not be defined by the features themselves, but will be assessed by the human interaction and use of them on the site. Business is based on interactions, transactions, and interfacing with humans, therefore, selecting the right features and delivering them well on the site will make for a great user experience.

Here is a checklist of features that will help your client focus on the kind of user interactions they're after:

  • Activity Feed
  • Aggregating outside services
  • Animation and Flash
  • Auction management
  • Audio, music
  • Authentication (log in)
  • Blogs (WordPress, Blogger)
  • Bookmarking sites (Delicious, Digg, Stumble Upon)
  • Categorized browsing
  • Checklist/to-do
  • Collaboration
  • Comments, Reviews
  • Contacts import/export
  • Customizable look and feel / layout
  • Data storage
  • Document sharing
  • Easy signup, password retrieval
  • Events and Calendar
  • Filtering your view (popular, friends, recent, reviews)
  • Forum
  • Friends/Following
  • Groups
  • Images and gallery
  • Map representation of user or content (Google maps)
  • Mashable
  • Merchant tools
  • Mobile integration
  • Multiple languages
  • News feeds
  • Notifications
  • Online forms
  • Polls/survey
  • Printing from the web
  • Private Message
  • Product reviews
  • Profile, avatar, comments
  • Remote Desktop Sharing
  • RSS feed
  • Search
  • Share (email, social networking, twitter, Facebook)
  • Shopping cart and secure checkout
  • Similar Content
  • Site security SSL and encryption
  • SMS/email posting
  • Statistics tools
  • Status updates
  • Storage upload/download
  • Tagging content
  • Video posts and replies
  • Voting, Up/Down
  • Web conferencing
  • Wikis

Controls

The mechanism for user input of a product or service is typically a Rich Internet Application (RIA) technology, which the web developer implements and ultimately empowers the user experience. Moving from web design to application design requires an understanding of the user interface controls available today. Controls must be quick, easy, understandable, and must operate as expected to ensure a quality user experience. Nothing bogs down the visitor more than having to muddle through controls that do not respond well, are hard to find, or slows the process.

Several examples of controls are:

  • Advanced search
  • Auto- complete and auto-suggest
  • Calendar and schedulers
  • Combo boxes and multi-selection
  • Date selectors
  • Drag and Drop managers
  • Dynamic Filtering data, lists, grids, etc...
  • Growing text area for comments
  • Hover action and details
  • In-line editing
  • Mapping
  • Portals
  • Progress bar indicators
  • Rating system
  • Toggle views
  • Toolbars
  • Tooltips
Services

Typically these are behind-the-scenes applications that interface for various reasons, including connecting business logic, data, processes, and functions across a network or several networks. Numerous applications interact to cross borders and work in cooperation with other applications to render useful information, and are typically called application services. Several examples of reusable application component services that can be made available to your customers include:

  • Currency conversion
  • Weather reports
  • Language translation
  • Data exchange and interoperability

These services can also connect to existing software and help to solve issues by giving diverse applications a way to link their data. Most web services use one of three basic platform elements, Simple Object Access Protocol (SOAP), Web Services Description Language (WSDL), or Universal Description, Discovery and Integration (UDDI). What you can tell your customer is that any application can have a web service component, and web services can be created regardless of the programming language.

Website user experience has its beginnings in specific human factors such as ergonomics and the interaction between human users and browsers, user agents, devices, and the contextual environment of the web. User experience design as integrated into software and web application development is an aid in finding feature requirements and interaction plans based upon the customer's goals. As software applications are introduced, it must keep up with the dynamic pace of technological advancement and the need for change.

The benefits associated with integration of user experience and web design principles include:

  • Specifying only those features and controls necessary to achieve the customer goals and user interaction.
  • Simplify and clarify web design documentation and customer-facing technical solutions.
  • Improve the function and usability of the web application and system, and therefore, its acceptance by the end user.
  • Incorporate the customer business and marketing goals while catering to the website visitor.

Do you have any other tips for improving web user experience?

About

Ryan has performed in a broad range of technology support roles for electric-generation utilities, including nuclear power plants, and for the telecommunications industry. He has worked in web development for the restaurant industry and the Federal g...

10 comments
jjustice
jjustice

On EVERY business website, put the mailing address!

simpleonoff
simpleonoff

a copy con list that looks and feels terrific for sure! I was jotting a few more categories the other night. Like morphology, aliases and mystery, journey to reason, generalese, value systems in society, encapsulating time in space, comedic replacements, kindness consideration and thoughtfulness, translating to the beginner, exponents and infinity, who links here?, marriage promises, fearsome, logic mantra, sense of calm, invaluable resources, indian relics, realm plotting, clerical and organization positions, publishing house, lost in life, out-of-bounds solution, table definitions, capture data, searching strategy---

redwinederous
redwinederous

The user experience needs to be designed for the audience of the website in question. I'm sorry but I was expecting to read something about a checklist of what to consider when designing user experience eg audience needs, making steps quicker and easier, making whatever they need as immediately accessible as possible etc. This checklist doesn't account for a lot of other aspects of a user's experience. Just a tad disappointed. it is a useful list of some potential solutions to fit into the design though IMHO.

Bonzaros
Bonzaros

Just convince the web owner that bells and whistles are just noise and distractions and stick to the KISS principle - is all you need for pleasant user experience.

info
info

I'm sick of companies that treat website visitors as problems, so: 1. PROVIDE REAL PHONE NUMBERS ANSWERED BY REAL PEOPLE 2. Have someone tasked to ANSWER questions sent from web enquiry forms 3. Ensure that answers happen within 24 hrs 4. Ensure the "Customer" get a COPY of the enquiry delivered to their own email account 5. If things can be done in less clicks, DO IT 6. Don't demand mandatory information if it is not relevant to the task/enquiry 7. If you're going to use 1- or 2-word "passwords" to foil webcrawlers: a) use words from a dictionary so that the heiroglyphs are more easily deciphered b) specify whether they are case-sensitive c) use either zeros OR "ohs" 8. don't cheese me off by demanding (or even worse, generating) unique account names or passwords ... my email address is already unique, and I want to use whatever password that I want, regardless of whether you think it is weak or not. 10. stop using stock photography of impossibly good looking people in posed situations 11. I could go on but getting more steamed is not good for my health!

Jaqui
Jaqui

another way of saying you are using idiotic jquery boxes for everything. when the danged website should be able to function FASTER if you dumped that garbage. lose the idiotic bells and whistles, get a site that responds to user input farn faster. you'll get people happy that it doesn't take 5 minutes for the site to load. [ 5 minutes on broadband / dsl / cable internet access, 2 hours on dialup ] There are a massive number of websites not being used much, because of extremely long load times for the excessive amount of active clientside scripting used.

Dethpod
Dethpod

See how Google, or to a lesser degree, how Yahoo does it.

adimauro
adimauro

"10. stop using stock photography of impossibly good looking people in posed situations " Yes, it annoys the crap out of me, too. "5. If things can be done in less clicks, DO IT" Should be rule #1 for ALL websites! "1. PROVIDE REAL PHONE NUMBERS ANSWERED BY REAL PEOPLE" Amazon seems to do quite well without this one...but they do answer web inquiries quite fast, in my experience. But, you know what? Even with a phone number, it doesn't mean you are going to get good help. Countless times I call, actually get through to a person (after a HUGE phone tree), and you know what they say, 8 times out of 10? "Oh, did you look at our website? Go to www.whatever.com and ..." NO! I've got you on the phone right now, JUST ANSWER MY QUESTION!!! The Internet has killed customer service.