UX, веб-дизайн, интерфейс
Юзабилити

UX ресторанных сайтов: обзор и “послевкусие”

Меню, как это хорошо известно рестораторам, является едва ли не главной составляющей любого заведения общепита.

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

Этот нюанс в особенности актуален для ресторанов из «Красного гида Мишлен». Ведь если клиент вознамерился заказать дорогостоящее блюдо, он, конечно же, хочет заранее быть уверенным в том, что оно того стоит.

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

McDonald’s

Гигант фастфуд-индустрии инвестирует значительные средства в онлайн-среду, поэтому в отношении UX у сайта McDonald’s все должно быть в порядке.

UX, веб-дизайн, интерфейс

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

Меню, как это хорошо известно рестораторам, является едва ли не главной составляющей любого заведения общепита. А такую опцию, как предварительный просмотр меню, можно рассматривать как один из шагов потребителя на пути к оформлению заказа. Этот нюанс в особенности актуален для ресторанов из «Красного гида Мишлен». Ведь если клиент вознамерился заказать дорогостоящее блюдо, он, конечно же, хочет заранее быть уверенным в том, что оно того стоит. Нижеописанную подборку сайтов пятизвездочных отелей и гигантских франшиз можно назвать уютным уголком интернета. Все эти примеры вкусной электронной коммерции не оценивались согласно какому-либо определённому критерию. Просто возникла идея провести исследование на предмет того, какие сайты могут разочаровать клиентов, а какие наоборот – оставить положительное впечатление. McDonald's Гигант фастфуд-индустрии инвестирует значительные средства в онлайн-среду, поэтому в отношении UX у сайта McDonald’s все должно быть в порядке. РИС 1 Несмотря на то, что большую часть главной страницы занимает видеосюжет, навигация в меню выглядит достаточно продуманно. Выпадающий список позволяет отфильтровать продукцию по категориям. А при наведении курсора на изображение элемента всплывает информация о пищевой ценности. РИС 2 На сайте реализован любопытный механизм meal-builder. РИС 3 (Но вот подобных блюд, – пищевая ценность которых доходит до 2 000 калорий, – лучше, конечно же, избегать). Такие решения содержат в себе ответы на часто задаваемые пользователями вопросы. И в последнее время представители американской корпорации предпринимают активные попытки убедить общественность в том, что McDonald’s заботится о здоровье своих клиентов. Wimpy Следующий в этом списке – Wimpy, британский эквивалент McDonald’s. РИС 4 Меню располагается в верхней части страницы. CTA-элементы – внизу. Достаточно странно, что на сайте присутствует два списка меню. РИС 5 РИС 5.1 В них содержатся подразделы с подобной информацией, которая одинаково важна для клиентов. Поэтому списки целесообразней было бы объединить. РИС 6 Что же касается страниц со сведениями о питательности продукции, то можно отметить достаточно аккуратное анимированное меню. Всплывающие элементы сообщают информацию о каждом продукте, но размещаются они на довольно неудобных URL: http://196.28.37.21/nutriuk/. К тому же ни одна из ссылок не работает на мобильном устройстве. Такой момент не в пользу франшиз, представительства которых размещаются чуть ли не возле каждой автострады. РИС 7 Прекрасный дизайн меню. Интерфейс по типу Issuu позволяет вручную просматривать страницы меню. Но на мобильном устройстве он недоступен. И, в общем, это едва ли самый подходящий способ ознакомить пользователей с нужной информацией. Все выглядит несколько тяжеловесно. Разработчики не предусмотрели возможность открытия сайта на мобильном устройстве. Путь от просмотра до фактической покупки не всегда понятен. Найти отдельные страницы довольно непросто. Дизайн несколько устаревший. Но, как бы то ни было, из всего этого вырисовывается весьма любопытный способ передать ощущение физического пребывания в ресторане. Wahaca Заведения сети ресторанов мексиканской кухни из Лондона набирают популярность. Поэтому весьма любопытно было узнать, как обстоят дела у этой компании в интернете. У сайта Wahaca занятный, на манер Tumblr, дизайн страниц, где много чего можно найти. Присутствие многочисленных элементов веб-дизайна не делает меню менее заметным. РИС 8 На экране мобильного устройства сайт отображается даже лучше. Разбавленное фотографиями меню размещено по центру экрана, но вот что касается переходов по ссылкам – здесь не все безупречно. Версия для десктопа не детализирована излишне. Всплывающие списки сгруппированы по переменам блюд, присутствуют ссылки на заведения со специальными предложениями. В то время, как меню у мобильного сайта – обычный PDF-файл на отдельной странице. РИС 9 Функция масштабирования довольно неудобная, на загрузку уходит некоторое время. В числе положительных моментов можно отметить «меню на вынос», которое выглядит более осмысленно. Но и эта опция не идеальна, в частности, подводит, когда нужно быстро заказать ланч. Olive Garden Olive Garden применяет слишком уж локальный подход. Инструмент поиска указывает на заведение компании в том городе, где находится пользователь. Чтобы определить местонахождение ресторана в искомом населенном пункте нужно вписать его название, область (штат) или индекс. РИС 10 После обнаружения ресторана происходит перенаправление на откровенно незамысловатое меню с понятными кнопками для заказа в режиме-онлайн. Говорить о каком-либо упорядоченном расположении не приходится, продукция размещена произвольно, нет разделения по переменам блюд. РИС 11 Излишнее множество элементов навигации по типу «меню-гамбургер» может привести клиентов в замешательство: РИС 12 После клика по кнопке оформления заказа на экране всплывают окна с предложением пройти регистрацию, чтобы получить возможности, доступные зарегистрированным пользователям. РИС 13 Регистрация, понятное дело, выгодна ресторанам, но порой решение что-либо заказать в Olive Garden принимается в последнюю минуту, например, по дороге с работы домой, и это не совсем подходящая ситуация для заполнения длинных онлайн-формуляров. Honest Burger В сравнении с другими, компании Honest Burger удалось подняться чуть выше по бутербродной лестнице. Главная страница сайта достаточно чистая, не содержит излишних подробностей, заметные и понятные ссылки размещаются в верху страницы. РИС 14 После нескольких кликов по ссылкам не наблюдается ухудшение уровня веб-дизайна; простой план меню со специальным блюдом месяца регулярно обновляется. РИС 15 Это меню может быть открыто в более удобном формате для чтения. РИС 16 Но на мобильном устройстве все не настолько хорошо. Слишком мелкий шрифт, не вполне подходящий для комфортного чтения. Всплывающие окна со сведениями об аллергенах, с детским меню, открываются в отдельных PDF-файлах. РИС 17 , 17.1, 17.2 Функция масштабирования pinch-and-zoom в большинстве случаев реализована не надлежащим образом. Открытие новых вкладок замедляет процесс выбора блюд. Контактная информация предоставляется по каждому заведению общепита, но карта крайне неудобная – вне зависимости от размера электронного устройства. В будущем, по мере расширения бизнеса, этот нюанс может стать для Honest Burger существенной проблемой. РИС 18 Информация представлена достаточно разборчиво. Но, скорее всего, разработчикам сайта следовало бы больше подумать над тем, где и зачем пользователи будут просматривать эти сведения. Simpsons on The Strand Чтобы попасть на сайт необходимо кликнуть по нескольким ссылкам на основном веб-сайте Savoy. РИС 19 Похоже, что в сообществе рестораторов существует некий негласный запрет на использование вразумительных ссылок. Даже слово «меню» отсутствует. Это обидное упущение, поскольку меню на сайте (когда его все-таки удалось найти) оказалось весьма удобным: цены четко прописаны, отсутствует излишняя вычурность. Возможно, о таком дизайне не скажешь, что он как бы находится на острие технологического прогресса, но в данном случае этого и не требуется. Как итог, следует вывод, что не стоит слишком усложнять то, что можно сделать проще. Le Bernardin Чистый дизайн сайта Bernardin согласуется с элегантностью блюд, но, опять же, отсутствует ссылка «меню», что вынуждает посетителей гадать, нажимая кнопку «dining room». РИС 20 Нет «меню» – только список нескольких перемен блюд. И хотя такой подход передает ощущение эксклюзивности, с точки зрения поисковой оптимизации это ошибка. Ведь такой запрос, как «обеденные залы», в Google вписывают, как правило, с тем чтобы приобрести столовый гарнитур. Дизайн меню, когда оно все-таки обнаруживается, смотрится некомпактно. РИС 21 Нет ничего предосудительного в том, чтобы петь хвалебные песни выдающимся поварам, но почему бы не предоставить посетителям исчерпывающую информацию относительно стоимости? Такой подход, мол, «если вы спрашиваете, значит, не можете себе позволить», выглядит снобистским и отпугивает клиентов, которые, возможно, хотели бы заказать столик в дорогом ресторане, чтобы отпраздновать какое-то особенное событие. Улучшения и передовой опыт Вместе с тем, цена не является показателем качества веб-дизайна в ресторанной индустрии. Компании из сегмента фастфуда применяют более продуманные методики, нежели так называемые рестораны высокой кухни. Но тем не менее многие аспекты все еще требуют улучшений. Понятные сведения о цене, правильное расположение и мобильные устройства Сотрудникам некоторых компаний есть чему поучиться у онлайн-сервиса Deliverance, который, однако же, специализируется в несколько ином направлении. РИС 22 Удобный способ демонстрации меню. Блюда разделены в зависимости от принадлежности к конкретной кухне. Четкая информация о стоимости и доступности. Все выглядит прекрасно и на мобильных устройствах (хотя и не идеально – иногда возникали сложности с логином). РИС 23 Незамысловатый подход, в котором главная составляющая – информация. Из всего вышеперечисленного можно заключить, что представителям ресторанов следует перестать излишне заботиться о своей репутации и обратить пристальное внимание на локальные факторы поиска и UX. Поскольку без необходимых изменений крупные компании рискуют остаться в проигрыше, пытаясь конкурировать с бизнес-организациями меньшего масштаба.

На сайте реализован любопытный механизм meal-builder.

рис 3 mcdonalds

(Но вот подобных блюд, – пищевая ценность которых доходит до 2 000 калорий, – лучше, конечно же, избегать). Такие решения содержат в себе ответы на часто задаваемые пользователями вопросы. И в последнее время представители американской корпорации предпринимают активные попытки убедить общественность в том, что McDonald’s заботится о здоровье своих клиентов.

Wimpy

Следующий в этом списке – Wimpy, британский эквивалент McDonald’s.

UX, веб-дизайн, интерфейс

Меню располагается в верхней части страницы. CTA-элементы – внизу. Достаточно странно, что на сайте присутствует два списка меню.

UX, веб-дизайн, интерфейс

В них содержатся подразделы с подобной информацией, которая одинаково важна для клиентов. Поэтому списки целесообразней было бы объединить.

UX, веб-дизайн, интерфейс

Что же касается страниц со сведениями о питательности продукции, то можно отметить достаточно аккуратное анимированное меню. Всплывающие элементы сообщают информацию о каждом продукте, но размещаются они на довольно неудобных URL: http://196.28.37.21/nutriuk/. К тому же ни одна из ссылок не работает на мобильном устройстве. Такой момент не в пользу франшиз, представительства которых размещаются чуть ли не возле каждой автострады.

UX, веб-дизайн, интерфейс

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

Все выглядит несколько тяжеловесно. Разработчики не предусмотрели возможность открытия сайта на мобильном устройстве.

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

Wahaca

Заведения сети ресторанов мексиканской кухни из Лондона набирают популярность. Поэтому весьма любопытно было узнать, как обстоят дела у этой компании в интернете.

У сайта Wahaca занятный, на манер Tumblr, дизайн страниц, где много чего можно найти. Присутствие многочисленных элементов веб-дизайна не делает меню менее заметным.

UX, веб-дизайн, интерфейс

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

Версия для десктопа не детализирована излишне.

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

рис 9UX, веб-дизайн, интерфейс

Функция масштабирования довольно неудобная, на загрузку уходит некоторое время. В числе положительных моментов можно отметить «меню на вынос», которое выглядит более осмысленно. Но и эта опция не идеальна, в частности, подводит, когда нужно быстро заказать ланч.

Olive Garden

Olive Garden применяет слишком уж локальный подход.

Инструмент поиска указывает на заведение компании в том городе, где находится пользователь.

Чтобы определить местонахождение ресторана в искомом населенном пункте нужно вписать его название, область (штат) или индекс.

UX, веб-дизайн, интерфейс

После обнаружения ресторана происходит перенаправление на откровенно незамысловатое меню с понятными кнопками для заказа в режиме-онлайн.

Говорить о каком-либо упорядоченном расположении не приходится, продукция размещена произвольно, нет разделения по переменам блюд.

UX, веб-дизайн, интерфейс

Излишнее множество элементов навигации по типу «меню-гамбургер» может привести клиентов в замешательство:

UX, веб-дизайн, интерфейс

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

UX, веб-дизайн, интерфейс

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

Honest Burger

В сравнении с другими, компании Honest Burger удалось подняться чуть выше по бутербродной лестнице. Главная страница сайта достаточно чистая, не содержит излишних подробностей, заметные и понятные ссылки размещаются в верху страницы.

UX, веб-дизайн, интерфейс

После нескольких кликов по ссылкам не наблюдается ухудшение уровня веб-дизайна; простой план меню со специальным блюдом месяца регулярно обновляется.

UX, веб-дизайн, интерфейс

Это меню может быть открыто в более удобном формате для чтения.

UX, веб-дизайн, интерфейс

Но на мобильном устройстве все не настолько хорошо. Слишком мелкий шрифт, не вполне подходящий для комфортного чтения. Всплывающие окна со сведениями об аллергенах, с детским меню, открываются в отдельных PDF-файлах.

UX, веб-дизайн, интерфейс

UX, веб-дизайн, интерфейс

Функция масштабирования pinch-and-zoom в большинстве случаев реализована не надлежащим образом. Открытие новых вкладок замедляет процесс выбора блюд.

Контактная информация предоставляется по каждому заведению общепита, но карта крайне неудобная – вне зависимости от размера электронного устройства. В будущем, по мере расширения бизнеса, этот нюанс может стать для Honest Burger существенной проблемой.

UX, веб-дизайн, интерфейс

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

Simpsons on The Strand

Чтобы попасть на сайт необходимо кликнуть по нескольким ссылкам на основном веб-сайте Savoy.

UX, веб-дизайн, интерфейс

Похоже, что в сообществе рестораторов существует некий негласный запрет на использование вразумительных ссылок. Даже слово «меню» отсутствует. Это обидное упущение, поскольку меню на сайте (когда его все-таки удалось найти) оказалось весьма удобным: цены четко прописаны, отсутствует излишняя вычурность.

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

Как итог, следует вывод, что не стоит слишком усложнять то, что можно сделать проще.

Le Bernardin

Чистый дизайн сайта Bernardin согласуется с элегантностью блюд, но, опять же, отсутствует ссылка «меню», что вынуждает посетителей гадать, нажимая кнопку «dining room».

UX, веб-дизайн, интерфейс

Нет «меню» – только список нескольких перемен блюд. И хотя такой подход передает ощущение эксклюзивности, с точки зрения поисковой оптимизации это ошибка. Ведь такой запрос, как «обеденные залы», в Google вписывают, как правило, с тем чтобы приобрести столовый гарнитур. Дизайн меню, когда оно все-таки обнаруживается, смотрится некомпактно.

UX, веб-дизайн, интерфейс

Нет ничего предосудительного в том, чтобы петь хвалебные песни выдающимся поварам, но почему бы не предоставить посетителям исчерпывающую информацию относительно стоимости?

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

Улучшения и передовой опыт

Вместе с тем, цена не является показателем качества веб-дизайна в ресторанной индустрии.

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

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

Сотрудникам некоторых компаний есть чему поучиться у онлайн-сервиса Deliverance, который, однако же, специализируется в несколько ином направлении.

UX, веб-дизайн, интерфейс

 

Удобный способ демонстрации меню. Блюда разделены в зависимости от принадлежности к конкретной кухне. Четкая информация о стоимости и доступности. Все выглядит прекрасно и на мобильных устройствах (хотя и не идеально – иногда возникали сложности с логином).

UX, веб-дизайн, интерфейс

Незамысловатый подход, в котором главная составляющая – информация.

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

Реакция на статью
поделюсь
0%
интересно
0%
полезно
0%
не уверен
0%
скучно
0%
где автор?
0%
Комментарии
Оставить отзыв

You must log in to post a comment