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

Страница “Задачи” в виде списка.

Дерево задач отражает иерархию. Такой вид позволяет выделять общие и частные задачи. А также оценивать процент выполнения общей задачи по готовности подзадач.

Страница “Задачи” в виде “дерева”.

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

Страница “Задачи” в виде истории.

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

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

Блок с сортировкой страницы задач: настройка и сохранение фильтра

Механизм работы фильтра.

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

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

Страница задачи - описание.

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

Блоки со всеми возможными статусами задачи для всех типов пользователей.

Cтраница с описанием задачи по сути является протоколом: кто, что и когда. Она дает представление о задаче здесь и сейчас. Тогда как вкладка “История задачи” позволяет увидеть динамику: сроки согласования и утверждения, время выполнения задачи, крайние сроки. И все это отображается не только в таблице, но и визуально — на временной ленте.

Страница задачи - история.

Поэтапно отрисовано, как меняется лента в ходе работы над задачей.

История изменений статусов одной задачи.

И отрисованы ленты с всевозможными временными периодами.

История изменений статусов разных по времени задач.

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

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

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

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

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

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

Уверены, что результат нашей работы поможет компании Mail.Ru повысить качество интерфейса платежной системы и сделать его своим конкурентным преимуществом. Это поспособствует привлечению новых пользователей и повысить лояльность текущей аудитории сервиса.

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

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

По результатам тестирования был заново спроектирован интерфейс работодателя.

Основное «рабочее место работодателя» — список полученных резюме.

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

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

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

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

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

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

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

Поиск точек стал ещё удобнее. За счет разделения вывода результатов поиска, карта стала больше, при этом удалось вывести параметры расширенного поиска.

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

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

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

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

Например, со страницы «Автосервисы Москвы» он может перейти к круглосуточным автосервисам Москвы, выбрать автосервис по типу оказываемой услуги,

по обслуживаемой марке,

по компании, к которой относится сервис,

или увидеть список всех сервисов, отсортированных по рейтингу.

Cуть сайта на одной странице

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

Чтобы при поиске точек карта занимала большую чаcть экрана, её размеры изменяются динамически вместе с изменениями размера окна.

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

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

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

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

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

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

Процесс

Создатели сервиса обратились к нам ещё на стадии идеи проекта — «сервиса, с помощью которого можно будет найти автосервис, в котором тебя не обманут». Начинаем с описания персонажей, то есть гипотетических пользователей сервиса, которым он мог быть полезен.

Всего придумали больше 20 персонажей, вот только самые неординарные из них:

- На Nissan’е Сергея загорелась лампа замены колодок и начался характерный скрип, что совершенно некстати, ведь сразу же после работы он собирался ехать за город. Ему необходимо найти как можно ближе к офису сервис с магазином фирменных запчастей, в котором смогут поменять колодки в обеденный перерыв.

- С Анатолия Петровича на родной заправке взяли деньги за 20 литров бензина, а в бак залили не больше 5. К сожалению, заметил он это, когда через несколько километром снова загорелась лампочка низкого уровня топлива. Он хотел написать об этой истории и предупредить остальных жителей района.

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

Как только утверждена высокоуровневая модель, рисуем прототип интерфейса.

Далеко не все страницы прототипа

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

Проверяем на карте.

Результат неудовлетворительный — пиктограммы плохо заметны. Не хватает контрастности. Пробуем уменьшить размер цветного круга.

Маркеры стали лучше заметны, но теперь хуже различим цвет оценки точки (особенно это очевидно на маркере с цифрой 1).

Пробуем разные варианты:

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

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

Видно замечательно, но придется постоянно смотреть на легенду, чтобы понять — это сервисы или АЗС?

А если отказаться от номеров, а информацию о точке показывать при наведении курсора?

Вот так значительно лучше. Теперь осталось окончательно отрисовать пиктограммы и увеличить толщину синей рамки для контраста.

Получившиеся маркеры на сайте.