Является ли следующий дизайн навигации читабельным?

Я использовал библиотеку JavaScript D3 для создания линейного навигатора постов на основе времени для своего личного блога, который значительно отличается от «традиционного» способа связывания постов вместе. Я хотел собрать некоторые отзывы о том, работает ли этот дизайн: и, более конкретно, есть ли визуальные элементы, которые я могу добавить, чтобы усилить «очевидность» панели навигации.

Здесь он не активирован:

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

Узлы активируются при наведении на них курсора:

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

Мой большой вопрос: этот дизайн функционально очевиден?
и что можно сделать, чтобы сделать это больше?

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

Ответы (1)

Тут довольно большие проблемы .

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

  1. Находится в неудобном для навигации месте - большинство вверху. Это больше похоже на функциональность типа «предварительный просмотр другого поста», а не на классическую навигацию. Я думаю, что позиция в порядке, если это ваша цель.
  2. Он действительно небольшой по высоте — он выглядит почти как странно выглядящая граница, а не то, на что нужно наводить курсор.
  3. Цвета бледные - совсем не цепляют глаз.

Нет никаких указаний на то, что делает наведение на них, пока это не сделает пользователь . Таким образом, пользователи понятия не имеют, наводить его или нет. Это не похоже ни на что, к чему я привык, поэтому я, вероятно, обычно не буду пытаться наводить на него курсор; Я могу случайно.

Не всегда легко наводить курсор на отдельные круги . Если вы разместили некоторые прямо рядом друг с другом, они перекрываются. Я предполагаю, что если вы опубликуете два одновременно, они будут точно друг над другом. Это не очень удобно. Чем больше расстояние между постами, тем хуже. Так что, если вы не публиковали какое-то время, а затем публиковали, шкала будет состоять из целой группы, сгруппированной вместе, а затем отдельной, потому что местоположение основано на времени.

Это было бы ужасно на мобильных устройствах . Было бы очень трудно коснуться правильного круга, особенно когда они перекрываются. Кроме того, они будут слепо переходить к другому посту, потому что предварительный просмотр отображается только при наведении курсора. Это недопустимо!

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


Таким образом, вот некоторые улучшения:

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

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

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

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

Вот что я себе представляю:

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

Хорошо --- вы что-то выигрываете, что-то проигрываете. Принимая во внимание то, что вы сказали, а также мое собственное желание не иметь дело (и писать код для) с категоризацией сообщений и ссылками, я собрал систему, которая случайным образом обслуживает страницы, используя дизайн коробки, такой как (2) ( 3) (4) в каркасе. Взгляните . Иногда он обслуживает страницу, на которой вы уже находитесь (написать средство проверки технически довольно просто, но блэх), но в остальном он должен работать хорошо. Мысли?
@ResMar Я просмотрел вашу ссылку в Firefox, и она вообще не показывала новый дизайн коробки, поэтому я закрыл Firefox и снова открыл его по той же ссылке, и в этот раз она тоже не показывалась. У меня не было проблем с просмотром в Chrome, но последнее навигационное изображение справа постоянно обрезается наполовину «за пределами экрана». Если бы было что-то вроде стрелки, я мог бы использовать ее, чтобы переместить последнее изображение влево, чтобы я мог видеть все это. Firefox и Chrome обновлены до последних версий.
@ResMar Это гораздо полезнее! Чтобы мы могли критиковать что-то подобное, вы должны задать новый вопрос, поскольку на этот вопрос был дан ответ.