ux work shop
DESCRIPTION
1 day UX Work Shop prepared by Rik Lomas and Jessi Baker for General AssemblyTRANSCRIPT
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
Balsamiq demo...
KeynoteMac only
Omnigrafflehttp://www.omnigraffle.com
Mock up libraries
MockupsToGohttps://mockupstogo.mybalsamiq.com/
Code prototypes
Twitter Bootstraphttp://twitter.github.com/bootstrap/
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
AirDisplayhttp://avatron.com/apps/air-display
What next?
Five books worth reading
Websites
boxesandarrowshttp://www.boxesandarrows.com/
Observe!Experiment!
Fail!
Any questions?
anks!
Rik Lomas @riklomas
Jessi Baker@jessibaker