Feeds:
Posts
Comments

Archive for July, 2008

  1. Motivate
    Design your site to meet specific user needs and goals. Use motivators to draw different user “personae” into specific parts of your site.
  2. User task flow
    Who are your users? What are their tasks and online environment? For a site to be usable, page flow must match workflow.
  3. Architecture – it’s 80% of usability
    Build an efficient navigational structure. Remember – if they can’t find it in 3 clicks, they’re gone.
  4. Affordance means obvious
    Make controls understandable. Avoid confusion between emblems, banners, and buttons.
  5. Replicate
    Why reinvent the wheel? Use ergonomically designed templates for the most common 8-12 pages.
  6. Usability test along the way
    Test early in design using low-fidelity prototypes. Don’t wait until the end when it’s too late.Know the technology limitations Identify and optimize for target browsers and user hardware. Test HTML, JavaScript, etc. for compatibility.
  7. Know the technology limitations
    Identify and optimize for target browsers and user hardware.Test HTML, JavaScript, etc for compatibility.
  8. Know user tolerances
    Users are impatient. Design for a 2-10 second maximum download. Reuse header graphics so they can load from cache. Avoid excessive scrolling.
  9. Multimedia – be discriminating
    Good animation attracts attention to specific information, then stops. Too much movement distracts, slowing reading and comprehension.
  10. Use a stats package
    Monitor traffic through your site. Which pages pique user interest? Which pages make users leave? Adjust your site accordingly.

Read Full Post »

User-centered design (UCD) is an approach to design that grounds the process in information about the people who will use the product. UCD processes focus on users through the planning, design and development of a product.

An International Standard

There is an international standard that is the basis for many UCD methodologies. This standard (ISO 13407: Human-centred design process) defines a general process for including human-centered activities throughout a development life-cycle, but does not specify exact methods.

 

In this model, once the need to use a human centered design process has been identified, four activities form the main cycle of work:

  1. Specify the context of use
    Identify the people who will use the product, what they will use it for, and under what conditions they will use it.
  2. Specify requirements
    Identify any business requirements or user goals that must be met for the product to be successful.
  3. Create design solutions
    This part of the process may be done in stages, building from a rough concept to a complete design.
  4. Evaluate designs
    The most important part of this process is that evaluation – ideally through usability testing with actual users – is as integral as quality testing is to good software development.

The process ends – and the product can be released – once the requirements are met.

A Typical UCD Methodology

Most user-centered design methodologies are more detailed in suggesting specific activities, and the time within a process when they should be completed. The UPA publishes a poster, Designing the User Experience, showing a typical UCD process.

In this version, the UCD activities are broken down into four phases: Analysis, Design, Implementation and Deployment, with suggested activities for each phase. They are:

Analysis Phase

  • Meet with key stakeholders to set vision
  • Include usability tasks in the project plan
  • Assemble a multidisciplinary team to ensure complete expertise
  • Develop usability goals and objectives
  • Conduct field studies
  • Look at competitive products
  • Create user profiles
  • Develop a task analysis
  • Document user scenarios
  • Document user performance requirements

Design Phase

  • Begin to brainstorm design concepts and metaphors
  • Develop screen flow and navigation model
  • Do walkthroughs of design concepts
  • Begin design with paper and pencil
  • Create low-fidelity prototypes
  • Conduct usability testing on low-fidelity prototypes
  • Create high-fidelity detailed design
  • Do usability testing again
  • Document standards and guidelines
  • Create a design specification

Implementation Phase

  • Do ongoing heuristic evaluations
  • Work closely with delivery team as design is implemented
  • Conduct usability testing as soon as possible

Deployment Phase

  • Use surveys to get user feedback
  • Conduct field studies to get info about actual use
  • Check objectives using usability testing

“Usability testing” appears several times throughout the process, from the first phase to the last.

Providing a great user experience is an ongoing process.

 

Read Full Post »

Communication design is a mixed discipline between design and information-development which is concerned with how media intermission such as printed, crafted, electronic media or presentations communicate with people. A communication design approach is not only concerned with developing the message aside from the aesthetics in media, but also with creating new media channels to ensure the message reaches the target audience. Communication design seeks to attract, inspire, create desires and motivate the people to respond to messages, with a view to making a favorable impact to the bottom line of the commissioning body, which can be either to build a brand, move sales, or for humanitarian purposes. Its process involves strategic business thinking, utilizing market research, creativity, and problem-solving.

“design” refers to the process of originating and developing a plan for a product, structure, system, or component.

Read Full Post »

Web accessibility means that people with disabilities can use the Web.

More specifically, Web accessibility means that people with disabilities can perceive, understand, navigate, and interact with the Web, and that they can contribute to the Web. Web accessibility also benefits others, including older people with changing abilities due to aging.

Web accessibility encompasses all disabilities that affect access to the Web, including visual, auditory, physical, speech, cognitive, and neurological disabilities. The document “How People with Disabilities Use the Web” describes how different disabilities affect Web use and includes scenarios of people with disabilities using the Web.

 

Millions of people have disabilities that affect their use of the Web. Currently most Web sites and Web software have accessibility barriers that make it difficult or impossible for many people with disabilities to use the Web. As more accessible Web sites and software become available, people with disabilities are able to use and contribute to the Web more effectively.

Web accessibility also benefits people without disabilities. For example, a key principle of Web accessibility is designing Web sites and software that are flexible to meet different user needs, preferences, and situations. This flexibility also benefits people without disabilities in certain situations, such as people using a slow Internet connection, people with “temporary disabilities” such as a broken arm, and people with changing abilities due to aging. The document “Developing a Web Accessibility Business Case for Your Organization” describes many different benefits of Web accessibility, including benefits for organizations.

Why Web Accessibility is Important

The Web is an increasingly important resource in many aspects of life: education, employment, government, commerce, health care, recreation, and more. It is essential that the Web be accessible in order to provide equal access and equal opportunity to people with disabilities. An accessible Web can also help people with disabilities more actively participate in society.

The Web offers the possibility of unprecedented access to information and interaction for many people with disabilities. That is, the accessibility barriers to print, audio, and visual media can be much more easily overcome through Web technologies.

The document “Social Factors in Developing a Web Accessibility Business Case for Your Organization” discusses how the Web impacts the lives of people with disabilities, the overlap with digital divide issues, and Web accessibility as an aspect of corporate social responsibility.

Another important consideration for organizations is that Web accessibility is required by laws and policies in some cases. WAI Web Accessibility Policy Resources links to resources for addressing legal and policy factors within organizations, including a list of relevant laws and policies around the world.

Making the Web Accessible

Much of the focus on Web accessibility has been on the responsibilities of Web developers. However, Web software also has a vital role in Web accessibility. Software needs to help developers produce and evaluate accessible Web sites, and be usable by people with disabilities.

One of the roles of the Web Accessibility Initiative (WAI) is to develop guidelines and techniques that describe accessibility solutions for Web software and Web developers. These WAI guidelines are considered the international standard for Web accessibility.

The document “Essential Components of Web Accessibility” describes the different Web accessibility roles, and how specific improvements could substantially advance Web accessibility.

Making Your Web Site Accessible

Making a Web site accessible can be simple or complex, depending on many factors such as the type of content, the size and complexity of the site, and the development tools and environment.

Many accessibility features are easily implemented if they are planned from the beginning of Web site development or redesign. Fixing inaccessible Web sites can require significant effort, especially sites that were not originally “coded” properly with standard XHTML markup, and sites with certain types of content such as multimedia.

The document “Implementation Plan for Web Accessibilitylists basic steps for addressing accessibility in Web projects. The Web Content Accessibility Guidelines and techniques documents provide detailed information for developers.

Evaluating the Accessibility of a Web Site

When developing or redesigning a site, evaluating accessibility early and throughout the development process can identify accessibility problems early when it is easier to address them. Simple techniques such as changing settings in a browser can determine if a Web page meets some accessibility guidelines. A comprehensive evaluation to determine if a site meets all accessibility guidelines is much more complex.

There are evaluation tools that help with evaluation. However, no tool alone can determine if a site meets accessibility guidelines. Knowledgeable human evaluation is required to determine if a site is accessible.

The document “Evaluating Web Sites for Accessibility” provides guidance on preliminary reviews using techniques to quickly assess some of the accessibility problems on a site. It also provides general procedures and tips for evaluating conformance to accessibility guidelines.

For More Information

The WAI Web site provides guidelines and resources to help make the Web accessible. These range from very short summaries, such as “Quick Tips to Make Accessible Web Sites,” to resources on managing accessibility, to detailed technical references.

Related resources for making the Web accessible are also available from other organizations, and many can be found on the Web.

Terminology

Web “content” generally refers to the information in a Web page or Web application, including text, images, forms, sounds, and such. More specific definitions are available in the WCAG documents, which are linked from the Web Content Accessibility Guidelines (WCAG) Overview.

Web software includes:

People with disabilities sometimes use other software, called assistive technologies, to interact with the Web.

Read Full Post »

you’re looking for work as a designer, the old cliche is true: a picture is worth a thousand words. That is, your portfolio is your most important calling card.

I’ve been involved in hiring all sorts of designers – freelance, contract, full-time, in all sorts of disciplines – visual, interaction, illustration, print. Through this process, I’ve seen a lot of portfolios; some good, many bad. Here’s a few things I’ve learned while wading through them all.

1. Use best practices First of all, if you want a job doing web design, make sure your portfolio itself is an example of good web design. That doesn’t just mean making it attractive and easy to use, but also following the fundamental principles of what sets the web apart. When I’m checking out a portfolio, I look at the craft and detail that went into making it. For example:

  • Is it standards compliant? I’m not a stickler for validating, but I do view source and check the doctype. A quick glance at the markup will also tell me how organized this designer is.
  • Is the designer trying to control typography by setting words in graphics? As a web designer, you should prove your understanding of findability over style.
  • Is it presented in a self-contained box of Flash? Are you breaking the back button? I don’t want to have to argue with the designer later over things like this.

 

These are just a few examples, but they’re all issues of control. And they serve as subtle clues that the owner of the portfolio designs for users, rather than their own ego.

Here’s an example of portfolio that aims to be a good web site, as well.

2. Don’t innovate This may seem counterintuitive – after all, isn’t a portfolio the place where a designer really should be showing their strengths? But too often, a portfolio becomes a place where designers misplace innovation. I’ve seen so many examples of fancy Flash or Ajax navigation that distract from the work. Or worse – they are so clever that I fail to recognize them and miss many of the examples.

This portfolio, for example, is beautiful and filled with excellent examples of the designers talent. But I didn’t initially understand the horizontal scrolling mechanism until someone in a meeting showed me. That means I missed most of their portfolio without even realizing it.

3. Show your work Your portfolio is not the place to be worried about copyright infringement. Too often, I find myself squinting at tiny images of a designers work. Use full-sized screenshots or, better yet, host the actual files on your server. (Don’t rely only on a link to your clients’ or former employer’s implementations – they’ll change them eventually.)

If you absolutely must, put the whole portfolio behind a password if you’re worried about the assets being stolen.

4. Explain what you did Yes, the screens are important. Ultimately, images are going to sell your talent. But if I’m going to work with you, I want to know the who, what, where, when and why of each example.

Tell me about the client. Where you on staff or contracting with them? What were their goals for the project? How involved where you overall? Did you have to work within their styleguide? Was it a redesign, or did you start with a clean slate?

I want to know what constraints you faced and how you dealt with them. Did you try things only to be told “no” by someone in marketing or engineering? Don’t burn bridges with your former clients, but be honest and talk about whether your vision for the product was ultimately implemented.

I think we did a pretty good job of this at Adaptive Path with our case studies. Each one tries to outline what problem we were trying to solve, the solutions we attempted, and how successful they were. Likewise, the explanations Doug Bowman provides on his Stopdesign portfolio give insight into the choices he made. For even more detail, follow what Dan Cederholm of SimpleBits does and link from portfolio pieces to extended blog entries. His entry and post on Odeo are good examples.

Imagine sitting across the table from a potential employer and explaining each example. What would you want them to know? Probably more than the sentence or two most designers include in their portfolio. Write it up!

5. Fill it in I often hear from young designers just getting into the business who are concerned that their portfolios only contain school work. Is that good enough? In a word: no.

These days, there’s no excuse for not creating your own real-world work, with or without clients. Design a WordPress theme or skin an open source app. Better yet, find a community organization and volunteer your skills by offering to redesign their site. This has the added benefit of building your client relationship skills and your ability to work within constraints of audience, technology, budget, and schedule.

Just get out there, do good work, and show it off to the world. And good luck at that interview.

Read Full Post »

Card sorting is a technique that many information architects (and related professionals.) use as an input to the structure of a site or product. With so many of us using the technique, why would we need to write an article on it?

While card sorting is described in a few texts and a number of sites, most descriptions are brief. There is not a definitive article that describes the technique and its variants and explains the issues to watch out for. Given the number of questions posted to discussion groups, and discussions we have had at conferences, we thought it was time to get all of the issues in one place.

This article provides a detailed description of the basic technique, with some focus on using the technique for more complex sites. This article does not cover some issues such as the use of online tools, which will be covered in a future article.

Why

Card sorting is a quick, inexpensive, and reliable method, which serves as input into your information design process. Card sorting generates an overall structure for your information, as well as suggestions for navigation, menus, and possible taxonomies.

While card sorting might not provide you with final structure, it can help you answer many questions you will need to tackle throughout the information design phase. For example, more than likely there will be some areas that users disagree on regarding groupings or labels. In these cases, card sorting can help identify trends, such as:

  • Do the users want to see the information grouped by subject, process, business group, or information type?
  • How similar are the needs of the different user groups? >
  • How different are their needs?
  • How many potential main categories are there? (typically relates to navigation)
  • What should those groups be called?

Card sorting can help answer these types of questions, making you better equipped to tackle the information design phase.

Definition

Card sorting is a user-centered design method for increasing a system’s findability. The process involves sorting a series of cards, each labeled with a piece of content or functionality, into groups that make sense to users or participants.

According to Information Architecture for the World Wide Web, card sorting “can provide insight into users’ mental models, illuminating the way that they often tacitly group, sort and label tasks and content within their own heads.”

Card sorting is a great, reliable, inexpensive method for finding patterns in how users would expect to find content or functionality. Those patterns are often referred to as the users’ mental model. By understanding the users’ mental model, we can increase findability, which in turn makes the product easier to use.

Method

There are two primary methods for performing card sorts.

  • Open Card Sorting: Participants are given cards showing site content with no pre-established groupings. They are asked to sort cards into groups that they feel are appropriate and then describe each group. Open card sorting is useful as input to information structures in new or existing sites and products.
  • Closed Card Sorting: Participants are given cards showing site content with an established initial set of primary groups. Participants are asked to place cards into these pre-established primary groups. Closed card sorting is useful when adding new content to an existing structure, or for gaining additional feedback after an open card sort.

Closed card sorting will be detailed in a future article.

Advantages and disadvantages

As with any other method, card sorting has both advantages and disadvantages. Keeping these in mind will help you determine whether the technique is appropriate for your situation and make decisions about how you run the activity.
Advantages

  • Simple – Card sorts are easy for the organizer and the participants.
  • Cheap – Typically the cost is a stack of 3×5 index cards, sticky notes, a pen or printing labels, and your time.
  • Quick to execute – You can perform several sorts in a short period of time, which provides you with a significant amount of data.
  • Established – The technique has been used for over 10 years, by many designers.
  • Involves users – Because the information structure suggested by a card sort is based on real user input, not the gut feeling or strong opinions of a designer, information architect, or key stakeholder, it should be easier to use.
  • Provides a good foundation – It’s not a silver bullet, but it does provide a good foundation for the structure of a site or product.

Disadvantages

  • Does not consider users’ tasks – Card sorting is an inherently content-centric technique. If used without considering users’ tasks, it may lead to an information structure that is not usable when users are attempting real tasks. An information needs analysis or task analysis is necessary to ensure that the content being sorted meets user needs and that the resulting information structure allows users to achieve tasks.
  • Results may vary –The card sort may provide fairly consistent results between participants, or may vary widely.
  • Analysis can be time consuming – The sorting is quick, but the analysis of the data can be difficult and time consuming, particularly if there is little consistency between participants.
  • May capture “surface” characteristics only – Participants may not consider what the content is about or how they would use it to complete a task and may just sort it by surface characteristics such as document types.

When should card sorting be used?

Card sorting is a user-centered, formative technique. It should be used as an input to:

  • designing a new site
  • designing a new area of a site
  • redesigning a site

Card sorting in the overall design process. Click to enlarge.

Card sorting is not an evaluation technique and will not tell you what is wrong with your current site.

Card sorting is not a silver bullet to create an information structure. It is one input in a user-centered design process and should complement other activities such as information needs analysis, task analysis, and continual usability evaluation. It is most effective once you have completed:

  • research into what users need out of the site
  • a content (functionality) audit/inventory (for an existing site) or detailed content list (for a new site). For an existing site, it is crucial that the content inventory is examined carefully to include only content that is needed by users.

Card sorting will provide benefit to most sites, but can be challenging to use against some sets of information. The table below summarizes when card sorting works well and provides good results, and when it is challenging both to run and to analyze.

Read Full Post »

Eight Golden Rules of Interface Design
As a result of Interface Design Studies, Ben Shneiderman proposed a collection of principles that are derived heuristically from experience and applicable in most interactive systems. These principles are common for user interface design, and as such also for web design.

  1. Strive for consistency.
  2. Enable frequent users to use shortcuts.
  3. Offer informative feedback.
  4. Design dialog to yield closure.
  5. Offer simple error handling.
  6. Permit easy reversal of actions.
  7. Provide the sense of control. Support internal locus of control.
  8. Reduce short-term memory load.

Read Full Post »