VanillaTime

🌑 Ребята, доброго вам вечера. По понятным причинам мы с вами давненько не слышались, но сегодня я решил нарушить молчание, чтобы хоть как-то переключить мозг из режима медленного бурления в режим созидания. Сегодня у меня получилось перенестись в солнечный Ташкент, чтобы поучаствовать в 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. Запулим и померяем (низкие риски и низкая неопределённость) — предварительный ресёрч не нужен, проще запилить и потом итерировать прямо на проде, снимая сливки данных и принимая решения. А дальше — вопрос техники согласования приоритетов с начальством.

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

✂️ Shortpost: Если вы всё ещё слышите разного рода отмазки от инклюзивности на вашем проекте, советую посетить эту коллекцию разоблачённых мифов об accessibility. Найдутся аргументы, чтобы убедить стейкхолдера, да и себя самого, обратить внимание на этот аспект проектирования.

Работаете и Figma? Любите делать так, чтобы ничего не уезжало, тянулось и не пипячилось? Тогда вы, как и я, обожаете Auto-layout! А вот тут для вас босяцкий подгончик для облегчения понимания, как этот зверь работает, и как эффективнее делать ваши макеты пуленепробиваемыми. Статья об автолайаутах познакомит с хоткеями (значительно облегчает жизнь), покажет как сделать так, что бы получилось так, как вы хотели, но не знали как (минимальная ширина компонента, слайдеры). В общем, очень советую. Эти 5 минут дадут вам неплохой прирост продуктивности :)

Поговорим о ссылках. Точнее о таких ссылках, как «Click here» или «Learn more». Использование этих паразитов, как можно догадаться, не слишком хорошо сказывается на взаимодействии, а если точнее: 🐌 Замедляют читателей, которые сканируют текст, ведь приходится возвращаться выше и читать, зачем «Click here», и что они будут «Learn more». 🤔 Привносят больше неопределенности по той же причине — формулировки общие, и за ними может прятаться хоть кролик, хоть мужик в плаще на голое тело. 👆 Предполагают, что пользователь кликает, а не тапает. Да, понимаю, притянуто за уши, но всё ж. Спросите, что тогда делать? А вот и советы подоспели: 1. Делайте ссылки наглядными, самоочевидными, чтобы пользователю не приходилось гадать, что произойдёт дальше, или куда он попадёт. Вместо «Click here for Design multiplayer article» напишем «Design multiplayer article». 2. Пишите уникальные лейблы, хотя бы потому, что они лучше сканируются скрин-ридерами. Существует соблазн, добавлять «Read more» в конце Generic компонента статьи. Но вместо это гораздо эффективнее придумывать завлекающий CTA, уникальный для данного контекста. Как например, это делает коллега в своём дайджесте. 3. Ставьте суть на первое место. Исходя из превалирующего F-паттерна чтения и исследования, проведённого NN Group, мы чаще всего читаем первые два слова в ссылке, так что ставьте ключевики на первое место. 4. Используйте устоявшийся цветовой паттерн — синий цвет с подчёркиванием. 5. Не привязывайтесь к длине ссылки, смотрите на излагаемую суть. Достаточно одного слова. 6. Разделяйте и однозначно показывайте разные виды ссылок: обычная, внешняя, на скачивание, на открытие модалки, действие на странице и т.д. Мы для этой цели использовали иконки привязанные к последнему символу ссылки. На сим всё. Хотите почитать оригинал? Пожалуйста. Ой… простите. Читайте статью «The problem with “click here” and “learn more” links».

Немного пятничного чила: я только посмотрел на эти фотки композиций из камушков, и недельный стресс отступил, как морская волна :) https://kottke.org/21/11/beautifully-arranged-rock-sculptures

А вот и схемка )