Added by Colin Clark, last edited by Allison Bloodworth on Jan 12, 2010  (view change)

Labels:

ux ux Delete
toolkit toolkit Delete
walkthrough walkthrough Delete
persona persona Delete
design_pattern design_pattern Delete
release release Delete
manual manual Delete
Enter labels to add to this page:
Wait Image 
Looking for a label? Just start typing.

What is the Fluid Design Handbook?

The Fluid Design Handbook is a How-to Guide filled with user-centered design (UCD) techniques you can use to learn from your users and design better user experiences.
The handbook includes information on a variety of UCD practices, from performing user research and creating models (such as personas and scenarios) to inform the design process, to performing UX walkthroughs and user testing of your website or application to assess usability and accessibility.  This is by no means a comprehensive guide of design practices but rather focuses on a few methods near and dear to us on the Fluid project.

User Research

Contextual Inquiry

Contextual inquiry is a cross between interviews and observation and combines the strengths of both. In a contextual inquiry, the interviewer goes to the user and interviews them where they do their work.


> Learn more
> Fluid examples

Interviews and Observation

Interviews and observations are field study methods like contextual inquiries.  In both cases, you should visit the participant "in the wild" to better understand how they get their work done in the context of their work.  


> Learn more

Surveys and Focus Groups

Surveys and focus groups are good tools to evaluate users' interests and feelings about a product (or potential product).  They can be a starting point for determining areas you want to focus more in depth research like observations and contextual inquiry.
> Learn more

User Modeling

Personas

"A persona is a user archetype you can use to help guide decisions about product features, navigation, interactions, and even visual design." (Kim Goodwin, Cooper.com)
> Learn more
> Fluid examples

Mental Models

Mental models are way to think about what knowledge, experience and expectations users bring with them when they use your product.

> Mental Models, by Indi Young
> Interview with Indi Young

Affinity Diagrams

Affinity diagramming is a great way to synthesize and categorize large amounts of data by finding relationships between ideas.  We tend to use them often for making sense of user research data.
> Learn more
> Fluid examples

Scenarios

Scenarios help us understand the details of how we can better support users in meeting their goals.   Scenarios -- stories about users activities as they happen in context and relate to other activities -- define the way a user needs to complete an activity or string of activities, what information they already know and need to know, what mental models and expectations they already have in the space and how their context affects the way they get work done
> Learn more

Interaction Design

Design Patterns

Design patterns serve as tools to communicate ideas, solutions, and knowledge about commonly recurring design problems. User interface design patterns help designers and developers create the most effective and usable interface for a particular situation.


> Learn more
> Fluid examples

Fluid Components

Fluid components are reusable user interfaces that take the hard work out of supporting rich interaction in a Web application. Components are often larger than familiar widgets in a UI toolkit, taking into account user workflows and sequences.
> Learn more & see components

Storyboarding

"Storyboarding...ensure that the team does not overlook any intents and steps that are critical to the work." ("Rapid Contextual Design", Holtzblatt et al, pg. 229)  Using a combination of pictures and text, it is a great technique for working out the details of how a user will accomplish specific tasks in a new design.


> Learn more

Competitive Analysis (a.k.a. Benchmarking)

A competitive analysis (sometimes also called compartive analysis or benchmarking) is the process of analyzing products which are similar to, or compete with, the product you are designing in order to generate ideas.
> Learn more

User Experience Resources

User experience organizations, sites, articles presentations, and other resources.
> Learn more

Evaluation and Assessment

User Experience Walkthroughs


A User Experience (UX) Walkthrough is a technique created and developed by the Fluid project to identify usability and accessibility issues in a website or application. It is a procedure for examining a user interface following a set protocol and making assessments based on predetermined criteria.
> Learn more
> Fluid examples

The Fluid UX Walkthrough takes an all-in-one approach by combining the best methods of the other inspection techniques described in this handbook.

Heuristic Evaluation

Heuristic evaluation is a method for finding usability problems in a user interface by reviewing it for compliance with a checklist of recognized usability principles called heuristics.
> Learn more

Cognitive Walkthrough

A cognitive walkthrough is a step-by-step exploration of a service to see how well a particular type of user, usually represented by a persona, is able to accomplish a particular objective or set of objectives.
> Learn more

Accessibility Markup Review


In an accessibility markup (code) review, the focus of the inspection is not the interface as the user sees it, but an under-the-covers examination of the code used to implement it – often HTML.
> Learn more

Accessibility Review Protocols


Accessibility can be evaluated through simple heuristics, or using a more detailed approach with assistive technologies and specific platforms.
> Learn more

User Testing

User testing, also sometimes referred to as usability testing, is a technique for evaluating usability, working with an actual or potential user of a product or system.


> Learn more
> Fluid examples

Accessibility

Accessibility Resources

Resources for Web and DHTML accessibility from both the design and technical perspectives.

Design Process & Management

Problem Statements and Design Goals

Problem Statements and Design Goals help work through problem and solution definition.  Once established they should be referred to throughout the project as a check balance.  Are we still meeting our original goals?  Focused on the problem at hand or are we in danger of scope creep?

> Learn more

Agile Planning - Goals, benefits and details


Agile development is a software design and development methodology that advocates having many, short iterations throughout the life-cycle of the project. Fluid's agile planning process uses 2-week iterations, where all the work is planned at the beginning of the iteration. At the end of the iteration, how much work was actually completed is compared to what was planned (velocity), and this information helps determine how much work to plan for the next iteration.

> Learn more

Design and Development Process

> Learn more