Текстовые поля для Google

Как ребята из команды Material Design пересобрали текстовые поля для Google.
Огромное исследование и куча инсайтов.

Почему поля

Казалось бы, текстовое поле, что думать то? Но не все так просто.

Текстовое поле - один из самых популярных элементов интерфейса. Форма обратной связи, заявки, обязательная информация и т.д. Конверсии, конверсии и еще раз конверсии.

Команда Material Design провели исследование текстовых полей и выяснили, что куча народа, видя поле с чертой и плейсхолдером (серым текстом подсказкой внутри) не понимали, что оно кликабкльное. Как следствие отваливались и не заполняли формы.

Перекладываем на масштаб Google и сразу становятся понятны причины такой дотошности в мелочах. На таком огромном трафике изменение в 1% дает тебе колоссальное бабло.

Цель состояла в том, чтобы определить, как улучшить текстовое поле. Сделать его заметнее, читабельнее и понятнее – с более четкой целью касания.

Процесс

Исследование проходило в два этапа:

- сперва участникам оценивали разные варианты дизайна
- потом тюнинг конкретных элементов

Участникам предлагалось взаимодействовать с различными вариантами текстовых полей. Собирались прототипы и задавались уточняющие вопросы. Задействовали 600 человек.

Выводы

Результаты двух исследований показали, что следующие элементы текстовых полей имеют наибольшую ценность:

- Закрытые текстовые поля с прямоугольной формой, лучше, чем те, которые имели подчеркивание в виде линии
- Рамка текстового поля должна быть с полупрозрачной заливкой и нижней линией или без заливки, но с непрозрачной чертой.
- Цветовой контраст линий текстового поля с фоном соответствовал минимальным коэффициентам контрастности 3: 1.
- Текст метки должен быть помещен в пределы рамки текстового поля.
- Текстовые поля должны иметь закругленные углы

После того, как работа была проведена Google обновил у себя все текстовые формы.
Под постом бвдет гифка До и После апдейта.

Не начинать с отмазки и нытья

Плохая практика начинать свой рассказ с отмазки, давления на жалость и запроса преференций:

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

Зачем ты мне это показываешь, если не хочешь, чтобы я дал честную обратную связь?
Если сам знаешь, что показываешь откровенное Г., то зачем вообще показываешь?
Если у тебя нет опыта, но ты почему-то взялся и написал/сделал — почему я не должен критиковать?

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

Советы по общению, речи и зачем быть похожим на крокодила, о которых вы не просили.

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

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

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

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

Главное, умейте слушать (пометки в блокнот, тезисы), внимательно смотреть и понимать в чем позиция ваших оппонентов. Не старайтесь на каждое утверждение формулировать свое. Задача переговоров это постепенное достижение согласия. Поняв принципы собеседника им будет проще манипулировать. Надо только немного побыть крокодилом. Спокойным, внимательным, готовым.

Продолжение позже…

Андрей Шапиро написал серию статей о методологии сбора требований и планирования релизов программного продукта User Story Mapping

Часть 1. Пользовательская история: https://medium.com/xraizor/b0b0d724d77e

Карта историй создаётся для нового продукта или когда существующий продукт надо частично или полностью переделать, и требуется описать объём имеющейся функциональности.

На входе метода: гипотезы состава стейкхолдеров, их интересов и основных планируемых эффектов ближайшего релиза. Хорошо, если есть картирование процессов в форматах Customer Journey Map или Service Blueprint.

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

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

Любая пользовательская истории записывается для действующего лица: персоны или функциональной роли в системе. Близкая методика Use Cases лишена эмпатии к человеку, для которого создаётся программа.

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

Часть 2. Алгоритм проведения и рекомендации для ведущего: https://medium.com/xraizor/9a90beb2ff57

Часть 3. Чистка историй от ложных требований. Критика метода: https://medium.com/xraizor/2f7bd967a54a

Эдвард Скотт написал о сравнении товаров в интернет-магазине.

Прежде, чем добавить эту функцию:

1. Проверьте, что у вас есть данные о параметрах товаров и что они структурированы, то есть, например, размеры не указаны то в сантиметрах, то в миллиметрах.

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

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

Если вы уже добавили:

1. В десктопной версии в списке товаров показывайте контрол «Сравнить» при наведении курсора на карточку товара. Большинству он не нужен, нет смысла отображать его по умолчанию. Тот, кто хочет внимательно изучить товары, обратит внимание на появление контрола.

2. При наведении курсора на контрол «Сравнить» показывайте подсказку с кратким пояснением: что это за инструмент и как он работает. Так его не примут за функцию сравнения цен с другими магазинами.

3. Дайте легко перейти к сравнению выбранных товаров. Например, отобразите панель с кнопкой «Сравнить выбранные товары» и миниатюрами этих товаров, прикреплённую к нижней или верхней границе окна браузера.

https://ux.pub/ux-rekomendatsii-po-uluchsheniyu-instrumenta-sravnenie-tovarov/

Отмена

Из этой заметки вы узнаете, почему кнопка отмены действия не должна иметь цвет.

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

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

Выводы
Делайте кнопку «Отмена» темно-серой, чтобы пользователь воспринимал ее как возврат в безопасную зону, а не призыв к действию.