Скриншот #
Скриншоты используются, чтобы:
- помочь пользователю сориентироваться в сложных или длинных процессах;
- выделить информацию в диалоговом окне, где нужно выбрать или ввести много данных;
- обратить внимание на обновление в интерфейсе или новую функциональность.
Скриншоты не используются для примеров:
- кода;
- простых диалоговых окон, например выпадающего списка с 2–3 пунктами;
- окон подтверждения, текстов сообщений, индикаторов загрузки, приветственных окон и таблиц.
Требования к скриншотам #
Общие требования:
- скриншот размещается после описания того, что он иллюстрирует;
- чтобы показать процесс в динамике или обозначить разницу между двумя состояниями, используются два скриншота рядом;
- область экрана на скриншоте изображается полностью, со всеми необходимыми для пользователя элементами интерфейса;
- размер окон или других элементов не изменяется — на скриншоте они такие же, как в интерфейсе;
- скриншоты размещаются без мокапа, например, телефона или ноутбука;
- на скриншотах не должно быть реальных или придуманных персональных данных, например, фамилии, имени и отчества, номера телефона, электронной почты или адреса проживания.
Надписи используются, чтобы показать последовательность действий или рассказать об элементах сложного интерфейса.
Оформление надписи:
- текст немного крупнее, чем в интерфейсе на скриншоте, и выносится за пределы скриншота только сверху и снизу;
- стрелка не пересекает элементы интерфейса или другие стрелки, иначе рассматривать скриншот будет сложнее.
| ❌ | ✅ |
|---|---|
|
|
Плашка #
Плашка — цветовое выделение текста в блок. Используется, чтобы подсветить важную информацию в статье.
Информация в плашке не должна дублировать текст статьи или противоречить ему. Размер плашки не должен превышать размер абзацев вокруг, поэтому не нужно выносить в плашку больше 4 предложений или вставлять в неё изображения.
Плашки не используются для:
- приведения примеров, чтобы не акцентировать на них внимание пользователя как на важной информации, в отличие от информации в плашках;
- информации о том, что статья доступна для определённой страны — это оформляется курсивом под заголовком.
Голубая #
Голубая плашка используется для дополнительной информации, которая может повлиять на действия пользователя. Если пользователи часто сталкиваются с какой-то проблемой, информацию о ней или её решение можно вынести в плашку как подсказку.
Пример
Следующий шаг доступен только после заполнения информации на предыдущем.
Жёлтая #
Жёлтая плашка предупреждает об ограничениях системы, которые пользователю нужно учесть, чтобы проследовать инструкции до конца.
Пример
Заказ можно оплатить картами Visa и Mastercard, если они выпущены российскими банками. Если эти карты выпущены за рубежом, оплатить билеты не получится.
Красная #
Красная плашка используется для описания запретов системы или рисков, которые необратимо изменят систему для пользователя или помешают использовать её.
Пример
Не передавайте свои личные данные, такие как пароль или ПИН-код. Сотрудники Ozon никогда не попросят у вас пароль, ПИН-код или номер CVV.
Таб #
Таб используется, чтобы описать несколько равнозначных способов выполнения одного действия. Например, при описании:
- одного процесса для разных операционных систем: iOS, Android;
- одинаковых действий для десктопной и мобильной версии;
- одинаковых действий для разных способов доставки: курьером или почтой.
Пример
Вы можете посмотреть свой тариф:
.Выпадающий список #
Выпадающий список используется, когда можно скрыть второстепенную информацию без потери основного смысла. Можно скрыть длинные таблицы и списки или дополнительную информацию.
Пример
Партнёры из стран дальнего зарубежья
Турция
| Логотип | Название | Контакты |
|---|---|---|
 |
LOGİ3PL LOJİSİTİK HİZMETLERİ A.Ş | Телефон: +905380534983 Email: ozon@logi3pl.com Сайт: www.logi3pl.com Номер сертификата: LO8268 |
 |
AT Group E-commerce | Телефон: +905362375572, +905423458518 Email: ozon.plus@atg-ecommerce.com Сайт: atg-ecommerce.com Номер сертификата: AT1084 |
 |
SHOPIVERSE TEKNOLOJI VE YAZILIM ANONIM SIRKETI | Телефон: +905457175460, +02129098815 Email: ozon@shopiverse.com Сайт: shopiverse.com Номер сертификата: SH9148 |
 |
Vezüve İhracat Yazılım ve Danışmanlık LTD ŞTİ | Телефон: +03122321576, +05334519575 Email: ozon@vezuve.com.tr Сайт: www.vezuve.com.tr Номер сертификата: VE2578 |
Не нужно вносить первостепенную информацию в выпадающий список. Например, в статье Ошибки при работе с карточками товара нельзя скрыть таблицу с ошибками, поскольку она первостепенна для пользователей.