Mesafeyi grafik olarak nasıl temsil edersiniz?

Tamam,

Bu biraz "sübjektif" olabilir ama bazı fikirler arıyorum.

Mesafeyi "daha dolgun" hale getiren bir çubuk grafik olarak göstermek istiyorum.

Ne kadar uzaklarsa, çubuk grafik o kadar dolu olur.

Bunu nasıl temsil edeceğimi bilmiyorum. Bu grafiği size düşünce sürecimi göstermek için hazırladım.

Sizce insanlar anlar mı? "FAR" ve "CLOSE" kenarlarını belirtmeli miyim? Ya da sadece mesafeyi göster?

İnsanlar çubuk grafik doldukça insanların daha yakın olduğunu anlayacaklar mı?

Ayrıca gerçek mesafeyi de belirtmeli miyim? (Ya metre, km, vb?) Veya çubuk grafiği tamamen mi terk ettiniz?

Mesafeyi grafiksel olarak nasıl temsil edersiniz, böylece ilk bakışta insanlar diğer kişinin ne kadar yakın veya uzak olduğu hakkında iyi bir fikre sahip olurlar mı?

DÜZENLEME : Tamam, bu yüzden daha fazla ayrıntı için müşteriyle konuştum ve ortaya çıkan şey, @Scott'un sağladığı çevreye benzeyen bir şeydi, mevcut kullanıcı "ortada" ve kullanıcı etrafındaki insanlar "yörüngede". Bunu bir yerde gördüler ve her kullanıcı için mesafeyi göstermek yerine bunu istiyorlar.

Bu nedenle, mesafeli bir çubuk grafiğin aksine "150m" veya "Etrafımda" gibi metinler göstermem gerekecek.

Bununla birlikte, cevaplar verdiği için HERKES'e de teşekkür etmek istedim, bazı örnekler harika, onları seviyorum ve üzerine çizmek için harika bir fikir paneli veriyor. "Kısa" ilk istek biraz değiştiğinden, daha fazla geri bildirim sağlamak için bu soruyu düzenlemek en iyisi olduğunu düşündüm.

Bir kama tasarımı kullanılarak güncellenen örnek. Açıklık için grafiğe örnek mesafeleri eklendi ve metin çıkarıldı.

Başlangıç ​​ve Bitiş metinleriyle örnek

Küçük boyut elde taşınır cihaz için bir faktör olduğundan, burada iki adet 100 piksele 100 piksellik yer tasarrufu seçeneği vardır.

En Son Gereksinimlere Dayalı Beyin Fırtınası

İşte uygulamayı açılır listeye yerleştiren mobil cihazlar için yerden tasarruf sağlayan bir fikir. Daha büyük bir açılır menü boyutuyla harita, kullanıcı etiketleri ve mesafe ızgarası gibi daha fazla bilgi içerebilir.

Yıllar önce F19 Stealth Fighter adında bir Amiga maçım vardı. Bu konudaki HUD, tarif ettiğinizle çok benzer bir şeye sahipti. Attığınız bombalar için kovulmak yerine, her iki ucunda bir hedefe yaklaştıkça birbirine yaklaşan iki 'yazı' içeren bir çizgi gösterildi.

İşte basit bir modern temsil:

İki kişi arasındaki mesafeyi göstermek istiyorsanız, muhtemelen iki kişi arasındaki mesafeyi göstermek en sezgiseldir. Aşağıdaki kaba modelde hala bir çeşit çubuk var, ancak geriye dönük. Mesafe konum (kişiyi sağa hareket ettirerek) ve boyuta (kişiyi daraltarak) göre gösterilir.

Daha fazla çubuk benzeri bir gösterge istediğinizde, üçgenin bir kısmını aşağıdaki gibi renklendirebilirsiniz. Ve çizgilere etiket ekleyebilirsiniz.

Belki de soldaki 'referans' kişi düşürülebilir.

Mesafelerin daha iyi çalıştığını ve çok daha sezgisel olduğunu düşünüyorum, ancak işleri tersine çevirirdim. Büyük mesafe uzun ve kırmızı, kısa mesafe kısa ve yeşil olmalıdır. Gönderdiğiniz şey bunun tersini okuyor gibi görünüyor. Uzun çubukların "uzak" ve kırmızı olmasını beklerdim.

Genel düzeninizi bilmeden, başka bir olasılık belki noktalı bir daire kullanmak ....

Talkingrock'un oluşturduğu resmi kullanarak:

Bence en mantıklı olan şey, böylesi bir takas için:

Far Apart'ta başlar ve birlikte yaklaştıkça yanar. Ben "Uzak Yakın" dan "Uzak Apart" "Birlikte" veya "Met" gibi bir şeye veya tek bir hedefe gelen iki kişi gösteren bir şey için metin değişikliği fikrin daha fazla iletişim yardımcı olacağını düşünüyorum.

Mesafeyi "daha dolgun" hale getiren bir çubuk grafik olarak göstermek istiyorum.

Bununla birlikte, bir çubuk grafiğin gösterdiği şeyin tam tersi. Değer ne kadar yüksek olursa, çubuk da o kadar büyük olur. Tam tersini yapmak istemeniz büyük olasılıkla gerçek verilere karışıklık veya görsel uyumsuzluk katacaktır.

Noktayı biraz daha doğrudan yapmak için 'uzak / yakın' yerine 'büyük / küçük' yazın. Bu hiç mantıklı değil:

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

Bu nedenle, ölçeği etiketlerle 'çevirme' fikrini bırakmanız gerektiğini düşünüyorum. Daha uzak bir mesafeyi iletmeye çalışıyorsanız, büyük çubuğun bunu belirtmesine izin verin. Bu en sezgisel korelasyon.

Ama belki de çözüm bir çubuk grafik değildir. Bir çeşit 'konum belirleyici sinyal' metaforu uygulamaya çalıştığınız anlaşılıyor. Ne kadar yakın olursanız, sinyal o kadar güçlü olur. Bence bu iyi bir fikir, ama bunun için bir çubuk grafik dışında bir görsel düşünün. Belki bir çeşit 'blip' (veya nokta).

Mesafeyi grafik olarak nasıl temsil edeceğinizi sorarsınız , ancak tüm cevaplar görüntüdeki metne ("uzak" ve "kapalı" vb.) Dayanıyor gibi görünüyor. Bu nedenle sadece "3 mil arayla" veya "gitmek için 200m" yazmanızı ve yatay olarak doldurulan herhangi bir 'ilerleme ölçer' arka planını kullanmanızı öneririm.

Sayısal mesafeyi vermek, gerçek sayıları okuyan bir kişi için mutlaka yararlı değildir, ancak sayılar ve ölçüm birimi, bir bakışta neyi ölçtüğünüzü ve bir değişiklik olup olmadığını tamamen netleştirir.

Bağlamınız net değil ama önemlidir. Kavramsal olarak, mesafe gerçekten temsil etmek istediğiniz şey midir? Ya da aslında bir kullanıcının içinde olmak istediği duruma ne kadar yakın olduğunu temsil etmekle mi ilgili, "mesafe" sadece bunun için bir ölçüt olur mu?

Aslında temsil etmeye çalıştığınız şeyin bir kullanıcının istenen bir duruma ulaşmak için ne kadar yakın olduğunu düşünün . İstenilen duruma ekranda en güçlü izlenim verilmelidir.

Diğer bir deyişle, uygulamanız bağlamında, kullanıcılar diğer kullanıcılara daha yakın olmak isterse , bu gösterim kullanıcıların tam tersi olduğu için daha fazla mesafe ile güçlenen bir çubuk (veya herhangi bir şey) istemezsiniz. hedef.

Bu renkler için de geçerli; kırmızı -> yeşil bir şemada genellikle yeşilin hedef duruma karşılık gelmesini ve tam tersi kırmızı olmasını istersiniz, böylece kullanıcılar daha yakın olmak istiyorsa yeşilin daha küçük bir mesafe olmasını istersiniz.

Bunu göz önünde bulundurarak, çubuklar veya kama yapacak, ancak her iki durumda da, çubukların / kamanın istenen durum tarafında yeşil ve dolu (ve kama daha büyük) olmasını istersiniz (örneğin, kullanıcılar olmak isterse daha düşük mesafe) yakın).

Bu çizgiler boyunca erişilebilirlik bir yana (bu sadece açıklayıcı bir örnektir) , gerçekten yapmaya çalıştığınız tek şey, bir kullanıcının mesafe hakkında doğru bilgi vermek yerine istediği duruma ne kadar yakın olduğu hakkında bir izlenim vermekse, bir gösterge hedef durumdaki (daha yakın veya daha uzak olsun) kırmızıdan sarıya ve sonra yeşile dönen statik bir kare kadar basittir, belki de hedef duruma [neredeyse] ulaşıldığında bir etiket, kenarlık veya animasyon kazanır.

Buradaki diğer yanıtlardaki tasarım seçeneklerinin hepsi harika, ancak bir UX perspektifinden baktığınızda, bu tasarımları nasıl kullandığınızı ve ne yapmaya çalıştığınızı düşünün: Kullanıcıları hedef duruma ulaşmaya teşvik ediyorsanız, örneğin çubuklarınızın bu durumda kısalmasını ve yok olmasını istemeyin. Bu anti-motivasyon.

Anekdot olarak (elimde kanıt yok) Ayrıca, bir kullanıcının bir grubun en küçük çubuğunu en küçüğün aksine bir bakışta seçmesinin daha kolay olduğundan şüphelenirim. Daha sonra, ekranınızda birden fazla gösterge varsa ve uygulamanızın kullanıcıların "en iyi" (içeriğe bağlı olarak en yakın veya en uzak) hızlı bir şekilde bulmasına izin vermek istiyorsa, daha güçlü göstergenin bu konuda yardımcı olacak daha arzu edilen durumları temsil etmesini hayal ediyorum.

Şahsen ben daha tanıdık ve her yerde bulunan cep telefonu sinyalini anımsatan , daha büyük tarafı sağa döndüğünde, yeşile döndüğünde ve daha büyük tarafı daha yakın olduğunda (hedefin daha yakın olduğunu varsayarak ) bir kama tercih ederim. metre (4 bar heyecan verici, 1 değil).

Çubuğu tek bir renk haline getirmeniz, ardından soldaki başlangıçtan sağdaki sondan göreceli mesafeyi göstermek için dikey olarak üst üste binen ok gibi önemli bir işaretleyici kullanmanız gerektiğini düşünüyorum. ( Düzenleme: Resmi terimin bir kaydırma çubuğu olduğuna inanıyorum)

İşaretçi olarak karakter simgelerinin kullanıldığı ve birden fazla işaretleyicinin bulunduğu bir oyundan bir örnek:

İşte daha gerçekçi bir örnek:

Düzenle: (Benim önerim için biraz gerekçe)

Soruda sunulan orijinal versiyonlar, mesafeyi değil, ilerlemeyi temsil etmesi beklenen ilerleme çubuklarına çok benzemektedir. İlerleme çubuğuna benzeyen bir şey (etiketli olsa bile) geriye doğru gitmeye başlarsa, bazı kullanıcılar kafaları karışır, çünkü çok doğal görünmez ve insanların beklediğine karşı sezgiseldir.

Bir tür işaretleyici içeren tek bir renkli çubuğa sahip olarak işaretleyici odak haline gelir ve çubuk boyunca her iki yönde de hareket edebilmesi daha doğal hisseder. Buna çentik eklenmesi, bir tür ölçümün devam ettiği hissini de verir (bu durumda mesafe).