Untuk Desain UX yang Lebih Baik: Dapatkah Saya Mengklik Ini?

Bagaimana Perubahan Halus Dapat Meningkatkan RKT Anda

Semua orang menginginkan lebih banyak klik. Lebih banyak ketukan. Lebih banyak pengguna yang mengatakan 'ya, saya menyukai apa pun yang Anda berikan kepada saya.' Kami ingin melihat beberapa cara yang benar-benar membuat pengguna ingin mengklik lebih banyak, di sinilah desain UX masuk!

Ini cukup baik terpampang di seluruh web: ketika Anda membuat pengguna mengklik, perubahan halus bisa sangat membantu. Kami melihat apa sebenarnya perubahan halus itu dan pengaruhnya terhadap konversi Anda.

font

Font dapat memiliki efek luar biasa yang gila. Misalnya, pada tahun 2009, Tropicana melakukan rebranding secara besar-besaran, dan sebagian besar dari itu adalah mengubah font mereka. Ingatlah bahwa font Tropicana juga merupakan logo mereka.

Gambar melalui Desain Vital

Penjualan segera turun 20%.

Font juga merupakan salah satu hal paling stabil yang dapat Anda andalkan saat membuat orang mengklik.

Umumnya, font sans serif tebal dengan kontras tinggi akan sangat bagus.

Mengapa? Itu yang paling mudah dibaca. Contohnya ada di internet. Basecamp, BaseCRM,, Evernote, mHelpDesk – semua perusahaan ini memiliki tampilan CTA yang sama – kontras tinggi, font sans serif tebal. Mudah dilihat, mudah dibaca. Itu sebabnya perusahaan cenderung menggunakannya di atas font serif. (Hal yang sama berlaku untuk poster – Anda dapat membacanya sejak lama). Selain itu, sans serif lebih mudah dibaca di komputer, itulah sebabnya Anda ingin menggunakannya saat Anda ingin pembaca mengklik – mereka perlu tahu apa yang Anda katakan sebelum hal lain.

Jatuhkan bayangan + efek 3D

Sungguh menakjubkan bagaimana menjatuhkan bayangan dan membuat sesuatu 3D bisa membuat orang mengkliknya. Ini benar-benar satu kelemahan utama dari desain datar. (Saat ini. Yang lainnya adalah, pada akhirnya, itu akan menjadi gila-tanggal.) Ketika semuanya benar-benar datar, mereka tampak hebat, tetapi mereka tidak begitu mudah untuk mengetahui apa yang dapat diklik dan apa yang tidak. Jakob Nielsen membahas ini ketika dia mengevaluasi Windows 8 pada tahun 2012.

Karena orang-orang mengklik lebih banyak ketika sesuatu benar-benar terlihat seperti tombol, tepi membulat atau bayangan jatuh membuatnya sangat mudah untuk mengetahui apa yang dapat diklik dan apa yang tidak.

(tip pro: ini disebut tombol gaya kios).

Ini sebenarnya menghadirkan masalah yang menarik. Tombol bergaya kios awalnya digunakan di arcade dan tempat lain pada masa itu. Jadi ketika kami beralih ke digital, norma itu terbawa. Itu masuk akal, tetapi pada titik tertentu, mereka menjadi tombol miring dan 3D demi menjadi tombol 3D miring, bukan karena ada yang benar-benar ingat dari mana asalnya. Ini seperti ikon simpan floppy disk – akar skeuomorphic akhirnya menjadi arbitrer, dan tidak lagi skeuomorphic.

Semua ini untuk mengatakan bahwa orang lebih nyaman mengklik tombol bergaya kios sekarang, tetapi kita mungkin melihat langkah yang stabil jika desain datar dapat bertahan di sana beberapa tahun lagi.

Pergerakan

Banyak orang menggabungkan gerakan dengan membuat sesuatu yang dapat diklik 3D, tapi saya pikir itu cukup penting untuk menjamin kategori sendiri, pertama dari perspektif UX, dan kedua karena apa artinya untuk desain datar.

Dari perspektif UX

Pengguna membutuhkan umpan balik untuk tindakan mereka. Ini adalah cara nomor 1 untuk membantu pengguna memahami di mana mereka berada dan apa yang harus dilakukan.

Pekerjaan pertama untuk membuat sesuatu yang dapat diklik adalah memberi tahu pengguna bahwa itu dapat diklik.

Ketika berbicara tentang tombol, misalnya, hanya sedikit perubahan gradien yang bisa membuat keajaiban. Misalnya, beranda Eventbrite menggunakan sedikit perubahan gradien pada ikonnya untuk menunjukkan bahwa ikon tersebut dapat diklik dan memperkuat lokasi pengguna:

Contoh bagus lainnya adalah situs web eTecc/Interactive. Mereka benar-benar menggunakan aa fill untuk memberi tahu pengguna bahwa ada sesuatu yang dapat diklik.

Ini adalah cara yang mudah untuk mengetahui cara memberi tahu pengguna apa yang dapat diklik dan apa yang tidak. Dan ketika segala sesuatunya menjadi semakin datar, umpan balik visual ini semakin penting. Anehnya, ini adalah sesuatu yang bisa ditingkatkan Apple. Lihat beranda Apple.ca.

Sepertinya tautan di bagian atas dapat diklik, dan ada sedikit perubahan gradien untuk menegaskan kembali pengetahuan itu bagi pengguna. Kita juga dapat berasumsi bahwa tampilan opsi galeri juga dapat diklik, dan sekali lagi ada perubahan warna untuk memperkuatnya.

Tetapi masalahnya adalah bahwa seluruh layar sebenarnya dapat diklik! Ini sangat tidak intuitif bagi pengguna dan sebagai seseorang yang sering mengklik , saya butuh beberapa saat untuk mencari tahu mengapa halaman terus berubah. Ini sama sekali bukan UI yang intuitif.

Dari perspektif datar

Jadi, meskipun Apple belum melakukannya 100% sepanjang waktu, mereka cukup dekat. Dan gerakan memungkinkan desainer membangun antarmuka datar yang mereka inginkan sambil tetap memberi tahu pengguna apa yang dapat diklik dan apa yang tidak. Perhatikan bagaimana semua contoh adalah desain yang sangat datar? Pengungkapan penuh Saya merencanakan itu. Ini menggambarkan bahwa desain datar dapat berfungsi untuk sebuah tombol, selama ada umpan balik.

Berikut adalah contoh desain datar (ish) tanpa umpan balik – meskipun jelas bagi saya bahwa ini adalah tombol, tanpa umpan balik , komputer saya terasa seperti tidak berfungsi.

Kontras + Warna

Sayangnya, tidak ada kode RGB tertentu yang menjamin orang untuk mengklik. Tetapi ada beberapa aturan bagus untuk diikuti yang akan membantu Anda. Jika Anda ingin pengguna mengklik sesuatu, Anda ingin itu menonjol. Itu berarti Anda membutuhkannya untuk kontras secara dramatis dengan apa pun yang ada di sekitarnya, bahkan jika itu berarti melanggar palet warna merek.

Misalnya, David Hamill merekomendasikan penggunaan warna untuk hyperlink yang tidak digunakan untuk hal lain. Di situsnya, setiap tautan dibuat dalam warna pink. Sangat mudah bagi pengguna untuk mengetahui apa itu tautan, dan apa yang bukan. Dikombinasikan dengan perubahan saat Anda mengarahkan kursor ke atasnya, sangat jelas bagi pengguna saat Anda dapat mengklik sesuatu.

Masalah warna dan kontras semacam ini paling sering muncul dengan ajakan bertindak (CTA) dan tombol, dan sedikit perubahan warna dapat membuat perubahan besar dalam keuntungan. Misalnya, Vibethink menulis tentang CTA dan tombol, dan melaporkan bahwa mengubah warna dan bentuk tombol meningkatkan konversi (baca: klik) sebesar 35%. Mereka merasa bahwa peningkatan kontras memudahkan pengguna untuk mengklik.

Tapi mereka mengubah dua hal, jadi itu tidak sepenuhnya ilmiah. Hubspot pada tahun 2011 menerbitkan hasil beberapa pengujian A/B pada tombol merah dan hijau dan menemukan bahwa tombol merah mengungguli tombol hijau sebesar 21%.

Jadi warna dan kontras dapat memainkan peran besar dalam membuat pengguna mengklik sesuatu.

Bungkus

Iblis ada di detailnya. Sebagai desainer, pengembang, UXer, dan pemasar, setiap kali kami membuat sesuatu yang dapat diklik, kami meminta pengguna untuk melakukan sesuatu. Klik disini. Mengajukan permohonan. Hubungi kami. Beli sekarang. Apa pun itu, itu adalah sesuatu yang mereka miliki yang kita butuhkan. Jadi mengapa tidak menyederhanakan itu? Cara terbaik untuk membantu pengguna Anda mengeklik (dan dengan demikian mungkin membantu Anda) adalah dengan membuatnya mudah untuk diklik. Dengan membuat tombol sesuai harapan dengan desain bergaya kios, dengan membuat font mudah dibaca di layar (meskipun kecil), dan dengan memberikan umpan balik tentang tombol dan konten yang dapat diklik, Anda membuat hidup pengguna Anda lebih mudah.

Itu saja, sungguh. Saat Anda membuat sesuatu yang dapat diklik, buat hidup pengguna Anda lebih mudah pada saat yang bersamaan.

Menikmati posting ini? Anda mungkin juga ingin membaca posting Memahami Pengguna Anda untuk Meningkatkan Desain UX Situs Web Anda atau Produk Hebat kami yang Harus Dimiliki Setiap Desainer UX !