Начало вебинара через 20 минут.
Можно устроиться в удобном кресле, налить себе чаю и съесть еще этих мягких французских булок ;)
Вебинар начнется примерно через 15 минут.
Начало через 10 минут.
Вебинар начнется через 5-6 минут
Добрый день.
Это Ирина из UIDG.
Спасибо за участие. Начало через 5 минут
Ирина: Всем привет.
Немного оргинформации:
вопросы будут задаваться в конце
вы можете писать их в чат по ходу вебинара
если хотите задать вопрос словами, воспользуйтесь функцией "Поднять руку"
После вебинара у вас откроется короткая анкета: просим ее заполнить
Итак, Эми Куева
Эми: Доброе утро
Это первый вебинар для меня
у нас интересная тема, которая очень мне нравится
интерфейсы для поиска
я все время слежу за такими интерфейсами, что работает, а что нет
Я поделюсь некоторыми своими мыслями и рекомендациями
а также покажу ряд примеров
Надеюсь, вы увидите, что пропустили в своих собственных проектах
Начнем
Наша студия занимается самыми разными интерфейсами
Мы находимся в США недалеко от Бостона
Нас 28человек
Наши клиенты
благодаря им мы получили много полезного опыта
Презентация не о рыбах, а о поиске
Поиск — это возможность получить доступ к огромному объему информации
делая поиск, мы как будто опускаем ногу в реку мирового инфопространства
в воде есть молекулы, а в поиске много аспектов
Эта информация живет, двигается, как рыба
Эта информация взаимосвязана
Не всегда очевидно, что представляет собой инфопространство
Вы можете искать что-то, но если оно не совсем соответствует запросу, то не появится
Как организовать это так, чтобы пользователи нашли
что нужно и оно само всплывало на поверхность этого моря
Я расскажу о разных типах поиска
о разных способах запуска поиска
навигации по поиску
презентации результатов
о релевантности и действиях с результатами
Как люди ищут в самых разных поисковых сервисах,
а также в поисковых инструментах отдельных сайтов
также есть локальный поиск в интранетах
бывает поиск файлов в корпоративной сети
Также есть разные контексты поиска: с телефона, из инфокиоска
можно задавать запрос голосом
иногда мы даже спрашиваем реальных людей,
а они уже пользуются системой поиска
Мы ищем самую разную информацию
иногда она четко задана и есть единственный правильный ответ
например, индекс, место или человек
Иногда мы ищем информацию, требующую анализа и сравнения
например, в афише мы подбираем, куда и когда лучше сходить
или мы ищем ресторан, врача или книгу
Уровень погружения в информацию тоже бывает разным
Ответ зависит от пользователя
его вкусов, опыта и т.д.
Важные вещи, которые надо рассматривать
иногда мы слишком много думаем о технологии, а не о пользователях
хотя мы и на Юзабилити-марафоне
Рассмотрите, какие есть типы пользователей
кто-то настроен погружаться в сайт, а кому-то надо быстро найти что нужно
кому-то нужен инструмент для удобного сравнения, кому-то нужны простые текстовые описания результатов
они из разных культур, имеют разный опыт пользования сайтом
Последнее можно определить за счет куки и профиля пользователя
Таким образом, можно изменять результаты поиска, чтобы сделать их более релевантными
Поведение при поиске зависит от сценария, при котором они зашли на ваш сайт
в зависимости от того, как они попали на сайт, откуда и зачем, зависит то, как они будут искать
В первую очередь, нужно рассматривать что они ищут с точки зрения человека, во вторую - поисковые запросы
В зависимости от того, какие сайты они обычно используют, им можно выдавать информацию
так, чтобы им не надо было уходить на эти сайты
От всего названного зависит то, как они выбирают, куда идти
Не всегда нам надо, чтоб они кликали на результат
может, мы дадим им все, что нужно прямо в выдаче
Как они будут сравнивать результаты?
Они могут быть заинтересованы конкретной деталью
а не высокоуровневым описанием
Нужно определить самую важную информацию, чтобы показывать в первую очередь
Собираются ли они все время возвращаться назад после поиска и вводить новый запрос
Или они введут запрос, а потом будут сортировать и фильтровать результаты
Будут ли они сохранять, комментировать
отправлять результаты друзьям
Нужно понимать, будут ли они делать все это на вашем сайте
и строить интерфейс поиска исходя из этого
Нужно предугадывать их желания, например вести лог поисков
Когда вы ищете работу
вы хотите получать уведомления о новых результатах, соответствующих критерию
или вы ищете инфу о болезни
вы хотите знать, когда появятся какие-то новые способы исследования
нужно предусмотреть уведомления
Надо задавать все эти вопросы себе и команде
проводите мозговые штормы и обсуждения
используйте веб-аналитику, проводите исследования пользователей
изучите текущее поведение пользователей
посмотрите запросы
Можно выложит на сайт опрос, узнать, довольны ли они поиском
проведите интервью и наблюдения за пользователями
юзабилити-тестирование можно проводить каждые несколько месяцев
Иногда бывают очень специализированные инструменты поиска
а общие поисковые сервисы, например, ищут все подряд
Постарайтесь понять паттерны поиска на вашем сайте и используйте это знание
Что вы делаете? Немного жонглируете кнопками или хотите кардинально улучшить UX?
Нужно определить цели и охват проекта
знать, к чему вы стремитесь в итоге
но не нужно терять возможностей вносить маленькие изменения, которые улучшат поиск прямо сейчас
Не все можно сделать за счет технологии.
есть готовые инструменты поиска, но их нужно часто менять для конкретного случая
иногда нужно дополнять ваш контент
например, проставлять теги
Если технология не помогает пользователю найти что нужно, он уйдет
Если просто натянуть классный скин на дефолтный движок
это не обязательно создаст отличный UX
Как понять что поиск эффективен?
Вы можете регулярно проводить измерения
для этого нужно определить ваши KPI
Вы будете мерить удовлетворения, количество попыток на человека и т.д.?
Надо определить регулярные мероприятия для отслеживания эффективности
Есть много способов повысить эффективность поиска
погворим конкретно о проектировании
Что видят пользователи, когда только заходят в поиск?
Самые популярные запросы, рекомендуемые объекты?
Как мы будем предъявлять результаты? Как иерархизировать?
Как будет вести себя поле ввода?
Будут ли значения по умолчанию?
Будет ли исправление опечаток, отображения связанный результатов
Например, на сайте курьерской доставки вы можете искать по коду посылки
они по разному обрабатывают запрос в зависимости от того, что введено
Вы также может подмешивать разные специализированные результаты: видео, картинки
контент может быть разворачивающимся
как можно показать все самое нужное прямо в выдаче
Когда пользователь работает с результатами, нужно дать контролы для сортировки, фильтрации, поиска среди результатов
Гугл дает возможность двигать результаты своего поиска
Очень важна структура выдачи
Благодаря AJAX можно сделать, чтобы результаты добавлялись постепенно
и до бесконечности, пока вы пролистываете их
Вам могут предоставляться закладки для переключения объектов поиска
Они также подмешивают эти результаты в основную выдачу
Картинки привлекают внимание к результатам
На Ask.com тоже есть вкладки для типов контента,
но они еще и показывают предпросмотр
это помогает избежать лишних кликов
Но улучшает ли это опыт достаточно сильно. Ведь страница более громоздка
В Bing привлекают новыми фичами
Они показывают связанные результаты, вашу историю поиска
Как и гугл, они показывают графику сверху
Collecta - инструмент поиска по социальным медиа
Результаты постоянно добавляются в реал-тайме
Это пример сервиса, который состоит из одного экрана, на котором все и происходит
Иногда несколько поисков могут отображаться одновременно в нескольких колонках
В Twitdeck можно параллельно отслеживать несколько тем
Прям отсюда можно ответить, добавить в избранное и т.д.
Иногда поле поиска скрывают для экономии места на странице
Это лучше, чем убирать его вообще на отдельную страницу
Пользователю в последнее время ожидают везде видеть Suggest
Когда они ищут в незнакомой для себя тематике, такие варианты помогают им сделать выбор
Интерфейсы поиска бывают довольно сложными
мы стараемся сначала показывать основные поля,
а при клике по ссылке раскрываются дополнительные
При ответе на один вопрос может появляться новое пол
е
Вот пример фасетного поиска
с большим количеством фильтров
Можно сказать: покажи такой-то бренд
Бренд, размер, цвет и т.д. - это фасеты
Они могут быть как вертикальными, так и горизонтальными
При наведении мышки на результат мы тут тоже получаем превью
Отображаемые фасеты могут зависеть от ввода
от запроса
Удобно, когда можно снять фильтры одной кнопкой
Важно показывать пользователям, что они уже выбрали
Чтобы не потеряться, важно, чтоб пользователь видел, где он и что делал до этого
Скучный, но важный аспект - переходы между страницами
Вот варианты пагинаторов
На твиттере вместо пагинации есть подгрузка новых сообщений по нажатию кнопки
Вот как мы оформили вкладки: в виде стопки бумаг
По бокам есть стрелки для перемещения между страницами
Для поиска внутри найденного используется вот такая радиокнопка
А вот примеры сортировки
Это разные способы сужения результатов
Есть очень инновативные способы визуализации информации
Этот инструмент позволяет просматривать разные новости
Навигация и поиск иногда незаметно перемешиваются
Здесь трудно сказать, когда вы ищете, а когда браузите по результатам
А вот новости в виде карточек
Здесь результаты выдаются не в виде стены ссылок по вертикали, а в несколько столбцов
Вот еще пример визуализации
Пользователям было сложно сориентироваться, и мы сделали наглядные карты, чтобы помочь им
Если мы ищем про диабет, то увидим карту тем о диабете
Когда мы нажимаем на узлы графа, результаты обновляются
Сверху есть переключение типов объектов: доктора, лекарства и т.д.
Вот визуализация в виде тепловой географической карты
Это визуализации повреждений в результате аварии
Это прототип, концепция визуализации типа "Бычий глаз"
Человек в центре, а его команда или группа окружает его
Мы размещаем результаты поиска в его ментальной карте
Нужно понять ищут ли они конкретный термин или общую информацию
В первом случае можно сразу показать конкретный ответ
Нужно сортировать данные по релевантности: если целый раздел посвящен какому-то термину
то этот результат должен быть выше сайта, где оно один раз встречается
Еще пример предпросмотра результатов
Пример аккордеона: нужный результат разворачивается при нажатии
Вот еще пример предпросмотра: в этот раз в слое
который открывается при нажатии
а при наведении отображается более скромный набор информации
Поиск, отображение результатов и демонстрация информации на одном экране -- это сложно, но перспективно
Связанные результаты: определение термина, люди, связанные с ним, облака тегов
все это отлично дополняет собственно ссылки
Вкладки, подвкладки, слайдер -- возможные варианты контролов для навигации по результатам
Тут разные действия с результатом скрыты за небольшой иконкой
тут также можно изменить настройки просмотра
или выбрать, где осуществлять поиск
Хотя это выглядит громоздко, но иконки позволяют быстро найти нужное
Тут результаты отображаются визуально, а сверху фильтры
Это пример специализированного поиска
Тут пространство поиска очень хорошо визуализировано
это что-то вроде навигации по портфолио
нажимая на блок результатов, мы зумируемся к нему
Когда мы выбираем фильтры, то прямо видим изменения
Давая разные варианты просмотра и представления, мы помогаем людям с разными потребностями
Вот пример трех способов просмотра
Такие карточки очень удобны для сравнения
При наведении на иконки видов открываются всплывающие подсказки
Для проверки такого подхода мы использовали юзабилити-тестирование
Амазон хорошо использует связи
например, показывает, что покупали с данным товаром
люди узнают о том, что иначе не нашли бы
Рекомендованные поиски, связанные
Вот возможность просмотреть все фасеты в развернутом виде
Если пользователи используют сленг в тегах или опечатывают, это помогает с исправлением запросов
но это может и добавлять неразбериху
набор функций должен зависеть от конкретной ситуации
Иногда можно использовать IP для определения географического расположения
Рекомендации от Амазона
Тут результаты скрытым образом персонализируются по географии и по профилю
В гугле можно влиять на сортировку для себя лично
Это не всегда влияет на другого человека
Иногда можно разрешать управлять видом результатов: тут можно двигать столбцы
Важно давать возможность индивидуальных и массовых действий с объектами
Если пользователю нужны регулярные результаты, нужно давать возможность подписки на уведомления
Ирина: Вы можете задавать вопросы голосом (поднимите руку)
или напишите вопрос в чат
Дэниел: отличная презентация
У меня есть twitter
Ира: Мы его разместим на сайте Марафона
Вопрос: как вы делаете поиск по карте, геолокацию?
Есть плугины у Google maps
Мы как проектировщики часто рекомендуем использовать карту
Визуальная информация усиливает опыт пользователей
Нужно учитывать скрин-ридеры
Видео и аудио должно иметь субтитры
Картинки и флэш могут быть прочитаны
Это помогает в поиске по мультимедиа-информации
Вопрос: мы заметили горизонтальный скролл. Не плохо ли это?
Все зависит от ситуации
iTunes и Apple часто используют
Там так построена навигация по альбомам
Это часто так делается при навигации по графической информации
Это подчеркивает отличие визуальной информации
Вопрос: вы проводите тестирование, когда изменяете поиск
Важно понять KPI, чтобы сравнить успешность нового поиска
Вы можете использовать веб-аналитику и опросы
Юзабилити-тестирование полезно как качественный метод
Обычно мы сначала делаем количественное тестирование
количественные методы
а потом проверяем гипотезы на качественных
Есть разница между чтением и просматриванием
Графику удобнее смотреть слева направо
Кажется, мы ответили на все вопросы
Ирина: Спасибо всем за внимание!
Просьба заполнить анкету