Карточка проекта: главное — крупноProject card: what matters first
· Открыть на сайтеOpen on the site
ЦельGoal
Инвестор пробегает список глазами и сразу сравнивает проекты по названию, цене и площади; второстепенное не мешает. Это вторая часть цели сайта — удобно сравнивать предложения.An investor scans the list and compares projects by name, price and area at a glance; secondary details stay out of the way. This is the second part of the site's goal — comparing offers easily.
ЗадачаProblem
В карточке было 9–10 разных размеров шрифта, название и цена почти не выделялись. В каждой из 47 карточек стояла одна и та же строка «красных флагов не найдено (проверка неполная)» — у всех проектов проверка неполная, и строка ничего не сообщала. Карточка «Проект не указан продавцом» занимала 277 px из-за пояснения на шесть строк. На первый экран компьютера целиком помещались 2 карточки, телефона — 1.The card used 9–10 different font sizes; the name and the price barely stood out. Each of the 47 cards repeated «no red flags found (incomplete check)» — the check is incomplete for every project, so the line told nothing. The «Project not named by the seller» card took 277 px because of a six-line note. A computer's first screen held 2 whole cards, a phone's — 1.
Как решилиHow it was solved
- Одна шкала шрифтов, как принято в интерфейсах-инструментах: 17 px — название, цена и площадь; 14 px — остальное; 12 px — сноски. Было 9–10 размеров, стало 3.One type scale, as in work tools: 17 px for the name, price and area; 14 px for the rest; 12 px for footnotes. From 9–10 sizes to 3.
- Название проекта — без подчёркивания (оно появляется при наведении); цифры табличные, чтобы цены в соседних карточках стояли ровно.The project name has no underline (it appears on hover); figures are tabular so prices line up from card to card.
- Строка о красных флагах в карточке появляется, только когда флаги найдены; «не найдено» и «нет данных» остались на странице проекта. Фильтр «без красных флагов» работает как раньше.The red-flag line shows on a card only when flags were found; «none found» and «no data» stay on the project page. The «no red flags» filter works as before.
- Пояснение у группы «Проект не указан продавцом» — одной строкой; подробности — на странице группы.The note on the «Project not named by the seller» group is one line; the details are on the group page.
- Итог: на первом экране компьютера целиком видно 3 карточки (было 2), телефона — 2 (было 1); карточка группы — 203 px вместо 277.Result: a computer's first screen shows 3 whole cards (was 2), a phone's — 2 (was 1); the group card is 203 px instead of 277.
До и послеBefore and after
