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

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

Гендерный вопрос

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

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

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

Рисунок 6.11. Гендерный вопрос в регистрационной форме Bagcheck

Хорошие значения по умолчанию

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

Рисунок 6.12. Etsy пытается догадаться о вашем местонахождении на основании языковых настроек вашей системы

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

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

Дизайн интерфейсов – это копирайтинг

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

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