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

Прототип приложения или сайта за 5 шагов: создание и тестирование

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

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

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

Мы, студия NoCode/LowCode-разработки Zero To One, постарались подробно рассказать о том, что же такое прототип, как его создавать и как это делают у нас 🙂

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

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

Помимо этого прототип помогает:

В зависимости от инструментов, используемых при создании прототипа, можно выделить следующие его виды:

Ключевые характеристики lo-fi прототипа — наглядность и интерактивность. Он может быть выполнен с помощью карандаша в Paint или фреймов и фигур в Figma — неважно. Главное — он должен показывать алгоритм решения проблемы пользователя.

Один из прототипов нашей студии

При создании high-fidelity прототипа от точки А до точки Я прорабатывается логика взаимодействия элементов в каждом отдельно взятом сценарии, на каждую кнопку макета назначаются действия и кнопки демонстрируются во всех возможных состояниях, между собой связываются экраны приложения и т. д. Такой прототип должен давать полное представление о структуре сайта/приложения, навигации внутри них и решении всех возможных проблем пользователей.

Чаще всего все эти виды прототипов используются поочерёдно на различных стадиях разработки: всё начинается с бумажного наброска и приходит к high-fidelty прототипу.

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

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

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

Создание low-fi обычно занимает около 7-14 дней. После того, как черновик создан, нужно вновь обсудить всё с заказчиком и скорректировать имеющийся макет.

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

Плюсы тестирования — в следующем:

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

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

Есть более и менее удобные для прототипирования инструменты, специально созданные для него и универсальные. Здесь мы не откроем Америку, если скажем, что лучше всего для работы с прототипами подходят Figma, Sketch и InVision. Figma мы регулярно используем сами, а Sketch и InVision доверяют тысячи других команд.

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

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

Чтобы узнать о сроках, ценах и возможностях разработки больше — на сайте нашей студии ZeroToOne можно записаться на бесплатную консультацию. За полчаса обсудим ваш проект, поможем рассчитать сроки, стоимость и подобрать подходящие инструменты 🙂

Источник

Прототип сайта — как и для чего создавать!

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

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

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

ЧТО ТАКОЕ И ЗАЧЕМ? ЦЕЛИ СОЗДАНИЯ ПРОТОТИПА LANDING PAGE.

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

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

Объединение на одной странице данных по проекту и поэтапной разработки landing page.

Согласование на начальном этапе структуры продающегося ресурса, а также информационного контента.

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

Иногда прототипы создают для того, чтобы протестировать нишу ЦА, а также идею.

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

Существует несколько уровней создания прототипа сайта от простейшего до функционального с визуализацией в конструкторе.

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

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

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

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

В самодостаточном прототипе четко обозначены ключевые моменты:

1) Страница структурирована.

2) Грамотно составлены тексты.

Дизайнер четко понимает задачу и самостоятельно принимает решение по размещению блоков.

Неплохой сервис для лендинга – Adobe Muse, у него есть инструменты для детальной проработки страниц. В библиотеке собраны не только привычные элементы в виде квадратов, можно выбрать и более гибкие формы.

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

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

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

Вариант разработки лэндинга зависит от мощности проекта, его финансирования, поставленных сроков и целей. Для обычного landing page без тщательной проработки хватит прототипа со средней детализацией.

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

В него входит предварительная подготовка к проекту:

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

На какую аудиторию ориентирован лендинг, детальное определение ЦА с разбивкой по сегментам.

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

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

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

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

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

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

Необходимо не менее 20 участников, у которых уточняют, нравится ли им содержание текстов и УТП, а также как воспринимается специальное предложение или оффер.

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

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

При создании продающейся структуры прототипа, особое внимание уделяют следующим моментам.

На основе анализа ЦА определяют боли клиентов, закрывают возражения, учитывают особенности, составляют структуру прототипа, а также пишут тексты. Стиль написания – информационный, важно проверять удобочитаемость по специальным сайтам, например, в glvrd.ru.

Важно использовать сильные заголовки и подзаголовки. Для прототипа достаточно написания по методу 4U, существуют также другие формулы и приемы акцентирования внимания клиента одним заголовком.

При написании текстов используют психологические приемы и уловки.

Необходимо при помощи сильного текста, читателя превратить в покупателя. Для этого используют разные приемы, например, AIDA, сторителлинг.

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

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

Рассмотрим распространенные варианты для создания.

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

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

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

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

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

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

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

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

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

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

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

Такую работу могут выполнить:

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

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

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

— Можно заказать прототип сайта у фрилансера – здесь одно из двух, если откликнулся такой специалист, он либо сделает работу хорошо, либо не выполнит.

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

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

— Web-дизайнер – может оформить только простые проекты.

— Владелец бизнеса – при наличии опыта и времени может создать проект.

Идеальное звено для прототипирования:

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

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

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

— Статью прочитать несколько раз.

— Поискать в интернете дополнительные материалы, а также посмотреть видео на Ютуб.

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

— Выбрать удобный сервис для создания прототипа.

— Аккуратно, вдумчиво и последовательно создать прототип в конструкторе.

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

маркетинговое исследование рынка;

копирайтинг (сильные продающие текстовые блоки);

Важно! Первый прототип естественно будет с большими недочетами. Чтобы набить руку, одного прототипа недостаточно, необходимо выполнить минимум 5-7 работ, для нормального результата.

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

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

Проектирование прибыльных веб сайтов разнится в стоимости:

Обычный проект стоит от 10 000 рублей.

Многостраничник – 20 000 рублей.

Интернет-магазин – 30 000 рублей.

Проект повышенной сложности может стоить от 30 000 рублей.

Данные о стоимости актуальны на 2019 год.

На прототип выделяют до 30% от стоимости индивидуального проекта по созданию сайта. Например, для сайта стоимостью 100 00 рублей будет выделено 10 000 – 30 000 рублей.

Прототип – это основа проекта!

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

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

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

Важно! Сайт без прототипа лишен логической последовательности и структуры. Клиент теряется на экране, он сразу не сможет понять, в чем выгода данного продукта конкретно для него. Даже если текст в одном из блоков настроен на определение выгоды, это не сработает.

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

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

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

Источник

Прототипирование web-сайтов. Собирая воедино.

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

1) В сотый раз о пользе прототипирования (как части проектирования). Проблема.

2) Обзор методов, инструментов и исполнителей. Синяя или красная таблетка?

Результаты опроса «Как выглядит прототипирование в вашей компании?» проведённого на Хабрахабре.
что такое прототипирование сайта. Смотреть фото что такое прототипирование сайта. Смотреть картинку что такое прототипирование сайта. Картинка про что такое прототипирование сайта. Фото что такое прототипирование сайта
Рис.1
Я намеренно использовал радиобаттоны вместо чекбоксов, принуждая выбрать единственный вариант (предположив, что человек выберет наиболее частый вариант. Таким образом фильтруя случаи, когда какой-то из вариантов использовался единожды, а имел бы такой же вес, как и постоянно использующийся). Намеренно добавил провокационный вариант «На словах». Каким образом протототипирование может быть на словах? Результаты обсуждений должны быть зафиксированы, иначе что-то будет забыто, проигнорировано или не проверенно. Эффективность прототипирования на словах стремится к нулю. Популярность бумажных прототипов стало сюрпризом, как и набравшее 39 голосов вариант «Собственная разработка». Очень хотелось бы узнать подробности от тех, кто голосовал за этот вариант.
Дабы сравнить ситуацию с прототипированием у западных коллег привожу оформленные результаты опроса IxDA Discussion: What tools do you use for prototyping?(спасибо за ссылку Алексею Копылову)
что такое прототипирование сайта. Смотреть фото что такое прототипирование сайта. Смотреть картинку что такое прототипирование сайта. Картинка про что такое прототипирование сайта. Фото что такое прототипирование сайта
Рис.2

Также в дискуссии IxDA упоминались:
Whiteboard, Snapz Pro X, GUI Design Studio, LucidSpec, Multimedia Fusion, Intuitect and Jumpchart, SmartDraw, Microsoft Word, Inspiration, MockupScreens, Microsoft Excel, Microsoft Power Point, Sketchbook Pro, Omni Graffe, ACD Canvas, Oversite, Eight Media, Magnetic Web Widgets.

Расписывать каждый инструмент и способ я не буду, т.к. по приведённым далее ссылкам это сделано более подробно. Рассмотрим преимущества и недостатки популярных инструментов и способов прототипирования по следующим критериям:
Скорость создания прототипа – очень важный критерий. Очень хорошо, когда инструмент позволяет реализовать вашу мысль «эту кнопку поместим здесь» без всякого труда, не заставляя вас увязать в технологии, настройках и т.д.
Интерактивность – способность прототипа реагировать на действия пользователя и эмулировать реальные события. Подробно о преимуществах и особенностях интерактивных прототипов смотрите в статьях блога Юрия Ветрова «Интерактивные прототипы».
Детализация – способность отразить в прототипе всё до мелких деталей. Некоторые из перечисленных ниже инструментов подойдут только для низкоуровневого прототипирования на уровне набора блоков (”черных ящиков”).
Необходима повторная отрисовка – повторная прорисовка прототипа занимает дополнительное время
Доступность для всех участников проекта – доступность всем участникам проекта, таким как заказчик, руководство, разработчики, дизайнер – часто необходимое условие для создаваемого прототипа.
Возможность внесения изменений – польза прототипирования ещё и в том, что удаётся прояснить какие-то детали будущей системы, некоторые моменты обсуждаются и выясняются в ходе работы. Прототип должен обновляться вместе с проектными артефактами, поэтому возможность внесения изменений – ещё один важный критерий.

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

Бумажное прототипирование

что такое прототипирование сайта. Смотреть фото что такое прототипирование сайта. Смотреть картинку что такое прототипирование сайта. Картинка про что такое прототипирование сайта. Фото что такое прототипирование сайта
Скорость создания прототипа: высокая
Интерактивность: отсутствует
Детализация: высокая
Необходима повторная отрисовка: да
Доступность для всех участников проекта: ограниченная
Возможность внесения изменений: не возможно

Прототипирование с помощью доски

что такое прототипирование сайта. Смотреть фото что такое прототипирование сайта. Смотреть картинку что такое прототипирование сайта. Картинка про что такое прототипирование сайта. Фото что такое прототипирование сайта
Вы можете сделать такое и сами! В продаже имеется бумага с магнитной поверхностью. Распечатать стенсилы для проектирования можно прямо на офисном принтере, только обязательно проверьте, поддерживает ли ваш принтер печать на бумаге такого типа.
Скорость создания прототипа: средняя
Интерактивность: отсутствует
Детализация: средняя
Необходима повторная отрисовка: да
Доступность для всех участников проекта: ограниченная
Возможность внесения изменений: возможно с ограниченьями

Axure Pro

что такое прототипирование сайта. Смотреть фото что такое прототипирование сайта. Смотреть картинку что такое прототипирование сайта. Картинка про что такое прототипирование сайта. Фото что такое прототипирование сайта
Скорость создания прототипа: высокая
Интерактивность: средняя
Детализация: высокая
Необходима повторная отрисовка: нет
Доступность для всех участников проекта: полная
Возможность внесения изменений: возможно без ограничений

InDesign

что такое прототипирование сайта. Смотреть фото что такое прототипирование сайта. Смотреть картинку что такое прототипирование сайта. Картинка про что такое прототипирование сайта. Фото что такое прототипирование сайта
Скорость создания прототипа: средняя
Интерактивность: низкая
Детализация: высокая
Необходима повторная отрисовка: нет
Доступность для всех участников проекта: полная
Возможность внесения изменений: возможно без ограничений

Visio

что такое прототипирование сайта. Смотреть фото что такое прототипирование сайта. Смотреть картинку что такое прототипирование сайта. Картинка про что такое прототипирование сайта. Фото что такое прототипирование сайта
Скорость создания прототипа: высокая
Интерактивность: низкая
Детализация: высокая
Необходима повторная отрисовка: нет
Доступность для всех участников проекта: полная
Возможность внесения изменений: возможно без ограничений

Программы из пакета Office

что такое прототипирование сайта. Смотреть фото что такое прототипирование сайта. Смотреть картинку что такое прототипирование сайта. Картинка про что такое прототипирование сайта. Фото что такое прототипирование сайта
Скорость создания прототипа: средняя
Интерактивность: низкая
Детализация: низкая
Необходима повторная отрисовка: да
Доступность для всех участников проекта: полная
Возможность внесения изменений: возможно с ограниченьями

Больше информации о инструментах вы можете получить из статей: gulevichМаксима Гулевича «Обзор инструментов для UI-дизайнера и Информационного архитектора», Александра Сергеева (HumanoIT) о использовании Axure Pro, Влада Головача (Usethics) о прототипировании интерфейсов в InDesign, Юрия Ветрова (Artics) о wirefram’ах выполненных в Visio и даже динамике web 2.0 в них
Перейдём к результатам голосования об исполнителях.
что такое прототипирование сайта. Смотреть фото что такое прототипирование сайта. Смотреть картинку что такое прототипирование сайта. Картинка про что такое прототипирование сайта. Фото что такое прототипирование сайта
Рис.3
Даже если отбросить последний, самый популярный результат, получается, что процесс прототипирования выполняется участниками проекта не специализирующимся на вопросах проектирования и юзабилити.

(Потребность 3. Учитывать невысокий уровень знаний и опыта у человека выполняющего прототипирование)

Результаты голосования об удовлётворённости текущей ситуацией.
что такое прототипирование сайта. Смотреть фото что такое прототипирование сайта. Смотреть картинку что такое прототипирование сайта. Картинка про что такое прототипирование сайта. Фото что такое прототипирование сайта
Рис.4
Вполне ожидаемый вывод о том, что текущая ситуация с прототипированием в проектах не удовлетворительная (по сумме двух нет).

(Потребность 4. Веские и достаточные аргументы в пользу прототипирования. Выгода должна выражаться цифрами)

При всём многообразии существующих средств для прототипирования, во многих проектах и компаниях оно до сих пор не выполняется (см. рис.3). Компании, выполняющей проекты, действительно сложно ответить на вопрос: «А зачем нам необходимы нововведения и инвестиции в качество (проектирование, юзабилити и т.д.), если и так всё работает и приносит прибыль?». Внедрение прототипирования в таких компаниях может произойти только при полном понимании руководством значения качества. Качества, как части корпоративной культуры, как ценности для каждого сотрудника (То же чувство прививают родители маленьким детям, которые утром капризничают и не хотят умываться, объясняя, что умываются они, прежде всего для себя, а не для кого-то). Поиском ответа на поставленный выше вопрос о необходимости инвестиций занимаются как российские так и зарубежные юзабилисты.

Гораздо осознаннее к внедрению прототипирования относятся компании, занимающиеся выпуском продуктов. Они уже ощутили пользу от проектирования и прототипирования (возможно, методом проб и ошибок). В отличие от первой группы, для них юзабилити продукта, проектирование пользовательского интерфейса и прототипирование – уже не призрачная перспектива. Для них это реальный способ снизить риски, повысить качество продукта и увеличить лояльность пользователей (т.е. покупателей) к своему продукту. Однако не все из них готовы обратиться к профессиональным компаниям, создать отдел или воспитать (нанять) специалиста, предпочитая функцию проектирования и прототипирования закреплять за менеджером проекта, тим лидером и т.д. (см. рис. 3).
По подобию того, как Якоб Нильсен когда-то создавал список уровней готовности компаний к внедрению юзабилити, kremienГеннадий Драгун составил список уровней этого внедрения:
Уровень 0: О юзабилити только где-то слышали или вообще не слышали
Уровень 1: Использование базовых юзабилити методов тестирования (контрольные списки, простейшая инспекция, проверка доступности)
Уровень 2: Уровень 1 + внедрение проектирования интерфейсов и их графического дизайна
Уровень 3: Уровень 2 + простейшее “партизанское” пользовательское тестирование, исследование пользователей
Уровень 4: Создание собственного юзабилити отдела — юзабилити лаборатории.

Прототипирование в компаниях, где уровень внедрения редко превышает первый, обычно происходит так: Вновь прибывшему менеджеру (тим лиду и т.д. часто не знакомому ранее с юзабилити) ставят задачу – «создать прототип проекта». Спасибо Google, менеджер находит, допустим, эту статью. Видит описанные инструменты и методы. Но они только покрывают потребность в инструменте, отвечая на вопрос: «Как?». Они не дают ответа на вопрос: «Что?», уже предполагая наличие соответствующих знаний у пользователя программы. По результатам голосований попробую предположить, что число компаний с уровнем внедрения не превышающих уровень 1 большинство.
Статьи по теме:
Проектирование интерфейса как часть разработки ТЗ
Проектирование пользовательских интерфейсов. Краткий обзор процесса
Интерактивные прототипы. Действующая модель пользовательского интерфейса (Часть1, Часть 2,
Часть 3)

Бонус:
Стенсилы для Visio и аналогичные на GUUII
Стенсилы для InDesign от студии Usethics
Axure Pro. Продукт платный, но от всевидящего ока Google разве можно что-то спрятать? Морально-этическую сторону использования keygen определите для себя сами. Результаты поиска.

3) Выбираем красную таблетку. Реальные потребности или добро пожаловать в реальный мир.

Для получения положительного результата от внедрения прототипирования необходимо, чтобы оно удовлетворяло следующие потребности:
1. Автоматизировало типовые решения, давая возможность для творчества.
2. Позволяло создавать интерактивные, детализированные прототипы, доступные всем участникам проекта с возможностью вносить изменения.
3. Учитывать невысокий уровень знаний и опыта у человека выполняющего прототипирование.
4. Веские и достаточные аргументы в пользу прототипирования. Выгода должна выражаться цифрами.

Я разработал инструмент прототипирования и некоторую методику по внедрению удовлетворяющие эти потребности. В ближайшее время я планирую представить этот проект в лучшем виде на блоге. У вас будет возможность скачать и использовать этот инструмент бесплатно. А пока я предлагаю вам следить за новостями по RSS

Источник

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *