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

Проектирование интерфейсов, прототипирование, создание UI, UX

53прототипа больших проектов
9прототипов SAAS и личных кабинетов
200часов на разработку большого прототипа
Подробнее
Награды 6 наград 4 номинации в UI/UX
рейтинги Рейтинг Evergreen — ITRating Рейтинг Evergreen — CMSMagazine Рейтинг Evergreen — WRate.net

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

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

Пример прототипа

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

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

Часто встречаются два понятия: прототип и мокап(mockup). В чем разница написано ниже

Прототип

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

Прототип

Посмотрите пример прототипа

Посмотреть

Мокап (mockup)

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

Мокап (mockup)

Посмотрите пример мокапа

Посмотреть

Почему у Evergreen получаются качественные прототипы

slogan-img

Листайте, чтобы увидеть остальные причины

  1. Мы не делаем прототип "вслепую" - до начала проекта мы анализируем конкурентов, продукт, аналоги и выделяем главные сильны стороны и то от чего мы должны отстроиться
  2. На этапе прототипирования над проектом работает команда, которая детально прорабатывает портреты пользователей, разрабатывает карту поведения пользователя на проекте и ищет оптимальные способы реализации задач пользователя
  3. Под запросы на разработку соверешнно новой концепции сайта с акцентом на удобстве для пользователей у нас есть отработанный техпроцесс проектирования user experience чтобы был такой внешний вид, который помогает посетителям совершать целевые действия: запросы, покупки, звонки и т.п.
  4. Мы обязательно проектируем интерфейс на все устройства с которыми будут работать пользователи (телефон, планшет, ПК, широкоформатный монитор) и адаптивная версия входит в стоимость проекта
  5. Мы максимально используем свой опыт, полученный на множестве проектов, для того чтобы предложить лучшие решения для проекта;
  6. Фактически на всех этапах мы создаем единую рабочую группу с вами, которая совместно принимает самые важные решения, вовлекая пользователей проекта и разработку, что позволяет увеличить количество и качество новых идей и создать лучший прототип;
  7. Мы следуем лучшим практиками (создание user stories, мокапов, прототипа, ui-kit, требований к front-end и сама разработка, контроль качества и управление проектом) и повышаем уровень стандартов в работе над проектом, обеспечиваем надежный результат, который сможет служить компании годы без устаревания
  8. Наш формат работы предполагает, что мы находим решения для вашей задачи, а не выступаем как "руки" - таким образом ваше внимание нам нужно для утверждения решений и того чтобы указать на ключевые точки в вашей специфике, всё необходимое для выработки решения мы делаем сами и это экономит ваше время
  1. Мы не делаем прототип "вслепую" - до начала проекта мы анализируем конкурентов, продукт, аналоги и выделяем главные сильны стороны и то от чего мы должны отстроиться
  2. На этапе прототипирования над проектом работает команда, которая детально прорабатывает портреты пользователей, разрабатывает карту поведения пользователя на проекте и ищет оптимальные способы реализации задач пользователя
  3. Под запросы на разработку соверешнно новой концепции сайта с акцентом на удобстве для пользователей у нас есть отработанный техпроцесс проектирования user experience чтобы был такой внешний вид, который помогает посетителям совершать целевые действия: запросы, покупки, звонки и т.п.
  4. Мы обязательно проектируем интерфейс на все устройства с которыми будут работать пользователи (телефон, планшет, ПК, широкоформатный монитор) и адаптивная версия входит в стоимость проекта
  5. Мы максимально используем свой опыт, полученный на множестве проектов, для того чтобы предложить лучшие решения для проекта;
  6. Фактически на всех этапах мы создаем единую рабочую группу с вами, которая совместно принимает самые важные решения, вовлекая пользователей проекта и разработку, что позволяет увеличить количество и качество новых идей и создать лучший прототип;
  7. Мы следуем лучшим практиками (создание user stories, мокапов, прототипа, ui-kit, требований к front-end и сама разработка, контроль качества и управление проектом) и повышаем уровень стандартов в работе над проектом, обеспечиваем надежный результат, который сможет служить компании годы без устаревания
  8. Наш формат работы предполагает, что мы находим решения для вашей задачи, а не выступаем как "руки" - таким образом ваше внимание нам нужно для утверждения решений и того чтобы указать на ключевые точки в вашей специфике, всё необходимое для выработки решения мы делаем сами и это экономит ваше время

Аналитика, выявление потребностей и постановка требований при разработке прототипа

Процесс начинается с анализа и постановки требований

Первичный анализ конкурентов, юзабилити аудит, анализ данных Google Analytics и Яндекс.Метрики ресурса.

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

На этом этапе мы даем конкретные рекомендации для проекта которые мы дальше реализуем в прототипе

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

Создание опросника – учитываем пожелания существующих и потенциальных пользователей

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

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

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

Разработка персон

Персона - это портрет пользователя, который помогает персонализировать целевой рынок клиента. Цель создания персон - понять для кого мы делаем сайт и сделать его лучшим для пользователя.

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

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

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

Разработка User Stories, User Flow

User Story – подробный список того что пользователь может делать на сайте, User Flow – ожидаемый алгоритм действия пользователя.

Разработка KPI для прототипа

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

Результаты этапа аналитики

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

Создание прототипа, архитектуры проекта и формирование спецификации

Обычно для больших и средних проектов мы придерживаемся такой последовательности:

  • Проектирование интерфейса в мокапах - по нашему опыту, для больших проектов составляет 8-10 итераций прототипирования. Здесь процесс строится таким образом, что на начальных итерациях мы работаем с очень грубыми набросками и последовательно улучшаем и уточняем с каждым следующим подходом
  • После разработки мокапов мы делаем детальное прототипирование нескольких выбранных разделов - высокая детализация всех элементов с учетом динамических форм, адаптивного дизайна под разные разрешения экрана.
  • Фиксация и проектирование структур данных для front-end (какие данные на каких страницах мокапа используются, контроль, что мы не сделали что-то нереализуемое или алогичное, и учли все особенности);
  • Проектирование архитектуры front-end - схема обмена данными с back-end (описание и согласование с разработкой куда конкретно на какие узлы бэкенда фронт передает данные), набросок архитектуры front-end (что храним в local storage, что запрашиваем у сервера, структура классов и модулей front-end);
  • R&D front-end разработки всех сложных и неизвестных моментов (нужно на случай, если по итогам проектирования потребуется использовать необычный тех.стек или незнакомые компоненты);

QA и тестирование прототипа

Как мы проверяем качество протипа и проверяем достижение поставленных целей

Quality Assuarance (QA) прототипа

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

Тестирование на пользователях, usability аудит

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

С помощью полученных от тестирования данных, мы можем ответить на вопрос: “Смогли ли мы достичь поставленной нам цели?”

Тестирование проекта после запуска

После сдачи проекта клиенту, мы на сайтах или веб-проектах отслеживаем поведение пользователей с помощью Яндекс.Метрики (вебвизор, карты скролов, кликов) и Google Analytics (анализируем поведенческие отчеты GA), мы это делаем для того чтобы убедиться в том, что наша задумка на проект работает.

Вы хотите разработать новый сайт или сервис?

Расскажите нам, какой проект вы хотели бы создавать или развивать. Чувствуйте себя свободно - мы рады проконсультировать по любому профессиональному вопросу и сделаем это абсолютно бесплатно, просто позвоните нам или заполните форму.