UX Workshop

UX Workshop

Rik Lomas@riklomas

Jessi Baker@jessibaker

What are we going to do today?

What’s UX!?UX success

StrategyUser Centred Design

Goals, tasksInformation Architecture

WireframingSketching

Paper PrototypingAssessment

StatesUser Flows & Scenarios

Make a case for wireframesMock-up sowareCode prototypes

User Testing

What will you get out of it?

What’s UX!?

User Experience Design

“Anyone can make the simple complicated. Creativity is making the complicated simple.”

- Charles Mingus

e design of experiences

e design of experiencesHuman centred

e design of experiencesHuman centredInteractions

e design of experiencesHuman centredInteractionsDifferent to UI

e design of experiencesHuman centredInteractionsDifferent to UIAccess to value

Examples of good UX

POST (& other apps) by Meri Media

Dollar Shave Club

dribbble

Rdio product site

myownbike.de

path app

Bus o clock

Where to start with UX?

A great idea!

What’s your idea?

Now write yours with no mention of the technology medium or other ideas...

Do you LOVE this idea?

Platforms to consider

MVP

Roadmap

What’s success?

Select your platforms

Name your idea

Elevator pitch!

Design based on a real need and for real people...

Do you have access to your users?

What is a persona?

Exercise –Write down 3 personas for your site/app

What are the key goals?

What the user wants to do, not how the user achieves them.

No assumptions about the system interface.

Can be used to compare different interface design alternatives in a fair way.

Can be personal, practical or false goals.

Key goal of Foursquare

Tell my friends who are in town that I

have just arrived at a location

Demo –Goals for PopDown

Exercise –Write down the key goals for your project

Tasks

Describe the steps necessary to achieve the goals.

Can vary with the available technology.

Broken down into steps for task analysis, and are recombined into sequence of steps for scenario development.

Key task of Foursquare

Select foursquare app on my phone

Select “check-in” button

Select the location I’m at from a list of

nearest locations

Select “Share with facebook”

Select “check-in” button

Demo –Tasks for PopDown

Exercise –Write down 3 task that achieve 3 goals for your site/app

Information Architecture

Post-its to Omnigraffle...

Site maps & Flow charts

Site map

Site map

Site map

Flow chart

Flow chart

Flow chart

Example -Craing an IA for PopDown

Link tasks into simple steps, think about a real user performing the tasks

Highlight the core functions in your %ow

Exercise –IA: Draw a hierarchy of the key tasks, highlighting the key functions

Remove the crap from your app

Core repeatable functions. e.g. Tweet, retweet + follow

What is a wireframe?

No fontsNo colourNo graphics

Wireframe !delity

PaperPrototype

Sketching CodePrototype

Mock upSoware

Low

High

Why make wireframes?

Concept Exploration

Concept ExplorationLayout Content on Pages

Concept ExplorationLayout Content on PagesBrainstorm Interactions

Concept ExplorationLayout Content on PagesBrainstorm InteractionsStorytelling

Concept ExplorationLayout Content on PagesBrainstorm InteractionsStorytellingBuild Consensus

Concept ExplorationLayout Content on PagesBrainstorm InteractionsStorytellingBuild ConsensusDocumentation

Concept ExplorationLayout Content on PagesBrainstorm InteractionsStorytellingBuild ConsensusDocumentationMinimize Risk

Sketching

Demo –Facebook Pro!le Page

Exercise –Draw a sketch of the Twitter pro!le page on the web version or the app version

LUNCH!

Guess the wireframe!

8 tips for wireframing

Have clear objectives

Make it functional

Keep it clean

User Interface is not User Experience

Repetition. Repetition. Repetition.

Consider dependencies

Don’t be lazy

Know when to stop

Demo –Sketch of PopDown

Exercise –Draw a sketch for your idea.

Assessment

Do your key functions standout?

Why designs fail?

Why designs fail?

Users aren’t motivated to achieve goals

Why designs fail?

Users aren’t motivated to achieve goalsUsers don’t understand how it works

Why designs fail?

Users aren’t motivated to achieve goalsUsers don’t understand how it worksUsers don’t see things

States

Errors, alerts & successes

No content

Events (e.g. click, hover, tap and swipe)

Hover mode - Google maps

Responsive design and orientation

Responsive web design examples

User "ows & Scenarios

User Flow for 1 scenario

User %ow for multiple scenarios

User %ow for multiple scenarios

User %ow for all scenarios

Scenarios help you design and test

Demo-Scenario for PopDown and wireframing of the user "ow

Excercise -Chose a scenario for your project and wireframe of the user "ow with less than 5 key screens

BREAK

Paper prototyping

Demo-Paper Prototype for PopDown

Popdown Paper Prototype - Home screen

Popdown Paper Prototype - Shop mode

Popdown Paper Prototype - select a category

Popdown Paper Prototype - aer a category is selected

Popdown Paper Prototype - shop view hover mode

Popdown Paper Prototype - product view

Exercise –Paper prototype your site/app

Making a case for wireframes

Agencies

Creativity is in the making

Making changes in Photoshop or code will take much longer than in wireframes

Some clients are happy to see IA and wireframes, if not, storyboard or sketch a user journey

Your client knows customer experience is king!

Testing on paper with the whole team will enage everyone with the importance of the UX

Do it anyway...

STARTUPS

You’re broke! So it’s even more important to get it right in a lo-! way...

Customer experience will help you write certain aspects of your business plan

Mockup Soware

Balsamiqhttp://www.balsamiq.com/

Balsamiq demo...

Mockingbirdhttps://gomockingbird.com/

KeynoteMac only

Omnigrafflehttp://www.omnigraffle.com

Axurehttp://www.axure.com/

Mock up libraries

MockupsToGohttps://mockupstogo.mybalsamiq.com/

Keynotopiahttp://keynotopia.com/

h!ps://vimeo.com/13892268

Graffletopiahttp://graffletopia.com/

Code prototypes

960.gshttp://960.gs/

Twitter Bootstraphttp://twitter.github.com/bootstrap/

Zurb Foundationhttp://foundation.zurb.com/

BREAK

User testing

How to do a user test

Develop a test plan

Choose a place

Select participants

Conduct session

Don’t cheat! No hints. Let them !gure it out...

Monitor time to perform tasks

A/B Testing:Test different layouts of same page on critical

mass of different people

De-brief participant

Wash, rinse, repeat.

Demo –Making a test plan for PopDown

Exercise –Make a test plan based on user scenario

Demo –PopDown testing

Exercise –Test your idea using your paper prototypes with three people

Tools for testing

Silverbackhttp://silverbackapp.com/

Realizerhttp://www.realizerapp.com/

AirDisplayhttp://avatron.com/apps/air-display

UserTesting.comhttp://www.usertesting.com/

Kiss Metricshttp://www.kissmetrics.com/

What next?

Five books worth reading

Websites

A List Aparthttp://www.alistapart.com/

boxesandarrowshttp://www.boxesandarrows.com/

Site Inspirehttp://siteinspire.com/

Pattern Taphttp://patterntap.com

Observe!Experiment!

Fail!

Any questions?

anks!

Rik Lomas @riklomas

rik@lomalogue.com

Jessi Baker@jessibaker

jessi@cantab.net