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