Эффективный интерфейс: делимся нашими идеями по улучшению дизайна Битрикс24
Мы в DIGIMATIX для организации работы и коммуникации между коллегами и клиентами используем корпоративный интранет-портал Битрикс24. Для людей которые «вне контекста», можно сказать, что это некая цифровая платформа для управления работой сотрудников, ведения задач, создания и автоматизации процессов. Вещь полезная, увесистая, со своими плюсами и минусами. Но обо всём по порядку.
В этой статье мы покажем узкие места в UI/UX дизайне корпоративного портала и на примере главной страницы предложим свою концепцию их доработки.
Анализ текущей ситуации
На скриншоте мы видим главную страницу интерфейса портала, которая предоставляет доступ к различным разделам и инструментам, включая новости, чат, календарь, задачи и проекты. Слева расположена основная навигационная панель, которая позволяет пользователю быстро переходить между разделами. Центральная часть отведена под ленту новостей и функционал публикации сообщений и новостей. Справа отображаются задачи пользователя и «Пульс компании» — индикатор, показывающий текущую активность и результаты, популярные новости и предстоящие важный события. А также главная страница содержит «шапку», на которой отображаются ссылки на разделы.
Выявление проблемных мест
Несмотря на широкий функционал, интерфейс главной страницы портала имеет несколько проблемных аспектов, которые на наш взгляд снижают удобство и эффективность работы пользователя:
- Информационная перегруженность: Большое количество элементов на экране может вызывать затруднения в поиске нужной информации. Особенно это касается пунктов меню, так как часть ссылок исполнителями попросту не используется.
- Отсутствие актуальной информации по задачам/целям: Информационный блок присутствует, но «для галочки», так как просто показывает цифры которым к тому же требуется толкование. При попытке перехода в категорию “Делаю” отображается список задач актуальность которых для исполнителя сомнительна и страница требует дополнительной фильтрации для отображения нужной информации.
- Цветовая палитра: некоторые элементы, выделяющие задачи и уведомления, элементы групп — могут излишне привлекать внимание, отвлекая пользователя от основной информации.
- Консистеность: если можно так сказать, то она временами “ускользает”: плавающее скругление элементов; «скачущий» регистр у текста; дополнительные цвета и оттенки у вторичных элементов.
Что уже реализовано в Битрикс24?
Перед тем как открывать figma, мы сконцентрировались на анализе того, что уже реализовано в Битрикс24. Начнём пожалуй с сайдбара.
То что показано на скриншоте выше – это функционал, позволяющий настроить пункты. Можно настроить их видимость, а также поменять их местами. Если с последним все понятно, то с быстрой настройкой видимости есть нюансы. Также здесь нас ждал сюрприз, так как нам не было известно, что пункты меню можно сделать стартовой страницей, а после нажатия «Скрыть пункт» меню, он убегает в блок «Скрытые».
Так же выяснилось, что на некоторых внутренних страницах (например «Диск» или «Задачи и проекты») доступна настройка видимости элементов:
Необычно, здесь то, что можно скрывать что-то на внутренних страницах, а в «оболочке» нельзя. В целом, «Настроить пункты» и «Выбор темы оформления» (нашли в недрах профиля) — это единственные настройки интерфейса, доступные пользователю.
Наши гипотезы
У нас было немного свободного времени, несколько чашек кофе и идеи по улучшению нашего пользовательского опыта и комфорта работы с корпоративным порталом. Мы выдвинули несколько интересных гипотез для обсуждения:
- Мы верим в то, что сможем сделать навигацию более удобной, предоставив пользователям возможность настроить портал «под себя».
- Мы верим в то, что корректировка цветовой палитры поможет нам выделить самые важные элементы, при этом не перегружая внимание пользователей.
- Мы верим в то, что, оптимизировав визуальную иерархию, мы сможем сделать восприятие информации более быстрой и понятной.
Важное замечание
Хотелось бы отметить, что основной целью нашего мини-проекта был концепт решающий проблему перегруженности интерфейса, упрощения навигации по интерфейсу и настройки его под себя.
Прототип и дизайн
Упорядочиваем
Позже, опираясь на выявленные проблемы и наши гипотезы, мы решили создать прототип главной страницы. Мы также продумали, как можно настроить её функционал, и решили совместить этот этап с работой над UI-дизайном, чтобы эффективно использовать наше время. Нам важно, чтобы прототип и дизайн учитывали следующие изменения:
- Навигационная панель. Мы предлагаем сделать навигацию более компактной, что позволит скрывать (частично это уже реализовано) ненужные пользователю пункты меню, что поможет снизить когнитивную нагрузку и сделать работу с интерфейсом более удобной.
- Размеры элементов. Мы хотели бы предложить пользователям возможность изменять размеры виджетов на странице (например, 3 разных размера информационной части страницы), что поможет сделать их более информативными и удобными для работы.
- Расположение элементов. Мы хотим предоставить пользователям возможность настраивать местоположение и видимость виджетов, что даст возможность каждому адаптировать их так, как удобно именно ему, создавая уникальный и комфортный интерфейс.
После первых набросков и копирки с готового интерфейса, выделили для себя важные моменты которые следует учесть:
- Гармоничную цветовую палитру. Подобрать цвета, которые будут сочетаться между собой и не создавать визуальной перегруженности. Возможно, использование пастельных тонов с яркими акцентами только для ключевых элементов. А может и вовсе оставить всё как есть, чтобы не утратить «нативность».
- Интерактивные элементы. Убедиться, что все кнопки и ссылки выглядят как интерактивные элементы. Для этого можно использовать эффекты при наведении курсора, анимацию и тени.
- Чистоту и минимализм. Оставить только необходимые элементы на экране, убрав все, что не способствует достижению основной цели пользователя. Это поможет создать чистый и удобный интерфейс.
Воплощаем
Далее мы приступили к прототипированию настройки интерфейса. Конечно, за основу мы взяли существующую механику, но с небольшим апгрейдом. Поработав с компонентами, мы получили следующее:
По такому же принципу сделали и в хедере, с учетом того что некоторые элементы объединены в логические группы:
Также мы добавили такие же инструменты и в некоторые другие блоки. И так как нас уже было не остановить, на ходу придумали такую штуку, как «настройки ширины блоков». После страница настройки получила такой вид:
Вы можете сказать, что выглядит еще более громоздким, и создает еще больше шума, но хочется попросить вас дать нам шанс. Мы расставили много линков в прототипе, чтобы вы могли сами увидеть процесс настройки интерфейса:
Что дальше?
Нам бы очень хотелось проверить, как наши гипотезы прошли проверку пользователями, чтобы понять, какие элементы интерфейса вызывают затруднения. Пойманные в коридорах коллеги, довольно позитивно отозвались о концепции, но странно о легенде тестирования :) Обратная связь даже от “самих себя” помогла выявить слабые места и понять, что нужно улучшить, и сделать интерфейс более удобным, интуитивным и визуально приятным.
Вывод
Это приключение показало нам, что если вы используете Битрикс24 в своей работе, то его можно улучшить и повысить удобство и эффективность работы.
Мы – DIGIMATIX, до новых встреч!