Что такое прототип интерфейса

Что такое прототип сайта

Прототип сайта, он же каркас (англ. Wireframe (Website wireframe)) — это схематическое изображение одной или нескольких страниц веб-сайта, на которых отображается структурное расположение элементов интерфейса.

Как правило, прототип для сайта содержит следующие компоненты:

• Кнопки
• Лид-формы
• Меню сайта
• Слайдеры
• Тизеры

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

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

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

Виды прототипов сайта

Текстовый прототип

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

Однако гарантии того, что вы с разработчиком будете «на одной волне» никто не даст, поэтому часто текстовый прототип является «предшественником» основного прототипа, а не законченным продуктом.

• Быстрое создание
• Простота в разработке
• Базовая оценка объема работ
• Не требует специальных программ и навыков (можно писать прямо в блокноте)

• Недостаточная информативность
• Невозможно проработать поведенческие сценарии
• Нельзя оценить сложность интерфейса

Скетч или прототипирование на бумаге

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

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

• Быстрая разработка
• Масштабируемость
• Легкость при внесении изменений

• Необходимость рисовать с 0 при внесении правок в структуру.
• Отсутствие интерактивности
• «Любительский» внешний вид

Графический прототип с низкой детализацией

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

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

Графический прототип с высокой детализацией

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

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

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

Статический и интерактивный прототип

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

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

Фактически, это выглядит как готовый функционирующий ресурс.

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

Зачем разрабатывать прототипы сайта перед его созданием?

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

Приложения и программы для создания прототипа сайта

Сейчас есть множество как платных, так и бесплатных сервисов, которые позволяют нарисовать прототип сайта онлайн.

Среди них стоит выделить:

• Axure RP
• Figma
• Marvell app
• InVision
• Moqups
  И другие.

Разбор UI/UX на примере прототипа в Figma и основные принципы

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

В сети интернет масса материалов на эту тему, но в большинстве своем они или слишком поверхностны, либо требуют знания терминологии и опыта работы с конкретной системой для создания прототипов. Не претендуя на «создание золота», я все же надеюсь, что моя статья будет полезна и интересна желающим погрузиться в славный мир создания макетов с помощью современных средств, а не путем создания рисунков в Paint, Word или Excel. То есть, эта статья для «чайников» в части создания рабочих прототипов.

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

Вместо введения

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

Как это сделать? Написать на бумажке – можно и нужно, но что поймет пользователь по итогам прочитанного и будет ли потом удобно разработчику реализовывать систему? Решение давно придумано – создать сначала макет, а потом рабочий прототип. Пусть макет будет «деревянным», а в прототипе будут только «открываться двери», но уже на этом шаге заказчик сможет «пощупать» свой продукт и своевременно внести замечания.

То что написано выше относится к любому виду продукта, как физическому, так и электронному. Далее мы будем говорить о прототипах в сфере ИТ (сайты, приложения, корпоративные информационные системы и т.д.), определим, что такое UI и UX, какием критериям должен отвечать прототип в продуктовой разработке, рассмотрим некоторые особенности среды для создания прототипов Figma.

Что такое прототип ИТ продукта? Каким он должен быть?

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

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

Основные принципы прототипирования:

1. Прототип создается только после того как определена целевая аудитория, маркетинговая стратегия, каналы сбыта.
2. В прототипе должны быть учтены основные пользовательские сценарии. При тестировании хорошей идеей является озвучить задачу и отойти подальше от пользователя. Если у последнего в ходе использования прототипа возникают множественные вопросы, то это означает, что необходимо пересмотреть и переработать сценарии использования.
3. Прототип является интерактивной моделью, так как он направлен на проверку возможных действия пользователя, а не на согласование картинки.
4. В основе любого прототипа должна лежать гипотеза, которую необходимо проверить. Необходимо сформулируйте гипотезу так, чтобы на нее можно было четко ответить «да» или «нет» и прописать, как именно прототип даст вам ответ на этот вопрос.
5. При тестировании прототипа необходимо давать минимум информации потенциальному пользователю. Причина проста – чем больше он «наломает дров», тем лучше для продукта, так надо тестировать, а не валидировать сценарии.
6. Проверять все, даже если есть уверенность в том или ином функционале будущего продукта.
7. Дизайн прототипа должен быть максимально лаконичным без отвлекающих внимание пользователя ярких картинок, цветовых акцентов или перечеркнутых квадратов. Конечно, если они не являются частью проверяемой гипотезы. В этом случае, есть риск того, что пользователь зациклится на наполнении визуального интерфейса.
8. Если есть возможность сделать прототип похожим на реальность, то именно так и стоит сделать.
9. При тестировании необходимо просить пользователя проговаривать вслух все мысли и действия и вести видеозапись самого процесса тестирования.

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

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

Что такое UI/UX?

UX/UI дизайн существует с незапамятных времен и относится не только к приложениям и сайтам. Просто раньше он назывался по-другому. Например, швейная машинка Зингер. Ведь кто-то еще в 19м веке придумал, как она должна выглядеть и как ей пользоваться. При этом в основе лежала цель, которую должен достигнуть пользователь – сшить что-то быстро, красиво и качественно.

Так, что же представляют собой UI и UX дизайн?

UI — расшифровывается как user interface и переводится «пользовательский интерфейс». Под этим термином обычно понимают визуализацию экранных форм и интерфейсов. UI – это про графический дизайн. UI-дизайнер работает с цветами, композицией, анимацией, шрифтами. На основе черновых схематичных набросков (вайрфреймов) UI-дизайнер собирает финальный дизайн-макет.

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

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

Связь прототипа и UX/UI дизайна

Является ли прототип информационной системы UX/UI дизайном? На мой взгляд, является.
Является ли UI/UX дизайн прототипом? Да, но только в случае, если бизнес логика наложена на интерфейс пользователя тем или иным способом. Если пользовательский опыт описан где-то на бумажке и его невозможно продемонстрировать клиенту на интерфейсе, то у нас есть отдельно UI и UX дизайны, но прототип отсутствует.

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

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

Но, что будет, если убрать экспериментатора и оставить пользователя наедине с листами бумаги? Останется UX/UI дизайн, а прототип работать не будет. А значит, будет невозможно протестировать логику работы системы.

Инструменты для создания динамических прототипов

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

Далее в качестве иллюстрации создания прототипа рассмотрим пример создания личной страницы в Figma.

Что такое Figma?

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

Плюсы и минусы Figma

К плюсам работы в Figma можно отнести:

1. Бесплатна в случае, если над проектом работают не более 2х пользователей.
2. Создание и отрисовка макета в одной программе
3. Существует огромное количество уже готовых шаблонов сайтов
4. Для работы с Figma требуется свежая версия браузера, а десктопная версия не требует мощного и современного компьютера.
5. Сохранение версий проекта до 30 дней на бесплатной версии

1. Отсутствие русификации. Работать в Figma приходится на английском языке.
2. Хотя Figma работает оффлайн, но чтобы коллеги увидели внесенные изменения потребуется синхронизация с облаком.

Пример создания простейшего прототипа в Figma

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

Шаг 1. Регистрация

Не обязательно регистрировать отдельный аккаунт в Figma. Если у Вас есть Google-почта, то можно зайти в сервис с ее помощью. При первичном открытии Figma сразу предложит пройти краткое обучение работы с программой.

Шаг 2. Создание проекта

Для создания нового проекта достаточно нажать «+» в правом верхнем углу экран. Там же можно открыть один из ранее загруженных шаблонов.

Шаг 3. Создание рабочей области страницы

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

Но сейчас речь не об адаптивном дизайне, а о том, что создавая рабочую область, мы по факту создаем основу интерфейса будущего прототипа, и пользователь на выбранном типе устройства будет видеть наш макет так, как он выглядит в Figma. Отдельно отмечу, что в Figma рабочая область сайта называется фреймом.

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

Шаг 4. Добавление картинки

В Figma очень легко добавлять и обрезать картинки под любые формы. Для этого достаточно добавить на рабочую область нужные фигуру и изображение, выделить оба объекта с помощью сочетания клавиш ctrl и нажать сочетание ctrl+alt+M. При этом важно, чтобы картинка была выше фигуры. Выделять фигуры можно как на рабочей области, так и на панели слева, щелкая на их названия.

Шаг 5. Добавление текстового поля

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

Шаг 6. Создание меню

В данной статье я не преследую научить читателя всем аспектам работы с Figma, поэтому меню у нас будет самое простое – двухкнопочное. Кнопки представляют собой прямоугольники, объединенные с текстовым полем. Можно объединить объекты в группу, нажав CTRL+G, а потом отцентрировать текстовое поле по центру будущих кнопок.

Шаг 7. Дублирование основы страницы

В основание страницы входит: рабочая область, меню и текстовое поле. Чтобы создать копию ее копию можно вынести маску изображения вне группы объектов первой страницы. Для этого достаточно левой кнопкой мыши нажать на название маски и перетащить иконку вверх. Затем в перечне объектов выбрать группу объектов, входящих в основание первой страницы, и нажать CTRL+D.

Шаг 8. Добавление внешних ссылок

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

Шаг 9. Добавление ссылок между страницами

Добавление ссылок на объекты внутри Figma аналогично добавлению ссылок на внешние источники за исключением того, что надо где-то взять ссылку на внутренний объект. Для этого надо кликнуть правой кнопкой мыши по объекту и выбрать в выпадающем меню Copy/Paste и Copy Link.

Шаг 10. Демонстрация прототипа

Последний шаг – демонстрация прототипа заказчику. Самое простое – нажать кнопку «Share» в правом верхнем углу экрана и во всплывающем окне выбрать «Сopy Link».

Результат

Вы можете просмотреть и прокликать выполненный прототип, пройдя по ссылке.

Видеоуроки по реализации прототипов в FIGMA

В качестве заключения хочу приложить ссылку на видеоуроки, созданные телеграмм-каналом «Наука и дизайн». Всего 2,5 часа в 15ти уроках по использованию FIGMA, в которых рассмотрены все основные функции и кнопки.

Еще хороший ресурс с видеоуроками по созданию прототипов в Figma.

• прототипирование
• figma
• дизайн интерфейсов
• дизайн сайтов
• новичкам
• прототипирование интерфейсов
• ui/ux

• Дизайн мобильных приложений
• Прототипирование
• Управление продуктом
• Дизайн

Интерактивный прототип

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

Какие прототипы бывают?

Прототипы бывают высоко детализированными (high fidelity prototype), то есть максимально приближенными к реальному продукту: все элементы выглядят как на реальном сайте, реагируют на действия пользователей.

Низко детализированные прототипы (low fidelity prototype) показывают основные блоки страниц, реализуют основной (магистральный) сценарий без каких-либо ответвлений.

Зачем это нужно?

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

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

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

Как вы это делаете?

Если у вас есть отрисованные макеты страниц, то их можно «склеить» в Invision или Marvel для быстрого тестирования. При разработке прототипа с нуля чаще используются специальные инструменты, например, Axure, Framer, Principle и т.д.

Прототип: что это и зачем он нужен?

Зачастую люди (и клиенты и пользователи) не понимают, чем же на самом деле является прототип, и ожидают от него совсем не то, что видят в итоге.

Прототип – это не…

Прототип — это не конечный продукт. Не ожидайте, чтобы он выглядел, как конечный продукт!

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

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

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

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

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

Как создаются прототипы?

Есть два типа прототипов: сделанные на бумаге и кликабельные. Каждый из них имеет свой собственный набор преимуществ и недостатков.

Прототипы на бумаге

Основным преимуществом бумажных прототипов (для того, кто их создает) является возможность использовать те же карандашные наброски, с которых начинался процесс проектирования. Такие прототипы могут включать наброски, отображающие различные состояния экранов, карточки с выпадающими меню, стикеры, изображающие модальные окна. Проектировщик может стирать ненужное и быстро вносить изменения, основанные на пользовательских ожиданиях и комментариях.

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

Кликабельный прототип

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

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

Прототипы важны

«Люди не читают продукты, они взаимодействуют с ними.»

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

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

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

Важно запомнить!

Прототип — это не конечный продукт. Не ожидайте, чтобы он выглядел, как конечный продукт.