Ещё есть сайт
Задача: задизайнить интерфейс экранов планшета покупателя
Планшеты устанавливаются в качестве дополнительного экрана кассы в магазинах и супермаркетах
Вся фишка планшета связана с дизайном работы нейросетки. Она специально обучается так, чтобы делать планшет полезным для каждого покупателя в отдельности.
Хочу рассказать об очередном обновлении веб-сервиса Меркаты для управления магазинами.
Задача: Вытащить всё самое полезное наружу, предложить новые фишки, обновить юай.
Решение
За последнее время в сервисе появилось множество функций и важных инструментов. Стало возможным настраивать интеграции с разными сервисами, вышло мобильное приложение, а касса обзавелась рядом важных фишек. Всё это нужно показать и сделать удобным в использовании.
Выглядит обновление так
Самое важно в обновлении и вытаскивании основных бизнес инструментов на поверхность в том, что все эти фичи нужно хорошенько прогнать по пользовательским тестам. Выявить важные потребности и часто используемые сущности, но гораздо важнее, найти редкоиспользуьемые. После подумать почему они таковыми являются, спрятать их поглубже либо заменить на другие фичи сервиса.
Чем старше продукт, тем больше обрастает мусорными функциями, которые мешают пользователям использовать действительно полезный функционал. А пользоваться сервисом становится сложнее.
Мерката в списке лидеров этого челенджа. Сервис оброс кучей всего за недолгое свое существование. Помимо того, что этот груз стал тяжелым и путанным с точки зрения бизнеса, поддержки и развития, так ещё и непонятен с точки зрения профита для пользователей. Ведь часто кажется, что внедрять новые функции в АйТи дешево и всегда полезно.
Кстати, подробно почитать про эту ловушку можно книгах Купера.
К основной теме
Стоит отметить и первый этап работы над проектом, это был гайд по стилю. Работа подразумевала глобальную приборку интерфейса сервиса и создание единой базы знаний для всей команды Меркаты. При этом поведение, расположение основных инструментов и внешний облик изменялся не существенно. Так, чтобы пользователям было не больно. Но отображение элементов становились чище и стиль становился взрослее и крепче. Кнопки, прочие элементы и анимации разных разделов приводились к единому виду и подчинялись единым принципам поведения.
Теперь макеты требуют адаптивный подход в верстке и все страницы научились вмещаться в маленькие экраны, например, в разрешение 1024 на 768 пикселей. При этом нет никаких артефактов или горизонтальных скроллов в меню.
Обновление 2.0 стало возможным проще и быстрее реализовать благодаря, сделанному ранее, переходу на компонентный подход и подробному гайду
Ключевая задача, которую решает новый облик, заключается в том, чтобы повысить скорость работы и снизить поиск частоиспользуемых функций сервиса, при этом не меняется системная аналитика и нет изменений в паттернах управления.
Все основные метрики бизнеса выведены в боковое меню и всегда видны пользователю, в каком бы разделе сервиса он не находился.
Не всегда движение вверх или рост показателей являются положительной динамикой, чтобы подчеркнуть контекст стрелочки окрашены цветом.
Это упрощает визуальное восприятие и снизжает время взаимодействия с интерфейсом.
Нажатие на пиктограмму приводит к переходу в соответсвующий раздел. Все системные уведомления, описание новых функций, обновления или сообщения от техподдержки объединены в один раздел с общими настройками профиля пользователя.
Специальные настройки и интеграции с другими сервисами, например 1С-бухгалтерия, находятся на виду, в отдельном разделе. А все взаимодействия с технической поддержкой и справочной информацией сведены в одну кнопку в подвале меню.
Небольшой кусочек сервиса для товароведов и мерчандайзеров
Кстати, матрасик грида тоже живой
Кажется, я вам еще не показывал свой самокат.
Выглядит он так
Я получаю невероятный кайф от передвижениям на нём по городу. С начала апреля старался использовать самокат каждый день, если было нужно куда-то выехать из дома. Сегодня он сообщил, что я проехал 1024 км.
Помимо технологичности исполнения, дизайнеры продумали и удобство управления. На самокате есть тормоза с защитой от блокировки колеса. Что-то похожее на систему АБС в автомобилях. Но больше всего удобства в дороге добавляет круиз контроль.
На днях Сегвэй анонсировала ещё одну клёвую штуку
Задача: показать сводку по всем пациентам отделения реанимации на одном устройстве, сделать возможным быстрое реагирование при критических показателях жизнеобеспечения, управлять данными и осуществлять обмен ими в рамках лечебного заведения.
Компания ведет исследования, разработку и внедрение медицинских приборов и технологий. Направления два: мониторинг жизненно-важных функций пациентов и искусственная вентиляции легких с анестезиологическим сопровождением.
Меня позвали для работы над проектом интерфейса системы центрального мониторинга СЦМ.
В СЦМ два основных раздела — наблюдение за пациентами в реальном времени и различные справочники, журналы истории наблюдений и настройки. Основной сценарий использования системы — непрерывное наблюдение трендов, в больше степени в ночное время суток. Тёмные тона оформления способствуют снижению усталости глаз.
Спроектирована модульная сетка, задающая правила компоновки блоков внутри разделов.
Мониторинг со списком пациентов всегда наведу и содержит миниатюры основных показателей, снимаемых медицинскими датчиками. По умолчанию выводятся карточки с основными показателями жизнедеятельности по каждому пациенту. Это может быть таблица из 32 карточек либо блок с мониторингом одного человека.
Вторую часть экрана занимают различные разделы которые нужны пользователю для работы с данными конкретного пациента или настройками работы системы
Цветами кодированы сигналы тревог. Это международный стандарт. Помимо цветов, стандарты регламентируют множество тонкостей, медицинской специфики, формат пиктограмм и ещё много чего графического в оформлении. Вот так выглядит сигнализация и счетчик тревожных показателей пациентов отделения
А так, когда жизненные показатели находятся в рамках лечебного процесса
Медработник, наблюдающий за показателями может открыть подробный мониторинг показателей конкретного пациента. Таблица миниатюр съезжает влево, высвобождая место увеличенным трендам
Если есть отклонения показателей от нормы лечения, система как бы гасит экран, выделяя «тревожный» параметр на экране и сигнализируя о тревоге в списке событий. Второстепенные изображения на экране становятся монохромными, позволяя легче ориентироваться пользователю
Каждая строка скомпонована в нескольких размерах и содержит набор показателей и непосредственно график тренда мониторинга. При этом, важное в дизайне трендов не сама картинка, а правдивость её информации. За это отвечает отдельный движок отрисовки графики.
Можно настроить комбинированную строку
Над трендами выдержка о пациенте, плане его лечения, медицинском отделении и краткий журнал текущих тревог
По каждому пациенту ведется журнал текущей госпитализации и общей историей анамнеза
Система поддерживает работу на нескольких экранах. При этом компоновать рабочую область можно в различных комбинациях и выводить изображение, подключив до трех мониторов одновременно
Настройка комбинаций экранных блоков упрощена до наглядного выбора нужных
Важное в дизайне трендов не сама картинка, а правдивость её информации. Например, про график ЭКГ писал Саша Ревяко
Парочка фото с испытаний и тестов
Сделал книгу проектного бюро «R1»
Задача: разработать книгу и дополнить фирменный стиль.
Для начала я посетил проектный офис, поговорил с сотрудниками разных отделов, посмотрел дизайн интерьера и мебели, познакомился с проектами и узнал амплуа бюро. Это помогло глубже погрузиться в специфику компании и понять как будет правильно подчеркнуть эти детали в фирменном стиле. А в процессе работы я постоянно вовлекал ребят в обсуждение макетов концепции, собирал обратную связь и внимательно записывал все пожелания и замечания. В бюро работает много архитекторов и дизайнеров, поэтому моё стремление реализовать подход командного дизайна приняли очень позитивно.
Из исходников был только логотип, достаточно лаконичный и хорошо подчеркивал архитектурный профиль компании. Я лишь немного поправил форму и вес линий. В качестве основного шрифта был принят ОсноваПРО.
Композиция на листе
R1 — архитектурное бюро полного цикла. Специфику проектов можно разделить на несколько общих направлений: бизнес-центры, жилые комплексы, торговые центры, аэропорты, уникальные и объекты медицины. Каждое направление выделено цветом, пиктограммой и иллюстрацией.
Каждый раздел в книге выделяет специальный разворот
Объекты внутри раздела тоже разделены разворотом, внутри которого есть полупрозрачный лист списка объектов.
При этом верстка учитывает оба направления перелистывания книги, а визуальные маркеры помогают быстро найти нужный разворот даже при не полном раскрытии листов. Корешок книги также содержит опознавательные знаки для быстрого поиска книги на полке. В конце книги можно найти несколько листов кальки, для скетчей и заметок
География объектов бюро на стилизованной карте.
Эта стилизация сначала была принята в качестве фирменного паттерна. Было решено использовать его в оформления интерьеров, предметов мебели и на различных носителях фирменного стиля.
Книга получилась хорошей, ребята остались довольны.
Спасибо Валерии Белкиной, Дмитрию Реуту и всем сотрудникам бюро за доверие и оргподдержку.
