Ещё есть сайт

Позднее Ctrl + ↑

Компьютерщик

Заменяю, починяю. Вжух…
Задача: заменить сдохший аккумулятор

Заводская батарея стала экстремально быстро разряжаться и появился странный запах из корпуса. Но при этом МакОС по прежнему считала, что с аккумулятором всё ОК. Только в последние несколько дней появилось сообщение «Требует обслуживания».

Процесс

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

Бюджет: 3500 ₽ + 1 час работы

Untitled Document

Церматт

Подьем 1600→3920, спуск 3920→1860

Спуск с ледника

Untitled Document

Корпус МПР-7

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

Эскиз нового корпуса МПР с седьмой версией программы внутри



Предыдущая модель серии
Так выглядит одна из модификаций текущего поколения прибора и шестая версия программного обеспечения

Предыдущий корпус и интерфейс 6.0

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

Ещё несколько картинок

Untitled Document

Новый продукт в экосистеме

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


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

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

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

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

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

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

Untitled Document

Седьмая версия интерфейса реанимационного монитора

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

Компания разрабатывает и производит медицинские приборы. Одно из устройств называется МПР — монитор пациента, реанимационный.

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

Шестая версия была такой

Шестая версия прибора МПР

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

Интерес работе над проектом добавляет множество технических ограничений, российских и международных стандартов медицинской отрасли.
К тому моменту как меня пригласили проектировать МПР, команда проекта уже работала над новой версией. Ребята делали, затем переделывали, а после ещё несколько раз заново всё переиначивали. Такое бывает.

Несколько промежуточных дизайнов

Для начала мы решили взять самый сложный раздел системы, спроектировать несколько вариантов и провести первичные тесты.

Кусочки видео с тестирования прототипов



В перчатках



Тест привычек и обновленной навигации

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

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

Щепотка из элементов внутренней кухни

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

Основные разделы работы с МПР — «Мониторинг» и «История». Настройка режима и вида работы реанимации производятся в калькуляторах, а для настройки работы всего прибора, вариантов отображения данных и сбор показаний пациента в разделе «Настройки».
Итак



Монитринг

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



Калькуляторы
Нужны для тонкой настройки параметров реанимации.

В компании есть группа врачей, составляющих экспертный совет. Они здорово помогают при проектировании, рассказывают много мелких и неочевидных деталей из практики. Берут предварительные образцы на тестирование в реальных условиях. Я благодарен и всегда рад таким возможностям при разработке проекта.
А  ещё, примерно в середине проектирования, появилась возможность показать прототип новой версии на выставке в Дюссельдорфе и получить дополнительные отзывы.



История
Этот раздел содержит три экрана и служит для детального просмотра трендов пациента, корректировки реанимации и лечения.



Настройки
Для настроек всего и создания из них пресетов для реаниматологов разного профиля.

Дизайнер почти всегда передаёт свою в  верстку и разработку. А потом это всё кто-то поддерживает и развивает. Бывает разработчики внезапно говорят: «сделать нельзя». Часто ссылаются на технические ограничения. В таких случаях я всегда рассказываю о проблеме всей команде. А опыт работы над разными продуктами и технический бекграунд помогают аргументировать решение и объяснить, как можно реализовать фичи, кажущиеся невозможными, где и как это успешно применялось. Вместе задуманное всегда получается.

Посмотреть мой промдизайн нового корпуса

Untitled Document

Корпоративный сайт и университет

Проект под тайной. Чтобы увидеть как работает сайт и университет, приходите работать Тритон.

Палитра всех элементов сайта продиктована фирменным стилем компании.

Задача
Задизайнить обновление корпоративного сайта.

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

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

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


Самое важное на главную страницу

Палитра всех элементов сайта продиктована фирменным стилем Компании

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


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

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

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

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



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

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

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

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



Контакты

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



База знаний
Книги, журналы, выдержки из научных статей и докладов. Инструкции, регламенты и учебный план сотрудников



Календарь событий



Несколько шаблонов для редакторов сайта



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

Untitled Document

Операционка от АйБиЭм

Сегодня один разработчик рассказал мне, что все версии Виндоуса его бесят своим неудобством. Даже последняя, десятка.

Первый его компьютер работал на операционке OC/2 от АйБиЭм. Было легко и понятно пользоваться компьютером под управлением этой оси. Мне стало любопытно, полез почитать об истории создания этой штуки.
Первая публичная верст вышла почти на 4 года позднее чем первая макинтош от эплов.
Сравните на сколько похожи принципы, использованные при проектировании интерфейсов.
Первая версия МакОС (24 янв 1984) и первая версия ОС/2 (дек 1987)

Был рад узнать об ОС/2 АйБиЭма. Всегда интересно слышать истории и отзывы, что принципы человекоориенторанного интерфейса вызывают комфорт у пользователей, а иногда и теплые воспоминания :-)
Жаль, что у ребят не хватило запала развивать операционку дальше.

2019   IBM   Microsoft   OS   История
Untitled Document
Ранее Ctrl + ↓