Выходим на глобальный рынок: адаптация интерфейса под RTL

Представьте: тексты во всех ваших любимых приложениях — мессенджерах, доставках еды, фоторедакторах — написаны в обратном порядке. То есть, справа налево.

Жителям арабских стран и Израиля даже представлять не надо — их письменность имеет именно такое направление. Если вы хотите выйти на рынок этих стран и адаптировать приложение под их язык, нужно учесть множество нюансов. Не только написание текста, но и изменения в навигации и структуре приложения, типографике, расположении иконок. А еще важно настроить правильное отображение времени и валюты, инпуты и другие элементы.

Написали статью о том, как адаптировать приложение под обратное написание и ничего не упустить.

How to upload an app to the App Store and not get rejected

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

Арабский язык является родным для более чем 370 млн человек по всему миру и имеет свои особенности. Например, арабское письмо читается и пишется справа налево. Это направление известно как RTL (Right‑To‑Left), в отличие от общепринятого в русско‑ и англоязычном мире направления LTR (Left‑To‑Right).
Такая особенность влияет не только на направление письма, но и на восприятие всего контента, в том числе навигацию, структуру приложения, типографику и иконки.

В этой статье ребята из CleverPumpkin Евгений Можаев и Федор Миронов описывают основные правила адаптации дизайна под арабскую локализацию.

Элементы интерфейса

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

Поэтому в контексте RTL нужно переворачивать элементы управления, такие как индикаторы прогресса, ползунки, а также начальные и конечные значения соответствующего пункта интерфейса (например, «Яркость» и «Громкость»).

Тексты

Чтобы сохранить удобочитаемость, по возможности следует избегать жирного шрифта. Курсив в арабском языке не используется. Буквы арабского алфавита меньше букв латинского, и для улучшения читаемости рекомендуется увеличивать размер шрифта на пару пунктов для RTL‑локализации.

Другие типографские особенности, которые следует учитывать:

Выравнивание текста по правому краю.
Учёт длины слов, поскольку большинство арабских слов короче, чем в русском или английском языке.
Сокращение дней недели, месяцев и т. д. является обычным явлением в русском языке, но неуместным в арабском.
Иностранные слова, которые пишутся латиницей и заимствованы из языков LTR, не меняют своего направления. То же самое относится к цифрам (например, телефонные номера с международными телефонными кодами), номерам авиарейсов или названиям брендов — в RTL‑локализации их отображают так, как если бы они были в LTR.
Знаки прибавления и уменьшения — «плюс» или «минус» в данных отображается согласно правилам RTL.
- Багаж +3 000 ₽
- RUB 3,000+ أمتعة

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

Как их выравнивать? Если LTR выровнять по правому краю, то это ухудшит его читаемость. В таком случае будет корректно каждый абзац выравнивать согласно правилам его написания: LTR — по левому краю, RTL — по правому.

Цифры

В большинстве арабских стран используются более традиционные западные арабские цифры (латинские). Однако в некоторых странах, таких как Иран и Афганистан, более распространены восточно‑арабские цифры. Обе системы счисления используются в Египте и Судане. Западные арабские цифры постепенно становятся всё более популярными даже в консервативных арабских странах, таких как Саудовская Аравия. В своих проектах мы всегда используем западные арабские цифры.

Валюты

Основные аспекты форматирования валюты:

Расположение. Символ валюты следует поместить слева от числа, чтобы соответствовать RTL‑направлению (KZT 15,323).
Разделитель. В качестве разделителя тысячной или десятичной части используется запятая. Например, если число 10 000, то в RTL направлении будет выглядеть как 10,000.
В RTL‑локализации для рублей используем код RUB.

Формат времени

Основные аспекты форматирования времени:

Порядок элементов времени. Если отображается время вылета или начала мероприятия, то используется направление LTR (Например: «Вылет 20:30»).
Время в тексте. Если время указывается в строчке текста, то оно отображается согласно правилам RTL‑форматирования.
- Время в пути на автобусе 20 часов 15 минут
- وقت السفر بالحافلة 20 ساعة و 15 دقيقة

Изображения

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

Если используется фотография, в которой читается явное направление (взгляд, движение человека, жест), то в RTL‑версии приложения это направление будет иметь противоположное значение. Подобные изображения с людьми лучше заменять на фото с корректным направлением, а не отражать исходник по горизонтали.

В векторных иллюстрациях есть смысл не отзеркаливать, а менять расположение элементов, а также их направлений, чтобы они лучше соответствовали версии RTL.

Иконки

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

Симметричные иконки и иконки без явно заданного направления (камера, загрузка, профиль пользователя и т. д.) не нужно переворачивать.
Иконки с отображением хода времени остаются без изменений.
Иконки, отображающие поведение правшей или левшей, остаются без изменений
Универсальные символы и знаки, такие как галочка, остаются без изменений.
Иконки с явным направлением должны быть зеркальными. Например, в RTL‑версии кнопка «Назад» должна указывать вправо.
Иконки с российскими/английскими символами не обязательно должны быть зеркальными, но должны быть локализованы.
Следует учитывать семантику иконок, уделяя особое внимание культурным особенностям или альтернативным значениям используемых символов. Потенциально проблемные значки, такие как значок копилки, символизирующий бережливость, или бокал шампанского, обозначающий ресторан, могут быть уместны в странах с LTR, но могут быть неуместны на сайтах с RTL.

Также при отзеркаливании иконок следует обращать внимание на консистентность всех компонентов приложения и общий визуальный баланс каждой иконки. Например, если в LTR вы используете косую черту для отображения запрета, то её направление должно быть одинаковым как для LTR, так и для RTL.

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

Инпуты

Все поля ввода являются зеркальными элементами. Вот важные аспекты, которые следует учесть при адаптации интерфейса:

Строка поиска

Текстовый инпут

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

Другие зеркальные элементы интерфейса

Элементы меню навигации (таббар) отображаются в обратном порядке.
Скелетон‑анимация отображается зеркально.
Звезды рейтинга должны быть представлены зеркально.
Счётчики уведомлений также переносятся на противоположную сторону экрана.
В датах используется международный формат, но в направлении RTL (гггг.мм.дд).
Календарь отображается зеркально — понедельник будет расположен справа, а воскресенье — слева.
В таблицах столбцы должны быть зеркальными.
Элементы с горизонтальным скроллом прокручиваются зеркально. К таким элементам относятся баннеры, скролл‑табы или чипы, теги.
Слайдер фильтров отображается зеркально.

Другие элементы интерфейса, которые остаются без изменений

Видео- и аудиоплееры не следует отзеркаливать, поскольку они отображают ход воспроизведения.

Подводя итог, отметим, что адаптация интерфейса под RTL — это важный этап в разработке многоязычных приложений и веб‑сайтов. Учитывая различия в чтении и ориентации текста для языков RTL в приложении, вы сможете повысить удобство его использования и привлечь более широкую аудиторию.
Также этот подход подчёркивает уважение к многообразию культур, которые представлены среди пользователей.

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

Если вы хотите создать или адаптировать приложение для пользователей, которые пишут и читают справа налево, обращайтесь к нам — наша команда будет рада помочь вам!

Другие статьи по теме:

Material You — новый шаг в персонализации интерфейсов на Аndroid

Обзор гайдлайнов Material Design.

Адаптация приложений под складные устройства

Обзор изменений в дизайне складных смартфонов, анонсированных на Android Developer Summit 2021.

Современные паттерны навигации в iOS-приложениях

Как настроить навигацию в iOS-приложении так, чтобы пользователю было легко взаимодействовать с интерфейсом — перевод статьи Френка Рауша.

Есть идея?

Свяжитесь с нами