UI / UX - UQAC · 2019-10-14 · UX • UX” stands for “user experience.” • User experience...
Transcript of UI / UX - UQAC · 2019-10-14 · UX • UX” stands for “user experience.” • User experience...
UI / UX8INF832
Bob-Antoine MENELAS, Ph.D.
Outline• Introduction • User Interface / User eXperience • User-centered design • Thinking design • Fundamentals of UI • Fundamentals of UX • Factors that influences UX • Conclusion
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 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.
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.
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
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.
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.
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.
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. Is 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)
Machine centered design• The needs of the user are not considered
Two main points to consider
• Human Capabilities • Values and sensibilities of human
HUMAN CAPABILITIES • Memory • Attention • Visual and Audio Perception • Learning • Language + Communication • Touch • Ergonomics (sense of fit)
Values and sensibilities of human
• Level of experience • Physical or mental capabilities and limitations • Cultural expectations • Language differences • Senses of style • Have different needs or values
The alphanumeric password• Is a perfect example of machine-centered system • Several recent studies have pointed out that the increasing • number of accounts that people have to manage makes
difficult password memorization • Without the memorization problem, the maximally secured
password would have the maximum number of characters allowed by the system, randomly arranged.
• Instead of that, people do prefer repeated sequences of characters, familiar words or expression and sometimes do write down their password.
• Because of the difficulty of memorizing multiple passwords and remembering which password is associated with what account, people usually do reuse a same password for several accounts
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
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?
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
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• Introduction • User Interface / User eXperience • User-centered design • Thinking design • 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.
an Iterative and Non-linear Process
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
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.
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.
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.
Practice• Think about a product of the daily life • Discuss about an associated problem • Use the Design Thinking Process to propose a
solution
Outline• Introduction • User Interface / User eXperience • User-centered design • Thinking design • Fundamentals of UI • Fundamentals of UX • Factors that influences UX • Conclusion
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
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
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
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)
Use typography to create hierarchy
• Make design clean and readable
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
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
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
Speak their language• Keep thing conversational not sensational • Provide clear and concise label for actions and
keep your messaging simple
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
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
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,
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
Fundamentals of UX
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. The reason is quite simple: if you cannot find the content you want in a website, you’re going to stop browsing it.
Credible• Credibility relates to the ability of the user to trust in
the product that you’ve provided—not just that it does the job it is supposed to do, but also that it will last for a reasonable amount of time and that the information provided with it is accurate and fit-for-purpose. o Users aren’t going to give you a second chance to fool
them—there are plenty of alternatives in nearly every field for them to choose a credible product provider. They can and will leave in a matter of seconds and clicks unless you give them reason to stay.
Desirable• Desirability is conveyed in design through branding,
image, identity, aesthetics, and emotional design. • The more desirable a product is, the more likely it is
that the user who has it will brag about it and create desire in other users.
accessible• Accessibility is about providing an experience which can
be accessed by users with a full range of abilities o this includes those who are disabled in some respect, such as the hearing,
vision, motion, or learning impaired.
• Designing for accessibility is often seen by companies as a waste of money—the reason being the enduring misconception that people with disabilities make up a small segment of the population. o In fact, according to the census data in the United
States, at least 19% of people had a disability in 2010, and it is likely that this number is higher in less developed nations.
• It’s also worth remembering that when you design for accessibility, you will often find that you create products that are easier for everyone to use, not just those with disabilities.
Valuable• Finally, the product must deliver value. • It must deliver value to the business which creates it
and to the user who buys or uses it. • Without value, it is likely that any initial success of a
product will eventually corrode as the realities of natural economics start to undermine it.
Practice• Do your previous proposition meet these criteria?
Outline
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