Lesson 1
Outline
• Introduction
• What is design
• User Interface / User eXperience
• User-centered design
• Thinking design
• Fundamentals of UI
• Fundamentals of UX
• Factors that influences UX
• Conclusion
Introduction
• We are interested in conceiving great User Interfaces (UI)
• One question arise: What is great UI?
• Let us analyze past works to have an insight about great UI
• Let first see some UI examples
• How did the Windows Interface evolve over years?
• Let us point out some bad designs
Windows Interface over years
We will see some screenshots
• throughout this process, please pay attention to details
• be an observer
• Take two or three minutes on each slide to analyze the details
Possible observations from 3.0 to 98
● Use of colors to differentiate, shades of gray
● More organized environment that includes
■ Desktop
■ Start Bar
■ Windows etc.
Possible observations
● Good set of colors
● Pleasant and elegant UI
Possible observations
● Introduction of large icons
● Compatibility to touch interfaces
Start Bar of Windows 7
versus Windows 10
Possible observations
● The Start Menu is a staple of Windows that people have strongly defended after it was replaced with a Start Screen back in Windows 8.
● Microsoft realised the error of its ways and brought the Start Menu back for Windows 10.
● It’s a lot more interactive than what we had on Windows 7.
Introduction
• 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.
Outline
• Introduction
• User Interface / User eXperience
• User-centered design
• Thinking design
• Fundamentals of UI
• Fundamentals of UX
• Factors that influences UX
• Conclusion
What is UI
• Human-Computer Interaction (HCI) research is focused on the interactions between people (users) and computers.
• We name Interface : The point of interaction or communication between a computer and another entity
o such as a printer or human operator
o Information flows in one direction or two.
• UI stands for User Interface.
• UI is the graphical layout of an application, a product.
• UI is the graphical layout of an application, a product.
• It consists of the buttons users click on, the text they read, the images, sliders, text entry fields, and all the rest of the items the user interacts with.
• UI includes screen layout, transitions, interface animations and every single micro-interaction.
• Any sort of visual element, interaction, or animation must all be designed.
UI designer
• UI designers are graphic designers.
• UI designers create the look and feel of an application’s user interface.
• They decide what the application is going to look like.
• They have to choose
o color schemes and button shapes
o the width of lines and the fonts used for text.
• They ensure that the application’s interface is attractive, visually-stimulating and themed appropriately to match the purpose and/or personality of the app.
• They make sure every single visual element feels united, both aesthetically, and in purpose.
UX
• UX” stands for “User eXperience. ”
• User experience is everything that affects the user’s interaction with a product getting form A to B as easy as possible.
• A product can be anything from a physical product to a website, a web application, a mobile app or a day-to-day object.
What is UX Design?
• A user’s experience of the app is determined by how users interact with it.
• Is the experience smooth and intuitive or clunky and confusing?
o Does navigating the app feel logical or does it feel arbitrary?
o Does interacting with the app give people the sense that they’re efficiently accomplishing the tasks they want to achieve or does it feel like a struggle?
o User experience is determined by how easy or difficult it is to interact with the user interface elements that the UI designers have created.
UX designer
• UX designers are also concerned with an application’s user interface
o this is why people get confused about the difference between the two.
• UI designers are tasked with deciding how the user interface will look
• UX designers are in charge of determining how the user interface is operated.
UX designer
• They determine the structure of the interface and the functionality.
o How it’s organized and how all the parts relate to one another.
• In short, they design how the interface works.
o If it works well and feels seamless, the user will have a good experience.
o But if navigation is complicated or unintuitive, then a lousy user experience is likely.
26
Research in UI Designs
• UI designers need to make sure the visual language they choose fits the class of application they’re writing.
• They’re trying to predict user expectations.
• If your team is designing a travel app,
o it’s important to research how other travel apps have been developed in the past.
o Which ones worked? Which ones didn’t?
o There are design lessons to be learned from the work others have done before.
Research in UI Designs
• The exact aesthetic they choose is up to them,
• but the basic “rules,” or the need to conform to user expectations, should be considered
Research for UX Design
• UX design is particularly interested in user expectations.
• All of the experiences and interactions that users have had with every application they’ve used in their lives have helped set their expectations for how interfaces are supposed to work.
• If a UX designer isn’t intimately familiar with these expectations, they could inadvertently design an interface interaction that seems logical to them but breaks commonly accepted conventions.
• Users don’t like when an interface behaves very differently than they were expecting, and this could negatively impact their experience.
What is a good design
• A solution that serves the users and satisfies the client
1. Does what the users need and want
2. Natural to use
3. Helps them avoid trouble
Easy to say, very hard to do well
Outline
• Introduction
• User Interface / User eXperience
• User-centered design
• Thinking design
• Fundamentals of UI
• Fundamentals of UX
• Factors that influences UX
• Conclusion
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)
Two main points to
consider
• Human Capabilities
• Values and sensibilities of human
HUMAN CAPABILITIES
• Memory
• Attention
• Visual and Audio Perception
• Learning
• Language and 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
1. Ethnographics
o Age, gender, ethnicity
2. Skill level
o Novice, Knowledgeable, intermittent user
o Knowledgeable, frequent user
3. Mental or Physical abilities
4. Knowledge
o Domain experience
o Application experience
5. Environment
o Noisy, quiet
o Inside, outside…
6. Communication patterns
• Who are the users: novices or experts?
• What are users trying to accomplish?
• How often will the user be using the system?
o Should the design emphasize ease of use and learning or efficiency?
• What information do they need to accomplish their task?
• How easily can they identify the information they need and the steps needed to accomplish their tasks?
• Is the information and task structures (aka the system) accessible to everyone?
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
Outline
• Introduction
• User Interface / User eXperience
• User-centered design
• Design Thinking
• Fundamentals of UI
• Fundamentals of UX
• Factors that influences UX
• Conclusion
Design thinking
• Design thinking is an iterative process in which we seek to understand the user, challenge assumptions, and redefine problems in an attempt to identify alternative strategies and solutions that might not be instantly apparent with our initial level of understanding.
• At the same time, design thinking provides a solution-based approach to solving problems.
• It is a way of thinking and working as well as a collection of hands-on methods.
Design thinking
• Design thinking revolves around a deep interest in developing an understanding of the people for whom we’re designing the products or services.
• It helps us observe and develop empathy with the target user.
• It helps us in the process of questioning:
o questioning the problem, assumptions, and implications.
• Design thinking is extremely useful in tackling problems that are ill defined or unknown, by re-framing the problem in human-centric ways, creating many ideas in brainstorming sessions, and adopting a hands-on approach in prototyping and testing.
• Design thinking also involves ongoing experimentation:
o sketching, prototyping, testing, and trying out concepts and ideas.
Design Thinking’s Phases
• There are many variants of the design thinking process in use today, and they have from three to seven phases, stages, or modes.
• However, all variants of design thinking are very similar—they all embody the same principles,
1. Empathize – with your users
2. Define – your users’ needs, their problem, and your insights
3. Ideate – by challenging assumptions and creating ideas for innovative solutions
4. Prototype – to start creating solutions
5. Test – solutions
• It is important to note that the five phases, stages, or modes are not always sequential.
• They do not have to follow any specific order.
• What’s more, they can often occur in parallel and repeat iteratively.
• As such, you should not envision the phases as a hierarchal or step-by-step process.
• Instead, you should understand it as an overview of the modes or phases that contribute to an innovative project, rather than sequential steps.
Outline
• Introduction
• User Interface / User eXperience
• User-centered design
• Thinking design
• Fundamentals of UI
• Fundamentals of UX
• Factors that influences UX
• Conclusion
Fundamentals of UI Design
• Know your users
• Color and contrast
• White spaces
• Images
• Visual Hierarchy
• Keep it simple
• Create consistency
• Provide feedback
• Be resilient
• Rewards users
Know your users
o You have to integrate the goal of users into your UI
o Find out what interfaces they likes and sit down and watch how they use them
o Discuss about the product with everyone:
• Families, friends, strangers, everyone
Know your users
• There is no need te reinvent the wheel
o If it works well
• You should stay to those patterns that users are most familiar with
• Stick to most common UI elements of the community.
• Users will be rapidly familliar with the interface
Color and contrast
• Use colors and contrasts to
o attract the attention of the user
o Facilitate reading
o Have a pleasant view
White (empty) spaces
• White space is a vital part of an aesthetic visual.
• Allow to not overwhelm the user
o Be succinct and clear
o People will not read all the detail information
o People will be focus for around height seconds on your content
Images
• With visuals being a considerable element of application or web page design, they should always be high quality.
o Make sure you have the appropriate copyright
Visual Hierarchy
• Help to attract the attention of the user
• Here
o All information are on the same level
o It is hard to catch what is the most important info
Visual Hierarchy
• Help to attract the attention of the user
o Here
• On the first look, you get what is important
Use typography to create hierarchy
• Make design clean and readable
• Keep thing conversational not sensational
• Provide clear and concise label for actions and keep your messaging simple
• Do not make overloading shadows, bright colors or inconsistence typography
• Best interfaces are invisible
o Here,
• There is so many special effect that it is hard for the user to focus
o Here,
• There is a more simple and more effective design
Create consistency
• Users need consistency as the are comfortable with.
• Once they learn something they are willing to do it again.
• Regarding UI, users will perform some actions in a mechanic way (Subconsciently)
o Same color for the same action
Provide feedback
• The interface should at all time speak to the user
• For whatever actions of the user: provide a feedbacks
• By offering a feedback in the UI, the user will be able if necessary to identify if the action is good, bad or misunderstood
Be resilient : users will make mistakes
• No matter how clear your UI is, people will make mistakes
• The UI should tolerate user errors
• Guide the user in order to correct errors
Reward users
• One a user became experienced with the interface, reward him for
• Gamification is the best way of rewarding users in applications
o Think about rewards, animations
Keep moving forward
• When creating a UI, you will make mistakes
• Just keep moving forward
• Rework the UI multiple times
Outline
• Introduction
• User Interface / User eXperience
• User-centered design
• Thinking design
• Fundamentals of UI
• Fundamentals of UX
• Factors that influences UX
• Conclusion
Fundamentals of User eXperience
• User Experience (UX) is critical to the success or failure of a product in the market, but what do we mean by UX?
• All too often, UX is confused with usability, which describes how easy a product is to use.
• While it is true that UX as a discipline began with usability, UX has grown to accommodate much more than usability, and paying attention to all facets of UX in order to deliver successful products to market is vital.
Fundamentals of UX
• Visual design: how to setup the look and feel of the product
• Information Architecture: how to organize the information.
o Let the use find information with the product
• Market research: help to understand needs and experiences of users.
o This way, you know how the product can be used to achive goal
• Interaction design: how to engage the user, anticipate interactions
• Usability : see previous definition
Outline
• Introduction
• User Interface / User eXperience
• User-centered design
• Thinking design
• Fundamentals of UI
• Fundamentals of UX
• Factors that influences UX
• Conclusion
7 factors that influence UX:
1. Useful
2. Usable
3. Findable
4. Credible
5. Desirable
6. Accessible
7. Valuable
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.
o 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—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.
Outline
• User Interface / User eXperience
• User-centered design
• Thinking design
• Fundamentals of UI
• Fundamentals of UX
• Factors that influences UX
• Conclusion
We learned about
• UI/UX
• Thinking design
• Fundamentals of UI
• Fundamentals of UX
• Factors that influences UX
Lesson 2
Design of interactive systems
Outline
o User Interface
o Ergonomics
o User centric desing
o Product development process
o Discover an idea
o Root cause analysis
o Conclusion
Interactive System
o Components, devices, products and software systems that process information.
o Interactive systems are things that perform the transmission, display, storage or transformation of information that people can perceive.
o Devices that respond dynamically to people's actions.
• Phone, website, game controller
Interfaces of Interactive
• Ways to ask and to get feedbacks are required
User Interface
• User Interface is the link between humans and a product
• Above all, any system must respond to a need
• The interface is the part of the system that is user- friendly
System
User Interface
• The interface is essential because it is the one that will allow the user to achieve the task to be accomplished
• The role of the designer is to arrive with an interface that is appropriate to the objective of the system
•
Designer
System
User Interface
• All parts of the system with which people come into physical, perceptual and conceptual contact:
o Physics: we handle a controller that offers more or less resistance
o Perceptual: the device renders sensory information (visual or sound) that are able to interpret
o Conceptual: from what we perceive from the device, we get an idea of the system
• The result is three ergonomical needs:
o Physiological, cognitive, emotional
o
Outline
o User Interface
o Ergonomics
o User centric desing
o Product development process
o Discover an idea
o Root cause analysis
o PACT
o Conclusion
Ergonomics
• Ergonomics (commonly referred to as human factors) is the application of psychological and physiological principles to the engineering and design of products, processes, and systems.
• The goal of human factors is to reduce human error, increase productivity, and enhance safety and comfort with a specific focus on the interaction between the human and the thing of interest.
• Ergonomics is the scientific discipline concerned with the understanding of interactions among humans and other elements of a system, and the profession that applies theory, principles, data and methods to design to optimize human well-being and overall system performance.
Ergonomics factor
• Usefulness is a significant advantage or amenity for the user in a specific activity (efficiency, cost, speed, accuracy).
o Why this product, what needs does it meet?
• Usability can be defined as the measure (or probable estimate) of user performance, in the context and for intended use.
o Usability is measured by various indicators such as ease of learning, ease of memorization, error-free use, etc.
o It is always related to a given task, a realisation context and a targeted population of users.
Usefulness versus Usability
• Usefulness
• Utility
• Safety
• Flexibility
• Stablity
• Usability
• Simplicity
• Memorability
• Predictability
• Visibility
Usefulness
• Efficiency describes the usefulness of the system.
• The interface must meet the needs of the user by offering the required functionality
• Utility refers to what the user can do with the system
• Safe: If a system has a high degree of security, it will be more useful than a system with a high degree of risk.
• Flexibility - A flexible tool can be used in multiple environments and can meet a variety of needs
• Personalization - Opportunity for people to customize the interface based on their personal preferences
• Stability - A stable system is a robust system. A system that always
works well will be more useful than a system that often crashes
Usability
• usabillity states that the design must allow a user to complete tasks in the easiest and fastest way possible without having to do too complex or foreign procedures.
Simplicity - If things are simple, they will be easy to understand and therefore easy to learn and memorize
• Limiting choices
• The selection of dates
• Add constraints
• formatting email addresses
Usability
• Memorability - Easily memorable interfaces will be easier to learn and use
• Many different parameters affect memorability:
• Location, Logical grouping, conventions, redundancy
• Consistency-Correctness
• Consistency strengthens our associations and as a result, increases our ability to retain and predict outcomes and processes.
Usability
• Predictability - Predictability implies a person's expectations and ability to determine the results of their actions in advance.
• Generalization: can help us reuse knowledge from past experiences and apply it to similar situations
• Conventions: allow us to use our intuitions
• Knowledge: Familiar menu names and options help users locate objects and features more easily
•
Usability
• Visibility - The visibility principle is to make the user aware of system components and processes, including all possible features and comments from user actions.
o Gradual presentation of information
o Provide feedback on equities
o Remember that it is easier to differentiate than to identify
o Make options visible only in the right context
o
Ergonomic factors
• Accessibility relates to the development of access to information systems for people with disabilities.
•
• Health and Safety groups together all the possible negative consequences associated with the use of a system, especially for the user, his health (health, accident) and his environment.
•
• Satisfaction or pleasure (enjoyment) refers to the overall positive experience that makes a lasting mark on users of the designed product or tool.
•
• Acceptability refers to the positive or negative value of an individual's (or group) image of the tool or system
•
Ergonomic factors
• Cognitive ergonomics is the study of human interactions with a
system that requires the use of the great mental functions of the latter
(perception, memory, treatment).
o It also investigates the potential mental load problems that result from this interaction.
Ergonomic factors
• Physiological ergonomics: Can the person's body meet the requirements of the application
• Imagine a switch that would be located on the side of the rotation axis of a door.
o What do you think abput these so bad designs?
Emotional ergonomics
• It analyzes whether the product has unsuspected emotional elements
• We study how to bring emotion into the product
• Emotional design mainly allows:
o Maintaining personalized relationships with target users
o To increase the conversion rate
o To promote brand recognition
o Strengthening user loyalty
o Making an original interaction
Outline
o User Interface
o Ergonomics
o User centric desing
o Product development process
o Discover an idea
o Root cause analysis
o PACT
o Conclusion
Design process
• is rarely a simple process, it involves many iterations and analysis of requirements
o what the system is supposed to do and the features it should offer
o possible solutions.
•
• There are many definitions of design.
o Most definitions recognize that the problem and the solution must evolve during the design process;
o it is rare to be able to properly specify "something" before a design work has been done.
o
• Study and understand user activities and aspirations and the contexts in which technology may be useful
• Know possibilities of the technology
• Seek and design technology solutions that are aligned with users, the activities they want to undertake and the contexts in which these activities occur
• Evaluate alternative designs and iterate (do more research and more design) until an optimal solution
Machines versus people
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
User-centric design
• Designing interactive systems is like creating interactive experiences for people.
• Being user-centered means putting people first, so we need to create systems that can help people and that people can benefit from.
o Thinking about what people want to do rather than what technology can do
o Designing new ways to connect people
o Involve users in the design process
o Design for people's diversity
Exercices
• Do you think that these devices are user-centered?
o Computer keyboard
o Smarthphones
o Virtual reality headsets
o Email clients
• Justify your answer.
Outline
o User Interface
o Ergonomics
o User centric desing
o Product development process
o Discover an idea
o Root cause analysis
o Conclusion
• Discover
o Learn everything you can
• The market
• The competitors
• Who you are selling to
• Access to resources
o Tools to work on the idea
• Root Cause Analysis
• PACT framework
Define
• Plan the idea
• Think through a Functional Spec and put it on paper
• Plan your timing
• Plan for hiccups
Design
• Get a rough-sketch concept
• Test it with friends, family, others
• Create the primary screens
Develop
• Use the creative and have the code built to plan
• Have other screens created
• Integrate these into the build
• Test
Deploy
• Release a tested version
• Monitor what people are saying, doing
• See what works, what breaks
Build the next version
Outline
o User Interface
o Ergonomics
o User centric desing
o Product development process
o Discover an idea
o Root cause analysis
o Conclusion
• Discover
o A good idea
o What ressources you need to work on
o Tools to work on the ideas
• What makes a good idea?
• Ideas can come from anywhere
• Good ideas have to fill a need or create a desire
- Where did digital social media come from?
- Did we need it or did we learn to desire it?
• Envision the final product
• What does it do?
• How do you interact with it?
• Is it for a single purpose or will I expand it?
• Then work backward through the steps to get there.
What is already in the market?
• Know your competition
• Find a way to be better, faster, smarter
• Build a better mousetrap
What resources do you need?
• Time
• People
• Money
• What resources do you need?
o Time
• Are you full-time on the project?
• Are you part-time?
• Be realistic. Everything takes more time than expected.
• What resources do you need?
o People
• The number-one most difficult resource to find is the
• Creative
• Development
• Marketing
• What resources do you need?
o Money
• Always available for the right idea
• Know how much you’ll need
• New funding sources like Kickstarter.com
- Crowdsourcing an investment in the ideas
Outline
o User Interface
o Ergonomics
o User centric desing
o Product development process
o Discover an idea
o Root cause analysis
o Conclusion
the root causes of faults or problem
• RCA can be decomposed into four steps:
o Identify and describe the problem clearly.
o Establish a timeline from the normal situation up to the time the problem occurred.
o Distinguish between the root cause and other causal factors (e.g., using event correlation).
o Establish a causal graph between the root cause and the problem.
Definitions
Root Cause – Deepest underlying cause(s) of positive or negative symptoms within any process that, if resolved, would eliminate or
substantially reduce the symptom .
Root Cause Analysis (RCA) – a tool used both reactively, to investigate an adverse event that already has occurred, and proactively, to analyze and improve processes and systems before they break down (Preuss, 2003) .
Data Analysis – the process of gathering, reviewing, and
evaluating data .
Symptoms – the noticeable gap between expectations and reality; the “red flag” that draws attention to the issue.
• Helps resolve the Problem
• Eliminates Patching
• Conserves Resources
• Facilitates Discussion (leading to solutions)
• Provides Rationale for Strategy Selection
The RCA process
• The process of determining root cause was used most notably in the business sector
o Toyota, in particular, used the system for their production .
o The process is being used in other sectors as well .
• We will see two ways to implement this approach .
Example
• Imagine an investigation into a machine that stopped because it overloaded and the fuse blew.
• Investigation shows that the machine overloaded because it had a bearing that wasn't being sufficiently lubricated.
• The investigation proceeds further and finds that the automatic lubrication mechanism had a pump which was not pumping sufficiently, hence the lack of lubrication.
• Investigation of the pump shows that it has a worn shaft.
• Investigation of why the shaft was worn discovers that there isn't an adequate mechanism to prevent metal scrap getting into the pump.
• This enabled scrap to get into the pump, and damage it.
• The apparent root cause of the problem is therefore that metal scrap can contaminate the lubrication system.
• Fixing this problem ought to prevent the whole sequence of events recurring.
• The real root cause could be a design issue if there is no filter to prevent the metal scrap getting into the system.
• Or if it has a filter that was blocked due to lack of routine inspection, then the real root cause is a maintenance issue.
• Compare this with an investigation that does not find the root cause: replacing the fuse, the bearing, or the lubrication pump will probably allow the machine to go back into operation for a while.
• But there is a risk that the problem will simply recur, until the root cause is dealt 49 with.
Conditions that may limits the RCA
1. Important information is often missing because it is generally not possible, in practice, to monitor everything and store all monitoring data for a long time.
2. Gathering data and evidence, and classifying them along a timeline of events to the final problem, can be nontrivial.
o In telecommunications, for instance, distributed monitoring systems typically manage between a million and a billion events per day. Finding a few relevant events in such a mass of irrelevant events is akin to finding the proverbial
needle in a haystack.
3. There may be more than one root cause for a given problem, and this multiplicity can make the causal graph very difficult to establish.
4. Causal graphs often have many levels, and root-cause analysis terminates at a level that is "root" to the eyes of the
investigator. 50
Determining the Root Cause
What is the underlying cause(s) of symptoms, that if resolved, would eliminate or reduce the symptom?
Two ways are possible :
• The Five Whys. A process to seek root cause by asking “why”five times in succession.
• System Planning Process. Problem solving approach asks 4 questions:
Where are we now? Where are we going? How will we get there? What is holding us back?
Asking the question ‘Why’ 5 times, will lead you to the root cause of the problem .
Steps:
1. Write down the specific problem . Writing the problem helps team focus on the same problem .
2. Ask why the problem happens and write down the answer. Repeat 5 times – 5 ‘Whys’ , until team is in agreement that problem is identified .
See web resource:
http://www.isixsigma.com/index.php?option=com_k2&view=item&id=1308:&Itemid=49
• Why did the user failed to log in?
• She typed the wrong password.
• Why she typed the wrong password?
• She forgot it.
• Why she forgot it?
• We have a constraint
• Why she didn’t used the reset process?
• She tried but did not get the email before 30s.
• Why such a delay in the process?
• Because, we are using a third party plugin
System Planning Process
— System Planning Process. Problem solving approach asks 4 questions:
vWhere are we now?
vWhere are we going?
vHow will we get there?
vWhat is holding us back?
Indicators that you have found Root Cause
—Agreement on a root cause.
—Cause is logical, makes sense, and provides clarity to the problem.
—Cause is something you can influence and control
—If cause is resolved, there is realistic hope that the problem can be reduced or prevented in the future.
Conclusion
o User Interface
o Ergonomics
o User centric desing
o Product development process
o Discover an idea
o Root cause analysis
o Conclusion
Lesson3
PACT
Outline
o Introduction
o People
o Activity
o Context
o Technology
o Examples of technologies
o Conclusion
The PACT framework
• PACT (People, Activities, Contexts, Technologies) is a useful framework for thinking about a design situation.
• Designers need to understand the people who will use their systems and products.
• They need to understand the activities that people want to undertake and the contexts in which those activities take place.
• Designers also need to know about the features of interactive technologies and how to approach designing interactive systems.
Aims of the PACT framework
• Understand the relationship between activities and Technologies
• Understand the main characteristics of people that are relevant to designing interactive systems
• Understand the main issues of activities and the contexts in which they occur.
• Understand the key features of interactive technologies
PACT: Four entities to master
• People
o Who will be the users of the system?
• Activity
o What characterizes the targeted activity?
• Context
o The activity takes place in what context
• Technologie
o What technology can meet the targeted need
Users
• It is important to understand the users
o Sociology: the impact of the social dimension on human representations (ways of thinking) and behaviours (ways of acting).
o Cognitive Psychology studies the great psychological functions of human beings such as memory, language, intelligence, reasoning, problem solving, perception or attention.
o Ergonomics brings together knowledge about the functioning of the working man in order to apply it to the design of tasks, machines, tools, buildings and production systems.
o
Users
• Who will be the users of the system?
o Economical and social groups . 20-25, 30-40 years, 60
o Professionals, young parents, retirees, grandparents
o Where targeted people live
o Interest of the target population
o Level of education
o Level of familiarity with targeted need
o Taking into account the differences between people
o Hadicaps
o
Mental models
• The understanding and knowledge that we possess of something is often referred to as a ‘mental model’
• People develop mental models through interacting with systems
o observing the relationship between their actions and the behaviours of the system and reading informations about the system.
• It is important that designers provide sufficient information in the interface (and any accompanying documentation) for people to form an accurate mental model.
• People will assume similar objects work the same way
o Increase the temperature of the iron to iron faster
Mental models
• Users develop an understanding of a system through 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 aspect of the external world enabling predictions to be made
• Involves unconscious and conscious processes, where images and analogies are activated
(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
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 How shallow?
• 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.
Multiple mental models
• A user may have different mental model
• Expert users may have different mental models than novice users
Activities
• Many characteristics of activities need to be considered
• Here, an activity may refer a very simple task as well as highly complex, lengthy activities
• 10 Characteristics to consider:
• 1) Temporal aspects cover how regular or infrequent activities are.
o Something that is undertaken every day can have a very different design from something that happens only once a year.
• People will soon learn how to make calls using a mobile phone, but may have great difficulties when it comes to changing the battery.
• Designers should ensure that frequent tasks are easy to do, but they also need to ensure that infrequent tasks
are easy to learn (or remember) how to do. 19
Activities
• 2) Time pressures, peaks and troughs of working.
o A design that works well when things are quiet can be awful when things are busy.
• 3) Interuptions
o Some activities will take place as a single, continuous set of actions whereas others are more likely to be interrupted. If people are interrupted when undertaking some activity,
• the design needs to ensure that they can ‘find their place’ again and pick up.
• It is important then to ensure that people do not make mistakes or leave important steps out of some activity.
• 4) response time of the system
o What is the expectation pf the user?
Activities
• 5) Cooperation
o Is cooperation needed?
o If so, Issues of awareness of others and communication and coordination then become important.
• 6) Complexity
o If a task or activity is well defined it can be accomplished with a simple step-by-step design. A vague activity means that people have to be able to browse around, see different types of information, move from one thing to another and so on.
• 7 ) Safety-critical
o Study the impact of users ’ mistakes.
• Are mistakes critical?
• designers must pay every attention to ensuring that mistakes do not have a serious effect.
Activities
• 8) How to handle mistakes
• 9) Data entry requierement
o If large amounts of alphabetic data have to be input (recording names and addresses or word processing documents) then a keyboard is needed.
o In other activities there may be a need to display video or high- quality colour graphic displays.
o Some activities, however, require very modest amounts of data, or data that does not change frequently
• A library, for example, just needs to scan in a bar code or two, so the technology can be designed to exploit this feature of
the activity.
• 10) Display the information
o What information should be presented to the user?
Exercice
• List the main characteristics of the activity of sending an e-mail.
• Use the 10 points above to guide you.
Technology
• Use hardware and software to design the interactive system
o Next class, we disuss about Mobile and Virtual Reality technologies
• Input
o Input devices are concerned with how people enter data and instructions into a system securely and safely.
. Text, voice, etc.
• Output
o Technologies for displaying content to people rely primarily on the three perceptual abilities of vision, hearing and touch. The most fundamental output device is the screen or monitor.
Exercice
• Which input, output devices would you use for a tourist information ‘kiosk’ application to be sited in the arrivals area of an airport? The system allows people to book hotel rooms, etc., as well as to find information about the area.
• Explain your choices.
Exercice
• Write down a quick analysis (User, Activity, Context, Technology) for the introduction of a ‘point of sale’ system
o point of sale is where goods are priced and paid for for a café at a motorway service station.
o Discuss your ideas with a colleague.
Outline
o Introduction
o People
o Activity
o Context
o Technology
o Examples of technologies
• Virtual reality
• Augmented reality
• A day made of glass 1
• A day made of glass 2
Augmented reality
• A combination of
o a real scene viewed by a user and
o a virtual scene generated by a computer that
o People
o Activity
o Context
o Technology
o Examples of technologies
• Virtual reality
• Augmented reality
• A day made of glass 1
• A day made of glass 2
第四章
Types of UI
Outline
• Introduction
• UI design principles
• Interaction styles
• Graphical UI
• Conclusion
User Interface
• Interface is essential because it is the one that will allow the user to achieve the task he wants to accomplish
• The role of the designer is to arrive with an interface that is appropriate to the objective of the system
Designer
System
Outline
• Introduction
• UI design principles
• Interaction styles
• Graphical UI
• Conclusion
UI design principles
• UI design must take account of the needs, experience and capabilities of the system users
• Designers should be aware of people’s physical and mental limitations (e.g. limited short-term memory) and should recognize that people make mistakes
• UI design principles underlie interface designs although not all principles are applicable to all designs
Principles of UI
• Familiarity The interface should use terms and concepts which are drawn from the experience of the people who will make most use of the system.
• Consistency : The interface should be consistent in that, wherever possible, comparable operations should be activated in the same way.
• Minimal surprise Users should never be surprised by the behavior of a system.
Principles of UI
• Recoverability The interface should include mechanisms to allow users to recover from errors.
• User guidance The interface should provide meaningful feedback when errors occur and provide context-sensitive user help facilities.
• User diversity : The interface should provide appropriate interaction facilities for different types of system user
Familiarity
• Familiarity The interface should use terms and concepts which are drawn from the experience of the people who will make most use of the system
• For example, an office system should use concepts such as letters, documents, folders etc., rather than directories, file identifiers, etc.
Consistency
• The system should display an appropriate level of consistency.
• For example : Commands and menus should have the same format, command punctuation should be similar, etc.
• You should have a precise set of colors for the system
o A color conserves it meaning in the all system
Minimal surprise
• A a result of the consistency of the system, users should be able to predict the result of its actions
Recoverability
• The system should provide some resilience to user errors and allow the user to recover from errors.
• This might include an UNDO facility, confirmation of destructive actions, 'soft' deletes, etc.
User guidance
• Some user guidance should be supplied
o help systems
o on-line manuals
User diversity
• Interaction facilities for different types of user should be supported.
• For example, some users have seeing difficulties and so larger text should be available
Outline
• Introduction
• UI design principles
• Interaction styles
• Information presentation
• Conclusion
User-system interactions
• Two problems must be addressed in interactive systems design
o How should information from the user be provided to the computer system?
• Interaction style
o How should information from the computer system be presented to the user?
• Information presentation
• User interaction and information presentation should be integrated through a coherent framework
Interaction styles
• Direct manipulation
o Video games, CAD system, Touch screens
• Menu-based (Menu selection)
o Most general-purpose systems
• Form fill-in
o Stock control
• Command language
o Operating systems, Library information retrieval systems
• Natural language
o Speech recognition enabled systems
Direct manipulation advantages
• Examples: Video games (displacement, camera), Touch screens (Zoom, Rotate, Scale)
• 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
o Is the most common system
• Microsoft Office, Menu on Touch screens
• 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
Graphical user interfaces
• Most users of business systems interact with these systems through graphical user interfaces (GUIs)
o although, in some cases, legacy text-based interfaces are still used
o Nowadays news technologies are also exploited:
• speech recognition, fingerprint
GUI advantages
• They are easy to learn and use
o Users without experience can learn to use the system quickly
• The user may switch quickly from one task to another and can interact with several different applications
o Information remains visible in its own window when attention is switched
• Fast, full-screen interaction is possible with immediate access to anywhere on the screen
Advantages of menu systems
• Users need not 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. Command interfaces are therefore unsuitable for occasional users
• Users make errors in commands. 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.
• Generally, the vocabulary is limited and these systems are confined to specific application domains (e.g. timetable enquiries)
• NL processing technology is now good enough to make these interfaces effective for casual users
o but experienced users find that they require too much typing
Outline
• Introduction
• UI design principles
• Interaction styles
• Graphical UI
• Conclusion
GUI
• Windows
• UI Elements
Windows
• The screen that defines how elements are organized on the rendered screen
o The layout of the page
Responsive design is needed
• Mobile browsing is more popular than desktop browsing.
• Websites are viewed on a variety of devices beyond traditional desktops--from smartphones to tablets to game consoles to large-screen televisions to vehicles.
• Responsive Web Design: A design that changes the layout of the page based upon the device viewing the site
UI elements
• Can be divided into:
o Text
o Buttons
o Widgets
o Container
o View
o Navigational Components
Text elements
• On the Android plateform:
• Main advantage of all these types of textEdit is that the virtual keyboard is adapted to the type of text
Button elements
• On the Android plateform:
Widget elements
• On the Android plateform:
Container elements
• On the Android plateform:
Container elements
• On the the web :
o Accordion
• An accordion is a vertically stacked list of items that utilizes show/ hide functionality. When a label is clicked, it expands the section showing the content within. There can have one or more items showing at a time and may have default states that reveal one or more sections without the user clicking
View elements
• On the Android plateform:
Navigational components
• On the web:
o Breadcrumb
• Breadcrumbs allow users to identify their current location within the system by providing a clickable trail of proceeding pages to navigate by.
o Slider
• SickBar , track bar, allows users to set or adjust a value.
o search field
• A search box allows users to enter a keyword or phrase (query) and submit it to search the index with the intention of getting back the most relevant results.
o Typically search fields are single-line text boxes and are often accompanied by a search button.
Navigational components
• On the web:
o Pagination
• Pagination divides content up between pages, and allows users to skip between pages or go in order through the content.
o Tags
• Tags allow users to find content in the same category.
• Some tagging systems also allow users to apply their own tags to content by entering them into the system.
o Icons
• An icon is a simplified image serving as an intuitive symbol that is used to help users to navigate the system.
• sTypically, icons are hyperlinked.
Help and documentation
• Help should be
o Searchable
o Context-sensitive
o Task sensitive
o Concrete
o Short
o NOT NEEDED
User always in control
• As UX designers we have let users be in control of the system
• Users must feel that they are in-charge
Example of controls
• Today you can change screen brightness, audio levels, dark and light themes of apps, connect or disconnect Bluetooth or Wi-Fi.
o gives users a feeling of feeling of satisfaction.
Group and chunking
• We humans can not handle large amount of information
o When grouping information, it becomes easier for users
• Interaction styles
• GUI
第五章
User centered
Outline
• Introduction
• Understanding
• Design
• Envision
• Personas
• Scenarios
• User journey maps
• Conclusion
An approach with 3 phases
• The first phase is inspiration.
o Understand the problem- needs
• The second phase is ideation
o Imagine multiple solutions - expectations
• The third phase is implementation.
o Prototype --viability
Design process in terms of the four activities
Evaluation is central to designing interactive systems.
o Everything gets evaluated at every step of the process.
The process can start at any
point
The activities can happen in
any order,
Outline
• Introduction
• Understanding
• Design
• Envision
• Personas
• Scenarios
• User journey maps
• Conclusion
Understanding
• Understanding is concerned with :
o what the system has to do
o what it has to be like
o how it has to fit in with other things
o What are the requirements of the product, system or service.
• Designers need to research the range of people, activities and contexts relevant to the domain they are investigating so that they can understand the requirements of the system they are developing.
• They need to understand the opportunities and constraints provided by technologies.
functional and non- functional requirements
• Functional requirements are concerned with
o what the system should be able to do
• the functional constraints of a system.
• It is important for the designer to think about the whole interaction experience in an abstract way.
• Deciding who does what, when something should be displayed or the sequence in which actions are undertaken should come later in
the design process.
• A good analysis of an activity will strive to be as independent of current practice as possible.
o Of course, there are always functional constraints – the realities of what is technically possible – which render certain ordering,
sequencing and allocation of functions inevitable.
o There are also logical and organizational constraints that may make particular designs infeasible.
Requirements
• are generated through discussions and interactions with
people who will use or be affected by the proposed system:
the stakeholders.
• are also generated through observations of existing systems, research into similar systems, what people do now and what they would like to do.
• can be generated through working with people in focus groups, design workshops and so on, where different scenarios can be considered.
o The aim is to collect and analyse the stories people have to tell.
• are essentially about understanding.
Outline
• Introduction
• Understanding
• Design
• Envision
• Personas
• Scenarios
• User journey maps
• Conclusion
Design
• Design activities concern both conceptual design and physical design.
• Conceptual design is about designing a system in the abstract
• Physical design is concerned with making things concrete.
Conceptual design
• Conceptual design is about considering what information and functions are needed for the system to achieve its purpose.
• It is about deciding what users will have to know to use the system.
• It is about finding a clear conceptualization of a design solution and how that conceptualization will be communicated to people
o so that people will quickly develop a clear mental model.
Conceptual design
• There are a number of techniques to help with conceptual
A ‘rich picture’
• A rich picture captures the main conceptual relationships between the main conceptual entities in a system – a model of the structure of a situation
• This is the conceptual model of processing.
• The principal stakeholders – customers, actors, system owners – should be identified.
• The designer should also consider the perspective from which an activity is being viewed as a system
• The rich picture identifies the issues or concerns of the stakeholders, thus helping to focus attention on problems or potential design solutions.
Design associated with a
Physical design
• Physical design is concerned with how things are going to
work and with detailing the look and feel of the product.
• Physical design is about structuring interactions into logical
Physical design
• There are three components to physical design:
o operational design
o representational design
o design of interactions
Operational design
• is concerned with specifying how everything works and how content is structured and stored.
• Taking a functional view of an activity means focusing on processes and on the movement, or flow, of things through a system.
• Events are occurrences that cause, or trigger, some other functions to be undertaken.
• Sometimes these arise from outside the system under consideration and sometimes they arise as a result of doing something else.
o an activity might be triggered on a particular day or at a particular time
o another might be triggered by the arrival of a person or document.
and information layout.
• It is concerned with style and aesthetics and is particularly important for issues such as the attitudes and feelings of people, but also for the efficient retrieval of information.
Style
• Style concerns the overall ‘look and feel ’ of the system.
o Does it appear old and ‘clunky ’ or is it slick, smooth and modern?
• What mood and feelings does the design engender?
o Most Microsoft products engender an ‘office’ and ‘work ’ mood, serious rather than playful.
o Many other systems aim to make the interaction engaging, some aim to make it challenging and others entertaining.
• In multimedia and games applications this is particularly important.
Interaction design
• Interaction design, in this context, is concerned with the allocation of functions to human user or to technology and with the structuring and sequencing of the interactions.
• Allocation of functions has a significant impact on how easy and enjoyable a system is to use.
• Designers create tasks for people by the way they allocate functions.
For example, consider the activity
of making a phone call.
• Conceptually speaking, certain functions are necessary: indicate a desire
Outline
• Introduction
• Understanding
• Design
• Envision
• Personas
• Scenarios
• User journey maps
• Conclusion
Envisionment
• Designs need to be visualized both to help designers clarify their own ideas and to enable people to evaluate them.
• Envisionment is concerned with finding appropriate
• media in which to render design ideas.
• The medium needs to be appropriate for the stage of the process, the audience, the resources available and the questions that the designer is trying to answer.
• All forms of techniques that may help to bring abstract ideas to life
o Sketches, scenarios, storyboard
o Adobe XD
Evaluation
• Evaluation is tightly coupled with envisionment because the nature of the representation used will affect what can be evaluated
• The evaluation criteria will also depend on who is able to use the representation.
• Any of the other design activities will be followed by an evaluation.
• It could be
o simply the designer checking through to make sure something is complete and correct.
o a list of requirements or a high-level design brief that is sent to a client
o an abstract conceptual model that is discussed with a colleague
o a formal evaluation of a functional prototype by the future system users.
Outline
• Introduction
• Understanding
• Design
• Envision
• Personas
• Scenarios
• User journey maps
• Conclusion
Personas and scenarios
• PACT system discussed about people who will use the system in some specific contexts
• The people who will use the system are represented by personas :
o Profil of different archetypes of people the designer is designing for
• Activities and the contexts in which they will occur are envisioned through scenarios of use.
• Different concrete scenarios can be used to envision how different technologies could function to achieve the overall purpose of the system.
• Personas and scenarios are developed through the understanding process, using any of the wide range of methods.
• Almost inevitably, personas and scenarios evolve together as thinking about people involves thinking about what they want to do, and thinking about activities involves thinking about who will be undertaking them!
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.
Personas
• Personas are concrete representations of the different types of people that the system or service is being designed for.
• Personas should have a name, some background and, importantly, some goals and aspirations.
• Personas want to be able to do things using your system.
• They want to achieve their aims, they want to undertake meaningful activities using the system that the designer will produce.
• Designers need to recognize that they are not designing for themselves.
• Designers create personas so that they can envisage whom they are designing for.
• They create personas so that they can put themselves in other people’s shoes.
Example
• As any new system is likely to be used by different types of people, it is important to develop several different personas.
• For example, in designing a website for people interested in the author Robert Louis Stevenson,
o we developed personas for a school teacher in Germany, a university lecturer from the UK, a child in Africa and a Robert Louis Stevenson enthusiast from the USA.
• Such a diverse group of people have very different goals and aspirations, and differ in all the ways
o physically, psychologically and in terms of the usage they would make of the site.
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
Location Where does he/she live & work?
Professional What is their job? If B2B, add detail on role in decision making, influence, responsibilities
Education Level and kind of schooling completed
Usage & loyalty Type of usage, online stats, how they engage with us, behavior, usage rate, how loyal
Attitude & Beliefs What does he/she think of us? The category?
Lifestyle Social group, status, openness to innovation, media habits, proficiency
Interests &
Hobbies What does he/she do in their free time, how important is that to them?
Usage Goals What is she/he looking to accomplish? How important is it to them?
Emotional Goals /
Quote What is at stake emotionally? What would a quote in their words say?
Motivations &
Triggers What motivates him/her, what makes them tick?
Location Los Angeles, CA
Professional College Sophomore, studying psychology, planning to attain her masters degree
Education In 2nd year of college
Usage & loyalty Mobile first for all her banking, ATM second, rarely uses a PC/Mac to access her account, only went into a branch to open her account. Deposits check(s) via mobile app once per week.
Attitude & Beliefs She views us as local and involved in the community; she is ambivalent toward most banks
Lifestyle
Socially active but not obsessed, prefers action to talk, expects ease of use as baseline, watches 2 hours of TV via web & iPad apps, proficient across many digital devices
Interests & Hobbies Spends time with friends, going to restaurants, hiking, working out at the gym
Usage Goals She doesn’t want to have to worry about her finances. She expects us to help her make it simple.
Emotional Goals /
Quote “I want to be able to pay all my bills without having to worry, and not obsess over financial goals.”
Motivations & Triggers She cares about her friends, family, and wants to give back
• 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
• 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
Outline
• Introduction
• Understanding
• Design
• Envision
• Personas
• Scenarios
• User journey maps
• Conclusion
Scenarios
• Scenarios are stories about people undertaking activities in contexts of using technologies.
• They appear in a variety of forms throughout interactive systems design and are a key component of many approaches to design.
• Scenarios have been used in software engineering, interactive systems design and human–computer interaction work for many years.
Scenarios
• More recently, scenario based design has emerged as an important approach to the design of interactive systems.
• Scenarios are effective at dealing with five key problems of design
o The external factors
o Design moves
o How scientific knowledge and generic solutions lag behind specific situations.
o The importance of reflection and action in design.
o The slippery nature of design problems.
USING SCENARIOS
THROUGHOUT DESIGN
• Scenarios (and personas) are a core technique for interactive
• We distinguish four different types of scenario:
o stories, conceptual scenarios, concrete scenarios and use cases.
• Stories are the real-world experiences of people.
• Conceptual scenarios are more abstract descriptions in which
Stories
• Stories are the real-world experiences, ideas, anecdotes
Example of story
• Here is a story from someone describing what happened last
time he made an appointment to see his local doctor.
‘I needed to make an appointment for Kirsty, my little one. It
she’s so good with the children. And of course ideally it had to
asked when the next one was. The receptionist said Thursday
still free. ’
Requirements and problems
• In the gathering of people’s stories and during the analysis and abstraction process, various issues and difficulties will come to light.
• These help the analyst/designer to establish a list of requirements – qualities or functions that any new product or system should have.
Conceptual scenarios
• Conceptual scenarios are more abstract than stories. Much of the context is stripped away during the process of abstraction and similar stories are combined.
• Conceptual scenarios are particularly useful for generating design ideas and for understanding the requirements of the system.
Example
• Booking an appointment
• People with any degree of basic computer skills will be able to contact the doctors ’ clinic at any time via the Internet and see the times which are free for each doctor. They can book a time and receive confirmation of the appointment.
Concrete scenarios
• Each conceptual scenario may generate lots of concrete scenarios.
• When designers are working on a particular problem or issue they will often identify some feature that applies only under certain circumstances.
o At this point they may develop a more specific elaboration of the scenario and link it to the original.
o Thus one reasonably abstract scenario may spawn several more concrete elaborations which are useful for exploring particular issues.
• Notes that draws attention to possible design features and problems can be added to scenarios.
• Concrete scenarios also begin to dictate a particular interface design and a particular allocation of functions between people and devices.
• Concrete scenarios are particularly useful for prototyping and envisioning design ideas and for evaluation because they are more prescriptive about some aspects of the technology.
• However, there is not a clean break between conceptual and concrete scenarios.
o The more specific the scenario is about some aspects, the more
concrete it is
young daughter Kirsty in the next week or so.
• The appointment needs to be outside school-time and Andy’s core working hours, and ideally with Dr Fox, who is the children’s specialist.
• Andy uses a PC and the Internet at work, so has no difficulty in running up the appointments booking system.
• He logs in [1] and from a series of drop-down boxes, chooses to have free times for Dr Fox [2] displayed for the next two weeks [the scenario would continue to describe how Andy books the appointment and receives confirmation].
Notes to booking an appointment/01
• 1. Is logging in necessary? Probably, to discourage bogus access to the system, but check with the clinic.
• 2 Free times can be organized by doctor, by time of day, or by next available time.
Drop-down boxes will save screen space but may present problems for less experienced users or those with poor eyesight.
Use cases
• A use case describes the interaction between people (or other ‘actors’) and devices.
• It is a case of how the system is used and hence needs to describe what people do and what the system does.
• Each use case covers many slight variations in circumstances – many concrete scenarios.
• Before use cases can be specified, tasks and functions have to be allocated to humans or to the device.
• The specification of use cases both informs and is informed by the task/function allocation process.
o This is the interaction design part of physical design.
• At different stages of the design process, scenarios are helpful in understanding current practice and any problems or difficulties that people may be having, in generating and testing ideas, in documenting and communicating ideas to others and in evaluating designs.
A SCENARIO-BASED DESIGN METHOD
Outline
• Introduction
• Understanding
• Design
• Envision
• Personas
• Scenarios
• User journey maps
• Conclusion
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.
• 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
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.
• 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
• 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
of the user experience:
1. Context: What is going on in your user’s day when they engage with your product?
o Are they in a rush? Worried? Planning an adventure?
2. Motivation: What drives your user to interact with your product?
o What are they hoping to get out of it? Why are they using your product instead of a
competitor’s—or nothing at all?
the problem space that your product addresses?
o What concepts and connections come naturally to them, and what do they need to be taught?
4. Pain points: What are the challenges users are facing?
o Is your product helping them solve these or aggravating them? Are there any obstacles they have to using your product?
Example : The commuter
• Context: It looks like rain right now.
• Motivation: I don’t want to get wet on my way to and from work.
• Pain points: I need reliable information about the weather by the hour.
• Mental models: I have time windows where I expect to be biking to and from work. I want to make sure that if rain intersects with any of those windows, I know to walk instead so I can bring my umbrella. If it’s rain AND high winds, that will tear apart my umbrella, so I’ll take the bus or a taxi.
Example : The picnic host
• Context: I’m making weekend plans and want to have a picnic.
• Motivation: I want to know which day this weekend has the best weather for outdoor activities.
• Pain points: I want to know with certainty what the weather is going to be a few days in advance so I can plan accordingly.
• Mental models: Picnics are best when the weather is between 70 and 80 degrees and sunny— but temperature is more important than sun; I’ll try to find a day with both, but prioritize temperature if both aren’t available.
Example: The forgetful gardener
• Context: I can’t remember if it rained this week.
• Motivation: I need to know recent precipitation totals so I don’t overwater my plants.
• Pain points: Finding historical weather data is complicated and time consuming.
• Mental models: Usually I just care about the last 3 days, but a really major rainstorm would soak them for a week. Total precipitation is all that matters.
• With this mapping you have all you need to create a product that fits the user’s needs
• Your product has to target these aspects:
o Utility
o Usability
o Emotion
Examples:
• Features
• Price
• Selection
Examples:
• Convenient
• Easy
• Intuitive
Examples
• Stylish
• Reputable
• Trusted
What your product/service offers customers functionally
How easy is it to engage
your organization and
offerings
How meaningful
experiences
are at an emotional level
User Journey
Conclusion
• Introduction
• Understanding
• Design
• Envision
• Personas
• Scenarios
• User journey maps
• Conclusion
第六章
Psychophysics
Outline
• Introduction
• Design principles
• Visual perception of stimuli and implications in UI
• Gestalt and Implications in UI
• Vision and implication in UI
• Implication of User psychology in UI
• Conclusion
User psychology
• In the context of UI and UX design, we can say that people are goal oriented
o They need a goal
• Each may screen should have a clear goal
o Account, feeds, etcs.
o They need to know broadly the steps to will reach that goal
• Between four to five steps is acceptable
• While performing, some want to know where they are in the process
o People, would like to perform little effort to reach their goal
• They will not read lot of texts
• They will just glance at the screen and expect too grasp all important information
• They may not be concentrated on the task
o People do not like to read
How do they do
• 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
•
Therefore
• How do we create elegant solutions to complex interaction problems?
• How do interaction designers succeed at creating great designs that are powerful and aesthetically appealing?
Outline
• Introduction
• Design principles
• Visual perception of stimuli and implications in UI
• Gestalt and Implications in UI
• Vision and implication in UI
• Implication of User psychology in UI
Principles of Interaction Design
Design principles can be used to guide design
decisions
• Design principles do not prescribe specific
• Design principles guide interaction designers
Framework for Design Principles
Functionality - The system must have adequate functionality for a
particular task.
Presentation Filter - The functionality must be made accessible through the presentation filter (interface).
Framework for Design Principles
Comprehensibility Barrier - If the presentation is comprehensible, the comprehensibility barrier will be superseded. This depends on the degree of efficiency/usability in the interface design.
Learnability Barrier – If the interface is comprehensible it will be
learnable, there is a direct relationship.
Effectiveness/Usefulness - If the user can learn the interface he can take advantage of the functionality and the interface will, therefore, be useful.
• An interface design that is easy to comprehend will be efficient and effective
• If a user does not understand the interface it will be useless
• A design’s comprehensibility is highly dependent on the way in which the interface communicates its functionality to the user
An interface with high usability will be easier to learn
• The learnability of a design is based on comprehensibility: if you can’t understand it, you can’t learn it
• Learnability and comprehensibility are recursive: we start with comprehensibility which affects learnability, which will in turn increase comprehensibility.
Comprehensibility/Learnability Feedback Loop
Implications
• Most of the user perception is unconscious
• The design has to exploit characteristics of human perception
• Our goal in designing is to promote key elements that may guide the user through what they are intend to do
o You can perceive the difference between these two buttons…
Continue
Outline
• Introduction
• Design principles
• Visual perception of stimuli and implications in UI
• Gestalt and Implications in UI
• Vision and implication in UI
• Implication of User psychology in UI
Visual perception of a
page
• We do not see the whole picture
• We are rather attracted by differences
• Weak signals are missed
• Overly strong signals cause fatigue
Too many strong signals
Too many weak/confusing
Size effect
• The same red button
Surround effect
• The same red color appears with a different brightness
Frame effect
• The shade of the red button is affected but the frame
Outline
• Introduction
• Design principles
• Visual perception of stimuli and implications in UI
• Gestalt and Implications in UI
• Vision and implication in UI
• Implication of User psychology in UI
Gestalt Principles of
Perception
• Figure-Ground: Basic premise
o We perceive our environment by differentiating between objects and their backgrounds
The Rubin Face/Vase Illusion
Mac Logo
Gestalt Principles of Perception
• The Gestalt Principles of Perception:
o Emergence
o Proximity
o Common region
o Similarity
o Closure
o Symmetry
o Continuation
o Common fate
Emergence
• People tend to identify elements first in their general outlined form.
• Our brain recognises a simple, well-defined object quicker than a detailed one.
Equidistant
Horizontal Proximity
Vertical Proximity
Proximity in UI
• grouping similar information, organising content and decluttering layouts.
• Its correct use will have a positive impact on visual communication and user experience.
• items that are related should stay close to each other
• unrelated items should stay further apart
• White space plays a vital role here
o it creates contrast guiding the users ’ eyes in the intended direction.
o can boost visual hierarchy and information flow, contributing in easy to read and scan layouts.
o
Proximity in UI
Common Region
• elements placed within the same region are perceived as grouped
• It can help with information grouping and content organisation
• can also achieve content separation or act as a focal point
• boosts hierarchy, scanability and assists in promoting information.
• The Common Region principle can hold together many different elements
o keeping them unified within larger groups.
• Can be achieve with the use of line, colour, shape and shadow.
• It can often be used to bring elements into the foreground, indicating interaction or importance.
• A good Common Region example would be the card UI pattern; a well defined rectangular space with different bits of information presented as one.
• Banners and tables are good examples as well.
Rows of Similar Objects
Columns of Similar Objects
Grouped Columns
• We tend to perceive similar elements as grouped or a pattern.
• We might think that they serve the same purpose
Similarity in UI
• To create similarity, one may use
o colour, size, shape, texture, dimension, and orientation;
• with some of them being more strongly communicative than others
o ex. colour > size > shapes
o Because of similarity, an object can get emphasised by being different from the rest
• this is called ‘Anomaly’ and can be used to create contrast or visual weight.
• It can draw the user’s attention to a specific piece of content (focal point) while assisting with scanability, discoverability and the overall flow.
Use of similarity
We can use the principle of Similarity in navigation,
links, buttons, headings, call to actions and more.
• A group of elements are often perceived to be a single recognisable form or figure
• also occurs when an object is incomplete, or parts of it are not enclosed.
• when presented with the right amount of information, our brain will jump to conclusions by filling in the gaps and creating a unified whole
Closure in UI
• Exploit closure to decrease the number of elements needed to communicate information, reducing complexity and making designs more engaging.
• Closure can help us minimise visual noise and convey a message, reinforcing a concept within a pretty small space.
• In Iconography, associated simplicity lets to communicate meaning, swiftly and clearly.
Symmetry principle
• Symmetrical elements tend to perceived as belonging together regardless of their distance, giving us a feeling of solidity and order.
• Symmetrical elements are simple, harmonious and visually pleasing. Our eyes seek those attributes along with order and stability, to make sense of the world.
Symmetry in UI
• Symmetry is a useful tool for communicating information quickly and efficiently.
• Symmetry feels comfortable helping us focus on what’s important.
• Symmetrical compositions are satisfying, but they can also get a bit dull and static.
• Visual symmetry tends to be more dynamic, and interesting.
• Adding an asymmetrical element to an otherwise symmetrical design can help with drawing attention while making an impression; something useful for any point of interest or a Call To Action, for example.
• Symmetry, along with a healthy amount of asymmetry is
important in any design.
Symmetry in UI
• It’s good to use
Symmetry for
portfolios,
galleries, product
displays, listings,
navigation,
banners, and any
content-heavy
page.
Continuation in UI
• Elements following a continuous line are perceived as
• Continuity helps us interpret direction and movement
through a composition .
• It takes place when aligning elements and it can help
• The Continuity principle strengthens the perception of
grouped information, creating order and guiding users
• The linear arrangement of rows and columns are good
examples of
Continuity.
• We can use them in menus and sub- menus, lists, product arrangements, carousels …
Common fate
• Elements moving towards the same direction are perceived as more related than those moving in different directions, or not moving at all.
Common Fate in UI
• Regardless of how far apart are the elements or how
We can use the Common Fate principle in expandable menus, accordions, tool-tips, product sliders, parallax scrolls and swiping indicators.
Alignment
• On the right, we see three groups
• On the left, we see three locations (similar items), an image, the titles
Outline
• Introduction
• Design principles
• Visual perception of stimuli and implications in UI
• Gestalt and Implications in UI
• Vision and implication in UI
• Implication of User psychology in UI
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
• 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 will not work in the periphery
• Users should not 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 not 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.
o 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
• Introduction
• Design principles
• Visual perception of stimuli and implications in UI
• Gestalt and Implications in UI
• Vision and implication in UI
• Implication of User psychology in UI
The user psychology
• Studies show that users are lazy
o 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
• Limited number of distinctive options
Forms should have 3 to 5 options
• Limited number of distinctive options
o Point out the best value
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
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
Conclusion
• Introduction
• Design principles
• Visual perception of stimuli and implications in UI
• Gestalt and Implications in UI
• Vision and implication in UI
• Implication of User psychology in UI
User psychology
• In the context of UI and UX design, we can say that people are goal oriented
o They need a goal
• Each may screen should have a clear goal
o Account, feeds
o They need to know broadly the steps to will reach that goal
• Between four to five steps is acceptable
• While performing, some want to know where they are in the process
o People, would like to perform little effort to reach their goal
• They will not read lot of texts
• They will just glance at the screen and expect too grasp all important information
• They may not be concentrated on the task
o People do not like to read
How do they do
• 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
•
Framework for Design Principles
Functionality - The system must have adequate functionality for a
particular task.
Presentation Filter - The functionality must be made accessible through the presentation filter (interface).
Visual perception of a
page
• We do not see the whole picture
• We are rather attracted by differences
• Weak signals are missed
• Overly strong signals cause fatigue
Gestalt Principles of Perception
• The Gestalt Principles of Perception:
o Emergence
o Proximity
o Common region
o Similarity
o Closure
o Symmetry
o Continuation
o Common fate
Consequences of vision pereption for Designers
• Peripheral animation is distracting
• Color will not work in the periphery
• Users should not need to use detail or color vision to discover things
• Avoid blue for elements requiring detail, or text
The user psychology
• Studies show that users are lazy
o 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
References
• https://medium.muz.li/gestalt-principles-in-ui-design- 6b75a41e9965
• https://medium.com/@eleana_gkogka/how-to- design-with-intention-5fee5f39e163
第七章
USE OF COLORS IN USER INTERFACES UQAC
OUTLINE
•Introduction
•Perception of colors
•Primary colors
•Using color in Interaction Design
•Color Concerns for Interaction Design
•Technical Issues Concerning Color
•Warm/cool colors
•Accent
•Association of colors
•Conclusion
INTRODUCTION
•What is the most decisive element on a website? You might think it is content, and right you are.
•Though, there are many circumstances affecting on how this content is perceived by user and if it is eyecatching at all.
•Firstly, you need to get readers' attention and then you can leave everything on the content.
•Colors play the ultimate role in design and in how a visitor feels on a website. You can manipulate design colors and so reach dreamlike success.
FIRST IMPRESSION IS IRREVOCABLE
•Fancy cover draws attention, excites, get users interested in the website.
•First impression is formed within maximum 7 seconds after a user opens a website.
•It is a big achievement to manage this and so ensure yourself more readers and presumably higher conversion rates.
•What helps users to form a quick impression of the site?
•It is the home page appeal.
•It includes all details, like Header design, background color, content arrangement, and colors of course.
OUTLINE
•Introduction
•Perception of colors
•Primary colors
•Individual and cultural differences
•Using color in Interaction Design
•Color Concerns for Interaction Design
•Technical Issues Concerning Color
•Warm/cool colors
•Accent
•Association of colors
•Conclusion
COLOR PERCEPTION
•The frequencies of the reflected waves determine the color we perceive
•The perceived color of an object can change drastically under
一. I J J
different lighting situations
一 The color of an object depends on the light source and the nature of the light it emits
LIGHT AND SPECTRUM
•Light is an electromagnetic wave.
一 Color is characterized by wavelength (380 nm (violet) and 780 nm (red).
•The light of a laser is composed of a single wavelength
一 for example, a ruby laser produces a bright scarlet red beam
•Most light sources produce emissions of several wavelengths.
•However, humans cannot detect all the lights, just emissions that fall into the "visible spectrum".
•Short wavelengths produce a feeling of blue, while long ones produce red
• Decomposition of white light.
UI/UX
8uqac
HUMAN VISION
•The eye works like a camera, with the lens focusing an image on the retina
- (head down and left-right inverted).
•The retina consists of a set of sticks and three types of cones.
•Sticks come into play when light levels are low and produce an image in gray levels.
-120 million
•For higher light levels, the cones each produce a signal.
•Because of their different pigments, the three types of cones are more sensitive to red (R), green (G) and blue (B) light.
-6 million cones
The sensitivity of blue receptors is not represented at scale because it is much smaller than the red or green curves Statistically, blue is the favorite color of the human being, regardless of his nationality - blue appeared a little late in evolution!
Global dotted sensitivity - this curve is called light efficiency function.
it is usually rated V and is formed by the sum of the response curves for Red, Green and Blue.
UI/UX
p
o
400
450 500
550 600
650
700
0•一 8.0 9.0 寸.0 z.o osuodsE
Wavelensth (inn)
•The eye is more sensitive to light in the middle of the visible spectrum.
•The sensitivity of our receivers is also a wave function.
osuods。』oA soa
o
400 450 500
550 600 650 700
Wavelength (imi)
The achromatic channel produced by the cones is approximately proportional to 40R-20G-B.
400 450 500
550 600 650 700
Wavelength (mn)
0•一 8.0 9.0 寸.0 z.o osuodsal o±
CIE 1931 Chromaticity Diagram - CIE 1931 2 0 Standard Observer
0.8 -
0.6 -
u-l 0.4 -
O
0.2 -
0.0 -
520
390
700
UI/UX
I
0.0
I u.' ivici iciao.1 r 11.l>i.
0.4 0.6
0.8
JQAC
4320
8KUHD
4KSHD
FHD
SD
UI/UX
UQM
Combination of colors, additive colors and subtractive colors.
OUTLINE
•Introduction
•Perception of colors
•Primary colors
•Individual and cultural differences
•Using color in Interaction Design
•Color Concerns for Interaction Design
•Technical Issues Concerning Color
•Warm/cool colors
•Accent
•Association of colors
•Conclusion
Yellow, Red and Blue, are structure.
•That is because you can think of the three Primaries as the original parents of all the future generations of colors.
•Typically you want to avoid using a pure primary primary color as they can often be too intense on their own
•However a primary color combination can work if you vary the brightness or saturation of the color
• Are made by mixing two primary colors • For example :
一 green is made by combining blue and yellow
一 blue and red combined to make purple.
• A secondary color combination uses all three
secondary color options: Green Oranqe and Purple
Color Theory teaches us that each Tertiary color is the
result of one Primary Color mixed with one of its nearest
•These create the most appealing color combination being not too intense or too dark.
•However rarely would you use all of the tertiary colors and one design.
• More likely you'll choose a small subset of colors on the warm or on the cool side of the spectrum.
TECHNICAL ISSUES CONCERNING COLOR
• Color Space
一 The International Color Consortium (ICC) was created to develop a standard for color information interchange
一 The ICC created a format that provides an across- platform device profile
一 The profile can be used to translate color information between devices that use diverse color spaces
OUTLINE
•Introduction
•Perception of colors
•Primary colors
•Individual and cultural differences
•Using color in Interaction Design
•Color Concerns for Interaction Design
•Technical Issues Concerning Color
•Warm/cool colors
•Accent
•Association of colors
•Conclusion
COLOR DEFICIENCIES
•Photoreceptors vary greatly from person to person
•People with photoreceptors that do not respond to certain frequencies do not perceive those colors in the same way that other people do
一 8% of male individuals
一 0.4% of female individuals
•The most common form is a reduced sensitivity to green, known as deuteranomaly
一 5% of male individuals
一 95% of color deficiencies in female individuals
COLOR DEFICIENCIES - TYPES OF COLOR
BLINDNESS
•Anomalous trichromatic vision results when all cones are present but some are misaligned:
一 Protanomaly: Diminished sensitivity to red
一 Deuteranomaly: Diminished sensitivity to green
一 Tritanomaly: Diminished sensitivity to blue
•Dichromatic vision anomalies occur when one of the cone types is missing:
一 Protanopia: No ability to perceive red
一 Deuteranopia: No ability to perceive green
一 Tritanopia: No ability to perceive blue
COLOR DEFICIENCIES - TYPES OF COLOR
BLINDNESS
PhotoShop Plug-in http://www.vischeck.com/downloads/ Online version http://www.vischeck.com/vischeck/vischeckImage.php
25
COLOR DEFICIENCIES - TYPES OF COLOR
BLINDNESS
Deuteranopic color vision
COLOR DEFICIENCIES - TYPES OF COLOR
BLINDNESS
•Color deficiency and human subjectivity must be considered important factors in interaction design
•Factors affecting color perception:
-Culture
-Age
-Fatigue
-Emotions
-Ambient light
-Light sources
- Blood oxygen levels
INDIVIDUAL AND CULTURAL ISSUES
•Ask a person to name a favorite color and what it reminds him of, then ask another person about the same color
•Some colors carry natural associations that are universally consistent.
一 We should stick to these common
associations when we find them
INDIVIDUAL AND CULTURAL ISSUES
• Preference and Expectations
Walk Don't Walk
Inappropriate Colors
• It is important to understand the target user's color associations and expectations
INDIVIDUAL AND CULTURAL ISSUES
• Emotional Response
•Color can evoke emotional responses
•“Light warm red has a certain similarity to medium yellow, alike in texture and appeal, and gives a feeling of strength, vigour, determination, triumph.
•In music, it is a sound of trumpets, strong, harsh, and ringing”
INDIVIDUAL AND CULTURAL ISSUES
• Globalization—Localization
一 Emotions: Associations with yellow range from grace and nobility in Japan, to cowardice and caution in the United States, to happiness and prosperity in Egypt
一 Age: People of different generations have observable and often contrasting preferences in color
一 Gender: In most cultures gender can greatly influence color decisions
一 Physical Appearance: Mail box colors
POWER OF COLOR PSYCHOLOGY
•We would like to give you a brief overview of the meanings that basic colors have.
•This info is useful if you are going to mix colors for your design.
WHITE
•White is a color of perfection.
•It symbolizes purity, as a for example a bride's wedding dress.
•Besides, this is the color of cleanliness and bright light.
•Blank board or sheet of paper is white, where this color can be a symbol of creativity and innovation.
•White is a neutral color that won't spoil the website design.
BLACK
•Black is a dark color yet it has many good meanings: intelligence, power, stability, professionalism.
•It is the color of luxury and sophistication.
•This is another classic shade together with white, and it can be very useful when used for web design.
GRAY
•Gray is the most neutral color and it is rather calm.
•Color gray means stability and daily routine, it is the symbol of casual things.
•Quantity of gray influences on the website perception: 一 too much gray can look a bit boring and monatomic 一 a slight effect of gray will dilute the color scheme and
make bright elements more visible.
BROWN
•is the color of Earth, and maybe that is the reason why it is the color of mourning in India.
•Nevertheless, this color means stability and friendship in Western Hemisphere.
•Moreover, material wealth is what people associate brown with.
ORANGE
•Orange is one of the most, if not the most, positive colors generally.
•Orange is the color of social stimulation, and so far as it is both physically and mentally stimulating, it gets people to consideration and conversation.
•It is awesome if your design and color scheme allows you to use a bit of orange.
•It puts users in a good mood.
YELLOW
•Yellow is the color of sun, so you don't need to be explained how positive it is.
•Yellow inspires to new thoughts and original ideas.
•If your website aims at teaching users or make them take actions, you will need to make yellow your accent color.
•It usually doesn't perform as the dominant color, because it is so bright that can blind readers.
RED
•Red is hot, passionate, provocative, but it is also catchy, attractive and fashionable.
•Red is the color of ambitions and adventures.
•This color stimulates to get risks and take actions.
•CTA buttons done in red are winning but only when the primary color blends with them well.
-A call to action (CTA) is a marketing term that refers to the next step a marketer wants its audience or reader to take.
GREEN
•Green is the color of nature surrounding people.
•Balance is what this color means in psychology.
•Green is good to be used on business sites, because it means money and prosperity.
BLUE
•Blue is the color we see every day above our heads.
•This color brings a feel of trust, realism, and peace.
•Religious theme can make benefit from using this color both as primary and accent.
PURPLE
•Purple is associated with imagination and dreams.
•It is the one to symbolize wisdom, respect, royalty and wealth.
•Purple is powerful color with the leadership meaning.
INDIVIDUAL AND CULTURAL ISSUES
• Globalization—Localization
一 Industrial or professional communities:
•Academic robes
一 Corporate identity and product recognition:
•Coca-Cola
•American Express
•UPS
OUTLINE
•Introduction
•Perception of colors
•Primary colors
•Individual and cultural differences
•Using color in Interaction Design
•Color Concerns for Interaction Design
•Technical Issues Concerning Color
•Warm/cool colors
•Accent
•Association of colors
•Conclusion
USE OF COLOR IN USER INTERFACE
•Clarification, Relation, and Differentiation
•Searching
•Comprehension, Retention, and Recall
•Tasks and Performance
•Redundant Coding
USE OF COLOR IN USER INTERFACE
• Clarification, Relation, and Differentiation
一 Differentiations are obvious with colors
USE OF COLOR IN USER INTERFACE
• Clarification, Relation, and Differentiation
一 Color can be used to clarify differences and similarities and communicate relationships
Menelas, Ph. D.
Map of the Boston metropolitan
USE OF COLOR IN USER INTERFACE
• Searching
一 Color can be used to catch the attention of the user
USE OF COLOR IN USER INTERFACE
• Clarification, Relation, and Differentiation
一 The spectrum has been shown to be an intuitive means of presentation.
Color code alert system
Searching
<!■- This is the content area of the page ■■> <table cellpadding=”2 ” cellspacing=”2 ” border=n1” style=ntext-align:left; width:100%;H>
<tbody>
<tr>
<td style=nvertical-align:top; text-align:center;M>
When Netscape Navigator 7.1 displays the source code of a web page, it colors the element names purple, the a ttribute names black, the attribute values blue, the comments green and character entities orange.
</td>
</tr>
</tbody> </table>
• Comprehension, Retention, and Recal
- Color can enable us to comprehend patterns in complex data structures
I I I I I I I I I I I I I
Color-coded scatter plot
• Comprehension, Retention, and Recall
一 Color can aid in remembering and recalling information
Color-coded dials
•Tasks and Performance
•Color improves performance in the following tasks:
一 Recall task
一 Search-and-locate task
一 Retention task
一 Decision judgment task
• Redundant Coding
-A clear structure and presentation must already be present before color is introduced
• Studies have shown that people are better at search tasks when the targets of the search are coded using more than one parameter:
-for instance, color and shape
OUTLINE
•Introduction
•Perception of colors
•Primary colors
•Individual and cultural differences
•Using color in Interaction Design
•Color Concerns for Interaction Design
•Technical Issues Concerning Color
•Warm/cool colors
•Accent
•Association of colors
•Conclusion
•Indistinguishable Differences
•Optimal Colors
•Number of Colors
•Incompatible Differences
•Color Backgrounds
•Indistinguishable Differences
•Our ability to perceive subtle changes varies from color to color
•Target objects must use highly diverse colors from those in their surroundings
Similar colors in close proximity
• Optimal Colors
一 It has been found that the colors red, blue, green, and yellow are the most beneficial in learning environments.
Color code using red, blue, green, and yellow
• Number of Colors
-To remember a color and then recognize it later, we should use only a few distinct colors
• 5 to 9 colors
-To be able to tell the difference between two adjacent color- coded objects, we can use more colors
Interface colors should never distract the user or compete with content
•Incompatible Differences
•Some specific color combinations cause unique problems:
-Colors at opposing ends of the spectrum such as red and blue require the eye to use two different focal lengths
•This can cause fatigue
- Positive contrast makes characters appear to glow
•This gives them a more blurry look than characters printed in a page
-This effect is known as Halation
Color concerns in User Interfaces
• Incompatible
Differences
Color Combinations to Avoid:
Problematic Color Combinations
COLOR CONCERNS IN USER INTERFACES
The perceived color of an object is affected by the color of its background
OUTLINE
•Introduction
•Perception of colors
•Primary colors
•Individual and cultural differences
•Using color in Interaction Design
•Color Concerns for Interaction Design
•Technical Issues Concerning Color
•Warm/cool colors
•Accent
•Association of colors
•Conclusion
TECHNICAL ISSUES CONCERNING COLOR
• Color Displays
一 Computer screens create color by mixing red, green,
and blue (RGB) light
一 This is an additive process
• We must work within the limitations of the human perceptual system and within the limitations of computer screen technology
CIE 1931 Chromaticity Diagram - CIE 1931 2 0 Standard Observer
UI/UX
510 nm
Green
500 nm
Bluish green
Bluegreen
―470 nm。
460 nmN 440nm 0 1
0
Approximate Color regions on CIE Chromaticity Diagram
6。•…。,…！ 寸 。 t- <
nm ： ： ：
• 550 nm :
3 ■ CT
Yellowish
i green i
Yellow
570 nm
580nrii
S9O nm
White
Bluish
400 nm 1 Durole*
V I Mt：
0.1 0.2
Pink
i Menelas, Ph. D.
0.4 0.5
Greenish
veltow
Yellowish
orange,
网福
^610 nm- nm
•A'ZA1
^^640 nm
事 700 nm
Reddish
orange
・Set of chromatics visible to a person: gamut of human vision
・The horseshoe-shaped curve represents the pure colors of extreme red to extreme purple.
ANIMATION ABOUT THE CHROMATICITY
DIAGRAM
• Produced by the Khan Academy
RIGHTNESS
• Brightness refers to the amount of white or black that is present in a color
Altering brightness makes the color appear lighter or darker
Light Blue Dark Blue
COLOR CODING SSYSTEMS
-a) CMY 一 Cyan (C), Magenta (M) and Yellow (7) color model;
-b) HSL 一 Hue, Saturation and Lightness;
-c) HSV 一 Hue, Saturation and Value;
-d) HSI 一 Hue, Saturation and Intensity;
-e) HCI 一 C=Chroma;
-f) HVC 一 V=Value;
-g) HSD 一 D=Darkness.
7 口 QAC
HUE AND SATURATION
•Hue : Define the color
•Saturation describes the “white-to-hue” ratio of a color
一 Decreasing saturation by adding a greater
Dercentaqe of qrav makes colors muted
COLOR SYSTEMS
一 hue, value, and chroma:
•The difference in our perception of the colors red, green, and blue is determined by changes in hue.
•Shades of color can be defined as the result of changes in value, such as the difference between light blue and dark blue.
•The pureness of a color is determined by chroma. Changes in chroma can make a color change from a vibrant color to a muted or muddy color.
WORKING WITH COLORS
•Hue control the overall tone of the color from red to violet across the spectrum
•Saturation control the intensity of the color from its richest version to a shade of gray
•Brightness control to relative Chroma of the color goes from black to white with the pure color as the middle.
BRIGHTNESS
Colors with the same brightness levels can appear lighter or darker than each other
Light and dark colors一grayscale
HUE
• Hue - If we change the proportions of the colors we mix together, we affect the hue
TINTS, SHADES, AND TONES
•If a color is made lighter by adding white, the result is called a tint.
•If black is added, the darker version is called a shade.
•And if gray is added, the result is a different tone.
■■■■■■ UQAC
OUTLINE
•Introduction
•Perception of colors
•Primary colors
•Individual and cultural differences
•Using color in Interaction Design
•Color Concerns for Interaction Design
•Technical Issues Concerning Color
•Warm/cool colors
•Accent
•Association of colors
•Conclusion
WARM AND COOL COLORS
• White, black and gray are considered to be neutral.
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 «
COOL COLORS
•are represented on the left side of the color wheel
•These range from green to violet
•tend to be less activating them warm colors
•that makes them a good choice for secondary accent
•like links or icons that don't as they do not require much user attention
•Cool colors also tend to have a calming effect
•which makes them useful for sites that are more focused on content
•making them great for small rooms that you want to appear larger. If you have a tiny bedroom or powder room that you want to enlarge visually,
WARM VS COOL COLORS
spruce
llllllllll
HAM
OUTLINE
•Introduction
•Perception of colors
•Primary colors
•Individual and cultural differences
•Using color in Interaction Design
•Color Concerns for Interaction Design
•Technical Issues Concerning Color
•Warm/cool colors
•Accent
•Association of colors
•Conclusion
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.
-You can add a few of subdominant, i.e. secondary colors, but keep them all just 30% of the whole space.
-Use tint and shade of the same color.
ACCENT COLORS
•Accent colors are called so because they stress on certain details you them to stress.
•In a web site, elements that you may want to emphasize are:
-CTA
-Navigation button
一 Scroll buttons
-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.
SCROLL BUTTONS
•Whether you have a background photo gallery with arrows to flip through, or your website navigation is scrollable, you need to prioritize these scroll buttons.
•So far, as you can't make them half-size of the website page, you need to lay stress on them within color.
•You make it easier for users to experience you webpage by doing so.
PROMOTIONAL ELEMENTS
•Promotional elements are different stuff you use to get your product or content advertised.
•For example, these are social media follow/sharing buttons:
一 find such designs of these to correlate with your color scheme and repeat your accent color.
OUTLINE
•Introduction
•Perception of colors
•Primary colors
•Individual and cultural differences
•Using color in Interaction Design
•Color Concerns for Interaction Design
•Technical Issues Concerning Color
•Warm/cool colors
•Accent
•Association of colors
•Conclusion
COLOR CONTRAST
•Color Contrast
- The highest possible contrast is between black and white (Negative contrast/Positive polarity)
•Positive contrast becomes tedious and annoying after extended periods of use
•Positive contrast is not as user-friendly; there is a tendency to see a halo effect called halation
•Color contrast is affected by the perceived weight of the colors involved
CHOOSING COLORS FOR DESIGN
一 Analogous
一 Complementary
一 Triad
一 Split-Complementary
一 Rectangle (tetradic)
一 Square
ANALOGOUS
Analogous color schemes use colors that are next to each other on the color wheel.
They usually match well and create serene and comfortable designs.
Analogous color schemes are often found in nature and are harmonious and pleasing to the eye.
Make sure you have enough contrast when choosing an analogous color scheme.
Choose one color to dominate, a second to support. The third color is used (along with black, white or gray) as an
ANALOGOUS COLOR SCHEME
COMPLEMENTARY
• Colors that are opposite each other on the color wheel are considered to be complementary colors (example: red and green).
COMPLEMENTARY
•The high contrast of complementary colors creates a vibrant look especially when used at full saturation. This color scheme must be managed well so it is not jarring.
•Complementary colors are tricky to use in large doses, but work well when you want something to stand out.
• Complementary colors are really bad for text.
TRIAD
•A triadic color scheme uses colors that are evenly spaced around the color wheel.
•Triadic color harmonies tend to be quite vibrant, even if you use pale or unsaturated versions of your hues.
•To use a triadic harmony successfully, the colors should be carefully balanced - let one color dominate and use the two others for accent.
SPLIT-COMPLEMENTARY
•The split-complementary color scheme is a variation of the complementary color scheme. In addition to the base color, it uses the two colors adjacent to its complement.
•This color scheme has the same strong visual contrast as the complementary color scheme, but has less tension.
•The split-complimentary color scheme is often a good choice for beginners, because it is difficult to mess up.
SPLIT COMPLEMENTARY COLOR SCHEME
RECTANGLE (TETRADIC)
•The rectangle or tetradic color scheme uses four colors arranged into two complementary pairs.
•This rich color scheme offers plenty of possibilities for variation.
•The tetradic color scheme works best if you let one color be dominant.
• You should also pay attention to the balance between warm and cool colors in your design.
SQUARE
•The square color scheme is similar to the rectangle, but with all four colors spaced evenly around the color circle.
•The square color scheme works best if you let one color be dominant.
• You should also pay attention to the balance between
warm and cool colors in your design.
ACCENT FOR MONOCHROMATIC COLOR
Monochromatic color scheme means a usage of one color, yet different shades of it.
It is impossible to stay with one tint for the whole design, or you make your visitors bored and feel asleep.
Accent color should be the brightest shade you include in your color palette.
For example, you design your site in blue shades: you have
I f J J J
blue-gray, sky blue, medium blue and tiffany blue.
一 An accent tone, would be medium blue, as it is the deepest and brightest one in the row.
一 If you pick orange color combo, then you can make
J I 7 J
brown and apricot tones to be dominant and
EXAMPLES
•Pastel Design and Red CTA
•http://format.com/
•Website with Green Color to Make Accents
•https://www.geckoboard.com/
CONCLUSION
•Introduction
•Perception of colors
•Primary colors
•Individual and cultural differences
•Using color in Interaction Design
•Color Concerns for Interaction Design
•Technical Issues Concerning Color
•Warm/cool colors
•Accent
•Association of colors
第八章
Outline
• Introduction
• 7 stages of actions
• Affordance and signifiers
• Mapping
• Working memory
• Recognition rather than recall
• Feedbacks
• Errors
• Loading speed
• Conclusion
User psychology
• In the context of UI and UX design, we can say that people are goal oriented
o They need a goal
• Each may screen should have a clear goal
o Account, feeds, etcs.
o They need to know broadly the steps to will reach that goal
• Between four to five steps is acceptable
• While performing, some want to know where they are in the process
o People, would like to perform little effort to reach their goal
• They will not read lot of texts
• They will just glance at the screen and expect too grasp all important information
• They may not be concentrated on the task
o People do not like to read
How do they do
• 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
•
Therefore
• How do we create elegant solutions to complex interaction problems?
• How do interaction designers succeed at creating great designs that are powerful and aesthetically appealing?
Framework for Design Principles
Functionality - The system must have adequate functionality for a
particular task.
Presentation Filter - The functionality must be made accessible through the presentation filter (interface).
Framework for Design
Comprehensibility Barrier - If the presentation is comprehensible, the comprehensibility barrier will be superseded. This depends on the degree of efficiency/usability in the interface design.
Learnability Barrier – If the interface is comprehensible it will be
learnable, there is a direct relationship.
Effectiveness/Usefulness - If the user can learn the interface he can take advantage of the functionality and the interface will, therefore, be useful.
Goal
• To let the user quicly identify what is possible with the proposed UI
Therefore
• To let the user quicly identify what is possible with the proposed UI
• 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 for deleting an email?
Usage as Design Aids
• The Seven Stages of Action can be broken down into 4 :
• Visibility - By looking, the user can tell the state of the device and the alternatives for action:
o Affordances Signifiers
• 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
• Introduction
• 7 stages of actions
• Affordance and signifiers
• Mapping
• Working memory
• Recognition than recall
• Feedbacks
• Errors
• Loading speed
• Conclusion
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
• Explicit affordance : for an affordance to be perceptible, there should be information that promotes so:
o when you see a button designed as an obviously clickable element
• visually similar to the buttons in the physical world
o you understand you can click or tap it to interact.
• If it is supported by a text or icons the affordance becomes even more clear
o it informs you what will be the feedback from the system.
3 types of affordance
• A hidden affordance indicates that there are possibilities for action, but these are not perceived by the actor.
o when we get tooltips or explanations hovering on a layout element are the ones.
o Other examples are diverse multilayered elements of navigation such as drop-down menus or expandable buttons that aren’t seen all the time or from the first seconds of interaction but are unveiled after a particular operation.
o hamburger menu that hides the access to functionality behind the special icon.
• 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
Anti/negative affordance
• Tell what can not do with a product
• The goal with negative affordance is to help the users understand that certain elements on the UI are currently inactive or not interactable at this point in time.
o For example a disabled button on a form, helps users understand they are unable to proceed until all relevant fields are filled.
Disabled button
Using Signifiers
• A signifier clarifies an affordance
o it illustrates or describes what an object can do
• A signifier can be blatantly obvious or very subtle.
• Labels: Text signifies an object’s purpose but is limited due to character count and may not articulate the entirety of an object’s potential.
• Color: Color is used to signify that an object has a purpose — to distinguish an object with an affordance from an object without.
o Color can signify a pattern of utility through a consistent application.
o But color alone can’t reveal how or what an object affords.
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://offer.alibaba.com
• https://www.amazon.com/
• https://www.walmart.ca/
Outline
• Introduction
• 7 stages of actions
• Affordance and signifiers
• Mapping
• Working memory
• Recognition than recall
• Feedbacks
• Errors
• Conclusion
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.
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.
Mental models
• Users develop an understanding of a system through 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
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
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
Outline
• Introduction
• 7 stages of actions
• Affordance and signifiers
• Mapping
• Working memory
• Recognition rather than recall
• Feedbacks
• Errors
• Loading speed
• Conclusion
• 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
• 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
• How much information people can remember
o Arround 7 or arround 4
• From 3 to 5
• How long a non relevant-information stays in the memory
o Arround 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
• Video of examples
Outline
• Introduction
• 7 stages of actions
• Affordance and signifiers
• Mapping
• Working memory
• Recognition rather than recall
• Feedbacks
• Errors
• Loading speed
• Conclusion
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 recognition
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
Outline
• Introduction
• 7 stages of actions
• Affordance and signifiers
• Mapping
• Working memory
• Recognition rather than recall
• Feedbacks
• Errors
• Loading speed
• Conclusion
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
• Feedback video
Outline
• Introduction
• 7 stages of actions
• Affordance and signifiers
• Mapping
• Working memory
• Recognition rather than recall
• Feedbacks
• Errors
• Loading speed
• Conclusion
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.
Lapses
• Lapses are a brief failure of concentration, memory or judgement; 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.
Outline
• Introduction
• 7 stages of actions
• Affordance and signifiers
• Mapping
• Working memory
• Recognition rather than recall
• Feedbacks
• Errors
• Loading speed
• Conclusion
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 795 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
• Show a loading, progress bar
Outline
• Introduction
• 7 stages of actions
• Affordance and signifiers
• Mapping
• Working memory
• Recognition rather than recall
• Feedbacks
• Errors
• Loading speed
• Conclusion
Conclusion
• Introduction
• 7 stages of actions
• Affordance and signifiers
• Mapping
• Working memory
• Recognition rather than recall
• Feedbacks
• Errors
• Loading speed
第九章
• Introduction
• Expert evaluation
• Heuristic evaluation
• Discount heuristic evaluation
• Cognitive walkthrough
• User based evaluation
• Real case scenario
Design process in terms of the four activities
Evaluation is central to designing interactive systems.
o Everything gets evaluated at every step of the process.
The process can start at any
point
The activities can happen in
any order,
Evaluation
• Evaluation occurs throughout the interaction design process.
o At different stages, different methods will be more or less effective.
o The form of envisionment of the future systems is also critical to what can be evaluated.
• Allow to obtaining feedbacks to inform early design concepts
o You may need to evaluate initial concepts, especially if the application is novel.
• Here, quick paper prototypes can help, or even software if this can be produced rapidly.
• Evaluations of competitor products or previous versions of technology can also feed into the design process at this stage.
Evaluation
• Deciding between different design options
o between voice input and touchscreen interaction for a shared electronic household wall-planner
o between different sequences for order processing functions.
o between cursor keys, mouse and joystick for moving around a virtual environment.
• Unless there is no alternative, you should not evaluate your own designs.
o It is extremely difficult to ignore your knowledge of how the system works,
• the meaning of icons or menu names and so on, and you are likely to give the design the ‘ benefit of the doubt ’ or to find obscure flaws which few users will ever happen upon.
What is Usability Testing?
• A usability test is a structured process used to explore the interaction between an objective participant and a proposed design
• Paper and pencil (paper prototype)
o Expert evaluation
o Heuristic evaluation
o Discount heuristic evaluation
o Cognitive walkthrough
• Usability Lab (functional prototype)
o Formal testing with subjects
• Heuristic evaluation
• Discount heuristic evaluation
• Cognitive walkthrough
• User based evaluation
• Real case scenario
Expert evaluation
• A simple, relatively quick and effective method of evaluation is to get an interaction design, or usability, expert to look at the system and try using it.
o this is not a substitute for getting real people to use your design,
o but expert evaluation is effective, particularly early in the design process.
• Experts will pick up common problems based on this experience, and will identify factors that might otherwise interfere with an evaluation by non-experts.
• Heuristic evaluation
• Discount heuristic evaluation
• Cognitive walkthrough
• User based evaluation
• Real case scenario
Heuristic evaluation
• Heuristic evaluation refers to a number of methods
in which a person trained in interaction design examines a proposed design to see how it measures up against a list of principles, guidelines or ‘ heuristics ’ for good design.
• This review may be a quick discussion over the shoulder of a colleague, or may be a formal, carefully documented process.
Aspects to consider for heuristic evaluations
Visibility
2. Consistency
3. Familiarity
4. Affordance One evaluation for each aspect
5. Navigation
6. Control
7. Feedback
8. Recovery
9. Constraints
10. Flexibility
11. Style
12. Conviviality
Heuristic evaluation
• Several people with expertise in interactive systems design should review the interface.
• Each expert notes the problems and the relevant heuristic, and suggests a solution where possible.
• It is also helpful if a severity rating, say on a scale of 1–3, is added, according to the likely impact of the problem.
o However, they also note the disappointing level of correlation amongst experts in rating severity of problems.
Heuristic evaluation
• Evaluators work independently and then combine results.
• They may need to work through any training materials and be briefed by the design team about the functionality.
• The scenarios used in the design process are valuable here.
• Heuristic evaluation
• Discount heuristic evaluation
• Cognitive walkthrough
• User based evaluation
• Real case scenario
Discount heuristic evaluation
• All twelve aspects can be combined into
• Learnability
o Visibility
o Consistency
o Familiarity
o Affordance
• Effectiveness
o Navigation
o Control
o Feedback
o Recovery
o Constraints
• Accommodation
If time is very short, a quick review of the design against this triad can produce reasonably useful results. This is known as a
discount heuristic evaluation.
o Flexibility
o Style
o Conviviality
Heuristic evaluation therefore is valuable as formative evaluation, to help the designer improve the interaction at an early stage.
• It should not be used as a summative assessment, to make claims about the usability and other characteristics of a finished product.
• If that is what we need to do, then we must carry out properly designed and controlled experiments with a much greater number of participants.
• However, the more controlled the testing situation becomes,
the less it is likely to resemble the real world, which leads us to
the question of ‘ecological validity’ .
• Heuristic evaluation
• Discount heuristic evaluation
• Cognitive walkthrough
• User based evaluation
• Real case scenario
Cognitive walkthrough
• Cognitive walkthrough is a rigorous paper-based technique for checking through the detailed design and logic of steps in an interaction.
• It is derived from the human information processor view of cognition and closely related to task analysis.
• In essence, the cognitive walkthrough entails a usability analyst stepping through the cognitive tasks that must be carried out in interacting with technology.
• Aside from its systematic approach, the great strength of the cognitive walkthrough is that it is based on well-established theory rather than the trial and error or a heuristically based
approach.
Inputs to the Cognitive walkthrough
• An understanding of the people who are expected to use the system
• A set of concrete scenarios representing both (a) very common and (b) uncommon but critical sequences of activities
• A complete description of the interface to the system – this should comprise both a representation of how the interface is presented, e.g. screen designs, and the correct sequence of actions for achieving the scenario tasks, usually as a hierarchical task analysis (HTA).
Inputs…
• Having gathered these materials together, the analyst asks the following four questions for each individual step in the interaction:
• Will the people using the system try to achieve the right effect?
• Will they notice that the correct action is available?
• Will they associate the correct action with the effect that they are trying to achieve?
• If the correct action is performed, will people see that progress is being made towards the goal of their activity?
• If any of the questions is answered in the negative, then a usability problem has been identified and is recorded, but redesign suggestions are not made at this point.
• If the walkthrough is being used as originally devised, this process is carried out as a group exercise by analysts and designers together.
• The analysts step through usage scenarios and the design team are required to explain how the user would identify, carry out and monitor the correct sequence of actions.
• Software designers in organizations with structured quality procedures in place will find some similarities to program code
walkthroughs.
• Expert-based evaluation is a reasonable first step
o Experts will not find all problems, particularly those that result from a chain of ‘wrong ’ actions or are linked to fundamental misconceptions.
o Experts even find problems that do not really exist
• people overcome many minor difficulties using a mixture of common sense and experience.
• So it is really important to complete the picture with some real people trying out the interaction design.
o The findings will always be interesting, quite often surprising and occasionally disconcerting.
• It is easier to convince designers of the need for changes if the evidence is not simply one ‘expert’ view, particularly if the expert is relatively junior.
• The aim is to trial the design with people who represent the intended target group in as near realistic conditions as possible.
• Heuristic evaluation
• Discount heuristic evaluation
• Cognitive walkthrough
• User based evaluation
• Real case scenario
User-based Usability
Testing?
• Attributes common to most usability tests:
o The goal is to improve a product.
o Participants are real users.
o The participants do real tasks.
o Participants are formally observed.
o The data are analyzed.
o Recommendations for improvement are made.
What is Usability Testing?
• A usability test has three basic components:
o Participants—Actual users who are asked to perform realistic and representative tasks using a proposed design
o Design—May be a fully functioning prototype or a simple paper prototype
o Tester—There might be only one tester or there might be a testing team
What is Usability Testing?
• Constraints on Usability Testing
o Time
• Design
• Prepare
• Administer (an hour to an hour and a half)
• Analyze the results
o Finance
• Equipment and software
• Laboratory time
• Recording media
• Participant compensation
• Refreshments
What is Usability Testing?
• Constraints on Usability Testing
o Personnel— Formal usability tests require at least four people.
o Laboratory—To perform a formal usability test, a dedicated laboratory is required.
o You must be fully aware of the regulations imposed by the various institutions and regulatory bodies that pertain to your experimental design
o The U.S. Department of Health and Human Services Web site • . .http://wwwhhsgov/ohrp/
First step for an
evaluation
• Get approved by an ethic committee
o Group of people who will evaluate the study you would like to carry to
• Evaluate if it is safe for participant
o for their well being and their privacy
o They may discuss the scientific aspect of the study as well
What is Usability Testing?
• Advantages
o Provide an idea about the usability
o Provide benchmarks for future products
• Limitations
o Artificial context
o Not definitive of product acceptance
o Skewed sample of users
o Not always efficient
What is Usability? –
Phases of a Usability Test
• Design the Test
• Prepare for the Test
• Perform the Test
• Process the Data
Design the Test
• Why: Define the Purpose
• What: Define Your Concerns and Goals
• What: Define the Tasks
• What: Create the Scenarios
• What: Define the Measurements
• How: Define the Test Method
Design the Test
• Where: Determine the Location of the Tests
• Participants should be real users
• You do not always need to test a great many users
• The people you recruit should have the following basic characteristics:
o Availability
o Responsiveness
o Objectivity
Design the Test
• Tester roles include the following:
o Administrator
o Moderator
o Data logger
o Technician
o Prototype expert
• Potential observers include the following:
o Other design team members not involved in the test
o Clients
o Programmers responsible for the final product
Prepare for the Test
• When: Create a Test Schedule
o Project level
o Test preparation level
o Test execution level
o Task execution level
Prepare for the Test
• Writing Scripts
o Greeting the Participant
o Preliminary Interview
o Providing Instructions
o Monitoring the Test
o Debriefing the Participant
• Running a Pilot Test
o Be organized
o Be presentable
Perform the Test
• Test Phases
o Pre-Test
• Greet the participant.
• Have the participant sign the informed consent form.
• Have the participant fill out any pre-test questionnaire.
• Proceed with scripts.
o During the Test
• Maintain a log or observation check list for each task.
• Create a problem list to capture anything that is not covered by the check list.
• Notate problems and jot down any hypotheses that occur to you about the problems.
Perform the Test
• Test Phases
o Post-Test
• Debrief the participant.
o post-test questionnaire
o verbal interview
• Thank the participant and provide compensation.
• Collect, summarize, and organize test data.
• Reset the room for the next participant.
Process the Data
• Activities Performed on the Day of the Test
o Collecting Data
o Summarizing Data
o Organizing the Material
• Follow-Up Activities
o Categorizing
o Analyzing
• Quantitative Data
• Qualitative Data
Process the Data
• Documenting
o Identify problems
• Severity
• Frequency
• Errors of omission
• Errors of commission
o Prioritize problems
o Theorize reasons
o Theorize solutions
o Identify successes
o Identify areas of uncertainty
• Heuristic evaluation
• Discount heuristic evaluation
• Cognitive walkthrough
• User based evaluation
• Real case scenario
第十章
Usability Testing Presentation
www. keancoffee . co m
Veronica Hernandez
March 2017
IN4MATX283
Overview
Background
Test Goals
Methodology
Participants
Findings
Recommendations
1 2 3
Background
A heuristic evaluation, cognitive walkthrough, and a competitive analysis have been completed for the Kean Coffee website.
These research activities helped to identify Kean CoffeeJs competitors & target market. This research also uncovered the strengths and weaknesses of their current site as stand-alone & in comparison to their competitor's sites.
2 3
Test Goals
The purpose of the usability test goes further than the research studies already accomplished,
The usability test provides a real-world example of how users currently interact with the Kean Coffee website & what they are thinking during a real-world task (like buying coffee on a website).
Methodology
A usability study was conducted on the Kean Coffee website. A usability study is research activity performed to test product usability. Test participants were recruited & screened to match Kean Coffee's target market.
The testing was conducted using
Loop11 and UserTesting.com. These are online tools which allow for
unmoderated, remote usability testing.
loop11
amazonmechanical turk
Artificial Artificial Intelligence
125 People Participated in Loop11 Testing
3 People Participated in UserTesting.com
2 3 4 5 6
Methodology
The test participants were asked to perform the follow task:
Purchase a bag of ground coffee
IdUJJ.S
Find & select
the Costa
Rica Sonora
coffee blend
zdUJ-LS
Select type of
coffee grind,
quantity,
then add it to
the cart.
Continue to
check out. I
mdUJ-s
In shipping &
billing page,
fill in fields
with any
mock data,
then
continue. I
17dUJ-s
Stop at the
Check Out
page and
complete this
task.
3 4 5 6
Participants
18-65
・ Kean clients are mostly adults of all ages.
Coffee
Drinker
・ Drinks coffee at least a few times a week
Website
User
・ Novice to Advanced internet user
4 5 6
Findings
Site Overview
Review participant feedback for the overall site experience
Issues
Review the top 2 issues identified:
♦ Navigation
♦ Coffee Listing
Site Overview
Findings
Good News!!
71% of the participants were able to successfully complete the task.
Task Success Rate
Success ■ Fail ■ Abandon
Icqp11
4 5 6
Findings
Site Overview
An average of 42%
participants voted that the
site was easy to use,
professional, and
informative.
Icqp11
2 3 4 5 6
Findings
Site Overview
...the product page
was great and the
checkout was really
easy.
..the site's very basic, it's
very easy to use, it's well
organized...
~ Participant 1
Testing
Findings
Site Overview
...adding another product, it's real convenient that they have my information in there and I don't have to start all over.
~ Participant 2
User
Testing
Findings
Findings
Site Overview
An average of 33%
participants voted that the
site was cluttered,
confusing, and
text-heavy.
Icqp11
Findings
Site Overview
Conflicting data??
Lefs take a look at some of the pain points identified by our participants.
Icqp11
User
Testing
Findings
Issues: Navigation
Most participants expressed confusion in trying to find the coffee listing page:
•33% of participants succeeded in selecting the correct link on the first try.
•67% of participants
were confused and failed.
■ Fresh Roasted Beans ■ Our Coffees ■ Ordering ■ Other
Findings
Featured Coffees
Findings
20%
of participants
navigated to the
''Ordering & Shipping”
page because
they were ordering
coffee.
Issues: Navigation
Our Coffees
page
Heatmaps of
££Our Coffees,J page &
££Order & Shipping” page
Link to
Fresh Roasted Beans
coffee listing page
©o
Ordering *
We strive to get your coffee order into your hands a
page
I'm curious if there's a way to go
directly to the coffees to purchase
them or do I have to go to Our
Coffees, then About Our Coffees?
-Participant 2
Finding the coffee type was a
little confusing at first; should
maybe be the first option in the
drop down menu.
-Participant 75
Easy to navigate site but
product search takes time.
-Participant 48
It took me a couple tries
to find their specific
coffees for purchase -1
started on the Ordering
link, which was wrong.
-Participant 122
lOCp11 PR^lTesting
Issues: Coffee Listing
Failed
23%
Abandoned
10%
Many participants stated they found the Tresh Roasted Beans” page (coffee
listing) confusing and often abandoned or failed the task at this page.
Note: The majority got past this page and succeeded at the task but commented that it was too much information at once.
Icqp11
Issues: Coffee Listing
Regular Coffees
Participants would often
shut down at the coffee
listing page.
Ethiopia Sidamo Sliakisso $15.75
The Guji Zone 々 the southern highlands i$ one of the oldest coffee producing regions in the world, with neirloom vanetals datina back tens of centuries. Small holder farmers tend their trees and bring th* rip« cherry to the central washing station for processing.
Sumatra Tai>o Batak $15.25
From the slopes above Lake To2, in the Yano Batak Highlands, small holder farmers take great care to
Kenya Lenana $16.25
Grown in th« Lenana region in the shadow of Mt. Kenya, our Kenya Lenana received a score of 94 by Ken Davids of
harvest and prepare this clean, bright, full-bodied example of high quality Sumatra coffee.
Coffee Review. His taste notes:
User
Testing
Opening aromas of jasmine, orange zest, and bergamot melt Into a luxurious smoothness of black currant semi-sweet chocolate, and blood orange. The honey sweetness perfectly balances the soft black grape acidity. The finish is long and g«ntle with hints of anise and sandalwood.
The aromatics of tarragon, vanilla, and sw««t basil op«n into a full, creamy body and a soft red apple acidity. Lush notes of butterscotch, molasses, hazelnut, and allspice linger into the long, buttery finish. Scored 95 by Ken Davids of Coffee Review.
Full Roast
Sweetly tart, dwply floral, honeysuckle, mango, sarsparilla, butterscotch, pipe tobacco in aroma and cup. Juicy, buoyantly tart acidity; full, syrupy mouthfeel, fbe quietly resonant finish centers around
sarsparilla and butterscotch. Reminiscent in part of a very sophisticated essence of root beer float, this attractive Kenya is deep, sweet, and richly smooth.
Medium to Full Roast
Medium Roast
Costa Rica Sonora 515.75
The chanaing climate and economy in CosU Rica have made finding exceptional coffees more difficult with
each passing year. This is that cut- above coffee that we bold out for, from the slopes of th« Volcano Poas in Alajuela.
A buttery soft body and brown su^r sweetness are the base of this complex cup, with semrsweet chocolate and tangerine notes wafting in. Essence of honeysuckle and lilac complement the Meyer lemon acidity, finishing clean and smooth with a Nnt ： 宀-• ’ * * * >f
Colombia, Los Naranjos $14.B5 !n th« Southwest Highlands of Hulia. 97 farmers and their families work together in the San Augustine de Los
Naranios group to produce exceptionally fine quality Colombia
Guatemala Santo Tomas Pachuj $15.45
On the slopes of the mountain volcano Atitlan. *Pachuj* in Mayan means place or mist* where the cool mo^st air slows
■ • •))
03：59
silky body. Aavors of honey, milk chocolatt, and strawberry preserves are complemented by a rounded apple acidity. The finish is gently long with Hg and brown sugar notes.
the ripening of the coffee cherry to ar and flavor to the fifth generation of Mes family to cultivate a nature preserve.
-08：40
This exceptionally smooth coffee op«ns with tea-rose and vanilla aromas blossoms into a silky# butter cream body and brown sugar sweetness .Toasted barley and dutch cocoa notes tMlance the raspberry and
Issues: Coffee Listing
Medium to Full Roast
a bit of a turnoff.
edium Roast
-Participant 1
Medium Roast
g aromas of nd bergamot us smoothw ,$emi*sweel
Kenya Lenana $16.25
nces tl The fl nts of alwood.
GtMitemala Santo Tomas Pachuj $15.45
Costa Rka Sonora!
...but the coffee page with all the
varieties was a bit too text
heavy. That got in the way. I think
that would slow a user down or be
Regular Coffees
Ethiopia sldr^ioS
rietaT?\
J. Small hoi rees and bfinj the central washfl
Ethiopia Sidamo Shakisso $15.75 The Guji Zone 以 the southern highlands is one of the oldest coffee producing regions in the world, with heirloom varietals datinq back tens of lt centuries. Small holder farmers tend their trees and bring the ripe cherry to the central washing station for processing.
Grown in the Lenana re^on In the shadow of Mt. Kenya, our Kenya Lenana received a score of 94 by Ken Davids of
The chan^in economy in C made findin coffees morel
Opening aromas of jasmine, orange er zest, and bergamot melt into a 95 luxurious smoothness of black currant, semi-sweet chocolate, and blood orange. The honey sweetness perfectly balances the soft black grape acidity. The finish is long and gentle with nints of anise and sandalwood. 彳
Coffee Review. His taste notes: Sweetly tart, deeply floral, honeysuckle, mango, sarsparilla^ butterscotch, pipe tobacco in aroma and cup. Juicy, buoyantly tart acidity; full, syrupy mouthfeel. The quietly resonant finish centers around sarsparilla and butterscotch. Reminiscent in part of a very sophisticated essence of root beer float, this attractive Kenya is deep, sweet, and richly smooth.
Testing
each passing year. This
above coff«« that we hold out for, from the slopes of the Volcano Poas in Alajuela.
A buttery soft body and brown sugar sweetness are the base of complex cup, with semi-sweet chocolate and tan^rine notes wafting in. Essence of honeysuckle and lilac complement the Meyer lemon acidity, Hnisning clean and smooth with a hint ,• ， — • • 0* •・
radi uuu tu pi vuu\.c
•xceptionally nrw quality Colombia
■， • ■))
03：59
silky body. Havocs of honey, milk chocolate, and strawberiy preserves are complemented by a rounded apple acidity. The finHh is gently long with fig and brown sugar notes.
On the slop«s of the mountain volcano Atitlan. "Pachui* in Mayan means * place ar mlsf where the cool moist air slows
the ripening of the coffe« cherry to ar and flavor to the fifth generation of family to cultivate a nature preserve.
D 6
-08^0
This exceptionally smooth coffee opens with tea*rose and vanilla aromas blossoms into a silky, butter cream body and brown sugar sweetness. i oasted barley and dutch cocoa notes balance the raspberry and
Issues
Findings
So what does all this mean?
What can be done with this data?
User
Testing
Overview
7 ■
Quick overview of recommendations
Next Steps
Next steps to improve usability for:
♦ Navigation
♦ Coffee Listing
Recommendations
• The good news is that overall usability looks good. The site is simple enough to learn & use.
丿
Navigation
•Terminology
•Categorization
•Bigger product images
•Less details & more prominent coffee titles
Next Steps: Navigation
Change menu label to include teas so submenu is more intuitive
Our Coffees
Move “About Our Coffees” down as subcategory (replace ££Order & Shipping)
Re-label “Fresh Roasted Beans” to “Fresh Coffee Beans”
About Our Coffees \
FresIn^el^te^Beans
Loose Leaf Teas
Move ££Order & Shipping" to footer of page; Also, add this link to coffee details page
Order & Shipping
Next Steps: Navigation
Top menu label is more intuitive & user won't be surprised to find tea here
Suggested Navigation
Coffees & Teas
The “About...” section is clearly shown as a subcategory with less priority
Fresh Coffee Beans
Loose Leaf Teas
Changing the label to include ££coffee,, is consistent with rest of site so as not to confuse users
About Our Coffees
Next Steps: Coffee Listing
I would love to see just the name of
the coffee, and the price of the
coffee, and the intensity (roast level).
-Participant 3
This is an excellent idea & can be
implemented quickly & easily
Next Steps: Coffee Listing
Current Listing
Suggested Listing
/ Remove details
/ Add bigger image
/ Display title, roast, size, and price
Rwanda, Kanzu $15.75
Produced by small holder farmers on the soaring misty slopes of Nyamasheke above Lake Kivu, this coffee offers a classic Rwanda flavor profile.
Dried plum, semi-sweet chocolate, almond butter; and Brazil nut flavors rest gently in the syrupy, full body while aromas of clove, lavender; and Dutch cocoa waft enticingly above. The finish is long, smooth, and sweet with sandalwood aromatics.
Medium Roast
Conclusion
With these simple changes, the usability of the Kean
Coffee website can be significantly improved.
By improving usability, users will be more inclined to use
the site to purchase coffee as well as recommend it to
others. Kean Coffee would then be able to further expand
their target market and have a higher potential for
increasing website revenue.
For further questions, feel free to contact me:
Veronica Hernandez
veronica.hernandez@uci.edu
扫一扫
624
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
