it-swarm.asia

Cara membuat teks terlihat * tidak * dapat diklik

Masalah:

Saat ini saya sedang membangun situs web pertukaran buku teks seperti gambar di bawah ini. Selama pengujian beta, pengguna terus mencoba mengklik tiga potongan teks di bawah logo ("6 buku terdaftar," "12 daftar sukses," dan "2 pengguna aktif").

Klarifikasi: Cuplikan ini hanya berupa teks; mereka tidak dimaksudkan untuk diklik.

Klarifikasi 2: "Daftar yang berhasil" menghitung jumlah buku yang telah ditukar penjual/penyewa dengan pembeli. Anda dapat berinteraksi dengan daftar terbuka (khususnya Anda dapat mengedit milik Anda dan membuat penawaran pada orang lain) tetapi statistiknya ada untuk menunjukkan efektivitas situs web.

Pertanyaan:

Apa yang bisa saya lakukan untuk membuat ketiga bagian teks ini benar-benar tidak dapat diklik? Mereka sudah berwarna abu-abu seperti yang Anda lihat.

Example


Gunakan di alam liar:

Instagram menggunakan daftar statistik yang serupa, dan ini tidak dapat diklik. Instagram

81
JosephSlote

tl; dr → gunakan pola yang sudah dikenal

  1. Jadikan objek teks kurang terlihat seperti kontrol tab navigasi.

  2. Elemen-elemen tampaknya tidak perlu dibagi: Tempatkan bidang pencarian di header utama.

  3. Jadikan pencarian lebih mirip pencarian.

Simplified design suggestion

Posisi penting

Faktor bawah sadar yang membuat subjek uji Anda ingin mengetuk objek teks tersebut diposisikan. Tampaknya navigasi tab. Lihat contoh ini dari spesifikasi Material Design yang sangat populer di ponsel dan di tempat lain.

Material Design tabbed navigation

Sulit untuk melatih ulang pengguna

Meskipun upaya Anda untuk mengecilkan mereka, posisi menarik bagi pengguna yang ingin menjelajahi berbagai pandangan:

Saya ingin tahu buku apa yang sudah terdaftar?

Apa itu daftar "berhasil"?

Apakah saya tahu pengguna yang aktif di sini?

Luangkan waktu sebentar untuk memikirkan dengan cermat pertanyaan-pertanyaan itu. Saya pikir ada cerita pengguna yang berharga yang perlu diselidiki.

Iterate berdasarkan temuan tes

enter image description here

Seseorang, di suatu tempat pernah berkata ...

Anda hanya dapat membuatnya sekali, tetapi Anda dapat membuatnya lebih baik sebanyak yang Anda butuhkan.

Seperti yang telah disebutkan orang lain, pengguna ingin hal-hal itu menjadi navigasi. Pertanyaan yang saya bayangkan di atas mengisyaratkan alasan pengguna mungkin ingin menavigasi ke data di balik hal-hal itu.

Anda tidak harus menjawab setiap keinginan pengguna, tetapi ketika Anda mulai melihat sebuah pola, Anda mungkin menemukan sesuatu yang berharga.

125
plainclothes

Yah, karena orang-orang mencoba berinteraksi dengan informasi ini, saya akan menggunakannya sebagai keuntungan. Seperti yang disebutkan oleh Mattynabib, itu sangat masuk akal.

Namun, jika karena alasan tertentu Anda memilih untuk tidak melakukannya, jawabannya adalah menjadikan potongan informasi ini sebagai pesan yang homogen. Cara sekarang, sepertinya campuran dari pemasaran dan elemen interaktif (karenanya klik). Jadi, yang Anda butuhkan adalah mempertahankan sisi pemasaran dan menyingkirkan keterjangkauan yang dirasakan ini. Dan untuk melakukannya, cukup gabungkan cuplikan informasi dalam sebuah kalimat, misalnya

6 buku terdaftar, 12 daftar sukses dan 2 pengguna aktif

Catatan: Saya tidak yakin apakah Anda benar-benar ingin menggunakan ini sebagai salinan pemasaran. Jika demikian, saya akan mencari sesuatu yang lebih baik. Juga, mengapa "daftar berhasil"? Apakah ada tidak berhasil yang? Jika demikian, mengapa melakukan penyebutan implisit pada aspek negatif itu?

123
Devin

Teks abu-abu sebenarnya membuat mereka terlihat lebih dapat diklik karena menonjol dari sisa header. Saya akan mengubahnya menjadi warna yang sama dengan sisa teks (hitam).

Selain itu, alih-alih "6 buku Terdaftar", saya akan menggunakan "Daftar Buku: 6". Kolon secara halus menyiratkan, "ini info" daripada "Saya tautan".

42
Big Daddy Dennis

Mereka harus dapat diklik jika pengguna dapat berinteraksi dengan hal-hal itu.

Jika Anda menampilkan sesuatu yang merangkum konten yang relevan bagi pengguna, itu harus dapat diklik untuk mencapai konten yang mendasarinya.

Agaknya di situs pertukaran buku, pengguna harus dapat melihat buku-buku yang terdaftar. Jadi, biarkan mereka mengklik "6 buku yang terdaftar" untuk sampai ke tampilan itu.

Apakah "daftar berhasil" relevan dengan pengguna situs? Jika demikian, sekali lagi, biarkan mereka mengkliknya untuk melihat semua daftar yang berhasil.

Hal yang sama berlaku untuk "pengguna". Bisakah pengguna melihat daftar pengguna? Jika demikian, biarkan mereka mengkliknya.

Jika pengguna tidak dapat berinteraksi dengan apa yang Anda hitung, mengapa tunjukkan?

Misalnya, jika "daftar sukses" bukanlah sesuatu yang dapat berinteraksi dengan pengguna, lalu apa tujuan memberi tahu mereka ada berapa? Tampaknya bukan informasi yang berguna sendiri, dan itu menciptakan harapan bahwa daftar yang sukses adalah sesuatu yang relevan bagi pengguna, yang dapat berinteraksi dengan mereka.

Mungkin Anda hanya ingin mengesankan pengguna dengan jumlah penggunaan situs Anda. Jika demikian, pastikan informasinya terlihat seperti promosi dan bukan data yang berarti. misalnya.:

CHTB: pertukaran buku terbesar kedua di internet, digunakan oleh 1.234 pengguna untuk memposting 5678 buku (dan terus bertambah!).

32
user31143

Ini masalah 'clickiness' relatif juga. Jadikan item yang tidak dapat diklik kurang diklik dengan membuat sisanya lebih banyak dapat diklik. Ungkapan di sini adalah: 'keterjangkauan'.

  • posisi dari tiga item yang tidak dapat diklik sangat menonjol: dalam desain Anda, itu berada di tengah halaman dan terintegrasi dengan logo dan pembayaran. Itu memberi mereka kemampuan klik yang kuat.
  • beruban tidak membantu Anda. Dalam desain ini, mudah dipahami hanya sebagai pilihan gaya untuk membuat teks ini menjadi abu-abu.
  • Input 'pencarian' Anda mungkin tidak cukup jelas. Coba buat ini lebih mirip input pencarian: tambahkan perbatasan, search-glass, dan tombol kirim (misalnya).
  • Anda juga dapat mengganti posisi bilah pencarian dan 'statistik yang tidak dapat diklik' dan menjadikan bilah pencarian bagian dari logo -> meniru halaman default Google.
11
Ideogram

Apa yang bisa saya lakukan untuk membuat ketiga bagian teks ini benar-benar tidak dapat diklik? Mereka sudah berwarna abu-abu seperti yang Anda lihat.

* desah *

Di masa lalu dulu ada standar bahwa teks yang dapat diklik (hyperlink) digarisbawahi. Dan satu lagi yang teks berwarna abu-abu tidak aktif. Sejauh mana standar itu dilanggar? Tidak terlihat lagi dari Stack Exchange itu sendiri:

Clickable links

Perhatikan tautan dari halaman profil saya tidak bergaris bawah, dan berwarna abu-abu. Tapi mereka bisa diklik. Sekarang kami telah melatih pengguna untuk mengharapkan sesuatu diklik, Anda tidak bisa hanya "mendesain" perilaku itu.

Seperti yang banyak orang lain katakan, karena Anda mengatakan "6 buku terdaftar" adalah logis untuk mendaftar 6 buku itu jika Anda mengklik kata-kata itu. Jangan melawannya.

10
Nick Gammon

menggunakan inset text shadow memberikan tampilan sesuatu yang diatur dalam batu: (dengan dan tanpa)

enter image description here

7
Sven Writes Code

enter image description here Karena angka "6 buku terdaftar" "12 hal sukses" .. lebih seperti highlight.

Saya akan mencoba salah satunya untuk membuatnya terlihat seperti nomor highlight atau dashboard:

Meningkatkan font - itu membuatnya sangat jelas bahwa itu adalah semacam judul. Memiliki panel untuk setiap item, dalam hal ini 3 panel. Ketika saya mengatakan panel itu berarti memiliki latar belakang yang terang dan padding ke teks.

Beberapa hal seperti yang saya coba di atas, tetapi Anda selalu dapat bermain-main dengan warna dan font yang sesuai dengan desain Anda.

5
Pavithra Olety

Anda ingin membuat angka lebih besar, mengubah font/warna untuk membedakannya, dan meletakkannya di atas informasi yang mereka gambarkan. Misalnya, lihat tata letak situs tertentu yang sangat populer (lihat bagian kanan bawah gambar ini). Ini membuat angka-angka itu lebih mirip meter/indikator daripada tautan.

From StackExchange

5
glassy

Secara teoritis Anda dapat membuat teks terlihat sedikit lebih "grafis" di alam, sesuatu yang lebih seperti semacam hiasan pada panel itu; jika tidak, saya pikir memutarnya adalah sejauh yang Anda bisa - setelah mereka mencoba mengklik dan tidak berhasil, mereka mungkin akan berhenti.

Tetapi jika Anda telah menguji ini dan orang-orang secara konsisten mengklik di sana, Anda mungkin ingin mempertimbangkan untuk mencari tahu apa yang mereka harapkan terjadi ketika mereka mengklik di tempat-tempat itu, dan kemudian pertimbangkan MEMBUAT mereka diklik ... Anda bisa hilang sebuah peluang.

3
Mattynabib

Hadirkan sebagai tabel

Tautan biasanya ditampilkan sebagai tombol atau baris teks. Informasi biasanya ditampilkan sebagai tabel.

Oleh karena itu menampilkan statistik dalam format yang sedikit lebih tabular akan mencegah pengguna mencoba mengkliknya.

Contoh di alam bebas

Bahkan Anda sudah bisa melihat dalam contoh instagram Anda sendiri bagaimana Anda bisa menerapkan ini dengan cara yang halus.

Instagram pada dasarnya menyajikan statistik mereka dalam sebuah tabel dengan 3 kolom dan 2 baris. 1 baris angka kunci (sedikit besar) dan 1 baris dengan deskripsi.

enter image description here

2

Ini karena:

  1. (mungkin sulit diubah) Konten tersebut menimbulkan pertanyaan "yang mana?" jadi orang mengikuti keinginan mereka untuk mencari tahu.
  2. (mungkin mudah diubah) Mereka berada dalam font tipe tubuh yang menunjukkan kemungkinan bahan tautan. Pilih bentuk presentasi - mungkin sans-serif, mungkin dengan topi tipis, mungkin dengan bobot dan/atau ukuran yang berbeda antara digit dan huruf dll.
1
Lucian Davidescu

Buat itu terlihat lebih kompleks daripada satu baris teks.

Contoh Twitter Anda membagi setiap stat menjadi dua baris dengan bobot font berbeda. Itu seharusnya cukup untuk mencegah orang berpikir bahwa mereka adalah tautan:

enter image description here

Anda dapat mengubah ukuran font, gaya, warna, atau menambahkan grafik yang halus (seperti aturan yang samar di antara dua baris) untuk membuatnya lebih rumit daripada satu baris teks, yang biasanya terlihat seperti tautan.

0
Tobia