Уроки проектирования для многоязычных пользовательских интерфейсов
Статьи о дизайне Уроки

Уроки проектирования для многоязычных пользовательских интерфейсов

Ostapenko Alina

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

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

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

В независимости от стадии разработки продукта, дизайн — это решение проблем. Псевдолокализация в Netflix — это хороший пример того, как Netflix подошел к разработке пользовательского интерфейса для нескольких языков.

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

Учиться на ошибках.

  • самолет реактивный газотурбинный двигатель младший механик унтер-офицер курсант

"Сломанный" UI — отправная точка

Все идет гладко, пока новый язык, известный своими длинными словами, не был внедрен в продукт, который идет только на английском языке. Язык был немецким и это портило UI. Это открыло мне глаза и я начал подходить к выбору дизайна с новым мышлением.

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

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

Что важно? Что в приоритете? Почему?

Иерархия — это определение приоритетов

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

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

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

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

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

Язык так же важен, как и визуальный стиль.

Определение иерархии может помочь внести "чистоты" в дизайн

Деклатеринг — важность контекста

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

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

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

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

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

В другом случае была иконка, которая казалась понятной, но при проведении пользовательского тестирования и опросов на самом деле было обнаружено, что иконка воспринимается пользователями по-разному и как результат, иконка была удалена и заменена на текст. Результаты в показателях были очень разными, в положительном смысле. Новый текстовый вариант не был таким "классным", как предыдущий эстетически привлекательная иконка, но служила лучшим для пользователя и бизнеса.

Контекст и ясность — важны

Левая сторона выглядит очень ясно, но если представить количество повторений и насколько тесно она будет выглядеть, если показывать ее постоянно? Это может мешать сосредоточиться на том, что действительно важно. Иконки будут лучше работать в данном случае и возможно даже повысят вовлеченность. Многие приложения проводят онбординг для начинающих пользователей, которого обычно достаточно, чтобы с этого момента знать, как использовать решение.

Многие люди не знакомы со знаком низкого давления в шинах на автомобилях (TPMS — система управления давлениям в шинах). Эти знаки обычно обычно универсальны и используются в разных брендах и странах, а так же имеют определенный цвет. Несмотря на то, что многие пользователи (водители) не уверены на 100 % в его значении, а механик должен знать в чем проблема, взглянув на знак.

TPMS — система управления давлениям в шинах

Можно было бы уведомить водителя внутри автомобильной системы в дополнение к отображению значка выше (например, через голосовой интерфейс и, возможно надпись «низкое давление в шинах» где-нибудь, где не мешает вождению), но создав собственную иконку для такой важной меры безопасности может быть опасной и безответственной только ради оригинальности или соответствия своему стилю. Это может создать еще больше проблем, например зеленый знак остановки — будет ли он понятным или запутанным? (Хотя вроде он существует). Опять же, важен контекст.

Язык — различия в значениях

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

Переводы с помощью компьютеров и искусственного интеллекта (AI) значительно улучшились и могут обеспечить быстрое и доступное решение для перевода продукта. Хотя точность перевода AI может различаться для каждого языка. Независимо от того какой способ был выбран, перевод должен быть проверен другим человеком (носителем языка).

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

  • Kuusi palaa = Шесть штук
  • Kuusi palaa = Шесть возвращений
  • Kuusi palaa = Ель горит
  • Kuusi palaa = Ель возвращается
  • Kuusi palaa = Ваша луна возвращается

Какая из?

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

Также можно посмотреть, какие слова используют ваши "большие" конкуренты. Обычно им приходилось много работать, чтобы найти самый идеальный вариант. Это не означает скопировать текст, а в терминах общего языка UI. Если скопировать слово в слово "zazaam thou in my bin" — это очень персонализированное и относится непосредственно к конкретному бренду и будет считаться копированием. "Добавить в корзину" по-прежнему довольно распространено.

"Добавить в корзину" согласно быстрому переводчику Google, на немецком будет "in den Warenkorb legen", это было проверено пользователями. Если исследовать несколько немецких розничных продавцов, чтобы узнать, как они используют эту фразу у себя на сайтах:

  • Zara Германия: "Hinzufügen"
  • Tommy Hilfiger Германия: "Artikel Hinzufügen"
  • Amazon Germany Германия: "In den Einkaufswagen"
  • Ikea Germany Германия: "In den Warenkorb"

Выбор языка в Ikea был наиболее близок к Google переводчику. Какой бы ты использовал? На это влияет отрасль в которой с которой работаешь.

"Добавить в коризну" (2 варианта), "Добавить" — Что использовать?

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

Язык так же передает личность. Другие языки так же имеют почетные знаки, которые могут отсутствовать в английском. Корме того правила использования заглавных букв различны в немецком и английских языках — то что может показаться ошибкой в английском, может быть правильным на немецком. МОЖЕТ ИСПОЛЬЗОВАНИЕ CAPS LOCK ВЕЗДЕ БЕЗОПАСНЕЕ? КАПИТАЛИЗАЦИЯ? КРИЧИШЬ?

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

Язык — очень важная часть любого UI.

18 стоун — это примерно 114 кг или 252 фунта

Спецификация — "гибкость" макетов

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

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

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

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

Перевод на русский: Komarov.Design / Алина Остапенко  
Оригинал публикации. Автор: Simo Herold


⚡ Если тебе понравился этот материал, ты можешь подписаться на мой Instagram / Facebook / Medium / Linkedin. Там ты найдешь больше интересных материалов о дизайне.