UX Recorder: Screen capturing software for iOS. Learn more.

Website Design

A website is a window into how your organization is run. Users assume that if you cut corners on your website, you also cut corners with your products and services.

When users feel smart and sophisticated on your website, they tend to stick around. When users feel stupid, their blood pressure goes up, their heart rate increases, and they get a little hot under the collar. This visceral negative reaction begins to harm trust and brand perception almost immediately.

Print Design vs. Web Design

Everyone knows how to turn pages in a brochure. Clicking links on a website, however, can take nearly any form (depending on the whims of the designer).

While there is a surface similarity between print graphic design and website graphic design, website design is much closer to product or industrial design than print design.

There are many popular websites that are just plain ugly, but highly functional. There are very few popular websites that are beautiful but hard to use. In eCommerce the stakes are particularly high. eCommerce websites that are not highly usable go out of business in a matter of weeks.

For these reasons, usability should not be an afterthought in website design. Testing and fixing a website after it has been built is inefficient and expensive. It is also unlikely to produce the best results.

The benefits of planning usability into your project from the start are:

  • Increased user satisfaction, which translates directly to trust and brand loyalty
  • Increased user productivity, success, and completion (and sales)
  • Reduced long-term development costs (costs incurred from fixing design mistakes)
  • Reduced training and support costs
  • Word of mouth, social media, and other free marketing
  • Positive press coverage
  • A higher rate of repeat customers, which improves your competitiveness

A Model of Pervasive Usability in Website Design

  1. Requirements Analysis
    • Identify stakeholders, and understand their roles as they pertain to the project.
    • Determine the goals for the website from the perspective of the user and the business.
    • Determine the user needs and target usability requirements.
    • Evaluate existing versions of the site, noting legacy features.
    • Perform a competitive analysis.
    • Perform user interviews and surveys.
  2. Conceptual Design
    • Create a Content Inventory to account for all expected site content.
    • Sketch out a site design and architecture at an abstract level.
    • Build low-fidelity Wireframes for various pages of the website to initiate design discussions, and conduct user testing.
    • Conduct a task analysis to discover critical user needs and preferences.
    • Based on user research analyses, model the user experience and then specify requirements for usability, user experience, functionality, data, the environment, and accessibility.
  3. Mockups/Prototypes
    • Create a Site Map Diagram based on usability requirements to depict the website’s optimal navigation and organization.
    • Choose an HCI design approach (Anthropomorphic, Cognitive, Predictive Modeling, or Empirical) for your prototype.
    • Rapidly create visual representations (mockups) or interactive representations (prototypes) of the site.
    • Evaluate usability through focus groups, user tests, and walkthroughs.
    • Use the evaluation results to create more mockups or improve the prototypes.
    • Repeat this process (design iteration) until the design and usability goals are met.
  4. Production
    • Collaborate with visual designers to develop high fidelity Prototypes and Screen Designs with actual content.
    • Create the final product.
    • Evaluate functionality through testing, quality assurance, usability testing, and field-testing.
    • Use the evaluation results to improve the product.
    • Repeat this process (production iteration) and perform Quality Assurance Testing until all specified requirements have been met, including: business, visual design, usability, user experience, and technical functionality requirements.
  5. Launch and Maintenance
    • Launch the website.
    • Maintain and refine with user feedback.
    • Use the feedback to create new requirements, and begin major design improvements (system iteration).

Remember, evaluation occurs at every stage of the process to keep the goals of the project and the users’ needs in focus. And if it comes down to a choice, don’t sacrifice usability; reduce the scope of the project instead.

↑ Back to top