Dijamin Setelah Kamu Menguasai Pola UI Ini, Desain Kamu Akan Terlihat Lebih Cerdas

Setiap diskusi tentang desain UI akan selalu kembali ke pola UI.

Seperti yang dijelaskan dalam Desain Web e-book gratis untuk Mata Manusia , pola UI berasal sebagai solusi untuk masalah kegunaan umum, dan efektivitasnya berkorelasi langsung dengan popularitas dan adopsi mereka. Itu berarti semakin banyak pola tertentu digunakan, semakin kuat itu menjadi … yang berarti semakin banyak situs akan mulai menggunakannya.

 Sumber: Kit UI Web

Pada bagian ini, kita akan menyelami anatomi pola UI dan bagaimana memilihnya sebagai pintasan untuk memenuhi penjelasan pengguna.

Keterjangkauan & Penanda: Yayasan Pola UI

Keterampilan adalah apa yang dapat dilakukan suatu produk. Signifiers adalah isyarat visual yang memberi tahu pengguna apa yang dapat dilakukannya. Pada tingkat atom, semua pola UI terdiri dari penanda yang mengisyaratkan kemampuan antarmuka.

Sebagai contoh sederhana, katakanlah sebuah halaman dapat disimpan ke favorit di Dribbble.

Halaman memberi favorit. Namun, jika tidak ada penanda, pengguna tidak akan tahu. Sekarang, jika halaman tersebut memiliki penanda – dalam hal ini, ikon hati – maka pengguna secara visual memahami halaman tersebut dapat disukai. Oleh karena itu, keterjangkauan yang dirasakan adalah apa yang ditafsirkan pengguna berdasarkan penanda. Tentu saja, persepsi keterjangkauan harus selalu disinkronkan dengan keterjangkauan yang sebenarnya.

 Sumber: Dribbble.

Proses untuk penanda dan biaya biasanya berjalan dengan cara yang sama. Pengguna melihat penanda (ikon hati) dan mendapat kesan apa yang dapat dilakukan situs, persepsi yang dirasakan (“Saya dapat pekerjaan favorit orang-orang di Dribbble”).

Digunakan dengan baik, penanda menghemat waktu dalam menjelaskan fungsi dengan bermain berdasarkan pengetahuan pengguna yang sudah ada sebelumnya. Mereka memberikan situs perasaan intuitif dan akrab, seolah-olah pengguna telah menggunakannya sebelumnya – karena dengan cara yang mereka miliki, atau setidaknya beberapa di antaranya.

Manfaat penting tentang penanda yang ingin kami jelaskan di sini adalah < penanda yang digunakan secara konsisten dari situs dan aplikasi lain akan mengurangi penjelasan Anda sendiri. Menggunakan penanda yang konsisten dengan situs lain akan merampingkan desain Anda sendiri.

Untuk mempelajari lebih lanjut tentang kategori keterjangkauan dan penanda, kami merekomendasikan artikel ini pada Majalah Smashing sebagai salah satu bagian paling komprehensif yang pernah kita baca.

Kategori Pola UI yang berbeda

Dengan ribuan pola untuk dipilih, memilih yang tepat bisa menjadi luar biasa. Langkah pertama yang baik adalah mengelompokkan mereka ke dalam kelompok yang berbeda tergantung pada fungsinya. Pola semua memiliki efek berbeda pada suatu desain, jadi membaginya menjadi beberapa kelompok (berdasarkan klasifikasi yang digunakan oleh Pola UI , salah satu sumber daya terbaik di web) memberi tahu Anda mana yang dapat membantu, dan mana yang dapat Anda abaikan.

  • Interaksi Data Jenis ini membantu dalam memberi dan menerima data, dan memungkinkan interaksi yang lebih dalam. Ini mencakup tidak hanya bagaimana pengguna mengirim data ke situs, tetapi juga bagaimana situs merespons melalui umpan balik.
  • Penyederhanaan Pola-pola ini menyediakan jalan pintas di sekitar masalah umum, untuk mengurangi gesekan dan beban kognitif. Intinya, mereka merampingkan seluruh UX.
  • Navigasi Karena sebuah situs tidak baik jika semua orang tersesat, pola-pola ini membantu pengguna mengarahkan diri mereka sendiri dan menemukan tujuan mereka dengan mudah.
  • Insentif Kadang-kadang pengguna Anda perlu sedikit dorongan untuk berinteraksi dengan fitur tertentu. Pola-pola ini mendorong pengguna Anda untuk melakukan tindakan tertentu (atau setidaknya tidak menyerah), kadang-kadang dengan sistem hadiah kecil untuk menjelajahi lingkaran kebiasaan otak .
  • Hierarki Pola ini membentuk hierarki visual, sehingga pengguna Anda memahami secara logis, elemen mana yang lebih penting daripada yang lain. Misalnya, apakah Anda membagi situs Anda atau meletakkan semuanya pada bidang yang sama dengan tata letak kartu?
  • Media Sosial Pola-pola ini tidak hanya memfasilitasi pengguna berbagi konten dari situs Anda, tetapi juga memberikan rasa percaya.

Keenam opsi ini hanyalah beberapa dari banyak cara untuk mengatur pola. Di bawah ini, kami akan menjelaskan sistem klasifikasi yang berlaku untuk masing-masing kategori ini.

Berbagai Tingkat Pola UI

Anders Toxboe, pendiri UI Patterns.com yang menyeluruh , menjelaskan bahwa pola dapat digunakan pada level yang berbeda, dengan cara yang berbeda. Memperluas di luar klasifikasi berdasarkan apa yang mereka lakukan , pola dapat diklasifikasikan lebih lanjut berdasarkan bagaimana mereka digunakan . Sebagai contoh, beberapa pola fleksibel dan berubah tergantung pada jenis situs, sementara yang lain stagnan di mana pun mereka muncul.

Kami akan menjelaskan pola-pola ini berdasarkan Toxboe’s UI Pattern Pyramid.

1. Implementasi

Pola implementasi berkaitan murni dengan konsistensi di seluruh halaman Anda.

Misalnya, walaupun Anda mungkin sedikit kreatif dengan cara Anda merancang korsel foto di situs Anda, pola implementasi memastikan bahwa perawatan konsisten di setiap halaman.

 Sumber: OWL Carousel

Perlu dicatat bahwa ada beberapa ruang untuk penyesuaian – lokasi titik-titik bervariasi, kadang-kadang di luar gambar, kadang-kadang ditumpangkan di atasnya.

Seperti yang kami jelaskan dalam Konsistensi eBuku gratis dalam Desain UI , pertama-tama Anda ingin merancang pola UI dengan cara yang terasa akrab bagi pengguna berdasarkan pengetahuan yang ada (konsistensi eksternal). Ketika tiba saatnya untuk membangun pola-pola itu di situs Anda, pola implementasi kemudian membantu memastikan konsistensi internal.

 Sumber: Paul Robert Lloyd

Sulit untuk melacak bagaimana menyeimbangkan personalisasi dengan konsistensi, jadi kami sarankan untuk membuat panduan gaya front-end. Ini adalah panduan referensi cepat global sehingga semua anggota tim mengetahui pedoman untuk setiap pola. Dalam panduan gaya untuk situs webnya , Paul Robert Lloyd (atas) mencantumkan semua pilihan pola yang unik untuk situsnya. Untuk lebih banyak contoh panduan gaya, lihat panduan saku gratis . Ikhtisar Panduan Gaya untuk Desainer Modern.

2. Aliran

Jika pola implementasi bersifat taktis, maka pola aliran bersifat strategis.

Seperti namanya, pola ini membantu pengguna mengalir melalui situs Anda. Misalnya, menu hamburger sidebar dan kontroversial adalah pola aliran – keduanya merupakan cara yang berbeda untuk membantu pengguna menavigasi melalui situs.

Selain memilih antara pola aliran yang berbeda, Anda juga akan menemukan berbagai pendekatan untuk pola yang sama.

Mari kita ambil, misalnya, ikon hamburger yang kontroversial . Suka atau benci, faktanya itu adalah pola yang populer saat ini. Ini juga cukup fleksibel. Mari kita bandingkan berbagai perawatan di situs pemenang penghargaan Vangarde Music dan ThinkBlink.

Setelah Anda mengklik menu di kedua situs, perbedaannya cukup jelas.

Sumber: Vangarde Music 
Sumber: ThinkBlink

Seperti sebelumnya, Vangarde memilih pendekatan yang lebih gaya dan mencolok, membuka menu gulir samping yang tidak konvensional dengan fungsi ambil-dan-gulir, dan menampilkan lebih banyak bakat artistiknya, dengan biaya menghadirkan semua opsi menu sekaligus. ThinkBlink membuatnya lebih sederhana, membuka menu standar, lima item label hanya teks, diatur dengan latar belakang monokrom. Navigasi lebih tradisional di ThinkBlink (yang masuk akal untuk audiens klien potensial), dan lebih tidak konvensional untuk Vangarde (yang mungkin sesuai dengan audiens artistik mereka).

Namun, kedua situs tetap memiliki hal yang sama. Tampilan ikon – penanda – hampir identik, dan sekali diklik ikon berubah menjadi X untuk membatalkan di kedua situs. Inti dari pola aliran adalah sama, tetapi situs dapat menyesuaikan tampilan atau interaktivitas yang sesuai dengan penggunanya.

3. Konteks

Terakhir adalah pola yang hanya berlaku untuk jenis situs tertentu. Ini hanya sesuai untuk situasi tertentu, dan sesuai dengan margin sempit di bagian atas piramida. Lebih lanjut, walaupun aplikasi mereka sangat tepat, fungsinya cenderung luas – pikirkan pola untuk checkout langkah demi langkah, yang hanya berlaku untuk situs e-commerce, tetapi terbuka untuk berbagai variasi.

Untuk alasan ini, pola konteks sering dipilih sejak awal dalam proses desain karena jelas bahwa situs e-commerce memerlukan pola checkout dan situs portofolio memerlukan pola galeri. Sumber: Amazon

Amazon tidak menemukan proses checkout selangkah demi selangkah, tetapi mereka memanfaatkannya karena praktis. Pola ini memecah proses checkout yang rumit menjadi langkah-langkah individual, sehingga tidak membanjiri pembelanja dan menakut-nakuti mereka pada saat penting. Sebagai pola, checkout langkah demi langkah sering digunakan … namun hanya dengan situs e-niaga. Situs seperti Facebook atau Google tidak menggunakan pola semacam itu.

4. Menyatukan Semuanya: Membangun Pola Piramida

Piramida Pola Toxboe bukan hanya pilihan kreatif. Secara realistis mencerminkan proses pemilihan pola.

Anda mulai dari atas, memilih hanya beberapa pola kontekstual tergantung pada situs Anda. Ini sering membentuk tata letak dan / atau arsitektur informasi.

Misalnya, jika Anda sedang membangun situs portofolio, Anda tahu Anda akan membutuhkan halaman untuk sampel pekerjaan Anda, yang akan memengaruhi navigasi seluruh situs. Itu sebabnya ini dipilih sejak awal, umumnya dalam fase wireframing (Anda dapat mempelajari lebih lanjut tentang membuat keputusan desain struktural dalam Panduan gratis kami untuk Wireframing ).

 Sumber: Dunckelfeld
 Sumber: 25AH

Anda kemudian pindah ke fase tengah, di mana Anda memilih lebih banyak pola yang Anda personalisasi untuk membantu pengguna bergerak melalui situs Anda. Misalnya, jika Anda membangun situs portofolio, apakah Anda memilih pola desain berbasis kartu atau slider animasi? Sebagian besar pekerjaan desain biasanya berfokus pada wireframing, prototyping, dan kemudian menguji keputusan yang dibuat selama tahap tengah desain UI ini.

Terakhir adalah pola implementasi. Ini adalah yang paling terperinci, tetapi juga yang paling mudah untuk digabungkan, karena ada sedikit ruang untuk variasi. Jika Anda menentukan bahwa setiap kartu di situs portofolio Anda berukuran 400×400 piksel, maka Anda harus membuat setiap kartu dengan spesifikasi itu. Anda dapat menentukan pola-pola ini selama tahap desain selanjutnya, apakah sebagai hasil dari wawasan pengujian kegunaan, atau saat Anda mulai meningkatkan kesetiaan.

Proses Pemilihan Pola UI

Sekarang setelah Anda mengetahui perairan, saatnya untuk menyelam. Keefektifan suatu pola tergantung pada lokasi – pola yang sempurna untuk satu orang mungkin lebih berbahaya daripada baik pada yang lain.

 Sumber: UXPin

Metode pemilihan pola pilihan kami melibatkan empat langkah berbeda untuk membantu Anda mengidentifikasi pola mana yang paling berhasil, dan bagaimana menerapkannya:

  • 1. Isolasikan masalahnya.
  • 2. Periksa pola mana yang digunakan situs lain untuk menyelesaikan masalah.
  • 3. Analisis bagaimana situs-situs ini menggunakan polanya.
  • 4. Sesuaikan pola dengan cara yang tepat untuk Anda.

Mari kita jelaskan bagaimana proses ini bekerja dengan sebuah contoh: pengujian situs telah mengungkapkan bahwa pengguna menemukan antarmuka Anda terlalu berantakan.

1. Isolasikan masalahnya.

Anda melihat antarmuka Anda dengan kritis dan menyadari bahwa, ya, itu terlalu berantakan. Setelah menganalisis umpan balik pengguna kualitatif dan kuantitatif, Anda menyadari bahwa kontrol adalah masalahnya. Ada terlalu banyak opsi yang tersedia, tetapi pada saat yang sama, pengguna menghargai opsi ini dan menggunakannya masing-masing pada waktu yang berbeda (sehingga tidak ada yang dapat diperluas). Masalah Anda jelas: bagaimana Anda menghemat ruang layar tanpa mengorbankan opsi pengguna?

2. Periksa bagaimana situs lain menyelesaikan masalah.

Anda mengunjungi situs yang mirip dengan milik Anda, dan melihat bagaimana mereka memecahkan masalah. Anda pergi ke situs-situs seperti Pinterest dan Quora.

Di Pinterest, Anda melihat mereka menggunakan pola Kontrol yang Dapat Ditemukan. Dengan mengarahkan mouse ke kartu yang relevan, kontrol muncul, tetapi ketika Anda tidak berinteraksi dengan kartu, kontrol menghilang. Ini memungkinkan pengguna untuk sebagian besar fokus pada konten, dan hanya melihat kontrol ketika mereka dibutuhkan.

 Sumber: Quora

Quora mengambil pendekatan yang serupa, tetapi dengan beberapa pengecualian. Alih-alih melayang di atas mobil yang relevan, pengguna harus mengklik ikon untuk membuka menu yang bisa dilipat. Ini menyajikan opsi interaksi mereka, dengan tautan kata alih-alih ikon Pinterest.

3. Analisis bagaimana situs-situs ini menggunakan polanya.

Setelah memperhatikan masing-masing, Anda menyadari perbedaan besar. Pertama, Pinterest memiliki kontrol muncul dengan melayang, sementara Quora melibatkan klik. Kedua, kontrol Pinterest adalah ikon, sedangkan kontrol Quora adalah kata-kata.

4. Kustomisasi pola untuk situs Anda.

Anda memutuskan untuk mencampur dan mencocokkan elemen untuk mendapatkan yang terbaik dari kedua dunia. Karena mereka hanya beberapa kartu yang relevan per layar, Anda memutuskan ikon yang dapat diklik untuk mengungkapkan lebih banyak opsi, yang bertentangan dengan kontrol hover. Namun, opsi Anda sederhana dan menyenangkan, sehingga Anda memutuskan untuk mewakilinya dengan ikon, bukan label.

Proses ini memberi Anda pola yang dikenal dan dikenali yang tidak memerlukan penjelasan ketika pengguna melihatnya, tetapi masih cukup personal sehingga terasa unik bagi Anda.

Kesimpulan

Dengan memanfaatkan pengetahuan yang dipahami secara umum, pola menghemat waktu pengguna Anda dalam mempelajari sistem antarmuka baru, sembari juga memecahkan sejumlah masalah untuk Anda di akhir perancangan.

Faktanya, pola hanyalah solusi desain kreatif yang sangat efektif, semakin banyak situs mulai menggunakannya sampai menjadi hal biasa. Itulah yang membuat pola menjadi alat desain yang berharga … selama Anda cukup tahu tentang mereka untuk memilih yang tepat untuk pekerjaan yang tepat.

Untuk mempelajari lebih lanjut tentang cara membuat kesan pertama terkuat dengan pengguna, unduh e-book Web Design gratis untuk Mata Manusia . Ditulis untuk aplikasi dunia nyata, buku ini mengajarkan melalui analisis contoh-contoh visual dari perusahaan seperti Squarespace, Jukely, Wunderlist, dan lainnya.

sumber: awwwards.com

Latest articles

12.6k Followers
Follow

Related articles