Design Handbook

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.

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

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

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

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

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

> 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

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 Resources

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

Inclusive and Accessible Web Content Guide

This guide is intended to give a multi-faceted view on how one may go about designing and making an inclusive website. If you are developing for a platform that uses themes (like Wordpress, or Drupal), or using a front-end framework (like Bootstrap), this guide will also give you insight into what features are desirable (or undesirable) in choosing a solution.

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

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