UsabilityПользовательский интерфейс и представление информации

ВАЗ 2110, 1995 г.

BMW E39, 1995 г.

Сравнение разных подходов

Юзабилити - это удобство использования

Непосредственное влияет на успешность бизнеса

Это результат корректного подхода к проектированию

Нет волшебной кнопки "Сделать правильное юзабилити"

Юзабилити - это UI и UX

UX - это эмоции и эффективность системы

UX - это отношение пользователя и польза для него

UI - это составная часть UX

Плохой UI, хороший UX

UI - это совокупность методов и средств для взаимодействия с системой

UI двухкомпонентно

Компонент №1 - физический: устройства ввода-вывода

UI - это совокупность методов и средств для взаимодействия с системой

Компонент №2 - логический (ПО)

ГРАФИЧЕСКИЙ ИНТЕРФЕЙС ПРОЕКТИРУЮТ ТАКИМ ОБРАЗОМ, ЧТОБЫ УВЕЛИЧИТЬ ЭФФЕКТИВНОСТЬ СИСТЕМЫ

Разработка интерфейса

С технической точки зрения

Исследование клиентской темы

UI прототипирование (wireframe, prototype & mockup)

Разработка тулкита

Интерактивность и анимация

Адаптация для разных платформ

Принципы хорошего интерфейса

Информативность - совмещайте функции

Информативность - минимизируйте конструкции и выносите за скобку

Информативность - увеличивайте смысловую часть

Размер и удаленность объекта должны быть пропорциональны частоте его использования (закон Фиттса)

Бессмысленно делать большие объекты еще больше

Увеличивайте полезную область

Располагайте близко связанные объекты

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

ПодождитеСейчас загружусь

и поговорим про обратную связь

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

Человек должен понимать, что происходит в интерфейсе

Скорость реакции - чем быстрее, тем лучше

Микровзаимодействуйте с пользователем

Микровзаимодействие - это маленькая функциональность

Чаще всего это - анимация

Модульность и сетка

Почему сайты выглядят неряшливо?

Привязываейте элементы к линиям

Колонки и вертикальный ритм (12/24)

Модульность

Генераторы сеток

Хитрые приемы при наличии сетки

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

Элементы интерфейса

Выжмем максимум из каждого

KISS (Keep it simple, stupid!)

Могут выглядеть как угодно, главное, чтобы узнавали

Используйте CTA-тексты для кнопок

Императивные тексты

Заметные формы (помним про Фиттса)

Группируйте radiobuttons (переключатели)

Выбор одного из множества

Объединяйте в группы

Располагайте по вертикали

Превращайте в реальные переключатели

Не прячьте checkboxes (флажки)

Групповой выбор

Работа поодиночке

Проблема - слишком незаметный

Пользуйтесь Dropmenu очень осторожно

Одновременно добро и зло

Превращайте списки в переключатели

Устанавливайте самое популярное значение по умолчанию

Inputs - поля ввода и экранные формы

Важная вещь

Функционал

Группировка

Inputs (функционал)

Пиктограммы (если надо)

Маски для данных

Плейсхолдеры (заглушки)

Сохранение данных

Обработка ошибок

Inputs (группировка)

Форма - это таблица

Группируйте по смыслу или количеству

НавигацияМостовые перила

и кошелек Миллера

Горизонтальные меню

Вертикальные меню

Хлебные крошки

Пагинация

Пустые страницы

Горизонтальные и вертикальные меню

Хлебные крошки и пагинация

Хлебные крошки полезны для входа из поисковика

Пагинация - постраничный вывод - одновременно хорошо и плохо

Пустые страницы не должны быть пустыми!

Практический раздел

Конверсия и лиды

А также их связь с usability

Все, что происходит после конвертации - мы не рассматриваем

Usability сильно влияет на конверию

В чем сила, usability?

Увеличение конверсии при том же трафике

Снижение нагрузки на техническую поддержку

Сокращение затрат на обучение пользователей

Оптимизация бизнес-процессов

Занимайтесь usability на этапе разработки, это выйдет дешевле!

Usability уже существующего сайта

Аудит

Чек-листы

Формируем требования к разработчикам

A/B тестирование

A/B тестирование

AB C

Пример №1. ИнтерфейсКонверсия выросла в среднем в 2,5 раза

Пример №2. КроссплатформенностьОтказы мобильного трафика уменьшились в 2 раза

Пример №3. Скорость

Пример №4. Бизнес-логикаУлучшилась работа с дилерами

Экспресс-аудит сайтаwww.sfera94.ru

Проблемы. Общее

1. Отсутствует модульность, сетка.

2. Разношерстная цветовая палитра, нет четкой гаммы.

3. Нет четко выдержанной стилистики дизайна.

4. Нарушена типографика.

Проблемы. Шапка сайта

1. Хаотичное размещение элементов в шапке.

2. Много визуального шума.

Проблемы. Горизонтальное меню

1. Не очевидные названия разделов.

2. Излишнее количество пунктов.

3. Часть пунктов “мертвые”.

Проблемы. Блок “Преимущества”

1. Является лишним на внутренних страницах. Крадет полезное пространство.

Проблемы. Сайдбар

1. Является лишним элементом на странице товара

Проблемы. Паспорт товара

1. Основные характеристики плохо выражены

2. Некорректно вставлен символ рубля

Наш вариант “как сделать лучше?”

Подобрали цветовую гамму

Добавили:

1. Артикул.

2. Теги.

3. Стикер “скидка”.

4. Больше характеристик и особенности.

5. Рейтинг и отзывы (с яндекс маркета).

Добавили:

6. Информацию о наличии товара.

7. Кнопку “купить по телефону”.

8. Иконки вариантов оплаты.

9. Стикеры сервисных преимуществ.

10.Информационные вкладки.

Получили приличный современный интернет-магазин.

«Залог хорошего юзабилити - грамотное проектирование

системы»

Спасибо за внимание!