• Like

Loading…

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

Usability&UX

  • 619 views
Uploaded on

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
619
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
17
Comments
0
Likes
2

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Улучшение  сайтов  и   usability Зачем  нужна  симпатия  клиентов     и  как  ее  добиться
  • 2. От  Usability     к  UX User  Experience Usability  –  удобство   использования User  Experience  (UX)-­‐‑  опыт   Usability взаимодействия  как   «ощущение  и  реакция   человека,  вследствие   использования» О  чем  эта  презентация 2
  • 3. Human  Centered   Design  Age Начало  2009г.  Стал  доступен  переработанный   вариант  стандарта  ISO  9241-­‐‑210:   «Ergonomics  of  human-­‐‑system  interaction.  Part  210.   Human-­‐‑centred  design  for  interactive  systems».   О  чем  эта  презентация 3
  • 4. Что  я  предлагаю  делать? Добиваться  симпатии   людей О  чем  эта  презентация 4
  • 5. План  презентации •  О  чем  эта  презентация  об  этом  уже  поговорили  ;) •  Зачем  добиваться  симпатии •  Как  добиться  симпатии •  Эффективный  продукт •  Создаем  ощущение 5
  • 6. Зачем  добиваться    симпатии  людей? Давайте  подумаем  вместе 6
  • 7. •  Клиент  привыкает  к  удобству •  Испытывает  благодарность  за  заботу •  Переносит  чувства  от  сайта  на  компанию  и   продукт,  т.  е.  повышается  лояльность. •  Клиенту  проще  достичь  целей,   повышается  конверсия  =  деньги! Зачем  добиваться  симпатии 7
  • 8. Usability  ROI   •  Оценка  уровня  ROI   50 воспользовавшихся   40 юзабилити-­‐‑услугами. 30 •  Опрос    проводился   20 агентством  E-­‐‑ 10 consultancy  в  2007   0 году. ROI  -­‐‑  Окупаемость  инвестиций Зачем  добиваться  симпатии По  презентации  Дмитрия  Сатина 8
  • 9. UX  ROI   Смотрим  видео hƒp://youtu.be/O94kYyzqvTc Зачем  добиваться  симпатии 9
  • 10. UX  –  это  модно Совсем  скоро  про  заботу  о  людях  будут  говорить     все  значимые  игроки  рынка,  давайте  будем     в  числе  первых.   Зачем  добиваться  симпатии 10
  • 11. KPI  UX  =  конверсия   •  Каждое  решение  вызвано  целями  бизнеса •  Любое  изменение  влияет  на  эффективность •  Эффективность  каждого  решения  замеряема  в     клиентах,  заявках,  деньгах...   KPI  -­‐‑  ключевые  показатели  эффективности Зачем  добиваться  симпатии UX  –  опыт  взаимодействия 11
  • 12. Не  нужно  бороться   ценой Борьба  ценой  убивает  рынок  и   приводит   к  вырожденной  аудитории.   Формирование  ощущений  –  способ   завоевать  клиентов  без  снижения  цены.   Зачем  добиваться  симпатии 12
  • 13. Итак,  зачем  добиваться     симпатии  людей? Добиваться  симпатии   клиентов  ради  достижения   целей  бизнеса Зачем  добиваться  симпатии 13
  • 14. Как  добиться  этой  самой  симпатии? От  потребности  к   удовольствию 14
  • 15. Он  знает  как   делать  свою   работу  с   удовольствием Мы  должны  помочь  людям   чувствовать  себя  так  же Как  добиться  симпатии 15
  • 16. Миллионы   сайтов Онлайн  статистика Как  добиться  симпатии 16
  • 17. Информа-­‐‑ ционный  хаос Как  добиться  симпатии 17
  • 18. Борьба  за   время  людей Много  сайтов,     мало  времени,     как  выбрать  сайт? Как  добиться  симпатии 18
  • 19. Человек   зашел  на  сайт   У  нас  примерно  от  2  до  200   секунд,     чтобы  удержать  его  и  второй   попытки  не  будет Как  добиться  симпатии 19
  • 20. Как  добиться  симпатии? Дать  человеку  то,     что  он  хочет 20
  • 21. Как  удовлетворить  клиента? Создание  эффективного   продукта
  • 22. Этапы  создания •  Идентификация   •  Дизайн   потребностей •  Верстка   •  Креатив •  Анимация •  Стратегия •  Программирование •  Проектирование •  Анализ •  Копирайт •  Доработка Эффективный  продукт 22
  • 23. А  где  тестирование? Тестирование  после   каждого  этапа Эффективный  продукт 23
  • 24. Идентификация   потребностей Эффективный  продукт 24
  • 25. Идентификация   потребностей Создание  персонажей Определение  контекста Создание  сценариев Эффективный  продукт 25
  • 26. Создание  персонажей Какие  цели,  чем  занимается,   сколько  лет,  как  зовут,  как   выглядит,  как  отдыхает,  любимые   сайты Не  нужно  описывать  реальных  людей,  нужно  Эффективный  продукт выявить  характерные  паттерны 26
  • 27. Почему  ЦА     не  подходит? Нужно •  Определить  цели  человека •  Вжиться  в  него •  Понять  ограничения Эффективный  продукт 27
  • 28. Пример  ЦА Мужчины 25-­‐‑45 Доход:  средний  + Активные  потребители 28
  • 29. Контекст   взаимодействия Откуда  заходит,  с  какого  устройства,  разрешение   экрана,  устройства  ввода,  скорость  интернета Эффективный  продукт 29
  • 30. Создание  сценариев Откуда  приходит,  куда  двигается,     на  чем  заканчивает  работу Эффективный  продукт 30
  • 31. Несколько   персонажей Давайте  обсудим  примеры Эффективный  продукт 31
  • 32. Юрий  Вдовиченко Город:  Вологда Возраст:  32 Семейное  положение  и  дети:  женат,  дочь  5  лет Образование:  автослесарь  IV  разряда Хобби:  рыбалка,  дача,  хоккей Эффективный  продукт 32
  • 33. Юрий  Вдовиченко Деятельность:  собственный  бизнес  –  продажа  расходников  для  автосервиса Цели:  выход  на  новый  уровень  сервисов,  расширение  ассортимента Часто  используемые  сайты:  gmail.com,  yandex.ru,  lenta.ru Эффективный  продукт 33
  • 34. Юрий  Вдовиченко Место  взаимодействия:  офис,  дом  Устройства:  Ipad  2  /  Ноутбук  Sony  Vaio  Z Платформа:  iOS  /  Windows  7 Разрешение  экрана:  1024x768  /  1366x768 Браузер:  Sagari  /  Google  Chrome Эффективный  продукт 34
  • 35. Элла  Тимофеевна Город:  Новосибирск Возраст:  60 Семейное  положение  и  дети:  замужем,  2е  детей,  3е  внуков Образование:  педагог  начальных  классов Хобби:  дача,  внуки,  сериалы Эффективный  продукт 35
  • 36. Элла  Тимофеевна Деятельность:  наемный  директор  в  магазине  канцтоваров Цели:  повышение  прибыли  за  счет  продажи  более  дорогих  товаров Часто  используемые  сайты:  mail.ru,  yandex.ru Эффективный  продукт 36
  • 37. Элла  Тимофеевна Место  взаимодействия:  офис  Устройства:  стационарный  компьютер Платформа:  Windows  XP Разрешение  экрана:  1280х768 Браузер:  IE7 Эффективный  продукт 37
  • 38. Ольга  Галыгина Город:  Нижний  Новгород Возраст:  25 Семейное  положение  и  дети:  не  замужем,  детей  нет Образование:  международный  менеджмент Хобби:  кафе,  фото,  шопинг Эффективный  продукт 38
  • 39. Ольга  Галыгина Деятельность:  менеджер  по  закупкам  в  сети  магазинов  инструмента Цели:  расширение  ассортимента  средствами  защиты Часто  используемые  сайты:  yandex.ru,  vkontakte.ru,  facebook.ru,  lookatme.ru Эффективный  продукт 39
  • 40. Ольга  Галыгина Место  взаимодействия:  офис   Устройства:  Ноутбук  Acer  Aspire   5560 Платформа:  Windows  7 Разрешение  экрана:  1366x768 Браузер:  Opera  10 Эффективный  продукт 40
  • 41. Вика  Ремизова Город:  Самара Возраст:  36 Семейное  положение  и  дети:   замужем,  сын  2  года Образование:  школа Хобби:  шопинг,  кино,  друзья Эффективный  продукт 41
  • 42. Вика  Ремизова Деятельность:  администратор  в   стоматологии   Цели:  регулярный  заказ  расходных   материалов Часто  используемые  сайты:  mail.ru,   odnoklassniki.ru Эффективный  продукт 42
  • 43. Вика  Ремизова Место  взаимодействия:  офис   Устройства:  стационарный   компьютер Платформа:  Windows  XP Разрешение  экрана:  1024x768 Браузер:  IE  7 Эффективный  продукт 43
  • 44. Основные  персонажи •  Выпишите  все  варианты  персонажей  без   детализации •  Объедините  персонажи  с  пересекающимися   данными •  Персонажей  должно  быть  1-­‐‑5   •  Больше?  Сокращайте  или  делайте  несколько   сайтов.   Эффективный  продукт 44
  • 45. Ключевой  персонаж В  случае  дилеров  3М: •  Принимающий  финансовые  решения •  Готовящий  информацию  для  ЛПФР •  Часто  взаимодействующий  с  сайтом   Разрабатывайте  для  ключевого  персонажа,  но   учитывайте  интересы  всех. Эффективный  продукт 45
  • 46. Ключевой   персонаж Ольга  Галыгина Менеджер  по  закупкам  в   сети  магазинов  инструмента Эффективный  продукт 46
  • 47. Определение  целей   •  Оценить  рентабельность  закупок •  Выбрать  дилера •  Обеспечить  необходимые  поставки   •  Расширять  и  модифицировать  ассортимент •  Увеличивать  прибыль Эффективный  продукт 47
  • 48. Создание  сценариев Попробуем  сделать  по  одному  сценарию  для  таких   типов:   1.  Выбор  дилера   2.  Периодические  заказы Эффективный  продукт 48
  • 49. 1.  Выбор  дилера •  Переход  на  главную  страницу  из  Яндекса  по   запросу  «дилер  3М» •  Каталог  продукции  –  группа  товаров  –  товар  1,   товар  2 •  Преимущества •  Условия  сотрудничества •  Контакты Эффективный  продукт 49
  • 50. 2.  Периодические   заказы •  Переход  в  личный  кабинет  из  закладок •  Шаблон  заявки •  Заполнение  заявки •  Отправка Эффективный  продукт 50
  • 51. Определение   контекста Мы  уже  знаем  устройства,  которыми  она   пользуется.  Возможные  варианты  места: Офис,  1  час,  средняя  концентрация Офис,  10  минут,  большая  концентрация Дом,  4  часа,  низкая  концентрация Эффективный  продукт 51
  • 52. Тестирование   требований Задайте  реальным  клиентам  несколько  вопросов:   •  Как  они  приходят  на  сайт   •  Какая  информация  их  интересует  больше  всего   •  Что  их  раздражает,  расстраивает •  Какие  чувства  вызывает  у  них  сайт Эффективный  продукт 52
  • 53. Креатив  и  стратегия •  Основаны  на  полном   понимании  аудитории •  Отталкиваются  от  ее   целей  и  это  легко   проверить •  Точно  знают  зачем   человек  приходит  на   сайт  и  куда  его  вести Эффективный  продукт 53
  • 54. Проектируем   сайт Дальнейшие  шаги  проектирования Эффективный  продукт 54
  • 55. Карта  сайта Эффективный  продукт 55
  • 56. Тестирование     карты  сайта •  Учтены  все  сценарии   •  Один  раздел  только  в  одном  месте   •  Логичное  распределение  разделов  /  подразделов •  Разделы  названы  так,  как  привык  видеть  человек Эффективный  продукт 56
  • 57. Прототип •  Понимаем,  что  получим  в  итоге •  Можем  протестировать   •  Легко  исправить  (в  100  раз  дешевле)   Эффективный  продукт 57
  • 58. Прототип Прототип  часто  приводит  к  доработкам:   •  Карты  сайта •  Сценариев  использования Эффективный  продукт 58
  • 59. Прототип •  Содержать  все  страницы •  Учитывать  контекст   •  Учитывать  принципы   usability •  Реальные  данные  (или   близкие) Эффективный  продукт 59
  • 60. Тестирование Основные  виды  тестирования: •  Экспертная  оценка •  Тестирование  на  людях •  Сплит  (a/b)  тестирование   Эффективный  продукт 60
  • 61. Экспертная  оценка Главная  страница: •  Чем  сайт  является?   •  Что  в  нем  содержится?   •  Что  на  нем  можно  делать?     •  Почему  я  должен  быть  именно  на  этом   сайте?   Эффективный  продукт 61
  • 62. Экспертная  оценка Внутренние  страницы: •  Логотип •  Название  страницы •  Разделы •  Локальная  навигация •  Маркер  местонахождения •  Поиск Эффективный  продукт 62
  • 63. Экспертная  оценка Возьмите  дизайн,  отодвиньте  на  вытянутую   руку,  не  всматривайтесь  слишком  внимательно,   постарайтесь  как  можно  быстрее  найти   элементы  >> Эффективный  продукт 63
  • 64. Попробуйте  найти     в  дизайне: •  Логотип •  Название  страницы •  Разделы  и  подразделы •  Локальная  навигация •  Индикатор  местоположения •  Поиск   Эффективный  продукт 64
  • 65. Тестирование     на  людях •  Пригласить  человека •  Подготовить  вопросы   •  Записать  на  камеру   •  Показать  тестирование  команде Эффективный  продукт 65
  • 66. Тестирование  на   людях •  Тестировать  сайт,  а  не  человека •  Ориентироваться  на  действия  больше,     чем  на  слова   •  Просить  мыслить  вслух Эффективный  продукт 66
  • 67. По  итогам   тестирования Выявить  проблемы  и  найти  решения. Типичные  проблемы:   •  Не  понятно,  что  это  за  сайт •  Не  получается  найти  знакомые  слова •  Слишком  много  всего •  Не  обращайте  внимание  на  комментарии   по  дизайну! Эффективный  продукт 67
  • 68. По  итогам   тестирования Победа  быстро  и  дешево! •  Используйте  неожиданные  находки   •  Вносите  простые  исправления  где  это  возможно •  Избегайте  добавлять  описание  и  инструкции Сократите  текст  вдвое,  а  потом  еще  вдвое  Эффективный  продукт (не  касается  SEO  текста) 68
  • 69. 69
  • 70. Техническое  описание Описание  всех  идеи  и  функций,  которые   содержаться  в  прототипе.   Технические  требования,  безопасность,   обеспечение  функционирования. Эффективный  продукт 70
  • 71. Дизайн •  Концепция  рисуется  параллельно  с  прототипом •  Концепция  рисуется  вслед  за  прототипом Эффективный  продукт 71
  • 72. Тестирование  дизайна Те  же  этапы: •  Экспертная  оценка •  Тестирование  на  людях •  Сплит  (a/b)  тестирование Эффективный  продукт 72
  • 73. Внесение  исправлений   в  дизайн •  Ориентируйтесь  на  персонажи  и  ТО •  Насколько  дизайн  отвечает  требованиям •  Наймите  артдиректора,  если  есть  сомнения Эффективный  продукт 73
  • 74. Тестирование  верстки •  Проверить  работу  в  разных  браузерах  и  разных   разрешениях •  Проверить  на  соответствие  ТО •  Проверить  информативность  элементов  (кнопки   должны  визуально  нажиматься,  ссылки  менять   цвет  и  тд) Эффективный  продукт 74
  • 75. Тестирование  сайта   Функциональное  тестирование Тестирование  надежности: •  Безопасность •  Устойчивость •  Производительность Эффективный  продукт 75
  • 76. Как  корректность   работы  влияет  на  UX Смотрим  видео hƒp://youtu.be/X_sV2M4qhz4 Эффективный  продукт Видео  о  связи  user  experience  с  работой  продукта 76
  • 77. Потребность  удовлетворена Но,  важно  не  только  удовлетворить   потребность,  но  и  сделать  это  красиво.   Об  этом  в  следующей  презентации… 77