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

99% наших пользователей — арабоговорящие дети и подростки. При этом команды дизайна и разработки у нас практически полностью русскоязычные.

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

Дизайн-процесс

Справа налево

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

Сначала мы готовили для разработки версию на английском, где все элементы были рассчитаны на обычное направление взгляда — слева направо.

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

Ну и к тому же попробуй перерисовать большой флоу полностью. На это уходило кучу времени и сил. 

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

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

Чтобы привыкнуть к такому дизайну, нужно время. Я вроде бы старалась следить за направлением, но все равно пролезало привычное слева-направо. 

Например, экран был с правильной ориентацией, а анимация кнопки шла слева направо.

Легко поставить не в том углу крестик или перепутать местами кнопки Отменить и подтвердить.

Еще одна неочевидная вещь: флоу экранов в фигме тоже должен идти справа налево! Иначе стрелочки постоянно огибают экран и за ними неудобно следить. 

Но есть один нюанс: несмотря на направление чтения, телефон пользователи зачастую держат правой рукой. То есть дотянуться до правой части экрана пользователю проще. Поэтому просто механически отражать интерфейс — нельзя.

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

Шрифт и особенности верстки

В арабском большая часть гласных показывается с помощью специальных символов над и под основным блоком текста. 

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

Так же очко арабских шрифтов довольно мелкое. Английский текст одного и того же кегля, что и арабский, выглядит более крупным и более читаемым. Эппл для этого все арабские надписи программно увеличивает на 2 пункта. 

Так же арабский текст обычно более компактный и короткий, чем английский. 

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

Иконки

Иконки, как и общий лэйаут приложения, нужно тоже переворачивать справа налево. Но не все. 

Есть иконки с каким-то устоявшимся знаком, например, блютуз, их мы не переворачиваем. Или, например, иконку социальной сети. 

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

UX-редактура

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

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

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

Например, прекрасные Сохраненки из ноушена и Сохраненное будут переведены одинаково. Но это очень разные названия разделов! 

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

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

Часть команды выезжает на стратегические сессии в Кувейт, чтобы разобраться на месте. 

Но, тем не менее, это не помогает, например, придумывать культурно-обусловленные метафоры. 

Например, в UULA есть раздел, который называется «масло». 

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

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

Это экзаменационная утка. Слова утка и провал на арабском похожи по произношению: بط (bat) и بُط (buṭ). И получается что-то вроде Разрушитель экзаменов. Поэтому утка как бы является предупреждением о том, что, если сейчас не взяться за ум, на экзаменах будет сложно.

Аналогом для русскоязычной аудитории была бы, видимо, зловещая вафля. 

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

Одной из моих ошибок в начале было, например, использовать имя Саддам как плейсхолдер в интерфейсе с профилями пользователей. Для меня это довольно нейтральное имя, наравне с Мухаммедом, а человек из Кувейта воспринимает это примерно так же, как если бы в интерфейсе списка друзей были Маша, Петя и Адольф. Вроде и ничего такого, но странно.

Главное тут не скатиться в упрощенное понимание чужой культуры. Мы проводили несколько брейнштормов про визуальный язык и первыми идеями у дизайнеров появляется что-то пестрое, яркое, восточное. 

Когда мы показывали эти варианты кувейтцам, они сказали, что ощущения от таких картинок, как от «клюквы». Как если бы для России показывали хохлому, водку и медведей. Дизайнеру важно искать более тонкие и глубокие отсылки и не воспринимать чужую культуру упрощенно. 

Один из инструментов, которые я пробовала для этого использовать это результаты опроса Хофстедера

Ощущение неравенства между людьми (индекс дистанции власти) в России и странах залива довольно близкое. 

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

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

Но в процессе эти кнопки мы убрали, потому что они казались слишком пренебрежительными. 

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

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

Есть отличия и в процессе исследований — респонденты почти всегда не включают камеру.

Выводы

UULA существует больше 5 лет и все это время большая часть ее дизайнеров — без арабского бэкграунда. 

Если посмотреть на самые популярные приложения в Кувейте — это будут приложения Гугла и Меты (и Тик Ток). Пользователи Персидского залива привычны ко всем обычным пользовательским паттернам, и вообще довольно тесно интегрированы в западную культуру.

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

P.S. Есть видеозапись рассказа по мотивам этой статьи, если вам удобнее слушать