Интерфейсы приложений, веб-сайтов, устройств – способы коммуникации и получения информации человеком. Веб-сайт для пользователей, в свою очередь, способ достижения некой глобальной цели и задача веб-дизайнера – создать такой интерфейс, который поможет посетителям быстро достичь этой самой цели. Одним из вариантов решения этой непростой, в некотором роде, задачи является использование иконок и значков в интерфейсе, так как они способны передать смысл, не используя слова. Пользователи же могут бегло разобраться в работе и функционале интерфейса, просто изучая визуальные элементы и периодически взаимодействуя с ними.
В данном материале мы рассмотрим некоторые интересные идеи использования иконок для улучшения качества интерфейса сайтов. Да, мы и раньше затрагивали эту тему, но несколько в ином русле. Поэтому повторов не будет. Отметим, что не существует идеального способа или решения, как использовать иконки в том или ином конкретном случае. Все зависит от целей дизайнера, задач, тематики, стиля и многого другого.
Расширяем навигацию
Иконки естественным образом помогают пользователям перемещаться по сайту, используя только визуальные эффекты. Лучшим же вариантом иконок в данном случае считается тот, что удобен и понятен для большинства пользователей. Поэтому их всегда можно включить в содержание меню и пункты навигации. Но при этом достаточно часто можно видеть, что наряду с иконками применяется и текст и, увы, но без этого никак не обойтись. Чистая иконка редко когда работает в навигации и это не лучший вариант реализации для использования и понимания.
Сайт My Own Bike использует простые иконки, но, по крайней мере, пользователь может догадаться, о чем идет речь и куда приведет соответствующая ссылка. Да, сайт на немецком языке и иконки дополнительно выполняют функцию подсказок.
Еще один интересный момент – меню-«гамбургер». И хотя существует много дизайнеров, попросту ненавидящих его, все большее количество людей уже давно привыкли к своеобразной иконке и понимают, что она означает.
Меню на Inc – еще один интересный пример, как иконки используются в навигации. Вложенные пункты имеют значок плюсика, указывающий на наличие вложенных ссылок, что особенно удобно на мобильных устройствах.
Не забудем и о популярной тенденции, о которой мы рассказывали ранее более подробно, раскрывающееся мега-меню. Отличный пример, знакомый уже читателям, Mashable, где каждый пункт имеет небольшую стрелочку, указывающую на вложенный список ссылок.
Все эти примеры значков не являются такими уж и важными и необходимыми для применения, но они существенно улучшают опыт пользователя (взаимодейсвия). Большинство посетителей подсознательно понимают значение иконки-стрелочки, а потому будут ожидать соответствующей визуализации, функционала. Разумеется, такая навигация будет работать и без иконок, но с ними гораздо проще и быстрее находить нужное и приближаться к своей цели.
Визуальные эффекты
Навигация может трансформироваться в гораздо большее и быть нечто иным, чем полоска ссылок, размещенная сверху страницы. Это могут быть ссылки внутри страницы или на боковой панели, помогающие посетителям перемещаться по сайту. Иконки же отлично подходят для акцентирования внимания на таких моментах. Посему обычно они выделяются и имеют немаленький размер.
Домашняя страница Media Temple имеет несколько таблиц с ссылками разного цвета «читать дальше». Все они имеют сбоку небольшую иконку-стрелочку, которая служит символом возможности дальнейшего перехода. Идея не нова, даже браузеры имеют соответствующие стрелочки для обозначения перехода вперед и назад. Но на данном сайте дизайнеры использовали это тонко, едва заметно, неброско.
Один из выдающихся элементов страницы – кнопка призыва к действию или сокращенно CTA. Иконки могут отлично работать совместно с кнопкой или в окружении её и служить определенной цели.
Посмотрим на сайт jQuery, который на странице в верхней части имеет большую кнопку загрузки. Помимо текста на ней есть и иконка, позволяющая визуально, при беглом взгляде на нее понять, что речь идет о загрузке файлов. Впрочем, не всегда кнопка или иконка CTA ведет на возможность загрузки архива. Часто за ссылкой скрывается еще страница о продукте или услуге. Кроме этого на сайте и без того много используется иконок и значков в иных областях и разделах, что существенно упрощает ознакомление с информацией и выглядит… мило.
Чтобы помочь привлечь посетителей и продать услугу, дизайнеры ResumeBaking использовали потрясающую идею и окружили кнопку призыва к действию иконками, стрелками и текстом. Значки помогают пользователям понять, что их ожидает после нажатия кнопки. И поскольку компания предлагает создание резюме, его распространение и поиск вакансий, то подписи к значкам более чем необходимы. Попробуйте закрыть текст рукой и покажите незнакомому с сайтом пользователю. Навряд ли он сразу сообразит, о чем идет речь вообще. Но, так или иначе, люди видят иконки, видят стрелки и, как следствие, нажимают кнопку.
Формы
Почти каждый сайт имеет разные виды форм связи, будь то отправка сообщений на e-mail, вход в учетную запись или базовая контактная форма. Но иконки находят и здесь себе применение, создавая, тем самым, доверие пользователей и помогая в исследовании.
Если рассмотреть сайт Life Could Be Better, то можно увидеть внизу страницы фиксированный блок для подписки и контактов. Иконка конвертика находится рядом с формой, сигнализируя о том, чтобы на нее обратили внимание. Аналогично работает значок телефона и ссылки на соцсети. Дизайнеры использовали иконки для визуального описания рядом находящегося содержимого, поэтому его легче понять, быстрее и заметить с первого раза тоже просто.
Еще один интересный подход – это добавление иконок к полям формы регистрации. Это удобно, если форма обладает тремя и более полями, которые необходимо заполнять. Пример тому можно видеть на сайте vladmaxi. Они хорошо вписываются в интерфейс и выглядят фантастически. Более того, иконки позволяют быстрее понять, что нужно вводить в каждое поле формы. Когда же пользователь активирует поле и начинает ввод данных, то и значки пропадают.
Функции
Каждый новый стартап, малый бизнес или веб-сайт имеет ряд особенностей и множество причин, заставляющих людей посещать соответствующий сайт. Все эти особенности/функции можно включить в список, но это увлечет только малую часть целевой аудитории. Поэтому многие веб-дизайнеры добавляют разного рода иконки, чтобы дополнительно, визуально пояснить (выделить, обратить внимание общественности) эти самые особенности и общие черты. Визуальные эффекты легче в понимании и стимулируют посетителей пролистывать страницу дальше или переходить по смежным ссылкам.
Например, иконки LightCMS – суперские, тонкие и потому отлично вписываются в общий контент страницы и весь дизайн. Они также помогают уточнить функции. Если их использовать поодиночке, то эффекта не будет. Но в сочетании с общим содержимом они реально способствуют повышениям продаж продукта. Обратите внимание и на использование макетов мобильных устройств, о которых мы также вам недавно рассказали в прошлом материале.
Похожий подход в дизайне используется и на Disqus, где значки размещаются рядом с текстовым описанием функций. Между прочим, у проекта вообще хороший дизайн и удобный, который используется уже в течение не одного года. Да, дизайнеры создавали уникальные значки самостоятельно и эксклюзивно для этого проекта. В тоже время, в интернете есть огромное множество подборок и ресурсов, где можно найти подходящие по цвету, размеру, стилю и содержанию иконки.
Мировой опыт
Одно дело разговор об иконках в общих чертах и рассмотрение некоторых примеров, пусть и известных, и популярных проектов. Но совсем иное – работы веб-дизайнеров за последние год-полтора. Ни для кого не секрет, что вследствие современных стандартов дизайны сайтов стараются сделать более простыми, строгими. Нет, не скучными, но и не аляповато-веселящими. В тоже время, даже на фоне современности мастера находят моменты, элементы, возможности для применения самых разных иконок. И неважно где: в меню или в полях формы, в контенте страницы или дублирование текстовой информации. Надо сказать, что смотрятся такие решения весьма и весьма недурно.
Например, сайт итальянской компании ZAPI spa, занимающейся производством и распространяем удобрений для садовых и комнатных растений, овощей, фруктов, цветов. Крупные иконки они использовали в меню, которое предлагает посетителям ознакомиться с продукцией и деятельностью компании. При этом если итальянский язык остается не совсем понятным (или вообще «иностранная грамота» он для вас), то, ориентируясь только на иконки, можно четко и ясно понять, о чем раздел и какая в нем может находиться информация. Мышонок – защита от грызунов, три листочка разной высоты – стимуляторы роста, цветок – для цветения и плодоношения и так далее.
Chuff представляет сайт комфортабельного кафе в Токио, Япония. Все меню кафе и рассказ о блюдах они представили в виде разделов сайта и горизонтальной полоски меню. Но при этом меню полностью создано из значков. Тематических (чайник, зерно кофе, пирожные), понятных по смыслу при первом взгляде на них. Текст же поясняющий, появляется только тогда, когда к иконке подводится курсор. Свежо, оригинально и до безобразия удобно.
Россияне из AxisPoint Consulting решили использовать иконки и для небольшого меню услуг, и для описания своей деятельности, в частности, в галерее реализованных проектов. При этом весь дизайн создан до безупречности по последним канонам и стилям веб-дизайна, а значки добавляют немного пикантности и некоторого уюта. Да, это – серьёзный сайт, но идея работы компании направлена на взаимодействие с клиентами, они хотят, чтобы у их партнеров были решены проблемы, а потому иконки, в своем роде, это и олицетворяют. Некий дружественный диалог.
Мы еще предлагаем вам отдельно посмотреть проекты: Hype, APP-BITS, Humankind, Autohaus Strunk (боковая панель при наведении курсора способна увеличиваться; потрясающе), wdlkids.de, Martina Cars Car Rental, Walters Homes, Autentika Software House. Рассматривать их подробно мы не будем, поскольку, даже открыв домашнюю станицу, можно понять, о чем шла бы речь в нашем рассказе. Но мы рекомендуем немного пройтись по страницам, так как и в них тоже можно найти интересные вариации применения иконок.
Подводя итоги
Иконки являются частью всех интерфейсов: от настольного программного обеспечения и веб-сайтов до мобильных приложений. Но конструкций и стилей весьма много и постоянно они меняются. Нельзя с уверенностью сказать, то лучшим вариантом является использование иконок в полях формы регистрации. Все зависит от общего дизайна, тематики проекта и уместности применения иконок вообще. Поэтому важно всегда наблюдать за тенденциями, веяниями в сфере веб-дизайна. Даже за какие-то два-три месяца дизайнеры в мире могут придумать идею, крошечную и ненавязчивую, но которая впоследствии станет весьма популярной.
Мы надеемся, что материал поможет вам ознакомиться с мировым опытом использования иконок для любого случая и увидеть на практике их реализацию.