Андрей Шапиро написал о линиях эволюции технических систем в применении к интерфейсам.
— В Теории решения изобретательских задач накопили много наблюдений за развитием технических систем и вывели законы развития;
— Один из них — закон повышения идеальности — тенденция к сокращению ресурсов, необходимых для реализации полезной функции. Например, очки → контактные линзы. Последние не требуют оправы и держатся за счёт силы поверхностного натяжения;
— Закон повышения свёрнутости системы — в системе уменьшается количество элементов, а количество функций сохраняется. Пример: совмещение адресной строки и панели табов в браузере;
— Зная законы развития, состав системы и текущее состояние её частей, можно представить, как их можно развивать;
— Развивать можно отдельные характеристики системы, например, информативность. Для повышения информативности формы к подписанным полям можно добавить примеры содержимого, подсказки по ограничениям, дополнительные состояния вроде результата валидации введённых данных;
— Зная, сколько ресурсов есть на реализацию формы, можно выбрать конкретный вариант по линии информативности, а также видеть возможности по развитию или деградации;
— Есть общие линии развития для любых технических систем и конкретные для специфических (см. пример общей линии дробления в применении к полю ввода);
— Конкретная линия развития для поля ввода даёт преимущество. Проектировщик может более системно и чётко подойти к поиску подходящего решения, а не оперировать неким смутно вспоминаемым набором, который встретил на личном опыте, в статьях и галереях.
#thinking
— В Теории решения изобретательских задач накопили много наблюдений за развитием технических систем и вывели законы развития;
— Один из них — закон повышения идеальности — тенденция к сокращению ресурсов, необходимых для реализации полезной функции. Например, очки → контактные линзы. Последние не требуют оправы и держатся за счёт силы поверхностного натяжения;
— Закон повышения свёрнутости системы — в системе уменьшается количество элементов, а количество функций сохраняется. Пример: совмещение адресной строки и панели табов в браузере;
— Зная законы развития, состав системы и текущее состояние её частей, можно представить, как их можно развивать;
— Развивать можно отдельные характеристики системы, например, информативность. Для повышения информативности формы к подписанным полям можно добавить примеры содержимого, подсказки по ограничениям, дополнительные состояния вроде результата валидации введённых данных;
— Зная, сколько ресурсов есть на реализацию формы, можно выбрать конкретный вариант по линии информативности, а также видеть возможности по развитию или деградации;
— Есть общие линии развития для любых технических систем и конкретные для специфических (см. пример общей линии дробления в применении к полю ввода);
— Конкретная линия развития для поля ввода даёт преимущество. Проектировщик может более системно и чётко подойти к поиску подходящего решения, а не оперировать неким смутно вспоминаемым набором, который встретил на личном опыте, в статьях и галереях.
#thinking
Блог ProductSense
Как грамотно проектировать сложные интерфейсы «человек—компьютер» с помощью инструмента «линии эволюции» (+ справочник)
Какой должна быть кнопка отправки формы? А как должна проектироваться сама форма — и почему именно так, а не иначе? Андрей Шапиро, арт-директор и партнер в Byndyusoft, рассказал, как разрабатывать …
Саадия Минхас написала о чекбоксах и переключателях.
— У чекбокса есть 3 состояния: выбран, не выбран, частично выбран (бывает у родительского чекбокса, у которого часть дочерних чекбоксов выбрана, а часть — нет);
— У переключателя 2 состояния: включено, выключено;
— При этом нажатие на переключатель — это одновременно и выбор опции и её включение или выключение. За включение или выключение опций, выбранных с помощью чекбоксов, обычно отвечает отдельный элемент управления (вроде кнопки сохранения);
— Используйте переключатель, если пользователь ожидает мгновенной реакции на свой выбор, результатом будет включение или выключение чего-либо, действие не нуждается в проверке или подтверждении;
— Используйте чекбоксы, если есть родительские и дочерние опции, которые можно выбирать произвольно;
— А также если надо выбрать между опциями «да» или «нет» (согласие пользователя с условиями предоставления услуг).
In English. #checkbox #toggle
— У чекбокса есть 3 состояния: выбран, не выбран, частично выбран (бывает у родительского чекбокса, у которого часть дочерних чекбоксов выбрана, а часть — нет);
— У переключателя 2 состояния: включено, выключено;
— При этом нажатие на переключатель — это одновременно и выбор опции и её включение или выключение. За включение или выключение опций, выбранных с помощью чекбоксов, обычно отвечает отдельный элемент управления (вроде кнопки сохранения);
— Используйте переключатель, если пользователь ожидает мгновенной реакции на свой выбор, результатом будет включение или выключение чего-либо, действие не нуждается в проверке или подтверждении;
— Используйте чекбоксы, если есть родительские и дочерние опции, которые можно выбирать произвольно;
— А также если надо выбрать между опциями «да» или «нет» (согласие пользователя с условиями предоставления услуг).
In English. #checkbox #toggle
vc.ru
Чекбокс или переключатель: что выбрать UX-дизайнеру при создании форм выбора — Дизайн на vc.ru
Перевод статьи UX-дизайнера Садии Минхас.
Лиша Дай написала, как стать синьором-дизайнером.
— Наблюдайте за коллегами и учитесь у них. У них могут быть разные сильные стороны. Если вы единственный дизайнер, учитесь у коллег с другими специальностями;
— Не просто выполняйте поставленные задачи, а сначала думайте над тем, почему нужно сделать именно это, какой контекст, кто стейкхолдеры, как измерить успех и так далее;
— Анализируйте свои старые проекты: как вы могли бы их улучшить сейчас с текущими знаниями и навыками;
— Просите у коллег обратную связь и не воспринимайте в штыки негативные отзывы, чтобы видеть точки роста. Положительные отзывы помогут узнать ваши сильные стороны, а также будут приободрять в трудные моменты;
— Анализируйте прошедшие события и ситуации на работе каждый день, раз в месяц (с ближайшими коллегами), раз в полгода (с большим числом коллег). Обсуждайте, что сработало, что нет, ищите, что можно улучшить (в общем, ретроспектива).
In English. #career
— Наблюдайте за коллегами и учитесь у них. У них могут быть разные сильные стороны. Если вы единственный дизайнер, учитесь у коллег с другими специальностями;
— Не просто выполняйте поставленные задачи, а сначала думайте над тем, почему нужно сделать именно это, какой контекст, кто стейкхолдеры, как измерить успех и так далее;
— Анализируйте свои старые проекты: как вы могли бы их улучшить сейчас с текущими знаниями и навыками;
— Просите у коллег обратную связь и не воспринимайте в штыки негативные отзывы, чтобы видеть точки роста. Положительные отзывы помогут узнать ваши сильные стороны, а также будут приободрять в трудные моменты;
— Анализируйте прошедшие события и ситуации на работе каждый день, раз в месяц (с ближайшими коллегами), раз в полгода (с большим числом коллег). Обсуждайте, что сработало, что нет, ищите, что можно улучшить (в общем, ретроспектива).
In English. #career
DEADSIGN
5 практик, которые помогут стать senior-дизайнером - DEADSIGN
Финский продуктовый дизайнер Lisha Dai при помощи комиксов делится приёмами, которые помогли ей вырасти в профессии дизайнера. Пригодится тем, кто жаждет роста, но он всё никак не происходит. Читать около 8 минут.
Forwarded from Изюм
This media is not supported in your browser
VIEW IN TELEGRAM
Маскот Вольта благодарит за нестандартные чаевые.
Аарон Джеймс написал, как стать синьором-дизайнером с помощью карьерной лестницы.
— Ожидания от дизайнеров разного уровня в разных компаниях могут отличаться. У зрелых компаний они задокументированы и доступны. Чем конкретнее ожидания, тем проще составить карьерный план;
— Если карьерная лестница не описана, это не всегда плохо: можно лидировать и пропускать уровни, можно подготовить её описание для всей компании. Её могут не обозначать специально, чтобы не провоцировать конкуренцию, отказы от эффективной работы ради более высокой должности. Если лестницы нет, тесно работайте со своим менеджером;
— В разных компаниях выделяют разные уровни продуктовых дизайнеров. Но чаще всего это junior, middle, senior, lead, principal. На последние 2 уровня дизайнер переходит при необходимости и на ограниченное время в рамках конкретного проекта или компании;
— Требования к навыкам на конкретных уровнях помогают прояснить обязанности, ожидания и ценные для компании качества, оценить кандидатов, составить карьерный план;
— Нельзя быть сильным во всём;
— Ключевые различия между джуниором и синьором: масштабы проектов, радиус влияния (lead и principal влияют на всю компанию и индустрию в целом), способность разделять сигнал и шум в обратной связи, способность двигаться быстро и извлекать пользу из совершённых ошибок, уровень неопределённости в задачах, самостоятельность;
— Чтобы создать карьерный план, оцените свой текущий уровень (самостоятельно, 360° feedback), задайте практические цели, которые помогут прокачать навыки, необходимые для следующего уровня;
— Чтобы не перегрузить себя, лучше прокачивать навыки по очереди, начиная с самого значимого;
— Оценивайте прогресс каждые 3 месяца. Для повышения уровня может потребоваться год и более;
— Если застопорились, можно обновить свой план, найти новый проект, новую команду, новую компанию или сменить специальность.
In English. #career
— Ожидания от дизайнеров разного уровня в разных компаниях могут отличаться. У зрелых компаний они задокументированы и доступны. Чем конкретнее ожидания, тем проще составить карьерный план;
— Если карьерная лестница не описана, это не всегда плохо: можно лидировать и пропускать уровни, можно подготовить её описание для всей компании. Её могут не обозначать специально, чтобы не провоцировать конкуренцию, отказы от эффективной работы ради более высокой должности. Если лестницы нет, тесно работайте со своим менеджером;
— В разных компаниях выделяют разные уровни продуктовых дизайнеров. Но чаще всего это junior, middle, senior, lead, principal. На последние 2 уровня дизайнер переходит при необходимости и на ограниченное время в рамках конкретного проекта или компании;
— Требования к навыкам на конкретных уровнях помогают прояснить обязанности, ожидания и ценные для компании качества, оценить кандидатов, составить карьерный план;
— Нельзя быть сильным во всём;
— Ключевые различия между джуниором и синьором: масштабы проектов, радиус влияния (lead и principal влияют на всю компанию и индустрию в целом), способность разделять сигнал и шум в обратной связи, способность двигаться быстро и извлекать пользу из совершённых ошибок, уровень неопределённости в задачах, самостоятельность;
— Чтобы создать карьерный план, оцените свой текущий уровень (самостоятельно, 360° feedback), задайте практические цели, которые помогут прокачать навыки, необходимые для следующего уровня;
— Чтобы не перегрузить себя, лучше прокачивать навыки по очереди, начиная с самого значимого;
— Оценивайте прогресс каждые 3 месяца. Для повышения уровня может потребоваться год и более;
— Если застопорились, можно обновить свой план, найти новый проект, новую команду, новую компанию или сменить специальность.
In English. #career
UXPUB 🇺🇦 Дизайн-спільнота
Руководство, как стать продуктовым Senior-дизайнером
Узнайте, как работают карьерные лестницы и как составить карьерный план, чтобы получить повышение
Даниэль Виленчук написал о Net Promoter Score и ошибках при сборе этой метрики.
— NPS — индекс потребительской лояльности. Клиент отвечает на вопрос «Насколько вероятно, что вы посоветуете нашу компанию друзьям или коллегам?» оценкой от 0 до 10;
— Ответы с оценками от 7 до 8 отбрасывают, а из числа оставшихся позитивных оценок вычитают количество негативных (от 0 до 6);
— Формулировка вопроса важна. Лучше использовать классическую «How likely is it that you would recommend this company to a friend or colleague?» и её перевод, чтобы не манипулировать ответами или случайно не замерить какой-то другой показатель;
— Шкала оценок должна быть от 0 до 10 (не от 1 до 10 и не от 1 до 5). Не стоит менять цифры на графические элементы вроде смайликов, в них сложнее ориентироваться;
— Лучше располагать их в один ряд. Воспринимать 2 ряда сложнее, часть ответов будет случайной, что губительно на небольших выборках;
— Задавайте дополнительный открытый вопрос вроде «Расскажите, почему вы поставили нам такую оценку?». Здесь можно экспериментировать с призывом, так как стандартные вопросы людям уже надоели;
— Не концентрируйтесь на критиках. Пробуйте связаться и с теми, кто поставил средние и высокие оценки. В общении с ними тоже можно найти инсайты. Плюс, 20–30% нейтралов уходят к конкурентам в течение полугода, попробуйте их разговорить;
— Не стоит замерять отдельные участки взаимодействия клиента с компанией. Дайте ему «помариноваться» в ваших процессах. Хороший срок — 10 дней после покупки, начала использования, доставки и 30 дней после установки приложения. Но если продаёте услугу или впечатление, лучше спрашивать сразу, пока впечатления свежи;
— Оценку одного и того же пользователя стоит перезамерять со временем.
#metrics
— NPS — индекс потребительской лояльности. Клиент отвечает на вопрос «Насколько вероятно, что вы посоветуете нашу компанию друзьям или коллегам?» оценкой от 0 до 10;
— Ответы с оценками от 7 до 8 отбрасывают, а из числа оставшихся позитивных оценок вычитают количество негативных (от 0 до 6);
— Формулировка вопроса важна. Лучше использовать классическую «How likely is it that you would recommend this company to a friend or colleague?» и её перевод, чтобы не манипулировать ответами или случайно не замерить какой-то другой показатель;
— Шкала оценок должна быть от 0 до 10 (не от 1 до 10 и не от 1 до 5). Не стоит менять цифры на графические элементы вроде смайликов, в них сложнее ориентироваться;
— Лучше располагать их в один ряд. Воспринимать 2 ряда сложнее, часть ответов будет случайной, что губительно на небольших выборках;
— Задавайте дополнительный открытый вопрос вроде «Расскажите, почему вы поставили нам такую оценку?». Здесь можно экспериментировать с призывом, так как стандартные вопросы людям уже надоели;
— Не концентрируйтесь на критиках. Пробуйте связаться и с теми, кто поставил средние и высокие оценки. В общении с ними тоже можно найти инсайты. Плюс, 20–30% нейтралов уходят к конкурентам в течение полугода, попробуйте их разговорить;
— Не стоит замерять отдельные участки взаимодействия клиента с компанией. Дайте ему «помариноваться» в ваших процессах. Хороший срок — 10 дней после покупки, начала использования, доставки и 30 дней после установки приложения. Но если продаёте услугу или впечатление, лучше спрашивать сразу, пока впечатления свежи;
— Оценку одного и того же пользователя стоит перезамерять со временем.
#metrics
blog.uxfeedback.ru
UXFb - Основные ошибки при измерении NPS
Суть любой методологии в том, что она существует в определённых рамках. Эти рамки появились неспроста – методологию протестировали сотни, тысячи раз, отбросили всё ненужное и оставили только то, что проверено и работает. Такого же подхода мы придерживаемся…
Евгений Трифонов об интерфейсах для продвинутых пользователей.
— Продвинутые пользователи (power users) стремятся использовать инструменты максимально эффективно;
— Пользователей мобильных устройств стало больше десктопных, сервисы стали ориентироваться на них, что привело к ухудшению десктопного UX. Некоторые сервисы вообще существуют только в виде мобильных приложений;
— Перемещение данных в облака лишает контроля над ними: стриминг может удалить любой альбом, не даёт возможности выбрать подходящий проигрыватель;
— Не всеми сервисами можно управлять клавиатурой и с помощью горячих клавиш (даже просто переключаться между полями клавишей Tab не всегда получается);
— В некоторых случаях ресурсы на такие доработки есть, проблема в том, что об этом просто не подумали. То есть надо просто тестировать сервисы с участием продвинутых пользователей;
— В этой функциональности нет большой социальной пользы, но разработчики часто сами являются продвинутыми пользователями и понимают её ценность. Это может сподвигнуть их к внедрению улучшений силами разработчиков без больших вложений ресурсов.
#accessibility #power_user
— Продвинутые пользователи (power users) стремятся использовать инструменты максимально эффективно;
— Пользователей мобильных устройств стало больше десктопных, сервисы стали ориентироваться на них, что привело к ухудшению десктопного UX. Некоторые сервисы вообще существуют только в виде мобильных приложений;
— Перемещение данных в облака лишает контроля над ними: стриминг может удалить любой альбом, не даёт возможности выбрать подходящий проигрыватель;
— Не всеми сервисами можно управлять клавиатурой и с помощью горячих клавиш (даже просто переключаться между полями клавишей Tab не всегда получается);
— В некоторых случаях ресурсы на такие доработки есть, проблема в том, что об этом просто не подумали. То есть надо просто тестировать сервисы с участием продвинутых пользователей;
— В этой функциональности нет большой социальной пользы, но разработчики часто сами являются продвинутыми пользователями и понимают её ценность. Это может сподвигнуть их к внедрению улучшений силами разработчиков без больших вложений ресурсов.
#accessibility #power_user
Хабр
Как прогресс ухудшил жизнь продвинутых пользователей (и как это исправить)
Неизбежный xkcd Я не люблю нытьё «раньше трава была зеленее» и в целом рад техническому прогрессу. Но считаю, что вместе с развитием компьютеров произошли и некоторые перемены, которые ухудшили жизнь...
Опубликованы видео с Дизайн-просмотра:
1. Леонид Фейгин, DDVB — Правильно ли поступать правильно
2. Олег Баринбойм, TutkovBudkov — Как тёмные времена сделали нас сплочённее
3. Евгений Яровой, Pragmatica — Новые студии дизайна: реформы или уныние
4. Максим Галеев, Газпромбанк — Как поменять отношение людей к дизайну
5. Елена Шанович, телеканал СТС — Видеть сердцем
6. Митя Осадчук — Нерешённые загадки дизайнеров и человечества
7. Сергей Гуров — Дизайн как точка зрения на всё
8. Миша Пименова, Mish — 10 советов самой себе в начале карьеры
9. Александра Королькова, Paratype — Буквы не то, чем кажутся
10. Вадим Гранич, онлайн-школа Granich — Осознанный дизайнер
11. Данила Шорох, Moscow City — Адаптация — путь к выживанию
12. Макс Авдеев, Max — Как продать на до**я
1. Леонид Фейгин, DDVB — Правильно ли поступать правильно
2. Олег Баринбойм, TutkovBudkov — Как тёмные времена сделали нас сплочённее
3. Евгений Яровой, Pragmatica — Новые студии дизайна: реформы или уныние
4. Максим Галеев, Газпромбанк — Как поменять отношение людей к дизайну
5. Елена Шанович, телеканал СТС — Видеть сердцем
6. Митя Осадчук — Нерешённые загадки дизайнеров и человечества
7. Сергей Гуров — Дизайн как точка зрения на всё
8. Миша Пименова, Mish — 10 советов самой себе в начале карьеры
9. Александра Королькова, Paratype — Буквы не то, чем кажутся
10. Вадим Гранич, онлайн-школа Granich — Осознанный дизайнер
11. Данила Шорох, Moscow City — Адаптация — путь к выживанию
12. Макс Авдеев, Max — Как продать на до**я
YouTube
Правильно ли поступать правильно? | Леонид Фейгин | Prosmotr
Каждый день мы принимаем решения: что приготовить на ужин, как ответить заказчику, поехать на природу с друзьями или пойти на премьеру фильма. Нам кажется, что все эти решения — спонтанны, но на самом деле на принятие каждого из них влияют множество факторов:…
Эдвард Скотт написал о навигации по функциям личного кабинета.
— 81% интернет-магазинов, исследованных Baymard Institute, для навигации по функциями личного кабинета использует большое количество текстовых ссылок (в том числе разделённых на блоки);
— Такой объём текста пугает пользователей, не позволяет быстро находить нужные функции;
— Чтобы улучшить сканируемость страницы, каждый блок ссылок можно дополнить иконкой (Staples) или небольшой иллюстрацией (Microsoft). Это меняет пользовательское поведение: сначала они сканируют страницу в поисках подходящей иконки, а затем читают текстовую подпись, чтобы удостовериться, что это нужная им функция;
— Не стоит оставлять одни иконки без текстовых подписей, так как не все метафоры можно понять однозначно;
— Также не стоит совмещать на одной странице блоки с иконками и без (Amazon), так как пользователи будут игнорировать последние.
In English. #ecommerce #navigation
— 81% интернет-магазинов, исследованных Baymard Institute, для навигации по функциями личного кабинета использует большое количество текстовых ссылок (в том числе разделённых на блоки);
— Такой объём текста пугает пользователей, не позволяет быстро находить нужные функции;
— Чтобы улучшить сканируемость страницы, каждый блок ссылок можно дополнить иконкой (Staples) или небольшой иллюстрацией (Microsoft). Это меняет пользовательское поведение: сначала они сканируют страницу в поисках подходящей иконки, а затем читают текстовую подпись, чтобы удостовериться, что это нужная им функция;
— Не стоит оставлять одни иконки без текстовых подписей, так как не все метафоры можно понять однозначно;
— Также не стоит совмещать на одной странице блоки с иконками и без (Amazon), так как пользователи будут игнорировать последние.
In English. #ecommerce #navigation
www.uprock.ru
Настройки аккаунта: как спроектировать эту страницу правильно — читайте на UPROCK
Страница настройки аккаунтов — та самая страница, к которой пользователь обращается только при наличии конкретной цели. Например, изменить адрес доставки или карту оплаты.: читайте полезные статьи о дизайне в блоге UPROCK
Андрей Шапиро перевёл первоосновы проектирования взаимодействия Брюса Тоньяцини.
— Работоспособные интерфейсы визуально ясны, прощают ошибки и дают пользователям ощущение контроля. Пользователи легко могут ознакомиться с возможностями системы, понять, как достичь своих целей и работать;
— Они не посвящают пользователя в то, что у них под капотом, заботливо и непрерывно сохраняют результаты труда. При этом человек может в любой момент отменить любое действие;
— Они выполняют максимум работы, запрашивая у пользователя минимум информации.
При оценке работоспособности системы смотрите шире машинной эффективности. Что быстрее: нагреть воду в микроволновой печи за 1 минуту 10 секунд или за 1 минуту 11 секунд? С точки зрения микроволновки — за 1:10. С точки зрения пользователя — за 1:11, так как с помощью кнопок на печи установить таймер на 1:11 немного проще, чем на 1:10 (найти кнопку 1, дважды нажать на неё, найти кнопку 0, нажать на неё).
#principles
— Работоспособные интерфейсы визуально ясны, прощают ошибки и дают пользователям ощущение контроля. Пользователи легко могут ознакомиться с возможностями системы, понять, как достичь своих целей и работать;
— Они не посвящают пользователя в то, что у них под капотом, заботливо и непрерывно сохраняют результаты труда. При этом человек может в любой момент отменить любое действие;
— Они выполняют максимум работы, запрашивая у пользователя минимум информации.
При оценке работоспособности системы смотрите шире машинной эффективности. Что быстрее: нагреть воду в микроволновой печи за 1 минуту 10 секунд или за 1 минуту 11 секунд? С точки зрения микроволновки — за 1:10. С точки зрения пользователя — за 1:11, так как с помощью кнопок на печи установить таймер на 1:11 немного проще, чем на 1:10 (найти кнопку 1, дважды нажать на неё, найти кнопку 0, нажать на неё).
#principles
Лена Бородина написала о методике тестирования 5 Second Test.
— Методика подойдёт, если надо оценить только восприятие дизайна (а не всего опыта взаимодействия), есть только стилеобразующие экраны и нет времени на тестирование методиками нейромаркетинга;
— Респондент смотрит на макет 5–10 секунд, а затем оценивает и описывает внешний вид продукта, выбирая прилагательные из списка или подбирая их самостоятельно;
— Если респондент сам подбирает прилагательные, их набор ограничен словарным запасом, но есть возможность услышать неожиданные варианты;
— Удалённо провести тест можно в сервисах UsabilityHub и Five Second Tests;
— Данные респондентами характеристики можно разделить на положительные, отрицательные и нейтральные и понять, как они восприняли дизайн в целом;
— Также можно оценить частоту использования разных прилагательных, подумать о причинах и доработать макеты.
#user_testing
— Методика подойдёт, если надо оценить только восприятие дизайна (а не всего опыта взаимодействия), есть только стилеобразующие экраны и нет времени на тестирование методиками нейромаркетинга;
— Респондент смотрит на макет 5–10 секунд, а затем оценивает и описывает внешний вид продукта, выбирая прилагательные из списка или подбирая их самостоятельно;
— Если респондент сам подбирает прилагательные, их набор ограничен словарным запасом, но есть возможность услышать неожиданные варианты;
— Удалённо провести тест можно в сервисах UsabilityHub и Five Second Tests;
— Данные респондентами характеристики можно разделить на положительные, отрицательные и нейтральные и понять, как они восприняли дизайн в целом;
— Также можно оценить частоту использования разных прилагательных, подумать о причинах и доработать макеты.
#user_testing
Барт Гиссенс написал, почему курсор в операционных системах наклонён на 45°.
— В демо Дугласа Энгельбарта курсор был в виде стрелки вверх (кстати, посмотрите его The Mother of All Demos);
— Графический интерфейс операционной системы впервые реализовали в Xerox PARC;
— Из-за низкого разрешения экранов того времени не получалось создать пиксельный вертикальный курсор нормального размера. Поэтому решили его повернуть, чтобы одна грань была вертикальной, а другая — наклонённой под 45°.
In English. #icon
— В демо Дугласа Энгельбарта курсор был в виде стрелки вверх (кстати, посмотрите его The Mother of All Demos);
— Графический интерфейс операционной системы впервые реализовали в Xerox PARC;
— Из-за низкого разрешения экранов того времени не получалось создать пиксельный вертикальный курсор нормального размера. Поэтому решили его повернуть, чтобы одна грань была вертикальной, а другая — наклонённой под 45°.
In English. #icon
Константин Полуянов написал о процессе проектирования интерфейса: как организовать информацию по задаче, чтобы она не вызывала ступор, как поэтапно детализировать макеты и не тонуть среди множества вариантов реализации.
— На старте проекта дизайнер перегружен информацией. Надо раскладывать её по кучкам в разные артефакты;
— Impact Mapping — фиксация целей, проверка измеримости, необходимости и возможности достижения каждой отдельной цели;
— Customer Journey Mapping — детальное описание процессов, проработка точек контакта на разных информационных уровнях;
— Event Storming — инвентаризация пользовательских действий, экранов для вывода информации и взаимодействующих систем через разметку процесса ключевыми событиями;
— User Story Mapping — формализация функциональных требований;
— Журнал проектирования — структурированное хранение и контроль входящей информации;
— Непонимание всего пользовательского пути мешает учесть все детали, приходится возвращаться и переделывать одни и те же макеты. Помогает Breadboards — выписывание названий экранов и доступных на них элементов взаимодействия. Важно связывать экраны с пользовательскими историями;
— Иногда надо пойти глубже и представить, как будут выглядеть макеты из дальней части пути. Fat Marker Sketches — изображение макетов толстым маркером без высокой детализации;
— Чтобы от возможных вариантов интерфейсных решений голова не шла кругом, стоит придерживаться алгоритмов создания макета. Например, подход Epicenter Design — в первую очередь размещать на макете его основную ценность. Или алгоритм Игоря Штанга «Содержание → Структура → Конструкция → Стиль»;
— Чтобы UI был пригоден для реальной эксплуатации, надо стремиться к максимальной полноте и точности отображаемых данных. Данные выгодно привязывать к пользовательским историям (и как следствие — определённым моментам времени);
— Удобно сохранять часто используемые примеры данных: названия регионов, ИНН, ОГРН и прочие;
— Реальные данные могут сильно повлиять на предлагаемый интерфейс.
#process
— На старте проекта дизайнер перегружен информацией. Надо раскладывать её по кучкам в разные артефакты;
— Impact Mapping — фиксация целей, проверка измеримости, необходимости и возможности достижения каждой отдельной цели;
— Customer Journey Mapping — детальное описание процессов, проработка точек контакта на разных информационных уровнях;
— Event Storming — инвентаризация пользовательских действий, экранов для вывода информации и взаимодействующих систем через разметку процесса ключевыми событиями;
— User Story Mapping — формализация функциональных требований;
— Журнал проектирования — структурированное хранение и контроль входящей информации;
— Непонимание всего пользовательского пути мешает учесть все детали, приходится возвращаться и переделывать одни и те же макеты. Помогает Breadboards — выписывание названий экранов и доступных на них элементов взаимодействия. Важно связывать экраны с пользовательскими историями;
— Иногда надо пойти глубже и представить, как будут выглядеть макеты из дальней части пути. Fat Marker Sketches — изображение макетов толстым маркером без высокой детализации;
— Чтобы от возможных вариантов интерфейсных решений голова не шла кругом, стоит придерживаться алгоритмов создания макета. Например, подход Epicenter Design — в первую очередь размещать на макете его основную ценность. Или алгоритм Игоря Штанга «Содержание → Структура → Конструкция → Стиль»;
— Чтобы UI был пригоден для реальной эксплуатации, надо стремиться к максимальной полноте и точности отображаемых данных. Данные выгодно привязывать к пользовательским историям (и как следствие — определённым моментам времени);
— Удобно сохранять часто используемые примеры данных: названия регионов, ИНН, ОГРН и прочие;
— Реальные данные могут сильно повлиять на предлагаемый интерфейс.
#process
Хабр
Работа с требованиями и данными при проектировании интерфейсов
Данная статья — короткий ликбез о процессе проектирования интерфейсов, не включая этап реализации финальных макетов. Что в него входит и почему все происходит именно в такой последовательности. О том,...
В Antro написали о лучших практиках входа и регистрации в интернет-магазинах.
— Пользователи входят не только для того, чтобы что-то купить. Они могут проверять статус заказа, искать сделанную ранее покупку, чтобы порекомендовать её и так далее;
— Располагайте кнопку входа в правом верхнем углу страницы;
— При наведении на неё курсора можно рассказывать о преимуществах личного кабинета;
— Показывайте, что пользователь авторизован. СберМегаМаркет отображает только количество баллов, Озон — имя пользователя, Яндекс Маркет — фото. Это удобно, если одним устройством пользуются несколько человек;
— Совмещайте вход и регистрацию;
— Не давайте в одно и то же поле вводить номер телефона, логин и адрес электронной почты. Такое поле нельзя автоматически заполнить, не получится установить подходящий тип клавиатуры для мобильных, нельзя использовать маски, подсказки и сообщения об ошибках будут громоздкими;
— Для входа отправляйте код — вместо входа по паролю. 78% пользователей запрашивают восстановление пароля в течение 90 дней;
— Не деактивируйте кнопки, если какие-то поля не заполнены. Не все люди знают, что в вебе так бывает (в офлайне кнопки обычно не перестают нажиматься, даже если нажатие ни к чему не приводит). Лучше при нажатии отображайте сообщения об ошибках для некорректно заполненных полей;
— Предлагайте несколько способов входа и регистрации. Если телефон разряжен или сейчас стоит другая симкарта, пользователю может быть удобен вход через электронную почту;
— Маркируйте поле для автозаполнения, чтобы можно было подставить номер телефона или имейл;
— Давайте очищать поле одним нажатием.
#sign_up #log_in #ecommerce
— Пользователи входят не только для того, чтобы что-то купить. Они могут проверять статус заказа, искать сделанную ранее покупку, чтобы порекомендовать её и так далее;
— Располагайте кнопку входа в правом верхнем углу страницы;
— При наведении на неё курсора можно рассказывать о преимуществах личного кабинета;
— Показывайте, что пользователь авторизован. СберМегаМаркет отображает только количество баллов, Озон — имя пользователя, Яндекс Маркет — фото. Это удобно, если одним устройством пользуются несколько человек;
— Совмещайте вход и регистрацию;
— Не давайте в одно и то же поле вводить номер телефона, логин и адрес электронной почты. Такое поле нельзя автоматически заполнить, не получится установить подходящий тип клавиатуры для мобильных, нельзя использовать маски, подсказки и сообщения об ошибках будут громоздкими;
— Для входа отправляйте код — вместо входа по паролю. 78% пользователей запрашивают восстановление пароля в течение 90 дней;
— Не деактивируйте кнопки, если какие-то поля не заполнены. Не все люди знают, что в вебе так бывает (в офлайне кнопки обычно не перестают нажиматься, даже если нажатие ни к чему не приводит). Лучше при нажатии отображайте сообщения об ошибках для некорректно заполненных полей;
— Предлагайте несколько способов входа и регистрации. Если телефон разряжен или сейчас стоит другая симкарта, пользователю может быть удобен вход через электронную почту;
— Маркируйте поле для автозаполнения, чтобы можно было подставить номер телефона или имейл;
— Давайте очищать поле одним нажатием.
#sign_up #log_in #ecommerce
vc.ru
Как не потерять покупателя в начале пути. Разобрали вход и регистрацию в интернет-магазинах — Маркетинг на vc.ru
Чтобы клиенты покупали, интерфейс должен помогать этому на всех этапах. Мы в Antro проанализировали авторизацию AliExpress, OZON, Wildberries, СберМегаМаркет и Яндекс. Маркет: выделили лучшие практики и разобрали ошибки.
Даша Почекуева написала об особенностях дизайна в телемедицине и снижении средней длительности консультаций.
— Частые кейсы: консультация без осмотра, второе мнение (есть сомнения в диагнозе после очного приёма), совет о коронавирусе, нет возможности прийти на очный приём;
— Врач в телемедицине не может поставить диагноз, а может только предположить в формате «На основании представленной информации можно предположить стоматит»;
— Всё конфиденциально. Дизайнеру недоступны материалы консультаций, статистика диагнозов и так далее. Можно узнать количество сообщений и фото, но не их содержание;
— Остаются глубинки, опросы, анализ Яндекс Метрики;
— Сервис должен помогать врачу принимать пациентов быстрее, но это не может быть целью. Цель: сократить время настолько, насколько возможно без потери качества;
— Метрики: средняя длительность консультации, скорость написания заключения (обычно происходит после консультации), удовлетворённость врача (без врачей не будет сервиса);
— Добавили возможность подстраивать соотношение областей с чатом и формой заключения;
— Внедрили в чат шаблоны. Простые: приветствие, прощание, вопрос об удобном формате консультации. Сложные: рекомендации пациентам. Все шаблоны врач может переделать под себя;
— Сбор анамнеза через бота, пока пациент ждёт очереди, не взлетел. Пациенты проходили его редко, не всегда успевали ответить на все вопросы;
— Средняя длительность консультации уменьшилась на 8%: 26,45 → 24,65 минут. Средняя оценка пациентов выросла;
— Добавили автоматические рекомендации пациентам и направления на анализы на основе диагноза. Форма заключения отслеживает рекомендации неэффективных препаратов вроде арбидола;
— Среднее время, в течение которого пациент получает заключение: 353 → 103 минуты. Почти 77% отдают его в течение часа;
— Удовлетворённость врачей можно отслеживать через встречи с медицинским блоком, опросы, развёрнутую обратную связь по работе продукта (минимум раз в квартал);
— По важным фичам можно проводить тесты и глубинки;
— Средняя оценка врачей: 7,8 → 8,8 из 10.
#health #metrics
— Частые кейсы: консультация без осмотра, второе мнение (есть сомнения в диагнозе после очного приёма), совет о коронавирусе, нет возможности прийти на очный приём;
— Врач в телемедицине не может поставить диагноз, а может только предположить в формате «На основании представленной информации можно предположить стоматит»;
— Всё конфиденциально. Дизайнеру недоступны материалы консультаций, статистика диагнозов и так далее. Можно узнать количество сообщений и фото, но не их содержание;
— Остаются глубинки, опросы, анализ Яндекс Метрики;
— Сервис должен помогать врачу принимать пациентов быстрее, но это не может быть целью. Цель: сократить время настолько, насколько возможно без потери качества;
— Метрики: средняя длительность консультации, скорость написания заключения (обычно происходит после консультации), удовлетворённость врача (без врачей не будет сервиса);
— Добавили возможность подстраивать соотношение областей с чатом и формой заключения;
— Внедрили в чат шаблоны. Простые: приветствие, прощание, вопрос об удобном формате консультации. Сложные: рекомендации пациентам. Все шаблоны врач может переделать под себя;
— Сбор анамнеза через бота, пока пациент ждёт очереди, не взлетел. Пациенты проходили его редко, не всегда успевали ответить на все вопросы;
— Средняя длительность консультации уменьшилась на 8%: 26,45 → 24,65 минут. Средняя оценка пациентов выросла;
— Добавили автоматические рекомендации пациентам и направления на анализы на основе диагноза. Форма заключения отслеживает рекомендации неэффективных препаратов вроде арбидола;
— Среднее время, в течение которого пациент получает заключение: 353 → 103 минуты. Почти 77% отдают его в течение часа;
— Удовлетворённость врачей можно отслеживать через встречи с медицинским блоком, опросы, развёрнутую обратную связь по работе продукта (минимум раз в квартал);
— По важным фичам можно проводить тесты и глубинки;
— Средняя оценка врачей: 7,8 → 8,8 из 10.
#health #metrics
Medium
Как дизайн влияет на метрики: показываем на примере личного кабинета врача
С июня 2021 по ноябрь 2022 я работала над личным кабинетом врача СберЗдоровья. Это сервис телемедицинских консультаций, где врачи общаются…
Перед тем, как приступить к написанию любой главы, я составляю перечень тезисов, которые хотел бы в ней раскрыть. Иногда перечни эти кажутся мне более понятными и удачными, чем сами главы. Вот, например, на основе какого списка я писал главу о правках:
— Если работа делалась неделю, то клиент не может её всю проверить за час. Он придёт с новым пакетом комментариев на следующий день после первого;
— Если работа была сделана не так, как хотел клиент, на самом фундаментальном уровне, то гигантское количество правок будет играть роль костылей, так никогда до конца и не исправляющих ситуацию и плодящих всё новые костыли. Проще либо переделать работу заново, либо заплатить фрилансеру и расстаться, чтобы время не тратить;
— Работа может быть изначально не предназачена для внесения правок. Когда делаешь всё в последний момент и жертвуешь последовательностью ради быстрого результата;
— Можно контролировать «коридор вариативности» в работе. Нельзя слишком ограничивать вариативность, т.к. это не позволит получить результат, который точно понравится клиенту. Также нельзя слишком её увеличивать, т.к. чем меньше ограничений, тем сложнее работать;
— Клиенты не заинтересованы в бесконечных правках, им нужен результат;
— Не бывает мелких правок. Любой комментарий нужно фиксировать в письменном виде. Многие фрилансеры делают 8 из 10 правок, а остальные пропускают то ли случайно, то ли нарочно;
— Если клиенту трудно что-то выбрать, это общая проблема, с которой можно помочь позитивными штуками, а не негативными типа «выбирай уже скорее или соглашайся с тем, что есть» или «нужно больше вариантов — плати больше денег»;
— Я не ограничиваю клиентов в правках и выстроил процесс так, чтобы итерационно прийти к совместному результату;
— При этом, если правки явно выходят за границы коридора вариативности, то нужно отказываться от них, при этом добавляя в список «работ на потом», которые оцениваются отдельно. Важно, чтобы эти заметки не терялись и клиент видел, что исполнитель всё услышал и зафиксировал и в будущем готов воплотить в жизнь, но не в рамках текущего договора;
— Есть исключения, когда правки настолько незначительные, что можно пренебречь их оценкой и сразу внедрить, даже если они выходят за границы коридора вариативности;
— Любой результат работы, даже идеальный, спровоцирует дать обратную связь, улучшающую его, такова природа вещей.
— Если работа делалась неделю, то клиент не может её всю проверить за час. Он придёт с новым пакетом комментариев на следующий день после первого;
— Если работа была сделана не так, как хотел клиент, на самом фундаментальном уровне, то гигантское количество правок будет играть роль костылей, так никогда до конца и не исправляющих ситуацию и плодящих всё новые костыли. Проще либо переделать работу заново, либо заплатить фрилансеру и расстаться, чтобы время не тратить;
— Работа может быть изначально не предназачена для внесения правок. Когда делаешь всё в последний момент и жертвуешь последовательностью ради быстрого результата;
— Можно контролировать «коридор вариативности» в работе. Нельзя слишком ограничивать вариативность, т.к. это не позволит получить результат, который точно понравится клиенту. Также нельзя слишком её увеличивать, т.к. чем меньше ограничений, тем сложнее работать;
— Клиенты не заинтересованы в бесконечных правках, им нужен результат;
— Не бывает мелких правок. Любой комментарий нужно фиксировать в письменном виде. Многие фрилансеры делают 8 из 10 правок, а остальные пропускают то ли случайно, то ли нарочно;
— Если клиенту трудно что-то выбрать, это общая проблема, с которой можно помочь позитивными штуками, а не негативными типа «выбирай уже скорее или соглашайся с тем, что есть» или «нужно больше вариантов — плати больше денег»;
— Я не ограничиваю клиентов в правках и выстроил процесс так, чтобы итерационно прийти к совместному результату;
— При этом, если правки явно выходят за границы коридора вариативности, то нужно отказываться от них, при этом добавляя в список «работ на потом», которые оцениваются отдельно. Важно, чтобы эти заметки не терялись и клиент видел, что исполнитель всё услышал и зафиксировал и в будущем готов воплотить в жизнь, но не в рамках текущего договора;
— Есть исключения, когда правки настолько незначительные, что можно пренебречь их оценкой и сразу внедрить, даже если они выходят за границы коридора вариативности;
— Любой результат работы, даже идеальный, спровоцирует дать обратную связь, улучшающую его, такова природа вещей.
Герман Герасимов показал анимированные способы адаптации таблиц под экран телефона.
— Прокрутка таблицы с фиксацией шапки и первого столбца;
— То же самое, только остальные столбцы не прокручиваются свободно, а переключаются по одному свайпом. Полезна возможность выбрать нужный столбец в списке, чтобы быстро к нему перейти;
— Можно превратить строки таблицы в карточки;
— Карточки по умолчанию могут быть свёрнуты и показывать только основные данные, и разворачиваться при необходимости;
— Также полное содержимое карточки может открываться на отдельном экране;
— Неочевидный вариант: слайдер карточек. Автор предлагает необычный способ выбора нескольких карточек.
#table
— Прокрутка таблицы с фиксацией шапки и первого столбца;
— То же самое, только остальные столбцы не прокручиваются свободно, а переключаются по одному свайпом. Полезна возможность выбрать нужный столбец в списке, чтобы быстро к нему перейти;
— Можно превратить строки таблицы в карточки;
— Карточки по умолчанию могут быть свёрнуты и показывать только основные данные, и разворачиваться при необходимости;
— Также полное содержимое карточки может открываться на отдельном экране;
— Неочевидный вариант: слайдер карточек. Автор предлагает необычный способ выбора нескольких карточек.
#table
Хабр
Как отобразить таблицу на экране мобильного устройства: решения
В данной статье мы рассмотрим какие существуют решения по отображению таблиц с большими массивами данных на экранах мобильных устройств. Таблица Допустим, есть стандартная таблица, состоящая из строк,...
Ксения Горбатенко написала о метрике CSAT.
— Customer Satisfaction Score показывает впечатление клиента от взаимодействия в моменте: от сайта, ассортимента компании и так далее;
— Используется гораздо чаще родственной метрики CES;
— Нет единого стандарта оценочной шкалы. Чаще всего шкала 5-балльная: очень недоволен, недоволен, нейтрален, доволен, очень доволен. Варианты оценки можно заменить на эмодзи;
— Есть несколько вариантов обработки оценок: 1) считать среднюю, 2) вычислять % оценок 4 и 5 от общего количества оценок. Во втором случае 76,5% — среднее значение для западных компаний. Если получилось меньше, надо что-то менять;
— Нет одного стандартного вопроса. Пример вопроса: «Насколько вы довольны сервисом?»;
— Важно помнить, что если человеку нравится конкретный сервис, это не значит, что он в целом лоялен компании;
— Метрику можно считать на каждой стадии взаимодействия клиента с компанией и видеть, где «болит».
#metrics
— Customer Satisfaction Score показывает впечатление клиента от взаимодействия в моменте: от сайта, ассортимента компании и так далее;
— Используется гораздо чаще родственной метрики CES;
— Нет единого стандарта оценочной шкалы. Чаще всего шкала 5-балльная: очень недоволен, недоволен, нейтрален, доволен, очень доволен. Варианты оценки можно заменить на эмодзи;
— Есть несколько вариантов обработки оценок: 1) считать среднюю, 2) вычислять % оценок 4 и 5 от общего количества оценок. Во втором случае 76,5% — среднее значение для западных компаний. Если получилось меньше, надо что-то менять;
— Нет одного стандартного вопроса. Пример вопроса: «Насколько вы довольны сервисом?»;
— Важно помнить, что если человеку нравится конкретный сервис, это не значит, что он в целом лоялен компании;
— Метрику можно считать на каждой стадии взаимодействия клиента с компанией и видеть, где «болит».
#metrics
blog.uxfeedback.ru
UXFb - зЗачем нужна метрика CSAT
CSAT или Customer Satisfaction Score ― это не очень дальний родственник CES. У них есть одна одинаковая черта: CSAT не отражает общее впечатление клиента о компании, фокусируясь на конкретных вещах. Только в этом случае речь идет не об усилиях, а об удовлетворенности.…
Forwarded from PostPostResearch: Константин Ефимов и Анастасия Жичкина
Почему мы вообще пишем о статье Лены Бородиной? Мало ли других примеров не очень удачных исследований?
Потому что статья Лены об оценке дизайна предлагается как история успеха, удачный кейс, на который нужно ориентироваться. Но успех выглядит не так. И мы категорически против того, чтобы образец бредовой работы выдавался за годный отраслевой стандарт.
⛔️Это не история успеха. Это история подгонки результата под ожидания заказчика.
И когда читаешь, спотыкаешься просто на каждом тезисе.
"Когда команда дизайнеров предлагала новые концепции ключевым заказчикам, они отзывались по-разному" - а почему концепции предлагались стейкхолдерам, а не пользователям? Почему исследователи не начали с тестирования концепций дизайна? Это более болезненно для дизайнеров, но позволяет отсеять неподходящие варианты, не затрачиваясь на их воплощение.
Почему методов оценки дизайна всего три: юзабилити-тест, айтрекинг и методика «5 секунд» от Microsoft? Почему не интервью, не фокус-группа и не количественное исследование? В рюкзаке моем сало и спички, и Тургенева десять томов.
Каким образом айтрекинг помогает объективно измерить отношение к дизайну? Как написали в комментариях: если человек долго смотрит на элементы дизайна, это он хорошо или плохо относится? Тот же вопрос относительно юзабилити-теста – а выполнение сценариев как поможет оценить дизайн?
Почему была выбрана методическая химера под названием «пятисекундный тест от Microsoft»? Цитируем: «человеку показывают скриншот экрана всего 5–10 секунд, а потом просят оценить и описать только внешний вид продукта. За такое короткое время никто не успевает вникнуть в функциональность и даже прочитать названия всех разделов — это как раз помогает нам собрать первое впечатление от увиденного, а не прочитанного или понятого».
В экспериментальной психологии есть понятие «экологическая валидность» - возможность обобщить данные эксперимента на реальную ситуацию. Нет никакого смысла изучать то, что в природе не встречается. В какой реальной жизненной ситуации ваш пользователь будет смотреть на сайт в течение 5-10 секунд? Ни в какой. Как правило, он смотрит на сайт дольше 5 секунд. А если он смотрит 5 секунд – то это «отказ», человек попал на сайт случайно и закрыл его.
Насколько идея оценивать дизайн отдельно от функциональности соответствует реальности? Клиенты Газпромбанка предпочитают любоваться на дизайн, ничего не делая на сайте? Тем более, что, судя по результатам, оценить дизайн отдельно от удобства не получилось. Самым частотным словом, которое называли пользователи, описывая дизайн, было слово «УДОБНЫЙ» (!).
Количество респондентов. Идея «сначала взять небольшую выборку и проверить распределение, а если данные не подойдут, просто добрать людей» - категорически не ок. Даже в симуляторе GoPractice написано, что так делать нельзя. Вы не можете добирать выборку до тех пор, пока результаты станут статистически значимыми. Потому что это тупо подгонка под желаемый результат.
Выборка и ее соответствие ЦА. Как-то вышли на 70 человек. Но почему среди них были жители Стокгольма и «разумеется, и специалисты UX-отрасли», если тестировался дизайн приложения российского банка? Что помешало отсеять тех, кто не является целевой аудиторией, и тех, кто смотрит на сайт с профессиональной точки зрения?
Почему оценивались именно тройки характеристик, а не отдельные характеристики? В результате, например, «тройка» из двух слов (буквально так) «красивый» и «много всего» получила положительно-отрицательную оценку.
Но стейкхолдеры эти результаты приняли. Ведь 75% характеристик, которые называли пользователи – были положительными.
Это, видимо, и была основная задача исследования – принятие стейкхолдерами. По крайней мере, о других задачах, которые ГПБ хотел решить с помощью редизайна, ничего не было сказано.
Как лучше было бы действовать и почему именно так – об этом следующий пост.
Потому что статья Лены об оценке дизайна предлагается как история успеха, удачный кейс, на который нужно ориентироваться. Но успех выглядит не так. И мы категорически против того, чтобы образец бредовой работы выдавался за годный отраслевой стандарт.
⛔️Это не история успеха. Это история подгонки результата под ожидания заказчика.
И когда читаешь, спотыкаешься просто на каждом тезисе.
"Когда команда дизайнеров предлагала новые концепции ключевым заказчикам, они отзывались по-разному" - а почему концепции предлагались стейкхолдерам, а не пользователям? Почему исследователи не начали с тестирования концепций дизайна? Это более болезненно для дизайнеров, но позволяет отсеять неподходящие варианты, не затрачиваясь на их воплощение.
Почему методов оценки дизайна всего три: юзабилити-тест, айтрекинг и методика «5 секунд» от Microsoft? Почему не интервью, не фокус-группа и не количественное исследование? В рюкзаке моем сало и спички, и Тургенева десять томов.
Каким образом айтрекинг помогает объективно измерить отношение к дизайну? Как написали в комментариях: если человек долго смотрит на элементы дизайна, это он хорошо или плохо относится? Тот же вопрос относительно юзабилити-теста – а выполнение сценариев как поможет оценить дизайн?
Почему была выбрана методическая химера под названием «пятисекундный тест от Microsoft»? Цитируем: «человеку показывают скриншот экрана всего 5–10 секунд, а потом просят оценить и описать только внешний вид продукта. За такое короткое время никто не успевает вникнуть в функциональность и даже прочитать названия всех разделов — это как раз помогает нам собрать первое впечатление от увиденного, а не прочитанного или понятого».
В экспериментальной психологии есть понятие «экологическая валидность» - возможность обобщить данные эксперимента на реальную ситуацию. Нет никакого смысла изучать то, что в природе не встречается. В какой реальной жизненной ситуации ваш пользователь будет смотреть на сайт в течение 5-10 секунд? Ни в какой. Как правило, он смотрит на сайт дольше 5 секунд. А если он смотрит 5 секунд – то это «отказ», человек попал на сайт случайно и закрыл его.
Насколько идея оценивать дизайн отдельно от функциональности соответствует реальности? Клиенты Газпромбанка предпочитают любоваться на дизайн, ничего не делая на сайте? Тем более, что, судя по результатам, оценить дизайн отдельно от удобства не получилось. Самым частотным словом, которое называли пользователи, описывая дизайн, было слово «УДОБНЫЙ» (!).
Количество респондентов. Идея «сначала взять небольшую выборку и проверить распределение, а если данные не подойдут, просто добрать людей» - категорически не ок. Даже в симуляторе GoPractice написано, что так делать нельзя. Вы не можете добирать выборку до тех пор, пока результаты станут статистически значимыми. Потому что это тупо подгонка под желаемый результат.
Выборка и ее соответствие ЦА. Как-то вышли на 70 человек. Но почему среди них были жители Стокгольма и «разумеется, и специалисты UX-отрасли», если тестировался дизайн приложения российского банка? Что помешало отсеять тех, кто не является целевой аудиторией, и тех, кто смотрит на сайт с профессиональной точки зрения?
Почему оценивались именно тройки характеристик, а не отдельные характеристики? В результате, например, «тройка» из двух слов (буквально так) «красивый» и «много всего» получила положительно-отрицательную оценку.
Но стейкхолдеры эти результаты приняли. Ведь 75% характеристик, которые называли пользователи – были положительными.
Это, видимо, и была основная задача исследования – принятие стейкхолдерами. По крайней мере, о других задачах, которые ГПБ хотел решить с помощью редизайна, ничего не было сказано.
Как лучше было бы действовать и почему именно так – об этом следующий пост.
Майкл Крич сделал обзор фреймворков для эвристической оценки интерфейсов.
— Можно использовать 10 эвристик Якоба Нильсена, но потом столкнуться с проблемами интерфейса, не учтёнными этим фреймворком;
— Эвристическая оценка — анализ предмета (в данном случае интерфейса) экспертами на соответствие установленным принципам. Это субъективное, качественное исследование;
— Из тех фреймворков, что на слуху, есть ещё 10 принципов хорошего дизайна Дитера Рамса. Майкл проанализировал ещё 8 фреймворков;
— Суммарно они рассматривают следующие качества интерфейса: 1) Лёгкость выполнения задач при первом знакомстве; 2) Скорость работы после обучения; 3) Приятность в использовании; 4) Количество совершаемых при работе ошибок, их серьёзность; 5) Полезность, соответствие потребностям пользователя; 6) Насколько легко вернуться к его использованию после длительной паузы;
— Ни один из рассмотренных фреймворков не охватывает все 6 качеств. Только два (Bastien and Scapin, ISO 9241) — рассматривают 5 качеств;
— Из названных: принципы Рамса больше подходят для улучшения удовлетворённости (качество 3); эвристики Нильсена — для повышения лёгкости обучения (качество 1).
In English. #heuristic
— Можно использовать 10 эвристик Якоба Нильсена, но потом столкнуться с проблемами интерфейса, не учтёнными этим фреймворком;
— Эвристическая оценка — анализ предмета (в данном случае интерфейса) экспертами на соответствие установленным принципам. Это субъективное, качественное исследование;
— Из тех фреймворков, что на слуху, есть ещё 10 принципов хорошего дизайна Дитера Рамса. Майкл проанализировал ещё 8 фреймворков;
— Суммарно они рассматривают следующие качества интерфейса: 1) Лёгкость выполнения задач при первом знакомстве; 2) Скорость работы после обучения; 3) Приятность в использовании; 4) Количество совершаемых при работе ошибок, их серьёзность; 5) Полезность, соответствие потребностям пользователя; 6) Насколько легко вернуться к его использованию после длительной паузы;
— Ни один из рассмотренных фреймворков не охватывает все 6 качеств. Только два (Bastien and Scapin, ISO 9241) — рассматривают 5 качеств;
— Из названных: принципы Рамса больше подходят для улучшения удовлетворённости (качество 3); эвристики Нильсена — для повышения лёгкости обучения (качество 1).
In English. #heuristic
Medium
Эвристические фреймворки юзабилити: какой из них вам подходит?
Выходя за рамки эвристик Нильсена (с инфографикой). Перевод статьи Michael Kritsch: Usability heuristic frameworks: which one is right for…
В Everest написали о формах поиска билетов на сайтах авиакомпаний.
— Поиск билетов — один из самых частотных сценариев на сайте авиакомпании. Форму поиска лучше располагать по центру и не совмещать с рекламными каруселями, чтобы те не отвлекали;
— Рядом можно расположить ссылки на следующие по популярности функции: регистрация, управление заказом, статус рейса;
— Полезно определять город вылета по локации пользователя. Если вылетов из его города нет, можно показывать ближайший. Если аэропорт временно не работает, показывать его недоступным и пояснением;
— Пользователи могут вводить неофициальные топонимы (Питер), хорошо бы это учитывать и находить искомые города;
— В списке городов можно показывать сначала популярные, а потом все остальные в алфавитном порядке;
— Только Utair понятно подсказывает, что в полях «Откуда» и «Куда» нельзя указать один и тот же город: «Укажите разные города»;
— Лучше не заполнять по умолчанию поле с датой вылета. Пользователи обычно фокусируются на заполнении пустых полей и могут его пропустить;
— Чтобы искать билет в один конец, на сайте Аэрофлота надо оставить пустым поле с датой возвращения. Возможность явно это указать пользователям привычнее: переключатель «Только туда — Туда и обратно» или кнопка «Обратный билет не нужен»;
— Если пользователь выбрал вариант «Туда и обратно», но дату возвращения не указал, можно искать билеты в один конец;
— Можно добавить крестик для быстрого сброса даты «Обратно»;
— Люди могут искать билеты сильно заранее, удобно иметь возможность выбрать год и месяц в календаре, а не пролистывать его помесячно. Используйте календарь, показывающий сразу 2 месяца;
— В календаре стоит выделять дни, когда рейсы есть. Удобно, если там будет примерная стоимость доступных билетов;
— Ни одна авиакомпания не разрешает выбрать больше билетов для младенцев (без отдельного места), чем выбрано билетов для взрослых, но только Уральские авиалинии отображают подсказку: «Младенцев не может быть больше, чем взрослых»;
— Полезно объяснять, что «младенцы» располагаются на руках у взрослых, без отдельного места.
#form #search
— Поиск билетов — один из самых частотных сценариев на сайте авиакомпании. Форму поиска лучше располагать по центру и не совмещать с рекламными каруселями, чтобы те не отвлекали;
— Рядом можно расположить ссылки на следующие по популярности функции: регистрация, управление заказом, статус рейса;
— Полезно определять город вылета по локации пользователя. Если вылетов из его города нет, можно показывать ближайший. Если аэропорт временно не работает, показывать его недоступным и пояснением;
— Пользователи могут вводить неофициальные топонимы (Питер), хорошо бы это учитывать и находить искомые города;
— В списке городов можно показывать сначала популярные, а потом все остальные в алфавитном порядке;
— Только Utair понятно подсказывает, что в полях «Откуда» и «Куда» нельзя указать один и тот же город: «Укажите разные города»;
— Лучше не заполнять по умолчанию поле с датой вылета. Пользователи обычно фокусируются на заполнении пустых полей и могут его пропустить;
— Чтобы искать билет в один конец, на сайте Аэрофлота надо оставить пустым поле с датой возвращения. Возможность явно это указать пользователям привычнее: переключатель «Только туда — Туда и обратно» или кнопка «Обратный билет не нужен»;
— Если пользователь выбрал вариант «Туда и обратно», но дату возвращения не указал, можно искать билеты в один конец;
— Можно добавить крестик для быстрого сброса даты «Обратно»;
— Люди могут искать билеты сильно заранее, удобно иметь возможность выбрать год и месяц в календаре, а не пролистывать его помесячно. Используйте календарь, показывающий сразу 2 месяца;
— В календаре стоит выделять дни, когда рейсы есть. Удобно, если там будет примерная стоимость доступных билетов;
— Ни одна авиакомпания не разрешает выбрать больше билетов для младенцев (без отдельного места), чем выбрано билетов для взрослых, но только Уральские авиалинии отображают подсказку: «Младенцев не может быть больше, чем взрослых»;
— Полезно объяснять, что «младенцы» располагаются на руках у взрослых, без отдельного места.
#form #search
research.everest.cx
#14 UX форм поиска билетов на сайтах российских авиакомпаний