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

Глагол «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 вернулась к прежнему дизайну, в котором кнопки реально выглядели как кнопки, а «утапливалась» выбранная в данный момент. Несмотря ни на что, эксперимент не провалился. Дизайнеры получили ценную информацию о том, какой сценарий лучше работает, и в конечном итоге было оставлено оптимальное решение. Если что-то идет вразрез с общепринятыми шаблонами, но помогает лучше решить проблему, то этот способ неизбежно станет рекомендуемым.