«Метод» на телефоне — оглавление и метки как на сайте«Method» on a phone — contents and labels as on the site

ЦельGoal

На страницу «Метод» инвестор приходит с одним вопросом: что значит метка рядом с ценой, как проверяли красные флаги, откуда курс. Ответ должен быть в одном касании, а метка — узнаваться с первого взгляда.An investor comes to the «Method» page with one question: what the label next to a price means, how red flags were checked, where the rate comes from. The answer should be one tap away, and the label should be recognisable at a glance.

ЗадачаProblem

На телефоне 390 px «Метод» — 4 100 px сплошного текста в 10 карточках без оглавления. Объяснение меток шло вторым разделом, «Красные флаги» — девятым, на пятом экране. Метки были описаны словами в кавычках, а не так, как они выглядят у значений; пояснение к «посчитано нами» — один абзац в ~750 знаков.On a 390 px phone «Method» was 4,100 px of continuous text in 10 cards with no contents. The labels were explained in the second section and «Red flags» in the ninth, on the fifth screen. Labels were described as quoted words rather than shown as they look next to values; the note on «derived» was one ~750-character paragraph.

Как решилиHow it was solved

• Под заголовком — оглавление из 10 разделов: на телефоне две колонки кнопок высотой 44 px, на компьютере строка с переносом. Касание ведёт прямо к разделу, он подсвечивается рамкой.Under the heading — contents of the 10 sections: two columns of 44 px buttons on a phone, a wrapping row on desktop. A tap goes straight to the section, which gets a highlighted border.
• Разделы переставлены по частоте вопросов: метки и источники, красные флаги, сбор данных, проверки — первыми; уровни данных, карта — ниже.Sections are reordered by how often they are asked about: labels and sources, red flags, data collection, checks come first; data levels and the map come later.
• Каждая метка показана так же, как рядом со значением на страницах лота и проекта («заявление продавца», «источники расходятся», «посчитано нами», «нет данных», «официальный»), а под ней — что она значит.Each label is shown exactly as it looks next to a value on lot and project pages («seller's claim», «sources disagree», «derived», «no data», «official»), with its meaning underneath.
• Пояснение к «посчитано нами» разбито на список: загрузка отелей, климат, расстояние до аэропорта, пересчёт цены. В «Свежести» — сама метка «может быть устарело».The note on «derived» is split into a list: hotel occupancy, climate, airport distance, price conversion. «Freshness» shows the «may be outdated» label itself.

До и послеBefore and after