История создания интерфейса Bpium 2.0

Первая версия Бипиума выглядела так:

0

 

Задача: увеличить рабочую зону

Зарождение идеи — надо перенести разделы вверх, чтобы сократить размер меню:

1

 

А что если и каталоги тоже перенести вверх:

2

 

Дальше начался долгий этап поиска оптимального расположения навигации и данных:

animate1

 

Выбор был остановлен на варианте с горизонтальным расположением разделов и каталогов:

9

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

 

Второй подход

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

10

 

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

11

 

Третья идея напросилась сама — вернуть привычный фон Бипиума.
Фаталити — сделать панель фильтров сворачиваемой.

12

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

 

Итог

Было / Стало (реальное приложения, не прототип):

small_1_animate

Поделиться
Плюсануть

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>