Советы от Андрея Мацко и Василия Яцюка, компания MIDSUN. Рубрика IT Business. При поддержке сети магазинов Enter.

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

Что в костях заложено, того из мяса не выбьешь.

С Андреем Мацко я познакомился в те времена, когда, если у дизайнера был не простой компьютер, а «мак», то дизайнер был точно бог. У Андрея был «мак» и он был вполне бог. Потому что совмещать графический дизайн и веб не всем удается. Год так был 2000 какой-то.

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

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

Договорился с ними об интервью на тему, почему сейчас нужно начинать проектировать интернет-решения не с сайта, а с его мобильной версии. Но вместо интервью Андрей и Василий прислали мне уже готовый текст. И делать ничего не надо.

Читайте советы от профессионалов, дальше текст от MIDSUN.

«Статистика вещь упертая. Сегодня более 70% траффика на большинстве сайтов — это мобильные устройства. Взаимодействие пользователей с информацией происходит в большинстве случаев не так, как все было устроено еще 5 лет назад. Скорость восприятия информации на мобильном устройстве совершенно другая. Мы сторонники концепции Mobile-First. Лишая себя полноценной мобильной версии — владелец бизнеса/сайта/маркетплейса и т.д. — однозначно лишает себя основной доли трафика.

SEO оптимизация. В настоящее время в Google происходит развертывание мобильного индекса, так называемого Mobile-First индекса. До начала развертывания Mobile-First индекса поисковик сканировал, индексировал и хранил десктопную версию страницы. Все сигналы ранжирования использовались именно с ПК-версии сайта. При этом, если мобильная страница отличалась от десктопной, это приводило к ошибкам в ранжировании мобильной страницы. Сейчас происходит запуск отдельного бота Google, который будет сканировать, ранжировать и сохранять в кэше страницу для мобильной версии сайта. При этом сниппеты в выдаче будут строиться из мобильной, а не ПК-версии. Тут выводы напрашиваются сами собой — индексация самого крупного поисковика строится теперь в первую очередь на мобильных версиях.

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

Разработка интерфейса для мобильной версии.Создание интерфейсов в проектировании мобильных сайтов – это самый сложный и самый важный этап. Поэтому мы отдельно выделим принципы и законы проектирования мобильных интерфейсов.

1. Принцип KISS. От англ. «keep it short and simple». Интерфейс должен быть простой и понятный, задачи должны решаться минимальным числом действий, все должно быть понятно и очевидно.

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

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

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

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

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

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

8. Кошелёк Миллера. В одном функциональном блоке не может быть больше 5-7 элементов, иначе пользователь не сможет удерживать информацию в кратковременной памяти.

9. Принцип группировки. Информацию желательно разбивать на логические блоки (группы), так пользователю легче ориентироваться.

10. Интуитивная понятность. Понимание лучше запоминания.

11. Все полезное на виду. Все важные элементы интерфейса должны быть на виду и соответствующим образом выделены.

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

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

Рекламная пауза

В отделе маркетинга Enter меня спросили: 

- Павел, с кем будет следующий материал?

- С дизайнерами

- Тогда давайте рекламировать большой монитор, а то сапожники вечно без сапог…

Рекламируем:  Samsung 31.5'' 4K UHD Black/ U32H850UMI. 12 499 леев, если брать в кредит – 556 леев в месяц. Посмотрить технические характеристики и купить можно как в сети магазинов Enter, так и на сайте по этой ссылке.

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

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

Figma — это программа нового поколения для разработки интерфейсов программ, веб-сайтов и мобильных приложений;

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

Invision Studio — Новый продукт для проектирования графических интерфейсов. Изначально позиционировался как дополнение к Photoshop для совместной работы. Однако компания пошла дальше. Подняла проблемы интерактивного прототипирования, анимации и сыграла на этом;

Adobe XD — версия софта от Adobe для создания прототипов и интерфейсов».