Халяльный дизайн: как делать приложения на арабском

За последние пару лет мы в Purrweb сделали 5 проектов с арабским интерфейсом. Это, конечно, не 50, но какой-то опыт уже есть. Пока работали, собрали базу знаний. Решили, что такое нельзя держать только у себя в Notion, поэтому делимся с вами, как адаптировать приложения для Ближнего Востока.

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

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

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

Начнем с краткого экскурса в арабский дизайн.

2 пользовательских сценария

Направление интерфейса справа — налево (далее RTL — Right-To-Left) предназначено для пользователей из стран Ближнего Востока. Далее мы будем рассматривать версию приложения на арабском, но все советы также применимы для интерфейса на иврите.

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

RTL отличается от привычного нам LTR (Left-To-Right) тем, как пользователь просматривает контент на экране:

  • LTR — пользователь читает слева — направо;

  • RTL — пользователь читает справа — налево.
LTR и RTL дизайн главной страницы приложения

Рассмотрите это изображение подробнее. Мы не только выровняли текст по правому краю, но также изменили расположение элементов интерфейса. Кроме того, некоторые иконки и кнопки мы перевернули, а другие — оставили как есть.

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

Как оформить текст на арабском

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

Проверяем корректность написания текста

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

Небольшие фрагменты текста на другом языке просто выравниваем по правому краю

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

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

Абзацы на языке оригинала размещаем как в LTR сценарии

Проверить, что шрифты поддерживают арабский язык. Если шрифты основной версии не поддерживают арабский, придется применять к этой версии дизайна другой стиль с подходящими шрифтами. К примеру, Apple в апреле 2022 года добавила шрифт SF Arabic в свое семейство шрифтов. Google предлагает семейство Noto.

В последнем кейсе мы использовали шрифт Dubai по просьбе заказчика.

Увеличить текст в заголовках и кнопках. Если в английской версии вы выделяете кнопки и заголовки капс-локом, то текст на арабском в них может казаться мелким, потому что в арабском и иврите нет заглавных букв. Чтобы исправить это, в арабской версии увеличьте кегль шрифта для этих элементов примерно на 10%.

Небольшое изменение кегля помогает сбалансировать шрифты

Корректно адаптировать цифры. В разных странах и даже регионах одной страны могут использоваться либо западные, либо восточные цифры. Например, в Египте и Судане используют оба вида. А в Иране и Афганистане преобладают восточные цифры. Этот момент лучше заранее уточнить у заказчика.

Западные и восточные цифры

Сохраняйте правильный порядок цифр вне зависимости от языка. Западные цифры даже не нужно переворачивать — просто выровняйте их по правому краю. При этом цифры на арабском отображаются справа — налево.

4 варианта расположения цифр

❗Исключение: элементы, которые демонстрируют прогресс, например, оценка. Они должны располагаться в соответствии с направлением чтения. При этом сами цифры переворачивать не нужно.

Варианты дизайна оценки для разных языков

UI элементы

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

Переворачиваем

Иконки, где есть движение. Если пользователь читает текст справа — налево, объекты, направленные в ту же сторону, для него движутся «вперед». Соответственно все иконки, которые указывают движение «вперед» в LTR дизайне, в RTL должны быть направлены в противоположную сторону: курьер едет не вправо, а влево.

Переворачиваем иконки, которые двигаются «вперед»

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

Изображения текста

Переадресация. Иконки «вперед» и «назад» меняются местами. Если в LTR дизайне кнопка «назад» показывает влево, в RTL она смотрит вправо.

Кнопки навигации и переадресации

«Undo» и «redo». Указывают направление времени: «undo» возвращает нас назад, «redo» — переносит вперед. Эти иконки меняются местами, как и предыдущие.

«Redo» и «Undo»

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

Блоки с элементами управления

Не переворачиваем

Изображения. Не делаем этого по двум причинам:

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

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

Круговое отображение времени. В отличие от кнопок «Undo» и «Redo», которые указывают направление времени, иконки «История» и «Обновить» изображают реальные часы. Они показывают движение по или против часовой стрелки в любой версии дизайна.

Самые распространенные примеры кругового отображения времени

Реальные объекты. Все, что является моделью реально существующего объекта и не указывает направление. То есть движущаяся машина — это иконка направления, ее мы переворачиваем. А наушники или открытая книга — это просто моделька, ее оставляем неизменной.

Эти и другие подобные предметы мы не переворачиваем

Псевдо-направленные иконки. Реальные объекты, которые, на первый взгляд, имеют направление. На самом деле эти предметы просто предназначены для правшей.

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

Логотипы и универсальные знаки. А вот эти визуальные элементы отражать категорически нельзя. Так вы только запутаете пользователя и можете нарушить авторские права.

Логотипы и универсальные знаки не переворачиваем никогда

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

Переводить — обязательно, переворачивать — по необходимости

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

Подобные элементы оставляем в LTR формате

На этом у нас все. Если мы не раскрыли какую-то тему, пишите в комментариях — ответим на все вопросы.

Бонус: рекомендации по работе с макетом в Figma

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

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

Лайфхак: настройте Figma в зависимости от размера проекта.

- небольшой проект (несколько экранов или лендинг): работаем на отдельной странице, в том же файле;

- средний (версии для разных пользовательских ролей): переносим все в отдельный файл и работаем там;

- большой (дизайн для веб и мобильного приложения): работаем в нескольких файлах.

2. Адаптируем UI-kit под RTL версию. Создаем RTL варианты уже существующих компонентов. Начинайте с мастер-компонентов, затем переходите к иконкам и прочим элементам UI.

3. Меняем элементы на RTL версию UI-kit. Параллельно открываем обе версии и последовательно заменяем все элементы.

4. Подготавливаем текстовые поля. Применяем текстовый стиль с новым шрифтом, если текущий стиль не поддерживает арабский язык. После этого выравниваем по правому краю весь текст, который будем переводить.

5. Меняем текст на арабский. Переводим текст в Google Translate или отдаем на перевод специалисту. Далее вставляем в наш макет.

Интерфейс арабской версии приложения готов!

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

Читайте, ставьте лайки, задавайте вопросы, делитесь с друзьями. А мы пойдем готовить новый материал :)

0
65 комментариев
Написать комментарий...
Григорий Матасов

A вам не кажется, что звездочку в оценке нужно тоже отзеркалить? Ведь по сути это шкала, где заполнено 4,5 из 5.

Ответить
Развернуть ветку
Упоротый кролик
Ответить
Развернуть ветку
2 комментария
Упоротый кролик

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

Ответить
Развернуть ветку
Purrweb
Автор

Да, вы правы! Мы проглядели, сейчас исправим.

Ответить
Развернуть ветку
Ilya

Уважаемый автор, а как вы решили (или не решили 🙂) проблему thumb zone и в целом того факта, что в RTL юзеры держат телефон в большинстве случаев всё той же правой рукой?

Ведь в RTL все кнопки "уезжают" в обратную сторону от удобного нажатия

Ответить
Развернуть ветку
Purrweb
Автор

Для RTL дизайна все-таки важнее направление чтения, и в рекомендациях от iOS thumb zone тоже не учитывается.

Ответить
Развернуть ветку
Lirnik

Про кнопку "назад" — разрыв шаблона. Интересно, как реализован возврат назад в нативных приложениях на iOS и Android в арабской локализации? Ведь именно они в основном формируют пользовательские привычки.

Ответить
Развернуть ветку
Агент Моссада

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

Ответить
Развернуть ветку
1 комментарий
J D

Интересно как BPMN по ближневосточному выглядит.

Ответить
Развернуть ветку

Комментарий удален модератором

Развернуть ветку
Purrweb
Автор

Скорее всего, iOS тоже отзеркалит, про Android — не уверены.

Ответить
Развернуть ветку
Илья Иванов

Спасибо, интересно.
Появился вопрос по поводу половинчатых звёзд в оценках. Кажется в вариантах с RTL-цифрами их тоже надо зеркалить. Это же типа метафора прогресс-бара, заполняющего ряд звёзд. Если не зеркалить, то прогресс визуально выглядит «поломанным»

Ответить
Развернуть ветку
Purrweb
Автор

Да, это мы не заметили) Сейчас поправим в статье

Ответить
Развернуть ветку
Rnatery

они английский не знают что ли?

Ответить
Развернуть ветку
Aleksey Kapustin

Иврит слегка другой всё-таки)

Знак вопроса на иврите не отображается зеркально. ?שאלות

Ответить
Развернуть ветку
Purrweb
Автор

Мы не знали:) Спасибо!
Зафиксировали себе в Notion👌🏻

Ответить
Развернуть ветку
Joulupukki

взрывная статья ))

Ответить
Развернуть ветку
Анастасия Юхтриц

Про оценку — на самом деле самое неожиданное правило, выглядит оч непривычно.

Ответить
Развернуть ветку
Софья Фадеева

Очень подробно, спасибо!

Ответить
Развернуть ветку
Purrweb
Автор

💜

Ответить
Развернуть ветку
Александр Свинин

А почему основная кнопка слева, а второстепенная справа?

Ответить
Развернуть ветку
Purrweb
Автор

Тут просто зеркалили. В LTR основная кнопка справа, второстепенная — слева.

Ответить
Развернуть ветку
Илья Осипов

так вроде справа как раз основная, видимо переход в категорию. названия категорий юзер должен увидеть первыми. а "меню-сендвичи" как раз второстепенные и расположены дальше от правого пальца.

Ответить
Развернуть ветку
3 комментария
Агент Моссада

а как должно быть?

Ответить
Развернуть ветку

Комментарий удален модератором

Развернуть ветку
DeadFine

А почему прогресс-бар плеера нужно оставлять слева направо?

Ответить
Развернуть ветку
Purrweb
Автор

Ответ: Опирались на опыт Spotify — они говорят, что здесь прогресс-бар отображает направление воспроизведения пластинки, поэтому его не нужно зеркалить. Если интересно, вот их статья — https://engineering.atspotify.com/2019/04/right-to-left-the-mirror-world/

Ответить
Развернуть ветку
Максим Ростокин

По той же причине, что Солнце всегда восходит на востоке и заходит на западе (с точки зрения земного наблюдателя)?

Ответить
Развернуть ветку
2 комментария

Комментарий удален модератором

Развернуть ветку
Gleb Sologub

А что за приложение?

Ответить
Развернуть ветку
Purrweb
Автор

HomEats — приложение для доставки еды в Саудовской Аравии.

Ответить
Развернуть ветку

Комментарий удален модератором

Развернуть ветку

Комментарий удален модератором

Развернуть ветку
Семен Живенков

Спасибо, сохранил.

Ответить
Развернуть ветку
Александр Шульгин

👍

Ответить
Развернуть ветку
Alex Chu

Спасибо! Интересно было бы прочитать что-то похожее про локализацию и культурную адаптацию под Хинди и прочие витиеватые языки ЮВА.

Ответить
Развернуть ветку
Vasek Romanov

Супер. В закладки. есть сервис на арабском как раз и его надо будет пилить видим отдельно (

Ответить
Развернуть ветку
Максим Ляшенко

очень классная статья, спасибо

Ответить
Развернуть ветку
Генрик Мкртчян

Классный кейс и неочевидные нюансы! Спасибо за материал 👍🏻

Ответить
Развернуть ветку
Rifat Kayumov

Огнище! недавно нужно было адаптировать интерфейсы под иврит, пришлось так же по-крупицам собирать инофрмацию, подключать знакомых, кто знаком с культурой и ивритом. В итоге все сделали правильно)

еще в дополнение, кроме цифр, есть еще и номера телефонв - они так же пишутся, как и LTR - +79123... со знаком "+" слева

Ответить
Развернуть ветку
Чечёточник

Числа на арабском пишутся слева направо, в отличие от слов.

Ответить
Развернуть ветку
Сергей Стройнов

Подтверждаю. Цифры пишутся слева направо, иначе возникнет адская путаница.

Ответить
Развернуть ветку
Ruslan Sergeev

Статья класс! Как вам удалось выйти на арабский рынок?

Ответить
Развернуть ветку
Чечёточник

Не факт, что они таки вышли на рынок, иначе реальные арабы давно бы им указали на косяки и неточности в дизайне и ux

Ответить
Развернуть ветку
Purrweb
Автор

Спасибо!

Так исторически сложилось, что мы 8лет назад начали работать со стартапами из зарубежных стран.

Первые 5 лет работали только через upwork (тогда odesk ещё). Сейчас добавились статьи, рекомендации, PR, dribbble, behance, medium, и так далее. Много чего пробуем.

Мы даже когда-то делали свои маленькие митапы на 40-50 человек.
Помню, первый митап был на площадке в mailru. После этого митапа у нас появился ещё один русский клиент из ОАЭ.

Большая часть наших клиентов из стран персидского залива делают проекты на английском языке. Поэтому, как и написано в начале статьи, тут мы опираемся только на наши 5 проектов.

В целом, больше всего работаем с США и Лондоном. Последние 2 года активно делаем стартапы и для России. В итоге распределение примерно по 30% между странами выше и длинный хвост между остальными странами от Канады до Японии.

Ответить
Развернуть ветку
Eazy Haze

Не представляю сколько было перелопачено информации, чтобы корректно сделать такой интерфейс. Похвально!

Не получали обратную связь на счет того, все ли корректно получилось спроектировать? Или на счет попадания в ожидания пользователей?

Ответить
Развернуть ветку
Армен Каладжян

Помню, как засел в интернет-кафе в Сирии, чтобы изучить сайт клиента из Израиля.
Кто не в курсе: Сирия и Израиль - злейшие враги. Сирийцы привезли меня показать Голанские высоты, отжатые израильтянами.
Сижу в городе Хама в кафе, прикрываю лапами монитор и аудирую сайт еврейской клиники. А на нем поасюду звезды Давида и все такое.. вот, думаю, сейчас за задницу возьмут как еврейского шпиона.

Хуже того, в сирийском кафе интерфейс арабский. Пока разобрался по памяти, где File, где Home, где что…

В общем интерфейс арабский, клиника еврейская, фриланс русско-армянский.

Такая жизнь

Ответить
Развернуть ветку
Valerian Valkin

Очень полезно, спасибо за статью, сохранил себе, как раз на горизонте проект для Ближнего Востока :)

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

Автор изображения имеет полное право подать на вас жалобу за использование его интеллектуальной собственности в неправильном виде

Что-то я сомневаюсь, что если вы получили права на использование изображения у автора есть такое право. Если я кропну картинку - это «неправильный» вид, или скажем прозрачность 50% сделаю?

Если есть реальный кейс, то хотелось бы узнать, чтобы избежать его)

Ответить
Развернуть ветку
Purrweb
Автор

Всё зависит от условий лицензионного договора.
Сами с таким не сталкивались, но в теории может быть и такое, так что на всякий случай предостерегаем =)

Ответить
Развернуть ветку
Агент Моссада

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

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Амазонка Я

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

Ответить
Развернуть ветку
Anton
Наше приложение доставки еды для Саудовской Аравии

это просто проект или есть реальное приложение? хотелось бы посмотреть реально работающий интерфейс

Ответить
Развернуть ветку
Purrweb
Автор

Это реальное приложение HomEats. Но пока там старый дизайн, который делали не мы — наш в процессе верстки.

Ответить
Развернуть ветку
Мария

Спасибо, очень интересный кейс!

Ответить
Развернуть ветку
Purrweb
Автор

👍🏻😉

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Bravemoon

Очень интересная статья! Давайте больше про культурные особенности в дизайне 👍

Ответить
Развернуть ветку
Purrweb
Автор

👌🏻

Ответить
Развернуть ветку
Bitepix

А почему иконка шафла не инвертится?

Ответить
Развернуть ветку
Purrweb
Автор

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

Ответить
Развернуть ветку
THE DUDE

Вот бы жить в мире с 1 языком, с одинаковыми розетками.

Ответить
Развернуть ветку
62 комментария
Раскрывать всегда