Основные правила, прототипирования кнопки:

Ваши кнопки должны быть уникальным экземпляром компонента или фреймом. Итак, если в вашем прототипе есть 4 кнопки, которые вы хотите сделать интерактивными, вам понадобится всего 12 кнопок, чтобы прототип работал (1 в состоянии по умолчанию, 1 в состоянии наведения курсора и 1 в нажатом состоянии для каждой кнопки). На данный момент я не знаю способа связать последовательность прототипов на главной странице компонентов и применить это ко всем экземплярам компонента. (Если я ошибаюсь, пожалуйста, напишите в комментариях!)
Состояния наведения и нажатия должны располагаться за пределами фрейма вашего прототипа, чтобы они работали как оверлей. Просто так «оверлеи» работают в Figma.

Сохраняйте согласованность в именах слоев для функции Smart Animate. Позже мы будем использовать в Figma функцию Smart Animate, поэтому следует последовательно называть слои. (Если вы похожи на меня, то ваши слои обычно называются «Frame 1104», «image 32» или «Vector 200». Следует упорядочить их).

Это простой двухэтапный процесс

Шаг 1 — Состояние наведения курсора

1. Состояние «Наведение курсора»
Ключом к этому прототипу является то, что вы фактически не меняете исходную кнопку «по умолчанию». Вместо этого вы открываете оверлей кнопки в «состоянии наведения курсора» непосредственно поверх кнопки в состоянии по умолчанию. Это делается путем создания прототипа взаимодействия «While Hovering», который запускает оверлей кнопки в состоянии наведения курсора.
Если в первом раскрывающемся списке в разделе «Overlay» вы выберете «Manual» (Вручную), Figma автоматически разместит новую кнопку в состоянии наведения курсора поверх кнопки в состоянии по умолчанию. Обязательно проверьте, чтобы оверлей располагался поверх вашей изначальной кнопки.

Шаг 2 — Нажатая кнопка

2. Кнопка в нажатом состоянии
Теперь, когда открыто состояние наведения курсора, мы создадим второй этап нашего взаимодействия. Для этого создайте прототип взаимодействия «While Pressing» на кнопке в состоянии наведения курсора, который запускает команду «Swap With» с кнопкой в ​​нажатом состоянии. Думаю, технически вы можете открыть другой оверлей, но тогда мы не сможем использовать функцию Smart Animate.

Этап 3 — «По нажатию» (On Click)

3. Сделайте кнопку функциональной (необязательно)
Хорошо, это трехэтапный процесс, если вы хотите, чтобы ваша кнопка действительно что-то делала. Чтобы сделать кнопку функциональной, просто добавьте к нажатой кнопке прототип взаимодействия «On Click», чтобы она позволила перейти на новую страницу, открыла модальное окно и т.д. ?
Вот и все! Ниже, в качестве примера, приведен мой проект Figma, демонстрирующий изложенные выше правила:
Кнопки должны быть уникальным экземпляром компонента или фреймом.
Состояния наведения и нажатия должны располагаться вне фрейма прототипа, чтобы работать как оверлей.
Сохраняйте согласованность названий слоев для корректной работы функции Smart Animate.


Источник

Как сделать дизайн сайта через призму UX? Без танцев с бубном, SMS и регистрации

С чего начинается работа по дизайну сайта? Почему Вася делает дизайн за 30 тысяч, Лена — за 150 тысяч, а известная студия — за 1 миллион? Почему конкурент сделал сайт за 200 тысяч, а мой будет стоить 500? И можно ли вообще сделать сайт раз и навсегда, без всяких этих этапов согласования и правок?

Представим себе некоего заказчика в вакууме, который пришел со своей идеей. В лучшем случае, у него есть небольшое ТЗ и несколько зарисовок ручкой (влитых в Figma, Miro или GDocs).
Ему нужен дизайн стартапа: веб-версия, 2 приложения и немного макулатуры для инвесторов. С чего же начать? Нет, не с фейспалма. Уверяю — такое встречается сплошь и рядом. Нацепив дежурную улыбку, я отправляю в бой менеджера проектов (с навыками UX) и иду пить кофе в ближайший Старбакс, на время забывая о заказчике.

Шаг 1. Разбираем проект.
Итак, PM, одаренный широким кругозором, усиленно пытается понять, с чем едят полученный проект. Иногда в разговоре с заказчиком приходится скатываться до очевидностей: «Почему треугольничек не вставляется в круглое отверстие, нипанимаааааюююю…»

Итогом этапа, в идеале, должно стать:

flow или короткое ТЗ на проект;
базовый прототип с основным функционалом;
краткое и емкое пояснение: для чего делается проект, какие есть конкуренты, как планируется монетизация, основные плюсы и минусы запуска проекта.
Что могу посоветовать:

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

Шаг 2. Пилим сырые прототипы, изучаем конкурентов & составляем CJM

На этом этапе я обсуждаю с командой и заказчиком сырые прототипы. Все происходящее постепенно обрастает подробностями. И как раз тут нужен профессионализм всех участников. В этот момент понимаешь, почему менеджер проектов, которому ты платишь 1500 в час, отрабатывает их на 150% — и даже немножечко больше.
Затем сравниваем то, что получилось, с конкурентами. Иногда они есть — но чаще всего нет. И даже похожего ничего нет. Стартапы — штука веселая, да. В таком случае ищем аналогии, другие сервисы со схожей моделью работы (и из других тематик тоже). Сравниваем логику, упрощаем, составляем листы сравнений с конкурентами и псевдоконкурентами, дорабатываем прототип.
Наступает время создавать CJM. Приветствую UX инженера, аналитика... И хотела бы я сказать, что снова ухожу пить кофе — но нет. Втроем мы собираем группы клиентов, согласовываем с заказчиком, вживаемся в роли/приглашаем респондентов, раскладываем прототипы и начинаем штормить. В подробностях посмотреть, как создавать CJM, можно, например, тут https://vc.ru/marketing/96029-instrukciya-po-sostavleniyu-customer-journey-map-cjm. Созданию CJM я могу посвятить отдельный лонгрид и это обязательно когда-нибудь произойдет.

В итоге имеем:

прототипы v2;
обзор конкурентов;
CJM.
Только после этого шага можно сказать, что мы подобрались напрямую к работе над дизайном сайта.

Шаг 3. Делаем прототип и UX копирайтинг
Все прототипы, которые мы делали до этого, можно назвать базовыми. Теперь мы создаем финальный прототип, на основании которого будем делать опрос ЦА и — после доработки — дизайн.

Тут все очевидно — если нужно нечто “вау”, берем Digital Producer и UX Copywriter. Если нет — можно обойтись своими силами. Превращаем литры кофе в кликабельный прототип, который закрывает максимум потребностей по CJM. Да, кажется Старбакс уже должен оформить мне программу лояльности.
Кстати — многие спрашивают, кто такой UX копирайтер, и почему он столько стоит. Этот персонаж, в первую очередь — психолог и UX аналитик, и лишь во вторую — человек пера. Он обладает знаниями о поведении пользователей и умеет работать с прототипами и CJM. Текст, написанный UX'ером, упрощает пользовательский путь и, в целом, быстрее ведет к понятной юзеру конверсии.
Получившийся детализированный прототип + тексты уже похожи на дизайн, и все созданное можно смело закидывать в ЦА, подкрепляя вопросами аналитика. По ответам — дорабатываем.

Итого, после этого этапа мы имеем:

прототип в деталях;
листы опросов;
тексты — на прототипе и в отдельных файлах.

Шаг 4. Дизайн и иллюстрации
Ура! Наконец-то мы подобрались непосредственно к дизайну! На основании конкурентов, best practices, хотелок клиента, желаний левой пятки в полнолуние — рисуем дизайн и иллюстрации. Порой обсуждаем. Порой до 20+ раз одну страницу (реальная цифра: привет, Антон!). На серьезных проектах, которыми пользуются тысячи людей, количество обсуждений не имеет решающего значения — важен исключительно результат.
Обсуждаем итоговый дизайн с клиентом, тестируем на ЦА, дорабатываем.

Получается:

кликабельный дизайн в Figma (320px+768px+1140px+big);
иллюстрации в векторе;
геморрой у арт-директора (ладно-ладно, не всегда)

Шаг 5. ТЗ для верстальщика и ревью
Уф, один из самых сложных этапов. Нужно собрать весь наш супердизайн и максимально толково объяснить верстальщику, чего мы от него хотим. Иногда такое ТЗ занимает больше страниц, чем вся собранная до этого информация по проекту.

Пишем, не забывая скриншоты:

поведение каждого элемента при масштабировании;
сценарии анимаций, ховеров и прочая-прочая;
все возможные исключения;
подробные техтребования: браузеры, стили, сборка, специфические пожелания.
После верстки проверяем с разных устройств и корректируем получившуюся работу. До 3 итераций — норма, 4я — повод сменить верстальщика. Кстати, многие думают, что работа front-end'а не так уж важна, рутинна — и делать ее сможет даже обезьяна. Я в корне не согласна с этим мнением. На мой взгляд, за хорошего верстальщика, который еще и развивается, стоит держаться, как за любимый айфон.

Результат этого этапа:

тз для верстальщика;
готовая верстка.

Шаг 6. Программинг
Как дизайнер я могу помочь Заказчику определить приоритетный фронт работ и дать свои рекомендации по итерациям.
В роли UX-специалиста я понимаю — что стоит сделать в первую очередь, чтобы выпустить не самый куцый MVP. Пользоваться этими рекомендациями или нет — уже выбор тимлида.
Также, иногда рекомендую стек — когда на моем пути встречаются оригиналы, которые в 2К20-м разрабатывают на плюсах то, что практически не касается железа. Разработка на том же Питоне, с учетом планируемых нагрузок, будет и в 10 раз дешевле, и в 10 раз быстрее. Я не претендую на экспертность в выборе стека и часто сама обращаюсь за советом. Но когда вижу, что клиент пытается прыгнуть на грабли с разбега — стараюсь убедить хотя бы выбрать лопату вместо грабель.

В конце этого этапа мы получаем:

документ, расставляющий приоритеты разработки с точки зрения бизнеса;
предложения по стеку (чаще всего — несколько).

Шаг 7. Тестирование на устройствах, нагрузочное тестирование
Вместе с помощниками тестирую конечный результат на небольшом зоопарке устройств. Да, на профессиональном уровне этим занимаются тестировщики — сторонние или на стороне клиента. Однако последние — как показала практика — часто не видят очевидных моментов по дизайну.
И это не камень в огород тестировщиков. Задача QA часто ставится заказчиком в контексте: “Проверить, что все работает и найти баги”. А улетевшая на 5px кнопка или несовпадение шрифта — не баги же.
А со мной такое не прокатит. Поэтому я еще раз делаю ревью полученного продукта с точки зрения дизайна и скорости работы.

Результат этого шага:

документ с правками по дизайну;
документы, отражающие скорость работы продукта и баги на конкретных (чаще всего — мобильных) устройствах.
Шаг 8. Запуск трафика, A/B тесты, выводы
После запуска продукта смотрю на происходящее. Вместе с UX инженером мы ищем проблемные моменты, на которых пользователь может выпадать из контекста или уходить по своим причинам.
Поднимаю составленные на Шаге 3 общие идеи для A/B тестирования, добавляю те, которые появились после запуска продукта, планирую их в итерации, обсуждаю с клиентом и рисую.
В таком состоянии проект переходит на постоянную поддержку, в которую входит:
A/B тестирование;
Отрисовка нового функционала, обновлений;
Создание креативов, баннеров, графики для рекламы и т.д.
В конечном счете Заказчик получает команду, с которой удобно работать. Стоимость таких услуг в месяц редко превышает З/П одного-двух дизайнеров на постоянке. Однако компетенций у нас намного больше, а также мы предоставляем расширенные возможности по аналитике и тестированию и имеем большой пул подрядчиков по программированию и других digital-специалистов. Поэтому выгода тут очевидна.

По итогам этапа получаем:

документ, содержащий план на A/B тесты, отрисованные блоки для тестирования, регламент тестирования;
договор на поддержку клиента.

И главный вопрос всех клиентов: почему мы должны тебе верить? Почему мы должны платить такую сумму?
Да, я такой же дизайнер, как и тысячи других. Писать этот материал заставила меня та боль, которую я испытала, сделав за последние полгода несколько проектов из финтеха и схожих тематик ТЗ: “Хотел бы, чтобы вы сделали игру, 3Д-экшон, суть такова…” И что-то там про “корованы”, задачи застройщиков, стартапы и прочие радости жизни. И мне очень хотелось бы, чтобы вы этой боли избежали. А именно — правильно считали проекты и привлекали нужных специалистов, когда вашей квалификации не хватает.
Будем честны. В одиночку качественно пройти все эти этапы практически нереально. И вряд ли вы — тот Д’Артаньян, который пребывает исключительно в окружении лиц мононаправленной ориентации, и может всё. Всегда будет страдать что-то, что в конечном счете обернется для заказчика финансовыми и временными потерями. А зачем вам это надо?
И да, я понимаю, что в каких-то моментах — я не самый удобный подрядчик. Я откажу заказчику, если он будет предлагать срезать половину вышеперечисленных этапов; если увижу что человек не готов к партнерским отношениям; если пойму, что во мне видят многорукого многонога и не готовы работать с моей командой.
И всё-таки. Сколько в кассу?
Себестоимость лендинга, проработанного по такой схеме — не менее 70.000 рублей. С учетом издержек, минимальной прибыли — получаем 100.000 рублей и выше.
Стартапы, приложения в самой простой реализации обходятся в 150.000 — 600.000 рублей и более.
Сложные решения по типу “а сделайте мне досье по всем клиентам финучреждения с модулями, блэкджеком и дамами” — от 1.000.000 рублей только за дизайн и это себестоимость (!).
Сколько берут при этом крупные студии, которые собрали у себя под крылом достойных профессионалов — мне и подумать страшно, с их-то издержками. Да и ДМС, как и корпоративный авто, сам себя не купит.
При работе с крупными проектами на взаимодействие с клиентом и его ЦА может уходить до ¼ рабочего времени. Это тоже нужно учитывать при планировании проекта.

В завершении
Я намеренно опустила некоторые этапы, ценность которых может быть высокой на проектах >1.000.000 рублей и старалась не ругаться, бросаясь в вас терминами типа RITE, ET, Desk Research и т.д.
Буду рада конструктивной критике, предложениям, вашим историям взаимодействия с клиентами. Всяко, наша общая цель — делать сайты лучше, удовлетворять заказчиков и их клиентов, попутно занимаясь тем, что нам нравится на профессиональном уровне.
OMG! Статья изобилует сарказмом. Пожалуйста, воздержитесь от прочтения, если это вам не близко. Говорят, люди, не понимающие сарказм — читают с конца.

Источник: https://vc.ru/design/183789-kak-sdelat-dizayn-sayta-cherez-prizmu-ux-bez-tancev-s-bubnom-sms-i-registracii

Доступный дизайн: как сделать интерфейс удобным для пожилых

Дизайн не только решает коммерческие задачи, но и делает жизнь людей комфортнее. UX — концепция, которая основана на идее качества и удобства, и перед ней все должны быть равны.

Пандемия привела в интернет всех. Вашим бабуле и дедуле уже не хватает кнопочного телефона и телевизора? Давайте вместе посмотрим, как сделать цифровое пространство для них комфортным.

Мы все когда-нибудь состаримся
Неприятные новости: мы стареем с 20 лет. К 40 годам хрусталик глаза теряет эластичность, и зрение падает. Это естественный процесс, из-за которого становится все труднее читать мелкий текст.
В период с 25 до 60 лет способность использовать сайты снижается на 0,8% в год. Людям нужно больше времени на странице, чтобы сориентироваться и выполнить задачу.
К 2050 году каждый шестой человек в мире будет старше 65 лет.

По прогнозам ООН, число людей в возрасте 80 лет и старше утроится: с 143 миллионов в 2019 году до 426 миллионов в 2050 году.
В общем, мы все когда-нибудь состаримся. Этот факт должен подтолкнуть нас по-другому посмотреть на возрастное поколение уже сейчас.

Ситуация в России
Аудитория интернета в России выросла в 2019 году за счёт пенсионеров. Больше всего прибавилось пользователей в категориях 65+ (с 26 до 36%) и 50-64 года (с 63 до 66%).
Росстат говорит, что в 2020 году более половины россиян старше 55 лет свободно пользовались интернетом.
В основном старшее поколение общается в соцсетях, читает новости и изучает информацию о товарах и услугах. При этом только 10% из них покупают онлайн.
Из тех, кто всё же решается, 73% оплачивают покупки банковскими картами, а не через электронные кошельки. 46% проводят финансовые операции в сети — с ценными бумагами, денежными переводами и оплатой счетов.
Центр изучения пенсионной реформы в своём исследовании сделал вывод, что людям от 55 до 75 лет легко осваивать интернет. Почти 100% из них познакомились с компьютером ещё на рабочем месте.
Основные мотивы заходить в интернет для них — поиск источников дохода, интерес к новой информации и рекомендации родственников.
Растёт уровень компьютерной грамотности пенсионеров:

92% пожилых людей самостоятельно могут открывать файлы любого формата;
74% умеют копировать и сохранять информацию;
56% сами удаляют и устанавливают программы из сети;
43% умеют пользоваться текстовыми редакторами;
37% освоили электронную почту.
Возрастные пользователи ежедневно проводят в интернете от 3 до 6 часов. Многие предпочитают его телевизору.

Что на Западе
В США цифровая грамотность населения также растёт. Пользователи старше 65 лет могут самостоятельно:
установить блокировщик рекламы на свои компьютеры;
фильтровать поисковую выдачу, игнорируя спонсируемые результаты и рекламу;
удалять приложения, отнимающих много времени, например, игры;
удалять аккаунты с сервисов, которые собрали слишком много личных данных.

Мотивы использовать интернет у пожилых в США:

следить за текущими событиями;
управлять деньгами;
делать покупки;
искать интересующую информацию;
поддерживать связь с друзьями и семьей.

Участники исследования Nielsen Norman group положительно отзывались о появлении интернета в их жизни. Один 87-летний респондент сказал: «Выход в интернет заставил меня почувствовать себя намного более независимым».
С 2011 по 2016 год количество владельцев смартфонов среди людей старше 65 лет увеличилось в четыре раза.

Проблемы юзабилити для пожилых
1. Мелкий кегль. Отметим, что размер кегля зависит от гарнитуры. Некоторые из них сами по себе крупные, какие-то — поменьше. Например, Asos использует Futura PT. 14 кегль Futura PT выглядит как 10 кегль Roboto.
К слову, мелкие буквы в тексте отталкивают не только старшее поколение — подростки не любят их так же сильно. Причиной тому ранние проблемы со зрением из-за плохой осанки.
2. Низкая контрастность текста. Прежде, чем вы решите использовать светло-серый текст на белом фоне, посмотрите на себя в зеркало и спросите, зачем. Если вы пытаетесь уменьшить заметность одного элемента, чтобы сместить фокус на другие — есть способы лучше.
3. Иконки с непонятными значениями. Человеку без бэкграунда в цифровой среде потребуется время, чтобы понять, что всё это значит.
4. Отсутствие гибкости. В интерфейсе должно быть место для ошибок пользователей, особенно, когда речь о возрастной аудитории. Сайты и приложения, которые позволяют вводить данные только в одном формате, разочаровывают юзеров. Сюда же относится способность распознавать опечатки.
5. Плохой UX-копирайтинг. Сюда относятся сообщения об ошибках с непонятными формулировками и невнятный текст в навигации. Ещё одна проблема — незаметное размещение оповещения на экране среди множества других элементов интерфейса.

Рекомендации по дизайну
Используйте размер кегля от 14pt. Расстояние, на котором мы можем читать буквы, влияет на скорость чтения. Такой кегль позволит комфортно изучать информацию. Помните: если человеку нужно щуриться или наклоняться ближе, чтобы прочитать текст — он этого делать не станет.


Обеспечьте высокий контраст между текстом и фоном. Предпочтительно использовать чистый фон вместо текстурированного. Фон с паттерном мешает распознавать мелкие детали в тексте.
Когда информацию трудно расшифровать, читатели вынуждены выбирать: напрягать глаза или пропустить контент. Уже догадываетесь, какое решение они примут?
Расширение браузера Chrome Color Contrast Analyzer от NCSU покажет, какой фон подходит для наложения текста.
В Figma проверить коэффициент контрастности можно с помощью плагина Color Contrast Checker.
Контрастность — это отношение яркости элемента к яркости фона. Она измеряется в диапазоне от 1:1 (минимальная контрастность — белый текст на белом фоне) до 21:1 (максимальная контрастность — черный текст на белом фоне).

Требования к контрастности описаны в рекомендациях по доступности вебконтента (WCAG). В них предлагают уровни поддержки AAA, AA, AAA Large и AA Large.
AAA и AA — для небольших шрифтов (меньше 14pt для жирных и 18pt для обычных)

AAA Large и AA Large для заголовков (больше 14pt для жирных и 18pt для обычных).

Какие коэффициент контрастности рекомендуют

AAA — 7:1

AAA Large — 4,5:1

AA — 4,5:1

AA Large — 3:1

Поддержка AAA-стандарта нужна для людей с умеренно сниженным зрением, а АА-стандарта — для людей со зрением ниже среднего.

Чем проще шрифт — тем лучше. Избегайте гарнитур с декоративными элементами, засечками и шрифтов странной формы. Например, имитирующих почерк или готический стиль. Они ухудшают читаемость.

Симулятор плохого зрения
NoCoffee Vision Simulator можно использовать для имитации нарушений зрения, в том числе разных форм дальтонизма.

Что ещё учесть
уменьшите расстояние между последовательными элементами интерфейса. Например, полями формы. Убедитесь, что они находятся на расстоянии не менее 2 миллиметров друг от друга;
основные кнопки на сенсорных интерфейсах должны быть не менее 44×44 px;
элементы интерфейса, которые нужно щёлкать мышью, должны быть не менее 11 миллиметров по диагонали. Всегда делайте область нажатия больше самой кнопки или гиперссылки.
Что-то с памятью моей стало
Кратковременная, эпизодическая и рабочая память особенно уязвимы с возрастом. Это значит, что пожилым людям сложнее понимать сценарии взаимодействия в цифровых продуктах.
Перспективная память (воспоминание, что нужно сделать в будущем) также страдает.

Что делать
постепенно вводите функции продукта, чтобы предотвратить умственную перегрузку;
избегайте разделения задач на несколько экранов, если они требуют запоминания предыдущих действий;
во время длительных задач давайте чёткую обратную связь о прогрессе.
К слову, эти рекомендации подойдут и в работе с молодой аудиторией. Особенно, если она не очень лояльна к вашему проекту.

Дизайн иконок
Опытные пользователи узнают иконки дома, печати и увеличительного стекла для поиска. Вне этих примеров большинство значков неоднозначны из-за разного контекста в интерфейсах. Люди, которые только попали в цифровую среду, тем более ничего не поймут.
Чтобы подсказать значение иконки стоит внедрить текстовые метки. Они должны быть видны всегда, даже без участия юзера.


Особенно это важно для значков навигации. Не полагайтесь на наведение, чтобы показать пояснения.
Во-первых, на сенсорном экране такую механику будет сложно реализовать.

Во-вторых, человеку придётся приложить больше умственных и физических усилий, чтобы достигнуть цели. Как однажды сказал дизайнер и консультант по юзабилити Брюс Тоньяццини: «Слово стоит тысячи картинок».
1. Сохраняйте дизайн простым и схематичным. Меньше графических деталей — их всё равно не распознают в маленьком значке.
2. Используйте правило пяти секунд. Если вы тратите больше 5 секунд, чтобы придумать иконку — она не передаст суть.
3. Проверьте значки на узнаваемость: спросите людей, что они ожидают от взаимодействия с ними.
4. Проверьте значки на запоминаемость: посмотрите, вспомнит ли целевая аудитория их значение через две недели после контакта.

Сообщения об ошибке
У пожилых людей часто возникают проблемы с чтением сообщений об ошибках. Они не понимают формулировок, либо просто не знают причины сбоя. Здесь простота становится даже более важной, чем обычно.
Сообщение об ошибке должно включать:

1. Явное указание на то, что что-то пошло не так. Когда пользователи ошибаются и не получают обратной связи, они полностью теряются. Точно опишите проблему.
2. Понятный язык вместо отраслевых терминов вроде «произошла ошибка класса 2».
3. Вежливую фразу, которая не обвиняет пользователей и не подразумевает, что они глупы.
4. Конструктивный совет, как исправить проблему. Например, проверить опечатку, посмотреть рекомендации в файле или перезагрузить страницу.
Наиболее частое оповещение в интернете «404 not found» нарушает большинство этих рекомендаций. Лучше написать собственное сообщение об ошибке.

5. Не используйте только красный цвет для обозначения ошибок. Включайте дополнительные подсказки, которые могут видеть дальтоники.
6. Сохраните как можно больше работы пользователя. Позвольте человеку редактировать исходное действие, а не делать все заново. Если посетитель ввёл хоть какую-то информацию, даже без ошибки мы должны её использовать заново во всех доступных сценариях. Это часть принципа «пусть потеет машина».
7. Сократите работу по исправлению ошибки. Если возможно, угадывайте правильное действие и дайте пользователям выбрать его из небольшого списка исправлений. Например, вместо того, чтобы просто сказать «город и почтовый индекс не совпадают», дайте посетителю выбрать город, который соответствует введенному им почтовому индексу.
Выводы
Мы зачерпнули каплю в море, но даже эти рекомендации способны улучшить жизнь людям в интернете. Адаптируя интерфейс под пожилых, мы делаем его удобнее для всех.

Для тех, кто пролистал в самый низ:

используйте шрифт от 14 пунктов. Это порадует не только взрослое поколение, но и подростков;
старайтесь писать текст на «чистом» фоне и всегда проверяйте уровень контрастности;

избегайте шрифтов с необычным начертанием. Чем проще гарнитура — тем лучше;

избегайте разделения задач на несколько экранов, если они требуют запоминания предыдущих действий. Во время длительных задач давайте чёткую обратную связь о прогрессе;

делайте текстовые обозначения иконок — не заставляйте неопытных пользователей гадать;
в сообщении об ошибке дайте рекомендации, как её исправить.


Источник

Когнитивная перегрузка на экране вашего смартфона

Как иконки приложений борются за ваше внимания.
Недавний редизайн иконок приложений Google стал причиной дискуссии о будущем иконок цифровых продуктов.
Иконки приложений должны быть ярче и красочнее, насколько это возможно. Они практически прыгают на вас с экранов устройств. Компании не могут позволить, чтобы их продукты редко использовались или оставались незамеченными, что провоцирует жесткую конкуренцию за внимание пользователя.
Минимализм? Нет. Скевоморфизм? Нет, спасибо!
Было время, когда в моде были супер-минималистичные логотипы на основе шрифтов. Белая фигура на черном фоне часто говорила о роскоши и статусе. Но те времена прошли, и нас бомбардируют в попытках превзойти конкурентов.
Больше цветов!
Больше градиентов!
Всего побольше!

Читать статью: https://ux.pub/editorial/koghnitivnaia-pierieghruzka-na-ekranie-vashiegho-smartfona-3gk9

Мы отошли от плоского дизайна. В каком направлении мы двигаемся дальше?

Эволюция современных языков дизайна и что мы будем делать дальше.
Революция плоского дизайна, которая характеризовала большую часть 2010-х годов, вроде как закончилась. Проведя годы с радикально плоскими интерфейсами, которые полностью избегали имитации реальных объектов, мы начали замечать обратный процесс – языки дизайна, использующие метафоры реального мира. Сегодня наши интерфейсы по-прежнему обладают многими отличительными чертами плоского дизайна. По-прежнему делается упор на типографику, минимализм и контент, а не на лоск интерфейса. Однако мы также стали замечать повторное введение определенных концепций реального мира, прежде всего света, поскольку он связан с тенями и тем, как объекты взаимодействуют друг с другом в трехмерной плоскости.

Может показаться, что мы просто возвращаемся к скевоморфизму, но нужно признать – это скорее эволюция плоского дизайна, чем возвращение к скевоморфизму. Это можно увидеть по тому, как языки плоского дизайна развивались с течением времени и как они пришли к текущему состоянию.

Читать статью: https://ux.pub/editorial/my-otoshli-ot-ploskogho-dizaina-v-kakom-napravlienii-my-dvighaiemsia-dalshie-1f9

Про хороший и плохой дизайн для недизайнеров

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

Читать: https://habr.com/ru/company/arcadia/blog/525144/

Опросники в проектировании UI/UX и разработке продукта: чем они помогают

Как с помощью опросников протестировать визуальный дизайн (UI), построить информационную архитектуру, выявить важные функции продукта и замерить юзабилити — восемь кейсов с примерами.

По моим наблюдениям, опросники (survey) — сильно недооцененный инструмент для продуктовых исследований. При должном внимании и правильном подходе опросники дают много полезной информации. Зачастую они используются в паре с другими методами исследований, такими как юзабилити-тестирование.
Тема обширная, поэтому я попытался описать основные методики коротко и дать ссылки для более подробного изучения.
У части опросников есть собственные названия, для некоторых пришлось придумать самостоятельно. 😉
Будет полезно всем, кто задействован в продуктовой разработке.

Итак, поехали.

5-секундный тест + опросник

Для чего:
протестировать визуальный дизайн (UI);
сравнить различные варианты дизайна (A/B тестирование).
Такой тест позволяет узнать первое впечатление пользователя о дизайне: передает ли он ту эмоцию, которую закладывали при проектировании, доносит ли идею продукта и какая из версий дизайна справляется с этой задачей лучше.
Как работает
Покажите респондентам дизайн в течение 5 секунд, затем опросите их.

Это могут быть:

Открытые вопросы. Попросите пользователей объяснить, почему им нравится/не нравится дизайн, что продает компания, с чем ассоциируется продукт.
«Как вы думаете, о чем была эта страница?»
«Как вы считаете, что продает эта компания?»
«Какие элементы на странице привлекли ваше внимание?»
Открытый выбор слов. Попросите пользователей перечислить от 3 до 5 слов, которые описывают дизайн.
Закрытые вопросы с вариантами. Покажите пользователям список терминов и попросите выбрать слова, которые лучше всего подходят для описания дизайна.
«Выберите одну из эмоций, которой можно описать дизайн этой страницы:
• доверие;
• профессионализм;
• молодость и энергия;
• стабильность;
• технологичность».
Числовые рейтинги. Помогают понять, в какой степени дизайн проявляет специфические качества бренда или продукта.
«Оцените от 1-го до 5-ти, насколько сайт выглядит доверительно».
(Шкала от 1 до 5, где 1 — «совсем не доверяю», 5 — «полностью доверяю»).
Почитать подробнее о методе:

What is a 5-second user test and how can it help you in the design process?

How to Test Visual Design

Анализ важнейших задач

Для чего:
построить информационную архитектуру;
приоритезировать функции;
узнать, что придает продукту ценность;
выявить отличия в потребностях разных групп пользователей.
Технику Top Tasks Analysis придумал юзабилити-эксперт Джерри Макговерн, чтобы узнать какие задачи пользователь хочет выполнить больше всего.

Как работает
Пользователю дают длинный список задач, из которого он должен выбрать самые значимые для него, присвоив оценку от 1-го до 5-ти. Оставшиеся задачи остаются без оценок.
«Выберите из списка 5 самых важных для вас задач. Поставьте 5 баллов самой важной, 4 — следующей по важности и так далее до 1-го».
Общение с друзьями и коллегами [оценка]
Чтение последних новостей [оценка]
Покупки [оценка]
Просмотр видео [оценка]
Постинг статей в ленте [оценка]
...
Подсчитайте голоса за каждую задачу и разделите их на общее количество участников опроса. Отсортируйте их в порядке убывания и выразите в процентах.

Почитать подробнее о методе:

How to Conduct a Top Task Analysis

Модель Кано

Для чего:
приоритизировать функции;
узнать, что придает продукту ценность.
Модель, разработанная в 1980-х годах профессором Норияки Кано, позволяет сосредоточиться на самых важных для пользователя функциях продукта и понять, что является необязательным или даже лишним в нем.
Как работает
Как правило, опросники по модели Кано состоят только из двух вопросов, каждый из которых задается один раз для каждой функции или свойтсва:
«Как бы вы себя чувствовали, если бы продукт имел функцию X?»
«Как бы вы себя чувствовали, если бы продукт не имел функцию X?»
Для ответа на каждый из вопросов нужно выбрать один из предлагаемых вариантов:
«мне бы понравилось»;
«я ожидаю этого»;
«мне все равно»;
«мне бы это не понравилось, но я могу это перетерпеть»;
«мне бы это не понравилось, и я бы не использовал продукт из-за этого».

После анализа ответов функции попадают в одну из пяти категорий:

Обязательные. Необходимы по умолчанию, как тормоза или руль в машине. Улучшение таких атрибутов не приводит к росту удовлетворенности.
Линейные. Это как место в багажнике или гарантия от производителя. Чем лучше значения этих показателей, тем выше удовлетворенность пользователя.
Привлекательные. Например, доставка в течении 30 минут или тачскрин в первых iPhone. Не являются обязательными, но создают WOW-эффект и зачастую бывают неожиданными для пользователя. По мере привыкания пользователя переходят в разряд линейных.
Неважные. Никак не влияют на уровень удовлетворенности.
Нежелательные. Уменьшают уровень удовлетворенности.

Определение категории, в которую попадет та или иная функция продукта, зависит от уровня ее функциональности и той удовлетворенности, которую ощущают пользователи при наличии этого свойства в продукте.
Тема правильного составления и анализа опроса по модели Кано довольно обширная. Если она вам интересна, можете подробнее прочитать тут:
Объяснение модели Кано: анализ и примеры

The Complete Guide to the Kano Model

Индекс потребительской лояльности и его аналоги

Для чего:
измерить уровень удовлетворенности пользователей.

Индекс потребительской лояльности (Net Promoter Score или NPS) — один из самых популярных вариантов использования опросников. У него есть много альтернатив, например Customer Satisfaction (CSAT) и Customer Effort Score (CES).
Как работает
Замер NPS делается с помощью одного вопроса:

«Насколько вероятно, что вы порекомендуете [организацию/продукт X] другу или коллеге?»
Клиентов просят оценить свои ответы по шкале от 0 до 10.

В зависимости от ответа, пользователи делятся на 3 группы:

0–6: критики;
7–8: нейтралы;
9–10: сторонники.

Чтобы посчитать сам индекс, нужно взять процент «сторонников» от общего количества ответов и процент «критиков». И отнять второе значение от первого. Так вы получите ваш индекс потребительской лояльности.

Вы можете найти средние значения (benchmark) для показателя NPS и сравнить с оценкой вашего продукта. Обычно такие показатели предоставляют сервисы онлайн-опросников.

Но сравнивать себя с конкурентами — неблагодарная задача. Лучше всего NPS подходит для того, чтобы прослеживать его значения во времени. Например, после обновлений продукта. Такое сравнение подскажет, на правильном ли вы пути.


Обратная связь по отдельным функциям продукта

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

Как работает
Например, перед и после обновления функции вы задаете такой вопрос:

«Насколько просто было отправить сообщение в техподдержку?»

(Шкала от 1 до 5-ти, где 1 — «очень трудно», 5 — «очень просто»)

Затем сравниваете ответы.

Отбор респондентов

Для чего:
найти релевантных респондентов для исследований.

Если вы самостоятельно ищете респондентов для исследований, то, думаю, вы уже столкнулись с необходимостью их отбора (screening). На этом этапе опросники сильно упрощают процесс.
Как работает
Постройте опросник так, чтобы каждый последующий шаг «просеивал» респондентов. При этом не создавайте большое количество вопросов, чтобы не снижать конверсию в заполненный опросник.
Начинайте с общих вопросов и двигайтесь к более частным.

Представим, что вы ищете молодых людей, которые продавали свой автомобиль не позже чем 6 месяцев назад и процесс продажи у них занял от 3 до 6 месяцев. Тогда ваш скрининг-опросник может выглядеть так:
Ваш возраст:

до 18;
18–35 (проходит);
35–50;
50 и старше.
Продавали ли вы через наш сайт ваш автомобиль в течении прошлых 6 месяцев?
Да (проходит);
нет.
Сколько у вас занял весь процесс продажи?

Меньше месяца;
от 1 до 3 месяцев;
от 3 до 6 месяцев (проходит).
Опросник «Почему?»

Для чего:
увеличить конверсию в действие;
получить информацию для полноценного исследования, например, глубинных интервью.
При помощи опросника, который состоит всего из одного вопроса, можно узнать, почему пользователь не выполнил то или иное действие: не оформил покупку, не зарегистрировался на сайте, не подписался на рассылку. Ответы помогут сформулировать темы для обсуждения во время глубинных интервью.
Как работает
После определённых действий или бездействия пользователя задайте ему один вопрос: почему он не совершил нужное вам действие.
Важно спросить сразу после посещения, чтобы пользователь помнил, о чём идёт речь.

«Пожалуйста, скажите почему вы решили не покупать наш товар?»

«Я не уверен, что это, то что мне нужно».
«Я считаю его очень дорогим».
«Мне кажется, что он мне не нужен».
«Я не доверяю сайту».
«Мне нужно подумать».
«Я не нашёл информацию о продукте».
Немного подробнее о данном типе опросников можно почитать в книге Paul Boag «Click! How to Encourage Clicks Without Shady Trick».

Шкала юзабилити

Для чего:
измерить юзабилити;
быстро протестировать A/B варианты дизайна.
Шкала юзабилити или The System Usability Scale (SUS) — это быстрый и эффективный инструмент для измерения удобства и простоты использования вашего продукта.
Как работает
После каждого сеанса юзабилити-тестирования дайте пользователю заполнить анкету SUS.
Она состоит из 10-ти пунктов и 5-ти вариантов ответов (от «категорически согласны» до «категорически не согласны»).
«Я думаю, что хотел бы часто использовать этот продукт».
«Я нашел продукт неоправданно сложным».
«Я думал, что продукт прост в использовании».
«Я думаю, что для использования этого продукта мне понадобится поддержка технического специалиста».
«Я обнаружил, что различные функции в этом продукте были хорошо интегрированы».
«Я думал, что в этом продукте слишком много несоответствий».
«Я думаю, что большинство людей научилось бы использовать этот продукт очень быстро».
«Я нашел продукт очень громоздким для использования».
«Я чувствовал себя очень уверенно, используя продукт».
«Мне нужно было многому научиться, прежде чем я смог работать с продуктом».
Каждому ответу присваивается значение для расчета баллов SUS:

совершенно не согласен: 1 балл;
не согласен: 2 балла;
нейтральный: 3 балла;
согласен: 4 балла;
полностью согласен: 5 баллов.
Как подсчитать результаты, вы можете прочитать тут:

System Usability Scale (SUS)

The System Usability Scale & How It’s Used in UX

И в завершение парочка советов.

Сегментируйте
Распределяйте респондентов: новичков в продукте бесполезно спрашивать о продвинутых функциях.

Найдите удачное время
Опросник вырывает пользователя из потока. Поэтому будьте аккуратны. Не надоедайте всплывающими окнами. Спрашивайте после того, как пользователь выполнил действие и решил свою задачу.
Для разных типов опросников подходящее время будет разным. Индекс удовлетворенности может показать два разных результата, если одним пользователям предложить пройти опрос после получения какой-то «награды», а другим — после обращения в техподдержку.
Соблюдайте баланс между открытыми и закрытыми вопросами
Большое количество открытых вопросов — это большая работа по их обработке. К тому же их не особо любят пользователи. Они ленятся заполнять множество полей. В итоге вы получите мало заполненных опросников.
Используйте опросники в паре с другими методами исследований
Ответы пользователей внутри продукта не всегда показательны. Обычно в опросах принимает участие лишь та часть ваших пользователей, которые хотят поделиться своим мнением и готовы тратить на это время.
Поэтому опросники — лишь один из источников информации для принятия решений. Это эффективный инструмент, который дополняет другие методы исследований.

Источник

​​Плагин Figma, который автоматически генерирует темные темы

Продуктовый дизайнер их Yandex.Maps расскажет как генерировать темную тему с помощью плагина созданного его командой. Кроме того, вы узнаете, почему он использует семантические цветовые стили и почему вам тоже следует так делать.

Читать: https://ux.pub/editorial/plaghin-figma-kotoryi-avtomatichieski-ghienieriruiet-tiemnyie-tiemy-3g4d

​​Руководство по принципам моушн-дизайна

Движение оказывает огромное влияние на пользовательский опыт цифровых продуктов, но юзабилити пострадает, если элементы интерфейса не будут отражать основные принципы моушн-дизайна. В контексте интерфейсов, движение – это больше, чем просто украшение. Это убедительная сила, которая способствует улучшению продукта и расширяет коммуникационные возможности дизайна.
Наш мир – это мир движения. Даже в моменты покоя листья дрожат, а легкие расширяются. В сфере дизайна цифровых продуктов движение может показаться второй натурой, продолжением повседневной жизни, которое можно использовать без особых усилий. Если бы это было правдой.
Спросите любого, кто впервые создает анимированные элементы интерфейса. Часы усилий приносят любительские результаты. Такая простая вещь, как выдвигающаяся на экран карточка, выглядит нелепо. Но почему?
Теоретически заставить элементы интерфейса двигаться легко. Определите точки на заранее заданном пути, и программа создаст анимацию промежутков. На самом деле это не так. Инструменты и методы необходимы, но они базируются на принципах. Если движение направлено на повышение юзабилити цифровых продуктов, оно должно основываться на неизменных правилах поведения, применимых к бесконечному количеству вариантов использования.

Читать: https://ux.pub/editorial/rukovodstvo-po-printsipam-moushn-dizaina-3edi

О важности переработки систем, не адаптированных с точки зрения UX, или как съесть слона

Жил-был слон. Отличный такой слон, маленький и аккуратный. Он прекрасно справлялся со своими обязанностями: вовремя гулял, кушал, какал и радовал хозяина. Слон рос-рос и вырос в большого слона. Он все так же гулял, кушал и… даже радовал хозяина. Но что-то изменилось.

«Если вам кажется, что пора что-то менять – вам не кажется»

Изменения происходят всегда и, как правило, очень незаметно. Любая система изменчива, программные же продукты, как система, развиваются стремительно. И вот наступает тот момент, когда уже невозможно закрывать глаза на то, что пора что-то менять.

Возможными сигналами для начала работы над UX могут служить такие факторы как:

— с момента последнего анализа системы прошло больше 2-х лет;
— при начале вашей работы с новым проектом: с программным продуктом взаимодействуют одни и те же люди на протяжении продолжительного времени (особенно касается внутренних систем), часто анализ показывает массу не продуктивных действий, возведенных в статус «так надо, так принято»;
— отсутствие конкурентных продуктов на рынке может спровоцировать стагнацию проекта, необходим требовательный подход к собственному продукту;
— общее ощущение от продукта (такие сигналы очень важны, наше подсознание работает быстрее сознательной части).

С чего начать…

«И посмотрел хозяин на своего огромного слона и… не увидел ничего страшного. Ну слон, ну большой, ну 5 ног и хобот сбоку. Слон ведь свой, родной».

Отрицание

Очень сложно принять проблему. Особенно когда ее вроде и нет…
— «Главное, что все работает, считает правильно, ну отчет формируем 2 часа, да вывод его на экспорт минут 20 (ну там пока поля сформируешь сам…) Ну работает же!»
Так вот, НЕ РАБОТАЕТ. Каждая потерянная минута необязательных действий, это потеря ВАШИХ реальных денег, времени и нервов. Сейчас, когда рынок насыщен, никто не будет мириться с «хоботом справа».

Гнев

— «Серьезно? Ты хочешь сказать, что из-за того, что у слона хобот справа заказчики возьмут верблюда?»
— «Возьмут, верблюд красивый. Да он меньше и у него нет таких больших ушей. Зато хвост сзади и 4 ноги. А еще он быстро бегает!»

И вот теперь мы ищем виноватых…

Это время надо переждать.

Пока идет процесс поиска этих самых виноватых, мы готовим ответ на следующий вопрос – «Что делать?»

Мы, как UX, занимаемся сбором аналитики, болей, ошибок и подготовкой к следующему этапу.

Торг

— «Ну хорошо, давай перекрасим кнопочки…натянем шкурку…»
— «Этого недостаточно, нам надо убрать лишние ноги и научить слона ходить на 4-х. А еще хобот…»
— «Хобот не дам!»
— «Ну хотя бы по центру… давайте примерим?»

На этой стадии работы над проектом придется выступить как переговорщик и искуситель в одном лице. Мы раскачиваем лодку и примеряемся, какой объем возможно протолкнуть в этот заход.

Депрессия

Слон разобран и никогда не будет прежним. И вообще все не так. И ни конца ни края. Владельцу продукта тяжело это видеть, и мы его понимаем. Главное самим не подхватить общие настроения и четко двигаться к цели. На этой стадии очень важно выступить маяком энтузиазма и хладнокровия.

Принятие

— «Да, хобот спереди определенно лучше… как я сразу не понял. А давай еще лесенку сбоку? Чтоб пользователю не тянуться и легко садиться на слона? И коврик же поменяем? А еще на ночь можно фонарик включать!»
Мы прошли большой путь. И наш продукт тоже. Есть понимание того, что изменения необходимы. Мы готовы к этому и двигаемся вперед.

Статья, конечно, шуточная, но стадии, которые мы проходим во время работы над проектом абсолютно реальны. И совсем необязательно, что они идут в таком порядке: в любой момент мы можем упасть в депрессию или начать торговаться. Важно понимать, в каком процессе мы находимся и осознавать, что наши сиюминутные взлеты и падения — это естественные этапы в работе над большим и сложным проектом.

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

И тут наша очередь проходить через отрицание, гнев, торг, депрессию и принятие.

Я сталкивалась с тем, когда приглашенный UX-специалист игнорировал сигналы и реакции команды на вносимые изменения, не допускал обсуждений и вариантов решения, и это привело к уходу команды. Такой подход не допустим при работе с любыми проектами. Сложившаяся рабочая команда — это золото, и в погоне за результатом совершенно не обязательно раскидываться такими ресурсами.

При работе с изменениями мы выступаем как один организм, и умение слышать все стороны упростит этот непростой процесс.

Источник