Your SlideShare is downloading. ×
Intro to user experience design
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Intro to user experience design


Published on

These are the slides I used for the presentation "Intro to UX Design" at the Pittsburgh Code Camp on April 30th 2011

These are the slides I used for the presentation "Intro to UX Design" at the Pittsburgh Code Camp on April 30th 2011

Published in: Technology, Design
  • Be the first to comment

  • Be the first to like this

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide
  • Welcome and thank you for attending this sessionMy name is.. Background – math, programmingPromote design principlesPoll the audienceMeasuring cup
  • UX is not……UI design…graphics designUX is..
  • The combination of all these disciplines
  • Sowhat happens if we ignore our users?We end up with product like these:
  • Products that deserve a Darwin award
  • Fancy faucets in hotel rooms that are impossible to figure outWashers with awesome looking dashboards that you overpaid $200 for. And never used.
  • Brain killer – the remote control. Remember scheduling recordings on DVR? No one got it right!Or the fancy dashboard in your car where everything looks the same.
  • Bad design is everywhere
  • Health Care - Simplified
  • This one was actually created for soldier education purposes.It explains our plans for stability in Afghanistan
  • Depressing, I know. So why is it? We all think we want the best for our users, don’t we?
  • In order to change this trend you couldHire a UX person, or better yet, team.Or make a change in your own behavior. It’s not a rocket science. And if you do just two things, you’ll be way better off that you are right now. These two things are knowing and loving usability guidelines and your own users.
  • Here we’ll talk about usability guidelines. And I won’t take any credit for these.These are usability guidelines by Jakob Nielsen who is considered to be one of the usability gurus. These are 10 core principles that you should always keep in mind. Even if you are a developer, not a designer.
  • Good example of this is dropdown. Who can tell why dropdowns are not a great idea?
  • Notice that flexibility does not mean having 28 checkboxes in the dialog. Checkboxes are a sign of a thoughtless design.
  • Let’s take a look at this menu
  • Error messages – my favorite
  • People not only don’t read documentation. People don’t read. In general. And you should not complain about it. You should design for it.
  • It will really help you if you knew who your users are and what they want. First thing to know about your users is that they’re not like you.Second thing to know is that they’re not like you think they are.Did any of you ever watch your mother use an email or not get the difference between single and double click? Did you think t yourself “OMG, how can they possibly not get this??” Third thing to know is that there’s no “average” user. We keep mentioning him whenever we define requirements, add new features or make key decisions. We end up designing a product that doesn’t meet anyone's’ needs except ours.
  • Well, les ask the users what they want then, right? No. Wrong. Henry Ford once said that if he asked his user what they want, they’d tell him “a faster horse”.
  • Personas are fictional people that represent products intended user base. No, these are not average users!These here are actually our Desktop Dictation personas!
  • Usability testing is the most popularUX technique. It’s done one-on-one. Participant is presented with some interface or prototype and is given some task (for example, book a flight) .Participant is also asked to speak out loud as he completes (or fails) the task.Test facilitator sits next to participant, watches his actions, listens and takes notes. Key point here is that facilitator is not helping the participant and lets them struggleUsually, these sessions are being recorded and broadcasted to another room where developers, management and other stakeholders are observing the test. This is what usually happens in the observer's room.
  • Wireframes for software are the same thing as blueprints are for architecture. These sketches of the screens that are intentionally made black&white which define layouts and key interactions between them.Making wireframes sketchy is crucial in order to get good feedback (rather than “I think this button should be green, not red”)Linking wireframes together creates an prototype that can be put to test with potential users!
  • Because nobody is perfect.Even the best ones.
  • Thank you. Questions?
  • Hi
  • Transcript

    • 1. Intro to UX Design
      for developers
    • 2. Agenda
      • What is UX design
      • 3. Why is it important
      • 4. User-centric design principles
      • 5. Techniques, tools, books and more
    • What is it anyway?
      User Experience Design. Hmm..
      Make it as simple as possible. But no simpler.- Albert Einstein
    • 6. Interaction design
      UI design
      Human factors
      System performance
      Information architecture
    • 7. Why bother?
      Doesn’t sounds too practical..
      If the user can't use it, it doesn't work.- Susan Dray
    • 8.
    • 9.
    • 10.
    • 11.
    • 12. New Healthcare System - Explained
    • 13. Afghanistan Stability Plan
    • 14. So What can we do about it?
      Looks depressing..
      Don't make me think.- Steve Krug
    • 15. Know and Love
      usability guidelines
      your users
    • 16. Design Guidelines
      Know and love..
      by Jakob Nielsen
       Easy is Hard
      - Peter Lewis
    • 17. 1. Visibility of system status
      The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.
      Progress indicators, status bars, green checkmarks..
    • 18. 2. Match between system and the real world
      The system should speak the users' language, with words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order
      “string cannot be empty”, “object cannot be found”
    • 19. 3. User control and freedom
      Users often choose system functions by mistake and will need a clearly marked "emergency exit" to leave the unwanted state without having to go through an extended dialogue.
      Undo and redo, cancel button, breadcrumbs, back button
    • 20. 4. Consistency and standards
      Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions.
      Do not invent. Reuse.
    • 21. 5. Error prevention
      Even better than good error messages is a careful design which prevents a problem from occurring in the first place. Either eliminate error-prone conditions or check for them and present users with a confirmation option before they commit to the action.
      Auto-focus, form validation, auto-suggest
    • 22. 6. Recognition rather than recall
      Minimize the user's memory load by making objects, actions, and options visible. The user should not have to remember information from one part of the dialogue to another. Instructions for use of the system should be visible or easily retrievable whenever appropriate.
      Auto-complete, instant preview, history
    • 23. 7. Flexibility and efficiency of use
      Accelerators -- unseen by the novice user -- may often speed up the interaction for the expert user such that the system can cater to both inexperienced and experienced users. Allow users to tailor frequent actions.
      Shortcuts, hotkeys, search, breadcrumbs
    • 24. 8. Aesthetic and minimalist design
      Dialogues should not contain information which is irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility.
      Contrast, repetition, alignment, proximity. Software as magic
    • 25. 9. Help users recognize, diagnose, and recover from errors
      Error messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution.
      Do not punish the user, help and comfort them instead
    • 26. 10. Help and documentation
      Even though it is better if the system can be used without documentation, it may be necessary to provide it. Any such information should be easy to search, focused on the user's task, list concrete steps to be carried out, and not be too large.
      Hot triggers, links to help
    • 27. Your users
      Know and love..
       The user is NOT a lower life form
      - Ken Becker
    • 28. Learn more about our users!
      • They are not like us
      • 29. They are not who we think they are
      • 30. There is no “average user”
    • Let’s ask the users! Right?
      Nope. Wrong.
      Learn to really listen to your users
    • 31. Personas
    • 32. Usability Testing
    • 33. Wireframes
    • 34. More..
      Start small, grow big. Prefer enhancements overfeatures
      Software should be designed with tasks in mind, not features
      Evil checkboxes and not user-friendly dropdowns
      Navigation mantra: know where you are, what can you do, how to go back
      Use your own product
      Get out there and see your users.
    • 35. Nobody is perfect…
    • 36. Books
      Balsamiq Mockups
      Pencil Project
    • 37. Questions?
      Thank you
    • 38. Anna Abovyan