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

Introduction to Design

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

Human Behavior

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

We conserve brainpower “Don’t make me think”

We don’t read, we scan

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

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

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

We never give full attention We’re always instinctively keeping an eye out for danger or opportunity. 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.

UX Design

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

What makes a good UX It’s not the surface layer.

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

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

Use familiar patterns Gestalt Principles Proximity ● Similarity ● Continuity - eye follows a perceived path ● Closure - brain fills in what’s missing ● Figure/ground ●

From: The Non-Designer's Design Book

From: The Non-Designer's Design Book

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

Use familiar patterns Material Design ( https://material.io/design/ )

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 ●

Use familiar patterns “Humane By Design” ( https://humanebydesign.com/ ) Empowering ● Finite ● Inclusive ● Respectful ● Thoughtful ● Transparent ●

Use familiar patterns Avoid “dark” patterns ( https://www.darkpatterns.org/types-of-dark-pattern ) Automatic opt-in ● Confirm-shaming ● Roach motel ● Etc ●

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

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

Iterate Build, Measure, Learn

Testing and Feedback

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

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

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?”

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

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

Tools

Tools ■ Invision Freehand ■ Figma ■ Noun Project ■ UI Kits

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

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

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

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/

Review

Human Behavior Scan, Satisfice, Muddle UX Design Empathize, follow patterns, iterate Testing and Feedback Prototype, listen, tweak Tools Freehand, Figma, Kits