Всем привет. Меня зовут Алеся, и некоторое время назад я начала свои первые шаги в сфере UX/UI дизайна.
В данной статье я хотела бы "собрать в кучу" всю информацию о UX/UI дизайне, которую полезно знать при создании сайтов и мобильных приложений.
1. Логичность структуры сайта или приложения
Вся важная информация должна быть "на поверхности". Многие дизайнеры, углубляясь в процесс творения, иногда слишком стараются сделать все не как у всех, необычным и креативным, что может привести к дизайну, который непонятен пользователям, а ведь это одна из самых важных частей UX/UI дизайна. Первостепенная задача - сделать не только красиво, но и максимально удобно. У посетителей сайта не должны возникать такие вопросы как "А где тут контакты?" или "А как посмотреть корзину?" (если мы говорим об интернет-магазине).
И так, соответственно, посмотрите, на сайт, который вы сделали, глазами человека, который зашел на него как посетитель. Представьте, что вы видите его впервые, а если так не получается, попросите помощи друзей и знакомых. Если кто-то из них спросит, например, как посмотреть страницу "Избранное", это нужно исправить до того, как сайт или приложение "выйдет в свет".
Разберем на примере,
Тут вы можете увидеть переделку текущего дизайна сайта в соответствии с данными правилами. Ошибки текущего сайта:
* Верхнее меню сливается с баннером.
* Баннер слишком пестрит и отвлекает внимание от важной информации.
* Важная информация о бесплатной примерке спрятана в дальний угол, а информация об обновлении инфы о коронавирусе по важности сопоставлена со всеми пунктами меню, хотя там должны находиться только то, что поможет человеку сделать конверсию и найти нужный для него товар.
* Контакты на сайте разделены на 3 способа связи, на каждый из которых нужно попадать через меню, что неправильно. Страница с контактами -это страница со всеми контактами и они должны быть в одном месте, иначе человек запутается.
* На сайте отсутствует корзина или избранное, куда можно сложить выбранные товары и потом пересмотреть для окончательного выбора.
Все эти ошибки сильно усложняют процесс покупки для пользователей и я попыталась исправить это в своем дизайне. Соответственно, чтобы сделать все интерфейс удобным, нужно все делать абсолютно противоположно тем пунктам, что я описала выше.
2. Придерживаться единого стиля
Когда пользователь впервые приходит на ваш сайт и остается на нем, это значит, что он ему, как минимум, приятен, но если при переходе на другую страницу или экран в приложении, дизайн резко поменяется, пользователь может покинуть его. Он уже привык к одной цветовой гамме, шрифтам и паттерну и чувствовал себя комфортно, поэтому любые резкие переходы, могут вызвать дискомфорт.
С другой стороны, при создании страницы сайта, есть рекомендация чередовать блоки этого сайта (темный и светлый, яркий и блеклый), это помогает сохранить внимание пользователя и не делать одноцветную простыню.
В этом пункте важен баланс: сохранять интерес пользователя и не отталкивать его кардинальными изменениями в дизайне.
3. Каждый элемент в дизайне должен быть на своем месте
Одно из самых важных правил хорошего UI - это расположение элементов в порядке их важности. Задача - привлечь внимание пользователей к наиболее важной информации на странице и упростить для них нахождение этой информации. Из этого правила можно вывести следующие пункты:
* Следить, чтобы отступы внутри блока не были больше или такими же как между смысловыми блоками. Должно быть легкое, но заметное разделение информации по смыслу.
* Информация, важная для совершения конверсии должна привлекать внимание (это не значит, что она должны быть ярко красной или синей на сайте в пастельных оттенках)
* Вся важная информация для совершения конверсии должны быть доступна пользователю "в один клик" (он не должен переходить по 3-4 страницам, прежде чем найдет телефон для совершения звонка)
Как пример могу привести этот сайт -
Клиент очень хотел, чтобы им звонили, но при этом скрыли телефон и другую важную контактную информацию за кнопками. В случае когда основная цель - звонки, телефон нужно выносить на видимую область и выделять его цветом или размером шрифта.
4. Использование цвета как управление вниманиманием пользователя
Я уже частично упомянула это в пункте 2.
Повторю тут, чтобы вы не возвращались назад:
При создании страницы сайта, есть рекомендация чередовать блоки этого сайта (темный и светлый, яркий и блеклый), чтобы сохранить внимание пользователя и не делать одноцветную простыню.
Цвета и контрасты - это ваше оружие для управления вниманием (тут главное пользоваться им аккуратно и не убить пользователя этим оружием 😊)
5. Использование "нестареющей классики"
Ладно, может быть и не классики, но того, к чему люди привыкли. Например, открывая мобильное приложение, пользователь знает, что, нажав на бургер, он откроет меню. А что, если дизайнер решил, что внешний вид бургера устарел и нужно что-то новое? Он решил сделать что-то супер-креативное и сделал новую иконку, не похожую на бургер совсем. Это приводит пользователя к дезориентации, да, в конце концов он поймет что и где расположено, потыкав во все. Главное "но" тут - это то, что пользователь вообще не должен тратить на это время, все должно быть понятно интуитивно. Вывод из этого такой: если все знают, что бургер это меню - используйте бургер и то же можно применить к другим визуальным элементам, к которым пользователи привыкли, например, корзина.
6. Пользователь должен чувствовать, что он контролирует ситуацию
На каждом своем этапе, возьмем за пример интернет-магазин, пользователь должен знать где он и что происходит. Пример, нажимая на страницу товара, он отчетливо видит, что это страница товара, при переходе в корзину, он видит, что это корзина и так далее.
При всем этом, он должен знать, что в любой момент он может вернуться назад, отменить какое-то действие, начать сначала или продолжить то, что он делал.
Если пользователя "потеряется" в структуре сайта, он покинет его и вряд ли вернется.
7. Меньше движений
Сведите к минимуму количество используемых жестов в приложениях. Смахивание, касание, нажатие… нет необходимости «втискивать» все эти действия пользователя в ваше приложение. Сведите их к минимуму.
Например, Facebook и WhatsApp являются хорошими примерами дизайна пользовательского интерфейса; они требуют ограниченное число пользовательских жестов.
Убедитесь, что вашим пользователям абсолютно понятно, какие жесты им нужно выполнять, чтобы выполнять определенные действия в вашем интерфейсе. Например, свайп на сообщении - ответить пользователю и так далее.
8. Не перегружать информацией
Убедитесь, что на одном экране пользователь видит не более 2, а лучше 1 призыв к действию. Он не должен запутаться куда нажимать и что делать.
Разделите сайт (если это сайт) на смысловые блоки, а если это приложение, то разделите экраны по содержанию, на каждом смысловом блоке должно быть одно действие, которое вы хотите от пользователя.
9. Использование заголовков и подзаголовков
Текст в любом интерфейсе должен быть логически разделен на блоки. Название, по которому будет легко найти блок выделено сильнее, чем весь текст, просто тексты с описаниями простым, но читабельным шрифтом, и есть информация, которая скорее украшение блока, которая может быть написана красивым рукописным шрифтом, потому что даже если кто-то не поймет, что там написано, эта информация не представляет собой что-то важное для совершения конверсии.
Если у вас есть вопросы, я с радостью на них отвечу 😊
Я люблю подобные статьи, чтобы насладиться визуалом. Текст - это конечно хорошо, но примеров совсем нет. Слишком обобщенно, мол, 2 пункт "единый стиль". Если бы вы скинули пример хорошего единообразия, как например на таком-то сайте и антипример, как не надо делать, то ваша информация гораздо сильнее уцепилась бы в голове.
Сильные статьи о дизайне пишет Егор Комаров, вот там примеров действительно много. Посмотрите, как он это делает)
Это моя первая статья, спасибо за комментарий, исправлюсь:)
В любом случае, пишите, вы молодцы:)
Спасибо ❤️
А где телеграм-канал? ))
А надо писать?)
Интересный момент: в статье автор поставил во главу угла всем известное «удобство пользовния», но примеры вставлены не как картинки, а как ссылки. По ссылке нужно переходить, смотреть, а потом возвращаться обратно. Неудобно ведь с мобильных устройств. Удобство пользования это не только где располагается баннер, как сделано меню и т.д. Ваша статья — тоже дизайн, но здесь, к сожалению, не продуманы основные моменты. Успехов и удачи в обучении!
Ссылки, потому что кейсы на беханс описаны подробнее. Если бы я сюда всю информацию запихала, то читать это можно было бы очень долго.
Не думаю, что большинству читателей необходима подробная информация. Кому нужна — ссылка подойдёт. Но для остальных подойдёт информация в виде картинки. Это наглядно и переходить никуда не нужно. Мы ведь хотим когда читаем статью, чтобы ее структура и контент были цельными, без внешних ответвлений и лишних движений: «такой-то блок плохой и вот почему: <картинка, демонстрирующая плохой блок>, а если кому интересно, то вот весь кейс: <ссылка>»
Это типа резюме было?) все одно и тоже пережевано…
А где 7й пункт потерялся?
Потеряла в черновике, когда перепроверила и вставила, не заметила. Спасибо, что увидели)
Пример конечно лучше живой сайт, а не кейс на биханс. Открыл его и навеяло шаблонами. Почему скачать шаблон на темфорест хуже, чем заказывать дизайн у вас?
Вы пишите, что лучше не делать, но далее ожидается, что будет указано "как правильно". (3 пункт)
В кейсах на биханс я все описала что не так с каждым сайтом. Есть картинка сайта "до" и "после"
Я подумала, что в 3 пункте понятно описано:
"Клиент очень хотел, чтобы им звонили, но при этом скрыли телефон и другую важную контактную информацию за кнопками. В случае когда основная цель - звонки, телефон нужно выносить на видимую область и выделять его цветом или размером шрифта."
Там написано, что нужно в последнем предложении.
Имелось ввиду вот это: (это не значит, что она должны быть ярко красной или синей на сайте в пастельных оттенках)
И вот это:
(он не должен переходить по 3-4 страницам, прежде чем найдет телефон для совершения звонка)
Предполагается, что здесь нужен ответ, причем относительно бизнес-процессов клиента, а не в целом ui
Я вас поняла, спасибо за замечание. Я учту это в следующий статье)
А так, очень годная статья
Спасибо:)
Комментарий удален модератором
Какие-то уж совсем прописные истины. Типа: не ешь землю, мой руки перед едой, переходи на зелёный свет.
"Например, Facebook.... являются хорошими примерами дизайна пользовательского интерфейса"
Это шутка такая?
Есть ux, есть ui.
Начнем с того, что хороший ui - это про художества в первую очередь. У вас тут куча про художества, но ничего про ux.
Ux - это про оо, как пользователь ведёт себя. Это юзерстори от момента знакомства до момента выбора. Любая цепочка действий предусматривает под собой измеримость шагов цепочки, а так же проработку сценариев разных групп. У вас нет понимания метрик продукта. Нет понимания метрик - нет понимания метрик частей продукта. А изменения без метрик - это лишь ваше собственное мнение, которое может отличаться от чего угодно в любую сторону.
Начните ковырять метрики. Начните ковырять из так, чтобы вы обосновано могли сказать, зачем вы меняете тот или другой элемент интерфейса или какую конкретно цепочку и на каких шагах вы изменяете, какие метрики собираетесь улучшить и как (критерий успеха).
А до этого момента вы дизайнер/художник. Начните мыслить продуктовыми Метриками (по сути, смотреть на продукт цельно с одной стороны и прозрачно по шагам с другой). И сразу ваша работа будет обоснована.
А пока очень грустно, прочитал то, что блин и без вас известно, что небо синим цветом рисуем, А солнышко желтым и сверху, а то непонятно будет. В чем ценность данной статьи - в воде, потому что вода - основа жизни.