Оценка первого впечатления от дизайна - Вячеслав...
DESCRIPTION
Описываю методику оценки графического дизайна с привлечением пользователей. Задача методики - решить проблему выбора из нескольких вариантов дизайна одного и того же сайта или отдельной страницы.TRANSCRIPT
![Page 1: Оценка первого впечатления от дизайна - Вячеслав Иванов, UXRussia'14](https://reader035.vdocuments.mx/reader035/viewer/2022062220/557db369d8b42a351d8b4fb4/html5/thumbnails/1.jpg)
ОЦЕНКА ПЕРВОГО ВПЕЧАТЛЕНИЯ ОТ САЙТА
Вячеслав Иванов,
USABLITYLAB
![Page 2: Оценка первого впечатления от дизайна - Вячеслав Иванов, UXRussia'14](https://reader035.vdocuments.mx/reader035/viewer/2022062220/557db369d8b42a351d8b4fb4/html5/thumbnails/2.jpg)
ПОСТАНОВКА ЗАДАЧИ
Нужно выбрать, какой вариант дизайна лучше
Сайт в дизайне еще не готов, и есть только набор макетов
![Page 3: Оценка первого впечатления от дизайна - Вячеслав Иванов, UXRussia'14](https://reader035.vdocuments.mx/reader035/viewer/2022062220/557db369d8b42a351d8b4fb4/html5/thumbnails/3.jpg)
![Page 4: Оценка первого впечатления от дизайна - Вячеслав Иванов, UXRussia'14](https://reader035.vdocuments.mx/reader035/viewer/2022062220/557db369d8b42a351d8b4fb4/html5/thumbnails/4.jpg)
ПОЧЕМУ ЭТО ПРОБЛЕМА
Люди не очень хорошо описывают свои впечатления. Мы не всегда
понимаем, почему нам нравится тот или иной дизайн
Люди скорее будут говорить о содержании сайта, чем о дизайне
Оценки дизайна и содержания сайта смешиваются, влияют друг на
друга
![Page 5: Оценка первого впечатления от дизайна - Вячеслав Иванов, UXRussia'14](https://reader035.vdocuments.mx/reader035/viewer/2022062220/557db369d8b42a351d8b4fb4/html5/thumbnails/5.jpg)
НЕЛЬЗЯ ПРОСТО СПРОСИТЬ
![Page 6: Оценка первого впечатления от дизайна - Вячеслав Иванов, UXRussia'14](https://reader035.vdocuments.mx/reader035/viewer/2022062220/557db369d8b42a351d8b4fb4/html5/thumbnails/6.jpg)
УСЛОЖНИМ ЗАДАЧУ
Если есть старый дизайн в стиле 90х и новенький от ведущей студии, выбор очевиден
Если есть несколько профессионально сделанных вариантов, различия будут небольшими, и выбрать сложнее
![Page 7: Оценка первого впечатления от дизайна - Вячеслав Иванов, UXRussia'14](https://reader035.vdocuments.mx/reader035/viewer/2022062220/557db369d8b42a351d8b4fb4/html5/thumbnails/7.jpg)
НУЖНО СОБРАТЬ МНОГО МНЕНИЙ
![Page 8: Оценка первого впечатления от дизайна - Вячеслав Иванов, UXRussia'14](https://reader035.vdocuments.mx/reader035/viewer/2022062220/557db369d8b42a351d8b4fb4/html5/thumbnails/8.jpg)
![Page 9: Оценка первого впечатления от дизайна - Вячеслав Иванов, UXRussia'14](https://reader035.vdocuments.mx/reader035/viewer/2022062220/557db369d8b42a351d8b4fb4/html5/thumbnails/9.jpg)
НА ЧТО ВЛИЯЕТ ДИЗАЙН
Создает первое впечатление
Немного сдвигает все остальные оценки сайта
Нас интересует первое впечатление как значимый фактор
![Page 10: Оценка первого впечатления от дизайна - Вячеслав Иванов, UXRussia'14](https://reader035.vdocuments.mx/reader035/viewer/2022062220/557db369d8b42a351d8b4fb4/html5/thumbnails/10.jpg)
УСЛОВИЯ
Оцениваем только дизайн
Сравниваем несколько
Оцениваем первое впечатление
Нужно достаточно много людей
![Page 11: Оценка первого впечатления от дизайна - Вячеслав Иванов, UXRussia'14](https://reader035.vdocuments.mx/reader035/viewer/2022062220/557db369d8b42a351d8b4fb4/html5/thumbnails/11.jpg)
![Page 12: Оценка первого впечатления от дизайна - Вячеслав Иванов, UXRussia'14](https://reader035.vdocuments.mx/reader035/viewer/2022062220/557db369d8b42a351d8b4fb4/html5/thumbnails/12.jpg)
МЕТОД ПАРНЫХ СРАВНЕНИЙ
Каждый вариант сравнивается с каждым
Нужно выбрать лучший вариант по одному (и только одному) признаку
Каждая пара оценивается несколько раз
![Page 13: Оценка первого впечатления от дизайна - Вячеслав Иванов, UXRussia'14](https://reader035.vdocuments.mx/reader035/viewer/2022062220/557db369d8b42a351d8b4fb4/html5/thumbnails/13.jpg)
ПРЕИМУЩЕСТВА МЕТОДА
Устойчив к колебанию мнения
Позволяет оценивать различия количественно
Снижает влияние других факторов
Можно проводить удаленно
![Page 14: Оценка первого впечатления от дизайна - Вячеслав Иванов, UXRussia'14](https://reader035.vdocuments.mx/reader035/viewer/2022062220/557db369d8b42a351d8b4fb4/html5/thumbnails/14.jpg)
![Page 15: Оценка первого впечатления от дизайна - Вячеслав Иванов, UXRussia'14](https://reader035.vdocuments.mx/reader035/viewer/2022062220/557db369d8b42a351d8b4fb4/html5/thumbnails/15.jpg)
РИСКИ ПРИМЕНЕНИЯ
Неизвестно, правильно ли человек понял задачу
Неизвестно, правильная ли задача поставлена (тот ли вопрос мы задаем)
![Page 16: Оценка первого впечатления от дизайна - Вячеслав Иванов, UXRussia'14](https://reader035.vdocuments.mx/reader035/viewer/2022062220/557db369d8b42a351d8b4fb4/html5/thumbnails/16.jpg)
СНАЧАЛА ПРОВЕРИТЬ,
РАБОТАЕТ ЛИ МЕТОД
![Page 17: Оценка первого впечатления от дизайна - Вячеслав Иванов, UXRussia'14](https://reader035.vdocuments.mx/reader035/viewer/2022062220/557db369d8b42a351d8b4fb4/html5/thumbnails/17.jpg)
ПИЛОТНОЕ ИССЛЕДОВАНИЕ
Инструкция Сравнение
Интервью
после
сравнения
![Page 18: Оценка первого впечатления от дизайна - Вячеслав Иванов, UXRussia'14](https://reader035.vdocuments.mx/reader035/viewer/2022062220/557db369d8b42a351d8b4fb4/html5/thumbnails/18.jpg)
![Page 19: Оценка первого впечатления от дизайна - Вячеслав Иванов, UXRussia'14](https://reader035.vdocuments.mx/reader035/viewer/2022062220/557db369d8b42a351d8b4fb4/html5/thumbnails/19.jpg)
ПИЛОТНОЕ ИССЛЕДОВАНИЕ
Проводится очно (не удаленно)
Время не ограничено
Важно моделировать ситуацию удаленного проведения, поэтому экспериментатор не вмешивается
Инструкция и вопрос письменно в начале измерения
Беседа по гибкому плану после
![Page 20: Оценка первого впечатления от дизайна - Вячеслав Иванов, UXRussia'14](https://reader035.vdocuments.mx/reader035/viewer/2022062220/557db369d8b42a351d8b4fb4/html5/thumbnails/20.jpg)
КАКОЙ САЙТ ВЫ СКОРЕЕ
СТАЛИ БЫ ПРОСМАТРИВАТЬ
ПЕРВЫМ?
![Page 21: Оценка первого впечатления от дизайна - Вячеслав Иванов, UXRussia'14](https://reader035.vdocuments.mx/reader035/viewer/2022062220/557db369d8b42a351d8b4fb4/html5/thumbnails/21.jpg)
ГЛАВНЫЙ ВОПРОС
Допущение: пользователь захочет в первую очередь познакомиться с тем сайтом, который произвел лучшее первое впечатление.
Мы оцениваем одну страницу. Спрашивать, какой сайт более информативный, например, было бы некорректно.
Выбрана максимально узкая, точная формулировка
![Page 22: Оценка первого впечатления от дизайна - Вячеслав Иванов, UXRussia'14](https://reader035.vdocuments.mx/reader035/viewer/2022062220/557db369d8b42a351d8b4fb4/html5/thumbnails/22.jpg)
МАТЕРИАЛЫ
Макеты сайта
Инструмент для предъявления (например, PsychoPy)
Инструкции для респондентов
![Page 23: Оценка первого впечатления от дизайна - Вячеслав Иванов, UXRussia'14](https://reader035.vdocuments.mx/reader035/viewer/2022062220/557db369d8b42a351d8b4fb4/html5/thumbnails/23.jpg)
ТРЕБОВАНИЯ К МАКЕТАМ
Проконтролировано все, кроме собственно дизайна
Все тексты на странице, элементы навигации, ссылки – одинаковые
![Page 24: Оценка первого впечатления от дизайна - Вячеслав Иванов, UXRussia'14](https://reader035.vdocuments.mx/reader035/viewer/2022062220/557db369d8b42a351d8b4fb4/html5/thumbnails/24.jpg)
![Page 25: Оценка первого впечатления от дизайна - Вячеслав Иванов, UXRussia'14](https://reader035.vdocuments.mx/reader035/viewer/2022062220/557db369d8b42a351d8b4fb4/html5/thumbnails/25.jpg)
![Page 26: Оценка первого впечатления от дизайна - Вячеслав Иванов, UXRussia'14](https://reader035.vdocuments.mx/reader035/viewer/2022062220/557db369d8b42a351d8b4fb4/html5/thumbnails/26.jpg)
ВОПРОСЫ ПОСЛЕ ОЦЕНКИ
Какая страница понравилась вам больше прочих? Что делает ее привлекательной?
Какая страница вам понравилась меньше всего? Почему?
Сталкивались ли вы с трудностями при оценке? Какими?
Обращаете ли вы внимание на дизайн, когда посещаете такие сайты?
Насколько корректным вы считаете основной вопрос?
![Page 27: Оценка первого впечатления от дизайна - Вячеслав Иванов, UXRussia'14](https://reader035.vdocuments.mx/reader035/viewer/2022062220/557db369d8b42a351d8b4fb4/html5/thumbnails/27.jpg)
![Page 28: Оценка первого впечатления от дизайна - Вячеслав Иванов, UXRussia'14](https://reader035.vdocuments.mx/reader035/viewer/2022062220/557db369d8b42a351d8b4fb4/html5/thumbnails/28.jpg)
ВЫБОРКА
Целевая аудитория продукта
Не сталкивались с оцениваемым сайтом ранее
30-100
![Page 29: Оценка первого впечатления от дизайна - Вячеслав Иванов, UXRussia'14](https://reader035.vdocuments.mx/reader035/viewer/2022062220/557db369d8b42a351d8b4fb4/html5/thumbnails/29.jpg)
ДОПУЩЕНИЕ: ПРИВЛЕКАТЕЛЬНОСТЬ ДИЗАЙНА
РАСПРЕДЕЛЕНА ПО НОРМАЛЬНОМУ ЗАКОНУ
![Page 30: Оценка первого впечатления от дизайна - Вячеслав Иванов, UXRussia'14](https://reader035.vdocuments.mx/reader035/viewer/2022062220/557db369d8b42a351d8b4fb4/html5/thumbnails/30.jpg)
1 2 3 ctrl
1 20 24 4
2 12 12 4
3 8 20 4
ctrl 28 28 28
МАТРИЦА ВЫБОРОВ
![Page 31: Оценка первого впечатления от дизайна - Вячеслав Иванов, UXRussia'14](https://reader035.vdocuments.mx/reader035/viewer/2022062220/557db369d8b42a351d8b4fb4/html5/thumbnails/31.jpg)
1 2 3 ctrl
1 0,625 0,75 0,125
2 0,375 0,375 0,125
3 0,25 0,625 0,125
ctrl 0,875 0,875 0,875
МАТРИЦА ВЕРОЯТНОСТЕЙ
![Page 32: Оценка первого впечатления от дизайна - Вячеслав Иванов, UXRussia'14](https://reader035.vdocuments.mx/reader035/viewer/2022062220/557db369d8b42a351d8b4fb4/html5/thumbnails/32.jpg)
1 2 3 ctrl
1 0,33 0,67 -1,13
2 -0,31 -0,31 -1,13
3 -0,67 0,33 -1,13
ctrl 1,18 1,18 1,18
МАТРИЦА Z-ОЦЕНОК
![Page 33: Оценка первого впечатления от дизайна - Вячеслав Иванов, UXRussia'14](https://reader035.vdocuments.mx/reader035/viewer/2022062220/557db369d8b42a351d8b4fb4/html5/thumbnails/33.jpg)
2 0,46
3 0,385
1 0,05
ctrl -0,8475
ИТОГОВЫЙ РЕЙТИНГ
![Page 34: Оценка первого впечатления от дизайна - Вячеслав Иванов, UXRussia'14](https://reader035.vdocuments.mx/reader035/viewer/2022062220/557db369d8b42a351d8b4fb4/html5/thumbnails/34.jpg)
ОБРАБОТКА
Количественные данные вместо качественных
Не просто лучше. Насколько лучше
![Page 35: Оценка первого впечатления от дизайна - Вячеслав Иванов, UXRussia'14](https://reader035.vdocuments.mx/reader035/viewer/2022062220/557db369d8b42a351d8b4fb4/html5/thumbnails/35.jpg)
ЧТО МЫ ПОЛУЧАЕМ
Понимают ли респонденты вопрос
Считают ли они вопрос корректным
Совпадает ли выбор с их мнением после измерения
Какой макет производит лучшее впечатление?
Насколько один макет лучше другого?
![Page 36: Оценка первого впечатления от дизайна - Вячеслав Иванов, UXRussia'14](https://reader035.vdocuments.mx/reader035/viewer/2022062220/557db369d8b42a351d8b4fb4/html5/thumbnails/36.jpg)
ПО РЕЗУЛЬТАТАМ ПИЛОТАЖА
Меньшая пригодность для интерфейсов, рассчитанных на длительную работу
Мы знаем, почему!
Все макеты должны быть представлены в одном масштабе
Важно сделать акцент на критерии оценки
![Page 37: Оценка первого впечатления от дизайна - Вячеслав Иванов, UXRussia'14](https://reader035.vdocuments.mx/reader035/viewer/2022062220/557db369d8b42a351d8b4fb4/html5/thumbnails/37.jpg)
РЕКОМЕНДАЦИИ
Если все варианты плохие, мы этого не узнаем. Контроль полезен
Если выбрана не та страница, которую пользователи будут видеть первой в реальной жизни, то результат менее достоверен
![Page 38: Оценка первого впечатления от дизайна - Вячеслав Иванов, UXRussia'14](https://reader035.vdocuments.mx/reader035/viewer/2022062220/557db369d8b42a351d8b4fb4/html5/thumbnails/38.jpg)
СЛАБЫЕ СТОРОНЫ
Не для всех интерфейсов
Без отдельного интервью не отвечает на вопрос «почему лучше?»
![Page 39: Оценка первого впечатления от дизайна - Вячеслав Иванов, UXRussia'14](https://reader035.vdocuments.mx/reader035/viewer/2022062220/557db369d8b42a351d8b4fb4/html5/thumbnails/39.jpg)
ВОЗМОЖНЫЕ ПРИМЕНЕНИЯ
Оценка неодинаковых макетов?
Сравнение новой и старой версии
Сравнение с конкурентами