В этой статье я постараюсь раскрыть неочевидное об очевидном — об интерфейсах в вебе. Есть ограниченность в общественном взгляде на интерфейс, типа ты открыл крышку макбука — вот тебе и интерфейс. Это не совсем так. Интерфейсы — очень обширная тема: бывают у банковских терминалов, у Neuralink (прямо в мозг провода, уже сейчас), у умных часов и голосовых ассистентов, автомобилей, и даже у штурвала самолёта. Что же такого особенно в веб-интерфейсах ниже в статье.
Содержание
Что такое веб-интерфейс
Изначально веб интерфейсы были просто способом просмотра документов, в них были текст и картинки, а разметка документа была проще, чем в ворде.
Постепенно с развитием ценности для бизнеса и энтузиазмом сообщества, такие файлы стало возможным стилизовать, анимировать, что-то отправлять с них инфорамцию на сервер и обратно (те же формы обратной связи), обрабатывать информацию на стороне браузера. В наши дни веб-интерфейс может быть полноценным приложением, а не просто оболочкой для запросов на сервер и обратно. Примеры: Slack, Notion, Google docs, есть даже фотошоп для браузера, 3D-редактора для браузера Vectary и моя любимая Figma. Под капотом принципиально это всё такой же интерфейс сервер-компьютер и компьютер-человек, а в дизайне всё уже на уровне полноценных приложений.
Тенденции развития веб-интерфейсов
С ростом технических возможностей, который двигал потолок, и потребностями пользователей и бизнеса, которые двигали нижнюю границу требований, веб-интерфейсы стали главной площадкой, чтобы помериться дизайнилкой. Несмотря на то, что при рациональном подходе делать что-то трендовое ради самого тренда не стоит, всё равно стоит оглядываться на новшества. Например, за интересеными техническими решениями я слежу на Hackernoon, а визуальные референсы собираю на нескольких ресурсах:
В будущем в вебе станут доступны VR, AR и прочие продвинутые интерфейсы. Так же одной из тенденция являются собственные форматы разметки среди ИТ-гигантов:
- Турбо-страницы Яндекса поддерживают уже всё вплоть до страниц товаров интернет-магазинов;
- Google AMP — формат для молниеносной загрузки страниц из поиска, аналогичен турбо-страницам;
- Facebook несколько лет выпустила свою паблишинг-платформу;
- Многие суперапы имеют собственный веб-интерфейс, где можно заказать еду, массаж, посмотреть погоду и початиться;
Этапы разработки Web-интерфейса:
Почти такие же, что описаны в статье Разработка интерфейсов, но с детальными особенностями платформы.
Этап сбора информации
Помимо постановки задачи, определения портрета пользователя интерфейса, карты его путей user-flow, накладываются ещё необходимые вводные:
- Какие технологии использует сайт сейчас, если он существует, или с какими технологиями справится заказчик. Полезно и удобно должно быть всем: и пользователям и бизнесу;
- Существует ли уже другой носитель дизайна, чтобы поддержать его стилистику;
- Маркетинговая или продуктовая стратегия, в рамках которой создаётся интерфейс. Сюда же рекламные кампании, CJM, интервью, если они уместны или уже имеются;
- Весь доступный на момент запука контент;
Этап проектирования web-интерфейса
Помимо типичного для любого интерфейса юзер-флоу, в разработке дизайна веб-интерфейса учитываются нюансы. В отдельных случаях, это карта сайта, которая должна быть понятна роботам, в других — что позволяет, а что не позволяет архитектура браузерных приложений. Ну и важный момент проектирования — закладывать то, что ты не контролируешь интерфейсом то, что пользователь нажимает в браузере. Кнопка «назад» или «обновить» могу запросто уничтожить изящное решение, уничтожить введённые данные или поломать навигацию, если она происходила не по разным адресам, а внутри одной страницы.
Разработка дизайна
Главной особенностью разработки веб-интерфейсов является их мультиплатформенность. Это значит, что один и тот же продукт можно трогать мышкой с компа и пальцем с мобильника. В обоих этих случаях работают уникальные паттерны взаимодействия, в мобильниках появляются жесты, но пропадают ховеры (наведение курсора). Потребности пользователей разных платформ также отличаются. Например, орган, в который легко попасть мышкой очень трудно выковырять пальцем, особенно, если органы расположены тесно друг к другу. Цветность на мобильных устройствах в среднем позволяет воспроизвести больше оттенков, чем слабая матрица некоторых компьютеров. Всё это и многое другое необходимо учитывать на этапе дизайна.
Второй особенностью дизайна веб-интерфейса является то, что пользователь будет его открывать на устройстве с непредсказуемым размером экрана или вовсе в окне, которе сам будет тянуть. Если с простыми лендингами и интернет-магазинами уже накопилась база практик, которые позволяют сразу делать интерфейсы, которые выдержат всё, то с нагруженными информацией веб-интерфейсами каждый раз придётся выкручиваться.
Вот пара советов для таких случаев:
- Разделяй информацию на несколько шагов, когда её слишком много (не для пользователя, а для адаптивности);
- Упрощай паттерны: всё, что можно сделать модулем, который переверстается из горизонтального ряда в колонку — делай модулем;
По UI тоже есть советы:
- Также закладывай в изображениях возможности кадрирования без потери смысла. Например, важная часть картинки по центру — безопасно, а по краям — нет.
- Проектируй типографику с расчётом на единицы, зависимые от разрешения, а не в пикселях. Вот хороший калькулятор: type-scale;
- Не забудь про шрифты — лицензию на них покупает бизнес в зависимости количества просмотров. А для дизайна — дизайнер на количество компьютеров, на которые шрифт устанавливается. Шрифты для веб-дизайна лучше всего подключать в формате woff;
Этап имплементации
При отгрузке артефактов, придётся готовить экраны в нескольких разрешениях. Можно из популярных разрешений по ссылке, а лучше узнать у бизнеса, на каких экранах будет работать их продукт. Полезно готовить спецификации и разъяснения для разработки, можно даже со строками кода. Помни, что твои коллеги — не телепаты.
Этап тестирования на удобство пользования
Веб — один из самых благодатных источников количественной аналитики. Можно считать клики, переходы, время на страницах. Качественных тоже хватает: реальные карты движения пользователей по сайту, тепловые карты кликов, источники и интересы пользователей. Ситуативно каждую из этих метрик можно использовать для обнаружения слабых мест интерфейса или точек, где пользователи ведут себя явно не так, как спроектировано. В урбанисте есть метод проектирования дорожек: просто дают людям ходить через газон там, где им удобно, а на месте образовавшихся естественным путём тропинок делают уже дорожки. В создании сайтов и веб-приложений применим этот метод.
Правила в разработке веб-интерфейсов
Помимо основных правил дизайна, в веб-дизайне добавляются технические. По ссылке стандарты доступности в веб-интерфейсах. Также нужно считаться с законом и оповещать пользователей об использовании cookie-файлов, политика конфиденциальности, и иногда даже оферта.
Заключение
Если ты начал освоение разработки интерфейсов с веба, то держи в голове, что можешь не увидеть за деревьями леса. Веб технологии развиваются семимильными шагами, твои шапочные знания в таком случае потеряют актуальность очень быстро. Не забывай о фундаменте из методов проектирования, психологии пользователей, визуальной насмотренности. Это всё пригодится тебе в любом рыночном сценарии. Старичкам я же посоветую больше сдедить за новшествами в отрасли. Будет интересно, обещаю.
(5 votes, average: 3,00 out of 5)
Загрузка...