Обманувшись в собственных ожиданиях, я пришёл к выводу о мнимости "красоты" оформления многих веб-сайтов этой тематики вследствие имеющихся у них проблем с типографской разметкой, доступностью и удобством для пользователей. Говоря без обиняков,
Но не будем выискивать в наших примерах исключительно плохое. Скажем и о хорошем, кстати, подборка удачных образцов придала бы статье законченность (и даже позабавила бы тех наших посетителей, кто не читает, а только рассматривает картинки).
Мучительная процедура проверки возраста
Общая почти для всех сайтов, просмотренных мной в процессе подготовки статьи, особенность состоит в том, что доступ к содержимому страницы открывается лишь после того, как пользователь подтвердит дату своего рождения. Потребление алкоголя, конечно, является весьма проблемной темой, и разумные меры предосторожности, действительно, нужны для предотвращения спаивания малолетних владельцами этих веб-сайтов. Так что, обычно на сайте размещается форма "определения даты", в соответствующем поле которого посетитель вводит дату своего рождения (месяц, день и год), наподобие приведённого ниже в качестве примера сайта Corona:
Следование букве закона? Или пустая трата времени?
Поскольку такая доверчивость при проведении проверки исключает достоверность данных о реальном возрасте пользователя, почему бы не упростить эту процедуру? Как вы заметили, страница входа на веб-сайт Corona также содержит запрос сведений о стране проживания пользователя, ещё более усложняя процесс открытия ресурса. Только не поймите меня неправильно; я не призываю администраторов веб-сайтов алкогольной тематики отказаться от форм подтверждения возраста. В большинстве стран они, видимо, по закону обязаны добавлять их на свои ресурсы. Я лишь предлагаю им упростить прохождение посетителями этой процедуры.
Во-первых, если вам интересно, откуда родом пользователи вашего веб-сайта, применяйте Google Analytics (или любое подобное средство), либо отслеживайте их IP-адреса. Не отнимайте у людей время, задавая им вопрос, на который они вполне могут дать вам лживый ответ. Я очень надеюсь, что владельцы этих веб-сайтов не полагаются на статистику, полученную таким путём, при проведении серьёзных исследований их потребительской аудитории.
Гораздо важнее другое - раз пользователь может ввести любую дату своего рождения, а полная блокировка посетителя за введение некорректной даты не предусмотрена, почему бы просто не установить механизм, который задавал бы прямой вопрос, достиг ли человек возраста, с которого разрешено употребление спиртных напитков в его стране? Количество сайтов, на которые трудно попасть, даже удивляет. Ниже приведены два довольно редких примера входных страниц, удобных для пользователя:
Christiania Vodka
JETT VODKA
Как минимум, выясняя возраст посетителей, можно, ведь, ограничиться годом их рождения? Согласен, бывает, что право человека посещать подобные сайты зависит от точной даты рождения, от того, исполнилось ли ему уже достаточно лет, но давайте не обманывать себя, — этим никого не остановишь. К тому же, веб-сайтом не напьёшься. Так что, придерживайтесь простых решений и покажите, наконец, людям, что у вас есть.
Собирая материал для статьи, я поинтересовался наличием в Канаде или США законов, обязывающих владельцев сайтов создавать такие "дутые" пропускные страницы. В канадской компании Labatt Breweries мне сообщили, что применение окна подтверждения возраста законом не оговорено, но запрос даты рождения пользователя выполняется, исходя из принципов политики компании. Ладно, по крайней мере, честно. Я спросил, почему они предпочли более сложное решение простому, пример которого приведён выше. Дама, с которой я разговаривал, вновь подчеркнула, что точную дату рождения пользователи должны вводить потому, что такова политика компании. По её мнению, большинство других компаний руководствуются теми же соображениями. Я также обратился в Anheuser-Busch, но не получил ответа.
Возможно, владельцы сайтов стараются оградить себя от риска судебного преследования (что бы там ни говорил закон), считая сложность процедуры допуска на сайт обстоятельством в свою пользу. Но, зная, что форма подтверждения возраста никого не останавливает, скорее можно предположить, что этим сайтам попросту не хватает желания учитывать интересы пользователей, что они предпочитают обходиться ставшими дурной привычкой устаревшими решениями из далёкого прошлого веб-дизайна. К тому же, некоторые сайты, всё-таки, применяют упрощённый вариант окна подтверждения возраста (см. выше), значит, в его чрезмерной сложности нет абсолютно никакой необходимости. Если люди, занятые разработкой веб-сайтов алкогольной тематики, захотят дать пояснения по этому вопросу в разделе комментариев, я внесу в публикацию любые оправданные изменения.
Ненужные сложности
Некоторые формы подтверждения возраста слишком сложны для заполнения безо всякой видимой причины и, уж точно, без законных на то оснований. Например, входная страница Budweiser:
Выбрав месяц и день своего рождения, вы переходите к колонке, в которой годы сгруппированы по десяткам, цифры начала каждого десятилетия служат для открытия своего блока. Чтобы найти нужный год, вам следует навести курсор на определённый блок, а затем медленно сдвигать его, пока не появится ваше число. Жуткое неудобство!
Веб-сайт Samuel Adams переходит грань абсурда, контролируя доступ посетителей к своему содержимому. Сначала открывается это окно:
Далее, после ввода вами даты своего рождения, вам сообщают, что вы "зарегистрировались" (что, формально, не соответствует действительности и, в принципе, может вводить людей в заблуждение), а теперь вам нужно повторно ввести дату рождения:
Можно смело утверждать, что создатели веб-сайта Samuel Adams превратили свою входную страницу в шедевр халтуры.
Другой пример раздельного использования двух окон подтверждения возраста - веб-сайт Remy Martin. Открывая его, вы видите эту форму, снабжённую ненужным и едва ли пригодным к применению меню определения даты, построенным по Flash-технологии:
Затем вас перенаправляют на страницу совсем другого домена и вновь просят указать свой возраст:
Цвета и стиль оформления нового сайта отличаются от первого, заставляя посетителя сомневаться в том, что он по-прежнему там, где надо. Я, честно говоря, не знаю, зачем они придумали эту систему двойного подтверждения возраста, но такое решение явно демонстрирует отсталость разработчиков данного сайта в вопросах обеспечения удобства веб-сайта для пользователя на современном уровне.
Ниже вы видите ещё одну перегруженную сложностями форму подтверждения возраста на веб-сайте ZIMA. Попробуйте найти год своего рождения в этой неразберихе:
При заполнении формы подтверждения возраста возникает и такая проблема: на некоторых сайтах требуется вручную вводить четыре цифры года рождения, на других год можно выбрать в поле "select". Сайт Busch Beer - один из немногих, позволяющих пользователю обходиться всего двумя цифрами года рождения:
Людей, привыкших к четырёхразрядному обозначению года, или к выбору даты в поле "select", это двухразрядное исключение из правил слегка выбивает из колеи. Так что, открывая сайт, я, естественно, ввёл 4 цифры, начиная с 19 —, а вторая часть числа "19...." не вошла. Я получил следующее сообщение об ошибке:
А если б я родился в 1919? Что ж, поэкспериментировав немного, я выяснил, что люди, родившиеся ранее 1930 года, считаются "слишком старыми для выпивки" (что и понятно), однако, несмотря на первое сообщение об ошибке, упорные попытки ввести год рождения до 1930 вместо желанного сайта отправляют вас изучать географию на Worlds of Discovery, "место удивительных открытий для всех, от мала до велика". Оставив в стороне все вопросы потребительской пригодности ресурса, давайте просто посмеёмся.
Вы, наверное, также заметили на приведённых выше снимках с экрана уведомление об "условиях функционирования сайта" в стиле 1999-го года. Лишнее напоминание о том, что сайты, которые мы здесь рассматриваем, видимо, и заказываются, и разрабатываются людьми, не вполне знакомыми с современными тенденциями дизайна и стандартами потребительских свойств продукта.
Чрезмерное увлечение бесполезными украшениями
Сегодня "классным" сайт делают совсем не те компоненты, которые "классно" смотрелись 8 лет назад. Честно говоря, не будь календаря, после посещения 10 или более веб-сайтов алкогольной тематики можно подумать, что на дворе 2001 год. Количество таких сайтов, сконструированных поверхностными в плане будущей функциональности, минимально трудоёмкими методами, просто поражает, а их использование - сплошная морока.
Пытаясь ознакомиться с работой этих сайтов, я часто не мог понять, на что следует нажимать, когда выключится воспроизведение анимации или откуда слышен тот или иной звук.
Избыток Flash-анимации
Большинство современных разработчиков понимают, что построение сайта одними лишь средствами Flash редко себя оправдывает. Хотя, некоторые типы сайтов принято целиком основывать на Flash. Например, детские и игровые ресурсы. Но, в принципе, использование Flash-технологии на сайтах, посвящённых спиртным напиткам, часто бывает излишним и создаёт впечатление бездумного следования моде, поскольку ошибочно считается, что сайт, полностью основанный на Flash, отличается своей "отменностью, первосортностью". Как уже говорилось, году, этак, в 2001-м пользователи могли в это верить, но не сейчас.
Веб-сайт Seagram’s Gin - один из множества примеров страниц, полностью построенных на Flash, очень распространённое явление в данной отрасли.
Почему не любят javascript-анимацию?
Я не говорю, что разработчикам таких веб-сайтов стоит полностью отказаться от использования Flash. Некоторые из посещённых мной страниц содержали сложные интерактивные элементы, которые, конечно, нельзя было создать без применения Flash-технологии. Но в ряде случаев анимацию и эффекты можно было включать посредством хорошей семантической программы, незаметно приводимой в действие jQuery или другой javascript-библиотекой.
Например, интерфейс веб-сайта Finlandia vodka собран, в основном, из Flash-компонентов, с окнами воспроизведения рекламных роликов, а его запросто можно было построить средствами HTML и javascript:
Другая страница, перегруженная Flash-элементами, - веб-сайт Three Olives Vodka. Посмотрите на этот экранный снимок:
В окне содержимого отображается широкий вкусовой ассортимент данного напитка, при наведении курсора на каждую бутылку, включается Flash-анимация — вполне оправданный случай её применения, с учётом сложности задумки. Однако, на Flash построен весь сайт, в том числе, полностью статичный логотип, верхнее меню навигации и нижний колонтитул, заполненный текстом. Все эти компоненты страницы можно было сконструировать обычными программными методами, не захламляя сайт и обеспечивая большее удобство его использования. По сути, многие фрагменты анимации на этой странице могли быть построены средствами javascript, что придало бы продукту в процессе его применения ощущение современности, большую наглядность и гибкость в плане дальнейшего развития.
Веб-сайт BACARDI также полностью построен на Flash, от заголовка до нижнего колонтитула, и даже всплывающие меню, — хотя всё это можно было создать с помощью HTML и javascript без малейших потерь в эстетическом восприятии результата:
Архаичная ссылка "Пропустить заставку" ("Skip Intro")
Ещё один дизайнерский приём 8-летней давности, используемый на многих коммерческих сайтах алкогольной тематики, - кнопка "пропуска заставки", наличие которой явно подтверждает сделанные нами ранее выводы о засилье Flash-технологии. Ниже приведены примеры нескольких сайтов с Flash-заставками, имеющие опцию их "пропуска".
ZYR Vodka
Bombay Sapphire® Gin
Mount Gay Rum
Хуже того, веб-сайт Jameson Irish Whiskey завершает процедуру подтверждения возраста пользователя загрузкой Flash-заставки в виде пестрящего объёмного анимированного кубика, которую даже нельзя "пропустить":
Самовоспроизводящиеся аудио- и видео-фрагменты
При чрезмерном использовании Flash, нельзя избежать и назойливых встроенных в анимацию звуков. Вообще-то, звуковые сигналы должны воспроизводиться только с разрешения пользователя, а их источники - снабжаться выключателями или регуляторами громкости, простыми в применении. Многие из посещённых мной сайтов оказались ниже всякой критики по этой части.
По завершении процедуры подтверждения возраста, на веб-сайте Corona включается некое подобие заставки из анимированных фотографий, наложенных на музыку. Как видно на следующем ниже экранном снимке, пропустить этот анимированный фрагмент нельзя, отключить звук - тоже.
На веб-сайте Bud Light даже не ждут, когда вы подтвердите свой возраст, сразу заводят пластинку "звуков окружающей среды" (голоса участников вечеринки в качестве звукового фона). Они немного раздражают — но здесь, хоть, есть заметный переключатель пуск/стоп в верхнем правом углу экрана.
Веб-сайт Blue Moon Brewing Company роскошно оформлен, но жутко неудобен в использовании. Страница сконструирована в виде книги, содержит красивую анимацию, но явно не вписывается в концепцию современной веб-среды. Выяснив ваш возраст, вам предлагают посмотреть какую-то новогоднюю рекламу, запускаемую с плашки, похожей на светящуюся вывеску. В качестве аккомпанемента звучит застольная песня Auld Lange Syne — и ни намёка на выключатель этого музыкального сопровождения.
На веб-сайте Michelob видео проигрывается, пока вы подтверждаете свой возраст, а затем повторяется по время загрузки страницы. В обоих случаях воспроизведение запускается не пользователем. Поскольку здесь видео не раздражает, не бьёт по глазам, да и радует своей краткостью, — я, пожалуй, зачту им это как крупную удачу в плане привлекательности и практичности продукта по сравнению с предыдущими примерами.
Но лучше было бы поместить на это видео заметную кнопку "пуск", чтобы посетители могли сами просматривать его, когда им захочется.
На веб-сайте SKYY Vodka после прохождения вами процедуры подтверждения возраста воспроизводится целая подборка видео-фрагментов. С первого взгляда, отключить ни видео, ни звук нельзя. Но при наведении курсора на окно видео-проигрывателя, появляется его панель управления, посредством которой можно приостановить воспроизведение видео и/или отключить звук. Лучше некоторых других рассмотренных нами примеров, однако, явно не заслуживает определения "удобный для пользователя".
Переходим к веб-сайту Russian Standard Vodka. Что можно сказать об этом чудище - страшном, неудобном и вообще непригодном к использованию? Построен целиком на Flash, имеет плавающую ширину страницы, в качестве фона Flash-ролика проигрывается видео громадных габаритов, и, как всегда, не видно никаких инструментов для его остановки, крайне желательной ввиду его резко негативного и пронзительного воздействия на психику, — как вдруг вы обнаруживаете, что щелчок по фоновой картинке ролика в любом её месте и служит выключателем. Настоящий кошмар для пользователя, к тому же, один из самых вопиющих примеров небрежности разработчика за всю историю создания веб-страниц.
Однако, этой скользкой дорожкой пошли и другие. На веб-сайте Hennessy размещено подобное же огромное самовоспроизводящееся фоновое видео без видимых признаков какого-либо устройства для его временной или полной остановки. Звук отключить можно, но на заднем плане страницы продолжают без конца проигрываться ролики.
Есть ещё много примеров страниц, содержащих аудио- и видео-фрагменты. Просто поразительно, насколько использование неудачных дизайнерских приёмов свойственно разработчикам сайтов данной тематики. Они, похоже, живут в собственном мирке "модного" веб-дизайна и, в большинстве своём, никак не откажутся от применения массы устаревших приёмов, которые почти для всех современных дизайнеров давно остались в прошлом.
Навигация в стиле "призрачного мяса" (в 2009 году?)
Пока я не взялся готовить данную статью, я считал "призрачное мясо" навигации пережитком, давно вытесненным из жизни современными подходами к дизайну, которые во главу угла ставят удобство пользователя, — но в секторе коммерческих веб-сайтов алкогольной тематики дело, видимо, обстоит иначе.
Излишняя мишурность, засилье Flash-элементов и прочие халтурные дизайнерские приёмы заваливают многие сайты этой тематики "призрачным мясом", вынуждают пользователя играть там в "кошки-мышки", — объекты, выбираемые с помощью графического интерфейса, на этих страницах никак не выделены. Посмотрите на несколько экранных снимков внизу, попробуйте определить, какие из элементов реагируют на щелчок. Каждый снимок я сопроводил пояснениями, перечислив "тайные" объекты, чтобы вы убедились в малопригодности этих сайтов.
San Miguel Beer
На веб-сайте San Miguel Beer (см. выше) помимо ссылок в строке навигации, щелчком приводятся в действие почти все графические объекты в окне содержимого, в том числе, машина, грузовик, все двери здания и указатели. Кто бы мог подумать?
Widmer Brothers Brewery
Сайт Widmer Brothers Brewery (см. выше) содержит "тайные" ссылки, присоединённые к каждому из следующих элементов: обоим братьям Widmer, большому бокалу пива, дольке лимона, бутылочной крышке, брелоку, портативному ПК и дротику.
Malibu Rum
Выстояв в тяжёлой борьбе с самозаводящейся "тропической" аудио-дорожкой, повторяющимися анимированными фрагментами и назойливой рекламой "музыкального коктейля", открывающейся поверх страницы, посетитель сайта Malibu Rum попадает на полузатопленный остров, в центре которого лежит схема навигации, напичканная "призрачным мясом". Пятью основными элементами страницы (зеркальный шар, бинокль, кокосовый орех, бутылка и ёмкость для приготовления коктейлей), однако, не исчерпывается набор объектов, реагирующих на щелчок; на заднем плане притаилась ещё спутниковая тарелка.
Пока что, все приведённые нами примеры "призрачного мяса" в схемах навигации содержали графическую или текстовую подсказку, открывающуюся наведением курсора и объясняющую назначение объекта, чувствительного к щелчку. Авторы следующего образчика не позаботились даже об этом.
Mount Gay Rum
Сайт Mount Gay Rum (см. выше) полностью построен на Flash, а окно основного содержимого представляет собой книгу, страницы которой перелистываются щелчком. Для начала, потрудитесь нащупать в уголке каждой страницы то самое место, где нужно щёлкать. Но это ещё не всё, - реагирующие на щелчок объекты есть и вне книги; например, бутылка спиртного (едва заметная вверху слева, не попавшая в окно содержимого), стакан рома со льдом и красная шляпа (вверху справа). Лично я, пролистав страницы и изрядно пощёлкав по изображениям тайных объектов, так и не понял назначения этих дополнительных скрытых ссылок и причины отсутствия подписей к ним.
Архаичность оформления и устаревшие шрифты
Я считаю, что многие сайты, разработчики которых, в принципе, сумели избежать рассмотренных выше ошибок, создав вполне пригодный к использованию продукт, старомодны, тем не менее, в плане приёмов их оформления и разметки. Далее следуют несколько примеров.
Веб-сайт Miller Lite сконструирован без учёта разрешающей способности современных экранов.
Веб-сайт Martell Cognac содержит крошечные шрифты и прочие мелкие элементы.
На Beefeater Gin для навигации использован мелкий шрифт, впрочем, текст его всплывающих меню ещё мельче.
Сайт 4Copas Tequila смотрится немного старомодно, на всех его страницах мелькают мелкие шрифты, а вертикальная панель навигации давно устарела.
Сайт Jack Daniel’s слишком тёмный, а текст временами почти не читается, настолько мелким шрифтом он набран.
Лучшие веб-сайты о пиве и алкоголе в общем
Хотя эта статья и не совсем относится к рекомендациям дизайнерам и разработчикам веб-сайтов на алкогольную тематику, существует много сайтов с отличным дизайном, удобством пользования, и вовсе не перегруженным различными flash-элементами и другими надоедливыми штуками.
Большая часть из этих сайтов на самом деле хорошо оформлена. Поэтому, эта последняя часть не так уж и обязательна к рассмотрению – сайты приятные, поэтому мы решили тоже взять их в данную компиляцию с современными стандартами веб-дизайнов и разработок.
В некоторых есть недостатки, но в общем плане, стоит подробнее ознакомиться с каждым из них.
01. Guinness
02. Coors Light
03. Sleeman Breweries Ltd.
04. Molson Canadian
05. Deschutes Brewery
06. SVEDKA
07. JETT VODKA
08. Mike’s Hard Lemonade Co.
09. Aviation Gin
10. Silver Oak Cellars
11. Chateau Ste. Michelle Winery
12. Rombauer Vineyards
13. el Jimador Tequila
14. Jose Cuervo
15. 1800® Tequila
16. Bushmills Irish Whiskey
17. Tullamore Dew Irish Whiskey
18. Admiral Nelson’s Rum
19. Captain Morgan Rum
Автор статьи © Louis Lazaris
Русский перевод © CoolWebmasters.Com 2010
