razrabotka-veb-interfeisov

Разработка веб-интерфейсов

В этой статье я постараюсь раскрыть неочевидное об очевидном — об интерфейсах в вебе. Есть ограниченность в общественном взгляде на интерфейс, типа ты открыл крышку макбука — вот тебе и интерфейс. Это не совсем так. Интерфейсы — очень обширная тема: бывают у банковских терминалов, у Neuralink (прямо в мозг провода, уже сейчас), у умных часов и голосовых ассистентов, автомобилей, и даже у штурвала самолёта. Что же такого особенно в веб-интерфейсах ниже в статье.

Что такое веб-интерфейс

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

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

Постепенно с развитием ценности для бизнеса и энтузиазмом сообщества, такие файлы стало возможным стилизовать, анимировать, что-то отправлять с них инфорамцию на сервер и обратно (те же формы обратной связи), обрабатывать информацию на стороне браузера. В наши дни веб-интерфейс может быть полноценным приложением, а не просто оболочкой для запросов на сервер и обратно. Примеры: Slack, Notion, Google docs, есть даже фотошоп для браузера, 3D-редактора для браузера Vectary и моя любимая Figma. Под капотом принципиально это всё такой же интерфейс сервер-компьютер и компьютер-человек, а в дизайне всё уже на уровне полноценных приложений.

Тенденции развития веб-интерфейсов

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

Разработка веб-интерфейсов С ростом технических возможностей, который двигал потолок, и потребностями пользователей и бизнеса, которые двигали нижнюю границу требований, веб-интерфейсы стали главной площадкой, чтобы помериться дизайнилкой. Несмотря на то, что при рациональном подходе делать что-то трендовое ради самого тренда не стоит, всё равно стоит оглядываться на новшества. Например, за интересеными техническими решениями я слежу на Hackernoon, а визуальные референсы собираю на нескольких ресурсах: Веб-интерфейсы
«Лапа ниндзя» — странное и милое название одного из моих фаворитов в поиске референсов

В будущем в вебе станут доступны VR, AR и прочие продвинутые интерфейсы. Так же одной из тенденция являются собственные форматы разметки среди ИТ-гигантов:

  • Турбо-страницы Яндекса поддерживают уже всё вплоть до страниц товаров интернет-магазинов;
  • Google AMP — формат для молниеносной загрузки страниц из поиска, аналогичен турбо-страницам;
  • Facebook несколько лет выпустила свою паблишинг-платформу;
  • Многие суперапы имеют собственный веб-интерфейс, где можно заказать еду, массаж, посмотреть погоду и початиться;

Этапы разработки Web-интерфейса:

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

Этап сбора информации

Помимо постановки задачи, определения портрета пользователя интерфейса, карты его путей user-flow, накладываются ещё необходимые вводные:

  • Какие технологии использует сайт сейчас, если он существует, или с какими технологиями справится заказчик. Полезно и удобно должно быть всем: и пользователям и бизнесу;
  • Существует ли уже другой носитель дизайна, чтобы поддержать его стилистику;
  • Маркетинговая или продуктовая стратегия, в рамках которой создаётся интерфейс. Сюда же рекламные кампании, CJM, интервью, если они уместны или уже имеются;
  • Весь доступный на момент запука контент;

Этап проектирования web-интерфейса

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

Разработка дизайна

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

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

Вот пара советов для таких случаев:

  • Разделяй информацию на несколько шагов, когда её слишком много (не для пользователя, а для адаптивности);
  • Упрощай паттерны: всё, что можно сделать модулем, который переверстается из горизонтального ряда в колонку — делай модулем;

По UI тоже есть советы:

  • Также закладывай в изображениях возможности кадрирования без потери смысла. Например, важная часть картинки по центру — безопасно, а по краям — нет.
  • Проектируй типографику с расчётом на единицы, зависимые от разрешения, а не в пикселях. Вот хороший калькулятор: type-scale;
  • Не забудь про шрифты — лицензию на них покупает бизнес в зависимости количества просмотров. А для дизайна — дизайнер на количество компьютеров, на которые шрифт устанавливается. Шрифты для веб-дизайна лучше всего подключать в формате woff;

Этап имплементации

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

Этап тестирования на удобство пользования

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

Правила в разработке веб-интерфейсов

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

Заключение

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

Поделиться
Телеграфировать
1 Star2 Stars3 Stars4 Stars5 Stars (5 votes, average: 3,00 out of 5)
Загрузка...

Добавить комментарий