Типичные ошибки новичков в дизайне

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

⚡️ Эта статья копипаста с основного ресурса tproger.ru

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

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

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

Проектирование

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

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

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

Лишний дизайн

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

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

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

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

Не изобретайте велосипед

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

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

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

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

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

Универсальность и паттерны

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

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

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

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

Визуальная иерархия

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

Необходимо понимать, какая информация для вашего пользователя наиболее важна, а какая — второстепенна.

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

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

Есть несколько основных способов выделения важной информации:

  • размеры элементов;
  • структурирование в типографике (заголовок, подзаголовок, описательный текст);
  • повторение и группировка;
  • цвет.

Человечные тексты

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

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

Это неправильно.

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

Технические ограничения

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

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

Соберите информацию, сможет ли он воплотить вашу гениальную идею в коде.

Пустые страницы и страницы с ошибкой

Очень часто новички забывают о страницах с ошибкой 404 или страницах/окнах с пустыми данными.

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

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

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

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

Статьи по теме

UX-исследования для начинающих

Лайфхаки и оптимизация работы в Figma