25223
Чат читателей: @uxnoteschat В соцсетях: vk.com/ux_notes и fb.com/uxnotes Вакансии: @uxwork Автор: @zGrav Est. 2016. Реклама на канале: https://uxnotes.ru/ads
Вадик Михалев написал, как минимизировать трудозатраты при найме дизайнера в пока ещё бедный стартап.
— Опишите вакансию максимально живо и интересно, добавьте сюжета, личной истории и открыто поделитесь текущими показателями. В статье есть ссылка на пример классного описания;
— Напишите, что ожидаете увидеть в отклике (поможет отсеять тех, кто не читал текст вакансии);
— Если откликов много, снижайте ожидания соискателей, чтобы оставались самые мотивированные. Например, можно переслать видео с рассказом о текущей дизайн-системе, сложности и масштабе проекта;
— Так как стартап ещё бедный, на входе можно спрашивать об ожидаемом уровне зарплаты и отсеивать слишком дорогих кандидатов;
— Чтобы экономить время, рассказ об особенностях работы в компании тоже можно записать на видео. Это видео также поможет управлять ожиданиями;
— Выделите слоты для интервью и дайте возможность соискателям без дополнительного согласования выбрать удобное время. С этим поможет Calendly;
— Созванивайтесь только с теми, кто выполнил тестовое на нужном уровне и показал в нём свой подход к работе. Спорная рекомендация: в этом случае основатели стартапа экономят своё время, но тратят много времени соискателей. После 35 сделанных тестовых наняли одного. И под вопросом, сколько времени надо для адекватной оценки всех тестовых.
Ставьте 🖕 если не делаете тестовые и 🧑💻 если делаете. #hiring
Таня из Everest написала о формах поиска на сайтах клиник.
— Поле поиска заметнее просто иконки;
— Если по нажатию отображать модальное окно поиска, внимание пользователя будет сосредоточено на ключевом действии и появится место для популярных запросов и плейсхолдера, который подскажет, что именно можно искать («Ищите врачей, услуги, статьи и другие материалы»);
— Популярные запросы лучше разделить на категории: анализы, процедуры, приём врача;
— Стоит отображать кнопку «Найти», так как многие привыкли на неё нажимать. Но и нажатие на Enter тоже должно работать;
— После ввода символов в поле стоит показывать подсказки. Удобен переключатель с разделами (врачи, услуги, новости), в которых найдены подходящие страницы, — можно конкретизировать список подсказок;
— Или хотя бы указать категорию конкретной подсказки;
— Стоит выделять, в чём конкретная подсказка совпадает с запросом, чтобы было понятно, почему она отображается;
— На странице с результатами поиска количество найденного помогает решить, готов ли пользователь к такому объёму информации или стоит уточнить запрос;
— Результаты поиска надо группировать по категориям;
— С помощью списка подходящих под запрос категорий можно фильтровать результаты поиска (по умолчанию стоит выбрать категорию, которую выбрал пользователь в модальном окне поиска) или быстро перемещаться между блоками на странице с результатами;
— Полезны способы уточнить запрос: чекбокс «По полису ДМС», по расположению отделения или врача.
Ставьте 💊 если статья понравилась. #form #search #health
Ким Салазар написала о возможности выбрать модель при покупке одежды и косметики.
— Покупатели обращают внимание, если товары демонстрируют модели разных размеров, возрастов и рас. Приятно видеть людей, похожих на них и проще определиться с выбором. Так магазин показывает, что ориентируется на таких клиентов;
— Дайте возможность выбрать модель (например, по размеру и росту). Одежда сидит по-разному в зависимости от типа фигуры, а восприятие макияжа зависит от тона кожи;
— Делать это можно на странице товара и странице категории;
— Объясняйте, к каким категориям товаров будет применяться выбранная модель, и сохраняйте выбор модели в этих категориях;
— В списке товаров и на странице товара отображайте их изображения с выбранной моделью;
— Учитывайте размеры товаров. Нет смысла показывать на стандартных моделях товары plus-size, если у них даже нет стандартных размеров (но это скорее к вопросу об использовании реальных фото);
— Используйте реальные фотографии. Затея не будет иметь смысла, если автоматически растягивать (сжимать) изображение товара под размер модели;
— Возможность выбора модели имеет смысл, если большинство товаров в категории (если не все) могут быть на ней отображены;
— Если это не так, можно просто показать фото с разными моделями на странице товара;
— Покупатели высоко ценят функцию выбора модели, сделайте её заметной.
#ecommerce
Ставьте 👍 если статья понравилась.
Анна Дегтева написала о проектировании голосового помощника.
— 2 типа запросов: сервисный и поболтать. Важно их не перепутать: представьте, вы хотите включить свет, а голосовой помощник начинает шутить;
— Если она вас не понял, задача сводится к «поболтать» — сгладить коммуникативный провал и рассказать, как избежать его в будущем;
— В 1950-м Алан Тьюринг предположил, что в 2000-м компьютер сможет 5 минут выдавать себя за человека в разговоре с 30% респондентов;
— Это смог чатбот Eugene Goostman, у которого была удачно выбранная личность: 12-летний мальчик из Одессы. Когда диалог на английском, иностранец и ребёнок может ошибаться, чего-то не знать и не понимать;
— Избежать ошибок нельзя, но можно сделать так, чтобы пользователи чаще их прощали;
— Имитация некоторой свободы воли превращает диалогового агента в личность: «Я с ней стал заигрывать, а она меня послала!»;
— Чтобы человек поверил в имитацию связного диалога, нужны: раппорт, эмоциональная поддержка («Ты великолепен!»), совместная деятельность (вербальные игры);
— Раппорт — ощущение, что вы на одной волне. Можно показать, что вы принадлежите одной культуре: читали одни книжки и так далее;
— Как рассказать о характере голосового помощника, когда никто не спрашивает? Обычно легенду зашивают в группу вопросов «Расскажи о себе» (сколько тебе лет, что любишь), но люди редко задают такие вопросы. Характер можно раскрыть при обработке непонимания, агрессии и троллинга, при эмоциональной поддержке;
— Не думайте, что интуитивно понимаете, что такое живая беседа. Поможет социолингвистика, антропология, психология общения;
— Вечерняя фраза «Уже так поздно, ляг, поспи!» от голосового устройства для взрослого — проявление заботы, для ребёнка — повод для обиды;
— При тестировании на детях учтите, что они думают дольше, чем вы заложили на ожидание ответа;
— Хорошо показал себя визуальный сигнал о состоянии системы: устройство ждёт ответа, обрабатывает запрос, что-то пошло не так. Дети за 15 минут научились эти сигналы учитывать: «Нет-нет, сейчас он слушает»;
— Тестировать диалоги лучше в голосовом, а не текстовом режиме, так как время ожидания становится критически важным, и его надо подгонять.
Канал Анны. #voice_assistant
Арт-директора помогут тебе упаковать портфолио для отбора в топовые компании
7 февраля в 19:00 (МСК) стартует серия бесплатных вебинаров от маркетплейса Edutoria и менторского сервиса Helper. За 3 дня арт-директора и дизайн-лиды Сбера, Яндекса, Газпромбанка и Самоката:
✅Расскажут, как подготовить портфолио, чтобы тебя заметила компания мечты
✅Поделятся лайфхаками, как сами попали на работу
✅Разберут твоё портфолио и сразу поправят его Фигме
А ещё готовь вопросы, ведь ты сможешь задать их арт-дирам в прямом эфире.
Встретимся на первом вебинаре 7 февраля в 19:00 (МСК). Не забудь зарегистрироваться.
#реклама
Владислава Епифанова написала о настройке каналов сбора обратной связи от пользователей.
— ОС помогает узнавать о пользовательских проблемах и быстро исправлять недостатки и находить идеи для улучшения продукта;
— Один из каналов — опросы в сервисе;
— Полезными оказались точечные опросы после релизов для определённых сценариев. Когда задача переходит в разработку, на встрече с проектировщиком и аналитиком можно узнать, какие есть сомнения, что хотелось бы узнать о пользователях или сценарии, и решить, нужен ли опрос, выбрать место для размещения в сценарии и так далее. Опрос позволяет узнать о недовольстве и быстро исправить замечания;
— В техподдержку приходит много ОС, поэтому работу с ней надо автоматизировать. Полезные отчёты: 1) Топ знаний по количеству обращений за месяц и их общее количество; 2) Общая сводка по всем знаниям;
— Важны аномалии в конкретном месяце и динамика знаний, попадающих в топ-5 обращений. Их можно сопоставлять с релизами. Из этого вырастают задачи на исследования;
— Комментарии специалистов техподдержки были расплывчатыми, тяжело было понимать проблемы. Добавили обязательное поле «Описание проблемы» для четырёх знаний, данные которых больше всего интересовали;
— Также, чтобы конкретизировать ОС, пришлось доработать анкету, которую заполняли в отделе активации (работают с теми, кто недоволен сервисом или купил, но не пользуется) при общении с клиентами;
— ОС от отдела продаж решили добавлять в виде инцидентов, с которыми работают специалисты техподдержки. Оттуда она попадает в беклог или напрямую команде (если доработка срочная);
— При этом описали критерии, которые обязательно надо указывать: данные клиента и чек за год, описание задачи или проблемы, как сейчас справляется с проблемой, как часто с ней сталкивается и так далее. Что-то может указать специалист по продажам, что-то — техподдержки;
— Этот канал обратной связи сейчас один из самых эффективных;
— Лучше не браться за всё разом, а идти поэтапно;
— Пробуйте разные каналы ОС для своего продукта. Универсальных решений нет.
#research #feedback
Алина Ермакова написала, что делать, когда от команды осталась половина.
— «Когда ты смотришь на свою команду шире, чем на отдел в компании, отпускать становится проще»;
— Это повод пересмотреть процессы, от чего-то отказаться, перераспределить нагрузку;
— Попросите руководителей оценить значимость каждого проекта. Оцените планы по самым важным проектам и вложитесь в критичные задачи;
— Сверьтесь с приоритетами компании на год: создавать инновации, удерживать и повышать качество, оптимизировать ресурсы? Это поможет понять, какие задачи можно брать в работу;
— Оставьте место концептам: новым продуктам и процессам. Если заниматься только операционными задачами, можно превратиться в завод, из которого рано или поздно захочется сбежать;
— Обучайте людей вокруг, чтобы они помогали решать ваши задачи. Например, чтобы повысить уровень запросов на исследования, обработки полученных данных;
— «Только честно прожив опыт отпускания несколько раз, вы научитесь перезапуску команды и процессов».
#management
Фейфей Лиу написала о переводе пользовательского контента.
— Если продуктом пользуются люди из разных стран и пользовательский контент важен (например, это могут быть отзывы), дайте пользователям возможность перевода всех или отдельных записей или заранее переводите весь контент;
— Если отзывов мало, пригодится кнопка перевода отдельного отзыва, чтобы дополнить их мнениями иностранных покупателей (Etsy);
— Не отображайте кнопку перевода, если язык отзыва совпадает с языком пользователя;
— Если преобладают отзывы от иностранцев, пригодится кнопка «Перевести все», чтобы не переводить каждый отдельный отзыв (Amazon). Особенно актуально для развлекательного контента, когда пользователям проще уйти на другой ресурс, чем переводить вручную или прокручивать недоступный контент;
— В таком случае можно переводить контент заранее и отображать отметку о переводе и кнопку для просмотра оригинального текста;
— Стоит учесть, что сервисы для такого автоматического перевода не бесплатны;
— Если отзывов на разных языках достаточно много, дайте возможность отфильтровать их по языку (Booking, Weverse).
#localization #ecommerce
Маргарита Романова показала, как без больших трудозатрат повысить интерактивность прототипов в Фигме.
— Выделение строки таблицы, отображение раскрывающегося списка действий со строкой, изменение статуса строки — с помощью интерактивных компонентов;
— Для раскрывающегося списка настройка Absolute position позволяет игнорировать Auto layout компонента, в котором он находится;
— Для Auto layout таблицы настройте Canvas stacking: First on top. Так верхние строки расположатся в слоях выше, и нижние строки не будут перекрывать раскрывающиеся списки действий;
— Отображение в таблице большого количества тултипов;
— Component properties позволяет работать с текстом, не переходя на конкретный слой с текстом. Функция Expose properties from Nested instances позволяет редактировать текст тултипа прямо в свойствах инстанса родительского компонента;
— Чтобы редактировать текст тултипов, которые отображаются с помощью интерактивного компонента, для состояния компонента без тултипа надо добавить тултип с нулевой прозрачностью.
#figma #prototype #table
Олег Королев написал о количественных исследованиях с помощью опросов.
— Их можно разделить на разовые (статистическая проверка гипотез) и регулярные (отслеживание динамики оценки);
— Регулярные: NPS, CSAT, CSI (помогает понять, насколько клиентам важны характеристики используемого продукта), CES (насколько сложно было взаимодействовать с компанией при решении своей задачи);
— Опросы наиболее эффективны на этапе исследования, тестирования и сбора обратной связи после разработки;
— С ними нельзя выявить глубинные мотивы и проверить сложные гипотезы и сценарии. Опросы не будут 100% истиной, так как люди лгут, забывают о своём опыте и часто только предполагают, как могли бы поступить;
— Чтобы провести разовый опрос, надо обозначить проблему и определить цели. На этапе исследования: проверить гипотезы о целевой аудитории, узнать её характеристики (в том числе, какими конкурирующими продуктами пользуются), отношение к услуге;
— Для расчёта размера выборки есть калькуляторы. По опыту, почти никогда не нужно больше 400 ответов на сегмент;
— От целевой аудитории зависит канал общения, а от него — формат вопросов. В почте допустимы длинные заходы, 5–7 вопросов (в том числе открытые), пояснения в скобках. В чате лучше использовать шкалы и вопросы с вариантами ответов;
— Закрытые вопросы лучше задавать в начале опроса. Они помогают быстро сегментировать респондентов. Но не спрашивайте, условно, про семейное положение, если эта информация не повлияет на продукт;
— Вопросы могут отличаться для разных категорий клиентов. Пользователей, которые зарегистрировались, но не используют продукт, можно спросить о целях, актуальности продукта для них и почему они его не используют;
— И для разных ситуаций. При раннем оттоке можно спросить о самой большой проблеме при взаимодействии, что компания может сделать, чтобы исправить ситуацию;
— При анализе ответов можно посмотреть сочетание ответов на несколько вопросов, чтобы понять зависимость одних ответов от других;
— Если вы можете узнать что-то о клиентах из аналитики или CRM, не спрашивайте об этом в опросе.
#research #survey
Андрей Маркелов написал о линиях в дизайне графиков.
— Важно правильно выбрать толщину линии. Толщина в 1,3 пикселя даёт лёгкую воздушность. Стоит добавить скругление изломов;
— Если отображаются 2 графика, для облегчения восприятия к первому добавляют градиент: 15% прозрачность в верхней точке и 0% у горизонтальной оси;
— Линиям добавляют обводку, равную толщине линии, чтобы избежать шума на стыках;
— Сканер позволяет узнать значение параметра в любой точке графика. Это вертикальная линия, накладывающаяся поверх графика и следующая за курсором. В месте пересечения с графиком ставится точка и отображается значение параметра. Под сканером отображается дата (или то, что находится на горизонтальной оси). Сканер хорошо работает для нескольких графиков;
— В финансовых системах используются индикаторы — миниграфики под основным графиком. Например, столбчатая диаграмма, показывающая спред или объём торгов, или график RSI;
— Японские свечи — особая столбчатая диаграмма. Прямоугольник показывает изменение цены (её значение при открытии и закрытии торгового дня), а линия показывает минимальное и максимальное значение, которого достигала цена в течение дня.
#data_visualization
Интересный феномен, когда кто-то прилагает дополнительные усилия, чтобы сделать хуже.
Например, в телевизоре миллион способов «обработать» (ухудшить) изображение, хотя все, что от него требуется — просто показать цифровой сигнал ровно в том виде, в котором он поступает на порт. Все, лучше уже не сделаешь.
Или Твиттер, они пыжились, придумывали алгоритм «умного» кропа изображения. А в итоге лучший кроп — это не кропать картинку вообще. Если я прикладываю изображение, наверное, я хочу, чтобы его увидели целиком, а не какую-то часть? Если бы мне нужен был кроп, я бы кропнул.
«Алгоритмические» ленты в ту же степь. Лучшая алгоритмическая лента — обратная сортировка по дате. Если бы мне был не интересен какой-то контент, я бы от него отписался, не? А если я подписался, значит я хочу его видеть, епт.
Иногда, чтобы сделать хорошо, достаточно просто ничего не делать.
20 самых популярных постов UX Notes в 2022 году в Телеграме.
Перед прошлым Новым годом я включил реакции, и теперь могу составить топ по обратной связи от читателей в Телеграме. Будет интересно потом сравнить его с аналогичным топом в ВК. Указанное количество лайков = лайки минус дизлайки.
1. Сергей Шандарин написал о поиске работы дизайнером за рубежом (после 24 февраля). 52 лайка
2. Иван Звяхин поделился чеклистом для самостоятельной проверки интерфейса. 52 лайка
3. В Heads and Hands написали о приоритизации фич по модели Кано. 46 лайков
4. Маргарита Романова написала о поиске работы продуктовым дизайнером в Европе. 43 лайка
5. Брайан Миллар написал об экстремальных пользователях. 40 лайков
6. Читатели рассказали в комментариях о своих телеграм-каналах. 39 лайков
7. Эдвард Скотт написал о хлебных крошках в мобильных версиях интернет-магазинов. 39 лайков
8. Игорь Штанг написал о современной русской пунктуации на примере упаковки умной розетки Яндекса. 38 лайков
9. В Purrweb написали об адаптации интерфейса для стран Ближнего Востока. 38 лайков
10. Илья Бирман написал о кнопке «Подробнее» в карточках. 38 лайков
11. Ксения Беляева написала о дизайн-ревью, когда дизайнер проверяет, как разработчик воплотил его дизайн. 37 лайков
12. Энтони Ценг написал, на что можно заменить большое меню, состоящее из нескольких колонок. 37 лайков
13. В «Собаке Павловой» написали о специфике проектирования медицинских интерфейсов. 36 лайков
14. Чем отличаются униширинные и моноширинные шрифты? 35 лайков
15. Игорь Штанг написал, что делать с текстом в скобках (например). 35 лайков
16. Станислав Хрусталёв написал о лучших практиках работы с корзиной. 34 лайка
17. Андрей Насонов написал о модальных окнах. 34 лайка
18. Наталья Стурза написала о чек-листе проектирования, который помогает не упускать детали, создавая сложные продукты. 33 лайка
19. Эдвард Скотт написал о частых ошибках в дизайне интернет-магазинов одежды. 33 лайка
20. Барт Гиссенс написал, почему курсор в операционных системах наклонён. 33 лайка
Сеара Кроушоу написала о перетаскивании: первая, вторая часть перевода.
— Источник — контейнер с перетаскиваемыми объектами. Цель — статичная или динамичная область, куда эти объекты можно переместить, которая в режиме реального времени даёт обратную связь о процессе;
— Основные сценарии: перемещение объектов (например, файлов на страницу браузера для загрузки), изменение порядка элементов списка, изменение размера, сложные взаимодействия (перемещение якорных точек прямоугольника в Фигме);
— У объектов может быть область захвата, за которую их можно схватить для перетаскивания, выделенная графически или иконкой. При наведении на неё показывайте обратную связь, в том числе меняя курсор (например, на стрелку вверх и вниз, если доступно перетаскивание по вертикали);
— Состояние цели может меняться: по умолчанию в ней может быть текст о возможности перетащить файлы (например, для загрузки) и допустимых форматах, в процессе — количество выбранных файлов и текст, что их надо отпустить над выделенной областью, в конце — сообщение об ошибке (слишком много файлов) или успехе;
— Положение цели тоже может меняться. Например, если перетаскиванием пользователь перемещает элемент в древовидной иерархии;
— Базовое решение при изменении порядка элементов: полупрозрачную копию перетаскиваемого элемента отображать в исходном месте, место, куда он переместится, отмечать лаконичным маркером. Так будет меньше мельтешения, понятен порядок до начала перемещения, но само перемещение происходит в конце, когда пользователь отпускает элемент;
— Продвинутое решение: перетаскиваемый элемент покидает исходное место и сразу отображается в новом месте;
— Перетаскивание — пример непосредственного манипулирования объектами, которое интуитивно понятно пользователям;
— Для повышения доступности полезно начать с реализации альтернативного решения;
— Перетаскивание может быть плохой идеей (или требовать поиска дополнительных решений), если одновременно с ним требуется прокрутка страницы.
#drag_and_drop
Станислав Хрусталёв продолжает собирать открытую базу знаний по UX/UI e-commerce.
В базе — советы по проектированию строки поиска, каталога, страниц товаров, корзины, чекаута и многого другого. Всего — 25 больших чек-листов, в которых собрано более 2600 гайдлайнов с примерами и анти-примерами. База продолжает пополняться.
Все материалы полностью бесплатны, без пэйволлов и скрытых продаж. Совет: сами статьи объемные, лучше открывать с ПК.
Канал Станислава.
Исследования без прототипов, которые дают крутой результат и ускоряют TTM? Да, они существуют! 21 февраля на седьмом онлайн-митапе Avito Design Talk четыре спеца из UX-лаборатории Авито расскажут, что к чему.
Стоит подключиться, если хотите:
– составлять эффективные брифы на исследования;
– создавать анкеты для опроса пользователей без ошибок;
– проводить исследования без теста прототипов;
– быстро тестировать гипотезу продукта.
Митап пройдёт на YouTube-канале AvitoTech. Начало в 18:00 по мск. Регистрация здесь: clc.to/cGdezQ
Реклама. ООО «Авито Тех».
Андрей Маркелов написал о диаграммах рассеяния.
— На английском их называют Scatter Plot. Они показывают зависимость двух параметров. Например, на горизонтальной оси — размер зарплаты, на вертикальной — уровень счастья, а каждая точка на диаграмме — человек с конкретным размером зарплаты и уровнем счастья;
— Кроме положения на осях у точек могут быть визуальные отличия: цвет, форма и размер фигуры. Цветом можно показать пол человека, размером вес, а формой — семейное положение, что позволит увидеть связь, например, между уровнем зарплаты и весом человека;
— Если используется один цвет, а плотность расположения фигур очень высокая, их можно наложить в режиме смешивания Multiply (свойство есть в CSS). Диаграмма не будет блеклой и позволит оценить плотность данных;
— Иногда показывают «среднюю линию» — линию, проходящую максимально близко ко всем точкам в среднем. Она может быть не прямой;
— На диаграмме можно показать несколько наборов данных со своими средними линиями;
— В интерактивном формате легенду можно поместить в верхний левый угол и дать возможность скрывать отдельные наборы данных;
— Чтобы показать, какой точка прошла путь, можно отобразить на графике её хвост с временными отметками. Чтобы не загромождать, график движения можно показывать под диаграммой по нажатию на конкретную точку;
— Иногда на диаграмме отображают тысячи точек. Тогда в иллюстративных целях можно нанести области плотности, похожие на тепловые карты;
— Бывает, что конкретные точки менее важны, чем общее понимание плотности их распределения. Тогда точки (фигуры) можно заменить на ступенчатый градиент, показывающий плотность фигур в разных областях диаграммы.
#data_visualization
В ITpelag написали для начинающих о полях ввода и формах.
— У поля должна быть подпись. В ней указывайте, что должно быть введено («Имя», а не «Введите имя»). Без двоеточия;
— Не размещайте подпись в плейсхолдере — так пользователь не сможет перепроверить правильность заполнения полей в большой форме;
— В плейсхолдере можно показать формат или пример вводимых данных;
— В поле можно расположить контролы, помогающие его заполнить: сканирование из QR-кода, скрытие и отображение пароля, голосовой ввод;
— Если поле часто очищают, предусмотрите контрол его очистки;
— Ширина поля должна соответствовать вводимым данным — так проще понять, что надо ввести, и убедиться, что поле заполнено верно;
— Маски ввода помогают не ошибиться, например, в количестве необходимых символов;
— Отмечайте необязательные поля. Обычно (если форма спроектирована хорошо) необязательных полей меньше, чем обязательных;
— Проверяйте поле на корректность после его заполнения — фокус ушёл с поля или пользователь нажал на кнопку отправки формы;
— Поля большой формы делите на логические группы или даже на отдельные шаги — чтобы не пугать пользователей её монолитностью или количеством полей.
#input #form
Скидка на «Журналус» — медиа о дизайне
В еженедельных выпусках — крутые проекты для вдохновения, интервью, отборные статьи, лекции, фильмы, шрифты, инструменты и цитаты из книг. Подписчикам доступен полный архив номеров из более чем 300 выпусков. Все это богатство отлично развивает дизайнерскую насмотренность и позволяет следить за последними событиями в отрасли.
Перед оформлением подписки для ознакомления доступно пять полноценных выпуска. «Журналус» читают в почте, на сайте и в удобном телеграм-боте.
Есть индивидуальная подписка и корпоративная для компаний — от пяти до 250 человек. Если нужно больше, условия обсуждаются отдельно.
В честь киберпонедельника даем промо-код ux15 со скидкой 15% на любой тип подписки (важно: она должна оформляться впервые), который действует с 30 января по 5 февраля.
#реклама
Екатерина Бессчётнова написала о подготовке прототипа для пользовательского тестирования.
— Прототип строится вокруг сценария тестирования — вопросов и заданий, предлагаемых респондентам;
— Задания следуют из гипотез. Гипотеза: при подборе товара людям неудобно использовать фильтр по цене. Задания: подберите товар Х удобным способом; подберите товар Х не дороже 10 рублей;
— Продумайте точки входа в тестируемый сценарий, чтобы он не начинался для пользователя внезапно;
— Отобразите все граничные случаи, с которыми пользователь может столкнуться, например, сообщение об ошибке, если заполнены не все поля. Страницу с 404-й ошибкой добавлять не надо;
— Добавьте максимум путей решения задачи, чтобы увидеть, куда пользователи на самом деле пойдут, и сравнить эффективность главного и второстепенного пути;
— Добавьте ошибочные пути, чтобы не было гарантии, что все респонденты выполнят задания. Так можно узнать, когда они заметят ошибку и как будут её исправлять. Активны должны быть не все развилки, а только вызывающие сомнения;
— Проработайте не только линейный путь вперёд по сценарию, но и способы вернуться назад;
— Чем ближе прототип к финальному продукту и реалистичнее взаимодействие с элементами интерфейса, тем лучше: визуальные акценты, реалистичный текст и релевантный контент, соответствие тону голоса и так далее;
— Если пользователи должны вводить данные, поля должны быть активны и не заполнены. Если это не прототип в Axure, поля можно заполнять по нажатию. Проверьте, что контент адекватен выполняемому заданию;
— Скройте отображение кликабельных областей и, насколько возможно, служебный интерфейс прототипа;
— Некликабельные элементы, с которыми предположительно могут взаимодействовать респонденты, должны реагировать на наведение курсора и, например, приводить к изменению курсора;
— Учитывайте разрешение устройства, на котором будет проходить тестирование;
— Перед тестированием на респондентах, проверьте прототип внутри команды.
#prototype #user_testing
Портфолио, часть 1. Общие советы
При отклике на вакансию вы посылаете три артефакта, по которым вас будут судить: портфолио, CV и профиль Linkedin. Все они должны рассказывать одну историю: количество лет опыта, компании в которых работали, основные проекты, набор скилов и так далее. Напишу отдельно о каждом из них, начну с портфолио.
Рассказ о портфолио будет в четырёх частях. Сегодня первая часть — общие советы.
Где делать
Где удобнее, там и делайте: тильда, ноушн, личный сайт, дизайнер на фрилансе. Главное чтобы портфолио было доступно онлайн и на него можно было легко сослаться. Хороший сайт производит впечатление, но главное чтобы портфолио хорошо рассказывало о вас — поэтому где можете, там и делайте. Задача — чтобы портфолио было доступно максимально быстро.
Первое портфолио я сделал в Ноушене и с ним меня позвали на несколько собесов. Моя подруга получила оффер от нидерландской компании с портфолио также в ноушене. А когда Ноушн с портфолио уже работал, я постепенно собрал сайт и переехал на aakaravaev.com.
Мобильная версия
Смартфоны есть у всех и ваше портфолио будут смотреть с них тоже. Важно, чтобы на мобилке портфолио выглядело хорошо. Ноушен мобайлфрендли из коробки. Остальные конструкторы сайтов наверное тоже (не проверял). Моё портфолио собрано на Бутстрапе и про мобилки знает. Яндекс.метрика на моём сайте показывает треть заходов с мобилки. Это огромное число и оставлять без внимания мобильную версию не нужно.
Проверьте, чтобы сайт в принципе был доступен
С отдельным доменом могут быть проблемы. Я сначала жил на российском хостинге и из-за рубежа он не был доступен. Я написал в поддержку и меня перевели на другой айпи. Потом были проблемы с доступностью из-за отсутствия SSL. Починил и это. Так что проверяйте доступность. Попросите друзей в разных странах открыть ваш сайт, попробуйте из России зайти на сайт под ВПН.
Английский язык
Если вы ищете работу на международном рынке, то все тексты у вас должны быть только на английском. Мне было сложно писать на английском сразу большие тексты. Поэтому я писал на русском и потом переводил с помощью Deepl. Когда портфолио будет готово, обязательно проверьте его на ошибки. Можно воспользоваться Граммарли или отправить кому-нибудь на вычитку.
Упражнение перед созданием портфолио
Перед тем как делать портфолио, сделайте хорошее упражнение. Найдите двадцать портфолио продуктовых дизайнеров, которые вам понравятся. Не ищите их по подборкам клёвых дизайнов, там уже всё выбрали за вас. Вам надо именно переработать руду, чтобы отыскать золото.
Я искал на Линкедине — вбил в поиске product designer, выбирал в настройках разные страны и открывал подряд сайты с портфолио со страниц дизайнеров.
Чтобы найти двадцать хороших портфолио я перебрал около сотни разных сайтов. В результате чувствуешь себя в шкуре эйчара — начинаешь замечать, насколько похожи сайты дизайнеров, читаешь сотню раз как дизайнеры со всего света пишут одни и те же клише, как не стоит писать о себе, как лучше сделать сайт.
Не открывайте за день слишком много страниц в Линкедине. Он чувствительный, может вас заблокировать несколько часов за подозрительную по его мнению деятельность.
Александр Аникеев написал о позициях восприятия.
— Позиция восприятия — положение воспринимающего человека относительно того, что он воспринимает. Например, травмирующий опыт люди часто описывают отстранённо, с позиции наблюдателя;
— Есть 3 основных и 2 дополнительных позиции;
— 1. Человек смотрит на всё собственным взглядом и ассоциирует всё со своим внутренним миром (ценностями и принципами). Например, дизайнер ищет решения, набрасывает варианты и генерирует гипотезы, руководствуясь своим экспертным мнением. Хорошо, когда эти ценности и принципы есть;
— 2. Человек ставит себя на место другого. Позиция тесно связана с этапом проведения исследований, интервью. Прокачивайте эмпатию;
— 3. Полное эмоциональное отстранение от процесса, в который человек вовлечён. Позволяет оценивать происходящее максимально объективно. Полезно при проведении пользовательского тестирования;
— 4. Взгляд на что-либо с точки зрения какой-либо системы. При проектировании помогает выявлять требования и ограничения: технические, законодательные, этические, бизнесовые и так далее. Узнавайте подробности о том, что связано с продуктом и влияет на него;
— 5. Восприятие с точки зрения пользы и ценности для окружающих. Влияет ли происходящее на жизнь людей? Ответ на этот вопрос дизайнеру дают продуктовые метрики (способность их формировать и отслеживать, формулировать продуктовые гипотезы).
Кирилл Улитин написал о цвете в интерфейсе: о контрасте и конфликте разных информационных слоёв цвета.
— Цветовые пространства RGB и производные от него HSB и HSL не адаптированы для человеческого восприятия. Изменение оттенка даёт цвета, неравномерные по контрасту. Цветовые модели LCH и HSLuv призваны это исправить;
— Контраст зависит от способа воспроизведения: на электронно-лучевых экранах контрастнее жёлтый на чёрном, на светодиодных — чёрный на белом;
— Алгоритм расчёта контраста в WCAG 2.1 иногда ошибается. В новую версию стандарта доступности вошёл алгоритм APCA. Можно использовать инструменты Huetone и Accessible Palette;
— Алгоритмы проверяют цвета в идеальных условиях и не учитывают пользовательский контекст: тип матрицы экрана, яркость, режимы вроде Night Shift или корректирующие очки;
— Цвет может обеспечивать узнаваемость бренда;
— Apple в руководстве по интерфейсному дизайну говорит о том, что конфликт разных информационных слоёв цвета нежелателен: красное сообщение о критической проблеме будет менее эффективным, если красный используется в приложении для некритичных ситуаций;
— При этом в новой версии macOS Big Sur разработчикам дана возможность настраивать основной цвет интерфейса приложения;
— Когда цвет бренда (например, красный) совпадает со статусными цветами в интерфейсе (сообщения об ошибках) надо вводить дополнительный цвет для элементов интерфейса, отличающийся от брендового (например, Microsoft Office 365), или добиваться цветовой разницы от 30 до 40 единиц (например, МойОфис).
Канал Кирилла. #color #accessibility
Хотите создавать простые и приятные в использовании IT-продукты? Станьте UX/UI-дизайнером, и пусть мир увидит ваши идеи.
Попробуйте примерить профессию на бесплатном интенсиве 23, 24, 25 января в 17:00. За три дня вы сделаете свою первую работу в качестве UX/UI-дизайнера и получите фидбэк от профи
В результате вы:
— погрузитесь в профессию UX/UI-дизайнера,
— создадите первую работу и получите обратную связь от эксперта,
— получите полезные призы и подарки,
— пообщаетесь с действующим дизайнером в закрытом чате.
Вы узнаете о профессии из первых рук, получите детальный разбор своей работы и крутые бонусы. За регистрацию дарим гайд «300 полезных ресурсов для дизайнеров».
Зарегистрироваться: https://go.contented.ru/ohq2ZA
#промо
Александра Савельева написала об обновлении устаревших таблиц в большом продукте.
— Проведите презентацию, какие проблемы можно решить обновлением. Подсветите несуразности в текущей работе элемента. Покажите красивый макет, каким всё станет. Заручитесь поддержкой руководства;
— Конкретные дизайн-решения могут сделать таблицы удобнее (ссылки на материалы с рекомендациями есть в статье и здесь: #table). Перевод их на компоненты повысит консистентность и увеличит скорость разработки новых таблиц;
— Сделайте хорошую новую таблицу на какой-нибудь одной странице (например, при создании новой функции);
— Итерационно, небольшими шагами замените старые таблицы на новые во всём продукте. Это позволит сильно не задерживать выпуск новой функциональности;
— В начале не будет никакого результата. Чтобы не сдаться, ищите поддержки у других дизайнеров;
— Если говорят «работает — не трогай» (в новом дизайне можно не учесть все нюансы предыдущего решения), можно предложить чисто визуальное обновление (фейслифтинг).
Канал Александры. #table #process
Курс «Английский для продактов» от Яндекс Практикума
Для тех, кто хочет изменить свою профессиональную жизнь и работать в международной команде.
Обучение построено вокруг рабочих ситуаций и полезных для карьеры навыков:
Самопрезентация. Демонстрация лидерских качеств на встречах. Рассказ о себе на собеседовании и при знакомстве с командой.
Питч стратегии продукта. Ответы на product sense questions на собеседовании. Защита дорожной карты перед стэйкхолдерами.
Навигация в спорных ситуациях. Переговоры о ресурсах и сроках со стейкхолдерами. Работа с немотивированными командами. Обсуждение проблем и идей на ретро.
Питчинг локальных и глобальных трендов. Обсуждение ценностей, которые вызывают доверие пользователей, на собеседовании и во время нетворкинга.
Обсуждение результатов работы. Продуктовое демо для стейкхолдеров. Ревью для себя и команды: рефлексия и развивающий фидбек.
Запишитесь на бесплатную консультацию. Определим ваш уровень языка и расскажем подробнее про обучение.
#промо
А вот 20 самых популярных постов, если считать по лайкам в ВК.
Только 5 статей попали и в вкшный и в телеграмный топ:
— Чеклист для самостоятельной проверки интерфейса Ивана Звяхина;
— Heads and Hands о приоритизации фич по модели Кано;
— Ксения Беляева о дизайн-ревью;
— «Собака Павлова» о специфике проектирования медицинских интерфейсов;
— Чеклист проектирования сложных продуктов Натальи Стурза.
2 автора оказались в обоих топах, но с разными материалами:
— Илья Бирман а) о дизайн-системах, б) кнопке «Подробнее» в карточках;
— Энтони Ценг а) об адаптивных таблицах, б) замене большого меню.
А Игорь Штанг оказался единственным автором с двумя материалами в телеграмном топе:
— О современной русской пунктуации;
— Что делать с текстом в скобках.
Ищете современные тренды в дизайне интерфейсов? Хотите постоянно учиться и развиваться в UX / UI-дизайне?
Дизайнер из Почтатеха Ольга Михайленко прошла путь от изучения дизайна в Университете Хартфордшира до работы в таких крупных компаниях как EPAM, The North Face и Vans. В своем уютном канале она делится опытом и полезными ресурсами в UX дизайне и тем, с чем она сталкивается в своей работе каждый день.
Переходите в её канал и подписывайтесь!
Андрей Маркелов написал о шкалах в дизайне графиков.
— Построение графика начинается с выбора осей. Чаще всего это 2 оси. В основе оси — шкала (линия с делениями);
— Вертикальная ось не всегда должна быть слева. В финансовых системах её располагают справа (ближе к более актуальной части графика). А ещё текущую цену выделяют цветом и пунктирной линией от края графика;
— Легче всего читается толщина графика от 1,3 до 1,6 пикселей;
— Вертикальную шкалу нужно подстраивать под значения графика в видимой области. Нижняя точка должна быть чуть ниже минимума на графике, а верхняя точка — чуть выше максимума;
— Шаг вертикальной шкалы выбирается делением на несколько равных частей, чтобы расстояние между делениями было не слишком широким и не слишком узким (от 40 до 90 пикселей). В идеале должны получаться круглые числа;
— Двухсекционная шкала, в которой используется сразу два масштаба, помогает видеть, например, какой отображается год на месячной шкале (используется в терминале Блумберга);
— Шорткаты позволяют быстро посмотреть график за конкретный период. Например, W — за неделю, YTD — от начала года до сегодня. Обычно они размещаются над графиком;
— В финансовых системах графики часто смотрят в процентах. За 100% принимается самая левая точка графика в зоне видимости. Остальные деления пересчитываются в проценты относительно этой отметки;
— Логарифмическая шкала строится так, что рост в N раз будет занимать одинаковую высоту в любом месте графика. Можно сравнивать рост цены в 2 раза полвека назад и в прошлом году, и видеть одинаковое изменение.
Смотрите также, как делать подписи для таймсерий. #data_visualization
Алиса Шефер и Саша Липатова написали, как UX-редакторам встроиться в дизайн-процесс.
— Знакомьтесь с командами не только дизайнеров, но и аналитиков, тестировщиков и маркетологов, которые работают над вашим продуктом. Повторять знакомство можно раз в квартал: люди приходят и уходят, меняются зоны ответственности редакторов;
— Задачи на текст надо ставить одновременно с задачами на дизайн, а если задача небольшая, то хотя бы за неделю до дедлайна. Так можно успеть погрузиться в контекст и собрать вводные, а не просто поправить формулировки;
— Чем полнее задача описана, тем лучше. Смотрите в статье шаблоны с вопросами, что писать в задачах на текст а) целого сценария, б) экрана или попапа, в) письма, пуша или смс;
— Создайте таблицу ответственности (например, в виде модифицированной матрицы RACI), чтобы коллеги легко могли понять, к кому из редакторов обратиться с конкретным вопросом или задачей;
— Разработайте и обновляйте гайды, глоссарии и редполитику. Опишите процесс работы над задачами и отличия разных редакторских ролей: основатель проекта, партнёр, ревьюер. Чтобы эти документы оставались актуальными, бронируйте на них 1 час в день;
— Чтобы новые продакты или тимлиды не забывали подключать редакторов к задачам, проводите 15-минутные онбординги с рассказом о процессе, базе знаний и гайдах;
— Соберите всех пишущих (и UX-редакторов, и копирайтеров из отдела маркетинга) в один чат, чтобы всегда можно было обсудить какие-то изменения в тексте и не копить недопонимание.
#process #writing