• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
UX Pres MIni version!
 

UX Pres MIni version!

on

  • 541 views

Mini version of Rik and I's Introduction to UX. Given at General Assembly, London.

Mini version of Rik and I's Introduction to UX. Given at General Assembly, London.

Statistics

Views

Total Views
541
Views on SlideShare
507
Embed Views
34

Actions

Likes
2
Downloads
12
Comments
0

1 Embed 34

http://projectprovenance.com 34

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

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
  • hiya!\n
  • jessi\n
  • Products, spaces, phones, theme parks, coffee shops... today we are focusing on UX design for screens; web sites and applications, across multiple devices; mobile, tablet etc...\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • jessi\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • replace sketch images\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • 1 page, key page\n
  • \n
  • \n
  • \n
  • if finding the retweet button ment clicking 3 different buttons would you bother?\n
  • how do i buy something!!?\n
  • do you have a clear call to action on each page\nno more than 3 things that stand out above all other clickable locations?\n\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Google maps demo\n
  • \n
  • \n
  • example responsive web design - mediaqueri.es\n
  • \n
  • example responsive web design - mediaqueri.es\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • roleplay\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Scissors + blue tack!\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n

UX Pres MIni version! UX Pres MIni version! Presentation Transcript

  • UX WorkshopRik Lomas Jessi Baker @riklomas @jessibaker
  • What’s UX!?
  • User Experience Design
  • “Anyone can make thesimple complicated.Creativity is making thecomplicated simple.” - Charles Mingus
  • The design ofexperiences
  • The design ofexperiencesHuman centred
  • The design ofexperiencesHuman centredInteractions
  • The design ofexperiencesHuman centredInteractionsDifferent to UI
  • The design ofexperiencesHuman 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
  • IdeaSelect a platform for yourMVPGoals and tasksPersonasInformation Architecture
  • What is awireframe?
  • No fontsNo colourNo graphics
  • Wireframe fidelityLow HighSketching Paper Mock up Code Prototype Software Prototype
  • Why makewireframes?
  • 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 Twitterprofile page on the web version orthe app version
  • Guess thewireframe!
  • 8 tips forwireframing
  • 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 andswipe)
  • 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 andwireframing of the user flow
  • Excercise -Chose a scenario for your projectand wireframe of the user flowwith less than 3 key screens
  • 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 - after 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 orcode will take much longer than inwireframes
  • Start-ups
  • You’re broke! So it’s even moreimportant to get it right in a lo-fiway...
  • Customer experience will help youwrite certain aspects of yourbusiness plan
  • Mock-up Software
  • Balsamiq http://www.balsamiq.com/ Mockingbirdhttps://gomockingbird.com/KeynoteOmnigraffle http://www.omnigraffle.com
  • Libraries....Mockups to gohttps://mockupstogo.mybalsamiq.com/Keynotopia http://keynotopia.com/Graffletopia http://graffletopia.com/
  • Code Prototypes
  • 960.gs http://960.gs/Twitter Bootstraphttp://twitter.github.com/bootstrapZurb Foundationhttp://foundation.zurb.comNapkee
  • User Testing
  • Tools for Testing
  • Silverback http://silverbackapp.com/Realizer http://www.realizerapp.comAirDisplay http://avatron.com/apps/air-displayUser Testing http://
  • Any questions?
  • Thanks! Rik Lomas Jessi Baker @riklomas @jessibakerrik@lomalogue.com jessi@cantab.net