HCI 2014 (3 of 10): Design Models and Methodologies
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

HCI 2014 (3 of 10): Design Models and Methodologies

on

  • 504 views

Main aspects regarding UI design. From methodologies to guidelines. See also http://profs.info.uaic.ro/~busaco/teach/courses/hci/hci-film.html

Main aspects regarding UI design. From methodologies to guidelines. See also http://profs.info.uaic.ro/~busaco/teach/courses/hci/hci-film.html

Statistics

Views

Total Views
504
Views on SlideShare
504
Embed Views
0

Actions

Likes
0
Downloads
14
Comments
0

0 Embeds 0

No embeds

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

HCI 2014 (3 of 10): Design Models and Methodologies Presentation Transcript

  • 1. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco design models & methodologies Human-Computer Interaction
  • 2. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco “Machines certainly can solve problems, store information, correlate, and play games – but not with pleasure.” Leo Rosten
  • 3. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Goal Developing digital products
  • 4. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Goal Developing digital products product as functionality versus product as information mainly in the Web context
  • 5. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Goal Alan Cooper et al., About Face (3rd Edition), 2007
  • 6. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Reality Software engineering is mainly focused on the communication between applications and developers or between teams of developers
  • 7. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Reality Human-Computer Interaction considers the communication with the user
  • 8. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Reality Interface design requires an important development effort
  • 9. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Reality Interface design represents 50% of… design time implementation time maintenance time source-code volume
  • 10. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Necessity Within the design processes, we’ll need to employ: theories models frameworks Rogers, 2007
  • 11. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Necessity Theory gives a (rigorous, formal) clarification of certain aspects regarding a phenomenon
  • 12. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Necessity Model simplifies a given aspect about interaction in order to facilitate choosing and/or evaluating alternatives of design
  • 13. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Necessity Framework denotes a set of interconnected concepts and/or a set of specific problems regarding HCI
  • 14. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Aspects concerning the UI design
  • 15. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco involved disciplines & persons (Challis Hodge)
  • 16. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Aspects concerning design Interaction Design story creating story telling
  • 17. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Aspects concerning design story creating & telling used in the context of prototyping
  • 18. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Aspects concerning design Sensorial Design conventional interaction
  • 19. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Aspects concerning design Sensorial Design conventional interaction graphic design, illustration & photography sound design, musical performance, vocal talents videography, cinema
  • 20. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Aspects concerning design Sensorial Design natural interaction
  • 21. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Aspects concerning design Sensorial Design natural interaction tactile design olfactory design kinosthatic design …
  • 22. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Aspects concerning design Sensorial Design natural interaction new paradigms & expectations augmented and virtual reality, physical computing, etc.
  • 23. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco the role of sensorial design in the automotive industry initiatives: CarPlay (for iOS) and MirrorLink (works with Android devices) case study
  • 24. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Aspects concerning design Task-centered interface design focused on the developer’s (producer’s) goals: easiness of implementation, the use of technology, etc.
  • 25. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Aspects concerning design Task-centered interface design ignores the user – e.g., usability
  • 26. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Aspects concerning design Task-centered interface design creating a feature-centric software: many – never used – features  mammoth applications
  • 27. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Aspects concerning design Task-centered interface design encouraged by the classical software engineering methodologies
  • 28. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Aspects concerning design User-centered interface design software must please, help, protect the user
  • 29. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Aspects concerning design User-centered interface design design must consider the user expectations
  • 30. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Aspects concerning design User-centered interface design applications must simplify the humans’ tasks
  • 31. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco the user is automatically “opted in” courtesy of Patricia Saravesi (2014)
  • 32. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Aspects concerning design “User experience and interface design in the context of creating software represents an approach that puts the user, rather than the system, at the center of the process. This philosophy, called user-centered design, incorporates user concerns and advocacy from the beginning of the design process and dictates the needs of the user should be foremost in any design decisions.” MSDN, User Interface Design & Development section
  • 33. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Aspects concerning design User model versus implementation model the most simple model must be adopted Alan Cooper, 1995, 2007
  • 34. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Aspects concerning design When a model is adopted, a certain perspective is considered perspectives: system dialogue (interaction) tools (computer as a tool) environment (computer as a partner)
  • 35. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Aspects concerning design System perspective a Gelstalt view of the whole application
  • 36. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Aspects concerning design System perspective interaction is taking place in a standard, pre-defined (sometimes rigid) format
  • 37. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Aspects concerning design “I am thinking about something much more important than bombs. I am thinking about computers.” – John von Neumann (1946)
  • 38. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Aspects concerning design System perspective too often, user mental model is ignored
  • 39. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco “Demanding that users register or log in before they can use an app or see Website information has high interaction cost.” – Raluca Budiu (2014) www.nngroup.com/articles/login-walls/ login wall potential customers have no way of knowing if they are interested in a certain available product/service case study
  • 40. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Aspects concerning design Dialogue perspective both user and computer are seen as partners of a certain conversation
  • 41. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Aspects concerning design Dialogue perspective communicative behavior similar to the human one
  • 42. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco http://tinyurl.com/8xz8prs
  • 43. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco reported by @johnbreslin
  • 44. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Aspects concerning design Dialogue perspective text hypertext direct manipulation pictures & illustrations gestures emotional factors …
  • 45. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Aspects concerning design Dialogue perspective factors concerning the choose of a dialogue type (Stefan Trausan-Matu, 2000): information category images, numbers, names, relationships,…
  • 46. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Aspects concerning design context: data visualization for other examples, visit http://firsttimeux.tumblr.com/
  • 47. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Aspects concerning design Dialogue perspective factors concerning the choose of a dialogue type (Stefan Trausan-Matu, 2000): information structure limited set of values, lists of pairs (name, value), graphs,…
  • 48. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco designed by Dr. Stefan Negru (2014)
  • 49. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Aspects concerning design Dialogue perspective factors concerning the choose of a dialogue type (Stefan Trausan-Matu, 2000): information structure datainformationknowledge
  • 50. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Aspects concerning design Dialogue perspective factors concerning the choose of a dialogue type (Stefan Trausan-Matu, 2000): user profile and preferences age, abilities, ethnicity, social aspects, etc.
  • 51. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Aspects concerning design Dialogue perspective factors concerning the choose of a dialogue type (Stefan Trausan-Matu, 2000): user profile and preferences age, abilities, ethnicity, social aspects, etc. remember personas?
  • 52. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Aspects concerning design Dialogue perspective factors concerning the choose of a dialogue type (Stefan Trausan-Matu, 2000): activity type + concurrency (collaborative) work, leisure, real-time task,…
  • 53. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Aspects concerning design Dialogue perspective factors concerning the choose of a dialogue type (Stefan Trausan-Matu, 2000): context spatial, temporal
  • 54. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Touch-based interaction hand obstruction inaccuracy of tapping lack of haptic feedback multi-touch issues etc. www.slideshare.net/pankorho/touch-uis-are-quite-different discussion
  • 55. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco discussion perceptual blindness “How do I close this pop-up?”
  • 56. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Aspects concerning design Tools perspective users (need to) have full and continuous control over all tools provided by the computer and with their help want to accomplish their goals software as a tool www.designinginteractions.com/downloads/DesigningInteractions_2.pdf
  • 57. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Aspects concerning design Environment perspective computer is considered as a communication environment between persons (e.g., via e-mail, chat, social applications,…)
  • 58. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Aspects concerning design Environment perspective the process of communication is the same, even if software and/or types of interaction are different
  • 59. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Aspects concerning design Environment perspective the process of communication is the same, even if software and/or types of interaction are different  proliferation of multi-platform (mobile) Web applications able to integrate social networks
  • 60. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco How about design values? http://noisydecentgraphics.typepad.com/design/images/2008/03/11/yourproduct.jpg
  • 61. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Design values Ethical Purposeful Pragmatic Elegant Alan Cooper et al., 2007
  • 62. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Design values Ethical (helpful) do no harm, improve human situations
  • 63. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco discussion
  • 64. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco discussion
  • 65. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Design values Purposeful (useful, usable) help users achieve their goals and aspirations accommodate user contexts & capacities
  • 66. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Design values user expectations regarding the interface (Peter Morville)
  • 67. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco discussion
  • 68. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Design values Pragmatic (viable, feasible) help organizations achieve their goals accommodate business and technical requirements
  • 69. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Design values
  • 70. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Design values Elegant (efficient, artful, affective) represent the simplest complete solution possess internal (self-revealing, understandable) coherence appropriately accommodate/stimulate cognition and emotion
  • 71. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busacohttp://pinterest.com/zimmatore/elegant-ui-design/ http://androidniceties.tumblr.com/ skeuomorphism versus flat design
  • 72. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Design values “A visual bug seen by all your customers might do more damage to your program’s reputation than a rarely occurring crashing bug.” Windows UX Guidelines, MSDN
  • 73. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Design values “An application is powerful when it enables its target users to realize their full potential efficiently.” Windows UX Guidelines, MSDN
  • 74. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Design models and methodologies
  • 75. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Models & Methodologies Using “classical” software engineering methodologies
  • 76. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Models & Methodologies Using “classical” software engineering methodologies cascade spiral RAD – Rapid Application Development …
  • 77. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Models & Methodologies User-centered design methodologies GUIDE LUCID STUDIO concerning usability – ISO 13407
  • 78. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco ideas build pro- duct mea- sure data learn iterative design methods are preferred lean startup method (Eric Ries, 2011)
  • 79. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Methodologies Jesse Garrett, The Elements of User Experience (2nd Edition), New Riders, 2011 bottom to top conceptual framework each plane is dependent on the planes below it
  • 80. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Methodologies Jesse Garrett, The Elements of User Experience (2nd Edition), New Riders, 2011
  • 81. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Methodologies Jesse Garrett, The Elements of User Experience (2nd Edition), New Riders, 2011
  • 82. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Models & Methodologies Agile design methodologies many factors of uncertainty  work is organized into the smallest possible batch size in order to quickly launch the product
  • 83. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Models & Methodologies UX activities occurring during the course of a single sprint example Lynn Pausic (2012)
  • 84. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Models & Methodologies Agile development & Lean UX shared goals shorten the time to market working software over comprehensive documentation collaboration over negotiation responding to change over following a plan
  • 85. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Models & Methodologies Lean UX vs. Agile UX (Marcin Treder, 2013)
  • 86. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Lean UX processes Will Evans & Jacklyn Burgan, Intro to Agile and Lean UX (2013) http://www.slideshare.net/jacklynburgan/intro-leanux-turnerfinal John Whalen, Implementing Lean UX (2013) http://www.slideshare.net/johnwhalen/uxpa-2013-implementing-lean-ux Figure out: who it’s for? interviews, personas, design target What can the user do that wasn’t possible before? activity map, concept drawing, storyboards What features does the user need for that? sticky notes, sketches, whiteboarding Sketch it, (prototype it), then build it “fake it, then make it”
  • 87. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Models & Methodologies Lean UX
  • 88. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Models & Methodologies Lean UX = design thinking + agile + lean startup principles for details, see Amrita Aviyente, Agile + Lean Startup principles + Lean UX (2013) http://www.slideshare.net/amritacaviyente/agile-lean-uxfinal
  • 89. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Models & Methodologies UCD (user-centered design) Lean UX learn from users learn from users no agile concepts uses agile concepts no validating hypothesis validating hypothesis no way to measure design outcomes measure design outcomes
  • 90. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Models & Methodologies Methodologies could be based on certain models
  • 91. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco conceptual models for designing a Web interface Robert Baxley, 2003
  • 92. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Models & Methodologies QOC (Questions, Options, Criteria) Maclean et al., 1991
  • 93. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Models & Methodologies QOC (Questions, Options, Criteria) Maclean et al., 1991 questions regarding design key issues
  • 94. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Models & Methodologies QOC (Questions, Options, Criteria) Maclean et al., 1991 questions regarding design key issues possible options to response to each question
  • 95. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Models & Methodologies QOC (Questions, Options, Criteria) Maclean et al., 1991 questions regarding design key issues possible options to response to each question evaluation criteria – e.g., ergonomics, accessibility, preferred interaction method,… – concerning every option
  • 96. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco QOC question: How user could pick a location for flower delivery? discussion
  • 97. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco QOC question: How user could pick a location for flower delivery? options: listbox, combobox, textfield, using a map,… discussion
  • 98. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco QOC question: How user could pick a location for flower delivery? options: listbox, combobox, textfield, using a map,… criteria: efficiency, keyboard-only interaction, using gestures, etc. discussion
  • 99. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco QOC discussion
  • 100. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco example: QOC for touch-based interaction with a patient monitoring application A. Berila, A. Bulai, C. Chiric & M. Plesca, 2012 patientmo.wordpress.com
  • 101. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Models & Methodologies Iterative design may employ users in the different phases of the project
  • 102. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Models & Methodologies Iterative design may employ users in the different phases of the project these persons could evaluate UI in early stages of development
  • 103. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco from idea to the final software product
  • 104. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Models & Methodologies Prototyping overall view of the user interface
  • 105. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Models & Methodologies Prototyping proposes a design solution no full functionality required
  • 106. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Models & Methodologies Prototyping could be dynamic provides ways for experimentation
  • 107. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Models & Methodologies Prototyping attract users in the development process might have an important role in testing
  • 108. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Models & Methodologies Prototyping adapted from Amrita Aviyente, 2013 fidelity tool paper prototype paper + pencil low – clickable wireframe OmniGraffle, Gliffy, MS Visio, UXPin medium Axure RP, Adobe Illustrator high code (e.g., HTML + CSS + JS)
  • 109. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco paper prototype of main page for www.info.uaic.ro (Sergiu Dumitriu, Marta Gardea, Sabin Buraga, 2006)
  • 110. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Original Twitter Concept http://www.flickr.com/photos/jackdorsey/182613360/
  • 111. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Models & Methodologies Storyboard describing the manner of presenting information, without any functionality http://storyboardcentral.blogspot.com/
  • 112. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Models & Methodologies A. Stanciu, I. Schiopu, A. Grigoriu, I. Lazar (2011) – aisquared.wordpress.com
  • 113. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Models & Methodologies Storyboard in the Web context, it usually consists of wireframes
  • 114. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Models & Methodologies Wireframe provides a general view of the structure of interface and relationships between pages  wireframe-based design
  • 115. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Models & Methodologies Wireframe created in the first stage of the project gives instructions to both designers and programmers regarding the interface look & behavior conceptual page layouts
  • 116. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busacoA. Stanciu, I. Schiopu, A. Grigoriu, I. Lazar (2011) – aisquared.wordpress.com
  • 117. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Models & Methodologies Mockup provides a low-fidelity – full-size or scaled – prototype: paper illustration, screenshot,…
  • 118. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Models & Methodologies Mockup provides a low-fidelity – full-size or scaled – prototype: paper illustration, screenshot,… used for demonstration, teaching, evaluation
  • 119. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco mockups for a geolocation-based recommender system A. Stanciu, I. Schiopu, A. Grigoriu, I. Lazar (2011) – aisquared.wordpress.com
  • 120. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Models & Methodologies Mockup several examples of available software tools: Balsamiq Mockups – www.balsamiq.com HotGloo – www.hotgloo.com MockFlow – mockflow.com Mocking Bird – gomockingbird.com/mockingbird/ Moqups – moqups.com Proto.io – http://proto.io/
  • 121. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Models & Methodologies Interface assistants (wizards) help users to dynamically create the interface  interactive prototyping
  • 122. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Case study #1: designing a Web interface for Apricado Music http://jeff.io/posts/user-interface-wireframes
  • 123. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Step 1: paper prototype (sketch) signup form
  • 124. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco step 2: wireframe
  • 125. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Step 3: design mockup step 3: design mockup
  • 126. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco step 4: implementation real Web interface (HTML+CSS)
  • 127. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Case study #2: UI design for an iPhone application able to manage personal expenses Andrei Potorac, 2011
  • 128. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco storytelling – includes useful notes for designer/developer
  • 129. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco from mockup to UI prototype – using the iPhone emulator
  • 130. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Models & Methodologies For further information: Philipp Schroeder, “Sketching, Wireframing, Prototyping – How to Be Agile & Avoid Half-Baked UX” (2012) http://www.ustream.tv/recorded/25221096 Craig Brewster, “Lean UX in practice” (2013) http://wp.me/pV32M-aU
  • 131. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Models & Methodologies Necessity of specific HCI guidelines and standards
  • 132. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Models & Methodologies Necessity of specific HCI guidelines and standards to assure the quality of user interface
  • 133. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Models & Methodologies
  • 134. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Standards Imposed by (inter)national organisms examples: ISO 9241 W3C Standards StUX (Standards for User Experience)
  • 135. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Guidelines Provides details and design suggestions Could list abstract principles to be used in early stages of UI development May resolve certain design conflicts
  • 136. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Guidelines: examples BBC GEL (Global Experience Language) GNOME HIG – Human Interface Guidelines Samsung Smart TV UX Guideline UX Design Guidelines for Windows Phone iOS Human Interface Guidelines Web Content Accessibility Guidelines
  • 137. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco ARIA (Accessible Rich Internet Applications) context: Web Accessibility Initiative – www.w3.org/WAI/ case study
  • 138. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco GNOME HIG: usability principles Design for people Don’t limit your user base Create a match between your application & the real world Make your application consistent Keep the user informed Keep it simple and pretty Put the user in control Forgive the user Provide direct manipulation for details, read https://developer.gnome.org/hig-book/3.10/ case study
  • 139. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Principles for Designing Apps for Samsung TV Simplicity Clarify User Control Consistency Feedback Aesthetic Considerations see also https://www.samsungdforum.com/UxGuide/ case study
  • 140. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco “Conclusion” aspects regarding UI design from methodologies to guidelines
  • 141. Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco next lecture: information architecture & design patterns