Поле
Поле - найслабший компонент системи, і перепис це показує числом, а не відчуттям. 466 входжень у кольорі, з них видимих 196, і 20 різних форм.
Поле стоїть на чекауті, тобто на екрані, де рахуються гроші. Принцип 1 - «спершу довіра» - тут перевіряється буквально: форма, яка не каже, що саме не так, довіру не будує.
Перепис вище - знімок того, що знайшли, і він лишається як є: з нього виводились рішення. Нижче - той самий продукт, переміряний тим самим обходом після зведення значень. Дві колонки, бо знахідка без «стало» не закривається, а «стало» без знахідки не пояснюється.
| Що | Було | Стало | Рішення |
|---|---|---|---|
| радіус | 7 | 4 | 9/10/11 пішли у 8 і 12 |
| кегль | 7 | 7 | на мобільному всі текстові поля 16px, бо нижче iOS зумить сторінку; на десктопі лишились задизайнені розміри |
| під 16px на 390 | 136 зі 166 | 0 з 66 | iOS більше не зумить сторінку на фокусі |
| без власного кегля на 1280 | 28 | 28 зі 100 | лишилось: на десктопі ці поля й досі беруть дефолт браузера 13.3333px - значення, якого ніхто не вирішував |
Повний список рішень зі словами «змінна -> значення -> чому» - design/kit/docs/consolidation.md.
| Разів | Рамка | Радіус | Падінг | Кегль | Класи | Плейсхолдер |
|---|---|---|---|---|---|---|
68 | 0px none rgb(0, 0, 0) | 0px | 9px/12px | 13px | .wfh-search | Пошук товарів, брендів… |
68 | 1.5px solid rgb(217, 217, 217) | 8px | 11px/13px | 14px | .city-search | Пошук міста… |
58 | 1px solid rgb(217, 217, 217) | 6px | 7px/9px | 12px | .wff-news | E-mail для новин та акцій |
56 | 0px none rgb(16, 16, 16) | 0px | 0px/0px | 13.3333px | .uiv-rmax .uiv-rmin | |
56 | 1px solid rgb(217, 217, 217) | 9px | 7px/9px | 13.3333px | .in | |
36 | 1.5px solid rgb(217, 217, 217) | 10px | 11px/13px | 14px | .pm-b | Що сподобалось |
34 | 1.5px solid rgb(217, 217, 217) | 9px | 12px/12px | 15px | .cef | Почніть вводити номер або |
24 | 1.5px solid rgb(217, 217, 217) | 12px | 12px/12px | 24px | .box | |
12 | 1.5px solid rgb(196, 43, 28) | 12px | 0px/0px | 24px | .box | |
12 | 0px none rgb(0, 0, 0) | 0px | 0px/0px | 13.3333px | .addr-check .pf-delcheck | |
10 | 1.5px solid rgb(217, 217, 217) | 11px | 12px/13px | 14px | .co-input | +380 __ ___ __ __ |
6 | 1.5px solid rgb(217, 217, 217) | 11px | 11px/13px | 13px | .co-cmt | Наприклад: подзвоніть пере |
| Властивість | Різних | Значення |
|---|---|---|
| рамка | 8 | 1.5px solid rgb(217, 217, 217)×192, 1px solid rgb(217, 217, 217)×116, 0px none rgb(0, 0, 0)×80, 0px none rgb(16, 16, 16)×56, 1.5px solid rgb(196, 43, 28)×12, 1.5px solid rgb(28, 28, 28)×6, 1.5px solid rgb(138, 90, 14)×2 |
| радіус | 7 | 0px×138, 9px×90, 8px×68, 6px×58, 12px×48, 10px×42, 11px×22 |
| кегль | 7 | 13.3333px×124, 14px×116, 13px×74, 12px×58, 24px×48, 15px×40, 16px×6 |
| падінг | 9 | 7px/9px×114, 11px/13px×110, 0px/0px×92, 9px/12px×68, 12px/12px×58, 12px/13px×14, 13px/12px×6 |
| тло | 3 | rgb(255, 255, 255)×386, rgba(0, 0, 0, 0)×68, rgb(253, 244, 242)×12 |
1. Жодне поле в продукті не позначене
На 196 видимих полів: required - 0, disabled - 0, aria-invalid - 0. Червона рамка помилки існує (12 входжень), але це клас, а не стан. Читач екрана ніколи не дізнається, що поле не пройшло, і людина з клавіатурою не дізнається, куди повертатись.
2. 136 зі 166 текстових полів мають кегль менший за 16px
iOS Safari зумить сторінку на фокусі, коли кегль поля менший за 16px. Продукт мобільний у першу чергу, тобто це стається на основному пристрої, на кожному полі чекауту.
3. 28 полів не мають кегля взагалі
Вони рендеряться в 13.3333px - це дефолт браузера для input. Значення, яке ніхто не вирішував, і яке зміниться від зміни браузера.
Поля, що є лише в сірому: .ac-cli, .ac-search, .blog-search, .bsearch, .cl-search, .cnt-field, .co-search, .cv-consent, .link-field, .q-opt, .qadd-field, .sv-row, .sys-search. Знову пошук, тренерський канал і контент.