UNDERSTANDING

UI & UX

#1

September 17th 2015 Harry Muksit

BACKGROUND

HARRY MUKSIT

2010 2011 2011 2013 2015

Graphic Visual Brand Creative UI UX
Designer Journalist Designer Group Head Mentor
PROJECTS

CORPORATE
PROJECTS

STARTUP
PROJECTS
 What is
User Experience ?
 What is Good
User Experience ?
please, dont do that.
 Bad UX Kills People
Good UX Saves Lives
what experience do you love?

why do you love it?

what experience do you hate?

why is it so awful?
 Solve Their Problem

FINDING A GOOD TOOL TO DELIVER YOUR

PROBLEM SOLVE TOOL

Business Model Technology Design

Don Norman
Co-Founder, Nielson Norman Group

User experience encompasses all aspects

of the end-user's interaction with the
company, its services, and its products.
What is UX Design ?
UX Design is not just
Interface + Visual
Design
Go beyond the surface
(of visual / interface design)
Surface
Visual Design

Skeleton
Information Design

Structure
Interaction Design

Scope
Functional Specifications

Strategy
User Needs
Surface
Visual Design

Skeleton
Information Design

Structure
Interaction Design

Scope
Functional Specifications

Strategy
User Needs
} User
Research
 User Research -
Get to Know Your User
Make a Persona
Make a Persona
} Information
Architecture
 Information Architecture -
Consider Solutions to The Problem
} Interaction
Design
 Interaction Design -
Establish a Hypothesis to Test
Wireframe & Prototype
Wireframe & Prototype
} Usability
Engineering
Usability Engineering -
User Feedback
Launch & Measure
Iteration

Measure
TOO MUCH
TECHNOLOGY
TOO MUCH
DECORATION
SIMPLE, JUST
WHAT WE NEED
Design is not just what it
looks like and feels like.
Design is how it works.
Steve Jobs
FOCUS ON
THE USER
What is UI Design ?
 Process of
Visually Guiding The User
Through a Product
9 key points
for UI Design
 #1

Clear Call to Action

http://www.hyperdia.com/
http://www.hyperdia.com/
https://www.rome2rio.com/
https://www.airbnb.com/
CALL TO ACTION

OK, GOT IT !
 #2

Clear Message
https://www.pinterest.com/
DONT MAKE PEOPLE
REMEMBER THINGS.
PEOPLE CAN ONLY REMEMBER

3-4 ITEMS AT A TIME

 #3

Contrast
https://www.spotify.com/us/
CONTRAST ATTRACTS
THE ATTENTION
OF YOUR VIEWERS
 #4

Familiarity
https://www.lazada.co.id/
http://www.elevenia.co.id/
https://www.blibli.com/
IT S EAS IER TO
OPERATE A TOOL
THAT IS ENTIRELY

FAMILIAR
 #5

Color Configuration
https://www.dropbox.com/
http://www.awwwards.com/
 THINK OF
Coca-Cola
I bet you see that
red now
 THINK OF
Coca-Cola
I bet you see that
red now
 #6

Consistency
https://www.apple.com/id/
https://support.mozilla.org/en-US/
https://www.airbnb.com/
REPEAT VISUAL ELEMENTS
THROUGHOUT EACH PAGE AND YOUR ENTIRE SITE.
 #7

Alignment
DO
DO
DONT
DONT
EVERY ELEMENT SHOULD HAVE A

VISUAL CONNECTION
WITH ANOTHER ON THE PAGE
 #8

Proximity
https://www.uber.com/
 DONT

BUY NOW !

your name
SUBMIT ORDER

your email
 DO

BUY NOW !

your name

your email

SUBMIT ORDER
IT EMS RELAT E D TO

EACH OTHER SHOULD

BE GROUPED CLOSE

TOGETHER
 #9

Create Prototype
https://popapp.in/
https://marvelapp.com/
http://www.invisionapp.com/
UI & UX
User Interface
User Experience
User Experience
User Experience
User Experience
 UX

which is key to lead you to what you want

CAN BE LEARN
 Thank you!

Q&A

September 17th 2015 harry.muksit@gmail.com