hci 2014 (3 of 10): design models and methodologies
Post on 21-Oct-2014
334 views
DESCRIPTION
Main aspects regarding UI design. From methodologies to guidelines. See also http://profs.info.uaic.ro/~busaco/teach/courses/hci/hci-film.htmlTRANSCRIPT
![Page 1: HCI 2014 (3 of 10): Design Models and Methodologies](https://reader033.vdocuments.site/reader033/viewer/2022052617/54467a51b1af9fdc3a8b461b/html5/thumbnails/1.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busacodesign models & methodologies
Human-Computer Interaction
![Page 2: HCI 2014 (3 of 10): Design Models and Methodologies](https://reader033.vdocuments.site/reader033/viewer/2022052617/54467a51b1af9fdc3a8b461b/html5/thumbnails/2.jpg)
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
![Page 3: HCI 2014 (3 of 10): Design Models and Methodologies](https://reader033.vdocuments.site/reader033/viewer/2022052617/54467a51b1af9fdc3a8b461b/html5/thumbnails/3.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Goal
Developing digital products
![Page 4: HCI 2014 (3 of 10): Design Models and Methodologies](https://reader033.vdocuments.site/reader033/viewer/2022052617/54467a51b1af9fdc3a8b461b/html5/thumbnails/4.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Goal
Developing digital products
product as functionalityversus
product as information
mainly in the Web context
![Page 5: HCI 2014 (3 of 10): Design Models and Methodologies](https://reader033.vdocuments.site/reader033/viewer/2022052617/54467a51b1af9fdc3a8b461b/html5/thumbnails/5.jpg)
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
![Page 6: HCI 2014 (3 of 10): Design Models and Methodologies](https://reader033.vdocuments.site/reader033/viewer/2022052617/54467a51b1af9fdc3a8b461b/html5/thumbnails/6.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Reality
Software engineering is mainly focused onthe communication between applications
and developers or between teams of developers
![Page 7: HCI 2014 (3 of 10): Design Models and Methodologies](https://reader033.vdocuments.site/reader033/viewer/2022052617/54467a51b1af9fdc3a8b461b/html5/thumbnails/7.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Reality
Human-Computer Interactionconsiders the communication with the user
![Page 8: HCI 2014 (3 of 10): Design Models and Methodologies](https://reader033.vdocuments.site/reader033/viewer/2022052617/54467a51b1af9fdc3a8b461b/html5/thumbnails/8.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Reality
Interface design requiresan important development effort
![Page 9: HCI 2014 (3 of 10): Design Models and Methodologies](https://reader033.vdocuments.site/reader033/viewer/2022052617/54467a51b1af9fdc3a8b461b/html5/thumbnails/9.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Reality
Interface design represents 50% of…
design timeimplementation time
maintenance timesource-code volume
![Page 10: HCI 2014 (3 of 10): Design Models and Methodologies](https://reader033.vdocuments.site/reader033/viewer/2022052617/54467a51b1af9fdc3a8b461b/html5/thumbnails/10.jpg)
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:
theoriesmodels
frameworks
Rogers, 2007
![Page 11: HCI 2014 (3 of 10): Design Models and Methodologies](https://reader033.vdocuments.site/reader033/viewer/2022052617/54467a51b1af9fdc3a8b461b/html5/thumbnails/11.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Necessity
Theory
gives a (rigorous, formal) clarificationof certain aspects regarding a phenomenon
![Page 12: HCI 2014 (3 of 10): Design Models and Methodologies](https://reader033.vdocuments.site/reader033/viewer/2022052617/54467a51b1af9fdc3a8b461b/html5/thumbnails/12.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Necessity
Model
simplifies a given aspect about interactionin order to facilitate choosing and/or evaluating
alternatives of design
![Page 13: HCI 2014 (3 of 10): Design Models and Methodologies](https://reader033.vdocuments.site/reader033/viewer/2022052617/54467a51b1af9fdc3a8b461b/html5/thumbnails/13.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Necessity
Framework
denotes a set of interconnected conceptsand/or a set of specific problems regarding HCI
![Page 14: HCI 2014 (3 of 10): Design Models and Methodologies](https://reader033.vdocuments.site/reader033/viewer/2022052617/54467a51b1af9fdc3a8b461b/html5/thumbnails/14.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Aspects concerning the UI design
![Page 15: HCI 2014 (3 of 10): Design Models and Methodologies](https://reader033.vdocuments.site/reader033/viewer/2022052617/54467a51b1af9fdc3a8b461b/html5/thumbnails/15.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
involved disciplines & persons (Challis Hodge)
![Page 16: HCI 2014 (3 of 10): Design Models and Methodologies](https://reader033.vdocuments.site/reader033/viewer/2022052617/54467a51b1af9fdc3a8b461b/html5/thumbnails/16.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Aspects concerning design
Interaction Design
story creatingstory telling
![Page 17: HCI 2014 (3 of 10): Design Models and Methodologies](https://reader033.vdocuments.site/reader033/viewer/2022052617/54467a51b1af9fdc3a8b461b/html5/thumbnails/17.jpg)
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
![Page 18: HCI 2014 (3 of 10): Design Models and Methodologies](https://reader033.vdocuments.site/reader033/viewer/2022052617/54467a51b1af9fdc3a8b461b/html5/thumbnails/18.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Aspects concerning design
Sensorial Design
conventional interaction
![Page 19: HCI 2014 (3 of 10): Design Models and Methodologies](https://reader033.vdocuments.site/reader033/viewer/2022052617/54467a51b1af9fdc3a8b461b/html5/thumbnails/19.jpg)
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 & photographysound design, musical performance, vocal talents
videography, cinema
![Page 20: HCI 2014 (3 of 10): Design Models and Methodologies](https://reader033.vdocuments.site/reader033/viewer/2022052617/54467a51b1af9fdc3a8b461b/html5/thumbnails/20.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Aspects concerning design
Sensorial Design
natural interaction
![Page 21: HCI 2014 (3 of 10): Design Models and Methodologies](https://reader033.vdocuments.site/reader033/viewer/2022052617/54467a51b1af9fdc3a8b461b/html5/thumbnails/21.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Aspects concerning design
Sensorial Design
natural interaction
tactile designolfactory design
kinosthatic design…
![Page 22: HCI 2014 (3 of 10): Design Models and Methodologies](https://reader033.vdocuments.site/reader033/viewer/2022052617/54467a51b1af9fdc3a8b461b/html5/thumbnails/22.jpg)
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 & expectationsaugmented and virtual reality, physical computing, etc.
![Page 23: HCI 2014 (3 of 10): Design Models and Methodologies](https://reader033.vdocuments.site/reader033/viewer/2022052617/54467a51b1af9fdc3a8b461b/html5/thumbnails/23.jpg)
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
![Page 24: HCI 2014 (3 of 10): Design Models and Methodologies](https://reader033.vdocuments.site/reader033/viewer/2022052617/54467a51b1af9fdc3a8b461b/html5/thumbnails/24.jpg)
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.
![Page 25: HCI 2014 (3 of 10): Design Models and Methodologies](https://reader033.vdocuments.site/reader033/viewer/2022052617/54467a51b1af9fdc3a8b461b/html5/thumbnails/25.jpg)
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
![Page 26: HCI 2014 (3 of 10): Design Models and Methodologies](https://reader033.vdocuments.site/reader033/viewer/2022052617/54467a51b1af9fdc3a8b461b/html5/thumbnails/26.jpg)
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
![Page 27: HCI 2014 (3 of 10): Design Models and Methodologies](https://reader033.vdocuments.site/reader033/viewer/2022052617/54467a51b1af9fdc3a8b461b/html5/thumbnails/27.jpg)
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 classicalsoftware engineering methodologies
![Page 28: HCI 2014 (3 of 10): Design Models and Methodologies](https://reader033.vdocuments.site/reader033/viewer/2022052617/54467a51b1af9fdc3a8b461b/html5/thumbnails/28.jpg)
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
![Page 29: HCI 2014 (3 of 10): Design Models and Methodologies](https://reader033.vdocuments.site/reader033/viewer/2022052617/54467a51b1af9fdc3a8b461b/html5/thumbnails/29.jpg)
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
![Page 30: HCI 2014 (3 of 10): Design Models and Methodologies](https://reader033.vdocuments.site/reader033/viewer/2022052617/54467a51b1af9fdc3a8b461b/html5/thumbnails/30.jpg)
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
![Page 31: HCI 2014 (3 of 10): Design Models and Methodologies](https://reader033.vdocuments.site/reader033/viewer/2022052617/54467a51b1af9fdc3a8b461b/html5/thumbnails/31.jpg)
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)
![Page 32: HCI 2014 (3 of 10): Design Models and Methodologies](https://reader033.vdocuments.site/reader033/viewer/2022052617/54467a51b1af9fdc3a8b461b/html5/thumbnails/32.jpg)
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 fromthe beginning of the design process and dictates
the needs of the user should be foremostin any design decisions.”
MSDN, User Interface Design & Development section
![Page 33: HCI 2014 (3 of 10): Design Models and Methodologies](https://reader033.vdocuments.site/reader033/viewer/2022052617/54467a51b1af9fdc3a8b461b/html5/thumbnails/33.jpg)
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
![Page 34: HCI 2014 (3 of 10): Design Models and Methodologies](https://reader033.vdocuments.site/reader033/viewer/2022052617/54467a51b1af9fdc3a8b461b/html5/thumbnails/34.jpg)
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)
![Page 35: HCI 2014 (3 of 10): Design Models and Methodologies](https://reader033.vdocuments.site/reader033/viewer/2022052617/54467a51b1af9fdc3a8b461b/html5/thumbnails/35.jpg)
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
![Page 36: HCI 2014 (3 of 10): Design Models and Methodologies](https://reader033.vdocuments.site/reader033/viewer/2022052617/54467a51b1af9fdc3a8b461b/html5/thumbnails/36.jpg)
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
![Page 37: HCI 2014 (3 of 10): Design Models and Methodologies](https://reader033.vdocuments.site/reader033/viewer/2022052617/54467a51b1af9fdc3a8b461b/html5/thumbnails/37.jpg)
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)
![Page 38: HCI 2014 (3 of 10): Design Models and Methodologies](https://reader033.vdocuments.site/reader033/viewer/2022052617/54467a51b1af9fdc3a8b461b/html5/thumbnails/38.jpg)
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
![Page 39: HCI 2014 (3 of 10): Design Models and Methodologies](https://reader033.vdocuments.site/reader033/viewer/2022052617/54467a51b1af9fdc3a8b461b/html5/thumbnails/39.jpg)
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
![Page 40: HCI 2014 (3 of 10): Design Models and Methodologies](https://reader033.vdocuments.site/reader033/viewer/2022052617/54467a51b1af9fdc3a8b461b/html5/thumbnails/40.jpg)
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 partnersof a certain conversation
![Page 41: HCI 2014 (3 of 10): Design Models and Methodologies](https://reader033.vdocuments.site/reader033/viewer/2022052617/54467a51b1af9fdc3a8b461b/html5/thumbnails/41.jpg)
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
![Page 42: HCI 2014 (3 of 10): Design Models and Methodologies](https://reader033.vdocuments.site/reader033/viewer/2022052617/54467a51b1af9fdc3a8b461b/html5/thumbnails/42.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
http://tinyurl.com/8xz8prs
![Page 43: HCI 2014 (3 of 10): Design Models and Methodologies](https://reader033.vdocuments.site/reader033/viewer/2022052617/54467a51b1af9fdc3a8b461b/html5/thumbnails/43.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
reported by @johnbreslin
![Page 44: HCI 2014 (3 of 10): Design Models and Methodologies](https://reader033.vdocuments.site/reader033/viewer/2022052617/54467a51b1af9fdc3a8b461b/html5/thumbnails/44.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Aspects concerning design
Dialogue perspective
texthypertext
direct manipulationpictures & illustrations
gesturesemotional factors
…
![Page 45: HCI 2014 (3 of 10): Design Models and Methodologies](https://reader033.vdocuments.site/reader033/viewer/2022052617/54467a51b1af9fdc3a8b461b/html5/thumbnails/45.jpg)
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 categoryimages, numbers, names, relationships,…
![Page 46: HCI 2014 (3 of 10): Design Models and Methodologies](https://reader033.vdocuments.site/reader033/viewer/2022052617/54467a51b1af9fdc3a8b461b/html5/thumbnails/46.jpg)
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/
![Page 47: HCI 2014 (3 of 10): Design Models and Methodologies](https://reader033.vdocuments.site/reader033/viewer/2022052617/54467a51b1af9fdc3a8b461b/html5/thumbnails/47.jpg)
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 structurelimited set of values, lists of pairs (name, value), graphs,…
![Page 48: HCI 2014 (3 of 10): Design Models and Methodologies](https://reader033.vdocuments.site/reader033/viewer/2022052617/54467a51b1af9fdc3a8b461b/html5/thumbnails/48.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
designed by Dr. Stefan Negru (2014)
![Page 49: HCI 2014 (3 of 10): Design Models and Methodologies](https://reader033.vdocuments.site/reader033/viewer/2022052617/54467a51b1af9fdc3a8b461b/html5/thumbnails/49.jpg)
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
datainformationknowledge
![Page 50: HCI 2014 (3 of 10): Design Models and Methodologies](https://reader033.vdocuments.site/reader033/viewer/2022052617/54467a51b1af9fdc3a8b461b/html5/thumbnails/50.jpg)
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 preferencesage, abilities, ethnicity, social aspects, etc.
![Page 51: HCI 2014 (3 of 10): Design Models and Methodologies](https://reader033.vdocuments.site/reader033/viewer/2022052617/54467a51b1af9fdc3a8b461b/html5/thumbnails/51.jpg)
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 preferencesage, abilities, ethnicity, social aspects, etc.
remember personas?
![Page 52: HCI 2014 (3 of 10): Design Models and Methodologies](https://reader033.vdocuments.site/reader033/viewer/2022052617/54467a51b1af9fdc3a8b461b/html5/thumbnails/52.jpg)
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,…
![Page 53: HCI 2014 (3 of 10): Design Models and Methodologies](https://reader033.vdocuments.site/reader033/viewer/2022052617/54467a51b1af9fdc3a8b461b/html5/thumbnails/53.jpg)
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):
contextspatial, temporal
![Page 54: HCI 2014 (3 of 10): Design Models and Methodologies](https://reader033.vdocuments.site/reader033/viewer/2022052617/54467a51b1af9fdc3a8b461b/html5/thumbnails/54.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Touch-based interaction
hand obstructioninaccuracy of tapping
lack of haptic feedbackmulti-touch issues
etc.
www.slideshare.net/pankorho/touch-uis-are-quite-different
discussion
![Page 55: HCI 2014 (3 of 10): Design Models and Methodologies](https://reader033.vdocuments.site/reader033/viewer/2022052617/54467a51b1af9fdc3a8b461b/html5/thumbnails/55.jpg)
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?”
![Page 56: HCI 2014 (3 of 10): Design Models and Methodologies](https://reader033.vdocuments.site/reader033/viewer/2022052617/54467a51b1af9fdc3a8b461b/html5/thumbnails/56.jpg)
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 controlover 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
![Page 57: HCI 2014 (3 of 10): Design Models and Methodologies](https://reader033.vdocuments.site/reader033/viewer/2022052617/54467a51b1af9fdc3a8b461b/html5/thumbnails/57.jpg)
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,…)
![Page 58: HCI 2014 (3 of 10): Design Models and Methodologies](https://reader033.vdocuments.site/reader033/viewer/2022052617/54467a51b1af9fdc3a8b461b/html5/thumbnails/58.jpg)
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
![Page 59: HCI 2014 (3 of 10): Design Models and Methodologies](https://reader033.vdocuments.site/reader033/viewer/2022052617/54467a51b1af9fdc3a8b461b/html5/thumbnails/59.jpg)
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
![Page 60: HCI 2014 (3 of 10): Design Models and Methodologies](https://reader033.vdocuments.site/reader033/viewer/2022052617/54467a51b1af9fdc3a8b461b/html5/thumbnails/60.jpg)
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
![Page 61: HCI 2014 (3 of 10): Design Models and Methodologies](https://reader033.vdocuments.site/reader033/viewer/2022052617/54467a51b1af9fdc3a8b461b/html5/thumbnails/61.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Design values
EthicalPurposefulPragmatic
Elegant
Alan Cooper et al., 2007
![Page 62: HCI 2014 (3 of 10): Design Models and Methodologies](https://reader033.vdocuments.site/reader033/viewer/2022052617/54467a51b1af9fdc3a8b461b/html5/thumbnails/62.jpg)
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
![Page 63: HCI 2014 (3 of 10): Design Models and Methodologies](https://reader033.vdocuments.site/reader033/viewer/2022052617/54467a51b1af9fdc3a8b461b/html5/thumbnails/63.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
discussion
![Page 64: HCI 2014 (3 of 10): Design Models and Methodologies](https://reader033.vdocuments.site/reader033/viewer/2022052617/54467a51b1af9fdc3a8b461b/html5/thumbnails/64.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
discussion
![Page 65: HCI 2014 (3 of 10): Design Models and Methodologies](https://reader033.vdocuments.site/reader033/viewer/2022052617/54467a51b1af9fdc3a8b461b/html5/thumbnails/65.jpg)
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
![Page 66: HCI 2014 (3 of 10): Design Models and Methodologies](https://reader033.vdocuments.site/reader033/viewer/2022052617/54467a51b1af9fdc3a8b461b/html5/thumbnails/66.jpg)
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)
![Page 67: HCI 2014 (3 of 10): Design Models and Methodologies](https://reader033.vdocuments.site/reader033/viewer/2022052617/54467a51b1af9fdc3a8b461b/html5/thumbnails/67.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
discussion
![Page 68: HCI 2014 (3 of 10): Design Models and Methodologies](https://reader033.vdocuments.site/reader033/viewer/2022052617/54467a51b1af9fdc3a8b461b/html5/thumbnails/68.jpg)
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
![Page 69: HCI 2014 (3 of 10): Design Models and Methodologies](https://reader033.vdocuments.site/reader033/viewer/2022052617/54467a51b1af9fdc3a8b461b/html5/thumbnails/69.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Design values
![Page 70: HCI 2014 (3 of 10): Design Models and Methodologies](https://reader033.vdocuments.site/reader033/viewer/2022052617/54467a51b1af9fdc3a8b461b/html5/thumbnails/70.jpg)
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/stimulatecognition and emotion
![Page 71: HCI 2014 (3 of 10): Design Models and Methodologies](https://reader033.vdocuments.site/reader033/viewer/2022052617/54467a51b1af9fdc3a8b461b/html5/thumbnails/71.jpg)
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
![Page 72: HCI 2014 (3 of 10): Design Models and Methodologies](https://reader033.vdocuments.site/reader033/viewer/2022052617/54467a51b1af9fdc3a8b461b/html5/thumbnails/72.jpg)
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 domore damage to your program’s reputation
than a rarely occurring crashing bug.”
Windows UX Guidelines, MSDN
![Page 73: HCI 2014 (3 of 10): Design Models and Methodologies](https://reader033.vdocuments.site/reader033/viewer/2022052617/54467a51b1af9fdc3a8b461b/html5/thumbnails/73.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Design values
“An application is powerfulwhen it enables its target users to realize
their full potential efficiently.”
Windows UX Guidelines, MSDN
![Page 74: HCI 2014 (3 of 10): Design Models and Methodologies](https://reader033.vdocuments.site/reader033/viewer/2022052617/54467a51b1af9fdc3a8b461b/html5/thumbnails/74.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Design models and methodologies
![Page 75: HCI 2014 (3 of 10): Design Models and Methodologies](https://reader033.vdocuments.site/reader033/viewer/2022052617/54467a51b1af9fdc3a8b461b/html5/thumbnails/75.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Models & Methodologies
Using “classical” software engineering methodologies
![Page 76: HCI 2014 (3 of 10): Design Models and Methodologies](https://reader033.vdocuments.site/reader033/viewer/2022052617/54467a51b1af9fdc3a8b461b/html5/thumbnails/76.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Models & Methodologies
Using “classical” software engineering methodologies
cascadespiral
RAD – Rapid Application Development…
![Page 77: HCI 2014 (3 of 10): Design Models and Methodologies](https://reader033.vdocuments.site/reader033/viewer/2022052617/54467a51b1af9fdc3a8b461b/html5/thumbnails/77.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Models & Methodologies
User-centered design methodologies
GUIDELUCID
STUDIOconcerning usability – ISO 13407
![Page 78: HCI 2014 (3 of 10): Design Models and Methodologies](https://reader033.vdocuments.site/reader033/viewer/2022052617/54467a51b1af9fdc3a8b461b/html5/thumbnails/78.jpg)
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 preferredlean startup method (Eric Ries, 2011)
![Page 79: HCI 2014 (3 of 10): Design Models and Methodologies](https://reader033.vdocuments.site/reader033/viewer/2022052617/54467a51b1af9fdc3a8b461b/html5/thumbnails/79.jpg)
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
![Page 80: HCI 2014 (3 of 10): Design Models and Methodologies](https://reader033.vdocuments.site/reader033/viewer/2022052617/54467a51b1af9fdc3a8b461b/html5/thumbnails/80.jpg)
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
![Page 81: HCI 2014 (3 of 10): Design Models and Methodologies](https://reader033.vdocuments.site/reader033/viewer/2022052617/54467a51b1af9fdc3a8b461b/html5/thumbnails/81.jpg)
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
![Page 82: HCI 2014 (3 of 10): Design Models and Methodologies](https://reader033.vdocuments.site/reader033/viewer/2022052617/54467a51b1af9fdc3a8b461b/html5/thumbnails/82.jpg)
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
![Page 83: HCI 2014 (3 of 10): Design Models and Methodologies](https://reader033.vdocuments.site/reader033/viewer/2022052617/54467a51b1af9fdc3a8b461b/html5/thumbnails/83.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Models & MethodologiesUX activities occurring during
the course of a single sprint
example
Lynn Pausic (2012)
![Page 84: HCI 2014 (3 of 10): Design Models and Methodologies](https://reader033.vdocuments.site/reader033/viewer/2022052617/54467a51b1af9fdc3a8b461b/html5/thumbnails/84.jpg)
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 marketworking software over comprehensive documentation
collaboration over negotiationresponding to change over following a plan
![Page 85: HCI 2014 (3 of 10): Design Models and Methodologies](https://reader033.vdocuments.site/reader033/viewer/2022052617/54467a51b1af9fdc3a8b461b/html5/thumbnails/85.jpg)
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)
![Page 86: HCI 2014 (3 of 10): Design Models and Methodologies](https://reader033.vdocuments.site/reader033/viewer/2022052617/54467a51b1af9fdc3a8b461b/html5/thumbnails/86.jpg)
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”
![Page 87: HCI 2014 (3 of 10): Design Models and Methodologies](https://reader033.vdocuments.site/reader033/viewer/2022052617/54467a51b1af9fdc3a8b461b/html5/thumbnails/87.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Models & Methodologies
Lean UX
![Page 88: HCI 2014 (3 of 10): Design Models and Methodologies](https://reader033.vdocuments.site/reader033/viewer/2022052617/54467a51b1af9fdc3a8b461b/html5/thumbnails/88.jpg)
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
![Page 89: HCI 2014 (3 of 10): Design Models and Methodologies](https://reader033.vdocuments.site/reader033/viewer/2022052617/54467a51b1af9fdc3a8b461b/html5/thumbnails/89.jpg)
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
![Page 90: HCI 2014 (3 of 10): Design Models and Methodologies](https://reader033.vdocuments.site/reader033/viewer/2022052617/54467a51b1af9fdc3a8b461b/html5/thumbnails/90.jpg)
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
![Page 91: HCI 2014 (3 of 10): Design Models and Methodologies](https://reader033.vdocuments.site/reader033/viewer/2022052617/54467a51b1af9fdc3a8b461b/html5/thumbnails/91.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
conceptual models for designing a Web interfaceRobert Baxley, 2003
![Page 92: HCI 2014 (3 of 10): Design Models and Methodologies](https://reader033.vdocuments.site/reader033/viewer/2022052617/54467a51b1af9fdc3a8b461b/html5/thumbnails/92.jpg)
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
![Page 93: HCI 2014 (3 of 10): Design Models and Methodologies](https://reader033.vdocuments.site/reader033/viewer/2022052617/54467a51b1af9fdc3a8b461b/html5/thumbnails/93.jpg)
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
![Page 94: HCI 2014 (3 of 10): Design Models and Methodologies](https://reader033.vdocuments.site/reader033/viewer/2022052617/54467a51b1af9fdc3a8b461b/html5/thumbnails/94.jpg)
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
![Page 95: HCI 2014 (3 of 10): Design Models and Methodologies](https://reader033.vdocuments.site/reader033/viewer/2022052617/54467a51b1af9fdc3a8b461b/html5/thumbnails/95.jpg)
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
![Page 96: HCI 2014 (3 of 10): Design Models and Methodologies](https://reader033.vdocuments.site/reader033/viewer/2022052617/54467a51b1af9fdc3a8b461b/html5/thumbnails/96.jpg)
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
![Page 97: HCI 2014 (3 of 10): Design Models and Methodologies](https://reader033.vdocuments.site/reader033/viewer/2022052617/54467a51b1af9fdc3a8b461b/html5/thumbnails/97.jpg)
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
![Page 98: HCI 2014 (3 of 10): Design Models and Methodologies](https://reader033.vdocuments.site/reader033/viewer/2022052617/54467a51b1af9fdc3a8b461b/html5/thumbnails/98.jpg)
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
![Page 99: HCI 2014 (3 of 10): Design Models and Methodologies](https://reader033.vdocuments.site/reader033/viewer/2022052617/54467a51b1af9fdc3a8b461b/html5/thumbnails/99.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
QOC
discussion
![Page 100: HCI 2014 (3 of 10): Design Models and Methodologies](https://reader033.vdocuments.site/reader033/viewer/2022052617/54467a51b1af9fdc3a8b461b/html5/thumbnails/100.jpg)
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 applicationA. Berila, A. Bulai, C. Chiric & M. Plesca, 2012
patientmo.wordpress.com
![Page 101: HCI 2014 (3 of 10): Design Models and Methodologies](https://reader033.vdocuments.site/reader033/viewer/2022052617/54467a51b1af9fdc3a8b461b/html5/thumbnails/101.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Models & Methodologies
Iterative design may employ usersin the different phases of the project
![Page 102: HCI 2014 (3 of 10): Design Models and Methodologies](https://reader033.vdocuments.site/reader033/viewer/2022052617/54467a51b1af9fdc3a8b461b/html5/thumbnails/102.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Models & Methodologies
Iterative design may employ usersin the different phases of the project
these persons could evaluate UIin early stages of development
![Page 103: HCI 2014 (3 of 10): Design Models and Methodologies](https://reader033.vdocuments.site/reader033/viewer/2022052617/54467a51b1af9fdc3a8b461b/html5/thumbnails/103.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
from idea to the final software product
![Page 104: HCI 2014 (3 of 10): Design Models and Methodologies](https://reader033.vdocuments.site/reader033/viewer/2022052617/54467a51b1af9fdc3a8b461b/html5/thumbnails/104.jpg)
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
![Page 105: HCI 2014 (3 of 10): Design Models and Methodologies](https://reader033.vdocuments.site/reader033/viewer/2022052617/54467a51b1af9fdc3a8b461b/html5/thumbnails/105.jpg)
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
![Page 106: HCI 2014 (3 of 10): Design Models and Methodologies](https://reader033.vdocuments.site/reader033/viewer/2022052617/54467a51b1af9fdc3a8b461b/html5/thumbnails/106.jpg)
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
![Page 107: HCI 2014 (3 of 10): Design Models and Methodologies](https://reader033.vdocuments.site/reader033/viewer/2022052617/54467a51b1af9fdc3a8b461b/html5/thumbnails/107.jpg)
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
![Page 108: HCI 2014 (3 of 10): Design Models and Methodologies](https://reader033.vdocuments.site/reader033/viewer/2022052617/54467a51b1af9fdc3a8b461b/html5/thumbnails/108.jpg)
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)
![Page 109: HCI 2014 (3 of 10): Design Models and Methodologies](https://reader033.vdocuments.site/reader033/viewer/2022052617/54467a51b1af9fdc3a8b461b/html5/thumbnails/109.jpg)
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)
![Page 110: HCI 2014 (3 of 10): Design Models and Methodologies](https://reader033.vdocuments.site/reader033/viewer/2022052617/54467a51b1af9fdc3a8b461b/html5/thumbnails/110.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Original Twitter Concepthttp://www.flickr.com/photos/jackdorsey/182613360/
![Page 111: HCI 2014 (3 of 10): Design Models and Methodologies](https://reader033.vdocuments.site/reader033/viewer/2022052617/54467a51b1af9fdc3a8b461b/html5/thumbnails/111.jpg)
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/
![Page 112: HCI 2014 (3 of 10): Design Models and Methodologies](https://reader033.vdocuments.site/reader033/viewer/2022052617/54467a51b1af9fdc3a8b461b/html5/thumbnails/112.jpg)
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
![Page 113: HCI 2014 (3 of 10): Design Models and Methodologies](https://reader033.vdocuments.site/reader033/viewer/2022052617/54467a51b1af9fdc3a8b461b/html5/thumbnails/113.jpg)
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
![Page 114: HCI 2014 (3 of 10): Design Models and Methodologies](https://reader033.vdocuments.site/reader033/viewer/2022052617/54467a51b1af9fdc3a8b461b/html5/thumbnails/114.jpg)
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 interfaceand relationships between pages
wireframe-based design
![Page 115: HCI 2014 (3 of 10): Design Models and Methodologies](https://reader033.vdocuments.site/reader033/viewer/2022052617/54467a51b1af9fdc3a8b461b/html5/thumbnails/115.jpg)
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
![Page 116: HCI 2014 (3 of 10): Design Models and Methodologies](https://reader033.vdocuments.site/reader033/viewer/2022052617/54467a51b1af9fdc3a8b461b/html5/thumbnails/116.jpg)
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
![Page 117: HCI 2014 (3 of 10): Design Models and Methodologies](https://reader033.vdocuments.site/reader033/viewer/2022052617/54467a51b1af9fdc3a8b461b/html5/thumbnails/117.jpg)
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,…
![Page 118: HCI 2014 (3 of 10): Design Models and Methodologies](https://reader033.vdocuments.site/reader033/viewer/2022052617/54467a51b1af9fdc3a8b461b/html5/thumbnails/118.jpg)
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
![Page 119: HCI 2014 (3 of 10): Design Models and Methodologies](https://reader033.vdocuments.site/reader033/viewer/2022052617/54467a51b1af9fdc3a8b461b/html5/thumbnails/119.jpg)
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
![Page 120: HCI 2014 (3 of 10): Design Models and Methodologies](https://reader033.vdocuments.site/reader033/viewer/2022052617/54467a51b1af9fdc3a8b461b/html5/thumbnails/120.jpg)
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/
![Page 121: HCI 2014 (3 of 10): Design Models and Methodologies](https://reader033.vdocuments.site/reader033/viewer/2022052617/54467a51b1af9fdc3a8b461b/html5/thumbnails/121.jpg)
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
![Page 122: HCI 2014 (3 of 10): Design Models and Methodologies](https://reader033.vdocuments.site/reader033/viewer/2022052617/54467a51b1af9fdc3a8b461b/html5/thumbnails/122.jpg)
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
![Page 123: HCI 2014 (3 of 10): Design Models and Methodologies](https://reader033.vdocuments.site/reader033/viewer/2022052617/54467a51b1af9fdc3a8b461b/html5/thumbnails/123.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Step 1: paper prototype (sketch)
signup form
![Page 124: HCI 2014 (3 of 10): Design Models and Methodologies](https://reader033.vdocuments.site/reader033/viewer/2022052617/54467a51b1af9fdc3a8b461b/html5/thumbnails/124.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
step 2: wireframe
![Page 125: HCI 2014 (3 of 10): Design Models and Methodologies](https://reader033.vdocuments.site/reader033/viewer/2022052617/54467a51b1af9fdc3a8b461b/html5/thumbnails/125.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Step 3: design mockup
step 3: design mockup
![Page 126: HCI 2014 (3 of 10): Design Models and Methodologies](https://reader033.vdocuments.site/reader033/viewer/2022052617/54467a51b1af9fdc3a8b461b/html5/thumbnails/126.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
step 4: implementation
real Web interface (HTML+CSS)
![Page 127: HCI 2014 (3 of 10): Design Models and Methodologies](https://reader033.vdocuments.site/reader033/viewer/2022052617/54467a51b1af9fdc3a8b461b/html5/thumbnails/127.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Case study #2:UI design for an iPhone applicationable to manage personal expenses
Andrei Potorac, 2011
![Page 128: HCI 2014 (3 of 10): Design Models and Methodologies](https://reader033.vdocuments.site/reader033/viewer/2022052617/54467a51b1af9fdc3a8b461b/html5/thumbnails/128.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
storytelling – includes useful notes for designer/developer
![Page 129: HCI 2014 (3 of 10): Design Models and Methodologies](https://reader033.vdocuments.site/reader033/viewer/2022052617/54467a51b1af9fdc3a8b461b/html5/thumbnails/129.jpg)
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
![Page 130: HCI 2014 (3 of 10): Design Models and Methodologies](https://reader033.vdocuments.site/reader033/viewer/2022052617/54467a51b1af9fdc3a8b461b/html5/thumbnails/130.jpg)
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
![Page 131: HCI 2014 (3 of 10): Design Models and Methodologies](https://reader033.vdocuments.site/reader033/viewer/2022052617/54467a51b1af9fdc3a8b461b/html5/thumbnails/131.jpg)
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
![Page 132: HCI 2014 (3 of 10): Design Models and Methodologies](https://reader033.vdocuments.site/reader033/viewer/2022052617/54467a51b1af9fdc3a8b461b/html5/thumbnails/132.jpg)
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
![Page 133: HCI 2014 (3 of 10): Design Models and Methodologies](https://reader033.vdocuments.site/reader033/viewer/2022052617/54467a51b1af9fdc3a8b461b/html5/thumbnails/133.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Models & Methodologies
![Page 134: HCI 2014 (3 of 10): Design Models and Methodologies](https://reader033.vdocuments.site/reader033/viewer/2022052617/54467a51b1af9fdc3a8b461b/html5/thumbnails/134.jpg)
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)
![Page 135: HCI 2014 (3 of 10): Design Models and Methodologies](https://reader033.vdocuments.site/reader033/viewer/2022052617/54467a51b1af9fdc3a8b461b/html5/thumbnails/135.jpg)
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 usedin early stages of UI development
May resolve certain design conflicts
![Page 136: HCI 2014 (3 of 10): Design Models and Methodologies](https://reader033.vdocuments.site/reader033/viewer/2022052617/54467a51b1af9fdc3a8b461b/html5/thumbnails/136.jpg)
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 GuidelinesWeb Content Accessibility Guidelines
![Page 137: HCI 2014 (3 of 10): Design Models and Methodologies](https://reader033.vdocuments.site/reader033/viewer/2022052617/54467a51b1af9fdc3a8b461b/html5/thumbnails/137.jpg)
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
![Page 138: HCI 2014 (3 of 10): Design Models and Methodologies](https://reader033.vdocuments.site/reader033/viewer/2022052617/54467a51b1af9fdc3a8b461b/html5/thumbnails/138.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
GNOME HIG: usability principles
Design for peopleDon’t limit your user base
Create a match between your application & the real worldMake your application consistent
Keep the user informedKeep it simple and pretty
Put the user in controlForgive the user
Provide direct manipulation
for details, read https://developer.gnome.org/hig-book/3.10/
case study
![Page 139: HCI 2014 (3 of 10): Design Models and Methodologies](https://reader033.vdocuments.site/reader033/viewer/2022052617/54467a51b1af9fdc3a8b461b/html5/thumbnails/139.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Principles for Designing Apps for Samsung TV
SimplicityClarify
User ControlConsistency
FeedbackAesthetic Considerations
see also https://www.samsungdforum.com/UxGuide/
case study
![Page 140: HCI 2014 (3 of 10): Design Models and Methodologies](https://reader033.vdocuments.site/reader033/viewer/2022052617/54467a51b1af9fdc3a8b461b/html5/thumbnails/140.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
“Conclusion”
aspects regarding UI designfrom methodologies to guidelines
![Page 141: HCI 2014 (3 of 10): Design Models and Methodologies](https://reader033.vdocuments.site/reader033/viewer/2022052617/54467a51b1af9fdc3a8b461b/html5/thumbnails/141.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
next lecture:information architecture & design patterns