UX Work Shop
Upcoming SlideShare
Loading in...5
×
 

UX Work Shop

on

  • 1,861 views

1 day UX Work Shop prepared by Rik Lomas and Jessi Baker for General Assembly

1 day UX Work Shop prepared by Rik Lomas and Jessi Baker for General Assembly

Statistics

Views

Total Views
1,861
Views on SlideShare
1,107
Embed Views
754

Actions

Likes
4
Downloads
27
Comments
0

6 Embeds 754

http://projectprovenance.com 466
http://jessibaker.co.uk 276
http://www.tumblr.com 5
http://safe.tumblr.com 3
http://www.jessibaker.co.uk 3
http://cargocollective.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

UX Work Shop UX Work Shop Presentation Transcript

  • UX WorkshopRik Lomas Jessi Baker @riklomas @jessibaker
  • What are we going to do today?
  • What’s UX!? UX success Strategy User Centred Design Goals, tasksInformation Architecture Wireframing Sketching Paper Prototyping Assessment States User Flows & ScenariosMake a case for wireframes Mock-up soware Code prototypes User Testing
  • What will you get out of it?
  • What’s UX!?
  • User Experience Design
  • “Anyone can make the simplecomplicated. Creativity ismaking the complicatedsimple.” - 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 nomention of the technologymedium 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 needand for real people...
  • Do you have access to yourusers?
  • 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 userachieves them.No assumptions about the system interface.Can be used to compare different interfacedesign alternatives in a fair way.Can be personal, practical or false goals.
  • Tell my friends who are in town that I have just arrived at a locationKey goal of Foursquare
  • Demo –Goals for PopDown
  • Exercise –Write down the key goals for your project
  • Tasks
  • Describe the steps necessary to achievethe goals.Can vary with the available technology.Broken down into steps for task analysis, and arerecombined into sequence of steps for scenariodevelopment.
  • 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” buttonKey task of Foursquare
  • Demo –Tasks for PopDown
  • Exercise –Write down 3 task that achieve 3 goals foryour site/app
  • InformationArchitecture
  • Post-its to Omnigraffle...
  • Site maps & Flow charts
  • Site map
  • Site map
  • Site map
  • Flow chart
  • Flow chart
  • Flow chart
  • Example -Craing an IA for PopDown
  • Link tasks into simple steps, think about a realuser performing the tasks
  • Highlight the core functions in your flow
  • 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 fidelityLow HighSketching Paper Mock up Code Prototype Soware Prototype
  • 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 Profile Page
  • Exercise –Draw a sketch of the Twitter profile pageon 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 flows & Scenarios
  • User Flow for 1 scenario
  • User flow for multiple scenarios
  • User flow for multiple scenarios
  • User flow for all scenarios
  • Scenarios help you design and test
  • Demo-Scenario for PopDown and wireframingof the user flow
  • Excercise -Chose a scenario for your project andwireframe of the user flow with less than 5key 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 - aer 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 willtake much longer than in wireframes
  • Some clients are happy to see IA andwireframes, if not, storyboard or sketch a userjourneyYour client knows customer experience isking!Testing on paper with the whole team willenage everyone with the importance of the UXDo it anyway...
  • STARTUPS
  • You’re broke! So it’s even more importantto get it right in a lo-fi way...
  • Customer experience will help you writecertain aspects of your business plan
  • Mockup Soware
  • Balsamiqhttp://www.balsamiq.com/
  • Balsamiq demo...
  • Mockingbirdhttps://gomockingbird.com/
  • Keynote Mac only
  • Omnigrafflehttp://www.omnigraffle.com
  • Axurehttp://www.axure.com/
  • Mock up libraries
  • MockupsToGohttps://mockupstogo.mybalsamiq.com/
  • Keynotopiahttp://keynotopia.com/
  • https://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 figure 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 withthree 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 booksworth 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 Jessi Baker @riklomas @jessibakerrik@lomalogue.com jessi@cantab.net