Ксения Стернина, Дизайн-решения. Проверено...
TRANSCRIPT
ДИЗАЙН-РЕШЕНИЯ ПРОВЕРЕНО ЭКСПЕРИМЕНТОМ
Опыт Mail.Ru Group
ЮЗАБИЛИТИ-ЛАБОРАТОРИЯ
НАБЛЮДАТЕЛЬНАЯ КОМНАТА
ИНТЕРФЕЙСНЫЕ РЕШЕНИЯ ДЛЯ ТАЧ-ВЕРСИЙ И ПРИЛОЖЕНИЙ
КАРТИНКИ
Независимо от тематики продукта, если он подразумевает фотографии, то они точно будут востребованы пользователями.
Фотографии должны быть качественными и с ними должно быть удобно взаимодействовать.
ФОТОГРАФИИ ОЧЕНЬ ВАЖНЫ
Наличие цифры числа фотографий не помогает понять, что фотографий несколько. Даже те, кто заметил цифру, не поняли, что она означает.
Зато решение с частью следующей фотографии хорошо себя зарекомендовало.
НЕСКОЛЬКО ФОТОГРАФИЙ
Не видят галерею фотографий
В зависимости от сценария, людям бывает достаточно просмотреть превью.При этом оно должно быть достаточно большим по размеру (~1/3 экрана), чтобы можно было что-то разглядеть.
Превью было достаточно при просмотре новостроек и смартфонов.
ИНОГДА ДОСТАТОЧНО ПРЕВЬЮ
Фокус внимания целиком сосредоточен на фотографии, поэтому сервисные кнопки заметить сложно.
Чтобы вернуться на предыдущее состояние, люди скорее нажимают Back на смартфоне или браузере. Поэтому они должны правильно обрабатываться – не сбрасывать предыдущее состояние, запоминать введенные формы и т.п.
ПОЛНОЭКРАННЫЙ РЕЖИМ
Внутри статьи картинки должны быть кликабельны с возможностью приблизить.
ПРИБЛИЖЕНИЕ КАРТИНКИ
Промотав рецепт до интересного места, пробовала нажать на место, где находилась непрогруженная картинка, чтобы загрузить сейчас именно ее, а не ждать загрузки сначала всех остальных картинок. Такое поведение не поддерживается, хотя могло бы быть полезно пользователям.
НЕЗАГРУЖЕННЫЕ КАРТИНКИ
Жмет на непрогруженнуюкартинку
ГЕО-ЛОКАЦИЯ
Список станций метро по алфавиту – не работает. До Щукинской листать можно бесконечно.
С разбивкой на линии метро – еще хуже, надо знать, как называется нужная ветка.
СПИСКИ СТАНЦИЙ МЕТРО
Поисковик по станциям метро спасает ситуацию, особенно, если работают саджесты.
Важно, чтобы поисковик был заметен. В нашем случае часть людей не заметили поисковик и сразу стали листать станции вниз.
ПОИСК СТАНЦИЙ МЕТРО
Возможность выбора нескольких станций метро нужна.
Сохранение выбранных станций в новой вкладке –не работает. Вкладку не замечали.
ВЫБОР НЕСКОЛЬКИХ СТАНЦИЙ
Выбранные станции
Цветовое кодирование по веткам необходимо.
ОДИНАКОВЫЕ НАЗВАНИЯ СТАНЦИЙ
Выбор станции метро «Пушкинская» должен автоматически означать выбор станций «Тверская» и «Чеховская».
Результаты поиска на соседних с выбранной станцией также будут полезны.
СОСЕДНИЕ СТАНЦИИ
Расстояние от метро – полезная информация. В отдельных кейсах, например, в случае с выбором ресторана – этот фактор может быть определяющим.
РАССТОЯНИЕ ОТ МЕТРО
Район города, административный округ –далеко не все знакомы с данными понятиями.Лучше оперировать понятиями, знакомыми всем – станция метро, улица.
РАЙОН, ОКРУГ
Поскольку город воспринимается, как часть области, то 1. Непонятен порядок расположения.
Ожидается, что сначала выбираешь бОльшее, далее уточняешь
2. Кажется, что пункты связаны между собой.
А на самом деле для того, чтобы исключить квартиры из области, нужно снять галочку рядом с ее названием.
ГОРОД И ОБЛАСТЬ
Когда пользователь из Екатеринбурга запрещает определение своей гео-позиции, он еще не знает, что увидит московские кинотеатры.
Необходим простой и быстрый способ указать свой регион.
РАЗРЕШЕНИЕ НА ГЕО-ПОЗИЦИЮ
Пользователи хотят видеть на карте свою текущую гео-позицию, для того чтобы посмотреть объекты рядом с собой.
СВОЕ МЕСТОПОЛОЖЕНИЕ
Карта в виде картинки быстро загружается. Однако пользователи привыкли взаимодействовать с картой (например, посмотреть объекты рядом или проложить маршрут) и остаются разочарованными, если не могут этого сделать.
КАРТЫ В ВИДЕ КАРТИНКИ
БУРГЕРНОЕМЕНЮ
Несмотря на то, что данное интерфейсное решение является стандартным для большинства тач-версий и приложений, мало кто его замечает.
Особенно это проявлено, если меню, в пользу контента уезжает за пределы экрана.
НЕ ЗАМЕЧАЮТ МЕНЮНе видят меню
Наличие стрелочек – подразделов привело к тому, что пользователи пытались кликнуть именно на них, чтобы перейти в нужный раздел. Это создало 2 проблемы:1. Они туда с трудом попадали2. По клику раскрывались
подразделы раздела и им казалось, что в раздел попасть нельзя
МЕНЮ
На ряде устройств, которые являются средним между смартфоном и планшетом, пользователи могут поворачивать устройства в горизонтальный вид. Необходимо это учесть.
АДАПТАЦИЯ ПОД ГОРИЗОНТАЛЬНЫЙ ВИД
SEGMENTED CONTROL
Во всех случаях работала хорошо. Заметная, понятная, удобная.
SEGMENTED CONTROL
ЗАГОЛОВКИ
ЗАГОЛОВОК ИЛИ КНОПКА
Кликабельно?
Кликабельно?
Кликабельно?
Пользователь не видит названия рецепта, думает, что это все ингридиенты
Пользователь думает, что в разделе «Мода» 4 статьи. Все блоки, расположенные ниже, она воспринимала как рекламу других разделов, а не подразделы данного раздела.
ЗАГОЛОВКИ И ПОДЗАГОЛОВКИ
Думают, что это уже к разделу не относится
UI DATE PICKER
DatePicker довольно удобная вещь. Однако надо продумывать положение, на котором он должен фиксироваться.
Пользователи, ограничивающие нижнюю границу даты выхода фильмов, как правило, хотят посмотреть «самые свежие». То есть по факту им нужно ограничить последние 1-2 года.В таком случае, им приходится очень долго листать до этой даты, поскольку выбор начинается с 1908 года.
ВЫБОР ГОДА
А вот, например, для выбора страны –производителя фильма, DatePicker не особо подходит, потому что пользователям чаще надо выбрать несколько или исключить один.
В данном случае пользователи хотели выбрать Российские или Зарубежные.
ВЫБОР СТРАНЫ-ИЗДАТЕЛЯ
Выбирать серию сериала для просмотра посредством DatePicker довольно удобно.
ПЕРЕКЛЮЧЕНИЕ СЕРИЙ
Выбор сделан удобно, но у пользователей возникала сложность с тем, чтобы выбор подтвердить.Поскольку с предыдущими примерами такой проблемы не возникало, кажется, что дело в том, что кнопка «Готово» серая и не заметная.
ФИЛЬТР ПО ВРЕМЕНИ
кликает на дату
ИЗБРАННОЕ
В различных кейсах бывает необходимо сохранить информацию. Поэтому наличие Избранного всегда отмечается пользователями, как преимущество.Например, в проекте Недвижимость, чтобы сохранить объявления, пользователи• Пересылают их по почте • Делают скриншоты экрана смартфона• Добавляют закладки в браузер смартфона или компьютера• Переписывают контакты в адресную книгу смартфона• Оставляют открытые вкладки браузера
ИЗБРАННОЕ – ПОЛЕЗНАЯ ФУНКЦИЯ
Все пользователи говорят, как было бы полезно для них иметь возможность сохранить информацию в Избранное, но как только они видят страницу авторизации, ценность этой функции нивелируется.
Кроме этого у пользователей создается ощущение, что вся информация об Избранном будет приходить на почту.
ТРЕБУЕТСЯ АВТОРИЗАЦИЯ
Несмотря на размер кнопки «Добавить в избранное», пользователи ее замечали не с первого раза или не замечали совсем.Вариант флажка справа от контента сработал удачно.
КНОПКА ДОБАВЛЕНИЯ (1 из 3)
замечают
не замечают
Контекстное название кнопки может поломать привычный шаблон. «Хочу посмотреть» воспринимали, как онлайн просмотр и даже наличие рядом кнопки «Смотреть онлайн» не помогло
КНОПКА ДОБАВЛЕНИЯ (2 из 3)
кнопка «смотреть онлайн» не помогает понять
думают, что это онлайн
просмотр
Текущее отображение добавления воспринималось как название раздела.
Кнопка, которая выглядит кнопкой была понятной, но не вместилась на первый экран и ее не замечали.
КНОПКА ДОБАВЛЕНИЯ (3 из 3)
не похоже на кнопку
не видна на первом экране
После добавления в избранное необходимо указание, где теперь это избранное просмотреть.
Часть людей искали Избранное в бургерном меню, часть решили, что список придет на почту, часть решили, что в списке просто будет висеть флажок.
ГДЕ ИСКАТЬ ИЗБРАННОЕ
Если для добавление в Избранное делать отдельный режим, то необходимо обеспечить понятную возможность выхода из него.
ВЫХОД ИЗ РЕЖИМА ВЫБОРА ИЗБРАННОГО
кликает на бургер
Пользователи опасаются, что в «Избранном» может не оказаться нужного.
Для них необходимо предусмотреть возможность вывода «Похожего».
ЕСЛИ «ИЗБРАННОЕ» ИСЧЕРПАНО
