UX Notes – Telegram
UX Notes
24.5K subscribers
65 photos
5 videos
1 file
1.22K links
В соцсетях: vk.com/ux_notes и fb.com/uxnotes
Чат читателей: @uxnoteschat
О карьере в UX-дизайне и вакансии: @uxwork

Рекламодателям: uxnotes.ru/ads · В перечне РКН: gosuslugi.ru/snet/67a9a56970de7b4d761a81ae

Est. 2016 · Автор: @zGrav
Download Telegram
Эмилия Городовых написала, что важно обсудить с заказчиком перед началом исследования.

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

1. Цель исследования: какой результат заказчик хочет получить и как им воспользоваться, с какими вопросами пришёл, как поймёт, что результат получен.

2. Сроки: сколько исследование может занять, когда начнётся, есть ли у заказчика дедлайн.

3. Что уже известно: результаты других исследований, знания бизнес-процесса и его участников, описанная аналитика и статистика.

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

5. Гипотезы для проверки. Что будет, если гипотеза не подтвердится?

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

https://medium.com/designkontur/c86115454448
Матвей Правосудов написал о визуальной культуре в дизайне интерфейсов.

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

Красота — прекрасные чувства и эмоции, которые у нас вызывает объект. Простота — отсутствие препятствий при взаимодействии, мгновенное понимание механизма взаимодействия с объектом. С накоплением опыта у пользователей в разные моменты истории простыми считались разные интерфейсы.

Вкус — наше мерило красоты. Он помогает за мгновение сказать, плохая картинка или хорошая. Его можно тренировать, рассматривая много картинок и пытаясь анализировать, что в них хорошего.

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

Наряду со вкусом есть ещё здравый смысл — то, что помогает измерять адекватность сценариев и делать интерфейс логичным.

Интерфейс с выверенными отступами, аккуратными шрифтами, приятными цветами не кажется сломанным. Он такой, каким его задумал человек.

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

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

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

Дизайнеры придумали проверять вёрстку самостоятельно, чтобы найти недочёты (в том числе в дизайне). У них проверка получается быстрее, им не нужно сравнивать вёрстку и макет: все косяки видны сразу.

Принцип Вижуал Перфект — важно не столько совпадение вёрстки и макета, сколько красота вёрстки в результате.

https://designpub.ru/937a74b90c99
Лена Бородина написала о 5-секундном тесте для проверки дизайна.

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

Покажите респонденту изображение одного или нескольких экранов на 5−10 секунд и попросите описать внешний вид продукта. Предложите выбрать эпитеты из заготовленного списка или придумать свои. Например, не более 3 эпитетов.

Провести тест можно с помощью сервисов UsabilityHub и Five second tests или в личном разговоре с респондентами.

В случае с придумыванием эпитетов тест даёт качественные данные — слова, которыми пользователи характеризуют дизайн.

Чтобы ответить на вопрос, годный дизайн или нет (какое общее впечатление), каждую характеристику надо отнести к одной из групп: положительные, отрицательные или неоднозначные. Это уже количественные данные, для которых нужна большая выборка.

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

https://medium.com/borodish/b4b9290e5ed6
Антон Шнайдер рассказал о дизайне без дизайна и показал много примеров.

Для документалки о русском дизайне (5 минут): youtube.com/watch?v=iLafkzWDIr8

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

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

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

Подробнее в докладе «Дизайн без дизайна» (35 минут): youtube.com/watch?v=PeAFLzzeXIk

Дизайн без дизайна — ты не делаешь дизайн, и он всё равно есть, но он не так сильно торчит.

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

Когда вещи сделаны из физических предпосылок, они такие почему-то, они друг с другом круто сочетаются.
Forwarded from Сарычева
Как было
— Вы что, серьезно поставили вотермарк на ролик?
— Разумеется

Как правильно
— Сергей, я вижу на ролике Вотермарк. Можете рассказать, зачем вы его поставили?

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

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


*****
1. Скандалы порой случаются на ровном месте, просто потому что кто-то не сдержал эмоций. Лучшее правило: возмутился — подожди. Успокоился — сформулируй без наезда и отправляй.

2. Конфликт легко предовратить одной фразой, если заранее предупредить собеседника о спорном вопросе. Сказал бы дизайнер сразу, что ролик будет с вотермарком, скандала бы не произошло.

3. Меня много раз выручала фраза «Простите, это просто мой личный пунктик». Люди с пониманием относятся к личным пунктикам, когда в них открыто признаешься.

К фразе «Меня однажды кинули, поэтому я теперь так делаю» трудно относиться с пониманием, потому что это обвинение и перенос ответственности.

****
Публиковать переписку с заказчиком — это днище. Это неэтично и еще это признание собственного непрофессионализма: «Я не смог разрулить проблему сам, пусть разрулит общественность».
Антон Жиянов написал о транслитерации.

Чтобы вы представляли масштаб бедствия. Я насчитал 20 схем транслитерации, некоторые из которых предусматривают альтернативные наборы правил (например, с диакритикой и без). Из них 14 считаются действующими.

Как выбрать схему:

— Загранпаспорт или водительское удостоверение. По умолчанию используйте ICAO Doc 9303 — это требование закона. Впрочем, есть лайфхак: если написать отдельное заявление при подаче документов, сделают паспорт с нормальной транслитерацией. Тогда подойдёт старый стандарт МВД-310[8] или Мосметро.

— Если нужно обратимое преобразование (cyr lat). Используйте ГОСТ 7.79-2000. Это международный стандарт ISO 9:1995. Громоздкая, зато абсолютно непробиваемая схема. Есть варианты с диакритикой и без.

— Если визуальная красота превыше всего. Используйте схему Мосметро, она самая лаконичная и приятная на вид.

— В остальных случаях. Используйте схему Википедии. Она лучше всех по фонетике и лишь немного уступает Мосметро визуально.

https://antonz.ru/iuliia/
Опубликованы видео с митапа «Инклюзивный дизайн».

1. Mail.ru — Об исследовании Почты
youtube.com/watch?v=q7UbWH8gMqg

2. Валерия Курмак, AIC — Как заложить принципы инклюзивности в дизайн-систему
youtube.com/watch?v=Or7vNJ6W6KI

3. Билайн — Опыт внедрения стандартов доступности
youtube.com/watch?v=WMbbXF8EspY

4. Альфа-Банк — Инклюзивный подход в банковских продуктах
youtube.com/watch?v=EpVlFTV5gzo

5. Mos.ru — Внутренний инструмент подбора доступной палитры
youtube.com/watch?v=vOQT1Pvcga8

6. Круглый стол
youtube.com/watch?v=E-0Pput_hxM

Все видео в одном месте: youtube.com/playlist?list=PLzqQCeTtpSBpjt_4NBbLvBCVEzWpcPCvF
Игорь Штанг разобрал ошибки сравнительных таблиц на многочисленных примерах памяток с симптомами коронавируса, простуды и гриппа.

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

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

3. Полезно обозначить цветом частоту симптома. Это ключевое свойство и оно незаметно при беглом просмотре: слова «часто», «иногда», «редко» внешне похожи друг на друга. Но важно подобрать правильную цветовую гамму, чтобы первым в глаза бросалось «часто».

4. В некоторых таблицах вместо слов стоят условные обозначения. Дизайнеры любят так делать: придумать хитрый шифр, а подсказку написать внизу мелким текстом. Текст работает лучше любых условных обозначений.

https://awdee.ru/naglyadnost-v-tablitsah/
👍1
Юля Кондратьева сравнила мнения знаменитых дизайнеров с исследованиями о том, какие шрифты легче читать: антикву (с засечками) или гротески (без засечек).

Юрий Гордон, Ян Чихольд и Сергей Сурганов считают, что легче читать текст, набранный шрифтом с засечками.

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

Если смотреть не на читаемость, а на эмоции:

«В Лаборатории исследований юзабилити ПО в Wichita State University респондентов попросили заполнить опросник и указать, какими характеристиками обладают разные шрифты.

Интересно, что шрифты с засечками оказались первыми в рейтинге как формальные, „взрослые“, практичные и стабильные. А шрифты без засечек оказались первыми в рейтинге… нигде. То есть у них не оказалось какого-то ярко выраженного эмоционального следа».

https://habr.com/ru/company/tinkoff/blog/498878/
👍1
Александр Овчаренко написал, почему работа дизайнером несовместима с чёткими формулировками.

Деятельность по достижению целей сводится к решению задач и решению проблем.

Решить задачу — совершить определённую процедуру (порой весьма сложную) по известному алгоритму. Здесь понятно, что делать, главное, не забыть ничего и обладать необходимыми навыками.

Решить проблему — достичь цели при условии, что путь решения не известен, либо конечная точка не понятна или их множество, а может её и нет вообще.

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

Дизайнер — человек, который умеет решать проблемы, конвертировать мутные идеи заказчиков в нечто реально существующее в виде продукта.

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

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

Отличие в том, что дизайнеры получают символы и знаки на входе от внешних стейкхолдеров. Разница между знаком и конечным продуктом может быть радикальной, но при этом мы всё равно будем решать поставленную извне проблему. Художник же будет решать что-то своё, придумывать свой собственный знак и его воплощение.

https://9dots.ru/2020/05/12/мутная-суть-дизайна/
Евгений Игнашов написал для начинающих об этапе анализа, который идёт перед проектированием интерфейса.

— Что надо спросить у заказчика;
— Какие показатели посмотреть в Яндекс Метрике (если есть);
— Как составить карточку пользователя и описать сценарий;
— Что смотреть у конкурентов;
— Две карты интерфейса: как сейчас (если есть) и как надо;
— Как подбирать примеры стилистики.

«При анализе конкурентов выписываю только то, что можно у них почерпнуть. Нет смысла выписывать слабые стороны. Клиенты с небольшой иронией в голосе говорили что-то вроде: „А, ну нормально. Просто взял, что увидел у кого-то, и к нам применяешь“. После этого я специально в презентацию добавил фразу „Можно почерпнуть у конкурентов“, сходу говоря, что если надо, то именно это я и возьму, не стесняясь».

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

https://habr.com/ru/post/500796/
Михаил Кравченко написал о создании интерфейса для игры.

Обзорно рассмотрел шаги:
— Описание проблемы;
— Работа с референсами;
— Пользовательский сценарий;
— Согласование с командой (особенно важно в самом начале, посмотрите примеры обратной связи от команды);
— Набросок структуры интерфейса;
— Создание и тестирование прототипа (желательно, если есть время);
— Оформление интерфейса, сбор из UI Kit’а;
— Подготовка материалов для программистов;
— Контроль качества сборки;
— Тестирование на игроках.

Если UI Kit’а нет, то перед оформлением интерфейса надо сделать:
— Визуальный стиль интерфейса под сеттинг игры;
— Работа с референсами визуального стиля;
— Наброски визуального стиля интерфейса;
— Чистовая отрисовка интерфейса;
— Сборка UI Kit’а.

Есть примеры артефактов.

«Хороший пример соответствия оформления интерфейса сеттингу игры в StarCraft II. Когда играем за людей, интерфейс состоит из металлических панелей, пластин, проводов и заклёпок. Когда играем за зергов, интерфейс представляет собой аморфную биомассу с прожилками из когтей, хитиновых пластин и подобного».

https://habr.com/ru/post/498600/
Павел Шерер написал об учёте требований информационной безопасности при проектировании интерфейса. Например:

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

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

Для предотвращения этого достаточно сделать ещё одну ветку сценария и отрисовать ещё один типовой макет. Через сутки мы деактивируем ссылку из письма с восстановлением доступа. Дизайнер собирает один макет, на котором показывает сообщение типа «Ссылка устарела».

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

https://zen.yandex.ru/media/id/5a8249f94826772d3da82e8c/5ebea1e37f5192548fb25a63
👍1
Дмитрий Ваницкий поделился краткими выводами из монументальной «Биологии добра и зла» Роберта Сапольски.

Роберт рассуждает о природе наших самых хороших и плохих поступков. Труд охватывает все ныне известные факторы влияния на наши решения: от эволюционных и генетических до культурных и социальных. Всё это с подтверждениями в виде сотен экспериментов.

Книгу можно рекомендовать всем, кто увлекается или хочет увлечься нейробиологической основой нашей модели принятия решений.

«Давайте представим, что вы участвуете в эксперименте по определению длины отрезков вместе с другими испытуемыми. Всё идёт хорошо, пока вам не показывают отрезки, 1-й из которых явно длиннее. Вы думаете: «Изи!». Но вот все остальные говорят, что длиннее 2-й отрезок. Настаёт ваша очередь. Что вы сделаете? Пойдёте против большинства или дадите заведомо неверный ответ, чтобы не выделяться? Я скажу, что с вероятностью 75% — второе.

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

https://medium.com/design-spot/e4b9bcd9d03a
Автомобильный дизайнер Артём Степанов рассказал об интерфейсах систем автомобиля.

Мы сейчас на этапе развития автомобильных технологий «Это ужасно, но все привыкли» и тихонечко его перескакиваем. 80% автомобилистов пользуются 10% функций автомобиля.

Из-за унификации в пределах больших концернов (например, Volkswagen-Audi Group) владельцы дорогих машин садятся на кожаные сидения, но видят те же панели (например, управления кондиционером), что и владельцы машин в 2 раза дешевле.

Маркетологи тоже думают, как сделать круто, ведь нельзя же покупателям новых моделей предлагать старые добрые крутилки. Так в БМВ 7-й серии мультимедиа можно управлять 5 способами:
— Крутилка на передней консоли;
— Касание экрана;
— Тач-панель на крутилке (вместо использования экранной клавиатуры можно рисовать буквы);
— Жесты рукой в воздухе (изменение громкости, переключение каналов);
— Голос.

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

https://www.youtube.com/watch?v=DR9a9t-cGug
Николай Бабич написал, как сообщить пользователю о состоянии системы.

— Выделить в меню раздел, в котором пользователь сейчас находится;
— Показать количество шагов, которое необходимо для завершения процедуры;
— Обратная связь на действия пользователя — нажатия на кнопки и переключатели;
— Показать индикатор загрузки; с прогресс-баром, если операция занимает больше 10 секунд;
— Анимированные экраны-заставки для мобильных приложений;
— Отобразить скелет страницы, пока загружается её содержимое (паттерн skeleton page/screen);
— Уведомления об изменениях в системе;
— Моментальная обратная связь о неправильно заполненном поле.

https://ux.pub/4-metoda-vizualnogo-fidbeka-v-interfeysah/
Матвей Правосудов написал, зачем дизайнеру уметь кодить.

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

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

Так вот, понимание принципов работы технологий (HTML/CSS/JS/API для веба, Swift для iOS и Kotlin/Java для Android) помогает сразу делать макеты более жизнеспособными, а иногда, при возникающих сложностях у разработчиков, ухищряться и выдавать оптимизированное решение, которое достигает того же эффекта, но заметно дешевле».

https://designpub.ru/f728cb8c1e39
Пол Боаг написал, почему тёмные паттерны — плохой выбор для компании, играющей в долгую.

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

Недовольные клиенты делятся своими эмоциями: отзывы остаются в интернете навсегда, а отдельные истории становятся вирусными (Хасан Сайед и British Airways).

Обманутые клиенты могут создавать группы для защиты своих интересов. Иногда их аргументы доходят до государства, и оно включает регулирование (Великобритания и рынок онлайн-бронирования отелей).

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

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

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

https://ux.pub/kak-ubedit-drugih-ne-ispolzovat-temnye-patterny/
Павел Шерер написал о создании концепции — предварительном этапе перед проектированием.

Концепция предполагает базовые исследования и аналитику уже на самом старте проектного процесса. Её задачи:

1. Сформировать у команды единую картинку продукта. Сильно влияет на стабильность дальнейшей работы над ним.

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

«Между пользователями возможны конфликты. Если сделка проходит через сервис, мы должны эти конфликты решать. Нужен внутренний сервис тикетов — своеобразный арбитраж.

Сколько усилий уйдёт на создание внутренней арбитражной системы? При этом она не является функциональным ядром сервиса, и стартап спокойно запустится без неё. Умный проектировщик кратко опишет арбитраж как „следующие этапы развития“, предложит ввести рейтинг, а спорные вопросы первое время решать через поддержку».

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

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

— Задачи концепции: https://zen.yandex.ru/media/id/5a8249f94826772d3da82e8c/5ed3f26b709fb133f9734d4a
— Состав и структура: https://zen.yandex.ru/media/id/5a8249f94826772d3da82e8c/5ed67a182cf6c679060463e3
Константин Солодянников законспектировал книгу «Спроси маму».

«Ненужная информация бывает такой:
— Комплименты;
— Болтовня (общие фразы, гипотетические рассуждения, разговоры о будущем);
— Идеи.

Любой из пунктов — признак того, что мы получаем социально-желаемые ответы».

«Важные вопросы — неудобные. Типа, когда думаешь, да как я это вообще спрошу. Вдруг там что-то такое страшное скажут, и всё пропало, паника. Лучше не спрошу.

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

https://www.it-agency.ru/academy/summary-the-mom-test/
Тарас Бакусевич написал о дизайне текстовых полей и форм. Вот некоторые из его рекомендаций (не самые распространённые):

— Подчёркнутое поле ввода — не лучший стиль для текстового поля. Он распространился с появлением Material Design, но потом Гугл от него отказался;
— Длина поля должна быть пропорциональна вводимой информации. Формы с такими полями будут менее аккуратными, но более удобными;
— Заполняйте поля адекватными значениями по умолчанию, но только не при выборе размера или цвета товара;
— Отображайте полезные подсказки, которые помогут принять правильное решение или избежать ошибки. Например, показывайте баланс при совершении платежа;
— Не отображайте сообщение о некорректном заполнении поля, пока пользователь не закончил ввод;
— Иногда можно добавить индикатор корректного заполнения поля. Пользователь будет видеть прогресс и радоваться позитивной обратной связи;
— Если форма разделена на несколько шагов, показывайте пользователю ключевую информацию с уже пройденных шагов;
— Не отображайте такие формы в маленьких всплывающих окнах.

https://ux.pub/podrobnoe-rukovodstvo-po-dizaynu-tekstovyh-poley-i-form/