Jak przedstawiłbyś graficznie odległość?

Dobrze,

Może to być nieco „subiektywne”, ale szukam pomysłów.

Chcę przedstawić odległość jako wykres słupkowy (rodzaj), który staje się „pełniejszy”, im bliżej są ludzie.

Im dalej są, tym mniej wypełniony jest wykres słupkowy.

Nie jestem pewien, jak bym to reprezentował. Stworzyłem tę grafikę, aby pokazać ci mój proces myślowy.

Myślisz, że ludzie by to zrozumieli? Czy powinienem podać krawędzie „FAR” i „CLOSE”? A może po prostu wyświetlać odległość?

Czy ludzie zrozumieją, że gdy wypełnia się wykres słupkowy, ludzie są bliżej?

Czy powinienem też podać rzeczywistą odległość? (Metrów, km itp.) Lub całkowicie zrezygnować z wykresu słupkowego?

Jak przedstawiłbyś odległość graficznie, aby ludzie na pierwszy rzut oka mieli dobry pomysł, jak blisko lub daleko znajduje się ta druga osoba?

EDYCJA : Ok, więc porozmawiałem z klientem o więcej szczegółów, a oni wymyślili coś podobnego do kręgu podanego przez @Scott, gdzie obecny użytkownik jest „na środku”, a ludzie wokół niego są na „orbicie”. Gdzieś to widzieli i tego chcą, zamiast pokazywać odległość dla każdego użytkownika.

Będę musiał wyświetlać tekst w rodzaju „150m” lub „W pobliżu” zamiast wykresu słupkowego z odległością.

Chciałem jednak również podziękować KAŻDEMU za udzielenie odpowiedzi, niektóre przykłady są fantastyczne, uwielbiam je i daje świetny zestaw pomysłów do wykorzystania. Ponieważ „krótkie” nieco się zmieniło od początkowej prośby, doszedłem do wniosku, że najlepiej jest edytować to pytanie, aby uzyskać więcej informacji zwrotnych.

Zaktualizowany przykład z wykorzystaniem projektu klina. Dla jasności do wykresu dodano odległości próbek i tekst został usunięty.

Przykład z tekstem początkowym i końcowym

Ponieważ mały rozmiar jest czynnikiem wpływającym na urządzenia ręczne, oto dwie opcje oszczędzania miejsca 100 x 100 pikseli.

Burza mózgów oparta na najnowszych wymaganiach

Oto pomysł na oszczędność miejsca na urządzenia mobilne, który umieszcza aplikację w menu rozwijanym. Przy większym rozmiarze listy rozwijanej mapa może zawierać więcej informacji, takich jak etykiety użytkownika i siatkę odległości.

Wiele lat temu grałem w Amigę pod nazwą F19 Stealth Fighter. Interfejs użytkownika miał coś bardzo podobnego do tego, co opisujesz. W przypadku bomb, które zrzuciłeś, a nie wystrzeliłeś, pokazano ci linię z dwoma „słupkami” na każdym końcu zbliżającymi się do siebie, im bliżej celu.

Oto prosta nowoczesna reprezentacja:

Jeśli chcesz pokazać odległość między dwiema osobami, prawdopodobnie najbardziej intuicyjne jest pokazanie odległości między dwiema osobami. Na szorstkim makiecie poniżej znajduje się jakiś pasek, ale jest on skierowany do tyłu. Odległość jest wskazywana przez pozycję (poprzez przesunięcie osoby w prawo) i rozmiar (zmniejszenie osoby).

Jeśli chcesz uzyskać bardziej wskaźnik słupkowy, możesz pokolorować część trójkąta jak poniżej. I możesz dodać etykiety do linii.

Być może osoba „referencyjna” po lewej stronie może zostać upuszczona.

Wydaje mi się, że elementy odległości działają lepiej i są znacznie bardziej intuicyjne, ale odwróciłbym to nieco. Duży dystans powinien być długi i czerwony, krótki dystans powinien być krótki i zielony. To, co opublikowałeś, wydaje się być przeciwieństwem tego. Spodziewałbym się, że długie takty będą „dalekie” i będą czerwone.

Nie znając ogólnego układu, inną możliwością może być użycie koła z kropkami ....

Za pomocą utworzonego obrazu Talkingrock:

Myślę, że dla mnie najbardziej sensowne byłoby zamiana w następujący sposób:

Zaczyna się w Far Apart i świeci, gdy zbliżasz się razem. Myślę, że zmiana tekstu z „Dalekiego zamknięcia” na coś bardziej jak „Daleko od siebie”, „Razem” lub „Spotkania” lub coś wskazującego, że jego dwie osoby przybywają do jednego miejsca docelowego, pomogą w dalszym przekazaniu tego pomysłu.

Chcę przedstawić odległość jako wykres słupkowy (rodzaj), który staje się „pełniejszy”, im bliżej są ludzie.

Jest to jednak przeciwieństwo tego, co pokazuje wykres słupkowy. Im wyższa wartość, tym większy pasek. Chęć zrobienia czegoś wręcz przeciwnego prawdopodobnie spowoduje zamieszanie lub dysonans wizualny w rzeczywistych danych.

Aby punkt był nieco bardziej bezpośredni, zamień „daleko / blisko” na „duży / mały”. To po prostu nie miałoby sensu:

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

Dlatego uważam, że należy porzucić pomysł „przerzucania” skali za pomocą etykiet. Jeśli próbujesz komunikować się na większą odległość, pozwól, aby to wskazał duży pasek. To najbardziej intuicyjna korelacja.

Ale może rozwiązaniem wcale nie jest wykres słupkowy. Wygląda na to, że próbujesz zaimplementować jakąś metaforę „sygnału lokalizatora”. Im bliżej jesteś, tym silniejszy jest sygnał. Myślę, że to dobry pomysł, ale rozważ do tego grafikę inną niż wykres słupkowy. Może jakiś blip (lub kropka).

Pytasz, jak graficznie przedstawić odległość , ale wszystkie odpowiedzi wydają się polegać na tekście na obrazie (słowa „daleko” i „blisko” itp.). Dlatego sugeruję, abyś napisał „3 mile od siebie” lub „200m do przejścia” i używał dowolnego tła „miernika postępu”, które wypełnia się poziomo.

Podanie odległości numerycznej niekoniecznie jest przydatne w odniesieniu do osoby czytającej rzeczywiste liczby, ale liczby i jednostka miary na pierwszy rzut oka wyraźnie pokazują, co mierzysz, a jeśli zachodzi zmiana.

Twój kontekst nie jest jasny, ale jest ważny. Koncepcyjnie, czy odległość naprawdę jest tym, co chcesz reprezentować? A może chodzi o to, jak blisko użytkownik znajduje się w stanie, w którym chce się znaleźć, gdzie „odległość” jest właśnie miarą tego?

Weź pod uwagę, że to, co tak naprawdę próbujesz przedstawić, to stopień, w jakim użytkownik jest w stanie osiągnąć pożądany stan. Pożądany stan powinien mieć najsilniejsze wrażenie na ekranie.

Innymi słowy, w kontekście Twojej aplikacji, jeśli użytkownicy starają się być bliżej innych użytkowników, nie chcesz, aby pasek (lub cokolwiek) stawał się silniejszy z większą odległością, ponieważ to wrażenie jest dokładnym przeciwieństwem użytkowników cel.

Dotyczy to również kolorów; w schemacie czerwony -> zielony zazwyczaj chciałbyś, aby kolor zielony odpowiadał stanowi docelowemu, a kolor czerwony przeciwnie, więc jeśli użytkownicy starają się być bliżej, to chcesz, aby zieleń była na mniejszej odległości.

Mając to na uwadze, zrobią to zarówno pręty, jak i kliny, ale w obu przypadkach będziecie chcieli, aby pręty / kliny były zielone i pełne (a klin większy) po pożądanej stronie stanu (np. Mniejsza odległość, jeśli użytkownicy chcą być bliższy).

Wzdłuż tych linii, pomijając dostępność (jest to tylko przykładowy przykład) , jeśli naprawdę próbujesz zrobić wrażenie, że użytkownik jest bliżej pożądanego stanu niż podać dokładne informacje o odległości, wskaźnik może być tak prosty jak kwadrat statyczny, który zmienia kolor z czerwonego na np. żółty, a następnie zielony w stanie docelowym (czy to bliżej, czy dalej), być może uzyskując etykietę, ramkę lub animację, gdy stan docelowy jest [prawie] osiągnięty.

Opcje projektowania w innych odpowiedziach tutaj są świetne, ale z perspektywy UX pamiętaj o tym, jak korzystasz z tych projektów i co próbujesz zrobić: jeśli próbujesz zachęcić użytkowników do osiągnięcia stanu docelowego, nie chcę na przykład, aby twoje paski były krótsze i znikały w tym stanie. To jest motywacja.

Anegdotycznie (nie mam pod ręką żadnych dowodów) podejrzewałbym również, że łatwiej jest użytkownikowi wybrać największy pasek w grupie na pierwszy rzut oka, niż najmniejszy. Wyobrażam sobie wtedy, że jeśli masz wiele wskaźników na ekranie, a twoja aplikacja chce pozwolić użytkownikom szybko znaleźć „najlepsze” (najbliższe lub najdalsze w zależności od kontekstu), posiadanie silniejszego wskaźnika reprezentuje bardziej pożądane stany w tym względzie.

Osobiście wolę klin, który ma większy bok po prawej stronie, zmieniając kolor na zielony, gdy się wypełnia, i bliżej będąc większym bokiem ( zakładając, że cel jest bliższy ), ponieważ przypomina mi to znany i wszechobecny sygnał telefonu komórkowego metr (4 słupki są ekscytujące, 1 nie jest).

Myślę, że powinieneś zrobić pasek w jednym kolorze, a następnie użyć znacznika, takiego jak strzałka lub pasek w innym kolorze, przesuwający się pionowo, aby pokazać względną odległość od początku po lewej stronie i końca po prawej stronie. ( Edytuj: Uważam, że oficjalny termin to suwak)

Oto przykład z gry, w której ikony postaci są używane jako znacznik i występuje więcej niż jeden znacznik:

A oto bardziej realistyczny przykład:

Edycja: (Trochę uzasadnienia mojej sugestii)

Oryginalne wersje przedstawione w pytaniu zbyt przypominają paski postępu, które powinny reprezentować postęp, a nie odległość. Jeśli coś, co wygląda jak pasek postępu (nawet jeśli jest oznaczony), zaczyna się cofać, niektórzy użytkownicy będą zdezorientowani, ponieważ wygląda to zbyt nienaturalnie i jest sprzeczne z intuicją w stosunku do oczekiwań ludzi.

Dzięki jednokolorowemu słupkowi z jakąś formą znacznika znacznik staje się ogniskiem i wydaje się bardziej naturalny, że powinien być w stanie poruszać się w dowolnym kierunku wzdłuż paska. Dodanie do tego wycięć daje również poczucie, że trwa pewna forma pomiaru (w tym przypadku odległość).