Digital Media Design &

Development:
UX (User
Experience), UI
(User Interface) Design
& CX (Customer
Experience)
 #UX and UI
Design

paulmason! 22
 Objectives
• Understand what user
experience (UX) means and
why it matters
• Understand how to
approach UX and usability
• Understand how to
approach UI design
• Understand how UX and UI
design impact CX (customer
experience)
WE ALL EXPERIENCE USER INTERFACES …

of VARIOUS TYPES
 We All Experience Interfaces
• Study the
figure
opposite of
Apple’s
rechargeable
Magic Mouse
(in charge
mode).
• Can you
identify any
usability
issues in the
design?
 UX Design refers to
User Experience
Design, while UI
Design stands for
User Interface
Design.
Both elements are
crucial to a product
What’s the Difference? and work closely
together.
In order to leverage UX / UI you need to know the difference…
Which can be very confusing
when trying to learn or build a
team
A big part of this is due to the evolving nature of technology
Merging Online Channels With Offline.
 BRICKS & CLICKS

Like Amazon Go Just

Walk Out Technology
 … to say nothing off the IoT
Smart Home

… the home of the

future
SMART
HOME
DEVICES

Like Home/Mini
AND SMART
CONDO
DEVICES
… then there are

so called ‘Wearables’
 Like Fitbit…

and their health

and fitness
trackers
Similalrly…
And like …
And THiS …
Like Utilities and Banks &
Securities Trading
In order to leverage UX / UI
you need to know the
differences..
User Experience (UX)
✓ User Research
✓ Personas
✓ Customer Journey Mapping
✓ User Stories / Scenarios
✓ Information Architecture,
Sitemaps & Taxonomies
✓ User flows
✓ Annotated Sketches &
Wireframes
✓ User Testing
User Interface (UI)
✓ Visual Design
✓ Colors
✓ Screen Mocks
✓ Typography
✓ Layouts aka ‘The Grid’
✓ Brand elements
SHARED OFTEN
▪ Interaction Design,
e.g. behavior
▪ Prototypes
Usually in a project you start with UX
followed by UI, even in Agile.

Both are equally important and

essential for success. You can’t do
one without the other.
So now let’s talk about!!!
 It is important to note that UX is most
definitely a part of CX, but CX is
Customer Service
not UX
The experience of a specific product,
Advertising Brand service or system
Reputation Sales
Enablement
Pricing Fairness
UX Usability
Interaction Design
Product Delivery
Visual Design
Loyalty & Retention, etc... C Information Architecture
Entire relationship and perception the customer
has within the organization X Content Strategy
User Research
User Testing
CX ≠ UX
Leading with CX requires customer-centric business
strategies embedded across an enterprise
Customer experience management is a strategy used to track, oversee and organise all interactions, in order to help a
business focus on the needs of its customers. This practice is meant to ‘close the gap’ between the intended customer
experience and the actual customer experience.
CX touches across all of these components and in
a CX project you are generally working on more
than one of these at a time.
SERVICES

CRM

COMMERCE

BRAND
EXPERIENCE
 UX and UI are different but
complementary. Neither is
Ji Jingshu, co-founder of Event Bank more important than the other

Customer Experience sits

across forming a ‘T’ within
the organisation

Top female tech entrepreneur

User
experience
design (UXD) is
the process of
enhancing
customer
satisfaction and
loyalty by
improving the
usability, ease
of use, and
pleasure
provided in the
interaction
between the
customer and
the product
 • All successful processes
follow some general
principles.
• These provide
guidelines that
individuals can follow to
make a finished product
as efficient and effective
The Laws of UX as it could possibly be.
• This applies to any
process in any industry,
including website
design.
 Aesthetic-usability effect suggests that users often perceive aesthetically
pleasing design as design that’s more usable.

As a result, a design that looks good can make users more tolerant of any
issues or mistakes they might experience.

However, an ugly website might offer an unparalleled user experience but no one
will ever know because first impressions last.
Clearly, the takeaway here is to balance good design with great UX.
In 1982, Walter Dubbed the
Doherty from IBM Doherty
published Threshold, for
research that many this became
showed the the benchmark for
optimum time for a computer to
a computer to respond to a
respond to a request. Or in this
request was like case, for a
400 milliseconds! website to load.
 An Argument Against
Complexity in User Interface Increasing the number of
Design choices will increase the
decision time

Hick's law is sometimes cited to

justify menu design decisions. For
example, to find a given word (e.g. the
name of a command) in a randomly
ordered word list (e.g. a menu), scanning
of each word in the list is required.
However, if the list is
alphabetical and the user knows
the name of the command, he or
she may be able to use a
subdividing strategy
Often called the most
important principle in UX/UI
Design

Miller’s law has been investigated

in the context of multitasking
Human multitasking is the
ability to perform more than
one task or activity at the
same time. It can result in
time wasted due to human
context switching and
becoming prone to errors
due to insufficient attention.

Rapidly increasing
technology fosters
multitasking because it
promotes multiple sources
of input at a given time.
Users spend most of their time on other sites, and they prefer your site
to work the same way as all the other sites they already know…

Users will transfer When making

expectations they have changes, minimize
built around one familiar discord by
product to another that empowering users to
appears similar. continue using a
familiar version for a
By leveraging existing limited time.
mental models, we can
create superior user
experiences in which the
users can focus on their
tasks rather than on
learning new models.
Fitts' law (named after Paul Fitts) is a
predictive model of human movement
primarily used in UX/UI design.

This law predicts that the time required to

rapidly move to ‘hit’ a target area (typically
icons, but also the act of minimizing or
closing windows, say) is a function of the
ratio between the distance to the target and
the width of the target

The act of pointing may be either physical -

touching an object with a hand or finger -
or virtually, by pointing to an object on
a display screen using a mouse, stylus,
trackball, etc.
Clearly, targets that are larger
and closer (Figure A next slide)
will be easier to hit than those
that are smaller and further
away (Figure B Next slide).

As such, Fitts' Law may be

used either to predict how
long it will take to hit a
target (or series of targets),
or to compare performance
using different input devices
(a mouse versus a tracker
pad for example).
Easier
to Hit

Less
Easy to
Hit
 In this figure, icon B is bigger – inasmuch
as it has a text label below it – and will
therefore be slightly quicker to hit.
However, B is only larger on the vertical
axis; it will not be any quicker to hit than
icon A when moving horizontally.

Icon A Icon B
Fitts’ Law may be defined thus:
MT = a + b*ID …. Where

MT = Movement Time (in milliseconds)

a = intercept (MT where ID = 0)
b = slope
ID = Index of Difficulty

There is a linear relationship between MT

(Movement Time) and the ID (Index of Difficulty):

When comparing different pointing devices, a and b

can be experimentally determined.

When predicting how quickly a target can be hit, a and

b can be assigned a value.
ID can be expressed as follows:
𝑫
ID = log2 ( + 1) where:
𝑾

D = distance to midpoint of target

W = width of target

Distance to Midpoint & Width of Target

 Now, let us put all that together.

MT = a + b log2 (D/W + 1)
Assume a = 50ms, and b = 150ms (milliseconds)

For the above Figures, calculate values for MTi

(left) and MTii (right). Note we specify the
complete formulae and results for both MTi and
MTiias shown in the format above.
• Note: for the index of difficulty (ID), we are calculating log, base 2, of 5
(80/20+1) for MTi and log, base 2, of 11 (100/10+1) for MTii respectively.
– Normally, for MTi we would write "log, base 2, of 5 = X” and for MTii "log, base 2, of 11 =
X”
– For MTi, if we had "log, base 2, of 4 = X”, or “log, base 2, of 8 = X’ ”then X would be 2 to
the 2nd and 3rd power respectively – both intuitive integer values to calculate.

• However, in both cases, I cannot think of an integer number that makes X True
for either "log, base 2, of 5 = X” or for "log, base 2, of 11 = X”. In other words X
is a decimal (real number) that is hard to calculate by hand.
• So for both we would need to use the change of base formula and enter the
values into a calculator: for example log of 5/log of 2, and log of 11/log of 2
which gives us the following values:
– MTi log, base 2, of 5 = 2.3219
– MTii log, base 2, of 11 = 3.4594
MTi =
• 50+ (150 x 2.3219) =
398 ms

MTii =
• 50+ (150 x 3.4594) =
569 ms
 You Don’t Have To Be An Expert In UX To Understand
The Importance of Fitts’ Law.

In fact of all UX/UI ‘laws’, it is

arguably THE most important
 DESIGN
STRATEGIES
MOBILE VS.
WEB
RESPONSIVE DESIGN Vs ADAPTIVE DESIGN

NATIVE APPS Vs INSTANT APPS

MOBILE FIRST Vs MOBILE ONLY

 Responsive design is the norm today…

Coined in 2011, it’s an assumption with

design teams, unless you have a
specific reason not to.
RESPONSIVE
DESIGN is when
you build one
single web
experience that is
able to fluidly
adjust for multiple
screen sizes….
 RESPONSIVE DESIGN
Pros Vs. Cons
 Uniform &
seamless
 SEO friendly
 Often easier,
less expensive
to implement
 Less screen
size design
control
 Less context
specific
journey design
 Longer mobile
download
times
 Adaptive design, coined in 2011,
is when you design multiple
layouts based on display break-
points.

 The layout displayed is based on

the size of the screen.

 You use adaptive design when

you have a specific context that
needs to be addressed differently
across devices such as
geolocation, speed of site,
content, utility, etc.
 Amazon increased
speed of their site by
40% by using an
adaptive strategy.
 Mobile users have the
opportunity to use the
"Amazon.com full site"
on mobile devices as
well.
 ADAPIVE DESIGN
Pros Vs. Cons
 Design for
context
 Build for quicker
speeds for
mobile without  Higher cost,
sacrificing multiple
desktop experiences to
experience develop and
maintain
 A bit more
planning with
SEO due to
duplicate
content
Why Apps Fail
When U Should Build an App
 ADAPIVE DESIGN
AIRBNB

Airbnb discovered the majority

of images shared between
hosts and guests in Airbnb
messages were photos showing
how to check-in.

Created a tool that allows

guests to access step-by-step
visual check-in instructions in
their app, accessible even
without internet access
Note: AIRBNB is banned in Thailand
Remember UX/UI
Developers …

WITH…
 ADAPIVE DESIGN
Android Instant Apps allows users to run apps instantly, without
installation or log-in, by just selecting a URL.
.

How? They’re smaller subsets of your app that allow single pages or
features of your app to be downloaded and accessed on demand.
INSTANT APPS SETUP 1
INSTANT APPS SETUP 2
INSTANT APPS
INSTANT APPS SETUP 3
 ANDROID INSTANT APPS

 No install or
log-in to use Development
 If user loves, learning
can download curve
app User must
 Provides native opt-in under
functionality for settings
specific User must
features being have a device
accessed running
 Save space – Android 6.0 +
can use without
download
 Easy to share
Mobile First is about
giving priority for
designing,
developing and
marketing the mobile
web experience first
over desktop web
design.

It’s NOT about

designing both at the
same time
 MOBILE FIRST

 Can be blended with X Doesn’t account for

responsive or journeys outside of
adaptive design mobile
strategies X Doesn’t account for
 Helps prioritize users switching device
content and simplify mid-task
flows X Doesn’t account for apps
 • Mobile First is usually used when there is a
primary action your user can achieve via mobile
better than amy other channel
• any other channel.
• desktop web design.
C.O.N.T.E.N.T.
• It’s not designing V.IS.U.A.L.I.S.A.T.I.O.N.
both at the same time..

• It’s NOT designing all at the same time.

 MOBILE ONLY

 One dedicated
channel to focus all X Doesn’t
your effort account for
 Requires strong journeys
word-of-mouth from outside of
your targeted mobile
audience and X Doesn’t
engagement from a account for
community users
 Requires clearly switching
defined customer device mid-
experience strategy task
and user need
BEST PRACTICES FOR AWESOME
EXPRIENCES
Artifact
Design Model
Tools
 UX/UI DESIGN MODELS

1) Use Case Diagram 2) UI Content Architecture

3) Paper Prototypes 4) Wire Frames

5) Visual Flats (2D Mock-up) 5 UX/UI Design Models & Methodology

1) Use Case Diagram In the context of software development, a
use case is not only a description of the
actual task at hand, but also a description
of how the website ought to behave in the
event that a user triggers the task, among
other things.

Sample : Mobile
App . Designer
Shoes
The key, here, is to define the correct sequence of events that will allow a
user to complete the predefined task.

Each use case is represented as a sequence of simple

steps, beginning with a user’s goal and ending when that
goal is fulfilled
Use Case Etiquette
• A sequence of steps means nothing, however,
without an industrywide accepted definition of the
elements used to describe the use case.
• There are a few elements that are critical in most
useful case studies:
• Preconditions: predetermined conditions which must be met
for the use case to be valid.
• Actor: any user which performs an action on/within the system.
• Trigger: this is the event that causes the use case to be initiated.
• Standard Flow: refers to the succession of events and triggers
which detail a typical (and successful) use case.
• Alternate Flow: variations of the standard flow which become
relevant when something goes wrong or prevents the use of the
standard flow.
 UI Content Architecture
UI Hierarchy Module
Sample : Mobile App . Designer Shoes
UI Content Architecture

LET’S
TAKE A
LOOK
PAPeR PROTOTYPeS (lOw-Fi)….
 Paper Prototyping
 From prototyping whole experiences to designing small components of an
interface – it is always wise to start on paper.
 Paper prototyping offers some significant advantages over digital
prototyping:

 Paper Prototyping Is The Fastest Way To Communicate Ideas

 Sketching on paper makes ideas visible way quicker than on a
digital screen as one spends less time polishing and use our
own hands, the most familiar device in our toolkit.
 Paper Prototyping Inspires Ideation
 When Prototyping on paper, one is forced to come up with as
many solutions as possible by firstly drawing lots of rectangles
and then filling them with content.
 Although sketching the first three different versions can be
challenging, one’s mind starts opening to increasingly diverse
solutions as soon as we get into flow.
 Paper Prototyping Allows For Trial and Error
 While it's easy to erase a wrong line or word in a digital prototyping program,
you need to stick with it on paper and try again.
 If you correct mistakes by drawing a new version, even more ideas on how to
solve the problem will pop up in your mind.
 Paper Prototyping Involves Real-time Evaluation
 By sketching multiple versions, one permanently evaluates one’s work, see
what works and what doesn't, combine things that work and finally end up
with a prototype which is the result of the design decisions made along the
process.
 Paper Prototypes’ Physical Nature Enables Planning and
Testing Interactions
 If you design for mobile on a desktop screen, it can be hard to imagine the
interface’s real size and feel when sitting in a human’s palm. But if you
design on paper using the actual size of the device you’re designing for, you
can hold something in your hand, press the buttons you’ve just drawn and
see if your UI elements are large enough to interact with.
Example Paper Prototype
Example Paper Prototype II
Example Paper Prototype III
• To sum up, paper
prototyping helps to develop
solutions fast and make
ideas tangible and testable.
• As a result, paper
prototyping can have many
different forms. Let’s have a
look at some techniques,
their advantages and
disadvantages as well as
takeaways learned.
Advantage: Fast & Flexible Alteration
Thanks To Reusable Elements
• Not having to draw the same essential elements
again and again saves a lot of time.
• Also this technique really forces one to
concentrate on information hierarchy instead of
visual details at this early stage of the design
process.
Disadvantage: Limited Creativity And
Exploration
• If one is using the same design elements
all the time, it is only a matter of arranging
and combining them, not designing
something completely new.
• This limited only by the space of
possibilities one is able to explore, such
that one will often return to sketching
multiple interfaces from scratch.
 Interactive Paper Prototypes
• Ultimately you will
want to test how
easy users find it to
complete the tasks
designed.
• For this you may
sketch a detailed
version of the site’s
most complex user
flow(s).
 Interactive Paper Prototypes
• The previous task • To make a usability test as
included going to a realistic as possible, you
travel booking page, can create a smartphone
checking if the holiday dummy and put your
home is available during sketches inside.
a certain time frame, • The ends of the cardboard
reading some smartphone should be left
instructions, filling out a open so users can “scroll”
booking form, and finally down by sliding the paper
pressing the “Send sketch upwards – just as on
Booking Request” a real smartphone….
button.
Interactive Paper Prototypes
From Blueprint to Mock-up

Elegance & Attitude

 Limits of Paper Prototyping
• Testing with paper prototypes is a great way to
get feedback on your design at an early stage.
• However, paper prototypes are not always the
right choice for any test scenario.
• Sometimes you need a high-fidelity prototype or
even some lines of code to get the results you’re
looking for. Here are two examples:
 Limits of Paper Prototyping
• You want to test if your chosen set of
features help users to get a certain job
done?
• Paper prototypes are an efficient and cheap way
to test that. Guide users through your design
and ask them for feedback on the overall idea.
You want to know which parts of your design
need improvement so that users can accomplish
tasks easier and faster?
Go with a higher-fidelity interactive prototype that
creates a realistic situation for users and saves you
time of paper prototyping complex interactions.
Designing Flows Rather Than Pages

• During prototyping different parts of a

website, one may be constantly asking
what tasks the user wants to accomplish
when (s)he entered a certain page.
• Having users tasks and goals on top of
one’s mind helps to anticipate different
scenarios and flows of different states.
Designing Flows Rather Than Pages

• Advantage: Lower Risk of Undermining Copy

• UI designers sometimes forget how important text
and language is when it comes to shaping an
experience. In which case one may write out
important labels and information instead of just
using placeholder text.
Designing Flows Rather Than Pages

• Disadvantage: Higher Risk of Losing Sight of

the Big Picture
• At the end, users will see pages and will need to
find their way around them. So it is important that
designers consider which parts of a page are
grouped together, how elements look like on
different screen sizes and what other information
on a page could distract users from their task.
Let’s Take A Look …
• The following combines task flows,
wire flows (Lo-Fi) and screen flows
(Hi-Fi) – where we move from paper
based to computer-based
representations …
Let’s move to Mock-ups (Visual Flats)
• Balsamiq Wireframes is • A mock-up is a static
a graphical user wireframe that includes
interface website more stylistic and visual UI
wireframe builder details to present a realistic
application. model of what the final page
or application will look like.
• It allows the designer to
arrange pre-built • One way to think of it is that
widgets using a drag- a wireframe is a blueprint
and-drop WYSIWYG and a mockup is a visual
editor. model.
We’ll watch a quick tutorial, before
getting some hands-on practical
experience with Balsamiq
Time for you to do an exercise
ICONS, LOGOS &
IDENTITY