56
Designing for humans

HI! I’m Nele - ut I’m Nele. UX design is the art ... Use real content and data ... Guerilla usability testing. Guerilla usability testing Show your sketches to your coworkers

Embed Size (px)

Citation preview

Page 1: HI! I’m Nele - ut I’m Nele. UX design is the art ... Use real content and data ... Guerilla usability testing. Guerilla usability testing Show your sketches to your coworkers

Designing for humans

Page 2: HI! I’m Nele - ut I’m Nele. UX design is the art ... Use real content and data ... Guerilla usability testing. Guerilla usability testing Show your sketches to your coworkers

HI! I’m Nele

Page 3: HI! I’m Nele - ut I’m Nele. UX design is the art ... Use real content and data ... Guerilla usability testing. Guerilla usability testing Show your sketches to your coworkers

Mobile interaction designer @ Mobi Lab Creative partner @ Nope Creative

[email protected]

HI! I’m Nele

Page 4: HI! I’m Nele - ut I’m Nele. UX design is the art ... Use real content and data ... Guerilla usability testing. Guerilla usability testing Show your sketches to your coworkers

UX design is the art and science of generating positive emotions through product interactions

- Tomer Sharon / Senior UX Researcher @ Google

Page 5: HI! I’m Nele - ut I’m Nele. UX design is the art ... Use real content and data ... Guerilla usability testing. Guerilla usability testing Show your sketches to your coworkers

“You can’t design an experience”

Page 6: HI! I’m Nele - ut I’m Nele. UX design is the art ... Use real content and data ... Guerilla usability testing. Guerilla usability testing Show your sketches to your coworkers

“You can’t design an experience”

What about Disneyland, or any kind of game

Page 7: HI! I’m Nele - ut I’m Nele. UX design is the art ... Use real content and data ... Guerilla usability testing. Guerilla usability testing Show your sketches to your coworkers

We’re all designing experiences

Page 8: HI! I’m Nele - ut I’m Nele. UX design is the art ... Use real content and data ... Guerilla usability testing. Guerilla usability testing Show your sketches to your coworkers

We’re all designing experiences

That christmas present you carefully picked?

Page 9: HI! I’m Nele - ut I’m Nele. UX design is the art ... Use real content and data ... Guerilla usability testing. Guerilla usability testing Show your sketches to your coworkers

Good design solves problems.

Page 10: HI! I’m Nele - ut I’m Nele. UX design is the art ... Use real content and data ... Guerilla usability testing. Guerilla usability testing Show your sketches to your coworkers
Page 11: HI! I’m Nele - ut I’m Nele. UX design is the art ... Use real content and data ... Guerilla usability testing. Guerilla usability testing Show your sketches to your coworkers
Page 12: HI! I’m Nele - ut I’m Nele. UX design is the art ... Use real content and data ... Guerilla usability testing. Guerilla usability testing Show your sketches to your coworkers
Page 13: HI! I’m Nele - ut I’m Nele. UX design is the art ... Use real content and data ... Guerilla usability testing. Guerilla usability testing Show your sketches to your coworkers

The elements of UxD

Page 14: HI! I’m Nele - ut I’m Nele. UX design is the art ... Use real content and data ... Guerilla usability testing. Guerilla usability testing Show your sketches to your coworkers

Strategy - users needs, business goals

Page 15: HI! I’m Nele - ut I’m Nele. UX design is the art ... Use real content and data ... Guerilla usability testing. Guerilla usability testing Show your sketches to your coworkers

Strategy - users needs, business goals

Scope - brief, requirements, specifications

Page 16: HI! I’m Nele - ut I’m Nele. UX design is the art ... Use real content and data ... Guerilla usability testing. Guerilla usability testing Show your sketches to your coworkers

Strategy - users needs, business goals

Scope - brief, requirements, specifications

Structure - info architecture, choreography

Page 17: HI! I’m Nele - ut I’m Nele. UX design is the art ... Use real content and data ... Guerilla usability testing. Guerilla usability testing Show your sketches to your coworkers

Strategy - users needs, business goals

Scope - brief, requirements, specifications

Structure - info architecture, choreography

Skeleton - flow, navigation, information design

Page 18: HI! I’m Nele - ut I’m Nele. UX design is the art ... Use real content and data ... Guerilla usability testing. Guerilla usability testing Show your sketches to your coworkers

Strategy - users needs, business goals

Scope - brief, requirements, specifications

Structure - info architecture, choreography

Skeleton - flow, navigation, information design

Surface - visual / sensory design

Page 19: HI! I’m Nele - ut I’m Nele. UX design is the art ... Use real content and data ... Guerilla usability testing. Guerilla usability testing Show your sketches to your coworkers

Strategy

What do the users want? What do the users need?

What kind of problem is this particular product solving?

What does it do for the people who use it?

How does this product help to grow the business?

Page 20: HI! I’m Nele - ut I’m Nele. UX design is the art ... Use real content and data ... Guerilla usability testing. Guerilla usability testing Show your sketches to your coworkers

UX Users needs

Business needs

Page 21: HI! I’m Nele - ut I’m Nele. UX design is the art ... Use real content and data ... Guerilla usability testing. Guerilla usability testing Show your sketches to your coworkers

Scope

Teacher Student Manager

Log in

Check my schedule

Check my schedule

Add /remove teachers

Add /remove students

Log in Log in

Give grades to students

See my grades

Add homework for students

Check out homework

MVP

Page 22: HI! I’m Nele - ut I’m Nele. UX design is the art ... Use real content and data ... Guerilla usability testing. Guerilla usability testing Show your sketches to your coworkers

Story mapping can help with

What to build first, MVP, version 2 etc

Encourage iterative development

Prioritising and grooming backlog

Visualise the project progress

Page 23: HI! I’m Nele - ut I’m Nele. UX design is the art ... Use real content and data ... Guerilla usability testing. Guerilla usability testing Show your sketches to your coworkers

Structure

How is everything organised?

yes

yes yes

no no

yes

Page 24: HI! I’m Nele - ut I’m Nele. UX design is the art ... Use real content and data ... Guerilla usability testing. Guerilla usability testing Show your sketches to your coworkers

Skeleton

How will it work?

Page 25: HI! I’m Nele - ut I’m Nele. UX design is the art ... Use real content and data ... Guerilla usability testing. Guerilla usability testing Show your sketches to your coworkers

WireframingWireframing is about rapid ideation. To do this right you need to explore

multiple directions and opportunities

Page 26: HI! I’m Nele - ut I’m Nele. UX design is the art ... Use real content and data ... Guerilla usability testing. Guerilla usability testing Show your sketches to your coworkers

Some old school rules:

Do not use colors

Do not use images 

 Use one font, for emphasis use weights

Use real content and data

Important actions should take as few steps as possible

Page 27: HI! I’m Nele - ut I’m Nele. UX design is the art ... Use real content and data ... Guerilla usability testing. Guerilla usability testing Show your sketches to your coworkers
Page 28: HI! I’m Nele - ut I’m Nele. UX design is the art ... Use real content and data ... Guerilla usability testing. Guerilla usability testing Show your sketches to your coworkers
Page 29: HI! I’m Nele - ut I’m Nele. UX design is the art ... Use real content and data ... Guerilla usability testing. Guerilla usability testing Show your sketches to your coworkers

Surface

How does it look like?

Consistency through the product

Page 30: HI! I’m Nele - ut I’m Nele. UX design is the art ... Use real content and data ... Guerilla usability testing. Guerilla usability testing Show your sketches to your coworkers

So, user experience is…

Page 31: HI! I’m Nele - ut I’m Nele. UX design is the art ... Use real content and data ... Guerilla usability testing. Guerilla usability testing Show your sketches to your coworkers

So, user experience is…A combined result of all our efforts and processes

Page 32: HI! I’m Nele - ut I’m Nele. UX design is the art ... Use real content and data ... Guerilla usability testing. Guerilla usability testing Show your sketches to your coworkers

Your product is like a book

Page 33: HI! I’m Nele - ut I’m Nele. UX design is the art ... Use real content and data ... Guerilla usability testing. Guerilla usability testing Show your sketches to your coworkers

Your product is like a bookThe hero must overcome challenges in order to

reach the tower and slay the evil dragon

Page 34: HI! I’m Nele - ut I’m Nele. UX design is the art ... Use real content and data ... Guerilla usability testing. Guerilla usability testing Show your sketches to your coworkers

Along the way the hero needs to gain the right knowledge and experience for the final showdown.

Page 35: HI! I’m Nele - ut I’m Nele. UX design is the art ... Use real content and data ... Guerilla usability testing. Guerilla usability testing Show your sketches to your coworkers

Define your hero’s story

Page 36: HI! I’m Nele - ut I’m Nele. UX design is the art ... Use real content and data ... Guerilla usability testing. Guerilla usability testing Show your sketches to your coworkers

Define your hero’s storyThis will frame your mind and help you to think

in small chapters like your users who are learning to use the product

Page 37: HI! I’m Nele - ut I’m Nele. UX design is the art ... Use real content and data ... Guerilla usability testing. Guerilla usability testing Show your sketches to your coworkers

Questions?Thoughts?

Page 38: HI! I’m Nele - ut I’m Nele. UX design is the art ... Use real content and data ... Guerilla usability testing. Guerilla usability testing Show your sketches to your coworkers

Good

Page 39: HI! I’m Nele - ut I’m Nele. UX design is the art ... Use real content and data ... Guerilla usability testing. Guerilla usability testing Show your sketches to your coworkers

Ideal design process

Page 40: HI! I’m Nele - ut I’m Nele. UX design is the art ... Use real content and data ... Guerilla usability testing. Guerilla usability testing Show your sketches to your coworkers

Ideal design process

User research

User stories, flows

Sketching, prototyping

Focus group testing

Design mockups

Page 41: HI! I’m Nele - ut I’m Nele. UX design is the art ... Use real content and data ... Guerilla usability testing. Guerilla usability testing Show your sketches to your coworkers

Ideal design process

User research

User stories, flows

Sketching, prototyping

Focus group testing

Design mockups

Page 42: HI! I’m Nele - ut I’m Nele. UX design is the art ... Use real content and data ... Guerilla usability testing. Guerilla usability testing Show your sketches to your coworkers

Ideal design process

User research

User stories, flows

Sketching, prototyping

Focus group testing

Design mockups

No budget

User research

User stories, flows

Sketching, prototyping

Focus group testing

Design mockups

Page 43: HI! I’m Nele - ut I’m Nele. UX design is the art ... Use real content and data ... Guerilla usability testing. Guerilla usability testing Show your sketches to your coworkers

So, what now?It’s not the end, really

Page 44: HI! I’m Nele - ut I’m Nele. UX design is the art ... Use real content and data ... Guerilla usability testing. Guerilla usability testing Show your sketches to your coworkers

Benchmark your competition

Page 45: HI! I’m Nele - ut I’m Nele. UX design is the art ... Use real content and data ... Guerilla usability testing. Guerilla usability testing Show your sketches to your coworkers

Benchmark your competition Analyse their products or services,

try to learn from their mistakes

Page 46: HI! I’m Nele - ut I’m Nele. UX design is the art ... Use real content and data ... Guerilla usability testing. Guerilla usability testing Show your sketches to your coworkers

Guerilla usability testing

Page 47: HI! I’m Nele - ut I’m Nele. UX design is the art ... Use real content and data ... Guerilla usability testing. Guerilla usability testing Show your sketches to your coworkers

Guerilla usability testingShow your sketches to your coworkers, friends or family

Page 48: HI! I’m Nele - ut I’m Nele. UX design is the art ... Use real content and data ... Guerilla usability testing. Guerilla usability testing Show your sketches to your coworkers

Use patterns

Page 49: HI! I’m Nele - ut I’m Nele. UX design is the art ... Use real content and data ... Guerilla usability testing. Guerilla usability testing Show your sketches to your coworkers

Use patternsUse patterns that already have proven to work

Page 50: HI! I’m Nele - ut I’m Nele. UX design is the art ... Use real content and data ... Guerilla usability testing. Guerilla usability testing Show your sketches to your coworkers

Don’t be afraid to ask others

Page 51: HI! I’m Nele - ut I’m Nele. UX design is the art ... Use real content and data ... Guerilla usability testing. Guerilla usability testing Show your sketches to your coworkers

Don’t be afraid to ask othersAny kind of feedback is extremely valuable

Page 52: HI! I’m Nele - ut I’m Nele. UX design is the art ... Use real content and data ... Guerilla usability testing. Guerilla usability testing Show your sketches to your coworkers

Questions?Thoughts?

Page 53: HI! I’m Nele - ut I’m Nele. UX design is the art ... Use real content and data ... Guerilla usability testing. Guerilla usability testing Show your sketches to your coworkers
Page 54: HI! I’m Nele - ut I’m Nele. UX design is the art ... Use real content and data ... Guerilla usability testing. Guerilla usability testing Show your sketches to your coworkers

Materials

Don't Make Me Think by Steve Krug

Designing the Obvious by Robert Hoekman, Jr.

Sketching User Experiences by Bill Buxton.

Beautiful Users - By Ellen Lupton

Page 55: HI! I’m Nele - ut I’m Nele. UX design is the art ... Use real content and data ... Guerilla usability testing. Guerilla usability testing Show your sketches to your coworkers

Nielsen Norman Group - www.nngroup.com/articles

Sketching User Experiences - www.designprinciplesftw.com

Sidebar - sidebar.io

PatternTap - zurb.com/patterntap

Good UI - www.goodui.org

Page 56: HI! I’m Nele - ut I’m Nele. UX design is the art ... Use real content and data ... Guerilla usability testing. Guerilla usability testing Show your sketches to your coworkers

Questions?Thoughts?