tower4.png

История о том, как мы делали спецверсию сайта по ГОСТу совместно с Goose Gaming. Всё ради конкурса президентской платформы «Россия — страна возможностей» для талантов игровой индустрии. Рассказываем о том, какие подводные камни возникают при адаптировании сайта для людей с ограниченными возможностями.

<h3>История о том, как мы делали спецверсию сайта по ГОСТу совместно с Goose Gaming</h3>


<img src="/uploads/prevyu_5a1c594efd.png" alt="превью.png">


<p>Всё ради конкурса президентской платформы «Россия — страна возможностей» для талантов игровой индустрии. Рассказываем о том, какие подводные камни возникают при адаптировании сайта для людей с ограниченными возможностями.</p>
<p>Не будем грузить вас официальными требованиями по ГОСТу. Перечислим кратко: нужно было поработать с настройками для слабовидящих — разработать синтез речи, изменить размер шрифта, увеличить контрастность. При этом сделать так, чтобы сайтом можно было управлять через клавиатуру и не было ограничений по времени для нормального восприятия и использования контента.</p>
<blockquote>
  Мы рады принять участие в социально значимом проекте, ведь компании редко задумываются о специальных версиях сайта. Из-за этого люди даже с распространенными заболеваниями не могут пользоваться продуктом без посторонней помощи.
</blockquote>
<p>Юлия Семенчук, руководитель отдела разработки и продуктового менеджмента в Mish</p>


<h3>Сами проблему сделали — сами решили</h3>

<p>Доступность интерфейсов зависит от дизайна. Изначально он состоял из ломаных, пересекающихся элементов и нам это нравилось. Но когда начали адаптировать сайт под ГОСТ, красота поломалась — табы и кнопки перестали выделяться с клавиатуры. Это связано с тем, что ломаный дизайн достигался путем отсечения лишней части элемента и под отсеченный элемент попадала обводка при фокусе. Забавный опыт для нас, но не для наших фронтов — они сильно ругались, ведь им пришлось все переделывать, поэтому учитывайте требования ещё на стадии проработки дизайна.</p>
<img src="/uploads/Sami_problemu_sdelali_sami_reshili_46105ccc40.png" alt="Сами проблему сделали — сами решили.png">


<h3>Как сверстали</h3>

<p>Для начала необходимо было проработать порядок следования элементов. На планшете, в мобильной версии и в десктопе они должны располагаться в одном и том же порядке, не уезжать и не расплываться. Поэтому мы использовали адаптивную верстку и отрисовали несколько макетов под основные разрешения девайсов.</p>
<p>После этого сконцентрировались на создании ARIA-атрибутов — они позволяют явно указать, в каком состоянии находится меню и добавить читабельный текст к графическим элементам. В общем, помогают скринридерам более точно читать сайт, контекст, цитаты, кнопки, ссылки, описывать изображения, иконки и т.д. Правда, с ARIA-атрибутами нужно работать осознанно и не переборщить, чтобы не усложнять работу скринридерам.</p>
<p><em>Скринридер (screen reader) — программа, которая превращает контент интерфейсов в речь или шрифт Брайля. Они нужны людям со слепотой и слабовидящим, а также пользователям с когнитивными особенностями, которым легче воспринимать информацию на слух. Например, людям с дислексией.</em></p>
<p>И, конечно, не обошлось без использования семантических тегов, потому что это важно для SEO-оптимизации.</p>


<h3>Настрой и сохрани</h3>

<p>Очень удобно, когда настройки спецверсии сохраняются при повторном заходе на сайт, но бывают случаи, когда одним компьютером пользуются несколько человек. Поэтому в процессе разработки появился такой сценарий: когда пользователь включает специальную версию сайта, он видит ее в том состоянии, в котором сам же и настроил. Сохраняются размер шрифта, межстрочный и межбуквенный интервал, цветовая гамма. Но при повторном заходе на сайт или перезагрузке страницы, спецверсия отключается, чтобы нынешний юзер мог решить — нужна ему спецверсия или нет.</p>


<img src="/uploads/Nastroj_i_sohrani_59d509911c.png" alt="Настрой и сохрани.png">


<h3>Как быть с картинками?</h3>

<p>ГОСТ требует, чтобы на сайте была функция отключения изображений с сохранением текстового контента и озвучки. Так, пользователям с нарушениями восприятия мелких и ярких изображений будет проще пользоваться сайтом.</p>
<p>Чтобы описать то, как мы это сделали, расскажем немного матчасти, приготовьтесь:</p>
<ul>
  <li>С помощью пользовательского хука задали параметры по умолчанию для спецверсии и поместили их в локальное хранилище по ключу.</li>
  <li>Затем благодаря компоненту-обертке, в который помещаем всё приложение, через контекст передали параметры и обработчик для их изменения.</li>
  <li>Логику поиска всех DOM-элементов, соответствующих требуемым условиям и присваиванию им необходимых CSS-свойств, реализовали в отдельном пользовательском хуке.</li>
</ul>
<p>В конечном итоге просто вызываем хук на всех страницах приложения, где нужно скрыть изображения.</p>
<img src="/uploads/Kak_byt_s_kartinkami_97cc4ec4d2.png" alt="Как быть с картинками.png">
<p>Чтобы провернуть этот сценарий, пришлось проработать все возможные кейсы применения изображений на страницах сайта, что заняло немало времени. Каждый случай мы обрабатывали определенным образом с точки зрения присваивания или удаления CSS-свойств. Кроме того, возникла потребность выделить ряд изображений в качестве исключений, так как они всегда должны быть видимыми для пользователя, чтобы интерфейс оставался удобным и читаемым. Для подобных случаев изображениям был добавлен специальный data-атрибут, по которому они игнорировались при включении режима «Без изображений».</p>


<h3>Монохром и его друзья</h3>

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


<img src="/uploads/Monohrom_i_ego_druzya_37b53d239f.png" alt="Монохром и его друзья .png">

<p>Во всех браузерах есть готовые решения для управления с клавиатуры, и мы хотели их использовать. Но со временем поняли, что стандартные библиотеки некорректно отображают наш ломаный дизайн — обводка была кривая или вовсе не отображалась. Поэтому нам пришлось немного покреативить.</p>
<p>Чтобы создать сложные формы объектов, подошло свойство CSS, которое называется Clip-Path. Оно позволяет скрыть часть элемента, создавая область отсечения вокруг него. Но когда дело дошло до создания спецверсии, появилась ещё одна проблема — при попытке выделить элемент с помощью клавиши Tab, обводка всё равно не отображалась. Для решения этой проблемы, мы создали псевдоэлементы и разместили их поверх элементов, которые необходимо выделить.</p>
<blockquote>
  Вообще хорошая практика, когда любой сайт, и не обязательно спецверсия, доступен с клавиатуры. Если семантические теги написаны верно, то на 95% эта работа окупается.
</blockquote>
<p> Мария, frontend-разработчик в Mish</p>


<h3>Как оптимизировали работу</h3>

<p>У нас в агентстве любят, когда всё по полочкам — это упрощает работу. Поэтому не лишним была организовать процесс при настройке параметров сайта так, чтобы не бегать по всему проекту. Например, если бы мы разрабатывали все кнопки с нуля, то при настройке сайта изменения пришлось бы вносить в каждую.</p>
<p>Поэтому мы вынесли кнопку в компоненту и добавили специальное состояние. В нем указали условия и зашили всю информацию по тому, как должен выглядеть элемент при включении спецверсии. Это позволило нам прописать все требования только в одном файле и не ходить по всем остальным. Но это стандартная практика: мы на всех проектах делаем компоненты и выносим их в отдельную библиотеку — это удобно и ускоряет процесс.</p>
<p>На сайте много текста, который меняется при включении специальной версии — увеличиваются шрифт и расстояния между буквами. Поэтому с текстовыми блоками поступили так же, как с кнопками — создали компонент, в котором указали все необходимые параметры. Теперь, когда происходит переключение на специальную версию сайта, компонент сам дает команду всем файлам. Бонусом эта фишка позволяет легко добавить озвучку сайта.</p>


<img src="/uploads/Kak_my_optimizirovali_rabotu_e014821f1e.png" alt="Как мы оптимизировали работу .png">


<h3>Какой вывод можно сделать?</h3>

<p>Сложности закаляют — например, необычные требования, к которым ты не готов, короткий срок реализации и ограниченный бюджет. В таких ситуациях можно рассчитывать только на опыт и команду. Поэтому внимательно читайте требования и не бойтесь импровизировать и добавлять от себя полезный функционал, который улучшит пользовательский опыт.</p>
<p>Тем временем первый сезон проекта «Начни игру» уже закончился — финалисты съездили в Казань, защитились и получили финансовую поддержку. А создатели готовятся к новому этапу конкурса, чтобы те, кто не успел принять участие в первом или не прошел отбор, смогли попытать свои шансы во втором. Мы же добавляем новые механики и задания, чтобы ничего не помешало участникам выйти в финал.</p>

ГОСТ бастерс: как мы делали спецверсию сайта «Начни Игру»

SBI mocap.mp4

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

<img src="/uploads/001_0d8c7a6365.jpg?updated_at=2023-04-02T18:29:50.048Z" alt="enter image description here">
<div>
<h3>Семейный банкинг</h3>
<p>Мы&nbsp;отразили новую для рынка идею, family banking&rsquo;а, в&nbsp;виде детского и&nbsp;взрослого приложений, которые помогают вместе копить на&nbsp;общую мечту, вместе тратить и&nbsp;вместе зарабатывать кэшбэк.</p>
</div>

 <img src="/uploads/002_dcabe32094.jpg?updated_at=2023-04-02T18:29:49.955Z" alt="enter image description here">

<div>
<h3>Взрослое приложение</h3>
<div>
<p>Во&nbsp;взрослом есть семейные и&nbsp;личные продукты. Для удобства пользователей использовали цветовое кодирование: во&nbsp;всех семейных продуктах основной цвет синий, в&nbsp;личных&nbsp;&mdash; светло-серый.</p>
<p>Во&nbsp;взрослой версии приложения можно видеть историю операций всех членов семьи, что удобно для контроля трат и&nbsp;ведения семейного бюджета.</p>
</div>
</div>

  <img src="/uploads/004_1c73d338ba.jpg?updated_at=2023-04-02T18:29:49.990Z" alt="enter image description here">
  
<div>
<h3>Детское приложение</h3>
<div>
<p>Стиль детского приложения не&nbsp;такой строгий, как у&nbsp;взрослого: обращение на&nbsp;&laquo;ты&raquo;, яркие иллюстрации, возможность поставить на&nbsp;фон картинку из&nbsp;мультика или фото супергероя, но&nbsp;в&nbsp;то&nbsp;же время оно похоже на&nbsp;взрослое и&nbsp;выглядит как серьезный финансовый сервис.</p>
 <p>Такое решение позволяет формировать финансовую грамотность у&nbsp;подрастающего поколения. Приложение позволяет младшим членам семьи планировать свои накопления, расходы и&nbsp;получать переводы от&nbsp;родителей в&nbsp;интерактивной форме.</p>
</div>
</div>

  <img src="/uploads/006_f63ec80210.jpg?updated_at=2023-04-02T18:29:49.975Z" alt="enter image description here">
  <div>
  <h3>Элемент игры</h3>
  <p>Внутри приложения родители могут назначать задания детям и&nbsp;назначать им&nbsp;награду. Средства автоматически перечисляются в&nbsp;копилку ребенка после подтверждения родителем.</p>
  </div>
<video
src="/uploads/sbi_budget_abe241ab65.mp4"
loop
autoplay
muted
playsinline></video>
</div>
  <img src="/uploads/007_9ee6f66a1c.jpg?updated_at=2023-04-02T18:29:49.870Z" alt="enter image description here">
 
 <div>
 <h3>Комплексный сервис</h3>
<p>Мы&nbsp;реализовали все основные функции платежей: переводы между своими счетами, клиентам других банков, платежи за&nbsp;ЖКХ, интернет, телефон, по&nbsp;реквизитам и&nbsp;другие финансовые возможности.</p>
 </div> 

  <img src="/uploads/003_05939f2545.jpg?updated_at=2023-04-02T18:29:48.727Z" alt="enter image description here">
  <img src="/uploads/005_e8473fac76.jpg?updated_at=2023-04-02T18:29:49.501Z" alt="enter image description here">

<div>
<h3>Результат</h3>
<p>В&nbsp;процессе работы мы&nbsp;разработали большую дизайн-систему, отрисовали более 1500 экранов и&nbsp;выпустили MVP-версии взрослого и&nbsp;детского приложений для iOS и&nbsp;Android.</p>
</div>

Usability test

hello@mish.design

Москва

Нижний Новгород