User Interface (UI) and User Experience (UX)

User Interface (UI) and User Experience (UX) are two coexisting terms that are usually
mentioned simultaneously.

The user interface refers to a series of screens or pages and visual elements such as
buttons, color scheme, and icons.

The user experience, as the term goes, refers to the designer’s experience and their
approach to designing a product.
UX is not about visuals - it focuses more on the look and feel of a product.

Every designer has to follow certain principles and guidelines before developing

prototypes and screens.

User Interface (UI) is a device or program enabling a user to communicate with a computer.

User experience design is the process of supporting user behavior through usability, usefulness, and

desirability provided in the interaction with a product..

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” stands for “user experience.”
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?
Does navigating the app feel logical or does it feel arbitrary?
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?
UX designers are also concerned with an application’s user interface, and this is why

people get confused about the difference between the two. But whereas UI designers

are tasked with deciding how the user interface will look, UX designers are in charge of

determining how the user interface operates.

They determine the structure of the interface and the functionality.

How it’s organized and how all the parts relate to one another.

In short, they design how the interface works.

If it works well and feels seamless, the user will have a good experience.

But if navigation is complicated or unintuitive, then a lousy user experience is likely.

UX designers work to avoid the this scenario.

How They Work Together

So a UX designer decides how the user interface works while the UI designer decides how the

user interface looks.

This is a very collaborative process, and the two design teams tend to work closely together.

As the UX team is working out the flow of the app, how all of the buttons navigate you through

your tasks, and how the interface efficiently serves up the information user’s need, the UI

team is working on how all of these interface elements will appear on screen.
User Interface (UI) User Experience (UX)
Color scheme Interactive design
Graphic design User research
Visual design Prototypes
Layout wireframes
UX designing
Don Norman, a cognitive scientist and user expert, highlights some essential principles for all UX
designers.
These guidelines include:
using both pieces of knowledge in the world and knowledge in the head.
designing for errors.

making things visible.

UX designing is related to the knowledge that the designer has regarding different domains and
products.
UI designing
The user interface (UI) is the point of interaction between the user and a product or machine. The
user interface is usually related to tangible items, as a user cannot interact with a non-tangible one.
Just like UX, UI designing also involves characteristics and principles, such as:
Efficiency
Clarity
Familiarity
Consistency
UI design considers the product’s look, feel, and interactivity in websites and apps. It all comes down
to making a product’s user interface as simple as possible, which includes carefully evaluating each
visual and interactive aspect the user may encounter.
Summary

All of the features that allow someone to connect with a product or service are referred to as user interface (UI).

The user experience (UX), on the other hand, is what the person using the product or service gets from it.
Chapter 1.
What Users Do
Good interface design doesn’t start with pictures. It starts with an understanding of people: what they’re

like, why they use a given piece of software, and how they might interact with it. The more you know

about them, and the more you empathize with them, the more effectively you can design for them.

Software, after all, is merely a means to an end for the people who use it. The better you satisfy those

ends, the happier those users will be.

Whatever the case, the user interface mediates that conversation, helping users achieve whatever ends

they had in mind.

As a user interface designer, one get to script that conversation, or at least define its terms.

And if you’re going to script a conversation, you should understand the human’s side as well as

possible.

•What are the user’s motives and intentions?

•What “vocabulary” of words, icons, and gestures does the user expect to employ?

•How can the application set expectations appropriately for the user?

•How do the user and the machine finally end up communicating meaning to each other?
There’s a maxim in the field of interface design: “Know thy users, for they are not you!”

So, this chapter will talk about people.

They describe human behaviors—as opposed to system behaviors

Software that supports these human behaviors better helps users achieve their goals.
A Means to an End (something done only to produce a desired result. a way of getting or achieving something that
you want.Information management must be regarded as a means to an end. )
Everyone who uses a tool—software or otherwise—has a reason for using it. For instance:
•Finding some fact or object
•Learning something
•Performing a transaction
•Controlling or monitoring something
•Creating something
•Conversing with other people
•Being entertained
→Well-known idioms, user behaviors, and design patterns can support each of these abstract goals

→User experience designers have learned, for example, how to help people search through

vast amounts of online information for specific facts.

The first step in designing an interface is to figure out

→what its users are really trying to accomplish.

→Asking the right questions can help you connect user goals to the design process.
Asking the right questions can help you connect user goals to the design process.

Users and clients typically speak to you in terms of desired features and solutions, not of needs and

problems.

When a user or client tells you he wants a certain feature, ask why he wants it—determine his

immediate goal.

Then to the answer of this question, ask “why” again. And again.

Keep asking until you move well beyond the boundaries of the immediate design problem
the real art of interface design lies in solving the right problem.

If there’s any way to finish the transaction without making the user go through that form at all, get rid of it
altogether.
It’s deceptively easy to model users as a single faceless entity—“The User”—walking through a set of
simple use cases, with one task-oriented goal in mind. But that won’t necessarily reflect your users’ reality.
To do design well, you need to take many “softer” factors into account:

gut reactions,

preferences,

social context,

beliefs, and values

Many in the business world make a distinction between so-called hard and soft factors. The hard
factors are those which influence business practices in a direct and fundamental way. They are
seen as facts, hard, real, unavoidable. One can identify, collect, measure, almost grasp them.
Methods have been developed to systematize and analyze them so as to anticipate and react to
them. The hard factors are seen, for example, in numbers, processes, and organizational
structures.
All of these factors could affect the design of an application or site. Among these softer
factors, you may find the critical feature or design factor that makes your application
more appealing and successful.
The Basics of User Research
Empirical (based on, concerned with, or verifiable by observation or experience rather than theory or
pure logic.)discovery is the only really good way to obtain this information.

To get a design started, you’ll need to characterize the kinds of people who will be
using your design (including the softer factors just mentioned), and the best way to
do that is to go out and meet them.
Even if the same person uses both, his expectations for each are different—

a researcher using scientific software might tolerate a less-polished interface in

exchange for high functionality, whereas that same person may stop using the mobile

app if he finds its UI to be too hard to use after a few days.

Each user is unique, too. What one person finds difficult, the next one won’t

The trick is to figure out what’s generally true about your users,

which means learning about enough individual users to separate the quirks from the

common behavior patterns.

Specifically, you’ll want to learn:

•Their goals in using the software or site

•The specific tasks they undertake in pursuit of those goals

•The language and words they use to describe what they’re doing

•Their skill at using software similar to what you’re designing

•Their attitudes toward the kind of thing you’re designing, and how different designs

might affect those attitudes

this user-discovery phase will consume serious time early in the design cycle.
It’s expensive. But it’s worth it, because you stand a better chance at solving the right
problem
Direct observation
Case studies
Surveys
Personas
This is a design technique that “models” the target audiences. For each major user
group, you create a fictional person that captures the most important aspects of the
users in that group
Users’ Motivation to Learn

Before you start the design process, consider your overall approach. Think about how you
might design the interface’s overall interaction style—its personality

When you carry on a conversation with someone about a given subject, you adjust what
you say according to your understanding of the other person

The subject-specific vocabulary you use in your interface, for instance, should match your
users’ level of knowledge;

If their level of interest might be low, respect that, and don’t ask for too much effort for too
little reward.
Software designed for intermediate-to-expert users includes:

•Photoshop

•Dreamweaver

•Excel

•Code development environments

•System-administration tools for web servers

In contrast, here are some things designed for occasional users:

•Kiosks in tourist centers or museums

•Windows or Mac OS controls for setting desktop backgrounds

•Purchase pages for online stores

•Installation wizards

•Automated teller machines

The differences between the two groups are dramatic.
the applications in the middle of the continuum:

•Microsoft PowerPoint

•Email clients

•Facebook

•Blog-writing tools

The truth is that most applications fall into this middle ground.
The Patterns
Even though individuals are unique, people behave predictably.
Even though individuals are unique, people behave predictably.
Designers have been doing site visits and user observations for years;
cognitive scientists and other researchers have spent many hundreds of hours
watching how people do things and how they think about what they do.
Patterns describe human behaviors—not interface design elements .they’re
not prescriptive.
Safe Exploration
“Let me explore without getting lost or getting into trouble.”
One can explore an interface and not suffer dire consequences, one likely to learn
more and feel more positive about it. if an application offers a button that seems
like a Back button, but doesn’t behave quite like it—confusion might ensue. The
user can get disoriented while navigating, and may abandon the app altogether.
Instant Gratification
“I want to accomplish something now, not later.”
People like to see immediate results from the actions they take. it’s human nature.
If someone starts using an application and gets a “success experience” within the
first few seconds, that’s gratifying!
The need to support instant gratification has many design ramifications. For
instance, if you can predict the first thing a new user is likely to do, you should
design the UI to make that first thing stunningly easy.
Satisficing

“This is good enough. I don’t want to spend more time learning to do it better.”

The term satisficing is a combination of satisfying and sufficing.

(assuming that the interface supports Safe exploration).

This means several things for designers:
Use “calls to action” in the interface.
Give directions on what to do first: type here, drag an image here, tap here to
begin, and so forth.
Make labels short, plainly worded, and quick to read.
Use the layout of the interface to communicate
Satisficing is why many users end up with odd habits after they’ve been using a
system for a while.
Changes in Midstream

“I changed my mind about what I was doing.”

Occasionally, people change what they’re doing while in the middle of doing it

one can also make it easy for someone to start a process, stop in the middle, and

come back to it later to pick up where he left off—a property often called reentrance

The entered information shouldn’t be lost.

Deferred Choices

“I don’t want to answer that now; just let me finish!”

This follows from people’s desire for instant gratification. If you ask a task-

focused user, unnecessary questions in the process, he may prefer to skip the

questions and come back to them later.he can easily be deferred(put off (an

action or event) to a later time; postpone.)

Incremental Construction

“Let me change this. That doesn’t look right; let me change it again. That’s better.”

When people create things, they don’t usually do it all in a precise order.

When creative activities are well supported by good tools, they can induce a state

of flow in the user.

But bad tools will keep users distracted.

Habituation

“That gesture works everywhere else; why doesn’t it work here, too?”

When one uses an interface repeatedly, some frequent physical actions become reflexive:

pressing Ctrl-S to save a document,

clicking the Back button to leave a web page,

pressing Return to close a modal dialog box, using gestures to show and hide windows—
even pressing a car’s brake pedal.

The user no longer needs to think consciously about these actions. They’ve become

habitual.

This tendency helps people become expert users of a tool (and helps create a sense of

flow, too).
Microbreaks

“I’m waiting for the train. Let me do something useful for two minutes.”

Here are some typical activities during microbreaks:

•Checking email

•Reading a News Stream such as Facebook or Twitter

•Visiting a news site to find out what’s going on in the world

•Watching a short video

•Doing a quick web search

•Reading an online book

•Playing a short game

The key to supporting microbreaks is to make an activity easy

and fast to reach

Don’t take forever to load

Spatial Memory

“I swear that button was here a minute ago. Where did it go?”

When people manipulate objects and documents, they often find them again

later by remembering where they are, not what they’re named

people tend to use spatial memory to find things on the desktop, and it’s very effective.
Many applications put their dialog buttons—OK, Cancel, and so on—in predictable
places, partly because spatial memory for them is so strong
people tend to use spatial memory to find things on the desktop, and it’s very effective.
In the above figure, you can see that the CPU wants to read or fetch the data or
instruction. First, it will access the cache memory as it is near to it and provides
very fast access. If the required data or instruction is found, it will be fetched.
This situation is known as a cache hit.
But if the required data or instruction is not found in the cache memory then this
situation is known as a cache miss.
rearranging existing controls can disrupt spatial memory
Along with habituation, which is closely related, spatial memory is another
reason why consistency
across and within a platform’s applications is good.
People may expect to find similar functionality in similar places.
Prospective Memory
“I’m putting this here to remind myself to deal with it later.”
We engage in prospective memory when we plan to do something
in the future
Some software does support prospective remembering.
calendars, and sound alarms are typical example of mobile platforms
what else can you use for prospective memory?
•Notes to oneself, like virtual “sticky notes”
•Windows left on-screen
•Annotations put directly into documents (such as “Finish me!”)
•Browser bookmarks, for websites to be viewed later
•Documents stored on the desktop, rather than in the usual places in the
filesystem
•Email kept in an inbox (and maybe flagged) instead of filed away
Streamlined Repetition
“I have to repeat this how many times?”
just a few keystrokes or clicks for all repetitions—one will spare users much tedium.
Other variants include copy-and-paste capability (preventing the need to retype
the same thing in a million places), user-defined “shortcuts” to applications on
operating-system desktops

In any case, the idea is to offer users ways to streamline the repetitive tasks that
could otherwise be time-consuming, tedious, and error-prone.
Keyboard Only
“Please don’t make me use the mouse.”
Some people have real physical trouble using a mouse. Others prefer not to keep
switching between the mouse and keyboard because that takes time and effort
For the sakes of these users, some applications are designed to be “driven” entirely
via the keyboard
Several standard techniques exist for keyboard-only usage
Keyboard-only usage is particularly important for data-entry applications
Other People’s Advice
“What did everyone else say about this?”
People are social. As strong as our opinions may sometimes be,
we tend to be influenced by what our peers think.
people can be more effective when aided by others

an online support community is a valuable part of a complete

help system for some applications.
Personal Recommendations
“My friend told me to read this, so it must be pretty good.”
we are strongly influenced by our peers.
Therefore, should support person-to-person sharing of content
This implies a host of mechanisms that need to be used or designed in.
First, what exactly are users sharing?
Second, whom will they share it with?
Third, what implications does this reference have?