https://blog-archive.alexkolodko.com/tags/yuridichniy-dizayn/ Олександр Колодько. Інформаційний та навігаційний дизайнер. Співзасновник команди ARC, співзасновник та головний дизайнер в Агентах змін (А3). Пишу про дизайн і цікаве мені · alexkolodko.com · wayfinding.systems uk Aegea 11.3 (v4134) Олександр Колодько. Інформаційний та навігаційний дизайнер. Співзасновник команди ARC, співзасновник та головний дизайнер в Агентах змін (А3). Пишу про дизайн і цікаве мені · alexkolodko.com · wayfinding.systems 25 https://blog-archive.alexkolodko.com/all/iban/ Thu, 15 Apr 2021 11:20:53 +0200 https://blog-archive.alexkolodko.com/all/iban/ <p>Дизайн документів взагалі не пахане поле. Ось <a href="https://t.me/legaldesign">Микита Підгайний</a>, який пропагує видалення беззмістовної юрні у юридичних документах, у своєму каналі написав про таку дрібничку, як написання IBAN.</p> <script async src="https://telegram.org/js/telegram-widget.js?14" data-telegram-post="legaldesign/45" data-width="100%"></script> <p>Дійсно дуже складно уважно сприймати таку кількість цифр без додаткових розділювачів. Дійсно потрібно розглянути сценарії використання цього коду. Його можуть:</p> <ul> <li>копіювати та переслати бухгалтерам чи юристам;</li> <li>копіювати та вставляти у клієнт-банк для оплати;</li> <li>набирати вручну з роздрукованого договору.</li> </ul> <p>Найпростіший варіант був би, як з номерами телефонів чи банківських карток, — набирати з пробілами. Але якщо такий код скопіювати, то не всі клієнт-банки його сприйматимуть. Авжеж це задачі розробників клієнт-банків зробити нормальний парсер, але маєво що маємо. Тож пробіли — не варіант.</p> <p>Друзі з каналу «<a href="https://t.me/legaldesign/45">Юридичний дизайн</a>» пропонують або робити частину цифр жирнішим накресленням, або сірим кольором.</p> <div class="e2-text-picture"> <img src="https://blog-archive.alexkolodko.com/pictures/photo_2021-04-15-12.15.05.jpeg" width="1280" height="1280" alt="" /> </div> <p>Це розв’язує проблему з копіюванням, але це ризикований варіант, бо:</p> <ul> <li>деякі люди погано зчитують сірий колір, він буде для них недостатньо контрастним, а у деяких моніторах на додачу може бути погано налаштований контраст;</li> <li>якщо друкувати сірий колір на поганих лазерних принтерах є ризик взагалі не видрукувати сірий текст, якщо навіть чорний може друкуватись неконтрастно.</li> </ul> <p>І це гарна дизайнерська задача: як можна залишити весь номер чорним та контрастним, полегшити зчитуваність довжелезного номера та залишити можливість його копіювати?</p> <h2>Псевдопробіли</h2> <p>Моя ідея в тому, щоб додати псевдопробіли міжлітерними інтервалами. Так можна розділити номер візуально і при копіюванні він буде цілісним. Це можна зробити:</p> <ul> <li>у Adobe Illustrator, InDesign чи Photoshop збільшивши кернінг після необхідних символів (у панелі <i>Character</i> або натискаючи <i>Alt +→</i>);</li> <li>у MS Word виділивши символ та додавши інтервал у меню<i> Format/Font (⌘D)</i>, <a href="https://www.dropbox.com/s/oxy6lno9xon4qoo/iban.docx?dl=0">приклад файлу</a> с таким форматуванням;<br /> * у вебі огорнувши тегом <span> кожну окрему частину коду та додавши стиль з відступом праворуч (<a href="https://codepen.io/alexkolodko/pen/PoWexLg">приклад на codepen</a>).</li> </ul> <div class="e2-text-picture"> <img src="https://blog-archive.alexkolodko.com/pictures/Screenshot-2021-04-14-at-22.00.45.jpg" width="2560" height="1470" alt="" /> <div class="e2-text-caption"><a href="https://www.dropbox.com/s/oxy6lno9xon4qoo/iban.docx?dl=0">Приклад</a> налаштування міжлітерних відстаней у MS Word</div> </div> <p>Авжеж, не у всіх інструментах є налаштування відстаней для символів, наприклад, у Гугл Документах це не спрацює. Але варто користуватись цим там де це можливо.</p> <p><hr></p> <div><div style="float: left;"><p><span style="font-weight:bold; font-size: 3em"><b>?</b></span></p> </div><div style="padding: 1em 0 0 4em"><p>Якщо у вас є питання або приклад дизайну, які потрібно подивитись та прокоментувати, напишіть на <a href="mailto:alexkolodko@gmail.com">пошту</a> або у <a href="https://t.me/alexkolodko">телеграм</a>.</p> </div></div>