Hierarki visual di UX: bagaimana untuk mengarahkan perhatian pengguna

Kami mula-mula melihat gambar itu, dan kemudian kami membaca teks itu (terima kasih, topi), jadi penyelesaian visual laman web menjadi tegas untuk membawa pengguna ke matlamat: ia dapat mempermudah dan menghalang laluan ini. Mari kita fikirkan bagaimana untuk memimpin pelawat laman web ke keputusan yang tepat dengan menganjurkan ruang tapak - kedua-duanya di desktop dan pada peranti mudah alih.

Pemenang Hadiah Nobel Daniel Kahneman dalam bukunya "Berpikir perlahan-lahan, putuskan dengan cepat" menerangkan dua sistem pemikiran, dalam kerangka otak kita membuat keputusan. Sistem bersyarat "System 1" beroperasi pada imej, bertanggungjawab untuk membuat keputusan cepat dan bertindak balas dengan baik kepada maklumat visual. "Sistem 2" (selepas ini kedua-dua nama tanpa tanda petik) terlibat dalam aktiviti yang lebih serius dan bertanggungjawab untuk memahami makna dalam teks atau mengira dalam fikiran.

Kebanyakan masa, System 2 beroperasi dalam mod "penggunaan tenaga berkurang" dan tidak membuat keputusan sendiri dengan aktif. Selalunya, kesimpulan yang sedia untuknya diambil oleh System 1, yang tamak untuk "visualisme".

Tugas pereka UX adalah untuk mendorong Sistem 1 kepada penyelesaian yang betul.

Organisasi laman web visual

Anda tidak mempunyai banyak masa untuk menarik minat kandungan pengguna laman web ini. Apabila pengguna melawat mana-mana laman web, dia secara sedar mencari jawaban untuk tiga soalan:

  • Apa yang berlaku di sini?
  • Bagaimana ini berguna untuk saya?
  • Mengapa saya memerlukannya?

Membaca teks (terutamanya apabila terdapat banyak perkara) adalah proses yang memakan masa untuk otak, yang memerlukan kemasukan Sistem 2. Kebanyakan pengguna akan terlalu malas untuk menghidupkannya, System 1 akan mendapat kerja yang dilakukan. Lebih-lebih lagi, ia adalah wajar dilakukan di tempat-tempat yang paling mudah diramal. Apabila pusat perhatian ditemui, Sistem 2 akan menyambung dan mula memeriksa kandungan halaman dengan lebih terperinci.

Organisasi visual yang baik menyelesaikan masalah ini:

  • Memaklumkan. Struktur visual tangan tak terlihat mengarahkan perhatian pengguna dari satu tindakan ke yang lain, tanpa menyebabkan kesulitan sepanjang jalan.
  • Impak emosi. Imej visual disimpan dalam memori jauh lebih kuat daripada kandungan teks. Perkara-perkara lain yang sama, pengguna akan memilih dari beberapa pilihan yang kelihatan menyenangkan secara estetika.
  • Penyampaian hubungan dalam kandungan. Sekiranya anda mengkategorikan elemen penting dan kategori penting di laman web ini - iaitu, memudahkan kehidupan Sistem 1, pengguna akan mencari subseksyen yang dia perlukan dengan lebih mudah.

Corak imbasan: apa dan di mana pengguna sedar menjangkakan

Dalam saat pertama di laman web ini, pengguna akan mencari kandungan yang berguna di laman web tersebut, "mengimbas" kawasan yang kelihatan di halaman untuk mencari maklumat yang diperlukan. Dia bermula dari sudut kiri atas (jika dia digunakan untuk membaca dari kiri ke kanan), bergerak ke kanan, mengharapkan untuk menerima maklumat tambahan di sana. Kemudian dia melihat ke sektor kiri bawah, dan cepat melompat ke sudut kanan bawah.

Skrip, atau corak ini, mempunyai nama: Carta Gutenberg. Selalunya ia didapati di halaman pendaratan dan halaman pendaftaran, dan ia selaras dengannya bahawa halaman awal dibina.

Di samping itu, terdapat beberapa corak umum yang lain dalam UX.

Corak Pengimbasan Desktop

Corak F. Tanpa menyedari, anda menghadapi corak F-setiap hari. Sebaik sahaja anda mengenalinya lebih dekat, anda tidak akan dapat melihatnya pada setiap portal berita kedua. Lihat sendiri:

Corak Z. Apabila mengimbas halaman untuk melihat, tidak ada yang bergantung pada, corak Z dihidupkan: melihat zigzag merentasi halaman dalam zigzagging yang luas, menangkap lampu sorot:

Corak imbasan mudah alih

Skrin peranti mudah alih boleh memaparkan jauh lebih sedikit kandungan daripada skrin komputer riba atau monitor, dan kebanyakan masa, pengguna tetap tegak. Oleh sebab itu, kita mengimbas kandungan pada telefon bimbit sebaliknya.

Kandungan pada peranti mudah alih biasanya terletak dalam dua cara: grid dan senarai (masing-masing Paparan Grid dan Paparan Senarai).

Grid (lihat gambar) berbeza dari senarai dengan fakta bahawa lebih banyak unit kandungan pada skrin pada masa yang sama, tetapi anda perlu menarik perhatian pengguna hanya dengan imej yang berbeza.

Senarai - ini adalah blok kandungan yang diatur secara menegak satu demi satu, sementara satu blok menduduki keseluruhan lebar skrin. Mengimbas senarai adalah serupa dengan corak F, tumpuan perhatian (dan menentukan pentingnya blok) berlaku pada tajuk blok, dan imej, jika ada, adalah dalam bentuk gambar kecil pratonton.

Perhatian pengguna diagihkan secara sama rata ke atas semua imej, dan pengimbasan adalah berbentuk S (kecuali tidak ada imej yang menonjol di antara imej):

Penempatan aksen: kontras, warna, kedalaman

Pengedaran kandungan dalam ruang adalah tahap penting dalam penjelasan hierarki visual, tetapi bukan yang terakhir. Setelah meletakkan semua unsur di dalam tempat mereka di dalam beberapa blok akan ada elemen pendua, dan hampir selalu salah satu dari mereka akan menjadi lebih penting daripada yang lain. Untuk berjaya menunjukkan kepada pengguna, di mana ia bernilai memberi perhatian, anda harus merujuk kepada prinsip operasi Sistem 1.

Persepsi visualnya adalah intuitif dan berdasarkan pembentukan imej yang pesat. Fikiran bawah sedar bertujuan untuk membandingkan semua maklumat visual dengan objek kehidupan sebenar, iaitu, untuk memberikan "bentuk" dan "berat".

Sebaliknya

Perkara yang lebih penting perlu diserlahkan dengan menambah kontras - semakin tinggi, semakin penting pengguna menganggap unsur tersebut. Jika, misalnya, untuk mengganti burung hantu dengan butang, maka orang akan lebih sering menekan butang yang gelap.

Kedalaman

Visi binokular membolehkan kita menentukan jarak dan menumpukan secara bergantian pada objek pada jarak yang berbeza, tetapi perkara yang paling penting adalah apa yang berlaku dekat.

Pada skrin rata, untuk menghasilkan kesan kedalaman dan "melekat" sesuatu, sering menggunakan bayang atau kesan kabur. Walau bagaimanapun, untuk mencapai kesan utama kedalaman, ia sudah cukup (walaupun halus ia mungkin berbunyi) untuk menjadikan unsur-unsur yang lebih penting lebih besar dan sisanya lebih kecil.

Warna

Warna mengelilingi kami di mana-mana dan membawa beban maklumat tambahan. Pengalaman terkumpul "warna - maklumat" dipindahkan oleh pengguna ke halaman laman web dan ke tetingkap terbuka aplikasi. Untuk mendorongnya ke tindakan yang diinginkan dan menolaknya dari orang yang tidak diingini, gunakan fakta bahawa kami telah teguh di kepala kami sejak zaman kanak-kanak: warna cahaya lalu lintas.

Tetapi warna merah - harga "buruk" - membantu menarik perhatian harga terbaik:

Dengan cara ini, jangan biarkan konsep "buta warna" menangkap anda secara tidak sengaja: sebahagian kecil dari penduduk mempunyai visi yang benar-benar "hitam dan putih", manakala pelbagai jenis buta warna (apabila mata tidak membezakan mana-mana warna asas tunggal, kira-kira 5% daripada populasi yang terdedah kepada persepsi seluruh julat, dan jika penonton anda lelaki - lebih banyak lagi: 8%.

Semua orang ini juga menggunakan Internet, dan mereka tidak boleh dilupakan ketika memikirkan palet warna. Walau bagaimanapun, masalah Kebolehaksesan (perkataan yang tidak ada penterjemahan yang ditubuhkan di Rusia lagi, tetapi yang boleh digambarkan sebagai "kemudahan persepsi visual", "kebolehbacaan") sendiri adalah lebih daripada satu artikel.

Corak visual: penjajaran dan pengelompokan

Dari mengetahui bagaimana untuk mengasingkan dan menarik perhatian kepada elemen corak, mari kita beralih kepada apa yang boleh kita lakukan secara langsung dengan corak. Lagipun, ia sendiri adalah pembawa maklumat yang berpotensi:

Otak kita (iaitu, Sistem 1, yang pada dasarnya bermakna oleh "otak" dalam artikel ini) suka dan dapat umum. Sebaik sahaja sesuatu di sekeliling kita mula mengulangi, kita melihatnya dan dengan masa, kita kurang memberi perhatian kepada unsur-unsur yang mengulangi. Perhatian dihidupkan hanya apabila pola sedia ada rosak.

Melirik gambar di atas, kita tidak melihat lima kanguru secara individu: kita mula-mula melihat kumpulan itu daripada empat kanguru. Kemudian - kanggaru kelima, yang bertentangan. Imaginasi segera menarik gambaran pembangkang.

Tetapi menu Bucking. Pengkelasan, kontras dan warna memberi kita corak tingkah laku yang tepat: masukkan data dalam tiga medan putih dan tekan butang biru besar. Dan jika anda mengikuti tingkah laku tapak, anda akan melihat bahawa kawasan carian untuk pilihan sentiasa mempunyai warna yang sama. Ini adalah kesan langsung pada Sistem 1, yang akan mencari warna biasa pada mana-mana halaman.

Mari lihat kumpulan lain:

Setelah melihat gambar, anda, tanpa menyedarinya, membuat banyak sambungan dalam kumpulan enam angsa:

  • mereka terapung dalam dua baris;
  • bergerak ke satu arah;
  • dua ayam di atas dan dua di bahagian bawah, nampaknya melekat antara satu sama lain;
  • angsa di sebelah kanan seolah-olah berenang lebih cepat daripada rakan-rakannya;
  • jauh tersisa - sebaliknya, ketinggalan jauh.

Kesemua pemikiran ini melintas di kepala saya penjajaran. Kami cuba menyambungkan unsur-unsur dekat secara logik bersama-sama dan mencari apa yang membezakan unsur-unsur dari yang lain di jauh.

Dan semakin kompleks maklumat yang perlu diperkemas, semakin penting peranan kumpulan. Lihat apa skim penggunaan Bucking pada kad hotel mereka:

Lihat: 1 - ini adalah maklumat umum tentang hotel, 2 - penilaian pengguna, 3 - data mengenai perkhidmatan, 4 - maklumat tentang bilik dan 5 - diperuntukkan untuk saiz bilik dan lokasi (ingat kangaroo) harga bilik. Melepaskan senarai panjang, anda akan "menangkap" logik ini secara tidak sedar, atau sebaliknya, Sistem anda akan menangkapnya dan ia akan mencari maklumat yang diperlukan di tempat biasa.

Anda sekarang tahu corak yang berbeza. Apa yang akan datang?

Kemudian anda harus menahan diri sendiri dan tidak menggunakan semua helah sekaligus.

Kelompok elemen yang harus "dibaca" bersama-sama, letakkan aksen yang diperlukan. Contohnya, jangan letakkan maklumat penting di sudut kiri bawah - penyelesaian mudah ini dapat meningkatkan penukaran halaman. Sorot warna, gaya, saiz, hanya apa yang benar-benar penting. Jangan memuatkan halaman dengan aksen. Lihatlah versi mudah alih tapak anda dari segi corak - dan gunakan elemen yang berbeza untuk memecahkan monoton aliran.

Seperti yang anda lihat, corak sesuai bukan sahaja untuk mengatur burung hantu dan kangaroo mengikut ranking mereka: mereka harus digunakan di mana anda ingin mendorong pengguna perlahan-lahan ke tindakan yang betul. Tetapi penting untuk mengekalkan keseimbangan. Sebaik sahaja pengguna menyedari bahawa menekan butang itu bukan keputusannya, tetapi hasil dari manipulasi anda, semua keajaiban hierarki visual akan menghilang dan pengangkutan akan menjadi labu.

Bahan ini disediakan oleh Denis Spring,
Pengarang perkhidmatan AskUsers
.

Tonton video itu: Discover the expanded Material Design motion guidelines - Google IO 2016 (November 2019).

Loading...

Tinggalkan Komen Anda