Лучшие юзабилити сайты: 20+ сайтов с ужасным юзабилити – Plerdy

20+ сайтов с ужасным юзабилити – Plerdy

Мы любим комфорт во всем. Даже в серфинге по интернету. Только в отношении сайтов этот комфорт привычно называть иначе –  юзабилити.

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

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

Стоит сразу сказать, что вкусовщины в этом обзоре не будет. Мы не будем распределять места почета, не станем говорить о своих личных ощущениях.

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

Команда Plerdy подготовила для Вас новый бесплатный вебинар — «Юзабилити сайта на примере Google & Apple сайтов». Видеозапись Вы можете посмотреть в этом видео. Присоединяйтесь к тем, кто уже успел посмотреть этот вебинар.

В данный обзор вошли такие сайты:

• The Big Ugly Website
• Craigslist
• Blinkee.com
• The World’s Worst Websitе
• Lingscars
• Internet Archaeology
• Dom Perignon
• Yale University School
• Penny Juice of America
• Electrifying Times
• Headhunter Hairstyling
• Serene-Naturist
• Where2Eat. com
• Fusion
• TipTopService
• Arvanitakis
• Patimex
• University of Advancing Technology
• The Glove Club

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

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

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

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

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

Internet Archaeology

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

У именитой марки люксового шампанского также есть недостатки. Точнее, не у самой продукции, которая пользуется спросом не одно столетие, а у сайта, который промоутирует винтажные напитки Дом Периньон. Оформление у ресурса стильное, но главная страница рассказывает нам только о “лице” линейки бренда и креативном директоре компании – Ленни Кравитце. Чтобы посмотреть информацию о винтажных винах, нужно указать свой возраст и место проживания. Ошибка верстальщика заключается в создании формы, которая дает доступ к части содержимого сайта. Узнать о самой марке шампанского можно и без подтверждения возраста на сайте. Но маловероятно, что пользователь так усложнит свой путь, что после изучения информации о марке, вернется на главную страницу для заполнения обязательной формы с возрастом, оформляющей доступ к продукции.

University School

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

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

Electrifying Times

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

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

Летающие бабочки, синий текст на синем фоне, абсолютно не сочетающиеся между собой шрифтовые пары и бюст античной статуи. Сложно здесь увидеть связь с массажным центром, но создателям, конечно, виднее. Как не взгляни на оформление –  оно не только композиционно отталкивает, но и не поражает своим удобством. У сайта Гугла, к примеру, нет и не было как такового оформления. При этом страница поиска остается эталоном минимализма и удобства.

Where2Eat.com

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

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

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

Arvanitakis.com.

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

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

У этого сайта далеко не худший дизайн. Но в список он попал из-за своего юзабилити. Когда главная страничка грузится более 40 секунд – налицо явные технические проблемы, которые сказываются на пользовательском опыте. Большое количество анимации и фотографий в высоком разрешении, использование устаревших методов программирования – причина всех проблем сайта. При всем этом графическом великолепии, главная страница остается неинформативной для пользователя. Единственный плюс – наличие продуманного навигационного меню.

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

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

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

Лучшие сайты по usability на основе UX-дизайна

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

Для примера стоит рассмотреть лучшие сайты с юзабилити высокого уровня:

• Comparethemarket.com,
• Cheapflights Singapore.

Эти два сайта заметно выделяются в сравнении с аналогами. Для данного типа ресурсов важным условием успеха выступает простота UX и некоторые дополнительные показатели.

Cheapflights Singapore

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

Сингапурская версия Cheapflights

Cheapflights Singapore

Подсказки

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

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

Фильтры

Функционал сайта дополнен фильтрами, расположенными в верхней части страницы. Здесь можно выбрать самый быстрый рейс или с минимальной ценой. Есть фильтр smart value, предназначенный для поиска золотой середины: категория сопоставляет фильтры цены и скорости, а затем отображает оптимальные результаты. Лучшие рейсы в каждой из категорий отмечаются специальными логотипами для наглядности отображения списка.

Comparethemarket.com

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

Страховой сервис Comparethemarket.com

Comparethemarket.com

Строка прогресса

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

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

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

Вывод

Большинство особенностей UX-дизайна доступно для оформления веб-сайтов. Однако такое оформление не нашло практического применения в дизайне интернет-ресурсов.

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

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

10 лучших UX-сайтов 2022 года

Ознакомьтесь с рекомендациями и примерами лучших UX-сайтов. Представлено удостоенной наград WANDR Studio — лидера в области продуктовой стратегии и UX-дизайна.

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

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

Но что такое UX веб-сайта? Каковы лучшие практики UX?
Узнайте больше из нашего обзора 10 лучших веб-сайтов для пользователей.

Что такое UX веб-сайта?

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

Каковы лучшие практики UX? Разработка эффективного UX требует от дизайнеров поиска наиболее эффективных решений для удовлетворения потребностей конечного пользователя.

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

Если ваш сайт не соответствует вашим целям, WANDR МОЖЕТ проанализировать вашего типичного клиента и его путь пользователя по вашему сайту. Это называется UX-аудит. Прочитайте Аудиты UX и секреты более сильных и быстрых продаж или свяжитесь с нами по поводу наших услуг по номеру  Пользовательский опыт и аудит.

А пока ознакомьтесь с некоторыми из наших любимых UX-сайтов 2022 года.

Лучшие UX-сайты 2022 года

1. QuickBooks

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

Мы любим Quickbooks за то, что он работает на любом устройстве. Это означает, что пользователи имеют доступ к своим ключевым финансовым данным с настольного компьютера, ноутбука, смартфона или планшета.

Что еще более важно, в то время как он предлагает обширный список функций для компаний и частных лиц, он обеспечивает простой для навигации интерфейс . Эта простота — причина № 1, по которой Quickbooks является главным претендентом на лучшие UX-сайты.

2. Настенная роспись

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

• Они основаны на облаке. Его можно использовать где угодно, с любого устройства.
• Их штаб-квартиры находятся в Буэнос-Айресе и Сан-Франциско, но их команды разбросаны по всему миру. Они следуют поговорке «мы практикуем то, что проповедуем», работая удаленно.
• Тот же онбординг «Начало работы в MURAL», имеет значки, помогающие пользователю понять, где он находится. Эти значки будут направлять их на протяжении всего опыта.
• Всякий раз, когда вас приглашают поэкспериментировать с одной из функций платформы, появляется чистое окно с пошаговым объяснением в простой и понятной форме.

3. Airbnb

AirBnb — американская компания, занимающаяся онлайн-рынком, базирующаяся в Сан-Франциско, Калифорния, США. Они предлагают услуги по размещению, в основном в семье, или туристические мероприятия.

• Первое, что увидят пользователи при входе в сеть, это сообщение о политике отмены COVID-19, так как это основная «проблема», с которой пришлось столкнуться компании из-за текущей ситуации. В нем есть целый раздел, где пользователи могут получить самую свежую информацию о своем COVID-19. ответ, от обновлений политики до ресурсов для хостов и гостей.
• Браузер с основными действиями о том, как получить место для проживания и впечатления. Третья категория была добавлена ​​​​из-за COVID-19, что привело к изменению всей их стратегии, поскольку люди не путешествуют.

• Меню остается в заголовке (поскольку это самый важный CTA, который пользователь должен/может использовать на сайте), но оно отличается от исходного, чтобы придать большее значение разделу «Введение в онлайн-опыт».
• Предлагая впечатления, они играют с яркими изображениями, которые подчеркивают действия, которые совершают главные действующие лица.
• Они используют небольшое количество слов, так как изображения рассказывают нам все, что мы можем испытать, щелкнув их.

4. PayPal

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

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

5. Credit Karma

Credit Karma — американская многонациональная компания, занимающаяся личными финансами, основанная 8 марта 2007 года. ТрансЮнион).

24 февраля 2020 года Intuit объявила, что планирует приобрести Credit Karma за 7,1 миллиарда долларов.

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

Вот несколько вещей, которые нам нравятся в UX Credit Karma:

• Наглядная финансовая информационная панель разделена по категориям с соответствующей информацией о последних взаимодействиях и/или действиях, которые необходимо предпринять.
• У них есть индивидуальные предложения на основе предоставленной информации.
• Сравнительные кредитные рейтинги с визуальным и цветным обзором, сопровождаемые копией, позволяют пользователю сразу понять ситуацию.
• Четкое описание того, откуда была взята информация и используемая система, обеспечивает чувство безопасности и доверия для пользователя, который делится личной информацией с сайтом.

6. Rover

Один из лучших UX-сайтов – это сеть, которая помогает владельцам домашних животных общаться с нянями и выгульщиками. Rover обеспечивает невероятно простой в использовании интерфейс. Новые посетители могут быстро найти кого-то, кто поможет с их домашними животными в США или во всем мире.

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

7. Год Греты

Год Греты — это иллюстрированная хронология того, как Грета Тунберг прошла путь от одиночки до лидера глобального движения в 2019 году. Сайт создан агентством Superhero Cheesecake Agency в Амстердаме. Они использовали позу Греты с обложки журнала TIME в качестве прозрачного фонового изображения сайта, потому что «это был момент, который вызвал много эмоций».

Когда пользователь прокручивает страницу вниз, месяц меняется с января на декабрь, как если бы это была временная шкала. Здесь нет слов — только анимации и видео, которые подсвечиваются, когда пользователь проходит мимо них.

Цель сайта — информировать пользователей о жизни Греты в 2019 году. Ничего больше, ничего больше. Он достигает этой цели, поскольку разработан таким образом, что рассказывает историю, выделяя важные моменты чьей-то жизни.

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

Наконец, появляется последнее сообщение, если пользователь хочет узнать о ней больше. Это четкий призыв к действию, демонстрирующий отличный UX. Сайт представляет собой лаконичный, простой и интерактивный способ показать чью-то жизнь.

8. Notion

Notion Labs Inc. – стартап из Сан-Франциско, основанный в 2016 году. Это инструмент, который объединяет ваши повседневные рабочие приложения в одно. Пользователи могут получить доступ к удобному способу писать, планировать, сотрудничать и организовывать — все в одном инструменте.

Notion — это рабочее пространство, платформа для совместной работы и платформа с поддержкой уценки, которая объединяет доски канбан, задачи, вики и базы данных. Он доступен на настольных компьютерах, ноутбуках и мобильных устройствах: iOS и Android.

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

Вот что я хочу отметить в отношении UX их веб-сайта:

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

9. Google Store

Как и большинство лучших UX-сайтов, Google Store имеет минималистичный дизайн, что упрощает пользователям поиск нужных вариантов. Однако главная причина, по которой Google Store фигурирует в списке лучших веб-сайтов для пользователей, — это скорость работы сайта.

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

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

10. Duolingo

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

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

Какие, по вашему мнению, лучшие UX-сайты 2022 года?

Дайте нам знать в комментариях ниже.

Цели продукта? Давайте сделаем это. Закажите бесплатный консультационный звонок с нашей командой здесь.

Свяжитесь с нами по  LinkedIn , Instagram , Facebook или Twitter .

8 лучших примеров дизайна пользовательского интерфейса веб-сайта [2023]

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

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

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

В этой статье я рассмотрю вопрос о том, что делает пользовательский интерфейс хорошим — с небольшой помощью Nielsen Norman Group — прежде чем погрузиться в восемь примеров отличного дизайна пользовательского интерфейса веб-сайта и обосновать свой выбор. Выберите пример из интерактивного меню, чтобы сразу перейти к нему, или просто читайте дальше.

1. Medium
2. Virgin America
3. Airbnb
4. Boosted Boards
5. Dropbox
6. Pitch
7. Frank and Oak
8. Semplice Labs

Итак, если вам интересно, как оценить, хорош ли пользовательский интерфейс — или даже хорош — , как вы решаете? Я имею в виду, что вы можете определить, находите ли вы пользовательский интерфейс визуально привлекательным, и вы, конечно, можете использовать интерфейс, чтобы убедиться, что он интуитивно понятен и прост. А есть ли что-нибудь более объективное? Более формализовано?

Как узнать, хорош ли дизайн пользовательского интерфейса веб-сайта?

Лично я всегда ссылаюсь на характеристики юзабилити, определенные исследовательской компанией Nielsen Norman Group.

Nielsen определяет Юзабилити с помощью следующих пяти характеристик; обучаемость, эффективность, запоминаемость, ошибки и удовлетворенность.

• Обучаемость: Может ли пользователь выполнять свои задачи без особых трудностей?
• Эффективность: Позволяет ли интерфейс пользователю своевременно выполнять задачи?
• Запоминаемость: Насколько вероятно, что после ухода с веб-сайта пользователь сможет вспомнить, как им пользоваться при следующем посещении?
• Ошибки: Какие шаги предпринимает интерфейс, чтобы уменьшить вероятность ошибки пользователя, и как они позволяют пользователям исправить ошибку?
• Удовлетворенность: Нравится ли пользователю взаимодействие с дизайном?

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

1. Medium

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

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

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

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

2. Virgin America

Потерпите меня в этом. Лишь на мгновение.

Когда дело доходит до помощи пользователям в завершении процесса бронирования рейса, Virgin America была одной из первых, если не сначала — чтобы поставить интересы пользователя на первое место и в центр. Для большинства бронирование авиабилетов является рутиной.

Подобно тому, как посудомоечная машина избавляет нас от необходимости мыть посуду, сайт Virgin America упростил свой интерфейс, чтобы привлечь внимание к самому важному вопросу: «Куда бы вы хотели пойти?» Удалив весь окружающий контент, пользователь мог сразу начать процесс бронирования.

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

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

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

Источник: Work & Co

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

3. Airbnb

Дизайн пользовательского интерфейса веб-сайта Airbnb очень хорошо решает две задачи: бронирование места для проживания и установление доверительных отношений между двумя совершенно незнакомыми людьми.

Airbnb, как и Virgin America, уделяет первоочередное внимание упрощению процесса бронирования проживания прямо с главного экрана.

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

Это диалоговое приглашение начать поиск — восхитительный способ представить голос бренда, а также упростить процесс поиска жилья.

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

Страницы со списком заполнены описанием любых дополнительных сборов, которые могут быть включены. Это очень простой и легкий процесс для любого пользователя. Кнопка «Запросить бронирование» находится прямо под ней и, будучи одной из самых ярких кнопок на странице, предлагает пользователям щелкнуть ее, чтобы завершить свое пребывание.

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

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

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

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

4. Boosted Boards

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

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

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

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

Кроме того, вы получите краткое изложение наиболее важной информации вместе со спецификациями. И, конечно же, ключевое «Добавить в корзину». Что тебя останавливает? Очень мало.

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

5. Dropbox

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

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

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

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

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

6. Pitch

Pitch, мобильное и веб-приложение, которое помогает вам создавать красивые презентации и управлять ими, в значительной степени является технологической компанией, ориентированной на дизайн. Они хотят убедить вас, что могут сделать для презентаций то же, что Slack сделал для коммуникаций. И они неплохо с этим справляются.

До свидания Powerpoint, привет Питч.

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

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

Их сайт отдает дань последним тенденциям в дизайне благодаря всестороннему использованию иллюстраций, но он отличается от плоского, мультяшного дизайна персонажей, который вы видите на многих сайтах в настоящее время. Использование 3D-дизайна персонажей в стиле Pixar необычно для этого пространства, и поэтому его можно сразу идентифицировать — если я покажу вам раздачу Pitch завтра, вы гарантированно вспомните компанию.

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

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

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

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

Старая поговорка о том, что меньше, значит больше , очень часто верна для пользовательского интерфейса. Другие приложения, которые разработали фантастические возможности целевой страницы, включают Blinkist и Slack. Приложение для чтения Blinkist получило награды за дизайн продукта. А хороший дизайн явно заложен в ДНК компании.

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

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

7. Frank and Oak

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

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

Несмотря на смелые маркетинговые сообщения, ориентированные на продажи — Присоединяйтесь к Frank Rewards и зарабатывайте 1 балл за каждый потраченный доллар — имидж их бренда прочно закреплен с самого первого контакта с компанией. Прохладный, чистый, близкий и личный.

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

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

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

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

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

В общем, многое из лежащего в основе пользовательского интерфейса — и, конечно же, UX — Фрэнка и Оука можно увидеть на многих других веб-сайтах, но именно так они переплели очень логичный, интуитивно понятный пользовательский путь, смелый, эффектный и чистый пользовательский интерфейс, а также привлекательный образ бренда и сообщения, которые действительно выделяют его.

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

8. Semplice Labs

Один из моих любимых примеров великолепного и функционального пользовательского интерфейса можно найти в Semplice Labs, портфолио WordPress, созданном суперзвездным дизайнером Тобиасом Ван Шнайдером, который разработал для Spotify, BMW, Google и даже NASA. . Достаточно сказать, что он знает, что делает.

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

Заключение

Это лишь несколько моих любимых примеров хорошего дизайна пользовательского интерфейса веб-сайта.