База знаний

Создание макета сайта на бумаге

05 сентября 2018

Узнай, как происходит создание макета сайта на бумаге и для чего нужен прототип сайта для стартапа. Алексей Дмитриев, графический дизайнер-универсал, в новом уроке «Базы знаний» Венчурного Акселератора подробно расскажет, как создать макет сайта на бумаге с нуля.

Алексей Дмитриев, графический дизайнер-универсал и арт-директор с 18-летним опытом. Свой первый сайт сделал в 14 лет.

Зачем сайт стартапу?

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

Где же место сайту? Все зависит от того, нужен ли вам сайт для привлечения клиентов (такие сайты чаще называют страницей приземления или по-английски — landing page); либо это основное место обслуживания клиента, как, допустим, какая-нибудь известная социальная сеть, интернет-магазин или интернет-банкинг.

Но в обоих случаях сайт, так же как и бизнес, имеет примерно такую же конструкцию: воронку (канал привлечения) и трубу, где сомневающиеся потенциальные клиенты при деньгах могут «слиться», если их не удастся убедить.

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

Схематическое отображение пути пользователя привычно называют картой сайта или User Flow («пользовательский поток»).

Зачем нужен прототип сайта на бумаге?

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

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

Это всё можно держать в голове, а можно перенести на бумагу, чтобы ничего не забыть и взглянуть на весь проект целиком. Чтобы выстроить большую систему, нужно схематично представлять её начало и конец, а затем её развивать.

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

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

Как визуализировать идею?

Давайте на примере сайта по заказу пиццы попробуем разобраться, что нам нужно сделать:

  1. Нужно определиться - кто твой желанный посетитель, кого мы обслуживаем.
    Скорее всего, это голодный человек, который хочет съесть пиццу. Это его потребность и предпочтение.
  2. Что нужно, чтобы он поскорее утолил свой голод? Попробуем поставить себя на его место. Представим, какие шаги нам нужно сделать. Убедиться, что я в нужном месте — на сайте можно заказать пиццу. Убедиться, что сайту можно доверять. Выбрать из меню пиццу. Ввести адрес доставки. Убедиться, что мой заказ правильный и его приняли. Ждать.
  3. Нарисовав несколько простых экранов, мы понимаем, что, пройдя по этому пути, клиент закажет пиццу. Всё, простейший прототип готов. Мы описали всю систему несколькими прямоугольниками.
  4. Теперь детализируем каждый экран. Представляем, что на нем должно быть, и рисуем.
  5. Можно приступать к тестированию на себе и на тех, кого можно отнести к нашей аудитории.

Тестирование помогает нам понять, где у нас на сайте проблемы. Тестирования прототипа на 5 людях достаточно, это выявляет 85% проблем этого прототипа.

Как структурировать мысли и не упустить ничего важного

Любая страничка и элемент на сайте должны отвечать на три навигационных вопроса:

  1. Где я нахожусь?
  2. Куда я могу кликнуть?
  3. Куда мне нажать, чтобы поскорее достичь цель?

Смысловой:

  1. Какую ценность я, как посетитель, получу?
  2. Какую боль посетителя затрагивает сайт?

Если это сложный сервис, то он должен отвечать на бизнес-вопросы:

  1. Могу ли я доверять?
  2. Чем это лучше конкурентов?
  3. Что по ценам? Какие есть тарифные планы?
  4. Какие есть ограничения для меня? Кого сайт не обслуживает?
  5. Как будет организована сделка?
  6. От чего посетитель будет получать удовольствие?
  7. Что будет принадлежать посетителю? Во что он будет вкладывать свое время и деньги?
  8. Как вы будете поддерживать то, что продали дальше?
  9. Почему и как посетитель будет рекомендовать вас своим знакомым?

Даже если на часть вопросов сайт не отвечает — будьте готовы ответить на них при личном контакте с посетителем.

Теперь рисуем: какие элементы нужны обязательно

Дизайн — это не красивая картинка, а деятельность по проектированию. Элементарный дизайн сайта отвечает на все навигационные вопросы, но к ним добавляется еще и смысл. Зачем это всё? Какая ценность этого всего?

Поэтому минимально необходимые элементы на сайте будут:

  1. Логотип, заголовок и описание — отвечает на вопрос где я?
  2. Описание в свою очередь должно содержать краткое изложение ценности для посетителя, затрагивать больной вопрос.

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

  1. Нужно явно указать ссылки, куда можно перейти, чтобы познакомиться подробнее с вашим бизнесом, если возникнут сомнения. Отвечают на вопрос «куда можно кликнуть?»
  1. Добавьте призыв к действию: «Позвоните нам и закажите пиццу». Отвечает на вопрос «Куда мне нажать, чтобы поскорее достичь цель?»

Какие есть программы для рисования

Существуют как платные, так и бесплатные программы и онлайн сервисы для прототипирования. Например, сервис Moqups позволяет бесплатно приступить к прототипированию. https://moqups.com/. А сервис Proto.io (https://proto.io/) позволяет делать анимированные прототипы и тестировать их на любых устройствах. Но эти сервисы требуют определенных усилий, чтобы изучить интерфейс.

Поэтому для начала нет ничего лучше карандаша и листка бумаги.

Когда нужно «набросать» сайт и сколько времени на это стоит потратить

«Набросать» сайт нужно в тех случаях, когда нужно проверить гипотезу. Время нужно минимизировать, оно должно быть достаточным для реализации минимально ценного продукта (MVP).

Типичные ошибки

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

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

Или пользователю не понятно, что черный жирный текст - это ссылки на которые можно кликнуть.

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

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