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

▶
ui ux design
SMART_READER_LITE
LIVE PREVIEW

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

May 15, 2023 664 likes •1.04k views

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

slide-1
SLIDE 1

SPRING 2020 CS 498RK

UI/UX DESIGN

Crash Course!

slide-2
SLIDE 2

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

slide-3
SLIDE 3

User Problem Evaluation

YES YES YES NO NO NO

Design Art Art Art

slide-4
SLIDE 4

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,
  • r heuristics, according to which you make your

choices.” Bill Buxton Sketching User Experiences

“DESIGN IS CHOICE,

slide-5
SLIDE 5

Bill Buxton Sketching User Experiences

slide-6
SLIDE 6

IDEATION CREATION EVALUATION ITERATION NEED- FINDING FINAL DESIGN

THE DESIGN PROCESS

slide-7
SLIDE 7

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

slide-8
SLIDE 8

NUMBER OF DESIGN DECISIONS

Fifty Shades of Grey

slide-9
SLIDE 9

What is Good Design?

slide-10
SLIDE 10

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

MENTAL MODELS

slide-11
SLIDE 11

Good design communicates the right mental model Bad design: designer’s model differs from user’s model

MENTAL MODEL

Intention vs Perception

slide-12
SLIDE 12

clear mapping between controls and functionality

not a natural mapping!

slide-13
SLIDE 13

NORMAN’S REFRIGERATOR

The Design of Everyday Things, Don Norman

slide-14
SLIDE 14

NORMAN’S REFRIGERATOR

The Design of Everyday Things, Don Norman

slide-15
SLIDE 15

THERMOSTATS

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

slide-16
SLIDE 16

THERMOSTATS

No fast way!

  • n-off switch

furnace runs full blast until the room is at set temperature

slide-17
SLIDE 17

NEST

Rotation: cycle through options Push: make selection

slide-18
SLIDE 18

Prototyping

slide-19
SLIDE 19

PROTOTYPES

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

slide-20
SLIDE 20

TYPES OF PROTOTYPES

Storyboarding Paper prototypes Video prototypes Functional prototypes

higher fidelity

slide-21
SLIDE 21

WHY LOW TO HIGH FIDELITY?

slide-22
SLIDE 22

HIGH-FIDELITY MAKES IT HARD TO…

get useful feedback get the right feedback iterate quickly calibrate clients

slide-23
SLIDE 23

WIZARD-OF-OZ PROTOTYPING

Functional prototype minus the functionality Test interaction before solving the hard problem

So it’s a tototype!

slide-24
SLIDE 24

PARALLEL PROTOTYPES

Design space exploration

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

slide-25
SLIDE 25

PARALLEL PROTOTYPES

Better feedback

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

slide-26
SLIDE 26

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

slide-27
SLIDE 27

Digital Design Process

slide-28
SLIDE 28

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

slide-29
SLIDE 29

DISCOVERY DESIGN

UI/UX Design Information and Navigation Design Visual Design

many distinct concepts are explored takes up to 50% of total project time

PRD

slide-30
SLIDE 30

DISCOVERY DESIGN

mockups and style guides

PRODUCTION

Separation of Design and Development

PRD

slide-31
SLIDE 31

UI/UX PROTOTYPES

storyboarding paper prototypes video prototypes functional prototypes specific tasks and flows

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

slide-32
SLIDE 32

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 content

not the final visual design

slide-33
SLIDE 33

MOODBOARDS

slide-34
SLIDE 34

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

MOCKUPS

slide-35
SLIDE 35

STYLE TILES

between moodboards and mockups

styletil.es

slide-36
SLIDE 36

STYLE TILES