Cara mengarahkan mata pengguna ke situs web

25

Ada prinsip umum dalam fotografi bahwa foto harus mengarahkan mata pemirsa. Ini sering dilakukan dengan garis yang melintasi foto. Mengenali bagaimana pengamat akan memindai seluruh foto Anda seringkali membantu dalam menyusun bidikan dan cara mata pemirsa memindai foto kadang-kadang bahkan dapat mengubah arti foto.

Apa yang dapat dilakukan dalam desain web untuk mengarahkan mata pengguna melintasi situs ke arah yang Anda inginkan tanpa pengguna harus mencari bagian kanan halaman?

Misalnya, Anda mungkin ingin pengguna melihat logo dan kemudian deskripsi singkat tentang situs dan kemudian artikel. Selain meletakkan item-item ini dalam kolom vertikal dengan satu di bawah yang berikutnya dan menghapus semua elemen lain dari halaman, bagaimana Anda mengarahkan mata pengguna dari satu ke yang berikutnya?

website-design design-principles

— Komputeris
sumber

7

Anda mungkin tertarik dengan "Penggunaan Web Eyetracking" (2009) oleh Nielsen & Pernice: useit.com/eyetracking

— Jari Keinänen

2

@ Koiyu saya pergi dan menemukan artikel "F" dan akan mempostingnya ketika saya menyadari bahwa Anda sudah memilikinya. Saya tidak bisa cukup menekankan betapa pentingnya kebiasaan membaca ini. Desain hebat menyesuaikan diri dengan aliran ini, dan desain buruk menentangnya.

— zzzzBov

1

Saya sedikit menentang pelacakan mata. Bukan karena itu tidak berguna, tetapi karena sudah dalam setiap proyek yang ingin saya lakukan pengujian kegunaan sederhana, bos dan filosofi perusahaan adalah untuk melakukan segala yang termurah mungkin dan semakin cepat mungkin. Saya benar-benar tidak percaya bahwa di sebagian besar situasi Anda akan dapat meyakinkan untuk membeli sistem pelacakan mata, dan dapat mengimbangi data dengan benar tanpa instruksi yang tepat dari perilaku manusia / psikologi.

— Littlemad

8

Itu semua masalah keseimbangan antara ukuran, warna dan perataan. Dengan pengalaman Anda akan tahu apa dan kapan menggunakan trik-trik itu untuk menarik perhatian. Untungnya di situs web kami dapat melacak perhatian ini dan ada banyak studi ilmiah tentang masalah ini, misalnya ada data bagus di situs web Jakob Nielsen .

Tentang pelacakan Mata Saya ingin mengatakan bahwa untuk masalah anggaran, dan kenyataan tidak ada yang akan membayar untuk perangkat pelacakan Mata, atau bahkan menggunakannya. (Sudah sulit untuk meyakinkan bos Anda di kantor untuk membuat beberapa jam pengujian kegunaan pada setiap tahap proyek ...) Saya pribadi lebih suka melakukan pengujian kegunaan dengan orang sungguhan untuk menilai komposisi desain web saya. Bahkan jika ini berarti membawa teman seseorang dari keluarga saya dan menempatkan mereka di depan layar mengajukan pertanyaan atau melihat perilaku mereka.

Pelacakan mata tidak memberi tahu Anda jika pengguna yang melihat mereka mengerti apa itu atau tidak. Jika mereka frustrasi ragu-ragu atau hanya mengagumi komposisi grafis.

Sebuah buku hebat yang dapat membantu Anda dalam hal ini adalah Bedah Roket yang Dibuat Mudah dari Steve Krug

— Littlemad
sumber

5

Seperti yang disebutkan koiyu dalam komentar, pelacakan mata adalah apa yang harus Anda kejar. Anda dapat membuat desain dengan tujuan mengarahkan pengguna di sepanjang jalan, tetapi satu-satunya cara untuk benar-benar tahu jika Anda mencapai tujuan Anda adalah dengan melakukan studi pelacakan mata.

Yang mengatakan, Anda mungkin menemukan jawaban saya berguna untuk pertanyaan, Bagaimana cara menarik perhatian ke bidang desain tertentu? Itu bukan pertanyaan yang sama persis, tapi sudah dekat.

Lebih banyak sumber daya pelacakan mata:

Layanan pelacakan mata:

— Virtuosi Media
sumber

3

Ini tip cepat: Sertakan gambar seseorang yang melihat atau menunjuk ke objek target Anda (misalnya produk, tombol berlangganan). Berikut ini contoh dari iklan, tetapi saya telah melihat taktik yang sama di halaman web: Contoh Sunsilk

(Sumber: http://www.grokdotcom.com/2007/10/04/how-a-pretty-face-can-push-visitors-away/ )

— Mattvic
sumber

0

Saya dapat memikirkan dua cara sederhana untuk mengarahkan mata pengguna ke situs web:

Gunakan penomoran yang jelas pada elemen halaman Anda. Anda dapat melihat ini di cukup banyak beranda situs, atau Anda dapat merujuk ke file PDF ini dari situs web keuangan (meskipun saya pikir itu bukan contoh yang bagus).
Gunakan panah untuk mengarahkan perhatian pengguna Anda. Ini bisa berupa bagan alur. Saya tidak bisa memikirkan contoh online apa pun saat ini.

— Gan
sumber

Web bukan media statis. Panah tidak memandu orang. Anda perlu membimbing mereka dengan berbagai ukuran dan warna dalam sistem berbobot.

— dkuntz2

Saya tidak mengerti. Bisakah Anda menjelaskan lebih lanjut tentang "panah tidak memandu orang" dan "membimbing mereka dengan berbagai ukuran dan warna dalam sistem berbobot"?

— Gan