• Чтобы скачивать файлы, нужно купить доступ к разделу "Графика" .
Купить ссылку здесь

Ваша ссылка

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

Kikim

И где теперь ваш ассемблер?
Модератор
Сообщения
370
Репутация
160
Баллы
71
295
Разработка дизайна и интерфейса сайта — это не просто «тыкнуть кнопку здесь, вставить картинку там и использовать десять модных шрифтов». Это кропотливая работа, в процессе которой можно допустить множество ошибок. О том, какие самые часты ошибки допускают новички, мы решили спросить у экспертов.


Илья Саблин​

UX/UI-дизайнер в Purrweb​

Эти ошибки могут совершить как начинающие дизайнеры, так и программисты, которые по какой-либо причине делают сайт без дизайнера. Последние обычно используют готовые элементы и шаблоны веб-интерфейсов из библиотек 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. Этот пак хорош тем, что под каждой иконкой указано действие, которое она означает, а значит, вы точно не ошибётесь при выборе.

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

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


Юлия Мнижек​

UI Designer в SEMrush​

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

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

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

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

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

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

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

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

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

Источник
 
Сверху Снизу