5 ошибок в UX/UI дизайне на примере терминала самообслуживания Макдональдс
На ваших сайтах и в приложениях могут быть такие же недочеты. Если их исправить, то пользователи быстрее разберутся с вашим продуктом и занесут денег, возможно больше, чем обычно.
Я веду свой канал о редактуре — @whereclient, где разбираю интерфейсы, говорю о работе с клиентами и провожу интересные тесты среди подписчиков. Эта статья была написана для объяснения подобного теста. Я показал меню Макдональдса и попросил выбрать, какие в нем есть проблемы. Получился такой результат:
Это выбор потенциальных клиентов. Они видят проблему: что-то их больше смущает, что-то меньше. Разбираемся по каждому пункту и находим решение.
Несостыковка размеров блюд
Донат больше, чем чизкейк, а длина чизкейка одинакова длине печенья. В этот момент пользователь не может понять, какого размера десерт он получит. Начинает думать и представлять, кто же на самом деле больше/меньше кого.
Решение: сопоставить размеры десертов, как в реальной жизни
Небольшой размер фотографий
Есть два типа людей, которые приходят в Мак: те, кому нужно быстро покушать, и те, кто хочет выбрать что-то новое и вкусное.
Для первых — абсолютно без разницы, какие будут фотографии. Они уже знают, что заказывать. А вторым — напротив, они готовы рассматривать и оценивать еду по качественным большим фотографиям.
Решение: увеличиваем размеры фотографий, но не забываем про размеры самих блюд
Название и цена
Попытка написать название и цену в две строчки оказалась ошибкой. Если название полностью вмещается в блок — выглядит более-менее, но когда оно меньше — появляются некрасивые дыры. Еще это путает пользователя: ему понадобится время, чтобы понять, где цена к какому блюду.
Решение: название переносим над фотографией, а цену оставляем внизу.
Товар не в той категории
В разделе «Десерты к кофе» оказалась возможность добавить в заказ влажную салфетку. Почему именно там — непонятно.
Первое решение. В левое меню добавить еще одну категорию «Чистота» или как-то так. А внутри разместить не только салфетки, но и антисептик, перчатки и маски. Сейчас это может быть актуальным. Есть минус: у клиента становится больше пунктов меню, а значит он потратит больше времени на его изучение.
Лучшее решение. Добавить возможность приобрести салфетки в конце оформления заказа с подзаголовком «Пригодится после еды».
Быстрый заказ
Сделать заказ в терминале занимает больше времени, чем могло бы быть для опытного пользователя. Все почему: каждый раз для добавления продукта к заказу, нужно сначала нажать на него и только потом появится кнопка «Добавить в заказ». А я хочу сразу добавить еду в заказ, не читая описаний, составов или просчета калорийности.
Решение: сделать кнопку с возможностью сразу добавить товар в заказ и выбрать его количество. Стрелки подсказывают, что можно зайти внутрь карточки и получить больше информации.
Результат
Изменили расположение текста, чтобы все смотрелось стильно без дыр и нависающих названий. Добавили функцию быстрого заказа, что ускорит оформление, и вынесли салфетки в понятное место для клиентов.
Эти решения легко перенести на ваш проект.
Например, у вас интернет-магазин по продаже лодок. Новички не так уделяют внимание фотографиям, им важно, чтобы она ехала быстро и смотрелась красиво. А профессионалы, которые готовятся к рыбалке или сплаву несколько месяцев, оценят фотографии в хорошем качестве, а еще лучше в формате 360°. По ним клиент поймет: поместится ли все оборудование, есть ли важные крепления или что нужно будет к такой лодке докупить.
О простой функции «Купить сейчас» тоже знают все, но не все ее применяют. Я часто захожу на сайт, чтобы купить один товар. Но мне усложняют жизнь регистрацией, а потом еще и подтверждением почты. Не надо так.
А с какими проблемами вы сталкивались из-за плохого UX/UI? Пишите в комментариях :)