[Aspects of UX 01] • Designing UX · Prototyping by Ben Coleman, Dan Goodwin -- Read -- Imperial Library of Trantor

Index

Designing UX: Prototyping Notice of Rights Notice of Liability Trademark Notice About Ben Coleman About Dan Goodwin About SitePoint Foreword Acknowledgments

Thanks Permissions (and Thanks!)

Who Should Read This Book Supplementary Materials Chapter 1: 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?

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

Summary

Chapter 2: 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 Summary

Chapter 3: 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 Summary

Chapter 4: Paper Prototyping

What is paper prototyping?

Pros Cons

Making Paper Prototypes

What You'll Need Your Approach Drawing Tips Paper Prototypes from Digital Files

Collaboration = Team + Client + Users

Collaborative Creation of Prototypes

“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

Summary

Chapter 5: Creating Clickable Prototypes from Designs

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

InVision Summary

Summary

Chapter 6: Integrated Tools for Drawing and Creating Prototypes

Common Features in this Category of Prototyping Tools

Drawing and Design Features Increased Support for Prototyping Interactivity Prototyping Workflow Features

Balsamiq

Balsamiq Summary

OmniGraffle

OmniGraffle Summary

Axure

Axure Summary

Keynote and PowerPoint

Three Approaches for Using Keynote and PowerPoint for Prototyping Sharing Prototypes Created in Keynote and Powerpoint Keynote & Powerpoint Summary

Adobe XD

Adobe XD Summary

Summary

Chapter 7: 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 Content Structure and Functionality

Skills Required Tools for Rapid Prototyping

Preprocessors for Writing CSS Tools for Interactivity Making Headway with Frameworks

Using Content in Prototypes Using a Content Management System (CMS)

Example CMSs Used for Prototyping

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 An Online Store MacGuffin BBC Nature Prototype iPad App

Summary

Chapter 8: Using Prototypes in Your Project Workflow

Exploring and Communicating Design Ideas with the Team 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

Summary

Appendix A: Supplementary Prototyping Tools Worth Seeking

Craft by InVision Facebook Origami Studio Framer Principle Xcode

← Prev
Back
Next →

← Prev
Back
Next →