Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Section


Column
width50%


Panel
bgColor#FFF
borderStylesolid

What is the Fluid Design Handbook?


Excerpt

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.



Panel
borderColor#CCC
bgColor#FFF
titleBGColor#F2F2F2
titleUser Research

Contextual Inquiry

Excerpt Include
Contextual Inquiry
Contextual Inquiry
nopaneltrue

> Learn more
> Fluid examples

Interviews and Observation

Excerpt Include
Interviews and Observation
Interviews and Observation
nopaneltrue
> Learn more

Surveys and Focus Groups

Excerpt Include
Surveys and Focus Groups
Surveys and Focus Groups
nopaneltrue

> Learn more


Panel
borderColor#CCC
bgColor#FFF
titleBGColor#F2F2F2
titleUser Modeling

Personas

Excerpt Include
Personas
Personas
nopaneltrue

> 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

Journey Frameworks

Journey Frameworks (aka: schematic storyboards) map out the experience of visitors while they go through the various stages of the interactive experience. The examples listed below illustrate a museum visit to the Detroit Institute of the Arts and related kiosk or mobile situations.

> Fluid examples

Affinity Diagrams

Excerpt Include
Affinity Diagrams
Affinity Diagrams
nopaneltrue

> Learn more
> Fluid examples

Scenarios

Excerpt Include
Scenarios
Scenarios
nopaneltrue

> Learn more


Panel
borderColor#CCC
bgColor#FFF
titleBGColor#F2F2F2
titleInteraction Design

Design Patterns

Excerpt Include
Design Patterns
Design Patterns
nopaneltrue

> Learn more
> Fluid examples

Fluid Components

Excerpt Include
Components
Components
nopaneltrue

> Learn more & see components

Storyboarding

Excerpt Include
Storyboarding
Storyboarding
nopaneltrue
> Learn more

Competitive Analysis (a.k.a. Benchmarking)

Excerpt Include
Competitive Analysis (a.k.a. Benchmarking)
Competitive Analysis (a.k.a. Benchmarking)
nopaneltrue

> Learn more

User Experience Resources

Excerpt Include
UX Resources
UX Resources
nopaneltrue

> Learn more



Column
width50%


Panel
borderColor#CCC
bgColor#FFF
titleBGColor#F2F2F2
titleEvaluation and Assessment

User Experience Walkthroughs

Excerpt Include
User Experience Walkthroughs
User Experience Walkthroughs
nopaneltrue

> 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
Excerpt Include
Heuristic Evaluation
Heuristic Evaluation
nopaneltrue

> Learn more

Cognitive Walkthrough

Excerpt Include
Cognitive Walkthrough
Cognitive Walkthrough
nopaneltrue

> Learn more

Accessibility Markup Review
Excerpt Include
Accessibility Markup Review
Accessibility Markup Review
nopaneltrue

> Learn more

Accessibility Review Protocols
Excerpt Include
Accessibility Review Protocols
Accessibility Review Protocols
nopaneltrue

> Learn more

User Testing

Excerpt Include
User Testing
User Testing
nopaneltrue

> Learn more
> Fluid examples


Panel
borderColor#CCC
bgColor#FFF
titleBGColor#F2F2F2
titleAccessibility

Accessibility Resources

Excerpt Include
Accessibility Resources
Accessibility Resources
nopaneltrue

Making an Inclusive and Accessible Website

Excerpt Include
Making an Inclusive and Accessible Website
Making an Inclusive and Accessible Website
nopaneltrue


Panel
borderColor#CCC
bgColor#FFF
titleBGColor#F2F2F2
titleDesign Process & Management

Problem Statements and Design Goals

Excerpt Include
Problem Statements and Design Goals
Problem Statements and Design Goals
nopaneltrue
> Learn more

Agile Planning - Goals, benefits and details

Excerpt Include
Agile Planning - Goals, benefits and details
Agile Planning - Goals, benefits and details
nopaneltrue

> Learn more

Design and Development Process

> Learn more

Ontological design process

The purpose of a ontological design process is it assists collaborative teams by providing a representation of the multi-scaled design space and points of overlap between disciplines. This can take the form of an illustration or a textural analysis mapping the relationships between components and attributes. This overarching view of the domain is used as a tool for negotiating the properties (including interactions) of the design space.

> Example of a Ontological Proto-models

Physical kiosk design process

The purpose of a Physical Kiosk Design Process was to identify the differences between UI and product design.

> Learn more
> Example of preliminary research Preliminary kiosk research



...