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

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

Сначала немного общей информации. Макеты в приложении меняются, исходя из пожеланий пользователей, UX исследований, обратной связи клиентов, директоров, руководителей, других дизайнеров и анализа best practices. Процесс построен так: UX дизайнеры создают прототип интерфейса с новой функцией; мы проверяем, насколько вписывается функция; если требуется, вносятся правки и готовится прототип дизайна, где мы смотрим, насколько новая функция легко и однозначно считывается, стараемся на этом этапе привлекать текущих клиентов и партнеров, которые уже пользуются системой. Но в какой-то момент текущий дизайн становится «переполнен». И тогда нужно делать редизайн, чтобы весь новый функционал смотрелся красиво и легко.

А теперь посмотрим, как менялись вкладки нашего приложения.

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

Блок «Карусель» с типами помещений мы немного изменили.

Самая основная проблема, которая у нас была с этой вкладкой, – сначала ты выбираешь день и время, а потом уже рабочее место. И если ты выбрал день и время для переговорной, а она оказалась занята, то тебе надо делать шаг назад и изменять параметры, и опять переходить и смотреть, свободна ли переговорная. Это замкнутый неудобный круг. Поэтому мы сделали, чтобы можно было параллельно в top sheet (в синей шторке сверху) перейти на карту и прямо в шторке менять время. В режиме реального времени будет меняться занятость рабочих столов, переговорных. В общем мы исключили лишние клики, упростили путь до бронирования – для этого мы делали редизайн главной вкладки.

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

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

Тут есть bottom sheet, он был заменен. Это основное. Раньше был tap-навигатор внизу. Вкладки Главная, Мои бронирования и т.д. А при нажатии на стол выезжал bottom sheet, который не перекрывал навигатор. Сейчас он перекрывает. Интерфейс смотрится более свободным, не перегружено выглядит. И основная информация есть в выезжающем снизу bottom sheet. Тут тоже график заменен, шрифты другие.

Изменилась несильно. Но здесь не представлено то, что происходит при клике на бронирование. А именно: открывается дополнительный большой bottom sheet, новое модальное окно. Там можно посмотреть бронирование более детально. Это изменение дизайна связано с тем, что добавили информативности, блоки стали разбиты по секциям на дни (пн, вт и т.д.). Раньше таких не было. Мы облегчили интерфейс, информацию спрятали. Теперь она появляется только при клике.

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

Если остались вопросы, пишите. А мы будем и дальше совершенствовать наше приложение, менять интерфейсы и ориентироваться на юзабилити и современные тренды в дизайне :)

#simpleoffice #интерфейс #мобильноеприложение #приложениедлябизнеса #гибкийграфик #офис #разработка #uxui