Доброго дня, дорогой читатель,
Это кейс про эволюцию интерфейса органического календаря. Моей задачей было построить интерфейс на метафоре: "время как неразрывное измерение".
Зовут меня Иван, я веб-разработчик со стажем и скромный любитель дизайна выходного дня.
Я покажу эволюцию UI на личном проекте, который многим нравится и вдохновляет своим внешним видом. Конечно, многое хочется поправить и переделать. Буду рад критике, идеям, а, в идеале, ищу знакомство и партнёрство.
Lightpad
Это веб-приложение, личный органайзер с линейным календарём, задачами, заметками и ветвистыми тегами. В развитии, я вижу его как персональную информационную систему – управление проектами, работа в команде, совместное планирование с друзьями. Вероятнее всего, вы и сами пользуетесь заметками и задачами, какой нибудь Asana / Todoist / etc. Это можно назвать фрагментами персональной информационной системы.
Ниже скрин Лайтпада, как он есть сейчас. Им можно пользоваться на ноутбуке и телефоне.
Lightpad – это один из редких нетабличных календарей. Вы, разумеется, видели разные таймлайны, могли видеть календари типа Vantage (Studio 44). Конкретно такой реализации как в Лайтпаде я пока нигде не видел.
Идея в том что у человеческого зрения есть крохотный лоскут фокуса, и центральный день в Лайтпаде как бы является его аналогом. Центральному дню отводится больше места, периферии – меньше. Скролля календарь пользователь двигает периферию в центр, где её можно рассмотреть получше. По умолчанию каждый блок на экране равен дню, но может быть изменён на другую единицу: от часа до десятилетия. Контент организуется с помощью тегов, и каждому тегу можно задать свою цветовую схему.
Со школы я привык к тому что время это шкала, неразрывный континуум. И, в общем, многие люди действительно так и видят время. В моём воображении стояло диагональное расположение дат. Диагональ больше вмещает, в то же время является переходным состоянием между вертикальным и горизонтальным расположением. В европейской культуре принято размещать прошлое слева или внизу и самое новое справа или наверху ленты. Это если вдруг возникает вопрос почему диагональ и в таком направлении.
В 2018 я просто сверстал примерное расположение дат вручную, затем начал прикидывать простую функцию, которая давала мне нужные координаты. Получилось примерно это. Прошу прощения за дисгармонию в композиции.
Я показывал календарь разным людям, запустил его на одной небольшой площадке "Беталист". Собирал обратную связь и исправлял ошибки. Постепенно готовился к большему запуску. Умудрился созвониться с Паскалем Вихтом, который сделал один Fake UI для короткого метра "Temple". Паскаль сказал что вдохновлялся Евангелионом. Показал ему Лайтпад, он выразил умеренное одобрение. Не знаю сколько он утаил. Он сказал мне что сам лично видит время спиралью.
В 2020 году я запостил Лайтпад на Product Hunt, где он занял пятое место дня. Редактор Fast Company даже дважды включил его в список приложений года. Приложением пользовались самые разные люди: университетские преподаватели, калифорнийские стартаперы, студенты, и один очень милый пожилой музыкант с Аляски. Это к слову о целевой аудитории – как тут прицелить продукт пока не очень ясно.
Ниже примерный вид первой версии, того что попало на Product Hunt – первые два скрина. 3 и 4 – первая доработка по запросам пользователей. Изначально, все даты были свёрнуты. Нужно было водить курсором по датам чтобы разворачивать их содержимое. Я спрашивал пользователей об их честном мнении, и Чет Коркос из команды Ноушена обратил внимание на то что собственно содержания дней и не видно, тогда зачем мне календарь. Конечно, это очевидно, но поначалу почему-то ускользало.
По мере осмысления ситуации и поступления обратной связи стало понятно что нужна более основательная переработка интерфейса. Это не очень сложно, но и не так просто как с привычной блочной вёрсткой, потому что тут мы работаем с больше с формулами и преобразованиями, чем с типовой сеткой.
Первой доработкой дизайна после Product Hunt – был развёрнутый режим. В таком виде я показал Лайтпад Сергею Гурову, на Дизайн-выходных в Костроме в 2022. Сергей отнёсся к проекту с пониманием, теплотой и интересом, за что я очень признателен. Он дал мне несколько советов, нарисовал свою фирменную диаграмму диаграмму про форму и обратил внимание на соблюдение неразрывности пользовательского опыта через анимацию переходов. Последнее только предстоит сделать.
В 2021 году пришлось вернуться к работе и развитие Лайтпада замедлилось. Вёрстка новой версии заняла около двух лет и ещё нуждается в оптимизации по скорости.
Пользовательские отзывы и собственные размышления проявили такие приоритеты:
- Информативность (какие задачи, какого рода, важные или нет, сколько их)
- Компактность. Экран должен вмещать несколько дней. При этом день под курсором должен показать больше деталей чем предыдущий и последующие. Следовательно ему нужно отвести больше пространства.
В первой версии загрузка дня показывалась просто за счёт раскрашенных кругов. Один круг на задачу. Выполненная задача отмечалась заполненной окружностью. Я давно хотел сделать иконки тегам. Каждый тег – это отдельная часть жизни человека. День – это лоскутное оделяло из разных таких частей. Соответственно, и день в календаре – будет из таких лоскутов.
Важность задач
Выделение цветом? Пестрота меня отталкивает. Остановился на выделении яркостью.
Количество задач
У меня лично, обычно от четырёх до десяти в день. У деловых людей бывает и по 20 задач и встреч в день. Как это уместить в день, при этом не потерять наглядность загрузки?
В Лайтпаде задача может быть:
- развёрнутой – иконка и описание
- свёрнутой – только иконка
- суперсвёрнутой – в случае если временной блок (день / неделя / год) – вмещает в себя более 16 пунктов – задачи начинают сворачиваться в очень мелкий кружочек. Таким образом блок может отобразить более 40 задач только визуалом.
Оставленный разноцветный вариант
Оставленный вариант где важность выделяется красным
Прототип дней с кассетами пикозадач, чтобы отображать большое число задач не числом, а визуалом.
Процесс подбора параметров раскладки для мобильного. Сначала я хотел просто соблюсти линию с двумя точками изгиба, затем оказалось что всё что можно сделать на мобильном – это веретенообразная раскладка по прямой линии.
На этом закончилась вторая итерация, далее было несколько технических правок.
В рамках знакомства ещё расскажу про вкусы. С детства мне полюбились интерфейсы из Sci-Fi фильмов, т.н. Fake UI. Наверное как и многим. Один такой интерфейс вдохновлённый Евангелионом я пытался отверстать здесь. Лайтпад, конечно, более минималистский (пока что) интерфейс ближе к тому что рисовали для Oblivion / Матрицы. Для Лайтпада хочется создать эффект наслоения и стекла. И может быть поиграть с каким-то уютным декором.
У меня есть шкатулка со старыми экспериментами с CSS, вёрсткой и анимацией – старые опыты тут.
Если Вы когда-нибудь думали быть партнёром с таким разработчиком – буду рад познакомиться.
Телеграм: dreamguardian.
Такова реальность!
