HCI 2014 (4 of 10): From Information Architecture to Design Patterns

430 views

Published on

Several details regarding visual design, Information Architecture (IA), and HCI design patterns. Addition resources at http://profs.info.uaic.ro/~busaco/teach/courses/hci/hci-film.html

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
430
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
21
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

HCI 2014 (4 of 10): From Information Architecture to Design Patterns

  1. 1. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Human-Computer Interaction from information architecture to design patterns
  2. 2. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco “I’ve been amazed at how often those outside the discipline of design assume that what designers do is decoration. Good design is problem solving.” Jeff Veen
  3. 3. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco UI designvisual design
  4. 4. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco UI designvisual design visualization = graphical representation of data/concepts Ware, 2004
  5. 5. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Visual design Main elements (Dan Saffer, 2006): layout grid visual flow typography color, shape, texture
  6. 6. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Visual design Main elements (Dan Saffer, 2006): layout where & how content and interaction controls are placed http://alistapart.com/topic/layout-grids
  7. 7. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Visual design Main elements (Dan Saffer, 2006): grid gives a coherent structure of information www.thegridsystem.org
  8. 8. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Visual design Main elements (Dan Saffer, 2006): visual flow refers to methods of understanding and/or interacting with presented data
  9. 9. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Visual design discussion
  10. 10. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Visual design Main elements (Dan Saffer, 2006): typography presents the textual content via fonts conforming to certain presentation rules http://webtypography.net/toc/
  11. 11. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Visual design Main elements (Dan Saffer, 2006): color, shape, texture most important visual dimensions used for a proper perception of information
  12. 12. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco case study color semantics syntax highlighting color-pick control
  13. 13. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Visual design Form versus function for the majority of users, the look & feel is more important than functionality remember UX?
  14. 14. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Visual design Common mistakes lack of organization (structure) visual interference complexity excessive details lack of adaptability
  15. 15. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Strategies visual focus consistency modularity adaptability Visual design
  16. 16. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Strategies visual focus consistency modularity adaptability  responsive (Web) design Visual design next lecture
  17. 17. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Visual design To properly present information, visual dimensions are used
  18. 18. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Visual design To properly present information, visual dimensions are used
  19. 19. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Visual design Different perceptions regarding a certain visual dimension
  20. 20. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Visual design Different perceptions regarding a certain visual dimension insignificant differences must be eliminated  simplicity
  21. 21. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Visual design Visual dimensions are distinguished via visual variables (Jacques Bertin, 1989)
  22. 22. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Visual design Visual dimensions are distinguished via visual variables (Jacques Bertin, 1989) do not require additional cognitive processing
  23. 23. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Visual design Visual dimensions are distinguished via visual variables (Jacques Bertin, 1989) communication data codification indicating differences between UI elements
  24. 24. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Visual design Example: showing the temperature any visual variable could be used color (hue), position relative to a scale, length of thermometer, using an icon (shape),…
  25. 25. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Visual design Visual variables have different levels of perception >100 levels – hue and value ~10 levels – size ~4 levels – orientation
  26. 26. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Visual design Some visual variables could not be easily recognized
  27. 27. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco detect all letters placed in the right
  28. 28. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco detect all letters placed in the right we must perceive only the position
  29. 29. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco detect all green letters
  30. 30. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco detect all green letters we are using hue as a visual variable
  31. 31. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco detect all N letters
  32. 32. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco detect all N letters (shape) interferences: multiple visual variables
  33. 33. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Visual design Perception could be associative associative visual variables: position, hue, texture, shape, orientation
  34. 34. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Visual design Perception could be associative non-associative visual variables: size, value
  35. 35. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Visual design Perception could be associative non-associative visual variables: size, value example: the color of small objects is difficult to be perceived
  36. 36. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Visual design Modularity (grouping) could be achieved by considering the Gelstalt principles of perception using visual perception, the mind creates the entire picture (Gelstalt) from existing fragments
  37. 37. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco www.interaction-design.org/encyclopedia/data_visualization_for_human_perception.html various examples: http://tinyurl.com/y6ao7k
  38. 38. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco discussion
  39. 39. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Necessity A certain structure and presentation manner for the information in order to be easily perceived and consumed by users
  40. 40. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Solution IA – Information Architecture
  41. 41. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Information Architecture Software applications are organized by using lists of objects sequences of actions lists of categories (topics) of interest lists of software tools/components
  42. 42. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Information Architecture Lists of objects denoted by substantives examples: operating system updates, e-mails, shared pictures, locations of interest,…
  43. 43. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Information Architecture Lists of objects denoted by substantives ideally, the application could recommend interesting items for each user
  44. 44. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Information Architecture Sequences of actions specified by verbs e.g., browse, buy, register, sell, subscribe,…
  45. 45. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Information Architecture Sequences of actions specified by verbs e.g., browse, buy, register, sell, subscribe,… software could suggest certain actions to be selected by the users, conforming to their profiles
  46. 46. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
  47. 47. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Information Architecture Substantive–verb versus verb–substantive object–action versus action–object
  48. 48. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Information Architecture Substantive–verb versus verb–substantive object–action versus action–object it is recommended to use the substantive-verb style of interaction Raskin, 2000
  49. 49. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Information Architecture Substantive–verb versus verb–substantive object–action versus action–object verb-substantive style could be useful for toolboxes why?
  50. 50. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Information Architecture Lists of categories (topics) of interest context: information-centric applications examples: science, technologies, entertainment, etc.
  51. 51. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
  52. 52. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Information Architecture Lists of software tools/components useful for task-oriented applications e.g., calendar, text editor, resource manager,…
  53. 53. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Information Architecture Aspects: nature and domain of the software application
  54. 54. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Information Architecture Aspects: background knowledge of the target users
  55. 55. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Information Architecture Aspects: context of interaction
  56. 56. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco How information could be organized?
  57. 57. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Information Architecture Linear presentation usually, different sorting criteria are applied: alphabetical, spatial, temporal, significance,…
  58. 58. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
  59. 59. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Information Architecture Bidimensional presentation 2 criteria/dimensions of interest are considered examples: geographical location + time
  60. 60. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Information Architecture Bidimensional presentation a common use: grid-based visualization of data
  61. 61. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Information Architecture Hierarchical presentation tree-like structures having one or more levels used to show certain relations between things: parent–child, grouping, etc.
  62. 62. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
  63. 63. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Information Architecture Context-based presentation space time user profile
  64. 64. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Information Architecture Context-based presentation space time user profile examples: maps, charts, timelines, recommended information,…
  65. 65. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
  66. 66. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Information Architecture Complex presentation could use a combination of previous solutions
  67. 67. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco 3D visualization of the DOM – Mozilla Firefox contributor: Victor Porof, Tilt project (2011—2012)
  68. 68. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Information Architecture Traditionally, the presentation of data will employ regions: windows, pages + interaction elements: UI controls
  69. 69. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Information Architecture organizing information
  70. 70. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Information Architecture Design patterns recurring solutions that solve common design problems
  71. 71. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Information Architecture Design patterns recurring solutions that solve common design problems J. Tidwell, Designing Interfaces, O’Reilly, 2005 Ecaterina Moraru, Interaction Design Patterns, 2011 http://profs.info.uaic.ro/~evalica/patterns/
  72. 72. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Information Architecture Two-panel selector Jenifer Tidwell, 2005 used to show selectable interactive elements for each selected element, certain details or its content could be presented
  73. 73. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Information Architecture h5ai – a beautified Apache index based on HTML5 http://larsjung.de/h5ai/
  74. 74. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Information Architecture Two-panel selector useful for presentation of lists: resources categories actions …
  75. 75. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Information Architecture Two-panel selector decreases the interaction effort: e.g., mouse manipulation reduces the cognitive load facilitates exploration
  76. 76. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Information Architecture
  77. 77. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Information Architecture Canvas + palette Jenifer Tidwell, 2005 offers a palette (toolbox) containing objects/actions used in conjunction to a workplace (canvas)
  78. 78. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco MacPaint (1984) versus Photoshop (now)
  79. 79. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Information Architecture Canvas + palette used by visual editing applications to create objects and to arrange them within a virtual space
  80. 80. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Information Architecture Canvas + palette the palette facilitates visual recognition via icons (sometimes, grouped by categories) for interaction, selections or drag & drop could be adopted
  81. 81. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Information Architecture One-window drilldown Jenifer Tidwell, 2005 presenting information by using a single window only
  82. 82. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
  83. 83. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Information Architecture One-window drilldown useful for depicting the content on reduced-size screens: mobile device, TV, appliance, etc. RT @IATV "The Science Behind a Single Page Website": http://goo.gl/aO0j (sixrevisions.com)
  84. 84. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Information Architecture Alternative views Jenifer Tidwell, 2005 user has the possibility to choose alternative views these presentations are structurally different, not just visually
  85. 85. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
  86. 86. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Information Architecture Alternative views accommodate certain user preferences or goals regarding a given context of interaction
  87. 87. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Information Architecture Wizard instructs user to execute step-by-step actions, conforming to a predefined scenario “don’t make me think, just tell me what to do next”
  88. 88. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
  89. 89. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Information Architecture Wizard must provide: an accurate (logical) sequence of tasks + a suitable structure of presented information
  90. 90. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Information Architecture Extras on demand Jenifer Tidwell, 2005 presenting main information only, “hiding” the details
  91. 91. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
  92. 92. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Information Architecture Extras on demand make sure the entrance to and exit from the “extras” window/page are obvious
  93. 93. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Information Architecture Multi-level help Jenifer Tidwell, 2005 using multiple help methods, directly located in the user interface
  94. 94. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Information Architecture
  95. 95. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Information Architecture design patterns: exploration
  96. 96. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Information Architecture Locating objects in the user proximity signposts window/page title logo selection signage …
  97. 97. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Information Architecture Help users to find the way towards their goal wayfinding good signage environmental clues maps
  98. 98. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco discussion What signposts are used? There are wayfinding clues?
  99. 99. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Information Architecture Important aspect minimizing distanceincreasing interface ergonomics
  100. 100. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Information Architecture Important aspect minimizing distanceincreasing interface ergonomics 3-Click-Rule: users stop using the site if they aren’t able to find the information or access the site features within 3 mouse clicks
  101. 101. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Information Architecture Using UML diagrams – Tidwell (2005) 4 pages + 7 “jumps” (clicks)
  102. 102. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Information Architecture GOMS (Goals, Operators, Methods, and Selection rules) Card et al., 1983; John & Kieras, 1996 to study the sequence of actions that must be performed by users in order to accomplish their goal, conforming to their abilities http://web.eecs.umich.edu/~kieras/goms.html
  103. 103. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Information Architecture GOMS offers a quantitative analysis initially, keyboard-based interaction was considered (keystroke-level model) www.it.bton.ac.uk/staff/rng/teaching/notes/goms.html
  104. 104. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Information Architecture GOMS K = 0.2 sec – Keying: time it takes to tap a key on the keyboard P = 1.1 sec – Pointing: time it takes to point to a position on display H = 0.4 sec – Homing: time it takes to move hand from the keyboard to the interface or vice-versa M = 1.35 sec – Mentally preparing: time to prepare for the next step R – Responding: wait for a computer to respond to input
  105. 105. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Information Architecture GOMS K = 0.2 sec – Keying: time it takes to tap a key on the keyboard P = 1.1 sec – Pointing: time it takes to point to a position on display H = 0.4 sec – Homing: time it takes to move hand from the keyboard to the interface or vice-versa M = 1.35 sec – Mentally preparing: time to prepare for the next step R – Responding: wait for a computer to respond to input the values could vary depending on the user abilities
  106. 106. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Information Architecture GOMS case study (Raskin, 2000): evaluating an interface for converting Celsius  Fahrenheit temperature
  107. 107. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco ~5.4 sec. ~20.8 sec.
  108. 108. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Information Architecture GOMS extensions: NGOMSL – Natural GOMS Language CMP-GOMS – Cognitive-Motor-Perceptual GOMS http://cogtool.hcii.cs.cmu.edu/use-today/examples
  109. 109. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Information Architecture GOMS without a quantitative guide, we are only guessing at how well we are doing and at how much room there is for improvement Jef Raskin
  110. 110. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Information Architecture Global navigation Jenifer Tidwell, 2005 assures the existence of navigational elements – consistently positioned – to help users to access the most important sections of the application/site
  111. 111. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Information Architecture Hub and spoke Jenifer Tidwell, 2005 isolating application sections into independent mini-applications/mini-sites, that can be directly accessed via main window/page
  112. 112. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Information Architecture hub & spoke: used mainly in mobile computing context
  113. 113. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Information Architecture Hub and spoke like global navigation pattern, it could be used to structure typical “paths” of the user thru the interface also, assure scalability
  114. 114. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Information Architecture Pyramid Jenifer Tidwell, 2005 a solution for hierarchical + sequential exploration
  115. 115. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Information Architecture Pyramid could be used in conjunction to the one-window drilldown
  116. 116. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Information Architecture Modal panel Jenifer Tidwell, 2005 showing only one page, with no other navigation options, until the user solves the immediate problem
  117. 117. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
  118. 118. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
  119. 119. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Information Architecture Modal panel interrupts the current task – it could break the state flow  anti-pattern apply this design pattern sparingly
  120. 120. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco error messages discussion Brazil (1985) – director: Terry Gilliam www.imdb.com/title/tt0088846/
  121. 121. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco error messages an error message is really helpful? bad file number segmentation fault: core dumped broken pipe 404 not found fatal error 312: aborting literal 13 could not be allocated internal error: object container empty error exit delayed from previous errors discussion
  122. 122. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco discussion
  123. 123. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco error messages error messages must not confuse users discussion
  124. 124. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco error messages the tone of an error message must inspire confidence an unknown error occurred discussion
  125. 125. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco error messages avoid patronizing and arrogant attitudes Cannot delete Document: Access is denied! versus This file is protected and cannot be deleted without specific permission. discussion
  126. 126. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco error messages abort  end, cancel, stop available  ready boot  start, run error execute  complete hit  press, depress invalid  not correct/good/valid kill  end, cancel output  report, list, display terminate  end, exit discussion
  127. 127. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco error messages don’t make user to feel guilty (users are more important than code) discussion
  128. 128. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco error message positive feedback message discussion for creative examples, visit http://fab404.com/
  129. 129. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Information Architecture Breadcrumbs Jenifer Tidwell, 2005 give users an alternative method of navigation types: path location attribute
  130. 130. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
  131. 131. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Information Architecture Breadcrumbs revealing useful clues about the site/application’s information architecture this pattern does not provide information regarding the next possible – if any – step
  132. 132. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Information Architecture Sequence map Jenifer Tidwell, 2005 indicates a sequence of actions + the current step
  133. 133. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Information Architecture Sequence map it can be used in conjunction to wizard if the navigational topology is large & hierarchical, it could be substituted by breadcrumbs
  134. 134. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Information Architecture Color-coded sections Jenifer Tidwell, 2005 facilitates the recognition of a certain place within a site/application
  135. 135. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Information Architecture Color-coded sections alternatively, other visual variables – e.g., shapes, textures,… – could be used to convey the differences/meanings between various UI regions
  136. 136. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Information Architecture Escape hatch Jenifer Tidwell, 2005 provides means for “escaping” from a place having limited navigational options
  137. 137. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Information Architecture Escape hatch helps people feel like they can safely explore an application when navigation assumes the execution of an action, an alternative is the undo design pattern
  138. 138. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
  139. 139. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco “Conclusion” visual design, IA, HCI design patterns
  140. 140. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco next lecture: from design patterns to flow

×