Как стать автором
Обновить

Комментарии 57

booking.com VS booking.com
Не, ну ладно, с первым я погорячился. Но второй вариант — откровенно booking.com. Даже скидки на месте букинкомовской подписки на скидки.
+1. Уверен что вы победили и идете на лекцию
За что мне минусы? Кто-то не согласен, что этот человек наберет больше всего плюсов? Или тут выиграет тот, кто лучше всего похвалит?
Напомним, победит тот, кого выберет Денис :) Хотя, конечно, хотелось бы более развернутой критики для наших ребят.
Как мне кажется, отели обычно бронируют люди, которые ездят без тура, «дикарём», как я. Выбирать маршрут, авиабилеты, отели, планировать даты путешетствия — это очень кропотливый процесс.

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

А у вас 90% информации — не для решения задачи пользователя, а для его отвлечения от задачи.
У вас же и написано — «Баннер с видом нужного города притягивает внимание.».
Он не притагивает внимание, а оттягивает внимание от решаемой задачи. И так почти всё что есть на сайте.

Смотрите как надо, правда этот сайт не по отелям а по турам, но тут отлично видно что я имею в виду: tourstanok.ru
А у вас, даже судя по вашим же «Экспертизам», решается не задача пользователя, а ваша задача по запудриванию пользователю мозга, удерживанию пользователя и впаривания ему ненужных вещей.
А когда сайт решает не задачу пользователя, а вашу, хуже только вам.
хвалить то как раз никто и не просит, даже to lynch с английского совсем не «хвалить» переводится

высказать свое мнение и аргументировать его

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

я такое говно на вордпрессе соберу за 15 минут.

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

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

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

А так, да. Первый солидный. На втором посидеть хочется. Если второй вариант доведут внешне до ума, то его концепция для меня выглядит более привлекательной.
Простите, но после того как человек увидит www.anywayanyday.com — он уже никогда не полезет на oktogo.ru/.
А мне нравится momondo.com
Я тоже путешествую не по турам, а самостоятельно. Вот и топик славный получился, чтобы подобрать список УДОБНЫХ и хороших сервисов.

К сабжу: Я не специалист. Выскажу юзерское мнение. Я бы задержался на сайте со вторым дизайном. А если в нем будет больше оригинальности, то пожалуй и выкажу доверие сервису.
Когда вижу что-то похожее на oktogo.ru, срочно закрываю и бегу за валерьянкой
Настоящий кот :)
Вы же взрослый человек! Если вам так нравится валерьянка — просто пейте её, не нужно искать для этого поводов :)
Да, действительно классно сделали. Спасибо за линк!
Тока не понятно, как по гуглокарте искать отели :-|
Ищу Триполи, а выдает Триполис :-|
Туристические говносайты заполоняют.
НЛО прилетело и опубликовало эту надпись здесь
НЛО прилетело и опубликовало эту надпись здесь
Насчет формы добавил бы:
1) поясняющий текст, уже вбитый в форму, нужно убрать, а то складывается впечатление, что нужно указывать всю эту информацию (Город, Регион, Страна, Отель). А так заголовка сверху вполне ясно, что нужно вбивать.
2) вернуть иконки «календарь» для полей вводы даты
3) (возможное) вместо двух панелей со звездочками сделать одну и подписать снизу цифры от 1 до 5. Для выбора количества звезд просто кликаем на нужное количество, например на 3-ку, 4-ку и 5-ку. Соответственно нужно поддерживать поиск по 3-кам и 5-кам.

Теперь в общем:
1) логотипы сайта унылы: у первого — октос, а у второго просто блёклый. Хотя стоит начать с того, что название компании вообще читается как «Откого».
2) На первом лэйблы со скидкой (-40%, -70%) нужно убрать как минимум потому, что они не соответствуют действительности (cкидки в категории Доминиканская республика не 70%, а 60%). Зато указание реальной скидки рядом с ценой правильно. На втором сайте скидки не подсчитаны, что понижает, как мне кажется, заманчивость предложений, зато честно пишут в баннере — скидки ДО стольки-то…
3) Блог путешественников на первом сайте лучше убрать во внутренние страницы или, если уж хочется, можно показать где-нибудь справа маленьким окошком с
максимум двумя записями. А описание сервиса лучше ужать (написать по-короче) и разместить где-то около позиционирующей фразы про «Единую систему..».
Что касается второго сайта, то блок с преимуществами тоже лучше убрать. Она не имеет смысла, так как прочитав, что у вас низкие цены, пользователь не поверит и все равно сравнит с другими сайтами. Точно также и с отелями по всему миру. Как вариант, можно вынести эту фразу в блок со скидками, который назвать: «скидки на отели любой точки мира».
Как мне кажется, блок с идеями хорош, но лучше сделать в виде обычных фильтров. Выбрал, что хочешь в тёплые страны, тебе и будут показываться отели только в них.
4) Футеры ужасны оба:)
Интересно, как можно о юзабилити по картинке судить? Я в этом совсем не понимаю, но думал можно будет поклацать и сказать, что удобно, а что — нет. А так увидел две картинки и что?
В нынешнем варианте можно зацепиться за фавикон — он переливается)
НЛО прилетело и опубликовало эту надпись здесь
Спасибо за ценный комментарий. Передадим ребятам, пусть учтут на будущее.
Ой. Столько всего невнятного и недоработанного, посему детальное описание недостатков займет слишком много времени. Моё мнение — выкинуть оба варианта и начать делать заново. По более чётким требованиям (судя по тому, как разнятся концепции, дизайнеры не до конца осознали требования/потребности заказчика/потребности аудитории)
Для обоих вариантов(ИМХО): человек, пришедший на подобный сервис, прежде всего хочет забронировать билет, быстро и без проволочек, а не почитать блог, посмотреть на скидки в отелях, нет! На главной нужна лишь форма бронирования/поиска, уже потом, на странице с результатами поиска, можно ненавязчиво предлагать всякие скидочки и тому подобное!
Итого: нужна ярко и заманивающе оформленная главная страница, с выделяющейся формой, и не кидающейся в глаза контактной информацией :)
Вариант 1.

Не выдержан общий стиль. Сверху белая плашка, снизу серая, скруглений минимум два вида, если инпутбоксы не считать. «Найти» сделано кнопкой, «Подписаться» не пойми чем. Цветовое решение при всей своей яркой вебдванольности не несёт смысла — что сделано красным? что жёлтым?
Заголовок — «Единая система бронирования»… — ничем не отличается от других заголовков («Блоги...»). Неужели это равнозначные разделы сайта?

Блоки с содержанием достаточно удобны, но смущает нижний левый блок с информацией о компании. Можно предположить, что сверху логично отформатированы записи блога читателей, а этот кусок — запись некоего «нашего блога» со сбившимся форматированием. Нижняя плашка со списком отелей выглядит как реклама стороннего ресурса, типа adsense.
Шрифтов/кеглей целый зоопарк. И жирный, и курсив, и толстый, и тонкий.

Мелочи. «Стикер» с Поиском" — отходит от фона сверху и снизу. То есть это не такой привычный стикер, отклееный из пачки, а просто бумажка, в центр которой плюнули и к стенке прижали. Неряшливо. Затем форма для валюты — это что, простое поле ввода, куда я могу хоть международное обозначение афганских тугриков ввести? А зачем эти красные прямоугольнички у каждого текстового блока?
Текст — понятно, что это заглушка, но всё равно надо быть внимательнее, особенно с той информацией, которая не будет меняться. Опечатки, отсутствующие пробелы… На развернутом пункте «Отели Доминиканской республики» висит «солнышко» со скидкой 70%, а перечислены отели со скидкой 60%. Что за махинации?

Общая оценка — 2 из 5. Общие выводы о минусах: нет запоминающегося и логичного стиля; не сразу ясно, в чём основная задача сайта. Плюс: с точки зрения юзабилити, похоже, всё более или менее нормально, по крайней мере, привычно.

Вариант 2.

Казалось бы, со стилем лучше — цветовая гамма ясна, оформление фона и плашек тоже. Однако получилось не совсем хорошо. Про цвет: судя по всему, зеленым выделено самое важное — фирменное название корзины (сразу скажу, что оно ужасно, у меня нет никакого окбукинга и я даже не хочу, чтоб он был), «Наши преимущества», актуальные цены… и Французские Альпы с Турином. То есть явно Турин и Альпы важнее, значительнее и зеленее, чем расположенные с ними по соседству отели Швеции. Если цвету придана смысловая нагрузка, не надо этого забывать.

Лучше сделаны заголовки (удивляет только решение трёхколоночного «Это интересно»), даже видна иерархия — понятно, что сайт посвящён поиску и скидкам, а «Наши преимущества» и «Это интересно» — это сопроводительная информация, чтобы карта сайта не выглядела для заказчика маленькой и скучной. Вот только крохотное, но вредное «бронирование отелей» на логотипе — зря. И зоопарк с шрифтами/кеглями.

Бежевая подсветка мне нравится — если это подсветка. То есть когда выбираешь поиск — подсвечивается весь блок, как на картинке; выбираешь скидки — подсвечивается правый блок. Но что там подсвечивается в правом верхнем углу? Это круто, если я могу кликнуть в московский телефон, и подсветится весь «московский» блок, и что-нибудь ещё произойдёт умное. Но если не могу, то непонятно, зачем это весёленькое выделение вообще нужно.

Интересный баннер с фотографией Швеции. Я совершенно не понимаю, что должно произойти по нажатию на стрелки. Следующая фотография? Другая страна? Уменьшение или увеличение размера скидки? Панорама поедет влево-вправо? Это непонимание, в общем-то, привлекает, и на сайте я задержусь, чтоб кликнуть и посмотреть. Но если результат будет скучным (типа другая фотография), это вызовет раздражение.

Мелочи — почему логотипы Visa и т. д. монохромные?
Вопрос к юзабилити — вот я вижу, что в правом блоке Швеция развёрнута. То есть по клику на название страны мне открывается фоточка, три отеля и ссылка «Все отели Швеции»? Как-то это неумно.
Общий итог — 3 из 5. Общие выводы о минусах — неочевидность использования, местами лишняя сине-белая пестрота. Общий вывод о плюсе — к таком сайту можно прикрутить оригинальные решениия.

Совсем общий вывод. Плохие, неинтересные сайты. Что нужно сделать? Взять вариант 2 (сине-белый), оставить только блок «Поиск отелей», сверху к нему прикрутить фоточку со стрелками (с оригинальной реакцией). Всё. Остальное под нож (кроме технических вещей — корзины, контактов и т. д.).
Спасибо за подробный разбор.
Вариант 1.

1) ЗАГЛАВНЫМИ БУКВАМИ ПИСАТЬ ЗАГОЛОВКИ НЕЛЬЗЯ.
2) «Город, Регион, Страна, Конинент, Отель» — что, заполнять все сразу и именно в таком порядке? Еще чего.
3) Громадный блок различных меню справа вверху просто пугает. А туда еще контакты и форму подписки на рассылку засунули. Это вообще увидеть и бежать. Основное меню должно быть простым. А сейчас даже не понятно, по какому принципу разделялись пункты по двум верхним меню.
4) Заезд, Выезд, что это? Туда надо галочки ставить или что? Даты? Да что вы говорите, серьезно?
5) Куда ведет ссылка «Континент:»? Ведь не туда же, куда «Все континенты»? Что это вообще за дублирование такое?
6) Валюту предлагаете вводить с клавиатуры код? Что, вот прямо писать ручками RUR?
7) Если размер шрифта используется менее 10pt, это значит, что читать его не нужно. Тогда и сам текст не нужен.
8) Блог у вас стандартный копипаст новостей, зачем ему столько внимания? Хоть комментарии показали бы, что там есть. Или их там нет? И что это за прерывание посередине…

Вариант 2.

1) У вас не Google, чтобы делать меню над логотипом. Не настолько ваш сайт многофункционален, как вам хотелось бы казаться.
2) Синий цвет недостаточно контрастен. Посмотрите сами: snook.ca/technical/colour_contrast/colour.html
3) Зачем делать синим цветом заголовки и плашки, если это цвет ссылок? Лишняя путаница визуальная.
4) Снова размер шрифта. Я понимаю, что читать не вам, а посетителям, но они даже дураки и читать такое не будут.
5) Javascript-ссылки стандарт подчеркивать пунктиром.
6) Зачем столько места отдали блокам «наши преимущества», «это интересно», «идеи», это же «бла-бла-бла».
7) Понятия главного меню здесь вообще нет. То, что над логотипом воспринимается как доп. информация скорее на такого рода сайте, чем главное меню. В результате структура сайта совершенно не читается с главной.
Хочу добавить что сервис сейчас перспективней и проще, чем оба предлагаемых варианта. Его бы немного более четким и простым сделать и не надо этих глобальных переделок.
В нем все хорошо: простая правая колонка, наличие ясного главного меню, нет всяких дурацких ошибок: пунктир где нужно, выпадающий список где нужно. Убрать с него огромный блок блога, сделать немного контрастней и все ОК. Во всяком случае лучше, чем предлагается.
Хабр пора закрывать.
НЛО прилетело и опубликовало эту надпись здесь
В одном анализе тут очень много воды :)
Хотя мой тоже минуснули.
НЛО прилетело и опубликовало эту надпись здесь
А это были команды юзабилистов?
Я вообще честно говоря не понял, что за «наши ребята».
Это слушатели специализации «Менеджмент в сфере интернет-технологий». Они ни узабилисты, ни дизайнеры. Они учатся на руководителей проектов.
Как же они делали дизайн, технически в смысле, если они не дизайнеры?
Студенты получают бюджет на дизайнера у заказчика.
Потому что представленные «анализы» выдержаны в такой примерно стилистике:

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

А если просто — ни структуры ни логики.
Лично я вижу два главных сценария использования подобного сервиса:
1. Когда человек только собирается в путешествие и пытается определить доступность мест и цену поездки (вариант — «планирование отпуска»).
2. Когда человек уже имеет четкое представление о дате, цели и стоимости поездки (вариант — «через 3 дня командировка»).

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

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

Кегли, скругления, верстка — это всё уже будет вторично. Если сценарий использования будет продуман хорошо, то пользователи будут с удовольствием пользоваться таким сервисом, даже если у него будет дизайн от Windows 3.11. Верно и обратное — все дизайнерские изыски будут бесполезны, если сценарий использования сайта не продумать как следует.
1 вариант называется «ОТКОС»
2 вариант называется "От кого"
— так я увидел при беглом взгляде на картинки
Аналогично. Зашел на сайт, неправильно прочитал логотип и подумал, что не туда попал.
Написал длинный комментарий, и передумал комментировать.
Комментировать интерфейс по одному слайду — идиотизм.
Саш, оно понятно. Но что есть, с тем и надо работать, наверное.
Предыдущие комменты не читал, возможны повторы.

Первый вариант
1. Грязно-«девяносто», логотип а-ля «ГЛОНАСС», не предвещающий ничего хорошего.
2. Ссылки справа от формы, что это? Что произойдет если я нажму на одну из них. Зачем там представлены континенты, если бы я просто собирался ехать в Азию куда глаза глядят, я бы не бронировал отель. В общем, убираем эти ссылки и не размываем внимание пользователя.
3. В форме есть кнопка «Найти». Что найти? Стоит заголовок «Куда вы хотите поехать» и кнопка «Найти», пойди сразу пойми что здесь можно найти. В общем, «Найти отель». Заголовок формы заменить на «Поиск и бронирование отелей»
4. «Город, регион, страна, континент, отель» — иной человек задумается над тем, чтобы ввести всю эту информацию через запятую. Достаточно написать (за пределами поля) «Место назначения», в самом поле поставить популярный в текущем сезоне город, например «Патайя».
5. В поле Заезд по умолчанию вставить сегодняшнюю дату, в поле Выезд сегодняшнюю +7 дней, каждое поле снабдить календариком.
6. Количество звезд — достаточно одного ряда звезд, при выводе результатов сначала выдавать отели с искомым количеством звезд, а затем с большим (упорядочиваем выдачу по цене, больше цена — больше звезд). По умолчанию поставить 3 звезды.
7. В форму добавить поле «Количество мест: Взрослых ____, Детских (до 18) ____», где по умолчанию Взрослых 2, детских 0.
8. Скидки перетащить вверх и разместить справа от формы
9. В шапке сделать крупным бесплатный телефон и написать «Бронирование по телефону (звонок бесплатный)»

Второй
1. Приятный, легкий, безликий внешний вид. Можно разбавить более интересным логотипом и парой-тройкой графических акцентов.
2. Форму выделить еще больше
3. В блоке со скидками у городов поставить проценты скидок (возможно в виде цветных иконок)
4. Убрать (сместить в другие места) блок с кнопками фейсбука и подпиской на скидки
5. Отказаться от серой ссылки и двух голубых ссылок над формой и скидками
6. Вернуть бесплатный номер, сделать на нем акцент, написать «Бронирование по телефону (звонок бесплатный)»
7. В скидках убрать картинку (Швеции) и сразу выдавать предложения, иначе в первом экране юзер не увидит скидок
>5. Отказаться от серой ссылки и двух голубых ссылок над формой и скидками
Имелись в виду полоски, не ссылки
Само качество работ оставляет желать лучшего. Они больше похоже на драфт или поиск идей, чем на готовый макет. По-моему, не хватает надзора нормального арт-директора, из-за чего даже после юзабилити-линча не думаю что что-то в качественном плане улучшится.

Также в описании задачи не указаны приоритеты, поэтому у команд и получилось в конечном результате что глаза пользователя мечутся (я игрался с eye-tracker) по всей страницы пытаясь зацепится за что-то конкретное. Кстати, ваш старый дизайн в этом плане намного лучше.
В предложенных вариантах не чувствуется что было продуманно как пользователь будет двигаться по странице. Много информации, которой в принципе и не нужно. Тут я соглашусь с BombilCalabasov, что для начала нужно было определить главные сценарии и тогда только давать задание дизайнерам. В ТЗ ничего подобного нет.

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

Скетч идеи — habreffect.ru/8c6/d120ef1d6/Home.jpg
А когда будут подведены итоги?
Когда Денис найдет время посмотреть на все, что вы тут накомментировали) Результаты опубликуем отдельно потом.
Оба варианта не айс, но если выбирать по принципу меньшего зла, то первый вариант однозначно лучше.
Че-то как-то все заглохло.
Зарегистрируйтесь на Хабре, чтобы оставить комментарий