Что происходит на рынках спорта и туризма в России?
Цифры, тренды и советы по развитию — в нашем исследовании
Отправляя форму, вы соглашаетесь с политикой конфиденциальности и обработки персональных данных
14 марта 2025
Дизайн для BANI-мира: как помочь пользователю сохранять спокойствие в эпоху турбулентности с помощью веб-дизайна
Чек-лист аудита сайта
Скачайте инструкцию с бесплатными инструментами
Отправляя форму, вы соглашаетесь с политикой конфиденциальности и обработки персональных данных
Не успеваете осмысливать всю информацию, которая проносится мимо? Мы тоже. Так происходит, потому что мы живем в многомерном хаосе, который футурологи называют BANI-миром. Нас как веб-студию интересует то, как помочь пользователю справляться с новой реальностью с помощью дизайна интерфейсов.
Что такое BANI-мир и как он влияет на пользовательский опыт
Модели описания реальности
Мы живем в мире, который стремительно меняется. Нам приходится постоянно обучаться и адаптироваться. Для того чтобы понять, какие стратегии поведения будут выигрышными, как нам действовать и в какую сторону развиваться, мы должны осознавать ситуацию, в которой находимся.
Лучший способ понять что-либо — попробовать описать это. В попытке осмыслить изменения, происходящие в XX веке, исследователи в области управления бизнесом предложили модели описания реальности.
До эпохи цифровизации мы жили в стабильном и однозначном мире, который описывается акронимом SPOD. В названии зашифрованы его основные признаки:
Этот мир поддавался прогнозированию и управлялся с помощью стратегий, которые не менялись и продолжали быть эффективными на протяжении долгих лет.
Затем наступает эпоха информационных технологий. Время как будто ускоряется и прогресс обгоняет смену поколений. За жизнь одного поколения всё может измениться несколько раз самым неожиданным образом. Предыдущее поколение больше не обладает полным набором необходимых знаний, чтобы передать их новому. Преемственность нарушается.
Мы оказываемся в мире VUCA — реальности, полной:
Термин зародился в недрах Пентагона в 1980-х годах и использовался американскими военными для описания состояния страны после холодной войны. В 2000-х его стали применять для стратегического управления бизнесом и описания новой реальности в целом: на смену порядку и определенности пришла хаотичность и непредсказуемость.
Лучший способ понять что-либо — попробовать описать это. В попытке осмыслить изменения, происходящие в XX веке, исследователи в области управления бизнесом предложили модели описания реальности.
До эпохи цифровизации мы жили в стабильном и однозначном мире, который описывается акронимом SPOD. В названии зашифрованы его основные признаки:
- (S)teady — устойчивый,
- (P)redictable — предсказуемый,
- (O)rdinary — простой,
- (D)efinite — определенный.
Этот мир поддавался прогнозированию и управлялся с помощью стратегий, которые не менялись и продолжали быть эффективными на протяжении долгих лет.
Затем наступает эпоха информационных технологий. Время как будто ускоряется и прогресс обгоняет смену поколений. За жизнь одного поколения всё может измениться несколько раз самым неожиданным образом. Предыдущее поколение больше не обладает полным набором необходимых знаний, чтобы передать их новому. Преемственность нарушается.
Мы оказываемся в мире VUCA — реальности, полной:
- (V)olatility — нестабильности,
- (U)ncertainty — неопределенности,
- (С)omplexity — сложности,
- (A)mbiguity — неоднозначности.
Термин зародился в недрах Пентагона в 1980-х годах и использовался американскими военными для описания состояния страны после холодной войны. В 2000-х его стали применять для стратегического управления бизнесом и описания новой реальности в целом: на смену порядку и определенности пришла хаотичность и непредсказуемость.
Но сложность мира продолжает нарастать, запутанное становится еще запутаннее, и к 2020 году становится очевидно, что мир снова изменился. Это уже не прежняя туманная неопределённость, а многомерный хаос. Для описания этого нового мира футуролог Джамаис Кашио использует акроним BANI:
Изменчивость превращается в хрупкость, мы обнаруживаем, что самые надежные с виду вещи больше таковыми не являются. Все может сломаться в один момент, даже самые отлаженные системы могут выйти из строя — это стало особенно очевидно во время пандемии.
В этих условиях человечество сталкивается с хронической тревожностью. Мы становимся заложниками своего беспокойства, чувствуем зависимость от информации, но чем больше получаем её, тем больше тревожимся. Огромное количество знаний, на которые на самом деле нельзя опереться, ещё больше усиливает тревогу и создаёт когнитивный шум.
- (B)rittle — хрупкий,
- (A)nxious — тревожный,
- (N)on-linear — нелинейный,
- (I)ncomprehensible — непостижимый.
Изменчивость превращается в хрупкость, мы обнаруживаем, что самые надежные с виду вещи больше таковыми не являются. Все может сломаться в один момент, даже самые отлаженные системы могут выйти из строя — это стало особенно очевидно во время пандемии.
В этих условиях человечество сталкивается с хронической тревожностью. Мы становимся заложниками своего беспокойства, чувствуем зависимость от информации, но чем больше получаем её, тем больше тревожимся. Огромное количество знаний, на которые на самом деле нельзя опереться, ещё больше усиливает тревогу и создаёт когнитивный шум.
Как формируется пользовательский опыт в BANI-мире
Мы ежедневно взаимодействуем с десятками каналов информации, инфопространство плотным коконом окружает человека со всех сторон. Нас поминутно пытаются в чём-то убедить, чему-то научить, во что-то втянуть и, конечно, заставить что-нибудь купить. Мы просыпаемся и сразу начинаем своё взаимодействие с интерфейсами: социальными сетями, новостными лентами, почтами, мессенджерами, маркетплейсами.
Можно с уверенностью сказать, что на эмоциональное состояние человека влияет как внешний вид приложения или сайта, так и в общем опыт взаимодействия с брендом. Каждая деталь здесь имеет значение. Даже простой текст пуш-уведомления может заставить вас испытывать беспокойство — здесь грех не вспомнить Duolingo с их пассивно-агрессивными пушами.
Можно с уверенностью сказать, что на эмоциональное состояние человека влияет как внешний вид приложения или сайта, так и в общем опыт взаимодействия с брендом. Каждая деталь здесь имеет значение. Даже простой текст пуш-уведомления может заставить вас испытывать беспокойство — здесь грех не вспомнить Duolingo с их пассивно-агрессивными пушами.
Ещё один пример — главный экран приложения Яндекс Go. Каждый раз заходя в приложение, я какое-то время пробуксовываю, потому что вижу сразу все услуги, которые предлагает бренд Яндекса. Бывает сложно сообразить, зачем я вообще сюда зашла.
Как эти соприкосновения влияют на настроение человека?
С одной стороны, это мелочи, но с другой, как я уже говорила, количество этих взаимодействий так велико, что они по капельке подтачивают нашу эмоциональную стабильность и в прямом смысле расшатывают нервную систему.
Каждый раз, когда интерфейсы заставляют человека думать там, где это необязательно, искать выход или вход, считать что-то или вспоминать, сомневаться в себе или тревожиться от недосказанности, это микростресс. В итоге они создают ощутимый фоновый шум, который обостряет хроническое беспокойство.
Могут ли интерфейсы не вызывать стресс или даже снижать его? Давайте разбираться.
С одной стороны, это мелочи, но с другой, как я уже говорила, количество этих взаимодействий так велико, что они по капельке подтачивают нашу эмоциональную стабильность и в прямом смысле расшатывают нервную систему.
Каждый раз, когда интерфейсы заставляют человека думать там, где это необязательно, искать выход или вход, считать что-то или вспоминать, сомневаться в себе или тревожиться от недосказанности, это микростресс. В итоге они создают ощутимый фоновый шум, который обостряет хроническое беспокойство.
Могут ли интерфейсы не вызывать стресс или даже снижать его? Давайте разбираться.
Антистресс-дизайн: как визуальная ясность может помочь снизить тревожность
В последние годы поиски антистресс-решений становятся все более актуальными. Люди проникаются трендом на минимализм и экологичность, стараются проводить больше времени на природе. Мы стали говорить об информационном детоксе, расхламлять пространство, учиться дыхательными практиками и тренировать осознанность. Эта тенденция захватила дизайн в широком смысле — архитектуру, дизайн интерьеров, графический дизайн — но и веб-дизайн не остаётся в стороне.
Что же мы можем сделать, чтобы помочь снизить уровень стресса у пользователя? Ответ лежит на поверхности: лучший способ снизить тревожность — это её не вызывать.
Но как понять, что именно создаёт напряженность при взаимодействии с вашим продуктом? Ответ кроется в свойствах человеческой психики. Я предлагаю вспомнить несколько базовых принципов, определяющих то, как человек воспринимает информацию.
Что же мы можем сделать, чтобы помочь снизить уровень стресса у пользователя? Ответ лежит на поверхности: лучший способ снизить тревожность — это её не вызывать.
Но как понять, что именно создаёт напряженность при взаимодействии с вашим продуктом? Ответ кроется в свойствах человеческой психики. Я предлагаю вспомнить несколько базовых принципов, определяющих то, как человек воспринимает информацию.
Прайминг
Прайминг — это свойство мозга принимать решения на основе уже полученной информации. Решения эти обычно бессознательные: действуя автоматически мозг экономит энергию. Если нам бы пришлось прикладывать усилия, чтобы принять каждое ерундовое решение, у нас бы не осталось ресурсов для более значимых вещей.
Не заставляйте пользователя тратить лишнюю энергию на изучение вашего сайта в поиске той или иной функции. У всех основных кнопок и функций есть свои предсказуемые места.
NB: Здесь и далее все отрицательные примеры взяты из канала «Адовый UX».
Не заставляйте пользователя тратить лишнюю энергию на изучение вашего сайта в поиске той или иной функции. У всех основных кнопок и функций есть свои предсказуемые места.
NB: Здесь и далее все отрицательные примеры взяты из канала «Адовый UX».
Платформа для создания игр и интерактивного контента Unity поменяла в новой версии местами привычные пользователям кнопки
Закон Хика
Согласно этому закону, время, необходимое на совершение выбора, возрастает пропорционально количеству вариантов. Это значит, что чем больше разделов, карточек, кнопок и призывов к действию в вашем визуальном поле, тем сложнее будет найти то, за чем вы пришли.
Группируйте схожее, разбивайте сложное и тщательно подбирайте оптимальное количество элементов на одном экране.
Группируйте схожее, разбивайте сложное и тщательно подбирайте оптимальное количество элементов на одном экране.
Неунифицированные характеристики товара привели к огромному списку элементов для фильтрации
Теория когнитивной нагрузки
Согласно этой теории, эффективно в чём-то разобраться можно, только если информация не перегружает мозг. Чем больше информации выдаётся человеку единовременно, тем меньше он в итоге запомнит и поймет.
Используйте подсказки, если ваш продукт сложный, обеспечьте доступ к важной информации на видном месте, а дополнительную информацию разместите так, чтобы она не перегружала пользователя.
Используйте подсказки, если ваш продукт сложный, обеспечьте доступ к важной информации на видном месте, а дополнительную информацию разместите так, чтобы она не перегружала пользователя.
Попап — хороший способ привлечь внимание посетителя сайта к важной информации. Главное помнить, что важным не может быть всё
Закон Миллера
В среднем человек может хранить около семи элементов в рабочей памяти. Да, это снова про минимализм, упрощение и группировку. Конечно, это не накладывает какие-то жёсткие ограничения на контент или дизайн, но мягко намекает на то, что 6 карточек с преимуществами будут восприниматься легче, чем 12.
Слишком много элементов на интерфейсе устройства, у которого всего лишь одна главная функция
Закон Фиттса
Один из важнейших законов UX. Он говорит о том, что оптимальные размеры и расположение элементов помогают пользователю ориентироваться в обстановке. Если говорить очень просто, его суть сводится к тому, что целевые элементы должны располагаться близко и быть достаточно большими.
В принципе тоже вариант выделить целевой элемент
Эффект эстетики в юзабилити
Японские исследователи из Центра дизайна Hitachi тестировали варианты пользовательского интерфейса банкомата. Они попросили участников исследования оценить простоту использования и эстетическую привлекательность каждого дизайна. Оказалось, что те интерфейсы, которые люди считали привлекательными, они оценивали как более удобные независимо от фактического положения дел.
Эстетический эффект юзабилити говорит о тенденции юзеров воспринимать привлекательные продукты как более удобные в использовании. Люди склонны верить, что вещи, которые выглядят лучше, будут работать лучше, даже если на самом деле это не совсем так.
Эстетический эффект юзабилити говорит о тенденции юзеров воспринимать привлекательные продукты как более удобные в использовании. Люди склонны верить, что вещи, которые выглядят лучше, будут работать лучше, даже если на самом деле это не совсем так.
О визуальной ясности
Если рассматривать эти принципы применительно к дизайну, то легко заметить, что практически все они подводят нас к одним и тем же выводам: делайте проще, делайте чище, делайте понятнее, делайте осознаннее, делайте эстетичнее.
Это поможет создать визуальную ясность, которую нужно поддерживать во всех структурах и элементах дизайна: организации страниц и экранов, навигации, текстах, графике, формах, кнопках.
Чем удобнее и проще будет взаимодействовать с вашим сайтом, чем меньше шума, недосказанности, когнитивной нагрузки он будет создавать, тем приятнее будет этот опыт для пользователя. Визуальная ясность — это главный вектор при создании антистресс-дизайна.
Теперь я хотела бы представить модель, которая раскрывает и дополняет принцип визуальной ясности.
Это поможет создать визуальную ясность, которую нужно поддерживать во всех структурах и элементах дизайна: организации страниц и экранов, навигации, текстах, графике, формах, кнопках.
Чем удобнее и проще будет взаимодействовать с вашим сайтом, чем меньше шума, недосказанности, когнитивной нагрузки он будет создавать, тем приятнее будет этот опыт для пользователя. Визуальная ясность — это главный вектор при создании антистресс-дизайна.
Теперь я хотела бы представить модель, которая раскрывает и дополняет принцип визуальной ясности.
Принципы и элементы дизайна, снижающие когнитивную нагрузку
Так чем мы можем ответить на хаотичность мира BANI? Если этот мир заставляет нас беспокоиться, потому что он хрупкий, тревожный, нелинейный и непостижимый, то получается, что нам нужно создать пространство, в котором нам было бы спокойней.
Сам Кашио поясняет, что хрупкости мы можем противопоставить гибкость и сопротивляемость, тревожности — эмпатию и осознанность, нелинейности — понимание общего контекста и, снова, гибкость, а непостижимости — максимальную прозрачность и интуицию.
Если взять это за основу и объединить принципом визуальной ясности, то я считаю что мы могли бы представить их в виде модели REST. Этот акроним поясняет, каким должен быть дизайн, чтобы не заставлять пользователя беспокоиться еще больше:
Давайте подробнее остановимся на каждой из его составных частей.
Сам Кашио поясняет, что хрупкости мы можем противопоставить гибкость и сопротивляемость, тревожности — эмпатию и осознанность, нелинейности — понимание общего контекста и, снова, гибкость, а непостижимости — максимальную прозрачность и интуицию.
Если взять это за основу и объединить принципом визуальной ясности, то я считаю что мы могли бы представить их в виде модели REST. Этот акроним поясняет, каким должен быть дизайн, чтобы не заставлять пользователя беспокоиться еще больше:
- (R)eliable — надёжным, то есть сочетать гибкость и сопротивляемость;
- (E)mpathic — эмпатичным, то есть быть человечным, понимающим боли пользователя, заботящимся о нём;
- (S)equential — последовательным, то есть сохранять фундаментальную логичность в условиях новых контекстов;
- (T)ransparent — прозрачным, то есть быть простым и интуитивно понятным.
Давайте подробнее остановимся на каждой из его составных частей.
Надёжность
Называя интерфейс надёжным, мы уверены, что он гарантированно поможет нам достичь поставленной цели и будет поддерживать нас на всём пути. Это интерфейс, который не подведёт.
Конечно, в первую очередь это касается области разработки: всё должно работать чётко и без неожиданностей в виде ошибок. Но и по части дизайна здесь есть о чём поговорить. Как дизайн может обманывать ожидания?
Конечно, в первую очередь это касается области разработки: всё должно работать чётко и без неожиданностей в виде ошибок. Но и по части дизайна здесь есть о чём поговорить. Как дизайн может обманывать ожидания?
У данных с чётким форматом (даты, дни рождения, адреса, телефоны) есть устоявшиеся способы ввода, к которым привык пользователь и которые он ожидает от всех площадок
Это происходит каждый раз, когда мы заставляем пользователя думать, что он может достигнуть своей цели определённым образом, или пользователь сам так думает на основе прошлого опыта, а в реальности сталкивается с проблемой.
Самый простой пример — формы, который предлагают вам рассчитать стоимость услуги онлайн, вы заполняете 30 полей за 10 шагов, а в итоге оказывается, что никто и не собирался ничего считать, но если вы оставите телефончик, то с вами свяжется менеджер.
Как понять, что ваш интерфейс — надежный?
Самый простой пример — формы, который предлагают вам рассчитать стоимость услуги онлайн, вы заполняете 30 полей за 10 шагов, а в итоге оказывается, что никто и не собирался ничего считать, но если вы оставите телефончик, то с вами свяжется менеджер.
Как понять, что ваш интерфейс — надежный?
- Пути пользователя (user flow) подробно проработаны, прорисованы схемы его конкретных шагов по кнопкам, пунктам меню и страницам в процессе достижения цели. Если этот путь хорошо проработан, то само взаимодействие с интерфейсом будет как бы вести пользователя в нужном направлении и поддерживать его.
- Пользователь получает понятные сообщения в случае ошибки с указанием, что делать дальше.
- Поиск в интерфейсе расположен на видном месте, им удобно пользоваться и он правильно настроен.
- Формы прекрасны: не содержат лишних полей, подсказывают пользователю, как заполнять их, на ходу сообщают об ошибках, после заполнения вежливо благодарят.
И незачем так орать
- Пользователя не заставляют заполнять заново или вспоминать то, что он уже сделал.
- Все, что можно автоматизировать, автоматизировано.
- Создана страница 404, на ней есть ссылки, чтобы не оставлять пользователя в тупике.
- Дизайн не снижает производительность сайта.
- Юзабилити регулярно и внимательно тестируется.
Если кратко: ценим время и силы пользователя и создаём точки опоры в каждом сценарии.
Эмпатия
Эмпатия в дизайне — это способность сопереживать пользователю, поддерживать его или как минимум не быть к нему жестоким. Ваш продукт должен вести себя этично и не применять так называемые тёмные паттерны/
Тёмные паттерны в UX-дизайне представляют собой техники манипуляции, склоняющие пользователей к совершению действий, которые им не нужны. Такие паттерны построены на использовании особенностей человеческой психологии с целью получения выгоды. Они подрывают доверие и вызывают стресс.
Сам термин придумал дизайнер Гарри Бринулл. Он создал сайт Deceptive Design, на котором разместил библиотеку таких приёмов. Рассмотрим некоторые из них.
Тёмные паттерны в UX-дизайне представляют собой техники манипуляции, склоняющие пользователей к совершению действий, которые им не нужны. Такие паттерны построены на использовании особенностей человеческой психологии с целью получения выгоды. Они подрывают доверие и вызывают стресс.
Сам термин придумал дизайнер Гарри Бринулл. Он создал сайт Deceptive Design, на котором разместил библиотеку таких приёмов. Рассмотрим некоторые из них.
Вопросы с подвохом
Это приём, при котором текст, например, на чекбоксе сформулирован настолько двусмысленно или запутанно, что его невозможно понять, не прочитав как минимум дважды.
Сложности с выходом из сценария (roach motel)
Какое-то действие, например оформление подписки, совершить очень просто, а отменить его намного сложнее.
Думаю, все сталкивались с этим увлекательным квестом. К примеру, вот как устроена отмена подписки на Яндексе Плюс.
Думаю, все сталкивались с этим увлекательным квестом. К примеру, вот как устроена отмена подписки на Яндексе Плюс.
Это не самый ужасный пример, но показательный. Пользователю нужно совершить цепочку из нескольких действий, чтобы отказаться от подписки, и на каждом этапе его пытаются отвлечь.
Переключение внимания
Использование более крупных и заметных элементов, чтобы отвлечь внимание от менее заметных. Например, большая кнопка для покупки дополнительных услуг и маленькая, незаметная — чтобы отказаться.
Предпочтения по умолчанию
Заранее включенные тоглы и проставленные галочки в чекбоксах — это тоже вид манипуляции.
Ложная срочность или дефицит
Сюда относятся таймеры обратного отсчёта до окончания акции, упоминания о том, что товар вот-вот закончится, призывы «купить, пока есть в наличии».
Навязывание и бесконечные уведомления
В качестве примера можно привести всплывающее окно, которое предлагает подписаться или напомнить позже. Варианта отказаться совсем не предусмотрено, так что вы только выигрываете немного времени, прежде чем увидите это окно снова.
Например, приложение Yazio для подсчёта калорий вообще не предлагает заметных вариантов для выбора. Мы видим только кнопку Продолжить, которая ведёт к оплате, а крестик даёт вам покой ровно до следующей попытки ввести съеденные продукты. В своё время я отказалась от приложения именно по этой причине, несмотря на очень крутые функциональные возможности и приятный интерфейс.
Например, приложение Yazio для подсчёта калорий вообще не предлагает заметных вариантов для выбора. Мы видим только кнопку Продолжить, которая ведёт к оплате, а крестик даёт вам покой ровно до следующей попытки ввести съеденные продукты. В своё время я отказалась от приложения именно по этой причине, несмотря на очень крутые функциональные возможности и приятный интерфейс.
Манипуляции чувствами
Сообщения составляются таким образом, чтобы заставить пользователя чувствовать себя виноватым, если он не выберет выгодный для продавца вариант.
Например, просьба подписаться на рассылку формулируется вежливо и доброжелательно, а текст на кнопке отказа от рассылки составлен максимально грубо.
Например, просьба подписаться на рассылку формулируется вежливо и доброжелательно, а текст на кнопке отказа от рассылки составлен максимально грубо.
Пуш от фитнес-приложения
Итак, ваш дизайн эмпатичный, если:
Если кратко: проявляем человечность и создаём комфортную обстановку.
- дизайн не использует тёмные паттерны и остаётся этичным;
- дизайн заботится о пользователе: подсказывает, напоминает, благодарит;
- визуал бережно относится к пользователю: цвета гармоничны, текст читабелен, контрастность соблюдена, анимации достаточно плавные и ненавязчивые.
Если кратко: проявляем человечность и создаём комфортную обстановку.
Последовательность
С точки зрения психологии, это свойство мозга придерживаться ранее принятой модели поведения. Мы немного говорили об этом в части про прайминг.
Последовательность с точки зрения дизайна — это способ организации общей структуры и отдельных элементов интерфейса таким образом, чтобы на каждом уровне и этапе ощущалась логичность и поддерживались устоявшиеся стандарты. Пользователю должно быть максимально ясно, где он находится в данный момент и как отсюда выйти, что ему делать и что последует за этим действием.
Как сделать сайт последовательным:
Последовательность с точки зрения дизайна — это способ организации общей структуры и отдельных элементов интерфейса таким образом, чтобы на каждом уровне и этапе ощущалась логичность и поддерживались устоявшиеся стандарты. Пользователю должно быть максимально ясно, где он находится в данный момент и как отсюда выйти, что ему делать и что последует за этим действием.
Как сделать сайт последовательным:
- Соблюдать консистентность. Элементы одного типа выглядят и ведут себя одинаково на всех страницах и экранах. Кнопки, пункты меню и элементы навигации располагаются на привычных для юзера местах.
Четыре вида скруглений у однородных элементов на одном экране
- Соблюдать иерархию. Информация организуется по важности, то есть самые главные элементы видны сразу или легко находятся. Иерархию важно поддерживать для всех элементов дизайна: изображений, отступов, шрифтов и т. д.
- Информация предоставляется порционно. Нужно выдавать информацию постепенно, а также двигаться от простого к сложному, от краткого к детальному. Скрывайте дополнительный контент, чтобы не перегружать мозг пользователя.
- Если мы говорим об отдельных элементах, которые можно сюда отнести, то это, например, хлебные крошки, которые помогают пользователю ориентироваться, индикаторы прогресса или нумерация шагов. Если блок или форма состоит из нескольких экранов, то на каждом должна быть как кнопка Далее, так и кнопка Назад.
Если кратко: повышаем уровень воспринимаемого контроля у пользователя.
Прозрачность
Интерфейс можно считать прозрачным, если он согласуется со следующими идеями:
- Здоровый минимализм. Убрать ненужное и избыточное, оставить только то, что необходимо. Таким образом мы снизим когнитивную нагрузку на пользователя.
- Упрощение. Нужно разбить сложное на части и оптимизировать количество предлагаемых вариантов.
- Стремление избавить человека от неопредёленности. Использовать максимально чёткие, лаконичные и понятные формулировки. То же самое про иконки с подписями. Все интерактивные элементы должны быть узнаваемы, легко доступны и откликаться на действия.
- Отзывчивость. Каждое действие пользователя должно заканчиваться реакцией на него. Например, если он отправил форму, нужно обязательно сообщить ему, что всё прошло успешно.
Операция не прошла, но иконка или текст на кнопках не помогут пользователю это понять
Если кратко: снижаем когнитивную нагрузку и устраняем неопределённость.
Примеры интерфейсов, которые помогают ориентироваться в хаосе
Теперь давайте немного отдохнём и посмотрим картиночки. Я собрала несколько примеров интерфейсов, которые проявляют заботу о своём пользователе.
Испанская телекоммуникационная компания Telefónica. По-хорошему минималистичный сайт с красивыми цветами, залипательной анимацией и продуманной навигацией.
Итальянский бренд БАДов Moooor. Эстетичный интерфейс в релакс-гамме. Карточки с товаром нетрадиционные, но это не мешает восприятию.
Агентство диджитал-дизайна Embacy. В дизайне заложено много воздуха, но при этом структура страницы остается четкой. Подобраны хорошие шрифты.
Бельгийский отель Demimaisons. Гармоничные сочетание актуальных цветов. Крутое меню с крупным шрифтом и включением природных элементов.
Интернет-магазин уходовой косметики из США Beauty. Минималистичный приглушённый дизайн, который играет роль фона для крупных чётких фото товаров.
Детская клиника из Омска «До 16-ти». Сложная форма записи на приём разбита на шаги. Есть индикация того, на каком этапе находится пользователь — можно вернуться на шаг назад. Делали мы.
Видеохостинг предлагает установить напоминалки о проведённом в приложении времени, чтобы сделать перерыв или вовремя лечь спать.
Онлайн-кинотеатр Okko присылает уведомление о скором окончании пробного периода, прежде чем продлить подписку автоматически.
Видеосервис Wink. Для пользователя нормально испытывать беспокойство при оформлении подписки — мы все научены горьким опытом обманчивых бесплатных периодов и мелкого шрифта. Поэтому Wink максимально чётко и понятно излагает её условия прямо в процессе регистрации и подтверждает успешное оформление с помощью модального окошка.
Приложения российских маркетплейсов. Купер (СберМаркет) предупреждает, что сумма заказа может измениться из-за весовых товаров. Самокат уточняет адрес, сравнивая его с тем, куда вы обычно заказываете. Золотое яблоко считает, сколько осталось до бесплатной доставки.
Заключение
Становится очевидно, что цели бизнеса и интересы пользователя не могут противоречить друг другу, и чем больше заботы мы вложим в свой продукт, тем выгоднее это будет для всех. Именно благодаря вниманию к потребностям пользователей компании получают возможность адаптироваться и расти. В долгосрочной перспективе успешный бизнес — это тот, который умеет сочетать свои интересы с интересами своих клиентов.