Anda di halaman 1dari 34

Institut Teknologi Telkom

Jl DI Panjaitan 128 Purwokerto

Jawa Tengah Indonesia

yfor better design
Tenia Wahyuningrum
Dosen Informatika
i gn
e s
a d

US design UK design
Keyboard QWERTY diadopsi oleh berbagai macam jenis perangkat
Usability …

Usability = produk dapat digunakan secara efektif, efisien, puas

UX = persepsi dan respon dari pengguna sebagai reaksi dari penggunaan sebuah produk
UI =tampilan produk sesuai dengan fungsinya
Usability …

Tahun 50 an Tahun 90 an

Tahun 2015 an
Usability …

Tahun 2016 an
Usability …

Kemasan plastik susu bendera

Usability …
UI UX Usability
Usability …
Don’t make
Steve Krug, 2006
Fact of life #1

“ We don’t read pages. We scan them.”

Fact of life #2
Pertama, kita selalu tergesa-gesa. Maka, seperti kata Klein, “optimasi akan sulit dan
memakan waktu lama, kepuasan lebih efiesien”.
Kedua, tidak ada penalti jika kita salah menebak. Biasanya user cukup menekan tombol
(klik) satu atau dua kali, hal ini membuat strategi kepuasan lebih efektif. (Note : tombol back
adalah tombol fitur yang paling banyak digunakan pada browser web).
Ketiga, pada situs yang dirancang buruk, kita tidak berusaha untuk mengeluarkan banyak
effort dalam memilih. User biasanya lebih baik pergi dengan tebakan pertama dan dengan
menekan tombol “back” jika apa yang kita pilih tidak bekerja.
Keempat, menebak itu lebih menyenangkan! Dari pada pusing memikirkan pilihan tombol
atau link, kita lebih suka menebaknya. Jika tebakan benar, ini akan menimbulkan reaksi
yang lebih cepat, dan ini mengenalkan unsur kebetulan yang menyenangkan dan
kemungkinan berjalan menjadi sesuatu yang mengejutkan dan fun!

“ We don’t make optimal choices. We satisfice.”

Fact of life #3

User tidak pernah tahu dan mau tahu bagaimana sebuah tombol bekerja, tapi mereka
tahu bagaimana cara menggunakannya. Bagi sebagian user, membaca instruksi
perangkat lunak akan memakan waktu banyak, tapi bagi user yang telah terbiasa,
mereka akan menggunakan waktunya dengan lebih efisien. Bahkan jauh dari apa yang
dibayangkan oleh para desainer.

“ We don’t figure out how things work. We muddle through.”

A Good Idea
idea Try A One Column
1 Layout instead of

A one column layout will give you more control over your narrative. It should be able to guide your readers in a more predictable way
from top to bottom. Whereas a multi column approach runs some additional risk of being distracting to the core purpose of a page.
Guide people with a story and a prominent call to action at the end
idea Try Social Proof instead
2 of talking about yourself

Social proof is another great persuasion tactic directly applicable to increasing conversion rates. Seeing that others are endorsing
you and talking about your offering, can be a great way to reinforce a call to action. Try a testimonial or showing data which proves
that others are present.
idea Try Recommending
3 instead of equal choice

When showing multiple offers, then an emphasized product suggestion might be a good idea as some people need a little nudge. I
believe there are some psychology studies out there which suggest that the more choice there is, then the lower the chances of a
decision actually being made and acted upon. In order to combat such analysis paralysis, try emphasizing and highlighting certain
options above others.
idea Try Being Direct instead
4 of indecisive

You can send your message with uncertainty trembling in your voice, or you can say it with confidence. If you're ending your
messaging with question marks, using terms such as "perhaps", "maybe", "interested?" and "want to?", then most likely you have
some opportunity to be a bit more authoritative. Who knows, maybe there is a bit more room for telling people what to do next in the
world of conversion optimization
idea Try Fewer Form Fields
5 instead of asking for too

Human beings are inherently resistant to labor intensive tasks and this same idea also applies to filling out form fields. Each
field you ask for runs the risk of making your visitors turn around and give up. Not everyone types at the same speed, while
typing on mobile devices is still a chore in general. Question if each field is really necessary and remove as many fields as
possible. If you really have numerous optional fields, then also consider moving them after form submission on a separate
page or state. It's so easy to bloat up your forms, yet fewer fields will convert better
idea Try Benefit Button
6 instead of just task based

Imagine two simple buttons displayed on a page. One button tells you that it will “Save You Money”, while the other one asks you
to “Sign Up”. I’d place my bets that the first one might have a higher chance of being acted on, as a sign up on it’s own has no
inherent value. Instead, a sign up process takes effort and is often associated with lengthy forms of some sort. The hypothesis
set here is that buttons which reinforce a benefit might lead to higher conversions. Alternatively, the benefit can also be placed
closely to where the action button is in order to remind people why they are about to take that action. Surely, there is still room for
task based actions buttons, but those can be reserved for interface areas that require less convincing and are more recurring in
Usability testing

45-50 min
0-5 min 5-10 min 10-45 min 50-55 min 55-60 min
Welcome / Pre-test Carry out Post-test Debrief / pay
consent form intervew the test task interview incentive

Time Behaviour
observation observation

Sumber : Usability Test Plan by David Travis, 2016

Severity ratings of
usability problem

Irritant (1) = <10

4 3 2 1
Moderate (2) =11-50
Severe (3) = 51-89
Unusable (4) =90>

Tom Tullis, Bill Albert, 2009