5 лучших UX практик по улучшению сайта


Содержание материала:

UX-дизайн—Лучшие ресурсы для изучения UX

Спрос на UX-дизайнеров постоянно растет. Хотя Дональд Норман использовал термин “user experience” (“пользовательский опыт”) еще в 90-х годах, эта сфера дизайна до сих пор является достаточно “молодой”, и многие люди испытывают сложности с определением ее сути и границ.

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

Большая коллекция статей по UX и дизайну на русском языке.

В подборке вы найдете заботливо разложенные по полочкам курсы по основам User Experience, психологии пользователей, продуктовому дизайну и массе других тем.

Статьи качественно переведены на русский копирайтерами и переводчиками.

Спрос на UX-дизайнеров постоянно растет. Хотя Дональд Норман использовал термин “user experience” (“пользовательский опыт”) еще в 90-х годах, эта сфера дизайна до сих пор является достаточно “молодой”, и многие люди испытывают сложности с определением ее сути и границ.

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

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

Если вы уже глубоко изучаете UX и нашли к нему свой подход, почитайте блог DT Telepathy. Классная команда из Сан-Диего публикует статьи на тему UX.

Блог команды Usabilla очень классный! (Хотя сначала мы не могли разобрать, как они называются: Usabilla или Usabilia, из-за шрифта, которым написано название 😉 В блоге собраны в основном статьи по UX, но иногда они также пишут на тему цифрового маркетинга.

12 эпизодов подкастов в форме интервью с опытными UX-дизайнерами. Материал 2014 года, но его стоит изучить.

Хотите узнать, почему так называемое “гамбургерное меню” поможет вам увеличить конверсию? А может вам пригодится множество примеров дизайна кнопок и навигации с подробными комментариями? Или вы пытаетесь решить, какая сетка больше подойдет вашему новому мобильному приложению? Тогда UX Movement вам точно пригодится.

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

UX Magazine концентрируется на различных аспектах UX-дизайна: эмоции, юзабилити, сопереживание и составление историй. Также вы найдете список самых важных международных событий и вакансий в сфере UX.

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

5 советов по UX, которые сделают ваше приложение лучше

Несколько лет назад в исследовании Google сообщалось, что у среднестатистического пользователя 36 приложений. Из них ежедневно он использует только 9. В том же исследовании мы узнали, что только 4% приложений проживут в телефоне больше года.

Чем удобнее приложение, тем меньше шансов, что его удалят.

Улучшение UX – также главная причина распространения приложений. Почему? 52% людей устанавливают их по совету друга, родственников или коллег.

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

1. Юзабилити и цели пользователей

Вы оказались на улице в новом городе. Идет сильный дождь. Вы запускаете приложение такси (по рекомендации друга). Что вы ждете как пользователь?

Чтобы такси приехало как можно быстрее!

Какова основная цель пользователя?

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

Вы хотите сначала оценить водителя или заказать такси?

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

Простой дизайн легко пропустить, но он действительно эффективен, если реализован правильно.

2. Точно выделите кнопку призыва к действию

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

Какая кнопка действия лучше объясняет цель?

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

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

3. Дизайн для толстых пальцев

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

Это очень неудобно.

Большие кнопки на достаточном расстоянии друг от друга может помочь.

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

4. Ресурсы очень дорогие

Еще одним сдерживающим фактором в мобильном UX является потребление ресурсов. Ограничьте информацию для загрузки на ходу. Фоновые службы потребляют большое количество ресурсов и трафика. Создавайте одинаковые иконки для различных задач в приложении – например, значок машины можно использовать и для выбора опции, и для показа машины на карте. Не обязательно делать их разными!

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

5. Не разряжайте батарею

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

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

Если приложение перегружено вычислениями или сложными навигациями, то почти наверняка оно быстро садит батарею. Фоновые службы, такие как определение местоположения, также потребляют много энергии.

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

Хотите больше полезных советов и реальных кейсов?

На UNDERCONFERENCE #3 обсудят методологию, лучшие практики и кейсы внедрения приложений:

  • концентрированная программа – 7 докладов по 30 минут каждый;
  • с пикеры — признанные в среде эксперты;
  • нетворкинг.

Когда: 28 сентября, 9:00 – 17:00

Где: UNDERHUB, Киев, ул. Мечникова, 3.

Базовый Курс UX: 5 ключевых аспектов хорошей UX-стратегии

Урок 3 из 31:

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

UX — это процесс, а наш курс — грубая проекция этого процесса. Но есть 5 вещей, о которых нужно помнить на протяжении всего процесса UX-проектирования.

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

Новое. Журнал для digital-дизайнеров. Посмотреть, что за зверь.

5 основных составляющих UX:

Психология, юзабилити, дизайн, копирайтинг и анализ

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

Хотя, сказать по правде, сдается мне, что страницу про UX в Википедии написал парень, который слышал про UX от силы раз… ну, в тот раз … на той встрече…

1) Психология

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

  • К акие мотивы заставили пользователя зайти на ваш сайт?
  • Как он себя чувствует, находясь на сайте?
  • Сколько усилий приходится прилагать пользователю, чтобы получить желаемое?
  • Какие привычки у него сформируются, если он будет совершать эти действия снова и снова?
  • Не ожидаете ли вы, что он знает что-то, о чем раньше никогда не слышал?
  • Захочется ли ему снова выполнить эти действия? Почему? Как часто?
  • Думаете ли вы о потребностях и желаниях пользователя или о своих собственных?
  • Как вы поощряете “правильное” поведение?

2) Юзабилити

Если психология пользователя действует на подсознательном уровне, то юзабилити работает на уровне сознания. Вы сразу замечаете, когда что-то сбивает вас с толку. В редких случаях сложности бывают нам интересны, как, например, в игре. Но чаще всего, нам хочется, чтобы все было так просто, чтобы даже конкурсантка Мисс США могла бы разобраться. Спросите себя:

  • Можно ли выполнить действие с меньшими усилиями со стороны пользователя?
  • Можете ли вы предотвратить возможные ошибки пользователя? (А такие точно есть!)
  • Вы говорите четко и напрямую, или слишком умничаете?
  • Задумайтесь о юзабилити: если его легко увидеть — это хорошо, если сложно не заметить —лучше, а если оно само собой разумеется — это лучший вариант. А как у вас?
  • Ваш дизайн соответствует ожиданиям пользователей или противоречит им?
  • Предоставляете ли вы всю необходимую пользователю информацию?
  • Можно ли решать вопросы более традиционными способами, чем выбрали вы?
  • Чем обосновываются ваши решения: вашей собственной логикой и категориями? или степенью интуитивности для пользователя? Откуда вы знаете это?
  • Будет ли дизайн осмысленным и “работающим”, даже если пользователь не удосужится прочитать написанные мелким шрифтом детали?

3) Дизайн

Для вас, как для UX-дизайнера, понятие “дизайн” является гораздо менее высокохудожественным, чем для многих других дизайнеров. Уже не имеет значения, можете ли вы сказать “мне нравится” или нет. В UX под дизайном подразумевается вопрос “как это работает?”, а это можно измерить и доказать вне зависимости от стиля. Спросите себя:

  • Считают ли пользователи, что все выглядит хорошо? Вселяет ли это доверие?
  • Внешний вид сайта доносит вашу цель и задачи “без слов”?
  • Представляет ли дизайн ваш бренд? Все ли выглядит целостно?
  • Падает ли взгляд пользователя в “правильные” места? Как вы это узнали?
  • Цвета, фигуры, шрифты — эти элементы дизайна должны помогать пользователю получить желаемое, а также улучшать юзабилити каждого раздела. Так ли это у вас?
  • Отличаются ли “кликабельные” объекты от “некликабельных”?

4) Копирайтинг

Между написанием “брендовых” текстов и написанием UX-текстов существует огромная разница. Брендовые тексты поддерживают имидж компании. UX-тексты направлены на максимально быстрое и простое решение задачи. Спросите себя:

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

5) Анализ

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

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

Если вам понравилась статья и перевод, дайте нам знать — нажмите зеленую кнопку Recommend

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

Мобильное приложение «Заметки о психике» | Mental Notes

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

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

Как улучшить UX сайта — 12 советов по юзабилити

Клиенты довольно часто спрашивают: «Зачем вы, SEO-специалист, даете рекомендации по дизайну и юзабилити?». Все просто. Вне зависимости от уровня оптимизации пользователь сразу покинет сайт, если он неудобен. Подтверждающее правило исключение — тематики со слабой конкуренцией. Верно и обратное: проработка вопросов юзабилити может улучшить поведенческие факторы и, как результат, — видимость сайта. За несколько лет работы я собрал ряд заметок и наблюдений по улучшениям в сфере юзабилити, которые действительно оказывают влияние на показатели сайта.

1. Меню и навигация по сайту

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

1.1. Где использовать горизонтальное меню?

Такое меню органично смотрится на сайтах, посвященных одной определенной тематике, или корпоративных порталах.

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

1.2. Где использовать вертикальное меню?

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

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

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

1.2.1. Зачем размещать вертикальное меню слева?

В большинстве случаев при беглом просмотре страниц взгляд пользователей движется по F-образной траектории. Это так называемый F-Shaped Pattern.

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

Кстати, в выдаче поисковиков F-образная траектория просмотра теряет актуальность. Отмена правого рекламного блока в выдаче Google только содействует этому. Но я еще не встречал серьезных исследований с критикой F-паттерна для сайтов.

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

Топ-пост этого месяца:  7 Плагинов резервного копирования WordPress сайта

1.2.2. Зачем размещать вертикальное меню справа?

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

Известный в среде интернет-маркетологов блог Devaka.ru

2. Какие шрифты использовать

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

Читайте по теме:

2.1. Семейство гарнитур

Начнем наш разговор о гарнитурах с совершенно постороннего, на первый взгляд, графика:

Распределение операционных систем в мире. Данные 2014 года

Пользователям Windows хорошо знакомы гарнитуры Arial, Tahoma, Verdana, Times New Roman, Georgia, Courier а также множество других, нестандартных шрифтов. Они установлены по умолчанию. На UNIX-платформах используются их аналоги. Правда, выглядят эти шрифты не совсем так, как в Windows, да и не для каждого нестандартного шрифта найдется соответствующий аналог.

Позвольте, спросите вы, но причем здесь сайты? Дело в том, что при загрузке сайта обычно никто не заливает на сервер файл со шрифтами. Из-за этого текст, набранный Arial, для пользователей Ubuntu, например, будет отображаться по-другому, чем для пользователей Windows.

Самое простое решение вопроса — использовать шрифты из Google Fonts. Их легко подключать, кроме того, среди них нет некачественных гарнитур. Базовая рекомендация — сочетать для заголовка/основного текста шрифты с засечками/без засечек. Например, Antiqua для основного текста и Grotesque для заголовков. Еще несколько удачных, на мой взгляд, комбинаций из Google Fonts: Open Sans + Lora:

PT Sans + PT Serif:

PT Serif + Open Sans:

2.2. Вертикальный ритм текста

Помните, вы в школе писали в тетрадях в прямую линейку?

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


Высота элементов кратна высоте строки. Например, заголовок H1 — три высоты строки, H2 и H3 — две высоты строки. Пример соотношения размеров заголовков и текста в CSS:

Здесь для простоты значения указаны в пикселях. На практике обычно используют относительные единицы «em» или «rem». Так будет выглядеть текст с данным оформлением:

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

2.3. Как выбрать нужный контраст шрифта и фона?

Как понять, хороший ли контраст у шрифтов с фоном? Сделайте скриншот страницы и переведите картинку в оттенки серого в любом редакторе (нет фотошопа? Ловите Pixlr). Если текст по прежнему легко прочитать, то контраст достаточный. Второй способ — воспользоваться бесплатным инструментом для проверки контрастности шрифта.

Рекомендую использовать цвет шрифта от #000 до #333.

2.4. Оптимальная длина строки

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

2.5. Оформление ссылок

Главное правило: пользователь должен узнавать текст с ссылкой, не наводя на неё курсор. Чаще всего, ссылка в тексте ассоциируется с нижним подчеркиванием. Поэтому для обычного текста на сайте такой метод выделения не подходит.

3. Когда стоит использовать кнопки?

Рекомендую использовать кнопки, когда надо заставить пользователя выполнить важное действие (CTA) — зарегистрироваться, купить, скачать.

Во всех остальных случаях рекомендуется использовать ссылки. Например, для фильтров по параметрам:

3.1. Где расположить кнопку?

Кнопки с важными CTA рекомендуется располагать справа. Это связано с тем, как пользователи просматривают страницу.

Диаграмма Гутенберга показывает ориентацию взгляда пользователя

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

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

Суммируем все рекомендации:

  1. Используйте горизонтальное меню на сайтах, посвященных одной определенной тематике, или корпоративных порталах.
  2. В горизонтальном меню более важные пункты размещайте слева.
  3. Используйте вертикальное меню для крупных интернет-магазинов или порталов с большим количеством разделов.
  4. Если аудитория сайта постоянна и растет незначительно, меню стоит расположить справа, так как большинство пользователей уже знакомы с разделами сайта.
  5. Используйте шрифты из Google Fonts для обеспечения единообразного отображения на разных платформах (Windows, Mac, UNIX).
  6. Сочетайте для заголовка/основного текста шрифты с засечками/без засечек.
  7. При верстке сайта рекомендуется задавать такой размер шрифтов и междустрочный интервал, чтобы все элементы текста вписывались в горизонтальную сетку. Таким образом соблюдается вертикальный ритм текста.
  8. Для проверки контраста шрифта/фона сделайте скриншот страницы и переведите картинку в оттенки серого в любом редакторе. Если текст по-прежнему легко прочитать, то контраст достаточный.
  9. Чтобы читатель не уставал, рекомендуется задавать длину строки на десктопе в 60-75 символов.
  10. Используйте выравнивание текста по левой стороне экрана, чтобы избежать появления слишком больших пробелов между словами при отображении на мобильных устройствах.
  11. Никогда не используйте нижнее подчеркивание для выделения текста.
  12. Кнопки с важными CTA рекомендуется располагать справа, в четвертом квадрате по диаграмме Гутенберга.

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

Лучшие практики UX дизайна для глобальной аудитории

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

«В расширяющемся глобальном мире нам нужен дизайн, который будет культурно адаптивным» – Сенонго Аптем

1. Создавайте дизайн для доступа оффлайн

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

2. Помните о разных девайсах

Тренд использовать мобильные устройства вместо настольных очень популярен.

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

3. Не забывайте о культурном контексте

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

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

Плюс различные культуры придают разное значение определенным цветам и символам.

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

Заключение

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

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

Четыре правила интуитивного UX

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

(Серьёзно, поищите «дизайн-мышление». 100500 результатов!)

Для кого эта статья?

  • Разработчики. Вы создали собственное приложение, но каждый пользователь мучается с ним. И вы знаете: если они говорят вам это в лицо, то дело действительно плохо.
  • Графические дизайнеры. Изучать UX по статьям в интернете — это какой-то… очень болезненный способ умереть.
  • Менеджеры проектов. Вы уже на четверть UX-дизайнер. Было бы неплохо освоить остальные навыки.
  • И остальные проходимцы. Все, кто корпит над своими проектами по вечерам и выходным. Вам тоже пригодится.

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

Этот навык — «понимать язык интерфейса».

В начале карьеры меня поражало, как часто клиенты передавали первоначальные наброски (или живые, рабочие прототипы) с совершенно очевидными ошибками UX. Я не говорю об ошибках, которые можно выявить после длительного A/B-тестирования. Я говорю о простых, самых глупых ошибках.

За неимением лучшего примера:

Somewhere out there, there’s a team that knows HTML, but doesn’t know the difference between a radio button and a checkbox. pic.twitter.com/VBwk8Jxekd

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

Мои клиенты не настолько плохи, но чёрт побери, не нужно быть семи пядей во лбу, чтобы понять: если можно выбрать только ОДИН элемент из списка, то нужны ПЕРЕКЛЮЧАТЕЛИ, а не флажки. Чтобы понять это, нужно просто знать язык интерфейса. И для меня это самое безумное. Свободное владение интерфейсом доступно каждому. Вам не нужен колледж, не нужны курсы и так далее.

Если честно, нужно только присутствие духа, чтобы (А) остановиться и задуматься, когда вас смущает или раздражает какое-то приложение, (Б) вербализовать то, что вас смущает/раздражает в интерфейсе, а затем (В) выяснить, как избежать этого конкретного бага в собственных проектах.

Постоянно повторяйте эту процедуру — и станете профессионалом в кратчайшие сроки.

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

(Именно тогда начинайте прослушивать лекции других дизайнеров UX о новейших академических методах исследований пользователей!)

Вот что мы осветим:

1. Закон локальности

Размещайте элементы интерфейса там, где они вызывают изменение.

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

Допустим, у вас список элементов. Где разместить кнопку «ДОБАВИТЬ НОВЫЙ ЭЛЕМЕНТ»?

Вопрос: Ну и где происходит изменение?

Ответ: В конце списка.

Отлично, поставьте кнопку в конце списка.

ПОДОЖДИТЕ. Вы думаете, что это довольно просто. Но есть искушение.

Искушение состоит в том, чтобы просто поставить её там, где есть свободное место.

Например, если у вас меню, то вы можете подумать: «У нас есть меню! Почему бы просто не поставить его в меню!?»

Нарушение закона локальности в музыкальном интерфейсе

Ответ очевиден: потому что там её никто не будет искать.

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

Думаете, что я шучу? Когда-нибудь встречали этот интерфейс?

Нарушение закона локальности в интерфейсе Evernote

Столь же плохая и распространённая альтернатива — просто взять решение, которое вы видели в Уважаемой Технической Компании, не задумываясь о том, имеет ли это смысл для вас. «Нужна кнопка „Добавить”? Не вопрос. Я видел одну такую кнопку. Подержи-ка пиво!»

Смотрите. Ещё одна кнопка там, где пользователи никогда не будут её искать. Вообще говоря, они будут подозревать, что эта кнопка добавляет что-то новое на большом пустом белом пространстве. Потому что именно там она находится.

Ваши пользователи хотят, чтобы вы следовали закону локальности.

Итак, теперь давайте использовать его.

Возможно, вы прирождённый дизайнер UX и всегда визуально представляете, что будет при наличии тысячи элементов вместо пяти, и понимаете — там возникнет проблема. Если пользователь создаст тонну плейлистов, то кнопка уйдёт на сотни пикселей вниз!

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

Блестяще! Именно так сделал Spotify.

Для бонуса (1) используйте встроенную кнопку, пока она не выйдет за пределы экрана, и в этот момент переключитесь на закреплённый элемент и (2) сделайте его более заметным, чем кнопка Spotify, которую лично я заметил только через несколько месяцев, беспомощно щёлкая правой кнопкой мыши, чтобы добавлять в плейлисты отдельные песни!

Другой вариант — признать, что мы не можем надёжно и последовательно показывать кнопку в нижней части списка. Где самое близкое подходящее место для неё?

И ответ, (я думаю, довольно очевидный) — в верхней части списка.

Это моё пожелание

Чёрт возьми! Именно так сделал Rdio, конкурент Spotify, прежде чем его купила Pandora.

Реконструкция по памяти (как и вся реальность, если подумать)

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

(На самом деле есть три закона локальности, и «размещать элементы UI там, где они влияют на изменение» — только первый. Если интересно, читайте здесь).

2. Что угодно, только не выпадающие списки

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

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

Добро пожаловать в ад!

Они не всегда плохи, но против вас играют следующие факторы:

  • Выпадающие списки требуют слишком много кликов/нажатий. Один для открытия, ещё несколько, чтобы прокрутить до нужного варианта (на мобильном телефоне), ещё один для выбора правильного варианта и (на мобильном телефоне) последний, чтобы закрыть (сравните с одним щелчком мыши для выбора из перечисленных вариантов).
  • Выпадающие списки не показывают варианты! Чтобы их увидеть, нужно сначала нажать на список, а на мобильном телефоне часто отображается не весь список за раз.
  • В длинных выпадающих списках трудно ориентироваться. В выпадающем списке стран может быть более 195 элементов. В какой-то момент практически любой другой вариант UI будет быстрее, чем прокручивать выпадающий список.

Это довольно просто, поэтому давайте рассмотрим основные альтернативы выпадающему списку.

Если выбор между двумя вариантами…

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

Для вопросов, на которые нет ответа «по умолчанию», попробуйте сегментированную кнопку.

Если есть состояние по умолчанию, которое соответствует ‘OFF’, попробуйте установить флажок. Он также хорош для настроек, которые не влияют на изменение, пока пользователь не нажмёт «Сохранить» или «Отправить».

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

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

Если выбор между 2−5 вариантами…

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

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

Для подробного отображения нескольких вариантов хорошо подходят карточки.

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

Видимо, «Тесле» тоже это нравится

Если выбор между многими вариантами…

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

Если выбираете дату…

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

Какая альтернатива? Ну, это зависит от обстоятельств. Первый вопрос: какой тип даты вы выбираете?

  1. Пуассоновы даты. Сначала более вероятные даты, а далее по списку — менее вероятные. Например, дата запланированной встречи или авиарейса.
  2. Даты с высокой изменчивостью. Даты, у которых примерно одинаковая вероятность в широком диапазоне времени. Например, день рождения.

(Да, я назвал «пуассоновы даты» в честь математического распределения 🙂

Для различных типов подходят разные элементы управления.

Для пуассоновых дат мы хотим сделать МАКСИМАЛЬНО УПРОСТИТЬ выбор дат в наиболее вероятном диапазоне (например, для планирования встречи это может быть следующие, скажем, 14 дней). Совершенно нормально, если выбрать дату вне этого диапазона будет чуть сложнее.

Элемент управления «календарь» вполне отвечает этим требованиям для пуассоновых дат. Если вы знаете, что дата с высокой вероятностью попадает на ближайшие 2-4 недели, вы в шоколаде.

Довольно креативно, Google Flights по умолчанию предлагает вам рейс примерно через две недели, что иногда вызывает путаницу («Я этого не выбирал!»), но это, наверное, самый вероятный выбор по распределению Пуассона.

Текстовое поле даты, вероятно, лучший вариант для дат с высокой вариативностью, где (А) нет причин отдавать предпочтение какой-то одной дате перед другой, то есть (Б) все варианты одинаково трудно выбрать.

Помните, что input[type=date] — это ваш друг… по крайней мере, на десктопе

Топ-пост этого месяца:  Знакомство с WebGL

Если выбираете число…

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

Как часто вам нужен 1 билет? Очень часто.

Как часто вам нужно 10 билетов? Не слишком.

Как часто вам нужно 10 000 билетов? Это какая-то жестокая шутка?

Здесь мы опять имеем дело с распределением Пуассона и должны использовать элемент управления, смещённый к более низким числам: например, степпер.

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

Можно хоть где-то использовать выпадающие списки?


Помните, что они нормально работают, когда…

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

Возможно, самые наблюдательные среди вас заметили, что в интерфейсе Google Flights, который я хвалил выше, на самом деле три заметных выпадающих списка!

Что примечательно, в мобильном интерфейсе нет выпадающего списка ‘Economy’

Они на самом деле хорошо здесь поработали. Потенциальные проблемы юзабилити быстро смягчаются за счёт следующего:

  • Специальные элементы управления, которые по нажатию показывают все параметры (в том числе на мобильном телефоне) — и заменяют собой четыре выпадающих списка (взрослые, дети, младенцы в сиденье, младенцы на руках) четырьмя степперами в одном раскрывающемся списке.
  • Удаление выпадающего списка ‘Economy’ в мобильном интерфейсе
  • Мало вариантов и умные значения по умолчанию для каждого элемента

Ладно. Поехали дальше.

3. Тест на прищур

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

Контрольный вопрос: что должен сделать пользователь, чтобы использовать эту страницу?

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

Я бы предположил две вещи:

  1. Установить все соответствующие флажки (??) в жёлтой области
  2. Нажать синюю кнопку «Отправить»

Вы тоже так подумали?

Ошибка и ошибка.

  1. «Флажки» на самом деле представляют собой очень маленькие поля для ввода текстовых данных (если вы прочитали предыдущий раздел, то знаете, что здесь должны быть степперы).
  2. Самое главное («Найти варианты» — кстати, это очень запутанный способ сказать «Отправить») оформлено серой и незаметной кнопкой. Гораздо менее важная вещь («Помощь») находится непосредственно рядом, но больше по размеру и лучше заметна.

Тест на прищур говорит, что самая важная вещь должна быть самой заметной. Что здесь самое важное? Это текстовое поле (или степпер 😉 и кнопка «Отправить».

Если вы пройдёте дальше, то следующая страница ещё хуже.

Что вы нажмёте: серую кнопку слева или такую же серую кнопку справа?

Надеюсь, вы выбрали левую!

В спешке на этой форме я на самом деле сначала нажал кнопку «Помощь». Ой. Зайдя второй раз, я нажал «Вернуться», даже бегло просканировав названия обоих кнопок, потому что на 99,999% других сайтов (с направлением письма слева направо) кнопка «Вернуться» всегда слева

Опять же, если прищурить глаза, я не могу сказать, что важно.

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

В реальном редизайне я хотел бы поместить выбор количества билетов на ЭТОЙ ЖЕ СТРАНИЦЕ. Но это другой закон для другого времени

Сами скажите. Четыре переключателя и кнопка. И крошечная ссылка снизу.

Я не пытаюсь придираться к сайту AlaskaTrain.com, такое встречается повсюду.

Вот экран регистрации в моей любимой социальной сети на основе рекомендаций Foursquare (заблюреный, конечно).

Как в реальности отправить введённые данные (самое главное)?

Подсказка: кнопка скрыта за обычным текстом в правом верхнем углу.

Но Foursquare здесь просто следует стандартам дизайна Apple. К сожалению, нарушение теста на прищур часто встречается даже у лидеров отрасли.

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

На каждые сто просмотренных карточек я затем перейду к…

  • Показать ответ (примерно 95 раз)
  • Вернуться к списку карточек (дважды)
  • Начать добавлять карты (дважды)
  • Некоторые другие функции (очень редко)

Такой анализ действительно намекает, какой интерфейс здесь лучше будет работать.

  • Акцентируйте наиболее часто используемые функции (в первом приближении «наиболее используемые» равняется «наиболее важным»)
  • Ослабьте, скройте или удалите менее используемые функции

Но это только начало (например, я бы хотел посмотреть, поймут ли пользователи, что кнопка с плюсом без подписи добавляет карточки). Но с помощью всего лишь нескольких простых эвристик мы сократили беспорядочный, запутанный интерфейс из десяти элементов UI всего до пяти. Это… проверьте тут мои расчёты… в два раза меньше.

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

4. Обучение на примерах

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

У нас есть странная тенденция пытаться объяснить всё словами, когда примеры намного яснее.

Возьмём новый стартап Teeming.ai, который недавно обратился ко мне, чтобы проконсультироваться по дизайну главной страницы. Заголовки на этой странице:

  • «Teeming избавляет от изоляции в удалённой работе»
  • «Teeming помогает с удалённым тимбилдингом», это также «обучение, решение проблем, получение удовольствия и мотивация друг друга»
  • «Teeming и видео для синхронной [связи]»
  • «Работает со всеми вашими любимыми видеоплатформами»

Но вот вопрос. Что на самом деле делает Teeming?

Трудно сказать. Понятно, что это как-то связано с… позитивом для удалённых работников? Но у меня нет конкретных идей, как это поможет лично мне, так что я не стану пробовать этот сервис, рекомендовать его и т. д.

(Извините, Teeming, вы знаете, я вас люблю).

Далее, посмотрим на IFTTT. Может, вы уже знаете, что они делают — тогда притворитесь, что не знаете, и попытайтесь понять это из заголовков на главной странице:

  • Автоматически осветить дорогу парню с доставкой пиццы (Dominoes+Hue)
  • Публикуйте свои фотографии везде и смотрите их отовсюду (Instagram+Twitter)
  • Сделайте свой голосовой помощник более персональным (Google Assistant+iOS Calendar)

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

Сумасшедшая вещь в том, что на главной странице они сначала объясняют это текстом:

IFTTT помогает вашим приложениям и устройствам работать вместе по-новому. IFTTT — это бесплатный способ заставить все приложения и устройства разговаривать друг с другом. Не всё в интернете хорошо работает, поэтому наша миссия — построить более связанный мир.

Вопрос: что лучше объясняет идею приложения? Примеры или описание?

Думаю, что примеры. Описание полностью понятно только тогда, когда я вижу несколько примеров, как это может мне помочь.

Но примеры нужны не только на целевой странице. Вот что мы видим при первом входе в инструмент управления проектами Basecamp.

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

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

Есть даже дружелюбная… гора?… которая говорит, что я могу посмотреть двухминутное пояснительное видео об этом обучающем проекте.

И спасибо вам, мистер Гора, за руководство: демонстрационные видеоролики — это ещё один способ обучения на примерах! Примеры показывают, как будут выглядеть мои проекты, а видео показывает, как использовать программное обеспечение.

Если ваше приложение даёт пользователям что-то создавать, то демонстрация — отличный способ показать возможности на примере.

Замечательное приложение для рисования Procreate выиграло Apple Design Award, «Выбор редактора» App Store и App Store Essential, а Джон Грубер назвал его «новаторским» и т. д. — но никакие награды не восхищают так, как реальные примеры работ, созданных в этом редакторе.

Это не обычное приложение для рисования

Это вам не MS Paint.

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

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

Вкратце, мои любимые способы сделать это:

  1. На любой странице, которая пытается предложить пользователю функцию/приложение и т. д., покажите примеры, что можно сделать с этим инструментом.
  2. Используйте метод «первоначальной загрузки», покажите образцы данных и пример, как будет выглядеть правильно работающее приложение.
  3. Стратегически внедряйте справочную информацию (например, статьи, видео или подсказки) вместе с примерами использования.
  4. Ваше приложение позволяет создавать что-то творческое? Покажите галерею работ, чтобы подстегнуть воображение.

Есть смысл? Давай на этом и закруглимся.

О важности UX для SEO

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

К чему это ведет? Поисковые системы выдают лучшие результаты не только в плане релевантности запросу, но и лучшие сайты в плане UX. Поисковики руководствуются следующим правилом: что хорошо для пользователя, достойно ТОПа поисковой выдачи.

Задача оптимизаторов смещается с исключительно правильного SEO в сторону удобных, простых, понятных интерфейсов. Насколько UX важен для SEO? Предлагаем вам мнение Дэвида Фримана, аналитика и SEO-эксперта Search Engine Land.

1. Не SEO единым

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

Что происходит: пользователь находит результат в выдаче, переходит, понимает, что сайт неудобен, сложен, непонятен, нелогичен. Возвращается в выдачу, где рядом с этим сайтом поисковая система предлагает еще как минимум 9 не менее релевантных ответов, а также до 7 спонсируемых результата (реклама):

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

Проблема: недостаток опыта и знаний.

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

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

2. Проработка различных сценариев взаимодействия

Это проблема №0, если можно так выразиться, так как большинство UX-специалистов и команд работают по определенной схеме, создавая абсолютно линейный сценарий, в котором взаимодействие пользователя с сайтом начинается с главной страницы.

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

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

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

Дэвид Фриман называет несколько примеров на страницах неоптимизированных сайтов, которые заставляют пользователя вернуться в выдачу:

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

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

3. Улучшение UX приводит к незамедлительным результатам

Сегодня нельзя игнорировать пользователя. SEO больше не является исключительно технической задачей с подбором семантического ядра, оптимизацией тегов, закупкой ссылок. Выход в ТОП требует более комплексного подхода. Одной из основных рекомендаций Google остается соответствие сайта пользовательскому интенту (намерению). Иными словами, сайт должен дать пользователю то, что он хочет: узнать, как сделать что-либо, или купить товар, или сравнить с конкурентами, и так далее.

Составляя некий рейтинг факторов ранжирования, можно выделить следующие:

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

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

10 лучших онлайн-курсов по UX-проектированию на 2020

Представляем вашему вниманию наш взгляд на топ лучших учебных программ по UX-проектированию на русском языке.

Зарплата UX-дизайнера стартует с 60 000 тысяч рублей. Уже сейчас студии из СНГ разрабатывают мобильные приложения, сервисы и веб-ресурсы для корпораций со всего мира (например, студии REDMADROBOT, Tubik, Ak Bars Digital).

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

Наш топ курсов

Название курса Длительность Стоимость Ссылка
«UX-дизайн» от Skillbox (рекомендуем) 4 месяца 49 000 руб Сайт
«Дизайн мобильных приложений» от Skillbox (рекомендуем) 12 недель 39 000 руб Сайт
«Я – UX-дизайнер PRO» от Skillbox
(рекомендуем)
12 месяцев от 5100 руб. в месяц Сайт
«Профессия UX-дизайнер» от Нетология 5 месяцев 32 435 руб. Сайт
«Проектирование интерфейсов: дизайн от стратегии до тестирования» от Нетология 2 месяца 20 085 руб. Сайт
«UX-аналитика: исследование пользователей и здравый смысл» от Нетология 14 недель 20 085 руб. Сайт
«Дизайн мобильных приложений» от Нетология 2 месяца 20 085 руб. Сайт
«Дизайнер интерфейсов UX/UI» от GeekBrains 8 месяцев 7900 руб. в месяц Сайт
«UX/UI дизайнер» от Igor Jazov 2 месяца 395$ Сайт
«UX/UI Web-design + Mobile» от Mobios School 3 с половиной месяца 21 000 Сайт

Также вам может быть интересно:

01.

«UX-дизайн» от Skillbox – онлайн-курс по проектированию опыта взаимодействия

Продолжительность: 4 месяца
Стоимость: 49 000 руб., возможен кредит на 4900 руб. в месяц
Преподаватели: Сергей Попков, Денис Шершнев, Дмитрий Игошин, Сергей Киреев, Виталий Черемисинов, Евгений Ефанов, Искандер Мирмахмадов
На кого рассчитана программа: на начинающих UX-дизайнеров, арт-директоров, дизайнеров, продукт-менеджеров

Особенности курса

Полностью в онлайне

Работа с реальными клиентами

Поддержка преподавателей

Проверяемые домашние задания

35 часов видеоконтента

Онлайн-курс по UX-проектированию «UX-дизайн» состоит из 4 месяцев обучения и 21 учебного модуля по теоретическим и практическим основам проектирования опыта взаимодействия.

Преподавателями выступили специалисты из студии дизайна АIC.

Программа онлайн-курса «UX-дизайн» от Skillbox:

  • основы UX-design;
  • мировые тренды;
  • развитие процессов в дизайне;
  • этапы проектирования user experience;
  • жизненный цикл проекта;
  • особенности UX-проектирования мобильного приложения;
  • основы Service Design;
  • способы и особенности взаимодействия с клиентом;
  • шаблоны и психология поведения пользователя;
  • UX-проектирование при создании UI;

  • особенности проведения юзабилити-тестирования;
  • особенности составления CJM;
  • особенности проведения A/B-тестирования;
  • способы создания концепций и идей;
  • математические модели в творчестве;
  • основы визуального дизайна;
  • особенности качественного дизайна;
  • техники презентаций Readymag и Prezi;
  • особенности индустрии UX-дизайна;
  • карьера на рынке UX-проектирования;
  • анимация элементов UI;
  • работа с UI KIT;
  • feedback от клиента;
  • разбор примеров из практики AIC.

02.

«Дизайн мобильных приложений» от Skillbox – UX-проектирование программ для смартфонов

Продолжительность: 12 недель
Стоимость: 39 000 рублей, возможен кредит 3500 рублей в месяц
Преподаватели: Павел Горшков, Никита Шишкин, Ольга Акимова, Рита Петухова, Дима Никифоров, Татьяна Гущина, Сергей Ковтунов, Яна Савинова, Артем Кулаков, Андрей Рожков, Женя Бондарев, Настя Смирнова
На кого рассчитана программа: на всех, кто хочет разрабатывать дизайн для мобильных приложений

Особенности курса

Стажировка в агентстве

Преподаватели практики

Домашние задания

Возможность трудоустройства

Первый реальный кейс в портфолио

За 2020 год было произведено 194 миллиардов загрузок мобильных приложений по всему миру. Это в два раза больше чем в 2020 году. Феноменальный результат, учитывая, что количество активных смартфонов составляет около 4 млрд.

Получите свой первый опыт в создании дизайна программ для смартфонов вместе со специалистами из студии REDMADROBOT и онлайн-курсом от Skillbox «Дизайн мобильных приложений».

Программа онлайн-курса «Дизайн мобильных приложений»:

  • специфика платформ Andro >03.

«Я – UX-дизайнер PRO» – практический курс по UX-проектированию от Skillbox

Продолжительность: 12 месяцев
Стоимость: от 5100 рублей в месяц (есть возможность отсрочить первый платеж на пол года)
Преподаватели: Сергей Попков, Майкл Джанжа, Дмитрий Игошин, Сергей Киреев, Виталий Черемисинов, Денис Шершнев, Евгений Ефанов, Искандер Мирмамадов, Андрей Рыбалков, Филипп Соломин, Саша Вязовик
На кого рассчитана программа: на новичков, начинающих дизайнеров и опытных специалистов, которые хотят заполнить пробелы в навыках и знаниях.

Топ-пост этого месяца:  Как сделать в CSS столбцы с гибкой шириной и улучшенными зазорами используем Grid Layout

Особенности курса

60 учебных модулей

Контрольные работы

Офлайн-воркшопы

Проверка домашних заданий

Дипломный проект для реального клиента

Средняя зарплата в 120 000 рублей и выбор из 1500 вакансий на headhunters.

Подобная возможность откроется для вас если вы пройдете онлайн-курс по UX-проектированию «Я – UX-дизайнер PRO».

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

Программа онлайн-обучения делится на 3 основных части:

  • основы веб-дизайна;
  • специализация «UX-дизайн»;
  • дипломный проект для реального клиента.

Программа «Основы веб-дизайна»:

  • основы создания GUI;
  • разработка стилей;
  • особенности навигации и создание структуры;
  • адаптивность интернет-ресурса и версия для смартфонов;
  • основы работы с программой Figma – фигуры и изображения, текст и стили, фреймы и гриды, работа с отдельными элементами, создание макета и прототипирование

Программа «Специализация «UX-дизайн»

  • основы юзибилити;
  • введение в user experience;
  • основы UX-проектирования;
  • психология пользователей;
  • дизайн на основе анализа информации;
  • UX-проектирование мобильного приложения;
  • сетка и композиция.

04.

«Профессия UX-дизайнер» от Нетология – практическое руководство по UX-проектированию

Продолжительность: 5 месяцев
Стоимость: 32 435 рублей
Преподаватели: Ярослав Шуваев, Искандер Мирмахмадов, Алексей Бородкин, Евгений Одновал, Татьяна Попова, Роман Шелехов, Михаил Хананашвили, Яна Нестерова, Антон Казаков, Анна Желтова
На кого рассчитана программа: на начинающих дизайнеров, веб- и мобильных дизайнеров, менеджеров в цифровой индустрии

Учебную программу разработали данного курса составляли преподаватели из таких компаний, как AIC, AK Bars Digital, Росбанка, Центра Финансовых технологий, Wonderfull и Сбербанка.

Программа обучения:

  • анализ целевой аудитории и выявление ее потребностей;
  • работа с картами страйкхолдеров и эмпатии;
  • быстрое прототипирование;
  • работа с эффективными методами анализа;
  • бизнес-анализ в UX-проектировании;
  • количественные и качественные методы решения проблем в UX-дизайне;
  • проведение А/В-тестирования;
  • отбор показателей для тестирования;
  • валидация страниц и анализ совершенных ошибок;
  • методы оценивания удобства UI;
  • критерии выбора сценариев;
  • анализ веб-ресурса со стороны физиологии человека;
  • составление портрета пользователя и сценария его поведения;
  • метрики в UX-проектировании;
  • создание информационной архитектуры;
  • создание CJM;
  • особенности работы в команде;
  • как составить Wire Flow;
  • создание интерактивного прототипа;
  • этапы разработки пользовательского интерфейса;
  • дипломная работа.

05.

«Проектирование интерфейсов: дизайн от стратегии до тестирования» от Нетология

Продолжительность: 2 месяца
Стоимость: 20 085 рублей
Преподаватели: Алексей Бородкин, Евгений Одновал, Татьяна Попова, Ян Чехановский, Анна Желтова
На кого рассчитана программа: на UX-дизайнеров, UI-дизайнеров, продукт-менеджеров

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

Получите базовые навыки UX/UI-проектировщика всего лишь за 2 месяца.

Программа курса:

  • основы проектирования интерфейсов;
  • основы проектирования опыта взаимодействия;
  • основные элементы UI и их развитие;
  • инструменты для сбора и обработки данных;
  • анализ целевой аудитории;
  • разбивка ЦА на отдельные сегменты;
  • составление портрета пользователя;
  • особенности проведение интервью во время анализа ЦА;
  • управление User Experience;
  • жизненный цикл продукта;
  • этапы UX-проектирования;
  • принципы создания UI со стороны психологии пользователя;
  • создание Customers Journey Map;
  • создание информационной инфраструктуры;
  • инструменты для проектирования UX/UI – работа с программами Figma и Realtimeboard;
  • составление карты пользовательских сценариев;
  • создание интерактивного прототипа;
  • актуальные инструменты аналитики;
  • способы проведения юзабилити-тестирования;
  • установка целей;
  • методики сбора и анализа данных;
  • гипотезы улучшений;
  • разбор реальных примеров.

06.

«UX-аналитика: исследование пользователей и здравый смысл» – практический онлайн-курс по UX-проектированию от Нетология

Продолжительность: 14 недель
Стоимость: 20 085 рублей
Преподаватели: Искандер Мирмахмадов, Роман Шелехов, Михаил Хананашвили, Антон Казаков
На кого рассчитана программа: на digital-дизайнеров любого рода

Практический онлайн-курс по UX-проектированию сосредотачивает свое внимание на аналитическом подходе при работе с User Experience.

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

Программа онлайн-курса «UX-аналитика: исследование пользователей и здравый смысл»:

  • задача аналитики в User Experience;
  • основные инструменты дизайнера;
  • составление карт стейкхолдеров и эмпатии;
  • составление сценариев пользовательского поведения;
  • главные концепции в бизнес-анализе;
  • особенности проведения исследования пользователей без проведения интервью;
  • основные методики анализа, их преимущества и недостатки;
  • шаблоны поведения пользователей;
  • основы восприятия;
  • социальное проектирование и этика;
  • основы коммуникации с клиентом;
  • проведение качественных исследований – организация контекстного и глубинного интервью;
  • методы анализа пользовательских сценариев;
  • работа с фокус-группами;
  • дневниковое исследование;
  • основы проведения количественных исследований – основные метрики, воронка продаж, сегментация ЦА;
  • инструменты анализа;
  • составление и исследование информационной архитектуры;
  • методы оценки UI;
  • работа с сервисами аудиторий и краудсорсинг;
  • особенности работы с мобильным сегментом;
  • UX-анализ приложений до непосредственной разработки;
  • A/B-тестирования – когда их стоит проводить;
  • методы разбора кейсов;
  • общий портрет аудитории;
  • проведение тестирования Eyetracking;
  • особенности организации UX-лабораторий;
  • дипломная работа.

07.

Онлайн-курс «Дизайн мобильных приложений» от Нетология

Продолжительность: 2 месяца
Стоимость: 20 085 рублей
Преподаватели: Дмитрий Жуков, Алина Рапота, Анастасия Харитонова, Роман Шелехов
На кого рассчитана программа: на графических и веб-дизайнеров, начинающих UX-дизайнеров, проектных и продукт-менеджеров

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

Студенты пройдут все этапы проектирования: от исследования целевой аудитории, выбора платформы и UX-проектирования до прототипирования и создания дизайн-макета.

Программа онлайн-курса «Дизайн мобильных приложений»:

  • основные стратегии продвижения мобильных приложений;
  • физическое и аппаратное взаимодействие;
  • работа с гайдлайнами;
  • основные элементы интерфейса;
  • метафоры в интерфейсах;
  • принципы проектирования UX;
  • способ минимизации правок во время разработки приложения;
  • использование шаблонов поведения пользователей;
  • особенности запуска приложения;
  • интерактивность и отклик мобильной программы;
  • основы Material Design;
  • способы и причины визуализации информации;
  • микровзаимодействия;
  • инструменты для прототипирования;
  • работа в Marvel;
  • работа с цветом, роль цветового пространства в профессии дизайнера;
  • юзабилити-тестирования;
  • создание Style gu >08.

«Дизайнер интерфейсов UX/UI» от GeekBrains – практическое обучение UX/UI и принципы проектирования интерфейсов

Продолжительность: 8 месяцев
Стоимость: 7900 рублей в месяц
Преподаватели: Игнат Голдман, Павел Шерер, Сергей Чирков
На кого рассчитана программа: на начинающих дизайнеров, продукт менеджеров, арт-директоров

Полноценный практический онлайн-курс по проектированию опыта взаимодействия (UX) и пользовательского интерфейса (UI) от образовательной платформы GeekBrains.

Вас ждет 45 онлайн-вебинаров, 30 часов учебного видео и 4 работы в собственном портфолио после окончания обучения.

Программа онлайн-курса «Дизайнер интерфейсов UX/UI»:

  • работа с Figma, Adobe Photoshop и After Effects;
  • этапы создания продукта;
  • необходимые навыки для UX/UI-дизайнера;
  • способы установки цели и проведения брифинга;
  • особенности коммуникации с клиентом;
  • планировка рабочего процесса;
  • основы дизайн-мышления;
  • обработка feedback от заказчика;
  • разбор сложный кейсов;
  • создание композиции;
  • визуализация рыночных тенденций;
  • работа со стилем и создание концепции;
  • копирайтинг в UI: тексты и стоп-слова;
  • гештальт-психология;
  • работа с форматом и сеткой;
  • работа с длинными форматами;
  • верстка лендинга;
  • принципы редактура для дизайнера;
  • работа с типографикой;
  • задача и форма UI;
  • верстка интерфейса;
  • особенности UX-проектирования мобильного приложения;
  • гайдлайны на IOS;
  • основы Material Design;
  • создание дизайна мобильного приложения;
  • основы проектирования опыта взаимодействия;
  • методы UX-проектирования;
  • обратная связь;
  • виды исследований;
  • принципы прототипирования;
  • прототипирование мобильных приложений.

09.

«UX/UI дизайнер» от Igor Jazov

Продолжительность: 2 месяца
Стоимость: 395$
Преподаватель: Игорь Джазов
На кого рассчитана программа: на новичков и дизайнеров из других отраслей

Игорь Джазов, основатель школы цифровых профессий «Groward», открыл запись на учебную программу «UX/UI дизайнер».

Программа онлайн-курса «UX/UI-дизайнер»:

  • работа со Sketch, Figma и Axure;
  • особенности проведения брифинга перед клиентом;
  • определение целей и требований проекта;
  • исследование целевой аудитории;
  • методы анализа информации – основные метрики в UX-проектировании;
  • методики дизайн-мышления;
  • создание функционала;
  • разработка портрета пользователей;
  • разработка конкурентных преимуществ;
  • сторителлинг и UI-проектирование;
  • разработка сценариев;
  • создание Costumer Journey Map;
  • создание скетчей;
  • создание Wire frames;
  • интерактивный прототип цифрового продукта;
  • гайдлайны и спецификации на IOS;
  • создание элементов страницы (layots, gr >10.

«UX/UI Web-design + Mobile» от Mobios School

Продолжительность: 3 с половиной месяца
Стоимость: 21 000 рублей
Преподаватели: Вячеслав Симонов, Зинаида Симонова, Александр Еждин, Валентин Буряк, Николай Конченко, Елена Злуницына, Сергей Маковецкий,
На кого рассчитана программа: на новичков, дизайнеров с других отраслей, фрилансеров

Получите сразу 4 работы в портфолио по UX-проектированию, пройдя курс от Mobios School «UX/UI Web-design + Mobile» и начните уже через 3 месяца зарабатывать от 400$ до 2300$

Программа онлайн-курса по UX-проектированию:

  • создание композиции;
  • работа с модульными сетками интерфейса;
  • основы навигации в интернет-ресурсе;
  • визуализация элементов, фреймворки;
  • создание ТЗ, документация и бендинг;
  • работа с типографикой;
  • верстка текста;
  • работа в Adobe Photoshop;
  • основы колористики;
  • коммуникация с верстальщиком – передача готового макета;
  • UIkit;
  • коммуникации с Front-end разработчиком;
  • работа в Adobe Illustrator;
  • основы векторной графики и иконографики;
  • психология цвета;
  • создание персонажей;
  • юзабилити UI;
  • создание макета для лендинга;
  • разработка главной страницы интернет-магазина;
  • работа с Figma;
  • как добавить адаптивность в интернет-ресурс;
  • демонстрация веб-сайта на смартфоне;
  • основы UX-проектирования – создание ТЗ, разработка истории и Costumers Journey Map, документация и проведение брифинга;
  • UX-проектирование мобильных приложений – навигационная и функциональная модель, создание архитектуры, примеры реальных проектов;
  • интерактивное прототипирование;
  • особенности UX-проектирования на IOS – gu >

Мощнейшая рассылка

Подпишись на «Мощнейшую рассылку», чтобы получать мощнейший бесплатный материал. Без спама и рекламы!

UX\UI анализ сайта стоматологической клиники

1. Отображение сайта в поиске Yandex и Google

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

name =» description » content =» Смайл клиник — стоматология на метро Речной вокзал на ул Смольная, стоматология находится рядом с улицами Фестивальная и Лавочкина и м Водный стадион. Стоматологическа клиника в Ховрино. » />

Рекомендуем изменить meta-description на главной странице на более информативный текст, например, как у конкурирующей стоматологии с похожим названием, привлекая условиями действующей акции:

2. Рекомендации по улучшению шапки сайта:

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

· В desktop и мобильной версии сайта блок адреса рекомендуем сделать ссылкой для перехода сразу к блоку с картой в разделе «Контакты», это поможет клиентам найти расположение стоматологии.

· В desktop версии сайта городской номер телефона при наведение курсора должен реагировать также, как мобильный, то есть на него можно нажать и запустить приложение для звонка.

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

3. Рекомендации по улучшению формы записи на прием:

· Применить к полю «номер телефона» маску, которая будет автоматически изменять норме телефона и не позволять отправлять данные в другом формате.

4. Рекомендации по улучшению раздела «Сотрудники»

· Для мобильных и desktop устройств все блоки с сотрудниками (фото + имя + должность) должны быть полностью кликабельными, так как не все догадаются нажимать именно на имя сотрудника.

· Выровнять все блоки по высоте и ширине.

· Рекомендуем провести фотосъемку сотрудников, для того что бы привести все фото в единый стиль и фото не выглядели «разношёрстными».

· Загрузить недостающие фото сотрудников или как крайний альтернативный вариант заменить отсутствующие фото на более релевантные фото стоматологической тематике.

· Заголовок раздела «Сотрудники» переименовать в «Специалисты»

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

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

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

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

Пример оптимального построения раздела «доктора»: http://emasclinic.ru/doctors/

5. Рекомендации по мобильной версии сайта:

Элементы, которые несут малую практическую функциональность, например, поиск, логотип, два телефона рекомендуем реструктурировать и отвести под эти элементы максимум одну строку, расположив их горизонтально, заменив длинные блоки с контентом на соответствующие иконки, как в примере http://emasclinic.ru/ :

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

6. Общие рекомендации

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

Пример, как сейчас:

Пример, на который стоит ориентироваться:

В данном примере http://emasclinic.ru/technologies/ все картинки специально подобраны в единой стилистике или приведены к ней за счет наложения фильтров.

Надпись «Запишитесь на консультацию» и телефон рекомендуем сделать интерактивными, для вызова формы и звонка соответственно.

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

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

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

Пример плохого фото превью

Mira LLC

Разработка сайта для интернет-магазина натуральной органической косметики

Лучшие практики в UX-дизайне

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

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

1. Пользовательское тестирование

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

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

2. Приоритизация Призыва к действию

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

Пример: Mail chimp — вывели на экран очень видный призыв к действию в форме кнопки Sign Up for Free, просто, прилегающей к панели навигации в верхней части страницы. Эффективные UX проекты должны обеспечить некоторую мотивацию для пользователей, чтобы соблазнить в принятие решения.

3. Фокусируйтесь на мобильном использовании

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

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

4. Адаптивный дизайн

Использование разного рода устройств для доступа в интернет заставляет дизайнера сосредоточиться на создании адаптивного дизайна.

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

5. Создайте дизайн читабельного, привлекательного, дружелюбного контента

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

6. Используйте интересные трюки

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

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

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