Локализация IT продуктов — всегда непростая задача, но если вам предстоит выход на азиатские рынки, вы можете столкнуться с языками, которые потребуют дополнительных усилий по адаптации пользовательского интерфейса. В последнее время Ближний Восток представляет особый интерес для владельцев IT бизнеса, а значит возникает необходимость в локализации цифровых продуктов на языки этого региона, письменность трех из которых направлена справа налево.
Эта статья будет интересна менеджерам локализации, продакт и проджект менеджерам, UX дизайнерам и частично фронтенд‑разработчикам, занятым в международных проектах с целевой аудиторией в странах Ближнего Востока. В статье рассматриваются особенности подготовки пользовательского интерфейса к локализации на языки, пишущие справа налево (RTL‑языки). Хотя приводятся примеры локализации на арабский язык, информация из этой статьи применима ко всем RTL‑языкам.
Суть проблемы
Прежде чем перейти к конкретным элементам интерфейса, которые нуждаются в адаптации к RTL‑ языкам, важно понять ключевую причину этой необходимости. Дело в том, что то, в каком направлении мы читаем, определяет наш взгляд на графику, которая изображает направление движения и последовательность событий.
Так, например, рендеринг анимации раскрывающегося подарка носители RTL‑языков будут располагать в следующем порядке:
![Рис. 1. Рендеринг подарка. Изображения от upklyak на Freepik Рис. 1. Рендеринг подарка. Изображения от upklyak на Freepik](https://habrastorage.org/getpro/habr/upload_files/e2e/126/977/e2e126977b5faebd388d50a7a641334d.png)
Пользователи локалей на RTL‑языках начинают просмотр интерфейса с правого верхнего угла. Это определяет необходимость зеркального отображения элементов интерфейса — прежде всего для того, чтобы сохранить визуальную иерархию UI дизайна.
Что нужно разворачивать
Те элементы интерфейса, которые связаны с направлением движения, направлением чтения и последовательностью событий, нуждаются в зеркальном развороте.
Если используете боковую навигационную панель, то ее нужно переместить на другую сторону, порядок разделов навигации при этом менять не нужно.
![Рис. 2. Боковая панель страницы “Настройки” Google Chrome. Английская локаль — слева, арабская — справа Рис. 2. Боковая панель страницы “Настройки” Google Chrome. Английская локаль — слева, арабская — справа](https://habrastorage.org/getpro/habr/upload_files/a52/036/550/a520365503beae5158995d54c3df01eb.png)
Если используете верхнюю панель навигации, то следует расположить разделы по ходу чтения, то есть справа налево.
Иконки, обозначающие движение и течение времени, должны быть зеркально развернуты.
![Рис. 3. Стрелка “вперед” и “назад” в арабском интерфейсе. Изображение от rawpixel.com на Freepik Рис. 3. Стрелка “вперед” и “назад” в арабском интерфейсе. Изображение от rawpixel.com на Freepik](https://habrastorage.org/getpro/habr/upload_files/dfc/aab/bec/dfcaabbec138d6fb356be7822b6868cd.png)
Еще один пример — развернутая иконка рядом со временем в пути до выбранного пункта назначения в Google Картах.
![Рис. 4. Google Карты. Английская локаль — слева, арабская — справа Рис. 4. Google Карты. Английская локаль — слева, арабская — справа](https://habrastorage.org/getpro/habr/upload_files/5b3/2f9/a7a/5b32f9a7a77a59e2ff57793cd5d01131.png)
Первичные и вторичные кнопки должны быть развернуты в соответствии с направлением чтения.
![Рис. 5. Google Новости. Выбор языка и региона. Первичная кнопка расположена слева Рис. 5. Google Новости. Выбор языка и региона. Первичная кнопка расположена слева](https://habrastorage.org/getpro/habr/upload_files/74a/c93/36c/74ac9336cc7e21571a5e7308838d9599.png)
Прогресс-бары заполняются справа налево, по направлению текста.
![Рис. 6. Google Календарь. Русская локаль — сверху, арабская — снизу Рис. 6. Google Календарь. Русская локаль — сверху, арабская — снизу](https://habrastorage.org/getpro/habr/upload_files/ea3/eb9/7f3/ea3eb97f35aab0f4db6e1b749d2d75ef.png)
Что не нужно разворачивать
Элементы интерфейса, восприятие которых не зависит от направления чтения, отображать зеркально не нужно.
Иконки, не подразумевающие движения вперед или назад, следует оставить такими, какие они есть.
![Рис. 7. Иконка “Наушники” в арабском интерфейсе. Изображение от rawpixel.com на Freepik Рис. 7. Иконка “Наушники” в арабском интерфейсе. Изображение от rawpixel.com на Freepik](https://habrastorage.org/getpro/habr/upload_files/eb6/73a/114/eb673a1147b55904546fd59f765d54ed.jpg)
Если слеш используется в иконках для обозначения выключенного состояния, не нужно менять его направление, так как в этом значении он используется во всех культурах вне зависимости от языка.
![Рис. 8. Иконка “Без звука”. Русская локаль — слева, арабская — справа Рис. 8. Иконка “Без звука”. Русская локаль — слева, арабская — справа](https://habrastorage.org/getpro/habr/upload_files/dfa/dca/6ec/dfadca6ecf6629963c5f05bddf29ba1f.png)
Направление кнопки воспроизведения медиа-файлов и индикатора воспроизведения медиа не меняется, так как они отображают направление движения записи, однако кнопка воспроизведения медиа-файлов должна быть расположена справа.
![Рис. 9. Кнопка и индикатор воспроизведения медиа-файлов. Русская локаль — слева, арабская — справа Рис. 9. Кнопка и индикатор воспроизведения медиа-файлов. Русская локаль — слева, арабская — справа](https://habrastorage.org/getpro/habr/upload_files/703/9fb/f07/7039fbf071480f0e6f181c48e38f5856.png)
Хотя письмо направлено справа налево, цифры пишутся слева направо, поэтому не нужно разворачивать номера телефонов и цифры на циферблате. Но следует помнить, что начертание цифр на арабском и персидском языке отличается от начертания цифр в европейских странах, поэтому в большинстве случаев их тоже нужно локализовать, хотя в некоторых странах уже наметилась тенденция использования перехода к европейскому варианту. Чтобы решить, какой вариант начертания подойдет именно вашему продукту, обратитесь к специалистам из интересующей вас страны — они смогут проконсультировать вас, учитывая особенности продукта и сложившуюся местную практику.
![Рис. 10. Страница контактов Telecomegypt. Английская локаль — слева, арабская — справа Рис. 10. Страница контактов Telecomegypt. Английская локаль — слева, арабская — справа](https://habrastorage.org/getpro/habr/upload_files/153/10a/0fe/15310a0feb8b458803abaf1521ac731c.png)
Заключение
Итак, если вам предстоит подготовить интерфейс к локализации на RTL‑языки, принимайте во внимание тот факт, что от направления письма зависит то, как пользователь просматривает интерфейс и как воспринимает графику, отображающую ход времени или движение вперед/назад. Такой подход поможет определить, какие элементы интерфейса требуют адаптации для регионов, где используются RTL-языки.
Комментарии (4)
DarthVictor
18.07.2024 06:22ברוך הבא
dimakey
Здорово помогают тестировщики из соответствующих культур - наш слеванаправный мозг все равно что-то пропустит.