Как создать идеальный дизайн страницы результатов поиска

Как создать идеальную форму поиска мы уже разобрались. На этот раз собрал для вас наилучшие советы как правильно задизайнить страницу вывода результатов поиска.

1. Сохраняйте текст запроса в строке поиска
Таким образом пользователю будет проще внести правки, если он захочет уточнить свой запрос.

2. Предоставляйте точные и актуальные результаты
Пользователи часто судят о ценности веб-ресурса, основываясь на качестве результатов выдачи. Сортируйте товары по признакам релевантности, популярности, наличия и прочим метрикам.

3. Используйте "умную" обработку поиска
Наихудший вариант для пользователя, это не получить никакого результата на свой запрос. В этом случае большинство пользователей просто покинут ваш сайт.

— Исправляйте ошибки и опечатки
— Учитывайте транслитерацию. Таким образом неважно каким алфавитом пользователь ввел запрос.
— Учитывайте синонимы и морфологию. Например если пользователь ввел: "мобилки"

4. Всегда отображайте число найденных результатов в заглавии списка
Так пользователь сможет лучше понять, сколько времени понадобится на их просмотр и по возможности использовать фильтры чтобы уточнить запрос.

5. Больше пространства для скролинга
Не стоит нагромождать пространство над выдачей результатов другими элементами или слишком большой шапкой. Пользователь должен сразу видеть результаты и заинтересован прокрутить страницу дальше.

6. Предоставляйте фильтры и сортировку
Лучше не разделять продукты по типам в выдаче поиска, а отобразить все результаты на одной странице. Помогите пользователю сузить результаты поиска с помощью фильтров и сортировки по параметрам.

Совет: Не скрывайте функцию сортировки в функции фильтрации - это разные задачи. Четко выделяйте включенные фильтры. Пользователи должны знать, какие фильтры активны.

7. Предоставляйте разные виды отображения результатов

- Список
Отображение результатов поиска списком лучше всего подходит для сравнения результатов по параметрам. Если вы проектируете интернет-магазин, то в списке результатов должны быть: описательное название продукта, небольшое изображение и цена.

Лучше всего подойдет для: отображения технических товаров, авиабилетов, комплектующих.

- Галерея
Представление в виде галереи - хороший вариант для приложений с продуктами, где дополнительная информация не так важна, а пользователи больше полагаются на визуальные образы при принятии решений.

Лучше всего подойдет для: одежды, продуктов питания, косметики

8. Предоставляйте пустую страницу результатов поиска

Если по запросу все-таки ничего не найдено, важно предоставить посетителям альтернативные варианты товаров.


Полезные ресурсы:

>> Примеры страниц результатов поиска на странице Baymard Institute

>> Скриншоты паттернов поиска на мобильных приложениях

На этом все! Дайте знать если было полезно. Кстати, как вам оформление статей с иллюстрациями?

Методы исследования в UX — Карточная сортировка

Карточная сортировка — это техника исследования, в которой пользователи привлекаются к проектировке информационной архитектуры будущего продукта. Основная цель, получить первое представление, как пользователи представляют себе иерархическую структуру продукта.

Когда применять

На ранних стадиях проектирования, в особенности если вы проектируете инновативный продукт, которого еще нет на рынке. Также карточная сортировка подойдет для создания каталогов, меню, навигации приложений и сайтов. Кроме того, этот метод можно использовать для выявления ошибок в уже сформированной информационной структуре.

Как применять

Пользователи получают наборы карточек с категориями данных, встречающихся на сайте или в приложении.
Задача респондентов - отсортировать карточки исходя из своих представлений о структуре объектов и связей между ними. При этом они также должны придумать названия для смысловых групп. В результате исследования выявляются закономерности, на основе которых будут создаваться структура продука и названия категорий.

Заключение

Метод особенно полезен если нет ясности, как должны быть структурированы навигация и разделы вашего приложения. Также метод полезен для проверки уже имеющихся наработок.
Для проведения исследования не понадобятся сложные инструменты т.к. сортировку карточек можно провести с заранее распечатанными бумажками или стикерами на маркерной доске.

На этом все. Если было полезно, дайте знать в реакциях!

Эффект края, дизайн страниц результатов поиска, карточная сортировка...

Недельный дайджест:

— Что делает веб-дизайнер в 2022 году – 10 основных задач и примеры проектов

— Психология в дизайне — Эффект края

— Ставки в фрилансе #3 — Часовой тариф или фиксированная цена?

— Как бы выглядели российские логотипы на Западе

— Как создать идеальный дизайн страницы результатов поиска

— Методы исследования в UX — Карточная сортировка

Если посты были полезными, дайте знать в реакциях.

Как делать лендинги в 2022

Почему текст сильно переоценен, кто и как должен создавать контент и зачем нужны иллюстрации… Как делать лендинги круче и почему конверсия — не главное. Познавательная статья не только для копирайтеров и маркетологов, но и для дизайнеров.
Для ленивых вложена презентация со слайдами.

https://vc.ru/marketing/529149-kak-delat-lendingi-v-2022-moy-doklad-pro-povyshenie-otdachi-ilyahovskim-metodom-rabotu-s-avtorami-i-prototipirovanie

Психология в дизайне — Закон Сходства

Один из базовых гештальт-принципов известный также как закон подобия. Он гласит, что:

Человеческий глаз имеет тенденцию воспринимать похожие элементы в дизайне как целостное изображение, форму или группу, даже если эти элементы разделены.

Таким образом внешне схожим элементам всегда будет приписываться одинаковое назначение. По этому принципу их можно проще организовать и сгруппировать.

Как применять

В дизайне закон можно применить к ссылкам, кнопкам и прочим навигационным элементам, которые должны визуально отличаться от прочих текстовых элементов. С другой стороны если вы хотите привлечь внимание пользователя к какому-то элементу интерфейса, можете сделать его максимально непохожим на остальные.

Совет:
При использовании закона сходства имейте в виду, что цвет является самым эффективным способом группировки, в то время как форма и размер самыми слабыми. Это наглядно видно на иллюстрации внизу.

Основы UX дизайна — Аффордансы

Первым концепцию аффордансов в дизайне описал американский психолог, специалист в области пользовательской инженерии, Дональд Норман.

В его понимании аффорданс – это то, что пользователь может делать с объектом, исходя из его возможностей. При этом аффорданс не просто качество или характерная черта объекта, а именно возможность пользователя взаимодействовать с этим объектом. В повседневной жизни, наиболее наглядный пример, это дверная ручка: своей формой и расположением она указывает, что дверь нужно потянуть на себя.

Этот принцип применим и к цифровым продуктам. Например, первые элементы интерфейсов проектировались наиболее похожими на физический мир: цифровые кнопки первых смартфонов выглядели как физические клавиши используя скевоморфизм, а иконки были похожи на знакомые действия: корзина - удаление, дискета - сохранить, символ папки для группировки файлов итд.

И не смотря на то, что многие аффордансы со временем потеряли привязку к физическому миру, во многих случаях они стали общепринятой нормой, без которых интерфейс будет менее понятным и удобным.

В 1991 году дизайнер Уильям Гейвер, выделил три типа аффордансов:

Воспринимаемые — характеристики самого объекта указывают на то, какие возможности действия доступны и желательны — например, переключатель. Эти очевидные свойства побуждают пользователей использовать объект по назначению.

Скрытые — В пользовательских интерфейсах без очевидных возможностей пользователи часто должны полагаться на опыт и/или метод проб и ошибок, чтобы определить возможные действия - например, когда нужно навести курсор и кликнуть чтобы открыть выпадающие меню.

Ложные — характеристики объекта предполагают, что пользователи могут применить несуществующую опцию — например, подчеркнутый текст, который не является ссылкой.

Какой вывод можно сделать? Понимание, как правильно применять аффордансы — одна из основных задач дизайнеров при создании пользовательского взаимодействия. Несмотря на приходящие и уходящие тренды, важно понимать как работают те или иные неизменные паттерны вокруг которых строится взаимодействие с пользователем. Осознание того, что многие решения в цифровом продукте берут свое начало в физическом мире поможет вам не только найти понятные и интуитивные решения, но и создавать новые оригинальные решения черпая инспирацию из повседневной жизни.

Было полезно? Дайте знать в реакциях!

6 видеоуроков с фишками и лайфхаки работы в Figma

Неплохая подборка видео-туториалов с лайфхаками для Figma. 6 компактных уроков длительностью от 3 - 11 мин. Максимум пользы без всякой воды.

Темы:
— Лучшие плагины
— Прокрутка вниз. Слайдер
— 5 правил подготовки макета к верстке
— Новые возможности Figma
— Плагины
— Быстрый экспорт из Figma в Tilda

Ссылка: https://vk.com/wall-62268523_41194

Инструменты - Как строить карту пути пользователя

Карта пользовательского пути (User Journey Map) популярный инструмент для улучшения пользовательского опыта. Для начала разберемеся с терминологией.

Карта пути пользователя описывает все точки взаимодействия с продуктом на временной шкале. Если целью пользовательского пути является покупка товара/услуги, то в маркетинге используется термин карта пути клиента (Customer Journey Map). По сути, оба термина взаимозаменяемы т.к имеют отношение к визуализации человека, использующего ваш продукт или услугу.

Для чего нужны карты пользовательского пути

В первую очередь этот инструмент помогает разобраться когда и как пользователь должен взаимодействовать с продуктом. Это поможет всем участникам команды достигнуть единого понимания видения продукта. Кроме того, карта пути поможет принять правильные решения в процессе дальнейшего развития продукта.

Как строить карту пути пользователя

1. Составьте сценарий описывающий ситуацию почему и как пользователь будет взаимодействовать с вашим продуктом. Для определения пользователя можно воспользоваться методом персон. При этом сценарий составляется для каждого действующего лица в отдельности, т.к их взаимодействие с продуктом может сильно отличаться.

Разбейте все действия пользователей на последовательные этапы указав каналы взаимодействия (например сообщение с предложением, сайт, телефонный разговор с продавцом итд) и нанесите их на временную шкалу.

2. Далее для каждой стадии пути мы описываем все ключевые действия совершаемые пользователем, его мысли и эмоции. В идеальном случае эту информацию можно почерпнуть из предварительных интервью и пользовательских исследований. Тут важно описать мотивацию пользователя при взаимодействии с продуктом, его ожидания и мысли. Также стоит описать и эмоциональный настрой — где пользователь доволен, а где разочарован.

3. Заключительным шагом является определение потенциалов для улучшения пользовательского пути. Выявив болевые точки, все позитивные и негативные моменты в user journey можно сделать выводы где и как улучшить пользовательский опыт и какие барьеры нужно устранить, как измерять успех реализованных решений и какая команда будет за них отвечать.

Пример

Обратите внимание на карту пути клиента на примере спортивного интернет-магазина на иллюстрации внизу.

Он включает в себя исходную историю покупателя с описанием проблемы и ожиданиями. Наше действующее лицо - Олег, который хочет купить кроссовки для бега. Его путь от мысли обновить кроссы до получения и примерки товара разбит на 5 этапов. В зависимости от вашего продукта этих этапов может быть и больше. Помимо конкретных действий также озвучены и мысли потенциального покупателя, проблемы с которыми он сталкивается во время выбора товара. На временной шкале эмоциональный настрой нашего протагониста схематично обозначен линейной диаграммой.

Вывод

Карта пути пользователя, это полезный инструмент для продуктовых команд. Если правильно выстроить карту, то она поможет привести команду к общему видению продукта, а также улучшить взаимодействие с пользователем.


Полезные материалы

— Пример схемы построения customer journey map

— Создавать карты можно в Miro или FigJam

Книга по теме
Путь клиента — Создаем ценность продуктов и услуг через карты путей, блупринты и другие инструменты визуализации
Автор: Джим Калбах

Если было полезно, дайте знать в реакциях!

#почитать

Вдобавок к посту перевел для вас шаблон для создания пользовательских карт путей от Nielsen Norman Group