что такое прототипирование сайта
Прототип сайта: что это такое и зачем он нужен
Работу над сайтом обычно начинают с макета: обсуждают цели и задачи, а затем продумывают структуру и оформляют прототип. Примитивный макет можно нарисовать на салфетке. Но чем сложнее задача и ответственнее проект, тем выше требования к прототипу.
У нас за плечами несколько своих проектов, над которыми работали целые команды. Скажем честно: макет на салфетке — дурь. Чтобы сделать нормальный прототип, мы используем специальные онлайн-инструменты и сервисы. О них мы сделаем подробный обзор в декабре. А сегодня начнем с основ: рассказываем, что такое прототип сайта и как начать над ним работу.
Что такое прототип сайта
Прототип сайта — это макет, черновик, схема если хотите. Он помогает схематически визуализировать основные элементы и функции вашего будущего портала. Вы наглядно изображаете структуру, элементы интерфейса, расположение иллюстраций и кнопок, меню и иконок. Рисуете черновки, по которому разработчики и дизайнеры будут создавать готовый продукт.
Прототип — это изображение результата. Прототипы могут отличаться по уровню детализации. Они могут быть нарисованы на 2–3 страницах А4 или иметь полноценную разветвленную структуру в Фигме с кликабельными элементами. Как бы не выглядел прототип, его задача — изобразить итоговый результат, который хочет увидеть заказчик и должен воплотить в жизнь исполнитель.
Вот так может выглядеть прототип страницы, нарисованный на бумаге. Его сложно править, добавлять или убирать элементы. Зато на его основе можно быстро собрать цифровой макет. Подойдет для начала работы над сайтом.
А вот цифровой прототип, нарисованный в программе. Он уже больше похож на сайт. Его элементы легко менять между собой, корректировать концепцию и проверять юзабилити. По такому прототипу разработчик будет делать сайт.
Зачем прототип заказчику
Будущий владелец сайта с помощью прототипа решает сразу несколько задач:
Отсутствие представления о том, как должен выглядеть сайт — нормальная ситуация для заказчика. Обычно у него есть задача: «хочу продавать через интернет». А ко всем остальным моментам, включая внешний вид сайта, применяется мерило «нравится/не нравится». Часто из-за этого члены команды конфликтуют. Прототип поможет устранить разногласия и прийти к единому видению на старте.
Другой момент — бюджет. На этапе прототипирования можно моделировать разные наборы функций и элементов, выбрать наиболее удачные и так оптимизировать расходы на разработку. Верстальщику не придется несколько раз переделывать результат, заказчик сэкономит на разработке.
Зачем прототип команде разработчиков
С прототипом работать проще и продуктивнее:
Прототип — часть технического задания. Разработчик может быть гуру верстки сайтов, но какой от этого смысл, если ТЗ составлено устно? Макет — схематическая визуализация технического задания. Утвержденный макет гарантирует, что заказчик не изменит резко своих требований. А если изменит, всегда можно показать ему макет и доказать свою правоту.
Какие бывают прототипы сайтов
Разные. Вы можете нарисовать примитивный эскиз на салфетке, а можете — интерактивный макет с высокой детализацией проработки и кликабельными элементами. Объем работы над прототипом зависит только от сложности проекта и бюджета. Чем сложнее и дороже сайт, тем детальнее и объемнее должен быть рабочий вариант макета.
Эскиз на бумаге
Подойдет «на берегу», чтобы найти наиболее удачную конструкцию. Берете карандаш, лист А4 и делаете схематичную разметку блоков. Вы сможете найти удачную компоновку элементов и создать общее видение без лишних деталей. Можно увидеть общую картину и нарисовать целую карту сайта. Размещайте на таком эскизе только ценные элементы, а детали опускайте.
Примерный набросок интерфейса сайта, эскиз с отображением переходов. Такой макет подойдет для старта работы и общего представления архитектуры.
Макет с низкой детализацией
Такой прототип страницы сайта еще называют LoFi Wireframe. Его рисуют на основе примерного эскиза. Помогает упаковать идею в цифровой документ и согласовать примерный объем работ.
На этом этапе прорабатывают общие моменты: размеры и пропорции блоков, разметку, структуру и каркас. Каждый участник процесса разработки дает свои замечания, выдвигает гипотезы и идеи для развития. Обычно макет с низкой детализацией не содержит контента — это страница с примерным представлением блоков в виде геометрических фигур. Простейший цифровой прототип выглядит вот так.
Макет с низкой детализацией. Глубина проработки на этом этапе не так важна, как общая структура и каркас.
Макет с высокой детализацией
Когда примерная структура готова, начинают работать с содержанием: текстами, иллюстрациями, описаниями и подписями, иконками и фотографиями. Контент формирует основной посыл и помогает расставить акценты, донести до аудитории ценное сообщение бизнеса. Текст должен давать объяснение, иллюстрации — формировать образы, а общая картинка — создавать историю.
Над детализацией и глубиной проработки обычно работает команда: дизайнер, иллюстратор, копирайтер, фотограф (для интернет-магазинов и продуктовых сайтов). С таким прототипом проще организовать командную работу, когда у каждого участника своя функциональная задача.
Страница прототипа с высокой глубиной проработки. Есть описания, заголовки, характеристики продукта, изображение иконок, тексты кнопок, примеры отзывов. Уже похоже на полноценную страницу сайта.
Статичный макет
Это прототип в виде графического изображения. Возможность взаимодействия с таким макетом отсутствует, элементы не кликабельные. По сути, это просто картинка, как бы скриншот будущего сайта. Сначала черновик разрабатывают статичным, чтобы оптимизировать ресурсы на разработку. Дизайнер просто рисует шаблон, который будет размножен и перенесен на остальные страницы. Делать сходу интерактивный прототип нет смысла — потому что примерно в 100% случаев будут доработки. А проще перерисовать все в фотошопе, чем переделывать интерактивные элементы.
Статичный макет с детализацией. Кликнуть по элементам не получится, потому что по сути это картинка, а не сайт.
Интерактивный макет
Или Interactive Hi-Fi. Когда есть визуальное представление и часть контента, беруться за проработку поведенческих моментов. Дизайнер смотрит, как отображаются анимации, визуальные эффекты, как работают переходы и слайдеры, как ведут себя элементы сайта при взаимодействии, как всплывают формы и фильтры, как кнопки реагируют на пользовательские действия на разных гаджетах.
По сути, это уже рабочий вариант сайта. Только прототип. Он помогает зафиналить дизайн перед запуском веб-разработки, проработать детали, упростить тестирование и согласовать окончательный результат. С таким макетом можно взаимодействовать и даже вставлять кликабельные ссылки. Interactive Hi-Fi создают при разработке сложных сайтов, когда выделен серьезный бюджет и нужен безупречный результат с минимальным количеством косяков.
Интерактивный прототип похож на рабочий сайт. Можно кликнуть по каждому или почти по каждому элементу и проверить, как он реагирует. Будущий сайт будет выглядеть именно так. Интерактивный макет позволяет зафиналить концепцию и приступить к веб-разработке.
Процесс разработки хорошего прототипа
Прототип сайта — результат взаимодействия целой команды, которая не раз собирается, не раз вносит правки и много, иногда очень много работает. Бывает, что создание хорошего прототипа занимает больше времени, чем остальная разработка.
Ниже мы собрали ключевые шаги — как ориентир. Каждый из них достоин отдельного материала, есть о чем рассказать и чем поделиться. Используйте эти этапы как ориентир для своих будущих проектов. Это не руководство к действию, а краткое описание нашего опыта. Попробуйте перенести его на свою команду.
1. Обсуждение и постановка целей
Все начинается с постановки целей. Команда собирается и обсуждает цели будущего продукта. Допустимы размытые формулировки, но их лучше избегать. Чем яснее и конкретнее будут сформулированы цели, тем грамотнее будут гипотезы, которые вы будете формулировать.
Обсудите, чего вы хотите добиться с помощью сайта и какие инструменты в этом помогут. У бизнес-ресурса может быть разный набор целей, он зависит от специфики предпринимательской деятельности. От этого зависит и профиль портала. Например:
2. Формирование гипотез
Когда есть цели и примерное понимание того, какой ресурс нужен, мы выдвигаем гипотезы. Это предположения, которые мы будем проверять с помощью сайта. От гипотез обычно отталкиваются при формировании структуры. короче: определитесь, что именно вы будете проверять с помощью сайта и используйте эти гипотезы при прототипировании.
Допустим, мы собираемся продавать на сайте ноутбуки. Мы предполагаем, что фильтр, который будет подбирать компьютеры под задачи покупателя, уменьшит количество касаний с момента перехода и до момента отправки заявки, а также даст более высокую конверсию.
Вот вам и гипотеза. При разработке прототипа мы можем проверить потенциальное количество касаний при наличии и отсутствии такого фильтра на главной. Другой пример.
Допустим, мы разрабатываем интернет-магазин. Мы знаем, что большое количество полей при заполнении формы отпугивает покупателей и конверсия сильно снижается. Мы предполагаем, что 2-шаговое заполнение формы сократит количество действий покупателя и повысит конверсию. Еще на странице товара мы предложим выбрать количество единиц, вписать имя и номер телефона. А на втором шаге (в корзине) останется заполнить только адрес доставки.
Еще одна полноценная гипотеза. Когда мы будем проектировать сайт, сформулированные гипотезы помогут со структурой.
3. Исследование
На этом этапе команда погружается в сам продукт и изучает бизнес-процессы в компании. Понимание бизнес-процессов позволяет принимать более эффективные решения, делать сайт продолжением бизнеса клиента. Иначе есть риск, что компания и разработанный для нее сайт будут существовать отдельно друг от друга. Нехорошо.
Исследование — вопрос бюджета. Если он сильно ограничен, исследованием пренебрегают: просто делают сайт, который не учитывает бизнес-процессы. А потом начинают вылазить косяки.
Например, у нас недавно появился клиент — онлайн-витрина товаров для животных. Изначально это офлайн-магазин, который в период пандемии решил продавать товары через интернет. Заказали лендинг с незамысловатым дизайном, который человек собрал на коленке. С сайтом-то все хорошо — все работает. Но когда его запустили, оказалось, что у магазина нет CRM-системы.
В итоге вместо упрощения, работа менеджера сильно усложнилась: все заявки приходится фиксировать вручную, записывать на бумажке, собирать уведомления о новых заказах с почты. Ни о какой клиентской базе и управлении взаимоотношениями говорить не приходится.
Такая ситуация возникла, потому что пренебрегли исследованиями бизнес-процессов. На аналитику просто не было бюджета. Но сейчас уже все хорошо — подключили OkoCRM, все стабильно, работать стало проще.
4. Прототипирование
Прототипирование — преобразование целей, гипотез и результатов исследований в конкретные требования к продукту. Сначала мы описываем примерные требования к интерфейсу словами: требования к навигации, количество разделов, количество страниц, иконок, элементов и блоков, общий функционал, функционал фильтра и пр. Получается такая выжимка на много страниц. И только потом переходим к прорисовке эскиза с низкой глубиной проработки деталей.
Первые наброски — уже прототип. Их согласует каждый участник команды, вносит свои замечания и правки. Потом смотрит главный и высказывает свое впечатление. Этот процесс цикличен и повторяется с каждым новым этапом разработки макета.
5. Проработка деталей
Когда есть общее представление, макет начинает обрастать контентом и деталями. Чем выше степень детализации, тем проще и результативнее тестирование. На выходе должен быть продукт, который даст представление о работе будущего проекта. Вы сможете определить проблемные места, сможете продумать логику интерфейса и определить путь пользователя от первого касания до оформления заказа.
Итерация с проработкой деталей — финал прототипирования. Теперь можно работать над дизайном. Но это уже совсем другая история…
Немного про инструменты прототипирования
Макет на салфетке развивает вашу фантазию и мелкую моторику. Но его мало — нужен прототип сайта онлайн. Есть несколько приложений, которые сильно упростят вашу работу с макетом. Их подробный разбор мы сделаем в декабре в продолжение темы. А пока коротко 4 хороших инструмента:
Figma. Просто топчик, который используют примерно все. Отличное приложение для создания прототипов и дизайна интерфейсов. Можно работать совместно с командой и расшаривать проекты для демонстрации черновиков руководству или заказчику. Сами пользуемся и людям советуем.
Интерфейс Фигмы очень минималистичен — для профессионалов все просто и понятно.
Axure. Наверное, самая популярная в мире приложка для прототипирования и спецификации сайтов, приложений. Подойдет для глубокой проработки даже в сложных проектах. При этом достаточно простая — поковыряйтесь 10–15 минут в интерфейсе и уже сможете делать простенькие макеты.
В интерфейсе Акшур сможет разобраться даже неподготовленный пользователь. Попробуйте приложение, если Фигма окажется слишком сложной.
Sketch. Векторный графический для MacOS. Отлично подходит для проектирования интерфейсов веб-ресурсов, если вы работаете на «яблоке». Предлагает большие возможности для детализации, но не подойдет тем, кто сидит на Виндовс и Линуксе. Увы.
Скетч отлично справляется с интерфейсами, но только на яблочных устройствах. Сам интерфейс мало чем отличается от конкурентов. Все просто и понятно.
Adobe XD. Адобовский редактор для разработки пользовательских интерфейсов. Отлично подходит для создания интерактивных прототипов. Проблема в том, что он платный. Если вы только начинаете работать с макетами, начинайте с бесплатных инструментов.
Адобовский редактор радует функционалом, но не радует ценами.
А вообще, если вы ортодокс и не признаете все вот эти новомодные инструменты и штуки, используйте фотошоп. В связке с Marvel или Invision вы сможете собрать простенький, но вполне себе годный макет, который не будет стыдно показать людям и команде.
Прототипирование сайта: создание, инструменты и программы
В начале своего пути разработки лендингов мы допустили целый вагон и маленькую тележку ошибок.
Они были разные, но всё это походило на ситуацию “кто в лес, кто по дрова”. Такое мы до сих пор видим во многих компаниях.
Решений масса, но главное из них – это предварительное прототипирование сайта. Поэтому знать и использовать обязательно.
роста прибыли не будет
Прототип – это не инструмент увеличения продаж, и даже не фишка. Это способ, который помогает упростить все мысли в голове и взаимодействие между сотрудникам.
Если Вы будете внедрять этот подход, Ваша прибыль не увеличится, но процесс станет легче и эффективнее.
В условиях бизнеса это очень важный момент, который к тому же поможет избежать фраз от заказчика в стиле “Я не так хотел”, “Я говорил о другом” или “Нужно не так”.
Часто схему сайта путают с его макетом. Это шаги одного процесса, но находятся они на разных уровнях.
Так как макет – это схема сайта в оформленном дизайне. А схема – это предварительный шаг перед этим самым дизайном. Всё просто, хотя не особо важно с точки зрения практики.
самая сложная часть
Руководители бизнеса считают, что создать прототип landing page это самая лёгкая часть при разработке одностраничника.
Но я Вам открою тайну – это САМАЯ СЛОЖНАЯ ЧАСТЬ! Без преувеличения. Дизайн и программирование стоит не много. В своей статье я уже акцентировал на это внимание.
Чтобы Вы поняли, почему я так говорю, опишу Вам правильные действия при разработке прототипа лендинга.
Первые три шага являются подготовительными к началу действий. Но как сделать прототип, если не готовиться? Никак.
Тогда лучше его вообще не делать. Такая подготовка занимает не менее 3 дней (если Вы знаете свою компанию), но обычно уходит одна рабочая неделя.
В течении этой недели Вы собираете информацию для использования в работе. Только лучшее из своей практики с поправкой на Ваших конкурентов.
Четвёртый шаг – это написание последовательности блоков лендинга, что за чем идёт.
Вы можете сразу начать делать прототип, но логичнее сначала сделать иерархию блоков на каждой странице для создания смысловой цепочки.
Ведь каждая страница – это часть целой истории, которая должна рассказываться в течение всех блоков. В случае прототипа лендинга это может выглядеть следующим образом:
Здесь нет конкретики. Но это существенно помогает в следующем шаге. Такую последовательность мы создаём на основе лестницы Ханта, критериев выбора, страхов и потребностей клиента.
Возможно я сейчас говорю непонятными словами, но Вам нужно это знать для создания хорошей схемы. В помощь читайте статью.
После структуры мы переходим к созданию прототипа, который и является героем нашей статьи.
На этом шаге мы наполняем каждый блок в ранее определённой последовательности. В текстовых блоках мы пишем основные посылы, чтобы копирайтер их учёл.
При передаче прототипа на программирование или дизайн, пишем комментарии ответственному лицу. На выходе это будет выглядеть так:
Большинство маркетологов считают, что на этом процесс разработки прототипа сайта закончен.
У нас в In-scale мы придерживаемся другого мнения. И считаем, что без текста прототип нельзя назвать финальным, так как мы не можем разумно оценить, какой размер должен быть, чтобы вошёл необходимый текст.
А также какие кнопки будут логичным завершением, или какое изображение лучше использовать для фона. Пример представлен на картинке ниже.
Прототип с текстовым наполнением
Если Вам создали прототип страницы сайта за 1 день, то Вас обманули. Вы получили очень сырой продукт без глубокой проработки.
Важно. Хороший сайт невозможно сделать за 2-7 дней.
Как сделать прототип
Теперь, когда мы знаем основу создания прототипа, можно переходить к самому процессу. Для этого есть 4 варианта подхода, но наверняка у Вас всё сведётся к двум, самым удобным.
Кстати, узнать больше об UX/UI прототипировании можно изучив обучающие программы в нашей статье про курсы веб дизайна.
Прототипирование 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