ITELEC 4 – INTEGRATIVE

PROGRAMMING TECHNOLOGIES
2
Instructor: Faith C. Sitchon
USER INTERFACE DESIGN AND
USER EXPERIENCE DESIGN
USER INTERFACE DESIGN BASICS

• User Interface (UI) Design focuses on

anticipating what users might need to do and
ensuring that the interface has elements that
are easy to access, understand, and use to
facilitate those actions. UI brings together
concepts from interaction design, visual
design, and information architecture.
USER INTERFACE ELEMENTS

• When designing your interface, try to be

consistent and predictable in your choice of
interface elements. Whether they are aware of
it or not, users have become familiar with
elements acting in a certain way, so choosing
to adopt those elements when appropriate will
help with task completion, efficiency, and
satisfaction.
USER INTERFACE ELEMENTS

Interface elements include but are not limited to:

• Input Controls: checkboxes, radio buttons, dropdown lists, list
boxes, buttons, toggles, text fields, date field
• Navigational Components: breadcrumb, slider, search field,
pagination, slider, tags, icons
• Informational Components: tooltips, icons, progress bar,
notifications, message boxes, modal windows
• Containers: accordion
INPUT CONTROLS
CHECKBOXES

• Checkboxes allow the user to

select one or more options
from a set. It is usually best to
present checkboxes in a
vertical list. More than one
column is acceptable as well if
the list is long enough that it
might require scrolling or if
comparison of terms might be
necessary.
RADIO BUTTONS

• Radio buttons are used

to allow users to select
one item at a time.
DROPDOWN LISTS AND LIST BOXES

• Dropdown lists allow users to

select one item at a time,
similarly to radio buttons, but are
more compact allowing you to
save space. Consider adding text
to the field, such as ‘Select one’
to help the user recognize the
necessary action.
• List boxes, like checkboxes,
allow users to select a multiple
items at a time, but are more
compact and can support a
longer list of options if needed.
BUTTON

• A button indicates an
action upon touch and is
typically labeled using
text, an icon, or both.
DROPDOWN BUTTON

• The dropdown button

consists of a button that
when clicked displays a
drop-down list of
mutually exclusive
items.
TOGGLE BUTTON

• A toggle button allows

the user to change a
setting between two
states. They are most
effective when the on/off
states are visually
distinct.
TEXT FIELDS

• Text fields allow users to

enter text. It can allow
either a single line or
multiple lines of text.
DATE AND TIME PICKER

• A date and time picker

allows users to select a
date and/or time. By
using the picker, the
information is
consistently formatted
and input into the
system.
NAVIGATIONAL COMPONENTS
SEARCH BOX

• A search box allows users to

enter a keyword or phrase
(query) and submit it to
search the index with the
intention of getting back the
most relevant results.
Typically search fields are
single-line text boxes and are
often accompanied by a
search button.
BREADCRUMBS

• Breadcrumbs allow users

to identify their current
location within the
system by providing a
clickable trail of
proceeding pages to
navigate by.
PAGINATION

• Pagination divides
content up between
pages, and allows users
to skip between pages or
go in order through the
content.
TAGS

• Tags allow users to find

content in the same
category. Some tagging
systems also allow users
to apply their own tags
to content by entering
them into the system.
SLIDER

• A slider, also known as a

track bar, allows users to
set or adjust a value.
When the user changes
the value, it does not
change the format of the
interface or other info on
the screen.
ICON

• An icon is a simplified
image serving as an
intuitive symbol that is
used to help users to
navigate the system.
Typically, icons are
hyperlinked.
IMAGE CAROUSELS

• Image carousels allow

users to browse through
a set of items and make
a selection of one if they
so choose. Typically, the
images are hyperlinked.
INFORMATION COMPONENTS
NOTIFICATION

• A notification is an update
message that announces
something new for the user
to see. Notifications are
typically used to indicate
items such as, the
successful completion of a
task, or an error or warning
message.
PROGRESS BAR

• A progress bar indicates

where a user is as they
advance through a
series of steps in a
process. Typically,
progress bars are not
clickable.
TOOLTIP

• A tooltip allows a user to

see hints when they
hover over an item
indicating the name or
purpose of the item.
MESSAGE BOX

• A message box is a
small window that
provides information to
users and requires them
to take an action before
they can move forward.
MODAL WINDOW

• A modal window requires

users to interact with it
in some way before they
can return to the
system.
CONTAINERS
ACCORDION

• An accordion is a vertically
stacked list of items that utilizes
show/ hide functionality. When a
label is clicked, it expands the
section showing the content
within. There can have one or
more items showing at a time
and may have default states
that reveal one or more sections
without the user clicking.
BEST PRACTICES FOR
DESIGNING AN INTERFACE
• Keep the interface simple. The best
interfaces are almost invisible to the user. They
avoid unnecessary elements and are clear in
the language they use on labels and in
messaging.
• Create consistency and use common UI
elements. By using common elements in your UI,
users feel more comfortable and are able to get
things done more quickly. It is also important to
create patterns in language, layout and design
throughout the site to help facilitate efficiency.
Once a user learns how to do something, they
should be able to transfer that skill to other parts
of the site.
• Be purposeful in page layout. Consider the
spatial relationships between items on the
page and structure the page based on
importance. Careful placement of items can
help draw attention to the most important
pieces of information and can aid scanning and
readability.
• Strategically use color and texture. You can
direct attention toward or redirect attention away
from items using color, light, contrast, and texture
to your advantage.
• Use typography to create hierarchy and
clarity. Carefully consider how you use typeface.
Different sizes, fonts, and arrangement of the text
to help increase scannability, legibility and
readability.
• Make sure that the system communicates
what’s happening. Always inform your users
of location, actions, changes in state, or errors.
The use of various UI elements to communicate
status and, if necessary, next steps can reduce
frustration for your user.
• Think about the defaults. By carefully
thinking about and anticipating the goals
people bring to your site, you can create
defaults that reduce the burden on the user.
This becomes particularly important when it
comes to form design where you might have
an opportunity to have some fields pre-chosen
or filled out.
DIFFERENCE BETWEEN UI AND
UX
• User interface (UI) refers to the screens,
buttons, toggles, icons, and other visual elements
that you interact with when using a website, app,
or other electronic device. User experience
(UX) refers to the entire interaction you have with
a product, including how you feel about the
interaction. While UI can certainly have an impact
on UX, the two are distinct, as are the roles that
designers play.
• UX designers focus their work on the
experience a user has with a product. The goal
is to make products that are functional,
accessible, and enjoyable to use. While the
term UX often applies to digital products, it can
also be applied to non-digital products and
services (like a coffee pot or a transportation
system).
• UI designers create the graphical portions of
mobile apps, websites, and devices—the
elements that a user directly interacts with.
Unlike UX, which can apply to just about any
product or service, the term UI design applies
exclusively to digital products. A UI designer
seeks to make apps and websites both visually
appealing and easy to navigate.
WIREFRAME VS. MOCKUP VS.
PROTOTYPE
WIREFRAME

• A wireframe is a static, low-fidelity representation of your

product, and in the world of web and mobile design, a
basic guideline of your website or app – the skeletal
framework – for both designers and developers to follow.
• The art of wireframing is not in the details. Rather,
wireframes serve as the foundation of your website or
app’s visual design, and it is at this stage that you will
arrange elements on the page or screen and map out the
priority of content.
WIREFRAME

• The wireframe’s visual characteristics are

typically limited to a grayscale color scheme,
lines and boxes that aim to represent the
positioning and levels of visual hierarchy in the
design. It does not typically include animation
that allows users to interact with the design.
MOCKUP

• A mockup is a static, visual representation of a

product, such as a webpage or an application.
Unlike wireframes, which focus on structure and
flow, mockups include visual design details like
colors, typography, images, and styles. They
provide a realistic preview of the final design,
allowing designers and stakeholders to evaluate
the visual appearance and consistency of the
product.
PROTOTYPE

• A prototype is a mid-to-high-fidelity design

model of the final UI of your website or mobile
product. As well as offering a more detailed
look at the visual attributes of your design,
prototypes usually include the first user
interaction.
WHAT’S THE DIFFERENCE?

• Wireframe: A wireframe is a blueprint or schematic

that helps communicate the structure of your app or
website to the relevant stakeholders.
• Mockup: A mockup is a high-fidelity render of your
design that showcases how the finished product will
look.
• Prototype: A prototype is an early model of a
product that focuses on functionality and gives your
stakeholders a taste of the final version.
WHAT’S THE DIFFERENCE?

• In other words, each one serves a very different

purpose. Wireframes communicate structure from
a low-fidelity point of view, mockups highlight a
product’s design from a high-fidelity point of view,
and prototypes focus on a product’s functionality
along with the design. Ultimately, though, they’re
all different ways to draft your final product —
showing different pages and screens.