Как бы вы изобразили расстояние графически?

12

В порядке,

Так что это может быть несколько «субъективно», но я ищу некоторые идеи.

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

Чем они дальше, тем менее полна гистограмма, если хотите.

Я не уверен, как бы я это представлял. Я создал этот рисунок, чтобы показать вам мой мыслительный процесс.

расстояние показано графически

Как вы думаете, люди поймут? Должен ли я указать края "FAR" и "CLOSE"? Или просто показать расстояние?

Понимают ли люди, что по мере заполнения гистограммы люди становятся ближе?

Должен ли я также указать фактическое расстояние? (Метры, километры и т. Д.?) Или вообще отказаться от гистограммы?

Как бы вы изобразили расстояние графически, чтобы люди, на первый взгляд, имели представление о том, насколько близко или далеко находится другой человек?

РЕДАКТИРОВАТЬ : Хорошо, поэтому поговорили с клиентом для получения более подробной информации, и что они придумали, было что-то похожее на круг, который предоставил @Scott, где текущий пользователь находится «в середине», а люди вокруг пользователя находятся на «орбите». Они где-то видели это и хотят этого, а не показывают расстояние для каждого пользователя.

Поэтому мне придется отображать текст, например, «150 м» или «Рядом», а не гистограмму с расстоянием.

Тем не менее, я также хотел бы поблагодарить ВСЕХ за предоставление ответов, некоторые примеры фантастические, я люблю их, и это дает отличную панель идей, на которые можно опираться. Поскольку «краткое» несколько изменилось по сравнению с первоначальным запросом, я решил, что лучше всего отредактировать этот вопрос, чтобы получить еще больше отзывов.

газировка
источник
1
Это может помочь, если вы добавите некоторый контекст - в частности, какое расстояние вы пытаетесь изобразить и для какой цели?
Илмари Каронен
Я думаю, что решения Райана и Скотта Брауна идут в правильном направлении. НО цвет для «дальнего» должен быть голубым или синим, а не зеленым ... красный для «близкого» - это нормально.
Сандра
Обратите внимание, что использование одних только цветов может нарушить доступность для людей с дальтонизмом и проблемами зрения.
Турбьёрн Равн Андерсен
3
В контексте вашего заявления, цель состоит в том, чтобы люди были ближе или дальше? Вы хотели бы представить на экране более сильное впечатление о желаемом состоянии; так что если пользователи стремятся быть ближе к другим пользователям, вы не хотите дальше быть самое сильное впечатление (например , вы хотите , чтобы заполнить бар как люди становятся ближе, или использовать клин с большей стороне для более тесного). Возможно, вы захотите задать этот вопрос на сайте ux.stackexchange.com. Я думаю, что вы получите более качественный совет относительно этой концепции, а затем вернетесь сюда для графического представления этой концепции.
Джейсон С
Когда я вижу «расстояние», за которым следует длинная линия, я думаю «далеко», тогда как ваша графика должна указывать «близко».
Дэвид Ричерби

Ответы:

14

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

введите описание изображения здесь

Пример с начальным и конечным текстом

введите описание изображения здесь

Так как малый размер является фактором для портативного устройства, здесь есть два варианта экономии пространства 100 на 100 пикселей.

введите описание изображения здесь

введите описание изображения здесь


Мозговой штурм на основе последних требований

Вот идея экономии места для мобильных устройств, которая помещает приложение в выпадающий список. При большем размере раскрывающегося списка карта может содержать больше информации, например, метки пользователя и сетку расстояний.

введите описание изображения здесь

Talkingrock
источник
2
Возможно, это должно быть большое близко и тонко далеко ... Просто идея, что объекты рядом, как правило, больше.
Джуджаа
не эти цифры в обратном направлении? Или этикетки? :)
Скотт
1
Да, я понимаю, что это был просто быстрый макет. Вот почему был смайлик :)
Скотт
@ Scott, +1 за хорошее предложение и дружеский комментарий :) Для ясности были добавлены новые макеты.
Talkingrock
12

Несколько лет назад у меня была игра Amiga под названием F19 Stealth Fighter. В HUD было что-то очень похожее на то, что вы описываете. Для бомб, которые вы сбрасывали, а не стреляли, вам показывали линию с двумя «постами» на каждом конце, которые становились ближе друг к другу, чем ближе к цели.

Вот простое современное представление:

введите описание изображения здесь

Скотт Браун
источник
О, мне это очень нравится.
Гонки легкости на орбите
8

Если вы хотите показать расстояние между двумя людьми, возможно, наиболее интуитивно понятно показать расстояние между двумя людьми. В грубом макете ниже есть еще какая-то полоса, но она указывает назад. Расстояние показывается положением (при перемещении человека вправо) и размером (уменьшение человека).

введите описание изображения здесь

Если вы хотите больше индикатора в виде столбцов, вы можете закрасить часть треугольника, как показано ниже. И вы можете добавить метки к строкам.

введите описание изображения здесь

Возможно, «справочный» человек слева может быть отброшен.

джан
источник
7

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

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

Скотт
источник
Итак, длинная «красная» линия для дальних и короткая и «зеленая» рядом. Так что просто держите название «Расстояние»?
газированный напиток
1
@fizzydrink да. Для меня "далеко" всегда будет красным. И большее расстояние будет означать более длинный бар. Это, конечно, просто моя интерпретация и то, как я бы интуитивно читал вещи сам.
Скотт
1
Регулировка цвета помогает, но круг гораздо больше. Расстояние между движущимися объектами нуждается в точке сближения, чтобы иметь много смысла ИМО
Райан
Может ли круг "вписаться" в приложение для iphone? Представьте себе список людей, каждый со своей строкой, примерно 100 пикселей, с изображением профиля слева. Могу ли я использовать круг? Или, возможно, использовать идею круга на наложении карты ...
газированный напиток
1
Как я уже писал ... понятия не имею об общем макете и если бар был обязательным :) Звучит так, как будто это так.
Скотт
5

Используя изображение Talkingrock создано:

введите описание изображения здесь

Я думаю, что было бы для меня самым разумным сделать это так:

введите описание изображения здесь

Начинается в дальнем расстоянии и загорается, когда вы приближаетесь. Я думаю, что изменение текста с «Дальнего расстояния» на что-то более похожее на «Далеко друг от друга», «Вместе» или «Встреча» или что-то, указывающее, что два человека прибывают в один пункт назначения, поможет донести идею дальше.

Райан
источник
Смотри, моя интерпретация (будучи англоговорящей) заключается в том, что точка схождения - это левый край. Чем длиннее гистограмма, тем дальше правый край, отображая таким образом расстояние.
Скотт
Вы говорите о втором, «Дистанционном», а не о «Дальнем / Близком»?
Райан
Правильно, первый в моих глазах непригоден.
Скотт
1
Вы бы хотели, чтобы больший конец был тем, что вы хотите ; так что если в контексте этого приложения желательно, чтобы кто-то находился далеко, то этот пример имеет смысл. Если кому-то желательно быть рядом, это должно быть наоборот.
Джейсон C
1
@Ryan Если желаемое состояние в контексте этого приложения для пользователей быть ближе друг к другу, то более четкое указание на то, что пользователи находятся дальше друг от друга, привлекает больше внимания к нежелательному состоянию. Если цель состоит в том, чтобы мотивировать пользователей для достижения желаемого состояния, то наличие более сильного индикатора, представляющего желаемое состояние, будет параллельно этой цели. Подумайте также, например, о вездесущем измерителе уровня сигнала на сотовых телефонах - всегда есть мотивация иметь «4 бара», а не мотивировать иметь 1
Джейсон С.
3

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

Это противоположно тому, что показывает гистограмма. Чем выше значение, тем больше планка. Желание сделать прямо противоположное может привести к путанице или визуальному диссонансу к фактическим данным.

Чтобы сделать точку чуть более прямой, замените «далеко / близко» на «большой / маленький». Это просто не имеет никакого смысла:

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

Поэтому я думаю, что вам нужно отказаться от идеи «перевернуть» шкалу с помощью меток. Если вы пытаетесь общаться на большем расстоянии, позвольте большой полосе указать это. Это самая интуитивная корреляция.

Но, возможно, решение вовсе не гистограмма. Похоже, вы пытаетесь реализовать какую-то метафору «сигнал локатора». Чем ближе вы, тем сильнее сигнал. Я думаю, что это хорошая идея, но для этого рассмотрим визуальное, а не гистограмму. Может быть, «блик» (или точка) какого-то рода.

DA01
источник
3

Вы спрашиваете, как изобразить расстояние графически , но все ответы, похоже, основаны на тексте на изображении (слова «далеко» и «близко» и т. Д.). Поэтому я предлагаю вам просто написать «3 мили друг от друга» или «200 метров до конца» и использовать любой фон «индикатора прогресса», который заполняется горизонтально.

Указание числового расстояния не обязательно полезно с точки зрения человека, читающего фактические числа, но числа и единица измерения действительно позволяют сразу понять, что именно вы измеряете, и происходит ли изменение.

Магнус Смит
источник
3

Ваш контекст не ясен, но важен. Концептуально, расстояние действительно то, что вы хотите изобразить? Или это действительно представление о том, насколько близок пользователь к состоянию, в котором он стремится быть, где «расстояние» как раз и является метрикой для этого?

Представьте , что вы на самом деле пытаетесь представить, насколько близок пользователь к достижению желаемого состояния. Желаемое состояние должно получить самое сильное впечатление на экране.

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

Это касается и цветов; в схеме «красный -> зеленый» вы обычно хотите, чтобы зеленый цвет соответствовал целевому состоянию, а красный - наоборот, поэтому, если пользователи стремятся быть ближе, то вы хотите, чтобы зеленый цвет был на меньшем расстоянии.

Имея это в виду, подойдут либо стержни, либо клин, но в любом случае вы захотите, чтобы стержни / клин были зелеными и полными (и клин больше) на желаемой стороне состояния (например, на меньшем расстоянии, если пользователи стремятся быть ближе).

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

Все варианты дизайна в других ответах здесь великолепны, но с точки зрения UX обязательно подумайте о том, как вы используете эти проекты и что вы пытаетесь сделать: если вы пытаетесь побудить пользователей достичь целевого состояния, вы не хотите, например, чтобы ваши бары становились короче и исчезали в этом состоянии. Это анти-мотивация.

Неожиданно (у меня нет под рукой доказательств), я также подозреваю, что пользователю проще выделить самый большой столбец в группе, чем наименьший. Я бы тогда предположил, что если у вас на экране несколько индикаторов, а ваше приложение хочет, чтобы пользователи быстро находили «лучшие» (самые близкие или самые дальние в зависимости от контекста), то наличие более сильного индикатора, представляющего более желательные состояния, поможет в этом отношении.

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

Джейсон С
источник
То, что я хочу, это расстояние пользователей по сравнению с расстоянием текущего пользователя, тому, кому отображается «расстояние»
шипучий напиток
@fizzydrink Почему эта информация важна для человека, использующего приложение? (Несмотря на то, что вы видите, что проблема решена, тема теперь более академическая.)
Jason C
Это приложение, учитывающее местоположение, где вы получаете результаты, основанные на расстоянии других пользователей вокруг вас. Как близко они находятся к вашему текущему местоположению, в пределах, скажем, 500 метров или ближе.
газированный напиток
3

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

Вот пример из игры, где значки персонажей используются в качестве маркера, и присутствует более одного маркера: Sonic A2B Slider

А вот более реалистичный пример: Ползунок

Изменить: (немного оправдания для моего предложения)

Исходные версии, представленные в вопросе, слишком похожи на индикаторы выполнения, которые, как ожидается, будут представлять прогресс, а не расстояние. Если что-то, что похоже на индикатор выполнения (даже если он помечен), начинает двигаться назад, некоторые пользователи будут сбиты с толку, потому что это выглядит слишком неестественно и противоречит тому, что люди ожидают.

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

Pharap
источник