Примеры анимации на веб страницах. Анимация в веб-дизайне: зачем и когда её нужно использовать. Переходы и взаимоотношения состояний

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

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

Немного о терминах
Строго говоря, сайты не переводят, а локализуют. Локализация - это не просто перевод с одного языка на другой. Это комплексная адаптация к культуре и реалиям рынка, в результате которой тексты на сайте, графика, мультимедиа, верстка - все выглядит так, как этого ожидает целевая аудитория. Именно поэтому очень важно учесть множество нюансов, в том числе таких, которые на первый взгляд могут показаться незначительными. К примеру, подумать о длине слов в целевом языке (в английском они короче, чем в русском, а в немецком - длиннее) уже на этапе проектирования интерфейса. Например, «выход» и «exit» ещё не так сильно отличаются, а вот немецкий «Beenden» и китайский 退出 уже тянут на задачку для дизайнеров интерфейса.

Качество перевода сайта
Сайт - это лицо компании. У пользователей нет возможности попробовать продукт. Отношение к нему рождается на основе UX и восприятия текста - информативности, стиля изложения, грамотности.

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

Процесс оценки выглядит так: специалист изучает перевод и фиксирует ошибки в специальной форме, попутно классифицируя их. После этого он по специальной формуле вычисляет «индекс качества» в диапазоне от 0 до 100. При трехступенчатой технологической схеме (переводчик, редактор и корректор), рекомендованной для локализации сайтов, ПО и маркетинговых материалов, этот показатель должен быть не ниже 90.

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

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

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

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

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

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

Исходники
Наличие исходных файлов (html, xml, doc, xls или других) упрощает и удешевляет локализацию, а также экономит силы и нервы - вы спокойны, что исполнители точно не переведут лишнего и ничего не забудут.

Скидывать исполнителям ссылку на ваш сайт с пометкой «перевести до среды» - не самый эффективный способ постановки задачи, хотя и он работает. Лучше укажите, что именно перевести, и дайте доступ к CMS сайта, чтобы исполнители сразу работали с исходными файлами.

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

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

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

Как бывает в жизни

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

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

Если нужно перевести маркетинговые тексты для запуска продукта, настоятельно рекомендуем дополнительно привлекать редактора-рерайтера. Он адаптирует переведенный текст и правильно расставит акценты. Могут потребоваться и другие работы: перерисовка изображений, изменение шаблона страницы и пр.

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

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

Машинный перевод подойдет в тех случаях, когда текст простой и однозначный (подходит большим компаниям с сильным конкурентным преимуществом, когда, например, низкая цена товаров перевешивает качество перевода). Но для этого технологию обычно настраивают - «тренируют» конкретный машинный «движок» на определенные тексты из данной области, добавляя накопленные глоссарии и базы памяти переводов по теме. Затем над результатом такого перевода работает редактор: в отрасли процесс называется постредактированием, а специалист - постредактором.

Переводчик работает с машинным переводом

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

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

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

Что делать, если бюджет на локализацию небольшой, а переводить сайт все равно нужно
Сэкономить на локализации помогут:

• Технологии автоматизации переводческого процесса. Целый класс программ, CAT-инструменты (Computer-Aided Translation - системы автоматизации процесса перевода), помогают повторно использовать ранее переведенные слова и фразы и облегчают труд переводчиков. Это не машинный перевод, а тексты, созданные человеком (профессиональными переводчиками). В CAT-системах используется накопленная память переводов и проектный глоссарий. Важно, чтобы переводчики использовали наиболее актуальные лингвистические ресурсы. Например, в платформе SmartCAT они сразу же становятся доступны всем участникам процесса, что особенно ценно, когда на большом проекте параллельно работает несколько переводчиков.
  
  Параллельная работа нескольких переводчиков над одним текстом
• Расчет стоимости локализации по словам оригинального текста. В статистику не попадут куски кода и другая служебная информация, а стоимость перевода не увеличится после его выполнения, чем иногда страдают недобросовестные подрядчики.
• Организация работы по частям. Если сайт большой, содержит множество описаний продуктов или услуг - разбейте работу на этапы. Сначала переведите наиболее критичные страницы, которые позволят вам начать привлекать клиентов на новом рынке уже сейчас. Постепенно расширяйте объем контента по мере того, как объем продаж на этом рынке будет расти. Этот подход также позволит постепенно накапливать память переводов, а значит, все последующие тексты можно будет перевести быстрее и дешевле, с сохранением единства терминологии и стиля.

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

1. Писать длинные, тяжеловесные фразы, наполненные причастными и деепричастными оборотами. Пишите проще, используйте глаголы, не обращайтесь к пользователям на «Вы», следуйте заветам Максима Ильяхова .
2. Использовать безличные обращения. В некоторых языках они не употребляются, как и дополнительные формы вежливости. Поэтому смело отказывайтесь от них.
3. Применять одну схему построения фразы для каждой языковой версии сайта. Например, для фраз с переменными вида «До конца подписки осталось X дней». В русском языке в зависимости от числа будет меняться падеж и число: дней, дня, день. В других языках может потребоваться предлог или изменение фразы. Имеет значение и плейсхолдер, и двоеточие: например, в турецком фраза начнется с цифры.
Добавить метки

Еще не отказали в этом ни одному клиенту. Тем не менее, результат локализации может сильно зависеть не только от наших переводчиков, а и от ваших веб-дизайнеров. Почему? Ответ на этот вопрос и еще много полезных идей – в переводе статьи опытного проджект-менеджера по локализации Роберта Ханта.

Подготовка к локализации сайтов требует адаптивного дизайна

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

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

Сравните английское предложение и немецкий аналог:

При переводе на немецкий текст удлиняется.

Простое правило – планируйте возможность увеличения текста как минимум на 30% . Разные источники советуют ориентиры от 20% до 50%, но мой опыт подсказывает, что 30% обычно достаточно.

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

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

Вместо фиксированных используйте относительные единицы, em и проценты (%) – это позволит контейнеру адаптироваться под содержимое.

Для примера взгляните, что происходит при переводе надписи с английского на филиппинский язык для кнопки фиксированной ширины:

Button { display: block; width: 120px; text-align: center; }

В данном случае ширина кнопки зафиксирована в 120 пикселей, что подходит для надписи на английском языке, но при переводе текст вырос на 50% (с 105px до 175px), что и привело к переносу строки.

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

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

Уберём свойство width вовсе, и позволим кнопке адаптироваться к родительскому элементу:

Кнопка без указания ширины

Button { display: block; text-align: center; }

Чтобы лучше контролировать ширину, мы можем задать минимальную и максимальную ширину кнопки в процентах.
Задав значение min-width в 30% и max-width в 60%, в результате мы получим:

Ширина кнопки при использовании параметров CSS min-width и max-width

Button { display: block; min-width: 30%; max-width: 60%; text-align: center; }

При разработке вариантов дизайна для разных экранов (media-queries) учитывайте, что текст на разных языках может иметь разную длину и размер шрифта (примечание переводчика: например, для китайских или японских иероглифов, изобилующих мелкими деталями, шрифт должен быть на 15-30% крупнее ). Предусмотрите возможность уменьшать размер шрифта или изменять относительный размер элементов, чтобы дизайн не ломался.

Кроме общих принципов адаптивного подхода, учитывайте следующие рекомендации при создании сайтов, подготовленных к локализации:

Используйте шрифты Unicode
Шрифты Unicode содержат большое количество букв, знаков, цифр и других элементов для отображения текстов на разных языках. В качестве примеров популярных шрифтов, поддерживающих юникод, можно привести Arial и Times New Roman.

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

Не используйте картинки с текстом
Если ваш сайт содержит картинки с надписями, замените их на HTML, а потом стилизуйте при помощи атрибутов CSS и @font-face. Тогда текст можно будет перевести при помощи автоматических переводчиков (примечание переводчика: хотя куда лучше пользоваться услугами агентств по локализации, чтобы получить действительно качественный перевод ).

Планируйте структуру URL, которая будет пригодна для локализации
Когда разрабатываете архитектуру сайта, учитывайте, что рано или поздно вам придется локализовать его на другие языки. Время, потраченное на оценку того, как будут выглядеть URL сайта в разных языковых версиях, окупится потом, когда придётся переводить сайт на другой язык.

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

• Поддомены: example.com/webpage.html превращается в ru .example.com/webpage.html (для русскоязычной версии)
• Поддиректории: example.com/webpage.html превращается в example.com/ru /webpage.html (русскоязычная локализация)

Nike.com (U.S.)

Nike.com (France)

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

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

Документация для наиболее популярных платформ и фреймворков.