UX Notes
25.2K subscribers
54 photos
3 videos
1 file
1.09K links
Чат читателей: @uxnoteschat В соцсетях: vk.com/ux_notes и fb.com/uxnotes Вакансии: @uxwork Автор: @zGrav Est. 2016. Реклама на канале: https://uxnotes.ru/ads
Download Telegram
В Selectel написали, как сократили время поиска респондентов для исследования немассового продукта (труднодоступная аудитория).

— При поиске через знакомых и коллег желающие со временем заканчиваются. Участие других людей удлиняет коммуникационные цепочки. Невысокий процент отклика;
— Поиск через агентство сильно растянут по времени;
— Решили искать проактивно: сформировать базу потенциальных респондентов;
— На отдельной странице рассказали, как устроен процесс, какие проводят исследования (интервью, тестирование интерфейсов, опросы);
— Название изменили на «Selectel Мнения», так как слово «исследования» люди понимают по-разному (часть полагала, что это из области медицины);
— Людям важно быть услышанными и оказывать влияние. Вознаграждение для дорогих специалистов и руководителей — не главный фактор, но это правило хорошего тона;
— В анкете — необходимый минимум вопросов, чтобы не отбить желание слишком длинной формой. Но данных мало, респонденты не подходят для исследований с узкими критериями отбора;
— Страницу прорекламировали на собственных ресурсах (сайт, рассылка, телеграм-канал) и профильных (Хабр, VC);
— Собранные данные не используют для массовых рассылок.

#research #recruiting
Иван Емелюшкин написал об использовании эмодзи в интерфейсе.

— Они выглядят по-разному в разных операционных системах и в разных версиях одной и той же ОС;
— В старых версиях ОС может не быть нужного эмодзи. Проверяйте в Эмодзипедии;
— Эмодзи Эпл нельзя вставлять картинками (только в виде текста) и использовать на других платформах. Можно взять эмодзи Твиттера.

#image
Новая работа. Часть 3

Сегодня расскажу о том, как я собеседовалась в Яндекс на разные вакансии. Напомню, что в этой серии постов рассказываю о том, как искала работу, и что узнала по дороге! Предыдущие части можно посмотреть тут: первая, вторая.

Перед тем как написать пост, я попробовала сосчитать, сколько у меня было яндексовских собесов за время поисков. Ребята, 10(!) полноценных (от часа и больше) + маленькие созвоны с рекрутёрами и HR… Короче, есть из чего поделать выводы!

1. Найм в Яндексе — это очень системно
Есть определённый алгоритм, определённая форма тестовых заданий, чёткое количество созвонов до тестового и после. Это хороший опыт для того чтобы понимать, как в целом устроен найм в корпорацию.

2. Найм в Яндексе может быть долгим
И я поняла это, когда ребята предложили вакансию, сказав, что уже есть два кандидата, которые сделали тестовое и ждут прямого ответа. Это к тому, что такой найм лучше «отпустить» в своей голове и не ждать молниеносной реакции. Всё-таки очень много людей сражаются за вакансии!

3. Если хотите в Яндекс — лучше подаваться через портал Яндекса
Это подтверждают мои наблюдения: на вакансии оттуда мне отвечали намного быстрее. Это же говорят hr-ы Яндекса. На hh слишком много заявок, это очень тяжело разбирать.

4. Не срослось с конкретной вакансией? Вы всё равно желанный кандидат!
Когда и если вы проходите собеседование в большой компании, оно было успешным, но что-то «не срослось», вы всё равно остаётесь желанным кандидатом. У больших компаний есть внутренние базы, которые активно изучают рекрутеры. Я познала это на своём опыте: у меня была долгая череда собесов на вакансию, всё шло хорошо, мы уже с командой познакомились, и в самый последний момент ребята сказали, что всё-таки им сейчас нужен немного другой спец. Зато после этого ко мне пришли с предложением об ещё двух вакансиях!

5. Вакансия — это условность
Ну ладно, не совсем уж условность, но и не железное правило. Конечно большие компании могут позволить себе искать спецов с опытом, который соответсвует заявленному на сто процентов, но если у вас он совпадает не до конца — это нормально. У меня бывало, что я приходила и открыто сразу говорила, что «вот это» я вообще не умею или буду пробовать впервые. А вот это делать не хочу, а хотела бы делать вот это. И такие разговоры никогда не были помехой следующему этапу. Короче, лучше чувствовать себя честно и не стесняться подаваться.

6. Midjourney — спасение на тестовых
Три из четырёх заданий я делала, подключая нейронки. Это совет не столько по поводу Яндекса, сколько вообще про подход к тестовым. Мне часто нужно было сделать key visual, иллюстрацию или я понимала, что «вот тут будет эффектно тридэ». Midjourney меня очень выручал, а результаты я дорабатывала руками и честно говорила, что это генератив.

7. Видеопрезентации — уберфича на тестовых
Я вообще любитель обьяснить свои решения. Поэтому к тестовым я всегда прикрепляла короткий видос с закрытой ссылкой на ютубе. Ребята, эти видео никогда не оставались без внимания! Это всегда выглядит эффектно, помогает большой команде оценить вашу работу быстрее и показывает, как вы думали. Короче, записывайте видосы! Это выделит вас среди других кандидатов и покажет, какой вы умница.

Вроде бы всё, что вспомнила — рассказала! Что-то забыла? Спрашивайте в комментах и ставьте снова все эмодзи мира…

#как_посмотреть_на_работу
Анастасия Винокурова написала об исследованиях с помощью краудсорсинговых платформ вроде Oprosso, Толоки, SurveyMonkey, Fastuna.

— Плюсы: дёшево, быстро, дизайнер может провести исследование сам;
— Минусы: не подходит узкоспециализированным продуктам, респонденты диджитальны (пользуются цифровыми продуктами);
— На таких платформах заказчик формирует задания, тесты, и есть исполнители, которые выполняют их за деньги;
— Задания могут быть любыми: от скачивания приложения до похода в магазин;
— Не везде есть инструменты для анализа результатов, иногда ответы приходится сортировать и оценивать вручную;
— Есть читеры, которые машинально отвечают на вопросы, чтобы получить оплату. Их ответы можно отсеивать с помощью вопросов-ловушек;
— Например, показать 2 варианта дизайна: нормальный и откровенно плохой и попросить выбрать лучший (и блокировать тех, кто выберет плохой) или задать завершающий вопрос «На что вы только что нажали» или «Какого цвета была кнопка». Кто нажимает бездумно, правильно не ответит;
— Проводите пробные запуски на 5–10 человек, прежде чем привлекать 100–200 респондентов, чтобы выявить ошибки, неоднозначно сформулированные вопросы;
— Эти платформы можно использовать для first click test, side-by-side (сравнение и выбор из 2 и более вариантов), five second test;
— Тест на понятность позволяет узнать, как люди воспринимают дизайн, например, расшифровывают иконки, микротекст. Достаточно показать макет и спросить «Как вы думаете, что произойдёт, когда вы нажмёте на…».

#user_testing #unmoderated
Александр Овчаренко написал о красной ночной палитре интерфейса.

— Она сохраняет человеку способность видеть в темноте, так как ночные фоторецепторы (палочки) не чувствительны к спектральному красному;
— Актуально для ночных вахт в море (разглядеть тусклые огни буёв, встречных судов, мутное пятно айсберга), астрономов и тех, кто любит что-то делать в темноте;
— Обычная тёмная тема не подходит, так как любой более-менее яркий не красный цвет возбуждает дневные рецепторы (колбочки);
— Если выкрутить на минимум яркость экрана с тёмной темой, будет банально плохо видно. Красная палитра может быть яркой и контрастной;
— Чтобы такая палитра работала, приложение должно быть открыто на весь экран, на самом устройстве не должно быть не красных индикаторов. Даже белый текст в Action bar и курсор будут мешать ночному зрению;
— Проблема, что мониторы светятся своим светом, и он совсем не красный. Плохие мониторы вместо чёрного показывают холодный серый (с синевой). В этом случае от палитры толку будет мало;
— Рисование интерфейса в красной ночной палитре ничем не отличается от создания монохромного UI;
— Для визуализации тревог подходят методы дизайна для людей с дальтонизмом. Тревога — мерцание с ярким красным фоном (RGB 255,0,0, когда остальной интерфейс в диапазоне 0–192,0,0) и иконкой тревоги, предупреждение — мигание рамкой, другая иконка;
— Можно попробовать добавить оттенки, близкие к красному, например, оранжевый. Но спектрально оранжевый и оранжевый RGB-дисплея (красный с примесью зелёного) — это физически разные истории.

#dark_theme
Томас Лауринавичюс написал о корзине.

— Разместите иконку корзины в правом верхнем углу, где люди привыкли её искать;
— Показывайте количество товаров в корзине. Лучше использовать контрастный значок, чтобы напомнить о забытых в корзине товарах;
— Подтверждайте, что товар добавлен в корзину. Кнопка «Перейти к оформлению заказа» подталкивает пользователей оформить заказ;
— Часто интернет-магазины открывают корзину после добавления в неё товара, что прерывает процесс выбора товаров. Можно отображать модальное окно с мини-корзиной, где будет основная информация о товарах, их цена и количество, а также общая стоимость и кнопка оформления заказа;
— Сделайте заметной информацию о бесплатной доставке. Дополнительные расходы — одна из главных причин, почему люди бросают свои корзины;
— В корзине основной акцент должен быть на кнопке оформления заказа.

In English. #ecommerce #cart
В Ispmanager написали об особенностях китайских сайтов.

— Китайцам крайне важно, как их воспринимают другие. Ключевая единица в культуре — группа, а не человек. Они очень активно общаются в интернет-сообществах;
— В культуру глубоко вплетены древние традиции, внимание уделяется значениям цветов;
— Например, красный символизирует позитив, счастье, преданность, пламенность, чувственность. Популярны жёлтый и оранжевый;
— Сайты перегружены текстом. Они действительно стремятся побольше рассказать на одном экране;
— Но эффект усиливается тем, что в китайской письменности нет пробелов между словами, разделения на строчные и прописные иероглифы;
— В языке — десятки тысяч иероглифов. Шрифтов не так много, и каждый весит довольно много, поэтому на сайтах используют один шрифт в одном-двух начертаниях;
— Часто текст верстают просто картинками;
— Так как свободного пространства мало, дизайнеры используют яркие цветовые акценты. Их выбор часто обусловлен традиционными для страны значениями;
— Часто в приложениях встречаются игровые механики;
— Mobile first: мобильные устройства — основной способ выхода в интернет и совершения покупок;
— Распространены доменные имена с цифрами. Их проще воспринимать, чем латиницу, и китайцы используют цифры для передачи слов. Например, 1688 на китайском созвучно слову Alibaba.

#localization
Forwarded from Черезнемогу (Надя Здорова)
Двойной смысл

На картинке выше соломинка для питья. Мы часто видим такие и спокойно от них избавляемся. В них нет особой ценности, кроме как использовать и выкинуть. Но тут уже не просто соломинка. Благодаря форме, материалу, цвету она становится чем-то бо́льшим. Красивым. Приятным. Интересным. Многоразовым. А если собрать несколько таких, можно создать композицию, поставить в колбочку и украсить этим интерьер. Вместе они становятся объектом искусства. И их смысл меняется.

Мне нравится эта мысль. Кажется, что она про будущее, где дизайнеры будут преобразовывать предметы и помогать людям использовать их по-новому. К примеру, как скульптуру, аксессуар или как совершенно другой предмет. А может все вместе. Когда нам не нужны соломинки, они стоят в колбочке, переливаются и радуют глаз. А когда нужны, снова становятся соломинками и помогают нам выпить вкуснейший милкшейк.

Но самое главное, что этот проект не только про экологию, многоразовое использование, но и про «увидеть прекрасное» в простых, ненужных вещах. Тех, на которые мы не обращаем внимание и которые выкидываем. Задуматься над этим и, быть может, преобразовать их.

#дизайн_решения
Иван Кунцевич написал, на какие вопросы надо ответить перед выполнением дизайн-задачи.

— Почему появилась эта задача? Возможно, у проблемы, которую хотят таким образом решить, есть решения попроще;
— Есть ли текущее решение, почему оно не работает? Если в продукте есть похожая функциональность, можно её адаптировать. Не придётся придумывать всё с нуля, решение будет знакомо пользователям;
— Как сейчас пользователи решают проблему? Возможно, есть сложившиеся паттерны (вне вашего продукта), которых стоит придерживаться;
— Какова цель бизнеса, на какие метрики он хочет повлиять? Понимая это, проще выбирать из нескольких решений, можно а/б-тестом сравнить их влияние на целевые метрики;
— Какую ценность получит пользователь? Чем больше пользовательских целей получится учесть, тем более качественным, функциональным и привлекательным получится продукт;
— Что ждём от финального результата? Если не отслеживать влияние конкретного решения на метрики, нельзя сделать вывод о его успешности. Если метрики с каким-то изменением упадут, будет сложно понять причину и откатиться назад.

#product
Евгений Бондковски написал, как сделать графики и диаграммы привлекательнее. Исходный пост дополнил комментариями Романа Бунина.

— Облегчите сетку вспомогательных линий: уменьшите их количество, толщину, яркость; оставьте только горизонтальные или вертикальные линии; уберите засечки и стрелки на осях, уменьшите подписи. Иногда сетку можно убрать вовсе;
— Скруглите углы (почти все интерфейсы вокруг такие) и добавьте градиентов. Ими можно залить площади под линейными графиками и столбцы диаграмм;
Статья об опасности скругления баров (In English);
— Заливка под линейными чартами — холиварный вопрос. Её стоит использовать, если это накопительная метрика и надо показать «интеграл под кривой». И точно не стоит делать его с градиентом до белого — создаётся впечатление, что график оторвали от оси и это только часть графика;
— Выберите дополнительные цвета, близкие по тону основному цвету бренда или презентации;
— Главный параметр можно выделить, показав остальные градиентами серого или оттенками второго цвета;
— Автор предлагает делать градиенты под фирменный стиль или цвета сайта. Если это категорийные данные, главная задача — быть различимыми, чтобы взгляд разделял разные значения. Полный гайд по цветам в датавизе (In English);
— Цвета могут добавить в диаграммы лишней информации. Избегайте пары красного и зелёного цвета, если только вы не показываете положительные и отрицательные значения. Выбирайте цвета одинаковой насыщенности, чтобы какие-то параметры случайно не стали выглядеть второстепенными;
— Второстепенные параметры (график за прошлый год или планируемый прирост) можно показывать пунктирной линией или штриховкой;
— Используйте цвет бренда, даже если это красный цвет и вы показываете рост продаж;
— В странах с цветовой привязкой «хорошо/плохо» это прям стрелять себе в ногу;
— Старайтесь разные параметры показывать разными типами диаграмм, подходящими для отображения таких данных;
— Подборка самых важных книг по визуализации данных.

#data_visualization
Станислав Хрусталёв написал о выборе города в интернет-магазине.

— Обычно он находится в левом верхнем углу;
— Определяйте город по IP-адресу. Запрос доступа к геолокации может быть воспринят нарушением приватности;
— Достаточно только названия города, без подписи «Город». Для облегчения восприятия добавьте иконку геометки. Текст «Текущий город» можно разместить в тултипе;
— Не обрезайте название города;
— Привлечь внимание к текущему городу можно анимацией вместо немодального попапа с просьбой подтвердить, что город определён правильно;
— Кроме попапа запрос на подтверждение города иногда размещают в растяжке у верхней границы страницы;
— Но в любом случае, не блокируйте интерфейс этим запросом;
— В сообщении: выделите название города; кнопку подтверждения сделайте основной; можно пояснить, почему важен выбор правильного города;
— Иногда запрос закрывают автоматически по истечению времени, не требуя действий от пользователя;
— Если городов много, интерфейс выбора города отображайте в лайтбоксе в несколько столбцов. Для облегчения восприятия можно сгруппировать их по первой букве в названии;
— Если городов очень много, можно подсветить это как ещё одно преимущество: «Вы можете выбрать более 150 000 населённых пунктов по всей России»;
— Выделите популярные города. Иногда показывают только популярные и дают возможность переключиться на полный список или искать остальные города поиском;
— В списке можно отметить города, где есть офлайн-магазины, собственная или бесплатная доставка, показать количество магазинов в городе. Не забудьте показать легенду для этих меток;
— Если пользователь ввёл нужный город в поиск, но его не оказалось в списке, предложите выбрать ближайший город или связаться с поддержкой.

#ecommerce
В Dodo Engineering написали о дизайне телеграм-бота.

— Придумайте оригинальное название, учитывая, что у вашей компании может быть больше одного бота. Dodobot, dodohelper и dodohelpbot в списке чатов запутают пользователя;
— Взаимодействие начинайте с приветствия и небольшого рассказа в 2–3 предложения о том, что бот умеет и как им пользоваться;
— Где это возможно, используйте кнопки вместо ручного ввода;
— Избегайте большого количества пунктов меню, группируйте их в меню второго уровня. Но не делайте вложенность слишком глубокой (не более 3 шагов), чтобы пользователи не забывали, что выбрали в начале и зачем вообще пришли;
— Давайте обратную связь, когда пользователь что-то сделал («Часовой пояс изменён на…») или когда требуется время для обработки его запроса («Получаю статистику…»);
— Давайте возможность отменить действие: легко отписаться от уведомлений, сбросить настройки;
— Используйте эмоджи и всё доступное форматирование, чтобы сделать акцент на важном и упростить восприятие информации. Например, табличные данные можно показывать, отделяя строки линиями из дефисов;
— Предлагайте готовые варианты, например, подписаться на готовый набор популярных метрик.

#dialog_interface
Таня Миронова написала, как встроить работу над доступностью в процессы компании.

— Если нанять отдельную команду и пропускать сервисы через неё, получая отчёты об ошибках, поставки станут дольше и дороже, отчёты могут быть формальными (если тестировать экраны, а не сценарии), сложно охватить сразу много продуктов;
— Если добавить тестирование доступности после функционального, нужны тестировщики (например, незрячие) для всех продуктов, поставки всё ещё будут долгими и дорогими;
— Можно подойти к доступности не как к этапу проверки, а как к определённому уровню знаний всех участников разработки;
— Нужен эксперт — амбассадор доступности, который будет находить проблемы доступности, консультировать, обучать сотрудников, готовить методические материалы;
— Со временем такие люди будут появляться в каждой команде;
— Чтобы ускорить их появление, можно провести внутреннюю стажировку — обучение сотрудников на их рабочих проектах;
— Те, кто не проходят стажировку, могут слушать лекции, чтобы лучше понимать основные принципы;
— В чеклист запуска продукта можно добавить проверку доступности (вначале опциональную).

#accessibility #process
Тим Нойсессер и Эван Санволл написали о сообщениях об ошибках.

— Отображайте сообщения об ошибках там, где они произошли, чтобы было проще связать сообщение с требующим внимания элементом интерфейса;
— Используйте заметные и доступные индикаторы. Не оформляйте ошибки только цветом и анимацией, для доступности можно добавить иконки;
— Не показывайте ошибки преждевременно. Например, когда пользователь переместил фокус из незаполненного поля, показывать сообщение рановато — человек ещё только изучает интерфейс;
— Кратко опишите проблему и предложите способ её решения, иногда может потребоваться объяснить, как работает система;
— Не обвиняйте пользователя и избегайте шуток;
— Помогайте избегать ошибок. Например, Gmail предупреждает о неприложенном файле при попытке отправить письмо;
— Сохраняйте введённые пользователем данные, чтобы ошибку можно было исправить редактированием, а не новым вводом;
— Помогайте исправлять ошибки. Например, заменить ввод на вариант без опечатки;
— Если всё, что может сделать пользователь, это вернуться позже (например, сервер перегружен), на странице с ошибкой можно совместить извинения с чем-то неожиданным и новым. Твиттер показывает иллюстрацию с птичками с китом.

In English. #error #writing
Forwarded from Френч-пресс (Антон Григорьев)
В аптеке в стеллаж встроены ступеньки, чтобы невысоким провизорам удобно было доставать лекарства с верхних полок.
Люда Сеньшова написала, как создавать цифровые продукты для детей.

— Новые поколения начинают использовать гаджеты раньше и проводят больше времени в сети;
— Обычно детские приложения основаны на феномено-ориентированном обучении, то есть выстроены вокруг интересных явлений из реальной жизни;
— В таких играх нет чётких правил, временных ограничений, выигрыша или проигрыша. Они основаны на спонтанности и процессе (чаепитие с куклами в честь дня рождения) и должны вызывать радость от процесса (не сваливайтесь в обучение);
— Дети не способны долго фокусироваться, им нужен быстрый результат;
— Плей-дизайнерам надо много времени проводить с детьми, чтобы хорошо их понимать. Дети двух, пяти или десяти лет совершенно разные;
— Дети 2–5 лет: максимально краткие подсказки и инструкции, значки навигации желательно не абстрактные, никакого текста, раскрывающихся меню, лучше без скроллинга (сложен из-за моторики), самые простые жесты взаимодействия, упор на звуковую стимуляцию и интерактивность;
— Дети 6–8 лет: лучше обойтись без чтения и набора текста, воспринимают сложные жесты вроде долгого или двойного нажатия;
— Дети старше 12 лет: всё так же не любят большие объёмы текста, важно подавать контент как взрослым;
— У лучших детских приложений нет элементов внешней мотивации (Points, Badges, Leaderboard). Старайтесь развивать внутреннюю мотивацию, направленную на творчество, самовыражение и социализацию;
— Если зависть заставляет добиваться такой же ачивки, как у другого, — это плохая мотивация;
— Страницы ошибки и загрузки тоже должны быть сделаны для детей;
— Продумайте, где с приложением будут взаимодействовать взрослые (настройки, подписка, данные карты), и как защитить этот раздел;
— Ошибки: мало интерактива (дайте, например, раскрасить персонажей), линейный сценарий и ограниченный выбор, монотонность (десять однотипных заданий подряд).

#kids
Поделитесь в комментариях ссылками на классные русскоязычные статьи, которые вы недавно прочитали, и которым самое место в UX Notes?
Виталий Мазуревич рассказал о карточной сортировке.

— Это вид исследования, когда респонденты распределяют некие объекты (представленные карточками) по категориям;
— Так можно понять, каким по их мнению должен быть каталог;
— Исследование может быть качественным и количественным;
— В первом случае можно узнать, почему респондент распределяет карточки определённым образом. Во втором — понять, какая структура каталога подходит большинству пользователей;
— Открытая сортировка: есть набор карточек, респондент создаёт структуру и придумывает названия категориям. Дополнительно позволяет определиться с названиями категорий;
— Закрытая: есть набор карточек и конкретные группы. Можно проверить адекватность логики заданной структуры;
— В идеале сначала провести открытую, а затем закрытую сортировку;
— Обратная: есть готовая структура, надо найти, где находится заданный объект. Как правило, используется для сложных каталогов и позволяет проверить, понятен и лёгок ли путь пользователя к цели.

В UX Notes была хорошая статья о карточной сортировке, нажимайте на хештег. #card_sorting #information_architecture