Versions Compared

Old Version 204

changes.mady.by.user Jonathan Hung

Saved on

compared with

New Version Current

changes.mady.by.user Jonathan Hung

Saved on

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

Insert excerpt
Contextual Inquiry
Contextual Inquiry
nopaneltrue

> Learn more
> Fluid examples

Interviews and Observation

Insert excerpt
Interviews and Observation
Interviews and Observation
nopaneltrue
> Learn more

Surveys and Focus Groups

Insert excerpt
Surveys and Focus Groups
Surveys and Focus Groups
nopaneltrue

> Learn more


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

Personas

Insert excerpt
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

Insert excerpt
Affinity Diagrams
Affinity Diagrams
nopaneltrue

> Learn more
> Fluid examples

Scenarios

Insert excerpt
Scenarios
Scenarios
nopaneltrue

> Learn more


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

Design Patterns

Insert excerpt
Design Patterns
Design Patterns
nopaneltrue

> Learn more
> Fluid examples

Fluid Components

Insert excerpt
Components
Components
nopaneltrue

> Learn more & see components

Storyboarding

Insert excerpt
Storyboarding
Storyboarding
nopaneltrue
> Learn more

Competitive Analysis (a.k.a. Benchmarking)

Insert excerpt
Competitive Analysis (a.k.a. Benchmarking)
Competitive Analysis (a.k.a. Benchmarking)
nopaneltrue

> Learn more

User Experience Resources

Insert excerpt
UX Resources
UX Resources
nopaneltrue

> Learn more



Column
width50%


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

User Experience Walkthroughs

Insert excerpt
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
Insert excerpt
Heuristic Evaluation
Heuristic Evaluation
nopaneltrue

> Learn more

Cognitive Walkthrough

Insert excerpt
Cognitive Walkthrough
Cognitive Walkthrough
nopaneltrue

> Learn more

Accessibility Markup Review
Insert excerpt
Accessibility Markup Review
Accessibility Markup Review
nopaneltrue

> Learn more

Accessibility Review Protocols
Insert excerpt
Accessibility Review Protocols
Accessibility Review Protocols
nopaneltrue

> Learn more

User Testing

Insert excerpt
User Testing
User Testing
nopaneltrue

> Learn more
> Fluid examples


Panel
borderColor#CCC
bgColor#FFF
titleBGColor#F2F2F2
titleAccessibility

Accessibility Resources

Insert excerpt
Accessibility Resources
Accessibility Resources
nopaneltrue
Making an

Inclusive and Accessible Web Content Guide

Insert excerpt
Inclusive and Accessible Web Content Guide
Inclusive and Accessible
Website
Web Content Guide
nopaneltrue


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

Problem Statements and Design Goals

Insert excerpt
Problem Statements and Design Goals
Problem Statements and Design Goals
nopaneltrue
> Learn more

Agile Planning - Goals, benefits and details

Insert excerpt
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



...