![Page 1: UI / UX - UQAC · 2019-10-14 · UX • UX” stands for “user experience.” • User experience is everything that affects the user’s interaction with a product getting form](https://reader033.vdocuments.us/reader033/viewer/2022042909/5f3c6ce963cf994e16699072/html5/thumbnails/1.jpg)
UI / UX8INF832
Bob-Antoine MENELAS, Ph.D.
![Page 2: UI / UX - UQAC · 2019-10-14 · UX • UX” stands for “user experience.” • User experience is everything that affects the user’s interaction with a product getting form](https://reader033.vdocuments.us/reader033/viewer/2022042909/5f3c6ce963cf994e16699072/html5/thumbnails/2.jpg)
Outline• Introduction • User Interface / User eXperience • User-centered design • Thinking design • Fundamentals of UI • Fundamentals of UX • Factors that influences UX • Conclusion
![Page 3: UI / UX - UQAC · 2019-10-14 · UX • UX” stands for “user experience.” • User experience is everything that affects the user’s interaction with a product getting form](https://reader033.vdocuments.us/reader033/viewer/2022042909/5f3c6ce963cf994e16699072/html5/thumbnails/3.jpg)
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.
![Page 4: UI / UX - UQAC · 2019-10-14 · UX • UX” stands for “user experience.” • User experience is everything that affects the user’s interaction with a product getting form](https://reader033.vdocuments.us/reader033/viewer/2022042909/5f3c6ce963cf994e16699072/html5/thumbnails/4.jpg)
Outline• Introduction • User Interface / User eXperience • User-centered design • Thinking design • Fundamentals of UI • Fundamentals of UX • Factors that influences UX • Conclusion
![Page 5: UI / UX - UQAC · 2019-10-14 · UX • UX” stands for “user experience.” • User experience is everything that affects the user’s interaction with a product getting form](https://reader033.vdocuments.us/reader033/viewer/2022042909/5f3c6ce963cf994e16699072/html5/thumbnails/5.jpg)
What is UI• Human-Computer Interaction (HCI) research is
focused on the interfaces between people (users) and computers.
• The point of interaction or communication between a computer and another entity, such as a printer or human operator. Information flows in one direction or two.
• UI stands for User Interface. • UI is the graphical layout of an application.
![Page 6: UI / UX - UQAC · 2019-10-14 · UX • UX” stands for “user experience.” • User experience is everything that affects the user’s interaction with a product getting form](https://reader033.vdocuments.us/reader033/viewer/2022042909/5f3c6ce963cf994e16699072/html5/thumbnails/6.jpg)
What is UI Design? • UI is the graphical layout of an application. • 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.
![Page 7: UI / UX - UQAC · 2019-10-14 · UX • UX” stands for “user experience.” • User experience is everything that affects the user’s interaction with a product getting form](https://reader033.vdocuments.us/reader033/viewer/2022042909/5f3c6ce963cf994e16699072/html5/thumbnails/7.jpg)
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.
![Page 8: UI / UX - UQAC · 2019-10-14 · UX • UX” stands for “user experience.” • User experience is everything that affects the user’s interaction with a product getting form](https://reader033.vdocuments.us/reader033/viewer/2022042909/5f3c6ce963cf994e16699072/html5/thumbnails/8.jpg)
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.
![Page 9: UI / UX - UQAC · 2019-10-14 · UX • UX” stands for “user experience.” • User experience is everything that affects the user’s interaction with a product getting form](https://reader033.vdocuments.us/reader033/viewer/2022042909/5f3c6ce963cf994e16699072/html5/thumbnails/9.jpg)
What is UX Design?• A user’s experience of the app is determined by how
they 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 set out 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.
![Page 10: UI / UX - UQAC · 2019-10-14 · UX • UX” stands for “user experience.” • User experience is everything that affects the user’s interaction with a product getting form](https://reader033.vdocuments.us/reader033/viewer/2022042909/5f3c6ce963cf994e16699072/html5/thumbnails/10.jpg)
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 operates.
![Page 11: UI / UX - UQAC · 2019-10-14 · UX • UX” stands for “user experience.” • User experience is everything that affects the user’s interaction with a product getting form](https://reader033.vdocuments.us/reader033/viewer/2022042909/5f3c6ce963cf994e16699072/html5/thumbnails/11.jpg)
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.
![Page 12: UI / UX - UQAC · 2019-10-14 · UX • UX” stands for “user experience.” • User experience is everything that affects the user’s interaction with a product getting form](https://reader033.vdocuments.us/reader033/viewer/2022042909/5f3c6ce963cf994e16699072/html5/thumbnails/12.jpg)
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.
![Page 13: UI / UX - UQAC · 2019-10-14 · UX • UX” stands for “user experience.” • User experience is everything that affects the user’s interaction with a product getting form](https://reader033.vdocuments.us/reader033/viewer/2022042909/5f3c6ce963cf994e16699072/html5/thumbnails/13.jpg)
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
![Page 14: UI / UX - UQAC · 2019-10-14 · UX • UX” stands for “user experience.” • User experience is everything that affects the user’s interaction with a product getting form](https://reader033.vdocuments.us/reader033/viewer/2022042909/5f3c6ce963cf994e16699072/html5/thumbnails/14.jpg)
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.
![Page 15: UI / UX - UQAC · 2019-10-14 · UX • UX” stands for “user experience.” • User experience is everything that affects the user’s interaction with a product getting form](https://reader033.vdocuments.us/reader033/viewer/2022042909/5f3c6ce963cf994e16699072/html5/thumbnails/15.jpg)
What is a good design• A solution that serves the users and satisfies the
client
1. Does what the users need and want 2. Is natural to use 3. Helps them avoid trouble
Easy to say, very hard to do well
![Page 16: UI / UX - UQAC · 2019-10-14 · UX • UX” stands for “user experience.” • User experience is everything that affects the user’s interaction with a product getting form](https://reader033.vdocuments.us/reader033/viewer/2022042909/5f3c6ce963cf994e16699072/html5/thumbnails/16.jpg)
Outline• Introduction • User Interface / User eXperience • User-centered design • Thinking design • Fundamentals of UI • Fundamentals of UX • Factors that influences UX • Conclusion
![Page 17: UI / UX - UQAC · 2019-10-14 · UX • UX” stands for “user experience.” • User experience is everything that affects the user’s interaction with a product getting form](https://reader033.vdocuments.us/reader033/viewer/2022042909/5f3c6ce963cf994e16699072/html5/thumbnails/17.jpg)
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
![Page 18: UI / UX - UQAC · 2019-10-14 · UX • UX” stands for “user experience.” • User experience is everything that affects the user’s interaction with a product getting form](https://reader033.vdocuments.us/reader033/viewer/2022042909/5f3c6ce963cf994e16699072/html5/thumbnails/18.jpg)
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)
![Page 19: UI / UX - UQAC · 2019-10-14 · UX • UX” stands for “user experience.” • User experience is everything that affects the user’s interaction with a product getting form](https://reader033.vdocuments.us/reader033/viewer/2022042909/5f3c6ce963cf994e16699072/html5/thumbnails/19.jpg)
Machine centered design• The needs of the user are not considered
![Page 20: UI / UX - UQAC · 2019-10-14 · UX • UX” stands for “user experience.” • User experience is everything that affects the user’s interaction with a product getting form](https://reader033.vdocuments.us/reader033/viewer/2022042909/5f3c6ce963cf994e16699072/html5/thumbnails/20.jpg)
Two main points to consider
• Human Capabilities • Values and sensibilities of human
![Page 21: UI / UX - UQAC · 2019-10-14 · UX • UX” stands for “user experience.” • User experience is everything that affects the user’s interaction with a product getting form](https://reader033.vdocuments.us/reader033/viewer/2022042909/5f3c6ce963cf994e16699072/html5/thumbnails/21.jpg)
HUMAN CAPABILITIES • Memory • Attention • Visual and Audio Perception • Learning • Language + Communication • Touch • Ergonomics (sense of fit)
![Page 22: UI / UX - UQAC · 2019-10-14 · UX • UX” stands for “user experience.” • User experience is everything that affects the user’s interaction with a product getting form](https://reader033.vdocuments.us/reader033/viewer/2022042909/5f3c6ce963cf994e16699072/html5/thumbnails/22.jpg)
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
![Page 23: UI / UX - UQAC · 2019-10-14 · UX • UX” stands for “user experience.” • User experience is everything that affects the user’s interaction with a product getting form](https://reader033.vdocuments.us/reader033/viewer/2022042909/5f3c6ce963cf994e16699072/html5/thumbnails/23.jpg)
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
![Page 24: UI / UX - UQAC · 2019-10-14 · UX • UX” stands for “user experience.” • User experience is everything that affects the user’s interaction with a product getting form](https://reader033.vdocuments.us/reader033/viewer/2022042909/5f3c6ce963cf994e16699072/html5/thumbnails/24.jpg)
KNOW YOUR USER ROLES RESPONSIBILITIES, CAPABILITIES
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
![Page 25: UI / UX - UQAC · 2019-10-14 · UX • UX” stands for “user experience.” • User experience is everything that affects the user’s interaction with a product getting form](https://reader033.vdocuments.us/reader033/viewer/2022042909/5f3c6ce963cf994e16699072/html5/thumbnails/25.jpg)
KNOW YOUR USER ROLES RESPONSIBILITIES, CAPABILITIES
• 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?
![Page 26: UI / UX - UQAC · 2019-10-14 · UX • UX” stands for “user experience.” • User experience is everything that affects the user’s interaction with a product getting form](https://reader033.vdocuments.us/reader033/viewer/2022042909/5f3c6ce963cf994e16699072/html5/thumbnails/26.jpg)
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.
![Page 27: UI / UX - UQAC · 2019-10-14 · UX • UX” stands for “user experience.” • User experience is everything that affects the user’s interaction with a product getting form](https://reader033.vdocuments.us/reader033/viewer/2022042909/5f3c6ce963cf994e16699072/html5/thumbnails/27.jpg)
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
![Page 28: UI / UX - UQAC · 2019-10-14 · UX • UX” stands for “user experience.” • User experience is everything that affects the user’s interaction with a product getting form](https://reader033.vdocuments.us/reader033/viewer/2022042909/5f3c6ce963cf994e16699072/html5/thumbnails/28.jpg)
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.
![Page 29: UI / UX - UQAC · 2019-10-14 · UX • UX” stands for “user experience.” • User experience is everything that affects the user’s interaction with a product getting form](https://reader033.vdocuments.us/reader033/viewer/2022042909/5f3c6ce963cf994e16699072/html5/thumbnails/29.jpg)
Outline• Introduction • User Interface / User eXperience • User-centered design • Thinking design • Fundamentals of UI • Fundamentals of UX • Factors that influences UX • Conclusion
![Page 30: UI / UX - UQAC · 2019-10-14 · UX • UX” stands for “user experience.” • User experience is everything that affects the user’s interaction with a product getting form](https://reader033.vdocuments.us/reader033/viewer/2022042909/5f3c6ce963cf994e16699072/html5/thumbnails/30.jpg)
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.
![Page 31: UI / UX - UQAC · 2019-10-14 · UX • UX” stands for “user experience.” • User experience is everything that affects the user’s interaction with a product getting form](https://reader033.vdocuments.us/reader033/viewer/2022042909/5f3c6ce963cf994e16699072/html5/thumbnails/31.jpg)
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.
![Page 32: UI / UX - UQAC · 2019-10-14 · UX • UX” stands for “user experience.” • User experience is everything that affects the user’s interaction with a product getting form](https://reader033.vdocuments.us/reader033/viewer/2022042909/5f3c6ce963cf994e16699072/html5/thumbnails/32.jpg)
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
![Page 33: UI / UX - UQAC · 2019-10-14 · UX • UX” stands for “user experience.” • User experience is everything that affects the user’s interaction with a product getting form](https://reader033.vdocuments.us/reader033/viewer/2022042909/5f3c6ce963cf994e16699072/html5/thumbnails/33.jpg)
• 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.
![Page 34: UI / UX - UQAC · 2019-10-14 · UX • UX” stands for “user experience.” • User experience is everything that affects the user’s interaction with a product getting form](https://reader033.vdocuments.us/reader033/viewer/2022042909/5f3c6ce963cf994e16699072/html5/thumbnails/34.jpg)
an Iterative and Non-linear Process
![Page 35: UI / UX - UQAC · 2019-10-14 · UX • UX” stands for “user experience.” • User experience is everything that affects the user’s interaction with a product getting form](https://reader033.vdocuments.us/reader033/viewer/2022042909/5f3c6ce963cf994e16699072/html5/thumbnails/35.jpg)
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
![Page 36: UI / UX - UQAC · 2019-10-14 · UX • UX” stands for “user experience.” • User experience is everything that affects the user’s interaction with a product getting form](https://reader033.vdocuments.us/reader033/viewer/2022042909/5f3c6ce963cf994e16699072/html5/thumbnails/36.jpg)
Inspiration• This means going in the field,
o interviewing several types of users or stakeholders, observing them, living the experience with them, collecting data in different formats; pictures, videos, interviews,
o taking this data back to the firm or the studio to share o discuss until some patterns and hypotheses emerge.
• These findings should explain the users' behavior and help understand their needs, pains and dissatisfactions.
• For example, shopping cart safety for families with babies, is an issue.
• Also, routine as a potential threat for police officers.
![Page 37: UI / UX - UQAC · 2019-10-14 · UX • UX” stands for “user experience.” • User experience is everything that affects the user’s interaction with a product getting form](https://reader033.vdocuments.us/reader033/viewer/2022042909/5f3c6ce963cf994e16699072/html5/thumbnails/37.jpg)
Ideation• This refers to the generation of as many ideas or
solutions as possible, to address these problems and needs.
• These ideas are then combined in solutions that could potentially solve the problem and address the issues.
![Page 38: UI / UX - UQAC · 2019-10-14 · UX • UX” stands for “user experience.” • User experience is everything that affects the user’s interaction with a product getting form](https://reader033.vdocuments.us/reader033/viewer/2022042909/5f3c6ce963cf994e16699072/html5/thumbnails/38.jpg)
Implementation• In this phase one may rapidly built rough and low-
cost prototypes to put concrete solutions into the hands of the users, thereby testing the problem as well as the proposed solution.
![Page 39: UI / UX - UQAC · 2019-10-14 · UX • UX” stands for “user experience.” • User experience is everything that affects the user’s interaction with a product getting form](https://reader033.vdocuments.us/reader033/viewer/2022042909/5f3c6ce963cf994e16699072/html5/thumbnails/39.jpg)
Practice• Think about a product of the daily life • Discuss about an associated problem • Use the Design Thinking Process to propose a
solution
![Page 40: UI / UX - UQAC · 2019-10-14 · UX • UX” stands for “user experience.” • User experience is everything that affects the user’s interaction with a product getting form](https://reader033.vdocuments.us/reader033/viewer/2022042909/5f3c6ce963cf994e16699072/html5/thumbnails/40.jpg)
Outline• Introduction • User Interface / User eXperience • User-centered design • Thinking design • Fundamentals of UI • Fundamentals of UX • Factors that influences UX • Conclusion
![Page 41: UI / UX - UQAC · 2019-10-14 · UX • UX” stands for “user experience.” • User experience is everything that affects the user’s interaction with a product getting form](https://reader033.vdocuments.us/reader033/viewer/2022042909/5f3c6ce963cf994e16699072/html5/thumbnails/41.jpg)
Fundamentals of UI1. Know your user 2. Pay attention to patterns 3. Create consistency 4. Use typography to create hierarchy 5. Provide feedback 6. Be resilient 7. Reward the user 8. Speak their language 9. Keep it simple 10. Keep moving forward
![Page 42: UI / UX - UQAC · 2019-10-14 · UX • UX” stands for “user experience.” • User experience is everything that affects the user’s interaction with a product getting form](https://reader033.vdocuments.us/reader033/viewer/2022042909/5f3c6ce963cf994e16699072/html5/thumbnails/42.jpg)
Know your userso 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 app with everyone,
• Families, friends, strangers, everyone
![Page 43: UI / UX - UQAC · 2019-10-14 · UX • UX” stands for “user experience.” • User experience is everything that affects the user’s interaction with a product getting form](https://reader033.vdocuments.us/reader033/viewer/2022042909/5f3c6ce963cf994e16699072/html5/thumbnails/43.jpg)
Pay attention to patterns• There is no need to reinvent the wheel • 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 familiar with the interface
![Page 44: UI / UX - UQAC · 2019-10-14 · UX • UX” stands for “user experience.” • User experience is everything that affects the user’s interaction with a product getting form](https://reader033.vdocuments.us/reader033/viewer/2022042909/5f3c6ce963cf994e16699072/html5/thumbnails/44.jpg)
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)
![Page 45: UI / UX - UQAC · 2019-10-14 · UX • UX” stands for “user experience.” • User experience is everything that affects the user’s interaction with a product getting form](https://reader033.vdocuments.us/reader033/viewer/2022042909/5f3c6ce963cf994e16699072/html5/thumbnails/45.jpg)
Use typography to create hierarchy
• Make design clean and readable
![Page 46: UI / UX - UQAC · 2019-10-14 · UX • UX” stands for “user experience.” • User experience is everything that affects the user’s interaction with a product getting form](https://reader033.vdocuments.us/reader033/viewer/2022042909/5f3c6ce963cf994e16699072/html5/thumbnails/46.jpg)
Provide feedback• The interface should at all time speak to the user • For whatever actions of the user, provide a
feedback • By offering a feedback in the UI, the user will be
able if necessary to identify if the action is good, bad or misunderstood
![Page 47: UI / UX - UQAC · 2019-10-14 · UX • UX” stands for “user experience.” • User experience is everything that affects the user’s interaction with a product getting form](https://reader033.vdocuments.us/reader033/viewer/2022042909/5f3c6ce963cf994e16699072/html5/thumbnails/47.jpg)
Be aware that 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
![Page 48: UI / UX - UQAC · 2019-10-14 · UX • UX” stands for “user experience.” • User experience is everything that affects the user’s interaction with a product getting form](https://reader033.vdocuments.us/reader033/viewer/2022042909/5f3c6ce963cf994e16699072/html5/thumbnails/48.jpg)
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 bout rewards, animation
![Page 49: UI / UX - UQAC · 2019-10-14 · UX • UX” stands for “user experience.” • User experience is everything that affects the user’s interaction with a product getting form](https://reader033.vdocuments.us/reader033/viewer/2022042909/5f3c6ce963cf994e16699072/html5/thumbnails/49.jpg)
Speak their language• Keep thing conversational not sensational • Provide clear and concise label for actions and
keep your messaging simple
![Page 50: UI / UX - UQAC · 2019-10-14 · UX • UX” stands for “user experience.” • User experience is everything that affects the user’s interaction with a product getting form](https://reader033.vdocuments.us/reader033/viewer/2022042909/5f3c6ce963cf994e16699072/html5/thumbnails/50.jpg)
Keep it simple• Do not make the user think to hard, keep it simple • Do not make overloading shadows, bright colors or
inconsistence typography • Best interfaces are invisible
![Page 51: UI / UX - UQAC · 2019-10-14 · UX • UX” stands for “user experience.” • User experience is everything that affects the user’s interaction with a product getting form](https://reader033.vdocuments.us/reader033/viewer/2022042909/5f3c6ce963cf994e16699072/html5/thumbnails/51.jpg)
Keep moving forward• When creating a UI, you will make mistakes • Just keep moving forward • Rework the UI multiple times
![Page 52: UI / UX - UQAC · 2019-10-14 · UX • UX” stands for “user experience.” • User experience is everything that affects the user’s interaction with a product getting form](https://reader033.vdocuments.us/reader033/viewer/2022042909/5f3c6ce963cf994e16699072/html5/thumbnails/52.jpg)
Outline• Introduction • User Interface / User eXperience • User-centered design • Thinking design • Fundamentals of UI • Fundamentals of UX • Factors that influences UX • Conclusion
![Page 53: UI / UX - UQAC · 2019-10-14 · UX • UX” stands for “user experience.” • User experience is everything that affects the user’s interaction with a product getting form](https://reader033.vdocuments.us/reader033/viewer/2022042909/5f3c6ce963cf994e16699072/html5/thumbnails/53.jpg)
The 7 Factors that Influence 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.
• There are seven factors that describe user experience,
![Page 54: UI / UX - UQAC · 2019-10-14 · UX • UX” stands for “user experience.” • User experience is everything that affects the user’s interaction with a product getting form](https://reader033.vdocuments.us/reader033/viewer/2022042909/5f3c6ce963cf994e16699072/html5/thumbnails/54.jpg)
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 user 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 achieve goal
• Interaction design: how to engage the user, anticipate interactions
• Usability : see previous definition
![Page 55: UI / UX - UQAC · 2019-10-14 · UX • UX” stands for “user experience.” • User experience is everything that affects the user’s interaction with a product getting form](https://reader033.vdocuments.us/reader033/viewer/2022042909/5f3c6ce963cf994e16699072/html5/thumbnails/55.jpg)
Fundamentals of UX
![Page 56: UI / UX - UQAC · 2019-10-14 · UX • UX” stands for “user experience.” • User experience is everything that affects the user’s interaction with a product getting form](https://reader033.vdocuments.us/reader033/viewer/2022042909/5f3c6ce963cf994e16699072/html5/thumbnails/56.jpg)
Outline• Introduction • User Interface / User eXperience • User-centered design • Thinking design • Fundamentals of UI • Fundamentals of UX • Factors that influences UX • Conclusion
![Page 57: UI / UX - UQAC · 2019-10-14 · UX • UX” stands for “user experience.” • User experience is everything that affects the user’s interaction with a product getting form](https://reader033.vdocuments.us/reader033/viewer/2022042909/5f3c6ce963cf994e16699072/html5/thumbnails/57.jpg)
7 factors that influence UX:
1. Useful 2. Usable 3. Findable 4. Credible 5. Desirable 6. Accessible 7. Valuable
![Page 58: UI / UX - UQAC · 2019-10-14 · UX • UX” stands for “user experience.” • User experience is everything that affects the user’s interaction with a product getting form](https://reader033.vdocuments.us/reader033/viewer/2022042909/5f3c6ce963cf994e16699072/html5/thumbnails/58.jpg)
Useful• Usefulness : the quality of having utility and
especially practical worth or applicability
![Page 59: UI / UX - UQAC · 2019-10-14 · UX • UX” stands for “user experience.” • User experience is everything that affects the user’s interaction with a product getting form](https://reader033.vdocuments.us/reader033/viewer/2022042909/5f3c6ce963cf994e16699072/html5/thumbnails/59.jpg)
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.
![Page 60: UI / UX - UQAC · 2019-10-14 · UX • UX” stands for “user experience.” • User experience is everything that affects the user’s interaction with a product getting form](https://reader033.vdocuments.us/reader033/viewer/2022042909/5f3c6ce963cf994e16699072/html5/thumbnails/60.jpg)
Findable• Findable refers to the idea that the product must be
easy to find, and in the instance of digital and information products, the content within them must be easy to find, too. The reason is quite simple: if you cannot find the content you want in a website, you’re going to stop browsing it.
![Page 61: UI / UX - UQAC · 2019-10-14 · UX • UX” stands for “user experience.” • User experience is everything that affects the user’s interaction with a product getting form](https://reader033.vdocuments.us/reader033/viewer/2022042909/5f3c6ce963cf994e16699072/html5/thumbnails/61.jpg)
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.
![Page 62: UI / UX - UQAC · 2019-10-14 · UX • UX” stands for “user experience.” • User experience is everything that affects the user’s interaction with a product getting form](https://reader033.vdocuments.us/reader033/viewer/2022042909/5f3c6ce963cf994e16699072/html5/thumbnails/62.jpg)
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.
![Page 63: UI / UX - UQAC · 2019-10-14 · UX • UX” stands for “user experience.” • User experience is everything that affects the user’s interaction with a product getting form](https://reader033.vdocuments.us/reader033/viewer/2022042909/5f3c6ce963cf994e16699072/html5/thumbnails/63.jpg)
accessible• Accessibility is about providing an experience which can
be accessed by users with a full range of abilities o this includes those who are disabled in some respect, such as the hearing,
vision, motion, or learning impaired.
• Designing for accessibility is often seen by companies as a waste of money—the reason being the enduring misconception that people with disabilities make up a small segment of the population. o In fact, according to the census data in the United
States, at least 19% of people had a disability in 2010, and it is likely that this number is higher in less developed nations.
• It’s also worth remembering that when you design for accessibility, you will often find that you create products that are easier for everyone to use, not just those with disabilities.
![Page 64: UI / UX - UQAC · 2019-10-14 · UX • UX” stands for “user experience.” • User experience is everything that affects the user’s interaction with a product getting form](https://reader033.vdocuments.us/reader033/viewer/2022042909/5f3c6ce963cf994e16699072/html5/thumbnails/64.jpg)
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.
![Page 65: UI / UX - UQAC · 2019-10-14 · UX • UX” stands for “user experience.” • User experience is everything that affects the user’s interaction with a product getting form](https://reader033.vdocuments.us/reader033/viewer/2022042909/5f3c6ce963cf994e16699072/html5/thumbnails/65.jpg)
Practice• Do your previous proposition meet these criteria?
![Page 66: UI / UX - UQAC · 2019-10-14 · UX • UX” stands for “user experience.” • User experience is everything that affects the user’s interaction with a product getting form](https://reader033.vdocuments.us/reader033/viewer/2022042909/5f3c6ce963cf994e16699072/html5/thumbnails/66.jpg)
Outline
![Page 67: UI / UX - UQAC · 2019-10-14 · UX • UX” stands for “user experience.” • User experience is everything that affects the user’s interaction with a product getting form](https://reader033.vdocuments.us/reader033/viewer/2022042909/5f3c6ce963cf994e16699072/html5/thumbnails/67.jpg)
Outline• User Interface / User eXperience • User-centered design • Thinking design • Fundamentals of UI • Fundamentals of UX • Factors that influences UX • Conclusion
![Page 68: UI / UX - UQAC · 2019-10-14 · UX • UX” stands for “user experience.” • User experience is everything that affects the user’s interaction with a product getting form](https://reader033.vdocuments.us/reader033/viewer/2022042909/5f3c6ce963cf994e16699072/html5/thumbnails/68.jpg)
We learned about• UI/UX • Thinking design • Fundamentals of UI • Fundamentals of UX • Factors that influences UX