Элиот Стокс - Идеально! Как создать и переделать свой сайт. Правильный подход и передовые техники разработки

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

Контекст может изменить значение слов. Институт Baymard провел исследование по удобству пользования и выяснилось, что слово «continue» («продолжить») в интерфейсе онлайн-магазинов сбивало с толку трех из десяти испытуемых [68].

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

Так, вместо «continue» используйте более описательное выражение, как «continueshopping» («продолжить покупку») или «continuetocheckout»(«перейти к оформлению заказа»). Ясность лучше краткости.

Рисунок 6.13. Amazon использует кнопку Proceedtocheckout («Оформить заказ»)

Вот другой пример. У HubSpot была надпись на экране настроек домена: «Add domain»(«Добавить домен») – что приводило в замешательство. Разработчики HubSpot имели в виду то, что клиенты могли пользоваться этим интерфейсом для добавления существующего домена к их учетной записи. А пользователи думали, что программа просит их создать новый домен, то, чего они не хотели делать, потому что у них уже был один.

Глагол «add» («добавить») сбивал всех с толку. HubSpot изменили надпись на «Connectyourdomain» («Подключите ваш домен») – и инцидент был исчерпан.

Рисунок 6.14. На сайте Target опускают глагол и просто используют слово «checkout» («оформление заказа»)

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

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

В зависимости от того, данные какой карты вы заполняете (VISA, Master-Card и т. д.), используя приложение Square, иконка меняет свое изображение. Когда номер карты введен, все цифры, кроме последних четырех, исчезают. Потом иконка карты перевернется и подсветится область, где вы сможете ввести код проверки подлинности карты (CVV).

У Square очень много таких фишек. Когда вводите номер AmericanExpress, группировка цифр изменяется от 4 до 4, 6 и 5, отображая числовую структуру на карте, который вы пользуетесь. Так как CVV у AmericanExpress находится впереди, иконка карты не будет переворачиваться, а вместо этого покажет вам, где его найти на карте. Если вы вводите некорректное количество цифр кода, поле «вздрогнет» и станет красным. Это означает, что вы ошиблись. Также невозможно введение неправильного срока действия. Интерфейс просто не позволит вам этого сделать. Такое внимание к деталям приходится по душе клиентам. Это помогает им правильно заполнить форму и подсказывает направление, если затрудняются или ошиблись. Также берутся во внимание различные случаи использования, например расположение кода CVV на определенной карте может быть спереди, а не сзади.

Рисунок 6.15. Square скрывает полный номер карты и подсвечивает местонахождение CVV в иконке

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

Эта цитата Стива Джобса хорошо созвучна со знаменитым высказыванием Генри Форда: «Если бы я спросил клиентов, чего они хотят, они бы ответили: более быструю лошадь». Инновации происходят, когда вы пробуете новое, а не зацикливаетесь на старых способах решения проблем. Распространенные дизайны шаблонов и практический опыт показывают нам, что работает хорошо, но они не учат нас тому, как создать что-то лучшее. Слепое применение шаблонов, конечно, обеспечит вам получение надежного продукта. Но с другой стороны, вы будете плестись в хвосте тех компаний и дизайнеров, которые внедряют новаторские идеи в поисках лучших решений.

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

Рисунок 6.16. Эксперимент Apple со стилем кнопок представлен в виде селектора, похожего на слайдер

Рисунок 6.17. В конечном итоге Apple возвращается к более простому решению, с кнопками, похожими на кнопки, явно выделенному текущему пункту

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

Однако это не сработало. Многие пользователи не восприняли это изменение на ура [69], и Apple вернулась к прежнему дизайну, в котором кнопки реально выглядели как кнопки, а «утапливалась» выбранная в данный момент. Несмотря ни на что, эксперимент не провалился. Дизайнеры получили ценную информацию о том, какой сценарий лучше работает, и в конечном итоге было оставлено оптимальное решение. Если что-то идет вразрез с общепринятыми шаблонами, но помогает лучше решить проблему, то этот способ неизбежно станет рекомендуемым.