Principle of Design

Dalam Estetika

Ketika sedang mengerjakan sebuah desain, akan sangat membantu jika Anda
memiliki kerangka kerja untuk digunakan di dalamnya. Kerangka kerja dapat
didefinisikan dengan menggunakan prinsip-prinsip desain — aturan, asumsi,
atau pernyataan panduan yang dipahami secara umum yang mendefinisikan
hubungan antara elemen-elemen desain Anda. Beberapa prinsip desain yang
dipahami secara umum yang berlaku untuk sebagian besar desain digital saat ini
adalah:

1. VISUAL DESIGN: prinsip-prinsip mengenai hubungan antara elemen-

elemen dalam tampilan (contohnya halaman web). Termasuk di dalamnya
konsep-konsep seperti unity, hierarchy, dan balance. Konsep ini memberikan
fokus pada bagaimana user dapat melihat produk Anda.

2. INTERACTION: prinsip-prinsip mengenai cara user menelusuri ruang

pada website. Termasuk di dalamnya flow dalam halaman (seperti flow pada
sebuah formulir online), dan navigation. Konsep ini memberikan fokus pada
bagaimana user dapat bertindak dalam produk Anda.
3. PSYCHOLOGY: prinsip-prinsip yang mempengaruhi cara user
memandang dan terlibat dengan desain Anda. Termasuk di dalamnya persepsi
umum yang dapat memengaruhi jika user mempercayai informasi Anda,
keterlibatannya dengan user lain, dan motivasi user untuk belajar. Konsep ini
memberikan fokus pada bagaimana perasaan user saat menggunakan produk
Anda.

1. VISUAL DESIGN

Desain visual produk Anda memengaruhi pemahaman user tentang brand

produk; dan sering memengaruhi kepercayaan yang ditempatkan pada produk
tersebut. Desain visual yang efektif juga memengaruhi audiens di tingkat bawah
sadar, yang memungkinkan mereka untuk mendapatkan nilai, relevansi, dan
kepentingan tanpa membuat penilaian sadar tentang produk Anda.

Desain visual Anda tidak harus cantik untuk menjadi efektif. Terkadang desain
yang baik terlihat tanpa banyak hiasan, dan “tanpa embel-embel”justru bisa
menjadi daya tarik tersendiri. Namun, ada prinsip-prinsip desain visual dasar
yang baik digunakan ketika proses desain, untuk memastikan produk yang
dihasilkan akan menyenangkan dan dapat digunakan. Beberapa prinsip desain
visual tersebut adalah:

• Unity & variety

• Hierarchy & dominance

• Economy of elements

• Proportion & balance

Unity & Variety

Unity berkaitan dengan sejauh mana elemen-elemen dalam desain Anda

memiliki hubungan yang jelas satu sama lain. Anda dapat menunjukkan unity
dalam banyak cara — misalnya, dengan warna, bentuk, style, atau dengan cara
elemen diposisikan dalam hubungan satu sama lain (juga disebut proximity/
kedekatan).

Ketika Anda menggunakan beberapa variasi dalam elemen-elemen desain,

membuat perbedaan antara elemen-elemen, maka dapat menambah rasa
kesegaran atau eksplorasi. Tantangan dalam desain visual adalah mencari tahu
bagaimana mencapai unity dalam pengalaman visual yang akan membantu user
memahami desain, sambil tetap mewakili beberapa user yang berbeda atau
kebutuhan yang ditargetkan oleh produk tertentu.
Tantangan lain dalam desain visual adalah memastikan elemen-elemen desain
yang berbeda karakter satu sama lain bisa bekerja bersama untuk tujuan
tertentu. Misalnya Anda ingin menyajikan informasi dalam bentuk teks dengan
satu button aksi yang Anda harapkan diklik setelah membaca informasi. Anda
dapat menggunakan elemen yang berbeda secara visual dan menerapkan prinsip
proximity (kedekatan), grouping (pengelompokan) atau chunking (pemenggalan
informasi) secara bersamaan sehingga elemen-elemen tersebut tampak berkaitan
satu dengan yang lain. Jika elemen desain dipisahkan oleh ruang yang terlalu
banyak, hubungan antar-elemen akan sulit dipahami.
Hierarchy & Dominance
Hirarki berkaitan dengan merancang urutan unsur-unsur yang dilihat. Pada
pengaturan hirarki, terdapat hal yang lebih menonjol dan ada hal-hal yang
posisinya cenderung mendukung dan mungkin tampak kurang penting. Hirarki
memengaruhi alur yang akan diikuti mata user saat melihat sebuah halaman
website. Hal ini berguna ketika Anda mencoba mendorong user untuk
melakukan tindakan tertentu, misalnya memilih untuk membeli produk.
Lokasi, Warna, dan Ukuran obyek
Beberapa faktor yang menentukan pemahaman user tentang hirarki adalah
lokasi, warna, dan ukuran obyek aksi (misalnya button) dan style serta panjang
teks. Pada umumnya, objek yang lebih besar, lebih terang, dan memiliki kontras
yang lebih tinggi terhadap objek lain pada sebuah halaman website memiliki
lebih banyak dominasi, dan teks yang pendek dan berisi perintah akan menarik
perhatian juga. “Click here to add this item to your shopping cart” kurang
dominan daripada “Buy now!”, keduanya karena alasan visual (“Buy now!”
dapat ditangkap oleh mata user lebih cepat) dan karena style yang lebih aktif
dan tambahan tanda baca yang terkesan mendorong user untuk bertindak.
Gambar dan Animasi
Selain lokasi, warna, dan ukuran obyek, gambar juga cenderung menarik
perhatian. Wajah dapat secara visual memikat, dan foto yang dramatis akan
mendominasi halaman, seperti pada gambar website healthychildren.org di
bawah ini.. Tim pemasaran sangat menyadari hal ini, dan banyak iklan banner
akan menyertakan foto-foto dramatis seperti ini terlepas dari seberapa relevan
mereka dengan produk yang dijual. Animasi juga dapat menarik perhatian.

Letak Elemen
Letak elemen juga memengaruhi pemahaman hirarki user. Letak elemen adalah
salah satu area yang mana perbedaan budaya memiliki pengaruh. Contohnya,
untuk sebagian besar bahasa dunia barat, urutan bacaan dari atas ke bawah dan
dari kiri ke kanan, sehingga mata secara alami cenderung ke arah itu ketika
melihat halaman website. Sebuah elemen di sisi kanan bawah layar
kemungkinan akan menonjol ketika jeda mata diletakkan di sana pada akhir
melihat halaman website. Tulisan Arab atau kaligrafi Cina adalah contoh tulisan
yang dibaca dari kanan ke kiri dan jalur alami untuk penglihatan mata akan
bervariasi untuk user yang terbiasa dengan hal itu. Pengalaman berbeda
berdasarkan budaya ini menjadi alasan mengapa Anda harus mengenal target
audiens Anda dengan baik.

Cara Menentukan Hirarki dan Dominasi

• Membuat daftar dan menentukan bobot semua elemen pada halaman

website, memberikan masing-masing status primer, sekunder, atau tersier.
Praktik ini akan membantu Anda membuat pilihan tentang lokasi, ukuran, dan
warna untuk memperkuat hirarki pada halaman website.
• Saat tampilan Anda terbentuk, luangkan waktu sejenak untuk
mempertimbangkan kembali hirarki keseluruhannya. Apakah susunan elemen
sudah tepat? Jika Anda tidak yakin, lakukan Squint Test — lirik menggunakan
mata Anda sehingga Anda tidak dapat melihat semua elemen secara individu,
dan perhatikan hal-hal yang benar-benar Anda tangkap pertama sekali. Atau,
jalankan desain Anda melalui Usability Test untuk melihat elemen-elemen yang
membuat user tertarik (atau tidak ada).
Economy of Elements
Bayangkan diri Anda berjalan ke sebuah pesta dengan undangan berjumlah 10
orang. Anda kemudian memulai percakapan dengan satu dan membahas
beberapa topik menarik. Tiba-tiba saat dalam perbincangan tersebut, teman
Anda yang lain memanggil Anda untuk menjawab pertanyaan. Segera setelah
Anda mendengarnya, perhatian Anda mengarah ke teman Anda yang lain
tersebut dan Anda menghampirinya.

Sekarang bayangkan Anda berada di sebuah pesta di ruangan yang sama,

dengan jumlah undangan 100 orang dan semuanya terlibat dalam percakapan.
Akan ada dengungan suara yang membuat Anda lebih sulit untuk mendengar
setiap orang sebagai suara individu. Jika ingin memanggil, teman Anda harus
berteriak lebih keras, atau mungkin bahkan datang dan menyentuh bahu Anda
untuk mendapatkan perhatian Anda.
Hal yang sama berlaku untuk elemen desain. Desain dengan elemen-elemen
yang banyak mungkin tampak seperti banyak suara yang berteriak kepada user
— dia mungkin tidak tahu yang mana yang harus didengarkan, dan kapan. Pada
kenyataannya, komentar umum yang terdengar dalam Usability Testing adalah
bahwa jika sebuah halaman website terlalu penuh dengan elemen, halaman
tersebut akan tampak sibuk, atau tidak jelas selanjutnya harus bergerak ke
mana. Ketika suatu desain memiliki unsur ekonomis yang baik — ketika elemen
pada halaman memiliki tujuan, relevan, dan kaya informasi — Anda dapat
memastikan informasi tersebut dapat dengan mudah dicerna dan ditindaklanjuti.

Edward Tufte adalah pendukung ekonomi dalam desain. Edward

memperkenalkan konsep chart junk sebagai cara untuk menggambarkan semua
elemen desain yang ditambahkan ke grafik atau bagan tetapi tidak memiliki
kegunaan yang berharga dalam mengkomunikasikan data. Sering kali begitu
menakjubkan ketika melihat betapa banyak elemen yang dapat dihapus dari
bagan dan berfokus pada informasi nyata yang perlu ditampilkan. Efek 3D
adalah salah satu penyebabnya, seperti contoh pada gambar di bawah ini.

Efek 3D pada diagram pie chart di atas adalah contoh chartjunk. Kemiringan
dalam perspektifnya membuat perbandingan tidak akurat. Pada gambar kiri,
irisan warna merah, terlihat lebih banyak daripada irisan berwarna biru.
Sebearnya, seperti pada gambar sebelah kanan, besar/ banyaknya warna merah
sama dengan irisan warna biru.
Elemen sederhana juga bisa kaya informasi jika Anda menggunakan lebih dari
satu metode untuk mengomunikasikan tujuannya. Misalnya, ikon status ini
menggunakan warna, bentuk, dan simbol untuk mengomunikasikan tujuan
mereka, keseluruhannya dalam desain yang relatif kecil dan bersih. Ini sangat
baik dalam hal mendesain status, di mana jika hanya mengandalkan warna,
kemungkinan akan mempengaruhi usability bagi user yang buta warna menjadi
lebih rendah.

Icon status pada gambar di atas masing-masing berisi tiga tingkat informasi,
yang membantu memperkuat maknanya.
• Bentuk: lingkaran vs segitiga
• Simbol:tanda centang vs titik seru
• Warna: hijau, putih vs kuning, hitam
Biasanya simbol tanda centang akan berwarna hijau untuk status “baik” dan
tanda seru akan berwarna merah untuk dijadikan peringatan. Namun, indikator
warna tersebut akan hilang untuk user yang buta warna, atau dalam kasus di
mana informasi dicetak dalam warna grayscale, sehingga memiliki tiga level
membuat kombinasi yang kuat untuk mengatasi situasi tersebut. Test desain
Anda dalam bentuk grayscale untuk memastikan pesan Anda masih
tersampaikan dengan jelas.
Proportion and Balance
Proporsi desain mengacu pada hubungan ukuran elemen-elemennya satu sama
lain, dan hubungan ukuran elemen terhadap keseluruhan desain. Saat
berhadapan dengan desain yang tetap ukurannya, seperti poster, proporsinya
tidak pernah berubah, bahkan jika Anda mengubah orientasinya, misalnya
seperti gambar poster di bawah ini.

Ketika berhadapan dengan desain yang dapat berubah ukurannya (fluid design),
seperti aplikasi di tablet yang harus dapat beralih dari mode portrait ke
landscape, aspek proporsi menjadi bagian yang penting untuk dilibatkan dalam
desain.

Pada sebagian besar desain digital, di mana Anda mungkin tidak memiliki
kontrol atas dimensi layar user, Anda harus secara eksplisit tentang seberapa
banyak adaptasi yang perlu dilakukan pada desain Anda. Jika Anda ingin
elemen mengubah proporsi antara perangkat atau dimensi yang berbeda,
tetapkan aturan tentang cara elemen berubah untuk menyesuaikan. Contohnya
dapat dilihat pada gambar di bawah ini.
Proporsi dan layout elemen pada website Kompas.com berubah secara dinamis
untuk menyesuaikan dengan dimensi jendela browser user. Pada orientasi
Portrait, jendela memiliki lebar yang relatif sempit, sehingga grafik lebih,
lebarnya disesuaikan agar pas pada ukuran layar. Pada orientasi Landscape
kedua di mana jendela browser lebih lebar, proporsinya disesuaikan secara
dinamis. Ukuran grafik lebih melebar, termasuk jumlah navigasi menu yang
ditampilkan menjadi lebih banyak.
GRID
Proporsi seringkali dikendalikan dengan menggunakan grid. Grid sangat jelas
kelihatan di sebagian besar website dengan konten yang banyak, misalnya, di
mana Anda mungkin memiliki bagian grid untuk navigasi kiri, konten di bagian
tengah yang lebih besar, dan konten terkait yang diletakkan di sebelah kanan.
Pola lain adalah memiliki semua navigasi di bagian atas dan memberikan porsi
lebih banyak kolom untuk konten.
Grid membantu user memahami struktur halaman. Namun, ketika terlalu taat
pada pengaturan grid untuk kebutuhan fungsional, desain bisa jadi tampak
membosankan atau terlalu bermanfaat (tetapi tidak atraktif). Visual designer
akan sering dengan sengaja memecah grid untuk membuat beberapa elemen
menonjol, atau untuk membuat desain lebih menarik secara visual.
Keseimbangan antara kedua teknik ini dapat membantu menciptakan desain
yang menarik dan bermanfaat.
Pastikan untuk menguji sistem grid desain Anda dengan berbagai konten,
terutama jika Anda mendesain produk yang memiliki konten dinamis (seperti
berita dan artikel yang diposting secara berkala). Dalam hal ini sangat penting
untuk memastikan guideline desain dan konten bekerja sama untuk menciptakan
keseimbangan visual yang baik.
Area yang luas pada halaman website, yang justru sedikit kontennya, dapat
membuat sebuah layar terlihat canggung, dan juga dapat memengaruhi usability
halaman website, karena scrolling yang berlebihan atau terpisah-pisahnya
elemen yang harusnya memiliki proximity (kedekatan) satu dengan yang lain.
Hal ini dapat dicegah dengan cara menetapkan guideline misalnya jumlah teks
untuk artikel atau item berita, sehingga semua orang tahu bagaimana menangani
konten yang panjang dan pendek.
2. INTERACTION
Interaksi tidak dimulai dengan klik atau sentuhan, tetapi dimulai dengan
keinginan untuk bertindak, dan pemahaman bahwa sesuatu dapat
ditindaklanjuti. Di sinilah visual design dan interaction design tumpang tindih
— sebelum user tahu button mana yang harus diklik, ia harus menyadari bahwa
elemen tersebut adalah sesuatu yang dapat diklik.
Associations & Affordance
Cobalah membuka website eCommerce favorit Anda. Tanpa menggunakan
keyboard dan mouse, coba perhatikan halaman websitenya. Bisakah Anda
memberi tahu dengan jelas apa yang bisa Anda klik dan apa yang tidak bisa
Anda klik pada halaman tersebut?
Jika Anda berada pada website yang umum, Anda mungkin melihat beberapa
metafora yang paling umum digunakan untuk interaksi — tab dan button.
Metafora tab di dunia nyata dalam bentuk folder fisik adalah berbeda dengan
tab di ruang digital. Tetapi pemahaman Anda tentang cara mengoperasikannya
di dunia nyata bisa membantu Anda menggunakan tab pada desain website
misalnya.
Menggunakan asosiasi benda nyata dengan virtual bisa sangat membantu, tetapi
juga harus berhati-hati, karena penggunaannya bisa saja tidak sama persis dan
akhirnya menaggar aturan desain visual. Contohnya, sekitar tahun 2000,
Amazon.com mengalami masalah ini ketika mencoba untuk menambahkan
kategori di websitenya, menu-menu ditampilkan dalam tab seperti gambar di
bawah ini. Pilihan desain ini justru membuat user lebih sulit melihat dan
memilih menu.

Saat mendesain objek yang perlu aksi tindaklanjut, sebagian besar waktu Anda
harus memastikannya mengikuti salah satu dari aturan ini:
• Gunakan asosiasi dengan sesuatu yang umum digunakan dalam dunia nyata
(dalam bentuk fisik) yang memberikan petunjuk tentang bagaimana obyek
tersebut digunakan secara digital (seperti tab atau button)
• Ikuti standar umum elemen interaktif, seperti menunjukkan link dengan warna
yang jelas berbeda dari teks biasa.
• Pertimbangkan affordance dapat dirasakan dalam elemen desain.
Affordance sebuah objek adalah sejauh mana sifat-sifat objek memperjelas
bagaimana obyek tersebut dapat digunakan. Contohnya, bola tenis berbentuk
bulat dan pas di satu tangan, sedangkan raket pemukul berbentuk panjang dan
membutuhkan dua tangan untuk memegang di pangkalnya. Seseorang akan
lebih cenderung melempar bola daripada melemparkan raket pemukul.
Bentuknya memberikan petunjuk bagaimana mereka harus digunakan. Objek
digital tidak memiliki sifat fisik, tetapi tampilan, rasa, dan perilaku mereka
dapat membangun affordance yang dirasakan yang membantu
mengkomunikasikan kemampuan mereka untuk melakukan aksi tindaklanjut.
Elemen-elemen yang dapat berinteraksi idealnya dibedakan secara visual
dengan warna atau dengan efek beveling pada button yang membantu user
memahami mereka dapat diklik. Animasi yang halus, seperti peningkatan atau
penurunan cahaya pada suatu objek, yang dapat mendorong user untuk
mengklik.
Kesalahan umum dalam desain adalah menganggap bahwa efek hover pada
elemen desain cukup untuk menunjukkan bahwa elemen tersebut dapat diklik.
Anda tidak membuat perbedaan link dengan obyek lainnya dalam desain,
berharap user akan menggerakkan mouse pada halaman website Anda, lalu akan
muncul garis pada teks dan user kemudian mengetahui bahwa elemen tersebut
adalah link. Sebuah link harusnya ditunjukkan sebagai sebuah link, misalnya
dengan memberi warna yang berbeda (biasanya biru) dan ditambahkan garis
bawah pada teks.
Pendekatan efek hover mengasumsikan bahwa user secara acak menggerakkan
mouse ke elemen dalam desain dengan harapan bahwa sesuatu dapat diklik.
Pendekatan ini cocoknya untuk desain yang menekankan eksplorasi misalnya
dalam game, di mana user memang mencari pentujuk-petunjuk. Efek houver ini
harus digunakan dengan sangat sengaja sebagai desain untuk eksplorasi dan
bukan sebagai teknik navigasi yang umum.
User jarang ingin menghabiskan banyak waktu bergerak di halaman-halaman
website Anda untuk menemukan elemen yang dapat diklik. Untuk produk-
produk di mana user berusaha melakukan pekerjaan atau menemukan informasi
dengan cepat, yang terbaik adalah merancang economy of motion.
Economy of Motion
Seberapa cepat dan efektif user bisa melakukan sebuah aksi pada desain,
tergantung pada jarak yang harus dia tempuh untuk sampai ke objek, dan
kemudahan yang dia dapat lakukan untuk itu. Pada halaman website, misalnya,
button kecil yang jauh dari kursornya akan memakan waktu lebih lama daripada
yang besar di sebelahnya. Ini adalah dasar dari Fitts’ Law.
Sebagian besar navigasi pada halaman website berada jauh dari tempat user
berada — biasanya di sudut atas dan bawah layar. Sebagian alasannya adalah
untuk memastikan navigasi tidak berada di tengah-tengah konten; dan juga jika
navigasi diletakkan ke sudut, user bisa terhindar dari kesalahan perpindahan
posisi dengan kursor atau pointing dengan jari. Jadi posisi di bagian sudut
benar-benar menjadikan navigasi menjadi target yang lebih besar. Memikirkan
jarak dan ukuran target mungkin tampak jelas, tetapi ini menunjukkan
pemahaman tentang economy of motion (penghematan gerak) yang harus Anda
pertimbangkan ketika merancang elemen navigasi, dan hal ini bisa dengan
mudah dilupakan ketika Anda berada di tengah-tengah proses desain. Saat
menempatkan elemen pertimbangkan hal-hal ini:
1. Seberapa jauh elemen dari tempat user berada?
Desain form yang baik, misalnya, mempertimbangkan hal ini — Jika user
bergerak melalui serangkaian field di sisi paling kiri layar, maka penempatan
button di ujung kanan akan membuat user menghabiskan waktu lebih lama
untuk menjangkau dan mengkliknnya, daripada button langsung di bawah field
terakhir. Penempatan yang kurang tempat akan bisa mengganggu dan tidak
efisien.
2. Apakah Anda mengharuskan user untuk beralih metode input —
misalnya, dari keyboard ke mouse?
Pergantian seperti ini tidak efisien, sehingga Anda perlu mempertimbangkan
cara user dapat berinteraksi dengan halaman website atau tugas-tugas
menggunakan kedua metode input. User yang berorientasi pada keyboard akan
lebih senang untuk menekan Enter di keyboard, misalnya, daripada harus
mengisi form lalu berpindah ke mouse untuk mengklik button Submit di
halaman website.
 3. Seberapa mudah untuk melalukan tindakan pada objek?
Target yang lebih besar lebih mudah untuk diarahkan (hover) dan diklik —
contohnya sebuah button sederhana yang cukup besar. Pada nested menu, di
mana user harus mengarahkan kursor untuk membuka opsi lain (submenu) dan
Anda harus memastikan bahwa menu tetap terbuka ketika user memilih satu.
Bisa jadi menu tersebut akan sulit digunakan oleh beberapa user, jika menu
menghilang ketika user secara tidak sengaja memindahkan kursor ketika
mencoba untuk memilih satu opsi.

Selain economy of motion dalam suatu halaman website, pertimbangkan jumlah

klik yang diperlukan user untuk menyelesaikan tugas tertentu. Untuk sesuatu
yang digunakan setiap hari untuk pekerjaan penting, tindakan klik yang banyak
akan membuat pekerjaan tidak efisien dan membuat user frustrasi.

Dalam desain Anda perlu menyeimbangkan discoverability (kemampuan

menemukan) dan access (opsi tersedia dan berdekatan) dengan simplicity dan
economy of elements (penghematan elemen). Setelah user melakukan sebuah
tindakan dalam halaman website, selanjutnya adalah bagian sistem untuk
merespon.
Response
Ketika user melakukan sebuah tindakan, user memiliki ekspektasi terhadap apa
yang akan terjadi selanjutnya (dampak atau hasil dari tindakannya). Dalam
produk dengan User Experience yang luar biasa, harapan user mereka terpenuhi,
atau user sangat terkejut karena mendapatkan sesuatu yang lebih menarik
daripada yang mereka harapkan.
Contoh pada website game untuk anak-anak Fun Brain Junior, terdapat
perubahan warna setiap Anda mengarahkan kursor pada menu di bagian atas.
Juga terdapat obyek animasi yang menggerakkan bola mata setiap perubahan
slider.
Pada kenyataannya, sering kali terdapat perbedaan antara harapan dan
kenyataan, yang kemudian mengarah pada frustrasi atau gangguan terhadap
user. Beberapa penyebab umum adalah:
• Performansi yang buruk, seperti hasil pencarian yang membutuhkan waktu
lama untuk ditampilkan.
Tim developer yang bekerja dengan Anda akan sering mengkomunikasikan
masalah-masalah potensial berkaitan dengan performansi ketika dalam proses
desain. Batasan-batasan ini bisa menjadi design challenge (tantangan desain).
• Penanganan error yang buruk.
Masalah ini bisa terjadi dalam bentuk desain yang tidak cukup untuk mencegah
kesalahan sejak awal. Begitu kesalahan terjadi, penekanan dan kejelasan pesan
error (dan saran tentang cara memperbaikinya, ketika pesan itu ada dalam
kendali user) sangat penting. Contoh penanganan error dapat dilihat pada
gambar di bawah.
• Kurangnya feedback terhadap hasil.
Jika user berhasil dalam tindakan mereka, idealnya mereka mengetahuinya
melalui perubahan desain yang jelas. Misalnya, banyak aplikasi tidak
memberikan respons ketika user mengklik Save, tetapi untuk sesuatu yang
sangat penting, penting untuk menunjukkan bahwa proses “Save” sedang
dijalankan.
Anda dapat membaca guideline untuk Error Message pada dokumentasi
Microsoft.
Respons yang baik memberi ganjaran kepada user dengan hasil positif. Banyak
produk online yang membuat user ketagihan menggunakannya — seperti situs
sosial dan game — karena dirancang untuk memberikan reward kepada user,
yang hasilnya menyalakan pusat kesenangan di otak.
3. PSYCHOLOGY
Penelitian dalam psikologi berfokus pada respons user, dan pada motivasi untuk
kembali ke produk dengan experience yang baik.
Pada bagian sebelumnya telah dibahas prinsip-prinsip yang berfokus pada
estetika dan gerakan — lebih banyak aspek kognitif dan mekanis dari desain.
Namun, aspek desain yang benar-benar menarik adalah upaya memahami
psikologi di balik ketertarikan user dan keterlibatannya dengan produk atau
experience.
Beberapa wawasan yang telah dibawa oleh penelitian psikologi ke bidang
desain, termasuk:
• Efek emosional dari desain yang atraktif.
• Motivasi pribadi atau motivasi dasar, yang harus digunakan orang pada
tantangan baru dalam produk Anda (khususnya, prinsip flow dan gamification).
• Bukti sosial — atau efek yang dimiliki opini dan perilaku kedua, ketiga, dan
ke-164 terhadap keputusan user terkait produk Anda.

The Effect of Attractive Design

Jika Anda sudah bekerja di bidang desain, Anda mungkin pernah mendengar
salah satu frasa yang menakutkan bagi visual designer: “Mari kita serahkan
kepada para desainer sehingga mereka dapat membuatnya cantik.”
Untuk produk konsumen mulai dari lampu gantung hingga ponsel, di mana
model yang serupa sedang dibandingkan berdampingan, daya tarik produk jelas
merupakan salah satu cara untuk membedakan satu dengan yang lain. Tetapi
apakah ini penting untuk produk yang kebermanfaatan secara fungsional seperti
ATM atau website perbankan lebih utama? Bukankah fitur dan usability lebih
penting daripada tampilan dan nuansa dalam kasus tersebut?
Dalam bukunya yang berjudul Emotional Design, Don norman menyatukan
beberapa temuan mengejutkan dalam argumennya untuk mempertimbangkan
sisi emosional desain terlepas dari jenis produk:
1. Orang umumnya menganggap bahwa produk yang atraktif lebih mudah
digunakan. Desain yang menyenangkan secara visual berkontribusi pada
interaksi yang lebih menyenangkan terlepas tugas user diselesaikan lebih cepat
atau efektif.
2. Desain yang atraktif/ menarik membangun kepercayaan.
Dengan memperhatikan detail estetika (misalnya, aligment dari elemen, hirarki
visual yang jelas, dan pertimbangan lain yang dicakup dalam bagian desain
visual yang dibahas sebelumnya) dapat mengkomunikasikan perhatian pada
detail yang sering dirasakan user akan terbawa ke area produk lainnya yang
kurang terlihat. Hal ini memberi dampak positif pada kepercayaan pengguna
terhadap produk.
3. Produk yang menyenangkan menciptakan perasaan positif dan, sebagai
hasilnya, kreativitas meningkat.
Ketika orang merasa stres, mereka cenderung melihat masalah dengan istilah
yang sangat sempit, hitam-putih. Respons emosional ini membuat lebih sulit
bagi mereka untuk menjadi kreatif. Staf Customer Support menghadapi hal ini
setiap saat, karena user yang frustrasi dengan masalah komputer mungkin tidak
dapat melihat solusi yang sudah tampak jelas. Di sisi lain, produk yang
menyenangkan membuat orang rileks dan mendorong pendekatan yang lebih
mengeksplorasi masalah.
Flow & Game Design
Flow
Setelah melakukan penelitian terhadap aspek positif dari aktivitas manusia
(misalnya saat bahagia dan bersukacita), Mihaly Csikszentmihalyi (diucapkan:
me-high chick-sent-me-high-ee), seorang psikolog, mengusulkan konsep Flow.
Flow adalah keadaan menyatu secara mendalam (immerse), yang dirasakan
orang ketika terlibat dalam suatu kegiatan yang memberikan tantangan yang
sesuai dengan tingkat keterampilan yang mereka rasakan. Ketika orang
memasuki kondisi Flow, waktu berlalu secara berbeda. Contohnya: Untuk atlet,
waktu dapat melambat, detik berlalu seperti menit, karena setiap gerakan tangan
atau kaki harus menjadi fokus perhatian. Bagi para seniman, berjam-jam dapat
berlalu dengan cepat, misalnya saat mereka melukis detail pada wajah.
Beberapa kondisi yang berkontribusi terhadap kondisi Flow adalah:
• Penyajian suatu aktivitas yang memiliki serangkaian tujuan yang jelas.
Pengetahuan tentang apa yang perlu dicapai, dan aturan dasar yang berlaku
dalam sebuah aktivitas, menyediakan struktur sehingga peserta dapat fokus pada
aktivitas itu sendiri.
• Keseimbangan antara tantangan yang disajikan dan keterampilan yang
dirasakan peserta. Pada kondisi ini, sangat penting untuk memiliki pemahaman
tentang target user yang menggunakan produk Anda, dan kemungkinan keahlian
mereka (ingat kembali proses yang dilakukan pada User Research dan Persona).
• Feedback yang jelas mengenai performansi peserta saat mereka melakukan
sebuah aktivitas. Kondisi ini memungkinkan peserta untuk mencoba sesuatu,
melihat hasilnya, dan mencoba lagi, mempelajari sesuatu yang baru di setiap
langkah dan membangun keterampilan mereka.
Game Design
Game design memperhitungkan Flow, karena setiap gamer yang telah
kehilangan dua hari untuk bermain game dapat membuktikannya. Game yang
sukses menyediakan:
• Aturan interaksi yang terstruktur, jelas, dan konsisten.
• Serangkaian tujuan yang dirumuskan dan diurutkan (sequence) dengan baik
(misalnya, pencarian atau level dalam ruang lingkup permainan yang lebih
luas).
• Permainan game imersif, yang melibatkan berbagai indera (misalnya,
menggunakan elemen visual, suara, dan sentuhan).
• Feedback tentang kinerja, dengan kemampuan untuk mencoba tantangan
beberapa kali untuk meningkatkan keterampilan.
• Interaksi sosial, baik dengan sesama pemain game atau melalui komunitas
yang berbagi kiat dan hasil.

Social Proof
Social proof mencakup prinsip yang menyampaikan cara user melihat pada
orang lain untuk membuat keputusan, dan bagaimana desain digital dapat
mendukung keinginan itu.
Manusia adalah makhluk sosial. Kita tidak hanya memandang orang lain
sebagai teman; kita mengandalkan satu sama lain, bahkan orang asing, untuk
membantu membuat keputusan dalam menghadapi ketidakpastian.
Hal ini tidak hanya terjadi dalam kehidupan nyata. Dunia online tidak ada
bedanya. Manusia dihadapkan dengan sejumlah besar pilihan dan waktu atau
uang yang terbatas, kekuatan dari social proof (bukti sosial) — dukungan
populer atas pilihan atau tindakan tertentu — dapat membantu orang memilih
investasi yang lebih baik. Ini dapat membantu pengguna memutuskanproduk
mana yang akan dibeli.
Membuat Prinsip Desain Sendiri
Berikut adalah beberapa tips tentang cara menciptakan prinsip desain Anda
sendiri:
1. Mendasarkan prinsip-prinsip desain Anda pada Research yang dilakukan
dengan target user Anda. Hal ini memastikan prinsip-prinsip itu relevan,
konkret, dan dapat dipertahankan ketika Anda sedang dalam perdebatan tentang
keputusan desain.
2. Buat pernyataan utama tajam dan mudah diingat. Sejumlah kecil, sekitar 8-
10 pernyataan pendek dan menarik akan membantu tim merujuk kepada
pernyataan ini saat menghadap whiteboard.
3. Tambahkan sebuah prinsip hanya jika membantu memfokuskan tim dan
membuat perbedaan produk. Prinsip yang samar atau dapat diterapkan secara
luas tidak membantu Anda mengatakan “tidak” pada fitur atau membuat desain
yang unik. Contoh pernyataan kurang tepat: “Buat produk yang mudah
digunakan”. Prinsip desain harus mengambil sikap tertentu, seperti mengatakan
“pilih relevansi daripada presisi” dapat membantu tim fokus dalam
menyediakan sejumlah kecil pilihan yang relevan bagi user daripada setiap
kemungkinan kombinasi. Pernyataan ini juga dapat membantu tim melakukan
brainstorming untuk menyenangkan user dengan melampaui harapan yang
ditetapkan perusahaan Anda atau pesaing Anda.
4. Perbaiki prinsip Anda secara kolaboratif dengan seluruh tim dalam proyek.
Setiap orang dalam tim harus terbiasa dengan prinsip-prinsip ini dan memiliki
rasa kepemilikan dalam menggunakannya sebagai fokus selama mendefinisikan
dan memprioritaskan fitur.