20640
В соцсетях: vk.com/ux_notes и fb.com/uxnotes Вакансии: @uxwork Автор: @zGrav Est. 2016. Реклама на канале: https://uxnotes.ru/ads
Как демократизация исследований поможет снизить time to market продуктов на 20%?
Демократизация исследований — это процесс, когда исследователь передает часть своих функций другим членам команды. Это позволяет предотвратить выгорание исследователя, освободить ресурсы опытных спецов для более сложных проектов, а еще — снизить time to market продуктов на 20%.
Чтобы добиться этих результатов, надо правильно настроить процесс демократизации исследований в продуктовой команде. Исследователи в вертикалях Товары и Недвижимость в Авито Никита и Катя подготовили гайд, в котором подробно рассказали, как же это сделать.
Реклама.ООО "КЕХ ЕКОММЕРЦ" ИНН 7710668349 erid: 2SDnjdiXgSU
Интересный факт: подписавшись на Любовь, дизайн и метрики, ты вступаешь в комьюнити людей, которые с любовью развивают продукт для пользователя.
Дизайнеры и UX-исследователи Авито делятся заметками о создании новых продуктов, борьбой с внутренним самозванцем, источниками вдохновения, а ещё любят обсудить всё это в комментариях.
Присоединяйтесь к сообществу, чтобы получать и делиться полезным и вдохновляющим контентом!
Представляем вам новую программу обучения UX-исследователей, которую запускает ИТМО совместно с экспертами-практиками из ведущих российских компаний.
-> дает системные навыки исследований и систематизацию лучших практик
-> разработана ведущими исследователями отрасли, которые вносят вклад в исследовательское сообщество в России.
-> с практикой на реальных продуктах в ведущих компаниях, кейсы можно добавить в свое портфолио
Курс стартует 15 апреля, получите системные знания, развивайте свою карьеру, вступайте в сообщество профессионалов!
Ссылка на программу: https://itmofordigital.tilda.ws/ux
Реклама. Erid: 2VtzqutmM6b ИНН: 519049708009
Алексей Тюрин написал, как обезопасить ввод пинкода на телевизоре, когда экран видят другие люди.
— Пинкод закрывает детям и сожителям доступ к настройкам телевизора, подпискам и покупкам, платёжным данным. Особенно актуально, если телевизор находится в публичном месте;
— Также им можно ограничить детей от взрослого контента;
— Люди могут использовать тот же пинкод, например, в банковском приложении, что повышает ставки, если кто-то подсмотрит его во время ввода на телевизоре;
— Раньше не было проблемы ввести код, не выбирая цифры на экране, так как цифры были на пультах;
— Проблему легко решили на приставках (PlayStation, Steam): на контроллере много кнопок, которые можно нажимать вместо цифр;
— В Android TV, Sony Bravia, Samsung Tizen есть безопасный ввод: стрелками ↑ и ↓ на пульте пользователь выбирает на экране группу цифр (1-2-3, 4-5-6, 7-8-9), а кнопками ←, OK, → незаметно для стороннего наблюдателя выбирает левую, правую или центральную цифру в группе;
— Коды иногда используют для отключения родительского контроля. Если ребёнок дошкольного возраста, вместо пинкода для разблокировки взрослого контента можно просто просить ввести решение несложного математического выражения (3×8=?) или цифры, написанные на экране словами (Zero, One, Zero, Two);
— Стоит ожидать появления разблокировки отпечатком пальца или лицом через встроенные в пульт сенсоры.
#tv #log_in
Я написал, как быстро сделать в Фигме прототип формы, поля которой можно заполнять в любом порядке.
— С этим помогут локальные переменные (Variables) и условия (экшен Conditional);
— Если их не использовать и просто переводить пользователя с одного экрана на другой, для формы из 4 полей потребуется 16 экранов (включая полностью заполненную форму и полностью незаполненную);
— Поля, с которыми будет взаимодействовать пользователь, надо заменить на локальные компоненты с вариантами «Не заполнено» и «Заполнено»;
— Когда пользователь заполняет поле, это надо сохранять в локальную переменную;
— При отображении формы надо проверять переменные и переключать компоненты заполненных полей на нужный вариант: триггер After delay, повешенный на компоненты конкретных полей, плюс экшен Conditional.
Пользуюсь положением редактора UX Notes и прошу: если у вас есть профиль на Хабре, пожалуйста, поставьте там оценку.
#figma #prototype #form
Павел Шерер написал 4-ю статью цикла о функциональной архитектуре.
— V-модель разработки делает акцент на тестировании, что позволяет выпускать стабильные продукты за оптимальное время;
— Но она не гарантирует качество, так как всегда кто-то формирует видение (дизайнер с макетами, аналитик с требованиями), а остальные от них отталкиваются. При этом первые плохо понимают технические ограничения, а вторые потребности пользователей;
— В разработку уходят требования, а значит, «строители» принимают решения за «архитекторов»;
— На старте проекта много белых пятен и хаоса, но их закрашивание хаос не уменьшает, так как специалисты почти всегда уходят в детали и принимают решения без понимания общей картины. В моменте кажется, что ситуация под контролем, но потом часть наработок оказывается в корзине;
— Работа над функциональной архитектурой подразумевает этап высокоуровневого проектирования, продумывание базиса, на который потом можно положить детальное описание функций;
— Нет шаблонов ФА, которые могут переходить из проекта в проект, так как архитектура должна подстраиваться под продуктовые реалии. Но могут быть методологические форматы отдельных артефактов;
— Если нет супердизайнера или плотной связки дизайнера с аналитиком, решающих всё в реальном времени, создать консистентную проектную документацию поможет «перекрёстное опыление»;
— Это синхронизация дизайна и аналитики при создании каждого функционального слоя: 1) концепция, 2) функциональная модель, 3) сценарии, 4) информационная архитектура, 5) сведение функций с экранами и состояниями;
— Например, на этапе концепции дизайнеры прорабатывают базовую ролевую модель, потребности и особенности пользователей. Аналитики вместе с технарями и бизнесом решают, как закрыть интересы всех заинтересованных сторон.
Канал Павла. #functional_architecture #process
Женя Крупина написала о прокачке нетворкинга в компании через совместный просмотр докладов.
— Потребность в этом появилась после реструктуризации, надо было лучше узнать друг друга, научиться работать вместе, научиться обогащать продукт и друг друга за счёт крутых скилов и уникального опыта отдельных специалистов;
— Хорошо себя показал совместный просмотр докладов на продуктовые темы и около того. Он оказался и вовлекающим, и развивающим, и полезным для работы;
— Наибольшую пользу приносит не сам доклад, а его обсуждение: нажимали на паузу, сразу докручивали, как применить в своём продукте, спорили, смеялись;
— В группе просмотр обучающего контента проходит осознаннее;
— В итоге за 3 месяца провели уже 6 просмотров и не только прокачали нетворкинг, но и применили отдельные находки в работе.
#management
Анастасия Скопина написала об эмодзи в интерфейсе.
— Допустимо ли их использовать, зависит от сферы продукта, целевой аудитории, географии и Tone of Voice;
— Скорее да: сервисы для детей, сфера красоты, дизайн. Скорее нет: B2B, B2G, медицина, ToV задаёт строгий официальный стиль;
— С эмодзи 73% людей считают вас более дружелюбным. Но люди постарше чаще воспринимают их негативно;
— Одни эмодзи могут по-разному воспринимать в разных странах. Например, в арабских странах 🙏 (сложенные руки) почти не используется, так как не ассоциируется с молитвой, в Китае 👋 (взмах руки) символизирует разрыв отношений и дружбы;
— Эмодзи хорошо работают на приветственном экране (сделать первый контакт как можно дружелюбнее), при выборе пола или страны (можно заменить иконки), в пустых состояниях (разбавить сухой текст), диалогах (более человечное общение, визуальные якоря), как бейджи (объединить товары в группу), в попапах (показать, позитивное это сообщение или нет, и если нет — немного сгладить негатив);
— Кроме того их часто используют в пушах, формах обратной связи, некоторых кнопках (как замена иконки или усилитель текста);
— В некоторых продуктах вроде Ноушена эмодзи помогают пользователю лучше ориентироваться в своём контенте.
#graphics
Kaspersky Tech Fest. Карьера техписа: наём, развитие, треки — бесплатный онлайн-митап для развития технических писателей, который пройдет 6 марта в 15:00🔥
● Как найти идеального стажера и правильно оценить его навыки?
● Какие возможности карьерного роста доступны техническим писателям?
● Где искать источники профессионального развития и как избежать выгорания?
● Как изменить внутренние процессы при кратном росте команды?
● Интересно узнать больше про секреты профессиональной жизни техписа? 😏
Тогда скорее регистрируйся по ссылке!
Иван Мрачко написал о пользе прототипов в заказной разработке.
— Прототип интерфейса — схематичный макет интерфейса разной степени детализации. Это вайрфреймы, но часто их называют прототипами;
— Низкодетализированные помогают быстро набросать идею и показать связь между экранами, они хороши для брейншторма;
— Высокодетализированные показывают актуальный контент, элементы интерфейса и логику взаимодействия и помогают оценить пользовательский путь;
— Они могут быть статичными и интерактивными, когда пользователь может полноценно взаимодействовать с интерфейсом (например, нажимать на кнопки и переходить по ссылкам);
— Прототипы помогают синхронизироваться на ранней стадии разработки и быстро внести правки, если вскрылось недопонимание;
— Позволяют сначала согласовать логику и состав страниц, не уходя в детали, и таким образом двигаться быстрее;
— В сложных проектах они могут стать отправной точкой в создании дизайн-системы и проработке нужных интеграций системными аналитиками (и быстро дорабатываться при выявлении технических ограничений);
— Интерактивный прототип с актуальным контентом можно тестировать на пользователях, чтобы проверить адекватность пользовательского пути.
#prototype
Станислав Хрусталёв собрал примеры, как разнообразить список товаров.
— Использовать разные фоны (интерьеры у товаров для дома), разные изображения на устройстах с экранами;
— Показывать товары в разных ракурсах;
— Для некоторых товаров автоматически запускать видео;
— Чередовать количество товаров в строке (например, иногда отображать один товар, когда обычно — два);
— В середину списка добавить горизонтально прокручиваемый блок с популярными товарами, хитами продаж;
— При просмотре старой коллекции — прорекламировать новую;
— Если ваши специалисты консультируют и помогают подобрать товар — рассказать об этой услуге;
— Отдельной заметной карточкой можно сообщить, что на товары в корзине есть дополнительная скидка, или запросить обратную связь о купленном ранее товаре (Яндекс Маркет даёт сразу поставить оценку, не открывая страницу товара);
— У покупателя может случиться паралич выбора. Предложите подарочные карты, чтобы облегчить ему задачу;
— Контентные карточки: рецепты, подборки образов, статьи и полезные советы о товарах из списка;
— Посреди длинного списка товаров можно разместить предложение перейти в подкатегорию, чтобы конкретизировать запрос;
— Прочее: запрос оценки приложения, запрос на разрешение отправки уведомлений, анонс новой функции.
#ecommerce
🐝 Первый митап билайна про тексты в интерфейсе. Присоединяйтесь онлайн!
Эксперты UX-редактуры расскажут, как войти в профессию, менять продукт к лучшему, «синкаться» с маркомом и измерять свои тексты. А билайн покажет, как устроена дизайн-система и зачем она нужна UX-редакторам.
Начало 1 февраля в 19:30 (мск), участие в митапе бесплатное, нужно только зарегистрироваться на мероприятие по ссылке.
Реклама, ПАО «ВымпелКом», beeline.ru
Гифка из статьи ↑, чтобы отправить своим разработчикам
Читать полностью…
Юля Кондратьева написала, зачем и как читать научные исследования по дизайну.
— Они помогают защитить решение. У конкурентов не всегда есть подходящие кейсы. Советы экспертов вроде Nielsen Norman Group основываются непонятно на чём (как эксперт к ним пришёл?);
— Найти информацию можно по довольно общим темам (исследование шрифтов с засечками и без, а не конкретного семейства), вопросам с одним неизвестным (расстояние между карточками в интернет-магазине), не касающихся трендов;
— Искать — в Гугл Академии на английском. Если полный текст недоступен, часто можно нагуглить PDF или вложения. Чтобы узнать всё, что надо, обычно достаточно картинки и абстракта (краткое описание статьи);
— Если хотите действительно разобраться в теме, придётся собрать максимум материалов и критически на них посмотреть. Область применения может отличаться (пагинацию и скролинг изучали на новостных ресурсах, а у вас магазин), респонденты в эксперименте могут отличаться от ваших пользователей;
— Они помогают сгенерировать новые гипотезы и просто узнать что-то новое (например, что участники встреч, включающие камеры, устают больше);
— Зайдите на сайт с рейтингом научных журналов, выберите тему (Human factors and ergonomics или Human-computer interaction), отсортируйте журналы по индексу Хирша (как часто они цитируются другими), открывайте те, что отмечены Q1 и Q2;
— Можно читать то же самое в виде новостей, но иногда в них не хватает деталей и выводы оказываются перевранными;
— Авторы статей внимательно относятся к исходным данным и почти всегда перечисляют ограничения текущего исследования (например, маленькая выборка или что не проверили какой-то аспект) и предлагают будущие исследования (какие корреляции можно было бы проверить).
#research
Дима Марков рассказал о поиске работы дизайнером в Германии.
— Через рефералов откликаться эффективнее. Найдите людей из компании, где хотите работать, и попросите вас зарефералить. Участники слак-сообщества berlinru составили таблицу со своими компаниями;
— Долгое молчание компании после отклика — нормально. С рефералом у вас появляется человек, у которого можно спросить о судьбе вашего отклика;
— Большие компании охотнее помогают с переездом, у них обычно хорошо налажен этот процесс;
— Можно найти шаблоны для отслеживания своих откликов и истории взаимодействия с компаниями: job application tracking spreadsheet;
— Резюме должно быть в PDF. Онлайн-резюме может быть дополнением;
— Резюме: без фото, с номером телефона и имейлом, местоположение — действительное, а не желаемое. Фраза «Visa sponsorship required» = «Я готов переехать, чтобы начать работать в компании»;
— Проблема портфолио в Фигме: пока всё загрузится, рекрутёр уже переключится на следующий отклик;
— Если есть время, макеты в портфолио можно перевести на английский, чтобы было понятно, что там происходит. Описание проекта переводите обязательно;
— Обычно если есть White Board challenge, Design exercise, то нет тестового задания. Посмотрите на Ютубе про эти челленджи. Задавайте как можно больше вопросов;
— Также на Ютубе можно подготовиться к Portfolio review и Problem solving. Но сначала решите вопрос с резюме, а уже потом готовьтесь к более поздним этапам;
— В Берлине для трудоустройства в 90% случаев нужен английский. Чтобы получить работу, надо не учить язык, а готовиться пройти на нём интервью: рассказать о себе, проектах, ответить на вопросы («Top questions asked on an interview»);
— Немецкий нужен в крупных корпорациях вроде BMW и Siemens и вне вашей компании, при решении бытовых вопросов;
— Средняя зарплата синьора 80 000 € до вычета налогов в год (исследование 2021 года), после налогов примерно 4500 € на руки в месяц.
#career
Ксения Толокнова и Марина Сапожникова написали о поиске в мобильных приложениях.
— Точкой входа в поиск может быть поле поиска (в верхней, нижней части экрана и ближе к середине; поиск в этом случае — ключевая функция или основной способ взаимодействия с контентом), иконка лупы в нижней навигации (важность функции меньше), иконка лупы в навбаре (важность ещё меньше). Точка входа может быть спрятана, например, в раскрывающемся меню;
— Поиск может быть глобальным (по всему приложению) и локальным (по экрану или разделу), открываться на новом или на том же экране (для локального поиска и фильтрации контента);
— Поисковая выдача может быть простой (однородной), с категориями и фильтрами, с секциями (если хочется разделить контент и не вводить навигацию в виде категорий и фильтров);
— Мультипоиск позволяет обрабатывать несколько запросов одновременно. Например, искать недвижимость в нескольких районах (Zillow) или по фото и тексту одновременно (Google);
— Продумайте, как пользователь будет очищать ввод в поле (скорее всего крестиком в поле) и выходить из режима поиска («Отменить» в iOS, стрелка «Назад» в MD3);
— Результаты лучше выводить после ввода 1–3 символов. Запрос лучше отправлять, когда возникает пауза во вводе;
— Рекомендации до ввода поискового запроса крайне полезны. Кроме повышения удобства (сохранённые, недавние, популярные запросы) они могут стать инструментом дополнительных продаж;
— Не забывайте о подсказках внутри нативной клавиатуры. Их немного, но больше, чем можно разместить в поле поиска.
#search #mobile
Егор Камелев написал о проектировании форм.
— Каждое поле формы должно быть обосновано. Большое количество может отпугнуть пользователя, но стоит учитывать и мотивацию: если очень надо, пользователь заполнит всё;
— Определите, что произойдёт дальше с данными: кто их получит, в каком виде. Возможно, потребуется задать формат письма с ними или спроектировать страницу в админке, которая их отобразит;
— Как система может обогатить то, что пользователь ввёл? Например, получателю может пригодиться дата и время заполнения формы;
— Если обязательных полей меньше, чем необязательных, можно отметить только первые, чтобы не перегружать интерфейс. И наоборот. Если все поля обязательны, можно ничего не отмечать или ограничиться текстом об этом в начале формы;
— Как будет выглядеть письмо или страница с данными в админке, если необязательные поля не были заполнены?
— Как будут валидироваться поля, данные какого типа и объёма можно ввести, какими могут быть ошибки и текст сообщений о них?
— Что увидит пользователь после отправки формы? Что стоит показать в сообщении об успехе? Например, после заполнения формы обратной связи можно указать, когда и на какой имейл будет отправлен ответ. Так пользователь может перепроверить, что не ошибся в адресе;
— Общие принципы работы форм можно определить отдельно и в дальнейшем применять ко всем формам в продукте. Например, из менее очевидных: допустимость автофокуса на первом поле формы, время жизни сессии, автосохранение данных, сообщение при попытке покинуть страницу, защита от роботов и так далее.
Канал Егора. #form
Таня Мисютина поделилась советами, как упорядочить визуализацию.
— Если на дашборде надо не просто показать общую ситуацию и высокоуровневые данные, но и объяснить, почему так сложилось, в визуализации должна быть та сложность, что была в исходных данных. Дашборд не может быть примитивным;
— Внутренняя сложность не прощает внешней небрежности и запутанности, они сразу оборачиваются нечитаемостью и перегруженностью;
— Используйте один формат для визуализации одних и тех же данных, чтобы не сбивать пользователя с толку разными представлениями;
— Разное должно выглядеть по-разному. Скорее всего, так и будет, если выбирать форматы, отражающие суть данных;
— Придерживайтесь единых и логичных правил отображения элементов на экране (заголовков, фильтров, графиков и конролов) для всех состояний визуализации. Учитывайте иерархию показателей и срезов — от большого к малому, от важного к менее важному;
— Продумайте схему переходов между состояниями визуализации, разными дашбордами в системе. Ни один экран не должен быть «вещью в себе»;
— Используйте одинаковые термины для обозначения одинаковых понятий.
#data_visualization #dashboard
Даниэль Виленчук написал о категоризации фидбека.
— Вы начали собирать обратную связь от пользователей и получили таблицу с 3000 отзывами. Как с ними работать?
— Удалите отзывы без текста. Они могут занимать до половины таблицы;
— Практика показывает, что из отзывов короче 10–15 символов почти невозможно извлечь инсайт. Можно отфильтровать таблицу, бегло просмотреть отзывы короче 5 символов и удалить бесполезные. Повторить для 10, 15 и 20 символов. Так очищается не меньше трети документа;
— Отсортируйте отзывы от А до Я. Самые первые, скорее всего, будут мусорными: состоять из цифр и случайных символов;
— Далее по ключевым словам определите родительские категории, например, сценарии («Оплата и промокоды», «Авторизация») или типы пользователей («Покупатели», «Продавцы»);
— По типу возникающих проблем определите дочерние категории: «Оплата и промокоды / Просроченный промокод»;
— В первый раз придётся самостоятельно идти по отзывам, придумывать категории и расставлять их вручную. Так вы познакомитесь с языком ваших пользователей и сформируете набор ключевых слов, по которым отзыв можно отнести к той или иной категории;
— Проставленные категории дадут статистику, какие проблемы вызывают больше обращений пользователей, и позволят работать с фидбеком точечно, передавать конкретным командам;
— Категории и ключевые слова сохраните для категоризации будущих отзывов.
#feedback
Всем привет! СберЗдоровье ищет продуктовых дизайнеров
Мы крупнейшая в России Digital Health компания. Делаем для пользователей сервис телемедицины, запись на приём к врачам и обследования, разрабатываем умные медицинские устройства.
Хотим рассказать про наш дрим-тим
• Директор пользовательского опыта Олег Александров, ранее CDO в MAX. (Топ 10 дизайн-студий России)
В МАХ руководил продуктовой командой дизайна ВкусВилла и Пятёрочки. Лидил разработку дизайна личного кабинет ученика для SkillFactory, и сложный внутренний портал для одного крупного банка.
• Бренд арт-директор – Альберт Аминов. Ранее арт-дир в Самокате и ВК
• Дизайнеры из Яндекс, студии Луч и ВТБ
Плюшки работы с нами
• Сбер Здоровье аккредитованная IT компания
• Полное комбо соц. пакета: ДМС, компенсация спорта, обучения, психологи, льготная ипотека и оплачиваемые выезды на профильные конфы
• Прозрачная система роста для дизайнеров. Карта грейдов, полугодовые оценки 360, рейзы зарплат по достижению целей
Сейчас мы ищем:
😗 UI / UX дизайнера на сайт в продукт записи (https://vacancy.sberhealth.ru/vacancies/3562860)
😎 Продуктового дизайнера на направление умных девайсов и мониторинга. Предстоит делать личный кабинет, мобильное приложение и разделы сайта (https://vacancy.sberhealth.ru/vacancies/3562996)
Хочешь в нашу крутую команду, то заполняй анкету. Мы тебя ждём 👋
https://forms.yandex.ru/cloud/65d5b638068ff0575304f79e/
Андрей Шапиро написал о схеме преобразования данных в системе с интерфейсом.
— Любая информационная система — последовательность шагов по преобразованию данных;
— Каждый шаг — преобразователь, «чёрный ящик», получающий данные и выдающий результат их обработки. На этом шаге может вызываться внутренний или внешний сервис, выполняться функция программы, работать человек (получать информацию, интерпретировать её, принимать решения и вводить новые данные и команды);
— Предохранитель не допускает, чтобы в преобразователь попадали неподходящие данные. В интерфейсе предохранителем служат искусственные ограничители и обратная связь;
— В умных системах преобразователи умеют работать с самыми разными вариантами ввода (но добиться этого — инженерная задача). В системах поглупее усиливается предохранитель, который подсказывает, что не так с вводом и каким должен быть запрос, чтобы система смогла его обработать;
— Преобразователь в общем случае исполняет некоторую бизнес-логику, перебирает сочетания условий (входные данные) и выдаёт подходящее конкретному сочетанию решение (выходные данные). Удобно записывать их в форме таблиц решений (применяются в нотации DMN);
— Эти таблицы можно соединить в цепь преобразований и таким образом получить полную схему обработки данных;
— Лучше не включать несколько полей ввода в один преобразователь, так как количество вариантов перебора сильно увеличивается, и удобнее разделять ответственность между разными преобразователями;
— А некоторые поля, в которых справочник допустимых значений в предохранителе зависит от входных данных, могут потребовать нескольких преобразователей.
#analysis
Пройдите курс «Дизайнер интерфейсов» и займите своё место в IT. Основа обучения — практика на реальных задачах UX/UI-дизайнера.
Когда вы приобретёте все необходимые навыки, Практикум поможет подготовить резюме и портфолио, проведёт тестовые собеседования и сделает всё, чтобы вы как можно быстрее начали работу по новой профессии.
Преимущества курса Практикума:
— бесплатная вводная часть, чтобы познакомиться с профессией и программой;
— можно совмещать с работой или учёбой;
— возможность оплачивать курс частями;
— можно взять паузу, если потребуется.
Если по тем или иным причинам вы передумаете проходить курс — достаточно написать об этом в поддержку. Мы вернём деньги за оставшиеся дни учёбы.
→ В дизайн интерфейсов с Практикумом
Никита Прокопов написал о круглых чекбоксах [In English].
— Чекбоксы от радиокнопок отличаются тем, что они квадратные, внутри отображается галочка, когда чекбокс выбран, можно выбрать любое количество чекбоксов в группе. Радиокнопку в группе можно выбрать только одну;
— В ранних версиях операционных систем (Mac OS 7.5, 1994 год и Windows for Workgroups 3.11, 1993 год) можно встретить крестики вместо галочек;
— Но форма радиокнопок и чекбоксов отличалась уже в 90-х, и операционные системы придерживались этого правила;
— В последнее время в вебе можно было встретить радиокнопки с галочками (Twitter), а также квадратные радиокнопки с галочками (Yandex Maps);
— Веб всегда был пластичнее, но подобное стало встречаться и в нативных приложениях (Telegram for macOS);
— В некоторых продуктах (Yandex Maps, опросы в Telegram Web) рядом можно встретить радиогруппу и группу чекбоксов, которые работают по-разному (чекбоксов можно выбрать несколько), но визуально вообще никак не отличаются;
— Создатели операционных систем до сих пор придерживались изначальной концепции, но теперь в библиотеке Apple для visionOS появились круглые чекбоксы. Видимо, стройной концепции с круглыми радиокнопками и квадратными чекбоксами пришёл конец.
Канал Никиты. #radio_button #checkbox
⚡️ Изящно проработанный сценарий получения фидбека.
Vlad Dugnist разместил вот такое сообщение в iOS приложении. Его видно по лонг-тапу, обычно перед попыткой удалить аппку. В итоге c этой точки прилетает 50% от всего фидбека от юзеров.
@tg_knl
Игорь Штанг (уже давно) написал о висячей пунктуации из 120-го параграфа «Ководства».
— Оптическое выравнивание — когда вы слегка свешиваете дефисы, запятые, точки и прочую мелочь, чтобы граница текста казалась ровной;
— Вынос на поле — когда вы ставите буллиты или цифры на поле, чтобы обозначить особые части текста. С вынесенными буллитами сразу понятно, что перед нами список;
— Висячая пунктуация — вынос за линию набора налево кавычек, скобок, буллитов — ни то, ни другое. Для оптического выравнивания знаки слишком тяжёлые, а для выноса — указывают на случайные, а не особые части текста;
— Сама студия давно отказалась от висячей пунктуации в своих книгах и новой версии сайта. Странно, что параграф 120 ещё не исчез из «Ководства».
Канал Игоря. #typography
Александр Мачуговский написал о неактивных кнопках и расположении кнопок в мобильных формах.
— Блокировать действие уместно, когда не выполнены условия для его выполнения;
— Проблема в том, что условия могут быть разными: не хватает данных от пользователя (на текущем экране, прошлом, в сторонних сервисах вроде подтверждения имейла) или компонентов программы (медленный интернет или вычисления, внутренние ошибки);
— Неактивная кнопка не подскажет, в чём проблема, а также плохо заметна;
— Блокировка кнопок может быть полезна для необратимых деструктивных действий, чтобы совершить ошибку было сложнее;
— В мобильной форме фиксированная в нижней части экрана кнопка занимает место, и её преждевременное нажатие (если она не заблокирована) приводит к ошибке. Лучше расположить её в конце формы — пользователь увидит её, прокрутив экран с формой до конца, и она как раз окажется под пальцем;
— Если форма занимает меньше одного экрана, кнопку можно закрепить в нижней части экрана, чтобы на неё легко было нажать;
— Таким образом в длинных и коротких формах пользователь будет видеть кнопки в одном и том же месте.
#form #button #mobile
Михаил Руденко написал, как погружаться в новую предметную область.
— Это полезно, если делаете проекты в разных сферах;
— Начните с визуализации (моделирования) текущего понимания, как всё работает. Так легче увидеть белые пятна в понимании и спланировать их прояснение. На старте это может быть модель системы как чёрного ящика: что у неё на входе, на выходе, в окружающей среде;
— Затем можно перейти к устройству чёрного ящика: как он превращает входные данные в выходные;
— Экспертные интервью — быстрый и малозатратный способ разобраться;
— Но надо отличать эксперта от болтуна. Ищите не медийность, а деятельность (кто сделал проекты, которые вас впечатлили) и тех, кто сочетает теорию с практикой: чистые теоретики бесполезны, а чистые практики не всегда могут понятно объяснить;
— Упирайте на вопросы «как» и «почему», просите примеры из жизни, почему в них эксперт действовал именно так. Не доверяйте какому-то одному эксперту;
— При изучении конкурентов в новой предметной области обычно непонятно, на что смотреть, поэтому конкурентный анализ бесполезен. Лучше выясните, какие у них ценностные предложения и какие проблемы клиентов они решают;
— В некоторых сферах многое зависит от регуляторных ограничений (законы и нормы, влияние государственных структур). Выделите нормы, которые выполняются фактически и которые есть только на бумаге. Представители регуляторов тоже идут на контакт;
— Внутренний анализ стоит начать с выделения стратегии (например, через стратегические классы Портера) и технологии создания ценности. Если есть возможность, обязательно поговорите с вождями компании (опросник по дисциплинам лидерства);
— Далее проведите интервью с сотрудниками (от топ-менеджеров до кассиров) и клиентами (как компания видится их глазами);
— Метрики не нужны. Измерять полезно только то, что понимаешь как работает.
#research
Дарья Хуторянская написала, что проверить при передаче макетов разработчикам.
— На момент передачи макетов уже проделана огромная работа, и тем обиднее из-за перегруза задачами, ограниченных сроков или неопытности что-то упустить и затем потонуть в уточняющих вопросах разработчиков;
— Проверьте, все ли сценарии взаимодействия с объектами предусмотрели. Помните о CRUD (create, read, update, delete) — операциях, свойственных всем объектам. Составьте карту объектов, их свойств и действий с ними (концепция #ooux);
— Представьте поведение интерфейса, когда данных нет, мало, много (пагинация или скрол, обрезание длинной фамилии или перенос на вторую строку) или достигнут их лимит (технические ограничения, возможность добавить не более 10 фото в профиль);
— Учтите разные варианты завершения пользовательского сценария: успех, ошибка (пользовательская и на стороне системы), загрузка, пустые состояния, онбординг;
— Сверьтесь с ролевой моделью. Например, как будет выглядеть объект, если пользователь может и не может его редактировать;
— Опишите сложные компоненты-организмы: зона клика, поведение при изменении ширины и высоты, разном объёме данных. Спецификация может быть там же, где вы собираете макеты;
— Покажите адаптивные состояния для разных разрешений экрана;
— Соедините макеты стрелочками, объедините отдельные сценарии в блоки макетов, опишите сценарии текстом;
— Если какие-то макеты не ушли в релиз, добавьте комментарии для тестировщиков;
— Добавьте ссылки на описания сложных компонентов.
#delivery
Получите офер в команду AI-тренеров YandexGPT за 2 дня!
17–18 февраля Яндекс проводит Fast Track для AI-тренеров в YandexGPT. Ждём авторов, редакторов, корректоров, копирайтеров, журналистов, переводчиков, фактчекеров, контент-менеджеров — в общем, всех, кто умеет и знает, как работать с текстами.
👉 AI-тренеры — новая и перспективная профессия
YandexGPT 2 — новая версия нейросети, которая пишет и анализирует тексты, придумывает идеи и общается почти как живой человек. Чтобы обучить такую модель, нужны не только талантливые разработчики, но и AI-тренеры.
Они готовят эталонные тексты, на которые нейросети равняются, оценивают их ответы и проверяют на достоверность. А ещё AI-тренеры решают задачи, которые до них никто никогда не решал.
👉 Как проходит Fast Track
Все встречи пройдут онлайн. До самого мероприятия нужно:
— зарегистрироваться и пройти тест на знание русского языка и базового фактчекинга — до 3 февраля;
— познакомиться с теорией и сделать два письменных задания — до 10 февраля.
17 февраля пройдёт онлайн-практикум по работе с нейросетями и текстами, а 18 февраля вы познакомитесь с командами и, возможно, получите офер.
👉 Регистрируйтесь и приходите!
Реклама. ООО "Яндекс". ИНН 7736207543
Ксения Гаврилова написала о предпосылках создания дизайн-системы и выводах, которые сделала в процессе её создания.
— Возможно, вам подойдёт одна из ДС, что есть в открытом доступе;
— Если создаёте свою, выделите роль её владельца. Иначе столкнётесь с перекладыванием ответственности и увеличением сроков разработки;
— Не будьте слишком оптимистичны при оценке времени. Люди болеют, ходят в отпуск и могут не иметь опыта в создании и описании компонентов. Если вы справились с компонентом кнопки за 20 часов, это не значит, что другой дизайнер потратит столько же на другой компонент;
— Кроме состояний компонента описывайте паттерны его использования в продукте. Например, для радиокнопки: как сообщить об ошибке (если выбор обязателен), какой стиль должен быть у заголовка радиогруппы, можно ли расположить её горизонтально;
— Чем больше людей в команде, тем более формально стоит подходить в сбору и упорядочиванию информации: заметки по итогам встреч, трансляция их в телеграм-канал, презентации больших изменений, внутренняя база знаний;
— Работа над ДС — долгий процесс. Рассказывайте о прогрессе, вовлекайте стейкхолдеров, чтобы им не казалось, что всё идёт слишком долго;
— Закладывайте ресурсы на развитие ДС, вводите роли выделенных дизайнеров и разработчиков ДС. Продуктовые дизайнеры могут участвовать в развитии ДС только в факультативном формате, когда закрыты более приоритетные продуктовые задачи.
#design_system