25252
Чат читателей: @uxnoteschat В соцсетях: vk.com/ux_notes и fb.com/uxnotes Вакансии: @uxwork Автор: @zGrav Est. 2016. Реклама на канале: https://uxnotes.ru/ads
Юрий Марьенко написал об основных типах навигации на сайтах.
— Статичное меню в начале страницы. Если на странице содержимого много, пригодится кнопка возврата наверх, чтобы удобно было возвращаться к меню;
— Фиксированное меню — всегда остаётся на виду при скроле страницы. С ним в любой момент можно перейти в другой раздел сайта, но оно может мешать изучать содержимое страницы;
— Сочетание большого статичного и небольшого фиксированного меню — фиксированный вариант отображается при скроле, не занимает много места по вертикали и даёт быстрый доступ к самым важным разделам;
— Бургерное меню (статичное или фиксированное) — по нажатию на иконку бургера отображает список разделов. Хорошо работает на мобильных сайтах за счёт компактности. Часто используется на популярных сайтах (с большими каталогами), так что паттерн должен быть хорошо знаком пользователям;
— Многоуровневое меню — отображает основные разделы (4–7 пунктов), по нажатию на которые можно увидеть подменю с большим количеством подразделов. Подходит компаниям с несколькими направлениями бизнеса, узкоспециализированным интернет-магазинам;
— Меню помогает посетителям быстро понять, о чём сайт.
#navigation #menu
Мириам Миссбихлер написала об особенностях японских сайтов.
— Чтобы создать шрифт для английского языка, надо нарисовать около 230 глифов (840, чтобы охватить все языки на основе латиницы). Для японского языка их надо более 7000;
— Выбор шрифтов меньше, время их загрузки больше. Как следствие, часто текст верстают картинками, плюс активно используют другие способы создания визуальной иерархии;
— Японский подход — показать сразу несколько лакомых кусочков информации, чтобы заинтриговать, чтобы было за что зацепиться, чтобы можно было принять обоснованное решение;
— Уровень неприятия риска, перестраховки и нерешительности при принятии решений заметно выше, чем на западе. Лучше потратить время и трижды проверить отправляемый документ, но не допустить ошибок и сохранить авторитет;
— Японцы воспринимают информацию более целостно, тогда как американцы фокусируются на одном;
— Офлайновые медиа в Японии стараются вместить как можно больше информации, люди к такому привыкли.
In English. #localization
Поделитесь в комментариях ссылками на классные русскоязычные статьи, которые вы недавно прочитали, и которым самое место в UX Notes?
Читать полностью…
3 августа в 18:00 встречаемся на митапе билайна, чтобы поделиться своим опытом и драйвом — в гибридном формате и бесплатно. Соберёмся обсудить генерацию творческих решений, создание анимаций в Figma, распаковку потребностей клиента и UX.
Смотри более подробную программу и регистрируйся:
1. Здесь, если подключишься онлайн
2. Здесь, если хочешь прийти к нам в Питере и познакомиться лично
Реклама. www.beeline.ru erid: LatgC6aV9
Опубликованы видео с Avito Design Talk 29 июня 2023 года:
1. Наталья Юматова, Алексей Архипов, Авито — Почему мы не рисуем концепты в стол
2. Роза Бадаева, ex. Delivery Club — Конфликты во взаимодействии продакт-менеджера и дизайнера как возможность изменений
3. Дмитрий Быков, Osome — Путь от дизайнера к менеджеру и обратно
Почему мы всё время начинаем и бросаем учить английский?
Одна из причин — мы не знаем свой уровень языка. В итоге берёмся за контент, который нам не по силам. Например, сериал «Друзья» часто советуют смотреть тем, кто начинает учить язык, но в нём полно юмора, который начинающие пока понять не могут.
В итоге разрыв знаний удручает и мотивация снова падает.
Если вы готовы дать английскому ещё один шанс, мы поможем поверить в свои силы и довести дело до конца.
Приходите на бесплатную консультацию в Яндекс Практикум:
- Проведём устный тест на уровень языка,
- Покажем, чего реально добиться и за какой срок,
- Расскажем, как наши курсы помогут достичь цели.
Записаться
Реклама АНО ДПО «Образовательные технологии Яндекса», ИНН: 7704282033, erid: LjN8K4eaj
В Dodo Engineering написали о дизайне телеграм-бота.
— Придумайте оригинальное название, учитывая, что у вашей компании может быть больше одного бота. Dodobot, dodohelper и dodohelpbot в списке чатов запутают пользователя;
— Взаимодействие начинайте с приветствия и небольшого рассказа в 2–3 предложения о том, что бот умеет и как им пользоваться;
— Где это возможно, используйте кнопки вместо ручного ввода;
— Избегайте большого количества пунктов меню, группируйте их в меню второго уровня. Но не делайте вложенность слишком глубокой (не более 3 шагов), чтобы пользователи не забывали, что выбрали в начале и зачем вообще пришли;
— Давайте обратную связь, когда пользователь что-то сделал («Часовой пояс изменён на…») или когда требуется время для обработки его запроса («Получаю статистику…»);
— Давайте возможность отменить действие: легко отписаться от уведомлений, сбросить настройки;
— Используйте эмоджи и всё доступное форматирование, чтобы сделать акцент на важном и упростить восприятие информации. Например, табличные данные можно показывать, отделяя строки линиями из дефисов;
— Предлагайте готовые варианты, например, подписаться на готовый набор популярных метрик.
#dialog_interface
Евгений Бондковски написал, как сделать графики и диаграммы привлекательнее.
— Облегчите сетку вспомогательных линий: уменьшите их количество, толщину, яркость; оставьте только горизонтальные или вертикальные линии; уберите засечки и стрелки на осях, уменьшите подписи. Иногда сетку можно убрать вовсе;
— Скруглите углы (почти все интерфейсы вокруг такие) и добавьте градиентов. Ими можно залить площади под линейными графиками и столбцы диаграмм;
— Выберите дополнительные цвета, близкие по тону основному цвету бренда или презентации;
— Главный параметр можно выделить, показав остальные градиентами серого или оттенками второго цвета;
— Цвета могут добавить в диаграммы лишней информации. Избегайте пары красного и зелёного цвета, если только вы не показываете положительные и отрицательные значения. Выбирайте цвета одинаковой насыщенности, чтобы какие-то параметры случайно не стали выглядеть второстепенными;
— Второстепенные параметры (график за прошлый год или планируемый прирост) можно показывать пунктирной линией или штриховкой;
— Используйте цвет бренда, даже если это красный цвет и вы показываете рост продаж;
— Старайтесь разные параметры показывать разными типами диаграмм, подходящими для отображения таких данных.
#data_visualization #graphics
Иван Кунцевич написал, на какие вопросы надо ответить перед выполнением дизайн-задачи.
— Почему появилась эта задача? Возможно, у проблемы, которую хотят таким образом решить, есть решения попроще;
— Есть ли текущее решение, почему оно не работает? Если в продукте есть похожая функциональность, можно её адаптировать. Не придётся придумывать всё с нуля, решение будет знакомо пользователям;
— Как сейчас пользователи решают проблему? Возможно, есть сложившиеся паттерны (вне вашего продукта), которых стоит придерживаться;
— Какова цель бизнеса, на какие метрики он хочет повлиять? Понимая это, проще выбирать из нескольких решений, можно а/б-тестом сравнить их влияние на целевые метрики;
— Какую ценность получит пользователь? Чем больше пользовательских целей получится учесть, тем более качественным, функциональным и привлекательным получится продукт;
— Что ждём от финального результата? Если не отслеживать влияние конкретного решения на метрики, нельзя сделать вывод о его успешности. Если метрики с каким-то изменением упадут, будет сложно понять причину и откатиться назад.
Канал Ивана. #product
В Ispmanager написали об особенностях китайских сайтов.
— Китайцам крайне важно, как их воспринимают другие. Ключевая единица в культуре — группа, а не человек. Они очень активно общаются в интернет-сообществах;
— В культуру глубоко вплетены древние традиции, внимание уделяется значениям цветов;
— Например, красный символизирует позитив, счастье, преданность, пламенность, чувственность. Популярны жёлтый и оранжевый;
— Сайты перегружены текстом. Они действительно стремятся побольше рассказать на одном экране;
— Но эффект усиливается тем, что в китайской письменности нет пробелов между словами, разделения на строчные и прописные иероглифы;
— В языке — десятки тысяч иероглифов. Шрифтов не так много, и каждый весит довольно много, поэтому на сайтах используют один шрифт в одном-двух начертаниях;
— Часто текст верстают просто картинками;
— Так как свободного пространства мало, дизайнеры используют яркие цветовые акценты. Их выбор часто обусловлен традиционными для страны значениями;
— Часто в приложениях встречаются игровые механики;
— Mobile first: мобильные устройства — основной способ выхода в интернет и совершения покупок;
— Распространены доменные имена с цифрами. Их проще воспринимать, чем латиницу, и китайцы используют цифры для передачи слов. Например, 1688 на китайском созвучно слову Alibaba.
#localization
Томас Лауринавичюс написал о корзине.
— Разместите иконку корзины в правом верхнем углу, где люди привыкли её искать;
— Показывайте количество товаров в корзине. Лучше использовать контрастный значок, чтобы напомнить о забытых в корзине товарах;
— Подтверждайте, что товар добавлен в корзину. Кнопка «Перейти к оформлению заказа» подталкивает пользователей оформить заказ;
— Часто интернет-магазины открывают корзину после добавления в неё товара, что прерывает процесс выбора товаров. Можно отображать модальное окно с мини-корзиной, где будет основная информация о товарах, их цена и количество, а также общая стоимость и кнопка оформления заказа;
— Сделайте заметной информацию о бесплатной доставке. Дополнительные расходы — одна из главных причин, почему люди бросают свои корзины;
— В корзине основной акцент должен быть на кнопке оформления заказа.
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
Никита Семёнов написал о презентации дизайн-решений. Некоторые пункты:
— Отличное решение может сгореть из-за плохой презентации, а дизайнер — утонуть в доработках;
— Клиент — не противник, а партнёр. У вас знания и опыт в дизайне, у него — знания о бизнесе, продукте и целевой аудитории;
— Будьте благодарны людям, участвующим в презентации и дающим обратную связь, — они тратят своё время и энергию;
— Презентуйте своё решение лично (офлайн или онлайн). Его вы знаете лучше всех, плюс сможете видеть эмоции заказчика и сразу ответить на вопросы и обсудить замечания;
— Убедитесь, что на презентации есть человек, который будет принимать финальное решение. Если его нет, встречу лучше перенести;
— Объясните регламент встречи. Когда задавать вопросы: в конце или по ходу рассказа?
— Напомните о целях и задачах, особенностях аудитории и её болях, юридических, технических, временных и прочих ограничениях;
— Покажите весь пользовательский путь с помощью интерактивного прототипа;
— Расскажите, как ваше решение изменит показатели. Например, раньше сотрудники тратили на задачу 20 кликов и 5 минут, а будут 7 кликов и 2 минуты;
— Приводите аргументы из мира тех, кто вас слушает (узнайте, кто перед вами). Продактам важны сроки и KPI, юристам соблюдение законов и так далее.
Канал Никиты. #presentation
Виталий Мазуревич рассказал о карточной сортировке.
— Это вид исследования, когда респонденты распределяют некие объекты (представленные карточками) по категориям;
— Так можно понять, каким по их мнению должен быть каталог;
— Исследование может быть качественным и количественным;
— В первом случае можно узнать, почему респондент распределяет карточки определённым образом. Во втором — понять, какая структура каталога подходит большинству пользователей;
— Открытая сортировка: есть набор карточек, респондент создаёт структуру и придумывает названия категориям. Дополнительно позволяет определиться с названиями категорий;
— Закрытая: есть набор карточек и конкретные группы. Можно проверить адекватность логики заданной структуры;
— В идеале сначала провести открытую, а затем закрытую сортировку;
— Обратная: есть готовая структура, надо найти, где находится заданный объект. Как правило, используется для сложных каталогов и позволяет проверить, понятен и лёгок ли путь пользователя к цели.
В UX Notes была хорошая статья о карточной сортировке, нажимайте на хештег. #card_sorting #information_architecture
Люда Сеньшова написала, как создавать цифровые продукты для детей.
— Новые поколения начинают использовать гаджеты раньше и проводят больше времени в сети;
— Обычно детские приложения основаны на феномено-ориентированном обучении, то есть выстроены вокруг интересных явлений из реальной жизни;
— В таких играх нет чётких правил, временных ограничений, выигрыша или проигрыша. Они основаны на спонтанности и процессе (чаепитие с куклами в честь дня рождения) и должны вызывать радость от процесса (не сваливайтесь в обучение);
— Дети не способны долго фокусироваться, им нужен быстрый результат;
— Плей-дизайнерам надо много времени проводить с детьми, чтобы хорошо их понимать. Дети двух, пяти или десяти лет совершенно разные;
— Дети 2–5 лет: максимально краткие подсказки и инструкции, значки навигации желательно не абстрактные, никакого текста, раскрывающихся меню, лучше без скроллинга (сложен из-за моторики), самые простые жесты взаимодействия, упор на звуковую стимуляцию и интерактивность;
— Дети 6–8 лет: лучше обойтись без чтения и набора текста, воспринимают сложные жесты вроде долгого или двойного нажатия;
— Дети старше 12 лет: всё так же не любят большие объёмы текста, важно подавать контент как взрослым;
— У лучших детских приложений нет элементов внешней мотивации (Points, Badges, Leaderboard). Старайтесь развивать внутреннюю мотивацию, направленную на творчество, самовыражение и социализацию;
— Если зависть заставляет добиваться такой же ачивки, как у другого, — это плохая мотивация;
— Страницы ошибки и загрузки тоже должны быть сделаны для детей;
— Продумайте, где с приложением будут взаимодействовать взрослые (настройки, подписка, данные карты), и как защитить этот раздел;
— Ошибки: мало интерактива (дайте, например, раскрасить персонажей), линейный сценарий и ограниченный выбор, монотонность (десять однотипных заданий подряд).
Канал Люды. #kids
В аптеке в стеллаж встроены ступеньки, чтобы невысоким провизорам удобно было доставать лекарства с верхних полок.
Читать полностью…
Тим Нойсессер и Эван Санволл написали о сообщениях об ошибках.
— Отображайте сообщения об ошибках там, где они произошли, чтобы было проще связать сообщение с требующим внимания элементом интерфейса;
— Используйте заметные и доступные индикаторы. Не оформляйте ошибки только цветом и анимацией, для доступности можно добавить иконки;
— Не показывайте ошибки преждевременно. Например, когда пользователь переместил фокус из незаполненного поля, показывать сообщение рановато — человек ещё только изучает интерфейс;
— Кратко опишите проблему и предложите способ её решения, иногда может потребоваться объяснить, как работает система;
— Не обвиняйте пользователя и избегайте шуток;
— Помогайте избегать ошибок. Например, Gmail предупреждает о неприложенном файле при попытке отправить письмо;
— Сохраняйте введённые пользователем данные, чтобы ошибку можно было исправить редактированием, а не новым вводом;
— Помогайте исправлять ошибки. Например, заменить ввод на вариант без опечатки;
— Если всё, что может сделать пользователь, это вернуться позже (например, сервер перегружен), на странице с ошибкой можно совместить извинения с чем-то неожиданным и новым. Твиттер показывает иллюстрацию с птичками с китом.
In English. #error #writing
Таня Миронова написала, как встроить работу над доступностью в процессы компании.
— Если нанять отдельную команду и пропускать сервисы через неё, получая отчёты об ошибках, поставки станут дольше и дороже, отчёты могут быть формальными (если тестировать экраны, а не сценарии), сложно охватить сразу много продуктов;
— Если добавить тестирование доступности после функционального, нужны тестировщики (например, незрячие) для всех продуктов, поставки всё ещё будут долгими и дорогими;
— Можно подойти к доступности не как к этапу проверки, а как к определённому уровню знаний всех участников разработки;
— Нужен эксперт — амбассадор доступности, который будет находить проблемы доступности, консультировать, обучать сотрудников, готовить методические материалы;
— Со временем такие люди будут появляться в каждой команде;
— Чтобы ускорить их появление, можно провести внутреннюю стажировку — обучение сотрудников на их рабочих проектах;
— Те, кто не проходят стажировку, могут слушать лекции, чтобы лучше понимать основные принципы;
— В чеклист запуска продукта можно добавить проверку доступности (вначале опциональную).
#accessibility #process
Станислав Хрусталёв написал о выборе города в интернет-магазине.
— Обычно он находится в левом верхнем углу;
— Определяйте город по IP-адресу. Запрос доступа к геолокации может быть воспринят нарушением приватности;
— Достаточно только названия города, без подписи «Город». Для облегчения восприятия добавьте иконку геометки. Текст «Текущий город» можно разместить в тултипе;
— Не обрезайте название города;
— Привлечь внимание к текущему городу можно анимацией вместо немодального попапа с просьбой подтвердить, что город определён правильно;
— Кроме попапа запрос на подтверждение города иногда размещают в растяжке у верхней границы страницы;
— Но в любом случае, не блокируйте интерфейс этим запросом;
— В сообщении: выделите название города; кнопку подтверждения сделайте основной; можно пояснить, почему важен выбор правильного города;
— Иногда запрос закрывают автоматически по истечению времени, не требуя действий от пользователя;
— Если городов много, интерфейс выбора города отображайте в лайтбоксе в несколько столбцов. Для облегчения восприятия можно сгруппировать их по первой букве в названии;
— Если городов очень много, можно подсветить это как ещё одно преимущество: «Вы можете выбрать более 150 000 населённых пунктов по всей России»;
— Выделите популярные города. Иногда показывают только популярные и дают возможность переключиться на полный список или искать остальные города поиском;
— В списке можно отметить города, где есть офлайн-магазины, собственная или бесплатная доставка, показать количество магазинов в городе. Не забудьте показать легенду для этих меток;
— Если пользователь ввёл нужный город в поиск, но его не оказалось в списке, предложите выбрать ближайший город или связаться с поддержкой.
#ecommerce
13 июля, 18:00
Selectel UX & Research MeetUp: Дизайн-система, исследования, навыки проектировщика
Ребята из @selectelcareers приглашают на свой митап UX/UI-дизайнеров, исследователей, продакт-менеджеров, UX-писателей и всех, кому хочется больше узнать про работу с пользовательским опытом.
Основные темы:
◽️ Коммуникация с командами и клиентами
◽️ Работа с технически сложным продуктом
◽️ Разработка и внедрение дизайн-системы
◽️ Исследования контента и пользовательского опыта
Задайте вопрос в форме регистрации — на самые интересные ответим во время трансляции, а за лучший подарим Тирекса 🦖
Участие бесплатное, регистрируйтесь по ссылке: https://slc.tl/0kk3c
Реклама ООО «Селектел» 2VtzqwJJJpC
Двойной смысл
На картинке выше соломинка для питья. Мы часто видим такие и спокойно от них избавляемся. В них нет особой ценности, кроме как использовать и выкинуть. Но тут уже не просто соломинка. Благодаря форме, материалу, цвету она становится чем-то бо́льшим. Красивым. Приятным. Интересным. Многоразовым. А если собрать несколько таких, можно создать композицию, поставить в колбочку и украсить этим интерьер. Вместе они становятся объектом искусства. И их смысл меняется.
Мне нравится эта мысль. Кажется, что она про будущее, где дизайнеры будут преобразовывать предметы и помогать людям использовать их по-новому. К примеру, как скульптуру, аксессуар или как совершенно другой предмет. А может все вместе. Когда нам не нужны соломинки, они стоят в колбочке, переливаются и радуют глаз. А когда нужны, снова становятся соломинками и помогают нам выпить вкуснейший милкшейк.
Но самое главное, что этот проект не только про экологию, многоразовое использование, но и про «увидеть прекрасное» в простых, ненужных вещах. Тех, на которые мы не обращаем внимание и которые выкидываем. Задуматься над этим и, быть может, преобразовать их.
#дизайн_решения
Чтобы освоить новые навыки для работы или познакомиться с 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