Я дизайнер в UULA, это Кувейтская компания, которая делает образовательную платформу для школьников, помогает им готовиться к экзаменам и даже выпускает собственные учебники.
99% наших пользователей — арабоговорящие дети и подростки. При этом команды дизайна и разработки у нас практически полностью русскоязычные.
В этой статье я расскажу, с какими проблемами сталкиваются дизайнеры, делая сервис для людей, которые читают в обратную сторону.
Дизайн-процесс
Справа налево
Арабский язык, в отличие от английского и русского, идет справа налево. Можно сразу подставлять в макеты арабский язык, но пользоваться ими очень сложно и дизайнеру, и разработчику: непонятно какие кнопки что делают.
Сначала мы готовили для разработки версию на английском, где все элементы были рассчитаны на обычное направление взгляда — слева направо.
Но это создавало множество сложностей — все элементы в дизайн-системе задваиваются, нужно иметь версию и слева направо и справа налево.
Ну и к тому же попробуй перерисовать большой флоу полностью. На это уходило кучу времени и сил.
В конце концов мы пришли к решению рисовать сразу вариант справа налево, но подставлять английский текст вместо арабского.
Это помогает команде разработке понимать, что происходит в макете и не делать двойную работу. Хотя если нужно провести тест на пользователях, приходится все-таки готовить отдельную версию на арабском.
Чтобы привыкнуть к такому дизайну, нужно время. Я вроде бы старалась следить за направлением, но все равно пролезало привычное слева-направо.
Например, экран был с правильной ориентацией, а анимация кнопки шла слева направо.
Легко поставить не в том углу крестик или перепутать местами кнопки Отменить и подтвердить.
Еще одна неочевидная вещь: флоу экранов в фигме тоже должен идти справа налево! Иначе стрелочки постоянно огибают экран и за ними неудобно следить.
Но есть один нюанс: несмотря на направление чтения, телефон пользователи зачастую держат правой рукой. То есть дотянуться до правой части экрана пользователю проще. Поэтому просто механически отражать интерфейс — нельзя.
Мы не переворачиваем хедер, у него логотип с левой стороны, а иконки — справа, потому что пользователю часто может быть необходимо считывать кью-ар коды из учебных пособий.
Шрифт и особенности верстки
В арабском большая часть гласных показывается с помощью специальных символов над и под основным блоком текста.
Из-за этой особенности арабскому тексту нужно большое межстрочное расстояние, то есть уменьшать дефолтное межстрочное расстояние нельзя, только увеличивать. Из-за этого латинские блоки выглядят довольно рыхлыми.
Так же очко арабских шрифтов довольно мелкое. Английский текст одного и того же кегля, что и арабский, выглядит более крупным и более читаемым. Эппл для этого все арабские надписи программно увеличивает на 2 пункта.
Так же арабский текст обычно более компактный и короткий, чем английский.
Так же для арабского сложнее следить за висячими предлогами. Для улучшения читаемости в английском предлоги привязываются к следующему за ним слову. В арабском тоже есть короткие слова, но не всегда понятно, стоит ли ставить неразрывный пробел между ними и следующим словом.
Иконки
Иконки, как и общий лэйаут приложения, нужно тоже переворачивать справа налево. Но не все.
Есть иконки с каким-то устоявшимся знаком, например, блютуз, их мы не переворачиваем. Или, например, иконку социальной сети.
Но те иконки, в которых есть метафора движения — самолет, например, машина или звук — их нужно перевернуть, чтобы они воспринимались нормально.
UX-редактура
У меня были разные проекты: в некоторых дизайнер был полностью ответственен за тексты в интерфейсе, где-то редактор проверял текст на последних этапах, а где-то участвовал в создании фичи наравне с дизайнером.
Но во всех этих случаях я, как дизайнер, могла обсудить с редактором — нам нужен текст более официальный или более неформальный? Могла предложить свой вариант. Могла понять, точно ли текст ок.
Если не являешься носителем языка, остается только переводить предложенные варианты через переводчик и джипити чат. Это помогает понять общий смысл, но нюансы теряются.
Например, прекрасные Сохраненки из ноушена и Сохраненное будут переведены одинаково. Но это очень разные названия разделов!
Кувейт — довольно самобытная страна. Дети и подростки чуть сильнее встроены в международный контекст, чем взрослые, но все-таки.
В нашей компании есть арабоговорящий исследователь, которая, как может, пытается погрузить нас в контекст: делает отчеты о том, что смотрят, во что играют, чем интересуются кувейтские дети.
Часть команды выезжает на стратегические сессии в Кувейт, чтобы разобраться на месте.
Но, тем не менее, это не помогает, например, придумывать культурно-обусловленные метафоры.
Например, в UULA есть раздел, который называется «масло».
В этом разделе — выжимка из курса, все самое главное, чтобы быстренько подготовиться накануне экзамена. Эта метафора — из устоявшегося выражения, что-то вроде «Дай мне самое маслице», которое значит расскажи самое важное.
Или, например, чем ближе к экзаменам, тем чаще мы показываем ученикам утку.
Это экзаменационная утка. Слова утка и провал на арабском похожи по произношению: بط (bat) и بُط (buṭ). И получается что-то вроде Разрушитель экзаменов. Поэтому утка как бы является предупреждением о том, что, если сейчас не взяться за ум, на экзаменах будет сложно.
Аналогом для русскоязычной аудитории была бы, видимо, зловещая вафля.
Есть и другой культурный контекст: лучше не использовать людей-маскотов (изображение людей не приветствуется Кораном), и собак (их Коран тоже не любит).
Одной из моих ошибок в начале было, например, использовать имя Саддам как плейсхолдер в интерфейсе с профилями пользователей. Для меня это довольно нейтральное имя, наравне с Мухаммедом, а человек из Кувейта воспринимает это примерно так же, как если бы в интерфейсе списка друзей были Маша, Петя и Адольф. Вроде и ничего такого, но странно.
Главное тут не скатиться в упрощенное понимание чужой культуры. Мы проводили несколько брейнштормов про визуальный язык и первыми идеями у дизайнеров появляется что-то пестрое, яркое, восточное.
Когда мы показывали эти варианты кувейтцам, они сказали, что ощущения от таких картинок, как от «клюквы». Как если бы для России показывали хохлому, водку и медведей. Дизайнеру важно искать более тонкие и глубокие отсылки и не воспринимать чужую культуру упрощенно.
Один из инструментов, которые я пробовала для этого использовать это результаты опроса Хофстедера
Ощущение неравенства между людьми (индекс дистанции власти) в России и странах залива довольно близкое.
Применительно к нашему сервису, власть — это учителя. В Кувейте учителя — очень уважаемые люди. Как это знание повлияло на дизайн?
Мы создавали личную страничку для учителей, на которой ученик имел возможность оценить учителя с помощью кнопок с пальцем вверх и вниз.
Но в процессе эти кнопки мы убрали, потому что они казались слишком пренебрежительными.
Но культурный контекст влияет не только на визуальный язык, но и на функционал приложения. Например, в нашем профиле нет функции загрузки аватарки, потому что среди учеников много девочек, которые не выставляют лица.
Или, например, мы не можем сделать общую видео-комнату для разговоров учеников одного года обучения, опять же из-за разделения полов.
Есть отличия и в процессе исследований — респонденты почти всегда не включают камеру.
Выводы
UULA существует больше 5 лет и все это время большая часть ее дизайнеров — без арабского бэкграунда.
Если посмотреть на самые популярные приложения в Кувейте — это будут приложения Гугла и Меты (и Тик Ток). Пользователи Персидского залива привычны ко всем обычным пользовательским паттернам, и вообще довольно тесно интегрированы в западную культуру.
Если вы UX дизайнер, который раньше делал проекты для русского, европейского и американского рынка, у вас уйдет довольно мало времени, чтобы переквалифицироваться на проекты для арабских пользователей.
P.S. Есть видеозапись рассказа по мотивам этой статьи, если вам удобнее слушать
