User Experience & Web Product Design
Upcoming SlideShare
Loading in...5
×
 

User Experience & Web Product Design

on

  • 1,307 views

 

Statistics

Views

Total Views
1,307
Views on SlideShare
1,306
Embed Views
1

Actions

Likes
8
Downloads
44
Comments
0

1 Embed 1

https://twitter.com 1

Accessibility

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

    User Experience & Web Product Design User Experience & Web Product Design Presentation Transcript

    • UX & Web Product DesignPresented by Steve Hickey — fresh tilled soilfresh tilled soilUser Experience &Web Product Design
    • fresh tilled soil UX & Web Product DesignAbout Your InstructorHi, I’m Steve Hickey.I design and develop apps/sites for Fresh Tilled Soil.I write, speak and teach.You can find me on Twitter @stevehickeydsgn
    • fresh tilled soil UX & Web Product DesignCourse Structure• session 1: What is User Experience Design?• lunch• session 2: Starting at Zero: Methods & Artifacts of UX Design• session 3: Your First Test: What to Build and Why
    • fresh tilled soil UX & Web Product Design01 What is User Experience Design?UI vs UX and select principles of user experience design
    • fresh tilled soil UX & Web Product DesignUI VS. UX DesignUser Interface Design is:A component of User Experience Design. It’s the look and the feel, the form.User Experience Design is:The bigger picture. How well does the site/app function? Is it pleasant to use? Can a useraccomplish their goals with ease?
    • fresh tilled soil UX & Web Product DesignUI VS. UX DesignHow does a user feel while using it?
    • fresh tilled soil UX & Web Product DesignUI VS. UX DesignThey are both incredibly important.Excellent user interface design is part of what creates a great user experience. But youcan have a great UI with a terrible experience. The opposite is harder, but also possible.
    • fresh tilled soil UX & Web Product DesignSelect PrinciplesLet’s talk about some of the things that a great user experience designer must keep inmind when building a truly amazing product for the web.This list is by no means exhaustive, but it should spark a conversation.
    • fresh tilled soil UX & Web Product DesignThe Robustness PrincipleBe conservative in what you do,be liberal in what you accept from others.alistapart.com/article/your-website-has-two-faces
    • fresh tilled soil UX & Web Product DesignThe Robustness PrincipleIn other words, there are certain constraints that must be embraced to balance humanneeds with computer needs for a robust web application.• It must accept input in a human-friendly fashion.• It must accept the burden of translating that information to a computer-friendly format.• It must be clear about what human input is reasonable.• It must provide feedback on this input.alistapart.com/article/your-website-has-two-faces
    • fresh tilled soil UX & Web Product DesignThe Robustness PrincipleErr towards serving the user.alistapart.com/article/your-website-has-two-faces
    • fresh tilled soil UX & Web Product DesignThe Robustness PrinciplePhone Number:Submit
    • fresh tilled soil UX & Web Product DesignThe Robustness PrinciplePhone Number:1 (508) 833-8469 Submit
    • fresh tilled soil UX & Web Product DesignThe Robustness PrinciplePhone Number:1 (508) 833-8469 SubmitError: must be entered in this format: 555-867-5309
    • fresh tilled soil UX & Web Product DesignThe Robustness PrinciplePhone Number:example: 508-833-8469 Submit
    • fresh tilled soil UX & Web Product DesignThe Pareto PrincipleFor many events, roughly 80% of the effectscome from 20% of the causes.measuringusability.com/blog/pareto-ux.php
    • fresh tilled soil UX & Web Product DesignThe Pareto PrincipleIn other words, focusing on the top 20% of your bugs and design problems can fix 80%of the problems encountered by your users.Or, 80% of your users will only use 20% of your features/options.measuringusability.com/blog/pareto-ux.php
    • fresh tilled soil UX & Web Product DesignThe Pareto PrincipleCountry:United States of America Submit
    • fresh tilled soil UX & Web Product DesignThe Pareto PrincipleCountry:United States of America SubmitAfghanistanAlbaniaAlgeriaAmerican SamoaAndorraAngolaAnguillaAntarcticaAntigua And BarbudaArgentinaArmeniaAruba
    • fresh tilled soil UX & Web Product DesignThe Pareto PrincipleCountry:United States of America SubmitUnited States of AmericaCanadaUnited KingdomAustralia---------------------------------------AfghanistanAlbaniaAlgeriaAmerican SamoaAndorraAngolaAnguilla
    • fresh tilled soil UX & Web Product DesignFitts’s LawThe time required to rapidly move to a targetarea is a function of the distance to thetarget and the size of the target.codinghorror.com/blog/2006/08/fitts-law-and-infinite-width.html
    • fresh tilled soil UX & Web Product DesignFitts’s LawIn other words, the farther away a touch/click target is from where the user starts, thelarger it needs to be in order for it to be quickly and accurately reached.Two ways to make frequently used items easier to click/tap:1: Put them near the edge of the screen.2. Make them larger than other items.codinghorror.com/blog/2006/08/fitts-law-and-infinite-width.html
    • fresh tilled soil UX & Web Product DesignFitts’s Law
    • fresh tilled soil UX & Web Product DesignFitts’s Law
    • fresh tilled soil UX & Web Product DesignThe Principle of Least AstonishmentWhen two elements of an interface conflict orare ambiguous, the behavior should be thatwhich will least surprise the user.wikipedia.org/wiki/Principle_of_least_astonishment
    • fresh tilled soil UX & Web Product DesignThe Principle of Least AstonishmentIn other words, the best result of an action is whatever the user is most likely to expect,not the result that comes through in depth knowledge of the system.This will change from system to system. Mac OSX users could expect something differentthan Microsoft Windows users. Android and iOS have different design patterns fordifferent interactions as well.wikipedia.org/wiki/Principle_of_least_astonishment
    • fresh tilled soil UX & Web Product DesignThe Principle of Least Astonishment
    • fresh tilled soil UX & Web Product DesignThe Principle of Least Astonishment
    • fresh tilled soil UX & Web Product DesignDieter Rams: Principle 10Good design is as little design as possible.vitsoe.com/us/about/good-design
    • fresh tilled soil UX & Web Product DesignDieter Rams: Principle 10He also stated this as “less, but better.” Many people would refer to this as simplicity.vitsoe.com/us/about/good-design
    • fresh tilled soil UX & Web Product DesignDieter Rams: Principle 10
    • fresh tilled soil UX & Web Product DesignDieter Rams: Principle 10
    • fresh tilled soil UX & Web Product DesignJoshua Porter: Principle 6One primary action per screen.bokardo.com/principles-of-user-interface-design/
    • fresh tilled soil UX & Web Product DesignJoshua Porter: Principle 6Screens or states with more than one primary action become confusing. It’s better forany screen to have one primary reason for existing.bokardo.com/principles-of-user-interface-design/
    • fresh tilled soil UX & Web Product DesignJoshua Porter: Principle 6
    • fresh tilled soil UX & Web Product DesignJoshua Porter: Principle 6
    • fresh tilled soil UX & Web Product DesignJoshua Porter: Principle 17Great design is invisible.bokardo.com/principles-of-user-interface-design/
    • fresh tilled soil UX & Web Product DesignJoshua Porter: Principle 17An interface shouldn’t distract a user from what they are trying to accomplish, which isthe reason the interface exists in the first place. Turn the special effects down a notch.bokardo.com/principles-of-user-interface-design/
    • fresh tilled soil UX & Web Product DesignJoshua Porter: Principle 17
    • fresh tilled soil UX & Web Product DesignJoshua Porter: Principle 17
    • fresh tilled soil UX & Web Product DesignBJ Fogg’s Behavior ModelThree factors drive behavior: motivation, ability and triggers.abilitymotivationHighLowLowHigh Target behaviorTriggers fail here.Triggers succeed here.behaviormodel.org/
    • fresh tilled soil UX & Web Product DesignBJ Fogg’s Behavior ModelThe amount of motivation and ability required vary based on how much of the other ispresent. These must be combined with an effective trigger for a target behavior to happen.All three are required to persuade a user to do something.behaviormodel.org/
    • fresh tilled soil UX & Web Product DesignBJ Fogg’s Behavior ModelMotivation happens on three spectrums:Sensation: Pleasure <> PainAnticipation: Hope <> FearSocial Cohesion: Acceptance <> Rejectionbehaviormodel.org/
    • fresh tilled soil UX & Web Product DesignBJ Fogg’s Behavior ModelYou can increase ability in two ways:Train Your User: Harder to do but sometimes necessary.Make The Target Behavior Easier: Usually the right thing to do.behaviormodel.org/
    • fresh tilled soil UX & Web Product DesignBJ Fogg’s Behavior ModelIn other words, make it simpler.Think of simplicity as a function of your scarcest resource at the moment in which youwant to accomplish something. Time and money can both fit this model.behaviormodel.org/
    • fresh tilled soil UX & Web Product DesignResourcesYou can read a lot more at these sites:Joshua Porter: bokardo.com/principles-of-user-interface-design/Dieter Rams: vitsoe.com/us/about/good-designJeremy Keith: principles.adactio.com/BJ Fogg: behaviormodel.org/
    • fresh tilled soil UX & Web Product Design02 Effective Methods For Crafting an ExperienceThe habits of highly effective UX designers
    • fresh tilled soil UX & Web Product DesignMethodsEvery UX designer’s process is different, but the way successful ones approach theirprocess include some useful commonalities.
    • fresh tilled soil UX & Web Product Design1. Be ProlificYour best idea is never your first. Don’t tell me it is, I don’t believe you. Come up with 5ideas. Come up with 10. Come up with 20!
    • fresh tilled soil UX & Web Product Design1. Be ProlificThe point is to get the obvious out of your system. Once you’ve gotten past that you canreally start to be creative and innovative.
    • fresh tilled soil UX & Web Product Design1. Be Prolificteehanlax.com/story/medium/
    • fresh tilled soil UX & Web Product Design1. Be Prolificteehanlax.com/story/medium/
    • fresh tilled soil UX & Web Product Design1. Be Prolificteehanlax.com/story/medium/
    • fresh tilled soil UX & Web Product Design1. Be Prolificteehanlax.com/story/medium/
    • fresh tilled soil UX & Web Product Design1. Be Prolificteehanlax.com/story/medium/
    • fresh tilled soil UX & Web Product Design1. Be Prolificteehanlax.com/story/medium/
    • fresh tilled soil UX & Web Product Design2. CollaborateNobody works well in a vacuum. When you don’t seek outside opinions you can gettrapped and focus on things that may not be as important.
    • fresh tilled soil UX & Web Product Design2. CollaborateOther opinions will break you out of your mental traps and improve your work.
    • fresh tilled soil UX & Web Product Design2. Collaboratedesignstaff.org/articles/product-design-sprint-day-2-diverge-2012-10-26.html
    • fresh tilled soil UX & Web Product Design3. IterateThe best way to test your assumptions is to make something. You’ll get a lot of stuffwrong, but there’s no better way to learn about your problems and move beyond them.
    • fresh tilled soil UX & Web Product Design3. IterateFail early and often and you’ll set yourself up better for eventual success.
    • fresh tilled soil UX & Web Product Design3. Iterateazarask.in/blog/post/iterative_design_isnt_design_by/
    • fresh tilled soil UX & Web Product Design4. Be FlexibleAs you work you’ll realize that previous assumptions needs to be changed. You shouldn’tthink of deliverables as a checklist, they are a web of connected items.
    • fresh tilled soil UX & Web Product Design4. Be FlexibleEach change has the potential to affect every other deliverable.
    • fresh tilled soil UX & Web Product Design03 Artifacts of an Experience Design ProcessThe things we build
    • fresh tilled soil UX & Web Product DesignDefinition Statement1. What is the product’s experience?2. What is the product meant to do?3. What is the product’s audience?iosworkshops.com/
    • fresh tilled soil UX & Web Product DesignDefinition StatementThis should be short. A couple of sentences, a brief paragraph at most.It is the guiding principle of what you’re building.
    • fresh tilled soil UX & Web Product DesignUser Types & User PersonasUser types rely on existing data and informed assumptions to decide what distinct typesof users you have and what they will want to accomplish.They aren’t complicated, they’re just a quick way of remembering the differences in yourprimary users and their objectives.
    • fresh tilled soil UX & Web Product DesignUser Types & User PersonasUser personas are much more involved, requiring research and interviews with actualpotential users, and typically take weeks or months to compile.Findings are compiled into categories, then assigned traits, habits, names and photos sothat they are visible and easy to remember as you work.
    • fresh tilled soil UX & Web Product DesignUser Types & User Personasuxmag.com/articles/personas-the-foundation-of-a-great-user-experience
    • fresh tilled soil UX & Web Product DesignUser Types & User PersonasWhether you decide to deal with user types or user personas is a question of resourcesand time, but using at least one of them tends to remind you that your users are real.
    • fresh tilled soil UX & Web Product DesignUser Stories & FeaturesAs a { type } user, I would like to { task/objective }.These become your features. Have you come up with a feature idea that doesn’t fit into auser story? It may not be nearly as important as you thought it was.
    • fresh tilled soil UX & Web Product DesignUser Stories & Featureshttps://www.apptrajectory.com/
    • fresh tilled soil UX & Web Product DesignSite Map & User JourneysFeatures are going to fit into logical groups that define pages and flows. Placing these intoa site map will help you create the appropriate relationships between components, andshow you just how simple or complex your plan is.
    • fresh tilled soil UX & Web Product DesignSite Map & User Journeys
    • fresh tilled soil UX & Web Product DesignSite Map & User JourneysUser journeys define how a user moves through your app or site to accomplish tasks.Basically, take your user stories and translate them onto your site map.
    • fresh tilled soil UX & Web Product DesignSite Map & User Journeys
    • fresh tilled soil UX & Web Product DesignWireframes & SketchesYour wireframes are the blueprints for your product. They generally consist of layouts ofthe pages and flows you listed previously.They help make sure all functionality is available, and that there is a logical hierarchy.Beyond those basics, wireframes really shouldn’t be used to dictate design decisions.
    • fresh tilled soil UX & Web Product DesignWireframes & SketchesWireframes don’t even have to be high fidelity to be effective. Sketches can makeexcellent wireframes if they’re complete and well rendered.As another advantage, sketches are much faster to produce and iterate through thanother, higher fidelity methods of wireframing.
    • fresh tilled soil UX & Web Product DesignWireframes & Sketches
    • fresh tilled soil UX & Web Product DesignWireframes & Sketches
    • fresh tilled soil UX & Web Product DesignWireframes & Sketches
    • fresh tilled soil UX & Web Product DesignWireframes & Sketches
    • fresh tilled soil UX & Web Product DesignPrototypesPrototypes are a bit more advanced than wireframes. They mimic completed functionalityto the point that you can run tests with a user.
    • fresh tilled soil UX & Web Product DesignPrototypesThey can be as small as a single piece of functionality, or they can mimic a completedproduct in every meaningful way. They are used to test a product without building it.A good prototype helps you decide what to build.
    • fresh tilled soil UX & Web Product DesignPrototypesalistapart.com/article/dive-into-responsive-prototyping-with-foundation
    • fresh tilled soil UX & Web Product DesignPrototypesThese products can help you prototype:Foundation: foundation.zurb.comBootstrap: twitter.github.io/bootstrapRatchet: maker.github.io/ratchetFlinto: flinto.comBriefs: giveabrief.comPOP: popapp.inXcode/Storyboard: blog.mengto.com/prototype-xcode-storyboard
    • fresh tilled soil UX & Web Product DesignUser TestsA user test helps you validate whatever you decided to build.You can test a finished product and get lots of great information, but the greatestadvantage is conferred when you are able to start testing early.We’ll discuss this more in the next section.
    • fresh tilled soil UX & Web Product Design04 What to Build and WhyYour first test
    • fresh tilled soil UX & Web Product DesignSo, what Should I build?Whatever you can. Sometimes that’s not much. But ask yourself this:Would you rather invest years and millions of dollars into building something only tofind out nobody can figure out how it works? Or even worse, that nobody wants it?
    • fresh tilled soil UX & Web Product DesignPrototypeFor us, the answer is often a prototype. We aren’t back-end developers, we don’t employback-end developers. If we aren’t working with a dev team yet we still need to buildsomething to test. Fortunately, front-end tech makes it easy to fake a back-end.
    • fresh tilled soil UX & Web Product DesignMinimum Viable ProductFor startups and product companies a minimum viable product is often the answer. AnMVP is popular in Lean circles. Building one means building the smallest thing you canlearn something from. Build it, test it, learn from those tests, build something new.It is the smallest amount of effort you can go to and still get valid lessons from it.
    • fresh tilled soil UX & Web Product DesignUsability TestingRegardless of what you build, you should test it with real users. Assumptions are oftenwrong, and nothing will uncover that faster than a user test.
    • fresh tilled soil UX & Web Product DesignSteve Krug’s Maxims of User TestingA morning a month, that’s all we ask.sensible.com/rsme.html
    • fresh tilled soil UX & Web Product DesignSteve Krug’s Maxims of User TestingStart earlier than you think makes sense.sensible.com/rsme.html
    • fresh tilled soil UX & Web Product DesignSteve Krug’s Maxims of User TestingRecruit loosely and grade on a curve.sensible.com/rsme.html
    • fresh tilled soil UX & Web Product DesignSteve Krug’s Maxims of User TestingMake it a spectator sport.sensible.com/rsme.html
    • fresh tilled soil UX & Web Product DesignSteve Krug’s Maxims of User TestingFocus ruthlessly on a small number of themost important problems.sensible.com/rsme.html
    • fresh tilled soil UX & Web Product DesignSteve Krug’s Maxims of User TestingWhen fixing problems, always do the leastyou can do.sensible.com/rsme.html
    • fresh tilled soil UX & Web Product DesignSteve Krug’s Maxims of User TestingRead this. Thank me later. I’ll let Steve know I’m expecting his commission check.sensible.com/rsme.html