За 4 года существования UX-лаборатории Mail.ru Group накопилась информация из исследований различных проектов. Пришло время объединить данные и сделать общие выводы

1. ДИЗАЙН-РЕШЕНИЯ
ПРОВЕРЕНО ЭКСПЕРИМЕНТОМ
Опыт Mail.Ru Group

2. ЮЗАБИЛИТИ-ЛАБОРАТОРИЯ

3. НАБЛЮДАТЕЛЬНАЯ КОМНАТА

4. ИНТЕРФЕЙСНЫЕ РЕШЕНИЯ
ДЛЯ ТАЧ-ВЕРСИЙ И ПРИЛОЖЕНИЙ

5. КАРТИНКИ

6. Независимо от тематики продукта,
если он подразумевает
фотографии, то они точно будут
востребованы пользователями.
Фотографии должны быть
качественными и с ними должно
быть удобно взаимодействовать.
ФОТОГРАФИИ ОЧЕНЬ ВАЖНЫ

7. Наличие цифры числа фотографий
не помогает понять, что
фотографий несколько. Даже те,
кто заметил цифру, не поняли, что
она означает.
Зато решение с частью следующей
фотографии хорошо себя
зарекомендовало.
НЕСКОЛЬКО ФОТОГРАФИЙ
Не видят галерею
фотографий

8. В зависимости от сценария,
людям бывает достаточно
просмотреть превью.
При этом оно должно быть
достаточно большим по
размеру (~1/3 экрана), чтобы
можно было что-то
разглядеть.
Превью было достаточно
при просмотре новостроек и
смартфонов.
ИНОГДА ДОСТАТОЧНО ПРЕВЬЮ

9. Фокус внимания целиком сосредоточен на
фотографии, поэтому сервисные кнопки
заметить сложно.
Чтобы вернуться на предыдущее состояние,
люди скорее нажимают Back на смартфоне
или браузере. Поэтому они должны
правильно обрабатываться – не сбрасывать
предыдущее состояние, запоминать
введенные формы и т.п.
ПОЛНОЭКРАННЫЙ РЕЖИМ

10. Внутри статьи картинки должны быть
кликабельны с возможностью приблизить.
ПРИБЛИЖЕНИЕ КАРТИНКИ

11. Промотав рецепт до интересного места,
пробовала нажать на место, где находилась
непрогруженная картинка, чтобы загрузить
сейчас именно ее, а не ждать загрузки
сначала всех остальных картинок. Такое
поведение не поддерживается, хотя могло
бы быть полезно пользователям.
НЕЗАГРУЖЕННЫЕ КАРТИНКИ
Жмет на непрогруженную
картинку

12. ГЕО-ЛОКАЦИЯ

13. Список станций метро по
алфавиту – не работает. До
Щукинской листать можно
бесконечно.
С разбивкой на линии метро
– еще хуже, надо знать, как
называется нужная ветка.
СПИСКИ СТАНЦИЙ МЕТРО

14. Поисковик по станциям
метро спасает ситуацию,
особенно, если работают
саджесты.
Важно, чтобы поисковик был
заметен. В нашем случае
часть людей не заметили
поисковик и сразу стали
листать станции вниз.
ПОИСК СТАНЦИЙ МЕТРО

15. Возможность выбора
нескольких станций метро
нужна.
Сохранение выбранных
станций в новой вкладке –
не работает. Вкладку не
замечали.
ВЫБОР НЕСКОЛЬКИХ СТАНЦИЙ
Выбранные станции

16. Цветовое кодирование по веткам
необходимо.
ОДИНАКОВЫЕ НАЗВАНИЯ СТАНЦИЙ

17. Выбор станции метро «Пушкинская»
должен автоматически означать
выбор станций «Тверская» и
«Чеховская».
Результаты поиска на соседних с
выбранной станцией также будут
полезны.
СОСЕДНИЕ СТАНЦИИ

18. Расстояние от метро – полезная информация.
В отдельных кейсах, например, в случае с выбором ресторана
– этот фактор может быть определяющим.
РАССТОЯНИЕ ОТ МЕТРО

19. Район города, административный округ –
далеко не все знакомы с данными
понятиями.
Лучше оперировать понятиями, знакомыми
всем – станция метро, улица.
РАЙОН, ОКРУГ

20. Поскольку город воспринимается, как часть
области, то
1. Непонятен порядок расположения.
Ожидается, что сначала выбираешь
бОльшее, далее уточняешь
2. Кажется, что пункты связаны между
собой.
А на самом деле для того, чтобы исключить
квартиры из области, нужно снять галочку
рядом с ее названием.
ГОРОД И ОБЛАСТЬ

21. Когда пользователь из Екатеринбурга
запрещает определение своей гео-позиции,
он еще не знает, что увидит московские
кинотеатры.
Необходим простой и быстрый способ
указать свой регион.
РАЗРЕШЕНИЕ НА ГЕО-ПОЗИЦИЮ

22. Пользователи хотят видеть на карте свою
текущую гео-позицию, для того чтобы
посмотреть объекты рядом с собой.
СВОЕ МЕСТОПОЛОЖЕНИЕ

23. Карта в виде картинки быстро загружается.
Однако пользователи привыкли
взаимодействовать с картой (например,
посмотреть объекты рядом или проложить
маршрут) и остаются разочарованными,
если не могут этого сделать.
КАРТЫ В ВИДЕ КАРТИНКИ

24. БУРГЕРНОЕ
МЕНЮ

25. Несмотря на то, что данное интерфейсное
решение является стандартным для
большинства тач-версий и приложений,
мало кто его замечает.
Особенно это проявлено, если меню, в
пользу контента уезжает за пределы экрана.
НЕ ЗАМЕЧАЮТ МЕНЮ
Не видят меню

26. Наличие стрелочек – подразделов
привело к тому, что пользователи
пытались кликнуть именно на них,
чтобы перейти в нужный раздел.
Это создало 2 проблемы:
1. Они туда с трудом попадали
2. По клику раскрывались
подразделы раздела и им
казалось, что в раздел попасть
нельзя
МЕНЮ

27. На ряде устройств, которые являются
средним между смартфоном и планшетом,
пользователи могут поворачивать
устройства в горизонтальный вид.
Необходимо это учесть.
АДАПТАЦИЯ ПОД ГОРИЗОНТАЛЬНЫЙ ВИД

28. SEGMENTED
CONTROL

29. Во всех случаях работала
хорошо. Заметная,
понятная, удобная.
УДАЧНЫЙ ВАРИАНТ SEGMENTED
CONTROL

30. Текущий вариант нельзя сказать, что
не работает совсем, но несколько
пользователей его замечали далеко
не сразу.
НЕ ОЧЕНЬ УДАЧНЫЙ ВАРИАНТ
SEGMENTED CONTROL

31. ЗАГОЛОВКИ

32. ЗАГОЛОВОК ИЛИ КНОПКА
Кликабельно?
Кликабельно?
Кликабельно?

33. Пользователь не видит
названия рецепта,
думает, что это все
ингридиенты
Пользователь думает,
что в разделе «Мода»
4 статьи. Все блоки,
расположенные ниже,
она воспринимала как
рекламу других
разделов, а не
подразделы данного
раздела.
ЗАГОЛОВКИ И ПОДЗАГОЛОВКИ
Думают, что это уже к
разделу не относится

34. UI DATE PICKER

35. DatePicker довольно удобная вещь. Однако
надо продумывать положение, на котором
он должен фиксироваться.
Пользователи, ограничивающие нижнюю
границу даты выхода фильмов, как правило,
хотят посмотреть «самые свежие». То есть
по факту им нужно ограничить последние
1-2 года.
В таком случае, им приходится очень долго
листать до этой даты, поскольку выбор
начинается с 1908 года.
ВЫБОР ГОДА

36. А вот, например, для выбора страны –
производителя фильма, DatePicker не особо
подходит, потому что пользователям чаще
надо выбрать несколько или исключить
один.
В данном случае пользователи хотели
выбрать Российские или Зарубежные.
ВЫБОР СТРАНЫ-ИЗДАТЕЛЯ

37. Выбирать серию сериала для просмотра
посредством DatePicker довольно удобно.
ПЕРЕКЛЮЧЕНИЕ СЕРИЙ

38. Выбор сделан удобно, но у
пользователей возникала
сложность с тем, чтобы выбор
подтвердить.
Поскольку с предыдущими
примерами такой проблемы
не возникало, кажется, что
дело в том, что кнопка
«Готово» серая и не заметная.
ФИЛЬТР ПО ВРЕМЕНИ
кликает на
дату

39. ИЗБРАННОЕ

40. В различных кейсах бывает необходимо сохранить
информацию. Поэтому наличие Избранного всегда отмечается
пользователями, как преимущество.
Например, в проекте Недвижимость, чтобы сохранить
объявления, пользователи
• Пересылают их по почте
• Делают скриншоты экрана смартфона
• Добавляют закладки в браузер смартфона или компьютера
• Переписывают контакты в адресную книгу смартфона
• Оставляют открытые вкладки браузера
ИЗБРАННОЕ – ПОЛЕЗНАЯ ФУНКЦИЯ

41. Все пользователи говорят, как было бы
полезно для них иметь возможность
сохранить информацию в Избранное, но
как только они видят страницу
авторизации, ценность этой функции
нивелируется.
Кроме этого у пользователей создается
ощущение, что вся информация об
Избранном будет приходить на почту.
ТРЕБУЕТСЯ АВТОРИЗАЦИЯ

42. Несмотря на размер
кнопки «Добавить в
избранное»,
пользователи ее
замечали не с
первого раза или не
замечали совсем.
Вариант флажка
справа от контента
сработал удачно.
КНОПКА ДОБАВЛЕНИЯ (1 из 3)
замечают
не замечают

43. Контекстное
название кнопки
может поломать
привычный шаблон.
«Хочу посмотреть»
воспринимали, как
онлайн просмотр и
даже наличие рядом
кнопки «Смотреть
онлайн» не помогло
КНОПКА ДОБАВЛЕНИЯ (2 из 3)
кнопка «смотреть онлайн»
не помогает понять
думают,
что это
онлайн
просмотр

44. Текущее отображение добавления
воспринималось как название
раздела.
Кнопка, которая выглядит кнопкой
была понятной, но не вместилась
на первый экран и ее не замечали.
КНОПКА ДОБАВЛЕНИЯ (3 из 3)
не похоже
на кнопку
не видна на
первом экране

45. После добавления в избранное
необходимо указание, где
теперь это избранное
просмотреть.
Часть людей искали Избранное
в бургерном меню, часть
решили, что список придет на
почту, часть решили, что в
списке просто будет висеть
флажок.
ГДЕ ИСКАТЬ ИЗБРАННОЕ

46. Если для добавление в
Избранное делать отдельный
режим, то необходимо
обеспечить понятную
возможность выхода из него.
ВЫХОД ИЗ РЕЖИМА ВЫБОРА
ИЗБРАННОГО
кликает на
бургер

47. Пользователи опасаются, что в
«Избранном» может не оказаться нужного.
Для них необходимо предусмотреть
возможность вывода «Похожего».
ЕСЛИ «ИЗБРАННОЕ» ИСЧЕРПАНО

48. ПОИСКОВИК

49. Согласно
исследованиям
2015-2016гг правый
верхний угол для
поисковика
работает хорошо.
Пользователи
ожидают увидеть
его именно там.
А в 2011-2012г
замечали иконку не
все.
МЕСТОПОЛОЖЕНИЕ ПОИСКОВИКА

50. Бледная поисковая
строчка – не заметна.
Особенно если она
конкурирует на экране
с яркими элементами,
например, картинками.
В случае, если кнопка
поиска выделена
цветом, поисковая
строка заметна.
ВИЗУАЛИЗАЦИЯ ПОИСКОВОЙ СТРОКИ
не
замечают
не
замечают
замечают

51. Саджесты для тач-версий и
приложений – очень важная
составляющая, т.к. печатать на
смартфоне не очень удобно.
Кроме этого пользователи часто
• Делают ошибки, потому что не
знают правильного написания
• Промахиваются мимо нужной
буквы на клавиатуре
• Не помнят точную формулировку
• Автокоррекция может сработать
неверно.
САДЖЕСТЫ

52. Многочисленные исследования
подтверждают, что отсутствие
результатов поиска вызывает проблемы
– пользователь не понимает, что ему
дальше делать.
Вариант с «похожими» результатами
поиска в некоторых случаях работает
плохо, потому что пользователь скролит
сразу вниз к результатам, не читая
сообщение, о том, что ничего не
найдено и думает, что его фильтр не
сработал.
НЕТ РЕЗУЛЬТАТОВ ПОИСКА
сразу
скролят

53. Если результаты поиска не соответствуют
ожиданиям (например, должна быть картинка,
а ее нет), это может привести к тому, что
пользователь уйдет на другой ресурс.
НЕПОЛНОЦЕННЫЕ РЕЗУЛЬТАТЫ ПОИСКА

54. ШАРЫ

55. Часть пользователей не
прокручивают страницу ниже
кнопок шар.
Им кажется, что после шар идет
реклама.
Такая же проблема встретилась и на
веб-версиях.
ПОСЛЕ ШАР НЕТ НИЧЕГО ИНТЕРЕСНОГО
игнорируют все
после шар

56. В ситуации просмотра
однородного материала
(чтение статьи), шары в
большей степени
игнорируются.
В ситуации разнородного
(текст+картинки) – в
большей степени
замечаются.
ШАРИНГОВАЯ СЛЕПОТА

57. РЕКЛАМА

58. Часть пользователей не
прокручивают страницу ниже
рекламы, которая находится в
середине страницы. Им кажется, что
после рекламы ничего полезного
нет.
ПОСЛЕ РЕКЛАМЫ НЕТ НИЧЕГО
ИНТЕРЕСНОГО
не скролят ниже

59. В отличие от веба, рекламу замечают, потому
что она занимает значительную часть экрана.
В связи с этим, отношение к ней резко
негативное, опять же в отличие от веба.
РЕКЛАМА ЗАМЕТНАЯ

60. Особенно пользователей раздражало то, что
реклама никак не связана с тематикой
изучаемой информации.
Они говорили, что если бы реклама была
тематическая, это раздражало бы меньше.
ТЕМАТИКА РЕКЛАМЫ

61. Реклама появляется сверху с
задержкой примерно в 3 сек.
Из-за того, что она появляется
поздно и сдвигает контент вниз,
пользователи сталкивались с
тем, что кликали в рекламу
случайно, т.к. она
«подставлялась» им под клик.
РЕКЛАМА ПОЯВЛЯЕТСЯ С ЗАДЕРЖКОЙ

62. Пользователи пытались закрыть
рекламу и нажимали на крестик.
Они ожидали, что реклама после
этого уйдет, но вместо этого их
перекинуло на страницу с
опросом, почему им не нравится
реклама. Это очень возмущало
респондентов, но поворчав, они
выбирали какой-то вариант, в
надежде, что после стольких
действий, реклама из ТВ
программы исчезнет. Реклама
исчезала, но на ее месте
оставался блок на 1/3 экрана.
ДИАЛОГ С ДИРЕКТОМ

63. СПАСИБО!
Стернина Ксения
руководитель UX-лаборатории
sternina@corp.mail.ru
facebook.com/ksenia.sternina