25231
Чат читателей: @uxnoteschat В соцсетях: vk.com/ux_notes и fb.com/uxnotes Вакансии: @uxwork Автор: @zGrav Est. 2016. Реклама на канале: https://uxnotes.ru/ads
Чтобы освоить новые навыки для работы или познакомиться с IT-профессиями, не обязательно учиться платно.
Собрали бесплатные курсы и открытые вебинары Яндекс Практикума. Пригодятся, если хотите:
— составить резюме,
— подготовить презентацию,
— освоить Excel,
— познакомиться с DataLens,
— изучить основы программирования или анализа данных,
— подобрать IT-профессию по душе.
→ Выбрать курс и учиться без затрат
#реклама
Александр Овчаренко написал о красной ночной палитре интерфейса.
— Она сохраняет человеку способность видеть в темноте, так как ночные фоторецепторы (палочки) не чувствительны к спектральному красному;
— Актуально для ночных вахт в море (разглядеть тусклые огни буёв, встречных судов, мутное пятно айсберга), астрономов и тех, кто любит что-то делать в темноте;
— Обычная тёмная тема не подходит, так как любой более-менее яркий не красный цвет возбуждает дневные рецепторы (колбочки);
— Если выкрутить на минимум яркость экрана с тёмной темой, будет банально плохо видно. Красная палитра может быть яркой и контрастной;
— Чтобы такая палитра работала, приложение должно быть открыто на весь экран, на самом устройстве не должно быть не красных индикаторов. Даже белый текст в Action bar и курсор будут мешать ночному зрению;
— Проблема, что мониторы светятся своим светом, и он совсем не красный. Плохие мониторы вместо чёрного показывают холодный серый (с синевой). В этом случае от палитры толку будет мало;
— Рисование интерфейса в красной ночной палитре ничем не отличается от создания монохромного UI;
— Для визуализации тревог подходят методы дизайна для людей с дальтонизмом. Тревога — мерцание с ярким красным фоном (RGB 255,0,0, когда остальной интерфейс в диапазоне 0–192,0,0) и иконкой тревоги, предупреждение — мигание рамкой, другая иконка;
— Можно попробовать добавить оттенки, близкие к красному, например, оранжевый. Но спектрально оранжевый и оранжевый RGB-дисплея (красный с примесью зелёного) — это физически разные истории.
Ставьте 😎 если статья понравилась. Канал Александра. #dark_theme
Анастасия Винокурова написала об исследованиях с помощью краудсорсинговых платформ вроде Oprosso, Толоки, SurveyMonkey, Fastuna.
— Плюсы: дёшево, быстро, дизайнер может провести исследование сам;
— Минусы: не подходит узкоспециализированным продуктам, респонденты диджитальны (пользуются цифровыми продуктами);
— На таких платформах заказчик формирует задания, тесты, и есть исполнители, которые выполняют их за деньги;
— Задания могут быть любыми: от скачивания приложения до похода в магазин;
— Не везде есть инструменты для анализа результатов, иногда ответы приходится сортировать и оценивать вручную;
— Есть читеры, которые машинально отвечают на вопросы, чтобы получить оплату. Их ответы можно отсеивать с помощью вопросов-ловушек;
— Например, показать 2 варианта дизайна: нормальный и откровенно плохой и попросить выбрать лучший (и блокировать тех, кто выберет плохой) или задать завершающий вопрос «На что вы только что нажали» или «Какого цвета была кнопка». Кто нажимает бездумно, правильно не ответит;
— Проводите пробные запуски на 5–10 человек, прежде чем привлекать 100–200 респондентов, чтобы выявить ошибки, неоднозначно сформулированные вопросы;
— Эти платформы можно использовать для first click test, side-by-side (сравнение и выбор из 2 и более вариантов), five second test;
— Тест на понятность позволяет узнать, как люди воспринимают дизайн, например, расшифровывают иконки, микротекст. Достаточно показать макет и спросить «Как вы думаете, что произойдёт, когда вы нажмёте на…».
#user_testing #unmoderated
Иван Емелюшкин написал об использовании эмодзи в интерфейсе.
— Они выглядят по-разному в разных операционных системах и в разных версиях одной и той же ОС;
— В старых версиях ОС может не быть нужного эмодзи. Проверяйте в Эмодзипедии;
— Эмодзи Эпл нельзя вставлять картинками (только в виде текста) и использовать на других платформах. Можно взять эмодзи Твиттера.
#mobile
В Selectel написали, как сократили время поиска респондентов (труднодоступная аудитория) для исследования не массового продукта.
— При поиске через знакомых и коллег желающие со временем заканчиваются. Участие других людей удлиняет коммуникационные цепочки. Невысокий процент отклика;
— Поиск через агентство сильно растянут по времени;
— Решили искать проактивно: сформировать базу потенциальных респондентов;
— На отдельной странице рассказали, как устроен процесс, какие проводят исследования (интервью, тестирование интерфейсов, опросы);
— Название изменили на «Selectel Мнения», так как слово «исследования» люди понимают по-разному (часть полагала, что это из области медицины);
— Людям важно быть услышанными и оказывать влияние. Вознаграждение для дорогих специалистов и руководителей — не главный фактор, но это правило хорошего тона;
— В анкете — необходимый минимум вопросов, чтобы не отбить желание слишком длинной формой. Но данных мало, респонденты не подходят для исследований с узкими критериями отбора;
— Страницу прорекламировали на собственных ресурсах (сайт, рассылка, телеграм-канал) и профильных (Хабр, VC);
— Собранные данные не используют для массовых рассылок.
#research #recruiting
Вова Красильников написал, как в Фигме организовать работу со светлой и тёмной темой с помощью переменных.
— С помощью панели Local variables (ничего не выбрано, вкладка Design) добавьте переменную типа Color;
— Присвойте переменной второе значение, добавив ещё одну колонку в появившейся таблице;
— Задайте компонентам и уникальным элементам макета цвета с помощью переменных (отображаются квадратиками в отличие от круглых стилей);
— Чтобы использовать одно из значений переменной, на панели Layer выбранного элемента нажмите на гаечки, выберите коллекцию переменных (по умолчанию будет Collection 1) и название нужного столбца (режим);
— По умолчанию используется режим родительского слоя;
— Можно создать секции светлой и тёмной темы, задать для них режимы. Тогда фреймы с переменными цветами, попадая в эти секции, будут автоматически применять цвета светлой или тёмной темы.
Канал Вовы. #figma #dark_theme
В Testograf написали, как удержать внимание участников опроса.
— Оптимальная длительность опроса — от 5 до 15 минут;
— Делите опрос на разделы и подразделы;
— Задавайте вопросы, которые стимулируют мышление и вызывают интерес;
— Сообщайте респондентам, почему их мнениие важно и что вы будете делать с результатами опроса;
— Используйте разные форматы вопросов: с выбором одного ответа, множественным выбором, открытые, шкалы.
#research #survey
В Riverstart провели бенчмаркинг сайтов аэропортов и поделились удачными решениями.
— За основу навигации можно взять потребности пользователей и разделить всё на информацию для вылетающих, встречающих и транзитных пассажиров;
— Табло — важнейшее содержимое сайта, иногда его сразу выносят на главную. Оно должно оперативно обновляться;
— Чтобы пользователи не упускали изменений в рейсе, новые значения лучше отображать на табло рядом со старыми и выделять их;
— Возможность добавить рейс в закладки на сайте аэропорта: не надо регистрироваться и передавать личные данные, но узнать об изменении можно только на сайте;
— Подписка на пуши сайта аэропорта в браузере, уведомления через Телеграм, ВК или имейлы: можно получать уведомления удобным способом, но надо поделиться своими контактами;
— Сориентироваться в аэропорту поможет его интерактивная карта. На ней лучше использовать элементы навигации самого аэропорта (иконки, цвета, названия объектов);
— Сделайте каталог услуг аэропорта с разделением на категории и поиском, ключевые услуги выведите на главную;
— Покупки в аэропорту можно добавить как этап пути пассажира перед регистрацией: с рекламой, напоминанием купить подарки.
#transport
Артемий М. написал о пользе UX-исследований.
— Продуктовый дизайнер и UX-исследователь — носители экспертизы о пользовательском опыте, но немного разной;
— Исследования показывают, какой опыт получают конкретные пользователи с конкретными продуктами;
— Часто решения основываются на лишь на экспертизе дизайнера, что ускоряет time to market, но фактически означает тестирование гипотез на бою, что не круто (но иногда гипотезы можно проверить только так);
— Культуру проверки своих решений надо воспитывать в себе (но дизайнер не может заменить полноценного исследователя) и в компании;
— Надо быть готовым, что по результатам исследования дизайн придётся переделывать;
— Благодаря исследованиям дизайнер видит совершённые при проектировании ошибки и может расти;
— Исследования прокачивают эмпатию и вытаскивают из информационного пузыря (в котором все пользователи ходят с последними айфонами и тому подобное);
— И создают аргументацию для выбора того или иного решения.
#research
В три команды Авито ищут UX-специалистов, чтобы делать исследования:
➡️ Руководитель группы исследователей в команду Buyer Experience
➡️ Продуктовый редактор в команду опыта продавца
➡️ Старший UX-исследователь в команду логистики
Что предлагают:
• Прозрачная система премий, достойная зарплата — размер обсудите на собеседовании;
• Гибридный формат работы — из дома и комфортного офиса в центре Москвы с местами для уединённой работы, зонами отдыха и гамаками;
• Мощное железо, дополнительные мониторы и всё, что нужно для продуктивной работы;
• Личный бюджет на обучение — книги, курсы и конференции, доступ к онлайн-библиотеке издательства МИФ;
• ДМС со стоматологией с первого дня работы, терапевт, психолог и массажный кабинет прямо в офисе;
• Два фитнес-зала и душ в офисе, занятия йогой и скидки на абонементы.
Подробности о вакансиях и анкеты соискателей — по ссылкам.
#реклама
Виталий Фридман написал, как сделать области нажатия в мобильных интерфейсах удобнее.
— Их рекомендуют делать минимум 44×44 px. Поэтому на нижней панели меню поместится не более 5 пунктов;
— На разных экранах пиксели разные, поэтому следует говорить о DIPs (dp), device independent pixel;
— Таблица для перевода pt в px и em, в SP или DP для Android, в pt для iOS и в DIP или px для Windows;
— Минимальная область нажатия может быть разной: 11 мм (31 pt / 42 px) в верхней части экрана, 12 мм (34 pt / 46 px) в нижней, 7 мм (20 pt / 27 px) в центре;
— Согласно требованиям WCAG 2.1 уровня ААА, если область нажатия находится в предложении или текстовом блоке, она может быть 27 px;
— Предлагайте отдельные контролы для точных манипуляций. Можно поворачивать изображения жестом, но удобнее может быть специальный слайдер или кнопка;
— Иногда несколько касаний лучше одного. Можно выбирать цвет товара нажатием на маленькие кружочки, а можно при нажатии на блок с кружочками отобразить специальную панель выбора цвета с удобными большими контролами;
— Максимизируйте кликабельные области. Например, чтобы нажать можно было на всю карточку, а не только заголовок, или на весь прямоугольник аккордеона.
In English. Конвертер mm в px и обратно Александра Овчаренко. #mobile
Сегодня начался ежегодный хакатон «Лидеры цифровой трансформации».
— 11 дней назад больше 1000 команд разработчиков со всех уголков России и ещё 37 стран мира стартовали работы по задачам от города и бизнеса. В финале представят свои решения 210 коллективов;
— Уже завтра они выступят с питчами и поборятся за 42 миллиона рублей призового фонда;
— Сегодня с лекциями выступали ведущие эксперты Самолета, Tada.team, Whoosh, РВИ, Cloud.ru и других компаний;
— Корпоративный мессенджер Tada.team предложил участникам интерактивные площадки и квест с призами от творческого объединения ÖMANKÖ;
— Специальными гостями были блогер и телеведущая Анастасия Ивлеева и магистр ЧГК Максим Поташев;
— Впереди ещё 2 дня.
#реклама
Ярослав Александров написал, как усложнить жизнь злоумышленникам и сохранить удобство входа.
— Это две противоположные цели: 1) Упрощать прохождение воронки регистрации и авторизации; 2) Снижать число попыток несанкционированного доступа к пользовательским профилям;
— Метрики удобства: процент авторизованных пользователей, общее количество покупателей и сделок, ключевые конверсии, ключевые действия на площадке (покупка, контакт);
— Проверяйте все сценарии UX-тестами;
— Отслеживая обращения пользователей, объединяйте жалобы с данными, чтобы видеть общую картину, так как часто нарушители нагружают поддержку, маскируясь под недовольных пользователей;
— Слабые пароли — одна из главных точек приложения усилий взломщиков. Формальные требования к паролям не работают. Пароль P@ssword1 так же легко подобрать, как и password;
— Внедряйте более сложные требования к паролям и одновременно рассказывайте, как легко создать и запомнить по-настоящему сложный пароль. Например, использовать как пароль 3 случайных слова на английском или русском (транслитом);
— Люди включают 2-факторную авторизацию, когда а) их где-нибудь взломали, б) профиль стал ценным, в) прочитали, что к профилю может получить доступ посторонний. Они не хотят, чтобы от их имени кого-то обманули;
— Большинство способов 2-факторной авторизации портят пользовательский опыт. Есть метод Risk Based Authentication, когда такая авторизация нужна только если система подозревает взлом;
— Способы 2FA: смс, пуш, звонок (продиктовать код, ввести последние 4 цифры номера, с которого звонили, пользователь должен сам позвонить), TOTP, QR-код (отсканировать из приложения), имейл (код или ссылка в письме), внутренний мессенджер продукта, биометрия, список одноразовых паролей, физические ключи, пин-код.
#log_in
Фрэнк Рауш написал о шаблонах навигации в iOS-приложениях.
— Чаще всего архитектура приложений — иерархическое дерево с несколькими уровнями вложенности;
— Навигация происходит по структуре дерева. Из списка пользователь переходит к новому списку или конечным экранам, а возвращается назад по кнопке «<»;
— Плоская структура: шаблон предназначен для навигации между ключевыми экранами с помощью нижней панели на телефоне и боковой на планшете;
— Ключевых экранов может быть не более 5, один из пунктов меню всегда выбран, панель доступна всегда, когда не перекрыта модальным окном;
— Пирамидальная структура: шаблон позволяет быстро перемещаться между элементами одного уровня иерархии (например, свайпами), не возвращаясь на родительский экран;
— Модальная навигация: высокоприоритетные окна (требуют принятия решения, диалоги), низкоприоритетные (не требуют принятия решения, подсказки, попапы, всплывающие меню);
— Немодальная навигация: уведомления, интерактивные элементы вроде индикатора настройки громкости;
— Внутренняя навигация: изменение состояния (пользователь остаётся на том же экране), пошаговая навигация (ряд экранов объединены в линейный флоу и размещены в модальном окне).
#mobile #navigation
Станислав Хрусталёв написал о подводных камнях NPS.
— Если человек говорит о готовности рекомендовать, это не значит, что он действительно так сделает. Не стоит использовать NPS для прогнозирования;
— Чем больше вариантов, тем сложнее сделать выбор. В данном случае люди выбирают из 11 вариантов ответа. Плюс для респондента разница между 6 и 7 (или 8 и 9) невелика, а для расчёта — значительна;
— По гайдлайнам варианты должны располагаться в один ряд слева направо. На телефонах цифры стоят близко друг к другу, что повышает вероятность ошибки;
— Показателем легко манипулировать, достаточно разослать опрос сегменту тех, кто оценил сервис на 5 в опросе CSAT;
— Его погрешность примерно в 2 раза выше, чем в том же CSAT. Для получения надёжных данных выборка должна быть больше;
— Он не покажет изменений, если клиенты в среднем ставили 0 и 1, а после изменений в компании стали ставить — 5 и 6. И в целом не покажет изменений при смещении оценок внутри групп промоутеров, нейтралов и детракторов.
Канал Станислава. #metrics
Томас Лауринавичюс написал о корзине.
— Разместите иконку корзины в правом верхнем углу, где люди привыкли её искать;
— Показывайте количество товаров в корзине. Лучше использовать контрастный значок, чтобы напомнить о забытых в корзине товарах;
— Подтверждайте, что товар добавлен в корзину. Кнопка «Перейти к оформлению заказа» подталкивает пользователей оформить заказ;
— Часто интернет-магазины открывают корзину после добавления в неё товара, что прерывает процесс выбора товаров. Можно отображать модальное окно с мини-корзиной, где будет основная информация о товарах, их цена и количество, а также общая стоимость и кнопка оформления заказа;
— Сделайте заметной информацию о бесплатной доставке. Дополнительные расходы — одна из главных причин, почему люди бросают свои корзины;
— В корзине основной акцент должен быть на кнопке оформления заказа.
In English. #ecommerce #cart
Спрос на инженерные специальности растёт. В то же время выпускникам, склонным к гуманитарным наукам и творчеству, часто приходится выбирать меньшее из двух зол:
— или поступить на востребованное, но ни капли им не интересное направление;
— или выбрать то, к чему лежит душа, но не приносит дохода.
Теперь такие абитуриенты могут найти профессию в IT, которая будет и интересна, и востребована. В Институте при международной EdTech-компании iSpring открыт набор на бакалавриат «Дизайн цифрового продукта». Поступай, если хочешь найти любимое дело и реализовать себя :)
В конце 1 курса ты разработаешь проект по продвижению реальных продуктов IT-компании, задизайнишь лендинг и баннеры, напишешь к ним тексты, а ещё запустишь таргетинг и контекстную рекламу. Со 2 курса – получишь работу в креативном отделе IT-компании.
Почему учиться в IT-вузе классно:
— твои преподаватели — молодые и яркие профи, работающие в индустрии;
— ты профессионально растёшь, копишь проекты в портфолио и обрастаешь крутыми знакомствами ещё во время обучения;
— учебная программа развивает hard skills и soft skills: от веб-дизайна и копирайтинга до занятий по коммуникациям и публичным выступлениям;
— тебя окружают люди, которые горят тем, чем занимаются, и добиваются высоких результатов;
— финансовый вопрос — не препятствие к поступлению. Если у поступившего нет возможности оплачивать обучение, ему поможет компания-грантодатель.
Приём документов уже начался. О том, как поступить в IT-вуз — читай на сайте: ispring.institute
#реклама АНО ВО «РУМТ» ИНН 1215144727 Kra23oCNR
Новая работа. Часть 3
Сегодня расскажу о том, как я собеседовалась в Яндекс на разные вакансии. Напомню, что в этой серии постов рассказываю о том, как искала работу, и что узнала по дороге! Предыдущие части можно посмотреть тут: первая, вторая.
Перед тем как написать пост, я попробовала сосчитать, сколько у меня было яндексовских собесов за время поисков. Ребята, 10(!) полноценных (от часа и больше) + маленькие созвоны с рекрутёрами и HR… Короче, есть из чего поделать выводы!
1. Найм в Яндексе — это очень системно
Есть определённый алгоритм, определённая форма тестовых заданий, чёткое количество созвонов до тестового и после. Это хороший опыт для того чтобы понимать, как в целом устроен найм в корпорацию.
2. Найм в Яндексе может быть долгим
И я поняла это, когда ребята предложили вакансию, сказав, что уже есть два кандидата, которые сделали тестовое и ждут прямого ответа. Это к тому, что такой найм лучше «отпустить» в своей голове и не ждать молниеносной реакции. Всё-таки очень много людей сражаются за вакансии!
3. Если хотите в Яндекс — лучше подаваться через портал Яндекса
Это подтверждают мои наблюдения: на вакансии оттуда мне отвечали намного быстрее. Это же говорят hr-ы Яндекса. На hh слишком много заявок, это очень тяжело разбирать.
4. Не срослось с конкретной вакансией? Вы всё равно желанный кандидат!
Когда и если вы проходите собеседование в большой компании, оно было успешным, но что-то «не срослось», вы всё равно остаётесь желанным кандидатом. У больших компаний есть внутренние базы, которые активно изучают рекрутеры. Я познала это на своём опыте: у меня была долгая череда собесов на вакансию, всё шло хорошо, мы уже с командой познакомились, и в самый последний момент ребята сказали, что всё-таки им сейчас нужен немного другой спец. Зато после этого ко мне пришли с предложением об ещё двух вакансиях!
5. Вакансия — это условность
Ну ладно, не совсем уж условность, но и не железное правило. Конечно большие компании могут позволить себе искать спецов с опытом, который соответсвует заявленному на сто процентов, но если у вас он совпадает не до конца — это нормально. У меня бывало, что я приходила и открыто сразу говорила, что «вот это» я вообще не умею или буду пробовать впервые. А вот это делать не хочу, а хотела бы делать вот это. И такие разговоры никогда не были помехой следующему этапу. Короче, лучше чувствовать себя честно и не стесняться подаваться.
6. Midjourney — спасение на тестовых
Три из четырёх заданий я делала, подключая нейронки. Это совет не столько по поводу Яндекса, сколько вообще про подход к тестовым. Мне часто нужно было сделать key visual, иллюстрацию или я понимала, что «вот тут будет эффектно тридэ». Midjourney меня очень выручал, а результаты я дорабатывала руками и честно говорила, что это генератив.
7. Видеопрезентации — уберфича на тестовых
Я вообще любитель обьяснить свои решения. Поэтому к тестовым я всегда прикрепляла короткий видос с закрытой ссылкой на ютубе. Ребята, эти видео никогда не оставались без внимания! Это всегда выглядит эффектно, помогает большой команде оценить вашу работу быстрее и показывает, как вы думали. Короче, записывайте видосы! Это выделит вас среди других кандидатов и покажет, какой вы умница.
Вроде бы всё, что вспомнила — рассказала! Что-то забыла? Спрашивайте в комментах и ставьте снова все эмодзи мира…
#как_посмотреть_на_работу
Найдите респондентов для вашего исследования с помощью Meet Your Client.
Преимущества:
— Первые контакты уже через 2-3 часа после запуска рекрута — проведите первые интервью в тот же день.
— Решение находит в 3 раза больше респондентов — вы можете отобрать лучших.
— Оплата только за фактически проведенные интервью.
Инструмент найдет респондентов для:
— Модерируемых UX-тестов
— Личных интервью
— Фокус-групп
🟠 Запросить демо →
#реклама
Маша Панченко написала о целостном дизайне.
— Это подход к проектированию, предполагающий взгляд на продукт с разных сторон, учёт окружающей среды и всех заинтересованных сторон (не только пользователей и клиентов);
— На примере дизайна интерьера стоит учитывать: шумный ли район (нужна ли шумоизоляция), экологичны ли материалы (если поставить винтажный холодильник, как его чинить, когда сломается), устойчива ли мебель к кошачьим когтям;
— Потребуется выйти за рамки цифровых технологий. Чаще всего целостные дизайн-решения меняют физические объекты и процессы;
— Отдела дизайна для этого недостаточно, нужна синхронизация всей компании;
— Полезны дополнительные методы исследования, например, этнографические. Надо выйти в поле, чтобы лучше понять окружающую среду;
— Вовлекайте все заинтересованные стороны в проектирование (то же предполагает и дизайн-мышление);
— В дополнение к дизайн-системе (как библиотеке визуальных образов) нужна система ценностей, философии и внимания к деталям;
— Трудно сказать, что какая-то компания практикует целостный дизайн (это идеалистическое понятие), но некоторые стремятся: Apple (продукты объединяются в экосистему, последовательный пользовательский опыт, инклюзивность), Bosch (строят умные экологичные здания);
— Переходить на целостный подход лучше не спеша.
In English. Перевёл Иван Кунцевич, вот его канал. #thinking
Михаил Мирошников написал, как разное содержимое пушей с персональными промокодами влияет на CTR, — на основе проведённого исследования (а/б-тесты).
— Эмодзи (один) ставьте в начале заголовка;
— Обращайтесь к пользователю по имени в начале короткого пуша. В длинном «пуше» это не важно (в приложении Сбера отображаются уведомления, Михаил называет их длинными пушами);
— Промокод в коротком пуше располагайте в теле, в длинном — в заголовке;
— Акцент на сроке его действия повышает CTR в коротком пуше;
— Лучше всегда писать размер скидки, даже если она небольшая. Номинал скидки размещайте в заголовке;
— На кнопке в длинном пуше пишите «Воспользоваться»;
— Не усложняйте текст цифрами. Пишите «миллионы» вместо «8 000 000»;
— Информация о продуктовых фичах (доставка, бонусы) повышает CTR, даже если удлиняет сообщение;
— Англицизмы (маркетплейс, шопинг) снижают количество переходов, но это может зависеть от аудитории;
— Призыв к действию в тексте («отметьте с праздничным промокодом…») CTR не повысил.
#push #writing
⚡️ Авито проведёт очередной Avito Design Talk.
Эксперты поговорят о том, как создать успешную пару дизайнер + продакт, обсудят возможные конфликты и пути их разрешения.
Программа митапа:
• 18:05–18:35: Почему мы не рисуем концепты в стол — Наталья Юматова, Алексей Архипов, Авито
• 18:35–19:05: Конфликты во взаимодействии продакт-менеджера и дизайнера как возможность изменений — Роза Бадаева, ex. Delivery Club
• 19:05–19:35: Путь от дизайнера к менеджеру и обратно — Дмитрий Быков, Osome
Читайте подробности и регистрируйтесь 👉 на сайте.
Трансляция на ютуб-канале AvitoTech начнётся в 18:00 по Москве 29 июня.
Реклама. ООО «Авито Тех». LdtCK5HR1
Тесс Гэдд написала о сочетании предварительного просмотра и полного отображения.
— Превью (предварительный просмотр) — релевантные данные, позволяющие быстро составить общее представление и показывающие, что на них можно нажать для перехода к полному отображению (все данные);
— Варианты превью: карточки (включая вариант с одной карточкой в строке), список (может выглядеть как таблица), обрезка (заголовок и часть текста с кнопкой «Читать дальше»);
— Полное отображение: модальное окно (позволяет сохранить контекст), отдельная страница (больше места для информации, минимизирует отвлекающие факторы), боковая панель (может располагаться рядом с содержимым страницы и поверх него, удобно для работы с большим количеством данных), аккордеон (полное отображение появляется под элементом, на который нажал пользователь);
— Сочетание «карточка + отдельная страница» встречается чаще всего;
— «Карточка + модальное окно» подходит для развлекательных проектов, галерей, соцсетей;
— Сочетание «список + боковая панель + отдельная страница» реализовано в Notion. Можно открыть боковую панель и расширить её до всей страницы, чтобы список не отвлекал.
#navigation
Евгений Бондковски написал, как упростить восприятие и увеличить скорость работы с таблицей, оформив её содержимое.
— Показатели динамики можно покрасить в красный и зелёный;
— Если в столбце много нулевых значений, можно сделать их серыми, чтобы выделить ненулевые;
— Цветовое кодирование статусов ускорит их считывание;
— Если таблица состоит из однотипных цифровых показателей, можно залить фон ячеек: чем больше значение, тем темнее оттенок;
— Также фон ячеек можно заливать не полностью, а на процент от максимального значения в столбце. Получится диаграмма, показывающая соотношение значений в разных строках;
— Иногда значения в столбце можно заменить иконками (статусы, наличие документов для скачивания);
— Также можно добавить логотипы брендов и изображения людей, чтобы ускорить восприятие и поиск нужных строк;
— Для передачи динамики можно добавить столбец с небольшими графиками изменения показателя;
— Иногда (но редко) таблицу полностью можно заменить графиком и дать возможность переключаться между форматами отображения.
Читайте также о приёмах оформления таблицы в целом. #table
Веня Векк записал видео о методе прогрессивного джипега.
— В любую секунду любой проект готов на 100%, хотя проработанность может быть и на 4%;
— В зависимости от имеющегося времени проект можно прорабатывать до пикселя, а можно оставить на стадии концептуальной зарисовки;
— Получается, что время тратится только на нужную степень прожарки, а общий вид стейка всегда ясен;
— Если нужен дизайн фичи, не надо последовательно создавать финальные макеты для первого, второго экрана и так далее. Надо подготовить эскизы всех основных экранов флоу с примерными текстами и иллюстрациями. После этого решение на уровне смысла уже можно обсуждать со стейкхолдерами и переходить к проработке формы этого решения и деталей.
Канал Вени. О методе в Ководстве. #process #prototype
Юля Коновалова написала о проектировании разговорных интерфейсов.
— Проектированием ботов занимается дизайнер диалоговых интерфейсов. Другие названия: скриптолог, архитектор разговорных решений, CUI/CUX-редактор;
— Первый шаг — high-level design (HLD), чаще всего это схема с отображением входа и выхода из диалога, ключевых сценарных веток и обращений к внешним системам;
— Low-level design (LLD) — максимальная степень детализации: конечные формулировки реплик бота, запросы пользователей, которые он отрабатывает, все сюжетные переходы и реакции, обработчики ошибок и событий, логика обращений к внешним системам;
— Также в сценарной папке хранится детальное описание ToV и, если есть, sequence-диаграмма и прочая документация по взаимодействию с внешними сервисами, мультимедиа-контент;
— LLD помогает визуализировать ожидания заказчика и концепцию разработки, обозначить объём работ, декомпозировать задачи, тестировать бота (сценарий будет эталоном), проводить UX-исследования;
— Дизайн бота нужен при презентации сценария, реализации, тестировании, презентации готового решения, разборе логов, проектировании доработок;
— Важно дообучать бота, расширять его базу знаний, добавлять реакции на вопросы вне изначального сценария, иначе он перестанет быть полезным;
— Баг, найденный на этапе согласования сценария, всегда дешевле исправить, нежели баг, найденный на этапе тестирования готового кода;
— Если предполагается сложный древовидный сценарий с множеством сюжетных веток, лучше разделить его создание на этапы: общий костяк, первая ветка и так далее. Как только кусочек сценария согласован, можно заниматься его реализацией.
#voice_interface
Ситуация: вы заказали исследование, долго ждали результат и наконец получили его. Смотрите и понимаете — всё это вы и так уже знали или вам не хватает деталей и ответов на конкретные вопросы, чтобы принять решение.
Обычно исследование строится в последовательности: постановка задачи → подготовка → проведение → анализ результатов → принятие решений. Разумеется, ошибка может закрасться на любом из них, но ваша задача минимизировать её вероятность на этапе постановки задачи.
Таня Чернявская, руководитель продуктовых исследований в Авито Товарах, рассказывает, как ставить задачу рисёрчеру на продуктовое исследование, чтобы быстрее получить результат. Поехали разбираться по ссылке.
Реклама. ООО «Авито Тех». LdtCKCxbg
Димитрис Хацилиас написал, как с помощью минимализма в интерфейсе снизить когнитивную нагрузку.
— Сократите количество опций, которые вы предлагаете (хотя бы на первом уровне иерархии). Оставьте на нём только основные и часто используемые;
— Добавьте воздуха, чтобы насыщенные информацией элементы не выглядели перегруженными;
— Удалите лишние границы между элементами (рамки и цветные плашки);
— Проработайте визуальную иерархию. Положение, прозрачность и размер элементов должны соответствовать их значимости, управлять вниманием пользователя;
— Если нужен дополнительный цвет, попробуйте использовать оттенок уже имеющегося в палитре;
— Не добавляйте альтернативных способов совершить одно и то же действие, чтобы пользователь не сомневался, правильный ли путь он выбрал для решения задачи.
In English. #minimalism #principles
Как дизайнеру почувствовать себя профи?
Первый способ — получить повышение.
Второй — расширить компетенции. Чем больше у вас навыков, тем вы увереннее и дороже на рынке труда. А ваши проекты в портфолио — более ответственные и внушительные.
Если вам подходят эти способы — приходите на курс Практикума по созданию мобильных приложений. Вы научитесь делать приложения не только для смартфонов, но и для TV, умных часов и других платформ. А в конце положите большой проект в портфолио.
Курс можно совмещать с работой: он идёт 3 месяца, а заниматься нужно максимум по 10 часов в неделю. Заново изучать базовую теорию и Figma не придётся — фокус только на том, что действительно пригодится в работе.
Что будет на курсе:
• Углубленное прототипирование, дизайн-системы, гайдлайны iOS и Android.
• Удобная теория в онлайн-тренажёре, который доступен 24/7.
• Практика на большом проекте на протяжении всего обучения.
• Преподаватель-сеньор, который проверяет проект каждые две недели. Ему можно задать вопросы напрямую — в чате.
Записывайтесь на курс и прокачивайтесь в дизайне.
#реклама
Юля Долгун написала о частых ошибках доступности сайтов для людей с нарушениями зрения.
— Используйте для кнопок тег Button. Это первое правило ARIA, плюс не надо дополнительно беспокоиться о навигации табом и обработке нажатия на элемент пробелом или клавишой Enter;
— Заголовки страницы должны начинаться с тега h1. Основной заголовок страницы должен быть h1, даже если визуально он не самый большой на ней (решается стилями);
— Картинки бывают контентные и декоративные (пользователь ничего не теряет, если они не грузятся). К последним можно отнести иконки в меню, продублированные текстом. Контентные картинки размечайте тегом с атрибутом alt, в котором будет их текстовое описание;
— Иногда иконки показывают изменение цены (↑, ↓) или что цифры 4,8 — это рейтинг. В этом случае можно использовать скрытый текст перед суммой изменения в рублях («Цена акций выросла на») или цифрами рейтинга («Рейтинг:»);
— Не используйте атрибуты ARIA, если можно обойтись нативными html-тегами. Таблицы можно и нужно использовать для разметки табличных данных. Незрячие по нажатию клавиши, например, смогут узнать, на какой строке находятся, название столбца и так далее.
#accessibility