- Статьи
- 5 мин на чтение
- 65
Проектируем новую функцию в интернет-магазине
Дизайн функции «список подарков»
Люди испытывают стресс, как покупают подарки друзьям и близким. Всегда есть страх, что подарок не понравится или окажется не тем, что они хотели получить. Кроме того, есть риск купить вещь не того размера. Что если бы существовала функция, которая бы устранила все эти проблемы при покупке подарков?
Список подарков
Представьте, что есть функция, которая позволяет выбрать потенциальные подарки друзьям и родственникам, а затем узнать, какой из этих подарков они хотят получить на предстоящий праздник. Больше не нужно беспокоиться о том, что вы купите не тот товар или выберете вещь не того размера. С этой функцией вы сможете сделать всё правильно с первого раза.
Прежде чем приступить к её разработке, я составил схему всех взаимодействий пользователя, необходимых для достижения цели, и отобразил их поэтапно. Цель состоит в том, чтобы человек мог поделиться списком подарков с друзьями, попросить их выбрать подарок из списка, а затем увидеть, что они выбрали.
Карта взаимодействий пользователя
- Пользователь просматривает потенциальные подарки и добавляет их в список подарков
- Человек проверяет список подарков
- Он делится этим списком с друзьями
- Друзья получают список подарков и выбирают тот подарок, который им нравится
- Пользователь видит результаты и покупает подарки
После того, как я составил схему взаимодействий, я подумал о том, как перенести эту идею на экраны. Я кратко, на элементарном уровне, описал, как будут выглядеть страницы. Это помогло мне сконцентрироваться на основных элементах интерфейса, а затем проработать второстепенные детали.
- Пользователь просматривает потенциальные подарки и добавляет их в список подарков → Экран с изображениями товаров и кнопка «Добавить в список подарков»
- Человек проверяет список подарков → Страница списка подарков со всеми выбранными подарками и кнопка «Поделиться»
- Он делится этим списком с друзьями → Форма с полями для ввода имени и адреса электронной почты каждого друга
- Друзья получают список подарков и выбирают подарок, который им нравится → Страница с подарками и выделенной карточкой подарка, которую выбрал друг
- Пользователь видит результаты и покупает подарки → Страница списка подарков, которая показывает выбор каждого друга
Модель взаимодействия со списком подарков похожа на привычный виш-лист/список желаемого (wishlist) или функцию «избранное». Поэтому я использовал эту концепцию в качестве отправной точки. Вместо иконки с изображением сердца, которую используют для добавления товаров в избранное, я выбрал иконку подарка, которая предназначена для добавления товаров в список подарков.
Добавление товаров в список подарков
Те товары, которые человек выбрал в качестве потенциальных подарков, попадают на вкладку «Список подарков», на которой он может их увидеть. Здесь он делится списком подарков с друзьями и родственниками. Однако у меня возникли сложности с тем, чтобы найти наилучший способ поделиться этой страницей с другими. Пользователь не должен испытывать трудности, когда захочет поделиться списком подарков с несколькими людьми.
Здесь идеально подойдёт модальная страница*, потому что для того, чтобы человек мог ввести имя и адрес электронной почты, места на текущей странице недостаточно. Более того, я хотел, чтобы пользователь мог поделиться списком подарков с несколькими людьми и при этом сделал как можно меньше кликов.
*Примечание переводчика. Модальная страница закрывает часть области предыдущей страницы, оставляя её видимой, но утопленной в фоновом режиме
Типичный подход к предоставлению совместного доступа требует слишком много взаимодействий. После того, как пользователь вводит данные одного друга и нажимает кнопку, модальная страница закрывается. Ему приходится открывать её снова, чтобы ввести данные другого друга. Открывать и закрывать модальную страницу, чтобы поделиться списком подарков с каждым другом, — слишком трудозатратно.
Предоставление совместного доступа к списку подарков
Вместо этого лучше оставить модальную страницу открытой и позволить пользователю ввести информацию обо всех друзьях. После нажатия на кнопку «Отправить список подарков» («Send Gift List») под текстовыми полями появится визуальная обратная связь в виде сканируемого перечня друзей, которым человек отправил список подарков. Такой подход позволяет делиться списком подарков сразу с несколькими друзьями без необходимости повторять одни и те же действия несколько раз.
Кроме того, пользователи могут скопировать ссылку на список подарков и отправить её друзьям. Она находится на модальной странице. После нажатия на кнопку «Копировать ссылку» («Copy Link») она сохранится в буфер обмена, откуда её можно вставить в электронное письмо или текстовое сообщение.
Друзья выбирают подарки
Как только друзья пользователя получат список подарков, они смогут посмотреть его и выбрать то, что они хотят получить. Кроме того, они могут выбрать размер вещи, предназначенной в подарок. После того, как они сделают выбор, пользователь получит уведомление в виде индикатора активности на панели вкладок. На иконке подарка появится цифра, которая будет показывать количество друзей, которые уже сделали выбор.
Когда пользователь увидит индикатор активности на панели вкладок, он перейдёт во вкладку «Список подарков», где увидит выбранные его друзьями вещи, а также их размеры. Рядом с каждым выбранным подарком есть кнопка «Купить» («Buy»), чтобы пользователь мог купить подарок, когда будет готов это сделать. Он всегда может вернуться к списку всех подарков («List»), если нажмёт на сегментный переключатель в верхней части («List» — список всех подарков/«Picks» — список подарков, которые его друзья уже выбрали).
Выбранные друзьями подарки
Перспективы развития
В дальнейшем функцию списка подарков можно расширить. Например, дать возможность друзьям выбрать несколько подарков и ранжировать их в порядке приоритетности. В случаях, когда выбранного товара не будет в наличии или его раскупят, пользователь сможет купить другой понравившийся его другу подарок, выбрав из трёх предложенных. Это усложнит интерфейс, но позволит друзьям получать именно те подарки, которые им действительно нравятся.
Посмотрите все экраны
Функция списка подарков поможет увеличить продажи и доходы, поскольку она значительно упрощает покупку подарков к празднику. Пользователи часто бросают корзины, когда не уверены в том, что хотят совершить покупку. Получение информации от друзей и родственников о том, какие подарки они хотят, придаст человеку уверенности и мотивирует его совершить покупку.
Недостатком этой функции будет тот факт, что подарки для тех, кто их выбрал, не будут сюрпризом, когда наступят праздники. Именно неожиданность делает процесс дарения приятным. Однако лучше остаться без сюрприза, чем получить ненужный подарок. Это компромисс, и не стоит жаловаться, если ваши друзья и родственники счастливы, потому что получили в подарок именно то, что хотели.
Перевод статьи The Design Process for a New Ecommerce Feature из блога UX Movement
В нашем Телеграм-канале UX Teddy публикуем так же переводы практических статей из блога UX Movement про проектирование сложных интерфейсов, форм и страниц — подписывайтесь!
- Источник:
- UX Movement Newsletter
