Технозависимость

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

Технологии в чистом виде не решают задачу. Когда технология «проступает» в интерфейсе, определяет то, каким он будет, это приводит к проблемам пользователей.

В форме поиска пациента слева нужно заполнить целый формуляр. Есть поля «Фамилия», «Имя», «Отчество», «Пол» и «Год рождения». Если указать фамилию в поле «Имя», ничего не будет найдено. Эта форма так устроена, потому что так же устроена база данных пациентов, и запрос к базе намного проще сконструировать, механически подставив значения полей.

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

Аналогичная проблема долгое время была в музыкальном интернет‑магазине «Битпорт». Там было одно поисковое поле, но в его углу была выпадайка, где ты выбирал, искать ли по исполнителям, альбомам или песням. В результате запрос Infected Mushroom мог не дать результатов, потому что человек не заметил, что искал в альбомах, а не в исполнителях. На современном сайте это было исправлено.

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

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

В мире приложений Адоба есть (или был) некий хелп‑менеджер:

Это чтобы управлять какими‑то пакетами документации по приложениям. Тут пять разделов, три из которых — настройка, а один — эбаут! В четвёртом разделе собственно управление документацией. Тут какие‑то разделы документации, видимо их можно как‑то скачивать и обновлять. Почему я вообще должен об этом задумываться, что‑то тут делать? Снова, не существует такой задачи как «управлять документацией».

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

Старинная программа «Сервисдеск» выводит абсурдное сообщение об ошибке: «Переход из состояния „Разрешён“ в состояние „Разрешён“ не разрешён» —

Здесь в интерфейс пробрался внутренний граф состояний и переходов. Интерфейс бездумно выводит сообщение об ошибке, поступившее из кода, споткнувшегося о бессмысленный переход.

А вот как сайт Шереметьева сортирует рейсы по дате, с которой они начинают действовать:

После 13 февраля идёт 13 января, потому обе даты начинаются на 13, а „я“ по алфавиту после „ф“; затем идёт 14 января. Здесь использован однажды разработанный код для таблиц с функцией сортировки по любой из колонок. Проблема в том, что код не знает о смысле данных и относится к ним как к тексту. Из‑за этого сначала идут все 13‑е числа, потом 14‑е, потом 15‑е и т. д. Но сортировать таким образом даты нет смысла.

Подобная же штука из другого интерфейса:

Тоже месяцы отсортированы по алфавиту.

А вот ещё пример, это про насильственную классификацию:

У «Авито» объявления организованы по категориям. Когда подаёшь объявление, надо выбрать категорию. Но я не понимаю, как её выбрать. Вот продаю я какие‑нибудь электронные весы. Что это, личные вещи, для дома и дачи или электроника? Самое тупое, что неправильно отвечать нельзя, у меня не раз было, что объявление заворачивали при модерации за «неправильный выбор категории». Модератор знает, что надо было выбрать, но не выбирает сам и мне не говорит.

Ещё насильственная классификация. Эпл решил провести опрос:

Мне просто 38 лет, это простое число, которое я могу ввести. Если вам для каких‑то маркетинговых целей надо меня в категорию отнести, я‑то тут при чём?

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

В библиотеке софта перед тем, как что‑то искать, нужно поиск настроить (правый верхний угол):

Нужно выбрать, хочешь ли ты, чтобы у тебя находилось любое слово, все слова или фраза целиком, а также указать поля, в которых необходимо искать: название, автор, описание. Фактически это конструктор SQL‑запроса. Нужно даже логический оператор выбрать.

Здесь ещё и проблема с теорией близости: чекбоксы и радиокнопки, расположенные друг под другом, кажутся относящимися друг к другу.

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

Мы с вами поговорили про насильственную классификацию, когда тебе нужно себя или свой товар отнести к какой‑то категории. А теперь посмотрим на это с другой стороны, иногда в интерфейсе что‑то есть, но чтобы до него добраться, тебе надо догадаться, как авторы это классифицировали.

В «Советы» прислали дизайн сайта русских мини‑отелей:

Слева нужно выбрать регион, это отфильтрует список городов справа. Многие думают, что Челябинск — в Сибири, хотя это Урал. А я как житель Челябинска, наоборот, не отличаю Центр от Поволжья. Это уже источник ошибок. Далее справа нужно выбрать город, район города, количество звёзд отеля, диапазон цен, и только потом можно будет посмотреть результаты. Откуда я знаю, какие там районы в Выдропужске? А три звезды в Выдропужске на что похожи? А как вписать цену, на какой уровень вообще ориентироваться?

Когда видишь такой интерфейс, сразу кажется, что когда всё заполнишь, тебе в конце скажут что‑нибудь вроде «По вашему запросу не найдено ни одного объекта, попробуйте изменить критерии поиска».

Как раз вот такое принуждение к тому, чтобы сначала настроить фильтры — один из признаков технозависимости. Как с этим бороться?

Вот вариант поиска отелей, предложенный Артёмом Горбуновым:

Здесь одно поле, в которое можно написать что угодно, например, «Москва, Тверская, ***». Когда ты видишь результаты поиска, ты можешь его подстроить: с помощью ползунков справа изменить ограничение по цене или звёздам. Видишь, что отели какие‑то невзрачные — добавил звёзд. Или, видишь, что слишком дорого — убавил цену. Логичный следующий шаг — показывать какие‑то отели ещё до того, как человек воспользовался поиском.

Универсальное и единое поле поиска удобно, но может озадачить неопытного пользователя как предложение написать заявление «в свободной форме». Хорошо, когда есть образец. Поэтому, чтобы человек знал, что можно туда писать, под полем дан пример. Заодно на сам этот вариант можно ткнуть.

Сайт «Сонгбмп» показывает скорость разных песен в ударах в минуту. Тут под полем не просто дан пример запроса, а даже сразу показан ответ на него:

Действительно, если ответ — это всего одно число «96», то почему бы его сразу здесь не показать.

Дизайн Артёма Горбунова выше — это иллюстрация принципа

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

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

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

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

Вот ещё пример из нашего проекта, приставки «Электронного города»:

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

Это какие‑то программы — конвертеры единиц и валют:

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

С точки зрения программиста тут всё логично: для перевода нужно знать исходную и целевую единицу. Единиц много, и не из любой в любую можно перевести. Они распадаются на категории, внутри которых переводы возможны. Кажется, что мир так и устроен.

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

А вот Ангстрем, который мы сделали с Шуриком Бабаевым:

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

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

Так теряются логические связи между функциями, которые могут иметь сложную многомерную структуру.

Классика:

Такая настройка тулбаров ни к какой задаче пользователя никакого отношения не имеет.

Аналогичный пример — стопка тулбаров Гугль‑хрома:

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

Ничем не лучше механическая упаковка всех функций программы в единое древовидное меню. Может, кто‑то из вас помнит такие древние интерфейсы:

Может показаться, что сейчас так уже не делают, но на самом делают ещё как, просто выглядит это посовременнее. Пример — настройка уведомлений на Айфоне буквально несколько версий назад:

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

При этом все эти параметры не связаны с задачами пользователя. Было бы полезно получать уведомления от одних людей и не получать от других — независимо от приложения, но так настроить нельзя. Когда приходит раздражающее уведомление, была бы полезна кнопка «никогда такое не показывать», но такого долгое время не было. Если уведомление пришло во время встречи, хочется кнопку «напомнить после встречи». Когда ставишь будильник, не хватает тумблера «и заодно отключить уведомления до утра». Какие‑то из этих вещей начали появляться лишь в 12‑й версии Ай‑ОСа.

Формальная структура дерева также удобна программисту, но не пользователю.

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

Вот типичная картина, когда интерфейс просто вывел кучу объектов, хотя для человека в этом нет никакого смысла:

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

Но если вариантов пятьдесят, так получится слишком длинная страница, поэтому захочется всё классифицировать — разделить по городам и отелям:

Когда вариантов пятьсот, даже такое представление становится сложным. Появляется более сложная иерархия и навигация по разным параметрам:

А когда вариантов становится пять тысяч, даже в такой иерархии становится сложно что‑то подобрать — появляются фильтры, инструменты подбора по разным параметрам:

Тут важно не забыть про принцип «Сначала данные, потом фильтры», о котором говорили выше.

Когда появился первый Айфон, Эплы учитывали идею о разном отображении разного числа элементов в телефонной книжке, но потом это сломали. Вот как обычно выглядит, когда у вас много записей в телефонной книжке. Между записями появляются «жёрдочки» с буквами алфавита:

К сожалению, в современном Айфоне жёрдочки эти появляются, даже если у вас всего шесть человек записано:

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

Это один из студенческих проектов, сайт для заказа пиццы:

По заданию у этой пиццерии всего семь видов пицц, но многие это пропускают и сразу дизайнят как будто пицц N. С одной стороны, это дальновидно. Дизайн должен выдерживать какие‑то изменения. Но с другой, какие эти изменения будут? Вряд ли у пиццерии с 7 пиццами вдруг их станет 700. Может, 10. А тут и сортировка, и фильтры по диете. Как будто задизайнили не то, что нужно, а какой‑то универсальный сайт по доставке чего угодно. Даже в исходной выдаче показано 12 пицц.

Вот мой проект интерфейса для приложения охранной компании «Варяг»:

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

А вот Клабхаус — такая соцсеть для голосового общения в «комнатах» в реальном времени:

По мере развития технологий, их «убирают под капот», то есть делают так, чтобы человек получал от них пользу, не видя их напрямую. Когда‑то модемы при соединении издавали характерный шум, а сегодня соединение с интернетом постоянно и беззвучно.

Иногда мы сталкиваемся с чем‑то таким:

Очевидно, что там какая‑то серьёзная проблема в том, как всё устроено, и одной волей дизайнера всё не исправить. Но нужно постепенно распутать этот узел.

Вот пример из Вотсапа. Не знаю, зачем люди им пользуются, но иногда приходится. Как‑то там устроено соединение, что почему‑то он не может сразу работать и на телефоне, и на компе. Когда заходишь с компьютера, он пишет такое:

Невозможно понять, в чём вообще вопрос, и почему один из вариантов ответа — это лог аут. Разумеется единственный правильный ответ — Use here, я ж как раз тут его запустил, тем самым уже выразив желание использовать его здесь! Но дальше надо допилить, чтобы не было такого ограничения вообще.

Вот это история про пропускной режим во время пандемии в Москве. Был период, когда на улицу можно было только по пропуску, а чтобы его получить нужно было отправить смс:

И вот результат:

С такой инструкцией — не мудрено! Если срочно нужно за ночь запустить такую штуку в Москве, наверное, можно в качестве временной меры использовать такое. Но следом нужно быстро заменить на что‑то более человечное.

Икона технозависимости — куаркод:

Когда‑то людям казалось крутым, что при наведении на куаркод рядом с картиной в музее можно прочитать подробную информацию о ней. А сегодня технологии распознавания образов такие, что уже можно просто навести на саму картину безо всяких куаркодов.

Стоит стремиться к тому, чтобы всё, что даёт куаркод, работало и без него.

У Эпла вот совмещённый вариант:

Если у тебя Айфон, достаточно прикоснуться, а если что‑то другое, то придётся камерой сканировать куаркод.

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