Блог

Untitled Document

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

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

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

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

2019   IBM   Microsoft   OS   История
Untitled Document

Ещё одна проверка

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

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

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

Стартовый экран выглядит так


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

Альтернативный вид стартового экрана


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

Например, можно так


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

Пошагово

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

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

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

Есть ещё много «узких» мест и сценариев, решение которых нужно показывать на дополнительных картинках.

Но не смотря на это, уже можно запускать тестирование прототипа и собирать комментарии пользователей.

Ещё
Прочитать про концепт кассы для проверки множества разных идей.


Untitled Document

Рочестер

В город приехал из Нью-Йорка, использовал Грейхаунд. Это такая хитрая и дешёвая сеть междугородних автобусов в США. В Рочестере был пять дней и успел узнать город глазами студента местного колледжа.
Здание библиотеки Раш Рес

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

Это разные здания студенческого кампуса, в переводе, общаги.

Символика студенческого сообщества Сигма Чи

Дорожка из песка и гранитной крошки

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

Недавно тут проходил концерт памят Виктора Цоя и группы КИНО. Это было написано в одном из объявлений. Американские студенты пели их песни. Я изрядно офигел!

Первое, что я почувствовал — парк. А внутри этой зелени разбросаны здания университета. От этого атмосфера внутри какая-то невероятная, ничего не давит и не отвлекает. Ноль шума, нет ни визуального, ни акустического. Человекоориентированная среда.

Ещё учебный корпус университета

Многофункциональный зал

А это скульптура первого президента университета, Мартина Бремера Андерсена

Оказалось, что все или почти все исследования студенты проводят вне отрыва от современной практики. Студенты медики, например, закреплены в местных лабораториях при больницах. И все свои эксперименты обязаны проводить там. Это очень круто.

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

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

Дорожка к кампусам, проходящая вдоль реки Джинеси

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

Разные скульптурные инсталляции вокруг него

И ещё немного города

Untitled Document

Проверка

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

Это не первая попытка провести подобное тестирование. Ранее я делал концепт кассы для проверки множества разных идей.


Untitled Document

Батл в Контуре

Так было в Контуре, на дизайн апдейте 1.2 (третьем по счету)

Ребята рассказали про то как уже почти 9 лет пилят иконочный шрифт и очень хотят перестать это делать

Все присутствующие узнали кто такой Михаил Череда и какие проекты он дизайнит для Екатеринбурга

Показали Льва Либермана, а Лев показал других ребят, каллиграфов и леттеристов

Ещё, Контуровцы решили разнообразить митапчик, и провели Батл.
Дизайнерам, Максиму (Джетстаил) и Саше (Контур) дали задание — задизайнить этикетку для вина. Раздали библиотеку элементов в Фигме и дали попробовать вино.
Такие этикетки получились в результате

Пока ребята рисовали, все остальные поедали пиццулю

Остальные фото в альбоме Контура

Приходите на следующий дизайн апдейт, предлагайте свои темы и участвуйте в батлах.

Untitled Document

Академический рисунок и живопись

Откопал свои работы за 2003→2007

Графит (лето 2003)

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

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

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

Немного рисунков

Уголь (зима 2005)
Соус (зима 2005)
Графит (зима 2005)
Акварель (зима 2005)
Акварель (осень 2006)

А так проходила оценка проделанной работы

Untitled Document

Концепт-карта обновления кассы Меркаты

Ранее я писал про новое устройство Меркаты. Но вообще, кассовая программа Меркаты умеет работать на любом устройстве с операционной системой Виндоус или Андроид.


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

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

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

Смотреть на экран стало комфортней


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

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

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

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

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

Кстати, прочитайте про новый корпус кассы.

Untitled Document

Обновление сайта Меркаты

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

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

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

Текстовую страницу интересно просматривать и всегда есть куда перейти дальше, страницы какаду-то не кончаются.

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


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

Новая версия уже доступна, но находиться в ß-версии и наполняется контентом.

Untitled Document

Планшет Меркаты

Задача: задизайнить интерфейс экранов планшета покупателя

Планшеты устанавливаются в качестве дополнительного экрана кассы в магазинах и супермаркетах

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

Untitled Document

Обновление кабинета пользователя Меркаты

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

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



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

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

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

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

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

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

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

Это упрощает визуальное восприятие и снизжает время взаимодействия с интерфейсом.
Нажатие на пиктограмму приводит к переходу в соответсвующий раздел. Все системные уведомления, описание новых функций, обновления или сообщения от техподдержки объединены в один раздел с общими настройками профиля пользователя.
Специальные настройки и интеграции с другими сервисами, например 1С-бухгалтерия, находятся на виду, в отдельном разделе. А все взаимодействия с технической поддержкой и справочной информацией сведены в одну кнопку в подвале меню.



Скоро я добавлю больше информации о проекте (или не скоро)

Untitled Document
Untitled Document
Ранее Ctrl + ↓