Данные в макетах

Реалистичность данных

ИНН, названия организаций, ФИО, адреса электронной почты и остальные реквизиты должны быть близки к жизни. На таких данных вы будете видеть, насколько хорошо они читаются и помещаются в отведённое им место.

Например, ИНН, состоящий из единиц, будет короче реалистичного ИНН примерно на 18 пкс.

ИНН из одних единиц «1111111111»

Неправильно

Реалистичный ИНН «6607001921»

Правильно

Если длина реквизита бывает разной, используйте примеры разной длины, а не такой, которая хорошо входит в поля или ячейки таблиц.

Поле ввода с ФИО «Иванов Иван Иванович», которое целиком помещается в поле

Неправильно

Поле ввода с длинным ФИО «Преображенская Алёна Александр…» — текст не поместился и обрезан краем поля

Правильно

Список организаций с короткими названиями одной длины: ООО «Тополь», ООО «Кедр», ООО «Ива»

Неправильно

Список организаций разной длины: ИП Ивановский Александр Александрович и ООО «Кушать надо вкусно и полезно, а не как сейчас в магазинах» — в две строки, АО «Аэропорт Курумоч» — в одну

Правильно

Это поможет не забыть показать, что происходит с данными, когда они не вошли: должны ли они обрезаться многоточием или выводиться в несколько строк, или просто исчезать за границей поля ввода.

Так у вас будут получаться надёжные решения, то есть такие, которые работают на любых данных.

Как определить оптимальную длину поля для реквизита

Чтобы длина поля, ячейки таблицы или просто строки в интерфейсе была оптимальна и в большинстве случаев вмещала в себя данные в одну строку, нужно знать, какие значения встречаются у пользователя. Для этого надо обратиться к метрикам и данным о пользователе. Иногда в команде есть человек, который этим уже занимается, обратитесь к нему. Но что именно спросить?

Если спросить про среднее значение, и подстраивать поля под него, данные не будут влезать в отведённое им место примерно у половины пользователей. Если спросить про максимальное значение длины, интерфейс будет заточен под статистические выбросы — поля и ячейки будут иметь избыточный размер, а это тоже плохо.

Поэтому мы используем персентили. Это статистический показатель того, какое положение занимает определённое значение во всём наборе данных.

Если вы хотите, чтобы данные поместились в одну строку у 80 % пользователей, нужно посчитать длину по 80-му персентилю. На деле это значит: «Не длиннее скольких символов будет значение, если мы возьмём все значения реквизита наших пользователей, а потом отсортируем их по возрастанию и возьмём первые 80 % из них».

Если вы будете таким образом формулировать вопрос, а потом ориентироваться на полученное значение, то места для данных будет достаточно, но оно не будет избыточным.

Автоматическая генерация данных

Когда данных надо много, а сочинять тяжело, их можно сгенерировать. Можно использовать AI-инструменты.

Текст в макетах

Дизайнер не использует «рыбный» текст. Например, если в интерфейсе должен быть текст ошибки, но его нет, дизайнер пишет этот текст сам, опираясь на знания о задаче. Если не хватает информации, дизайнер идёт к аналитику, продакту или исследователю.

Модальное окно ошибки с красным крестиком, заголовком «Здесь будет текст ошибки», текстом-заглушкой Lorem ipsum и кнопкой «Закрыть»

Неправильно

Модальное окно ошибки с красным крестиком, заголовком «Нельзя отправить отчёт», текстом «Заполните все поля и попробуйте отправить снова» и кнопкой «Закрыть»

Правильно

Данные в прототипах для тестирования

Пользователь разбирается в своей предметной области и сразу видит ошибки и нестыковки. Логические и фактические ошибки будут отвлекать его от задания и приводить к дискуссии с юзабилистом.

Убедитесь, что:

  • на разных экранах совпадают данные, которые должны совпадать; например, даты документов, названия организаций;
  • всё правильно по предметной области; например, если отчёт сдаётся поквартально, то в прототипе его периодом отчётности должен быть квартал.

Подробнее — в гайде «Подготовка прототипа к юзабилити-тестированию».

Не используйте грубые имена и названия.

Грубые названия: ИП Дуралей дуралеевич, ООО «Заучка», ООО «Ворона выклевала глаз»

Неправильно

Нейтральные названия: ИП Григорий Перельман, ООО «Ада Лавлейс», ООО «Уралэнергосбыт»

Правильно

«Оригинальные» названия — это неплохо, но во всём важна мера.

Пять «оригинальных» названий ООО, среди них «Рабы на плантациях», «Очередное название», «И ещё одно» и «Мы не придумали что здесь написать»

Неправильно

Пять вымышленных названий ООО в меру оригинальных: «РобКо Индастриз», «Мосты Бриджес и Фреджайл», «Маджестик-12», «Апертура Саенс», «Блек Миса»

Правильно

Макеты для публикации

Когда нужно подготовить макеты для публикации во внешний мир, старайтесь не использовать реквизиты реальных организаций. Невозможно гарантировать, что человека с некоторым ФИО или организации с определённым названием или ИНН не существует или что они не появятся в будущем, но можно снизить вероятность претензий:

  • не используйте реквизиты известных людей и организаций;
  • когда нужно проиллюстрировать неприятную ситуацию, используйте «невозможные» реквизиты.
Строка о банкротстве реальной компании: ПАО «РЖД», ИНН 7708503727 — объявлено банкротом

Неправильно

Строка о банкротстве вымышленной компании с «невозможным» ИНН: ООО «Неизвестное юрлицо», ИНН 6666999999 — объявлено банкротом

Правильно