Локализация IT продуктов — всегда непростая задача, но если вам предстоит выход на азиатские рынки, вы можете столкнуться с языками, которые потребуют дополнительных усилий по адаптации пользовательского интерфейса. В последнее время Ближний Восток представляет особый интерес для владельцев IT бизнеса, а значит возникает необходимость в локализации цифровых продуктов на языки этого региона, письменность трех из которых направлена справа налево.

Эта статья будет интересна менеджерам локализации, продакт и проджект менеджерам, UX дизайнерам и частично фронтенд‑разработчикам, занятым в международных проектах с целевой аудиторией в странах Ближнего Востока. В статье рассматриваются особенности подготовки пользовательского интерфейса к локализации на языки, пишущие справа налево (RTL‑языки). Хотя приводятся примеры локализации на арабский язык, информация из этой статьи применима ко всем RTL‑языкам.

Суть проблемы

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

Так, например, рендеринг анимации раскрывающегося подарка носители RTL‑языков будут располагать в следующем порядке:

Рис. 1. Рендеринг подарка. Изображения от upklyak на Freepik
Рис. 1. Рендеринг подарка. Изображение от upklyak на Freepik

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

Что нужно разворачивать

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

Если используете боковую навигационную панель, то ее нужно переместить на другую сторону, порядок разделов навигации при этом менять не нужно.

Рис. 2. Боковая панель страницы “Настройки” Google Chrome. Английская локаль — слева, арабская —  справа
Рис. 2. Боковая панель страницы «Настройки» Google Chrome. Английская локаль — слева, арабская — справа

Если используете верхнюю панель навигации, то следует расположить разделы по ходу чтения, то есть справа налево.

Иконки, обозначающие движение и течение времени, должны быть зеркально развернуты.

Рис. 3. Стрелка “вперед” и “назад” в арабском интерфейсе. Изображение от rawpixel.com на Freepik
Рис. 3. Стрелка «вперед» и «назад» в арабском интерфейсе. Изображение от rawpixel.com на Freepik

Еще один пример — развернутая иконка рядом со временем в пути до выбранного пункта назначения в Google Картах.

Рис. 4. Google Карты. Английская локаль — слева, арабская — справа
Рис. 4. Google Карты. Английская локаль — слева, арабская — справа

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

Рис. 5. Google Новости. Выбор языка и региона. Первичная кнопка расположена слева
Рис. 5. Google Новости. Выбор языка и региона. Первичная кнопка расположена слева

Прогресс-бары заполняются справа налево, по направлению текста.

Рис. 6. Google Календарь. Русская локаль — сверху, арабская — снизу
Рис. 6. Google Календарь. Русская локаль — сверху, арабская — снизу

Что не нужно разворачивать

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

Иконки, не подразумевающие движения вперед или назад, следует оставить такими, какие они есть.

Рис. 7. Иконка “Наушники” в арабском интерфейсе. Изображение от rawpixel.com на Freepik
Рис. 7. Иконка «Наушники» в арабском интерфейсе. Изображение от rawpixel.com на Freepik

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

Рис. 8. Иконка “Без звука”. Русская локаль — слева, арабская — справа
Рис. 8. Иконка «Без звука». Русская локаль — слева, арабская — справа

Направление кнопки воспроизведения медиа-файлов и индикатора воспроизведения медиа не меняется, так как они отображают направление движения записи, однако кнопка воспроизведения медиа-файлов должна быть расположена справа.

Рис. 9. Кнопка и индикатор воспроизведения медиа-файлов. Русская локаль — слева, арабская — справа
Рис. 9. Кнопка и индикатор воспроизведения медиа-файлов. Русская локаль — слева, арабская — справа

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

Рис. 10. Страница контактов Telecomegypt. Английская локаль — слева, арабская — справа
Рис. 10. Страница контактов Telecomegypt. Английская локаль — слева, арабская — справа

Заключение

Итак, если вам предстоит подготовить интерфейс к локализации на RTL‑языки, принимайте во внимание тот факт, что от направления письма зависит то, как пользователь просматривает интерфейс и как воспринимает графику, отображающую ход времени или движение вперед/назад. Такой подход поможет определить, какие элементы интерфейса требуют адаптации для регионов, где используются RTL-языки.

Комментарии (4)


  1. dimakey
    18.07.2024 06:22

    Здорово помогают тестировщики из соответствующих культур - наш слеванаправный мозг все равно что-то пропустит.


  1. DarthVictor
    18.07.2024 06:22

    ברוך הבא


    1. DarthVictor
      18.07.2024 06:22

      И собственно вопрос, как правильно смешивать LTR и RTL?

      В чате например.


      1. pda0
        18.07.2024 06:22
        +1

        Очень не просто.