Интуитивные иконки: пособие по юзабилити

Posted on by riasevastopol

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

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

Дабы узнать это, был совершён дистанционный опыт с участием 35 человек, которым внесли предложение оценить 190 иконок в разных Android-приложениях. Кое-какие из них были очевидны и общеизвестны, как лупа для функции поиска. Другие были менее очевидны — к примеру, флаг, обозначающий принадлежность к группе.

Одни иконки имели текстовые автографы, другие — нет.

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

их влияние и Виды иконок на поведение пользователя

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

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

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

Перечислим самые проблемные варианты.

  • Сплит-тест: текст Vs иконки на товарном лендинге вебмагазина

1. Непонятные и противоречивые иконки

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

Что случится, если вы надавите на нее?

Сейчас таковой знак в большинстве случаев ассоциируется с выражением симпатии — на него нажимают, если вы желаете продемонстрировать, что вам что-то нравится (к примеру, фотография, товар либо комментарий). Но будет ли объект, что вы «лайкнули», добавлен в избранное? Оповестит ли приложение кого-либо о вашем действии?

Будут ли ваши предпочтения учтены в будущем, дабы программа имела возможность выдать вам подобные результаты? Либо это всего-навсего несложный символ одобрения?

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

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

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

2. Устаревшие иконки

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

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

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

  • Иконка лупы в веб-дизайне: советы по применению и методы оптимизации

3. Неповторимые иконки

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

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

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

Хорошим примером есть известный значок в форме пера в приложении Twitter. Не обращая внимания на отсутствие подписи, 80% людей без неприятностей знают, какую функцию он делает:

Из-за чего такая, казалось бы, несовременная иконка была такой эффективной? Вот пара обстоятельств:

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

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

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

4. Брендирование. Иконка напоминает перья на известном логотипе Twitter. Это формирует чувство единства между брендом и самими твиттами.

  • Страшна ли иконка-гамбургер для здоровья вашей конверсии?

Подписи для удобства пользователей

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

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

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

Недавнее изучение продемонстрировало, что в 88% случаев, заметив иконку с подписью, пользователи имели возможность угадать, что случится при нажатии. Для иконок без автографов данный показатель составил 60%. Что касается неповторимых иконок, то только 34% опрошенных имели возможность додуматься о делаемой функции.

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

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

  • Информационный пробел либо интуитивный веб-дизайн

Заключение

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

1. Не применяйте иконки, имеющие противоречивый либо неоднозначный суть.
2. Избегайте чрезмерной сложности и непонятного креатива.
3. Применяйте подписи всегда, в то время, когда они нужны пользователю.
4. Неизменно тестируйте любое собственный дизайнерское ответ.

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

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

Высоких вам конверсий!

По данным usertesting.comimage source burntsugar

Случайные статьи:

Как сделать страницу Mobile First и адаптивный дизайн 19 | Конкретные элементы


Подборка похожих статей:

riasevastopol

More Posts