Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
SlideShare a Scribd company logo
UX Workshop



Rik Lomas    Jessi Baker
 @riklomas   @jessibaker
What are we going to
    do today?
What’s UX!?
       UX success
         Strategy
  User Centred Design
       Goals, tasks
Information Architecture
      Wireframing
        Sketching
    Paper Prototyping
       Assessment
          States
 User Flows & Scenarios
Make 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 simple
complicated. Creativity is
making the complicated
simple.”
                       - Charles Mingus
e design of experiences
e design of experiences
Human centred
e design of experiences
Human centred
Interactions
e design of experiences
Human centred
Interactions
Different to UI
e design of experiences
Human centred
Interactions
Different to UI
Access 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.
Tell my friends
                         who are in town that I
                          have just arrived at
                              a location




Key goal of Foursquare
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.
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




Key task of Foursquare
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 -
Craing an IA for PopDown
Link tasks into simple steps, think about a real
user 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?
UX Workshop
UX Workshop
UX Workshop
No fonts
No colour
No graphics
Wireframe fidelity

Low                                High
Sketching     Paper     Mock up     Code
            Prototype   Soware   Prototype
Why make wireframes?
Concept Exploration
Concept Exploration
Layout Content on Pages
Concept Exploration
Layout Content on Pages
Brainstorm Interactions
Concept Exploration
Layout Content on Pages
Brainstorm Interactions
Storytelling
Concept Exploration
Layout Content on Pages
Brainstorm Interactions
Storytelling
Build Consensus
Concept Exploration
Layout Content on Pages
Brainstorm Interactions
Storytelling
Build Consensus
Documentation
Concept Exploration
Layout Content on Pages
Brainstorm Interactions
Storytelling
Build Consensus
Documentation
Minimize Risk
Sketching
UX Workshop
UX Workshop
UX Workshop
UX Workshop
UX Workshop
UX Workshop
Demo –
Facebook Profile Page
Exercise –
Draw a sketch of the Twitter profile 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 goals
Users don’t understand how it works
Why designs fail?

Users aren’t motivated to achieve goals
Users don’t understand how it works
Users don’t see things
States
Errors, alerts & successes
UX Workshop
UX Workshop
No content
UX Workshop
Events (e.g. click, hover, tap and swipe)
Hover mode - Google maps
UX Workshop
Responsive design and orientation
UX Workshop
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 wireframing
of the user flow
Excercise -
Chose a scenario for your project and
wireframe of the user flow with less than 5
key screens
BREAK
Paper prototyping
UX Workshop
UX Workshop
UX Workshop
UX Workshop
UX Workshop
UX Workshop
UX Workshop
UX Workshop
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 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-fi way...
Customer experience will help you write
certain aspects of your business plan
Mockup Soware
Balsamiq
http://www.balsamiq.com/
Balsamiq demo...
Mockingbird
https://gomockingbird.com/
Keynote
 Mac only
Omnigraffle
http://www.omnigraffle.com
Axure
http://www.axure.com/
Mock up libraries
MockupsToGo
https://mockupstogo.mybalsamiq.com/
Keynotopia
http://keynotopia.com/
https://vimeo.com/13892268
Graffletopia
http://graffletopia.com/
Code prototypes
960.gs
http://960.gs/
Twitter Bootstrap
http://twitter.github.com/bootstrap/
Zurb Foundation
http://foundation.zurb.com/
BREAK
User testing
UX Workshop
UX Workshop
UX Workshop
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 with
three people
Tools for testing
Silverback
http://silverbackapp.com/
Realizer
http://www.realizerapp.com/
AirDisplay
http://avatron.com/apps/air-display
UserTesting.com
http://www.usertesting.com/
Kiss Metrics
http://www.kissmetrics.com/
What next?
Five books
worth reading
UX Workshop
UX Workshop
UX Workshop
UX Workshop
UX Workshop
Websites
A List Apart
http://www.alistapart.com/
boxesandarrows
http://www.boxesandarrows.com/
Site Inspire
http://siteinspire.com/
Pattern Tap
http://patterntap.com
Observe!
Experiment!
   Fail!
Any questions?
anks!


 Rik Lomas          Jessi Baker
    @riklomas          @jessibaker
rik@lomalogue.com   jessi@cantab.net

More Related Content

UX Workshop