Design Principles

Setelah melalukan User Research dan menentukan kebutuhan-kebutuhan user dan kebutuhan bisnis, proses berlanjut ke tahap desain. Tahap desain tidak hanya menyangkut aspek visual saja, tetapi juga aspek interaksi dan psikologi yang mendukung hasil desain menjadi baik.

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:

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.
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.
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.

Catatan
Batasi jumlah item yang dominan pada sebuah halaman website agar memiliki hirarki elemen yang lebih jelas, dan untuk membuat tindakan utama Anda menjadi menonjol.

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).

Baca contoh studi kasus Squint Test oleh Erik D. Kennedy pada:
UI Tutorial: Scheduling App Redesign (in under 10 Minutes)

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.

Website Kompas.com orientasi **Portrait**

Website Kompas.com orientasi **Landscape**

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 melaggar 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.

Catatan
Fitts’ Law memprediksi bahwa waktu yang diperlukan untuk bergerak cepat ke area target adalah fungsi jarak ke target dan ukuran target. Ini didasarkan pada model matematika yang dibuat oleh psikolog Paul M. Fitts pada tahun 1954.

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:

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.
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.
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:

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.
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.
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.

Apakah temuan di atas berarti bahwa desain estetika lebih penting daripada usability? Jawabannya, keduanya bekerja bahu-membahu untuk menciptakan User Experience yang positif dan menarik. Produk dengan tampilan cantik tetapi tidak berfungsi dengan baik bisa jadi dibeli orang, tetapi dengan cepat berakhir dibuang (secara fisik atau digital). Produk utilitarian (kebergunaan secara fungsional lebih utama) yang memenuhi kebutuhan yang sebenarnya, akan digunakan, sampai tersedia produk yang lebih menarik dan sama-sama bermanfaat. Baik estetika dan usability bekerja bersama untuk menciptakan sesuatu yang dapat dinikmati dan digunakan kembali oleh user.

Karena orang menganggap desain yang menarik lebih mudah digunakan, pastikan Anda memperhitungkan anggapan tersebut saat melakukan Usability Testing. Beberapa hal yang perlu diperhatikan adalah:

Orang-orang cenderung mengkritik desain yang menarik dan sudah memiliki bentuk yang lebih lengkap daripada mengkritik sketsa, yang terasa masih dalam bentuk draft.
Orang-orang juga akan lebih cenderung menilai desain yang sangat menarik bahkan setelah menghadapi beberapa masalah usability. Jika Anda harus menguji desain visual yang lengkap, pertimbangkan menguji dua variasi atau lebih sehingga user akan membandingkan desain satu sama lain, yang membantu mengurangi bias terhadap feedback positif.
Unsur fun (kesenangan), sama seperti daya tarik visual, sering diremehkan dalam mendesain hal-hal fungsional.

Bagian berikutnya akan membahas beberapa faktor yang membuat interaksi dalam suatu produk menarik dan bermakna.

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.

Jesse Schell, penulis The Art of Game Design, mendefinisikan game sebagai “kegiatan pemecahan masalah dengan pendekatan yang menyenangkan.” Konsep-konsep desain game diterapkan pada situasi-situasi baru untuk membangun motivasi intrinsik peserta untuk menyelesaikan suatu kegiatan (motivasi intrinsik adalah hal-hal yang dirasakan individu yang lebih berdasarkan pada dorongan internal daripada reward atau penalti eksternal).

Gamification (gamifikasi) adalah proses menggunakan konsep desain game pada aktivitas bukan game. Gamifikasi juga dapat digunakan untuk mendorong perubahan perilaku yang menambah kebaikan pribadi atau sosial.

“Fun is the act of mastering a problem mentally.”
Raph Koster, A Theory of Fun

Dengan menambahkan elemen kompetitif, seperti point dan badge, tidak serta merta untuk membuat sebuah produk menjadi pengalaman mendalam seperti game. Saat mencoba memotivasi dan melibatkan user dengan cara yang menyenangkan, pastikan untuk fokus pada apa kebutuhan mereka, dan gaya permainan apa yang paling tepat. jika mendesain pengalaman seperti gim untuk nirlaba, misalnya, permainan gim kompetitif (mengadu domba pemain) mungkin tidak seefektif gim bermain kolaboratif (di mana pemain bekerja sama untuk mencapai tujuan).

Saat mendesain experience yang membutuhkan pembelajaran dan keterampilan memecahkan masalah, pertimbangkan aspek-aspek motivasi bermain ini. Produk Anda harus memberikan sasaran yang jelas, kegiatan yang menyenangkan, dan feedback yang membangun untuk menjadikan experience menjadi menyenangkan dan efektif.

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.

Review pembeli terhadap satu produk di website belanja online dapat digunakan oleh pembeli lain dalam membuat kepetusan untuk membeli. Produk dengan rating yang tinggi memiliki tingkat social proof yang lebih besar, yang menjadi alasan kuat untuk memilih produk tesebut. Hasil review juga sering diperkuat dengan penambahan foto produk yang dibeli, yang dapat membangun kepercayaan dan mempengaruhi pilihan. Selain review di website sendiri, terdapat juga pihak ketiga sebagai kontributor pemberi review yang sering dijadikan rujukan oleh user. Hasil review dipublikasikan pada website pihak ketiga. Salah satu contohnya adalah Tripadvisor, platform yang memberi review terkait perjalanan dan pariwisata.

Membuat Prinsip Desain Sendiri

Berikut adalah beberapa tips tentang cara menciptakan prinsip desain Anda sendiri:

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.
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.
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.
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.

REFERENSI

Unger, R, Chandler, C, 2012. A Project Guide to UX Design: For User Experience Designers in the Field or in the Making (2nd Edition). Berkeley: New Riders.

Feature Image: Photo by Hal Gatewood on Unsplash