Лучшие статьи и кейсы стартапов
Включить уведомления
Дадим сигнал, когда появится
что-то суперстоящее.
Спасибо, не надо
Главное Свежее   Проекты
Рекомендуем
Продвинуть свой проект
661 9 В избр. Сохранено
Авторизуйтесь
Вход с паролем

​UX-текст: строчные и заглавные буквы

О том, как пишут текст в Apple, Android и Microsoft. Пригодится тем, кто работает с англоязычными интерфейсами и сайтами.

Далее — перевод статьи UX-писателя Dropbox Джона Сайто

0*RXhlQ7d4p0jnZW_q.

Видите разницу между сообщениями? В левом больше заглавных букв, чем в правом. Большая «О» , маленькая «о». Но, кому какая разница, правда?

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

Заголовок против Предложения

Почти во всех продуктах или на сайтах используются два стиля: «Заголовок» или «Предложение».

Заголовок — каждое слово начинается с заглавной буквы;

Предложение — с заглавной буквы начинается только первое слово.

Если вы пользуетесь техникой Apple, то замечали, что все слова в интерфейсных сообщениях начинаются с заглавных. Гайдлайны Apple рекомендуют заглавные для слов в UI-элементах: сообщениях, кнопках и меню.

Если пользуетесь Аndroid, то видели, что они используют «Предложение»: гайдлайны компании рекомендуют так писать.

0*Fvm5WL9xglFhy0C3.

Разберемся, когда и как использовать стили «Заголовок» и «Предложение» в UX-текстах. Поехали.

Что хорошего в Заголовке

Симметрия

Некоторые дизайнеры уверены, что «Заголовок» лучше, потому что он — симметричный. А еще заглавные буквы в начале каждого слова придают ритм фразе:

0*bZLNXIJvzfi7UIQp.

Визуальный вес

Заглавные буквы похожи на поднятые вверх руки, они привлекают внимание. Если вы используете разные начертания, «Заголовок» — то, что нужно.

0*f1egMqwlDZ9I3XwG.

Заметили, что заголовок на левом поп-апе кажется больше правого? Уверен, его точно прочитают.

Значительность

Заглавные буквы кажутся важными и формальными. Например, сайт New York Times или USA.gov используют в названии заглавные. Это Профессионально. Серьезно. Авторитетно.

Заглавные буквы — как классический костюм. Для некоторых брендов они нужны.

Пример: если вы занимаетесь безопасностью бизнес-процессов, то для интерфейса подойдут заглавные буквы. Они вызывают доверие и говорят о профессионализме.

b_5a29375c931e2.jpg

Что хорошего в Предложении

Простота

Читать предложениями — легко и привычно. Особенно, если текст длинный.

Пример: Можете Представить Как Тяжело Читать Слова В Длинном Тексте?

b_5a2937a825016.jpg

Ясность

UX-писатель из Google Сью Фактор говорит, что «Предложение» — это понятный стиль для программистов и дизайнеров: каждая фраза начинается с большой буквы. Это правило.

А вот «Заголовок» не всегда понятный для тех, кто разрабатывает интерфейс. Например, имя вкладки — это заголовок? А настройки почты: заголовок или основной текст?

А еще — четких правил для «Заголовка» нет. Например, как писать «из» или «через»: с заглавной или прописной? А артикли?

Пример: гайдлайн Apple. В нем советы, какие слова писать с заглавной.

b_5a2937ce36710.jpg

Дружественность

«Заголовок» — формальный, а «Предложение» — простой и дружественный текст.

Пример: в Dropbox мы используем «Предложение», потому что хотим быть неформальными и естественными. Мы уверены, голос нашего продукта отличается от конкурентов и используем «Предложение», чтобы выделиться.

b_5a293867557e7.jpg

Понятные имена собственные

В «Предложении» имена собственные видны с первого взгляда. (Имена собственные — часть речи, которая всегда пишется с заглавной. Например, Microsoft или New York Times).

Много компаний пишут свои названия или функций с заглавной, например «Почта», «Календарь», «Спарк». Если использовать заглавные везде, то непонятно, где название, а где — просто слово.

b_5a29389917069.jpg

Другие примеры

«Заголовок» и «Предложение» — два популярных способа писать текст для приложений и сайтов. Но не единственные.

Пример: на Windows Phone 8 почти весь текст интерфейса — только строчные. Даже заголовки и кнопки.

b_5a2938ad87baa.jpg

Пример: GIPHY — текст набран только заглавными. В этом есть смысл, так как в мемах и гифках пишут обычно заглавными.

b_5a2938c11d02b.jpg

Создайте свой стиль

У «Заголовка» и «Предложения» есть плюсы и минусы. Неважно, какой вы выберете — убедитесь, что стиль совпадает с голосом вашего бренда.

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

Вместо заключения

Что вам больше нравится в интерфейсе: «Заголовок» и «Предложение»? КАПС ЛОК или прописные? А может, вы бунтарь и сами придумываете правила?

Делитесь мнениями, пишите комментарии и вопросы по теме.

Вступайте в Редач, чтобы не пропустить полезные статьи o UX: https://vk.com/redachredach

Статью перевела Ира Грязных, редактор-копирайтер: http://griaznyh.ru/.

+7
В избр. Сохранено
Авторизуйтесь
Вход с паролем
Подбираем рекоммендации...
Комментарии
Первые Новые Популярные
Евгений Стоичков
"Пример: на Windows Phone 8 почти весь текст интерфейса — только прописные"
ошиблись, строчные, а не прописные )) (хотя я сам ненавижу это слово "прописные")

Насчет заголовков это относится к западной типографике.В русском нет практики делать заголовок ставя большую букву у каждого слова если это не нащвание организации, например. Названия художественных произведений на инолише всегда каждое слово с заглавной, за исключение артиклей и союзов (да и то не всегда).
Хороший перевод, спасибо.
Ответить
Irina Griaznykh
Спасибо, поправила.)

По поводу типографики русской и английской — согласна. Но, опять-таки, есть BBC — они пишут предложениями и Bloomberg — пишут заголовками. Так что тут еще дело в редполитике или гайде.

У нас исключения для заглавный — это имена собственные (названия всякие, топонимы, имена).
Ответить
Евгений Стоичков
да, все верно), заголовки они пишут и так и сяк, я к тому, что прием со всеми заглавными у них какбы более привычен изза традиционного написания названий худ. произведений, поэтому более органично смотрится чем с кириллицей.
Ответить
Виктор Алфёров
Доходчиво объяснили. Благодарствуете.
Ответить
Irina Griaznykh
Пожалуйста!
Ответить
МореМест
Жильё на Чёрном море без посредников
Станислав
Не надо портить языки, поэтому писать надо стараться всегда грамотно!

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

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

На втором скрине как делаю я. Короткие тексты можно выравнивать по центру, главное целевое действие должно тормознуть взгляд, смысл понимается с первого слова заголовка. Побочный текст и нецелевая кнопка отмены менее заметны, они должны быть, но не должны утягивать внимание.

Ну и напоследок хотелось бы отметить, что забавно как в крупных компаниях пилят такую же хрень, как в лучших студиях Урюпинска. У гугла ещё более ли менее симпотно и понятно, там по углам всё и выравнивание норм, iOS - эпик фейл просто, два с минусом.
Ответить
Irina Griaznykh
Идеал — это полезный и быстрый текст, который вписан в логичный интерфейс.
iOS более или менее адекватно локализируют под русский язык, но тоже случаются косяки)
Ответить
МореМест
Жильё на Чёрном море без посредников
Станислав
Заголовок можно было заменить для краткости на
Turn on GPS to allow "Weather" know your location
вместо
Turn On Location Services to Allow "Weather" to Determine Your Location

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