Protraktor
192 subscribers
67 photos
2 videos
1 file
64 links
Пишу о проектировании UI/HMI профсистем
https://protraktor.design/ru/
Автор: @ninedots
Download Telegram
Не люблю я всякие «менеджерские» истории, но вот эта статья может быть полезной (тем кто не сталкивался), ибо в тему концептуализаций — самый базовый фундамент по итерациям этапов дивергенции (я называю «расширить сознание») и конвергенции (сделать нечто конкретное). Лично для меня это не что-то абстрактное, а как я работаю и размышляю уже с десяток лет.

https://medium.com/zendesk-creative-blog/the-zendesk-triple-diamond-process-fd857a11c179
Про концепции. (Микро)заметка №3

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

Не редко бывает, что очень многие решения из прошлого заметно лучше по функционалу, эргономике и ряду других аспектов относительно более новых решений; но при этом они морально устарели — например, я как-то общался с авиадиспетчерами (“подглядывал за соседями”) и они делились именно таким опытом — в новой системе им просто не хватало базовых вещей, а UI был откровенно захламлен. Но увы, накопившиеся третьи проблемы привели к тому, что предыдущая система серьезно устарела и была сложна в сопровождении, а новую версию уже невозможно было делать (да и некому) по старым принципам.

Так что валидируем. Но не впадаем в популярную ловушку UX — часто мы обсуждаем то что есть, а не то что может быть — легко пропустить потенциально интересные и перспективные истории. Правильно сфокусировав на восприятие концепт (“это мысли вслух, гипотезы, хотим узнать ваше мнение” и т.п.), даже глупые на первый взгляд идеи могут заискрить у внешних валидаторов такие предложения, что мама не горюй. Ну а потом уже доходя до конкретики можно использовать и весь арсенал исследований по детализации решения вглубь, а не вширь.
Вот интересно, кто может объяснить разнобразие этих элементов? Особенно отличие верхнего от нижнего
Пост без выводов.

Для своих яхтенных и прочих поделок запарился с личной дизайн-системой, в которой будет около пяти цветовых палитр. Заодно хочу в этом эксперименте («моя селедка — хочу покрашу») попробовать поиграться с концептуальными подходами, на которые никогда не хватает времени в коммерческой части.

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

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

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

И это я еще семантическими цветами (все эти светофоры) не играюсь, да и с палитрами “день”, “ночь”, “инвертированный день” и “полная ночь” (красная) не стал еще заморачиваться.

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

Но всё же интересно попытаться построить не просто на глаз, а с какой-то логикой цветовую систему. Я, конечно, не верю в чистую математику тут, но поглядим.
Colors organization.png
37.3 KB
Поскольку цвета при сжатии убиты телегой, вот картинка как есть из фигмы
Давайте обобщу вопросом — интересно читать как я упарываюсь с дизайн-системой? В текущем эмоциональном дискурсе где ещё и приходится решать кучу каких-то ущербных проблем (“как оплатить фотошоп?”, “получу ли бабло через месяц?”) я не очень способен рассказывать о чём-то нормальном/сложном, но вот эти ковыряния с цветами и т.п. вполне занимают низкоресурсный мозг. Не то что бы это нечто плохое, но субъективщины тут будет намного больше.
Писать про свою недодизайн-систему?
Final Results
100%
Да
0%
Нет
Раз 17 голосов и ни одного против, то вот вводно-водяная статья о том, зачем я делаю свой набор компонентов (хоть это я и считаю дизайн-системой, но, конечно, это скорее UI kit на текущем этапе) — https://protraktor.design/ru/2022/04/01/protraktor-kit-intro/
И вот в этот нелегкий час я, российский гражданин, закончил последние правки Human Factors in VTS Guideline (рекомендации по человеческим факторам в центрах управления движением судов) — в течение суток они будут отправлены на согласование и утверждение в Международную Ассоциацию Маячных Служб (IALA). Учитывая что я написал процентов 70 и попытался сделать его максимально практичным, а не академичным, считаю это моим небольшим вкладом в что-то светлое и человечное, а не идиотское и человеконенавистническое — особенно сейчас. Хоть это никогда и не было частью работы, именно на прошлом рабочем месте коллега предложил «войти в историю» — будет не хватать подобных активностей и взаимодействий. Опыт интересный.
👍5
Маленький тизер про дизайн-систему — пытаюсь создать итерацию для шести палитр, без которых не вижу смысла этим заниматься.

Спрашивается, нахрена столько? Но если отбросить лень (то бишь ограниченность ресурсов, что и есть основная причина, почему мы не пытаемся копать и вширь, и вглубь), то проблема в том что типовых массмаркетных пары не хватит — они или слишком тусклые для яркого уличного света, или слишком яркие для полной ночи — даже черно-белые. Плюс ограничения дисплеев и некоторые чисто сценарные особенности. Я вроде об этом уже не раз говорил, но в целом моё желание продиктовано именно этим. Правда, ковыряться даже для посредственного результата ещё долго. Но аппетит приходит во время еды.
P.S. Всё же и во мне сидит червоточина беханса и дриббла — порой так и тянет добавить насыщенных оттенков и адского контраста. Но бью себя по голове и рукам. Есть дизайн для эффективности и есть дизайн для эффектности. Порой же тянет и в другую крайность — сделать его ещё более унылым, засерить в ноль, сделать эталоном антидизайна. Но и это тоже не ок, истина не может быть черно-белой, да и никакой истины нет.
👍4
В очередной раз заюзал паттерн «ключ-значение», и решил накидать заметочку про него, как отдельный метод визуализации текстово-численной информации, наравне с таблицами, плоским текстом, списками и т.п.

https://protraktor.design/ru/2022/04/14/key-value/
👍3
Эксперименты. №1

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

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

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

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

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

До радио я, конечно, пока еще не дошел, но сделал прикидку элемента управления, что на видео. Идея, по ощущению, рабочая (улучшать тоже есть куда, например сделать слепые зоны, отрегулировать кривые изменения скорости по вертикали, растягивать шкалу визуально, чтобы следовала за пальцем — плюс еще и показывать качество сигнала на шкале — то есть “видеть радиостанции”).

Думаю, этот подход может быть хорош для некоторых кейсов HMI при использовании сенсорных экранов. Да и вообще, вывод такой — разные способы ввода имеют свою “пропускную способность” (как тут две оси по сути задают два параметра — положение и скорость его изменения), и далеко не всегда они задействованы.

#лаборатория
👍4
This media is not supported in your browser
VIEW IN TELEGRAM
Ну ладно, вот версия с динамической сменой масштаба шкалы при отклонении пальца по вертикали.

Выглядит вроде бы более понятно (WYSIWYG), но есть и более заметные минусы — динамический интерфейс всегда пугает, как будто разваливается. Если брать такой подход, то точно надо делать широкую слепую зону по вертикали, чтобы масштаб менялся только при сильном отклонении пальца в сторону.

Мне ближе первый заход, что выше.
👍4
Эксперименты. №2

Есть у меня ещё один эксперимент. Точнее, любимая мазоль — это проработка курсорных взаимодействий при работе с холстом (то есть когда мы рисуем что-то двумерное — например, маршрут на карте или дизайн в Фигме). Хотя это довольно нишевая история, я работал с ней стопяцот раз — от расстановки магазинов на схеме московского ГУМа для сенсорных навигационных киосков лет 100 назад и проработки инструментов для врачей-рентгенологов, измеряющих и обводящих разные нехорошие пятна на снимках, и до, ясен пень, отрисовки навигационных маршрутов на морских картах (эх, поленился в свое время, был бы автором патента — до сих пор считаю это одной из лучших работ, что я сделал за всё время).

В общем, в рамках текущего творческого эскапизма, решил я попробовать поиграться со стилусом на моём планшете — если с тач-интерфейсами прикидки чего-то более менее точного обломались (есть тут в подписчиках один товарищ, который лучше меня бы рассказал об этом), то на стилусы еще есть надежда. Причём хочу проработать задачу черчения — опять же, присасывая это к моему контексту ползаний по яхте, когда мне постоянно приходится что-нибудь замерять и чертить, а потом, возвращаясь домой, на основе снятых замеров/чертежей готовить объекты для 3Д-печати или оценивать покупку материалов и т.п. Ползать с ноутбуком и открытым в нём Autodesk Fusion 360 не удобно.

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

1) Работа с курсорами это очень быстрая и динамическая история, завязанная как на привычки, так и на выработку рефлексов. Её почти нереально тестировать без живой работы, из-за взрыва состояний и необходимости оценки вживую. Наше восприятие, в том числе “проектное” — это скорее набор статических кадров (вспомните дорогу от дома до работы — вы представите не “ролик”, а именно наборы кадров), и значит увязки переходов в динамике очень трудно представлять и оценивать заранее.

2) Проектировать работу курсоров с множеством задач нужно цельно — опять же чтобы снижать разнообразие. Фактически, это проектирование коммуникативного языка — включающего набор базовых принципов (“грамматику”), так и последующую имплементацию в конкретных паттернах для конкретных инструментов (написание “предложений”)

3) Подобные взаимодействия почти всегда завязаны либо на одновременное использование как холста, так и традиционного UI (выбор или модификацию поведения инструмента мы делаем с помощью тулбаров, контекстных меню и т.п.), либо на исползование мыши и клавиатуры (а ещё брать тот же трекпад — не мышь). Со стилусом тут добавляются комбинации из самых разных способов ввода — пальцы системой распознаются отдельно от стилуса, стилус отдельно от мыши, а еще и клавиатуру в принципе можно приспособить, чтобы доработать черновую прикидку после того, как я вылезу из узкого машинного отделения. Опять же (см. пункт 2) нет смысла делать это принципиально разными способами. Но каждый способ ввода имеет свои особенности и нужно их хорошо «разносить».

4) Всё это часто упирается в поиск компромиссного баланса между hidden logic, частотой использования того или иного инструмента (если что, самые частые — панорамирование и смена масштаба), ну и очевидность, скорость вхождения в функционал, выработку рефлексов.

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

Выбор простой — чтобы прорабатывать работу стилусом, надо вначале создать задел на «обычных» клавиатурно-мышево-холсто-юайных подходах. Начал делать поделку, некий примитивный аналог Компаса 2D, в котором можно рисовать простейшие чертежи как простым образом, так и с учетом привязок (snappings — от середины одной линии построить к центру окружности, а потом и еще и касательную к ней), а еще и чисто клавиатурным образом, когда нужно построить прямоугольник замеренной ширины и высоты. Разумеется, все это может комбинироваться. Хотя это отдельная тема.
👍1
Ну и в мою “проф-недодизайн-систему” это вклад.

Пока научился программировать отрисовку линий с привязками к характерным точкам существующих объектов. И это уже фарш. Впереди — ввод параметров линий с клавиатуры, а также использование клавиш-модификаторов для характерных углов (да, тот самый Shift). Уже накидал небольшой черновик статьи про философию работы над такими взаимодействиями и понимаю, что это скорее про методичку.

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

#лаборатория
👍7
Шрифты — не очень афишируемый мною давний интерес (даже потихоньку собираю библиотеку). Вот эта статья от NNG в каком-то роде объясняет, почему я стараюсь не затрагивать эту тему.

https://www.nngroup.com/articles/best-font-for-online-reading/
👍1