User Interface Testing
HELENA LIPKOVÁ, PH.D.
Předmět, jeho obsah a atestace
Informace k vedení předmětu
Cíle, způsob komunikace, seminární práce, MATRIX, atestace (s/bez 1 absence), angličtina, cvičení, práce ve skupinách, Moodle, literature
Moduly – obsah kurzu Terminologie
Zdroje
1. Benyon, David. Designing User Experience : A guide to HCI, UX and interaction design, Pearson Education Limited, 2018. ProQuest Ebook Central,
https://ebookcentral.proquest.com/lib/cuni/detail.action?docID=5632313.
2. Weinschenk, Susa. 100 things every designer needs to know about people. Berkeley, 2011.
3. User Experience Professionals Association www.uxpa.org 4. The Interaction Design Association www.ixda.org
The history of HCI UX
The 1st discipline contributing to being human- centred in design is HCI (arose in 1980s) as a subject „concerned with the design, evaluation, and implementation of interactive computing
systems for human use and with the study of major phenomena surrounding them“ ( ACM SIGCHI, 1992 , http://old.sigchi.org/cdg/index.html) HCI drew on cognitive psychology for its
theoretical base and on software engineering for its design approach
CSCW – 90s – computer supported cooperative work
User experience – as a term – Don Norman in 1993
Three legs of product development, MIT 1998)
Recent development
In times gone by, product design was simple; designers built stuff they thought was cool and that they hoped their clients would like.
Two problems with that approach:
◦ far less competition for people's attention back then.
◦ no consideration for the user of the product at all in that approach—the success or failure of a development project was down to luck as much as it was down to the judgement of the design team.
◦ Focusing on UX enables design to focus on the user. It increases the chances of a project's success when it finally comes to market, not least because it doesn’t gamble on the faith of users in taking to a product just because it’s a brand name
CUBI User
Experience Model
Zdroj: https://twitter.com/interacting/status/635799238098747392
Disciplines
contributing to interaction
systems design
UX is not
UI
What is UX?
User experience
is about designing the ideal experience of using a service or product. As such, it can involve all types of products and services—think, for instance, about the design involved in a museum exhibition. However, in the main, the term user experience design is used in relation to websites, web applications and other software applications.
In general, user experience is simply how people feel when they use a product or service.
In most cases, that product will be a website or an application of some form. Every instance of human-object interaction has an associated user experience, but, in general, UX practitioners are interested in the relationship between human users and computers and computer-based products, such as websites, applications and systems.
Zdroj: Interaction Design Foundation, file:///C:/Users/hlipk/Downloads/the-basics-of-ux-design.pdf
UX
UX is concerned with developing high-quality interactive systems, products and services that fit with people and their ways of living.
Computing and communication devices are embedded in all sorts of everyday devices.
UX is often experienced through an ecology of devices (number of different devices) work together to create an environment: computer, mobile, wi-fi, Fitbit…. rather than on a single device.
In case the system does not work – cause of frustration and anger.
UX concerns – range of activities
• Design
• Technologies (interactive systems, products, devices, and components)
• People (stakeholders, users)
• Activities and contexts (goals, feelings, achievements + context in which these
activities take place)
Design
Meaning:
◦ Creative process of specifying something new (page layout, graphics, structure)
Includes:
◦ Artistic design – imagination, innovation, conceptual ideas
◦ Engineering design – technical specification
◦ Design „as craft“ in the middle, combining the two above (D=as a conversation with materiál – Donald Schoen – design commentator)
UX is not just about designing interfaces!
UX tries to create interactive experiences for people – needs to be HUMAN-CENTERED:
-What people do rather than what technology can do -Designing new ways to connect people with people -Involving people in the design process
-Designing for diversity
Why is human centered approach important?
-Return on investment (Williams, 2007 – case studies, reduced customer helplines, fewer training materials, increased throughpu, increased sales etc.)
-Safety
-Ethics (open approach towards users, intellectual property, privacy etc.
-Sustainability
Human-centred design
Source: Carroll, 2002
Machine- and people-centered views
View People are… Machines are
Machine-centred Vague
Disorganized Distractible Emotional Illogical
Precise Orderly
Undistractible Unemotional Logical
People-centred Creative
Compliant
Attentive to change Resourceful
Able to make flexible
decisions based on content
Dumb Rigid
Insensitive to change Unimaginative
Constrained to make consistent decisions*
Zdroj: Norman, 1993, přeprac. Benyon, 2018
Skills of a UX designer
Study and understand the activities, goals and aspirations of people and the contexts within which some technology might prove useful and hence generate requirements for technologies (sometimes called „user research“).
Know the possibilities offered by technologies.
Create technological solutions that fit in with people, the activities they want to undertake and the contexts in which those activities occur (called „ideation“).
Evaluate alternative designs and iterate until solution is arrived at.
The interface
Interface to an interactive system = user interface (UI) = parts of the system with which people come into contact, physically, perceptually and conceptually
◦ Physically – buttons, touch-sensitive screens etc.
◦ Perceptually – what they see or hear on the screen
◦ Conceptually – when trying to find out, what it does and what we should be doing
We have to provide mechanisms
◦ to give people instructions and enter data into the system „input“
◦ to tell people what is happening by offering feedback
◦ to display content – „output“
PACT: a user-
centered framework
for UX design
People People
Activities Activities
Context Context
Technology Technology
P A C T
• Both analysis and design: understainding the current situation, seeing where possible improvements can be made or envisioning future situations.
• Brainstorming, interviews, observations, workshops, personas, scenarios and other techniques
1. People
Physical differences
huge effect on what is accessible, how it is usable and enjoyable. Ergonometry in HCI.
Antropometrics – the measurement of man. The limits and averages of different races, ages, professions etc. Questions: can an average person press button A while holding down button B and C? Is it true for both right- and left- handed people?
Psychological differences
eg. Spatial ability related to finding a way around website – clear directions needed. Language and cultural differences influence the way we interpret things. (eg. Tick and cross in US, in Britain, cross may also be used for acceptance).
◦ MBTI or OCEAN (Openness to experience, Conscientiousness, Extraversion, Agreeableness and
Neuroticism) etc. --- Mental models and their role in understanding the interaction with the system.
The Cultural Iceberg
Source: https://cz.pinterest.com/pin/AdAt-3Uq4tQi-VtGogy- g7xh3INn6PuGcfmRurfuHJXVS0rgOpPNbgQ/
Social differences
Different goals and motivations in different times when using the system People with different experiences, education, learning curve
Watch out for „discretionary users“ – people who often put off if things are difficult to do Heterogenous groups of users are more difficult
Consider various stakeholders!
Attitudinal differences
Importance and ideological stance on issues
Different values, aspirations and ideological stance impact what makes something engaging and enjoyable.
Pride of owning a product
2. Activities
Purpose
◦ Temporal aspects (regular, infrequent, time pressure, peaks, interruptions, response times – generally 100milliseconds for hand-eye coordination activities and one second for a a cause-effect relationship such as clicking a button and something happening)
◦ Cooperation (teamwork, completed alone)
◦ Complexity (well-defined tasks, vague activities eg. browsing ..)
◦ Safety-critical (mistake = injury or accident, even in less serious situations – how to deal with mistakes?)
◦ The nature of the content (data requirements for large inputs – keyboard needed, types of data)
3. Context
Types of context:
1. Organizational (as technology changes communication and power structures, access to information)
2. Social (manuals, trainings, social norms for certain designs eg. Sound in certain environments)
3. Physical circumstances (place – eg. sunshine, noise, wet, dirt, slow internet access etc.)
Coutaz, Calvary 2012 – idea of interface plasticity eg. Heating controller from TV to mobile in lineage with user values
4. Technologies
• HW, SW component, data or information content
• Input: for data input – securely and safely, wearables specifics
• Keyboard, touchscreens, stylus, mouses, trackballs, joysticks, recognition of gestures (Microsoft Kinect), air pressure sensors, acoustic sensors, vibration detectors, infra-red motion detectors, accelerometers, orientation, distance, position, movement, brain- computer interfaces (BCI), speech recognition, QR codes
• Output: displays, speech output, printers incl. 3D, etc
• Communication: bandwith, speed, feedback, wifis, 5G networks, Bluetooth etc.
• Content: sophisticated information retrieval system, relevant information. Pull technology (content is retrieve when required), push technology – eg RSS feeds. Streaming
Psychological principles of
interaction design
(IxD)
„The goal of the interaction design is to create a product that enables the user to achieve their objectives in the best possible way.“
Interaction Design Foundation
Terminolo
gy overlap
Interaction Design – Five dimensions
IxD
Visuals
Time
Space Behaviour
Words
Use of the most appropriate words in the correct moment and time in the process of interaction user-system
Photography, graphical elements, icons, illustrations. (visuals – more impact than words!)
Position of individual elements (text, images). Cluttered layout messy and unintuitive – makes interaction more difficult
Media that changes overtime (animations, video, sound). More user involvement, excitement.
Clear feed-back.
4 major psychological aspects
I. Sensation and perception II. Empathy
III. Motivation
IV. Decision making (logical reasoning)
“
Humans have always been emotional and have always reacted to the artifacts in their world
emotionally.”
Alan Cooper, President of Cooper
I. Sensation and perception
Information from sensory stimulation (feel, touch, vision)
Line between sensation and perception is fuzzy
Sensation Perception
Immediate, relatively unprocessed result of
stimulation of sensory receptors
A user´s ultimate experience of the world and typically involves further processing of sensory input – relative to an individual user
Generally everyone will be
similarly stimulated by the same factors
Seemingly effortless and automatic
* not true in case of
handicapped people Influenced by our past experiences, learnings, expectations
What helps…
Shapes Lightness Color Distance Size
Location Sound
perceptual consistency
Gestalt principles
Gestalt Principles are principles/laws of human perception that describe how humans group similar elements, recognize patterns and simplify complex images when we perceive objects.
https://www.interaction-design.org/literature/topics/gestalt-principles
It helps us organize and group all UI elements in a comprehensible and intuitive way
Gestalt Principles
Similarity
Closure
Common Region
Common Fate Continuation
Proximity
Gestalt Principles
Similarity
Closure
Common Region
Common Fate Continuation
Proximity
Used to group similar items or information
White space – for
separating objects that do not belong together
Gestalt Principles
Similarity
Closure
Common Region
Common Fate Continuation
Proximity
Objects with similar
characteristics are perceived as belonging to a group or patterns
E.g. Color, size, shape, texture, dimension and orientation
… eg certain color of a button – assume a similar function
… use the anomaly – to catch users attention All the bottons – similar size, font, shape and color
Gestalt Principles
Similarity
Closure
Common Region
Common Fate Continuation
Proximity
Mind sees a complete picture or form even if the picture is
incomplete / hidden.
Impact on design:
potential to decrease number of elements to communicate a messege
Gestalt Principles
Similarity
Closure
Common Region
Common Fate Continuation
Proximity
Mind sees a complete picture or form even if the picture is
incomplete / hidden.
Impact on design:
potential to decrease number of elements to communicate a messege
Gestalt Principles
Similarity
Closure
Common Region
Common Fate Continuation
Proximity
Points on a connected line are perceived as a group
Gestalt Principles
Similarity
Closure
Common Region
Common Fate Continuation
Proximity
Users consider elements to belong together if they are sharing an area with a clearly defined boundary
Gestalt Principles
Similarity
Closure
Common Region
Common Fate Continuation
Proximity
… elements – even if
characteristically different they are … if they are
moving in a similar dicrection
N Á SLE DUJÍC Í IN FORMAC E BYLY PŘE V Z AT Y Z KN IHY
1 00 T HIN GS EV E RY DE SIG N ER NE EDS T O KNOW A BOUT P EOPLE SUS A N M. WEINSCHEN K, P H.D ., BERKEL EY, 2 01 1
Zajímavosti: jak lidé vidí
Periferní vidění
Periferní vidění je více zapojeno do procesu rozpoznávání než centrální vidění
Výzkum Dimitri Bayle 2009
Reakce amygdaly na obrázky se strašidelnými motivy 140-190 milisekund centrální vidění
80 milisekund periferní vidění
Neignorovat design periferních oblastí, neumísťovat blikající objekty do periferie.
Vzorce
Lidé identifikují objekty na základě rozpoznávání vzorů
Výzkum David Hubel, Torsten Wiesel 1959
Některé buňky vizuálního kortexu reagují jen na
horizontální, jiné na vertikální linky, jiné na úhly apod.
Pro snazší pochopení, používat jako ikony
jednoduché náčrty obrazců. 3D obrazce mohou proces porozumění zpomalovat.
Zajímavosti: jak lidé vidí
Dřívější zkušenosti
Lidé skenují obrazovky na základě dosavadních zkušeností a souvisejících očekávání.
Lidé si vytvářejí mentální model, kde se nacházejí různé typy informací.
Sledují stejný směr jako při čtení, ale nezačínají v nejvyšším horním rohu! V těchto místech
očekávají méně důležité informace (loga apod.).
Zásadní informace umísťujte do střední části obrazovky, příp. na vyšší 1/3 obrazovky
Přehlédnut
Lidé mohou přehlédnout změny ve svém vizuálním poli
https://www.youtube.com/watch?v=IGQmdoK _ZfY
Specifický typ slepoty
Eye-tracking data – mohou být zavádějící – nemonitoruje periferní vidění.
Případnou změnu obsahu obrazovky zvýraznit – např. blikáním!
Zajímavosti: jak lidé vidí
Barvy
Barvy mají v různých kulturách různé významy.
Barvy se asociují s významy – příp. červená čísla v účetnictví, bílá…
Jen málo barev má stejný význam napříč kulturami např. zlatá (úspěch, luxus, kvalita apod.)
Design by měl odpovídat recipientům informace
Zajímavosti: jak lidé čtou
Počítačová obrazovka vs. papír
Čtení na počítačové obrazovce je těžší než čtení z papíru (generační rozdíly?)
Rozdíl počítač vs. Kindle (elektronický inkoust, záření, stabilita obrazu).
Velké fonty, kontrast popředí a pozadí, rozdělení textu do logických bloků.
Délka řádků
Lidé čtou rychleji delší řádky, ale preferují kratší.
Mary Dyson 2004
100 písmen / řádek – optimální pro obrazovky 45-72 písmen / řádek – preferovaná délka
Jeden sloupek čteme rychleji než tentýž text rozdělený do více sloupců.
II. Empathy
The ability to understand user´s feelings
Who are the future users of a product, a prior in-depth research is crutial All our assumptions and personal expriences – put aside
Cognitive mapping – cognitive representation of users´ mental models, no visual rules that they have to obey,
How to become empathetic in UX design?
Humility
Set aside „your“ experiences and expectations Beginner´s mindset
„To be done“ approach (what, why, how, when etc.) Qualitative research
Repetitive testing throughout product life-cycle Recruitment of diverse users
Zajímavosti: jak se lidé cítí
Univerzální emoce
7 základních emocí je univerzálních
Emoce jsou vázány na pohyb svalů a opačně!
Zajímavosti: jak se lidé cítí
Zaměstnanost
Lidé jsou šťastnější, když mají hodně práce (limit)
Pozitivní pocity
Lidé se cítí pozitivněji před a po události než v jejím průběhu
III. Motivation
What initiates, sustains and directs users´ behavior Motivation is behind all our activities
Understanding various motivations helps us understand goals, actions, problems and aspiration of our users as well as their mental models
Types of motivation
External / internal
◦ External – rewards are important – in case of their absence, users are less inclined to finish a task
◦ Internal – the true agents of change, personally rewarding behaviour
◦ Locus of control – J. Rotter, 1954 – social psychology – confidence about one´s ability to manage and influence outcomes of his/her actions
Expectancy, instrumentality, valence cycle (V. Vroom)
◦ I expect that the initial effort will help me to do well
◦ Effort as my instrument produces outcomes
◦ Respected outcomes increase my desire to make more efforts
Achievement, affiliation, power (D. McClelland)
◦ Achievement in learning or problem solving
◦ Affiliation in strenghening friendships or family ties
◦ Power (status, recognition) ----
Goal-gradient effect
Zajímavosti: co lidi motivuje?
Dopamin a hledání informací Pocity blaha, uspokojení
Spojení s motivací, hledáním
Výzkum mozku ukázal výraznější stimulace a aktivitu ve chvíli, kdy předpokládáme odměnu, než když ji dostaneme.
Nepředvídatelnost udržuje snahu najít.
Lidé jsou motivováni pokračovat ve vyhledávání informací. Drobnější celky informací, prvek nepředvídatelnosti. Závislost.
Zajímavosti: lidé jako společenští tvorové
150
Limit skupiny se silnými vazbami je cca 150 členů. Každý člen ví, kdo je ten druhý a má k němu nějaký vztah.
„Dunbarovo číslo“ – Robin Dunbar 1998 Evoluční antropologie
? Vazba mezi velikostí mozku zejm. neokortexu a vazbou pevných vztahů v sociální skupině
Výsledek dle Dunbara platný napříč kulturami, oblastmi a časem (vesnice neolitických farmářů, …)
Další proměnné: síla tlaku na přežití, fyzická blízkost Sociální média: slabší vazby nemusí být méně důležité
Sdílení u designovaných produktů (silné nebo slabé vazby?)
Spolupráce spojuje
Společné vykonávání činnosti posiluje vazby mezi lidmi.
Scott Wiltermuth a Chip Heath (2009)
Jestli a jak synchronní chování ovlivňuje spolupráci mezi lidmi?
Výsledek: synchronní chování posilovalo ochotu ke spolupráci i ochotu osobního přispění pro blaho kolektivu.
Další proměnné: blízkost
Asynchronní mód řady aplikací
Snažit se vložit synchronní aktivity do designu produktů
Zajímavosti: lidé jako společenští tvorové
Společenská pravidla
Lidé očekávají, že online interakce budou v souladu se společenskými pravidly
Příklad - volby B. Obama
Požadování osobních informací příliš brzy
„nepamatování si“ již zadaných údajů
Při designu produktu – odpovídá standardům interpersonálního kontaktu
Lež
Lidé lžou různou měrou podle typu média
IV. Decision making (logic reasoning)
Decision making process helps you select the best option in a given situation Prior experience, knowledge, motivations and expectations contribute
Methods example: reduction of options, decomposition to sub-goals, analogy etc.
There is often not just 1 correct answer to the situation Some users do not use rational to make decision in certain situations.
The amount of effort and frustration caused by uninformed decision must correspond to impotence of the outcome
Application to UX design:
Communicate in such a way that all the information is intuitively at the disposal the moment it is needed.
Users shouldn´t guess, use trial and error approach, or random choice
Mental models – Norman,
1983
1. Mental models are based on belief (not facts). Vary by experience, knowledge, age, mental ability, situation (stress, fatigue), interest etc.
2. Mental models are incomplete. People will understand some parts of a system better than others.
3. People can ‘run’ (or try out) their models when required, but often with limited accuracy. Errors are always an option.
4. Mental models are unstable – people forget details. At the same time, mental models evolve with experience.
5. Mental models do not have firm boundaries: similar devices and operations get confused with each other.
6. Mental models are unscientific, exhibiting ‘superstitious’ behaviour.
7. Mental models are parsimonious. People are willing to undertake
additional physical operations to minimize mental effort, e.g. people will switch off the device and start again rather than trying to recover from an error.
Conceptual models
Match between user´s mental model and conceptual model?
Expected behaviour and outcomes, accurate predictions, decisions.
Mental model is then reinforced.
Errors, frustration, wrong choices, negative UX YES
NO How is the system built in reality
Assignement
Summarize the worst / best UX design (website, or application)
Include the following set of information:
Website/application/SW
User description
Purpose (goal) of interaction
When and where (when/how often, under what circumstances)
Problem discription
How did the user solve the situation?
To be written in Czech. Length: cca 300 – 500 slov Deadline: Friday, 22 October, 2pm
