Ошибки начинающих в дизайне

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

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

Дизайн без содержимого (без контента)

Надо понимать, что содержимое — это очень важная составляющая при разработке веб-сайта. Например, когда дизайн сделан с использованием Lorem Ipsum (бессмысленного текста), есть риск, что после его замены на реальный контент, проект будет выглядеть не так хорошо, как рассчитывал дизайнер. Реальный контент может не подойти под мерки нереального: либо не помещаться, либо наоборот сделать страницу слишком пустой.

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

Отсутствие интуитивности

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

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

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

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

Нереспонсивный (неадаптивный дизайн)

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

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

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

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

Плохие формы

Формы есть чуть ли ни на каждом сайте, а также плохо сделанные формы.

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

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

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

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

«Личные кабинеты» генерируются автоматически при регистрации.

А на прогрессивных сайтах для регистрации достаточно вбить номер телефона и подтвердить вход по SMS.

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

Отсутствие призывов к действию

Призыв к действию или CTA (Call to action) — это элементы сайта, призванные подтолкнуть пользователя и показать ему, где и что он может сделать: тут заказать звонок, там скачать прайс-лист, а здесь рассчитать стоимость.

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

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

Нагромождение информацией, навязчивые всплывающие окна

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

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

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

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

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

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

Упущение из виду непредвиденных ситуаций

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

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

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

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

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

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

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

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

Игнорирование целостности дизайна

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

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

Визуальная иерархия и акценты

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

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

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

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

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

Сетка и выравнивания

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

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

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

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

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

Перебор с декором

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

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

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

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

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

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

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

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

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

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

Визуальный шум

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

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

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

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

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

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

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

• Сделает ли этот тренд пользовательский опыт легче?
• Есть ли в нем визуальная эстетика, сможет ли она произвести хорошее первое впечатление на пользователя?
• Сделает ли этот тренд ваш дизайн легче в прочтении?
• Подходит ли тренд к типу сайта/отрасли, в которой надо сделать проект?

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

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

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

Сложные для восприятия шрифты

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

Золотые правила межстрочного интервала:

• Для оптимальной читабельности 120%-140%.
• Ограничьте длину строки до 70–80 знаков.
• Размер шрифта должен быть минимум 16pt.
• Маленькие шрифты должны иметь больший интервал.
• Всегда проверять междустрочный интервал, если поменяли шрифт или размера шрифта.

Слабый контраст

Слабый контраст = меньше пользы.

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

Иконки без подписи

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

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

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

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

Детализированные иконки

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

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

Воссоздание в дизайне привычных условных обозначений и языка

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

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

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

Отсутствие версий для людей с ограниченными возможностями

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

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

Принципы, которых надо придерживаться при проектировании инклюзивных интерфейсов:

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

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

Больше креативности — меньше юзабилити

Чтобы дизайн был хороший, надо, чтобы он и выглядел хорошо, и работал, а не одно из двух.

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

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

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

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

Слишком много времени на идеальный пиксельный вид прототипа

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

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

Надо учиться отпускать свои идеи и начинать сначала, если этого требует ситуация.

Не видеть общую картину и не общаться с коллегами

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

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

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

Неподготовленность к передаче своих проектов

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

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

Игнорирование мнения пользователей

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

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

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

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

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

Отсутствие идеи в основе дизайна

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

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

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

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

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

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

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

Как создать хороший интерфейс

• Делайте упор на UX — опыт пользователя.

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

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

• Понятный UI — то, как сайт или приложение выглядит.

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

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

Здесь также приветствуется простота.

• Проводить коридорные интервью и тестировать интерфейс.

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

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

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

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

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