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

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

Белое пространство против эффективности Link

При сравнении всех веб-сайтов, Турецкая Airlines⁷⁵¹⁶⁵это тот, который выделяется как большинство cluttered,Конструкция очень плотно сгустки все различные элементы, без учета большого дыхания комнате.В визуальной иерархии, вместо четкого пути, мы находим много равномерно взвешенных элементов, конкурирующих за наше внимание (занят фон не помогает).Вместо того, чтобы, естественно, найти логическую последовательность, мои глаза отказов вокруг, глядя на все отдельныемаленькие элементы пользовательского интерфейса.Это занимает совсем немного усилий, чтобы в полной мере изучить страницу .

Катар Airways⁷³¹⁷²(занимает первое место в мире) страдает от тех же проблем, но в меньшей степени.Его дизайн является немного более просторные, с разделами, которые немного более визуально отличается .

¹⁸

Достоинством этих конструкций является то, что они достаточно эффективны.Некоторые из других домашних страниц выглядеть и чувствовать себя намного чище, но дизайн занимает тонн больше места и требует Большое scrollingв результате.Например, Cathay Pacific²⁰“ы главная страница больше, чем Turkish Airlines и Qatar Airways” вместе взятые!Emirates⁷⁸²¹⁶не совсем так долго, как Cathay, но занимает второе место .

²²

Двигаясь вдоль, Lufthansa^7467248имеет один из самых привлекательных страниц визуально, с его большими, красивыми фотографиями, и это еще один длинный скроллер.По сравнению,Air New Zealand²⁵“с супер-короткие, а Singapore Airlines ‘находится где-то между 6 .__ |

²⁶

Наконец, Delta²⁸, Дева America⁵¹²⁹и Ryanair³⁰все попадают в середине диапазона.Все они имеют много информации, вариантах и ​​белого пространства на главной странице, в то время как свести к минимуму прокрутки, необходимой для пройти через все это.Напротив, минималистичным дизайном по SWISS⁶⁸³¹¹³и Норвежский Airlines⁷¹³²¹¹, кажется, как привлекательным, как те, с тяжелой образов .

³³

Эстетически, я не могу помочь, но чувствую, что самые привлекательные страницы здесь (Lufthansa, Cathay Pacific, и т.д.) взять длинный, чтобы прокрутить, к сожалению.Точно так же, как уже упоминалось, более короткие страницы, как правило, менее привлекательны .

³⁵

Дизайн о tradeoffs,Каждый, казалось бы, простое решение, как удаление или добавление пустого пространства, влияет на общий опыт.Конечно, мы don’знаю сайты авиакомпании побежал ли тесты / B на ли пользователи считают это простой в использовании сайт, но веб-сайты авиакомпании с более пробелами didчувствовать себя легче работать через.Всегда предсказать последствия, что ваши решения будут иметь на конечных пользователей, а затем проверить эти предположения после запуска .

Содействие Авиакомпания Качество противWanderlust Link

Еще один интересный компромисс я вижу в этих конструкций обращается прямо к двум целям, изложенным ранее:

• Передайте бренд и идентичность .
• Вдохновлять и воспитывать любопытных потенциальных путешественников, чтобы сделать покупку .

И образы и скопировать на этих сайтах, как правило, для решения только одну из этих целей одновременно.Ниже все три изображения, вытащил из Singapore Airlines и Lufthansa, в первую очередь способствовать авиакомпании themselves, А не конкретных направлений.Мы все знаем, что длительные перелеты могут быть невероятно неудобно, поэтому главная идея здесь в том, что эти авиакомпании имеют ваш комфорт в качестве первоочередной задачи.Кроме того, обратите внимание, что два из трех обещание дополнительный комфорт за счет более дорогой билет .

³⁷

Контраст технику здесь с одной выставлены на изображениях ниже.Здесь речь идет не о самой авиакомпании, но о том, что полет представляет —способ бежать в захватывающей и экзотической locations: Австралия, Канкун, Занзибар .

³⁹

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

Ползунки Везде Link

Почти каждый веб-сайт в нашем списке использует по крайней мере, одно изображение slider,Некоторые из них используют несколько.Singapore Airlines использует threeползунки на главной странице только (четыре, если считать небольшой вращающийся канал новостей).На самом деле, ползунки, кажется вполне логичным и привлекательным способом, чтобы соответствовать тонну содержания в небольшом пространстве.Однако, как выясняется, некоторые ложные предположения могут быть в игре здесь —а именно, что типичный пользователь будет обращать внимание на, ждать и / или взаимодействовать с помощью ползунка.Тем не менее, во многих случаях, ползунки действительно может стоить вам преобразования.Быстрый поиск исследований и дискуссий по ползунков показывает quite⁴¹bit⁴²of⁴³animosity⁴⁴к этому конкретному элементу интерфейса .

Обратите внимание на сильный язык в названиях этих статей.Некоторые дизайнеры не только отказ от ползунков, но злобно нападая на них, тоже.Это, как говорится, мы не можем предположить, что это чувство является универсальным.Просто потому, что некоторые люди обнаружили, что их собственные ползунки уменьшили преобразования не обязательно означает, что все ползунки на всех веб-сайтов плохо.Некоторые специалисты выступают UX не совсем убив ползунки, а для оптимизации их design⁴⁵длялучше results⁴⁶.

Один слайдер, который четко требует доработки в Дельта:

⁴⁷

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

⁴⁹

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

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

Вторичные задачи Link

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

Победителем в этой категорииДева America⁵¹²⁹,Вместо бомбардировать вас с миллионом вариантов, главная страница удивительно прост.Одним из первых пунктов на странице перегоняется почти все из основных задач для посетителей на три простых категорий: “Книга”, “Заезд” и “Управление”

.

⁵²

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

⁵⁴

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

⁵⁶

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

⁵⁸

К сожалению, не все сайты делают это так легко.Давайте посмотрим заголовок авиакомпании Lufthansa .

⁶⁰

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

⁶²

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

Это весьма маловероятно, что данные пользователя Lufthansa показывает, что это лучшее место для проверки в виджете.Или, может быть, это только где дизайнеры застряли, потому что он выглядел хорошо в макете.Тем не менее, проверка в, кажется, не быть приоритетными для пользователя, и если вы путешествуете с Lufthansa много, трудно определить.Можно себе представить, что многие путешественники, как только разочарованы, будет запрашивать “Lufthansa регистрация по прибытии” в поиск engineвместо —не хороший опыт .

Это справедливо повсюду: как дизайнеры,наша работа, это просто приоритеты важную actionsи отображать их заметно.Никогда не скрывать их за значок или кнопку.Сделайте их видимыми и легко доступными на рабочий стол, таблетки и мобильный телефон.Приоритетность потребностей пользователей, не company’S брендинга .

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

Каждый хочет быть лучше, чем их конкуренты, поэтому решать эти вопросы в лоб.Вы могли бы пойти так далеко, создание таблицы с наиболее важных задач и constraintsКак Вы могли бы добавить немного радости в опыте или уменьшить сложность?Если вы строите отзывчивый сайт, посмотрите на само содержание в чистом виде, рассмотреть ее и упаковать itчтобы наилучшим образом удовлетворить на вызовы различных форм-факторов .

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

Мобильная Опыт Link

Еще один важный аспект рейсов веб-сайтов мобильная стратегия.В этом наборе данных, мы имеем своего рода микрокосм того, как Интернет в целом обрабатывает мобильных пользователей в 2015 году: несколько веб-сайтов ушли полностью реагировать, даже более перенаправить пользователей на выделенном мобильный веб-сайт, и все еще другие не делают абсолютно ничего.К счастью, на момент написания только одной авиакомпании, Ryanair, оставляет мобильных пользователей полностью (в зависимости от IP-адреса пользователя, хотя — это, кажется, выкатывает новый отзывчивый сайт в настоящее время) .

Вот авиакомпании с responsiveсайт:

• Сингапур Airlines⁶⁴³
• Cathay Pacific Airways⁶⁵⁴
• Дева America⁶⁶⁷
• Lufthansa^7467248(вид-на-реагировать)
• SWISS⁶⁸³¹¹³
• KLM⁶⁹¹⁴
• Воздушный Astana⁷⁰¹⁵
• Норвежский Airlines⁷¹³²¹¹
• Ryanair⁷²⁹

Вот авиакомпании с выделенный mobileсайт:

• Катар Airways⁷³¹⁷²
• Lufthansa^7467248(который имеет как мобильный веб-сайт и отзывчивый сайт настольный)
• Турецкая Airlines⁷⁵¹⁶⁵
• Air New Zealand⁷⁶¹⁰
• Delta⁷⁷¹²
• Emirates⁷⁸²¹⁶

Летно-бронирования Процесс Link

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

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

Слишком много или слишком мало Link

Виджеты летные бронировании через домашних страниц резко различаются по сложности.Как правило, вы увидите что-то вроде виджета Singapore Airlines “:

⁷⁹

Как вы можете видеть, пользователь имеет хороший бит работы, чтобы сделать здесь.Они должны выбирать своих городов, типа полета, даты, гостиным класса и так далее, все с домашней страницы перед нажатием кнопки поиска.Теперь сравните это с виджет Богородицы:

⁸¹

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

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

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

⁸³

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

⁸⁵

Показали Сложность Link

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

⁸⁷

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

⁸⁹

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

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

⁹¹

Дата-Picker Дилеммы Link

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

?

⁹³

⁹⁵

⁹⁷

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

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

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров

Главная → Вебдизайн → 10.11.2015 by uxdesign.smashingmagazine.com