0% found this document useful (0 votes)
94 views

HCI Cheat Sheet: by Via

This HCI cheat sheet summarizes key aspects of human-computer interaction (HCI) design including: 1) It outlines Nielsen's 10 usability heuristics for interface design and Norman's interaction framework describing the "gulf of execution" and "gulf of evaluation". 2) It describes the model-view-controller (MVC) architecture for separating application data and presentation, and Horton's checklist for designing understandable icons. 3) It advocates understanding users through personas and scenarios to develop the best interfaces that are usable, understandable and meet user needs.

Uploaded by

Mae Mabilog
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
94 views

HCI Cheat Sheet: by Via

This HCI cheat sheet summarizes key aspects of human-computer interaction (HCI) design including: 1) It outlines Nielsen's 10 usability heuristics for interface design and Norman's interaction framework describing the "gulf of execution" and "gulf of evaluation". 2) It describes the model-view-controller (MVC) architecture for separating application data and presentation, and Horton's checklist for designing understandable icons. 3) It advocates understanding users through personas and scenarios to develop the best interfaces that are usable, understandable and meet user needs.

Uploaded by

Mae Mabilog
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

HCI Cheat Sheet

by vaibhavi25 via cheatography.com/121508/cs/22272/

HCI Develo​pment Cycle Neilson's 10 Design Heuristic Neilson's 10 Design Heuristic (cont)

Design Eval​uate Impl​ement Visi​bility of system status​:The system Flex​ibility and efficiency of use: Accele​‐
Ethnog​raphy Prototype Expert should always keep users informed about rators — unseen by the novice user — may
Evaluation what is going on, through approp​riate often speed up the intera​ction for the expert
feedback within reasonable time. user such that the system can cater to both
Task GUI tools Usability testing
Match between system and the real inexpe​rienced and experi​enced users. Allow
Analysis
world: The system should speak the users' users to tailor frequent actions.
Design Guidelines
language, with words, phrases and Aest​hetic and minimalist design
Scenarios
concepts familiar to the user, rather than Help users recognize, diagnose, and
This HCI develo​pment cycle involving system​-or​iented terms. Follow real-world recover from errors
(DESIGN -- EVALUATE -- IMPLEMENT) is conven​tions, making inform​ation appear in
Help and Docume​nta​tion
an iterative process and should be used a natural and logical order.
at every stage. User control and freedom: Users often QUOTE TO REMEMBER
choose system functions by mistake and
Evaluation method​ologies Do everything possible to understand
will need a clearly marked "​eme​rgency exit"
users(​peo​ple).
Expe​rt: Insp​ection method​s​(He​uristic to leave the unwanted state without having
evalua​tion, cognitive walk-t​hro​ugh), Models to go through an extended dialogue.
Interv​iew​(te​chn​iques)
Support undo and redo.
User testing: Qual​itative method​s​(ob​ser​‐
Formerly struct​ure​d,S​emi​-st​ruc​tur​ed,​Ope​n-
vation, interv​iews, questi​onn​aires, think-​‐ Cons​istency and standa​rds
ended questions, Closed​-ended questions,
aloud), Quan​tit​ative usability evalua​tion Error preven​tion
Grand tour questions
User testing is difficult than Expert Reco​gnition rather than recall: Minimize
evaluation the user's memory load by making objects, Stakeh​olders
actions, and options visible. The user
Primary Secondary
PACT should not have to remember inform​ation
from one part of the dialogue to another. Tertiary Facili​tators
P(​Peo​ple​) ​A​(Ac​tiv​iti​es)​C​(​Con​tex​t)​T ​(T​ech​‐
Instru​ctions for use of the system should be Identify stakeh​olders for your system, so
nol​ogies)
visible or easily retrie​vable whenever you know what to give more import​ance.
“People use techno​logies to undertake
approp​riate.
activities in contexts” (To understand how to
develop the best interf​aces, we must
understand people!)

By vaibhavi25 Not published yet. Sponsored by CrosswordCheats.com


cheatography.com/vaibhavi25/ Last updated 7th April, 2020. Learn to solve cryptic crosswords!
Page 1 of 3. http://crosswordcheats.com
HCI Cheat Sheet
by vaibhavi25 via cheatography.com/121508/cs/22272/

Neilson Quick Slogans MVC Archit​ecture Norman's intera​ction framework

Your best User is Users are The Model, View, Controller Gulf of execut​ion: User’s formul​ation of
is not good always not user is actions
MVC divides applic​ation into:
enough right designers not Gulf of evalua​tion: User’s expect​ations
- Model of core functi​onality and data
always about system state
- Views displaying inform​ation to user
right
- Contro​llers handling user input
Designers less is Details Help Horton’s checklist for icon designers
are not more matter does MVC Pros and Cons Unders​tan​dable. Sponta​neously suggest
users not
Pros Cons the intended concept to the viewer?
Usability vice presidents are not users
Multiple views of Complexity for simple Unambi​guous. Are additional cues (label,
engine​ering
same model intera​ctors other icons docume​nta​tion)
is a
Synchr​onized Potent​ially excessive Inform​ative. Why is the concept important?
process
views update​s/m​essages Attrac​tive. Does the image use smooth
Types of Metaphors Pluggable V & C Tight coupling, in edges and lines?
and “look and feel” practice Legible. Test all combin​ations of color and
Orient​‐ Ontolo​ Structural Metonymy
Lack of portab​ility size?
ational gical
eg: eg: eg: file magnifying Some toolkits make
'Und​ers​tan​ding' before making the
spinner "kill deletion glass:For MVC framework hard
design
controls the is using search
and up proces​ trash can ICONS It is important to create personas and
voting s" scenarios before you start designing.

Icons make use of three principle types of Pers​onas: Fictional charac​ters, which you
Orie​nta​tio​nal​:​Gives a concept a spatial
repres​ent​ation: create based upon your research in order to
orient​ation
-- Metaphor relies on people transf​erring represent the different user types that might
Onto​log​ical: Identifies an abstract system
knowledge from one use your service, product, site, or brand in a
concept with a basic category of existence
domain and applying to another similar way. Creating personas will help you
in the physical world: substance, object,
-- Direct mapping - creating a more or less to understand your users' needs, experi​‐
container or entity
direct image of ences, behaviours and goals.
Stru​ctu​ral: Identifies an abstract system
concept with a detailed real world concept what the icon is intended to represent Scen​ari​os​:S​tor​ies​(re​al-​world experi​ences of
or object -- Convention - arbitrary design, which has people), Concep​tua​l(a​bstract descri​pti​‐
Meto​nymy: use of the name of one thing become accepted ons​),C​onc​ret​e(s​pecific design decisions and
for that of another of which it is an attribute as standing for what is intended over time tech. added), Use cases(​formal descri​ptions
or with which it is associated that can be implem​ented)

Gestalt Properties

The Gestalt theory is guided by 5 principles


— Proximity, Simila​rity, Contin​uation,
Closure, and Figure​/Gr​ound.

By vaibhavi25 Not published yet. Sponsored by CrosswordCheats.com


cheatography.com/vaibhavi25/ Last updated 7th April, 2020. Learn to solve cryptic crosswords!
Page 2 of 3. http://crosswordcheats.com
HCI Cheat Sheet
by vaibhavi25 via cheatography.com/121508/cs/22272/

Gestalt Properties (cont) Techniques and termin​ology

Prox​imi​ty: When an individual perceives an Ethnog​raphy , Interview , Questi​onn​aire,


assortment of objects they perceive objects Partic​ipatory design , Scenarios , Protot​‐
that are close to each other as related. yping ,Probes , Card sorting , Focus groups
Simi​lar​ity: Elements can visually be Ethn​ogr​apt​hy: Ethnog​raphy, and other
grouped together if they have visual simila​‐ types of field studies, allow design teams
rities. This can be applied in the form of access to the real-life enviro​nments of their
color, shape, or iconog​raphy. end users. It allows designers insight into
Cont​inu​ati​on: Continuity happens when the the tangible and technical and social enviro​‐
eye is guided to move from one object to nments of their users, as well as access to
another. the tools users might already be using.

Clos​ure: Indivi​duals perceive objects such Ethn​ogr​aphy: As a method​ology for UX


as shapes, letters, pictures, etc., as being design, it’s both about how people interact
whole when they are not complete. Specif​‐ with techno​logy, and also about how they
ically, when parts of a whole picture are describe their experience of intera​cting with
missing, our perception fills in the visual their techno​logy.
gap.
Severity Ratings
Figu​re/​Gro​und: Refers to our ability to
visually separate elements on different
planes of focus. There are three ways to - 0. No problem
effect​ively execute this, of these through - 1. Cosmetic problem
layering, contrast, and inform​ation - 2. Minor – low priority
hierarchy. - 3. Major problem – high priority
- 4. Catast​rophe – must fix
Gestalt theories can be applied to UX
design and If applied correctly, they can
provide you with some quick wins out of the
box.

By vaibhavi25 Not published yet. Sponsored by CrosswordCheats.com


cheatography.com/vaibhavi25/ Last updated 7th April, 2020. Learn to solve cryptic crosswords!
Page 3 of 3. http://crosswordcheats.com

You might also like