Archive for January, 2009

What is Usability

The extent to which a product can be used by specified users to achieve specified goals with effectiveness, efficiency and satisfaction in a specified context of use
Benefits to business
  • Product quality improvement
  • More value delivered à Priced higher
  • Increased Profitability
Other sources report :
“There are about 43 million Web sites, and no one knows which ones are usable. The best sites we’ve found are usable only 42 percent of the time, and none that we have studied are usable a majority of the time ….”
Forrester Research :
  • Losing approximately 50% of the potential sales from a site as people can’t find what they need
  • Losing repeat visits from 40% of the users who do not return to a site when their first visit resulted in a negative experience
Jacob Nielsen :
“Studies of user behavior on the Web find a low tolerance for difficult designs or slow sites. People don’t want to wait. And they don’t want to learn how to use a home page. There’s no such thing as a training class or a manual for a Web site. People have to be able to grasp the functioning of the site immediately after scanning the home page — for a few seconds at most.”
1. Compatibility (with the user) – Computer speaking my language
2. Learn ability – I can do that.
3. User friendliness – Easily
4. Effectiveness A – Accomplish user goals.
5. Effectiveness B – Business goals fulfilled.
6. Efficiency – faster.
7. User Satisfaction – Alright ! it was smooth !
8. User Delight – Wow I did not expect this.
9. Flexibility – good ! You could do it this way also, (Ctrl C Ctrl V)
10. Excellent User Experience.

An Evidence based methodology that involves end users throughout the development process to product information systems that are measurably easier to use, learn and remember.

— By Jean Fox, Janice R. Nall.

1. Who are the users of this specific product?

2. What are their User specific & Use specific needs?

3. What are the users goals for using this product?

4. Which areas are critical for meeting the user goals efficiently?

5. What other products they have used?

6. What is the terminology they use?

Model for Stages of Use (for a particular application)

1. Novice
2. Advanced Beginner
3. Competent Performer
4. Expert

“User and Task Analysis for Interface Design” by Joann T.
Hackos, Janice C. Redish

1. Understand the Users
2. User goals, Business goals
3. User specific and use specific tasks
4. Define features
5. Design the work flow
6. Design the information structure
7. Design the front end
1. Card Sorting
Technique that allows users to group the information on your Web site and helps to ensure that the site structure matches the way users think.
2. Contextual Interviews
Method that enables you to observe users in their natural environment to better understand the way users work.
3. Focus Groups
Moderated discussion with a group of users that allows you to learn about users’ attitudes, ideas, and desires.
4. Heuristic Evaluation
Usability inspection method where a group of usability experts evaluate the Web site against a list of established heuristics (or guidelines).
5. Individual Interviews
One-on-one discussions with users that allow you to learn how a particular user works and enables you to probe on a user’s attitudes, desires and experiences.
6. Parallel Design
Technique where multiple designers create mock-ups of the user interface and the best aspects of each design are used in the final design.
7. Personas
A fictional person that represents one of the major user groups for the site. The design team considers the needs of this fictional person when developing the site.
8. Prototyping
Draft model (or mock-up) of the Web site that allows the design team to explore ideas before fully implementing them. A prototype can range from a paper mock-up to interactive html pages.
9. Surveys (Online)
Series of questions asked to multiple users of the Web site that helps you learn about the people who visit your site.
10. Task Analysis
Method that involves learning about users’ goals – what they want to do on your Web site – and understanding the tasks that users will perform on your site.
11. Usability Testing
One-on-one sessions where a “real-life” user performs tasks on the Web site in order to identify user frustrations and problems with the site.
12 Use Cases
Description of how users will use a particular feature of the Web site. Use cases provide a very detailed look at how users interact with the site including the steps a user will take to accomplish each task.
13 Writing for the Web
Guidelines for optimizing content on the Web based on the way users read online. Involves chunking content, using bulleted lists, and putting the most important information at the top of the page.
1) System Status shown
(Keep the user informed about what the computer is doing)
Providing feedback to the users
Appropriate method of feedback to be used
2) Match with the real World
Use simple and natural dialog. Tell only what is necessary, and tell it in a natural and logical order. Ask only what the user can answer.
Speak Users language
Use metaphors familiar to users
Use words and concepts familiar in their work.
No computer jargon.
3) User has to feel he is in command
Provide clearly marked exits so users can escape from unintended situations
User should be able to leave an unwanted state
Users should not get locked in the system
4) Consistency in terminology and required actions.
Consistency in communication
Names, Images
Use sequence, Use of Controls
Behavior of controls
5) Error prevention
Prevent errors from occurring by keeping choices and actions simple
UI should prevent an error from occurring
Minimize error situations
6) Error Recovery
Give good, clear, specific and constructive error messages in plain text, no beeps and codes
Error messages should
Clearly indicate the problem
Constructively help users solve the problem
Be polite and express in plain simple language
7) Recognition not recall
Minimize the user’s memory load
Objects and screens should be
Easily visible
Easy to interpret
User should not be forced to remember any information
8) Flexibility
Provide shortcuts for frequent actions and advanced users
Provide multiple ways to accomplish the same task
If possible provide freedom to customize the system
9) Minimalist Design
“Less is More”
Offer only relevant information and functions
Make invisible all the irrelevant information & functions
Seek minimum inputs from the users
10) Help and Documentation
(Provide clear and concise, online help, instructions and documentation. Orient them to the users task)
Anticipate where users will require help
Provide appropriate help

Read Full Post »

Wireframes – standalone “illustrations” of screens void of graphic treatment, with indications of functionality and screen flow.

Prototypes – interactive versions of screens with varying levels of graphic treatment/fidelity. The interactivity of the screens should mimic the intended functionality of the final product.

Read Full Post »

original posted on http://www.strangesystems.net

Wireframes serve a central function in the development of a web site. It is a key tool in communicating the content and layout of each web page for internal and client reviews as well serving as a blueprint for graphic designers to produce designs and for programmers develop functionality.

What are wireframes?

A wireframe is a stripped-down visual representation of a single web page, devoid of any graphic treatment. As the name suggests, it is a framework made with wires, which define basic layout and placement of content and page elements such as navigation; header & footer; branding etc.

They are sometimes referred to as “page schematics”, “page architecture” or even “blueprints” (though the term “blueprint” sometimes refers to a more overall site design).

It is sometime helpful to use the architectural blueprint metaphor in understanding wireframes. Architectural blueprints show you the form of the building, define the functionality of the spaces and paths for circulation, while provide the contractor and interior designer specifications from which to build from. Likewise wireframes define areas of content and functionality, navigation strategy while providing a framework from which the programmer and graphic designer can build from.

A full wireframe needs to deliver the following information:

  • Layout: General placement of page elements such as headers, footers, navigation, content area, and often branding; It communicates decisions that as been made as to the navigation strategy of the site; it also shows the prioritization of the content on the page.

  • Content inventory: What content needs to be present on the page

  • Web elements: Headers, links, forms, lists, images etc.

  • Behavior: Notes/annotations may be added as to how elements should be displayed (such as number of elements, default display etc.), or what functional behavior occur when an element is activated (popups, page refresh, link to another page, or external site etc.)

When are wireframes created?

Wireframes as deliverables are developed as a part of Information Architecture phase. It usually follows the “Business Requirements” phase of the project and precedes any graphic design and technical development.

Usually this is the role of the information architect. On smaller projects, this often become the role of the project manager.

Who is it for?

The following table shows the consumers of wireframes and how they are used.

A blueprint with which they can review whether the design meets their needs; a preview to the actual site design; Key deliverable, the signoff of which kicks of design and development phases of the project

Consumer Usage
Project Team A communication tool around which aspects of strategy, technology and user experience can be discussed
Client Stakeholders  
Graphic Designer A guide upon which they can develop mockup designs
Web Programmer A requirements document that details layout, content display and functional behavior of a web page to certain extent

Types of wireframes

  • Content-only wireframes (aka Powerpoint wireframes): Powerpoint is used to define the key pages of the site. Name of the page, and a list of content items are captured on each page without information about layout or placement. This technique can be used to quickly capture client requirements and sketch out a site without having to go through the labor intensive work or creating detailed wireframes. Tools: Powerpoint

  • Block diagram wireframes: This type of wirefames is one step higher than the Content-only wireframes in that it offers basic layout information through blocks of functionality, and content grouping. These wireframes can be used in conjunction with detailed wireframes to provide a high level strategic overview to the wireframes before diving into the details. Tools: Powerpoint, Visio

  • Detailed wireframes: Fully-loaded wireframes with layout, content, web elements information along with notes and annotations on page behavior. Tools: Visio, OmniGraffle

Developing wireframes

Here are some basic steps an information architect would take when developing wireframes.

Gathering information

  • Business requirements: Ideally you would already have documentation from the the Business Requirements phase. This document will spell out major site functionality, key site pages and what content/functionality would need to be presented on them.

  • Content requirements: If there is no documentation from a previous phase it is important to meet with client and sketch out what needs to be presented on key pages of the site. A content-only wireframe is a good tool to do this.

  • Existing design requirements: Additional information such as need to integrate with existing site guidelines or need for consistency with previous site design, etc. should also be noted.

  • Bandwidth requirements Some clients may have to serve a low-bandwidth user base in which case, the design will have to be more text-reliant and less image heavy.

  • Software requirements Some sites are CMS-driven or software driven (such as blogs). Many software packages have layout and navigation rules the design will have to conform to.

Prioritizing/grouping information

  • Once the information has been gathered, it is important to first group and then prioritize how they need to be displayed on the page.

Navigation strategy

  • Clients may have strong preferences as to how navigation should work and be placed on the page. If there is no strong preference, software requirements and usability should dictate how navigation should be configured.

Drawing wireframes

Wireframes should include:

  • Key page elements & location: header, footer, navigation, content objects, branding elements

  • Grouping: side bar, navigation bar, content area, etc.

  • Labeling: page title, navigation links, headings to content objects

  • Place holders: dummy text (lorem ipsum dolor…), and image place holders

The question often arises: how many wireframes should I create? The answer is how ever many you need to get the job done. (or in our case how ever many we said we will create). Having said this the follow should be included in any good set of wireframes:


  • Homepage

  • Major sub-pages and “portal” pages

  • Key template pages

  • Pages with forms


  • Search results page

  • 404 Error pages

  • Any other pages that provide clarification to the overall development process

Read Full Post »