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.


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


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

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?


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...

Editor's Picks