Intro to UX Designfor developers
AgendaWhat is UX design
 Why is it important
 User-centric design principles
 Techniques,  tools, books and more What is it anyway?User Experience Design. Hmm..Make it as simple as possible. But no simpler.- Albert Einstein
Interaction  designUsabilityHCIUSER EXPERIENCEMarketingErgonomicsUI  designHuman  factorsAccessibilityBrandingSystem  performanceInformation  architecture
Why bother? Doesn’t sounds too practical..If the user can't use it, it doesn't work.- Susan Dray
New Healthcare System - Explained
Afghanistan Stability Plan
So What can we do about it?Looks depressing..Don't make me think.- Steve Krug
Know and Love usability guidelines your users
Design GuidelinesKnow and love..by Jakob Nielsen Easy is Hard- Peter Lewis
1.  Visibility of system statusThe system should always keep users informed about what is going on, through appropriate feedback within reasonable time.Progress indicators,  status bars,  green checkmarks..
2. Match between system and the real worldThe 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”
3. User control and freedomUsers 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
4. Consistency and standardsUsers should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions.Do not invent. Reuse.
5. Error preventionEven 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
6. Recognition rather than recallMinimize 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
7. Flexibility and efficiency of useAccelerators -- 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
8.  Aesthetic and minimalist designDialogues 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
9. Help users recognize, diagnose, and recover from errorsError 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
10. Help and documentationEven 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
Your usersKnow and love.. The user is NOT a lower life form- Ken Becker
Learn more about our users!They are not like us
They are not who we think they are
There is no “average user”Let’s ask the users! Right?Nope.  Wrong.Learn to really listen to your users
PersonasStevenHelenAlexanderStefaniMary
Usability Testing
Wireframes
More..Start small, grow big. Prefer enhancements overfeaturesSoftware should be designed with tasks in mind, not featuresEvil checkboxes and not user-friendly dropdownsNavigation mantra: know where you are, what can you do, how to go backUse your own productGet out there and see your users.
Nobody is perfect…

Intro to user experience design

  • 1.
    Intro to UXDesignfor developers
  • 2.
  • 3.
    Why isit important
  • 4.
  • 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 designUsabilityHCIUSEREXPERIENCEMarketingErgonomicsUI designHuman factorsAccessibilityBrandingSystem performanceInformation architecture
  • 7.
    Why bother? Doesn’tsounds too practical..If the user can't use it, it doesn't work.- Susan Dray
  • 12.
  • 13.
  • 14.
    So What canwe do about it?Looks depressing..Don't make me think.- Steve Krug
  • 15.
    Know and Loveusability guidelines your users
  • 16.
    Design GuidelinesKnow andlove..by Jakob Nielsen Easy is Hard- Peter Lewis
  • 17.
    1. Visibilityof system statusThe 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 betweensystem and the real worldThe 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 controland freedomUsers 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 andstandardsUsers 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 preventionEvenbetter 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 ratherthan recallMinimize 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 andefficiency of useAccelerators -- 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. Aestheticand minimalist designDialogues 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 usersrecognize, diagnose, and recover from errorsError 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 anddocumentationEven 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 usersKnow andlove.. The user is NOT a lower life form- Ken Becker
  • 28.
    Learn more aboutour users!They are not like us
  • 29.
    They are notwho 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.
  • 32.
  • 33.
  • 34.
    More..Start small, growbig. Prefer enhancements overfeaturesSoftware should be designed with tasks in mind, not featuresEvil checkboxes and not user-friendly dropdownsNavigation mantra: know where you are, what can you do, how to go backUse your own productGet out there and see your users.
  • 35.

Editor's Notes

  • #2 Welcome and thank you for attending this sessionMy name is.. Background – math, programmingPromote design principlesPoll the audienceMeasuring cup
  • #4 UX is not……UI design…graphics designUX is..
  • #5 The combination of all these disciplines
  • #6 Sowhat happens if we ignore our users?We end up with product like these:
  • #7 Products that deserve a Darwin award
  • #8 Fancy faucets in hotel rooms that are impossible to figure outWashers with awesome looking dashboards that you overpaid $200 for. And never used.
  • #9 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.
  • #10 Bad design is everywhere
  • #11 Health Care - Simplified
  • #12 This one was actually created for soldier education purposes.It explains our plans for stability in Afghanistan
  • #13 Depressing, I know. So why is it? We all think we want the best for our users, don’t we?
  • #14 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.
  • #15 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.
  • #21 Good example of this is dropdown. Who can tell why dropdowns are not a great idea?
  • #22 Notice that flexibility does not mean having 28 checkboxes in the dialog. Checkboxes are a sign of a thoughtless design.
  • #23 Let’s take a look at this menu
  • #24 Error messages – my favorite
  • #25 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.
  • #27 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.
  • #28 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”.
  • #29 Personas are fictional people that represent products intended user base. No, these are not average users!These here are actually our Desktop Dictation personas!
  • #30 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.
  • #31 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!
  • #33 Because nobody is perfect.Even the best ones.
  • #35 Thank you. Questions?
  • #36 Hi