Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Human-Computer Interaction
model-based user interactionin the context of software engineering
https://labs.ideo.com/2014/09/19/digital-tools-for-design-research/
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
“If you are not embarrassed by the first version of your product, you’ve launched too late.”
Reid Hoffman
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
How we can evaluate the usability (quality) of interactive systems?
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
UI quality
Presentation of information
multiplicity of devices & representations
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
UI quality
Presentation of information
input/output reusability
use output produced by one action as input for another
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
UI quality
Ordering of task planning
multiplicity of user roles
regular user versus administrator
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
UI quality
Ordering of task planning
multiplicity of execution paths
menu versus toolbox versus shortcuts
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
UI quality
Ordering of task planning
non-preemptiveness
degree of freedom for users to decide what’s next
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
UI quality
Ordering of task planning
reachability
possibility to navigate in the system (e.g., undo, redo, breadcrumb pattern)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
UI quality
Ordering of task planning
observability versus browsability
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
UI quality
Adaption of interaction
reconfigurability
system ability to support user personalization
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
UI quality
Adaption of interaction
reconfigurability
system ability to support user personalization
configuration versus personalization
affects system function & performance
relevant to the individual user
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
UI quality
Adaption of interaction
adaptivity
system ability to support automated adaptation
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
UI quality
Adaption of interaction
migrability
system ability to transfer responsibilityfrom one user to another,
among users,among users and systems/platforms
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
UI quality
Adaption of interaction
plasticity
system ability to adapt to the context of use while preserving predefined usability properties
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
UI quality
Standards
ISO/IEC 9126-1 (2001) – quality modelISO/IEC 9126-2 (2003) – external measuresISO/IEC 9126-3 (2003) – internal measures
ISO/IEC 9126-4 (2004) – quality in use measures
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
UI quality
Quality in use is the user’s view of the quality of the software product when it is used in a specific
environment and a specific context of use
ISO/IEC 9126-4 (2004)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
UI quality
External quality is the totality of characteristicsof the software product from an external view
ISO/IEC 9126-2 (2003)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
UI quality
External quality is the totality of characteristicsof the software product from an external view
measured and evaluated in the testing phasewithin a simulated environment,
by using external metrics
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
UI quality
Internal quality is the totality of attributes ofa product that determine its ability to satisfy
stated and implied needs when usedunder specified conditions
ISO/IEC 9126-3 (2003)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
UI quality
Internal quality is the totality of attributes ofa product that determine its ability to satisfy
stated and implied needs when usedunder specified conditions
remains unchanged until the system redesign
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
UI quality
For details, consult:
E. Law, E. Hvannberg & G. Cockton (Editors),Maturing Usability. Quality in Software, Interaction
and Value, Springer, 2008
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
CriteriaScapin & Bastien, 1997; Vanderdonckt, 1995
compatibilityconsistencywork loadadaptation
dialog controlguidance
error management
Usability evaluation
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Important aspects
a priori and/or a posteriori
design versus testing (evaluation)
Usability evaluation
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Example:
the lack of explanatory messages in the case of Web links
Usability evaluation
Click here to go to the UAIC main page.Click here to visit our HCI Website.Click here for details about this event.
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Example:
the lack of explanatory messages in the case of Web links
Usability evaluation
Click here to go to the UAIC main page.Click here to visit our HCI Website.Click here for details about this event.
“click here”anti-pattern
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Example:
adoption of different placement strategiesfor content and navigational methods
Usability evaluation
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
“Optimal” placement of links for the main pageof a Website (Shaikh & Lenz, 2006)
case study
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
“Optimal” placement of links for the subsidiary pages(Shaikh & Lenz, 2006)
case study
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
“Optimal” placement of the internal search tools(Shaikh & Lenz, 2006)
case study
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
“Optimal” placement of the advertisements(Shaikh & Lenz, 2006)
case study
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
One of the most used general technique:eye tracking
30—60 minute interviews, in which users are asked to complete real-life tasks online, while the eye tracking
monitor captures their eye movements
J. Nielsen, K. Pernice, Eyetracking Web Usability, New Riders, 2009
www.nngroup.com/reports/how-to-conduct-eyetracking-studies/
Usability evaluation
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Usability evaluation
What areas of the page draw users’ attention?Do users notice and use key navigation elements?
Do users notice key marketing elements and do they recall them? Are users successful in completing a particular task?Which pages, ads, videos, or images do users prefer?What do they expect to find but overlook on the site?
www.evocinsights.com
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
One of the most used general technique:eye tracking
several open-source software solutions:EyeWriter – http://eyewriter.org/developer/
ExpertEyes – http://code.google.com/p/experteyes/
Gaze Tracking – sourceforge.net/projects/gazetrackinglib/
OGAMA – http://www.ogama.net/
PyGaze – http://www.pygaze.org/
Usability evaluation
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
PUI – Plastic User Interfaces
adaptation to the context of usewhile satisfying predefined usability properties of interest
Usability evaluation
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Calitate
D. Thevenin, J. Coutaz & G. Calvary, 2004
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
PUI – Plastic User Interfaces
levels of adaptation:lexical
sintacticsemantic
performed tasksconcerning the user goals
Usability evaluation
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Accessibility
successful access to information and IT applicationsby people having special needs
visual, hearing, motor, cognitive, seizure disorders
discussion
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Accessibility
realities:20% of US population have a certain type of disability
10% of persons are having severe problems
4% of world-wide humans have major sight problems
discussion
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
discussion
general usabilityaffects all users
physical barriersaffects only disabled people
variablesinconveniences for some
barriers for others
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Accessibility
offering alternative means in order to facilitatethe completion of users’ tasks for people having
temporary (on short/long term) or permanent problems
discussion
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Accessibility
general strategies:
textual descriptions of multimedia content(images, audio, animations, video, 3D)
discussion
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Accessibility
general strategies:
a proper (logical) organizationof the content and navigational paths
discussion
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Accessibility
general strategies:
support for keyboard-only interaction
discussion
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Accessibility
general strategies:
using standardized formats
discussion
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Accessibility
guidelines and tools:
www.w3.org/WAI/
www.webaim.org
discussion
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
discussion
WAVE (Web Accessibility Evaluation Tool)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Internationalization (I18N) and localization (L10N)
languagelinguistic preferences of the users
localecultural preferences concerning number and date
formatting, currency, etc.
discussion
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Internationalization (I18N) and localization (L10N)
“If the user can’t read the description of the preference, he/she doesn’t even have a chance to make a choice.”
Achim Ruopp, 2007
discussion
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Internationalization (I18N) and localization (L10N)
it is desirable to use complete phrasesin order to give a better translation
discussion
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Internationalization (I18N) and localization (L10N)
Web guidelines & resources:
www.w3.org/International/
www.globalbydesign.com/
discussion
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
discussion
avoid absolute width (texts in other languages could have different lengths)
avoid pictures (use translatable
text)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
analytical evaluationcontrolled experiment
field studyformative evaluationheuristic evaluationpredictive evaluation
summative evaluationusability laboratory
usability studiesuser testing
Usability evaluation (Rogers, 2007)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Multiple existing heuristicsproposed by Jakob Nielsen (1994)
www.nngroup.com/articles/ten-usability-heuristics/
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Multiple existing heuristicsproposed by Bruce Tognazzini (revised in 2014)
http://asktog.com/atc/principles-of-interaction-design/
AestheticsAnticipationAutonomyColorConsistencyDefaults
DiscoverabilityEfficiency of the UserExplorable InterfacesFitts’ LawHuman-Interface ObjectsLatency ReductionLearnability
MetaphorsProtect Users’ WorkReadabilitySimplicityState: Track itVisible Interfaces
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Multiple existing heuristicscontext: mobile computing (E. Bertini et al., 2006)
1. Visibility of system status & device findability2. Match between system and the real world3. Consistency and mapping4. Good ergonomics & minimalist design5. Ease of input, screen readability and glancability6. Flexibility, efficiency of use and personalization7. Aesthetic, privacy and social conventions8. Realistic error management
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
The evaluator could not substitute the real users
an UI has usability problemsonly if its final common users have these problems
code inspection vs. code testing
Usability evaluation (Rogers, 2007)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
User testing
UI quality evaluation could be performed by users
user testing
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
User testing
Aspects of interest (J. Dumas & J. Fox, 2008)
the focus is on usability
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
User testing
Aspects of interest (J. Dumas & J. Fox, 2008)
the participants are (potential) end users
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
User testing
Aspects of interest (J. Dumas & J. Fox, 2008)
there is a real product/service to be evaluated
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
User testing
Aspects of interest (J. Dumas & J. Fox, 2008)
the participants perform tasks,usually while thinking aloud
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
User testing
Aspects of interest (J. Dumas & J. Fox, 2008)
the data are recorded and further analyzed
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
User testing
a usability test plan HTML5 templatehttp://profs.info.uaic.ro/~stefan.negru/usability/
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
User testing
Considered metrics
effectiveness, efficiency & satisfaction
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
User testing
Considered metrics
effectiveness, efficiency & satisfaction
+
fun, challenge & stimulation
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
User testing: planning (Adaptive Path, 2001)
t –2 weeks Determine test audience, start recruiting immediately
t –2 weeks Determine feature set to be tested
t –1 week Write first version of guide, discuss with team, check on recruiting
t –3 days Write second version of guide, recruiting should be completed
t –2 days Complete guide, schedule practice test, set up and check equipment
t –1 day Do practice test in the morning, adjust guide/tasks as appropriate
t Test (usually 1-2 days, depending on scheduling)
t +1 day Discuss with observers, collect copies of all notes
t +3 days Watch all video recordings, take notes
t +1 week Combine notes, write analysis
t +1 week Present to team, discuss and note directions for further research
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
User testing
Methods:
formative evaluation
field study
controlled experiment
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
User testing
Formative evaluation
finding problems for next iteration of the design project
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
User testing
Formative evaluation
prototype/implementation is evaluatedwithin a controlled environment (lab),
with focus on specific tasks
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
User testing
Formative evaluation
users, facilitators, observers offers qualitative data (usability issues)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
User testing
Field study
tries to find problems with respect to a given context
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
User testing
Field study
evaluates the (preliminary) UI in a concrete context,with focus on real tasks
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
User testing
Field study
evaluates the (preliminary) UI in a concrete context,with focus on real tasks
offer qualitative annotations
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
User testing
Controlled experiment
to test a hypothesis
e.g., interface X is easier to be used than interface Y
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
User testing
Controlled experiment
could be used to evaluate a preliminary UI,in lab rigorous conditions, with focus on specific tasks
has one or more conditions (independent variables)and measures (dependent variables)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
User testing
Controlled experiment
gives quantitative information:time of reaction, error rate, user satisfaction,…
Ron Kohavi et al., “Practical Guide to Controlled Experiments on the Web”, KDD 2007, ACM Press, 2007
http://exp-platform.com/Documents/GuideControlledExperiments.pdf
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
User testing
Advices + aspects of interest (Lukas Mathis, 2011)
do not influence the testeravoid stressful situationsethics of conducting tests
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
User testing
A/B testing
comparing 2 versions of an UI element or an entire Web page
for a length of time to see which performs better
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
User testing
A/B testing
comparing 2 versions of an UI element or an entire Web page
for a length of time to see which performs better
performance criterion = conversion rate (from visitors to goal achievers)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
User testing
L. Swanson, “A Primer on A/B Testing”, A List Apart, 2011www.alistapart.com/articles/a-primer-on-a-b-testing/
see also http://elem.com/~btilly/effective-ab-testing/
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
User testing
A/B testing
multivariate testing – different versions of individual parts of the design are tested at the same time
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
User testing
A/B testing
several tools:Convert
Genetify – https://github.com/gregdingle/genetify/wiki
OptimizelyUnbounce
Vanity – http://vanity.labnotes.org/
Wingify Visual Website Optimizer
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
User testing
real case studies:http://visualwebsiteoptimizer.com/
case-studies.php
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
User testing
Pilot study
a trial run of an experimental procedure,not expected to produce valid research data
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
User testing
Remote testing
by using a screen-sharing software
for details, read N. Bolt, “Quick and Dirty Remote User Testing”, A List Apart, 2010:
http://alistapart.com/article/quick-and-dirty-remote-user-testing
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
User testing
Remote testing
the tester’s environment cannot be typically controlled
also, the tester might get distracted during the test
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Predictive evaluation
Having a correct model of the interactionbetween users and computers, we can predictthe usability of a system, without the need of
designing and/or testing a concrete UI
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Predictive evaluation
User testing could only relieve certain problems, but can not explaining them
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Predictive evaluation
Classical models:
GOMS (Goals, Operators, Methods, Selection rules)CMP-GOMS (Cognitive-Motor-Perceptual)
probabilistic – e.g., Bayes networks
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Predictive evaluation
task graph used by CMP-GOMS model
the critical path is the path of taskshaving the longest time of execution
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Predictive evaluation
Directions of research
objectives beyond productivityhedonomics (Hancock et al., 2005)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Predictive evaluation
Directions of research
RITE – Rapid Iterative Test and Evaluation
used by Microsoft (M. Medlock et al., 2002, 2005)
focused on fixing usability problemsrather than finding them
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
For further information, study:
G. Cockton, Usability Evaluation, “The Encyclopedia of Human-Computer Interaction” (2nd Edition), 2014
www.interaction-design.org/encyclopedia/usability_evaluation.html
C. Bank & J. Cao, The Guide to Usability Testing, UXPin, 2014
http://www.uxpin.com/guide-to-usability-testing.html
Usability evaluation
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Major differences between software engineering and the effective UI development
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Reality
Target-applications & domains of interest
personal productivity, business, entertainment, etc.
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Reality
Notations and engineering tools
software (formal) modeling
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Reality
Multiple interaction paradigms
textual, graphical, multimedia, natural, 3D,…
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
RealityEvolution of the interactive apps: context of use = (U, P, E)
Time
Platform
User(s)
Environment
Language
Jean Vanderdonckt, 2006
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Reality
UI #12UI #11UI #10UI #9Application 3
UI #8UI #7UI #6UI #5Application 2
UI #4UI #3UI #2UI #1Application 1
Platform #4Platform #3Platform #2Platform #1
Multiple models to be considered (Abrams et al., 2001)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Reality
UI #12UI #11UI #10UI #9Application 3
UI #8UI #7UI #6UI #5Application 2
UI #4UI #3UI #2UI #1Application 1
Platform #4Platform #3Platform #2Platform #1
Application 1
Application 2
Application 3
UI model #1
UI model #2
UI model #3
Platform #1
Platform #2
Platform #3
Platform #4
Platform model #1
Platform model #2
Platform model #3
Platform model #4
Multiple models to be considered (Abrams et al., 2001)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Model-based UI design
MDA (Model-Driven Architecture)
www.omg.org/mda/
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Model-based UI design
Model(s) facilitate(s) an abstract viewof the interaction
separation of concerns, ability of correlation
parsability, editability
if possible, human readability
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Model-based UI design
Models
explicitly capture knowledge about UI and interactive applications with appropriate abstractions
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Model-based UI design
Method
structures the definition and use of underlying modelsin a stage-wise approach
example: agile usability (Scott Ambler, 2008)www.agilemodeling.com/essays/agileUsability.htm
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Model-based UI design
Supporting tools
support the use of the method by providing toolsfor models and their related operations
ideally, one model should be supported byat least one tool
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Proiectarea bazată pe modele
Models used in the processes of UI design(P. Forbrig et al., 2004)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Proiectarea bazată pe modele
Using notations to model tasks to be performed by users(L. Marucci et al., 2004)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Calitate
Process Reference Frameworkfor the development of plastic user interfaces
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Environment T
Final userInterface T
Concrete userInterface T
Task and Domain T
Abstract userInterface T
T = Target context of use
Concrete userInterface S
Final userInterface S
Task and Domain S
Abstract userInterface S
S = Source context of use
Reification
Abstraction
Reflection
Translation
User S Platform S Environment S Platform TUser T
Jean Vanderdonckt, 2006
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Task &
Concepts
Abstract
UI
Concrete
UI
Final UI Reformating
TranscodingRecoding
Respecification
Retasking
Restructuration
Program
understanding
Redocumentation
Reverse Engineering
Design recovery
Reengineering
Revamping
Bouillon (2006)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Model-based UI design
CADUI – Computer-Aided Design of User Interface
(formal) descriptions of interactive systems,in terms of existing meta-models,
used to design and deploy multiple user interfaces
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Model-based UI design
Interac-tive
System
Model of the IS
Model of the IS’
Interac-tive
System’
Transfor-mation
Propertychecking
Jean Vanderdonckt
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Model-based UI design
At the abstract level, the specification of the interactive system is given
by CIM (Computation-Independent Model)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Model-based UI design
At the abstract level, the specification of the interactive system is given
by CIM (Computation-Independent Model)
mission statement, function reference tree, use casesinteraction requirements, concurrent tasks trees
Requirements Model
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Model-based UI design
At the abstract level, the specification of the interactive system is given
by CIM (Computation-Independent Model)
see also “Requirements Engineering from an HCI Perspective” (A. Sutcliffe, 2014)http://www.interaction-design.org/encyclopedia/requirements_engineering.html
Requirements Model
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Model-based UI design
The platform independent description is based on PIM (Platform-Independent Model)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Model-based UI design
The platform independent description is based on PIM (Platform-Independent Model)
object modeldynamic model
functional modelpresentation model
Conceptual Model
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Model-based UI design
The development focused on a specific platform is based on PSM (Platform-Specific Model)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Model-based UI design
The development focused on a specific platform is based on PSM (Platform-Specific Model)
uses software tools of transformation (compilation)based on an application model
Compilation Model
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Model-based UI design
The concrete implementation is usingCM (Code Model)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Model-based UI design
The concrete implementation is usingCM (Code Model)
concerns creation/generation of the source-code:interface tier
application tierpersistence tier
integration
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Model-based UI design
Task and
Domain
Abstract
User InterfaceConcrete
User Interface
Final
User Interface
Abstract
User Interface
T1 RenderingT2
T3
Task and
Domain
Abstract
User InterfaceConcrete
User Interface
Final
User Interface
Abstract
User Interface
T1 RenderingT2
T3
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Model-based UI design
Task and
Domain
Abstract
User Interface
Concrete
User Interface 1 (2-D Desktop)
Final
User Interface
T1
Rendering
T2
T3 Concrete
User Interface 2(2-D small display)
Concrete
User Interface 3 (auditory)
Final
User Interface
Final
User Interface
Final
User Interface
Concrete
User Interface
Task and
Domain
Abstract
User Interface
T4
Rendering
Rendering
Rendering
T5
T6 T7
Task and
Domain
Abstract
User Interface
Concrete
User Interface 1 (2-D Desktop)
Final
User Interface
T1
Rendering
T2
T3 Concrete
User Interface 2(2-D small display)
Concrete
User Interface 3 (auditory)
Final
User Interface
Final
User Interface
Final
User Interface
Concrete
User Interface
Task and
Domain
Abstract
User Interface
T4
Rendering
Rendering
Rendering
T5
T6 T7
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Model-based UI design
(Meta)languages for describing UI
UIML – User-Interface Modeling LanguageUsiXML – USer Interface eXtensible Markup Language
XAML – eXtensible Application Markup LanguageXUL – eXtensible User-interface Language
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Model to Model
PlatformIndependentModel (PIM)
PlatformSpecific
Model (PSM)Model to Code Source code
MDA (Model-Driven Architecture)
UsiXML
ComputingIndependentModel (CIM)
Model to Model
UsiXML model:Abstract user
interface
UsiXML model:Concrete user
interfaceRendering Final user
interface
UsiXMLmodels: task,
domain
Graphtransformations
Graphtransformations
Jean Vanderdonckt, 2006
Model-based UI design
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
designing the abstract UI of a computer gameuser task modelling via a specific tool
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Support for multiple displays(Grolaux & Vanderdonckt, 2005)
detachmigrateplastify
case study
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
case study
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Support for multiple displays(Grolaux & Vanderdonckt, 2005)
detachmigrateplastify
for migration, rules and/or design patterns could be used
case study
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Support for multiple displays(Grolaux & Vanderdonckt, 2005)
the use of rules – example:
x Ts : x = input and (x.type = “text” or x.type = “password” or x.type = NULL)
AddNode (“textComponent”, idText) where idText = NodeValue (Tt)
case study
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
case study
substitution removal moving
examples of actions that could be performed for migration and/or creating PUI – revisit responsive Web design
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco133 Polytechnic University of Valencia – Doctoral Course, Valencia, November 2006
Target Applications, Domains
Notations &Engineering Tools
User Interface Interaction Techniques
Invisible UI
No more programming: only models
All Applications 2020
No Interaction TechniqueAutomated, batch systems Nothing
Character UIsBusiness applications Screen definitions
Graphical UserInterfaces
Information systems Entity-relationshipAttribute model
State-transition diagrams
Multi-platform User Interfaces
Web, desktop, mobile apps
Task model, context model, UML,…
Virtual Reality User Interfaces3D Applications Scene model
Mixed RealityUser Interfaces
Command &control systems,
games
World models
Tangible UIs
Embodied UIsPhysical modelsEmbedded systems
Palan
qu
e, 200
2 & V
and
erdo
nck
t , 200
6
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
“Conclusion”
interactivity in the context of software
engineeringUI quality,
testing, models http
://littlebig
details.co
m/