2. Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem Human Computer Interaction - 1 Dr. Mohammed Alabdulkareem Kareem@ksu.edu.sa

3. Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem Human Computer Interaction Why HCI? Human Information Processing. Technology Supporting User Interface. Window system design. Screen Layout and Design.

4. Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem Human Computer Interaction Dialog Styles. Evaluation of User Interface. Error Handling. Documentation.

5. Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem Why HCI?

6. Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem Why HCI?

7. Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem Why HCI?

8. Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem Why HCI?

9. Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem Why HCI?

10. Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem Human Computer Interaction Why HCI? Human Information Processing. Technology Supporting User Interface. Window system design. Screen Layout and Design Dialog Styles. Evaluation of User Interface. Error Handling. Documentation.

11. Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem Human Information Processing EncodingComparison Response selection Response execution Input Response

12. Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem Human Information Processing EncodingComparison Response selection Response execution Input Response Attention Memory

13. Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem Human Information Processing Visual Perception What we see is not what we recognize. Constructivist (stored knowledge). Ecological (no stored knowledge).

14. Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem Human Information Processing What we see is not what we recognize.

15. Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem Human Information Processing Constructivist (stored knowledge).

16. Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem Human Information Processing Constructivist (stored knowledge).

17. Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem Human Information Processing Ecological (no stored knowledge). Affordance

18. Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem

19. Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem Human Computer Interaction Why HCI? Human Information Processing. Technology Supporting User Interface. Window system design. Screen Layout and Design Dialog Styles. Evaluation of User Interface. Error Handling. Documentation.

20. Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem Technology Supporting User Interface. Input Devices. Output Devices. High-speed Processing. Networking.

21. Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem Technology Supporting User Interface. Input Devices. Keyboard. Pointing devices. 3D Input. Recognized Input.

22. Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem Technology Supporting User Interface. Input Devices. Keyboards. QWERTY DVORAK Split

23. Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem Technology Supporting User Interface. Input Devices. POINTING DEVICES Mouse Trackball Touch-screen

24. Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem Technology Supporting User Interface. Input Devices. 3D Input. Data Glove 3D-Mouse

25. Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem Technology Supporting User Interface. Input Devices. Recognized Input. OCR Eye-Gaze Barcode Scan

26. Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem Technology Supporting User Interface. Output Devices. CRT. LCD. Sound. Printers 3D display

27. Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem Technology Supporting User Interface. High-Speed Processing GUI (Windows). VR. 3D Graphics. Networking Sharing resources. Web & Internet

28. Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem Technology Supporting User Interface. Matching Devices with Work Accuracy level. Task requirements. Direct mapping.

29. Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem

30. Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem Human Computer Interaction Why HCI? Human Information Processing. Technology Supporting User Interface. Window system design. Screen Layout and Design Dialog Styles. Evaluation of User Interface. Error Handling. Documentation.

31. Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem Windows System Design Windows was designed to support more than one output on the same physical screen. Windows supports multitasking. Working with windows takes more time! Many lessons learned from the users. Each window system has its flavor of control.

32. Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem Windows System Design Windows Basic Components Windows: Title bar. Close Box. Zoom Box. Size Box. Scroll Control. Menu. Dialogue Boxes. Cursor. Control & Control Panels.

33. Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem Windows System Design Windows Basic Components Windows: Title bar. Close Box. Zoom Box. Size Box. Scroll Control.

34. Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem Windows System Design

35. Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem Windows System Design Menus Pop-UP Pull Down Submenu

36. Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem Windows System Design Dialog box

37. Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem Windows System Design Cursor Change cursor with context. Lost Cursor. The pointing edge. Cursor-on help text.

38. Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem Windows System Design Controls Buttons. Sliders. Check box. Radio buttons.

39. Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem Human Computer Interaction Why HCI? Human Information Processing. Technology Supporting User Interface. Window system design. Screen Layout and Design Dialog Styles. Evaluation of User Interface. Error Handling. Documentation.

40. Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem Screen Layout and Design Screen is our Real Estate. The space should be utilized with goals in mind. Think of the user (User Centered Design). Think of the task (Task Analysis).

41. Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem Screen Layout and Design Screen space is limited. Use windows. Use more than one screen. Arrange information.

42. Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem Screen Layout and Design Set measurable usability goals early. Usability and user needs should drive the design. Define types of users (Expert/Novice). Consider the personal differences. Use the matching dialog style. Testing throughout the design process.

43. Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem Screen Layout and Design Guide lines Include only essential information. Include all essential information. Start at the upper left corner. Design : follow formatting standard. Apply logical grouping of items.

44. Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem Screen Layout and Design Guide lines Symmetry & balance of white spaces. Avoid heavy use of uppercase. Distinguish caption & fields. The level of Detail is the same as user knowledge. Avoid color pollution.

45. Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem

46. Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem Human Computer Interaction Why HCI? Human Information Processing. Technology Supporting User Interface. Window system design. Screen Layout and Design Dialog Styles. Evaluation of User Interface. Error Handling. Documentation.

47. Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem Dialog Styles

48. Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem Dialog Styles Command Good for experts. Exact spelling. Hard to remember (GREP).

49. Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem Dialog Styles Menus Options & Enhancements are visible. Grouping: Access Time (Sec) Errors.

50. Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem Dialog Styles Q & A Old style. Used with setup. Answer selected (menu).

51. Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem Dialog Styles Forms: Different categories of data. Helps the users to place data correctly. It should help the user about what type of data is expected. Allows going back. Allow Validation.

52. Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem Dialog Styles Direct Manipulation: Visibility of the objects. Rapid, reversible, incremental actions. Simulate real life. Allow Validation.

53. Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem

54. Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem Human Computer Interaction Why HCI? Human Information Processing. Technology Supporting User Interface. Window system design. Screen Layout and Design Dialog Styles. Evaluation of User Interface. Error Handling. Documentation.

55. Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem Evaluation of User Interface The Keyword is the user. The User  The Programmer. Never forget the TASK.

56. Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem Evaluation of User Interface The Keyword is the user. The user is the final evaluator of your product. User Profile: Psychological Characteristics. Knowledge and experience. Job and Task Characteristics. Physical Characteristics.

57. Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem Evaluation of User Interface The User  The Programmer. The mental Model is different. Experiences are different. Background.

58. Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem Evaluation of User Interface The User  The Programmer.

59. Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem Evaluation of User Interface Never forget the TASK.

60. Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem Evaluation of User Interface How to evaluate? User Observation. Verbal Protocol (Think aloud). Software Logging. Users ’ Opinion (Interview, Questionnaire). Experiments & Benchmark.

61. Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem Evaluation of User Interface Predictive Evaluation: Inspection methods (experts in technology & the intended users). Usage simulation (experts simulate less experienced users). Structured reviewing. Heuristic evaluation (only key issues). Discount usability evaluation (Scenarios). Cognitive walkthrough.

62. Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem Evaluation of User Interface Key Issues: Validity: Evaluation Purpose & Method. Reliability: Experiments yield the same results. Biases: Avoid selective data gathering.

63. Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem

64. Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem Human Computer Interaction Why HCI? Human Information Processing. Technology Supporting User Interface. Window system design. Screen Layout and Design Dialog Styles. Evaluation of User Interface. Error Handling. Documentation.

65. Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem Error Handling What types of errors: Perceptual Errors (B8, Z2, I1). Cognitive Errors (Memory, Link, Inconsistent). Motor Errors (Hand, Eye).

66. Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem Error Handling Perceptual Errors (B8, Z2, I1). B8 B8 B8

67. Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem Error Handling Cognitive Errors (Memory, Link, Inconsistent).

68. Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem Error Handling Motor Errors (Hand, Eye). Options very close to each other. The selection is very sensitive.

69. Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem Human Computer Interaction Why HCI? Human Information Processing. Technology Supporting User Interface. Window system design. Screen Layout and Design Dialog Styles. Evaluation of User Interface. Error Handling. Documentation.

70. Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem Documentation User manual vs. Technical guide. User manual guidelines. Online Help.

71. Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem Documentation User manual vs. Technical guide. User manual intended for non technical users. (Part of the user interface) Technical guide is intended for technical people.(How to develop)

72. Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem Documentation User manual guidelines. Easy to navigate. Organize chapters according to users goal. TOC should present high level overview. Provide an index. Use consistent cues for different type of information.

73. Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem Documentation User manual guidelines. Ease of learning Provide a foundation and build on it. Use examples. Use illustrations. Make consistent use of spatial and visual cues.

74. Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem Documentation User manual guidelines. Ease of reading Use the white space wisely. Write using low grade level. Avoid expert jargons.

75. Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem Documentation Online Help. Make help visible (but not annoying). Complete & accurate. Multiple Access Method. Make it easy to return to problem context. Make it fast. Provide different levels of details.