Prinsip Desain Website yang Ramah Pengguna

PRINSIP DESAIN WEBSITE YANG
RAMAH PENGGUNA
P E M U TA K H IRA N WE B U N IT K E R JA IP B, 3 1 AG U S T U S 2 0 1 7
Auzi Asfarian
TOPIK
User Experience untuk Web
Mengenal Karakteristik Pengunjung Web
Penggunaan Elemen Desain yang Tepat
2
APA ITU USER EXPERIENCE?
3
4
5
6
7
UX: APA YANG PENGGUNA
LIHAT, DENGAR, RASAKAN
SAAT MENGGUNAKAN SUATU
PRODUK
8
UX YANG BAIK:
NYAMAN DAN MUDAH
DIGUNAKAN PENGGUNA
9
SUSAH NYARI OJEK?
10
MALES KELUAR NYARI MAKAN?
11
SMS MAHAL?
12
UX YANG BAIK
MEMBANTU PENGGUNA
MENCAPAI TUJUANNYA
13
KITA INGIN MENDENGAR
ORANG BERKATA, “OH, BUKA
AJA DI WEB UNIT X”
14
BEBERAPA PERTANYAAN TENTANG WEB
KITA
Siapa saja pengunjung web unit kita?
Apa saja informasi yang mereka butuhkan?
Sudahkah web kita menyediakan informasi yang
mereka butuhkan?
Apakah informasi tersebut mudah diakses?
Apakah informasi tersebut disajikan dalam bentuk
yang nyaman untuk dibaca?
15
KENALI PENGGUNA ANDA
Sebelum masuk ke ‘desain’,
pahami dahulu karakteristik
dan motivasi pengunjung
web Anda.
16
17
http://www.harvard.edu
18
19
20
https://college.harvard.edu/admissions/choosing-harvard
21
22
https://www.stanford.edu
23
PENGGUNAAN ELEMEN DESAIN
24
#1 GUNAKAN CMS
Menyederhanakan banyak
proses desain dan
pengembangan web.
Banyak pilihan tema, namun
pilih dengan bijak.
Pastikan update.
25
PASTIKAN TEMA YANG DIPILIH
RESPONSIF
26
27
#2 GUNAKAN GAMBAR TERBAIK
28
29
30
Hero Image
https://www.stanford.edu
31
Hero Image
https://mit.edu
32
HERO IMAGE
Banner web ukuran besar
(hampir satu layar).
Dilihat pertama kali oleh
pengunjung web Anda.
Digunakan untuk
menyampaikan produk /
manfaat utama dari web
Anda.
33
CROP, BUKAN STRETCH
34
JANGAN GUNAKAN FOTO ‘BAJAKAN’
35
JANGAN GUNAKAN FOTO ‘BAJAKAN’
36
https://stocksnap.io
37
http://www.freepik.com/
38
www.canva.com
39
AMBIL FOTO SENDIRI
40
PENGGUNAAN GAMBAR
Gunakan gambar terbaik.
Crop, bukan stretch.
Perhatikan lisensi gambar.
Kompresi gambar Anda!
41
#3 WARNA
You have a whopping 16.8 million colors
to choose from when designing a website.
And when you start combining them to form
a palette? Your array of choices instantly
becomes practically infinite.
42
RGB
Color Wheels
43
Colour Palette
44
45
Monochrome
Complementary
Analogues
Triadic
47
http://www.colourco.de/
48
http://www.colourlovers.com/
49
50
PENGGUNAAN WARNA
Pilih palette terbaik yang sesuai dengan karakter
unit Anda.
Jangan lebih dari 5 warna.
51
#4 TIPOGRAFI
52
SERIF VS SANS SERIF
Pilih Sans Serif untuk
kenyamanan, namun Serif
tetap bisa digunakan.
53
PERHATIKAN KONTRAS UNTUK
KENYAMANAN PEMBACA
54
TEKS DI ATAS GAMBAR
Berikan layer
hitam transparan
agar
teks menjadi lebih
jelas dibaca
55
BARIS JANGAN TERLALU PANJANG
56
BARIS JANGAN TERLALU PANJANG
57
Big, Bold, All-Caps
Capture Attention
58
Small, Thin, Proper
Case
Readability
59
PENGGUNAAN TIPOGRAFI
Anda dapat gunakan Serif dan Sans Serif, sesuaikan
dengan karakter (brand) unit Anda.
Fokus pada keterbacaan.
60
TERIMA KASIH
61