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

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

Почему поля

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

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

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

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

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

Процесс

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

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

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

Выводы

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

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

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

Юрий Ветров #2 - о дайджесте, конкурсе и продуктовом дизайне.

Директор по дизайну в Mail.Ru Group (продукты под брендом “Mail.Ru”).
jvetrau.com

— Ты ведешь одну из самых популярных групп в фейсбуке про продуктовый дизайн. С какой целью?

Я в любом случае читаю уйму статей, чтобы оставаться в теме и находить новые направления для развития дизайна в Mail.Ru. Это очень здорово ускоряет изменения (и помогает писать талмуды про UX-cтратегию (uxstrategy.co)). Почему бы не поделиться этим с сообществом? :) Я трачу на это не сильно больше времени относительно чтения, зато лучше структурирую собственные мысли.

— Как происходит процесс сбора материалов для дайджеста? Сколько времени у тебя на это уходит?

У меня про это есть отдельная презентация (slideshare.net/jvetrau/wud2014-yvetrov-background-research) :) Где-то полчаса-час в день уходит на чтение. У меня тонна подписок в Feedly, это основной источник — читаю от корки до корки (блоги дизайн-команд и конкретных дизайнеров, специализированные журналы, пара других дайджестов). Есть издания, которые читаю отдельно (Engadget, периодически Fast Co Design), оттуда тоже иногда приходит. После этого сохраняю лучшее в Pinboard (pinboard.in/u:jvetrau), оттуда постепенно публикую в соц.сети, а в конце месяца собираю дайджест в разных форматах (часа 3 в месяц, причём по возможности просто обновляю черновик статьи по ходу каждого поста в соц.сети, так что к концу периода остаётся только вставить картинки).

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

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

— Вы уже пять лет проводите Russian Design Cup. Почему в этом году так мало участников, по сравнению с предыдущим?

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

— Вы приглашали к себе на работу участников с хорошими кейсами?

Да, регулярно берём кого-то из лидеров рейтинга. RDC показывает, что дизайнер может решать разные задачи в ограниченное время, что его или её успешные решения — не случайность.

— Бургеры и пиво или вино и стейк?

Оба хороши, но первое чаще и более компанейское :)

— Что произойдет с интерфейсами за следующие 5 лет?

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

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

Переговоры: возможность принять финальное решение

Ещё одна вещь, которую почему-то игнорируют в книгах про переговоры — то, что случается после переговоров. Вот пришли вы на встречу, там сложно, вроде бы о чём-то договорились. А затем возвращаетесь в офис (или куда там вы возвращаетесь), и получаете несогласие от коллег.

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

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

Посмотрите, может быть у вас так же?

Анна Данилова написала о тире. То, что мы обычно называем просто «тире», — это длинное тире.

В зависимости от убеждений дизайнера, технических возможностей и характеристик шрифта, тире отбивается межсловными пробелами, тонкими пробелами или не отбивается вовсе.

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

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

Исторически длинное тире делалось размером с прописную М (поэтому оно называется Em dash). Некоторые иностранные типографы считают его слишком длинным и не используют в тексте. В современных шрифтах у тире бывают разные пропорции, а некоторые шрифтовики делают несколько типов длинного тире — «устаревшее» длинное, более современное покороче и т. д.

Короткое тире (En dash) в современном русскоязычном наборе чаще всего используется для обозначения числовых диапазонов, например 1990–1998. В текстах на английском короткое тире используется в любом диапазоне, даже если он набирается словами: October–November. Короткое тире в таких ситуациях не отбивается пробелами.

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

https://type.today/ru/journal/dash

С вялым заказчиком каши не сваришь

Иногда пишу зарисовки из проектной деятельности. Вот и сегодня такая зарисовка.

Более-менее крупный проект может заглохнуть, если на стороне заказчика не будет команды. 

Если вам говорят: "С вами будет работать Ира, она в курсе всех процессов, а если надо – будет привлекать ещё кого-то!", то есть повод насторожиться. У заказчика должна быть команда, в которой Ира руководитель проекта, тогда норм.

Из жизни. На заре моего проектного менеджмента (в 2008-2009 году) у меня был проект внедрения системы автоматизации в транспортно-логистической компании. 

Большой проект, большое ТЗ. И один человек на стороне заказчика, который "активно" занимается проектом.

Этот один человек всегда загружен (работу же работать надо), поэтому обратная связь по релизам/вопросам идёт с задержками.

Нас, как исполнителя, никто не "трясёт" – сами тянут. В итоге проект скатывается в вялотекущий: у исполнителя нет тонуса, представитель заказчика не успевает, срок сдачи сдвигается и никого это не пугает (обоснованно же).

Мы сделали 30% проекта, потом была долгая пауза, потом попытка воскресить проект, потом заказчик обанкротился.

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

Заказчика в тонусе держать надо, а то на шею сядете и соскользнёте с неё очень быстро.

Кажется, неплохая статья о том, как анализировать данные

Да-да, нельзя просто пыриться в гугл-аналитику и молиться, чтобы кривая посещений поползла вверх. Нужно делать какие-то выводы, что-то менять и проверять. Однако, как убедиться в том, что вы не предлагаете какой-то нонсенс?

Вот несколько советов о том, что ж делать-то:

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

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

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

4. Проверьте, что контекст сбора данных был верным. Если вы собрали данных за два года, то половина из них может оказаться нерелевантной из-за изменившегося контекста (например, был проведён редизайн сайта).

5. Собирайте данные из разных источников, чтобы собрать полную картину и проверить данные на противоречия.

6. Выделите свои основные KPI и смотрите на них. Так не потонете в пучинах таблиц и цифр.

7. …но сравнивайте их и с другими метриками, которые идут с KPI в противоречие.

8. Ищите не только данные, которые подтверждают ваши гипотезы, но и те, которые их опровергают. Хоть так соблазнительно закончить исследование, если вы вроде как нашли доказательства ваших инсайтов, но потратьте немного времени и подумайте, где вы можете найти опровержение — возможно, вас ждёт сюрприз.

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

10. Категоризируйте и кластеризируйте качественные и количественные данные — так с ними будет проще работать.

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

12. Используйте цветовое кодирование… очевидно. ✅

13. Используйте когортный анализ, когда это возможно. (Ну такое)

14. Используйте специальные тулы. (Тут в статье реклама видимо)

https://databox.com/how-to-analyze-data