Strateg

y Scope

ELEMEN
USER EXPERIENCE
The Elements of User Experience
Second Edition by Jesse James Garrett

re Surface
Structu

Skeleton
 Kelompok 5

1 2 3
Fellycia Pandu Rahman
Hikmahwarani Ghazali Rifko Akbar
(09031382227161) (09031382227180) (09031382227181)
 CONTENTS

WHAT?

Elemen-elemen
HOW User Experience HOW?
?
Pentingnya Aplikasi
User Experience Elemen-elemen User
Experience
 PENTINGNYA 
ux
THINK BUILD
S
 conven
ience

User
Experience (UX)
User Experience (Pengalaman Pengguna)
hadir dalam merancang produk/layanan agar
mampu menghindarkan user dari beberapa
permasalahan di dunia nyata.

Merancang produk/layanan dengan konsep UX

berkaitan dengan memahami yang dibutuhkan
oleh user serta kemudahan/kenyaman bagi user,
tidak sekedar sebagai produk/layanan yang
hanya berfungsi atau memiliki estetika baik
saja.
DOESomfort
C
Contoh Permasalahan dalam
Kehidupan Sehari-hari
 User Experience: How it matters?
Mendesain UX
Desain dari hasil analisis penggunaan
produk mengenai kepuasan user dan
seberapa kompleks penggunaannya
sebagai acuan menghasilkan produk yang
lebih baik.
n
Pengalama
Pengguna
Pengalaman pengguna yang ada bertujuan
meningkatkan efisiensi pekerjaan, waktu, dan
pengeluaran perusahaan
Mempertahankan Persaingan
Pengalaman pengguna yang baik saat
mengakses produk/layanan suatu perusahaan
memungkinkan user mengakses
kembali/berulang. Hal ini memungkinkan
perusahaan mampu bersaing di pasaran.
Konsep merancang pengalaman pengguna
yang menarik adalah memperhatikan
pengguna dalam pengembangan
produk/layanan agar tetap eksis terhadap
kebutuhan user

Efisiensi Pekerjaan Memperhatikan Pengguna

 DOES
UX dan Pengembangan Web

SAYS Pengembangan web dan adanya UX

akan memberikan user kesan dan
pengalaman yang baik dalam
penggunaan website.
Era digital menjadikan perusahaan berlomba
mengembangkan web semakin kompleks untuk
mempertahankan eksistensi mereka tanpa
memperhatikan kemudahan user.

Pada akhirnya, hal ini menjadikan web semakin

berat dan sulit diakses sehingga ditinggalkan oleh
user. Tentunya, hal ini membuat perusahaan bisnis
kehilangan target pasarnya.
 ELEMEN-ELEMEN

THINK
UX BUILD

S
Elemen User Experience
Proses mendesain UX berkaitan dengan pertimbangan setiap
tindakan yang mungkin dilakukan user serta harapan user terhadap BUILD
produk/layanan yang dihasilkan. UX berperan sebagai dasar
pengembangan produk/layanan melalui beberapa elemen.
 ELEMEN-ELEMEN UX

STRATEG SCOPE STRUCTURE

01 Merumuskan apa yang
Y
ingin didaptkan user dan
02 Mendefinisikan
berbagai fitur
03 Memahami perilaku
user dalam
apa yang user butuhkan produk/layanan yang menggunakan
diikutsertakan produk/layanan

04 SKELETON
Komponen yang
memungkinkan user
05 SURFACE
Visual akhir dari
produk/layanan yang
menggunakan dibuat
produk/layanan
Saling Ketergantungan Elemen UX

Kelima elemen UX memungkinkan

kerangka kerja konseptual terkait
masalah pengalaman pengguna dan
alat penyelesaiannya. Di mana setiap
elemen bergantung pada elemen di
bawahnya
 BASIC DUALITY
Dualitas dasar/basic duality berkaitan dengan sifat
produk yang dinilai dari dua sisi, yaitu

● Sisi Fungsionalitas, berupa langkah-langkah

yang terlibat dalam suatu proses dan bagaimana
penyelesaiannya (produk/layanan sebagai alat
untuk menyelesaikan satu/lebih tugas)
THINK
● Sisi Informasi, berupa apa yang dimiliki produk
dan apa artinya bagi user. Menciptakan UX yang
S kaya informasi memungkinkan user akan
menyerap dan memahami informasi yang BUILD
diberikan.
 01
t
Produc s User N
ive
Object ee ds

The Strategy Plane

Elements UX
 Strategy Plane
Dasar dari pengalaman pengguna yang sukses
adalah perencanaan strategi yang matang.
Mengetahui apa tujuan produk/layanan yang
dibuat serta apa yang dicapai user dalam
menggunakan produk/layanan tsb.

Pada layer strategi ini, dibagi menjadi dua

bagian yaitu Product Objectives dan User
Needs
Strategy Plane: Product Objectives

Tujuan Bisnis 
Penentuan tujuan bisnis yang
matang untuk identifikasi dan
menjelaskan secara rinci solusi
masalah user yang akan
diselesaikan
Identitas Produk
Reaksi user dalam
memperhatikan visual
produk agar memberikan
Metriks Sukses kesan yang baik
Indikator tentang seberapa
efektif pengalaman pengguna
memenuhi strategi (tolak ukur
keberhasilan strategi)
 Strategy Plane: User Needs

Segmentasi User
Membagi user dalam beberapa kelompok

User
Kegunaan dan Riset User Needs
Mengumpulkan data pemahaman kebutuhan user
t
Produc
ves
Objecti

Merancang Persona
profil user yang mewakili kebutuhan user di dunia nyata
 User

Segmentasi User Segmen

ta tion

Segmentasi membagi audiens/user menjadi

kelompok kecil yang memiliki kesamaan
karakteristik utama. Periset data biasanya
membagi segmen audiens berdasarkan
demografi jenis kelamin, usia, Pendidikan, atau
status perkawinan agar memudahkan memahami
kebutuhan user.

Psikografis yang menggambarkan sikap dan

persepsi user berkorelasi dengan demografi, di
mana orang dengan kelompok usia sama
(misalnya) seringkali memiliki sikap sama
User
Needs
 Creatin
g
ity Merancang Persona Persona
Usabill s
r
and Use
h Merancang persona yaitu karakter fiksi hasil
Researc
segmentasi dan riset user yang dibangun
mewakili kebutuhan user di dunia nyata. Hal
ini sebagai contoh kasus pengembangan
Kegunaan dan Riset User pengalaman pengguna
Riset pengguna/user melalui metode survei,
wawancara, focus group, dll untuk
mengumpulkan info tentang persepsi user

Selain itu, metode riset lain seperti pengujian

pengguna/user berupa menguji produk/layanan
yang dibuat atau meminta pengguna membuat
sketsa kasar atau prototype produk yang
diinginkan
 Peranan dan Proses Tim
Isu-isu srategis mempengaruhi semua orang yang terlibat dalam pendesainan
UX. Analis strategis menginginkan banyaknya perspektif dalam merumuskan
tujuan produk dan kebutuhan pengguna. Pemangku kepentingan bertindak
mengambil keputusan akhir strategis produk. User objectives dan user needs  BUILD
ditulis dalam dokumen sebagai acuan analisis tujuan perusahaan
untuk disesuaikan dengan tujuan akhir produk/layanan. 
 02
n al
Functio ion Conten
t
cat
Specifi Requir
eme nt

The Scope Plane

Elements UX
 Definisi The Scope Plane
Strategi menjadi ruang lingkup ialah ketika anda menerjemahkan
kebutuhan pengguna dan tujuan produk ke dalam persyaratan khusus
untuk konten dan fungsionalitas apa yang akan ditawarkan produk
kepada pengguna.
• Ruang lingkup membantu menentukan apa yang dibutuhkan
pengguna Anda dan bagaimana mengomunikasikan informasi
tersebut melalui fitur situs web.

• Dalam bidang ruang lingkup proses itu penting karena “a valuable

process that results in a valuable product”

• Proses berharga karena memaksa Anda untuk mengatasi potensi

konflik dan titik-titik kasar dalam produk sementara semuanya
adalah masih hipotetis. Kita dapat mengidentifikasi apa yang dapat
kita atasi sekarang dan apa yang harus menunggu sampai nanti.
 Functionality and Content
Pada bidang lingkup, kita mulai dari pertanyaan abstrak “Mengapa kita
membuat produk ini?” yang kami tangani dalam strategi pesawat dan
membangun di atas nya dengan pertanyaan baru: “Apa yang akan kita
lakukan untuk membuat?“

Secara umum pada layer ini yang perlu dipahami adalah apa yang akan kita
buat dan apa yang tidak akan kita buat. Dengan begini kita dapat mengetahui
sejauh mana lingkup dari yang akan dibuat.

Dalam pengembangan perangkat lunak, ruang lingkup didefinisikan melalui persyaratan

fungsional atau spesifikasi fungsional.
Beberapa organisasi menggunakan istilah-istilah ini untuk mengartikan dua dokumen
yang berbeda:
• Requirements di awal proyek untuk menggambarkan apa yang harus dilakukan system
• Specificatons di akhir untuk menggambarkan apa yang sebenarnya dilakukannya.
 Content
stem
Managements Sy
nten dapat
Sistem manajemen ko
kerja yang
mengotomatisasi alur
mproduksi
dibutuhkan untuk me
nten untuk
dan menyampaikan ko
pengguna.
 Functional Specification
Spesifikasi fungsional adalah dokumen formal yang digunakan untuk menggambarkan
kemampuan, tampilan, dan interaksi yang dimaksudkan produk dengan pengguna secara
Hal yang perlu
rinci untuk pengembang perangkat lunak. Spesifikasi fungsional adalah semacam pedoman diperhatikan!
dan titik referensi berkelanjutan saat pengembang menulis kode pemrograman.
enggunakan
• Be positive : M
itif
kalimat yang pos
Contoh Spesifikasi fungsional enjelaskan setiap
• Be specific : M
si dengan jelas
spesifikasi fung
1. Extensible Firmware Interface
dan spesifik
2. Multiboot Specification
3. Microcontroller Bus Architecture
4. Real time Specification for java
5. Single UNIX Specification
etc
 Content Requirement
Persyaratan konten Anda harus memberikan perkiraan kasar tentang
ukuran setiap fitur: jumlah kata untuk fitur teks, dimensi piksel untuk
gambar, dan ukuran file untuk elemen konten yang dapat diunduh dan
berdiri sendiri seperti dokumen PDF, atau untuk fitur seperti audio atau
video .

Jika kita terlalu mendalam proses pengembangan tanpa mengidentifikasi

siapa yang bertanggung jawab atas setiap fitur konten yang dibutuhkan,
kita mungkin akan berakhir dengan lubang yang menganga di situs karena
fitur yang dicintai saat mereka hipotetis ternyata terlalu banyak bekerja
bagi siapa saja yang benar-benar bisa diambil. Konten-Well, konten yang
efektif, bagaimanapun - memerlukan perawatan konstan.
 ts
n g Requiremen la
Prioritiz
i
pr ose s mengelo
adalah yaratan
rsyaratan
pe dari pers atif daya
Prioritas d an u r gensi rel s i sumber
t in g an n g a t a dai
kepen
b e d a u ntuk me itas yang mema
r
yang be g terbatas. Prior n
ling
yang pa u
y a n y a r a ta ata
proyek ers
bahwa p ra jika waktu
a sti k an g e
mem i se
n ti n g ditangan
p e
habis.
anggaran n
ilkan
menghas n,
f a k a
jekti s lai
g s tr ategi ob . D a lam kasu
Terka d a n iri ) tegis
a p e rs y aratan (k i beberapa stra
beberap b i s a me
layan
s y a ra t
satu
anan).
tujuan (k
 03
ion
Interact
Design Informa
tio
Archite n
cture

The Structure Plane

Bidang Struktur
Definisi The Structure Plane
Ranah struktur adalah yang ketiga dari lima bidang, dan dengan tepat
inilah titik di mana perhatian kita beralih dari isu-isu strategi dan ruang
lingkup yang lebih abstrak ke faktor-faktor konkret yang akan
menentukan apa yang akhirnya dialami pengguna.
etapi garis antara abstrak dan konkret dapat menjadi kabur—walaupun
banyak dari apa yang kita putuskan di sini akan memiliki pengaruh
nyata dan nyata pada produk akhir, keputusan itu sendiri masih
melibatkan sebagian besar masalah konseptual.

Pada layer ini kita mempelajari bagaimana memahami

perilaku dan pemikiran pengguna tujuannya adalah
pemahaman dalam penentuan struktur produk yang ingin
dikembangkan.
 Interaction Design
Desain interaksi merupakan interaksi dua arah antara pengguna
dengan produk. Bagaimana respon produk/layanan ketika user
Contoh lain Ketika user klik gambar
melakukan suatu Tindakan tertentu.
produk maka system akan merespon dan
mengarahkan user pada halaman produk.

Contoh sederhana Ketika user klik icon love

maka icon tersebut berubah dengan menjadi
merah.
 model
Conceptual ktif
a n a k o m p onen intera
g bagaim al sebagai m
odel
e sa n p e n g guna tentan il a k u d ik en ur
K er
k a m i b u at akan berp te m m em p erlakukan fit
yang kah sis mpat
se p tu a l. M isalnya, apa ik o n s u m s i pengguna, te
ko n d h
s e b a g ai s e suatu yang o b je k y a ng diperole
tertentu na, atau yang HOW
g d ik u n ju ngi penggu e n g a m b il pendekatan
yan rbeda m Anda
itus yang be konseptual
pengguna? S
M engetahui
m o d e l
t k e p utusan desai
n ?
e d a . m b u a
berb tuk me
e m u n g k in k anAnda un
m
en.
yang konsist
 ng
Error Handli h a n d a la m desain intera
ksi
n kesala g lebih
e tia p la p isa n penangana rs e n ta s e p e ngguna yan
S pe
tikan bahwa
Anda memas iliki pengalaman positif.
em
tinggi akan m yang
an tu d a n antarmuka
b p
k e s ala h an yang me
m
tu p e n g g u na menangka
Pesan emban rapa
d ah d it a fs irkan dapat m h te rj a d i. Tetapi bebe
mu setela sebagai
is kesalahan k tampak
berbagai jen g k in ti d a tuk
k an p e n gguna mun t b ag i sistem un
tinda rlamba
sala h a n sampai te
k e
ya.
menangkapn
 Information Architecture
Informasi arsitek berkaitan dengan bagaimana user memproses
informasi yang terdapat dalam produk/layanan kita.
Pengelompokkan informasi berdasarkan kategori membantu kita
dalam leveling of information
Contoh
Arsitektur informasi adalah ide baru, tetapi ini
adalah praktik lama—sebenarnya, bisa dikatakan
setua komunikasi manusia itu sendiri. Selama orang
memiliki informasi untuk disampaikan, mereka
harus membuat pilihan tentang bagaimana mereka
menyusun informasi itu sehingga orang lain dapat
memahami dan menggunakannya.
Top-down

Bottom-up ontent
Structuring c
katan
r to p -d o wn pende
arsitektu trategi.
• Pendekatan n g a n d ari bidang s
h pertim b a orong oleh
didorong ole itektur bottom-up did
ars
Pendekatan ngkup.
•
ba n ga n d ari bidang li is e suaikan d
apat
pertim p a t d di
yang da konten baru u
• Arsitektur n a m b ah a n ar
dasi pe h bagian b
mengakomo rt a s elu ru
n (atas) se
dalam bagia
(bawah).
Architecture Approaches
Bisa dibilang pendekatan yang paling sering digunakan
adalah strategi desain praktis. Strategi ini
kedengarannya, praktis. Dalam pendekatan arsitektur ini,
arsitek menggunakan bahan yang paling praktis, desain
yang paling efisien, dan strategi tradisionalis secara
keseluruhan.
 rinciples
Organizing p rinya
h a su m si inti yang da t
la
p en g o rg a nisasian ada sa rk a n k e d ekatan dapa
Prinsip in berda rensi
g a la se su atu yang la il ai . In i se p erti titik refe ,
se
ro le h k la s if ikasi atau n o b je k la in ditempatkan
mempe semua
g m e mungkinkan ptual.
pusa t y a n
n d al am k erangka konse
aka
sering digun bantu
n is a s ia n dapat mem
rg a tau
ilik i p ri nsip pengo n m e n a n g a ni domain a
Mem kan da ngkin
se o ra n g m enyederhana . D i si si lain, itu mu
se sangat rum it ian
e n a y a n g a n g m ew a rnai penila
fenom ipu y
n c ip ta k an prisma men
m e
seseorang.
 Langua
ge a n d me
tadata
Informa
si met
disaran a
kan ole mendefinisik
menent h nama an den
uk nya, gan
jenis fi an contoh Ba bahasa file. N tepat apa y
le. Dal
lainnya am dok hasa yang be amun, itu mu ang
um rbeda d n
file.
, metad
ata Bah en, e-book, alam b gkin
asa me d erbagai
nentuka an file berba
n Baha sis teks
Memili sa teks
ki kos di dalam
sangat a k ata ata
memba u tesau
memba n ru
ngun s t u j ika A s yang terko
metada is t n d n
ta sec em yang me a memutus trol dapat
informa aar ny ka
si.” Ini a simpel b ertakan meta n untuk
mengga m e r dat
mbarka engacu pada p arti “inform a. Istilah
n bagia en dekat as i tent
n konte
n terten an terstruktur ang
tu. untuk
 Team Roles and Procces
• Dokumen yang diperlukan untuk mendeskripsikan struktur situs—dari
detail spesifik nomenklatur dan metadata hingga gambaran besar
arsitektur informasi dan desain interaksi secara keseluruhan—dapat
bervariasi secara substansial tergantung pada kompleksitas proyek.
• Untuk proyek yang melibatkan banyak konten dalam struktur hierarkis,
kerangka teks sederhana dapat menjadi cara yang efektif untuk
mendokumentasikan arsitektur. Dalam beberapa kasus, alat seperti
spreadsheet dan database akan ditekan ke dalam layanan untuk membantu
menangkap nuansa arsitektur yang kompleks.
• Tetapi alat dokumentasi utama untuk arsitektur informasi atau desain
interaksi adalah diagram. Mewakili struktur secara visual adalah cara
paling efisien bagi kami untuk mengomunikasikan cabang, kelompok,
dan hubungan timbal balik di antara komponen situs kami.
 04
e
Interfac Informa
tion
Design Design

The Skeleton Plane

Interface Design, Navigation Design, and Information Design
Navig
at
Desig ion
n
 The Skeleton Plane
●Skeleton Plane (Kerangka) adalah ekspresi konkret
dari struktur situs yang lebih abstrak. Di sini, kita akan
mendesain tombol, blok teks, grafik, dan elemen
interface lainnya yang akan memudahkan pengguna
untuk memahami dan menavigasi produk.
●Kerangka, yang sering mengambil bentuk wireframe
atau low-fidelity prototype, didesain untuk mengatur
elemen UI dalam efektivitas dan kegunaan.
 Komponen Skeleton Plane

Skeleton dibagi menjadi tiga komponen, yaitu:

Interface Navigation Information

Design Design Design
Menyajikan dan mengatur Cara navigasi informasi Menentukan penyajian
elemen interface untuk dengan interface. informasi dengan cara
memungkinkan user yang mempermudah
berinteraksi dengan pemahaman.
fungsionalitas sistem.
 Contoh Interface Design
SKETSA WIREFRAME PROTOTYPE
 Contoh Navigation Design
Breadcrumb Clamshell Dropdown
 05
HEAR
FEELS

The Surface Plane

Bidang Permukaan
 The Surface Plane
●Surface adalah jumlah total dari semua pekerjaan dan
keputusan yang telah Anda buat. Surface menentukan produk
apa terlihat seperti apa, memilih layout yang tepat, tipografi,
warna dan lain-lain. Pada bagian Surface, kita berurusan
dengan Visual Design (Sensory Design).
●Surface berfokus pada tampilan visual dari konten dan
kontrol, yang memberikan petunjuk tentang apa yang dapa
dilakukan user dan bagaimana berinteraksi dengannya. Surface
harus membuat segala seuatu lebih mudah dipahami,
meningkatkan kemampuan kognitif user untuk menyerap apa
yang dilihatnya di layar.
 Contoh Surface Plane
Color Font Layout
Strateg
y Scope
Plane Plane

The Elements
Applied
Pengaplikasian/Realisasi
Elemen-Elemen User Experience

re Surface
Structu Plane
Plane
Skeleto
n
Plane
 Menyelesaikan Permasalahan
Merancang User Experience tidak lebih dari sekadar kumpulan permasalahan
yang kecil untuk dipecahkan/diselesaikan. Perbedaan antara pendekatan yang
benar dan pendekatan yang salah terletak pada ide dasar :
Memahami permasalahan yang ingin diatasi, misalnya kita sudah mengetahui bahwa
tombol ungu besar yang terdapat laman beranda merupakan permasalahan. Apakah karena
ukurannya dan warnanya yang kurang kontras (Surface Plane)? atau tombolnya berada di
laman yang salah (Skeleton Plane)? atau fungsi dari tombol tersebut tidak sesuai ekspektasi
pengguna (Structure Plane)?
 Pembagian Peran
Hanya dengan memiliki seseorang dalam
organisasi yang memikirkan tentang masing-
masing dari lima bidang (Plane) kita dapat
melakukan semua pertimbangan yang
penting untuk berhasil membuat User
Experience yang baik. Bagaimana peran
terdistribusi di organisasi tidak lebih penting
dari pada memastikan bahwa semua elemen
dari user experience terbagi dengan baik.
 Mengajukan Pertanyaan Yang Tepat
Cara yang tepat adalah memiliki alasan untuk tiap pilihan dengan sepengetahuan kita
tentang permasalahan yang sedang dihadapi.
Pertanyaan yang harus anda tanyakan pada anda diri sendiri (dan pertanyaan pertama
yang harus Anda jawab) tentang aspek apa pun dari user experience adalah: Mengapa anda
membuatnya menjadi sedemikian?.
Memiliki cara berpikir yang baik dan benar untuk menghadapi suatu permasalahan
adalah hal yang paling penting. Setiap aspek lain pada proses mendesain user experience
bisa disesuaikan dengan waktu, keuangan dan orang yang perlukan.
 Approach
Berlomba-lomba menuju peluncuran produk tanpa melihat ke belakang mungkin terlihat
seperti ide yang bagus disaat kita menentukan tanggal perilisannya, akan tetapi hasilnya
adalah produk yang memenuhi semua persyaratan teknis sesuai proyeknya akan tetapi tidak
cocok untuk penggunanya. Lebih buruk lagi, dengan memanfaatkan evaluasi komponen
UX pada akhirnya kita merilis/meluncurkan produk yang bermasalah akan tetapi tidak ada
lagi kesempatan atau modal untuk memperbaikinya.
Beberapa perusahaan sangat menyukai approach seperti ini, menyebutnya “user acceptance
testing”, pertanyaannya bukanlah “apakah pengguna akan menyukai atau menggunakan
produknya?” akan tetapi “apakah mereka bisa menerima produk seadanya?”
 Kesimpulan
Dalam banyak kasus, kegagalan pada bidang bagian atas
dapat menutup keberhasilan pada bidang yang lebih rendah.
permasalahan dengan desain visual—tata letak yang tampak
berantakan atau terlalu ramai, atau warna yang tidak
konsisten atau bertabrakan.
Demikian pula, membuat semua keputusan yang tepat di
bidang atas tidak berarti apa-apa jika keputusan itu
didasarkan pada pilihan buruk yang dibuat di bidang yang
lebih rendah. Sejarahnya, Web penuh dengan situs yang
gagal karena, meskipun terlihat bagus secara visual, mereka
sama sekali tidak dapat digunakan.
 THANK
THINK
 YOU!! BUILD