UX/UI and

Prototyping
Study Guide
UX/UI and Prototyping

● User Interface
○ For the user to have a good experience it must be
■ Easy to use
■ Make the user feel good
○ Combinations of features and emotions
■ Nathan Shedroff’s model
● The model helps us understand and differentiate a set of core
meanings that describe how people interact with others and the
world in the deepest, most meaningful ways possible

●
○ How does the user decide to load the information?
○ Attention resources
■ First, the user sees stimuli (uses sensory organs/receptors)
■ The user uses four different attention resources
● Perception (the first step after getting the stimuli)
● Decision and Response Selection
○ Either put in their working memory or to continue to
response execution
● Working Memory (the user decides if they want to add it to their
long term working memory)
● Response Execution

■
● Font size is tied into perception and emotional response
○ If font is small, then it’s upsetting and annoying
○ If font size is big we can see it and we are happy
○ Has to be related to the targeted group
 ■ Older people may need a larger font
● The best scanning pattern is the F-pattern, especially for text-heavy sites
○ Another scanning pattern is the layer cake pattern
● Scanning headers and pictures while ignoring ”text” chunks
● Fitts’ Law
○ States that the amount of time required for a person to move a pointer (e.g.,
mouse cursor) to a target area is a function of the distance to the target divided
by the size of the target.
○ Thus, the longer the distance and the smaller the target's size, the longer it takes.
● Blocking user journey
○ You download an app to find a reservation and you can’t find anything, that is an
example of blocking
○ Another blocker is that you call the restaurant and it’s fully booked, the fact that
you can’t book a table blocks you from continuing

● Display, Design, Perception

○ Characteristics of the visual sense
■ Accommodation
● The ability of the lens to curve and thereby focus light rays on the
retina
● The near point: Nearest point in which the eye can focus
● Limitations of accommodation:
○ The better the lighting, the further the eye can focus
○ Aging (lens muscle weaken, making the focal point more
distant)
■ Visual acuity
● Influencing factors
○ Lighting conditions and changes
○ Exposure time
○ Stimuli strength
○ Location in the field of vision
○ Movement (dynamic visual acuity)
○ Age
○ Training
 ■ Contrast sensitivity
● Contract perceptiveness
○ The minimal difference of luminance strengths still allowing
to distinguish between two different stimuli

○
○ Influencing factors:
■ Luminance strength at the surrounding
■ Luminance strength of the display
● Display: Strong contrast between the
background and the figure

●
● “Loud” background (textures, patterns)
damage the readability of the information

● Dark writing on a light background will be

perceived as thicker than dark writing on a
light background

●
■ Age
■ Contrast strength
● Color Vision
○ There are three types of cones for three different wavelengths
■ Blue (short)
■ Green (medium)
■ Red (long)
○ Other colors are perceived through different combinations of stimulation levels of
the three cone types
○ Excitatory and Inhibitory connections between 3 cones types
○ Color blindness
■ Monochromatic
● A person who has no cones, or only one type of cone
■ Dichromatic
● A person who has one dysfunctional type of cone
○ Most common type: Lack or red sensitive cones
○ Display design has to take color blindness into account
■ Most common color blindness: RED and GREEN.
○ Use of colors and displays
 ■ Pros
● Easier target detection
● Easier to perceive connection between distant objects
● A good muli-coding system combined with share, size, and
location
■ Cons
● Might be confusing (5 colors and up)
● Doesn’t provide absolute hierarchy
○ Ways to color code
■ Color + Position
■ Color + Direction
■ Color + Shade
● Auditory perception
○ Auditory stimuli: Better alert systems
■ Faster reaction time than visual stimuli (sound is faster than light)
■ Perceived without overloading the already busy visual system
■ No need to direct attention or sensory organs in a specific direction
○ When should we use visual displays?
■ Attention to hazard must be drawn immediately
■ The user is on the move
■ The message is short and clear
○ Sounds waves characteristics
■ Frequency (Pitch)
■ Amplitude (Loudness)
● Visual Scanning
○ The best scanning technique is the F pattern
○ Top Down vs. Bottom Up
■ Top Down
● Goal-driven attention
■ Bottom Up
● Stimulus-driven attention
● Pattern and Shape Perception
○ Gestalt (The whole is other than its parts)
■ Law of Proximity
● The law of proximity states that objects place in proximity to
one another will be seen as a group rather than as individual
parts
 ■ Law of Similarity
● States that we perceive elements as a group if they are
similar in shape, size, solar, or other characteristics

■ Law of Closure
● States that when we look at a complex arrangement of visual
elements, we tend to look for a single, recognizable pattern

■ Law of Similarity
● Elements that are similar to each other tend to be perceived
as a unified group

■ Law of Common Fate

● States that elements that are moving together tend to be
perceived as a unified group

■ Law of Continuity
● We are more likely to see continuous and smooth following
lines rather than broken or jagged ones

● Memory, Learnability, and User Guidance

○ The user should not have to remember information from one part of the dialogue
to another
○ Instructions for use of the system should be visible or easily retrievable when
appropriate
○ Human Memory
■ Memory Types
● Sensory
● Short term working memory
● Long term memory
 ● Long term memory
○ Explicit
■ Concerned with recollection of facts and events
■ Episodic
● Your long term memories of specific events
○ I.e. what you did yesterday
■ Semantic
● Memories of facts, concepts, names and other
general knowledge
○ Implicit
■ Doesn’t require any conscience retrieval
● I.e brushing teeth, riding a bike, singing a familiar
song
■ Priming
● Type of cued recall in that an individual is exposed
to material without his or her awareness
● Aiding in a future response
■ Procedural
● Long term memory involved in the performance of
different actions and skills
○ Memory of how to do certain thing like riding
your bike, tying your shoes

○ Retrieving information
■ Multi-store model

■ Rule of Sevens
● The Magical Number 7, plus or minus 2:
○ Some limits on our capacity for processing information
 ○ Miller's Law states that the number of objects an
average person can hold in working memory is
about seven, also known as The Magical Number
Seven, Plus or Minus Two.
■ Chunking
● For example, phone numbers in Israel

○
■ Icons and Memory
● Part of retrieving information is icons that we see
○ Recognition vs. Recall
■ Recognition refers to our ability to “recognize” an event or piece of
information as being familiar, while recall designates the retrieval of
related details from memory.

■
○ Learnability
■ Beginners, Intermediates, and Experts
■ Design should be for everyone
● Support the transition from beginner to intermediate
● Be helpful to the intermediates
● Be appealing and updated for the experts
■ UX design implementations
 ● Be very mindful about the first few learning trials
● Make a clear differentiation between “zero training” system
for others
● Consider what happens after a few steps of learning curves
● Don’t assume that “the user will understand, then perform
perfectly”
○ Making displays more memorable
■ Bolding
■ Underlining
■ Color it
■ “Recently viewed”

● Human Attention
○ Selective Attention
■ The Filter Model
● First, we get sensory input, then we have the initial
processing, then we filter to a higher level of processing until
we achieve a response

●
○ Selective Attention and Design
■ How to help users stay focus
● Minimal number of elements on each page
● Important information should be placed above the fold
● Layout should encourage scanning and scrolling down
○ Divided Attention
■ Unitary Capacity Model
● Mental tasks require investment of resources (effort,
attention)
● The amount of effort that can be put in at a time is limited
● Some tasks require more effort than others (memorizing,
processing, acting under time pressure)
○ Attention is reflected in allocating resources for
different tasks
○ When the resources allocated for the task are not
sufficient-task performance will deteriorate
 ● Theory limitations of the Model
○ 4-tasks test (A,B,C,D)
■ Task A: Verbal Memory Task
■ Task B: Spatial Memory Task
■ Task C: Manual Tracking Task
■ Task D: Abstract Memory Task
○ Testing the validity of the “Single Resource Theory”
■ Multiple Resource Theory
● Humans have multiple attention resources with different
properties
● Each task requires a certain pattern of attentional resources
● The more similar the resources required to perform two
tasks
○ The more that they interfere with each other

● Mental Models
○ What is a mental model?
■ Mental models are what the user believes about how the user
experience works.
● The way we interpret what we see.
■ Mental models are constructed in a user's brain and are based on
what they know from past interactions with other products, sites,
and applications.
○ What is a mental model for a user?
■ A rich and elaborate structure reflecting the user’s understanding
of:
● What the system contains
● How it works
● Why it works that way
○ Why are they so important?
■ They reduce workload
■ The help diagnose malfunctions and different system models
■ They help plan a course of action
 ■ They help anticipate different action outcomes
■ Many of them allow for affective troubleshooting
○ Decoding mental models
■ Clues:
● Verbal reports
● Behavioral patterns
● Eye movements
● User errors
■ Knowledge elements:
● Understanding
● Response-transformation rules
● Anticipation
● Mapping
○ Acquiring Mental Models
■ Experience leads to the acquisition of circumstantial mental models
■ Higher experience = more abstract models
■ Theoretical study helps
○ Failures in Acquiring Mental Models
■ An error in operating the system may lead to the creation of a
wrong mental model if not showing satisfying feedback
■ The interaction of the proposed system does not represent the
correct conceptual model
■ If the theoretical and experiential components are not connected,
the operator will find it difficult to choose the appropriate
circumstance models
○ Pros of Mental Models
■ Rapid learning of the system (familiar content world)
■ Uniformity in the system
○ Cons of Mental Models
■ The metaphor does not always match the conceptual model
■ It complicates certain processes
■ The metaphor is sometimes irrelevant
○ Visual representation of Mental Models
■ Affordance
● How to use the product
■ Visibility
● What is it used for
○ Good visibility will support the creation of a correct
mental model of the system
 ■ You can tell at a glance what condition it’s in
and what this thing can do
● Building a Concept
○ Main components
■ Navigation Models (actions)
■ Data Models (objects)
■ Dialogue Style (appearance and interaction)

○ Data Model (objects)

■ Semantic Memory
● General experience
● Abstract structure of a variety of experiential objects
● Functional relationships
● Categorizing
● Generalizing
○ Navigation Model (actions)
■ Models of Navigation
● Search
○ Search lets users control their own actions and find
things that they are looking for
● Linear
○ The process for a user to get from point A to point B
should be a relatively simple and seamless
● Wizard
○ Structured process
■ A beginning, a definitive sequence, and an end
○ Complex and rare work processes
○ Beginner users

○
● Star
○ Relatively simple systems
○ No single action sequence
○ Wide range of users
■ Ie: app store (can also be considered as
hierarchy).

○
● Tree
○ Hierarchical
○ A complex system
○ Clear hierarchy of operations
○ Experienced users

○
● Network
○ Expert user
○ Flexible flow of action
○ Various use case scenarios

○
● Global
○ Consistent across the website
○ Allows access to the menu from anywhere in the site

○
● Associative
○ Associative links connecting different pages in the site
with no regularity
 ○
● Primary and Secondary
○ Hierarchical
○ Secondary menu opens with a mouse click, or a
mouse over

○
■ Navigation Tools
● Breadcrumbs

○
● Tabs

○
● A-Z

○
● Tag Cloud
○ A tag cloud is a list of tags, where the font size of
each tag is larger or bigger depending on its weight
● Page navigation

○
● Site Map
○ Birds eye view of site (ie: table of contents)
 ○
○ Dialogue Style (appearance and interaction)
■ Common Dialogue Styles
● Question and Answers
● Filling out forms
○ I.e. Signing in or creating an account
● Direct manipulation
○ I.e Excel
● Selecting from menus
○ I.e Choosing from excel menu (which opens a new
pop-up of options)
● Command line
○ I.e Code
● Dialogue boxes
○ I.e Selecting a new feature which opens a new box
options

● Emotions
○ The Circumplex Model of Emotions

○ Wheel of Emotions (which emotions go head to head with other emotions)

■ Options that come up when looking at things
■ I.e. Suprise can cause distraction or amazing
 ■
■ Different dynamics
● First dynamic:
○ The opposites (emotions opposite of the other petal
emotions)
● Second dynamic:
○ The intensity (the different stages on each petal)
● Third dynamic
○ The combination
■ The aggregation of two petals together (the
“inbetween”)
○ There is the situation, then the cognition which is followed by the feeling
■ Situation: May I have your address please?
■ Cognition:
● Option 1: Insurance price are affected by my address
● Option 2: Really?! Why are you asking me for that!!
■ Feeling:
● Option 1: Joy
● Option 2: Anger/fear
○ Building (part of) the journey
■ When there is a block in the experience:
● Behind any friction point (blocker) in your funnel, there is a
bad emotion hiding
■ Users remember negative emotions/experiences MUCH
LONGER than they remember positive emotions/experiences
■ Negative does not equal bad
○ ABC Model of Attitudes
■ Components of Attitudes:
● Affect
○ What you Feel
● Behavior
○ What you Do
● Cognition
○ What you Believe
 ●

●
○ Design Tools of Building an empathy map
■ Text
○ Easy Rules to Follow:
■ Be careful not “overdoing”
■ Be very clear
■ Use everyday phrasing
■ Be short
■ Try to be personal
● “You” is better than “Can be Done”
■ You are doing branding all the time
■ Graphics and animations
● Creative and full of surprises creates positive emotions
■ Apps as humans
● Computers as social actors
■ Trust
● Rely on the actions of others (ratings)
● I.e. Shipment time of arrival brings trust
■ CRR
● Cost, Risk, Reward

● UXR (User Experience Research)

○ Tools Overview
 ■ Usability testing
● Type: Qualitative
● Usage: Lab mainly, field
● Mainly fits for: Product usage, friction points, beliefs, mental
models, emotions
■ Cognitive walkthrough
■ Interview
● Type: Qualitative
● Usage: field, lab
● Mainly fit for: Beliefs, mental models, emotions, past
behaviors
■ Emotional Questionnaire
● Type: Qualitative
● Usage: Natural Environment
● Maily fit for: Attitudes, emotions, and more
■ Observation
● Type: Qualitative
● Usage: Field
● Mainly fit for: Learning real life scenarios and tasks
■ Analytics/Data Analysis
■ Think aloud

■
○ Research objective
■ What you want to achieve through this research
● For example, “to enhance retention in my app”
○ Research questions
■ Specific, focused on understanding a particular question
● For example, why do people leave me in this stage of the
funnel?
■ Research questions are not the questions you are going to ask
your users
 ● Will only refer to:
○ “What the researcher wants to learn from this
research”
○ Think Aloud
■ Slips
● Clicking the wrong key
● Scrolling to the other side
● Any “operational” failure
● Typically, single action oriented
■ Mistales
● Navigating the wrong path
● Not understanding something
○ Choosing the User
■ Need to pick the right “tool” for the job (the question)
● Interview
■ Persona, assumptions, and research
● Observation
■ How do they feel?
● Questionnaire
○ Normative vs. Description
■ A descriptive statement gives an account of how the world is
without saying whether that's good or bad.
■ A normative statement expresses an evaluation, saying that
something is good or bad, better or worse, relative to some
standard or alternative.
● Usability Testing (goes with UXR)
○ What is usability?
■ The extent to which a system, product or service, can be used by
specified users to achieve specific goals with effectiveness,
efficiency, and satisfaction in a specified context of use
■ Usability is not a feature of the product
 ■
○ What is User Experience?
■ A person’s perceptions and responses that result from the use
and/or anticipated use of a system, product, service
○ Three components of usability:
■ Effectiveness
■ Efficiency
■ Satisfaction
○ You can’t assume a (strong) connection between attitudes and behaviors

○
○ User research is a critical tool for any UX designer
■ UX design research is part of the UX designer’s toolbox
○ What are the cases in which no user research is done:
■ In Israel
■ Early-stage startups
■ Big technical oriented companies
■ UX department is under the development department
○ Moderated Usability Testing
■ Techniques
● Moderated vs. Unmoderated
● Remote vs. local
 ● Concurrent think aloud vs. retrospective think aloud

■
■ Use 5 participants in the study
● 1st step:
○ List the types of people you want to include
○ List the types of people you want to exclude
● 2nd step:
○ Screening questions (screening questionnaire)
■ Don’t reveal research goals
■ Use open-ended questions for excluding
participants
○ Try asking for behaviors
● 3rd step:
○ Define tasks you are going to test
■ Can it answer your questions?
■ Will it cover your research questions?
■ Have you developed it so you can test it/do you
have a mock up?
○ Typical mistakes:
■ No clear end goal for the user
■ Unreasonable/non realistic task
■ Providing info which isn’t there
■ Use system’s terminology
● 4th step:
○ Define parameters
 ■ Forces your customer to define your performance
parameters to its product
■ Forces you to define what is “acceptable”
● 5th step:
○ Write down instructions for the user
■ Try to provide the exact amount of information
■ Be good and honest
■ Don’t reveal your specific research questions
■ Make them feel comfortable
■ Be aware to cultural differences
● 6th step:
○ Creating an observation
■ I.e. satisfaction questionnaire (Which better fits
your opinion)
■ Use the Likert scale
■ Questions based on research questions
■ Use both positive and negative questions
■ Don’t be too long

○ Unmoderated Usability Testing

■
■ Tips for Unmoderated
● Be very specific
● Provide needed background
● Remember you’re not there
● Pay attention to follow up questions
● Record what they say
■ It is usability testing
● Remote
● Done without the researcher present in most of the testing
● Typically done using remote UT tools
■ UT High Level View
 ●
○ Difference between Moderated vs. Unmoderated

■
● Diary Study
○ A diary is a user's self-reporting tool.
■ Contextual - happens in a user’s natural environment.
■ Qualitative
■ Longitudinal - designed for long run measures
○ Enables us to learn how people actually live
■ How they use products
■ How they live their daily life
○ Pros:
■ No fly on the wall
 ■ Be there without being there
■ Less influence and biases
■ Great for learning about diversity
■ Capturing “moments”
○ Cons:
■ Require high commitment by the participants
■ Not so great for specific usability questions
■ Takes time
○ Capturing “moments”
○ When should they report:
■ Event-driven: When specific events happen
■ Interval/time-driven: at certain time intervals
■ Sporadic (by you): you ask for logging in at a certain point
○ Motivating your participant
■ More money/reward needed
●