5 советов по грамотному использованию иконок в интерфейсе


Оглавление (нажмите, чтобы открыть):

Иконки в веб-дизайне: для чего нужны и как правильно их использовать

Грамотно расставленные акценты на сайте помогают дизайнерам и маркетологам завладеть вниманием пользователя и направить их на целевые действия: покупку, связь с менеджерами или просто понимание предоставленной информации. Одним из таких инструментов являются иконки — изображения, которые используют для обозначения какой-либо информации. В этой статье мы расскажем о значении иконок в веб-дизайне на конкретных примерах, как правильно выбрать и использовать их на сайте.

Зачем дизайнеры используют иконки

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

Если мы уберем сопутствующие изображения, скорость восприятия меняется:

С иконками достаточно окинуть взглядом экран, чтобы понять, о чем идет речь и что нам хочет предложить компания. Грузовик традиционно обозначает доставку, а иконка документа — сертифицированную продукцию. Во втором примере нужно вчитываться в текст, чтобы понять смысл. Это происходит потому, что человек мыслит образами. Пользователь связывает картинки с ассоциациями, которые они вызывают, и тем самым воспринимает информацию.

Еще одна функция иконок — помощь пользователю сориентироваться в интерфейсе. Есть несколько универсальных символов, которые используются в дизайне для направления пользователя, например:

  • значок лупы означает поиск информации;
  • иконка дома ведет на главную страницу;
  • картинка сердца или звезды — избранное;
  • нажав на изображение флага можно поменять язык на странице;
  • силуэт человека в шапке сайта ведет в личный кабинет;
  • иконка тележки означает добавление товара в корзину или переход на страницу оформления заказа.

Такие изображения добавляют на сайты интернет-магазинов для облегчения покупки:

С помощью иконок клиент не теряется на новом ресурсе и понимает, какие действия он может сделать.

Как с помощью иконок повысить конверсию сайта

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

1. Привлечь внимание к преимуществам компании

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

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

2. Расскажите, как сделать заказ или как работает компания

Чтобы новые клиенты знали по какому алгоритму работает магазин или оказываются услуги, расскажите об этом с помощью иконок:

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

3. Расскажите о товаре с помощью изображений

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

4. Выделяйте акции и специальные предложения, а также нужные категории товаров

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

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

Какие иконки используют в дизайне

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

Линейные

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

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

Иллюстрации

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

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

Объемные

Некоторые веб-дизайнеры отходят от трендов «плоского» и минималистичного дизайна и используют вместо иконок самостоятельные изображения. Это могут быть вырезки из фотографий продукта или тематических картинок.

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

Простые элементы

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

А здесь вместо картинок использовали простой элемент галочку:

Такие иконки не отвлекают внимание пользователя от основной информации, но и не «цепляют» взгляд.

Шрифтовые иконки

Это особый вид иконок, который подключается к сайту как шрифт, у которого вместо символов векторные изображения. Плюс таких иконок — возможность изменять цвет, тени, размеры и другие свойства CSS. Пример данного вида — шрифт FontAwesome.

Иконки встраиваются в HTML код как обычный класс с именем «fa» с помощью тегов или . Пример использования:

Где «address-book» — название иконки-книжки. Изображения удобно использовать для обозначения мелких элементов, например, на странице «контакты», в формах или в меню.

Примеры использования иконок в веб-дизайне

Мы разобрались, как иконки различаются по стилистике и методам внедрения. Теперь рассмотрим деление элементов по назначению на реальных примерах.

Иконки для навигации

Как уже говорилось выше, иконки нужны для облегчения ориентирования пользователя на веб-странице. Особенно важно данное назначение иконок в интернет-магазинах и сайтах компаний, где главным целевым действием является оформить заявку или совершить покупку.

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

Информационные иконки

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

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

Социальные доказательства

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

Исследования агентства Wider Funnel показывают, что размещение на веб-сайтах элементов социального доказательства повышает продажи в 9 из 10 случаев. Поэтому такой прием можно считать инструментом увеличения конверсии интернет-магазинов и продающих сайтов.

Призыв к действию

Иконки встраивают в контент, который приводит пользователя к целевым действиям на сайте:

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

Разделы каталогов

Чтобы разделить одну категорию товаров от другого и вызвать ассоциации с определенным продуктом, иконки используют в оформлении разделов каталога:

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

Социальные кнопки

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

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

Фильтры

Иконки можно использовать в фильтрах для товаров. Узнаваемые изображения помогут клиентам сориентироваться в каталоге и выбрать нужный продукт или услугу:

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

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

5 советов по созданию дизайна иконок

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

1. Иконки должны быть узнаваемыми и ассоциироваться с окружающим текстом

Основное предназначение иконки — облегчить пользователю восприятие текста. Выполняет ли изображение свою функцию зависит прежде всего от того, насколько понятно посетителю, какой объект или действие эта картинка обозначает.

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

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

2. Дополняйте иконку текстом

Само по себе изображение несет в себе только декоративную функцию. Чтобы придать значку смысл, рассказывайте о том, что она обозначает.

3. Дизайн иконок должен быть похож между собой


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

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

4. Прозрачный фон облегчает восприятие

Использование прозрачного фона увеличивает скорость восприятия. Цветной фон создает визуальный шум, из-за которого иконки кажутся одинаковыми. Сравните:

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

5. Используйте векторную графику, если это возможно

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

В студии дизайна IDBI веб-дизайнеры уделяют особое внимание деталям — самостоятельно отрисовывают иконки, кнопки, формы, создавая индивидуальный стиль для компаний и интернет-магазинов. Обращайтесь к нам и мы разработаем для вас уникальный ресурс, где будут гармонично сочетаться основной контент и декоративные элементы.

6.3. Пиктограммы

Пиктограммы (icons), эти знакомые всем маленькие картинки, служащие для обозначения кнопок и других объектов, являются неотъемлемым признаком современных интерфейсов. Компания Apple Computer, известный лидер в области разработки интерфейсов, сообщает нам, что «пиктограммы могут существенным образом увеличить ясность и усилить привлекательность приложения. Кроме того, использование пиктограмм позволяет намного упростить процесс перевода программ на другие языки. Всякий раз, когда требуется добавить объяснение или надпись, попытайтесь вместо текста использовать пиктограмму» (Apple Computer 1985, с. 1–32). В более поздних версиях этого руководства подход к применению пиктограмм уже не был столь догматичным, однако создаваемый им вред уже нельзя было исправить.

Пиктограммы делают интерфейс более привлекательным в визуальном отношении и, при определенных условиях, могут способствовать большей понятности. Однако со временем стали понятны и недостатки пиктограмм. Например, как в операционной системе Macintosh, так и в Windows сейчас уже используются средства для объяснения значения пиктограмм. Если вы наводите курсор на какую-то пиктограмму, появляется небольшое окно с текстом, в котором дается ее описание. Возникает очевидный вопрос, который я неоднократно слышал от пользователей, впервые встретивших такие текстовые окна: «Почему вместо пиктограмм сразу не использовать текст?» В самом деле почему бы и нет? Ведь, по сути дела, вместо того чтобы объяснять, пиктограммы зачастую сами требуют для себя объяснений. Использование пиктограмм вместо слов вполне подходит для того, чтобы скрыть или зашифровать какую-то информацию от посторонних глаз. Проблему пиктограмм можно рассматривать как проблему ограниченной видимости. В интерфейсе показана пиктограмма, но ее смысл невидим, или же ее изображение может дать неверное сообщение для тех, для кого это изображение незнакомо или кем это изображение может быть истолковано по-другому. Например, пиктограмма, изображающая ладонь поднятой руки, в Соединенных Штатах означает «стоп», а в Греции – «вот вам экскременты на ваше лицо» (Horton, 1994, с. 245).

Пиктограммы могут вызвать раздражение не только у специалистов по разработке интерфейсов. По поводу автомобилей часто можно услышать следующий комментарий: «Чтобы понять назначение ручек настройки [автомагнитолы], нужно доставать инструкцию по использованию, так как никаких надписей (вроде надписи «громкость») на кнопках не имеется» (Hotchkiss, 1997, с. 14А).

Иногда использование пиктограмм обосновывается их независимостью от языка, что является ценным свойством для программного обеспечения с точки зрения расширяющегося международного рынка. Однако следует учитывать, что, как было указано, смысл пиктограмм зависит от культуры, в которой они используются. Но даже если пиктограмма и не требует перевода, средства помощи, основанные на использовании языка, и пояснительные окна, объясняющие значение пиктограммы, должны быть переведены, что сводит на нет упомянутое преимущество. Как бы то ни было, используется ли текст или пиктограмма, необходимо, чтобы перевод выполнялся человеком, который является носителем языка, используемого целевой аудиторией, и который знаком с соответствующей культурой, а редактура должна осуществляться людьми, которые выросли и жили в этой культуре. Слова могут быть полностью поняты, по крайней мере, в одном языке. Что же касается пиктограмм, то они могут быть с равной возможностью как поняты, так и нет, причем недостаточное понимание может быть получено сразу в целых языковых семействах.

Приведу пример, когда смысл пиктограммы был понятен только небольшой группе людей. На задней стороне компьютера Apple Не каждый разъем был обозначен специальной пиктограммой. Одна особенно таинственная пиктограмма представляла собой горизонтальную линию, под которой находилась прерывистая линия той же длины, состоящая из трех отрезков (рис. 6.10). Из приблизительно тысячи человек, которых я опрашивал в основном во время различных конференций, только около 10 человек смогли объяснить значение этой пиктограммы, и еще меньшее число людей смогли рассказать о ее происхождении.

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

Рис. 6.10. Чрезвычайно загадочная пиктограмма

В предисловии к «Книге о пиктограммах» (The Icon Book) ее автор Уильям Хортон (William Horton) говорит: «Около десяти лет я пользуюсь системами с графическими пользовательскими интерфейсами и предпочел бы щелкать мышью по понятным картинкам, чем вводить техническую тарабарщину в виде команд, – даже если бы я мог запомнить, как правильно эти команды пишутся» (Horton, 1994). Из упомянутых Хортоном двух, далеко не самых удачных, вариантов пиктограммы являются, наверное, более предпочтительными, особенно для начинающих или нерегулярных пользователей. Однако Хортон не говорит о другом варианте, а именно: щелкать мышью можно и по кнопке, обозначенной одним или двумя хорошо подобранными словами. Однако необходимо сказать, что Хортон также утверждает, что в некоторых случаях следует использовать как текст, так и пиктограмму, и далее он верно отмечает важность проведения в связи с этим тестирования, независимо от того, используется ли в интерфейсе текст или пиктограмма, или и то и другое вместе. Боб Хорн (Bob Horn) (Jacobson, 1999) создал стиль, в котором текстовые и пиктографические атрибуты образуют комбинированные символы, подтверждающие высказывание, что текст часто является самой лучшей визуальной подсказкой. Мы хорошо умеем визуально отличать одно слово от другого, и, в то же время, слова могут передавать сложный смысл. Также имеют значение такие эргономические факторы, как регистр, кегль, цвет и другие атрибуты шрифта.

Мэйхью (Mayhew, 1992) упоминает ряд исследований, посвященных использованию пиктограмм. К сожалению, в большинстве исследований не проводилось сравнений между пиктограммами и надписями. Однако из этих и других исследований мы можем сделать вывод, что пиктограммы являются наиболее эффективными, если количество пиктограмм, которые видно одновременно, не превышает 12. Кроме того, необходимо, чтобы пиктограммы:

• визуально отличались друг от друга;

• хорошо отражали соответствующее понятие;

• имели разумно большой размер (обычно больший, чем могла бы быть текстовая надпись).

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

Действительно, пиктограмма небольшого размера занимает меньше экранного пространства, чем надпись. Тем не менее, возникает вопрос: какой ценой? Чем меньше экранная кнопка, тем больше времени требуется на то, чтобы ею воспользоваться, и тем труднее обнаружить ее на экране. Кроме того, пиктограмму небольшого размера трудно сделать различимой. Другой важный момент заключается в том, что пиктограммы требуют больше времени на создание, чем надписи.

Основной проблемой, связанной с пиктограммами, является то, что их зачастую трудно обозначить, – например, в разговоре с другими людьми или в ситуации, когда вы пишете о них или просто хотите дать им словесное определение. Каким образом пиктограммы можно сортировать или классифицировать? Куда их можно поместить в индексированном списке? Например, одна из пиктограмм, которая используется на клавиатуре компьютера Macintosh, выглядит как транспортная развязка типа «клеверный лист». В литературе эту пиктограмму называли и клеверным листом, и пропеллером, и даже кренделем, хотя в руководствах компании Apple эта клавиша называется управляющей клавишей (Command key). Это обстоятельство приводит к естественному вопросу: почему на клавиатуре, на которой имеются клавиши, обозначенные Shift, Option, Return, компания Apple не поместила на эту клавишу слово Command? Какое преимущество имеет здесь пиктограмма? Как пользователь может, глядя на нее, определить, что это именно управляющая клавиша? В эту же категорию торжества рыночных свойств над юзабилити может быть отнесена и клавиша с небольшим изображением окна, которая помещена на современную Windows-клавиатуру.

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

Попытки описания пиктограмм при помощи слов могут приводить к невообразимым ухищрениям. Возьмем сложный словарь, при помощи которого описываются геральдические символы английской знати. Вот пример геральдического описания щита: «В зеленом поле серебряный на задних лапах лев от золотого поля отгорожен».[45] Неужели такой язык понадобится для описания пиктограммы, когда вы позвоните кому-нибудь, чтобы вам помогли заставить компьютер работать, как положено?

Конечно, слова не всегда оказываются подходящим средством. Например, это касается цветовых палитр. В одной из программ на моем компьютере палитра передается с помощью слов, представленных в (главным образом!) алфавитном порядке. Вот часть этого списка:

Cyan (голубой) Bittersweet (паслёновый)

Blue (синий) Blue Green (сине-зеленый)

Magenda [именно так – Д.P.] Blue Gray (сине-серый)

Apricot (абрикосовый) Blue Violet (сине-фиолетовый)

Aquamarine (аквамарин) Brick Red (кирпично-красный)

Burnt Orange (жженый оранжевый) Gray (серый)

Burnt Sienna (жженая охра) Green Blue (зелено-синий)

Cadet Blue (синий кадет) Green Yellow (зелено-желтый)

Carnation Pink (телесный) Indian Red (индийский красный)

Corn Flower (васильковый) Lemon Yellow (лимонный)

Forest Green (травянистый) Maize (бледно-желтый)

Gold (золотой) Maroon (коричнево-малиновый)

Какой цвет означает название Bittersweet? А что делать тем, кто не знаком с ботаникой[46] и не может отличить одуванчик от василька? Индекс для библиотеки графических фрагментов часто является более эффективным, если содержит свернутые, пиктографические изображения каждого фрагмента, тогда как список категорий изображений или другие формы высокоуровневой организации должен быть текстовым. Изображение некоторого количества цветков не передает ту же информацию, что и слово «цветы». Это изображение может обозначать «лето», «список торговцев цветами» или «чат-комнату для тех, кто болен сенной лихорадкой».

Мастер Йода рекомендует:  Виртуальная реализация SQL Server 2005

На рабочем столе моего персонального компьютера типа Macintosh одна из часто используемых пиктограмм обрамлена красной рамкой. В системе имеется опция изменения цвета рамки. Такое цветовое выделение позволяет быстрее находить какую-то из более дюжины пиктограмм, которыми завален мой рабочий стол. Однако я бы хотел, чтобы имелась возможность выделить красным только слово. Хортон (Horton, 1994) отмечает, что «выделение цветом может быть бесполезным, если используется слишком много цветов или если имеется слишком много пиктограмм одного цвета». Хортон также уточняет, что если пиктограммы расположены близко друг к другу, не следует использовать более семи цветов; если же пиктограммы разбросаны по всему экрану, то число цветов не должно превышать четырех. На мой взгляд, это правильное уточнение, и предложенные им ограничения относятся также и к цветовому выделению слов. Тем не менее, создается ощущение, что очень многие разработчики графических пользовательских интерфейсов совсем не читали Хортона.

В ранних руководствах, используемых в компании Apple, утверждается, что «для наиболее эффективного использования экранного пространства в приложениях Macintosh графика используется весьма широко даже в тех местах, где в других приложениях применяется только текст. Насколько это возможно, все команды, элементы и параметры приложения, а также все данные пользователя существуют на экране как графические объекты» (Apple Computer, Inc. 1985, с. 1-31). Однако с точки зрения пользователя самыми важными качествами являются ясность и простота использования. Тенденция к чрезмерному использованию графики стала препятствием для разработки хороших интерфейсов.

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

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

Пиктограммы вызывают у разработчиков соблазн к поиску образного отображения, модели или аналога некоторой задачи и затем к оперированию с этим образным представлением, а не с самим объектом, который им отображается. В некоторых случаях (см. выше) это приводит к ошибкам проектирования. Иногда пиктограммы вызывают у разработчиков соблазн создать еще больше пиктограмм. Однажды разработчик, который занимался созданием библиографической базы данных, попросил меня высказать свое мнение по поводу пиктограмм, которые были отобраны специалистами его группы. Я ответил, что большинство тех людей, которые пользуются библиографиями, могут читать, и поэтому лучше использовать слова. На рис. 6.11 показаны некоторые из тех нескольких десятков пиктограмм, которые были созданы этими разработчиками. Читателю предлагается самостоятельно расшифровать их значения.[47]

Рис. 6.11. Библиографические пиктограммы (взяты из http://www.scran.ac.uk/iconstd). Вы можете сами убедиться, что многие из них трудно понять, если попытаться определить, какую библиографическую категорию или операцию представляет каждая из них

Самыми понятными из них, наверное, являются те, на которых есть надписи Menu и AND, а также, особенно если вы профессионально занимаетесь книгами, ISBN. Прочитав толкования всех этих символов всего только за два дня до того, как написать этот абзац, я все же не могу вспомнить, что все они означают, и в особенности тот, который выглядит, как пляжный мяч.

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

5 советов по грамотному использованию иконок в интерфейсе

5 советов как выбрать иконки для сайта

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

Чем руководствоваться и как не оттолкнуть свою аудиторию?

Рассмотрим ответы на эти и другие вопросы в нашей сегодняшней статье.

1. Аудитория сайта

Для чего вообще нужны иконки на сайте?

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

Например, пенсионер не поймет современных градиентных или залитых и слишком сложных по композиции иконок, так же как и молодая аудитория не воспримет с восторгом объемные, вышедшие из моды иконки.

Общие рекомендации по подбору стиля иконок основываясь на целевой аудитории вашего сайта:

  • Не используйте современные , креативные и «сложные» иконки , если аудитория вашего сайта 45 +
  • Для молодежных проектов, старайтесь подобрать креативные и яркие иконки
  • Если вы не уверены или еще не выяснили свою целевую аудиторию – правильным выбором будут современные иконки, но в приглушенных постельных тонах. Они не отпугнут возрастную аудиторию, кричащими цветами и сложной композицией и не заставят думать молодую аудиторию, о том, что ваша компания застряла в 2000-х годах

2.Стиль иконок

Условно мы можем поделить иконки на три большие группы

  • Контурные (другие названия — строуковые, лайновые )
  • Залитые (градиентом, сплошным цветом, двумя цветами и тд.)
  • Объемные иконки которые долгое время были на всех сайтах во время движения стиля скевоморфизм. Самый яркий представитель – apple со своими первыми версиями ios.

Выбор стиля иконок зависит от наполнения сайта, общей композиции и направления вашей деятельности.

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

Если ваш сайт корпоративный и строгий — рекомендуем контурные легкие иконки, которые подчеркнут ваш стиль и строгость.

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

Однако, если вы питаете симпатию к объемным иконкам, вы можете использовать вместо плоских иконок, 3D модели.

Это оживит ваш дизайн и не будет смотреться старомодно.

3.Функциональность иконок

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

Они должны наглядно показывать смысл текста/ действия к которому они относяться.

Зачастую неправильно подобраные иконки просто запутывают пользователя и он уходит с вашего сайта так и не разобравшись, «куда нажать и что делать».

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


4. Единство иконок и стиля

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

  • Иконки должны сочетаться с вашим сайтом. Если у вас строгий сайт, в легком, серо-белом цвете, не стоит выбирать кричащие, сложные и слишком яркие иконки.
  • Если вы не заказываете у дизайнера иконки для вашего сайта, а выбираете сами, запомните, что иконки должны быть стилистически одинаковые на всем сайте.
  • Если вы выбрали залитые иконки, то все иконки должны быть такими.
  • Если вы выбрали иконки «рваные» — когда в некоторых местах обводка иконки прерывается, значит на всех иконках обводка должна быть прерывистой.

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

Соблюдая эти простые правила и сравнивая иконки между собой, вы спустя время научитесь видеть общность стиля у иконок.

5. Размер иконок

Да, размер имеет значение.

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

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

Самая большая ошибка – это композиционно сложные, многоцветные иконки в маленьком размере, что толку, от того, что в ваших иконках отображена чуть ли не улыбка моны- лизы, если пользователь просто не разглядит ваше произведение искусства ?

Важно соблюдать золотую середину в размере иконок, они не должны перебивать текст сайта, но в то же время привлекать и удерживать внимание пользователя, на нужном вам блоке / тексте / действии.

Не сомневайтесь, соблюдая эти простые советы вы подберете для вашего сайта идеальные иконки.

7 практических советов по дизайну интерфейсов

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

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

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

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

1. Используйте для создания иерархии цвет и вес шрифта вместо размера

Распространенная ошибка, когда для управления иерархией стиль текста интерфейса слишком сильно зависит от размера шрифта.

«Этот текст важен? Давайте сделаем его больше».

«Этот текст вторичен? Давайте сделаем его меньше».

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

«Этот текст важен? Давайте сделаем его полужирным».

«Этот текст вторичен? Давайте используем более светлый цвет».

Попробуйте придерживаться двух или трех цветов:

  • Темный (но не черный) цвет для основного содержимого (например, заголовок статьи)
  • Серый для вторичного контента (например, дата публикации статьи)
  • Более светлый серый для вспомогательного контента (возможно, уведомление об авторских правах в нижнем колонтитуле)

Аналогично, обычно для интерфейса достаточно два веса шрифтов:

  • Обычный шрифт (400 или 500 в зависимости от шрифта) для основного массива текста
  • Более тяжелый шрифт (600 или 700) для текста, который вы хотите выделить

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

2. Не используйте серый текст на цветном фоне

Сделать текст светло-серого цвета – отличный способ выделить его на белом фоне, но на цветных фонах он не выглядит так круто.

Это потому, что эффект, который мы видим с серым текстом на белом фоне, уменьшение контрастности.

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

Есть два способа уменьшить контрастность при работе с яркими фонами:

Уменьшите непрозрачность белого текст

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

Выберите цвет текста, на основании цвета фона

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

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

3. Смещение теней

Вместо того, чтобы использовать большие значения размытия и растягивания, чтобы сделать тени блока (box shadows) более заметными, добавьте вертикальное смещение.

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

Это относится к внутренним теням, которые вы можете использовать, например, для форм ввода:

Если вам интересно узнать больше о дизайне теней, то руководство Material Design – это фантастический учебник.

4. Используйте меньше границ

Когда вам нужно создать разделение между двумя элементами, попытайтесь не использовать границы.

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

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

Используйте тень для блока

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

Используйте два разных цвета фона

Сделать фон соседних элементов немного разных цветов – обычно все, что вам нужно, чтобы создать различие между ними. Если вы уже используете разные цвета фона в дополнение к границе, попробуйте удалить границу; она может вам и не понадобиться.

Добавьте дополнительный отступ

Увеличение отступа – отличный способ создать различие между группами элементов без необходимости переработки интерфейса.

5. Не растягивайте иконки

Если вы разрабатываете что-то, что может использовать большие иконки (например, раздел «функции» лендинга), вы можете использовать бесплатный набор иконок, таких как Font Awesome или Zondicons, и увеличивать их размер до тех пор, пока они не будут соответствовать вашим потребностям.

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

Хотя верно, что качество векторных изображений не ухудшается, когда вы увеличиваете их размер, иконки, которые были нарисованы в размере 16-24px, никогда не будут выглядеть профессиональными, если вы растяните их в 3-4 раза от их предполагаемого размера. Им не хватает детализации, и они всегда воспринимаются непропорционально «массивными».

Если у вас есть маленькие иконки, попробуйте поместить их в другую фигуру и придайте фигуре цвет фона:

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

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

6. Используйте акцентные границы, чтобы разнообразить дизайн

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

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

Например, рядом с предупреждающим сообщением:

…или выделить активные элементы навигации:

…или даже в верхней части всего вашего макета:

Для добавления цветного прямоугольника в пользовательский интерфейс не требуется талант графического дизайнера, и он может помочь сделать ваш сайт более «дизайнерским».

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

7. Не всякой кнопке нужен цвет фона

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

Фреймворки, подобные Bootstrap, поощряют это, предоставляя вам меню семантических стилей для выбора, когда вы добавляете новую кнопку:


«Это позитивное действие? Сделайте кнопку зеленой».

«Это действие удалит данные? Сделайте кнопку красной».

Семантика – это важная часть дизайна кнопок, но есть более важное измерение, о котором часто забывают: иерархия.

Любое действие на странице имеет свое место в пирамиде важности. На большинстве страниц есть только одно истинное основное действие, несколько менее важных вторичных действий и несколько редко используемых третичных действий.

При разработке этих действий важно сообщить их место в иерархии.

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

«А как насчет деструктивных действий, разве они не всегда будут красными?»

Не обязательно! Если деструктивное действие не является основным действием на странице, возможно, было бы лучше дать ему стиль вторичной кнопки.

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

Если вам понравилась эта статья, посетите RefactoringUI.com и подпишитесь, чтобы получать уведомления о публикации новых статей.

Если вы нашли ошибку, выделите фрагмент текста и нажмите Ctrl+Enter

Николай Геллар

Переводчик, историк, меломан. Люблю кофе, книги и классический рок. Авторские права на переведенные материалы, размещаемые на сайте, принадлежат их авторам.

5 советов по грамотному использованию иконок в интерфейсе

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

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

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

Где можно остановиться на ночлег?

Почему мы так любим значки?

Потому что у них есть ряд преимуществ:

  • Они бросаются в глаза;
  • Они быстро передают информацию;
  • Они запоминаются;
  • Они экономят место;
  • Они понятны на любом языке.

Иконки интерфейсов имеют еще ряд преимуществ:

  • Они более приятны глазу, чем полотна текста, которые бы могли быть на их месте. Чем меньше становится экран, тем больше слов хочется заменить специальными значками.
  • Они могут придать вашему приложению визуальную индивидуальность.

Но главное, чем должна обладать любая иконка — это ЯСНОСТЬ.
Если пользователь не поймет значение иконки, он либо будет ее избегать, либо путаться.

С мороженым — нельзя, с сигаретой — нельзя, с единорогом — можно

Чтобы решить проблему с ясностью иконки, можно пойти несколькими путями:

1. Объяснять новую иконку текстом, давать подсказки, учить юзера использовать ее правильно

Таким образом вы создаете новый пользовательский опыт. Человек, подобно тому, как учит алфавит, должен выучить и значки интерфейса. Чтобы идти этим путем, нужно быть уверенным в своем продукте, в готовности пользователей учиться ради его использования.
Возьмем в качестве примера Instagram.
Иконка с изображением ящика была неясна, мало кто понимал, что с ее помощью можно отправлять личные сообщения.

Пользователей пытались научить новому значку

Сегодня иконку отправки личных сообщений поменяли на более ясную.

Можно сделать вывод, что этот путь не всегда приносит ожидаемый результат

Поэтому рассмотрим 2-ой вариант.

2. Бороться за ясность, создавать иконки максимально понятные пользователю
И именно о том, как это сделать и не ошибиться в выборе, пойдет речь далее.

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

10 ошибок в дизайне иконок интерфейсов

1. Неточность дизайна образа иконки

Для начала проведем небольшой тест.

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

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

Ответ клиента был таков: «Мне не совсем понятно, почему вы нарисовали иконку фильтра в виде бокала для мартини!» ��

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

2. Неясность ассоциации

В отличие от первой причины, в этом случае обычно сам образ передан правильно, но пользователю не ясно, почему использована именно эта иконка и что она означает.
Посмотрите еще раз на пример со старой иконкой для отправки личных сообщений в Instagram. Образ вполне уловим — изображен ящик. Но с чем у вас ассоциируется ящик? Сохранить? Входящие? Добавить новый файл? Ассоциация слишком тонкая, пользователю нужно думать, значит образ подобран неудачно.

Вот еще один наглядный пример того, как меня запутал интерфейс.

Это крест, без сомнения

Как потом выяснилось, при наведении курсора на иконку всплывает подсказка.

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

Гораздо яснее для пользователя в этом случае был бы образ мусорного бака.
Кроме того, здесь интерфейс позволяет разместить слова “Удалить аккаунт”, и в этом случае использование текста вместо иконки выглядело бы оправдано.
Вот еще один пример, когда возникает диссонанс значения иконки и ее образа:

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

3. Похожие иконки в интерфейсе

С одной стороны, иконки в интерфейсе должны подходить по стилю и смотреться целостно и гармонично, чтобы не получилось вот так:

Несогласованность дизайна иконок в интерфейсе

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

До сих пор путаюсь, какая из этих стрелок возвращает назад к другим письмам Gmail, а какая приводит к написанию ответа на письмо

Вот еще один пример:

Значок проверки орфографии можно спутать со значком перезагрузки

4. Не учтен предыдущий пользовательский опыт

Вы помните, как в Viber при отправке сообщения рядом висела иконка с изображением стрелки?

Что это за стрелка?

Многие новые пользователи путались, считая, что стрела имеет значение “Отправить сообщение”. Почему? Потому что многие новые пользователи пришли в Viber из Skype и других мессенджеров, где стрелка означала именно отправку сообщения и располагалась в том же месте.

Иконка для отправки сообщения в Skype

Стрела в интерфейсе Viber означала отправку данных геолокации. Не удивительно, почему все мои друзья в то время были в курсе, где я;)
Сейчас интерфейс Viber выглядит иначе:

Поменялось не только месторасположение иконки, но и ее образ

Поэтому, создавая интерфейс, внимательно изучите интерфейсы основных конкурентов, чтобы не путать и не переучивать пользователей.
Создавать новый пользовательский опыт — это сложный путь и часто неоправданный.

5. Не учтены ментальные особенности ЦА

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

Например, эта иконка может быть понята совершенно по-разному в США и Италии

Вот так по-разному трактуют жесты в разных странах

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

Хотя, признаться, их не так уж и много. Сейчас среди них можно назвать изображение принтера (печать), дома (возврат на главную страницу), лупы (поиск) и практически все. Иконка, обозначающая меню-гамбургер, вскоре тоже может стать универсальной. Однако, некоторые тесты показывают, что пользователям привычнее видеть кнопку с надписью “Menu”, чем 3 горизонтальные полоски.

Если ваше приложение ориентировано на целевую аудиторию конкретной страны, учитывайте ее особенности восприятия.
Так, например, для жителей США более привычной будет иконка с тележкой супермаркета (shopping cart) для обозначения покупки (Источник).

Изображение тележки супермаркета на американском сайте


Для жителей Великобритании в пользовательском интерфейсе привычнее видеть корзину (basket) или сумку (bag).

Так выглядит иконка для совершения покупок на британском сайте Next

Мастер Йода рекомендует:  Изучаем WP_Query Свойства и методы

6. Неправильный посыл

Дизайн иконок может повлиять на поведение пользователя.
Так при выборе иконки для действия “Добавить товар в корзину” следует ориентироваться не только на ментальное восприятие, но и на подтекст, который они несут.
Тележка супермаркета подразумевает, что пользователь может в любое время, как положить товар в корзину, так и передумать, и выложить его. Т.е. в этом случае вы не давите на будущего покупателя и мягко склоняете к покупке.
Пакет или сумка гораздо больше влияет на сознание пользователя, призывая его именно к покупке, а не складыванию товара в корзину. Мы привыкли складывать вещи в свою сумку уже после оплаты их на кассе, т.е. эта иконка более настойчиво призывает именно к покупке.

Разница между восприятием иконок для обозначения покупки товара

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

7. Устаревшие образы

Здесь нужно быть предельно аккуратным. Иконки стареют, как и люди.

Это вполне всем знакомый значок “Сохранить”

Поймет ли новое поколение эту иконку, если оно никогда не держало дискету в руках?

Уже давно ведутся споры о необходимости замены устаревших иконок на новые

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

Эволюция иконок телефонного звонка

Первая иконка до сих пор актуальна и понятна даже новым поколениям, т.к. ее форма легко узнаваема.
Если же расположить иконку смартфона, можно запутать пользователя. Смартфон ассоциируется не только с функцией звонка, а и кучей других возможностей.

Приглядитесь к иконке, которая используется в Твиттере для написания нового твита. Иконке придали форму гусиного пера, чтобы передать смысл “Кликни сюда и ты сможешь писать”.

Наше поколение не писало гусиными перьями, но мы четко понимаем значение этой иконки, хотя его также можно назвать устаревшим

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

8. Перегруженный дизайн

Не забывайте, что иконка интерфейса должна быть ясна не только в самом ее большом размере, но и в миниатюре.
Именно поэтому лишние элементы будут создавать грязь в интерфейсе и вызывать недоумение у пользователя.
Сравните сами:

Лишние элементы перегружают образ и он становится неясным

Сейчас эта проблема менее актуальна, чем она была до появления трендов плоского и чистого дизайна. Плоские иконки гораздо легче воспринимаются, чем сложные 3D объекты. и это одна из причин, почему они так популярны. Однако в руках умелого дизайнера и объемную иконку можно сделать узнаваемой в любом размере.

9. Использование текста или его отсутствие

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

10. Скалирование иконок

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

При скалировании ясность иконки теряется и пользователь не может отличить похожие образы

Поэтому всегда просите дизайнера прорисовывать элементы вручную при создании новых размеров.

Выводы

Почему мы выделили именно эти 10 ошибок, а остальные, не менее важные оставили без внимания? Потому что эти ошибки влияют на ЯСНОСТЬ иконки, вызывают недоумение, запутывают пользователей и могут повлиять на конверсию.
Как видите из примеров, одна лишь неверно подобранная иконка может заставить пользователя удалить аккаунт, отказаться от покупки или от использования неудобного приложения.
Так что, выбирайте правильные иконки и лучше доверьте это профессионалам.

10 советов по созданию классных иконок

Russian (Pусский) translation by Yuri Yuriev (you can also view the original English article)

Ну, я вернулся и на этот раз собираюсь сделать что-нибудь другое и надеюсь, вам будет интересно.

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

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

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

1. Узнай историю своей иконки

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

Вам не нужно сходить с ума от исследований, но вы должны хотя бы попытаться найти ответ на три простых вопроса:

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

Когда?

«Когда», как вы уже догадались, означает «конкретное окно во времени», когда появилась потребность в icons как цифровых визуальных символах. Для тех, кто не знал, дизайн иконок появился только в 1981 году с рождением Xerox 8010 Star, которая была первым компьютером с графикой GUI или Graphic User Interface, то есть, до неё картинка не имела смысла. Но это не «молодо», так как он развивался невероятно быстро на протяжении многих лет, и ещё не достиг своего полного импульса.

Почему?

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

Давайте подумаем над тем, как могло быть, если бы причины рождения GUI были разными, или если люди, стоявшие за проектом, никогда не рождались. Мы, вероятно, всё ещё пользовались линейными интерфейсами — ну, наверное, нет, но всё было бы немного по-другому, поверьте!

Теперь я не отпущу вас так легко, дав вам ответы, так как не хочу испортить вам путешествие. Но я оставлю вам ссылку на красивый интерактивный веб-сайт, который содержит всю информацию, собранную в одном месте и presents it so damn well.

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

2. Проведите базовые исследования для нового проекта

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

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

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

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

Как любой иной продукт, icons обычно создаются с определённой целью. Будут они использоваться на веб-сайте или в приложении, всегда нужно помнить о различных переменных, которые вы должны учитывать при создании каждого из них, поскольку стиль и «ощущение» зависят от этих факторов.

Этого можно добиться, потратив пару часов на изучение, чтобы найти ответы на три коротких вопроса:

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

Необходимо «просчитать» своего пользователя, создав исчерпывающий список характеристик, которые влияют на его/её опыт работы с иконками и самим UI.

Обычно это характеристики:

  • Возраст (молодые или старые)
  • Пол (мужчины или женщины)
  • Раса (различие культур)
  • Образование (образованные и без образования)
  • Технические навыки (грамотные пользователи и те, которые боятся технологий)

Давайте рассмотрим на примере возраста и социально-демографической переменной то, как молодые взаимодействуют с UI по сравнению со старыми.

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

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

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

Теперь, если мы включим «образование» в качестве третьей переменной, то у нас будет ещё больший разрыв, так как в обеих возрастных группах есть пользователи, имеющие базовое образование и пользователи, которые не обучались в институтах.

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

Кроме того, раса — это ещё одна вещь, о которой мы все еще должны думать, поскольку некоторые символы могут читаться по-разному пользователями из других регионов мира в зависимости от контекста.

Когда вы начнёте искать ответы, увидите, как выглядит ваш «пользователь», так как с каждым его качеством вы приближаетесь к созданию окончательного шаблона, реализованного вашим визуальным языком.

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

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

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

Очевидно, что наше «послание» напрямую связано с пользователями, поэтому мы должны сделать его достаточно простым, чтобы они могли его понимать.

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

«Что» может означать «миссия», или, точнее, основной бизнес продукта, где пользователям требуется только базовое понимание визуальных символов, чтобы разобраться.

Конечно, вам придётся пытаться построить язык, легко доступный вашей основной аудитории, но иногда вам просто нужно заставить их изучать новые вещи, поскольку это в их интересах.

Прекрасным примером этого является новое software, такое как Adobe Illustrator, AutoCad, где, несмотря на простоту и удобство icons, пользователю приходится расширять свои визуальные знания конкретных функций и кнопок, доступных в виде значков.

Пример Illustrator Icons


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

«Как» определит стиль и направление наших icons, так как теперь мы знаем, должны мы использовать мелкие значки или покрупнее, более сложные или базовые.

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

3. Вычислите тему

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

Как и в любой истории, факты должны быть связаны, нельзя назвать историю «Старик и море» и начать рассказ о космических кораблях и ракетах — это было бы странно. Ваша «тема» будет отображаться тщательно подобранными icons, связанными с её идеей/концепцией.

Создаёте вы значки для себя или для заказчика, вы обнаружите, что пути к выбору правильной темы весьма различны, потому что контекст может дать вам больше или меньше свободы, чем хочется.

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

Что я обычно делаю, если в голове каша — беру лист бумаги и пишу пять различных ключевых слов, которые хотел бы преобразовать в значки. Как только я сделаю выбор, начинаю думать о различных объектах, которые можно включить в свой пакет и записываю их, чтобы собрать хотя бы 20 элементов для хорошего начала. Затем я беру пару моментов и пересматриваю список, обычно это приводит к добавлению элементов, которые я мог упустить. Когда добираю количество, в котором чувствую себя комфортно, я перехожу к следующему шагу.

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

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

4. Определение стиля ваших значков

Когда у вас есть тема, следующее, о чём вам нужно подумать, это стиль для создания своих значков. Теперь, если «тема» — это ваша история, то «стиль» — это способ повествования и это действительно важно, поскольку даёт возможность отделиться от всего остального, сделав что-то уникальное.

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

4.1. Flat Icons

Первая из них — «flat», как её проще называть, потому что у неё нет блеска skeuomorphism, но вместо этого есть простой принцип, когда символ более игриво изображает его реальную функцию.

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

4.2. Line Icons

Второй стиль — «line», это сочетание flat с ароматом старой школы, где вы выделяете разные разделы композиции, добавляя более тонкие или более толстые линии или контуры. По сравнению с предыдущим стилем line icons могут быть построены с использованием заливки и контуров.

Можно обойтись и одними линиями.

Другое отличие в том, что приходится больше работать с Pen Tool (P) по сравнению с flat icons, где вы полагаетесь на базовые формы, такие как прямоугольники и круги, которые вы бы отрегулировали с помощью панели Pathfinder в комбинации с другими инструментами.

Будь это “line icons” или “flat icons”, не имеет большого значения, если вы создаёте что-то своё, что, если хорошо получится, сразу позволит людям узнать, кто автор.

Я считаю, что стиль — это сумма трёх различных аспектов:

Цвет — одна из вещей, определяющих личный стиль, но ею не так просто овладеть, потому что за ней стоит целая теория, которую вы должны освоить себе в помощь. Вы можете расценить цвет как «тон», который вы задаёте своей истории. Чем ярче и теплее цвета, тем счастливее и теплее становится история.

Измените теплоту ваших цветов и «тон» переместится с дружественного в нечто более отдалённое.

Разумеется, это маленький пример, есть разные значения цветов, которые я не буду обсуждать, потому что об этом хорошо написано в well-written piece, с подробными пояснениями.

Форма

Теперь, если цвет задает «тон» истории, то форма определяет навыки «рассказчика», так как есть дизайнеры, которые могут создавать высоко детализированные произведения искусства, в то время как другие достигают такого же эффекта, используя простые формы, которые так же выразительны.

Кроме того, форма также помогает установить «настроение» рассказа или, точнее, то, как ваши пользователи воспринимают значки. Вы можете пойти на более игровое чувство, используя мягкие закруглённые углы и фигуры или что-то более формальное, используя прямые углы и линии.

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

Выражение

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

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

Обычно, это самый большой вопрос, который задают люди в дизайне иконок, но правда в том, что универсальной формулы достижения умопомрачительного стиля нет. Это субъективно и зависит только от времени и энергии, которые мы вкладываем в процесс улучшения того, что мы делаем. Стиль не придёт, пока ты не докажешь, что достоин этого, но поверь мне, когда это случится, ты будешь улыбаться несколько дней.

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

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

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

5. Создание с вариантами размеров

Размер — или, точнее, «размеры» — это, наверное, самый важный аспект, который необходимо учесть, поскольку ваши значки, вероятно, будут использоваться на разных экранах разного размера и плотности пикселей Это означает, что они должны следовать определённым размерам, установленным либо интерфейсом, либо самой ОС.

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

Будь это Google’s Android или Apple’s iOS, вы можете легко найти нужный размер/размеры, создавая набор icons для мобильного приложения.

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

Теперь вам не надо помнить размер для каждого устройства и ОС наизусть, но вы должны знать, что вам придётся адаптироваться и использовать определённые значения, а не свои собственные.

С другой стороны, если вы создаёте пакет значков для продажи на онлайн-рынке, там тоже есть свои правила, поскольку обычно эти пакеты поставляются с точными вариантами размера от 16 x 16 px до 256 x 256 px.

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

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

Подробнее о процессе правильного scaling your icons в этом небольшом уроке, который я недавно написал.

6. Достижение согласованности и связности с помощью эталонных сеток

Как правило, если вы создаёте пакет значков, продукт должен быть согласованным полностью, иначе «стиль» в конечном итоге пропадёт, поскольку значки не будут гармонировать.

Значит, следующая вещь, которую вы должны изучить и всегда применять в работе — это Reference Grids. По определению, Grid это «структура, состоящая из ряда пересекающихся прямых (вертикальных, горизонтальных и угловых) или изогнутых направляющих линий, используемых для структурирования содержимого. Сетка служит арматурой, на которой дизайнер организует графические элементы рациональным, простым в освоении образом » (Википедия).

В дизайне иконок Reference Grids необходимы, так как они позволяют создавать пакеты значков, что является обязательным требованием, поскольку вы не можете продавать продукт с несбалансированным стилем.

7. Всегда избегайте текста внутри своих иконок

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

Подумайте, как странно было бы видеть значок часов со словом «часы», написанным под ним. Должно быть очевидно, что это часы без необходимости описывать их словами.

Мастер Йода рекомендует:  10 полезных ресурсов по технологии blockchain

Кроме того, подумайте, как создать супер мелкую иконку (24 x 24 px), поставить рядом с ней слово с весом шрифта 6 px и ожидать, что кто-то сможет его прочитать.

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

Как правило, вы всегда должны избегать использования текста и находить способ создания значка с чётким выражением того, что он обозначает без какой-либо внешней помощи.

Что касается фотографий, бывают ситуации, когда они ещё используются, но я, честно, никогда даже не думал об использовании фотографии, как части значка. Я имею в виду, что это просто странно, поскольку причина использования иконок в первую очередь — это перевод функции или части реальности в UI.

8. Стремитесь к достижению Pixel Perfection

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

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

Что касается icon дизайна, здесь, чтобы быть успешным, нужно научиться работать так, чтобы каждая маленькая форма и линия были идеально привязаны к сетке пикселей, чтобы значок был как можно резче и чётче.

Я видел множество плохих значков, которые расплывались на устройствах с большим разрешением и я удивлялся, почему они не делают всё правильно. В конце концов, это побудило меня исследовать вопрос и создать учебный курс «как это сделать», объясняющий процесс creating pixel-perfect artwork.

Если обучение с помощью просмотра вам интересно, то есть хороший видеокурс, который я создал несколько месяцев назад, где показан пошаговый процесс creating a set of pixel-perfect icons.

9. Учитесь рисовать просто

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

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

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

Помните, в конечном итоге ваша миссия дизайнера значков заключается в создании чего-то функционального, простого в использовании и привлекательного.

10. Всегда повторяйте

Никогда не останавливайтесь на первой версии дизайна. Всегда заставляйте себя делать как можно больше проб, пока не найдете золотую, ту, которая не только говорит, но и выглядит лучше. Делая так, вы растёте и развиваете навыки быстрее и, самое главное, делаете работу лучше, к чему должен стремиться каждый из нас.

Не имеет значения, происходит это на простом листе бумаги или на 800 x 600 px Artboard. Важно то, что вы разбираете как можно больше направлений до принятия окончательной версии, потому что первые идеи не всегда самые лучшие.

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

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

В заключение


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

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

Перед тем, как расстаться, оставляю вам ссылки на все icon пакеты, которые я использовал.

9 самых удобных способов расставить иконки приложений на iPhone

Эти способы сортировки иконок помогут максимально быстро ориентироваться в приложениях и находить нужные.

1. По частоте использования

Самый простой способ сортировки, при котором востребованные приложения располагаются на главном экране или ближе к нему, а запускаемые редко занимают своё место на последних страницах.

Преимущества: нужные приложения всегда под рукой.

Недостатки: если приложений много, увеличивается время на поиск и запуск нужного.

2. Папки по категориям

С момента появления папок в iOS использовать их для сортировки сам бог велел. Наиболее логичный способ — это сгруппировать их по тематике. «Интернет», «Спорт», «Офис», «Игры» — сама система подсказывает названия для объединения двух похожих приложений. Обычно всё помещается в папках на втором экране, а на первом освобождается место для более востребованных программ.

Преимущества: можно компактно разместить большое количество приложений.

Недостатки: сложность поиска и одно дополнительное действие для запуска.

3. Папки действий

В отличие от предыдущего, в этом способе в качестве критерия сортировки используется назначение приложений — действия, которые они помогают совершать. Например, в папку «Читать» попадают iBooks, Reeder и Pocket, в «Слушать» — Spotify, «Подкасты» и «Музыка», а в «Играть» — игры.

Можно не заморачиваться с названиями и использовать вместо слов эмодзи. Так в подписи легко поместится даже не одно, а несколько действий.

Преимущества: удобство восприятия и минимальное время на поиски.

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

4. Папки на одном экране

Суть этого способа — в сознательном отказе от использования нескольких рабочих столов для того, чтобы разместить всё на главном экране. Придётся постараться и сгруппировать приложения так, чтобы уложиться в доступное место. Зато потом не надо будет листать — достаточно открыть одну из папок и запустить нужное приложение.

Преимущества: максимальная компактность.

Недостатки: довольно сложно сгруппировать все приложения по нескольким папкам.

5. По тематике без папок

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

Преимущества: более чёткое визуальное восприятие и быстрый поиск.

Недостатки: почти нереально уместить нужные приложения на 2–3 рабочих столах; они растягиваются на 5–7 экранов.

6. Минимализм

Хороший способ, упрощающий поиск приложений и делающий ваш рабочий стол привлекательным. Однако подойдёт он лишь тем, у кого настолько мало установленных приложений, что их можно разместить на 1–2 экранах.

Преимущества: красиво и понятно.

Недостатки: бесполезно, если приложений больше двадцати.

7. По алфавиту

Самый суровый способ для тех, кому лень как-либо сортировать приложения. Он используется в iOS по умолчанию. Если вы знаете название приложения, найти его не составит труда. Для включения такого типа сортировки откройте «Настройки» → «Основные» → «Сброс», выберите «Сбросить настройки „Домой“» и подтвердите действие.

Преимущества: строгий порядок.

Недостатки: необходимость пролистывания рабочих столов и запоминания названий приложений.

8. По цвету

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

Преимущества: очень красиво.

Недостатки: почти бесполезно. Найти нужное приложение становится довольно сложно.

9. Комбинированный способ

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

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

Преимущества: возможность тонкой настройки под себя.

Недостатки: большее время на поиск приложений по сравнению с более лаконичными способами сортировки.

Как поддерживать на рабочем столе порядок

Какой бы из способов вы ни выбрали, не забывайте поддерживать порядок. Сделать это очень легко. Достаточно придерживаться простых правил:

  1. Создавайте не больше трёх рабочих столов, иначе на пролистывание экранов будет уходит много времени.
  2. Раз в месяц удаляйте приложения, которые не используете. Иконок станет меньше, а порядка больше. Ещё и место сэкономите.
  3. Не забывайте о поиске. Свайп вниз на любом экране откроет Spotlight, в котором, вбив всего пару символов, можно легко найти нужное приложение.

Советы по выравниванию иконок в тексте

Дата публикации: 2020-05-30

От автора: иконки сейчас очень популярны, они дополняют контент (в большинстве случаев). Но с другой стороны они могут доставить немало хлопот. Если вы определились с форматом (SVG или шрифты-иконки?) и создали сами иконки, все равно по мере разработки будут всплывать различные моменты. Хороший вопрос, который часто приходит на ум, когда начинаешь рассуждать об иконках: есть советы, как можно выровнять svg иконки в тексте?

Хитро, правда? Выравнивание иконок может быть довольно сложной задачей, особенно если иконки сделаны несколькими людьми. Признаться честно, я думал, что вопрос настолько легкий, что на него можно ответить одним твитом. Однако для идеального выравнивая иконок в тексте придется постараться.

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

Совет 1: Определитесь с форматом иконок

Есть и другие форматы иконок кроме SVG. Есть множество методов, которые уже устарели. Пара примеров форматов иконок: SVG иконки, Шрифты-иконки, CSS спрайты, Инлайновые изображения.

Вне зависимости от ваших предпочтений выравнивание иконок сильно зависит от выбранного формата. К примеру, все ваши иконки занесены в один спрайт. Значит, у иконок фиксированный размер (если конечно вы не сделали сначала самые большие иконки, а потом с помощью background-size уменьшаете их). В таком случае намного проще подобрать размер и line-height текста для выравнивания с иконками.

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Преимущество SVG в том, что он масштабируемый, и вы больше времени уделяете CSS, а не дизайну.

Вывод: выберите один формат для всех иконок и на его основе стройте свой способ выравнивания. Код в таком случае будет намного проще, а ваш дизайнер (или ваш внутренний дизайнер) скажет вам спасибо.

Совет 2: Используйте иконки одного размера

Идеальная ситуация, когда все иконки одного размера. Скажем, все ваши иконки по размерам 100х100px. Мы знаем размеры иконок, что существенно упрощает процесс выравнивания.

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

Иконка земли уже иконки аватара, а та в свою очередь уже иконки корзины. Если вы похожи на меня, то вы обрежете все пустое пространство вокруг иконок для экономии размера файла. Хорошо, но теперь у нас иконки разных размеров. Если мы работаем с SVG, это не проблема. А вот для растровой графики типа PNG такой расклад нежелателен. В SVG мы можем задать определенное пространство, которое будет занимать иконка без потери разрешения, а вот растровая графика будет растягиваться и искажаться, если не соблюдать разрешение.

Тут можно подогнать условия, в которых создаются иконки, к используемому формату. Если вы используете SVG, то сама иконка может быть любого размера, но постарайтесь не трогать размеры холста в Illustrator’е (или любом другом графическом редакторе). Так вы сможете в будущем масштабировать иконки.

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

Совет 3: Подбирайте font-size под размер иконок

Иконки в большей своей части обрабатываются, как шрифты. Они используются на пару с текстом или вместо него, поэтому крайне важно подбирать размер иконок под размер текста по той же самой причине, что и использовать буквы одного размера – это влияет на разборчивость текста.

Это не значит, что иконки должны быть обязательно 16px, если у вас шрифт текста равен 16px. Важно понимать, что ваши иконки отлично дополняют текст, будь они чуть больше, одного размера или чуть меньше основного текста. Наглядная иллюстрация хорошо выравненных иконок и плохо выравненных иконок.

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

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Совет 4: Точно настраивайте внешний вид с помощью CSS

После всего сказанного и сделанного есть один точный и простой способ по выравниванию иконок в тексте:

Полное (я надеюсь) руководство по созданию набора плоских иконок

Для ботанов, которые прочли мою статью по визуальному весу и оптическому выравниванию. Минимум слов, максимум картинок.


(Мы продолжаем переводить цикл статей по визуальному дизайну. Полную подборку советов можно найти в коллекции « Основы дизайна»)

1. Пользуйтесь оптической сеткой

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

Интересуетесь свежими статьями по дизайну? Вступайте в группу на Facebook.

Ищите системное погружение в тему? Загляните в блог для дизайнеров.

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

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

Не становитесь рабом собственной сетки. Она должна помогать, а не ограничивать. Если какие-то элементы торчат и иконка при этом выглядит круто — то пусть себе торчат!

2. Помните о пиксельной сетке

Чтобы иконки выглядели четко на экранах без ретины, пользуйтесь пиксельной сеткой. Для контурных иконок лучше использовать границы шириной в 2 пикселя. Если отцентровать такую границу относительно контура, силуэт получится достаточно толстым и четким.

Если использовать границу шириной в 1 пиксель, ее нужно выровнять либо по внутренней стороне, либо по внешней — но не по центру.

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

Устанавливайте начальные и конечные точки диагоналей в соответствии с сеткой. Диагонали с углами 45°, 30° и 60° выглядят четче, чем диагонали в нестандартными углами (к примеру, 13.7° или 81°).

3. Придерживайтесь определенной детализации

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

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

4. Следите за размерами промежутков

Расстояние между соседними элементами иконки не должно быть слишком маленьким либо “гулять”. Определите минимальный размер промежутков и придерживайтесь его, чтобы контуры не “слипались”.

Для контурных иконок, минимальный размер промежутка должен равняться толщине линии. Линии нужно либо явно отделить, либо аккуратно соединить — почти соединенных линий быть не должно.

5. Уберите повторяющиеся детали

В наборах иконок часто бывают повторяющиеся детали. Лучше их убрать, чтобы сделать упор не на сходства, а на различия иконок. Это как сокращение дробей. Чем меньше графического шума — тем проще понять суть.

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

То же касается и разных украшений — рамок, фонов и т.п.— вокруг иконки. Если они не помогают понять смысл иконки, то, считайте, мешают.

6. Выберите единый стиль и придерживайтесь его

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

Тот же принцип применим, когда мы говорим о контурных иконках и иконках с заливкой. Если использовать и те, и другие в рамках одного набора, люди могут подумать, что они отличаются по важности или статусу. Хотя, возможно, вы специально так задумали? Тогда да, иконка с заливкой может обозначать, например, основное действие, а контурные иконки — все прочие действия.

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

7. Используйте размеры, кратные двум

В большинстве интерфейсов используется 8-пиксельная сетка и 12-колоночный лейаут, поскольку они более гибкие, чем те, что построены на десятичных размерах. 12 можно разделить на 2,3,4 и 6. Поэтому 24-х и 48-пиксельные размеры иконок уже стали стандартом. Такие иконки при необходимости легко можно масштабировать.

8. Следите за точностью и чистотой силуэтов

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

Та же история с бесящими размерами: “8.999 px” или “100.001 px”. Если расставить опорные точки правильно, края иконки будут четкими. Если впоследствии вам придется объединять фигуры, у вас не будет лишних опорных точек и пробелов.

9. Очищайте SVG-файлы от мусора

Многие редакторы (например, Sketch) сохраняют SVG-файлы с артефактами — ненужными группами, цветовыми слоями и масками. Давайте посмотрим. В Sketch все выглядит хорошо:

Открываем SVG в другом редакторе (например, в Adobe Illustrator) и видим пустые слои, ненужные группы и даже маски. Из-за этих лишних штук может быть куча проблем — например, при создании шрифтовых иконок или при добавлении SVG на веб-страницу.

Весь этот мусор нужно удалить.

Вы увидите, что у SVG из Sketch ( picture.svg) и SVG, отредактированной в иллюстраторе ( picture_new.svg), будут разные превьюшки в файловом менеджере.

Если у вас есть идеи, о чем еще можно рассказать в этом руководстве, напишите мне. Давайте сделаем этот материал полнее. Если какое-то правило сломало у вас в дизайне что-то важное, его можно пропустить.

Если вам понравилась статья и перевод, дайте нам знать — нажмите �� (можно “хлопать” несколько раз!)

А если у вас есть на примете какая-нибудь классная статья по UX и не только — скиньте нам ссылку, и мы будем рады над ней поработать.

Мобильное приложение «Заметки о психике» | Mental Notes

Подкидывает идеи, как привлечь, удержать и направить внимание пользователя.

Mental notes — это колода из 53 карточек с описанием психофизиологических моделей поведения людей, которые лежат в основе принципов веб-дизайна. Они помогают дизайнерам, проектировщикам лучше понять поведение пользователей и найти эффективные решения при создании дизайна интерфейсов.

Как оптимизировать юзабилити иконок интерфейса?

Помимо формирования индивидуальности бренда посредством стиля и цветового оформления, иконки интерфейса должны в первую очередь передавать суть своих функций. Однако внедренные в UI-дизайн модные новинки графического оформления нередко становятся источниками путаницы: например, иконки, которые должны делать интерфейс интуитивным, значительно ухудшают его юзабилити.

Но все же использование интерфейсных иконок имеет ряд весомых преимуществ:

  • Они хорошо подходят как для стандартной, так и для мобильной версии сайта — большие кнопки удобны для курсора и пальца.
  • При помощи компактных кнопок можно эргономично структурировать панели инструментов и навигационные меню с большим количеством элементов.
  • Значки упрощают цифровую интеракцию — человеческий мозг обрабатывает изображения быстрее, чем текст.
  • Иконки, как правило, интуитивно понятны жителям всех стран.
  • Кнопки с изображениями (при условии правильного оформления) приятны для глаза.
  • Единый комплект значков, используемый на разных лендингах одной компании, создает образ бренда.

Также стоит заметить, что ответственность за негативный эффект от внедрения иконок ложиться на плечи маркетологов и веб-дизайнеров, которые, стремясь создать привлекательное оформление сайта, забывают о первостепенной важности юзабилити.

В нашей сегодняшней статье вы узнаете о том, как иконки влияют на пользовательский опыт, а также получите несколько ценных рекомендаций, представленных специалистами исследовательской группы Нильсена-Нормана (Nielsen Norman Group, NNG), по их оптимизации.

Иконок, понятных каждому, очень мало

Многие online-пользователи не знают точного значение большинства графических символов, поскольку одна и та же кнопка на различных ресурсах может выполнять разные функции.

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

Выше упомянутое изображение вызывает когнитивный диссонанс у пользователей приложения Buy Me a Pie не только потому, что используется в дизайне кнопки списка, но и по причине нестандартного расположения — справа от панели поиска обычно размещается кнопка отправки поискового запроса.

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

На туристическом сайте Combadi кнопка с сердечком используется посетителями для отметки понравившегося им тура, а на eCommerce-ресурсе Fab идентичный элемент добавляет товар в избранное.

Специалисты NNG недавно провели анализ портала Бакнеллского университета (Backnell University), в навигационном меню которого был размещен значок с часами.

Ни один из респондентов, участвующих в исследовании Nielsen Norman Group, не кликнул на иконку циферблата — никто не догадался, что эта кнопка открывает историю посещений.

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

К иконкам нужно добавлять текстовые пометки

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

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

В мобильной версии ресурса Usability.gov к иконкам добавлены текстовые метки, а в стандартном варианте они показываются только после того, как пользователь наводит на значок курсор мыши — человеку, пришедшему на данный сайт впервые, будет непросто догадаться, что обозначают кнопки в левой части экрана.

Решение этой проблемы предельно простое: добавляйте к иконкам текстовые метки.

Значки ухудшают дизайн стандартных версий сайтов

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

Но дело в том, что в мобильном UI-дизайне относительно немного элементов, поэтому пользователям не составляет труда увидеть небольшой значок. Однако в интерфейсе стандартного сайта, наполненного контентом, панелями инструментов и множеством других элементов, небольшая кнопка становится малозаметной.

Сравните, например, как выглядит элемент меню на различных версиях портала Upworthy.

В мобильном интерфейсе значок «гамбургера» занимает примерно 20% ширины навигационного меню, а в стандартном — всего 3.5%.

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

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

Советы по оформлению иконок

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

Разрабатывая дизайн значков, придерживайтесь следующих рекомендаций:

  • Используйте схематические иконки — простые графические элементы обрабатываются человеческим мозгом быстрее, чем детальные изображения.
  • Пользуйтесь правилом 5 секунд: не оформляйте иконками элементы, к которым вы не смогли придумать релевантное изображение за 5 секунд.
  • Проведите тестирование кнопок с таргет-группой: определите, понимают ли пользователи значение внедренных вами символов и вспомнят ли они функции элементов спустя 2 недели после тестирования.
  • Всегда добавляйте к иконкам и кнопкам текстовые маркеры.
Добавить комментарий