Scribd
Upload
33 views

Lecture 4 - UIUX

The document discusses various aspects of user interface design including user interface design (UID), user experience (UX), wireframes, information architecture, prototyping, interaction design, and usability. UID focuses on designing interfaces with the user's experience and interaction in mind. UX involves a user's behaviors, attitudes, and emotions when using a product or service. Wireframes help arrange interface elements and depict page layout. Information architecture helps with organization, labeling, search, and navigation. Prototyping involves building early versions to test concepts. Interaction design shapes digital products around user needs. Usability measures how easy interfaces are to use and improve.

Uploaded by

john agai
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
33 views

Lecture 4 - UIUX

The document discusses various aspects of user interface design including user interface design (UID), user experience (UX), wireframes, information architecture, prototyping, interaction design, and usability. UID focuses on designing interfaces with the user's experience and interaction in mind. UX involves a user's behaviors, attitudes, and emotions when using a product or service. Wireframes help arrange interface elements and depict page layout. Information architecture helps with organization, labeling, search, and navigation. Prototyping involves building early versions to test concepts. Interaction design shapes digital products around user needs. Usability measures how easy interfaces are to use and improve.

Uploaded by

john agai
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 17

DIT 0405:

WEB
DEVELOPMENT
USER INTERFACE
(UI)/USER EXPERIENCE
(UX) DESIGN
USER INTERFACE
DESIGN (UI)
User interface design (UID) or user interface
engineering is the design of websites, computers,
appliances, machines, mobile communication
devices, and software applications with the focus on
the user's experience and interaction. The goal of user
interface design is to make the user's interaction as
simple and efficient as possible, in terms of
accomplishing user goals—what is often called user-
centered design.
UI FUNDAMENTALS
1. Know your user - “Obsess over customers: when given
the choice between obsessing over competitors or
customers, always obsess over customers. Start with
customers and work backward.” – Jeff Bezos
2. Pay attention to patterns - using familiar UI patterns
3. Stay consistent - “The more users’ expectations prove
right, the more they will feel in control of the system and
the more they will like it.” – Jakob Nielson
4. User visual hierarchy - Design your interface in a way
that allows the user to focus on what is most important.
The size, color, and placement of each element work
together, creating a clear path to understanding your
interface. A clear hierarchy will go great lengths in
reducing the appearance of complexity (even when
the actions themselves are complex).
5. Provide feedback - Your interface should at all times
speak to your user, when his/her actions are both right
and wrong or misunderstood. Always inform your users of
actions, changes in state and errors, or exceptions that
occur. Visual cues or simple messaging can show the user
whether his or her actions have led to the expected
result.
6. Be forgiving - No matter how clear your design is, people
will make mistakes. Your UI should allow for and tolerate
user error.
7. Empower your user - Providing more abstract ways, like
keyboard shortcuts, to accomplish tasks will allow your
design to get out of the way.
8. Speak their language - All interfaces require some level of
copywriting. Keep things conversational, not sensational.
Provide clear and concise labels for actions and keep
your messaging simple. Your users will appreciate it,
because they won’t hear you – they will hear themselves
and/or their peers.
9. Keep it simple - “A modern paradox is that it’s
simpler to create complex interfaces because it’s
so complex to simplify them.” – Pär Almqvist
10. Keep moving forward – keep on iterating
INFORMATION
ARCHITECTURE
Information architecture has somewhat different meanings
in different branches of IS or IT:
• The structural design of shared information environments.
• The art and science of organizing and labeling web sites,
intranets, online communities, and software to support
findability and usability.
• An emerging community of practice focused on
bringing principles of design and architecture to the
digital landscape.
• The combination of organization, labeling, search and
navigation systems within websites and intranets
ROLE OF (IA)
• Easy Search
• Accessibility

Used in Library Search Engines, Content Management


Systems
WIREFRAMES
It is a page schematic or screen blueprint, is a visual
guide that represents the skeletal framework of a
website. Wireframes are created for the purpose of
arranging elements to best accomplish a particular
purpose. The purpose is usually being informed by a
business objective and a creative idea. The wireframe
depicts the page layout or arrangement of the
website’s content, including interface elements and
navigational systems, and how they work together
Wireframes focus on:
• The range of functions available
• The relative priorities of the information and
functions
• The rules for displaying certain kinds of information
• The effect of different scenarios on the display

Elements of Wireframes:
1. Information design – information presentation
2. Navigation design – moving across pages
3. Interface design - usability
USER EXPERIENCE
• User Experience (UX) involves a person's behaviors,
attitudes, and emotions about using a particular
product, system or service. User Experience includes the
practical, experiential, affective, meaningful and
valuable aspects of human–computer interaction and
product ownership.
• A person's perceptions and responses that result from the
use or anticipated use of a product, system or service
• Includes a person’s perceptions of system aspects such
as utility, ease of use and efficiency.

Usability
Ease of use
Interactive
PROTOTYPING
A prototype is an early sample, model, or release of a
product built to test a concept or process or to act as
a thing to be replicated or learned from.
INTERACTION DESIGN
Interaction design, often abbreviated IxD, is "about
shaping digital things for people’s use”

Alternately defined as "the practice of designing


interactive digital products, environments, systems, and
services.”

Like many other design fields interaction design also has an


interest in form but its main focus is on behavior.

Interaction design is heavily focused on satisfying the needs


and desires of the majority of people who will use the
product
DIMENSIONS OF IxD
1D Words
This dimension defines the interactions. Words are the interaction that users use to
interact with.

2D Visual Representations
The visual representations are the things that the user interacts with on the
interface. These may include but not limited to "typography, diagrams, icons, and
other graphics“

3D Physical objects or space


The space with which the user interacts is the third dimension of interaction
design. It defines the space or objects "with which or within which users interact“

4D Time
The time with which the user interacts with the interface. Some examples of this
are "content that changes over time such as sound, video, or animation“

5D Behavior
The behavior defines the users actions reaction to the interface and how they
respond to it.
USABILITY
• Usability is a quality attribute that assesses how easy user
interfaces are to use. The word "usability" also refers to
methods for improving ease-of-use during the design
process.
Usability is defined by 5 quality components:
• Learnability: How easy is it for users to accomplish basic
tasks the first time they encounter the design?
• Efficiency: Once users have learned the design, how
quickly can they perform tasks?
• Memorability: When users return to the design after a
period of not using it, how easily can they reestablish
proficiency?
• Errors: How many errors do users make, how severe are
these errors, and how easily can they recover from the
errors?
• Satisfaction: How pleasant is it to use the design?
• Definition: Utility = whether it provides the features you
need. (Satisfaction)
• Definition: Usability = how easy & pleasant these
features are to use.
• Definition: Useful = usability + utility.

You might also like