9 пунктов, чтобы проверить насколько ваш дизайн можно назвать UX/UI продуманным

Всем привет. Меня зовут Алеся, и некоторое время назад я начала свои первые шаги в сфере UX/UI дизайна.

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

Вся важная информация должна быть "на поверхности". Многие дизайнеры, углубляясь в процесс творения, иногда слишком стараются сделать все не как у всех, необычным и креативным, что может привести к дизайну, который непонятен пользователям, а ведь это одна из самых важных частей UX/UI дизайна. Первостепенная задача - сделать не только красиво, но и максимально удобно. У посетителей сайта не должны возникать такие вопросы как "А где тут контакты?" или "А как посмотреть корзину?" (если мы говорим об интернет-магазине).

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

Разберем на примере,

Тут вы можете увидеть переделку текущего дизайна сайта в соответствии с данными правилами. Ошибки текущего сайта:

* Верхнее меню сливается с баннером.

* Баннер слишком пестрит и отвлекает внимание от важной информации.

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

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

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

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

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

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

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

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

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

* Информация, важная для совершения конверсии должна привлекать внимание (это не значит, что она должны быть ярко красной или синей на сайте в пастельных оттенках)

* Вся важная информация для совершения конверсии должны быть доступна пользователю "в один клик" (он не должен переходить по 3-4 страницам, прежде чем найдет телефон для совершения звонка)

Как пример могу привести этот сайт -

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

Я уже частично упомянула это в пункте 2.

Повторю тут, чтобы вы не возвращались назад:

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

Цвета и контрасты - это ваше оружие для управления вниманием (тут главное пользоваться им аккуратно и не убить пользователя этим оружием 😊)

Ладно, может быть и не классики, но того, к чему люди привыкли. Например, открывая мобильное приложение, пользователь знает, что, нажав на бургер, он откроет меню. А что, если дизайнер решил, что внешний вид бургера устарел и нужно что-то новое? Он решил сделать что-то супер-креативное и сделал новую иконку, не похожую на бургер совсем. Это приводит пользователя к дезориентации, да, в конце концов он поймет что и где расположено, потыкав во все. Главное "но" тут - это то, что пользователь вообще не должен тратить на это время, все должно быть понятно интуитивно. Вывод из этого такой: если все знают, что бургер это меню - используйте бургер и то же можно применить к другим визуальным элементам, к которым пользователи привыкли, например, корзина.

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

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

Если пользователя "потеряется" в структуре сайта, он покинет его и вряд ли вернется.

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

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

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

Разделите сайт (если это сайт) на смысловые блоки, а если это приложение, то разделите экраны по содержанию, на каждом смысловом блоке должно быть одно действие, которое вы хотите от пользователя.

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

Если у вас есть вопросы, я с радостью на них отвечу 😊