Государство авиакомпании сайты 2015: Уроки

В этой статье, мы начинаем изучать различные отрасли и изучить текущее состояние переднего плана, UX и performanceотносительно сложные сайты.Сначала это авиакомпания веб-сайтов.Некоторые разделы статьи были написаны редакции.We’D рады услышать ваши рейсы бронировании опыт в комментариях к этой статье!- Ред .

От моего дома в Фениксе, штат Аризона, весь мир находится всего в нескольких кликов мышкой.Я забронировал билеты на рейсы в Сент-Луисе, Сан-Франциско, Гонолулу, Нью-Йорке, Лондоне, Мельбурне, Энтеббе и за ее пределами.Иногда я приземлиться в одном месте, путешествовать вокруг и выйти из другой.Иногда я перейти или отменить рейс, а иногда и погода делает это для меня.Несмотря на это, я всегда туда, где я хочу пойти, и фантастический технологии на месте, чтобы помочь мне каждый шаг на этом пути .

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

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

Link

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

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

Ограничение Наша сфера Link

Очевидно, что глубокое погружение в 15 веб-сайтов слишком много, чтобы покрыть в один пост.Таким образом, мы будем ограничиватьсебе определенных областях: Главная каждого веб-сайта планировка, процесс бронирования и performance,Это даст нам хорошее введение в как сайт каждой авиакомпании функционирует.Также обратите внимание, что большинство из этих сайтов есть несколько локализованных версий.Ради здравомыслия, мы будем придерживаться английской версии .

Ярмарка предупреждение: Объективность является удивительным, но любая конструкция критика вы когда-либо читал переполнен субъективных наблюдений.Этот ничем не отличается.Это, как говорится, я приветствую дружественный несогласие и обсуждение .

Главная страница Link

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

Цели проектирования Link

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

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

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

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

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

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

screenshot18
( Просмотр большой version __28 | 19 )

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

screenshot22
( Просмотр большой version __69 | 23 )

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

screenshot26
( Просмотр большой version 27 )

Наконец, Delta28, Дева America5129и Ryanair30все попадают в середине диапазона.Все они имеют много информации, вариантах и ​​белого пространства на главной странице, в то время как свести к минимуму прокрутки, необходимой для пройти через все это.Напротив, минималистичным дизайном по SWISS683113и Норвежский Airlines713211, кажется, как привлекательным, как те, с тяжелой образов .

Screenshot33
( Просмотр большой version __87 | 34 )

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

Screenshot35
SWISS, норвежский Airlines и RyanAir, кажется, есть самые простые конструкции.( Просмотр большой version 36 )

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

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

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

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

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

screenshot37
( Просмотр большой version __50 | 38 )

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

screenshot39
( Просмотр большой version 40 )

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

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

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

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

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

screenshot47
( Просмотр большой version __20 | 48 )

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

screenshot49
( Просмотр большой version __39 | 50 )

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

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

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

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

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

.

screenshot52
( Просмотр большой version __22 | 53 )

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

screenshot54
( Просмотр большой version __41 | 55 )

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

screenshot56
( Просмотр большой version __62 | 57 )

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

screenshot58
( Просмотр большой version 59 )

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

screenshot60
( Просмотр большой version __31 | 61 )

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

screenshot62
( Просмотр большой version __50 | 63 )

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

screenshot79
( Просмотр большой version __53 | 80 )

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

screenshot81
( Просмотр большой version __72 | 82 )

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

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

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

screenshot83
( Просмотр большой version 84 )

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

screenshot85
( Просмотр большой version __36 | | 86__9 )

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

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

screenshot87
( Просмотр большой version 88)

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

screenshot89
( Просмотр большой version 90 )

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

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

screenshot91
( Просмотр большой version __39 | 92 )

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

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

?

screenshot93
( Просмотр большой version __62 | 94 )
screenshot95
(Просмотр большой version96)
screenshot97
( Просмотр большой version 98 )

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

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

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

Comments are closed.