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.
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.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)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.
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.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 doneDesign 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.
Fluid 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.User Experience Resources
User experience organizations, sites, articles presentations, and other resources.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.
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.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.
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.
Accessibility Review Protocols
Accessibility can be evaluated through simple heuristics, or using a more detailed approach with assistive technologies and specific platforms.
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.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.
Design and Development Process
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