Як би ви зобразили відстань графічно?

Гаразд,

Тож це може бути дещо "суб'єктивно", але я шукаю деякі ідеї.

Я хочу представити відстань у вигляді гістограми (роду), яка стає "повнішою", чим ближче люди.

Чим далі вони, тим менше заповнена гістограма, якщо ви хочете.

Я не впевнений, як би я це представляв. Я створив цю графіку, щоб показати вам мій процес роздумів.

Як ви думаєте, люди зрозуміли б? Чи слід вказати ребра "FAR" та "CLOSE"? Або просто відстань відображення?

Чи зрозуміли б люди, що по мірі заповнення гістограми люди стають ближче?

Чи повинен я також вказати фактичну відстань? (Або метри, км тощо?) Або взагалі відмовилися від гістограми?

Як би ви зобразили відстань графічно, щоб люди з першого погляду мали гарне уявлення про те, наскільки близько чи далеко знаходиться інша людина?

EDIT : Гаразд, тому розмовляв із клієнтом для отримання більш детальної інформації, і те, що вони придумали, було щось подібне до кола, яке надав @Scott, де поточний користувач знаходиться "посередині", а люди навколо користувача перебувають на "орбіті". Вони бачили це десь і хочуть цього, на відміну від показу відстані для кожного користувача.

Тому мені доведеться відображати текст на зразок "150 м" або "Поруч" на відміну від гістограми з відстані.

Однак я хотів би також подякувати ВСІМ за надання відповідей, деякі приклади є фантастичними, я їх люблю, і це дає велику групу ідей, на яких можна звернутись. Оскільки "короткий" дещо змінився від початкового запиту, я подумав, що найкраще відредагувати це запитання, щоб надати ще кілька відгуків.

Оновлений приклад з використанням клинового дизайну. Для наочності до графіка додали вибіркові відстані, а текст видалили.

Приклад із початком та завершенням тексту

Оскільки невеликий розмір є фактором для КПК, ось два варіанти 100px на 100px економії місця.

Мозковий штурм на основі останніх вимог

Ось ідея економії місця для мобільних пристроїв, яка розміщує додаток у спадному меню. Зі збільшенням розміру спаду карта може містити більше інформації, як мітки користувачів та сітка відстані.

Роки тому в мене була гра Amiga під назвою F19 Stealth Fighter. HUD щодо цього мала щось дуже схоже на те, що ви описуєте. За бомби, які ви скинули, а не стріляли, вам показали лінію з двома "постами" на кожному кінці ближче один до одного ближче, коли ви потрапили до цілі.

Ось просте сучасне подання:

Якщо ви хочете показати відстань між двома особами, можливо, найінтуїтивніше показати відстань між двома особами. У грубому макеті внизу ще є якась смужка, але вона спрямована назад. Відстань показується положенням (переміщенням людини вправо) та розміром (скорочення людини).

Якщо ви хочете більше індикатора штрихового вигляду, ви можете розфарбувати частину трикутника як нижче. І ви можете додати мітки до рядків.

Можливо, "посилальна" особа зліва може бути відхилена.

Я думаю, що пункти на відстані працюють краще і набагато інтуїтивніше, але я б трохи змінив речі. Велика відстань повинна бути довгою і червоною, коротка відстань повинна бути короткою і зеленою. Те, що ви розмістили, здається, читає протилежне до цього. Я б очікував, що довгі смужки будуть "далеко" та будуть червоними.

Не знаючи загального плану, ще одна можливість, можливо, використовувати коло з крапками ....

Використовуючи створене зображення Talkingrock:

Я думаю, що для мене було б найбільш сенсом, щоб це було замінено так:

Починається в Far Apart і загоряється, коли ви підходите разом. Я думаю, що зміна тексту з "Далекого Близького" на щось більше, як "Далекий Апарт", "Разом" або "Зустрілися", або щось, що вказує, що двоє людей, які прибувають до одного пункту призначення, допоможуть подати ідею далі.

Я хочу представити відстань у вигляді гістограми (роду), яка стає "повнішою", чим ближче люди.

Це все навпаки того, що показує гістограма. Чим вище значення, тим більша планка. Бажаючи зробити навпаки, швидше за все, це додасть сплутаності чи візуального дисонансу фактичним даним.

Щоб зробити пункт трохи більш прямим, замініть "далеко / близько" на "великий / малий". Це просто не мало б сенсу:

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

Тому я думаю, що вам потрібно відмовитися від ідеї "перевернути" шкалу з мітками. Якщо ви намагаєтесь спілкуватися на більшій відстані, нехай велика смуга вказує на це. Це найбільш інтуїтивна кореляція.

Але, можливо, рішення зовсім не є гістограмою. Здається, ви намагаєтесь реалізувати якусь метафору "сигналу локатора". Чим ближче ви, тим сильніше сигнал. Я думаю, що це гарна ідея, але для цього розгляньте інше, ніж графік. Можливо, якийсь "блиск" (або крапка) якогось.

Ви запитуєте, як зобразити відстань графічно , але всі відповіді, здається, покладаються на текст усередині зображення (слова "далеко" та "закрити" тощо). Тому я пропоную вам просто написати «3 милі один від одного» або «200 м іти» і використовувати будь-який фон «метр прогресу», який заповнюється горизонтально.

Дати числову відстань не обов'язково корисно для людини, яка читає фактичні числа, але цифри та одиниці вимірювання дають зрозуміти з першого погляду, що ви вимірюєте, і якщо відбулася зміна.

Ваш контекст не зрозумілий, але важливий. Концептуально чи насправді відстань є тим, що ви хочете представляти? Або це насправді про те, щоб представити, наскільки близький користувач до стану, в якому він прагне бути, де "відстань" просто є показником для цього?

Подумайте, що те, що ви насправді намагаєтесь представити, - це наскільки близький користувач до досягнення бажаного стану. Бажаний стан повинен справляти найсильніші враження на екрані.

Іншими словами, у контексті вашої програми, якщо користувачі прагнуть бути ближчими до інших користувачів, ви не хочете, щоб бар (або що-небудь) зміцнювався на великій відстані, оскільки таке враження є прямо протилежним користувачам " мета.

Це стосується і кольорів; у червоно - зеленій схемі, як правило, ви хочете, щоб зелений відповідав цільовому стану, а червоний - навпаки, тож якщо користувачі прагнули бути ближче, то ви хочете, щоб зелений був на меншій відстані.

Зважаючи на це, або бруски, або клин будуть робити, але в будь-якому випадку ви хочете, щоб бруски / клин були зеленими та повними (і клин більший) на потрібній стороні (наприклад, менша відстань, якщо користувачі прагнуть бути ближче).

За цими лініями доступність в сторону (це лише наочний приклад) , якщо все, що ви насправді намагаєтеся, це створити враження про те, наскільки користувач близький до потрібного стану, а не давати точну інформацію про відстань, показник може бути таким, як простий як статичний квадрат, який вицвітає від червоного, наприклад, від жовтого до зеленого в цільовому стані (будь то ближче чи далі), можливо, отримуючи мітку, облямівку або анімацію, коли цільовий стан [майже] досягнуто.

Варіанти дизайну в інших відповідях тут чудові, але з точки зору UX не забудьте подумати про те, як ви використовуєте ці конструкції та що ви намагаєтеся зробити: Якщо ви намагаєтесь заохотити користувачів досягти цільового стану, ви не хочете, наприклад, щоб ваші бари скорочувалися і зникали в такому стані. Це антимотивація.

Анекдотично (у мене немає ніяких доказів) я також підозрюю, що користувачеві легше вибрати найбільшу смугу в групі на перший погляд, на відміну від найменшої. Тоді я б уявив, що якщо у вас на екрані кілька індикаторів, і ваша програма хоче дозволити користувачам швидко знайти "найкраще" (найближче чи найдальше, залежно від контексту), то, якщо більш сильний показник представляє, більш бажані стани допоможуть у цьому плані.

Особисто я віддаю перевагу клину, коли більша сторона праворуч стає зеленою, коли вона заповнюється, і ближчою є більша сторона ( якщо припустити, що ближче це мета ), оскільки це нагадує для мене вже знайомий і всюдисущий сигнал стільникового телефону метр (4 бари - захоплююче, 1 - ні).

Я думаю, що ви повинні зробити смужку всього одного кольору, а потім використати знаковий маркер, як стрілка чи інший кольоровий штрих, який буде вертикально накладений, щоб показати відносну відстань від початку зліва та до кінця праворуч. ( Редагувати: я вважаю, що офіційний термін - це слайдер)

Ось приклад з гри, де значки символів використовуються як маркер, а більше одного маркера:

І ось більш реалістичний приклад:

Редагувати: (Трохи виправдання для моєї пропозиції)

Оригінальні версії, представлені у запитанні, виглядають занадто схожими на смуги прогресу, які, як очікується, представлятимуть прогрес, а не відстань. Якщо щось, що схоже на смугу прогресу (навіть якщо воно позначене), починає повертатися назад, деякі користувачі будуть плутатись, оскільки це виглядає занадто неприродно і є протиінтуїтивним щодо того, що люди очікують.

Маючи одноколірну смужку з деякою формою маркера, маркер потім стає фокусом, і відчувається більш природним, що він повинен мати можливість рухатися в будь-якому напрямку вздовж смуги. Додавання насічок до цього також дає сенс, що відбувається деяка форма вимірювання (в даному випадку відстань).