Introduction to Design Topics Human Behavior UX Design Testing - - PowerPoint PPT Presentation

▶
introduction to design
SMART_READER_LITE
LIVE PREVIEW

Introduction to Design Topics Human Behavior UX Design Testing - - PowerPoint PPT Presentation

Sep 09, 2022 381 likes •814 views

Introduction to Design Topics Human Behavior UX Design Testing and Feedback Tools Human Behavior Human Behavior We conserve brainpower We dont read, we scan We satisfice We muddle our way through We hate

slide-1
SLIDE 1

Introduction to Design

slide-2
SLIDE 2

Topics

■ Human Behavior ■ UX Design ■ Testing and Feedback ■ Tools

slide-3
SLIDE 3

Human Behavior

slide-4
SLIDE 4

Human Behavior

■ We conserve brainpower ■ We don’t read, we scan ■ We satisfice ■ We muddle our way through ■ We hate wasting time ■ We never give anything our full attention

slide-5
SLIDE 5

We conserve brainpower

“Don’t make me think”

slide-6
SLIDE 6

We don’t read, we scan

slide-7
SLIDE 7

We satisfice

Once we find something that works, we usually don’t try to

  • ptimize
slide-8
SLIDE 8

We muddle

We probe around until we get the result we want. We don’t have to understand something as long as it works.

slide-9
SLIDE 9

We hate wasting time

We react to the tiniest delays and setbacks. If something wastes our time, we’ll keep an eye out for another solution

slide-10
SLIDE 10

We never give full attention

We’re always instinctively keeping an eye out for danger or

  • pportunity.

The modern world constantly preys on our senses for attention. Nobody is going to give your app their full attention. They’ll give it partial attention for tiny interrupted windows of time.

slide-11
SLIDE 11

UX Design

slide-12
SLIDE 12

UX Design ■ Design isn’t the surface layer ■ Empathize ■ Use familiar patterns ■ Simplify ■ Iterate

slide-13
SLIDE 13

What makes a good UX

It’s not the surface layer.

slide-14
SLIDE 14

Empathize

People have a hard time articulating their motivations and behaviors. Most people don’t empathize. They project themselves. Cultivate empathy through immersion.

slide-15
SLIDE 15

Use familiar patterns

Gestalt principles Reference Apple HIG and Material Design Avoid “dark patterns” Don’t invent new UI components

slide-16
SLIDE 16

Use familiar patterns

Gestalt Principles

  • Proximity
  • Similarity
  • Continuity - eye follows a perceived path
  • Closure - brain fills in what’s missing
  • Figure/ground
slide-17
SLIDE 17

From: The Non-Designer's Design Book

slide-18
SLIDE 18

From: The Non-Designer's Design Book

slide-19
SLIDE 19

Use familiar patterns

Apple HIG (https://developer.apple.com/design/human-interface-guidelines/)

slide-20
SLIDE 20

Use familiar patterns

Material Design (https://material.io/design/)

slide-21
SLIDE 21

Use familiar patterns

“Laws of UX” (https://lawsofux.com/)

  • Pretty is perceived as more usable
  • Productivity soars when interactions are <400ms
  • Bigger and closer target, faster to click
  • Time increases exponentially with choice complexity
  • People spend most of their time in other tools
  • People assume visual grouping is meaningful
  • People judge experiences based on peak and end
slide-22
SLIDE 22

Use familiar patterns

“Humane By Design” (https://humanebydesign.com/)

  • Empowering
  • Finite
  • Inclusive
  • Respectful
  • Thoughtful
  • Transparent
slide-23
SLIDE 23

Use familiar patterns

Avoid “dark” patterns (https://www.darkpatterns.org/types-of-dark-pattern)

  • Automatic opt-in
  • Confirm-shaming
  • Roach motel
  • Etc
slide-24
SLIDE 24

Use familiar patterns

Don’t invent new UI components. Use the classic elements as much as possible.

slide-25
SLIDE 25

Simplify

Be concise. Remove embellishments. Don’t show off.

slide-26
SLIDE 26

Iterate

Build, Measure, Learn

slide-27
SLIDE 27

Testing and Feedback

slide-28
SLIDE 28

Testing and Feedback ■ Prototype ■ Test on your friends ■ Ask “how would you…” ■ Don’t give away the answers ■ Tweak instead of starting over

slide-29
SLIDE 29

Prototype

High fidelity vs low fidelity Whiteboards Paper prototypes Clickable prototypes Semi-functional prototypes

slide-30
SLIDE 30

Test, Ask Questions

“What do you think this does?” “If you wanted to accomplish X, what would you do first?” Where is X? “Where did you expect it to be?” “What would you call that?” “What was the most confusing part?”

slide-31
SLIDE 31

Prototyping helps you spot your own mistakes before bias and numbness sets in

slide-32
SLIDE 32

Tweak instead of starting over

Be “scientific” Don’t change all the variables at once Be willing to change anything Try the simplest thing that can possibly work

slide-33
SLIDE 33

Tools

slide-34
SLIDE 34

Tools

■ Invision Freehand ■ Figma ■ Noun Project ■ UI Kits

slide-35
SLIDE 35

Freehand

Whiteboard on steroids Infinite canvas, infinite zoom Approachable Collaborate remotely Annotate screenshots

slide-36
SLIDE 36

Figma

Create clickable prototypes Components and styles Collaborate remotely Share prototypes Get feedback

slide-37
SLIDE 37

Icons

Material icons https://material.io/resources/icons/ Noun project https://thenounproject.com/

slide-38
SLIDE 38

UI Kits

Figma Freebies https://www.figmafreebies.com/ Figma Material Design Kit https://www.figma.com/resources/assets/material-

design-themeing-ui-kit/

Setproduct https://setproduct.com/

slide-39
SLIDE 39

Review

slide-40
SLIDE 40

Human Behavior

Scan, Satisfice, Muddle

UX Design

Empathize, follow patterns, iterate

Testing and Feedback

Prototype, listen, tweak

Tools

Freehand, Figma, Kits

slide-41
SLIDE 41