Основы ux ui: Что такое UX/UI дизайн: определение, характеристики, отличия – 9 принципов безупречного UX

9 принципов безупречного UX

Когда речь заходит о графическом дизайне, многие маркетологи фокусируются на внешней стороне вопроса: цвета, формы, размеры. Однако веб-дизайн — это нечто большее. Помимо внешней эстетики сайта очень важны его юзабилити (usability) и пользовательский опыт (user experience). Как показал опрос, 88% пользователей не возвращаются на сайт, получив негативный опыт.

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

Читайте также: Базовые принципы хорошего пользовательского опыта

1. Визуальная иерархия направляет взгляд посетителя

Визуальная иерархия (visual hierarchy) — один из важнейших принципов веб-дизайна и пользовательского опыта. Люк Вроблевски (Luke Wroblewski) объясняет, что конечная цель визуальной иерархии — быстро донести до посетителя следующую информацию:

  • Что это? (польза)
  • Как это использовать? (удобство использования)
  • Для чего мне это надо? (желательность)

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

Домашняя страница Teamwork Projects — отличный пример принципа визуальной иерархии:

Домашняя страница Teamwork Projects

Мы видим крупный заголовок, четко сообщающий, какой продукт представлен здесь (инструмент для управления проектами и совместной работой), а ниже — находим подробную информацию. И, наконец, призыв к действию («Начните бесплатно») проясняет, что нужно сделать после прочтения.

Читайте также: 6 способов достичь «ясности» лендинга и повысить конверсию

2. Пустое пространство — для концентрации внимания

Огромную ценность веб-дизайн извлекает из пустых пространств (white space). Они дают элементам «дышать». Пустое пространство — это интервалы между графическими блоками, колонками, изображениями и фрагментами текста. Это пространство вовсе не обязательно должно быть белого цвета. Оно может иметь абсолютно любой цвет или узор, помогающий разграничить элементы на вашем сайте.

Хороший пример от Invision:

Домашняя страница Invision

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

Читайте также: Пустое пространство: секретное оружие для успешных лендингов

3. Навигация должна отражать путь пользователя

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

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

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

4. Адаптивность — обязательное условие

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

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

5. Последовательность устраняет путаницу

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

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

6. Некоторые элементы не должны меняться

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

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

Читайте также: 7 худших поводов для редизайна сайта

7. Реалистичные ожидания укрепляют доверие

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

Если вы продаете программное обеспечение, то добавьте скриншоты. Если же это физический продукт — загрузите качественные, подробные фото и видео. Согласно инфографике UX Measure, видео-контент мотивирует к покупке 73% пользователей.

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

8. Тесты — неизменный помощник

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

Узнать, как в реальности взаимодействуют люди с ресурсом, поможет пользовательское тестирование (user testing) и тепловые карты (heat maps). Эти инструменты покажут, что именно ищут ваши пользователи, и в целом улучшат опыт на лендинге.

Читайте также: Пользовательское тестирование: 4 идеи от The Home Depot

9. Принцип KISS (Keep It Simple, Stupid), или Будьте проще!

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

  • Цвета — Для гармоничного дизайна CrazyEgg советует использовать 3 цвета в пропорции 60:30:10. Можно и больше — но не более 5.
  • Шрифты — Impact рекомендует использовать не более 2 шрифтов на странице: один для основного текста, другой для заголовков. Только убедитесь, что шрифты легко читаются.

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

Высоких вам конверсий!

По материалам: impactbnd.com

29-12-2016

Основы UX: Что такое UX?


Привет. Перед вами — базовых курс UX, который включает 31 основной принцип UX-проектирования — UX Crash Course: 31 Fundamentals.

Интересуетесь свежими статьями по дизайну? Вступайте в группу на Facebook.

У меня есть цель: чтобы как можно больше дизайнеров (в том числе начинающих) освоили основы UX-проектирования. Любое обучение лучше всего начинать с самого начала:

Что такое UX?

(Это перевод базового курса UX, который включает 31 основной принцип UX-проектирования: UX Crash Course: 31 Fundamentals)

Любой процесс подразумевает наличие опыта взаимодействия (user experience). Наша задача не в том, чтобы

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

Что же я подразумеваю под «хорошим» опытом взаимодействия?

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

Цель UX-дизайнера — чтобы пользователи были эффективными.

Пользовательский опыт — это лишь верхушка айсберга:

Многие ошибочно думают, что под UX подразумевается «a user’s experience», т.е. опыт пользователя. Но на самом деле UX — это скорее процесс проектирования пользовательского опыта.

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

«Делаем» UX:

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

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

А завтра мы узнаем два типа целей в UX, которые должны кардинально поменять ваш дизайн… →

Recommend

И ещё, если у вас есть на примете какая-нибудь классная статья по UX и не только — скиньте нам ссылку, и мы будем рады над ней поработать.

Nancy Pong и Ринат Шайхутдинов. | UxLab, LLC | Курсы дизайна в Йошкар-Оле

10 главных правил сочного UX-дизайна — подборки на Skillbox

запись вебинара

 1ч. 29 мин.

статья

 2 мин.

Экономия времени

 1ч. 27 мин.

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

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

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

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

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

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

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

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

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

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

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

Курс «UX-дизайн»

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

  •  32 часа теории и 16 практических заданий
  • Живая обратная связь с преподавателями
  • Неограниченный доступ к материалам курса
  • Стажировка в компаниях-партнёрах
  • Дипломный проект от реального заказчика
  • Гарантия трудоустройства в компании-партнёры для выпускников, защитивших дипломные работы

5 UX способов начать разработку дизайна правильно

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

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

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

Проблема в том, что если вы работаете с не-дизайнерами, красивые экраны – то, что нужно. Вы сможете предоставить “вау-эффект” клиенту, а как этот вау-эффект будет реализовываться, уже значения не имеет. А мы все-таки предпочитаем создавать нечто в духе “Все довольны”.

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

1 . Почему Почему Почему Почему Почему

(или 5 Почему)

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - 5 UX способов начать разработку дизайна правильно

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

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

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

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

Пример

Проблема: Пользователь не разрешает уведомления.

  • Почему? Он нажимает “запретить”
  • Почему? Он не хочет получать уведомления
  • Почему? Он не видит в них ценности
  • Почему? Он еще не получал действительно нужных уведомлений
  • Почему? Он запускает приложение впервые

Это простой случай, согласен, но отталкиваясь от этих причин, можно уже обрисовать решение:

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

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

2. Временная шкала

(До Во время После)

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - 5 UX способов начать разработку дизайна правильно

Первое, что я понял при изучении UX-дизайна:

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

Я всегда применял метод с временной шкалой в своих проектах. Целью такого подхода всегда является дизайн полного UX, от начала и до конца.

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

Вот некоторые из вопросов, которые я себе задаю:

До

  • Как пользователь получает доступ к моему приложению?
  • appStore, вебсайт, реклама, QR-код?
  • У него уже есть аккаунт? Нужен ли ему аккаунт для выполнения действий?
  • В каком контексте он запустит мое приложение? Будет ли это времяпровождение на уютном диванчике или же это будет поездка в переполненном метро?
  • Каков его уровень напряженнности?
  • Много ли у него есть времени?
  • Насколько быстрое подключение к интернету?

После

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

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

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

Профессиональный совет: Чтобы лучше визуализировать UX, вы можете расписать его на временной шкале, сделать своеобразный чертеж, или проделать следующий прием!

3. Рассказ в картинках

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - 5 UX способов начать разработку дизайна правильно

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

Чтобы это осуществить, один дизайнер однажды посоветовал мне разделить лист А4 на 6 частей, и затем нарисовать каждое действие как комикс.

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

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

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

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

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

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

  • На улице, зимой, в перчатках.
  • В бакалейном магазине с огромной сумкой в одной руке
  • На ярком солнце, темный интерфейс – не самая удачная идея.

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

4. Разговор

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - 5 UX способов начать разработку дизайна правильно

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

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

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

Кто-то, с кем я бы мог поговорить.

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

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

Это помогает мне определить и организовать лучший сценарий.

Узнать, как много информации нам нужно на странице.

Какую информацию нужно сгруппировать, и почему.

Какие действия будут доступны, и как определить главное.

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

Профессиональный совет: Я не советую проделывать это громко в тихом, открытом месте.

5. Список

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

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

Например, когда я начинаю работу над каким-то мобильным проектом, я выписываю все компоненты смартфона:

  • Геолокация
  • Пуш-уведомления
  • Гироскоп
  • Камеры
  • Touch ID
  • И т.д.

Я делаю то же самое и для концептов интерфейса:

  • Карточки
  • Интерфейс чата
  • Snapchat
  • Yo
  • И т.д.

Или контекст:

  • Дома
  • Во время тренировки
  • В спортзале
  • В машине
  • В автобусе
  • И т.д.

Затем я категорирую эти слова.

Первая часть списка позволяет мне две вещи:

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

А теперь анекдот

В прошлом году я работал со стартапом Birdly.

В то время команда разрабатывала мобильное приложение.

В это время они работали над их UX, 2 версиями приложений (Android + iOS), запускали стартап, и все это руками 3 человек (включая всего одного разработчика).

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

Затем команда предприняла очень интересный стратегический поворот. Вместо продолжения работы с их мобильным приложением, они решили просто сфокусироваться над разработкой бота Slack. Это решение дает массу преимуществ – использование плюсов новой платформы, более простая интеграция в жизнь пользователей, возможно меньше технической работы для получения того же (или лучшего) результата, которого они пытались добиться с помощью 2 приложений и многое другое.

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

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

Спасибо за чтение!

Нравятся вам мои подходы или не очень, есть ли у вас свои идеи – делитесь впечатлениями в комментариях!

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *