ui/ux design 2019-05-02آ  ui/ux prototypes storyboarding paper prototypes video prototypes ......

Download UI/UX DESIGN 2019-05-02آ  UI/UX PROTOTYPES storyboarding paper prototypes video prototypes ... Newman

Post on 28-May-2020

0 views

Category:

Documents

0 download

Embed Size (px)

TRANSCRIPT

  • SPRING 2019CS 498RK

    UI/UX DESIGN

    Crash Course!

  • 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.”

    “DESIGN IS DOING THINGS WITH INTENTION,

    David Kelley http://boingboing.net/2012/09/22/design-thinking-for-social-goo.html

    http://boingboing.net/2012/09/22/design-thinking-for-social-goo.html

  • User

    Problem

    Evaluation

    YES

    YES

    YES

    NO

    NO

    NO

    Design

    Art

    Art

    Art

  • 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

    “DESIGN IS CHOICE,

  • Bill Buxton Sketching User Experiences

  • IDEATION

    CREATION

    EVALUATION ITERATION

    NEED- FINDING

    FINAL DESIGN

    THE DESIGN PROCESS

  • DESIGN IS Wicked HARD indeterminate, incomplete, contradictory, and changing requirements

    Exploring enough of the solution space

    Evaluating amongst alternatives

    Knowing when you’re done

    Wicked Problem

    en.wikipedia.org/wiki/Wicked_problem

    http://en.wikipedia.org/wiki/Wicked_problem

  • NUMBER OF DESIGN DECISIONS

    Fifty Shades of Grey

  • What is Good Design?

  • User’s understanding of how something works

    Inferred from the interacting with the design

    MENTAL MODELS

  • Good design communicates the right mental model

    Bad design: designer’s model differs from user’s model

    MENTAL MODEL

    Intention vs Perception

  • clear mapping between controls and functionality

    not a natural mapping!

  • 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

    No fast way!

    on-off switch

    furnace runs full blast until the room is at set temperature

  • NEST Rotation: cycle through options

    Push: make selection

  • Prototyping

  • 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 higher fidelity

  • 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

    So it’s a tototype!

  • 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

    Parallel Prototyping Leads to Better Design Results, More Divergence, and Increased Self- Efficacy

    Dow et al., TOCHI 2010

    Better design and more divergence

  • Digital Design Process

  • DISCOVERY

    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)

    a.k.a. Need-Finding, Research

  • DISCOVERY

    DESIGN

    UI/UX Design

    Information and Navigation Design

    Visual Design

    many distinct concepts are explored

    takes up to 50% of total project timePRD

  • DISCOVERY

    DESIGN

    mockups and style guides

    PRODUCTION

    Separation of Design and Development

    PRD

  • UI/UX PROTOTYPES

    storyboarding paper prototypes video prototypes functional prototypes

    specific tasks and flows

    Sitemaps, Storyboards, and Specifications Newman and Landay, DIS 2000

  • WIREFRAMES Balsamiq

    a.k.a. Schematics content (information, navigation, interface elements) and layout

    mixture of real content and annotated placeholders (images)

    variations in color, typography used to differentiate different types of contentnot the final visual design

    http://balsamiq.com

  • MOODBOARDS

  • high-fidelity prototypes of visual design

    static: created in Photoshop, Illustrator, Sketch

    MOCKUPS

  • STYLE TILES

    between moodboards and mockups styletil.es

    http://styletil.es

  • STYLE TILES