What the UX? – Confessions of a Designer

What the UX? Confessions of a Designer

@Thomas_Glaeser | Head of UX @ Delightex Mobile Tech Conference Munich | 25th of March 2015

Who’s that dude?

@Thomas_Glaeser

CoachingSpaces

PushFree

http://www.awwwards.com/creative-ui-design-examples-for-great-ux.html?utm_source=11-07-2012

http://www.awwwards.com/creative-ui-design-examples-for-great-ux.html?utm_source=11-07-2012

http://edlea.com/blog/product-ux-ui-cereal






»User Experience (UX) covers all interactions between humans and a product or service.«

Products & Services with good UX

»Touchpoints describe the points where a company and a customer meet.«

Touchpoints

»UX is about people not devices.«

»UX is about journeys and emotions, not only screens.«

Influencing factors of UX

Produkt oderService

Anforderungen

Benutzerziele UnternehmenszieleBusiness GoalsUser Goals

Product & Service

Requirements

nützlich

nutzbar

bedeutsam

Visualität

Funktionalität

Interaktivität

Parameters of UX

meaningful

usable

useful

Useful… make it usable

Make it usable…

Usable… make it meaningful

Meaningful

nützlich

nutzbar

bedeutsam

Visualität

Funktionalität

Interaktivität

Form factors of UX

meaningful

usable

useful

Functionality & Content

InteractivityVisuality

Functionality

https://www.dropbox.com

http://tapbots.com/software/tweetbot/

Interactivity

http://tapbots.com/software/tweetbot

http://tapbots.com/software/tweetbot/

Visuality

https://play.google.com/store/apps/details?id=com.opoloo.holotimer&hl=de

https://play.google.com/store/apps/details?id=com.opoloo.holotimer&hl=de

nützlich

nutzbar

bedeutsam

Visualität

Funktionalität

Interaktivität

Good design happens in iterations

meaningful

usable

useful


Visuality Interactivity

But how to get there?

http://precious-forever.com

http://precious-forever.com

The UX Framework

UX Framework

CREATE

CREATE

Interactivity


Product

Visuality

UX Framework

»Never go to a meetingwithout a prototype.«

Mantra at IDEO

Ask yourself…What do I need to prove?

Our product/service helps people who want tojob/need by preventing action (e.g. reduce, avoid) and

promoting action (e.g. increase, enable).

(Unlike value proposition of existing solution)

Landing Page

Landing Page

Sketch-to-Clickdummy Tools

Push Free

How it works

1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt

ut labore et dolore magna aliqua.

What Push is and why the user must downloadand use it to free themselves up from blocked issues.

Download Push Free and start unblocking blah blah blah……

Download on theAppStore

Delightex is an interdisciplinary and diverse team, really passionate about supporting people with their personal development. That's why we design tools and build technologies based on insights from neuroscience, psychology and coaching.

Our office is located in the beautiful city of Munich. If you want to get in touch with us just call us or write a mail.

About Delightex

About the method

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

About Dr. Hans Hein

Delightex 2015

DX logo

Terms of use Imprint Contact us

How it works

1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

2


3


Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.



About the method About Dr. Hans Hein



DX logo

About Delightex

Terms of use Imprint Contact us Delightex 2015

Push Free

What Push is and why the user must downloadand use it to free themselves up from blocked issues.


Download Push Free and start unblocking blah blah blah……

Push Free

How it works

1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt

ut labore et dolore magna aliqua.

What Push is and why the user must downloadand use it to free themselves up from blocked issues.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Download Push Free and start unblocking blah blah blah……orem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.




About Delightex

About the method



About Dr. Hans Hein

Delightex 2015

DX logo

Terms of use Imprint Contact us

Push Free

What Push is and why the user must downloadand use it to free themselves up from blocked issues.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.



DX logo

About Delightex

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

About the method About Dr. Hans Hein

Terms of use Imprint Contact us Delightex 2015

How it works

1


2


3


Download Push Free and start unblocking blah blah blah……orem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.


Contact us

Tell us about your problems, questions or praises

Include a screenshot of this page

& Send

✉Contact us

4

16

4

2

16

header3

Pattern: Dropdown/ToastBehaviour: Dropdown

big entry field

grey body

Call to action, icon+text

16

2020

46

Interactive Prototyping Tools

Ask yourself…How much detail is needed?

concreteabstract

Sketch Wireframe Mockup

How much detail is needed?

Realtime Mockup Preview

Effortand

Costs

Fidelity highlow

high

Vision Sketch &

Ad-lib

Screenflow

ClickdummyVideo

ReleaseCandidate

Paper Prototype

ConciergeService

Storyboard

LandingPage

User Journey

BasicLayout

(Mockup)

BasicLayout

(Sketch)

Stop-MotionVideo

ProtoPersonas

Effectivity of Prototyping

»Learn fast, learn early.«

based on Silicon Valley’s »Fail Fast« Mantra

CREATE

Interactivity


Product

Visuality

UX Framework

UNDERSTAND

CREATE

Business Goals

Interactivity


ProductUser Goals

Requirements

Visuality

UX Framework

UNDERSTAND

AnalysingData

InterviewPeople

ObservePeople

Roleplayyour User

Co-Creation

RunStudies

Six ways to collect insights

How do you like my new idea?Do you want this?

Could think about using it?How much would you pay for it?

What would be interesting for you?

Interview No-Noes

Can you talk me through the last time that happened?Can you talk me through your workflow?Why do you bother? Was there something joyful as well? How do you currently deal with this problem?What else have you tried?

How much money does this problem cost you?Where does the money come from?

Who else should I talk to?

Interview

CREATE

Business Goals

Interactivity


ProductUser Goals

Requirements

Visuality

UX Framework

UNDERSTAND

EVALUATE

CREATEUNDERSTAND EVALUATE

Business Goals

Interactivity


ProductUser Goals

Requirements

Visuality

Inspection

User Testing

UX Framework

»When the cook tastes hisown soup, that‘s Inspection.When the guests tastes his soup, that‘s User Testing.«

1. Give Feedback

2. Speak the language of the user

3. Give Control & Freedom

4. Be consistent and use Platform Standards

5. Help to prevent errors

6. Support recognition rather then recall

7. Be flexibel and efficient

8. Be clear and reduced

9. Be helpful in case of errors

10. Give support, if help is needed

10 Signs for a good UI

http://www.nngroup.com/articles/ten-usability-heuristics/

http://www.nngroup.com/articles/ten-usability-heuristics/

Ways to test

Think-Aloud / Co-Discovery

Interview & Questionnaires

Web-Analytics & Mouse-Tracking

Ways to capture feedback

:( Bad experience

:I Not that good

:) Positive experience

Neutral quote

Feedback Tools

On your own

The crowd

Alternative: Get drunk ;)

https://www.youtube.com/watch?v=r2CbbBLVaPk

https://www.youtube.com/watch?v=r2CbbBLVaPk

»Show results of user tests to other disciplines of your team.Or invite them as a silent follower next time.«

How do I integrate it?

CREATEUNDERSTAND EVALUATE

Business Goals

Interactivity


ProductUser Goals

Requirements

Visuality

Inspection

User Testing

Entering the UX Framework

New vision

No vision

Existing vision

Wrap up

User Experience Design✓ balances business goals, user goals and requirements.

✓ reveals user needs, that should high prio for any product.

✓ helps to save money by only developing what’s necessary.

✓ can spot growth opportunities for the product.

✓ reduces costs on user support.

✓ provides the skeleton for any product.

✓ is the starting point for any product.

Thank you! Let’s stay in touch

@Thomas_Glaeserwww.delightex.com

Questions plz

http://www.delightex.com