АРМ Руководителя: редизайн мобильного приложения
Контекст
Документооборот нуждается в мобильном приложении для быстрого и удобного подписания документов с дополнительными в возможностями редактуры и просмотра этого документа и людей учавствующих в этом процессе. В данный момент существует приложение компании, в которой я работаю: АРМ Руководителя, оно выполняет свои функции, но при этом выглядит устраевшим и имеет ряд проблем которые необходимо решить.
Основная задача состоит в обновлении интерфейса и приведению его к виду “Продающего”, “Дорогого”.
Так приложение выглядит сейчас:
Определение проблемы
Проблема
Приложение не только выглядит устаревшим, но так же имеет такие проблемы, как: Нагромождение элементов, неудобные контролы, неясный способ взаимодействия с документом и трудно читабельные заголовки. Так же приложение очень сложно воспринимать с первого взгляда, оно слишком сложное.
Актуальность
В современном мире люди привыкли к красивым и понятным интерфейсам, если спроектировать и реализовать новый интерфейс АРМ с этим базисом в уме, может выйти очень удобная и полезная вещь, которая поможет в продвижении бренда и повышении его репутации на рынке.
План
Преобразить внешний вид приложения, улучшить спорные моменты, ускорить взаимодействие с основными функциями, избавившись от лишнего. Кроме того изменить восприятие приложения, обновив иконку.
Целевая аудитория
Руководители разных звеньев и их заместители, которым необходимо работать с большими объёмами документации.
Исследования
Анализ конкурентов
За основу были взяты приложения с операционных систем Android / iOS, которые так или иначе проводят операции с документами: файловые менеджеры, приложения для подписания документов и тд.
Пользовательские исследования
Дисклеймер
В рамках данного проекта пользовательские исследования проводились только по юзабилити интерфейса, выбранные пользователи не отражают целевую аудиторию и только помогают понять удобство использования. Кроме того программы имеют разную специфику и функционал, потому это лишь показательные тесты взаимодействия в рамках поставленной задачи (улучшения UI / UX).
Юзер тесты существующего приложения
Был приведён сравнительный анализ среди 3 приложений по скорости выполнения базовых действий: Просмотр документа, подписание документа.
Тесты показали что новые пользователи слабо ориентируются в интерфейсе старого приложения и им тяжело определить по иконкам что значат разные пункты в меню. Кроме того время затраты на выполнение подписания сильно выше чем в других приложениях по подписанию документов.
Скетчи, вайрфреймы, юзер-флоу
Скетчи
Основные экраны High fidelity wireframes
Юзерфлоу
Визуальное исследование
Вдохновение, мудборд
Доска для вдохновения была собрана таким образом: pinterest + конкуренты. Приложения на пинтересте были отобраны по принципу простоты и удобства, современности и многообразия функций, сама доска:
Цветовая палитра
Для создания “Дышащего” и “Дорогого” интерфейса решено было использовать много белого цвета и глубокий синий. Белый позволяет интерфейсу раскрываться в деталях, выделяя их и не отвлекая от основной задачи. Синий же, по уверениям психологов и исследователей, внушает уверенность и концентрированность (что нам и нужно при работе с документами), кроме того внушает доверие к бренду и соответствует нашим основным цветам в большинстве остальных продуктов.
Логотип, иконка
При создании иконки я руководствовался принципами простоты и узнаваемости. Иконка должна быть простой и запоминающейся, кроме того было бы хорошо придать ей знакомые очертания и попытаться передать суть программы. Избавление от кириллицы на логотипе поможет продвижению и маркетингу, а так же упростит работу с графикой.
Взяв первую букву А, которая обозначает автоматизированность в названии АСКОД, и представив её в виде карандаша через negative space, можно получить довольно крепкое лого, которое будет и узнаваемым и легко масштабируемым.
Типографика
Я использую шрифт “Rubik” - он универсальный, бесплатный и подходит к разным элементам, к тому же хорошо сочетается с другими шрифтами (если их необходимо будет добавить).
Дизайн система
Дизайн система основана на атомарном подходе. Я создаю компоненты из других компонентов, и атомы становятся молекулами (группы компонентов). Разработаны разные состояния для кнопок и других элементов управления (активен, деактивирован, отключен).
🏡 Сам дизайн
Иконку уже демонстрировал, теперь можно перейти к основной части. После вайрфреймов появилось пару вопросов, которые я решил уже в самом дизайне (к примеру убрал стандартное меню из шапки и сделал его иконкой, добавил обновление по свайпу).
Домашняя страница
Здесь у нас складируются самые новые документы, наш дашборд и избранные нами документы, всё разбито на 3 категории-фильтра через segmented-control.
Так же вместо кнопки обновления страницы, должен использоваться свайп по экрану:
Вкладка с папками
Основной рабочий экран, переход по папкам через вложенность, работа с документами.
Здесь можно увидеть несколько опций для взаимодействия, вместо кнопки назад, мы используем хлебные крошки (их можно листать свайпом, если их много), а так же нажимать на них для перехода в нужную папку:
Так же добавлена возможность быстрой работы с документами, по имеющимся у меня данным, пользователи часто используют основную функцию, углублённого просмотра самого документа, потом я добавил popover меню для взаимодействия с документами прямо из папки (так же как и из главного экрана). При необходимости данную функцию можно отключить, тогда при нажатии на документ, мы будем попадать в… сам документ =) :
Работа с документом
Для начала я покажу как работа с документом выглядела раньше:
Как выглядит теперь:
Модальные окна в кусочке экрана были заменены на полноэкранные, элементы управления были адаптированы под современные нужды и способы взаимодействия. Вложенность стала более понятной и структурированной. Кроме того увеличился фокус на информации.
Немного больше экранов
Меню
Основным изменением было избавление от бокового меню, оно выступало основным элементом для перехода между документами и папками, теперь же у нас есть нижняя панель с табами:
Но я не полностью избавился от бокового меню, там разместились элементы брендига, интеграция с другим ПО и быстрые действия (которые можно совершить из настроек):
Ещё прототип?
Так же доработан кликабельный прототип что бы проследить базовый юзер флоу, не все покдлючено, есть куда дорабатывать:
Вывод
Что дальше?
Теперь осталось решить как правильно оформить страницу логина (что бы максимально упростить её, сейчас очень сложно сориентироваться) и утвердить весь дизайн.
Так же надо доработать реакцию программы на переход в различные состояния (например Оффлайн режим или же Режим заместителя).
Будет рассматриваться возможность изменения шапки (убрать её вообще) и добавить подписи в табы, но пока для облегчения перехода, оставляю шапку.
Обратная связь
С радостью отвечу на ваши вопросы или выслушаю замечания:
PS: Выполненная работа и всё что связано с АСКОД АРМ Руководителя принадлежит компании АТ “ІнфоПлюс”.
