princzipy-ux-dizajna

Принципы UX дизайна

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

1. Последовательность

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

Принципы UX дизайна Бывает, проектируешь интерфейс, и думаешь, «что забыл?» — нет, не бывает, так как каждый интерфейс немного уникален и чеклиста тут не сделаешь. Но можно вывести принципы, которые помогут увидеть недостатки интерфейса, если глаз замылился. Вот такие я вывел для себя, читай статью и пользуйся на здоровье. правила ux
lingscars.com — совершенно трешовый, но зато последовательный в этом

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

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

2. Самое важное на первом экране

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

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

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

3. Управление вниманием

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

4. Использовать знакомые пользователям стандарты

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

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

5. Интуитивно понятная навигация

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

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

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

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

6. Понятная структура

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

Древовидная структура

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

Плоская структура

Люди ходят по пространствам, неважно, как далеко в каждом пространстве зашёл — можно телепортироваться в соседнее. Характерна для соцсетей.

Контент-ориентированная структура

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

7. Обратная связь на действия

Фидбэк, или обратная связь, помогает понять пользователю, как интерфейс откликнется на его команду. То есть как именно распознает сайт действия пользователя. Для UX важно, как интерфейс «общается» с пользователями. Это могут быть незначительные детали, которые человеку практически незаметны, но они дают ощущение взаимодействия, той самой обратной связи.

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

В дизайне обратная связь воплощается с помощью анимации, цветовых решений, разных состояний активности/неактивности/наведения. В любой достаточно развитой дизайн-системе описаны принципы собственных анимаций. Например, в Material Design.

Принципы UX дизайна Бывает, проектируешь интерфейс, и думаешь, «что забыл?» — нет, не бывает, так как каждый интерфейс немного уникален и чеклиста тут не сделаешь. Но можно вывести принципы, которые помогут увидеть недостатки интерфейса, если глаз замылился. Вот такие я вывел для себя, читай статью и пользуйся на здоровье. правила ux
Раздел про обратную связь в анимациях Material Design

8. Информирование об ошибках

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

9. Функциональность в приоритете над формой

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

10. Доступность информации

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

11. Адаптивность

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

Итог

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

Поделиться
Телеграфировать
1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Загрузка...

Добавить комментарий