HCI 2014 (7 of 10): HCI Engineering. UI Evaluation. Models
-
Upload
sabin-buraga -
Category
Design
-
view
116 -
download
0
description
Transcript of HCI 2014 (7 of 10): HCI Engineering. UI Evaluation. Models
![Page 1: HCI 2014 (7 of 10): HCI Engineering. UI Evaluation. Models](https://reader030.fdocuments.net/reader030/viewer/2022020207/54c715ee4a795928408b4710/html5/thumbnails/1.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
model-based user interactionin the context of software engineering
Human-Computer Interaction
![Page 2: HCI 2014 (7 of 10): HCI Engineering. UI Evaluation. Models](https://reader030.fdocuments.net/reader030/viewer/2022020207/54c715ee4a795928408b4710/html5/thumbnails/2.jpg)
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
![Page 3: HCI 2014 (7 of 10): HCI Engineering. UI Evaluation. Models](https://reader030.fdocuments.net/reader030/viewer/2022020207/54c715ee4a795928408b4710/html5/thumbnails/3.jpg)
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?
![Page 4: HCI 2014 (7 of 10): HCI Engineering. UI Evaluation. Models](https://reader030.fdocuments.net/reader030/viewer/2022020207/54c715ee4a795928408b4710/html5/thumbnails/4.jpg)
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
![Page 5: HCI 2014 (7 of 10): HCI Engineering. UI Evaluation. Models](https://reader030.fdocuments.net/reader030/viewer/2022020207/54c715ee4a795928408b4710/html5/thumbnails/5.jpg)
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
![Page 6: HCI 2014 (7 of 10): HCI Engineering. UI Evaluation. Models](https://reader030.fdocuments.net/reader030/viewer/2022020207/54c715ee4a795928408b4710/html5/thumbnails/6.jpg)
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
![Page 7: HCI 2014 (7 of 10): HCI Engineering. UI Evaluation. Models](https://reader030.fdocuments.net/reader030/viewer/2022020207/54c715ee4a795928408b4710/html5/thumbnails/7.jpg)
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
![Page 8: HCI 2014 (7 of 10): HCI Engineering. UI Evaluation. Models](https://reader030.fdocuments.net/reader030/viewer/2022020207/54c715ee4a795928408b4710/html5/thumbnails/8.jpg)
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
![Page 9: HCI 2014 (7 of 10): HCI Engineering. UI Evaluation. Models](https://reader030.fdocuments.net/reader030/viewer/2022020207/54c715ee4a795928408b4710/html5/thumbnails/9.jpg)
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 (undo, redo)
![Page 10: HCI 2014 (7 of 10): HCI Engineering. UI Evaluation. Models](https://reader030.fdocuments.net/reader030/viewer/2022020207/54c715ee4a795928408b4710/html5/thumbnails/10.jpg)
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
![Page 11: HCI 2014 (7 of 10): HCI Engineering. UI Evaluation. Models](https://reader030.fdocuments.net/reader030/viewer/2022020207/54c715ee4a795928408b4710/html5/thumbnails/11.jpg)
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
![Page 12: HCI 2014 (7 of 10): HCI Engineering. UI Evaluation. Models](https://reader030.fdocuments.net/reader030/viewer/2022020207/54c715ee4a795928408b4710/html5/thumbnails/12.jpg)
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
![Page 13: HCI 2014 (7 of 10): HCI Engineering. UI Evaluation. Models](https://reader030.fdocuments.net/reader030/viewer/2022020207/54c715ee4a795928408b4710/html5/thumbnails/13.jpg)
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
![Page 14: HCI 2014 (7 of 10): HCI Engineering. UI Evaluation. Models](https://reader030.fdocuments.net/reader030/viewer/2022020207/54c715ee4a795928408b4710/html5/thumbnails/14.jpg)
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
![Page 15: HCI 2014 (7 of 10): HCI Engineering. UI Evaluation. Models](https://reader030.fdocuments.net/reader030/viewer/2022020207/54c715ee4a795928408b4710/html5/thumbnails/15.jpg)
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
![Page 16: HCI 2014 (7 of 10): HCI Engineering. UI Evaluation. Models](https://reader030.fdocuments.net/reader030/viewer/2022020207/54c715ee4a795928408b4710/html5/thumbnails/16.jpg)
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
![Page 17: HCI 2014 (7 of 10): HCI Engineering. UI Evaluation. Models](https://reader030.fdocuments.net/reader030/viewer/2022020207/54c715ee4a795928408b4710/html5/thumbnails/17.jpg)
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)
![Page 18: HCI 2014 (7 of 10): HCI Engineering. UI Evaluation. Models](https://reader030.fdocuments.net/reader030/viewer/2022020207/54c715ee4a795928408b4710/html5/thumbnails/18.jpg)
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)
![Page 19: HCI 2014 (7 of 10): HCI Engineering. UI Evaluation. Models](https://reader030.fdocuments.net/reader030/viewer/2022020207/54c715ee4a795928408b4710/html5/thumbnails/19.jpg)
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
![Page 20: HCI 2014 (7 of 10): HCI Engineering. UI Evaluation. Models](https://reader030.fdocuments.net/reader030/viewer/2022020207/54c715ee4a795928408b4710/html5/thumbnails/20.jpg)
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)
![Page 21: HCI 2014 (7 of 10): HCI Engineering. UI Evaluation. Models](https://reader030.fdocuments.net/reader030/viewer/2022020207/54c715ee4a795928408b4710/html5/thumbnails/21.jpg)
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
![Page 22: HCI 2014 (7 of 10): HCI Engineering. UI Evaluation. Models](https://reader030.fdocuments.net/reader030/viewer/2022020207/54c715ee4a795928408b4710/html5/thumbnails/22.jpg)
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
![Page 23: HCI 2014 (7 of 10): HCI Engineering. UI Evaluation. Models](https://reader030.fdocuments.net/reader030/viewer/2022020207/54c715ee4a795928408b4710/html5/thumbnails/23.jpg)
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
![Page 24: HCI 2014 (7 of 10): HCI Engineering. UI Evaluation. Models](https://reader030.fdocuments.net/reader030/viewer/2022020207/54c715ee4a795928408b4710/html5/thumbnails/24.jpg)
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
![Page 25: HCI 2014 (7 of 10): HCI Engineering. UI Evaluation. Models](https://reader030.fdocuments.net/reader030/viewer/2022020207/54c715ee4a795928408b4710/html5/thumbnails/25.jpg)
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.
![Page 26: HCI 2014 (7 of 10): HCI Engineering. UI Evaluation. Models](https://reader030.fdocuments.net/reader030/viewer/2022020207/54c715ee4a795928408b4710/html5/thumbnails/26.jpg)
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
![Page 27: HCI 2014 (7 of 10): HCI Engineering. UI Evaluation. Models](https://reader030.fdocuments.net/reader030/viewer/2022020207/54c715ee4a795928408b4710/html5/thumbnails/27.jpg)
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
![Page 28: HCI 2014 (7 of 10): HCI Engineering. UI Evaluation. Models](https://reader030.fdocuments.net/reader030/viewer/2022020207/54c715ee4a795928408b4710/html5/thumbnails/28.jpg)
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
![Page 29: HCI 2014 (7 of 10): HCI Engineering. UI Evaluation. Models](https://reader030.fdocuments.net/reader030/viewer/2022020207/54c715ee4a795928408b4710/html5/thumbnails/29.jpg)
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
![Page 30: HCI 2014 (7 of 10): HCI Engineering. UI Evaluation. Models](https://reader030.fdocuments.net/reader030/viewer/2022020207/54c715ee4a795928408b4710/html5/thumbnails/30.jpg)
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
![Page 31: HCI 2014 (7 of 10): HCI Engineering. UI Evaluation. Models](https://reader030.fdocuments.net/reader030/viewer/2022020207/54c715ee4a795928408b4710/html5/thumbnails/31.jpg)
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
![Page 32: HCI 2014 (7 of 10): HCI Engineering. UI Evaluation. Models](https://reader030.fdocuments.net/reader030/viewer/2022020207/54c715ee4a795928408b4710/html5/thumbnails/32.jpg)
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
![Page 33: HCI 2014 (7 of 10): HCI Engineering. UI Evaluation. Models](https://reader030.fdocuments.net/reader030/viewer/2022020207/54c715ee4a795928408b4710/html5/thumbnails/33.jpg)
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
![Page 34: HCI 2014 (7 of 10): HCI Engineering. UI Evaluation. Models](https://reader030.fdocuments.net/reader030/viewer/2022020207/54c715ee4a795928408b4710/html5/thumbnails/34.jpg)
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
![Page 35: HCI 2014 (7 of 10): HCI Engineering. UI Evaluation. Models](https://reader030.fdocuments.net/reader030/viewer/2022020207/54c715ee4a795928408b4710/html5/thumbnails/35.jpg)
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
![Page 36: HCI 2014 (7 of 10): HCI Engineering. UI Evaluation. Models](https://reader030.fdocuments.net/reader030/viewer/2022020207/54c715ee4a795928408b4710/html5/thumbnails/36.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Calitate
D. Thevenin, J. Coutaz & G. Calvary, 2004
![Page 37: HCI 2014 (7 of 10): HCI Engineering. UI Evaluation. Models](https://reader030.fdocuments.net/reader030/viewer/2022020207/54c715ee4a795928408b4710/html5/thumbnails/37.jpg)
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
![Page 38: HCI 2014 (7 of 10): HCI Engineering. UI Evaluation. Models](https://reader030.fdocuments.net/reader030/viewer/2022020207/54c715ee4a795928408b4710/html5/thumbnails/38.jpg)
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
![Page 39: HCI 2014 (7 of 10): HCI Engineering. UI Evaluation. Models](https://reader030.fdocuments.net/reader030/viewer/2022020207/54c715ee4a795928408b4710/html5/thumbnails/39.jpg)
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
![Page 40: HCI 2014 (7 of 10): HCI Engineering. UI Evaluation. Models](https://reader030.fdocuments.net/reader030/viewer/2022020207/54c715ee4a795928408b4710/html5/thumbnails/40.jpg)
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
![Page 41: HCI 2014 (7 of 10): HCI Engineering. UI Evaluation. Models](https://reader030.fdocuments.net/reader030/viewer/2022020207/54c715ee4a795928408b4710/html5/thumbnails/41.jpg)
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
![Page 42: HCI 2014 (7 of 10): HCI Engineering. UI Evaluation. Models](https://reader030.fdocuments.net/reader030/viewer/2022020207/54c715ee4a795928408b4710/html5/thumbnails/42.jpg)
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
![Page 43: HCI 2014 (7 of 10): HCI Engineering. UI Evaluation. Models](https://reader030.fdocuments.net/reader030/viewer/2022020207/54c715ee4a795928408b4710/html5/thumbnails/43.jpg)
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
![Page 44: HCI 2014 (7 of 10): HCI Engineering. UI Evaluation. Models](https://reader030.fdocuments.net/reader030/viewer/2022020207/54c715ee4a795928408b4710/html5/thumbnails/44.jpg)
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
![Page 45: HCI 2014 (7 of 10): HCI Engineering. UI Evaluation. Models](https://reader030.fdocuments.net/reader030/viewer/2022020207/54c715ee4a795928408b4710/html5/thumbnails/45.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Accessibility
general strategies:
using standardized formats
discussion
![Page 46: HCI 2014 (7 of 10): HCI Engineering. UI Evaluation. Models](https://reader030.fdocuments.net/reader030/viewer/2022020207/54c715ee4a795928408b4710/html5/thumbnails/46.jpg)
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
![Page 47: HCI 2014 (7 of 10): HCI Engineering. UI Evaluation. Models](https://reader030.fdocuments.net/reader030/viewer/2022020207/54c715ee4a795928408b4710/html5/thumbnails/47.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
discussion
WAVE (Web Accessibility Evaluation Tool)
![Page 48: HCI 2014 (7 of 10): HCI Engineering. UI Evaluation. Models](https://reader030.fdocuments.net/reader030/viewer/2022020207/54c715ee4a795928408b4710/html5/thumbnails/48.jpg)
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
![Page 49: HCI 2014 (7 of 10): HCI Engineering. UI Evaluation. Models](https://reader030.fdocuments.net/reader030/viewer/2022020207/54c715ee4a795928408b4710/html5/thumbnails/49.jpg)
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
![Page 50: HCI 2014 (7 of 10): HCI Engineering. UI Evaluation. Models](https://reader030.fdocuments.net/reader030/viewer/2022020207/54c715ee4a795928408b4710/html5/thumbnails/50.jpg)
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
![Page 51: HCI 2014 (7 of 10): HCI Engineering. UI Evaluation. Models](https://reader030.fdocuments.net/reader030/viewer/2022020207/54c715ee4a795928408b4710/html5/thumbnails/51.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Internationalization (I18N) and localization (L10N)
Web guidelines:www.w3.org/International/
discussion
![Page 52: HCI 2014 (7 of 10): HCI Engineering. UI Evaluation. Models](https://reader030.fdocuments.net/reader030/viewer/2022020207/54c715ee4a795928408b4710/html5/thumbnails/52.jpg)
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)
![Page 53: HCI 2014 (7 of 10): HCI Engineering. UI Evaluation. Models](https://reader030.fdocuments.net/reader030/viewer/2022020207/54c715ee4a795928408b4710/html5/thumbnails/53.jpg)
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)
![Page 54: HCI 2014 (7 of 10): HCI Engineering. UI Evaluation. Models](https://reader030.fdocuments.net/reader030/viewer/2022020207/54c715ee4a795928408b4710/html5/thumbnails/54.jpg)
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/
![Page 55: HCI 2014 (7 of 10): HCI Engineering. UI Evaluation. Models](https://reader030.fdocuments.net/reader030/viewer/2022020207/54c715ee4a795928408b4710/html5/thumbnails/55.jpg)
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’s LawHuman-Interface ObjectsLatency ReductionLearnability
MetaphorsProtect Users’ WorkReadabilitySimplicityState: Track itVisible Interfaces
![Page 56: HCI 2014 (7 of 10): HCI Engineering. UI Evaluation. Models](https://reader030.fdocuments.net/reader030/viewer/2022020207/54c715ee4a795928408b4710/html5/thumbnails/56.jpg)
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
![Page 57: HCI 2014 (7 of 10): HCI Engineering. UI Evaluation. Models](https://reader030.fdocuments.net/reader030/viewer/2022020207/54c715ee4a795928408b4710/html5/thumbnails/57.jpg)
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)
![Page 58: HCI 2014 (7 of 10): HCI Engineering. UI Evaluation. Models](https://reader030.fdocuments.net/reader030/viewer/2022020207/54c715ee4a795928408b4710/html5/thumbnails/58.jpg)
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
![Page 59: HCI 2014 (7 of 10): HCI Engineering. UI Evaluation. Models](https://reader030.fdocuments.net/reader030/viewer/2022020207/54c715ee4a795928408b4710/html5/thumbnails/59.jpg)
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
![Page 60: HCI 2014 (7 of 10): HCI Engineering. UI Evaluation. Models](https://reader030.fdocuments.net/reader030/viewer/2022020207/54c715ee4a795928408b4710/html5/thumbnails/60.jpg)
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
![Page 61: HCI 2014 (7 of 10): HCI Engineering. UI Evaluation. Models](https://reader030.fdocuments.net/reader030/viewer/2022020207/54c715ee4a795928408b4710/html5/thumbnails/61.jpg)
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
![Page 62: HCI 2014 (7 of 10): HCI Engineering. UI Evaluation. Models](https://reader030.fdocuments.net/reader030/viewer/2022020207/54c715ee4a795928408b4710/html5/thumbnails/62.jpg)
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
![Page 63: HCI 2014 (7 of 10): HCI Engineering. UI Evaluation. Models](https://reader030.fdocuments.net/reader030/viewer/2022020207/54c715ee4a795928408b4710/html5/thumbnails/63.jpg)
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
![Page 64: HCI 2014 (7 of 10): HCI Engineering. UI Evaluation. Models](https://reader030.fdocuments.net/reader030/viewer/2022020207/54c715ee4a795928408b4710/html5/thumbnails/64.jpg)
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/
![Page 65: HCI 2014 (7 of 10): HCI Engineering. UI Evaluation. Models](https://reader030.fdocuments.net/reader030/viewer/2022020207/54c715ee4a795928408b4710/html5/thumbnails/65.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
User testing
Considered metrics
effectiveness, efficiency & satisfaction
![Page 66: HCI 2014 (7 of 10): HCI Engineering. UI Evaluation. Models](https://reader030.fdocuments.net/reader030/viewer/2022020207/54c715ee4a795928408b4710/html5/thumbnails/66.jpg)
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
![Page 67: HCI 2014 (7 of 10): HCI Engineering. UI Evaluation. Models](https://reader030.fdocuments.net/reader030/viewer/2022020207/54c715ee4a795928408b4710/html5/thumbnails/67.jpg)
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
![Page 68: HCI 2014 (7 of 10): HCI Engineering. UI Evaluation. Models](https://reader030.fdocuments.net/reader030/viewer/2022020207/54c715ee4a795928408b4710/html5/thumbnails/68.jpg)
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
![Page 69: HCI 2014 (7 of 10): HCI Engineering. UI Evaluation. Models](https://reader030.fdocuments.net/reader030/viewer/2022020207/54c715ee4a795928408b4710/html5/thumbnails/69.jpg)
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
![Page 70: HCI 2014 (7 of 10): HCI Engineering. UI Evaluation. Models](https://reader030.fdocuments.net/reader030/viewer/2022020207/54c715ee4a795928408b4710/html5/thumbnails/70.jpg)
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
![Page 71: HCI 2014 (7 of 10): HCI Engineering. UI Evaluation. Models](https://reader030.fdocuments.net/reader030/viewer/2022020207/54c715ee4a795928408b4710/html5/thumbnails/71.jpg)
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)
![Page 72: HCI 2014 (7 of 10): HCI Engineering. UI Evaluation. Models](https://reader030.fdocuments.net/reader030/viewer/2022020207/54c715ee4a795928408b4710/html5/thumbnails/72.jpg)
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
![Page 73: HCI 2014 (7 of 10): HCI Engineering. UI Evaluation. Models](https://reader030.fdocuments.net/reader030/viewer/2022020207/54c715ee4a795928408b4710/html5/thumbnails/73.jpg)
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
![Page 74: HCI 2014 (7 of 10): HCI Engineering. UI Evaluation. Models](https://reader030.fdocuments.net/reader030/viewer/2022020207/54c715ee4a795928408b4710/html5/thumbnails/74.jpg)
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
![Page 75: HCI 2014 (7 of 10): HCI Engineering. UI Evaluation. Models](https://reader030.fdocuments.net/reader030/viewer/2022020207/54c715ee4a795928408b4710/html5/thumbnails/75.jpg)
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
![Page 76: HCI 2014 (7 of 10): HCI Engineering. UI Evaluation. Models](https://reader030.fdocuments.net/reader030/viewer/2022020207/54c715ee4a795928408b4710/html5/thumbnails/76.jpg)
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)
![Page 77: HCI 2014 (7 of 10): HCI Engineering. UI Evaluation. Models](https://reader030.fdocuments.net/reader030/viewer/2022020207/54c715ee4a795928408b4710/html5/thumbnails/77.jpg)
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
![Page 78: HCI 2014 (7 of 10): HCI Engineering. UI Evaluation. Models](https://reader030.fdocuments.net/reader030/viewer/2022020207/54c715ee4a795928408b4710/html5/thumbnails/78.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
User testing
Aspects of interest (Lukas Mathis, 2011)
don’t influence the testeravoid stressful situationsethics of conducting tests
![Page 79: HCI 2014 (7 of 10): HCI Engineering. UI Evaluation. Models](https://reader030.fdocuments.net/reader030/viewer/2022020207/54c715ee4a795928408b4710/html5/thumbnails/79.jpg)
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
![Page 80: HCI 2014 (7 of 10): HCI Engineering. UI Evaluation. Models](https://reader030.fdocuments.net/reader030/viewer/2022020207/54c715ee4a795928408b4710/html5/thumbnails/80.jpg)
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)
![Page 81: HCI 2014 (7 of 10): HCI Engineering. UI Evaluation. Models](https://reader030.fdocuments.net/reader030/viewer/2022020207/54c715ee4a795928408b4710/html5/thumbnails/81.jpg)
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/
![Page 82: HCI 2014 (7 of 10): HCI Engineering. UI Evaluation. Models](https://reader030.fdocuments.net/reader030/viewer/2022020207/54c715ee4a795928408b4710/html5/thumbnails/82.jpg)
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
![Page 83: HCI 2014 (7 of 10): HCI Engineering. UI Evaluation. Models](https://reader030.fdocuments.net/reader030/viewer/2022020207/54c715ee4a795928408b4710/html5/thumbnails/83.jpg)
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
![Page 84: HCI 2014 (7 of 10): HCI Engineering. UI Evaluation. Models](https://reader030.fdocuments.net/reader030/viewer/2022020207/54c715ee4a795928408b4710/html5/thumbnails/84.jpg)
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
![Page 85: HCI 2014 (7 of 10): HCI Engineering. UI Evaluation. Models](https://reader030.fdocuments.net/reader030/viewer/2022020207/54c715ee4a795928408b4710/html5/thumbnails/85.jpg)
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
![Page 86: HCI 2014 (7 of 10): HCI Engineering. UI Evaluation. Models](https://reader030.fdocuments.net/reader030/viewer/2022020207/54c715ee4a795928408b4710/html5/thumbnails/86.jpg)
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
![Page 87: HCI 2014 (7 of 10): HCI Engineering. UI Evaluation. Models](https://reader030.fdocuments.net/reader030/viewer/2022020207/54c715ee4a795928408b4710/html5/thumbnails/87.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
User testing
Remote testing
the tester’s environment can’t be typically controlled
also, the tester might get distracted during the test
![Page 88: HCI 2014 (7 of 10): HCI Engineering. UI Evaluation. Models](https://reader030.fdocuments.net/reader030/viewer/2022020207/54c715ee4a795928408b4710/html5/thumbnails/88.jpg)
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
![Page 89: HCI 2014 (7 of 10): HCI Engineering. UI Evaluation. Models](https://reader030.fdocuments.net/reader030/viewer/2022020207/54c715ee4a795928408b4710/html5/thumbnails/89.jpg)
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
![Page 90: HCI 2014 (7 of 10): HCI Engineering. UI Evaluation. Models](https://reader030.fdocuments.net/reader030/viewer/2022020207/54c715ee4a795928408b4710/html5/thumbnails/90.jpg)
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
![Page 91: HCI 2014 (7 of 10): HCI Engineering. UI Evaluation. Models](https://reader030.fdocuments.net/reader030/viewer/2022020207/54c715ee4a795928408b4710/html5/thumbnails/91.jpg)
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
![Page 92: HCI 2014 (7 of 10): HCI Engineering. UI Evaluation. Models](https://reader030.fdocuments.net/reader030/viewer/2022020207/54c715ee4a795928408b4710/html5/thumbnails/92.jpg)
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)
![Page 93: HCI 2014 (7 of 10): HCI Engineering. UI Evaluation. Models](https://reader030.fdocuments.net/reader030/viewer/2022020207/54c715ee4a795928408b4710/html5/thumbnails/93.jpg)
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
![Page 94: HCI 2014 (7 of 10): HCI Engineering. UI Evaluation. Models](https://reader030.fdocuments.net/reader030/viewer/2022020207/54c715ee4a795928408b4710/html5/thumbnails/94.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
For more details, study Gilbert Cockton, Usability Evaluation, “The Encyclopedia
of Human-Computer Interaction” (2nd Edition), 2014
www.interaction-design.org/encyclopedia/usability_evaluation.html
Usability evaluation
![Page 95: HCI 2014 (7 of 10): HCI Engineering. UI Evaluation. Models](https://reader030.fdocuments.net/reader030/viewer/2022020207/54c715ee4a795928408b4710/html5/thumbnails/95.jpg)
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
![Page 96: HCI 2014 (7 of 10): HCI Engineering. UI Evaluation. Models](https://reader030.fdocuments.net/reader030/viewer/2022020207/54c715ee4a795928408b4710/html5/thumbnails/96.jpg)
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.
![Page 97: HCI 2014 (7 of 10): HCI Engineering. UI Evaluation. Models](https://reader030.fdocuments.net/reader030/viewer/2022020207/54c715ee4a795928408b4710/html5/thumbnails/97.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Reality
Notations and engineering tools
software (formal) modeling
![Page 98: HCI 2014 (7 of 10): HCI Engineering. UI Evaluation. Models](https://reader030.fdocuments.net/reader030/viewer/2022020207/54c715ee4a795928408b4710/html5/thumbnails/98.jpg)
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,…
![Page 99: HCI 2014 (7 of 10): HCI Engineering. UI Evaluation. Models](https://reader030.fdocuments.net/reader030/viewer/2022020207/54c715ee4a795928408b4710/html5/thumbnails/99.jpg)
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
![Page 100: HCI 2014 (7 of 10): HCI Engineering. UI Evaluation. Models](https://reader030.fdocuments.net/reader030/viewer/2022020207/54c715ee4a795928408b4710/html5/thumbnails/100.jpg)
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)
![Page 101: HCI 2014 (7 of 10): HCI Engineering. UI Evaluation. Models](https://reader030.fdocuments.net/reader030/viewer/2022020207/54c715ee4a795928408b4710/html5/thumbnails/101.jpg)
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)
![Page 102: HCI 2014 (7 of 10): HCI Engineering. UI Evaluation. Models](https://reader030.fdocuments.net/reader030/viewer/2022020207/54c715ee4a795928408b4710/html5/thumbnails/102.jpg)
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/
![Page 103: HCI 2014 (7 of 10): HCI Engineering. UI Evaluation. Models](https://reader030.fdocuments.net/reader030/viewer/2022020207/54c715ee4a795928408b4710/html5/thumbnails/103.jpg)
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
![Page 104: HCI 2014 (7 of 10): HCI Engineering. UI Evaluation. Models](https://reader030.fdocuments.net/reader030/viewer/2022020207/54c715ee4a795928408b4710/html5/thumbnails/104.jpg)
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
![Page 105: HCI 2014 (7 of 10): HCI Engineering. UI Evaluation. Models](https://reader030.fdocuments.net/reader030/viewer/2022020207/54c715ee4a795928408b4710/html5/thumbnails/105.jpg)
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
![Page 106: HCI 2014 (7 of 10): HCI Engineering. UI Evaluation. Models](https://reader030.fdocuments.net/reader030/viewer/2022020207/54c715ee4a795928408b4710/html5/thumbnails/106.jpg)
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
![Page 107: HCI 2014 (7 of 10): HCI Engineering. UI Evaluation. Models](https://reader030.fdocuments.net/reader030/viewer/2022020207/54c715ee4a795928408b4710/html5/thumbnails/107.jpg)
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)
![Page 108: HCI 2014 (7 of 10): HCI Engineering. UI Evaluation. Models](https://reader030.fdocuments.net/reader030/viewer/2022020207/54c715ee4a795928408b4710/html5/thumbnails/108.jpg)
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)
![Page 109: HCI 2014 (7 of 10): HCI Engineering. UI Evaluation. Models](https://reader030.fdocuments.net/reader030/viewer/2022020207/54c715ee4a795928408b4710/html5/thumbnails/109.jpg)
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
![Page 110: HCI 2014 (7 of 10): HCI Engineering. UI Evaluation. Models](https://reader030.fdocuments.net/reader030/viewer/2022020207/54c715ee4a795928408b4710/html5/thumbnails/110.jpg)
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
![Page 111: HCI 2014 (7 of 10): HCI Engineering. UI Evaluation. Models](https://reader030.fdocuments.net/reader030/viewer/2022020207/54c715ee4a795928408b4710/html5/thumbnails/111.jpg)
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)
![Page 112: HCI 2014 (7 of 10): HCI Engineering. UI Evaluation. Models](https://reader030.fdocuments.net/reader030/viewer/2022020207/54c715ee4a795928408b4710/html5/thumbnails/112.jpg)
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
![Page 113: HCI 2014 (7 of 10): HCI Engineering. UI Evaluation. Models](https://reader030.fdocuments.net/reader030/viewer/2022020207/54c715ee4a795928408b4710/html5/thumbnails/113.jpg)
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
![Page 114: HCI 2014 (7 of 10): HCI Engineering. UI Evaluation. Models](https://reader030.fdocuments.net/reader030/viewer/2022020207/54c715ee4a795928408b4710/html5/thumbnails/114.jpg)
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)
![Page 115: HCI 2014 (7 of 10): HCI Engineering. UI Evaluation. Models](https://reader030.fdocuments.net/reader030/viewer/2022020207/54c715ee4a795928408b4710/html5/thumbnails/115.jpg)
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)
mision statement, function reference tree, use casesinteraction requirements, concurrent tasks trees
Requirements Model
![Page 116: HCI 2014 (7 of 10): HCI Engineering. UI Evaluation. Models](https://reader030.fdocuments.net/reader030/viewer/2022020207/54c715ee4a795928408b4710/html5/thumbnails/116.jpg)
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, 2013)http://www.interaction-design.org/encyclopedia/requirements_engineering.html
Requirements Model
![Page 117: HCI 2014 (7 of 10): HCI Engineering. UI Evaluation. Models](https://reader030.fdocuments.net/reader030/viewer/2022020207/54c715ee4a795928408b4710/html5/thumbnails/117.jpg)
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)
![Page 118: HCI 2014 (7 of 10): HCI Engineering. UI Evaluation. Models](https://reader030.fdocuments.net/reader030/viewer/2022020207/54c715ee4a795928408b4710/html5/thumbnails/118.jpg)
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
![Page 119: HCI 2014 (7 of 10): HCI Engineering. UI Evaluation. Models](https://reader030.fdocuments.net/reader030/viewer/2022020207/54c715ee4a795928408b4710/html5/thumbnails/119.jpg)
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)
![Page 120: HCI 2014 (7 of 10): HCI Engineering. UI Evaluation. Models](https://reader030.fdocuments.net/reader030/viewer/2022020207/54c715ee4a795928408b4710/html5/thumbnails/120.jpg)
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
Model Compilation
![Page 121: HCI 2014 (7 of 10): HCI Engineering. UI Evaluation. Models](https://reader030.fdocuments.net/reader030/viewer/2022020207/54c715ee4a795928408b4710/html5/thumbnails/121.jpg)
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)
![Page 122: HCI 2014 (7 of 10): HCI Engineering. UI Evaluation. Models](https://reader030.fdocuments.net/reader030/viewer/2022020207/54c715ee4a795928408b4710/html5/thumbnails/122.jpg)
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
![Page 123: HCI 2014 (7 of 10): HCI Engineering. UI Evaluation. Models](https://reader030.fdocuments.net/reader030/viewer/2022020207/54c715ee4a795928408b4710/html5/thumbnails/123.jpg)
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
![Page 124: HCI 2014 (7 of 10): HCI Engineering. UI Evaluation. Models](https://reader030.fdocuments.net/reader030/viewer/2022020207/54c715ee4a795928408b4710/html5/thumbnails/124.jpg)
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
![Page 125: HCI 2014 (7 of 10): HCI Engineering. UI Evaluation. Models](https://reader030.fdocuments.net/reader030/viewer/2022020207/54c715ee4a795928408b4710/html5/thumbnails/125.jpg)
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
![Page 126: HCI 2014 (7 of 10): HCI Engineering. UI Evaluation. Models](https://reader030.fdocuments.net/reader030/viewer/2022020207/54c715ee4a795928408b4710/html5/thumbnails/126.jpg)
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
![Page 127: HCI 2014 (7 of 10): HCI Engineering. UI Evaluation. Models](https://reader030.fdocuments.net/reader030/viewer/2022020207/54c715ee4a795928408b4710/html5/thumbnails/127.jpg)
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
![Page 128: HCI 2014 (7 of 10): HCI Engineering. UI Evaluation. Models](https://reader030.fdocuments.net/reader030/viewer/2022020207/54c715ee4a795928408b4710/html5/thumbnails/128.jpg)
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
![Page 129: HCI 2014 (7 of 10): HCI Engineering. UI Evaluation. Models](https://reader030.fdocuments.net/reader030/viewer/2022020207/54c715ee4a795928408b4710/html5/thumbnails/129.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
case study
![Page 130: HCI 2014 (7 of 10): HCI Engineering. UI Evaluation. Models](https://reader030.fdocuments.net/reader030/viewer/2022020207/54c715ee4a795928408b4710/html5/thumbnails/130.jpg)
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
![Page 131: HCI 2014 (7 of 10): HCI Engineering. UI Evaluation. Models](https://reader030.fdocuments.net/reader030/viewer/2022020207/54c715ee4a795928408b4710/html5/thumbnails/131.jpg)
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
![Page 132: HCI 2014 (7 of 10): HCI Engineering. UI Evaluation. Models](https://reader030.fdocuments.net/reader030/viewer/2022020207/54c715ee4a795928408b4710/html5/thumbnails/132.jpg)
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
![Page 133: HCI 2014 (7 of 10): HCI Engineering. UI Evaluation. Models](https://reader030.fdocuments.net/reader030/viewer/2022020207/54c715ee4a795928408b4710/html5/thumbnails/133.jpg)
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
![Page 134: HCI 2014 (7 of 10): HCI Engineering. UI Evaluation. Models](https://reader030.fdocuments.net/reader030/viewer/2022020207/54c715ee4a795928408b4710/html5/thumbnails/134.jpg)
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
![Page 135: HCI 2014 (7 of 10): HCI Engineering. UI Evaluation. Models](https://reader030.fdocuments.net/reader030/viewer/2022020207/54c715ee4a795928408b4710/html5/thumbnails/135.jpg)
Master on Software Engineering :: Human-Computer Interaction
Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
next lecture:an introduction to data visualization