Guide for UI and UX - UQAC · and UX Bob-Antoine MENELAS, Ph. D. Outline • 7 stages of actions...

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

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

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

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.

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

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

Guide for UI and UX - UQAC · and UX Bob-Antoine MENELAS, Ph. D. Outline • 7 stages of actions...

Documents

Transcript of Guide for UI and UX - UQAC · and UX Bob-Antoine MENELAS, Ph. D. Outline • 7 stages of actions...