Дом Работа Обо мне

Редизайн интерфейса ИнфоДоктор:
главная и список врачей

Краткое описание

Компания: Eruditor Group

Роль: разработка интерфейса, дизайн, верстка

Сайт: infodoctor.ru

Статус: тестовое задание


Задача: представить свое видение главной страницы и списка врачей.


Процесс работы

  1. Изучение текущих интерфейсов и аналогов
  2. Наброски
  3. Прототипирование. Главная страница
  4. Дизайн
  5. Список врачей. Версия 1
  6. Список врачей. Версия 2
  7. Верстка

Изучение текущих интерфейсов и аналогов

Сервис имеет две версии интерфейса: старая и новая.

Я запросил следующие данные, которые помогли бы мне разработать удобный интерфейс:

Мне предоставили следующую информацию:

Остальное на моё усмотрение. Это усложняет задачу, но от этого она становится еще интереснее.

Infodoctor old design Infodoctor old design Infodoctor old design Infodoctor design Infodoctor design Infodoctor design

Наброски

Наброски вариантов

Прототипирование. Главная страница

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

Я уже сталкивался с подобной задачей при разработке диалога перевода денег в Яндекс.Деньгах. Это не работает.

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

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

Так что пока что лучше разбить поиск на части.


Сайт обзавелся стандартным горизонтальным меню.

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

Чтобы пункты меню были максимально понятны и полезны, я добавил в них мини-описания. Пункты «Врачи» и «Клиники» я переименовал в еще более конкретные и однозначные «Поиск врача» и «Поиск клиники».

Библиотеку переименовал в Базу знаний. Таким образом в этом разделе можно объединить старую библиотеку, а так же «Вопросы и ответы».

Пункты для врачей и клиник объединил в «Партнерская программа». Логика следующая: чтобы врачи и представители клиник знали об обеих программах, возможно позже они порекомендуют их.

Так же я разместил в шапке панель Eruditor Group. Это позволил на сайте любого проекта узнать про другие. Плюс таким образом мы объединяем все проекты в одну большую сеть.

Страница прототипа для изучения.

Дизайн

Стилистика основывается на последней версии дизайна сервиса. Я использовал те же цвета.

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

Иллюстрация немного залазит на следующий блок, что облегчает переход взгляда к нему.

Блок статистики.

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

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

Приложение

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

Важные пункты на главной: публикации в прессе и партнеры

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

Полноценный подвал сайта.

Это важная вещь по многим пунктам: для СЕО, перелинковки страниц, дублирование пунктов меню полезно для быстрого перехода по ссылкам без скролла наверх страницы, плюс размещение ссылок менее важных (которые не попали в главное меню, но важно сделать на них ссылки), контакты, а так же социальные ссылки и правила/политика конфиденциальности (о которых тоже стоит упомянуть, чтобы у пользователей была полная уверенность, что их данные не будут опубликованы).

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

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

Полная версия макета главной страницы

Итак, главная страница в моем понимании должна выглядеть так:

Ссылка на макет для детального просмотра.

Flat версия макета главной страницы

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

Ссылка на макет для детального просмотра.

Интерфейс списка врачей

Текущий интерфейс списка: px.infodoctor.ru/doktor/. Мой внутренний цензор оценил интерфейс как хаотичный, нелогичный и требующий переработки.

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

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

Список врачей и фильтры поиска.

Фильтры

К фильтру стоимости добавил инпуты. Плюсы: при перемещении ползунков значения отображаются в инпутах. Если по каким-либо причинам ползунки не будут работать, то значение можно будет вписать в поле. Можно задавать более точные значения сумм.

Использовал стандартный чекбокс вместо iOS переключателя, все-таки он интуитивнее и понятнее, да и проще в реализации.

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

Так же я как пользователь хотел бы иметь возможность скрывать врачей из списка, так как например, недоволен ими (скрываем, пока в браузере живы cookie). В дополнительных фильтрах можно разместить очистку списка скрытых.

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

Список врачей

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

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

Полноразмерный макет списка врачей

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

Из информации убрал отзывы, вместо этого в правой части есть ссылка на них. Причина: двух отзывов недостаточно для выбора врача, пользователи в любом случае перейдут к полному профилю и изучат его. Даже если фокус-группа высказала свое желание видеть несколько отзывов прямо в списке, это не означает, что это необходимо реализовывать. Подобная информация в этом месте излишняя и при этом НЕ выполняет свою функцию. Что дает нам право оставить её на своем месте: в разделе отзывов и дать туда ссылку, там отзывы работают на 100%. Заинтересованные пользователи перейдут и все изучат.

Дополнительно выделил врачей с рейтингом 5+ графически: появилась фирменная обводка и шильдик со звездочкой.

Под списком врачей

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

Избранное

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

Вторая версия списка врачей

Полноразмерный макет второй версии списка врачей

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

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

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

Верстка

В дополнению к своей работе над интерфейсом я сверстал оба варианта списка врачей. И добавил переключатель шрифта на стандартные Helvetica/Arial – выглядит на самом деле тоже отлично и гораздо привычнее, чем Open Sans.

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

Результат работы

Увы, отбор не пройден. Подробности неизвестны.

Сейчас разрабатываю социальную сеть Галактикка.

comments powered by Disqus