Дизайн Игнат Смирнов
2 660

Про реальные данные в дизайне интерфейсов

Ну и шумиха вышла со Сбербанком: попал в кучу изданий, был в эфире на радио и даже засветился по телеку. А всё из-за того, что кто-то разместил мой номер телефона в онбоардинге приложения «Сбербанк Онлайн». Тема действительно интересная, поэтому последнюю неделю я посвятил её исследованию: пообщался с дизайнерами, провел несколько опросов, а также сделал какие-то выводы и вывел новый подход по работе с данными в макетах.

В закладки

Больше двухсот человек приняли участие в моём опросе в телеграме и на фейсбуке. Из них только 22% указали, что используют реальные данные в своих макетах. Тяжело сказать, насколько юзабельной получилась эта статистика — в опросе приняли участие не только интерфейсные дизайнеры, но и менеджеры, графические дизайнеры, маркетологи и пр. Причем «за» использование голосовали как раз те, кто делают продукт и твёрдо укрепились в профессии, остальные же голосовали против (возможно, что и из-за эффекта новостей). Что же, давайте разберёмся, где правда.

Данные в интерфейсах

«Lorem ipsum давно мёртв, его использование считается моветоном, нужно использовать живые тексты», — этому учит большинство книг, курсов и статей по дизайну. Это действительно так и об этом все знают. Решают эту проблему по разному. Кто-то генерирует эти данные через вспомогательные приложения (например, Craft), кто-то заимствует тексты конкурентов, кто-то пишет сам.

Крафт позволяет не только сгенерировать фейковые данные, но и подтянуть реальные из JSON (например по API)

Как человек, работающий в продукте, я считаю, что использовать нужно только живые данные или некие, максимально приближенные к ним. Это поможет максимально прочувствовать продукт и понять, как он будет жить. Тексты, фотографии, иллюстрации — всё это должно быть максимально проработано и готово к моменту старта дизайна. Думаю, у каждого в начале карьеры были ситуации, когда вроде как был отрисован крутой макет, но потом приходил заказчик с контентом и всё рассыпалось.

Чтобы не было сюрпризов, важно проработать то, как будет выглядеть каждый элемент на каждом этапе жизненного цикла. Состояния кнопок, пунктов меню, инпуты и пр. И, конечно, для этого везде должен быть релевантный, приближенный к реальности контент. А где его проще всего найти? Правильно, взять из головы: написать свой номер, свою почту, поставить свою аватарку. Мой коллега из Сбера даже использует свою зарплатную карту в макетах и всё у него хорошо.

Данные в рекламе

Другое дело — рекламные материалы. Мой случай в очередной раз показал то, что люди могут оказаться недостаточно грамотными. Они бездумно пытаются повторить действия, которые увидели в рекламе. Кто-то даже перевел по моему номеру из приложения Тинькофф-банк на карту в Тиньков, так как подумал, что он обязан это сделать.

Следовательно, рекламные материалы не должны содержать абсолютно никаких реальных данных, если, конечно, мы не хотим чтобы их как-то использовали. Тот же онбоардинг Сбербанка не должен был содержать ничего — только призыв к действию и скриншот с пустыми полями. Кстати, в своём iOS приложении ребята так и сделали — молодцы!

{ "items": [{"title":"\u0420\u0435\u043a\u043b\u0430\u043c\u0430 \u0421\u0431\u0435\u0440\u0431\u0430\u043d\u043a\u0430 \u043d\u0430 iOS","image":{"type":"image","data":{"uuid":"f834b7d5-73ed-1c3c-fc0c-9322f664be7b","width":539,"height":960,"size":47332,"type":"jpg","color":"49bc73","external_service":[]}}},{"title":"\u0420\u0435\u043a\u043b\u0430\u043c\u0430 \u0421\u0431\u0435\u0440\u0431\u0430\u043d\u043a\u0430 \u043d\u0430 Android","image":{"type":"image","data":{"uuid":"b81c8d69-b69c-be62-3aaf-42becf59df54","width":540,"height":960,"size":77005,"type":"jpg","color":"37bfb1","external_service":[]}}}] }

Кто-то может предложить использовать несуществующие номера номера телефонов, но я бы не советовал делать и этого. Уверен, кто-то обязательно попытается воспользоваться и ими, а в случае неудачи начнет звонить в службу поддержки, чем увеличит нагрузку на неё и, следовательно, расходы компании. Используйте номера (и другие данные) только тогда, когда целью вашей рекламы является получение лидов по ним.

Мои личные выводы

Несмотря на то, что реальные данные это хорошо, с этого момента я решил, что для личных данных я всё-таки буду применять какую-то шаблонность. Например, коды в номерах телефонов в интерфейсах можно заменять на три пятёрки, как это делается в американских фильмах. Адреса почты указывать с несуществующими доменами, а номера карт те, которые не проходят по алгоритму Луна. Благодаря этому, даже если данные из макетов и попадут куда-то ещё, то у людей никак не получится ими воспользоваться.

Кадр из фильма "Охотники за приведениями"

На этом пока всё. Надеюсь, материал получился полезным. Свои замечания и предложения пишите в комментариях, а также подписывайтесь на мой канал в телеграме Ignat Talks — в нём я пишу статьи для начинающих (и не очень) дизайнеров, делаю обзоры на различные сервисы, а также переводы полезных материалов.

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

Написать
{ "author_name": "Игнат Смирнов", "author_type": "self", "tags": [], "comments": 20, "likes": 19, "favorites": 27, "is_advertisement": false, "subsite_label": "design", "id": 45755, "is_wide": false }
00
дни
00
часы
00
мин
00
сек
(function(){ var banner = document.querySelector('.teaserSberbank'); var isAdsDisabled = document.querySelector('noad'); if (!isAdsDisabled){ var countdownTimer = null; var timerItem = document.querySelectorAll('[data-sber-timer]'); var seconds = parseInt('15388' + '59599') - now(); function now(){ return Math.round(new Date().getTime()/1000.0); } function timer() { var days = Math.floor(seconds / 24 / 60 / 60); var hoursLeft = Math.floor((seconds) - (days * 86400)); var hours = Math.floor(hoursLeft / 3600); var minutesLeft = Math.floor((hoursLeft) - (hours * 3600)); var minutes = Math.floor(minutesLeft / 60); var remainingSeconds = seconds % 60; if (days < 10) days = '0' + days; if (hours < 10) hours = '0' + hours; if (minutes < 10) minutes = '0' + minutes; if (remainingSeconds < 10) remainingSeconds = '0' + remainingSeconds; if (seconds <= 0) { clearInterval(countdownTimer); } else { timerItem[0].textContent = days; timerItem[1].textContent = hours; timerItem[2].textContent = minutes; timerItem[3].textContent = remainingSeconds; seconds -= 1; } } timer(); countdownTimer = setInterval(timer, 1000); } else { banner.style.display = 'none'; } })();
{ "id": 45755, "author_id": 59944, "diff_limit": 1000, "urls": {"diff":"\/comments\/45755\/get","add":"\/comments\/45755\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/45755"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199114 }

20 комментариев 20 комм.

Популярные

По порядку

Написать комментарий...
15

Игнат немножко подзаебал уже, но и Сбер какой-то ёбнутый, то есть те, кто картинки делал. Мне эта история напоминает историю с "Лебедев пидарас и хуесос" на плакатах ГазпромНефти.

Ответить
7

«Как на каждом углу кричать о своей проблеме,что бы дали побольше»

Ответить
7

Боже, какой же ты нудный.

Ответить
–3

¯\_(ツ)_/¯

Ответить
–3

Не, ну я мог бы написать, что теперь буду мстить и ставить везде номер Сбера, но зачем? :)

Ответить
4

Заипал пиариться уже

Ответить
–6

А ты заипал у сбера подлизывать, но я же молчу :)

Ответить
0

Почту на не существующем домене - плохая идея. Домен могут зарегистрировать.
Лучше придумать доменную зону, которой нет, по типу site.examplezone (и такую, которая скорее всего никогда не появится)

P.S. Я предположил, что планировалось использовать придуманные, но реалистичные домены.

Ответить
0

Мне казалось, что Сбер - контора, что может позволить себе доменное для маркетинговой хуйни. В качестве примера могу не глядя привести contoso.com Майкрософта.
А решение проблемы с номерами телефонов можно подглядеть у США с их 555-××-××

Ответить
0

Конечно можно зарегистрировать.
Я с точки зрения штатного дизайнера подумал, что ему придётся согласовывать регистрацию. Могу предположить, что в Сбере это лишний гемор.

Ответить
0

Ох, вы даже не представляете, насколько гемор :) я как-то раз попросил купить Zeplin, так как разработчики просили макеты в нём... проще самому за свой счет)

Ответить
0

Я думал, что это забота не какого-то одного человека

Ответить
0

Бюрократизм подан сэр.

Ответить
0

С 555 хорошая идея. Пожалуй, приложу картинку.

Ответить
0

Лол, в статье это и написано) сейчас бы гнать о пиаре, но при этом не читать ничего))

Ответить
0

Конечно, картинку я из статьи и взял) Комментарий не вам был вообще

Ответить
0

Зачем так загоняться? Просто пишешь от балды что-нибудь, главное не свой номер :)

Ответить
–1

Так от балды может получиться чей-нибудь чужой номер. Все равно же есть установки в голове, что в скобках должно быть что-то с девятками. Так вот, я глянул, таких комбинаций оказалось очень даже много))

Ответить
0

+7 (___) ___-__-__
+7 (000) 123-45-67

Ответить
0

Маска не подходит в описанном примере, а нули как альтернатива ок, да.

Ответить
0

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Плашка на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } } ]
Команда калифорнийского проекта
оказалась нейронной сетью
Подписаться на push-уведомления