Bagaimana Anda merepresentasikan jarak secara grafis?

Baik,

Jadi ini mungkin agak "subyektif" tetapi saya mencari beberapa ide.

Saya ingin mewakili jarak sebagai grafik batang (semacam) yang menjadi "lebih penuh" semakin dekat orang-orang.

Semakin jauh mereka, semakin sedikit grafik batang jika Anda mau.

Saya tidak yakin bagaimana saya akan mewakili itu. Saya telah membuat grafik ini untuk menunjukkan kepada Anda proses pemikiran saya.

Apakah Anda pikir orang akan mengerti? Haruskah saya menentukan tepi "JAUH" dan "TUTUP"? Atau hanya menampilkan jarak?

Apakah orang akan mengerti bahwa ketika grafik batang terisi, orang semakin dekat?

Haruskah saya juga mungkin menentukan jarak yang sebenarnya? (Entah meter, km, dll?) Atau lupa grafik batang sama sekali?

Bagaimana Anda merepresentasikan jarak secara grafis sehingga orang pada pandangan pertama memiliki gagasan yang baik seberapa dekat atau jauh jarak orang tersebut?

EDIT : Ok, jadi bicaralah dengan klien untuk detail lebih lanjut dan apa yang mereka temukan adalah sesuatu yang mirip dengan lingkaran yang disediakan @Scott, di mana pengguna saat ini "di tengah" dan orang-orang di sekitar pengguna berada di "orbit". Mereka telah melihatnya di suatu tempat dan menginginkan itu, bukan menunjukkan jarak untuk setiap pengguna.

Karena itu saya harus menampilkan teks seperti "150m", atau "Terdekat" sebagai lawan dari grafik batang dengan jarak.

Namun, saya juga ingin berterima kasih kepada SEMUA ORANG karena memberikan jawaban, beberapa contoh fantastis, saya suka mereka dan memberikan panel ide yang bagus untuk digunakan. Karena "brief" agak berubah dari permintaan awal, saya pikir yang terbaik adalah mengedit pertanyaan ini untuk memberikan umpan balik lagi.

Contoh yang diperbarui menggunakan desain irisan. Untuk kejelasan, jarak sampel ditambahkan ke grafik, dan teks dihapus.

Contoh dengan teks Mulai dan Selesai

Karena ukuran kecil adalah faktor untuk perangkat genggam, berikut adalah dua opsi penghematan ruang 100px kali 100px.

Brainstorming berdasarkan Persyaratan Terbaru

Berikut adalah ide penghematan ruang untuk seluler yang menempatkan aplikasi dalam dropdown. Dengan ukuran dropdown yang lebih besar, peta dapat berisi lebih banyak informasi seperti label pengguna, dan kisi jarak.

Bertahun-tahun yang lalu saya memiliki game Amiga bernama F19 Stealth Fighter. HUD dalam hal ini memiliki sesuatu yang sangat mirip dengan yang Anda gambarkan. Untuk bom yang Anda jatuhkan, alih-alih dipecat, Anda ditunjukkan garis dengan dua 'pos' di masing-masing ujung semakin dekat bersama semakin dekat Anda ke target.

Berikut ini adalah representasi modern sederhana:

Jika Anda ingin menunjukkan jarak antara dua orang, mungkin paling intuitif untuk menunjukkan jarak antara dua orang. Dalam mockup kasar di bawah ini masih ada semacam bar, tetapi menunjuk ke belakang. Jarak ditunjukkan oleh posisi (dengan menggerakkan orang ke kanan) dan ukuran (mengecilkan orang).

Bila Anda ingin lebih banyak indikator seperti batang, Anda bisa mewarnai bagian dari segitiga seperti di bawah ini. Dan Anda bisa menambahkan label ke garis.

Mungkin 'referensi' orang di sebelah kiri bisa dijatuhkan.

Saya pikir item jarak bekerja lebih baik dan jauh lebih intuitif, tapi saya akan sedikit membalikkan keadaan. Jarak yang jauh harus panjang dan merah, jarak pendek harus pendek dan hijau. Apa yang Anda poskan tampaknya kebalikan dari ini. Saya berharap bar panjang menjadi "jauh" dan menjadi merah.

Tanpa mengetahui tata letak keseluruhan Anda, kemungkinan lain mungkin menggunakan lingkaran dengan titik-titik ....

Menggunakan gambar Talkingrock dibuat:

Saya pikir apa yang paling masuk akal, bagi saya, adalah untuk ditukar seperti:

Mulai dari Far Apart dan menyala saat Anda mendekati bersama. Saya pikir perubahan teks dari "Far Close" ke sesuatu yang lebih seperti "Far Apart" "Together" atau "Met" atau sesuatu yang mengindikasikan dua orangnya yang tiba di satu tujuan akan membantu mengkomunikasikan ide lebih jauh.

Saya ingin mewakili jarak sebagai grafik batang (semacam) yang menjadi "lebih penuh" semakin dekat orang-orang.

Itu kebalikan dari apa yang ditunjukkan grafik batang. Semakin tinggi nilainya, semakin besar bilah. Ingin melakukan hal sebaliknya kemungkinan akan menambah kebingungan atau disonansi visual ke data aktual.

Untuk membuat poin sedikit lebih langsung, ganti 'jauh / dekat' dengan 'besar / kecil'. Ini tidak masuk akal:

                            ---        
                     ---    | |        
              ---    | |    | |        
       ---    | |    | |    | |
       | |    | |    | |    | |
big    ---    ---    ---    ---     small

Karena itu, saya pikir Anda perlu membuang ide 'membalik' skala dengan label. Jika Anda mencoba berkomunikasi dengan jarak yang lebih jauh, biarkan bilah besar menunjukkan itu. Ini adalah korelasi yang paling intuitif.

Tapi mungkin solusinya bukan grafik batang sama sekali. Kedengarannya Anda mencoba menerapkan metafora 'sinyal pelacak'. Semakin dekat Anda, semakin kuat sinyalnya. Saya pikir itu ide yang bagus, tetapi pertimbangkan visual selain grafik batang untuk itu. Mungkin semacam 'blip' (atau titik).

Anda bertanya bagaimana merepresentasikan jarak secara grafis , tetapi semua jawaban tampaknya bergantung pada teks di dalam gambar (kata "jauh" dan "tutup" dll). Karena itu saya sarankan Anda hanya menulis "3 mil terpisah" atau "200 m untuk pergi" dan menggunakan segala jenis latar belakang 'progress meter' yang mengisi secara horizontal.

Memberikan jarak numerik tidak selalu berguna dalam hal seseorang membaca angka aktual, tetapi angka dan satuan pengukuran benar-benar memperjelas apa yang Anda ukur, dan jika ada perubahan yang terjadi.

Konteks Anda tidak jelas tetapi penting. Secara konseptual, apakah jarak benar-benar ingin Anda wakili? Atau apakah itu sebenarnya tentang seberapa dekat pengguna dengan keadaan yang mereka cari, di mana "jarak" kebetulan menjadi metrik untuk itu?

Pertimbangkan bahwa apa yang sebenarnya Anda coba wakili adalah seberapa dekat seorang pengguna dengan mencapai keadaan yang diinginkan. Keadaan yang diinginkan harus diberi kesan terkuat di layar.

Dengan kata lain, dalam konteks aplikasi Anda, jika pengguna berusaha lebih dekat dengan pengguna lain, maka Anda tidak akan menginginkan bilah (atau apa pun) yang semakin kuat dengan jarak yang lebih jauh, karena kesan ini adalah kebalikan dari pengguna. tujuan.

Ini berlaku untuk warna juga; dalam skema merah -> hijau Anda biasanya ingin hijau sesuai dengan status target, dan merah sebaliknya, jadi jika pengguna berusaha lebih dekat maka Anda ingin hijau menjadi jarak yang lebih kecil.

Dengan mengingat hal itu, bilah atau baji akan berfungsi, tetapi dalam kasus apa pun Anda akan menginginkan bilah / baji menjadi hijau dan penuh (dan baji lebih besar) di sisi negara bagian yang diinginkan (mis. Jarak yang lebih rendah jika pengguna ingin menjadi lebih dekat).

Sejalan dengan itu, selain aksesibilitas (ini hanya contoh ilustratif) , jika semua yang Anda benar-benar coba lakukan adalah memberi kesan seberapa dekat pengguna dengan keadaan yang diinginkan daripada memberikan informasi akurat tentang jarak, indikator bisa sama sederhana seperti kotak statis yang memudar dari merah melalui misalnya kuning lalu menjadi hijau di negara target (baik itu lebih dekat atau lebih jauh), mungkin mendapatkan label, perbatasan, atau animasi ketika negara target [hampir] tercapai.

Opsi desain dalam jawaban lain di sini semuanya hebat, tetapi dari perspektif UX pastikan untuk memikirkan bagaimana Anda menggunakan desain itu dan apa yang Anda coba lakukan: Jika Anda berusaha mendorong pengguna untuk mencapai status target, Anda tidak ingin, misalnya, bilah Anda menjadi lebih pendek dan menghilang pada kondisi itu. Itu anti motivasi.

Secara anekdot (saya tidak punya bukti di tangan) Saya juga akan curiga bahwa lebih mudah bagi pengguna untuk memilih bilah terbesar dalam suatu kelompok dalam sekejap dibandingkan dengan yang terkecil. Saya kemudian akan membayangkan bahwa jika Anda memiliki beberapa indikator di layar Anda dan aplikasi Anda ingin agar pengguna dengan cepat menemukan yang "terbaik" (terdekat atau terjauh tergantung pada konteks), memiliki indikator yang lebih kuat mewakili negara yang lebih diinginkan akan membantu dalam hal ini.

Secara pribadi saya lebih suka irisan, dengan sisi yang lebih besar di sebelah kanan, berubah menjadi hijau saat mengisi, dan dengan semakin dekat sisi yang lebih besar ( dengan asumsi lebih dekat adalah tujuannya ), karena ini mengingatkan saya pada sinyal ponsel yang sekarang dikenal dan di mana-mana. meter (4 batang mengasyikkan, 1 tidak).

Saya pikir Anda harus membuat bilah semua satu warna, kemudian menggunakan penanda yang signifikan seperti panah atau bilah berwarna berbeda yang akan ditimpa secara vertikal untuk menunjukkan jarak relatif dari awal di kiri dan akhir di kanan. ( Sunting: Saya yakin istilah resmi adalah bilah geser)

Berikut adalah contoh dari gim di mana ikon karakter digunakan sebagai penanda dan ada lebih dari satu penanda:

Dan inilah contoh yang lebih realistis:

Sunting: (Sedikit alasan untuk saran saya)

Versi asli seperti yang disajikan dalam pertanyaan terlihat seperti bilah kemajuan yang diharapkan mewakili kemajuan, bukan jarak. Jika sesuatu yang tampak seperti bilah kemajuan (bahkan jika diberi label) mulai mundur, beberapa pengguna akan bingung karena terlihat terlalu tidak alami dan berlawanan dengan apa yang orang harapkan.

Dengan memiliki satu bar berwarna dengan beberapa bentuk marker, marker kemudian menjadi fokus dan terasa lebih alami bahwa itu harus dapat bergerak di sepanjang bar. Penambahan takik pada ini juga memberi pengertian bahwa beberapa bentuk pengukuran sedang terjadi (dalam hal ini jarak).