Що віддати розробнику разом із макетом, щоб він не вигадував екрани

Якщо кадрів немає, їх намалює розробник. На здачі ви скажете, що це не макет. Ця здача — перемальовка, яку можна було закрити чотирма зайвими кадрами й одним живим прикладом.

Нотатка для дизайнера або для людини в агенції, яка відправляє файл далі. Це не бриф маркетолога і не тека з паролями. Це картинка і фрази, які не дають розробнику вигадати картинку. На дзвінку з клієнтом ми з одного боку. Сюрприз приїжджає обом.

1. Про що збірка питає в перший день

Щасливий шлях — потрібний кадр і погана специфікація. Продукт майже весь час живе поруч із ним. Список порожній, бо акаунт новий. Запит падає, бо поле не прийняли. Екран чекає, бо десь повільно. Ім’я, посада або адреса не влазять у блок, який ви міряли двома короткими словами. Людині без права все одно треба кудись потрапити, хоча б на спокійну відмову.

Якщо цих кадрів немає, це не «деталі на потім». Це перші питання: щасливий шлях не віддати на продакшен, не обравши решту в коді. Вибір у коді невидимий до здачі. Ви його бракуєте, це справедливо, календар їде, це відчуває клієнт. Кадри у файлі переносять брак на картинку, де він дешевий.

Бекенд вирішувати не треба. Треба показати, що бачить людина: порожньо, не збереглось, чекаємо, не влізло, не можна. П’ять кадрів поруч зі щасливим, на кожен екран, який справді збираєтесь віддати в збірку. Екран, який у цю збірку не входить, позначте як напрям. Не лишайте його у файлі з виглядом зобов’язання.

• Порожньо: немає рядків, новий акаунт, пошук нічого не знайшов.
• Не збереглось: людина розуміє, що поправити.
• Чекаємо: екран уже попросили щось зробити, і це ще не скінчилось.
• Не влізло: ім’я, посада, ціна тієї довжини, яку продукт справді зберігає.
• Не можна: куди потрапляє людина, якій цей екран не належить.

2. Риба ховає місце, де верстка порветься

Латинське простирадло не показує перенесення. Картка в CRM, кошик і довідник співробітників рвуться в різних місцях. Картка — на назві компанії й нотатці. Кошик — на довгій назві товару й валюті. Довідник — на імені з по батькові або на порожньому телефоні. Рамку міряли за «Іван Іваненко» і круглою ціною. Продукт таким не буде.

Покладіть у файл один знеособлений приклад із живого продукту. Довге ім’я. Порожній телефон. Ціна в тій валюті, якою магазин справді користується. Зріз бази не потрібен, і чужий рядок у спільний файл класти не треба. Потрібен рядок, на якому рамці стане тісно.

Живого прикладу немає — так і напишіть і візьміть найдовші значення, які поля дозволяють. Мовчання читають як «короткий текст нормальний». І окремо позначте, що в кадрі справжній вміст, а що ще хром. Розробник збере хром як контент або пропустить підпис, який ви вважали фінальним, залежно від того, як був улаштований минулий файл. Позначки на полях вистачає: «заголовок фінальний, таблиця приклад, ілюстрації у файлі немає». Ілюстрація, якої немає, інакше стане сірим прямокутником, і асет попросять у день здачі.

3. Цей екран уже живе в продукті чи його ще немає

Багато макетів — не нові екрани. Це правка того, чим люди вже користуються: звіт, оформлення, картка, перемикання між клієнтами. Якщо цього не написати, у розробника два погані ходи. Зібрати екран із вашого кадру і викинути поведінку, якої кадр не показував. Або проігнорувати частини кадру, які не лізуть у поточну сторінку, і здивувати вас на здачі.

Напишіть на рамці. «Це правка звіту, який уже відкривають». «Це нове». І напишіть, чого перемальовувати не можна: крок оплати, спосіб, яким друга компанія не бачить рядки першої, кнопку, яка створює заявку. Макет, який ці речі підміняє між іншим, — інший проєкт. Клієнт почує про нього як про затримку, не як про рішення, яке ви ухвалили разом.

Живий екран ви ще не бачили — попросіть його до відправки файлу. Знімок із справжнім порожнім станом корисніший за ще один вигаданий перший екран. Міняти його можна. Робити вигляд, що його немає, собі дорожче: розробник дивитиметься на нього весь час збірки.

• На кожному кадрі «правка» або «нове».
• Список того, чого ця картинка не повинна підмінити.
• Один знімок екрана, як він працює сьогодні, якщо він сьогодні працює.
• Напрями не для цієї збірки підписані як напрями.

4. Чого цей файл не замінює

Маркетолог, або ви, усе ще має однією фразою сказати результат: що людина зможе зробити, чого не могла, і як ми це зрозуміємо. Цей пакет, включно з тим, чого не кладуть у чат: що докласти до старту розробки. Не ховайте результат усередину файлу і не чекайте, що його прочитають. Кадр — не перевірка приймання.

Доступи — знову інший пакет. Якщо робота сидить на чужому Laravel клієнта, агенція має принести місце, де зміну можна спробувати, і поіменний список кроків, які можуть зачепити. Це як агенція віддає проєкт. Макет його не замінює. Гарний файл на продукті, який запускається лише на живому сайті, — спосіб познайомити першу помилку з клієнтом.

Фреймворк, запит і чергу обирати не треба. Якщо кадр обіцяє поведінку, якої цього місяця не буде, напишіть, що людина має побачити замість неї, і хай це буде розмова до оцінки. Вимкнений контрол із фразою — дизайн. Контрол, який виглядає готовим і падає в коді, — баг, і на здачі поруч буде ваше ім’я.

5. На здачі ходять станами, не одним гарним знімком

Маршрут здачі домовляють до збірки, щоб розмова не звалилася у смак. Розробник відкриває порожній екран, зірване збереження, довге ім’я, очікування і відмову. Ви дивитеся на них, бо ви їх намалювали. Щасливий шлях — один пункт списку, не вся зустріч.

Стан, який свідомо викинули, — письмове «не в цій збірці», не порожнє місце. Порожнє місце заповнять. Письмове виключення оцінять як пізню роботу, і це якраз те, чого ви хотіли, коли різали обсяг. Знеособлений приклад поверніть на здачу. Довге ім’я влізло — кадр тримався. Не влізло — ви дивитеся на справжній промах, не на суперечку про сіре.

Клієнта тримайте на тому самому списку. Йому варто побачити порожній акаунт і зірване збереження, не лише перший екран. Це екрани, які зустріне його персонал. Клієнт, який бачив лише щасливий шлях, назве порожній стан багом. Показати раніше — частина передачі, не люб’язність.

• Здача йде порожнім, помилкою, очікуванням, довгим текстом і відмовою.
• Усе вирізане записане як «потім», не лишене порожнім.
• Знеособлений приклад на екрані в момент здачі, не лише у файлі.
• Клієнт бачив порожній стан раніше, ніж його побачать співробітники.

Коли кликати розробника до збірки

П’ять кадрів і один приклад ви додасте самі. Погляд збоку потрібен, коли макет лежить на продукті з живими клієнтами і ви не впевнені, які кадри сперечаються з екраном, яким уже користуються. Цей погляд дешевший за здачу на останньому тижні.

Я читаю макет проти працюючого продукту: що картинці можна міняти і яких станів усе ще немає. Послуги — така збірка на вже наявній системі. Роботи — та сама ситуація, результат біля операції. Якщо потрібен цей погляд, напишіть у LinkedIn. Список станів і чи існує екран. Паролі клієнта не надсилайте.