Сравнение на телефоне: оба лота рядомComparison on a phone: both lots side by side
· Открыть на сайтеOpen on the site
ЦельGoal
Инвестор сравнивает лоты, чтобы увидеть их значения рядом. На телефоне оба выбранных лота должны быть на экране одновременно — без прокрутки вбок и без обрезанных меток.An investor compares lots to see their values side by side. On a phone both chosen lots should be on screen at once — without sideways scrolling and without cut-off labels.
ЗадачаProblem
На телефоне 390 px колонка «Поле» занимала около 40 % ширины, поэтому при двух лотах на экране помещался только первый, а второй и концы меток («посчитано нами, курс на …», пересчёт в рубли) уходили за правый край — чтобы сравнить одну строку, таблицу приходилось листать вбок. Над таблицей стоял вводный абзац в три строки, который объяснял, где искать кнопку выбора, хотя на странице уже есть блок «Добавить лот».On a 390 px phone the «Field» column took about 40% of the width, so with two lots only the first one fit on screen; the second one and the ends of labels («calculated by us, rate on …», the rouble conversion) went past the right edge — comparing one row meant scrolling the table sideways. Above the table sat a three-line intro explaining where to find the selection button, although the page already has an «Add a lot» block.
Как решилиHow it was solved
- На телефоне название поля стоит строкой над значениями, а лоты — рядом колонками одинаковой ширины: два лота помещаются на экран 320–390 px без прокрутки вбок.On a phone the field name is a line above the values and the lots stand side by side in equal columns: two lots fit a 320–390 px screen without sideways scrolling.
- Метки переносятся внутри своей колонки и не обрезаются. При 3–4 лотах колонки не уже 140 px, таблица листается вбок, а название поля остаётся у левого края.Labels wrap inside their column and are not cut off. With 3–4 lots each column is at least 140 px, the table scrolls sideways and the field name stays at the left edge.
- Вводный текст сокращён до двух коротких предложений: «От 2 до 4 лотов. Выбор хранится только в вашем браузере.» На компьютере таблица прежняя — поле колонкой слева.The intro is cut to two short sentences: «2 to 4 lots. The selection is stored only in your browser.» On a computer the table is as before — the field as a column on the left.
- Значения, метки и источники не менялись; для экранного диктора у таблицы явные роли строк и ячеек.Values, labels and sources are unchanged; the table has explicit row and cell roles for screen readers.
До и послеBefore and after
