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

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

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

Как продать свои услуги дороже #1

Успешный дизайнер, это не тот кто делает "круче" всех, а тот, кто продает свои услуги лучше своих коллег.

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

1. Презентация цены клиенту

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

Лучше обсудите ваше предложение и сообщите о цене при личной встрече. Это можно сделать также через видеочат/телефонный звонок, если речь идет об удаленном заказе. Такой подход поможет лучше расположить клиента к тому, чтобы он остановил свой выбор именно на вас.

2. Описание услуг

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

Рассмотрим на конкретном примере:

Создание информационной архитектуры страницы: $100

Разработка вайрфреймов страницы: $200

Разработка первичного макета страницы: $300

Общая сумма: $600

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

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

1. Первичная концепция страницы: $600
Создание информационной архитектуры, разработка вайрфреймов и первичного макета страницы

2. Разработка макетов страницы: $500
Создание макетов страниц на основе утвержденного дизайна, подготовка макета для верстки

3. Верстка макета: $500
Вёрстка на Tilda по утвержденным макетам

Общая сумма: $1600

Таким образом мы получим взаимосвязанные этапы, которые невозможно исключить из проекта.

3. Тайминг

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

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

Аффордансы, карты пользовательского пути, как продать свои услуги дороже...

По традиции недельный дайджест.

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

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

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

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

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

— Как продать свои услуги дороже #1

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

ТОП-11 принципов использования сеток в графическом и веб-дизайне

Как часто вы пользуетесь сетками в макетах? Если ваш ответ иногда или никогда, то очень рекомендую прочесть статью. Ведь сетка задает правильный ритм дизайну, а это то, что выгодно отличает крутой дизайн от посредственного. Автор делится практическими советами с наглядными примерами и разбирает основные правила, такие как: что такое модульная сетка? Сколько колонок выбрать? Зачем нужен вертикальный ритм? И многие другие...

https://ux-journal.ru/top-11-printsipov-ispolzovaniya-setok-v-graph-i-web-dizajne.html#principle-8

Эффективность - Первый закон Паркинсона

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

В 1955 году в журнале The Economist был опубликовал Первый закон Паркинсона, который звучит так:

Объем работы всегда будет расти для того, чтобы заполнить время, отведенное на ее выполнение.

Иными словами, мы будем работать над задачей ровно столько, сколько на нее было выделено времени.

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

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

Если было полезно, реакции к вашим услугам. До скорой!