{ "version": "https:\/\/jsonfeed.org\/version\/1", "title": "Переверстал, заметки с тегом: minsktrans", "home_page_url": "https:\/\/pereverstal.by\/tags\/minsktrans-2\/", "feed_url": "https:\/\/pereverstal.by\/tags\/minsktrans-2\/json\/", "icon": "https:\/\/pereverstal.by\/user\/userpic@2x.jpg", "author": { "name": "Автор блога", "url": "https:\/\/pereverstal.by\/", "avatar": "https:\/\/pereverstal.by\/user\/userpic@2x.jpg" }, "items": [ { "id": "123", "url": "https:\/\/pereverstal.by\/all\/oplata-2\/", "title": "Оплата по QR-коду", "content_html": "

Хай! Вот эта инструкция приклеена в троллейбусах Минска.<\/p>\n

Чтобы ее сфотографировать руку с телефоном
\nпришлось вытянуть во всю длину — настолько далеко она висит от читателя.<\/p>\n

Ну, а раз далеко повесили, то и шрифт надо помельче выбрать, правда же?<\/p>\n

\n\"\"\n<\/div>\n

Давайте для удобства, я кропну фотку<\/p>\n

\n\"\"\n<\/div>\n

Очевидно, что эту историю можно разделить минимум на 3.<\/h2>\n

Хороший дизайн<\/b> — это когда последовательно, понятно,
\nчитаемо, без засирания мозгов лишней информацией, без повторов
\nи канцеляризмов.<\/p>\n

Текст, который клиент обычно предоставляет для работы,
\nв 99% случаев непригоден для восприятия никем, поэтому
\nя всегда говорю своим дизайнерам, что в таких случаях они
\nобязаны быть редакторами — укорачивать текст,
\nпереформулировать и перефразировать, убирать дублирование
\nи канцеляризмы.<\/p>\n

Плох тот дизайнер, который считает что работа с текстом
\nне его обязанность. Нет смысла жаловаться менеджеру
\nи пиздеть на клиента — никто кроме тебя эту работу не сделает.<\/p>\n

Не можешь? Не хочешь? Тогда придется иметь дело с мелким
\nкеглем, костылями в виде стрелок, кружочков и прочей хуйни. А на выходе —
\nникому не нужный кусок говна. Вроде время потратил, получил за это деньги,
\nа пользы от твоей работы нет никакой.<\/p>\n

Ок, вернемся к тексту.<\/p>\n

Рассмотрим первый блок<\/h2>\n
\n\"\"\n<\/div>\n

Ну, заебись. Для оплаты по QR-коду тебе нужен смартфон.
\nЦенная инфа, что говорить. Без нее, я бы просто не знал как мне QR считать.<\/p>\n

А еще тебе понадобится мобильное приложение «Оплати».
\nНеважно, что его логотипами все залеплено вокруг, надо отдельно
\nпро него упомянуть обязательно с приставкой «мобильное», без него же
\nхуй пойми какое это приложение.<\/p>\n

Интересно еще что в этом блоке идет вроде бы простое перечисление,
\nно нарисовано это как последовательность действий, о чем говорят жирные стрелочки.<\/p>\n

Кстати, о стрелках. Да, о тех, что вылетают из жирных нумерованных
\nкружков. Нельзя же номер написать рядом с заголовком, надо обязательно
\nна противоположной стороне, а чтобы было понятно, к чему относится номер,
\nнужно соединить его длинным вонючим костылем в виде стрелки.<\/p>\n

Идем дальше<\/h2>\n
\n\"\"\n<\/div>\n

Если купить поллитру, то можно разобраться, что способов оплатить
\nдва — сканировать QR-код или нажать на «Купить» в приложении.
\nНепонятно зачем тогда в заголовке писать только «Оплата проезда по QR-коду».<\/p>\n

В любом случае, последовательность действий одинакова в обоих случаях и отличается
\nтолько целевым действием. Если это так, тогда вопрос — зачем дублировать одинаковые
\nшаги?<\/p>\n

Про наклейки уже упоминалось выше, их дублировать ни к чему.<\/p>\n

\n\"\"\n<\/div>\n

Проверка контролером<\/h2>\n
\n\"\"\n<\/div>\n

«Для предъявления электронного билета пассажиру необходимо зайти
\nв „Мои билеты“ в приложении „Оплати“ — если пассажир затеряется
\nв трех соснах приложения, контролер всегда ему напомнит что показать
\nи где это искать.<\/p>\n

„После сканирования на экране мобильного устройства контролера
\nотобразится информация о подлинности билета“ — вот глубочайше
\nвсе равно, что и как там отразится у контролера.<\/p>\n

Опять повторы:<\/p>\n

\n\"\"\n<\/div>\n

Резюме<\/h2>\n

Мелкий шрифт, сплошные повторы, ненужная информация, слишком
\nсложная структура макета.<\/p>\n

Прежде чем переверстать, я решил изучить приложение. И столкнулся
\nс неприятными сюрпризами, о которых инструкция не предупредила
\nпользователя.<\/p>\n

Во-первых нужен паспорт.<\/p>\n

Во-вторых вот:<\/p>\n

\n\"\"\n<\/div>\n

Хз в чем дело, но надо быть готовым к тому, что даже при наличии паспорта,
\nмогут возникнуть проблемы. Поэтому совет — лучше установить
\nприложение до того, как вы войдете в троллейбус (автобус,
\nтранспортное средство короче).<\/p>\n

Забьем на приложение и просто переверстаем то, что есть<\/h2>\n
\n\"\"\n<\/div>\n
    \n
  1. Заменил заголовок, который дает четко понять о чем весь макет.<\/li>\n
  2. Разбил инфу на 2 главные категории — Как платить? и Контроль проезда<\/li>\n
  3. Объединил в первый пункт два способа оплаты —
    \nQR-кодом и нажатием на „Купить“<\/li>\n
  4. В разделе о контроле проезда оставил только необходимую
    \nдля пассажира инфу.<\/li>\n<\/ol>\n

    Финальный штрих — добавим наклейку с QR<\/h2>\n
    \n\"\"\n<\/div>\n

    Ее можно будет вешать отдельно — со временем
    \nнарод привыкнет к такому способу оплаты и инструкция будет
    \nне нужна, только QR.<\/p>\n

    В целях экономии сделал этот формат более узким, а также снабдил
    \nмакет четким заголовком.<\/p>\n

    Кстати, я есть в телеграме
    \nhttps:\/\/t.me\/pereverst<\/a><\/p>\n", "date_published": "2021-03-15T11:24:43+03:00", "date_modified": "2021-03-15T15:24:17+03:00", "image": "https:\/\/pereverstal.by\/pictures\/IMG_20201016_0958515.jpg", "_date_published_rfc2822": "Mon, 15 Mar 2021 11:24:43 +0300", "_rss_guid_is_permalink": "false", "_rss_guid": "123", "_e2_data": { "is_favourite": false, "links_required": [], "og_images": [ "https:\/\/pereverstal.by\/pictures\/IMG_20201016_0958515.jpg", "https:\/\/pereverstal.by\/pictures\/IMG_20201016_095851.jpg", "https:\/\/pereverstal.by\/pictures\/IMG_20201016_0958512.jpg", "https:\/\/pereverstal.by\/pictures\/IMG_20201016_0958513.jpg", "https:\/\/pereverstal.by\/pictures\/IMG_20201016_09585171.jpg", "https:\/\/pereverstal.by\/pictures\/IMG_20201016_0958517.jpg", "https:\/\/pereverstal.by\/pictures\/IMG_20201016_0958517123.jpg", "https:\/\/pereverstal.by\/pictures\/Oplata0252.jpg", "https:\/\/pereverstal.by\/pictures\/Oplata_done_1.jpg", "https:\/\/pereverstal.by\/pictures\/Oplata_done_all_1.jpg" ] } } ], "_e2_version": 3254, "_e2_ua_string": "E2 (v3254; Aegea)" }