{"id":7297,"title":"\u0417\u0430\u043a\u0430\u0442\u0438\u043b\u0438 \u0432\u0435\u0447\u0435\u0440\u0438\u043d\u043a\u0443 vc.ru. \u0420\u0430\u0441\u0441\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u0438 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c, \u043a\u0430\u043a \u044d\u0442\u043e \u0431\u044b\u043b\u043e","url":"\/redirect?component=advertising&id=7297&url=https:\/\/vc.ru\/promo\/300923-proveli-vecherinku-vc-ru-i-sdelali-ofis-uyutney-s-pomoshchyu-novogo-servisa-ot-ozon&placeBit=1&hash=1786c9dcf11a3b054c8e53004e27074664313ed4055e24064ede059ebc186db8","isPaidAndBannersEnabled":false}
Дизайн
ITSimplex

Как мы разрабатывали дизайн софта для бизнеса + фичи

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

Это был долгий путь от простого наброска на бумаге до дизайна программного обеспечения.

Артем Сергиенко
Глава проекта SimplexPlan

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

Что вам нужно знать о программе? По большому счёту софт является конструктором экономических моделей коммерческих предприятий. Внутри движка было заложено большое количество расчётов, код которых поместился на 44 страницах А4. Их цель — найти способ поднятия прибыли компании пользователя. Если вас интересует методы расчётов и их цель, то можете прочитать подробнее здесь.

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

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

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

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

Начнём!

Первый прототип дизайна программы

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

Каждому инструменту — своё место.

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

Фича № 1. Блок история

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

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

Фича № 2. Менеджер проектов

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

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

Выбор палитры

Выбрать подходящую палитру цветов — очень важная задача, ведь пользователю необходимо на протяжении длительного времени работать с таблицей. Мы рассмотрели множество цветовых решений. Стоит ли говорить, что зелёный цвет отлично подходил под формат экономической программы. Но фразы: «О, это же как в Excel!» мы не смогли уйти.

Мы даже сделали свою темную тем!

Фича № 3. Модуль «Анализ»

Сколько товаров и услуг произвести в следующем месяце, по какой цене их продавать? Нужно ли рискнуть? Какое количество ресурсов задействуется под каждый сценарий?

Это вопросы, которые задают себе руководители бизнеса каждый день.

Карта сценариев — это карта бизнеса. На ней изображено всё, что нужно для получения максимальной прибыли.

Переход на светлую сторону

По итогу было принято решение в пользу светлых тонов. Но оставалось масса нерешённых вопросов с удобством интерфейса.

Фича № 4. Модуль «Эластичность»

Задачей каждого экономиста в том числе является формирование предложений по улучшению экономики предприятия.

Что изменить в этой ситуации? С какими параметрами лучше работать? Окупятся ли изменения?

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

Фича № 5. Графики всегда под рукой

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

Фича № 6. Лаунчер

Идея создания лаунчера позаимствована из мира компьютерных игр. Подробнее об использовании игрового опыта я рассказывал в своём ютуб-интервью.

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

Итог

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

А как вы считаете, насколько важен интерфейс для офисных программ? 
UI нужно уделять большое количество времени. Может быть даже больше, чем коду.
Дизайн программы просто не должен отвлекать от рабочего процесса. На его разработку стоит потратить как можно меньше времени.
Профессиональные программы на то и профессиональные, что требуют большого количества времени на разбирательство и не обещают удобный интерфейс. Не стоит тратить на него время.
Показать результаты
Переголосовать
Проголосовать

Понравился ли вам наш дизайн? Чтобы вы могли в нем улучшить? Нам очень интересно ваше мнение!

Главный UX/UI-дизайнер

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

{ "author_name": "ITSimplex", "author_type": "self", "tags": ["\u0441\u043e\u0444\u0442","\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430","\u043e\u0444\u0438\u0441\u043d\u044b\u0435_\u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u044b","\u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f","\u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441","\u0434\u0438\u0437\u0430\u0439\u043d_\u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u044b","\u0434\u0438\u0437\u0430\u0439\u043d","ux"], "comments": 5, "likes": 3, "favorites": 22, "is_advertisement": false, "subsite_label": "design", "id": 162863, "is_wide": true, "is_ugc": true, "date": "Wed, 30 Sep 2020 17:42:03 +0300", "is_special": false }
0
5 комментариев
Популярные
По порядку

Жаль что в опроснике нет промежуточного варианта, вроде "UI на столько же важен, как UX, как код и т.д. по списку".
Судя по тексту вы очень хорошо подошли в вопросу алгоритмов и статистики, но UI очень и очень слабый (о UX сказать нечего, т.к. в задачу вы погружены явно лучше меня)

1

Никита, благодарим за интерес к статье! Можете отметить, что в UI вы считаете слабым исполнением?  Мы всегда стремимся к развитию, поэтому ваши замечания были бы очень полезны

0

Интерфейс напоминает бизнес-мастадонтов 2000-х, а в некоторых местах так и вообще Windows 3.11 ;)

Что вам мешает посмотреть конкурентов и последние тренды в дизайне бизнес-интерфейсов?

0

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

0

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

Ольга Архипова не позорьтесь. Так гордо писать себе звание «главного UX/UI дизайнера» с такими скилами это просто днище. Посмотрите Ольга как делают интерфейсы люди которые это действительно умеют, например кейс skyeng на бехансе как у них выглядит интранет или кейс агенства шишки по логистической системе огромной. А это просто детский сад и полная интерфейсная немощность.

0
Читать все 5 комментариев
Умная боксерская груша, которая научит вас драться онлайн

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

Час в неделю — на помощь детям: как 303 учителя со всей России стали онлайн-волонтёрами для школьников

Движение «Педагоги-волонтеры России» учит ребят из детских домов и малоимущих семей. Их репетиторы уже помогли 1 350 детям наверстать знания по школьным предметам. Сейчас платформа ищет новых учителей по всей России. Особенно — математиков и программистов

У альфа-банка стоит ограничение на отображение баланса в пуше, его не видно полностью

Скорее всего, Альфа-банк провел свой аналог "Игры в Кальмара", где разыграл суперприз. Их версия отличается от корейской тем, что там не надо никого убивать и проходить испытания. Вы, как обычно, пользуетесь картой и получаете шанс выиграть супер приз! Когда мне пришел этот пуш, я сразу понял, что не зря был вашим клиентом столько лет! Вы…

Улыбнитесь, вас снимают: как биометрия меняет жизнь банковских клиентов

Что такое биометрия, как ее используют банки и что нас ждет в будущем с единой биометрической системой, мы узнали у Дарьи Скачковой, управляющего директора в Газпромбанке

Секретная сделка Google и Facebook и другие факты из нового антимонопольного разбирательства

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

Кикшеринг станет ещё доступнее, но для крупных игроков места больше нет: интервью с инвесторами кикшеринга «Юрент» Статьи редакции

Андрей Азаров и Михаил Гейшерик рассказали, зачем «Юрент» купил сервис аренды обычных велосипедов, продолжится ли бурный рост кикшеринга и что этому может помешать.

Михаил Гейшерик и Андрей Азаров
Как улучшить идеально настроенную ecom-рекламу? Удваиваем онлайн-продажи обувной федеральной сети всего за месяц

Хитрим с Google Merchant, усмиряем алгоритмы, делимся лайфхаками. Как за неделю обрушить рекламу обувной федеральной сети, но удвоить с неё продажи всего за месяц. Свежий кейс агентства МАКО в 2021 г.

«AliExpress Россия» получил контроль над KazanExpress, который хвалил за эффективность и работу с малым бизнесом Статьи редакции

Сооснователь маркетплейса Линар Хуснуллин рассказывает, что он считает особенным в своём проекте.

Почта России запустила доставку из отделений роботами Яндекса

Почта России первой из почтово-логистических компаний начала доставлять посылки с помощью беспилотных роботов-доставщиков Яндекса. Проект реализован при поддержке Фонда «Сколково». На первом этапе 36 роверов будут осуществлять доставку из 27 отделений в Москве. Воспользоваться услугой можно будет через приложение Почты на Android, на старте…

Предсказать и оптимизировать: плавим сталь с помощью Data Science

Как создавали программу, которая помогает металлургам экономить 3-5 млн долларов в год

Какие акции посоветовать новичку: российские или американские
null