Какие типичные ошибки в дизайне сайта допускают новички — рассказывают эксперты

Сетки

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

Выравнивание контента

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

Погоня за «украшательствами»

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

Воздух

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

Акценты и читаемость текста

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

Некачественная работа с графикой

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

Работа со слоями

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

В работах тех, кто только пришёл в профессию, чаще всего натыкаюсь на следующие ошибки.

«Грязные» цвета

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

Слишком жёсткие тени элементов интерфейса

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

Неконтрастные цвета

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

Непродуманная визуальная иерархия

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

Эти ошибки могут совершить как начинающие дизайнеры, так и программисты, которые по какой-либо причине делают сайт без дизайнера. Последние обычно используют готовые элементы и шаблоны веб-интерфейсов из библиотек Bootstrap, Metronic и других, но эти инструменты не решают абсолютно все задачи по UX/UI сайта, и о многом придется думать самостоятельно. С какими ошибками можно столкнуться?

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

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

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

Используйте подход Jobs To Be Done (JTBD, «работа, которая должна быть выполнена»). Он предлагает отталкиваться не от характеристик пользователя, а от его задач. Пете нужен файлообменник не потому, что у него высшее образование и ему 33 года, а потому, что ему нужно перенести файлы с одного компьютера на другой. Понимая, какова задача пользователя, намного проще представить себе интерфейс для её решения.

Рисовать интерфейс «из головы», без конкурентного анализа и user-flow

Представим, что существует задача — сделать небольшой интернет-магазин по продаже обуви. Junior-дизайнер думает так: «Я видел много интернет-магазинов, нарисую что-нибудь похожее по памяти». Это плохой путь: дизайнер рискует создать нечто нефункциональное и притом потратить много времени, потому что без плана работать довольно трудно.

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

Далее нужно проработать user-flow – логику действий пользователя на сайте. Проще всего набросать эти сценарии прямо от руки на бумаге. После этого можно переходить к вайрфреймам (wireframe, «каркас», прототип сайта со схематическим изображением всех элементов финального дизайна). Дизайнеры могут отрисовать их вручную, разработчики — собрать из элементов готовых UI-китов от дизайнерского комьюнити Figma.

Нарушать F-образный паттерн при построении страницы

Неопытные дизайнеры часто располагают элементы страницы без учёта F-паттерна. F-паттерн — это наиболее распространённый шаблон движения глаз пользователя при изучении контента на странице. Исследования показывают, что обычно люди читают верхние строки (слева направо), затем спускаются на несколько строчек ниже и читают ещё немного текста по горизонтали, а потом опять просматривают левую сторону контента по вертикали вниз. В итоге область внимания пользователя напоминает букву F, и наиболее важные элементы лучше располагать именно здесь. Отступать от этого паттерна можно (например если у вас есть задача сместить фокус пользователя), но нужно понимать, что это скорее исключение из правил.

Пренебрегать правилами оформления текста

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

Делать незаметные кнопки, нарушать их иерархию

Неправильно оформленная кнопка может обрушить даже самый хорошо продуманный пользовательский сценарий. Следите за тем, чтобы кнопка легко считывалась — пользователь должен с первого взгляда понять, что это именно кнопка, а не какой-либо другой элемент дизайна. У пользователя не должно быть трудностей с её нажатием, поэтому она не должна быть слишком маленькой. Также необходимо соблюдать иерархию кнопок: первостепенные (primary) должны быть более заметными, чем второстепенные (secondary). Например первостепенная кнопка «Купить» может иметь заливку ярким цветом, а второстепенная «Продолжить покупки» — быть в виде текста на белом фоне.

Добавлять иллюстрации ради иллюстраций

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

Неверно подбирать иконки

При отрисовке или выборе иконок из готовых наборов нужно соблюдать как минимум два правила: во-первых, иконки должны правильно отражать суть скрытого под ними действия, во-вторых, они должны быть в одной стилистике. Не должно возникать ситуации, когда часть иконок — с заливкой, часть в виде обводки, а где-то вообще в виде полноценных иллюстраций. Разработчикам я могу порекомендовать использовать готовые наборы, например Feather Icon. Этот пак хорош тем, что под каждой иконкой указано действие, которое она означает, а значит, вы точно не ошибётесь при выборе.

 Работать без фидбэка

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

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

Не разбираются в задаче

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

Рисуют и двигают пиксели, а не проектируют

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

Используют фотографии и иконки с первой страницы поисковой выдачи

Такие картинки примелькались и успели надоесть. Если не можете нарисовать иконку сами, перейдите на пару-тройку страниц вперёд и поищите её там. Возможно, она будет менее популярной.

Увлекаются декором: много шрифтов, цветов, стилей и иллюстраций

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

Используют шаблонные решения vs Изобретают велосипед

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

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

Изобретают велосипеды

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

Как избежать

Не нужно боятся копировать другие, более профессиональные работы. Даже самые известные художники и дизайнеры начинали с этого. Главное — понять то, как и почему выбраны те или иные решения. Для тех, кто ещё не знает, что и где искать, есть множество ресурсов, начиная от аккаунтов в Instagram и заканчивая самыми известными Dribbble, Behance и Pinterest.

Бездумно бросаются в тренды

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

Как избежать

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

Игнорируют скетчи

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

Как избежать

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

Используют очень отдалённый контент

Иногда макеты могут создаваться в тот момент, когда контента для этого дизайна ещё нет, и в этот момент не стоит использовать «Lorem ipsum» и рандомные фото с улыбающимися людьми.

Как избежать

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

Отсутствие акцентов

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

Как избежать

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

Отступы и иерархия

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

Как избежать

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

Хаос в макете

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

Как избежать

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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