Блог

Прототипирование сайта

16 октября 2024
13 мин. 503
image
image
Елена Андреева редактор-копирайтер
Прототипирование сайта

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

Что такое прототип?

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

Термин пришел с греческого языка и буквально переводится как «первый оттиск»: πρῶτος «первый» + τύπος «отпечаток». В Греции мастера создавали макеты для проверки своих инженерных и архитектурных решений. Глиняные модели домов, миниатюрные корабли — всё это примеры ранних прототипов.

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

В IT-сфере прототипом называют также некий драфт дизайна сайта, онлайн-сервиса или приложения. Термин применяют и в англоговорящей среде, и в российском пространстве, и он активно используется с 90-х годов.

Почему разработку IT-решений начинают с прототипа

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

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

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

«Серые квадраты»: старый подход для проектирования

Старшее поколение дизайнеров (те, кто начинал карьеру в 90-е или 2000-е годы) при слове «Прототип сайта» или «Прототип приложения», скорее всего, представят нечто такое:

 «Серые квадраты»: старый подход для проектирования

Многие годы прототипом в дизайне назывался этап проекта, который могли сделать, как правило, не дизайнеры, а аналитики или проджект-менеджеры. Тогда это были «серые квадратики» — термин, который стал нарицательным в дизайне.

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

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

«Серые квадраты», казалось бы, позволяли небольшими усилиями пройти первые этапы разработки. Считалось, что нарисовать дизайн и потом его править могут только квалифицированные специалисты, то есть это больше усилий, и усилия более «дорогие». А вносить правки в серые квадраты может и человек низкой квалификации: это не страшно, там же все элементы условные. Считалось, что если прототип согласован, его остаётся только раскрасить, и дизайн легче согласовывается.

На самом деле здесь только часть правды. Согласование прототипа даёт гарантии на будущее: клиент согласовал прототип, а если потом выяснилось, что это неудобно и плохо работает — агентство защищено, ведь у них есть подписанное согласование. Таким образом, с помощью подобных прототипов свои задачи решало в первую очередь агентство, а не клиенты.

Если мы себя поставим на место клиента, то ему этот этап с «серыми квадратами» не нужен. Для него ценнее сразу увидеть дизайн, без промежуточного этапа.
Дмитрий Глумов
дизайн-директор Uplab

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

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

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

Два главных парадокса дизайна, или главная причина изменить подход к прототипам

Парадокс № 1. Привычное и новое

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

Примеры «классических» удобных дизайнерских решений, которые можно найти почти на любом сайте:

  • поиск вверху справа или полоской сразу перед каталогом;
  • «сэндвич» (иконка раскрывающегося меню) справа;
  • корзина и вход в личный кабинет — справа вверху;
  • контакты — последний пункт главного меню.

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

Ценность лежит в новом, и в этом заключается противоречие: необходимо балансировать между удобством и новыми решениями. Очень важно находить место эксперименту и при этом соблюдать пользовательские привычки, чтобы продукт был успешным и зарабатывал.
Дмитрий Глумов
дизайн-директор Uplab

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

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

Экспериментальный интерфейс сайта, который появился лишь на время. Источник: МегаМаркет
Экспериментальный интерфейс сайта, который появился лишь на время. Источник: МегаМаркет

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

Парадокс №2. Функция и визуал

Конфликт привычного и нового живёт в каждом человеке, это одна из особенностей нашей психологии. Однако дизайнер может быть и консерватором, и новатором одновременно, и в этом его «суперсила». Он может хорошо знать пользовательские сценарии, но при этом по-новому их интерпретировать или менять. Именно поэтому в IT всё чаще говорят о такой профессии как UX/UI дизайнер, который объединяет изучение опыта пользователя (User Experience) и переупаковку его в новую визуальную форму (User Interface).

UX-дизайн (User Experience Design) фокусируется на опыте пользователя, то есть его взаимодействии с продуктом. Это потребности, поведение и предпочтения ЦА; шаги пользователей.

UI-дизайн (User Interface Design) сосредоточен на визуальных и интерактивных элементах интерфейса: палитры, шрифты, иконки. Он проектирует экраны и интерфейсы, чтобы они были красивыми и функциональными, а также отражали визуальный стиль компании.

Однако UI – это часть UX, ведь интерфейс – неотъемлемая часть общего опыта, между ними нет разрыва. Поэтому чаще говорят о единой профессии и используют общий термин: UX/UI дизайн.

У дизайнеров обычно преобладает одна из сторон: дизайнер либо аналитик (много опыта, много исследует, много понимает и склонен к тому чтобы подтверждать свои гипотезы), либо человек с более творческим началом и визуально- эстетическими наклонностями. Это может влиять на разделение работы в командах. Но всё же разделение на проектирование и дизайн уходит прошлое, а вместе с ним и классические прототипы.

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

Прототипы новой эры: «черновой дизайн»

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

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

Я могу это сравнить с загрузкой JPEG-файла, который сначала появляется в виде крупных «квадратов» и по мере загрузки становится всё четчё. Или с созданием картины: художник рисует картину: сначала фон и подмалёвок, а потом уточняет детали.
Дмитрий Глумов
дизайн-директор Uplab

Как мы в Uplab работаем над прототипами сайтов и веб-сервисов

Наша компания уже 15 лет создаёт высокотехнологичные сервисы для бизнеса и государства. За годы мы много раз меняли и совершенствовали процесс разработки прототипа, и сейчас он выглядит так:

  1. Собираем состав страницы в Google Docs. Описываем, что находится в шапке, что на первом экране, какие пункты есть в меню, сколько места занимают баннеры. Описание основано на техническом задании и обсуждении проекта с заказчиком.
  2. Бизнес-аналитики продумывают свою часть, исходя из информации о пользователях и функций проекта.
  3. Дизайнеры создают первые эскизы в Figma. После они обсуждаются с арт-директором и клиентом и уточняются. Может быть несколько итераций обсуждений и правок. Иногда первый вариант очень далёк от финального.

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

Саммари

  • Прототип (переводе с греческого языка «первый оттиск») — это, простыми словами, предварительная модель или версия продукта, системы или процесса. В IT-сфере прототипом называют драфт дизайна сайта, другого онлайн-сервиса или интерфейса в мобильных приложениях.
  • В IT прототипирование помогает презентовать концепцию интерфейса сайта и лучше объяснить идею, проверить гипотезы, а также обсудить последующие этапы разработки продукта.
  • Раньше прототипом назывался начальный этап проекта, который могли сделать аналитики или проджект менеджеры. Это была блок-схема структуры сайта, указывающая расположение элементов и визуальный состав веб-сервиса. Она не включала фото, цветовую схему и интерактивные элементы. Сейчас этот подход уходит в прошлое, потому что появились новые инструменты и другие подходы к дизайну.
  • Дизайнеру успешного продукта важно сбалансировать привычное пользовательские сценарии и инновационные решения. Также очень важно презентовать и тестировать в комплексе, уделяя внимание и функционалу, и внешнему виду страницы.
  • Сегодня используется новый подход к прототипированию: черновой дизайн. С самого начала создание прототипа — задача дизайнеров, которые разрабатывают и функциональность, и внешний вид страницы без отрыва друг от друга. Такой подход стало возможным реализовать благодаря изменениям в подходе к дизайну и развитию технологий.

Расскажите
о вашем проекте