Pull to refresh
0

Почему так сложно сделать хороший пользовательский интерфейс?

Reading time 5 min
Views 32K
Original author: Mark Miller
Перевод статьи Марка Миллера: Why is Great UI so hard to achieve?

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

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

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



Слева находится кнопка топливного насоса, которая позволяет выбрать наиболее популярный сорт бензина в Соединенных Штатах. Справа — кнопка для выбора менее популярного и более дорогого сорта бензина. Эрозию слева можно рассматривать как показатель частоты и места нажатия кнопки. Ясно, что люди, которые нажимали на кнопку слева, хотели бы видеть её более крупной, чем предлагаемая им область «Push Here» («Нажать Сюда»).

Давайте изменим этот интерфейс, но при этом сохраним его суть:



Вот список изменений (мы объясним причины таких изменений в будущих статьях):
  • «GRADE SELECT» (выбор сорта) преобразованно в менее шумное «Grade Select».
  • «Grade Select» — удалили лишнее подчёркивание снизу.
  • Удалили лишний текст «Grade Select».
  • Удалили табы с текстом «Grade Select».
  • Увеличили размеры кнопки и добавили низкоконтрастный бордюр.
  • Уменьшили контрастность надписи «Push Here» («Нажать Сюда»).
  • Увеличили контрастность между текстом Regular, Plus и фоном.

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

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

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

Но всё-таки клавиша пробел выжила, она крупная и её легко нажимать любым из больших пальцев. И поэтому мне эта клавиша очень нравится.

Несколько примеров


Представим, что вам нужно добраться до того перекрёстка справа. Какой путь вы предпочтёте?



Слева красным цветом подсвечена задумка дизайнера. Справа синим цветом показан более эффективный путь.



Мы имеем дело с доказательством того, что люди выбирают эффективность, нежели более качественное асфальтированное покрытие.

Вы смотрите телевизор. Вам нужно переключить канал и еще изменить громкость. Какой пульт дистанционного управления вы бы предпочли держать в руке?



Какой пульт вы бы выбрали для того, чтобы изменить громкость?



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



Также эти горизонтальные и вертикальные направления не согласованы и требуют некоторой ментальной тренировки для того, чтобы к ним привыкнуть. Кроме того, визуальный вес (форма, размер, контраст) этих кнопок идентичен практически всем остальным элементам управления на этом пульте, включая редко нажимаемые клавиши, отмеченные как Language (Язык) и Clock (Часы).

Вы находитесь в лифте N-терминала в аэропорту Сиэтла. Вам нужно попасть на ваш самолет. В лифте есть три кнопки для выбора пункта назначения:


  • CONCOURSE (CC)
  • RAMP (*R)
  • TRAIN (TRN)

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

Вот более полная фотография этого пульта управления лифтом:



Очевидно, была большая неопределённость между уровнем RAMP (некоторый скрытый средний уровень, где пассажиры бы не хотели оказаться) и уровнем CONCOURSE (где вы можете произвести посадку на самолет). Вероятно по этой причине добавили физические эквиваленты всплывающих подсказок, обычно используемых в компьютерных программах. Конечно же, такие подсказки совершенно невидимы для слепых людей, которые более вероятно будут толпиться на этаже, отмеченном *R.

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

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

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

«Это дебетовая карта?»

Конечно же, я не могу продолжить операцию, пока не отвечу на этот вопрос. Ну я, вообще-то, использую кредитную карточку, а не дебетовую, поэтому знаю, что ответ нет. Однако в тот момент мне не было ясно, как я должен сообщить этот ответ компьютеру.

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

Следует также упомянуть, что вопрос (например «Дебетовая карта?») меняется от заправки к заправке — иногда компьютер хочет знать использую ли я кредитную карту, иногда просит меня найти кнопки Credit (Кредитная) и Debit (Дебетовая) и нажать правильную.

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

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

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

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

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

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

В следующей статье мы с вами рассмотрим понятие «ясности» (clarity) интерфейса.
Tags:
Hubs:
+115
Comments 104
Comments Comments 104

Articles

Information

Website
www.developersoft.ru
Registered
Founded
1998
Employees
201–500 employees
Location
Россия