VanillaTime

Довольно годная статья о том, как большие сервисы относятся к своей доступности. Автор, при помощи AccessibilityChecker.org затестил youtube, amazon, pinterest, reddit и apple. Оказалось, что всё не так радужно: ❌YouTube — 60/100 ❌Amazon — 57/100 ✅Pinterest — 95/100 ❌Reddit — 31/100 ❌Apple — 61/100 Интересно, что результаты выдаются разные при каждом запуске, скорее всего это связано с выдачей, выдаваемой самим сервисом. Круто что чекер выдаёт не только ошибки, но и рекомендует, как их устранить. А если вы хотите посмотреть, где именно ошибки возникают, можете заюзать расширение WAVE Evaluation Tool или дефолтный Lighthouse для Chrome. Последний, кстати, выдаёт ещё и свой рейтинг, но он неизменно выше чекера, отчего-то :)

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

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

Ну что, готовы для второго раунда? Давайте догоним до десяточки ) Поехали! 8. Бывало такое, что хотите выделить все слои на страничке в Figma при помощи Similayer. Пока он маслает, идёте заварить чайок, а по возвращении видите холодящее кровь красное сообщение «Out of memory». И приходится тыкать ручками… чтобы такого не было, почитайте вот эту статейку про оптимизацию 🧰 9. Я часто рассказываю про ментальные модели пользователей, и как важно опираться на них во время проектирования. Споров здесь нет. И при этом, я забывал про один интересный момент: моя ментальная модель ментальной модели пользователя может отличаться от ментальной модели той же самой ментальной модели моего коллеги. Проще — мы все можем по-разному думать о том, как мыслят наши пользователи. И чтобы, как говориться, быть он-зе-сейм-пэйдж, нужно эти модели синхронизировать. Слишком много моделей… 🤯 10. Ну и если у вас философское настроение для прогулки по дебрям мыслей, то вот это эссе о представлении профессии дизайнера, не оставит вас равнодушным. Хотя может и оставит, ведь автор начинает из такого далека, что без телескопа не обойтись. 🔭 Пам-пам. Прекрасной субботы всем 🛳❤️

☀️ Happy Friday, дорогие друзья. Мы дааааавненько не виделись, но я спешу поделиться некоторыми интересными наблюдениями и статьями, в виде дайджеста уанлайнеров :) 1. Мы собрались с друзьями и провели босяцкую конференцию, где поделились интересными идеями по поводу внутренней мотивации, провели профилактическую сессию психологической помощи страдающим от версионирования в Figma, осветили практический опыт применения дизайн токенов и заценили Framer Sites (на нём, кстати, лэндос и собран). 2. Наткнулся на некоторые мысли по поводу «Настроек» систем: как оказалось, многие расценивают возможность настройки, как дизайн фак-ап, типа всё и без настроек должно работать. Но я заметил, что мне нравится настраивать что-то под себя, пусть я пользуюсь такими возможностями всего один раз, но это неплохой шанс обучить меня чему-то и тыкнуть носом в мощность системы, показать, что она вообще умеет. Задумаемся :) 3. Попалась на глаза статейка о базовых приципах UX для web3 сервисов. ⛓И пусть я никогда не работал с криптой, но ничего сверхъестественного там нет, хотя специфика, о которой нужно помнить наличествует. Изучаем. 4. Очередная попытка выйти за пределы Atomic Design и произвести систематизацию на сверх-высоком уровне… но зачем? Ребята, я честно не уверен, что стоит пытаться загнать в жёсткие рамки что-то выше организмов. Потому, что вы никогда не будете это использовать. Да, это круто, что так можно, но будем честными, компании, которые обладают экосистемами продуктов, которым нужно их унифицировать, можно по пальцам пересчитать. Вот для них это будет актуально, для всех остальных — трата денег. Давайте будем рациональными :) 🚀 (токены — зачёт) 5. Вас не бесит цифровой жёлтый? Когда собираешь систему, и нужно добавлять его в палитру, чтобы делать алерты, ворнинги, акценты… Но он самый светлый из хроматических цветов, и заставить его работать по общим правилам не так просто (иначе цвет солнышка ☀️, станет цветом 🫥). Приходится твикать: менять цветовой тон, вводить градации. А если вы упарываетесь по WCAG 2.1, то… моё почтение. (В WCAG 3.0 проблема станет ещё шире 😈) 6. Как раз сейчас с командой занимаемся сворачиванием проекта, дабы в будущем новая команда могла его подхватить, и статейка по оптимизации боли в Figma помогла понять, на чём нам нужно бы сконцентрироваться. Чеклист с полезными ссылками — кайф. 7. ⚡️ Блиц! В Google Fonts появился иконочный шрифт Material Symbols с плагинами на максималках. Надеюсь, будет полезно )

🌑 Ребята, доброго вам вечера. По понятным причинам мы с вами давненько не слышались, но сегодня я решил нарушить молчание, чтобы хоть как-то переключить мозг из режима медленного бурления в режим созидания. Сегодня у меня получилось перенестись в солнечный Ташкент, чтобы поучаствовать в Google Developers Meetup, дабы поделиться опытом-рассуждениями на тему геймификации и мыслями почему она может не работать. Как всегда, я собрал весь материал в статью, коей спешу поделиться. Возможно, она будет полезна тем, кто в погоне за ростом вовлеченности ступил на этот извилистый и сложный путь. Всё для того, чтобы на лбу не красовалась отметка от граблей, по которым мы уже прошлись. Берегите себя.

Ребята, простите, проверял новые кнопки без хинтов в телеге :) А вам вообще были бы интересны такие лайвы? Ставьте лайк прямо сейчас, если да )

А вы какой дизайнер? Графический? Пользовательского опыта? Сервис? Продукт? Может хватит уже плодить термины? Тут и так атлас профессии нужен... Давайте пойдем работать :) А пока будете работать (или на обеде) можете послушать наш новый подкаст. Тема слегка забитая, и при этом интересно подана :) На повестке: — К кому себя отнести: к продуктовому, дизайнеру пользовательского опыта или к дизайнеру интерфейсов? — Почему у дизайнеров должность одинаковая, а работа разная? — Почему никто никогда не видел Джуниор Продуктов? — Откуда берутся xOps’ы? — Зачем вообще об этом думать? :) Смотри на YouTube и слушай там, где удобно: 🧷 Soundcloud 🧷 Yandex Music 🧷 Google Podcast 🧷 Apple Podcast #полезно

Свежий пост заставил меня задуматься: а современные мастера намного искуснее предшественников? Только сравните уровень работ портретистов разных эпох и станет ясно, что современники находятся в совершенно иной лиге. На их стороне и технологии, и доступные материалы, и лёгкость обучения. За них уже сделали тяжёлую работу пионеры живописи, и что остаётся — не просрать эти знания и правильно их применять. А что происходит в дизайне для цифрового мира — получается тоже самое. Дизайнеры начала эпохи торили себе путь, набивая шишки, зарабатывая себе опыт и накапливая мудрость, но это не делает их недосягаемыми. Пусть у тебя хоть двадцать лет опыта, через три года тебя может догнать, а то и потеснить человек, который о твоей профессии не слышал. И это норм. Норм? Давайте перестанем смотреть на время в профессии, а начнём ценить открытый ум, постоянно совершенствоваться и делиться накопленным. Банально? А как вы хотели? А, ну если вы своими костлявыми руками держитесь за знания, которые накопили и не делитесь ими с другими, как вы можете рассчитывать, что кто-то будет напрягаться за вас? Думаю, чем больше профессионалов станет на границу знаний в домене и изо всех сил начнут её толкать, тем быстрее она поддастся и расширится. Нужно экспериментировать и пробовать, ошибаться и торжествовать, поставить себе на службу как орудие молодых (технологии, быстрое обучение на костях былого), так и седую дерзость прошлого поколения, когда единственным способом совершенствования было включение головы. Только так мы сможем заставить дизайн развиваться, а не стагнировать. Учитесь. Пробуйте. Учите.

🤔 Так хорошо, а как с адаптируемостью? Может в условиях неопределенности именно быстрая реакция на изменения — ключ к победе? Ноуп... 👉 Придерживайтесь концепции СМаК: системность, методичность и константа. То есть у каждого десятикратника был свой рецепт успеха из довольно конкретных, но постоянных ингредиентов. Они фанатично придерживались его и меняли только в самых редких случаях (причем только ингредиент, а не весь рецепт). В среднем раз в 20 лет. Примеры ингредиентов: итеративный подход Майкрософт, закон Мура в Интел и «летать только 737» у Сауст-Вест. 🤔 А может, десятикратники просто повезло? Но как проверить удачу? И это можно. 👉 Отдача от удачи. Согласно исследованию, удача никак не влияет на успешность компании. За период исследования авторы выделили около 150 событий удачи (плохой и хорошей) и не выявили перевеса какой-либо из групп. Дела не в удаче, дело в людях, способных распознать и выжать из удачи все. Они не провидцы, а запасливые работяги. В общем и целом, я однозначно рекомендую книгу к прочтению, а как бонус, на данных вы сможете посмотреть, как стоить реальный компетитор-анализ ;)

Вас никогда не волновал вопрос о том, как некоторым компаниям удалось стать великими, несмотря на то, что родились и развивались они в максимально непредсказуемой среде. Не задумывались? Ничего. Хорошо, что об этом подумали Мортон Хадсон и Джим Коллинз (автор бестселлера «От хорошего к великому»). Они провели просто феноменальный анализ компаний, которые, развиваясь в условиях максимальной неопределенности (период 1972–2002 год), смогли добиться феноменального успеха, демонстрируя постоянный рост в условиях кризиса и рецессий. Из более чем 200 000 компаний они отобрали всего 7 попадающие под критерии величия неопределенности и назвали их десятикратниками. Название не случайно: вложи вы $1000 долларов в эти компании в первый год их IPO, то на 2002 год вы бы получили минимум в 10 раз больше прибыли, чем если бы вы вложились в рынок в среднем. Конечно, сейчас некоторые из образцов величия сегодня утратили былой лоск, но в исследовании говорится скорее об эре компании, а не о состоянии на текущий момент. Каждой компании-десятикратнику они нашли максимального похожего по стартовым условиям «близнеца», ставшего, при этом, не таким успешным. А затем провели сравнительный анализ и выявили закономерности в поведении обоих групп. 🤔 Перед прочтением, я думал, что великие компании создавались самодурными авантюристами, вечно идущими на риск, но оказалось... 👉 Руководители-десятикратники — продуктивные паранойики: надеются на лучшее, но готовятся к худшему, как Бил Гейтс: вся отрасль готовилась к тому, что скоро IBM заменит MS-DOS новым стандартом, и сам Гейтс признавал его превосходство, он все равно оставил небольшую команду работать над Windows. На всякий случай. Во-первых, все десятикратники, делают запасы, как хомячки, постоянно накапливая амортизаторы и готовясь к появлению черного лебедя. Во-вторых, они ограничивают риск, словно в переговорах, чертят линию, которую никогда не пересекут. Если есть возможность подождать и дать ситуации «дозреть» и накопить больше резервов — лучше поступить так. «Не торопись, когда сможешь, но когда нужно — действуй», — их девиз. Здесь главное понять, каким запасом времени ты обладаешь, пока риск не перешёл в другие стадии. В-третьих, десятикратники смотрят на ситуацию в двух планах: дальнем и ближнем. На дальнем плане они замечают перемены и вероятности, определяя стратегию. Но как только план сформирован, они как фанатики концентрируются на его исполнении. Даже в пору перемен не стоит забывать о дисциплине действий и мысли. 🤔Следующим развеянным мифом стал экспаненциальный рост десятикратников. То есть представление, что они, аки бражка, БЭМ! И растут и растут. Но на деле все они идут... 👉 20-мильный марш. Фанатичная дисциплина заставляет делать шаг за шагом на пути к цели, не отставая от плана и сдерживая свой рост. Вы не ослышались, сдерживать рост, чтобы аккумулировать подушку безопасности на случай черного дня и минимизировать риски. 🤔 Помимо всего вышеперечисленного, десятикратники гораздо чаще проверяли свои дорогостоящие идеи (ядра) недорогими экспериментами (пулями). Наконец, я что-то угадал :) 👉 Сначала пули, потом ядра. Всего 9% пионеров-инновационистов выживают на рынке. То есть все эти фенси презентации под лозунгами со словами «Первые» и «будущее» созданы на костях первопроходцев. Подвод задуматься над эффектом и эффективностью. Не инновации определяют долгосрочных победителей, а дисциплина и последовательность. К проверке гипотез вообще не должно быть вопросов — все очевидно. Но когда стреляешь непристреляным ядром куда страшнее попасть, а не промахнуться. Случайный успех может ввести в заблуждение и заставить рисковать ещё сильнее. 🤔 Окей, не риск руководителя делает компанию Великой, тогда может дело в предвидении? Может такие компании вели в будущее пороки? Но... 👉 Никто не может предсказать будущее, вместо этого десятикратники используют эмпирические данные, опыт и тесты-пули. Главное не застрять в прицеливании, а все-таки выпалить из пушки. То есть не прогнозирование, а проверка гипотез практикой. Вот это по мне :)

Великие по собственному выбору

Вдогонку небольшой чек-лист для начинающих проектирование фильтрации, чтобы ничего не забыть: 1. Можем ли мы избежать иконки фильтра и показать фильтры как есть? 2. Если нет, то какую иконку мы выбираем для обозначения фильтрации? 3. Достаточно иконка большая и учли-ли мы отступ для удобного нажатия пальцем-сосиской? 4. Ставим ли мы иконку вверху, внизу или фиксируем? 5. Что именно происходит, когда пользователь нажимает/нажимает на иконку? 6. Имеются-ли все состояния нашей кнопки-иконки? 7. Будет ли у нас какая-то анимация или переход по клику? 8. Будут ли фильтры отображаться как отдельные страницы, модалки или панели? 9. Можем ли мы избежать фильтрации боковой панели, поскольку она замедляет работу? 10. Будут ли у нас популярные или релевантные фильтры по умолчанию? 11. Отображаем ли мы количество ожидаемых результатов для каждого фильтра? 12. Можем ли мы использовать горизонтальный свайпер для перемещения между фильтрами? 13. Можем ли мы избежать выпадающих списков и использовать только кнопки, чипсы-переключатели? 14. Предоставляем ли мы поиск для сложных фильтров? 15. Используем ли мы иконки для объяснения различий между фильтрами? 16. Используем ли мы правильные элементы для фильтров, например. ползунки, кнопки, переключатели? Подробнее был пост выше. 17. Применяются ли фильтры автоматически? 18. Применяются ли фильтры вручную при подтверждении («Применить»)? 19. Как мы отделяем уже выбранные фильтры? 20. Могут ли выбранные фильтры отображаться в виде удаляемых чипсов? 21. Рекомендуем ли мы соответствующие фильтры на основе выбора? 22. Отслеживаем ли мы несовместимость между выбранными фильтрами? 23. Отображаем-ли мы «нулевые» значения фильтров? Как разрешаем коллизию с уже выбранными? 24. Как сообщения об ошибках или предупреждения отображаются на UI? 25. Разрешаем ли мы клиентам быстро и сразу сбрасывать все фильтры? 26. Плавают ли фильтры (или кнопка фильтров) при прокрутке на мобильном устройстве/рабочем столе? 27. Могут ли пользователи нажимать на одно и то же место, чтобы открывать/закрывать фильтры? Всем прекрасной пятнички и отличных выходных )

Уже довольно давно в моих открытых вкладках лежал труд Виталия Фридмана о создании идеальных фильтров. Тема, прямо скажем, очень обширная и «пляшет» от домена к домену: где-то все привыкли к правой панели, где-то фильтров так много, что приходится выделять под них целую страницу, а где-то фильтрация вообще не нужна. Но в любом случае, если нелёгкая столкнула вас с задачей проектирования фильтрации, не лишним будет ознакомиться со следующими советами: 👉 Располагайте фильтры по-релевантности так, чтобы пользователю удобно было их применять один за другим. Только не переборщите с количеством наиболее релевантных фасетов, лучше спрятать излишки в погребок «Show more filters», который пользователь легко откроет при необходимости. 👉 Для фильтровых фасетов избегайте скрола, который нарушает нативную навигацию по панели. Вместо этого используйте аккордеоны с 4–5 самыми популярными значениями. А по открытию использовать поиск внутри фасета. Прим. ред. На месте Виталия я бы не был здесь столь категоричен, ибо когда количество вариантов превышает сотню, раскрывать её в панели — суицид. 👉 Всегда добавляйте степпер + / - и текстовые поля, если решитесь использовать слайдеры. 👉 Никогда не схлопывайте и не скрольте пользователя при применении фильтров — он может желать ввести сразу несколько значений. 👉 По той же причине не стоит «замораживать» UI по изменению одного фильтра: выбрал — ждёшь, выбрал второй — ждёшь… бесит. 👉 Закономерный вывод — показывайте результаты асинхронно, чтобы фильтры не двигались и не лочились. 👉 Чтобы избежать прыганины футера и огромных дыр рассмотрите возможность разместить фильтры над выдачей. 👉 На мобилке смело впиливайте количество отфильтрованных вариантов в кнопку «Применить». Её кстати, можно прибивать к низу страницы. Ну а от себя добавлю, что если вы трудитесь в e-commerce домене, не обделите вниманием и Baymard University, где собраны самые полезные и подтвержденные советы именно на поприще продажничества.

☀️ Доброго нового года вам, друзья. А вы замечали, как все вокруг сейчас дают обещания, которые профакапят к февралю (по статистике)? Причём это делают не только люди, но и целые компании: мы сделаем супер-смартфон с камерой лучше, чем у Hubble; а мы создадим метавселенную; а с нами ваши данные под надёжной защитой и никто их не украдёт; а мы создадим социальную сеть нового вида, где все будут общаться голосовыми сообщениями … И мы как-то верим всем этим анонсам, восхищаемся, берем на вооружение образ будущего и ориентируемся на него в своих суждениях, и при этом я тут задумался: а мы вообще часто проверяем, сбываются-ли обещания? Или всё спускаем на тормозах? Оказывается кое-кто бдит! И собирает все фейлы, которые случились в IT за 2021 год: и непонятно зачем кроме денег нужная метавселенная, и перебои в работе AWS вставший в миллионы зелёных рублей, и Microsoft выпускающих Surface Duo 2, хотя никто и первый не покупал, и Wear OS 3 доступный только покупателям новых девайсов, и Teams, который блокировал вызов 911 на новых пикселях… в общем, освежающие уроки фейлов — всем советую, дабы держать стопы на земле и не зазнаваться :) https://www.androidpolice.com/biggest-tech-fails-2021/

Ладно, я вернулся немного раньше, чтобы рассказать ещё про одну штуку, которая меня захватила. Тут Framer не так давно выкатил фичу паблишинга сайтов прям в веб: делаете всё в редакторе, настраиваете респонсив, нажимаете кнопочку и всё в сети ) Есть возможность гибкой настройки, как маускликкингом, так и кодом, перелинковывать страницы между собой, создавать интерактивные компоненты, настраивать seo и подключать кастомный домен. В общем штука интересная. Вот моя проба пера :) happybook.site

Всем добра! За эти дни, пока я ничего не писал, очень много контента вокруг нагенерилось… но весь он про итоги уходящего года, планы и тренды будущего. Словно какая-то нейронка берет одну статью, пересинонимирует её и постит заново. И такого сейчас полным-полно. Но, если вам такое не по душе, предлагаю вашему вниманию детрендированную выжимку из последнего: 1. Хотите что-нибудь этакое погенерировать? У меня для вас две штуки: SVG-генератор псевдо-3D паттернов может пригодится вам для… всего :) И есть ещё генератор гличей для фото, чтобы было модно и молодёжно. 2. Помните неоморфизм? Так вот, если его накачать ботексом, изменить положение света и добавить мультяшности, оказывается получится клэйморфизм. Я прямо захотел, чтобы Тинькофф переделался под такой пухляшизм, чтобы просто поржать. 3. Порефлексируем? Вот что Google «убил» за прошлый год. Я даже не знал о существовании многих из этих проектов, но какие-то даже раньше использовал. 😢 4. Если вы занимаетесь тестами по методологии RITE, то не отклоняйтесь от неё во время тестов, иначе закончите, как эти парни (правда выводы тоже, не совсем верны, так что можете освежить знания). 5. Устали от мелкой Википедии? Можно разнообразить вид ) Я попробовал, но пока сказать на 100% не могу, поживу с этим ещё немного. А вот и всё. Ребята, с наступающим вас новым годом! Счастья вам, здоровья и корабль любви! 🛳❤️ А я пошёл резать салат, увидимся в новом году.

Не так давно я получил запрос на статью про OOUX — объектно-ориентированное проектирование. Что это такое, откуда пришло, как применяется и почему иногда фейлит. Если вам интересно, почему экранное проектирование больше не работает и что нам с этим делать, то милости прошу — свежая статья на Медиуме об OOUX. Кушайте на здоровье, и поделиться помните :)

Сложно решить, как лучше подойти к проблеме? Тогда хватайте карандаш и делите область на четыре части двумя осями. Ось ОХ — это влияние ошибки, если вдруг мы сделаем что-то не так. Переделка раздела «О нас» корпоративного сайта будет стоять явно левее, чем переосмысление внутреннего процесса распределения бонусов. Ось ОY — это степень неопределённости задачи. Если понятна причина проблемы, а также её решение, то она будет высоко (пользователи не могут назначать дедлайн по задачам, потому, что такой функции нет в приложении 🪓). Проблемы с большой неопределённостью ищите внизу (люди покидают приложение 😵‍). В итоге у нас получится четыре области и останется распихать проблемы по этим областям, чтобы понять, что с ними делать: 1. Тяжёлый ресёрч (высокие риски и высокая неопределенность) — спешить нельзя, лучше расчехлить ресёрч-машину на полную. Сформулировать гипотезы, собрать как качественные, так и количественные данные. 2. Лёгкий ресёрч (низкие низки и высокая неопределенность) — точность не критична, достаточно получить общее представление о проблеме и сформировать концепт, а после итерировать. 3. Детальный дизайн (высокие риски и низкая неопределенность) — тут понятно, что делать, но ставки высоки, потому нужно больше тестировать перед релизом, нежели проводить исследование. 4. Запулим и померяем (низкие риски и низкая неопределённость) — предварительный ресёрч не нужен, проще запилить и потом итерировать прямо на проде, снимая сливки данных и принимая решения. А дальше — вопрос техники согласования приоритетов с начальством.

Я заметил за собой одну интересную особенность — я начал отходить от консистентного фашизма. Раньше, я готов был испепелить любого, кто хотел внести изменения в библиотеку или (не дай Бог!) раздетачить компонент, ведь пользователь должен получать консистентный опыт через всю нашу платформу. Всех еретиков придать анафеме! 🔥 Но если остановиться и отложить факелы, то что есть консистентность? А не наше-ли это внутреннее стремление к упорядоченности, прикрытое псевдозаботой о пользователе? Преимущества унификации и компонентного подхода сложно отрицать: тут вам и ускорение девелопмента, и снижение когнитивной нагрузки (как вашей, так и пользователя) а также следование принципу целостности. С этим никто не спорит. Я здесь говорю именно про фанатичное стремление к порядку, порой даже во вред пользователю. Когда карточки товаров у нас вот только такие и никак не меняются в зависимости от контекста использования.Когда разные объекты выглядят одинаково, и фиг их различишь, а нужно бы. Когда гигантские кнопки лупятся в крохотные модалки под громогласное «Шоб консистентно!». В итоге получается уродство, зато уродство везде одинаковое. Консистентность и унификация — это не одно и тоже. Второе, это экстремальное проявление первого. То есть мы однозначно должны быть последовательны в выборе паттернов и парадигм взаимодействия, но это не значит, что всё должно выглядеть одинаково, ведь контекст тоже важен. Во главе должно стоять удобство пользователя, а за ним следовать консистентность.