Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

HCI Basics

12,991 views

Published on

Human Computer Interaction, interacting with technology, basic principles od UI design

Published in: Technology, Design
  • How Brainwave Frequencies Can Change Your Life! ♥♥♥ http://t.cn/AiuvUCDd
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Did You Know Sound is one of the Most Powerful Tools For Healing in Existence? ♥♥♥ http://t.cn/AiuvUMl2
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Settling for less on valentine's? Then you need VigRX pLUS! ★★★ http://t.cn/Ai88iYkP
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • SECRET: Men usually out of emotion, not logic. Take advantage of this and get your Ex back today! See how at: ▲▲▲ http://t.cn/R50e2MX
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Hey guys! Who wants to chat with me? More photos with me here 👉 http://www.bit.ly/katekoxx
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

HCI Basics

  1. 1. HCIHUMAN COMPUTER INTERACTION http://hqwallbase.com/172416-ibm-370-grayscale-monochrome-wallpaper/
  2. 2. What is HCI?What is HCI? HCI is the study of interaction between people (users) and computers
  3. 3. Human
  4. 4. People are diverse, unpredictable, messy, ill-understood. 
 They have different abilities Human
  5. 5. People are DIVERSE • Physically (hand size, height, strength, coordination, disabilities) • Effects of age • Perception is not all that seems • Many processes are subconscious • Experience and mental models • Cognitive abilities • Cultural environment • Motivations
  6. 6. Population by AGE group Population is changing very dramaticly. 
 The number of 65+ is more then doubled in 2050
  7. 7. Effects of AGE We are not the only industry that needs to solve these Age issues 
 Third Age Suite - in automotive industry allows 20 years old designers to sit in the car and have experience of 60 yo.
  8. 8. Contrast sensitivity http://www.w3.org/TR/wai-age-literature/ Contrast sensitivity decreases dramatically with age. 
 Even if you are very comfortable with technology - there can be very difficult to use it.
  9. 9. Contrast sensitivity example of low contrast content
  10. 10. Contrast sensitivity http://webaim.org/resources/contrastchecker/ Tool for checking the minimal level of contrast
  11. 11. http://visionlab.harvard.edu/ silencing/ Visual Perception SILENCING demonstrates how hard is to notice when moving objects change.
  12. 12. Awareness https://www.youtube.com/watch?v=Ahg6qcgoay4
  13. 13. Principle of Least Effort Attention Interaction Reading Thinking Effort If there are several ways of achieving the same goal, people will choose the least demanding course of action.
  14. 14. Subconscious Processing Could the user answer the question? "Does Siemens have any special deals on washing machines?" Usability study by NNG in the UK
  15. 15. Banners, Auto-Forwarding Carousels and Accordions Annoy Users and Reduce Visibility Subconscious Processing No! User failed the task! The user gave up and assumed that Siemens didn't have any special deals for her. People skip over things that could be disturbing - Brain filters out banners
  16. 16. Users are task focused People go to web sites to achieve particular goals, not to look around and admire the design.
  17. 17. Computer Computers aren’t just computers anymore - mobile phone, camera, car, washing machine, alarm clock, ATM, copy machine, dish washer…
  18. 18. Devices are much more complicated and multi-functional then before. Computer
  19. 19. Computer time past now pace of CHANGE rate of LEARNING old world new world The world is changing much more rapidly than most people realize.
 In the NEW WORLD you do not already know how things work but in some cases you do not even know how to use them - it is too complicated.
  20. 20. –Johnny Appleseed “Type a quote here.”
  21. 21. Interaction
  22. 22. The interface between humans and the computers they use is crucial to facilitating this interaction. dialogue between human and computer Interaction
  23. 23. Interacting with Technology
  24. 24. Very simple example: Sink tap 1. User establishes a goal = 
 Wash hands
 2. Formulates intention > specifies actions at interface > executes action = moves the tap lever
 3. System hopefully bring some feedback and user can hopefully see it and understands what happened = running water
 4. Evaluates system state with respect to goal = more hot/cold, less/more water, stop, changing the direction moving the tap…
  25. 25. Goal Mapping 4 goal-mapping questions 1. GOAL: How do users know their goal is attainable? 2. ACTION: How do users know what to do? 3. PERCEPTION: How will users know they’ve done the right thing? 4. EVALUATION: How will users know they’ve attended their goal?
  26. 26. The goal of HCI is to improve the interaction between users and computers by making computers more user-friendly and receptive to the user's needs. To design systems that minimize the barrier between the human’s cognitive model of what they want to accomplish and the computer’s understanding of the user’s task Improving the usability 
 is the key factor. HCI Goals
  27. 27. Natural Interface Human speech, Gestures, Hand writing recognition
  28. 28. Natural Interface XBOX Kinect
  29. 29. Natural Interface Touch interface
  30. 30. The User Interface today is often one of the most critical factors regarding the success or failure of a computer system In fact, the most sophisticated machines are worthless unless they can be used properly by men. 
 Bad Design costs lives, money, & time Why is it important?
  31. 31. Principles of UI design In order to build user-friendly and usable interfaces they may be considered Principles of UI Design at any time during the design of a user interface.
  32. 32. 9 Principles of user interface design to improve the quality of interface. Principles of UI design - Structure - Visibility - Feedback - Affordances - Mapping - Contraints - Consistency - Simplicity - Tolerance
  33. 33. The Structure Can I find it where I expect? Putting related things together and separating unrelated things. 
 Design should ORGANIZE the user interface in MEANINGFUL and USEFUL WAYS based on CLEAR, CONSISTENT models that are RECONGIZABLE to users.
  34. 34. Can I see it? The Visibility Make things visible! The design should make ALL NEEDED OPTIONS for a given task VISIBLE without DISTRUCTING the user with redundant information. Good designs don't OVERWHELM users with alternatives or confuse with unneeded information.
  35. 35. The Visibility Visible knobs, dials and buttons have been replaced by invisible and unclear “active zones” and sensor technology
  36. 36. The Visibility Google search makes it clear where to enter text
 
 Hiding certain functions can be useful in interface design
  37. 37. The Feedback What is it going now? The design should KEEP USER INFORMED of ACTIONS,
 CHANGES OF STATE that are relevant to the user through CLEAR LANGUAGE - FAMILIAR to users.
  38. 38. The Feedback Feedback needs to be immediate and synchronized with user action. 
 What is the device doing right now? (loader helps) Sound can work as a feedback.
  39. 39. The Feedback Can you use it without watching it? 
 That’s how most people use calculator.
  40. 40. The Affordance How do I use it? What the user CAN SEE that an OBJECT DOES. Affordance answers How do I use it? Giving a clue! EX: Chairs afford sitting; handles afford pulling
  41. 41. The Affordance Perceived properties of an object that give clues to its operation. It is quite clear in case of simple things.
  42. 42. The Affordance It can be confusing in case of multi-functional devices
 Learned conventions: E.g., buttons and scrollbars— but are they clear to novices?
  43. 43. The Affordance A DOOR HANDEL’S DESIGN should communicate
 whether you PULL or PUSH. But here's an EXAMPLE OF CONFLICT between design affordance and “documentation” - NOT an INTUITIVE INTERFACE!
  44. 44. Mapping: Where am I and where can I go?The Mapping Where am I and where can I go? RELATIONSHIP to CONTROLS and their EFFECT. ARRANGEMENTS should be NATURAL for the relations BETWEEN CONTROLS and their MOVEMENTS and OUTCOME from such action. 
 The real function of natural mappings is to REDUCE THE NEED OF ANY INFORMATION from a user’s MEMORY to perform a TASK.
  45. 45. Mapping: Where am I and where can I go?The Mapping Which arrangement is the best solution? C!
  46. 46. Mapping: Where am I and where can I go?The Mapping A B A B C D Which arrangement is the best solution? 1 = A, 2 = A or C
  47. 47. The Constraint Why can’t I do that? RESTRICTING the kind of interactions that can take place REDUCE the chance of ERROR FOCUSES user’s attention to needed task
  48. 48. The Constraint FOCUSES on items and functions that are appropriate
  49. 49. The Consistency I think I have seen that before! Design interfaces to have SIMILAR OPERATION AND USE - similar elements for achieving tasks. Similarity increases learnability. The design should REUSE components and behaviors, maintaining consistency. 
 Enables people to QUICKLY TRANSFER PRIOR KNOWLEDGE to NEW CONTEXT and FOCUS on relevant tasks
  50. 50. The Consistency
  51. 51. The Consistency Consistent use of symbols to represent similar concepts, uses prior knowledge and makes things easier to use.
  52. 52. The Consistency Color convention example
  53. 53. The Simplicity Simple for common tasks! The design should MAKE SIMPLE, COMMON TASKS EASY communicating CLEARLY and SIMPLY in the user's OWN LANGUAGE
  54. 54. The Simplicity
  55. 55. The Simplicity It is really not difficult to find examples of bad design in computer apps.
  56. 56. The Tolerance Design for errors, allow mistakes! The design should be FLEXIBLE AND TOLERANT, reducing the cost of mistakes and allowing UNDOING, while also PREVENTING ERRORS by tolerating varied inputs and by interpreting all reasonable actions.
  57. 57. The Tolerance Sample of bad design
  58. 58. The Tolerance Sample of good design
  59. 59. Further reading
  60. 60. More examples
  61. 61. More examples Mapping issue
  62. 62. More examples Structure issue
  63. 63. More examples Mapping issue
  64. 64. More examples structure, mapping and affordance issue
  65. 65. More examples affordance issue
  66. 66. More examples almost all issues :)
  67. 67. More examples Not an usability issue - missing function (water mixing)
  68. 68. Zdeněk Lanc UX designer web: www.yd.cz e-mail:
 yd@yd.cz 
 twitter: @ZdenekLanc Thank you!

×