Закон общего пространства
#UX_законы
Элементы внутри общей границы воспринимаются как группа.
Что запомнить:
Cоздание общего пространства вокруг элемента или группы элементов — лёгкий способ отделить их от остальных элементов. Самое распространенное использование принципа группировки в дизайне — обвести нужные элементы рамкой, отделив их от остальных.
Примеры использования:
Примеров масса, закон используется на каждом шагу. Например, карточки товаров, навигационные блоки и панели настроек.
Открытый UX
#UX_законы
Элементы внутри общей границы воспринимаются как группа.
Что запомнить:
Cоздание общего пространства вокруг элемента или группы элементов — лёгкий способ отделить их от остальных элементов. Самое распространенное использование принципа группировки в дизайне — обвести нужные элементы рамкой, отделив их от остальных.
Примеры использования:
Примеров масса, закон используется на каждом шагу. Например, карточки товаров, навигационные блоки и панели настроек.
Открытый UX
July 4, 2022
История возникновения закона Фиттса
#Исследование
Американский психолог Пол Фиттс работавший в университете штата Огайо, в 1954 году провел эксперимент, описывающий движение человека при достижении цели в двумерном пространстве.
Суть эксперимента:
На доске размещены две чувствительных полоски — мишени (черные полоски). При касании специальным пером (аналог современного стилуса) одной из этих полосок фиксируется «попадание в цель».
Задача испытуемого:
Как можно быстрее поочерёдно касаться пером то одной, то второй полоски. При этом расстояние между полосками и ширина каждой из них периодически изменялись.
Отслеживая время касаний, Фиттс вывел зависимость: чем больше расстояние от одной цели до другой цели и чем меньше размер самой цели, тем больше времени требуется для её достижения. И соответственно наоборот, чем меньше расстояние от одной цели до другой цели и чем больше размер цели, тем меньше времени требуется для её достижения.
Открытый UX
#Исследование
Американский психолог Пол Фиттс работавший в университете штата Огайо, в 1954 году провел эксперимент, описывающий движение человека при достижении цели в двумерном пространстве.
Суть эксперимента:
На доске размещены две чувствительных полоски — мишени (черные полоски). При касании специальным пером (аналог современного стилуса) одной из этих полосок фиксируется «попадание в цель».
Задача испытуемого:
Как можно быстрее поочерёдно касаться пером то одной, то второй полоски. При этом расстояние между полосками и ширина каждой из них периодически изменялись.
Отслеживая время касаний, Фиттс вывел зависимость: чем больше расстояние от одной цели до другой цели и чем меньше размер самой цели, тем больше времени требуется для её достижения. И соответственно наоборот, чем меньше расстояние от одной цели до другой цели и чем больше размер цели, тем меньше времени требуется для её достижения.
Открытый UX
July 6, 2022
results_2021.pdf
4.2 MB
#Исследование отношения населения России к различным платежным средствам
Несколько интересных выводов:
▸ 6% людей снимают деньги в банкомате, потому что им нравится отсчитывать банкноты и держать их в руках.
▸ У 18% респондентов до сих пор нет банковской карты, а у 45% их две и больше.
▸ 33% людей всё ещё предпочитают платить наличными.
▸ 975 рублей — средняя сумма покупки за наличные.
Еще больше интересной статистики в подробном исследовании в источнике или приложенном файле.
Открытый UX
Несколько интересных выводов:
▸ 6% людей снимают деньги в банкомате, потому что им нравится отсчитывать банкноты и держать их в руках.
▸ У 18% респондентов до сих пор нет банковской карты, а у 45% их две и больше.
▸ 33% людей всё ещё предпочитают платить наличными.
▸ 975 рублей — средняя сумма покупки за наличные.
Еще больше интересной статистики в подробном исследовании в источнике или приложенном файле.
Открытый UX
July 8, 2022
July 10, 2022
Снижение когнитивной нагрузки на пользователей
Когнитивная нагрузка предполагает, что кратковременная память способна удерживать лишь небольшое количество информации. Когнитивная нагрузка в области UX определяет как количество интеллектуальных ресурсов, необходимых для взаимодействия с системой.
Существует 2 типа когнитивной нагрузки:
▸ Внутренняя когнитивная нагрузка относится к сложности конкретной тематики. Зависит от знаний пользователя в этой области (чем больше он в теме, тем когнитивная нагрузка ниже). Ее невозможно исключить.
▸ Внешняя когнитивная нагрузка относится к нагрузке, создаваемой способом представления информации. Внешняя когнитивная нагрузка может быть снижена за счёт качественно проработанного юзабилити.
Минимизация когнитивной нагрузки:
1. Представление контента таким образом, чтобы он легко воспринимался.
2. Снижение нагрузки на память за счет улучшения распознавания.
3. Принцип резервирования.
4. Устранение ненужных задач.
Открытый UX
Когнитивная нагрузка предполагает, что кратковременная память способна удерживать лишь небольшое количество информации. Когнитивная нагрузка в области UX определяет как количество интеллектуальных ресурсов, необходимых для взаимодействия с системой.
Существует 2 типа когнитивной нагрузки:
▸ Внутренняя когнитивная нагрузка относится к сложности конкретной тематики. Зависит от знаний пользователя в этой области (чем больше он в теме, тем когнитивная нагрузка ниже). Ее невозможно исключить.
▸ Внешняя когнитивная нагрузка относится к нагрузке, создаваемой способом представления информации. Внешняя когнитивная нагрузка может быть снижена за счёт качественно проработанного юзабилити.
Минимизация когнитивной нагрузки:
1. Представление контента таким образом, чтобы он легко воспринимался.
2. Снижение нагрузки на память за счет улучшения распознавания.
3. Принцип резервирования.
4. Устранение ненужных задач.
Открытый UX
July 11, 2022
Представление контента таким образом, чтобы он легко воспринимался.
Способ минимизации когнитивной нагрузки №1
Люди не читают слово в слово, они просматривают текст в поисках ключевых слов, которые укажут им на то, что они ищут. Написание текстов для интерфейса лучше начинать с вопроса: а что хочет узнать пользователь? Т.е писать четко, информативно и по существу.
Хороший контент легко читается и воспринимается. В нем используются:
▸ короткие предложения;
▸ разделы с подзаголовками;
▸ простая лексика.
Методы дизайна для организации контента таким образом, чтобы его было легко сканировать:
▸ Последовательность — упорядочивание контента для того, чтобы пользователям было легче понять его суть. Существует несколько методов упорядочивания — контент можно распределить от простого к сложному, от односложного к комплексному, от общего к частному.
▸ Разделение на фрагменты — способ распределения данных на значимые и небольшие блоки. В среднем, человек может удержать в памяти 7 (± 2) элемента за раз (закон Миллера). Когнитивная нагрузка увеличивается, когда вводится больше контента.
Как правило, методы фрагментации включают в себя:
▸ Использование коротких абзацев;
▸ Применение коротких строк в тексте;
▸ Группировка элементов, которые имеют общие признаки.
Открытый UX
Способ минимизации когнитивной нагрузки №1
Люди не читают слово в слово, они просматривают текст в поисках ключевых слов, которые укажут им на то, что они ищут. Написание текстов для интерфейса лучше начинать с вопроса: а что хочет узнать пользователь? Т.е писать четко, информативно и по существу.
Хороший контент легко читается и воспринимается. В нем используются:
▸ короткие предложения;
▸ разделы с подзаголовками;
▸ простая лексика.
Методы дизайна для организации контента таким образом, чтобы его было легко сканировать:
▸ Последовательность — упорядочивание контента для того, чтобы пользователям было легче понять его суть. Существует несколько методов упорядочивания — контент можно распределить от простого к сложному, от односложного к комплексному, от общего к частному.
▸ Разделение на фрагменты — способ распределения данных на значимые и небольшие блоки. В среднем, человек может удержать в памяти 7 (± 2) элемента за раз (закон Миллера). Когнитивная нагрузка увеличивается, когда вводится больше контента.
Как правило, методы фрагментации включают в себя:
▸ Использование коротких абзацев;
▸ Применение коротких строк в тексте;
▸ Группировка элементов, которые имеют общие признаки.
Открытый UX
July 12, 2022
Снижение нагрузки на память за счет улучшения распознавания
Способ минимизации когнитивной нагрузки №2
Узнавание, одна из 10 эвристик юзабилити Якоба Нильсена, представляет собой метод минимизации нагрузки на память пользователя за счет отображения как можно большего количества элементов, действий и параметров. Поскольку рабочая память способна хранить ограниченный объем информации, пользователей не следует заставлять запоминать информацию об одной части интерфейса при переходе в другую.
Практики дизайна, которые способствуют узнаваемости, включают:
▸ Наличие видимых элементов меню или таких, чтобы при необходимости их можно было легко отыскать (раскрывающиеся списки).
▸ Предоставление пользователям пошагового руководства в контексте взаимодействия с интерфейсом, вместо того, чтобы заставлять их читать подробный онбординг в начале работы.
▸ Сокращение длинных форм таким образом, чтобы они полностью помещались на экране.
▸ Использование знакомых шаблонов проектирования, соответствующих ментальным моделям пользователей. Например, у людей в голове сформировано представление о том, как выглядит веб-сайт бронирования авиабилетов и какие шаги нужно предпринять для осуществления этого действия. Их когнитивная нагрузка возрастет, если они столкнутся с сайтом, который работает не так, как они ожидали.
Открытый UX
Способ минимизации когнитивной нагрузки №2
Узнавание, одна из 10 эвристик юзабилити Якоба Нильсена, представляет собой метод минимизации нагрузки на память пользователя за счет отображения как можно большего количества элементов, действий и параметров. Поскольку рабочая память способна хранить ограниченный объем информации, пользователей не следует заставлять запоминать информацию об одной части интерфейса при переходе в другую.
Практики дизайна, которые способствуют узнаваемости, включают:
▸ Наличие видимых элементов меню или таких, чтобы при необходимости их можно было легко отыскать (раскрывающиеся списки).
▸ Предоставление пользователям пошагового руководства в контексте взаимодействия с интерфейсом, вместо того, чтобы заставлять их читать подробный онбординг в начале работы.
▸ Сокращение длинных форм таким образом, чтобы они полностью помещались на экране.
▸ Использование знакомых шаблонов проектирования, соответствующих ментальным моделям пользователей. Например, у людей в голове сформировано представление о том, как выглядит веб-сайт бронирования авиабилетов и какие шаги нужно предпринять для осуществления этого действия. Их когнитивная нагрузка возрастет, если они столкнутся с сайтом, который работает не так, как они ожидали.
Открытый UX
July 13, 2022
Принцип резервирования
Способ минимизации когнитивной нагрузки №3
Принцип избыточности предполагает, что лишний материал мешает, а не облегчает обучение. Избыточность возникает, когда одна и та же информация представлена одновременно в нескольких формах или слишком детализирована. Это увеличивает когнитивную нагрузку на пользователей.
В UX дизайне нужно избегать визуального беспорядка, который ухудшает взаимодействие с интерфейсом. Лучше удалить лишние ссылки, нерелевантные изображения и отвлекающую анимацию
Открытый UX
Способ минимизации когнитивной нагрузки №3
Принцип избыточности предполагает, что лишний материал мешает, а не облегчает обучение. Избыточность возникает, когда одна и та же информация представлена одновременно в нескольких формах или слишком детализирована. Это увеличивает когнитивную нагрузку на пользователей.
В UX дизайне нужно избегать визуального беспорядка, который ухудшает взаимодействие с интерфейсом. Лучше удалить лишние ссылки, нерелевантные изображения и отвлекающую анимацию
Открытый UX
July 14, 2022
Устранение ненужных задач
Способ минимизации когнитивной нагрузки №4
Наконец, когнитивную нагрузку можно минимизировать, исключив этапы, которые не способствуют решению задач пользователя. Это можно сделать с помощью анализа процесса прохождения людьми пути к совершению целевого действия. Так можно чётко определить задачи, которые должен решать цифровой продукт.
Открытый UX
Способ минимизации когнитивной нагрузки №4
Наконец, когнитивную нагрузку можно минимизировать, исключив этапы, которые не способствуют решению задач пользователя. Это можно сделать с помощью анализа процесса прохождения людьми пути к совершению целевого действия. Так можно чётко определить задачи, которые должен решать цифровой продукт.
Открытый UX
July 15, 2022
July 17, 2022
У канала появился стикерпак
На выходных было много свободного времени и чтобы его не терять, был запиленочередной никому не нужный стикерпак на околодизайнерские темы.
Замечания, пожелания и предложения по добавлению новых стикеров можно озвучить в комментариях к этому посту.
Приятного использования 🙃
На выходных было много свободного времени и чтобы его не терять, был запилен
Замечания, пожелания и предложения по добавлению новых стикеров можно озвучить в комментариях к этому посту.
Приятного использования 🙃
July 20, 2022
July 20, 2022
July 23, 2022
Принцип наглядности
#UX_законы
Чем меньше пользователю необходимо думать о способах достижения цели, тем вероятнее цель будет достигнута.
Дон Норман в своей книге «Дизайн привычных вещей» утверждает, что дизайн можно считать хорошим, если пользователю не требуется инструкция для того, чтобы понять принцип работы предмета и способ взаимодействия с ним. Это принцип снижения когнитивной нагрузки, который избавляет людей от того, чтобы им нужно было думать в тех местах, где это не принято, например при включении конфорки на плите.
Избавиться от инструкции можно только, если передать всю необходимую информацию о назначении, способе взаимодействия и состоянии предмета через визуальные подсказки. Именно поэтому наиболее важные детали должны сразу бросаться в глаза, незаметное необходимо сделать заметным, а связь между элементами должна быть естественной и очевидной.
Как применять
▸ Не нужно использовать элементы, в которых нет явной необходимости.
▸ Использовать популярные дизайн-паттерны.
▸ Избавиться от лишних задач.
▸ Свести к минимуму число опций, предлагаемых пользователю на выбор.
▸ Показывать все опции в одном блоке.
▸ Позаботиться об удобочитаемости текста.
▸ Быть осторожным с иконками и их значениями.
Открытый UX
#UX_законы
Чем меньше пользователю необходимо думать о способах достижения цели, тем вероятнее цель будет достигнута.
Дон Норман в своей книге «Дизайн привычных вещей» утверждает, что дизайн можно считать хорошим, если пользователю не требуется инструкция для того, чтобы понять принцип работы предмета и способ взаимодействия с ним. Это принцип снижения когнитивной нагрузки, который избавляет людей от того, чтобы им нужно было думать в тех местах, где это не принято, например при включении конфорки на плите.
Избавиться от инструкции можно только, если передать всю необходимую информацию о назначении, способе взаимодействия и состоянии предмета через визуальные подсказки. Именно поэтому наиболее важные детали должны сразу бросаться в глаза, незаметное необходимо сделать заметным, а связь между элементами должна быть естественной и очевидной.
Как применять
▸ Не нужно использовать элементы, в которых нет явной необходимости.
▸ Использовать популярные дизайн-паттерны.
▸ Избавиться от лишних задач.
▸ Свести к минимуму число опций, предлагаемых пользователю на выбор.
▸ Показывать все опции в одном блоке.
▸ Позаботиться об удобочитаемости текста.
▸ Быть осторожным с иконками и их значениями.
Открытый UX
July 28, 2022
Открытый UX
Примеры дизайн-систем банков и IT-продуктов Финтех Nova. СберБанк Онлайн Цифровые продукты Альфа-Банка Taiga UI - Тинькофф-Банк Бренд-система Райффайзен Банка D2Design - библиотека для построения банковских приложений Сервисы Paradigm — продукты Mail.ru…
Как-то уже делал подборку интересных дизайн-систем, за это время коллекция немного пополнилась:
Atlassian
Polaris от Shopify
Carbon — система проектирования IBM
Mailchimp
Audi
Airbnb
Lightning
И дабы не забывать классику:
Material Design от Google
Human Interface Guidelines от Apple
Fluent Design System от Microsoft
Ant Design
Рассматривая и анализируя дизайн-системы, можно составить представление о визуальной культуре и трендах в современных IT-продуктах.
Открытый UX
Atlassian
Polaris от Shopify
Carbon — система проектирования IBM
Mailchimp
Audi
Airbnb
Lightning
И дабы не забывать классику:
Material Design от Google
Human Interface Guidelines от Apple
Fluent Design System от Microsoft
Ant Design
Рассматривая и анализируя дизайн-системы, можно составить представление о визуальной культуре и трендах в современных IT-продуктах.
Открытый UX
August 1, 2022
#Исследование продуктовых дизайн-команд в России
В конце 2021 Райффайзенбанк провел ежегодное исследование среди дизайнеров разного профиля. Тема исследования: отношение специалистов к продуктовым командам России.
В опросе участвовало 1427 человек (87,8% — дизайнеры разного профиля) из разных городов:
▸ Москва (61,3%)
▸ Санкт-Петербург (17,2%)
▸ Минск (3,9%)
▸ Екатеринбург (3%)
▸ Новосибирск (2,2%)
▸ Казань (1,7%)
▸ Краснодар (1,5%)
▸ Нижний Новгород (1,5%)
▸ Ростов-на-Дону (1,2%)
▸ Киев (1,1%)
▸ Самара (0,9%)
▸ Воронеж (0,5%)
▸ Другие (4,1%).
Ответы собирались с начала ноября 2021 года по конец января 2022. Аудитория — читатели популярных дизайнерских Телеграм-каналов, групп в Facebook и пабликов ВКонтакте.
Подробнее изучить результаты можно в источнике, там же доступны результаты исследований 2018, 2019, 2020 годов.
Открытый UX
В конце 2021 Райффайзенбанк провел ежегодное исследование среди дизайнеров разного профиля. Тема исследования: отношение специалистов к продуктовым командам России.
В опросе участвовало 1427 человек (87,8% — дизайнеры разного профиля) из разных городов:
▸ Москва (61,3%)
▸ Санкт-Петербург (17,2%)
▸ Минск (3,9%)
▸ Екатеринбург (3%)
▸ Новосибирск (2,2%)
▸ Казань (1,7%)
▸ Краснодар (1,5%)
▸ Нижний Новгород (1,5%)
▸ Ростов-на-Дону (1,2%)
▸ Киев (1,1%)
▸ Самара (0,9%)
▸ Воронеж (0,5%)
▸ Другие (4,1%).
Ответы собирались с начала ноября 2021 года по конец января 2022. Аудитория — читатели популярных дизайнерских Телеграм-каналов, групп в Facebook и пабликов ВКонтакте.
Подробнее изучить результаты можно в источнике, там же доступны результаты исследований 2018, 2019, 2020 годов.
Открытый UX
August 3, 2022