TL;DR – в чем смысл:

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

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

Читать: https://medium.muz.li/designing-notifications-for-applications-3cad56fecf96

Привет, меня зовут Оля Сартакова. Я работаю в Redmadrobot и преподаю дизайн мобильных приложений в Британке. Хочу рассказать, как работаю с текстами в интерфейсах.

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

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

1. Понять, кто и в какой ситуации будет пользоваться приложением

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

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

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

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

Давайте разберём пример: проработаем сценарий оформления заказа для приложения доставки пиццы. Наш пользователь — 28-летний Василий. Характер прескверный, не женат. Он живёт во Фрязино, работает в Москве. Сегодня вечер пятницы. Василий после работы выпил немало пива с коллегами. Сейчас он возвращается домой на электричке, в которой не всегда хорошо ловит интернет, и хочет есть.

2. Выписать всё, что может пригодиться

Для этого нужно побеседовать с клиентом, побеседовать с пользователями, проанализировать конкурентов, пофантазировать самому.

С пиццей у меня получилось так.

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

Бизнес (пиццерия) заинтересован в том, чтобы Василий сделал заказ как можно быстрее и оплатил заранее.

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

Если не спросить у Василия время доставки, курьер может привезти пиццу не вовремя и ему придётся ждать под дверью. Про время надо спросить.

Василий хочет оплатить пиццу через Apple Pay, но не все с ними солидарны. Во-первых, не у всех смартфоны поддерживают Apple / Google / Samsung Pay, а во-вторых, при первом заказе люди опасаются предоплат — вдруг вообще не привезут. Получается, что в приложении нужны, как минимум, четыре способа оплаты: Apple / Google / Samsung Pay, картой в приложении, картой курьеру и наличными.

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

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

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

Итого, в форме оформления заказа нужны следующие поля:

• Имя и телефон клиента.
• Способ получения заказа: доставка или самовывоз (мы разберем только доставку, потому что Василию нужна именно она).
• Время доставки: чем скорее, тем лучше, или к указанному времени.
• Адрес доставки.
• Способ оплаты.

Так форма будет смотреться на экране. Для начала поделю оформление заказа на 2 шага. На первом проверю, знаком ли нам пользователь, на втором узнаю, как он хочет получить и оплатить заказ.

3. Убираем то, без чего можно обойтись

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

В черновике меня смущают повторы «доставки», «при получении» и формулировка «Способ оплаты» (хоть это и не критично, но выглядит слишком формально). Переформулируем все три подзаголовка в одном стиле, уберем «при получении» из оплаты наличными — всё равно иначе деньги передать невозможно:

Теперь меня смущает только «Укажите адрес». Можно заменить его на подсказку о том, что именно придётся указать:

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

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

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

Форма получилась большая, но убрать из неё нечего. Что делать?

Один приём мы уже использовали — поделили её на 2 шага. Второй способ сработает при повторном заказе — можно запоминать введённые данные и показывать поля предзаполненными.

4. Заботимся и объясняем

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

Превышен лимит неактивности → Просто верните человека на предыдущий шаг.

Неверный формат данных → Показывайте сразу правильную клавиатуру.

Если предотвратить ошибку невозможно, формулируйте оповещения на понятном человеку языке и объясняйте, что произошло, в чем причина и что сделать. Как правило заботливое сообщение об ошибке занимает больше места, чем «роботизированное», но люди не будут на нас в обиде.

Сервер не отвечает →

1. Если сервер недоступен из-за того, что у пользователя пропало соединение с интернетом, так и говорим → Нет соединения с интернетом. Проверьте настройки сети.
2. Если сервер недоступен по собственным мотивам, единственный вариант, продумать автоматическое решение проблемы и подсказать, как можно решить её прямо сейчас. → Нет связи с сервером. Не закрывайте приложение, и ваш заказ отправится автоматически, как только мы устраним неполадку. Или позвоните нам по телефону +7 (495) 999-99-99 — и мы оформим заказ.

Неверный номер телефона →

1. Если не хватает цифры → Не хватает цифры
2. Иногда пользователь сознательно «допускает ошибку». Например, не указывает номер телефона или пишет случайный набор цифр, потому что не хочет, чтобы ему лишний раз звонили. Постарайтесь найти в этом пользу для человека и расскажите о ней. → По такому номеру курьер не дозвонится, если не сможет вас найти.

5. Перечитываем

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

6. Тестируем на людях

Когда мы довольны результатом, пора проверить интерфейс на целевой аудитории. Лучше всего собрать прототип с нажимаемыми кнопочками в InVision, Marvel или Flinto и дать нескольким людям из целевой аудитории задание пройти целевой сценарий — заказать пиццу с доставкой на дом в 20:00. На что нужно обратить внимание:

• Легко ли пользователям? Всё ли им понятно?
• Где у них возникают проблемы? Почему?
• Нравится ли им тон общения, который вы выбрали?

Что нельзя делать:

• подсказывать, куда нажать;
• выражать свои эмоции, когда у человека что-то не получается;
• задавать вопросы, пока он не закончил.

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

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

7. Определяем правила

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

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

Расскажите, что такое фирменный стиль и из каких компонентов он состоит?

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

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

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

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

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

Какие особенности есть у цифровых носителей? Какие-то специальные технические требования или пакет из обязательных форматов?

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

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

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

А как бы вы решили, например, кейс уже знаменитого ДжонФедора?

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

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

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

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

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

Какие самые частые ошибки вы замечаете при адаптации фирменного стиля для веба и мобайла?

Ошибка номер один – логотип делается для большого формата, а используется в маленьком размере: на сайте, в приложении. Это встречается повсеместно — такие логотипы невозможно разглядеть. В вебе часто забывают про самый маленький формат, типа фавикона. Для приложения критически важна уникальная цветовая гамма, у многих ее просто нет. Есть один цвет, который совпадает с кучей других приложений. Это основные проблемы в узнаваемости.

И как их избежать?

Чтобы избежать таких проблем, нужно делать логотип под тот размер, в котором его будут видеть чаще всего. И презентовать на этом месте (мы называем его «Главное место»).

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

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

Обычно эта реакция не столько на редизайн, сколько на то, что пользователей не спросили. Стало непривычно и неудобно. Такая реакция неизбежна, нужно просто переждать.

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

Спасибо!

Веб-дизайн – ровесник веб-страницы. 6 августа 1991 года британский ученый Тим Бернерс-Ли, которому мы обязаны за создание HTML, разработал первую веб-страницу. Разгуляться было негде: это был просто текст со ссылками, но отсчет существования веб-дизайна уже начался. Лишь в 1993 году удалось улучшить внешний вид страниц с помощью первого графического браузера Mosaic.

В свою очередь, мобильный дизайн – одна из областей графического дизайна, которая начала развиваться несколько лет назад. С запуском iPhone 9 января 2007 года и App Store 10 июля 2008 года, рынок создания мобильных приложений стал особенно интересен разработчикам и компаниям, так как появились аппараты, обладающие подходящей для работы приложений мощностью.

10 лет App Store: эволюция дизайна первых приложений

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

Для начала

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

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

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

Взаимодействие

Области касания по версии Скотта Херффа иллюстрируют зоны, куда может дотянуться большой палец

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

При работе с мобильным устройством ваш курсор – это палец. И так же, как и в вебе, надо думать о том, чтобы пользователь не проклинал вас, пытаясь ткнуть в нужную область экрана. В мобайле нужно делать поправку еще и на антропометрию: площадь соприкосновения пальца с экраном. При создании дизайна приложений вы столкнетесь с таким понятием, как минимальная область касания. В iOS рекомендуют не делать зону тапа меньше 44×44, а в Android – 48. В редких случаях можно уменьшить зону нажатия, но это уже большой риск: пользователь может просто перестать попадать по нужной иконке. Еще надо учитывать, что палец всегда находится около экрана, и каждое неаккуратное касание приравнивается к клику. Соответственно, возникновение ошибки возрастает.

Разнообразие устройств

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

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

Несколько базовых разрешений для примера:

• 320х480 (iPhone 4)
• 320х568 (iPhone 5)
• 375х667 (iPhone 6,7,8)
• 375х812 (iPhone X)
• 414х736 (iPhone 6+,7+,8+)
• 360х640 (большая часть Android-устройств)
• 412х732 (Pixel 2)
• 360×720 (Pixel XL)
• 360×740 (Galaxy S8).

При создании дизайна на iOS рисуется макет в размере 1Х. Это значит, что на устройстве он потом будет увеличен, так как плотность пикселей совершенно другая. На iPhone 3 разрешение было 320х480. Пропорции экранов от iPhone 6 до iPhone 8+ не менялись и остаются 375х667. В Android принято рисовать под 360х640.

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

Различие платформ

Когда вы только начнете создавать приложения, первое время будете постоянно напоминать себе о том, что в Android существует кнопка “назад” и что боковое меню – это основной элемент навигации. А на iOS наиболее распространенным элементом навигации является tab bar, а в боковом меню спрятаны наименее важные функции. И это лишь малая часть различий.

Не стоит забывать о гайдлайнах – iOS Human Interface Guidelines и Android Material Design Guidelines, но помимо их изучения вам нужен опыт использования мобильных устройств с различными платформами. Рекомендую вам хоть немного разбираться в технических аспектах и для общего понимания просматривать документацию разработчиков. Так вы сможете наладить более простую коммуникацию с техническими специалистами. Знать наименование структурных элементов тоже полезно, так как, например, навбар в iOS – это верхняя навигационная панель, а в Android – это нижняя навигационная панель, и они совершенно разные в поведении. В iOS линия, разделяющая ячейки в табличном представлении, называется сепаратор, а в Android – дивайдер.

Помните, что переносить дизайн на 100% предназначенный для одной платформы на другую – это верный способ убить юзабилити. У пользователей есть свои привычки и особенности использования смартфона. Несколько лет назад никто не мог представить, что при просмотре приложения на iOS и на Android дизайн будет одинаковый. Если такое случалось, то приложение на одной из платформ просто погибало. И когда пользователь iOS видел дизайн и навигацию из Android, то у него было ощущение, что ему подсовывают что-то низкопробное. А потом заходил в App Store и искал то, что будет соответствовать нативному дизайну платформы. Но времена меняются и сейчас все больше и больше приложений выглядят очень похоже на разных платформах. При этом в большинстве случаев учитывается то, как пользователи привыкли взаимодействовать с конкретной системой.

Не все так легко, как кажется

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

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

В целом процесс продумывания и создания дизайна для веб-сайтов, как правило, довольно статичен и не учитывает переходы между страницами. Например, сайтам не нужна кнопка “назад”, ведь она есть в окне браузера. Поэтому у веб-дизайнеров при создании приложения возникают вопросы по взаимодействию внутри приложения. Несмотря на то, что за последние годы произошли улучшения в создании сайтов при помощи JavaScript и CSS3, суть сайта не заключается в движении и взаимодействии, в отличие от дизайна приложений. Дизайн взаимодействий и микро взаимодействий сложен не только потому, что требует понимания платформы и пользователя, но и из-за необходимости быть почти невидимым.

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

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

Прототипы

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

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

При создании прототипа задавайте себе вопросы: «Какая главная цель моего приложения?”, “Какие разделы наиболее важные и куда их стоит поместить?”, “Какие действия наиболее важные, а какие – второстепенные?».

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

Какие тексты?

В наше время около 70% людей страдают заголовочным потреблением, то есть дальше первой строки никто не заходит. Суть должна быть написана коротко и понятно. В приложениях мало кто любит читать большие тексты, поэтому многие просто пропускают онбординги, подсказки и туториалы. Если у вас уже есть текст для сайта, то урежьте его минимум в два раза и вы придете к верному решению для мобильного приложения. А лучше всего обратиться к UX-писателю. Задачей UX-писателя является построение такого интерфейса, в котором пользователю не нужны были бы подсказки – все действия совершались интуитивно.

В завершении

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