Логические ошибки в интерфейсах

Дизайнер диджитал-агентства «Далее» рассказывает, зачем вам знать законы Аристотеля и как они помогают делать интерфейсы удобнее.

Эта статья была опубликована в Skillbox Media. Дублируем текст для наших подписчиков на vc.ru.

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

В этой статье дизайнер Борис Бессонов рассказывает, как дизайнеру использовать логические законы в своей работе.

У меня была своя схема работы над интерфейсами: здравый смысл + мои обычные рабочие паттерны + эмпатия в общении с заказчиком. Она работала ровно до того момента, как проекты стали сложнее обычных сайтов-визиток и лендингов. Тут уже вскрылась её неэффективность.

Дело в том, что здравый смысл — логический минимум, который дан каждому. Чтобы дорасти до уровня senior и арт-дирекшена дизайнеру нужно более чёткое представление о работе сложных систем: сайтов, приложений, софта, панелей управления.

Я заметил закономерности в ошибках, которые допускаю, и задался несколькими вопросами:

Чтобы решать проблемы интерфейса, дизайнеру нужно уметь рассуждать логически. По системе Аристотеля, любой силлогизм состоит из суждений. В их формулировке важна структура — она должна включать субъект, предикат, связку и квантор.

Пример:

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

Аристотель впервые сформулировал три из четырёх законов логики, автор последнего — немецкий учёный Готфрид Лейбниц:

Разберём каждый по порядку в контексте дизайна.

Нарушения закона тождества

Подмена понятий

Когда создатели пишут «Попробуйте семь дней бесплатно», при этом через неделю списываются деньги. Может показаться, что противоречия нет — в утверждении ничего не сказано о том, что вторая неделя тоже будет бесплатной. Но это не так. По факту пользователь считает, что у него есть семь дней, а затем доступ к сервису просто закроется.

Вспомните негативные отзывы в App Store и Google Play, где люди пишут об обмане и требуют вернуть списанные после пробного периода средства. Причём фраза «Попробуйте бесплатно» могла быть написана без задних мыслей и желания обмануть клиентов, а по итогу стоит продукту репутации.

Неопределённость

Посмотрите на интерфейс WhatsApp и «ВКонтакте». У первого много нарушений, у второго их почти нет:

Допустим, пользователь установил приложение WhatsApp, начал его изучать и зашёл в параметры конфиденциальности. Интерфейс сообщает: «Вы сейчас в настройках конфиденциальности и можете изменить раздел «Был(-а)», фото профиля...». Если пользователь не знаком с абстракцией настроек конфиденциальности, то посчитает, что на этой странице можно поставить дату последнего визита или загрузить фото профиля.

Формируем суждение: в конфиденциальности можно изменить раздел «Был(-а)», фото профиля, сведения, группы и статус»

Теперь указываем на логические противоречия:

1. Интерфейс говорит, что можно изменить раздел «Был(-а)». Но на деле кнопка изменяет группу людей, которые могут видеть время последнего сеанса. Создаётся логическое противоречие, а поскольку суждения не могут быть одновременно истинными, истинно только одно.

2. Интерфейс говорит, что можно изменить фото профиля. По факту кнопка изменяет группу тех, кто может видеть фото профиля.

Исправляем: «Вы сейчас в настройках конфиденциальности и можете изменить, кому показывать, когда вы были». Если руководствоваться логикой, то получится нечто похожее. Дольше, сложнее, зато точно и без абстракций. На скриншоте интерфейса «ВКонтакте» так и сделано — на понятном и логичном для пользователя языке.

Вот ещё пример. Обратите внимание на поиск в правой верхней части интерфейса. Что думает пользователь, когда видит его: «Поиск ведётся только по содержанию выбранной заметки? Если да, то где поисковик по списку заметок?» На самом деле это и есть поиск по списку заметок. По содержанию активной заметки он не ищет.

Несоответствие между утверждениями и реальностью

В интерфейсах не стоит применять кликбейтные заголовки или обратные счётчики, поскольку они тоже нарушают закон тождества (сейчас возмутятся маркетологи). Почему так: например, обратные счётчики могут убеждать клиента в том, что товар закончится по истечении срока. На самом деле это не так: сложно спрогнозировать, точно ли раскупят товар к конкретному времени. Или маркетолог может сознательно обманывать: счётчик указывает на окончание скидки, а после того как он обнулился, скидка действует ещё некоторое время.

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

На правой иллюстрации — пример с множеством кнопок «Скачать», из которых большая часть ведёт на рекламу. На левой иллюстрации пример прямой логической ошибки: кнопка заявляет — «Получить бесплатно», а внизу мелким шрифтом написана цена за обязательные услуги.

Исключения из закона тождества

Закон тождества можно и нужно нарушать, если пользователи уже привыкли заменять одно понятие другим или если это упрощает жизнь.

Например, наличие брендбука исключает свободный выбор стиля, минимализм не ладит с высокой детализацией, а ограниченное пространство — с большим объёмом информации. Вроде бы простой закон, нарушение которого легко распознать в дизайне, но и здесь он встречается относительно часто.

Вот распространённые примеры нарушения этого закона:

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

На главной странице обилие видео ломает вёрстку, пользователь не понимает, что происходит, почему курсор предлагает перейти именно на страницу «Карьера»:

Исключения из закона противоречия

Закон позволяет системе быть предсказуемой и простой для понимания. Например, пользователь может быть либо авторизован, либо нет; кнопка может быть или кликабельной, или некликабельной; а пароль — верным или неверным.

Нарушения закона исключения третьего

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

1. Пользователя нужно уведомить, что товар закончился.

2. Объяснить, почему так вышло, и извиниться.

3. Оформить возврат средств.

4. Найти и предложить замену.

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

Автоматически добавляются функции или товары, которые пользователь не выбирал. Пример: кнопка «Оформить билет на рейс» добавляет не только выбранную услугу, но и платную страховку, дополнительный багаж или обед. А если следовать логике, то может быть лишь два сценария:

1. При нажатии на кнопку товар (билет на рейс) добавился в корзину.

2. Если кнопку не нажали, то ничего не произошло.

Другой пример: мало кто читает пользовательские соглашения, обычно сразу ставят галочку и переходят к следующему шагу. Это нормально: за день мы можем оформить заказ, скачать приложение или авторизоваться в новом сервисе. Читать каждый документ нет времени.

Некоторые сервисы стали автоматически проставлять согласие с условиями пользования. В этом есть резон: всё равно их мало кто читает. Ещё в 2011 году проводилось исследование о глубине просмотра лицензионных соглашений, и уже тогда только 8% человек дочитывали их до конца.

Так в чём ошибка? А в том, что Общий регламент по защите данных (GDPR) требует, чтобы галочка согласия ставилась активным действием пользователя. Если она поставлена заранее, то это противоречие требованиям регламента.

Вот ещё любопытный пример:

На скриншоте кнопка «Очистить» активна, несмотря на то что ничего не выбрано. У пользователя возникает два вопроса:

Исключения из закона исключения третьего

Закон нарушается, потому что мы часто пропускаем мелкие, но решающие детали или слишком опираемся на свой опыт, считая его универсальным.

Примеры случайного нарушения закона:

Примеры намеренного нарушения закона:

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

Научная логика не свойственна человеку от природы. Она требует самостоятельных вычислений, концентрации, а значит, энергии, внимания и времени. Поэтому её лучше применять для решения сложных задач. Дизайнер может использовать логику не только перед началом проектирования, но и в готовом интерфейсе для устранения логических противоречий. Ещё одна сфера применения — качественные и количественные исследования.

Логика полезна, когда функционал интерфейса должен выдавать разный результат в зависимости от действия пользователя:

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