Как разрабатывался интерфейс 2-й версии системы «ЭКСПЕРТ»

33 комментария
Как разрабатывался интерфейс 2-й версии системы «ЭКСПЕРТ»

В прошлом, 2009-м году вышла 2-я версия программы Эксперт, которую хорошо знают бухгалтеры, юристы, кадровики и все те, кто много времени проводит в работе с нормативными законодательными документами РБ.
Эта статья рассказывает, как мы в Студии Дмитрия Борового разрабатывали новый интерфейс этой замечательной системы.


картинка кликабельна


картинка кликабельна

О программе.

Система «ЭКСПЕРТ» — информационная база по законодательству Республики Беларусь, предназначенная для хранения, поиска и обработки нормативных правовых документов, создания на их базе собственных отчетов, тематических подборок, а также для организации личного документооборота.
Несмотря на хорошие функциональные возможности и очень большой объем нормативной базы, интерфейс старой версии программы уже устарел морально, а реализация новых архитектур поиска и пользовательских функций требовала основательной переделки визуальной структуры программы.


Старая версия Эксперта. Окно поиска документов

Прототип новой версии до разработки дизайна.

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


Прототип. Окно поиска документов


Прототип. Окно списка документов

Начало работы

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

Изучили интерфейсы других программных аналогов:


Бизнес-Инфо


Консультант Плюс


ЮСИАС

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


Эскизное решение окна результатов поиск. Варианты основной цветовой схемы

Победила «стальная» цветовая схема


И табы со скруглениями.


Основное окно списка документов первый рабочий вариант.

Основная работа пользователя — это работа с документами и их списками. Поэтому мы проработали принципы их отображения, чтобы пользователю было легко в них ориентироваться.

Распределение внимания пользователя


Старая версия

— для того что бы определиться полезный это документ или нет пользователю нужно вчитываться.


Новая версия

— пользователь быстро подхватывает заголовки, определяя полезный это документ или нет. Информация о статусе документа и дате его публикации вынесена в отдельные колонки для беглого сквозного просмотра списка и быстрого в нем ориентирования.

Иконки для индикации статуса документа
Документ на принятии (еще не вступил в силу), аналитика вспомогательные материалы, обычный документ, недействующий документ, таблицы и формы.
Все просто и интуитивно понятно. При работе со списком документов их статус подхватывается без фокусировки на них (боковым зрением схватывается цвет индикатора)

 

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

 


Было


Стало

Оглавление активного документа«О проекте Закона РБ…»
Панель атрибутов можно скрыть или изменить ее размер, не отвлекаясь от документа.


Панель атрибутов. Активная закладка связей имеет точно такое же представление, как и результат поиска.


Варианты «пугания» пользователя статусом документа:

Причесали и упорядочили атрибутный поиск.


Было


Стало

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

Финишная прямая

В конце мы разработали единую модульную сетку и по ней отрисовали внешний вид для всех типовых окон проекта.


Одно из правил представления функциональных элементов окна


Все окна скопом



Все элементы интерфейса проекта скопом


Милое сердцу советского дизайнера, рисование иконок:


Все иконки и элементы интерфейса в студии делаются попиксельно в векторе:

Новый splash screen программы (заставка)


Старая версия


Новая версия заставки. Концепция «Философский камень


Облако разноразмерных иконок запуска и деинсталляции программы

Вот и весь процесс разработки. Желаем всем пользователям программы приятной работы!

Капля пиара :)

Дизайн-студия Дмитрия Борового более 6 лет успешно работает на белорусском рынке веб-разработок. За это время реализовано более 250 проектов, созданные студией сайты получили 10 дипломов международных конкурсов. Наши клиенты: Life:), ЭкспертЦентр, Heineken, Mitsubishi Motors, группа компаний «Трайпл», Hewlett Packard, автоцентр Opel, Приорбанк, РРБ-Банк. Основные направления деятельности: разработка сайтов, разработка интерфейсов программ, логотипы и фирменный стиль, брендинг, продвижение сайтов, разработка медийной интернет-рекламы.

 

Хотите сообщить важную новость? Пишите в Телеграм-бот.

А также подписывайтесь на наш Телеграм-канал.

Горячие события

Gismart Online Meetup
9 декабря

Gismart Online Meetup

Минск

Читайте также

«Ребята, я не могу». Участковый ушёл в motion-дизайн после 12 августа
«Ребята, я не могу». Участковый ушёл в motion-дизайн после 12 августа
«Ребята, я не могу». Участковый ушёл в motion-дизайн после 12 августа
11 комментариев
7 курсов по API, чтобы разобраться в теме
7 курсов по API, чтобы разобраться в теме
7 курсов по API, чтобы разобраться в теме
API — application programming interface, или «интерфейс прикладного программирования» — служит интерфейсом между программами и облегчает их взаимодействие. Мы собрали список курсов, которые помогут вам разобраться в API и внедрить их в вашу работу.
Windows 10 ждёт масштабное преображение в 2021 году
Windows 10 ждёт масштабное преображение в 2021 году
Windows 10 ждёт масштабное преображение в 2021 году
Contented предлагает прокачаться в дизайне со скидкой в 45%
Contented предлагает прокачаться в дизайне со скидкой в 45%
Contented предлагает прокачаться в дизайне со скидкой в 45%
Получить профессию UX/UI-, веб- или графического дизайнера можно со скидкой 45% в школе дизайна Contented до 14 октября включительно.

Обсуждение

2

Вы лучше бы рассказали как юзабилити увеличили (если увеличили), а не как прикрутили тему Adobe Acrobat (tm)

Anonymous
Anonymous Team Leader в Booking.com
0

Плюс пятьсот!

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

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

Хотя, конечно, маковский дизайн удобней вендового, но эта софтина, как я понимаю, под маками не работает.

Anonymous
Anonymous
-1

я извиняюсь, но вот из-за такого колхозного мышление многие до сих пор выпускают программы в стиле Visual Studio 6... посмотрите гугл, посмотрите винду 7, будущее за рюшечками и ряшечками, а не за 16-цветными иконками и программистами, которые подходят к юзабилити только так как ему удобно и проще запрограммировать, а не так как хочет конечный пользователь

Anonymous
Anonymous Team Leader в Booking.com
0

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

И для поиска нормативных актов наличие рюшек скорее зло, чем благо. Интерфейс не должен принуждать пользователя покупать монитор 4:3.

Anonymous
Anonymous
-1

>> И для поиска нормативных актов наличие рюшек скорее зло, чем благо

это вам пользователи сказали? или это совковый подход программиста?

Anonymous
Anonymous Team Leader в Booking.com
0

Пользователи. С "совковым подходом программиста" я никогда не разговаривал.

Александр Ревяко
Александр Ревяко Директор в Студия Райт
1

Спасибо за рекомендации :) в следующих кейсах постараюсь больше с акцентировать на юзабилити.
Про повышение юзабилити: повторюсь еще раз что мы получили в работу уже фактически завершенный прототип интерфейса (и весьма неплохой и продуманный!), поэтому с нашей стороны повышение юзабилити сводилось к графическому решению, и все же некоторый функционал, в частности решение панели атрибутов документов, был рекомендован Студией. Да это решение аналогично тублару в Acrobat-е. В данном конкретном случае я считаю его бесспорно лучшим, поскольку задача была сделать интерфейс удобным и понятным, а не придумать «гениальное» дизайнерское решение.
За счет переноса атрибутов влево с опционально включаемой панелью мы решили дефицит рабочей области по вертикали и дали возможность пользователю одновременно работать с документом и с его связями, оглавлением и т.д.
Самыми важными улучшениями нового интерфейса я считаю:
1) появление интеллектуального поиска: одно поле вместо 13(!). Потому что не надо перекладывать на человека машинные функции (спасибо Гуглу)
2) Типографика списка документов. Думаю это экономит до нескольких рабочих часов пользователя в неделю.
Про «прикрутить тему» — не могу согласиться: каждый элемент от стрелки селектора до кнопки отрисован индивидуально под этот проект.

0

Очень симпатично. Немного смахивает на яблочный дизайн, но совсем чуть-чуть :)

1

Я не смог удержаться, насколько я знаком с рынком правовой информации, на Беларуском рынке. Мне очень сложно судить какой из продуктов более приемлем, есть всего пару крупных участников, а именно :
1. Эталон- НЦПИ , собственно у них все и покупают нормативно правовую базу, а уже после создают свои интерфейсы и пр.
2. Консультант плюс - филиал российской компании, замечу весьма успешный на нашем рынке, не только благодаря аналитике, которую они включают в свою базу :-).
3. Юсиас- Регистр - неоднозначная компания, но в конкуренты ее уже никто не ставит.
4. собственно Эксперт - новый интерфейс, это большой плюс, юзабилити по внешнему виду сложно определить , посмотрим что получится.
5. Бизнес-Инфо упорные ребята, на мой взгляд на данный момент просто держатся за своих старых клиентов.
Сугубо на мой взгляд, рынок распределен примерно так:
1. 30%
2.55%
3. 4-5%
4. 4-5%
5. 4-5%
Сразу замечу это сугубо мой личный взгляд, почему я поставил так много 1-му, так это только благодаря тому, что ВСЕ Беларуские сельисполкомы пользуются именно этой базой, что и понятно.
Я не претендую на правду, мне просто хотелось бы в диалоге прояснить настоящую картину, и понять насколько на данный момент перспективно описанное действие в данной статье.

Anonymous
Anonymous Менеджер проектов в Пятый терминал
1

Браво, новый дизайн намного лучше старого - это факт. Ну а что он "яблоковатый" - лично я очень "за", не вижу ничего плохого в том чтобы перенять хороший опыт, и до тех пор пока Apple не возражает - всё в порядке.

Есть небольшое пожелание к "будущим свершениям": ориентировать дизайн и на широкоформатные мониторы. Особенно форму поиска. Сейчас на экране множество горизонтальных "полос", но ширина экрана используется неэффективно - от нее нет никакой пользы. Идеально было бы дать возможность перемещать панели окна.

Александр Ревяко
Александр Ревяко Директор в Студия Райт
0

Согласен.
Хотя мы проектировали под 4:3 (1024 + ) и под 16:9 (1280 + ) оптимального заполнения рабочей зоны удалось достичь не везде. Особенно это заметно в форме «Тематического поиска» :( Попросту нет что туда разместить — возможно надо пересмотреть это решение системно.
Думаю в следующих версиях это будет решено в том числе и за счет пересмотра панелей окна либо возможности их пользовательской настройки.

Виктор Хаменок
Виктор Хаменок CEO в Rozum Robotics
1

Интерфейс шикарный, а вот статья не получилась, на мой взгляд :) Как минимум, thumbnail-ы стоило сделать кликабельными, чтобы можно было увидеть полноценную картинку.

Александр Ревяко
Александр Ревяко Директор в Студия Райт
1

Спасибо :)
Завтра добавим по крайней мере первые скрины в реальном размере.
Несколько затруднительно это на dev.by (

Anonymous
Anonymous
-1

Как была получена эта и подобные тепловые карты http://db.by/images/dev/image028.jpg?

2

Фотошопом?

Anonymous
Anonymous
-1

Конечно фотошопом, именно по этому мой вопрос, видимо, и проигнорировали.

Студия Дмитрия Борового работает в новой нише и публикует какие-то результаты - это здорово! Конечно к некоторым решениям (например, форме "поиска по наитию") есть достаточно много вопросов (вместо "много вопросов" я хотел написать "много критики", но не разобравшись в контексте и условиях проекта не стал так писать), некоторые определения являются фантазиями на тему ("создание привлекательного и эргономичного дизайна интерфейса").

Вот только эти фейковые изображения http://db.by/images/dev/image028.jpg очень сильно огорчают

Александр Ревяко
Александр Ревяко Директор в Студия Райт
0

Не проигнорировали :) Просто вам, Павел, я собирался отписать лично.
К сожалению знаком с вами только заочно по usability.by и презентациям на gui.ru
Поэтому был удивлен и обрадован увидев ваш комментарий здесь: не ожидал услышать мнение настоящего эксперта.
Про тепловые диаграммы: мы не делали eye tracking тестирования и нигде в статье не говорим об этом, но чтобы лишний раз не вводить читателей в заблуждение — мы обновили статью добавив комментарий по этому поводу.

Anonymous
Anonymous
-3

Лучший способ расположить к себе собеседника - сделать комплимент.

Александр, вы опубликовали сомнительные картинки, а потом добавить к ним подпись "это не то, что вы подумали" :). Призываю к голосу разума - уберите эти две картинки. Два изображения "Было" и "Стало" прекрасно иллюстрируют проделанную вашей компанией работу без псевдотепловых карт.

Кейс может привлечь внимание остальных игроков на рынке этого ПО, так пускай в нём не будет явных изъянов.

Александр Ревяко
Александр Ревяко Директор в Студия Райт
0

Спасибо. Последую вашему совету.

Anonymous
Anonymous
-1

Александр, обратил внимание, что статья изменилась, но зайдя на ваш сайт http://www.db.by/portfolio/interface/expert/ грусть снова вернулась, потому что всё осталось по-прежнему http://www.db.by/images/works/expert/vnimanie_alt2.jpg

Хочу у вас спросить, почему так тяжело с ними расстаться? Спрашиваю без сарказма. Вы считаете, что эти изображения как-то усиливают описание кейса?

Даже если сделать поправку на то, что карты получены с помощью фантазии и фотошопа, а не eyetracker'а (у вас на сайте такого комментария нет), то всё равно реальные карты, скорее всего, будут отличаться:

1. Если пытаться проиллюстрировать, что "пользователь быстро выхватывает заголовки, легко определяя насколько документ релевантен его запросу", то необходимо нарисовать нагретую вертикальную линию. Это как раз и показывает, что в новом дизайне пользователь не вчитывается в заголовки, а быстро сканирует результаты. Карта должна была получиться такая:
http://www.billhartzer.com/wp-content/uploads/2009/06/usercentric-google-vs-bing-eye-tracking.jpg

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

Александр, попытка номер 2. Сделайте волевое решение?

Anonymous
Anonymous
-1

какой только фигни не придумают чтобы грошы с кастомера трясти )) eyetracker, нагретая линия... нагретый кастомер )

Anonymous
Anonymous
-1

Тонко. Зачёт!

Anonymous
Anonymous
0

ребята, вы что смеётесь?
это же сплошные брёвна вперемешку с неправильным выравниванием

дизайнеры решили испортить сетку прелогами "с, по" вместо того, чтобы показать период через тире "--"
половина полей со скруглением, половина без - признак неудачи

"шрифт -" - это вообще финиш безумия
шрифт интерфейса должен устанавливаться системными настройками

"Одно из правил представления функциональных элементов окна"
к чему правая вертикальная направляющая?!
почему она пересекает иконку очистки поля?

короче, это - сплошная шляпа

Александр Ревяко
Александр Ревяко Директор в Студия Райт
0

Первую часть пропущу за отсутствием конструктива.
Про «испорченную сетку»: во-первых в сетках важно не забывать, что оптика важнее геометрии, во-вторых здесь с датами не все так просто: дата может быть как точным числом так и началом диапазона (в том числе одностороннего). Поэтому полагаю почтенной аудитории продукта приведенное решение более очевидно чем конструкция [ ] — [12.10.2012] пусть даже выровненная по сетке.
Конечно форму тематического поиска можно и нужно улучшить за счет отказа от машинных «начинается с / cодержит / заканчивается», в 26 раз удачнее решить работу с диапазонами дат и их представление, но это только в последующих итерациях по улучшению UI. Текущее представление сильно связано с возможностями и скоростью реакции системы (ПО).
«Со скруглениями» идут поля ввода и вызова модальных окон для множественного выбора, например рубрики, органы принятия и т.п. С меньшими скруглениями выполнены только секлетбоксы и выпадющие меню, т.е. те элементы которые при раскрытии дают габарит. Если вы мне можете привести хоть один удачный пример селект боксов «со скруглениями» я буду несказанно рад :) Насчет неуместности их одновременного использования момент спорный. Догматов я не встречал.
Про шрифт: увеличение/уменьшение шрифта есть в системных настройках плюс опции по выбору гарнитуры, цвета, полноты и т.д. На основной тулбар же вынесен упрощенный контроллер. Полагаю это было продиктовано пожеланиями пользователей довольно существенную часть из которых составляют люди с ослабленным зрением. Тем более что у нас там всего две менюшки и кнопка.
На картинке с направляющими действительно ошибка — это старый скрин (спасибо что указали — завтра перезальем). Иконка очистки поля должна располагаться внутри поля. Правая красная направляющая показывает что поля «со скруглениями» имеют выключку в 1-2px относительно границы.

Anonymous
Anonymous
1

"Первую часть пропущу за отсутствием конструктива."
ну зачем же, давайте я добавлю конструктива - вы видели названия городов длиной 70 символов?
а "щёлкните мышью для выбора значения из классификатора" - это по-вашему нужно 10 раз на странице писать?

"Поэтому полагаю почтенной аудитории продукта приведенное решение более очевидно"
вы кое что упустили
если бы там не стояло иконки календаря, то да "с ... по" пригодились бы
но сейчас конструкция выглядит "с [...]дата по [...]дата" и её можно упростить (улучшив тем самым сетку) - "[...]дата -- [...]дата"

"Насчет неуместности их одновременного использования момент спорный. Догматов я не встречал."
это просто вкусовщина, на которую необязательно искать догмы
но чуть менее чем обязательно нужно использовать системные контролы - с ними за вас уже подумали лучшие специалисты

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

"Тем более что у нас там всего две менюшки и кнопка."
может туда ещё кнопку смены фона рабочего стола и управление проигрывателем? оО
места-то много ещё осталось!

одним словом, процитирую Вас
"Милое сердцу советского дизайнера, рисование иконок.."

Александр Ревяко
Александр Ревяко Директор в Студия Райт
0

1 Вы спутали окно прототипа и окно финального решения в тематическом поиске "щёлкните мышью для выбора значения из классификатора" повторяется толкьо в прототипе.
2 с [...]дата по [...]дата это случай указания точного диапазона. В случае одностороннего конструкция выглядит так: по [...]дата
3 Не совсем понял про город вероятно вы имели в виду «страна принятия», дело в том что в полях слов может быть N (это список) соответственно и длина поля сделана большой.

Я готов отвечать на конкретные вопросы или конструктивную критику :)

1

Друзья! Коллеги! Такие бравадные статьи надо писать в том случае, если действительно есть драматическая разница между БЫЛО и СТАЛО.
С другой стороны, если это первый проект в таком направлении — продолжать стоит.

Это чисто мое, непрофессиональное мнение непрофессионала.

0

Порой бывает так, что бюджет проекта не позволяет разработать продукт "невероятного качества", поэтому продукты получаются именно такими какими они получаются и требовать больше нельзя, ни кто не озвучил бюджет данного проекта, но я думаю, что он был не велик, т к заказчик сам предоставил прототип интерфейса, а ограниченный бюджет - это минимальные сроки => спорить о его качестве, недостатках и достоинстве неправильно!
Проект не получился маргинальным, иконки симпатичные, контент читабелен... может в следующей версии все недостатки и недоработки этой версии будут устранены. Исполнитель и заказчик получил экспириенс и некст лейвел... как всегда надеемся на лучшее!

Anonymous
Anonymous
-1

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

Anonymous
Anonymous Team Leader в Booking.com
0
Anonymous
Anonymous
-1

чушь

mr-smith
mr-smith Developer в Ближний Космос
0

Мне цветовая схема нравиться, но было бы неплохо несколько замутить, ибо на вкус и цвет все карандаши разные...
Тоже кажется что поле поиска чересчур длинное, может есть возможность в столбцы разнести.
В датах выбор периода точно нужен? Имхо указывая одну либо две даты вполне точно определяется период, без дополнительных чек боксов. Хотя пользоваться будут обычные люди, им может и проще будет понять. Или поиск часто осуществляется по определенному дню? Я без понятия :) День то можно и 2 датами указывать.
Внизу папок пользователя вообще бардак, вряд ли с этим будет удобно работать.
Еще вижу фильтр какой то есть, интересно как он работает. Я вообще люблю обычный текст бокс для быстрой фильтрации результата по определенному кейворду. Имхо удобная вещь.
Ну и значок "аналитика вспомогательные материалы" у меня почему то вызвал ассоциацию с "избранное", интересно почему :) А по смыслу совсем не то.

ЗЫ. Ненавижу сплэш-скрины.

Anonymous
Anonymous
0

У меня есть чувство что где то я все это уже видел. Естественно, я понимаю что все новое это хорошо забытое старое, но:
Элементы управления и ввода уж очень напоминают QT4... (привет KDE4)
Логотип похож на IE8...
Общее расположение элементов и стиль напоминают последние Адобовские творения из линейки CS4 (photoshop, dreamweaver, etc.)
Признавайтесь, откуда черпали вдохновение? :) Хотя может я включил слишком большой уровень паранойи...

В принципе дизайн смотрится достаточно красиво и стильно. Хорошо что разработчики начали избавляться от win95 style =), главное что бы это не повредило юзабильность и удобство.

Спасибо! 

Получать рассылки dev.by про белорусское ИТ

Что-то пошло не так. Попробуйте позже