UX Class Lesson #1

15 Mei 2017
 Tutors:

Alvan Zaputra Tri Kurniawan

Founder Tabook & .INDUX, Founder Metamorpix
UX Consultant Co- Founder .INDUX,
Visual Designer

Arin Siska Yasir Sany

UX Analyst .INDUX UX Researcher .INDUX
What is UX ?
“All aspects of the end-user's
interaction with the company. It’s
services and its products. The first
requirement for an exemplary user
experience is to meet the exact
needs of the customer without fuss
or bother. Next comes simplicity
and elegance that produce
products that are a joy to own, a
joy to use. True user experience
goes far beyond giving customers
what they say they want, or
providing checklist features.”
Nielsen Norman Group
What is UI ?
 Visual part of website/application/operating
system through which a user interacts with a
device across all sizes/platforms.
Difference between UI and UX ?
User Experience (UX) and User Interface (UI)
while related actually mean different things. UI
represents the graphic/visual interface of a
website/software, which facilitates human-
computer interaction in order to provide a quality
UX and interaction. A UX represents how a user
responds/emotes/perceives a system (UI) in the
context of its use.
In simple terms, a UI is the look and feel aspect
of a software/website responsible for user
interaction and engagement, whereas UX is the
overarching object this UI seeks to attain by
providing high quality interaction and user
engagement leading to a fulfilling and positive
experience. Everyone wants their customers to
have a good time on their websites and good
feeling about their websites.
UX History
UX History

Circa 1430
Circa 1430: Leonardo da Vinci’s “kitchen
nightmare” - da Vinci designed and employed
conveyor belts to transport food items to the
preparers. He also built what is likely the first
sprinkler system for safety measures.
UX History

1900
In 1900 Winslow Taylor pioneered the modern
optimization of work, basing on his research of
the interaction between workers and their tools.
UX History

1940’s
Toyota followed in 1940's with their famous
Human-Centered-Production system, which
aimed at improvement of the efficiency through
formation of the convenient and respectful
environment for the workers.
UX History

1955
In 1955, industrial designer, Henry Dreyfuss,
wrote famous “Designing for people”, in
which he stressed the connection between
people, their experience and successful
design of a product.
UX History

1970’s
In the 70's the era of personal computers started to emerge. Design
was present right from the beginning. Xerox Parc — famous R&D
lab from Silicon Valley was responsible for e.g. concept of GUI and
a computer mouse.
UX History

1995
Finally in 1995, famous cognitive
psychologist and designer ; Don
Norman, coined the term User
Experience to describe the broad
set of activities that his team was
engaged in at Apple Computers.
UI History
In 1973, a group of computer scientists at Xerox
PARC developed and launched the Xerox Star.
A personal computer with the very first graphical
user interface (GUI).
The teams at Apple Computer Inc continued to develop
and expand on the idea of the GUI. In January 19, 1983
Apple Computer Inc introduced The Lisa. First
personal computer with GUI.
 Continue with Macintosh released in 1984. The first
successful commercial desktop computer in that era.
Macintosh GUI
Glossy UI Style
1990’s - 2000’s
Skeuomorphism UI Style
2000 - 2012
Metro UI Style
2012 - 2016
Flat UI Style
2012 - now
Minimalist UI
2016UI- Style
Flat now
2012 - now
Fluent Design System
2017 - now
UX Process
 UX design begins by learning about the
business model, doing user research and
understanding how a service can fit into the
user’s lives in a meaningful way.

But a UX-driven process doesn’t end with the

UI’s either, it’s also about testing with people,
supporting development, making ongoing
adjustments even after the launch.
UX Process
Identify the problem, validating users, and
understand business requirements.

Methods:
• Survey
• Interview
• Expert Review (Heuristic Evaluation)
• User Experience Questioner (UEQ)
• Competitive Analysis
• Technology Analysis
Identify the problem, validating users, and
understand business requirements.

Methods:
• Persona
• User Stories
• Problem Statement
• Solution Statement
• Customer Journey Map
Exploring the solution; prioritize features,
visualize the users flow and Information
Architecture framework.

Methods:
• User Flow
• Site Map
• Wireframes
Validating solution with visual; High fidelity
wireframes for presentation, developing the UI
and visual language.

Methods:
• Moodboard
• Style Guide
• Mockup Design
Create clickable prototypes (for quick testing)
to realize and experience different attributes
of the solution.

Methods:
• Clickable Prototyping
Measure and learn the product. Find anything
to improve. Does it work as intended? How
does it make the user feel? Does it satisfy the
user goals?

Methods:
• Usability Testing
• Accessibility Analysis
• Heuristic Analysis
• User Tasks
 Discovery Stage
Identify the problem, validating users, and
understand business requirements.
 UX Research
or as it’s sometimes called, design research; serves
many purposes throughout the design process. It
helps us identify and prove or disprove our
assumptions, find commonalities across our target
audience members, and recognize their needs,
goals, and mental models. Overall, research
informs our work, improves our understanding, and
validates our decisions.
Research Divided
into 3 Aspects:
• Business Requirements

• Users Requirements

• Technical Requirements
 Research Methods:

Survey
Take quantitative approach to get the qualitative
data. Survey can also reach a wider range of
people. Survey is a time-saving option.
 Research Methods:

Interview
User interviews are where a researcher asks
questions of, and records responses from,
users. This is the way to extract information
from users for user experience understanding,
usability understanding and ideation.
 Research Methods:
Expert Review (Heuristic Evaluation)
An expert review is where a usability expert uses his/her knowledge and
experience of testing products with users to walk through a products in
the shoes of a typical user. The expert will spot problems and
recommend changes to improve usability when budgets and timescales
don’t allow for user research. In other word, expert review is an
inspection method designed to identify usability problems in an online
product or service. The review is carried out by a small group of
usability experts (between 1 and 4), who analyse the product or service
to identify any potential usability issues . Then, Heuristic Evaluation is a
common method used in more formal or academic circles.
 Research Methods:
User Experience Questioners (UEQ)
The User Experience Questionnaire (UEQ) allows a quick
assessment of the user experience of interactive products. The
format of the questionnaire supports users to immediately
express feelings, impressions, and attitudes that arise when they
use a product. The scales of the questionnaire cover a
comprehensive impression of user experience, i.e. measure
both classical usability aspects (efficiency, perspicuity,
dependability) and user experience aspects (originality,
stimulation).
 Research Methods:
Competitive Analysis
It is help us to compare our products or service with similar
ones. The purpose of this research is to flesh out our product,
the technicals goal, and understand our users are.
 Research Methods:
Competitive Analysis
Competitive analysis will help us to answer some questions like:
• Who are your competitors?
• What products or services do they sell?
• What is each competitor's market share?
• What are their past strategies?
• What are their current strategies?
• What type of media are used to market their products or services?
• How many hours per week do they purchase to advertise through the
media used in this market?
• What are each competitor's strengths and weaknesses?
• What potential threats do your competitors pose?
• What potential opportunities do they make available for you?
 Research Methods:
Technology Analysis
As a business, system or software analyst and is responsible
for supporting existing systems and analyzing, making
recommendations and implementing technology-based
information solutions.
 Determine the Users:

Extreme User technique

Extreme User adalah sebuah teknik yang digunakan untuk memilih
user untuk dilakukan penelitian dari dua karakteristik yang user sangat
kontras berbeda latar belakang terhadap tujuan dibuatnya produk.
Tujuannya adalah untuk menghasilkan feedback rata-rata yang dapat
ditarik benang merahnya untuk menentukan karakter produk yang
seperti apa yang akan di buat.
Contoh:
Untuk membuat produk peralatan masak yang digunakan oleh ibu
rumah tangga, maka user yang akan dipilih adalah:
Extreme I : Ibu rumah tangga yang hobi masak setiap hari.
Extreme II : ibu yang tidak pernah masak.
 Extreme User technique
Untuk pemilihannya bisa dipilih berdasarkan yang terdekat
saja, dan cukup untuk mengambil sample 5 orang (Nielsen)
dari kedua Kategori extreme diatas.
Misal: Extreme I : 2 orang;
Extreme II : 3 Orang, atau sebaliknya.
 Research Technique:

Guerrilla Research
Guerrilla research methods are faster, lower-cost methods that
provide sufficient enough insights to make informed strategic
decisions. Guerrilla research can be a lot more palatable to many
bosses and clients who struggle with understanding the value of
research. In fact, using these methods is a great way to introduce
companies to the value that research can bring to projects.
How to run a good interview:
• Encourage storytelling.
• Avoid a fixed set of questions.
• Ask “why” and “why not” to dig deeper.
• Avoid leading questions.
• Don’t go too much into details. User interviews
should be about the user and their goals.
• Pay attention to body language.
 Worth it to read:
https://www.nngroup.com/articles/which-ux-research-methods/

https://www.nngroup.com/articles/interviewing-users/

http://www.uxbooth.com/articles/complete-beginners-guide-to-design-research/

http://www.uxbooth.com/articles/the-art-of-guerrilla-usability-testing/

https://www.usability.gov/what-and-why/user-research.html

https://visualhierarchy.co/blog/guerilla-user-testing-usability/
 Resources (in PDF):
uxpin_ux_design_process_best_practices.pdf

ux-research-guide-sample-questions-for-user-interviews.pdf

ux-playbook.pdf

Check in GoogleDrive “ONGISSCHOOL 2.0” folder

 Next Meeting, please bring:

Sticky Notes
Whiteboard / Cartoon Hard Paper
Board marker (1 black & 1 red)
Marker (1 black, 1 red & 1 green)
Paper grid 25 - 50 sheets (template to print uploaded into GoogleDrive)