Post on 20-Jun-2020
Guide for UI and UX
Bob-Antoine MENELAS, Ph. D.
Outline• 7 stages of actions • Affordance and signifiers • Mapping • Mental and conceptual model • Working memory • Recognition than recall • Implications of Vision • The user psychology • Feedbacks • Errors
Introduction• When we use a product, a website or an app in our
mind each action we take has different stages. • Before taking any action, we perceive things which
will depend on our behavior and goals.
• Our actions are based on our perception, on our mental model and goals
7 stages of action• 1. Forming the goal
o What or Why I want to do this?
• 2. Forming the intention o What are the alternatives action sequences?
• 3. Specifying an action o What actions can I do?
• 4. Executing the action o How do I do it?
• 5. Perceiving the state of the world o What happened?
• 6. Interpreting the state of the world o What does it mean?
• 7. Evaluating the outcome o Is the goal reached?
Practice• Apply this process to analyze how you act to
• delete an email? • Send a message on WeChat
• Write all stages of actions on a paper
Usage as Design Aids• The Seven Stages of Action can be broken down into 4
main principles of good design: • Visibility - By looking, the user can tell the state of the
device and the alternatives for action. • A Good Conceptual Model - The designer provides a
good conceptual model for the user, with consistency in the presentation of operations and results and a coherent, consistent system image.
• Good mappings - It is possible to determine the relationships between actions and results, between the controls and their effects, and between the system state and what is visible.
• Feedback - The user receives full and continuous feedback about the results of the actions.
Outline• 7 stages of actions • Affordance and signifiers • Mapping • Mental and conceptual model • Working memory • The user psychology • Implications of Vision • Feedbacks • Errors
Affordance / Signifiers
• Affordance is what the environment offers the individual.
• In design, Affordances determine what actions are possible. o What can be done with a door? o A smarthphone?
• Signifiers communicate where the action should take place. o Door handles tell where to open the door
3 types of affordance• A false affordance is an apparent affordance that
does not have any real function, meaning that the actor perceives nonexistent possibilities for action. o A placebo button
• A hidden affordance indicates that there are possibilities for action, but these are not perceived by the actor. o It is not apparent from looking at a shoe that it could be used to open a
wine bottle.
• For an affordance to be perceptible, there is information available such that the actor perceives and can then act upon the existing affordance.
Anti-affordance• Tell what can not do with a product
Using Signifiers • To create a delightful UX, affordance and anti-
affordance have to be discoverable, perceivable. • That is why we have big research bar on
ecommerce websites
Examples• https://www.alibaba.com/ • https://www.amazon.com/ • https://www.walmart.ca/
• Affordance video
Outline• 7 stages of actions • Affordance and signifiers • Mapping • Mental and conceptual model • Working memory • The user psychology • Implications of Vision • Feedbacks • Errors
Natural mapping• Mapping is the relation between two sets of things • The term natural mapping comes from proper and
natural arrangements for the relations between controls and their movements to the outcome from such action into the world.
• The real function of natural mappings is to reduce the need for any information from a user’s memory to perform a task.
o With a good mapping the understanding becomes obvious
Natural mapping• Mapping and natural mapping are very similar in
that they are both used in relationship between controls and their movements and the result in the world.
• The only difference is that natural mapping provides users with properly organized controls for which users will immediately understand which control will perform which action.
• Also called :ecological interactions
Consequences• With such interactions, the learning time is
considerably reduced, perhaps nonexistent. o This is particularly important when it comes to
seniors users. • In addition, because of these realistic interactions,
the player is more likely to give credit to his task and therefore to engage in it. o With more commitment, we can expect more
fun and motivations that will allow the user to perform all the necessary exercises.
Labels• If a design depends upon labels, it may be faulty. • Labels are important and often necessary, but the
appropriate use of natural mappings can minimize the need for them. o Wherever labels seem necessary, consider another design.
Examples• Video of mapping
Outline• 7 stages of actions • Affordance and signifiers • Mapping • Mental and conceptual model • Working memory • The user psychology • Implications of Vision • Feedbacks • Errors
Mental models• Users develop an understanding of a system
while learning and using it
• Knowledge is often described as a mental model o How to use the system (what to do next) o What to do with unfamiliar systems or unexpected
situations (how the system works)
• People make inferences using mental models of how to carry out tasks
Mental models• Craik (1943) described mental models as
internal constructions of some aspects of the external world enabling predictions to be made
• Involves unconscious and conscious processes, where images and analogies are activated
• Deep versus shallow models (e.g. how to drive a car and how it works)
Everyday reasoning & mental models
(a) You arrive home on a cold winter’s night to a cold house. How do you get the house to warm up as quickly as possible? Set the thermostat to be at its highest or to the desired temperature?
(b) You arrive home starving hungry. You look in the fridge and find all that is left is an uncooked pizza. You have an electric oven. Do you warm it up to 375 degrees first and then put it in (as specified by the instructions) or turn the oven up higher to try to warm it up quicker?
Heating up a room or oven that is thermostat-controlled
• Many people have erroneous mental models (Kempton, 1996)
• Why? o General valve theory, where ‘more is more’
principle is generalised to different settings (e.g. gas pedal, gas cooker, tap, radio volume)
o Thermostats based on model of on-off switch model
Heating up a room or oven that is thermostat-controlled
• Same is often true for understanding how interactive devices and computers work: o Poor, often incomplete, easily confusable, based
on inappropriate analogies and superstition (Norman, 1983)
o e.g. frozen cursor/screen - most people will bash all manner of keys
Exercise: ATMs• Write down how an ATM works
o How much money are you allowed to take out?
o What denominations?
o If you went to another machine and tried the same what would happen?
o What information is on the strip on your card? How is this used?
o What happens if you enter the wrong number?
o Why are there pauses between the steps of a transaction? What happens if you try to type during them?
o Why does the card stay inside the machine? o Do you count the money? Why?
How did you fare?• Your mental model
o How accurate? o How similar? o Do you complete each other?
• Payne (1991) did a similar study and found that people frequently resort to analogies to explain how they work
• People’s accounts greatly varied and were often ad hoc
Conceptual model• A conceptual model is a representation of a system,
made of the composition of concepts which are used to help people know, understand, or simulate a subject the model represents.
• Hopefully, using a product, the user should be able to discover a conceptual model without any documentation
The question• Do the user mental model fits the conceptual
model of the product? • In fact, major clues of how things work come from
their perceived structure o Affordance, signifiers, mapping etc.
What helps in the mental model
• We must always align the user’s mental model with the product conceptual model.
• We can use signifiers to tell the user what actions he may take and guide the utilization of the product o Apps, video games start with some small tutorials
Multiple mental models• A user may have different mental model • Expert users may have different mental models than
novice users
• Video on mental model
Outline• 7 stages of actions • Affordance and signifiers • Mapping • Mental and conceptual model • Working memory • The user psychology • Implications of Vision • Feedbacks • Errors
Working memory• Working memory is a cognitive system with a limited
capacity that is responsible for temporarily holding information available for processing.
• Working memory is important for reasoning and the guidance of decision-making and behavior.
• Working memory is often used synonymously with short-term memory, but some theorists consider the two forms of memory distinct, o working memory allows for the manipulation of stored
information, o short-term memory only refers to the short-term storage of
information
Memory• Involves encoding and recalling knowledge and
acting appropriately
• We don’t remember everything - involves filtering and processing
• Context is important in affecting our memory
• We recognize things much better than being able to recall things o The rise of the GUI over command-based interfaces
• Better at remembering images than words o The use of icons rather than names
Working memory capacity
• How much information people can remember o Around 7 or around 4
• From 3 to 5 • How long a non relevant-information stays in the
memory o Around 10 to 15s
• cognitive load refers to the used amount of working memory resources.
working memory highly volatile
• This volatility applies to goals and details of objects o Any distraction can lead to forgetfulness
• If you loose item from the working memory, then you may loose track of what you are doing.
Implications in UI design
Headline length • According to multiple sources 5 to 6 words is the
ideal length for headlines o Such a length matches the limit of the working
memory • When reading, we may unwittingly not consider
certain words in the case the headline would be longer
Recognition rather than recall• Our brain
o recognizes things very rapidly o Take much more time identify new objects
• Similar patterns are processed faster than new ones • As an implication in the UI
o Similar patterns, icons will be remember more easy
• Use the similar icons over multiple screens
• Video on working memory
• Video on recognition
Outline• 7 stages of actions • Affordance and signifiers • Mapping • Mental and conceptual model • Working memory • Implications of Vision • The user psychology • Feedbacks • Errors
Vision and UI design• UI rely mainly on graphical outputs
o They use text, color, layout and motion to communicate messages and respond to user activity.
• Working with a primarily visual medium, then, it’s vital that we understand the capacities and limitations of human vision.
• We will learn that Peripheral vision is limited
Two types of vision• Broadly speaking, humans have two kinds of vision:
o foveal, or central vision o peripheral vision
• The fovea is a tiny focal point in our retinas, sat at the centre of our vision, densely packed with light processing cells
• The fovea covers the central 3 degrees of our sight o for most users set at a monitor, a circle of 2.5cm
diameter on screen. • Everything outside this point counts as peripheral
vision, with sight cells becoming progressively sparser further away from the fovea.
Consequence• The biggest consequence is that central vision can
resolve detail much better than peripheral, with outer vision becoming increasingly blurred.
• But there are other differences, too.
Peripheral vision is color blind
• You may know that vision cells are divided into those sensitive to brightness and those sensitive to color: rods and cones.
• What you may not know is that they are distributed unevenly across the retina, with color cells focused in the fovea and sparse in the periphery.
• The result is that the further away from the fovea we go, the poorer peripheral vision is at resolving color.
• At the outer edges of our vision, in fact, we’re practically color-blind.
Foveal vision is brightness-blind
• Foveal vision has very few rod cells. • That means that whilst our focal vision is great at
spotting differences in hue, it is poorer at seeing differences in lightness.
• Of course, focusing on extremely bright objects can still harm the vision cells.
Peripheral vision is motion sensitive, detail insensitive
• It’s not just the sight cells that are different in the periphery, but the nerve cells too.
• Peripheral vision is dominated by so-called ‘Y’ cells, that are more responsive to rapid changes than sustained stimuli.
• The result is that peripheral vision is extremely motion sensitive – good for early humans when a rapid motion on the flank might be a hungry predator approaching.
• The tradeoff, however, is that peripheral vision can’t resolve detail or shape as well as the fovea, whose ‘X’ cells are more sensitive to sustained signals, giving it more precision.
Humans have poor blue acuity
• Humans have very few blue-sensitive cones, but compensate by making these blue cells extra-responsive.
• The limitation, however, is that whilst blues and cyans can look extremely bright, they cannot be seen in high detail.
• Slight blue lines and delicate blue shapes will appear slightly blurred.
The Consequences for Designers
• Peripheral animation is distracting • Color won’t work in the periphery • Users shouldn’t need to use detail or color vision to
discover things • Avoid blue for elements requiring detail, or text
Peripheral animation is distracting
• Animation in sidebars and outside of the user’s focus is extremely distracting.
• This will be doubly the case if the animation is a particularly magnetic one, like a tracking motion (where an object moves into and out of vision) or a ‘rush toward’ animation.
• This means scrolling carousels and pulsing buttons in secondary content areas are a big no-no.
Color won’t work in the periphery
• Humans can’t see color differences well outside the point they focus upon.
• Therefore, if a user is likely to be looking in a particular location, then elements far away from that point should not use color alone as a signifier.
• Elements ‘out of the way’ – in sidebars or persistent upper toolbars – should not signify updates by changing color.
• If you have an urgent update in a sidebar that a user must see, then use animation to draw attention to.
Users shouldn’t need to use detail or color vision to discover things
• Whenever a user encounters a page, there will be one element that he or she looks at first, before proceeding to evaluate other interesting objects on-screen.
• But those other objects will be judged as ‘interesting’ or not by the peripheral vision.
• That means objects the user will not look at first should not require detailed or colored vision to be understood.
Avoid blue for elements requiring detail, or text
• Blue lines and fine objects will always appear more blurry than their red or green counterparts.
• So blue is a bad choice for important notification text, or small icons.
• On the web, blue is also already associated with hyperlinks, so non-linked text in blue is confusing as well as hard-to-see.
Outline• 7 stages of actions • Affordance and signifiers • Mapping • Mental and conceptual model • Working memory • Recognition than recall • Implications of Vision • The user psychology • Feedbacks • Errors
User expectations• User expectations happen in two steps
o Recognizing objects o How this object behaves and works
• The goal is to minimize the gap between the user expectations and what he will experience
• Respect the standards, the patterns
o As designers you have to know these patterns and follow them
• Video on user expectations • http://demo.posthemes.com/pos_gengar/en/
Context and Design• How a product will be used should be considered in the
design • The interactions will happen in a context, a determined
context o It is important to study how the context affects the
interaction but also how the interaction responds to the need for the activity in the given context
• What color to use at night?
• Elements that may define the context o Location o Device of used (phone, tablet, computer) o Emotional state of the user o Timing of the usage
The user psychology• Studies show that users are lazy • UI designers have to pay attention about that • Guidelines related to that point • When it come to an important process, you have to
limit available options o Forms should have 3 to 5 fields o Checkout should have 3 to 5 steps o Pay attention to account creation o Do not hide major features
Forms should have 3 to 5 options
• Limited number of distinctive options
Forms should have 3 to 5 options
• Limited number of distinctive options o Point out the best value
Natural language form• The idea is to convert forms into a natural language
so that users fell the completion experience more suitable
• https://tympanus.net/Tutorials/NaturalLanguageForm/
3 to 5 steps in the checkout process
Account creation• Appears to be a major cause of frustration therefore
o Users do not feel confortable to create an account during the first use
• Should be optional o Some major players do not force an account creation
• (Expedia for example) • No SQL databases support such an option
o By offering some rewards, users will have a reason to create an account
• May be facilitated by of social login o Users are accustomed with o This is an option to collect data
Example• Easiest way to start with a new user
Do not hide major features
• Do not use the menu sandwich icon • Exploit onboard login
o Use small videos o Use tutorials, screenshots
•
Conversion• A website conversion is the most important factor to
the success of your online marketing strategy and goals.
• It means getting your visitors to do what you want them to do, whether that is to o buy your product, o sign up for your newsletter, o register for a webinar, o download a whitepaper, or o fill out a lead/contact form.
Impact of form fields on conversion
Outline• 7 stages of actions • Affordance and signifiers • Mapping • Mental and conceptual model • Working memory • Implications of Vision • The user psychology • Feedbacks • Errors
Feedbacks• For any interaction, you need to inform the user
about what is happening o Without any feedback, the user would be lost o Imagine the reaction of the user with a login
button with no feedback • After 5 seconds of inactivity, he will press it
multiple time as the result of his frustration
Feedbacks tell• What just happened • What is the system doing • Is there a success or a failed • What is the current state of the product • How to fix an error
Different forms of feedbacks
• Vivid colors as red • Movements on the screen • Sounds • Vibrations • Flashing light • Of course, all these forms can be combined
Feedbacks and context• Most of the times, you need to remain the context
of the feedback • Mainly, if some selections have been made, you
have to remain these selection way providing the feedback
• Video on feedbacks
Outline• 7 stages of actions • Affordance and signifiers • Mapping • Mental and conceptual model • Working memory • Recognition than recall • Implications of Vision • The user psychology • Feedbacks • Errors
Errors• Making errors is an integral part of the way we
humans live. • As Designers we must have that in mind when
designing. • Our designs must be aimed at preventing errors
happening. • Design must minimize the negative impact of errors
when they occur and provide a way to reverse them if possible.
• Errors can be in the form of: o Slips, Lapses and Mistakes
Slips• Slips happen when you walk on ice. • In other words, when people perform an action and
the result is not what was intended due to misstep. • Examples:
o when texting on my phone and I’ve tapped the wrong letter because my fingers are chubby.
o when I try to handle Instagram with one hand and want to reach the far corner action icon suddenly the base of my thumb presses the home icon.
Routine jobs cause slips• Such a UI is highly slip prone
Lapses• Lapses are a brief failure of concentration, memory
or judgment; are frequent since we have limited attention
• They are mainly due to : o distraction in the user interface o distraction in the environment of the user o the passage of time
Mistakes• Mistakes occur when the user has incorrect
knowledge or an incorrect assessment of a situation.
• This develops a mental model that leads to an error most of the cases.
• People are goal orientated and if the system/app does not provide them with correct information/guidance they do mistakes.
• Usually that leads to trial and error approach. • Unfortunately also to not so good user experience.
Prevention and forgiveness
• Our designs must help people avoid errors and protect them from harm if errors occur. Here are a few strategies to achieve that. o Forgiveness: Ctrl+Z o Previews for a glimpse of the future o Confirmations and warnings
Forgiveness : ctrl +Z• The power to undo is tremendous! • Whenever possible design the product to forgive
mistakes; allow the user to reverse any of their actions • Whenever possible create a safety net.
o Version control, parachute systems and archive of the deleted folders in your cloud storage, all of these can be lifesavers (literally in some cases)
Previews for a glimpse of the future
• Alarm on Android o IOS does not show that
Confirmations and warnings
• Sometimes, people don’t realize the red button they’re about to press means that everything goes to hell. Ask for confirmation in cases where making a choice can lead to a mistake or harmful result.
Loading speed
Speed is important• Loading speed is a paramount importance
o 1sec delay may lower conversion by 7% o BBC has seen that they lose an additional 10% of
users for every additional second it take for their site to load
o AliExpress reduced load time by 35%, saw a 10.5% increase in orders and a 27% increase increase in conversion of new users
o Google does consider loading as a SEO factor o 79% of customer will not buy again on a slow
website
• 83% of users expect a website to load within 3 sec • Optimal loading time is in 1 to 3 sec • App response time should be within 2 sec
How to deal with loading time
• Show a loading, progress bar
Use of analytics
Use of analytics• Google analytics is powerful tool that let you get
meaningful information about UX • You may get: user’s location, Operating system,
device used, browser version, time spent in any particular area, o User flow and drop off on different pages can tell
you that there might be some problems on a specific area
o Google analytics is free
See what users are doing• There are many tools to record your user’s session as
a video
Conclusion• 7 stages of actions • Affordance and signifiers • Mapping • Mental and conceptual model • Working memory • Implications of Vision • The user psychology • Feedbacks • Errors