Изображения сопровождают человека на протяжении всей его тысячелетней истории; древний человек рисовал картины на камнях, изображающие его победы на охоте, египтяне использовали письменную систему основанную на иероглифах, а в начале своей истории в христианской традиции существовала своя особая символика. Изображения всегда имели две функции на протяжении всей человеческой истории, это информирование и обучение. Изображение и в настоящее время играют важную роль в нашей повседневной жизни. Как специалисты своей отрасли, мы должны быть уверены, что используем правильные изображения для представления действий, и информирования пользователей.
В процессе развития сети, в отрасли уже успел сформироваться определенный набор иконок, несущих конкретное, понятное любому пользователю значение. Например, иконка, изображающая мусорную корзину, понимается пользователями всего мира, как удаление, а конверт – пришедшее письмо или сообщение. Иконки являются визуальными подсказками пользователю на пути достижения поставленных им задач. Значение некоторых иконок так сильно, что иконка само по себе указывает на определенное действие, не требуя дополнительных подсказок в виде текста. Смысл, который несут такого рода иконки, понятен носителю любого языка, они преодолевают языковой барьер, создавая свой собственный визуальный язык. В своей работе мы должны использовать правильные иконки, чтобы достигать целей коммуникации между пользователем и сетью.
В настоящее время сеть находиться в переходном периоде. Наверное, это самый новаторский этап ее жизни, за все время ее существования. В своих рассуждениях, я пойду еще дальше и скажу, что в настоящее время мы находимся в самом эпицентре развития такой массовой и важной тенденции, как отзывчивый веб-дизайн. То как мы разрабатываем наши сайты влияет на то, как они будут отображаться на различных устройствах. Меню навигации – это тот элемент, который может претерпеть значительные изменения с развитием отзывчивого веб-дизайна.
Переход от большого контекста к небольшому часто требует изменения шаблона навигации, что-то редко можно было увидеть до появления отзывчивого веб-дизайна. Чем больше развивается отзывчивый веб-дизайн, тем больше обычные пользователи будут замечать новомодные навигационные решения, и они все реже будут спрашивать, а что это за кнопка?
Недавно Andy Clarke и Jeremy Keitht говорили о важности наличия стандартных значков для открытой, понятной навигации в небольшом контексте, и это правильно. Это новая техника и нам нужно узнать ожидания пользователей, и действовать относительно этого.
Три горизонтальные линии
Большинство отзывчивых сайтов, которые используют иконку, чтобы указать на скрытое меню, используют иконку с тремя горизонтальными линиями. К ним относятся такие известные сайты, как Starbucks, а также популярные приложения, Facebook и Path. Частично популярность этой иконки заключается в ее универсальности, а сам значок не несет в себе какую-то определенную цель, это может означать, что он может быть применен к различным навигациям на основе шаблонов проектирования, при этом разработчик не должен отдавать предпочтения какому-то определенному шаблону. Его неопределенность по форме не умоляет его значения, и благодаря этому, он становится новым стандартом, как новый термин, появляющийся в языке, и мы все знаем его значение. И начиная с известных сайтов, эта иконка постепенно уходит в массы и приобретает популярность и среди обычных частных сайтов пользователей.
Давайте посмотрим несколько примеров отзывчивых сайтов, где используется иконка с тремя горизонтальными линиями.
Twitter’s bootstrap демонстрирует три горизонтальные линии, как визуальный сигнал о том, что тут есть скрытое меню. Также эта иконка есть на всех остальных страницах сайта.
Webdagene - сайт конференций также использует этот шаблон для аналогичного скрытого меню, но в отличие от Twitter’s bootstrap ссылки открывают новую страницу вместо того, чтобы быть прикрепленным к ним. Два разных подхода к навигации при использовании одной и той же иконки.
dConstruct использует три горизонтальные линии, обозначающие меню, которое открывается в вверх. Обратите внимание, что хотя элементы здесь имеют квадратную форму, они по-прежнему используют горизонтальные линии, чтобы обозначить наличие скрытого меню.
Golden Grid System
Golden Grid System использует тот же значок, но для другой цели — нажатие на кнопку показывает активную в данный момент сетку.
Значок с тремя горизонтальными линиями является не только индикатором, как любая альтернатива традиционному, он имеет свои недостатки. В IOS, три горизонтальные линии используются для обозначения способности перестроить всю ширину элементов списка. Так что, возможно, это часть нашего языка символов еще не нашла окончательно свою нишу.
Альтернативные модели
Существуют и альтернативные модели, которые не так часто употребляется, как, например, иконка с сеткой на сайте Cognition by Happy Cog. Она могла бы обозначать, например, ускоренный набор или выход на главную страницу или любое другое действие. Также она может ввести в заблуждение менее опытных пользователей, в итоге, кликая на нее, они думаю, что переходят с этого сайта на какой-то другой.
Sony также не использует вариант иконки с тремя горизонтальными линиями, и выбирает для обозначения своего меню значок с символом +. Этот символ визуально приятен для пользователей, но изначально он имеет значение «добавлять что-то». То есть он может быть неправильно понят некоторыми не очень опытными пользователями, так как неточно доносит информацию о предполагаемом действии.
Скрытое меню на сайте Nathan Saway представлено иконкой, изображающей винтик, значение которого также может привести к путанице. В цифровых продукта, такая иконка, изображающая винтик, имеет устойчивое значение меню параметров настройки. Как результат в данном случае его значение искажено, что также может привести к путанице пользователей сайта, которые, думают, что это меню настроек, и нажмут на нее либо из любопытства, либо в поиске решения каких-либо возникших проблем.
Сайт этой компании имеет несколько творческих вариантов перевода, основой которых является единая навигация, представленная иконкой, изображающей стрелку, показывающую вниз. Глядя на иконку, понятно, что перед вами слайд-меню. Также она как бы намекает, что пользователю будет предложено <select> меню.
Microsoft недавно запустила новый отзывчивый сайт для представления своей продукции, который был мастерски разработан компанией Paravel с использованием нового языка Microsoft. Иконка, которая используется для обозначения скрытого меню на сайте, является хорошим примером метафоры “таблица контента”, которая сообщает пользователю о том, что клик по иконке даст возможность увидеть обзор имеющихся опций навигации.
Все эти примеры имеют одну и ту же цель и результат — Вы нажимаете на кнопку, и появляется меню. Но есть разница в том, как это действие представлено. Если иконки – своего рода визуальный язык, то мы посылаем смешанные сообщения, в которых заинтересована отзывчивая навигация. Сегодня мы имеем дело с новыми вариантами и технологиями, и пользователи, находящиеся по другую сторону наших продуктов, сейчас близки к интерфейсу нашей продукции как никогда. Благодаря сенсорному управлению пользователь максимально близок к интерфейсу нашей продукции. Следовательно, сообщения, которые мы ему передает должны быть понятными и точными. Иконка, как часть этого сообщения, должна последовательно и понятно доносить сообщение до пользователя. Как заявил Энди Кларк: “Нам нужна стандартная иконка, которая будет изображать отзывчивый веб-дизайн”.
“До тех пор, пока наша навигация расположена в сетке (и поэтому мы должны использовать соответствующие иконки), я ставлю все на иконку с тремя горизонтальными линиями, так как, по-моему, среди обычных пользователей …
Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров