Cyber Monday Sale 40% off unlimited courses & creative assets! 40% off unlimited assets! Save Now
Advertisement
  1. Web Design
  2. Inspiration

Discoverability dan Feedback dalam Desain Web

by
Read Time:5 minsLanguages:
This post is part of a series called Weeks of Web Design Inspiration.
Web Design Inspiration: Scrollin’, Scrollin’, Scrollin’
Best Photography Portfolio Themes for WordPress

Indonesian (Bahasa Indonesia) translation by Fitryan Wisnu Pratama (you can also view the original English article)

Baru-baru ini Vox, bersama dengan 99% Invisible, memproduksi film pendek yang brilian tentang pintu di lantai sepuluh kantor Vox Media. Selain banyak pintu lain, juga menampilkan Don Norman: ikon desain dan penulis The Design of Everyday Things. Tujuan film ini adalah untuk menyoroti kegunaan produk dan sistem, meringkas menjadi dua pedoman dasar desain yang berpusat pada manusia: discoverability dan feedback.

Discoverability

"Apa yang harus saya lakukan?" Ketika Anda menemukan objek, produk atau sistem dari beberapa jenis, Anda harus memahami bagaimana cara berinteraksi dengan hal itu. Kurangnya discoverability membuat Anda tidak tahu bagaimana cara menggunakan sesuatu.

Feedback

"Apa yang baru saja terjadi?" Setelah Anda melakukan tindakan dengan objek atau sistem Anda, beberapa elemen feedback sebaiknya memberitahu Anda apa yang terjadi dan mengapa. Tanpa feedback Anda tertinggal dalam kegelapan.

Mari kita lihat beberapa contoh antarmuka dan produk di web yang menunjukkan penggunaan baik mengenai ide-ide ini.

Kita akan mulai dengan discoverability; setiap website, apakah itu untuk e-commerce, portofolio, pemasaran, produk atau layanan, atau apa pun, akan memerlukan pengguna untuk memahami apa yang diharapkan dari mereka. Homepage CodePen menggunakan kata-kata menarik, diikuti oleh proposisi nilai yang jelas, sebelum memusatkan mata ke bawah dan menawarkan pengguna dua tindakan yang jelas.

Ada banyak diskusi di web mengenai efektivitas tombol "hantu" (dimana tombol tak memiliki fill, hanya border), karena tombol tersebut tidak terlihat seperti layaknya tombol. Ini dapat menghambat discoverability, tapi aku akan membiarkan Anda membuat pikiran Anda sendiri.

httpsenduolingocomhttpsenduolingocomhttpsenduolingocom
duolingo.com

Duolingo, platform belajar bahasa favorit semua orang (benar?) membuat situs mereka bahkan lebih jelas kepada pengguna baru. Ada satu, tombol yang sangat jelas, yang sangat clickable di tengah layar. Dan jika saya menekannya saya tahu pasti untuk apa saya melakukannya.

Dua contoh pertama ini disebut "Calls to Action" (CTAs). Sebagai pemilik produk kita ingin pengguna merasa didorong untuk mengambil tindakan, tetapi membuat tombol besar, merah dan mengkilap tidaklah cukup. Selain jelas secara visual, CTA harus membantu pengguna mengerti untuk apa mereka mengambil tindakan.

httpwwwspotify-valentinescomhttpwwwspotify-valentinescomhttpwwwspotify-valentinescom
www.spotify-valentines.com

Promosi Spotify baru-baru ini, dimana Anda dapat mengirimkan catatan cinta melalui cara sebuah daftar putar, (seperti biasa) secara estetika mengagumkan. Tapi jalan menuju tindakan mungkin telah jelas. Sudah jelas hasil yang kita inginkan, tetapi instruksi (yang bertindak sebagai CTA) tidak benar-benar melakukan apa pun. Sebaliknya kita diharapkan untuk scroll ke bawah, yang mungkin untuk beberapa pengguna merasa seperti mereka sedang menjauh dari tindakan yang mereka ingin ambil.

Sebaliknya, berikut adalah contoh dari tindakan yang sangat discoverable: tombol play humble.

httpvalioconcomhttpvalioconcomhttpvalioconcom
http://valiocon.com/

Dengan whitespace yang luas, ikon melingkar ini menarik pengguna untuk mengambil tindakan. Ikon putar dikenal secara universal, dan bentuknya sangat menyarankan arah; langkah berikutnya. Tekan dan video akan berputar.

buddyappbuddyappbuddyapp

BuddyApp, sebuah tema WordPress untuk komunitas platform BuddyPress, memberikan kita dua pilihan yang tersedia, tapi dengan jelas menunjukkan kita mana jalur pendaftaran yang disukai.

Aksesibilitas

Semua discoverability yang telah kita bahas sejauh ini mengasumsikan satu hal yang sangat penting: bahwa kita tidak memiliki masalah aksesibilitas. Jika antarmuka membuatnya sulit untuk menemukan apa yang diharapkan dari kita dalam kondisi sempurna, bayangkan bagaimana itu mempengaruhi mereka yang memiliki kekurangan visual, fisik, atau kognitif?

A11y

Saya sangat merekomendasikan Anda melihat rangkaian pelajaran Beginner's Guide to Web Accessibility milik John Hartley. Dalam 2,5 jam itu benar-benar panduan komprehensif mengenai  apa artinya aksesibilitas untuk web dan bagaimana Anda dapat mengambilnya jadi bagian dari alur kerja Anda.

Github sekarang ini memungkinkan pengguna untuk push file-file ke repository secara langsung melalui antarmuka web. Dalam hal discoverability perintah ini cukup jelas. Bahkan ada tindakan sekunder, disajikan dengan jelas, kita harus membutuhkannya.

Setelah saya tarik file saya ke area yang disediakan, saya kemudian mendapatkan keadaan perubahan sebagai feedback bahwa tindakan telah diakui: garis putus-putus dan instruksi lebih lanjut.

Akhirnya, setelah men-drop file saya, saya mendapatkan lebih banyak feedback dalam bentuk laporan kemajuan memberi tahu saya bahwa file saya sedang berjalan, siap untuk di-commit.

Garis putus-putus telah menjadi pola konvensional untuk feedback, memberitahu pengguna untuk men-drop apa pun yan mereka seret. Invision adalah contoh lain, meskipun discoverability dari tindakan tersebut tidak cukup jelas, bukan mengandalkan kemampuan tertentu dari pengguna.

Dan Basecamp melakukan sesuatu yang serupa, meskipun bukan garis putus-putus. Akan tetapi, good feedback.

Animasi

Gerakan adalah cara sempurna untuk memberikan feedback; kita benar-benar terbiasa melihat aksi dan reaksi di dunia nyata, jadi mengapa tidak juga di web? Untuk sekian lama desainer sekarang telah menggunakan transisi halus pada keadaan hover (misalnya) karena mampu membantu pengguna mengerti hubungan antara sebelum dan sesudah. Saat ini, dengan animasi dan SVG, kita dapat melakukannya. Apakah Anda baru-baru ini menyukai sesuatu di Twitter.

Letupan kecil itu memberi tahu kita, tanpa keraguan, bahwa tindakan kita menyebabkan sesuatu terjadi.

ModeModeMode

Pada contoh ini Mode, tema Wordpress ecommerce menunjukkan tipikal kebiasaan Woocommerce. Pada saat menambahkan produk ke keranjang, thumbnail transisi jalan dari gambar utama ke keranjang di bagian atas kanan dari layar. Ini adalah feedback visual yang sangat baik, memberitahu saya bahwa saya sudah memasukkan sesuatu ke keranjang, dan menyarankan kemana selanjutnya untuk menyelesaikan pembelian.

fcstorefcstorefcstore

FcStore; tema WooCommerce lainnya, mengambil pendekatan yang sedikit literal, justru menawarkan saya tanda centang sederhana untuk menunjukkan bahwa saya telah berhasil menambahkan produk saya ke keranjang.

httpmakethisyearcomhttpmakethisyearcomhttpmakethisyearcom
makethisyear.com

Form adalah contoh klasik dari situasi dimana pengguna benar-benar membutuhkan feedback. Apakah formnya di-submit dengan benar? Apakah saya mengacaukan sesuatu? Di sini, Make This Year menggunakan kata-kata personal dan emoji high-five untuk efek yang bagus. Jelas saya mendaftar untuk newsletter mereka.

Telah Menjadi Emosional

Dengan berfokus pada discoverability dan feedback, Anda akan memastikan bahwa pengguna terhubung dengan website Anda. Pelajari ciri perilaku mereka, bantu mereka memahami dan memprediksi apa yang terjadi, dan pada akhirnya Anda akan membuat mereka merasa baik tentang tentang produk Anda. Sebagai dua referensi terakhir untuk inspirasi, Anda harus membaca buku Aarron Walter Designing for Emotion, dan Don Norman-nya TED berbicara 3 cara desain yang baik membuat Anda bahagia.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.