- PVSM.RU - https://www.pvsm.ru -
Недавно на Хабре появились несколько интересных обзоров [1] интерфейсных решений [2]. Мы решили продолжить эту тему на основе своего опыта.
В этом году нашему сервису МойСклад исполнилось пять лет. Мы много работаем над тем, чтобы улучшить его интерфейс. Хотим рассказать вам общие принципы переработки UI — зачем, когда и как это делать.
Переработка UI — дорогостоящий процесс. За последний год наши разработчики потратили на нее не меньше 50% времени, а могли бы вместо этого добавлять новые возможности. Значит, надо четко понимать, для чего мы меняем UI и какие выгоды это даст.
Для себя мы определили задачи, которые должен решить новый интерфейс:
Теперь о конкретных действиях.
Главная цель улучшения этого экрана — увеличить процент успешно завершенных регистраций. Для этого мы уменьшили число полей, которое должен заполнить пользователь. Объединили два поля Имя-Фамилия в одно и сделали его необязательным, так же объединили поля ICQ и Skype. Убрали ненужные поля Отчество и Факс (!?).
Казалось бы, непринципиальное изменение. Но с новой регистрацией конверсия посетителей сайта повысилась на 45%.
По своему опыту знаем как раздражает, когда приходится подбирать свободное название аккаунта при регистрации. Поэтому если имя уже занято, мы должны сразу предложить доступные варианты.
Вместо яркой оранжево-зеленой палитры, отвлекающей внимание при работе, мы решили использовать спокойные сине-голубые тона. Палитра приложения должна не отвлекать пользователя от работы.
Самые главные экраны в нашей системе — редакторы документов. Внешний вид документа должен помогать концентрироваться на данных, поэтому различные контролы должны привлекать внимание как можно меньше.
Один из самых используемых элементов интерфейса — так называемый селектор. Он позволяет выбрать значение из списка или добавить новое. Мы заметили, что иконки в селекторах слишком яркие и сделали их менее выделяющимися.
Неожиданно просто удалось сделать более легким список позиций в документе. Несколько позиций можно выбрать, для этого используются чекбоксы. Оказалось, что колонка чекбоксов сильно перегружает интерфейс. Мы стали показывать только отмеченные чекбоксы и тот, который находится под мышкой.
Для многих пользователей работа в сервисе начинается с переноса своих данных. Как правило, это таблица в Excel, значит удобнее всего просто загрузить этот файл в систему.
Импорт данных — опасная операция. Неправильные настройки могут привести к неприятным последствиям. В старом импорте пользователи должны были указать номер колонки, в которой находилось то или иное поле. Естественно, что они постоянно ошибались и заполняли свои аккаунты мусором.
В новом интерфейсе импорта пользователь видит загруженный файл в виде привычной таблицы Excel. Соответствие между колонками таблицы и полями устанавливается визуально.
Что это дало на практике? Наша поддержка стала тратить в 2-3 раза меньше времени на вопросы, связанные с импортом данных.
Что обычно делает пользователь, который переходит от первого знакомства к полноценной работе в сервисе? Пытается настроить систему под себя.
В централизованном расположении всех настроек в отдельном разделе есть свои преимущества. Однако после долгих раздумий (и наблюдений) мы пришли к выводу, что лучше располагать настройки рядом с настраиваемым объектом:
В результате мы перенесли все настройки отчетов из отдельного раздела «Настройки» под шестеренку в самой таблице с отчетом. Аналогичным образом управление шаблонами переехало в меню «Печать» соответствующего документа.
Надо сказать, мы не уменьшили число обращений в поддержку с вопросами, связанными с печатью. Но вырос процент обращений на тему использованиия шаблонов, поскольку эта функция стала лучше видна пользователям.
Одна из вещей, которые больше всего пугают новых пользователей — обилие пунктов главного меню. Чем лаконичнее меню, тем проще изучить систему.
Общий принцип упрощения навигации прост: данные должны быть представлены в соответствии с ментальной моделью пользователя, а не в виде модели базы данных.
Лучше всего нам удалось упростить организацию справочников. Возьмем конкретный пример — информацию о товарах. У любого товара есть два атрибута: его страна происхождения и единица измерения. Списки стран и единиц измерения хранятся в базе данных в отдельных таблицах. Традиционно они показываются в виде отдельных справочников в собственных разделах интерфейса. Так же сначала сделали и мы, но потом задумались — зачем? Сейчас пользователи вводят эти атрибуты в самой карточке товара. Сами справочники остались в базе данных, но теперь они спрятаны.
За счет этой оптимизации мы избавились от четырех ненужных разделов, на очереди еще два.
Места на экране всегда не хватает. Когда пользователи работают с большими отчетами и документами, на экране появляются полосы прокрутки. Как решить эту проблему?
Самое очевидное улучшение — мы вынесли блок с основными действиями и фильтрами на плавающую панель. Она видна пользователю всегда, независимо от текущей позиции прокрутки на странице (аналогичное решение не так давно появилось в интерфейсе GMail).
При просмотре отчетов наши пользователи могут просматривать детализированную информацию — «drill down». Раньше экран был разделен на две части — в нижней показывалась детализация по выбранной в верхней части строке. Это обеспечивает очень быструю навигацию, но съедает экранное пространство. Поэтому мы перенесли показ детализации во всплывающую панель.
Самое сложное с точки зрения разработки улучшение — дэшборд (он же экран руководителя или KPI). На дэшборд мы поместили основную информацию, которая необходима руководителю, в концентрированном виде — необработанные заказы, неоплаченные счета. Дэшборды — не новый, но по-прежнему эффективный способ показать много данных на одной странице.
Много пришлось изменить в справочнике контрагентов.
Когда мы начали добавлять в систему возможности CRM, в карточке контрагента появлялось все больше информации — лента событий, напоминания, контактные лица. Экран редактора становился перегруженным.
Что мы сделали? Во-первых, разделили экран работы с контранентом на две части — просмотр и редактирование. В режиме просмотра доступна только та часть данных, которая используется в ежедневной работе, такая как история взаимодействий с клиентом. Те поля, которые обычно заполняются только один раз — при создании нового контрагента (например, реквизиты), открываются только в режиме редактирования, он используется реже.
Нам пришлось изменить традиционную организацию справочника контрагентов — слева дерево папок, справа список элементов в текущей папке. «Деревянная» структура — хорошее, всем знакомое решение, имеет ряд недостатков:
Поэтому мы заменили иерархические папки на систему тегов и предлагаем вместо навигации по папкам использовать поиск.
Задачи страниц оплаты — это:
Наша старая страница выбора тарифа была перегружена информацией. К сожалению, вся она является необходимой — ее нельзя спрятать. Поэтому мы приняли простое решение — показывать информацию только по одному тарифу, а не всей линейке сразу. Экран оплаты сразу стал значительно проще.
Улучшение и переработка интерфейса — это процесс, а не проект. Он длится непрерывно. Пока мы выполнили только половину из тех задач, которые поставили себе в его начале. Но мы надеемся, что этот опыт поможет вам сделать свои продукты более удобными и простыми.
Автор: oalexeev
Источник [19]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/interfejsy/19959
Ссылки в тексте:
[1] интересных обзоров: http://habrahabr.ru/company/luxoft/blog/152967
[2] интерфейсных решений: http://habrahabr.ru/company/yandex/blog/156917/
[3] Image: http://habrastorage.org/storage2/7cd/dfb/56a/7cddfb56a499998c9841202dfa00ff75.png
[4] Image: http://habrastorage.org/storage2/b1a/733/b73/b1a733b7374a8760e2e546b342517608.png
[5] Image: http://habrastorage.org/storage2/e17/2eb/826/e172eb8262a9f8dd38f679ee876cf1a2.png
[6] Image: http://habrastorage.org/storage2/4e0/27e/f04/4e027ef04454f055529762c4be3f1b3b.png
[7] Image: http://habrastorage.org/storage2/bc3/a49/6b5/bc3a496b5c2e8ec6041fce933f66ef57.png
[8] Image: http://habrastorage.org/storage2/bc7/664/8cd/bc76648cd0803eaf2fd4072de6f260a2.png
[9] Image: http://habrastorage.org/storage2/b96/cee/5ae/b96cee5ae54de3a96290cccee1cc454e.png
[10] Image: http://habrastorage.org/storage2/a0e/e13/0a4/a0ee130a4779c5d8773aa9c1525c3e11.png
[11] Image: http://habrastorage.org/storage2/122/3ae/dad/1223aedada85c76afd3c6f8bb627ec73.png
[12] Image: http://habrastorage.org/storage2/61c/6e3/c5e/61c6e3c5e80ed866316490ffc2dbdd71.png
[13] Image: http://habrastorage.org/storage2/f6f/b51/a82/f6fb51a823504850f9e5e99132fbfc63.png
[14] Image: http://habrastorage.org/storage2/cf3/fd0/4ae/cf3fd04ae4ae3192d6291874a806d181.png
[15] Image: http://habrastorage.org/storage2/7d8/704/dc7/7d8704dc7c56a42a3bbbb0f04e31d987.png
[16] Image: http://habrastorage.org/storage2/3e5/2a1/e6d/3e52a1e6dcb08c89c67133b03eee92d1.png
[17] Image: http://habrastorage.org/storage2/7f3/88d/8fe/7f388d8feffa268a100708a5ecf8aea1.png
[18] Image: http://habrastorage.org/storage2/1e4/4c0/98a/1e44c098a8cc7e65b2d04f25dff8b43c.png
[19] Источник: http://habrahabr.ru/post/158477/
Нажмите здесь для печати.