Designing UX : prototyping / by Ben Coleman and Dan Goodwin.

Format:

Book

Author/Creator:

Coleman, Ben, author.

Goodwin, Dan, author.

Series:

Aspects of UX (Series)

Aspects of UX

Language:

English

Subjects (All):

World Wide Web.

Streaming video.

User interfaces (Computer systems).

Physical Description:

1 online resource (214 pages) : illustrations

Edition:

1st edition

Other Title:

Designing user experience prototyping

Place of Publication:

Collingwood, Victoria : SitePoint, 2017.

System Details:

text file

Summary:

It's well known that identifying and fixing problems in design is easier and cheaper if it can be done earlier in the process of design and build. That's because as the fidelity of the project we're working on increases, the effort involved in making changes increases. If we can test out early ideas to see if they work, in small chunks, then we can identify whether those ideas are going to work. To do this, we need to build prototypes. With easy-to-follow, practical advice, this book will show you how to use a number of different prototyping techniques to improve UX. It covers: The prototyping process Paper prototyping Interactive wireframing tools, such as Balsamiq and Axure Dedicated prototyping tools, including Marvel, Invision, and Adobe XD HTML prototypes How to use prototypes in your project workflow

Contents:

Intro

Designing UX: Prototyping

Notice of Rights

Notice of Liability

Trademark Notice

About Ben Coleman

About Dan Goodwin

About SitePoint

Table of Contents

Foreword

Acknowledgments

Thanks

Permissions (and Thanks!)

Who Should Read This Book

Conventions Used

Tips, Notes, and Warnings

Hey, You!

Ahem, Excuse Me ...

Make Sure You Always ...

Watch Out!

Supplementary Materials

Defining the Case for Prototyping

What is prototyping?

Why use prototypes?

Testing and Communicating UI Designs

Saving Time and Money

Bringing Users into the Design Process

Engaging Stakeholders in a Meaningful Way

Designing across Devices and Platforms

Creating and Testing with Real Content and Data

What can we prototype?

Return of the Native

Information Architecture and Structural Elements

Layout and Visual Hierarchy

Interactive Elements

What can't we do with a prototype?

Use Quantitative Research to Make Decisions

Testing for Completion/Conversion Funnel Progress

Testing Accessibility

Testing the Impact of Visual Design

Being the Sole Source of Documentation

Who are prototypes for?

Designers

Developers

Project and Account Managers

Business Analysts

Customer Support Representatives

Prototyping on a Large Scale

Summary

The Prototyping Process

When to Prototype

You have an Idea

Buy-in from Others

Information Architecture to Visualize, Present, and Test

A Lengthy User Journey or Several Changes of State over Time

A Pool of Available Users

Communicate and Test Designs across Devices

Lots of Ideas-or No Ideas-for Solving a Problem

More Time Spent Communicating than Developing

Specific Aspects of a Design Are Performing Poorly

Planning

What are you aiming to achieve?

What will you test and demonstrate?.

Where will you place the boundaries?

How will you use your prototype?

Who will work on your prototype, and how?

How much time, budget, and resources do you have?

What's the starting point for your prototype?

Gather Resources

Existing Design Resources

Stationery (for paper prototyping)

Content

Data

Get On With It!

Starting Top-down versus Bottom-up

Recycling Your Material

Working Collaboratively

Iterate and Demo, Testing Early and Often

An Overview of Prototyping Tools and Techniques

Segmenting and Categorizing Tools and Techniques

Design Fidelity

Tool Complexity and Speed of Use

The Aim of Your Prototype

Sorting Tools and Techniques into Our Three Categories

How the Tools Have Been Grouped

Tools that Failed to Make the Cut

Paper Prototyping

What is paper prototyping?

Pros

Test Ideas Quickly

Cheap and Involves No Tools or Training

Particularly Suited to Collaborating

Creating a Shared Understanding

No Training Necessary

No Technical Constraints

Cons

It's Unresponsive

Lots of Stationery Required

Needs Supervising

Takes Practice and Experience to Run Research Sessions

Not Easy to Share

Difficult to Edit

Making Paper Prototypes

What You'll Need

Your Approach

Devices

Desktop or Laptop

Tablet

Phone

Screens

Elements

Interactivity

Scrolling and sliding

Menus

Messages and Pop-up Boxes

Tabs

Accordions

Slide Up / Down Reveals

Select Boxes

Checkboxes and Radio Buttons

iOS / Android Native Design Elements

Literally Anything

Drawing Tips

Paper Prototypes from Digital Files

Collaboration = Team + Client + Users

Collaborative Creation of Prototypes

Materials for a Prototyping Workshop

Outlining the Purpose

Ready, Steady, Go!

Marking the Playing Field.

Presenting and Testing Ideas

Voting

Workshop Outcomes

Variants on this Approach

"Responsifying" an Existing Site with Paper Collage

Screen Capture

Printing and Converting to PDF for Large Images

Slicing and Dicing

Creating a New Design

Sketching the Gaps

The Finished Article

Paper Prototypes in Use

Presenting Ideas and Soliciting Feedback

Testing the Prototypes with Users

Roles in the Test Session

Anatomy of a Test Session

Digitizing Paper Prototypes

Creating Clickable Prototypes from Designs

From POP to Marvel

Marvel

Marvel Summary

Clickable PDFs

Linking between Pages in a Design Tool

Editing an Existing PDF to Add Hyperlinks

Clickable PDFs Summary

Tools Dedicated to Creating Clickable Prototypes

Sketch

The InVision Craft Plugin for Sketch

InVision Summary

Integrated Tools for Drawing and Creating Prototypes

Common Features in this Category of Prototyping Tools

Drawing and Design Features

Features Galore

Increased Support for Prototyping Interactivity

Prototyping Workflow Features

Balsamiq

Balsamiq Summary

OmniGraffle

AppleScript

OmniGraffle Summary

Axure

The Difference between Adaptive and Responsive

Axure Summary

Keynote and PowerPoint

Three Approaches for Using Keynote and PowerPoint for Prototyping

Creating a Clickable Prototype from an Existing Design

Using the Built-in Design Tools to Create a Prototype

Prototyping Animations

Sharing Prototypes Created in Keynote and Powerpoint

Keynote &amp

Powerpoint Summary

Adobe XD

Adobe XD Summary

Building HTML Prototypes

The Pros of Using HTML

Responsive Design

Flexibility

Complex Interactions

Latest Technology

Resources

Source Control for Collaboration

Source Control for a Historical Record.

Various Sources of Content

Accessibility

Speed of Change

And a Few Cons of HTML

Learning Challenges

Experience Limitations

Planning is a Must

Your HTML Prototype Planning Kit

User Research

Structure and Functionality

Skills Required

Tools for Rapid Prototyping

Preprocessors for Writing CSS

Tools for Interactivity

Making Headway with Frameworks

Bootstrap

Foundation

Pattern Lab

Skeleton

GDS Prototype Kit

All the Frameworks

Using Content in Prototypes

Sourcing Content

Using a Content Management System (CMS)

Example CMSs Used for Prototyping

Wordpress

Perch

Statamic

Creating Accessible Prototypes

Making Prototypes Available Online

Sharing Your Prototype Remotely

Moving Flat File Prototypes Online

Moving Content-managed Prototypes Online

Tools to Automate Deployment

Managing Databases

Hosting Providers

Throwaway versus Reusable Code in HTML Prototypes

HTML Prototyping Case Studies

Dorothy House Hospice Care

The Problem

The Solution

The Outcome

An Online Store

MacGuffin

The Outcomes

BBC Nature Prototype iPad App

Using Prototypes in Your Project Workflow

Exploring and Communicating Design Ideas with the Team

6-8-5 Sketching

InVision Options

Engaging with Stakeholders and Project Teams

Share at the Right Time, and Keep Sharing

Ensure Stakeholders Are Seeing the Latest Version

Efficiently Use Stakeholders' Time and Attention

Keep Promoting the Prototype

Be Prepared for Stakeholder Feedback

Bringing Users into the Design Process Using Prototypes

Exploring Motivations and Behaviors in Contextual Research

Testing Your Designs with Users.

User Research Testing

In-person/Remote and Moderated/Unmoderated Usability Testing

Supplementary Prototyping Tools Worth Seeking

Craft by InVision

Facebook Origami Studio

Framer

Need more of a Coffee Fix?

Principle

Xcode.

Notes:

Includes index.

Description based on online resource; title from PDF title page (ebrary, viewed March 27, 2017).

ISBN:

9781492019237

1492019232

9781492019251

1492019259

9781492019220

1492019224

OCLC:

981256564