---
updateDate: 2026-02-05T00:00:00Z
publishDate: 2024-07-24
publishYear: 2017
name: Sberbank
title: Гайд по созданию интерфейсных текстов
excerpt: Разработали подробную инструкцию для UX-писателей, редакторов и дизайнеров интерфейсов крупнейшего банка России.
context: Когда Сбербанку потребовалось построить системную работу над интерфейсными текстами, оказалось, что в отрасли еще нет стандартов и готовых инструкций. Значит эти стандарты и инструкции нужно создать.
logo:
src: ~/assets/images/portfolio/sberbank/logo.png
alt: Сбербанк logo
link: https://www.sberbank.com/ru
image: ~/assets/images/portfolio/sberbank/sberbank.jpg
imageAlt: Гайд по созданию интерфейсных текстов
thumbnail:
src: ~/assets/images/portfolio/cards/sber.png
alt: Собака Павлова • Сбербанк • Гайд по созданию интерфейсных текстов
tags:
- fin
- content-design
- prof
tags2:
- Финансы
- Интерфейсные тексты
- Инструкция для UX-писателей
- Контент-дизайн
result:
- text: К сожалению, результат не покажем.
budget: ~ 1 300 000 ₽
relatedPages:
- text: |
### Вам нужен дизайн контента?
#### Заказать дизайн
Напишите нам на [we@sobakapav.ru](mailto:we@sobakapav.ru)
#### Что мы можем сделать?
[Дизайн контента](/services/content-design), как в этом кейсе, и [многое другое](/services).
collection: services
page: content-design
- text: |
### Хотите сделать сами?
Научим писать хорошие тексты и делать хорошие интерфейсы.
collection: promo
page: txt
relatedPages2:
- text: |
### Похожие проекты
collection: portfolio
page: qiwi
- collection: portfolio
page: alfastrah-design
- collection: portfolio
page: alfa-arm
- collection: portfolio
page: alfastrahhr
- collection: portfolio
page: opendesk
- collection: portfolio
page: e-gorod-guide
- collection: portfolio
page: inbank
- collection: portfolio
page: otkritie
- collection: portfolio
page: tinkoff
- collection: portfolio
page: alfabank
director: Сбербанк использует текстовый гайд для создания интерфейсов.
metadata:
canonical: https://sobakapav.ru/portfolio/sberbank
title: Контент-дизайн • Гайд по созданию интерфейсных текстов для «Сбербанка»
description: "Помогли Сберу построить системную работу над интерфейсными текстами: разработали гайд, который поможет UX-писателям и дизайнерам находить лучшие формулировки для пользователей."
robots:
index: true
follow: true
openGraph:
site_name: Собака Павлова
images:
- url: '~/assets/images/portfolio/sberbank/sberbank.jpg'
width: 1680
height: 1504
---
import TOC from '~/components/widgets/TOC.astro';
<TOC>
[Вводные](#anchor1) • [Задача](#anchor2) • [Аналитика](#anchor3) • [Первая итерация](#anchor4) • [Бета-версия](#anchor5) • [Результат](#anchor6) • [Цены и сроки](#anchor7)
</TOC>
## <a name="anchor1" />Вводные
«Единая фронтальная система» (ЕФС) — [грандиозный проект](https://habr.com/en/users/efs_programm/publications/articles/) «[Сбербанка](https://www.sberbank.com/ru)» по разработке кросс-функциональной платформы для всех продуктов и сервисов банка. Переоценить масштабы невозможно, любое общение клиента с банком в офисе или в интернете будет происходить (и уже местами происходит) с помощью ЕФС.
Огромный пласт работы — стандартизация рабочих мест операторов в отделениях «Сбербанка». Этим занимаются 25 проектных команд [«Сбертеха»](https://sbertech.ru/) в тесном сотрудничестве с 25 бизнес-подразделениями. Вместо вороха программ разной степени сложности — одна и довольно простая. Не нужно заучивать горячие клавиши и подглядывать в шпаргалки, и так все понятно.
_Вот что видит на мониторе сотрудник Сбербанка, когда обслуживает клиента. Здесь и далее — все персональные и платежные данные выдуманы_
Разработка идет своим чередом, «Сбербанку» не приходится жаловаться на нехватку квалифицированных кадров. Но вот какое дело. Кроме типичных интерфейсных элементов, которыми умело жонглирует целая армия UX-проектировщиков, есть особые — текстовые. И с ними не все так просто.
- Подсказки в новых интерфейсах отличаются от просто подсказок. Они призваны не столько пояснять сложные моменты (это лучше решать упрощением интерфейса), сколько заменить процесс обучения сотрудников. То есть быть в меру «капитанскими» и достаточно подробными.
- За ошибки отвечает отдельная информационная система, и нужно каким-то образом заложить формулировки и инструкции, которые бы были понятны и полезны в любом контексте — мы же не знаем заранее, когда и где возникнет проблема.
- В ЕФС есть нестандартный интерфейсный элемент — «прямая речь». Вроде бы простая штука, фраза, которую нужно сказать клиенту. Но общение сотрудника в офисе отличается от зачитывания готовых речевок оператором колл-центра. Как упростить жизнь сотруднику, сделать его речь понятной для клиента и сохранить нормальное человеческое общение?
Вообще тексты — головная боль не только Сбербанка. Тот же Google уже пришел к тому, что [в команде разработчиков нужен UX-писатель](https://design.google/jobs/ux-writer), следящий не столько за грамотностью формулировок, сколько за смысловой частью и логикой повествования. UX-писатели есть в Microsoft, Dropbox, «Собаке Павловой», Apple и в других менее известных компаниях.
> Мы и вас можем научить создавать хорошие интерфейсные тексты. В модуле дизайн-задачника [Несекретные секреты текстов](https://www.eduhund.ru/program/io/?utm_source=sobakapav&utm_medium=site&utm_campaign=page) один урок полностью посвящен интерфейсным текстам. А остальные восемь — тому, как писать нормально и для людей (не только интерфейсные, любые тексты).
## <a name="anchor2" />Задача
Итак, наша задача — разработать гайд по созданию текстовых интерфейсных элементов.
### Плюсы и минусы
>+ **Доступ к материалам**
>Можем изучить все созданные интерфейсы и черновики.
>+ **Доверие**
>Заказчик не сомневается в нашей экспертности.
>+ **Интересная задача**
>Мы любим решать задачи, которые никто не решал до нас. Это сложно, но вдохновляет.
>- **Высокая неопределенность**
>На многие вопросы ответ один — «пока неизвестно».
>- **Нельзя погрузиться в реальный процесс**
>Мы не можем проверить свои рекомендации в боевых условиях.
>- **Очень много тонкостей**
>Это тексты, с ними всегда так.
## <a name="anchor3" />Аналитика
### Сбор и уточнение бизнес-требований
Начали с классификации. Разобрались, какие виды интерфейсных текстов есть в ЕФС, и чем они отличаются. Красивая картинка появилась только в финальной версии гайда, мы приводим ее в начале кейса для наглядности.
_Все виды интерфейсных текстов ЕФС на одной картинке_
Дальше было сложнее. Высокая неопределенность потребовала многочасовых разговоров.
_По каждому пункту тут же принимали решения_
Мы созванивались с заказчиком каждую неделю и после краткого отчета задавали новые вопросы и обсуждали обнаруженные нюансы. Иногда даже рисовали — чтобы было понятно, о чем идет речь.
_Простые картинки помогают лучше понимать друг друга_
### Изучение прототипов
Мы изучили прототипы тридцати продуктов разной степени сложности. Нас интересовали уже написанные подсказки и ошибки, а также контекст, в котором они появляются. Из нескольких тысяч экранов копирайтер выбрал 350 удачных и не очень примеров и вынес вердикт по каждому пункту.
_Просмотрели несколько тысяч экранов, к 350 оставили комментарии_
### Визит в офис
В очередной раз обдумывая требования к текстам, мы поняли, что сотрудника банка нужно рассматривать как голосовой интерфейс для клиента. Нам надо было выяснить, как эта модель соотносится с реальностью, и мы отправились в питерский офис разговаривать с сотрудниками.
Мы узнали, как устроен процесс обслуживания, с какими сложностями связано общение с клиентом и проведение операций. Увидели, как за считаные минуты (для каждой операции — свой тайминг) сотрудник уточняет задачу, отвечает на вопросы и запускает несколько программ, одновременно рассказывая клиенту, что происходит. И да, это были образцово-показательные сотрудники.
Для себя, не для проекта получили два бонуса. Стали спокойней относиться даже не к самым клиентоориентированным сотрудникам банка — попробуйте сами на их месте всегда оставаться дружелюбными. А еще руководитель проекта обнаружил давно потерянную сберкнижку с 10 тысячами рублей.
Все наблюдения фиксировали.
_[Интервью с операторами](https://drive.google.com/file/d/1aXc5UQH1QYyTn-kjwqy_YdmKGDKwzvWJ/view?usp=sharing)_
Сложнее всего оказалось сказать «стоп, хватит». Можно бесконечно погружаться в детали и нюансы, но пора начинать работать над документом.
## <a name="anchor4" />Первая итерация
Мы сделали предварительную структуру гайда. Среди прочего там были разделы:
- с общими требованиями к текстам;
- с описанием правил создания каждого вида подсказок;
- с примерами проектирования целых экранов, включающих подсказки или сообщения об ошибках.
Скорости ради работали в несколько потоков.
### 70 простых правил русского языка
Самое страшное, что действительно всего 70 и действительно простых. Коллеги-редакторы сокращали и упрощали, как могли. И акцент делали изначально на редактуру, а не на «капитанские» правила.
Мы понимали, что вряд ли удастся заставить каждого автора зазубрить этот раздел. Прочитали бы — уже хорошо. Но, судя по нашему опыту, заинтересованному новичку нужна эдакая карта правил и нюансов редактуры. Увидеть направление, а дальше — Google и [Розенталь](http://rosental-book.ru/) в помощь.
_70 правил русского языка — минимум, необходимый для автора_
### Требования к подсказкам
Вводной информации было вполне достаточно, чтобы начать давать советы. Чем мы и занялись. Сначала — в свободном формате. Уже в процессе поняли, что часть требований — очевидна, часть — определена контекстом, часть — высший пилотаж для гуру интерфейсных текстов.
_Фразы в подсказках типа «прямая речь» нужно строить так, чтобы их можно было без запинки прочитать вслух._
### Проектирование контента
Подсказки и ошибки живут не сами по себе, на их содержание влияет контекст: сценарий, окружающие элементы. Мы дали подробные инструкции, как проектировать контент на страницах с ошибками. А еще заметили, что в интерфейсах, похоже, не хватает стартовой страницы и страницы успеха.
_К стартовой странице и странице успеха — отдельные требования_
Проектировщики оценили, но в финальный вариант гайда эти разделы не вошли. Если коротко, то мы затронули сложный процесс выявления истинной потребности клиента, когда еще ни о каких интерфейсах и процессах нет речи.
### Кнопки, ссылки, все дела
Мы еще не знали точно, как будет построена работа с интерфейсными текстами у Сбербанка. (На самом деле, еще никто в мире не знает, как строить эту работу правильно.) Возможно, будущему UX-писателю придется иметь дело с текстами и на кнопках, и в списках. Поэтому подключили к проекту коллегу-дизайнера, прошлись по интерфейсам и сделали черновик раздела. Очень осторожно, чтобы не залезть на чужую территорию и ограничиться только буквами.
_Названия интерфейсных элементов должны быть согласованы_
Все материалы, созданные девятью нашими специалистами, объединили в один документ, снабдили его лирическим введением и практическим «правилом здравого смысла», которое призывало использовать гайд как справочник, но не считать его догмой, и поехали показывать коллегам из «Сбертеха».
_Первая версия гайда готова к презентации_
### Презентация
На презентацию собралось около пятидесяти человек — проектировщики и владельцы продуктов (то есть внутренние заказчики). Мы не рассчитывали собрать за час полный фидбек. Нам нужно было, во-первых, рассказать коллегам, что вообще происходит, во-вторых, оценить общую реакцию (от «здорово» до «не учите меня жить»).
_По этим подсказкам новичок будет изучать интерфейс_
### Фидбек
Первая часть работы позади. Коллегам наша работа понравилась, спросили-предложили немало полезного. Через две недели после презентации у нас было около 60 открытых вопросов — самых разных.
- Не имеющих отношения к содержанию — ура, не нам это решать.
- Точечных замечаний — взяли и исправили.
- Более-менее глобальных замечаний — а вот тут есть что обсудить.
## <a name="anchor5" />Бета-версия
Признаться, мы опасались, что следующая итерация затянется. Одно дело — обсуждать общие вопросы, другое — вчитываться в гайд и на ходу принимать решения. Опасения не оправдались. На трехчасовом созвоне мы обсудили все замечания, а после за несколько дней довели гайд до ума.
- Утрясли содержание, поняли, что половина разделов пока не имеет отношения к зоне ответственности пользователей гайда.
- Оформили. Красивости и дизайн не нужны, но общая аккуратность обязательна.
- «Все переделали» — еще раз прошлись по готовому материалу, качественно улучшили все рекомендации, сделали их понятней и полезней. Окончательно определили формат: сначала идут общие требования, потом — разбор примеров.
_Обзор текстовых блоков и требования к одному из них_
Редактуре можно научиться только на примерах.
_Не поленились придумать десятки примеров_
В текстах предупреждений и ошибок читатель должен находить ответы на конкретный набор вопросов.
_Тексты ошибок не пишут, а проектируют по особым правилам_
И так далее, и тому подобное.
## <a name="anchor6" />Результат
Полностью документ не покажем. Высок риск, что кто-нибудь захочет переложить его на свою реальность, отличающуюся от реальности Сбербанка, и ничего не получится.
Внедрением и поддержкой Сбербанк занимается самостоятельно, и мы сейчас не знаем, в каком виде существует гайд. Точно знаем, что он не остался лежать в столе. Заказчик, кстати, хвалился им на конференции [RIF 2018](https://2018.rif.ru/) ([12 слайд](http://files.runet-id.com/2018/rif/presentations/19apr.rif18-zal-5.10-00--kudriashova.pdf) презентации). Сразу после того, как «Спортмастер» [рассказал](http://files.runet-id.com/2018/rif/presentations/19apr.rif18-zal-5.10-00--kalmahelidze.pdf) про то, как [мы исследовали их киоски](https://sobakapav.ru/portfolio/sportmaster):)
Простите, отвлеклись. Отметим еще пару важных моментов.
**Командная работа.** Над гайдом работало девять штатных специалистов «Собаки Павловой», и каждый привнес свою экспертизу в содержательную часть. Только так результат получается более-менее объективным.
**Сделать больше, а потом сократить.** Чтобы отделить главное от второстепенного и «наше» от «не нашего», нужно сделать всё — а потом убрать лишнее.
## <a name="anchor7" />