{"id":13654,"url":"\/distributions\/13654\/click?bit=1&hash=7a7aa21667aefd656b6233efba962ecbef616dfd5ac100a493b4b5899b23ff1f","title":"\u041c\u044b \u043f\u043e\u043f\u0440\u043e\u0441\u0438\u043b\u0438 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u0435\u0439 \u043e\u0431\u044a\u044f\u0441\u043d\u0438\u0442\u044c, \u043a\u0442\u043e \u0442\u0430\u043a\u0438\u0435 \u00ab\u043a\u0440\u0435\u0430\u0442\u043e\u0440\u00bb \u0438 \u00ab\u043f\u0440\u043e\u0434\u0430\u043a\u0442\u00bb","buttonText":"\u0421\u043c\u043e\u0442\u0440\u0435\u0442\u044c","imageUuid":"32086418-934b-5de5-a4ef-6425a84c490a","isPaidAndBannersEnabled":false}
Владимир Кравчук

5 ошибок в UX/UI дизайне на примере терминала самообслуживания Макдональдс

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

Я веду свой канал о редактуре — @whereclient, где разбираю интерфейсы, говорю о работе с клиентами и провожу интересные тесты среди подписчиков. Эта статья была написана для объяснения подобного теста. Я показал меню Макдональдса и попросил выбрать, какие в нем есть проблемы. Получился такой результат:

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

Несостыковка размеров блюд

Фотография с терминала самообслуживания

Донат больше, чем чизкейк, а длина чизкейка одинакова длине печенья. В этот момент пользователь не может понять, какого размера десерт он получит. Начинает думать и представлять, кто же на самом деле больше/меньше кого.

Решение: сопоставить размеры десертов, как в реальной жизни

Размеры фотографий стали отображать реальный размер десертов

Небольшой размер фотографий

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

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

Решение: увеличиваем размеры фотографий, но не забываем про размеры самих блюд

Показывайте товар крупным планом, так он становится более привлекательным 

Название и цена

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

Решение: название переносим над фотографией, а цену оставляем внизу.

Теперь есть иерархия: сверху название, снизу цена. Ничего не перетягивает на себя внимание

Товар не в той категории

В разделе «Десерты к кофе» оказалась возможность добавить в заказ влажную салфетку. Почему именно там — непонятно.

Первое решение. В левое меню добавить еще одну категорию «Чистота» или как-то так. А внутри разместить не только салфетки, но и антисептик, перчатки и маски. Сейчас это может быть актуальным. Есть минус: у клиента становится больше пунктов меню, а значит он потратит больше времени на его изучение.

Лучшее решение. Добавить возможность приобрести салфетки в конце оформления заказа с подзаголовком «Пригодится после еды».

Теперь салфетки выглядят, как помощь в нужном месте

Быстрый заказ

Сделать заказ в терминале занимает больше времени, чем могло бы быть для опытного пользователя. Все почему: каждый раз для добавления продукта к заказу, нужно сначала нажать на него и только потом появится кнопка «Добавить в заказ». А я хочу сразу добавить еду в заказ, не читая описаний, составов или просчета калорийности.

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

Слева — донат еще не выбран, справа — выбран и есть возможность изменить количество

Результат

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

Эти решения легко перенести на ваш проект.

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

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

А с какими проблемами вы сталкивались из-за плохого UX/UI? Пишите в комментариях :)

0
Комментарии
Читать все 0 комментариев
null