[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "create", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-158433683", "adfox_url": "//ads.adfox.ru/228129/getCode?p1=bxbwd&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid21=&puid22=&puid31=&fmt=1&pr=" } } ]
{ "author_name": "Редакция vc.ru", "author_type": "self", "tags": ["\u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u044b","\u0434\u0438\u0437\u0430\u0439\u043d","\u0441\u0442\u0443\u0434\u0438\u044f_\u0430\u0440\u0442\u0435\u043c\u0438\u044f_\u043b\u0435\u0431\u0435\u0434\u0435\u0432\u0430","\u0430\u0440\u0435\u043d\u0434\u0430_\u043d\u0435\u0434\u0432\u0438\u0436\u0438\u043c\u043e\u0441\u0442\u0438","cian_ru","cian","\u0440\u0435\u0434\u0438\u0437\u0430\u0439\u043d_cian","\u043f\u043e\u0438\u0441\u043a_\u0436\u0438\u043b\u044c\u044f"], "comments": 94, "likes": 21, "favorites": 0, "is_advertisement": false, "section_name": "default", "id": "5353" }
Редакция vc.ru
12 758

Редизайн: Каким мог бы быть сервис для поиска жилья CIAN

Совместно с UX-экспертами digital-агентства Uprock ЦП продолжает цикл материалов, посвященных редизайну сайтов и приложений крупнейших компаний, в рубрике «Интерфейсы». В первом выпуске речь шла об ошибках на сайте РЖД, а сегодня анализу подвергнется сервис для поиска жилья CIAN.

Введение

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

Многие сталкивались с необходимостью поиска временного жилья. Одним из первых и крупнейших сервисов на рынке аренды квартир является CIAN. Долгое время внешний вид сайта оставался неизменным, и только в начале 2014 года Студия Артемия Лебедева опубликовала в портфолио обновленный дизайн. Создание рецензии на работу именитых коллег делает задачу еще более интересной — появляется возможность анализа проекта с большим количеством интересных решений. Также отметим, что по текущему дизайну CIAN можно судить, что интеграция нового интерфейса происходит болезненно и занимает длительное время. В результате внешний вид ресурса меняется итеративно, что сказывается на конечном результате.

Пользователи

Анализ любого продукта начинается с портрета пользователей:

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

Основные ошибки

Несоответствие верстки макетам и конфликт версий

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

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

Новая версия выдачи результатов

Старая версия выдачи результатов

В итоге присутствует отображение двух версий сайта одновременно и возникает путаница.

Небрежность подачи информации 

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

Громоздкий поиск 

Функционально поиск мало отличается от старой версии, администрация CIAN отказалась от многих «фишек», предложенных Студией ползунков, “умного поиска” и так далее.. Можно сказать, что нереализованными остались те нововведения, ради которых и имело смысл заказывать редизайн.

Подробный анализ страниц

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

  1. Отсутствует логотип и какое-либо упоминание названия главной страницы;
  2. Недостаточно полей ввода данных для полноценного поиска, при нажатии на поиск, мы попадаем не к результатам, а на новую форму;
  3. Ссылки разной степени важности в верхнем меню расположены бок о бок без расстановки приоритетов;
  4. Имя или ник пользователя скрыты за бездушным  ID, возможности выбрать ник при регистрации нет — только в настройках впоследствии;
  5. Нет единообразного расположения кнопки смены города;
  6. Складывается впечатление, что «Поиск на карте» — это заголовки для ссылок под ними, но на самом деле заголовками являются только «продажа недвижимости» и «аренда недвижимости», которые расположены строго в левом столбце;
  7. Ошибки с отступами, которые вводят пользователя в заблуждение. Неочевидная функциональность элементов: трудно отличить простой заголовок от ссылки.

Расширенный поиск

  1. Слишком громоздкая форма поиска, стоит подумать над решением с возможностью развернуть только необходимые фильтры для поиска;
  2. Не используются упрощающие жизнь UI-элементы типа слайдеров для диапазонов;
  3. Слишком подробная схема метро;
  4. Нет возможности сохранить условия поиска.

Выдача результатов

  1. Нет возможности быстро изменить хотя бы некоторые параметры поиска;
  2. Отсутствует возможность отображения сразу всех результатов поиска на карте города;
  3. Нет возможности сортировки;
  4. Неочевидные кнопки добавления в избранное: кажется, что они уже нажаты;
  5. Неочевидно назначение кнопок «Премиум», лучше найти другой способ пометки премиальных и оплаченных объявлений;
  6. При изменении ширины окна, столбец «Комментарии» слишком сильно растягивается по высоте, разработчикам стоит подумать над более удачным для адаптивной вёрстки вариантом расположения информации;
  7. Не самое удачное место для столь важной информации, как дата и время публикации объявления.

Выдача результатов на карте

  1. Цветовое кодирование — сомнительное решение. Цвета недостаточно контрастны по отношению к карте, премиальные объявления никак не отмечены;
  2. Недостаточно подробностей для принятия решения о привлекательности объекта; 
  3. Нет фотографий.

Страница квартиры

  1. Путаная верстка;
  2. Главная информация для многих ищущих жильё — фотографии, а им на странице уделено мало внимания;
  3. Не предлагаются сопутствующие варианты, частично соответствующие параметрам поиска, которые также могут заинтересовать пользователя.

Редизайн

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

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

При клике на изображение откроется версия в большом разрешении

  1. Шапка с выбором города, а также тремя разделами меню для каждой цели, с которыми заходят на сайт пользователи;
  2. Форма для ввода минимальных данных, необходимых для быстрого поиска;
  3. Кнопки для перехода в разделы сохранённых данных;
  4. Лучшие объявления, с выбором самых популярных запросов;
  5. Сортировка;
  6. Выбор способа отображения объявлений.

Расширенный поиск

  1. Выбор необходимых фильтров для ввода условий поиска;
  2. Диапазоны в виде слайдеров;
  3. Выбор способа ввода местоположения;
  4. Карта с инфраструктурой от 2GIS; 
  5. Тут же результаты поиска;

Выдача результатов сеткой

  1. Формы ввода прячутся после нажатия на поиск;
  2. Выбранные поисковые фильтры;
  3. Премиум-объявления стали заметнее;
  4. Крупные фото с возможностью выбора.

Выдача результатов строками

  1. Премиальные объявление заметнее;
  2. Иконка объявления собственника или от агента; 
  3. Фотографии крупнее.

Поиск на карте

  1. При клике на маркер, выезжает плашка с информацией об объекте, с возможностью скролла;
  2. Карта от 2GIS с инфраструктурой;
  3. Другой вид у маркеров премиальных объявлений;
  4. Удалось поместить даже детальную информацию об объекте;
  5. Крупные фотографии объекта.

Страница квартиры

  1. Крупная фотография объекта;
  2. Миниатюры фотографий с возможностью выбора;
  3. Крупная карта от 2GIS с расположением объекта и ближайшей инфраструктурой;
  4. Похожие объявления.

Вывод

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

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

И как не трудно догадаться, у сайта не планируется мобильная версия.

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

#Интерфейсы #Студия_Артемия_Лебедева #интерфейсы #аренда_недвижимости #cian_ru #CIAN #редизайн_cian #поиск_жилья

Статьи по теме
Редизайн: Каким мог бы быть сайт Российских железных дорог
Масштабный редизайн Airbnb: мнения экспертов
Популярные материалы
Показать еще
{ "is_needs_advanced_access": false }

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

0 новых

Популярные

По порядку

Прямой эфир

Голосовой помощник выкупил
компанию-создателя
Подписаться на push-уведомления