Хорошее юзабилити (пользовательский интерфейс) сайта является средством грамотного подхода к проектированию пользовательского интерфейса (UI - User Interface) и оценки пользовательского опыта (UX - User eXperience).

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

2. ВАЗ 2110, 1995 г.
BMW E39, 1995 г.
Сравнение разных подходов

3. Юзабилити - это удобство использования
Непосредственное влияет на успешность бизнеса
Это результат корректного подхода к проектированию
Нет волшебной кнопки "Сделать правильное юзабилити"
Юзабилити - это UI и UX

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

5. UI - это совокупность методов и средств
для взаимодействия с системой
UI двухкомпонентно
Компонент №1 -
физический:
устройства ввода-
вывода

6. UI - это совокупность методов и средств
для взаимодействия с системой
Компонент №2 - логический (ПО)

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

8. Разработка
интерфейса
С технической точки зрения
Исследование клиентской темы
UI прототипирование (wireframe,
prototype & mockup)
Разработка тулкита
Интерактивность и анимация
Адаптация для разных платформ

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

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

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

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

13. Размер и удаленность объекта должны быть пропорциональны частоте его
использования (закон Фиттса)
Бессмысленно делать большие объекты еще больше
Увеличивайте полезную область

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

15. Подождите
Сейчас загружусь
и поговорим про обратную связь

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

17. Микровзаимодействуйте с пользователем
Микровзаимодействие - это маленькая функциональность
Чаще всего это - анимация

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

19. Привязываейте элементы к линиям
Колонки и вертикальный ритм (12/24)
Модульность
Генераторы сеток
Хитрые приемы при наличии сетки

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

21. Элементы
интерфейса
Выжмем максимум из каждого

22. KISS (Keep it simple, stupid!)
Могут выглядеть как угодно, главное, чтобы узнавали

23. Используйте CTA-тексты для кнопок
Императивные тексты
Заметные формы (помним про Фиттса)

24. Группируйте radiobuttons (переключатели)
Выбор одного из множества
Объединяйте в группы
Располагайте по вертикали
Превращайте в реальные
переключатели

25. Не прячьте checkboxes (флажки)
Групповой выбор
Работа поодиночке
Проблема - слишком незаметный

26. Пользуйтесь Dropmenu очень осторожно
Одновременно добро и зло
Превращайте списки в переключатели
Устанавливайте самое популярное значение по
умолчанию

27. Inputs - поля ввода и экранные формы
Важная вещь
Функционал
Группировка

28. Inputs (функционал)
Пиктограммы (если надо)
Маски для данных
Плейсхолдеры (заглушки)
Сохранение данных
Обработка ошибок

29. Inputs (группировка)
Форма - это таблица
Группируйте по смыслу
или количеству

30. Навигация
Мостовые перила
и кошелек Миллера
Горизонтальные меню
Вертикальные меню
Хлебные крошки
Пагинация
Пустые страницы

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

32. Хлебные крошки и пагинация
Хлебные крошки полезны для входа из
поисковика
Пагинация - постраничный вывод - одновременно хорошо и плохо

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

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

35. Конверсия и
лиды
А также их связь с usability
Все, что происходит после
конвертации - мы не
рассматриваем
Usability сильно влияет на
конверию

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

37. Usability уже существующего сайта
Аудит
Чек-листы
Формируем требования к разработчикам
A/B тестирование

38. A/B тестирование
AB C

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

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

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

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

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

44. Проблемы. Общее
1. Отсутствует модульность, сетка.
2. Разношерстная цветовая палитра, нет четкой гаммы.
3. Нет четко выдержанной стилистики дизайна.
4. Нарушена типографика.

45. Проблемы. Шапка сайта
1. Хаотичное размещение
элементов в шапке.
2. Много визуального шума.

46. Проблемы. Горизонтальное меню
1. Не очевидные названия
разделов.
2. Излишнее количество
пунктов.
3. Часть пунктов “мертвые”.

47. Проблемы. Блок “Преимущества”
1. Является лишним на
внутренних страницах.
Крадет полезное
пространство.

48. Проблемы. Сайдбар
1. Является лишним
элементом на странице
товара

49. Проблемы. Паспорт товара
1. Основные характеристики
плохо выражены
2. Некорректно вставлен
символ рубля

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

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

52. Добавили:
1. Артикул.
2. Теги.
3. Стикер “скидка”.
4. Больше характеристик и особенности.
5. Рейтинг и отзывы (с яндекс маркета).

53. Добавили:
6. Информацию о наличии товара.
7. Кнопку “купить по телефону”.
8. Иконки вариантов оплаты.
9. Стикеры сервисных преимуществ.
10.Информационные вкладки.

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

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

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