Preparation8INF832

Bob-Antoine MENELAS, Ph.D.

•  What is design? It’s where you stand with a foot in two worlds – the world of technology and the world of people and human purposes – and you try to bring the two together.’ Mitch Kapor (1996),

•  Design is rarely a simple process, it involves many iterations and requirements analysis (what the system is supposed to do and what features it should offer) and possible solutions.

•  There are many definitions of "design". Most definitions recognize that the problem and solution must evolve during the design process; o  it is rare to be able to adequately specify "something"

before a design job has been done.

User centered design•  User-centered design (UCD) is an iterative design

process in which designers focus on the users and their needs in each phase of the design process.

•  In UCD, design teams involve users throughout the design process via a variety of research and design techniques, to create highly usable and accessible products for them.

•  Puts the end user at the center of the universe and defines the system from that perspective

UCD is an Iterative Process

•  So, who or what is a user? •  In user-centered design, designers use a mixture of

investigative methods and tools (e.g., surveys and interviews) and generative ones (e.g., brainstorming) to develop an understanding of user needs.

•  Three Steps 1.  Identify who the users are 2.  Identify what they want to accomplish 3.  Constantly assess (1) and (2)

Machine centered design•  The needs of the user are not considered

Two main points to consider

•  Human Capabilities •  Values and sensibilities of human

HUMAN CAPABILITIES •  Memory •  Attention •  Visual and Audio Perception •  Learning •  Language + Communication •  Touch •  Ergonomics (sense of fit)

Values and sensibilities of human

•  Level of experience •  Physical or mental capabilities and limitations •  Cultural expectations •  Language differences •  Senses of style •  Have different needs or values

The alphanumeric password•  Is a perfect example of machine-centered system •  Several recent studies have pointed out that the increasing •  number of accounts that people have to manage makes

difficult password memorization •  Without the memorization problem, the maximally secured

password would have the maximum number of characters allowed by the system, randomly arranged.

•  Instead of that, people do prefer repeated sequences of characters, familiar words or expression and sometimes do write down their password.

•  Because of the difficulty of memorizing multiple passwords and remembering which password is associated with what account, people usually do reuse a same password for several accounts

Be user-centered8INF832

Bob-Antoine MENELAS, Ph.D.

To know users•  Best way: interviewing and observing people •  Semi-structured interviews

o  https://en.wikipedia.org/wiki/Semi-structured_interview •  lots of tips for creating an interview guide and how to conduct the

interview.

•  Structured interviews o  ▪It may be hard to recruit subjects and some users are expensive to talk to.

Being user-centered•  Being user-centered means putting people first, so

you have to create systems that can help people and people can benefit from them.

1.  Think about what people want to do rather than what technology can do

2.  Design new ways to connect people 3.  Involve users in the design process 4.  Design for the diversity of people

Useful•  Usefulness : the quality of having utility and

especially practical worth or applicability

Usable•  can be defined as the measure (or likely estimate)

of user performance in the context and for the intended use.

•  Usability can be measured by various indicators such as ease of learning, ease of memorization, error-free use, and so on.

•  It is always relative to a given task, a context of realization and a targeted population of users. o  A computer game which requires three sets of control

pads is unlikely to be usable as people, for the time being at least, only tend to have two hands.

Findable•  Findable refers to the idea that the product must be

easy to find, and in the instance of digital and information products, the content within them must be easy to find, too. The reason is quite simple: if you cannot find the content you want in a website, you’re going to stop browsing it.

Credible•  Credibility relates to the ability of the user to trust in

the product that you’ve provided—not just that it does the job it is supposed to do, but also that it will last for a reasonable amount of time and that the information provided with it is accurate and fit-for-purpose. o  Users aren’t going to give you a second chance to fool

them—there are plenty of alternatives in nearly every field for them to choose a credible product provider. They can and will leave in a matter of seconds and clicks unless you give them reason to stay.

Desirable•  Desirability is conveyed in design through branding,

image, identity, aesthetics, and emotional design. •  The more desirable a product is, the more likely it is

that the user who has it will brag about it and create desire in other users.

accessible•  Accessibility is about providing an experience which can

be accessed by users with a full range of abilities o  this includes those who are disabled in some respect, such as the hearing,

vision, motion, or learning impaired.

•  Designing for accessibility is often seen by companies as a waste of money—the reason being the enduring misconception that people with disabilities make up a small segment of the population. o  In fact, according to the census data in the United

States, at least 19% of people had a disability in 2010, and it is likely that this number is higher in less developed nations.

•  It’s also worth remembering that when you design for accessibility, you will often find that you create products that are easier for everyone to use, not just those with disabilities.

Valuable•  Finally, the product must deliver value. •  It must deliver value to the business which creates it

and to the user who buys or uses it. •  Without value, it is likely that any initial success of a

product will eventually corrode as the realities of natural economics start to undermine it.

Interaction with softwares

8INF832 Bob-Antoine MENELAS, Ph.D.

Interaction styles•  Direct manipulation

o  Video games, CAD system •  Menu-based (Menu selection)

o  Most general-purpose systems •  Form fill-in

o  Stock control, Personal loan processing •  Command language

o  Operating systems, Library information retrieval systems •  Natural language

o  Speech recognition enabled systems

Direct manipulation advantages

•  Examples: Video games, CAD system •  Users feel in control of the computer and are less

likely to be intimidated by it •  User learning time is relatively short •  Users get immediate feedback on their actions so

mistakes can be quickly detected and corrected •  Became easy to use with touch screens

Direct manipulation problems

•  The derivation of an appropriate information space model can be very difficult

•  Given that users have a large information space, what facilities for navigating around that space should be provided?

•  Direct manipulation interfaces can be complex to program and make heavy demands on the computer system

Menu systems•  Users make a selection from a list of possibilities

presented to them by the system •  The selection may be made by pointing and

clicking with a mouse, using cursor keys or by typing the name of the selection

•  May make use of simple-to-use terminals such as touch-enabled screens

Advantages of menu systems

•  Users do not need to remember command names as they are always presented with a list of valid commands

•  Typing effort is minimal •  User errors are trapped by the interface •  Context-dependent help can be provided. The

user’s context is indicated by the current menu selection

Problems with menu systems

•  Actions that involve logical conjunction (and) or disjunction (or) are awkward to represent

•  Menu systems are best suited to presenting a small number of choices. If there are many choices, some menu structuring facility must be used

•  Experienced users find menus slower than command language

Command interfaces•  User types commands to give instructions to the

system e.g. UNIX •  May be implemented using cheap terminals. •  Easy to process using compiler techniques •  Commands of arbitrary complexity can be created

by command combination •  Concise interfaces requiring minimal typing can be

created

Command interfaces problems

•  Users have to learn and remember a command language. o  Command interfaces are therefore unsuitable for occasional

users

•  Users make errors in commands. o  An error detection and recovery system is required

•  System interaction is through a keyboard so typing ability is required

Command languages•  Often preferred by experienced users because they

allow for faster interaction with the system •  Not suitable for casual or inexperienced users •  May be provided as an alternative to menu

commands (keyboard shortcuts). •  In some cases, a command language interface

and a menu-based interface are supported at the same time

Natural language interfaces

•  The user types a command in a natural language (NL).

•  Generally, the vocabulary is limited and these systems are confined to specific application domains

•  NL processing technology is now good enough to make these interfaces effective for casual users but experienced users find that they require too much typing

Define your product

8INF832 Bob-Antoine MENELAS, Ph.D.

Understand the market to create a better product

•  Understand who will use the product and how? o  If you target some groups of users you may

•  provide them with the product that really fits their needs

•  have slogans that speak to them •  For this, you have to identify :

o what problem are they looking to solve when they come to your app?

o Different user segments will probably have different reasons to use your app, so you can start by developing hypotheses about what drives each user to download.

Persona•  A representation of the goals, attitudes, and

behaviors of a specific group of users that may engage and relate to a product

•  They help you understand who you're building for, o  This may help understand the whys and the

whats •  why users take certain actions within your

product, and what they're hoping to accomplish when they use it.

How to create personas•  Begin by creating hypotheses about the different

types of users. •  Then, through a combination of product analytics,

user surveys, and market research, you can validate these hypotheses (or disprove them, which can be equally illuminating).

•  For example, a weather app might have the following user personas: o  The commuter o  The picnic host o  The forgetful gardener

Define Your

Persona

PR

OFI

LE Location Wheredoeshe/shelive&work?

ProfessionalWhatistheirjob?IfB2B,adddetailonroleindecisionmaking,influence,responsibilities

Education Levelandkindofschoolingcompleted

BE

HA

VIO

RS

Usage&loyaltyTypeofusage,onlinestats,howtheyengagewithus,behavior,usagerate,howloyal

Attitude&BeliefsWhatdoeshe/shethinkofus?Thecategory?

LifestyleSocialgroup,status,opennesstoinnovation,mediahabits,proficiency

Interests&Hobbies

Whatdoeshe/shedointheirfreetime,howimportantisthattothem?

NE

ED

S

UsageGoalsWhatisshe/helookingtoaccomplish?Howimportantisittothem?

EmotionalGoals/Quote

Whatisatstakeemotionally?Whatwouldaquoteintheirwordssay?

Motivations&Triggers

Whatmotivateshim/her,whatmakesthemtick?

<Name> <Age>

(See samples in section 4 and on the following slide)

2

User journey map•  Now we can map the UX for each persona •  A user journey is a timeline of user actions that

describes the relationship between your brand and its customers. It's a visualization all of a user's interactions with your product, from their point of view.

•  User journey mapping creates a timeline of all touch points between a customer and your organization, including all channels they happen in.

User journey map•  A really simple user journey map for your weather app

could look something like this:

•  These user journey maps help analyze how users experience your product, based on their unique motivations and goals. 

•  For example, you might find that you need to remove a step from your onboarding UX flow, change the copy in a lead nurturing email, or add tooltips to help users learn something—all based on the actions your users take. o  This fosters a more customer-centric approach to product

building, which ultimately leads to better customer relationships.

Helps to understand•  several important factors that shape the overall

impression users will walk away with. •  Some questions you might ask about your users' journey

could include: •  Why did they downloaded and opened the app in the

first place? •  How easy is the app to understand and use

immediately? •  How long it does it take them to accomplish what they

came there to do? •  How well does their experience extend across multiple

channels, and where do they experience gaps? o  The answers to these questions can help you better understand what motivates

your users and what they're most likely to find helpful. You can then use this information to create an experience that really hooks them on your product.

a user journey map may include•  the entirety of a user's interaction with your product

o  from the moment they learn about it, throughout the process of becoming a customer, all the way to the point at which they stop using it. 

•  Or it can focus on a specific part of this process, like the onboarding flow.

How to create a user journey

1.  Have your user personas drawn out 2.  start creating user journey maps for each of them

to understand 1.  how each type of customer interacts with your product 2.  what they need to do in order to accomplish what's meaningful to them

3.  You should have at least one map per persona.

Market Segments & Personas•  Journey maps are based on a persona, not a segment

•  Clearly identified groupings that can be measured•  Emphasis on analytics / BI•  Used to execute & measure•  Marketing accessibility (you can reach them)•  Aggregated, impersonal description of a group

Analyze & Size an opportunity

Segment

SEGMENT A

Urban Homeowners Male 18-49

With 1+ Dog(s)

SEGMENT B

Suburban Homeowners Married Males With 2+ Dogs

Persona

•  Research-driven•  Used to design experiences•  Representative of an individual customer•  Relatable & real•  May belong to one of your segments•  Can be described in detail

Humanize & Connect

Guidelines8INF832

Bob-Antoine MENELAS, Ph.D.

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

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

Vision8INF832

Bob-Antoine MENELAS, Ph.D.

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.

OnBorading screens

8INF832 Bob-Antoine MENELAS, Ph.D.

Do not hide major features

•  Do not use the menu sandwich icon •  Exploit onboard login

o  Use small videos o  Use tutorials, screenshots

• 

Colors8INF832

Bob-Antoine MENELAS, Ph.D.

Color Proportion•  Proportion of colors is a crucial point in design •  The ideal model is 60-30-10, where 60% of all website

design go to a dominant color, 30% of web space can be filled with the subdominant color(s), and 10% should be accentuated with an extra color.

•  You don’t need to stick to this pattern, if you need more colors on your site. o  You can add a few of subdominant, i.e. secondary colors,

but keep them all just 30% of the whole space. o  Use tint and shade of the same color.

Accent colorso  Accent colors are called so because they highlight certain details.

•  In a web site, elements that you may want to emphasize are: o  CTA o  Navigation button o  Scroll buttons o  Promotional elements

CTA•  call to action. •  Action is what you want to get from the user, so

lead them to the way they need to act – make CTA buttons flaring among other content.

Navigation menu•  Usually navigation menu has a top position on a

website to make it jumping on visitors right with a site opening.

•  Colors can intensify the menu exposure. •  And you can’t use the primary color for this,

because it will blend with the biggest part of the page, so accent (secondary) color appears to be very useful here.

Contact info•  Many users surf the web for a needed website just

because they need to get a phone number of the company/person/restaurant.

•  That is why, it is reasonable to place contact info in the Header and highlight it with a bright accent color.

•  It does not exclude the power of typography, which means that this info should be typed with a bigger font.

Warm colors •  represent the right side of the color wheel. •  Range from yellow to magenta •  In a design warm colors tend to pop •  they worked well for accent colors or calls to action