USER INTERFACE AND USER EXPERIENCE
collaborative problem solving, students will gain skills
Human Computer Interaction (HCI) – is the field of
study that focuses on the design of computer
technology, Particularly, the interaction between
humans (the users) and computers.
User Experience (UX) – design is the act and art of
crafting the interface and interactions for a website or
application.
– It is a multidisciplinary career
path that requires one to be part visual designer, part
social psychologist, a little bit of a developer, and a hint
of a project manager, as well as possess a great deal of
empathy for those whom you are designing for.
– An essential component of
human-centered design, it is often defined as the set of
emotional and evaluative perceptions and responses
that a user goes through while interacting with a given
user interface
The core of user experience is empathy (not
interaction)
USABILITY VS USER EXPERIENCE
Usability – ability of the user to use the thing to carry
out a task successfully.
User experience – Individual’s entire interaction with
the thing, as well as thoughts, feelings, and perceptions
that result from that interaction
Function: It works Action: It works well
Emotion: It works well and makes me say Wow!
Advance User Interface Design / AUID – It is an
advanced exploration of interaction and information
design focusing on user interfaces for interactive
platforms, from mobile devices to larger dynamic
informatics and interpretive media installations.
– Via hands on,
needed to work in contemporary digital environments.
Topics covered include human computer interaction
(HCI) and user experience design (UXD)
– Students will design and
build interactive prototypes, while continuing to build a
strong foundation of graphic design fundamentals
through practical application.
DIGITAL TO HUMAN EXPERIENCE
Design, in all of its forms, is at the core of human
experience (UX). It drives our advancements as a
species. We would not have contemporary mobile
phones without the technology behind televisions, and
we would not have television without the invention of
the antenna. We are on a multithreaded path of
complexity, paving it as we move forward technology
and socially.
Based on the images, the Technology is: Cross-
Generation, Informative, Ubiquitous, and Cross-
Cultural (all of the above)
• iCow is a service designed in Africa providing
agricultural information to Kenyan farmers.
Accessibility is just another component of universal
design: inclusive design that allows all to use a service
or product – true
REDEFINING LOCALIZATION
As essential component of human-centered design, UX
is often defined as the set of emotional and evaluative
perceptions and responses that a user goes through
while interacting with a given user interface
User experience is at the forefront of the emotional link
between a digital design and the way somebody
interacts with it, with key components being the look
and feel, the perceptions and feelings towards the
design, and the practicality of achieving the intended
goals.
The image is an example of: Redefining localization

Don’t stop … Ask for more! (PEPSI – COLA)
Unique and Universal – Website design or an app may
be designed well enough to be functional, but the
added value that defines success comes with the
relevance of the design, where consequence resides:
• Distinct and relevant branding identity imbued in the
product
• Usability accommodates the necessities of the general
audience, with varying degrees of literacy and ability.
• Functionality and reliability (e.g., constant availability
or “online” status)
• Content should be appealing and concise enough to
create a lasting impression on the user
According to the ISO 13407 standard (ISO, 2001) , user
centered design includes four iterative design activities,
all involving direct user participations.
• Understand and specify the context of use, the nature
of the users, their goals and tasks, and the environment
in which the product will be used.
• Specify the user and organizational requirements in
terms of effectiveness, efficiency, and satisfaction; and
the allocation of functional between users and the
system.
• Procedure designs and prototypes of plausible
solutions.
• Carry out user-based assessment.
Gender stereotyping is sometimes used in segregating
users, but assumptions can easily be challenged – true
WIRE FRAME FOR WEB AND MOBILE
INTRODUCTION TO WIREFRAMING
Designing software can be an exhilarating and satisfying
experience. But it can also be a horrifyingly chaotic and
frustrating endeavor.
There will be many challenges as we work toward
simplifying all the complexities of our product. There
will be many opinions to consider and compare.
• A wireframe is a schematic, a blueprint, useful to help
you and your programmers and designers think and
communicate about the structure of the software or
website you’re building.
A wireframe serves three simple but exact purposes:
Wireframe presents the information that will be
displayed on the page
Wireframe gives an outline of structure and layout of
the page.
Wireframe conveys the overall direction and description
of the user interface
• The same screen can be built in a lot of different ways,
but only a few of them will get your message across
correctly and result in an easy to use software or
website. Nailing down a good interface structure is
possibly the most important part of designing software.
Wireframes with low fidelity look and feel for the
following reasons:
• It makes it clear that this is not the final design: no
one could mistake a wireframe for the final look and
feel of your application. Low fidelity and few colors
force you to focus on structure over details. There will
be lots of time for visual design once the structure is
finalized.
• It conveys that "this is all up for discussion": the rough
feel encourages discussion, we call it a look no one is
afraid to criticize. Wireframes are really quick to make,
so don't be shy with giving feedback! Each screen
probably only took a few minutes to make; their author
won't mind doing them over from scratch, don't worry.
What matters the most at this point is the final ease of
use, so going through a few iterations is normal and
expected.
• Wireframe makes it clear that no code has been
written yet (not code has been written): if instead of a
wireframe you received some screens that looked like
screenshots of the final app, you'd be excused for
assuming that all the code behind those screenshots
had been written already (which most of the time is not
the case). Wireframes don't have this danger.
With a wireframe, people pay more attention to
functionality and the user experience than the aesthetic
characteristics of the on-screen elements – true
Caution!
• With great power comes great responsibility. Just
because wire framing tools make it easy to come up
with user interfaces, it doesn't mean that creating good
user interfaces is easy.
• Human Computer Interaction and User Experience
Design is an art and science, and lots of people study a
lifetime to become experts at it. Wireframes are only
part of the process. You might also want to use
personas, site maps, prototypes, usability tests, and
many more design techniques.
• A good dose of common sense will go a long way, but
is no substitute for working with an experienced UX
professional.
HIGH-LEVEL DESIGN PROCESS
Phase Deliverables
Research Who are the users?
What are the features?
Information Architecture Task flows, wireframes
Visual Design Mockups, graphics
Delivery Assets, specs
Research is required to establish a solid informational
foundation to start building a software.
These questions are as follows:
• Who is going to use this software or site?
• What tasks does the user wish to accomplish?
• What does the maker of the software or site wish to
accomplish? (Not always the same as the preceding
question)
• What technology will be used? (Are there any
limitations to consider?)
• Why would the public use your software or site over
another?
• What is the content needed to support the user in
accomplishing their goals?
IMPORTANCE OF RESEARCH
The quality and quantity of research we complete will
have a significant impact on how successfully we give
the user what they need.
Research will influence the amount of time it takes to
complete the design
Information Architecture – is a representation of
hierarchical relationship between sections and
subsections of the site’s information.
– This phase is dedicated to
the effort of getting the structure of our site or
application mapped out; includes flowchart
1. Create a high level map of the site or application.
2. Map out the tasks found on each page or screen.
3. Define the content required to support each task.
4. Vet and test our designs.
5. Refine our design solutions.
6. Document UX patterns.
TRANSITIONING TO WIREFRAMES
A wireframe (not design) is the basic blueprint that
illustrates the core form and function found on a single
screen of your web page or application.
At this point, we will need to figure out if we plan on
having our site optimize it's layout for the specific
device it is being viewed upon (desktop, tablet, phone,
or other mobile devices). This is known as responsive
design. Responsive web design is an approach to web
design that makes web pages render well on a variety of
devices and window or screen sizes – true
INFORMATION ARCHITECTURE TECHNIQUES
1. Reality Mapping – The process requires a wall, a
marker, a stack of different colored sticky notes, and
access to the site or application we need to redesign.
– is a technique that helps us
understand and document the existing task flow of a
website or application. In a way, it's a little bit like card
sorting; however, it offers a bit more detail. This
exercise can be done alone, but is made much more
effective and fun when completed with a group.

2. Persona-based Diagrams – To create this style of
diagram, we start by assigning each persona its own
color.
– Mapping out the expected
task flow, or the anticipated navigational path each of
our personas is likely to follow, can add insight into the
overall navigability of our site or application.
3. Screenshot Interaction Maps – This method uses
small screenshots, mockups, or wireframes instead of
basic shapes to illustrate the task flow.
4. Paper prototyping – is an effective and inexpensive
method for testing the effectiveness of our wireframes.
This technique is simply the act of printing out our
wireframes on paper and letting a test participant walk
through them as though they were actually using the
finished product. We place the printout of the interface
in front of the test participant and ask what they would
do to complete a specific task.
WEB DESIGN ESSENTIALS
Page Usage
Element
Navigation It is essential for users to get around
your site, design, placement, and
contents of this element will help
convey your site’s theme in different
ways
Main Links to main sections of site
navigation
Body It is where all the magic happens. This
Content is where you put the stuff people are
coming to see. Whether
it’s images, a blog post, or a YouTube
movie, all that stuff goes in one body
Sub this is usually needed in larger sites and
navigation more complex content; displays
content that lies under a main
navigational item Links to content
within main sections
Whitespac Used to separate elements and draw
e (negative he eye to the key parts of the page
space) It is the area between all the different
design elements on your page.
Sidebars It can hold everything from link lists to
extra body content. They can also be
useful for ancillary navigation and
archive link for blogs
Footer A great place for copyright info and
duplicate navigation links. Recently,
they have been used for content like
images
Tab / Tabs – are used to separate information into
logical sections and to quickly navigate between them
TWO TYPES OF TOP LEVEL MENU
1. Horizontal tab – Best used with ten or fewer tabs
– used for top level navigation on
loads of sites because they save a lot of space.
Frameless horizontal tab – Mainly used if the whole
content of the main region belongs to the current tab
Horizontal buttons – for top level navigation. In this
case, the buttons become visible on mouse over, which
is a nice, subtle touch
2. Vertical tab – It provides better scalability for a large
amount of tabs (ten and more)

– vertical menu for top level navigation. Octagon Pentagon

Back when people first started adding menus to their
sites, this was the most popular type of menu

Hexagon Triangle

Navigating between tabs affects all content in the tab

pane – true
Oval
OTHER QUESTIONS
Icons, Stylizations, Graphic representations, etc. are
Define what type of geometric shape: examples of abstracted shapes – true

Triangle, square, circle, etc. are examples of natural

shapes – false, geometric

Leaves, animals, trees, human, etc. are examples of

geometric shapes – false, natural

RGB is additive, CMYK is subtractive

Primary colors – red, yellow, blue

Circle Parallelogram
Alignment helps balance the image so that it is visually
appealing – true

Heptagon Decagon

Square Diamond