Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Юзабилити интернет-проекта

877 views

Published on

О пользе работы над юзабилити интерфейсов.
Выступление на конференции "Интернет бизнес" 14 апреля 2011 г.
Читать заметки к слайдам в режиме примечаний! :)

Published in: Design
  • Be the first to comment

Юзабилити интернет-проекта

  1. 1. Юзабилити интернет-проекта Евгений Кулаков Usabilitylab
  2. 2. <ul><ul><li>Сначала их много </li></ul></ul>
  3. 3. <ul><ul><li>Но остается всегда слишком мало </li></ul></ul>
  4. 4. <ul><ul><li>Где-то есть волшебные крючки? </li></ul></ul>
  5. 5. Повестка дня
  6. 6. <ul><ul><li>Сайт – часть бизнес-схемы </li></ul></ul>
  7. 7. <ul><ul><li>Бывают плохие витрины </li></ul></ul>
  8. 8. <ul><ul><li>Нужна </li></ul></ul><ul><ul><li>система! </li></ul></ul>
  9. 9. <ul><ul><li>Структура компании </li></ul></ul>
  10. 10. <ul><ul><li>Структура компании </li></ul></ul>
  11. 11. <ul><ul><li>Структура компании </li></ul></ul>
  12. 12. <ul><ul><li>interaction </li></ul></ul><ul><ul><li>Будем дружить… </li></ul></ul>
  13. 13. <ul><ul><li>… а может, даже влюбляться! </li></ul></ul>
  14. 16. Ограничения
  15. 18. <ul><ul><li>Им нужна только поб еда! </li></ul></ul>
  16. 19. <ul><ul><li>Что </li></ul></ul><ul><ul><li>может его остановить? </li></ul></ul>
  17. 21. <ul><ul><li>Время – деньги, </li></ul></ul><ul><ul><li>товарисч! </li></ul></ul>
  18. 22. <ul><ul><li>Информационная перегрузка </li></ul></ul>
  19. 23. <ul><ul><li>Информационная перегрузка </li></ul></ul>
  20. 24. <ul><ul><li>Информационная перегрузка </li></ul></ul>
  21. 25. <ul><ul><li>Информационная перегрузка </li></ul></ul>
  22. 26. П о с т е п е н н о …
  23. 27. П о с т е п е н н о …
  24. 29. <ul><ul><li>Мы его теряем… </li></ul></ul>
  25. 30. 70% посетителей просматривают на сайтах только по одной странице. <ul><ul><li>Мы его теряем… </li></ul></ul>
  26. 31. <ul><ul><li>Не хочу! </li></ul></ul>
  27. 32. <ul><ul><li>Кто-нибудь знает, </li></ul></ul><ul><ul><li>куда кликать? </li></ul></ul>
  28. 37. <ul><ul><li>Мы его теряем! </li></ul></ul>
  29. 38. <ul><ul><li>Что </li></ul></ul><ul><ul><li>делать? </li></ul></ul>
  30. 39. <ul><ul><li>Чем его мотивировать? </li></ul></ul>
  31. 40. <ul><ul><li>Идея! </li></ul></ul><ul><ul><li>Дадим ему </li></ul></ul><ul><ul><li>много-много функционала! </li></ul></ul>
  32. 41. <ul><ul><li>Слишком много «если» </li></ul></ul>
  33. 42. A.I.D.A.S. <ul><li>A ttention </li></ul>
  34. 44. A.I.D.A.S. <ul><li>A ttention </li></ul><ul><li>I nterest </li></ul>
  35. 46. A.I.D.A.S. <ul><li>A ttention </li></ul><ul><li>I nterest </li></ul><ul><li>D esire </li></ul>
  36. 48. A.I.D.A.S. <ul><li>A ttention </li></ul><ul><li>I nterest </li></ul><ul><li>D esire </li></ul><ul><li>A ction </li></ul>
  37. 50. A.I.D.A.S. <ul><li>A ttention </li></ul><ul><li>I nterest </li></ul><ul><li>D esire </li></ul><ul><li>A ction </li></ul><ul><li>S atisfaction </li></ul>
  38. 51. <ul><ul><li>Довольный клиент </li></ul></ul>
  39. 52. <ul><ul><li>Итак, что можно сделать? </li></ul></ul>
  40. 53. <ul><ul><li>Юзабилити-инженерия – это… </li></ul></ul>
  41. 54. Повышение эффективности бизнеса за счет увеличения эффективности, продуктивности и удовлетворенности пользователей информационных систем. <ul><ul><li>Юзабилити-инженерия – это… </li></ul></ul>
  42. 55. Повышение эффективности бизнеса за счет увеличения эффективности, продуктивности и удовлетворенности пользователей информационных систем. <ul><ul><li>Юзабилити-инженерия – это… </li></ul></ul>
  43. 56. <ul><ul><li>ROI </li></ul></ul>
  44. 57. 10-100 1 <ul><ul><li>ROI </li></ul></ul>
  45. 58. <ul><ul><li>Бюджет на юзабилити </li></ul></ul>
  46. 59. 5-10% от бюджета проекта <ul><ul><li>Бюджет на юзабилити </li></ul></ul>
  47. 60. Методология юзабилити-исследований
  48. 61. <ul><li>Интервью сотрудников </li></ul><ul><ul><li>Предметная область </li></ul></ul><ul><ul><li>Пользователи </li></ul></ul><ul><ul><li>«Ключевой путь» клиента </li></ul></ul><ul><ul><li>Критерии успеха </li></ul></ul><ul><ul><li>Анализ бизнеса </li></ul></ul>
  49. 62. <ul><li>Изучение web -аналитики </li></ul><ul><ul><li>Точки входа и ожидания пользователей </li></ul></ul><ul><ul><li>Отклонения от «ключевого пути» клиента </li></ul></ul><ul><ul><li>Места и причины потери конверсии </li></ul></ul><ul><ul><li>Анализ бизнеса </li></ul></ul>
  50. 63. <ul><ul><li>Изучаем целевую аудиторию </li></ul></ul>
  51. 64. ? ? ? <ul><ul><li>Кто эти люди? </li></ul></ul>
  52. 65. ? ? ? <ul><li>Характеристики и особенности </li></ul><ul><ul><li>Кто эти люди? </li></ul></ul>
  53. 66. ? ? ? <ul><li>Характеристики и особенности </li></ul><ul><li>Цели и задачи </li></ul><ul><ul><li>Кто эти люди? </li></ul></ul>
  54. 67. ? ? ? <ul><li>Характеристики и особенности </li></ul><ul><li>Цели и задачи </li></ul><ul><li>Контекст: условия и ограничения </li></ul><ul><ul><li>Кто эти люди? </li></ul></ul>
  55. 68. <ul><ul><li>Мы любим точность </li></ul></ul>
  56. 69. <ul><ul><li>Мнение </li></ul></ul><ul><ul><li>vs. </li></ul></ul><ul><ul><li>поведение </li></ul></ul>
  57. 70. <ul><ul><li>Как обрабатываем данные </li></ul></ul>
  58. 71. <ul><li>Хорошо разбирается в своей бухгалтерской программе, но не дружит с компьютером в целом </li></ul><ul><li>Начальник направил на курсы повышения квалификации при помощи системы электронного обучения </li></ul><ul><li>Проходит обучение за рабочим компьютером, справа и слева от нее сидят коллеги </li></ul><ul><li>Считает обучение пустой тратой времени и проходит его, только чтобы не иметь неприятностей с начальством </li></ul><ul><li>Переживает, если из-за обучения приходится задерживаться на работе </li></ul>Елена Александровна, 50 лет Бухгалтер <ul><ul><li>Методика «персонажей» </li></ul></ul>
  59. 72. <ul><ul><li>Как правило, персонажей несколько </li></ul></ul>
  60. 73. <ul><ul><li>Как правило, персонажей несколько </li></ul></ul>
  61. 74. <ul><ul><li>Как правило, персонажей несколько </li></ul></ul>
  62. 75. <ul><li>Набор персонажей. </li></ul><ul><li>Каждый набор персонажей - это образцы поведения группы пользователей . </li></ul><ul><li>Множество персонажей показывают всю область образцов поведения . </li></ul><ul><ul><li>Зачем персонажи? </li></ul></ul>
  63. 76. <ul><ul><li>Составляем сценарии </li></ul></ul>
  64. 77. <ul><ul><li>Сценарии бывают разные </li></ul></ul>
  65. 78. <ul><ul><li>Изучаем поведение </li></ul></ul>
  66. 79. <ul><li>Hardware </li></ul><ul><li>Software </li></ul><ul><li>Metodology </li></ul><ul><ul><li>Изучаем поведение </li></ul></ul>
  67. 80. Технология eye-tracking с 1878 года
  68. 81. <ul><ul><li>Тепловая карта </li></ul></ul>
  69. 82. Мужчины Женщины <ul><ul><li>Выясняются интересные вещи! </li></ul></ul>
  70. 83. Наблюдаем, как пользователь работает с системой
  71. 84. <ul><ul><li>Оцениваем страницы по чек-листам </li></ul></ul>
  72. 85. <ul><li>Проверка на соответствие эвристикам по ключевым страницам . </li></ul><ul><li>Срезы по модулям . </li></ul><ul><li>Приоритезация проблемных зон и степени критичности. </li></ul><ul><ul><li>Аудит интерфейсов </li></ul></ul>
  73. 86. <ul><li>Доверие к компании </li></ul><ul><li>Навигация </li></ul><ul><li>Каталог </li></ul><ul><li>Поиск </li></ul><ul><li>Карточка товара </li></ul><ul><li>Регистрация </li></ul><ul><li>… </li></ul><ul><ul><li>Срезы по модулям </li></ul></ul>
  74. 87. Примеры !
  75. 88. <ul><li>Проблемы: </li></ul><ul><li>Форма поиска на разных страницах находится в разных местах. Ее можно спутать с другими элементами (имеет такой же граф.дизайн, как и «Кабинет», который появляется на ее месте). </li></ul><ul><li>Приоритет: Высокий </li></ul><ul><li>Рекомендации: </li></ul><ul><li>Зафиксировать форму простого поиска в определенном месте для всех страниц сайта. </li></ul><ul><li>Сделать ее дизайн отличным от других элементов сайта. </li></ul>Общие замечания. Навигация * Подробности: см. Заметки к слайду
  76. 89. Главная страница Граница окна Проблема: область с анонсами мероприятий находится за границей первого окна (после полосы прокрутки), что снижает видимость этих анонсов. Рекомендация : поменять структуру макета так, чтобы граница окна пересекала первый ряд анонсов при разрешении 1280х1024 Проблема : строка поиска и область выбора разнесены в разные стороны экрана. Пользователи, которым нужно искать мероприятия по названию, могут не заметить строку поиска. Рекомендация : перенести строку поиска к области выбора даты. Проблема: большое количество ссылок над корзиной – «карманом» скрывает эту область от посетителя. В результате пользователь не будет воспринимать этот элемент как значимый. Рекомендация : перегруппировать ссылки в заголовке, взяв за образец основной сайт Евросети. Выделить на отдельное место «Карман», поместить рядом с ним кнопку «Заказать»
  77. 91. <ul><li>Проблема: </li></ul><ul><li>Недостаточная видимость корзины в шапке ИМ. </li></ul><ul><li>Приоритет: </li></ul><ul><li>Высокий </li></ul><ul><li>Рекомендация: </li></ul><ul><li>Сделать ссылку на корзину визуально активной. </li></ul>Корзина
  78. 92. Вопросы?
  79. 93. Спасибо за внимание!

×