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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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