UI/UX DESIGN Cras h Cou r s e ! DESIGN IS DOING THINGS WITH - PowerPoint PPT Presentation

SPRING 2020 CS 498RK UI/UX DESIGN Cras h Cou r s e !

“DESIGN IS DOING THINGS WITH INTENTION, trying to decide what's important to somebody, building a bunch of prototypes and showing them around, developing a point of view and getting it out so that it has impact in the world. So design is really a process of making impact on the world by doing this kind of creation of something new to the world and then getting it out there.” David Kelley http://boingboing.net/2012/09/22/design-thinking-for-social-goo.html

User YES NO A rt Problem YES NO A rt Evaluation YES NO Desig n A rt

“DESIGN IS CHOICE, and there are two places where there is room for creativity: 1. the creativity that you bring to enumerating meaningfully distinct options from which you choose 2. the creativity that you bring to defining the criteria, or heuristics, according to which you make your choices.” Bill Buxton Sketching User Experiences

Bill Buxton Sketching User Experiences

THE DESIGN PROCESS NEED- IDEATION FINDING EVALUATION ITERATION CREATION FINAL DESIGN

DESIGN IS Wicke d HARD indeterminate, incomplete, contradictory, and changing requirements Wicke d Proble m Exploring enough of the solution space Evaluating amongst alternatives Knowing when you’re done en.wikipedia.org/wiki/Wicked_problem

NUMBER OF DESIGN DECISIONS Fift y Shade s of Gre y

Wha t i s Goo d Desig n ?

MENTAL MODELS User’s understanding of how something works Inferred from the interacting with the design

MENTAL MODEL Good design communicates the right mental model Bad design: designer’s model di ff ers from user’s model Intentio n vs Perceptio n

clear mapping between controls and functionality no t a natura l mappin g !

NORMAN’S REFRIGERATOR The Design of Everyday Things, Don Norman

NORMAN’S REFRIGERATOR The Design of Everyday Things, Don Norman

THERMOSTATS What’s the fastest way to bring a room up to the desired temperature?

THERMOSTATS on-o ff switch furnace runs full blast until the room is at set temperature N o fas t wa y !

NEST Rotatio n : cycl e throug h option s Pus h : mak e selectio n

Prototypin g

PROTOTYPES Cheap and fast Spectrum of fidelity Multi-resolution design Tools: paper & pen, powerpoint, photoshop, balsamiq

TYPES OF PROTOTYPES Storyboarding Paper prototypes Video prototypes Functional prototypes highe r fidelit y

WHY LOW TO HIGH FIDELITY?

HIGH-FIDELITY MAKES IT HARD TO… get useful feedback get the right feedback iterate quickly calibrate clients

WIZARD-OF-OZ PROTOTYPING Functional prototype minus the functionality Test interaction before solving the hard problem S o i t ’ s a tototyp e !

PARALLEL PROTOTYPES Design space exploration Design As Exploration: Creating Interface Alternatives through Parallel Authoring and Runtime Tuning Hartmann et al. , UIST 2008

PARALLEL PROTOTYPES Better feedback Getting the Right Design and the Design Right: Testing Many Is Better Than One Tohidi et al. , CHI 2006

PARALLEL PROTOTYPES Better design and more divergence Parallel Prototyping Leads to Better Design Results, More Divergence, and Increased Self-E ff icacy Dow et al., TOCHI 2010

Digita l Desig n Proces s

DISCOVERY a . k . a . Nee d -Findin g , Researc h figure out with the client what to build analyze previous designs, competitors’ designs understand audience/users determine scope, requirements, and constraints Deliverable: Product Requirements Document (PRD)

takes up to 50% of DISCOVERY total project time PRD DESIGN UI/UX Design man y distinc t Information and concept s Navigation Design ar e explore d Visual Design

Separatio n of Desig n an d Developmen t DISCOVERY PRD DESIGN mockups and style guides PRODUCTION

UI/UX PROTOTYPES storyboarding paper prototypes video prototypes functional prototypes specifi c task s an d flo ws Sitemaps, Storyboards, and Specifications Newman and Landay, DIS 2000

WIREFRAMES a . k . a . Schematic s Balsamiq content (information, navigation, interface elements) and layout mixture of real content and annotated placeholders (images) variations in color, typography used to di ff erentiate di ff erent types of content no t th e fina l visua l desig n

MOODBOARDS

MOCKUPS high-fidelity prototypes of visual design static: created in Photoshop, Illustrator, Sketch

STYLE TILES betwee n moodboard s an d mocku ps styletil.es

STYLE TILES