Интерфейсы в реальном мире: страховка от ошибок пользователя

33f6a9c44d3f49438b234fb7ec6cdf17.jpeg
В Екатеринбурге в одном из зданий для международных конференций есть проблема с «немного глупыми» иностранцами. Говорят, такие же автоматы начали ставить в Москве.

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

98c4296fbdd447048ce95f3a11e9676b.jpeg

Начнём со специальной клавиатурной чашки.

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

А вот третий тип безопасности:

a1acac2df5a14c849bc5bc3a36e42c2a.jpeg

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

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

Бывают случаи, когда ошибки критичны, и необходимость следовать правилам — сама суть интерфейса:

24dbef4aaf3546a2900dfed4368f5cf8.jpeg

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

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

3f793bdee41c4dd59ed0b175b2caee27.jpeg

Кстати, она очень помогает и пешеходам — перебегателей в неположенном месте становится на два порядка меньше.

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

f7c73b1e26934ed5aa409c759940b34b.jpeg

Сворачивают они её прямо на кассе из плоского листа. Магазину ещё выгода — это один из немногих видов рекламы алкоголя социальным доказательством (ведь вы несёте его не в пакете).

Вот ещё одна очень крутая штука — мягкая рекомендация, как складывать и раскладывать карту.

f1b006ab3a9f46538d52b1f5d49c2ee8.jpeg

Ничего удобнее я ещё не встречал.

Следующая штука — дистанционный вызывник, он же радиоустройство, которое можно «зажечь» удалённо. Самое крутое использование я видел в аэропорту Кангерлуссаака в Гренландии — там после приземления «Боинга» начиналась DDoS-атака на столовую. Чтобы вы понимали суть проблемы, Кангерлуссак — специальный город для этого аэропорта. Прибывающий самолёт удваивает население на несколько часов, пока всех не раскидают по острову вертолётами и моторными самолётами типа наших ЛИ-2, только современнее. Так вот. В столовой вам дают эту штуку. Можете гулять по аэропорту и окружающему полю или сидеть за столиком. Заказ готов — она загорается и пищит. Вы идёте и меняете свой «номерок» на еду.

bfa6ba24682a4fed8013b1e0229cee34.jpeg

Очевидно, что этот прибор не только убирает типовые ошибки (взял не тот заказ, постоянно доставал вопросами, когда будет готово), задерживающими работу столовой, но и, в целом, повышает удобство пользователей. Обратная сторона медали — этой штукой ещё надо научиться пользоваться, и вопросы «А что это» тоже могут задержать работу.

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

296e2f0449d64f64a69956ba516c4285.jpeg

Они встречаются почти во всех бывших колониях Англии и в самом содружестве. Смысл в том, что даже если сделать звонок в такси бесплатным на городском (взяв местный аналог нашего номера 8–800), вам придётся объяснять человеку, что звонок бесплатный, что надо набрать трубку и так далее. И рядом вешать плакат размером с этот телефон. А здесь — нажал кнопку и позвонил. Всё. Теперь обратите внимание на то, что для удешевления нет трубки, только встроенный динамик. Видите, как они круто иконкой решили вопрос? Благодаря ей сразу понятно, что это.

Если вам ещё не очень точно понятно, почему упрощение увеличением количества элементов работает, смотрите вот на эту штуку:

8b40f35070d040b5b4a04e42a12b3a73.jpeg

Это два обогревающих контура одной масляной системы, оба по 750 Ватт. Можно включить левый, можно правый, можно оба. Индикация сверху пытается донести до нас, что I+II=III. Даже если I и II имеют разную мощность в других моделях, нужно делать проще. Смотрите, вот что сейчас:

0b25626872f940679976332e60304150.png

Если бы нагреватели были разными по мощности, можно было бы улучшить так:

f76fa11f31d3478f99025658ed59fa92.png

Идём дальше, можно реализовать это радиокнопками, как часто делают вентиляторах.

6b944f96b8b147de9c57ee7107086b8c.png

Здесь плохо, что модальное состояние «выключен» в одному ряду с остальным (также как у упомянутых вентиляторов подсветка в ряду с другими радиокнопками). Можно сделать вот так, поменяв скорость управления на защиту от ошибок:

81b5f3639f6945d4b98dbd6b590c142b.png

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

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

164612146fa04a928af33de73415caa1.jpg

Как видите в примерах раньше, очень важно понимать по внешнему виду, что с объектом происходит и как. Это же один из важных подвидов защиты пользователей от ошибок — правильное информирование о статусе (то же самое работает в навигации — важны вопросы не только «почему туда нельзя», и не только «куда мне идти», но и «где я сейчас» и «сколько осталось»). Пример правильного подхода — почтовый ящик:

288406f6290247858bae5be965bd4938.jpeg

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

А вот пример ошибки статуса (я вообще в восторге от этой подписи):

ad55cd8b9db944bab60ce40b769faa1a.jpeg
Что это было, кэп?

А вот костыльное, но очень полезное уточнение значений чисел давления для бака:

7c0aeea7e1204609811061e64ffdc819.jpeg

Вот типовые защиты для разных открывающихся элементов, они тоже очень поучительны:

2d77f6d1c70245d4a9b8cd8896f74317.jpeg

Чтобы открыть сидение, нужно поднять со щелчком кольцо. Аналогичный элемент управления в iOS6 действует для удаления: сначала разблокируем возможность, потом делаем:

57afc2a660ca496f97649b98893881d4.jpeg

Вот это шлюз для овцы перед пастбищем: у вас не получится одновременно открыть обе створки, чтобы скотина выбежала:

6ded817a57a94bebb14983a84bacc2e7.jpeg

Запор там не менее примечателен:

51309de6666a457d9b69f429f335a6f0.jpeg

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

5315c05383d6450d8c66a44ba4a489df.jpeg

Не поверите, но тот же принцип может применяться для повара. Смотрите, какая штука:

ada722aa6cde480d9bd347a0930e3642.jpeg

А вот прекрасная индикация глубины ямы из моей родной Астрахани (фото я взял из группы автомобилистов):

0400083a9c4e43808df7b78e4e647b21.jpeg

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

Вот прекрасное использование малозначимых элементов протокола для донесения сообщения. Здесь в почте могло бы быть info@, но сделали куда круче:

a23e64cab23245519ee760c6d04b472e.jpeg

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

b5824ed12b3d4d98aa5326c4b7e9d3af.jpeg

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

185ccb25d7814320bdb7f97e5bba2273.jpeg

Аффорданс на накопителе. Эмблема батареи на батарее — это очень круто. По ней сразу понятно, где верх, где низ.

4590f88752e34a168b137898eaaf7bf7.jpeg
На втором моём банке просто четыре светодиода, на третьем светодиод один, но мигает чем чаще, тем больше заряд — это вообще ужасно.

Костыль для тех, кто не умеет складывать приборы в открытые длинные ящики:

634254719b8f4eac82690dc13432e0a3.jpeg

В этой раковине вы никогда не обожжётесь из-за того, что вода внезапно стала слишком горячей. Зато нам с вами пользоваться ей очень, очень странно:

e3757145d1584a06b2881f6f360ca98c.jpeg
В Англии правильный сценарий — закрыть пробку, смешать воду нужной температуры, поплескаться, спустить воду.

Два прекрасных автомата на выходе из торгового центра:

e527361143964fadbbb9874befebd214.jpeg
Город с очень большим количеством пенсионеров — отсюда удобнейшая доставка тяжелых вещей.

616a32cac411419ca42899e091055e3a.jpeg
Сыпете мелочь, получаете бумажные деньги

Очень странная штука:

e4d2fcab8b0c4886826756eda93ec445.jpeg
Кажется, здесь ветрено

А вот автомат самообслуживания в Порт Эллене:

da5ae7abffec4962a62554a68cb1db1e.jpeg

Москва, парковка, самой своей формой показывающая, как ей пользоваться:

d05d0bdab7434ece99c3f4b8eb762859.jpeg

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

b7c4145f37a245b09570cc35bd3d5334.jpeg
У нас есть ближайший аналог — большой «Улей» и его дорожная версия: коробка и мешок

И, наконец, маленький шедевр:

8d95504b7b12454383a6d8c3685fd220.jpeg

Белый камень под светящимся маркером входа в марину (бухту) — это очень предусмотрительно и заботливо.

Вот тут предыдущие три серии.

Комментарии (1)

  • 1 сентября 2016 в 10:14

    0

    Как всегда — просто супер мега интересно! Спасибо вам! Никогда бы не подумал что можно так интересно рассказывать о устройстве умывальников и кнопок на станках.

© Habrahabr.ru