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

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

    Спасибо всем, кто принял участие в голосовании на Хабрахабре:
    1. Как выглядит процесс прототипирования в твоей компании?
    2. Кто занимается прототипированием web-проектов в которых ты участвуешь?
    3. Устраивает ли вас текущая ситуация с прототипированием web-сайтов в вашей компании?
    Пришло время обсудить результаты

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

    Самые дорогие ошибки — это ошибки, допущенные в начале проекта, так как именно на начальных этапах принимаются наиболее важные решения. По мере развития проекта, стоимость ошибки снижается. В то же время, начальный уровень контроля качества является минимальным и повышается по мере продвижения процесса разработки. Полноценное тестирование начинается только на поздних этапах. Результатом часто является слишком позднее выявление самых дорогих ошибок и последующая дорогостоящая переработка системы либо ее отдельных частей.На первый взгляд может показаться, что некоторые проекты одинаковы по своей сути и содержанию. Скажем, типовым проектом для вас является интернет-магазин на базе существующей у вас системы. Но индивидуальность каждого проекта заложена даже в самом его определении (см. определение «проект» по PMBOK). Бытует мнение о том, что разработка однотипных проектов может проходить без этапа проектирования. Я разделяю это мнение лишь отчасти. Я бы разделил задачу проектирования на создание типовых стандартных решений, которые кочуют из проекта в проект и творческие задачи, которые необходимо решать в каждом новом проекте.(Потребность 1. Автоматизировать типовые решения, сохранив пространство для творчества) И как бы вы не сопротивлялись, заявляя об однотипности проектов, если вы хотите повысить качество и, как следствие, добиться экономического подъёма (по Куперу), то в каждом новом проекте вы просто обязаны учесть различную входную информацию. Прототипирование это не панацея, но способ избежать некоторых дорогих ошибок, снизить риски. Я думаю, очевидно, что пользователи интернет-магазина по продаже удобрения и сельскохозяйственной техники будут сильно отличаться от пользователей магазина по продаже одежды и гламурных аксессуаров, как и будет отличаться их поведение на сайте, объекты внимания и т.д. Способно ли ваше стандартное решение учесть различия пользователей? Стандартное решение — это набор компонентов, оттестированных и опробованных в различных проектах. Понимание необходимости их адаптации (кастомизации) часто возникает в конце, когда происходит полноценное тестирование, а свободных ресурсов уже нет. Это и есть та самая дорога ошибка (перерасход проектного времени, приводящий к авралу, ухудшение качества). Парадокс новой экономики, о которой написал Купер — чтобы сэкономить, нужно заплатить (инвестировав в проектирование).

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


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

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

    InDesign

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

    Visio

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

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

    Программы из пакета 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: Создание собственного юзабилити отдела — юзабилити лаборатории.

    Оригинал статей Нильсена на эту тематику:
    http://www.useit.com/alertbox/process_maturity.html
    http://www.useit.com/alertbox/maturity.html

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

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

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


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

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

    Источник: Блог о юзабилити и управлении проектами

    Similar posts

    Ads
    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More

    Comments 40

      0
      Неплохо!
      В общем же, всем рекомундую прочитать книгу К. Вигерса "Разработка требований к программному обеспечению", там тема прототипирования также затронута.
        0
        Спасибо большое. В ближайшем будущем собираюсь вступить в роль как раз проектировщика/менеджера. Как раз ставил перед собой задачу выбора.
        Когда будет сделан конкретный выбор постараюсь написать почему.
          0
          Думаю вам будет интересно попробовать инструмент который я создал для проектирующих менеджеров и о котором обмолвился в последнем абзаце. Собираюсь выложить его в ближайшее время, прошу вас включить его в ваш набор. Вся информация о нём будет и на блоге amazedev.com и на Хабрахабре.
          +1
          Отличный анализ и обзор.
            0
            В некоторых случаях бумажные прототипы - гораздо лучше индизайновых, а в некоторых наоборот.

            Практически на всех сайтах, где нужно «промо», графика, навороты и т.д. - без бумаги не обойтись (я в хорошем смысле).
            А большинство «сухих», информационных или корпоративных сайтов легче, конечно придумывать на экране.
              –1
              Кстати, вместо корявого слова «юзабилити», есть очень хорошее, наше - «Эргономика!»
                +1
                Очень наше и очень красивое. Древне славянский корень "Эрго"...
                  +1
                  Скорее, тогда, «эргономичность». Но это все же разные вещи.
                    0
                    Согласен
                      0
                      эргономика и юзабилити относятся друг к другу примерно так же, как архитектура в целом и проектирование, скажем, дачных домов
                      +2
                      Не совсем согласен. Все определяет размер проекта.
                      Если проект маленький, статичный то хватит и бумаги.
                      А для более больших проектов процесс проектирования тоже начнеться с бумаги, однако потом перейдет на доску, а потом и в Axure Pro или Visio.
                        0
                        Так и есть, а потом еще может перейти и в HTML/CSS или Flash. Выбор инструмента прототипирования зависит как от размера проекта, так и от его стадии.
                      0
                      Долгое время пользовался Visio для подготовки прототипов. По опыту могу сказать что это лишний этап, так как все равно перед этим все рисовалось на бумаге. На бумаге быстрее, а зачастую нужно получить первичный вид интерфейса быстро.

                      Вот как сейчас: бумажный прототип -> верстка -> утверждение верстки -> коддинг...
                        0
                        А почему графический дизайн в цепочке не представлен?
                          0
                          графический дизайн рассматривается вместе с версткой. Дизайн в psd или jpg часто расходится с действительностью. Поэтому утверждается именно верстка.
                          Естественно, если есть возможность до этого согласовать прототипы.
                            0
                            Дизайн в psd или jpg часто расходится с действительностью.

                            Это уже вопрос к верстальщику, наверное. Я имею в виду разработку корпоративных сайтов под заказ. В этом случае ваша модель с высоким риском. Может мы говорим о разных проектах?
                      0
                      Спасибо за труд. Отдельное спасибо за PMBOK, в Америке, Англии, Японии уже давно существуют стандарты на создание ПО, и предотвращению наступания на одни и теже грабли.

                      Интересно у кого как обстоить дело со стандартами на фирмах.
                      PMBOK
                      SWEBOK
                      P2M
                      Список можно продолжать, опыт в мире уже есть, интересно как им пользуются.
                        0
                        я собираюсь в следующем году получать сертификат IPMI. Считаю, что должны все таки и наши специалисты приходить к единому стандарту.
                          0
                          Что характерно, PMBOK про создание ПО как раз ничего и не говорит.
                            0
                            The PMBOK Guide – Third Edition is an internationally recognized standard (IEEE Std 1490-2003) that provides the fundamentals of project management as they apply to a wide range of projects, including construction, ___software___, engineering, automotive, etc.
                            Если не говориться, что молотком можно колоть орехи, то это не значит что он для этого непригоден.

                            У меня в университете "Менеджмент IT проектов" преподавали отчасти по этой книге. Она, если честно, мозг хорошо вправляет. На западе хорошо то, что они к аккуратности и стандартам приучены. У нас же иногда так делают, потом самим переделывать не хочется, и начинают разработку сначала.
                              +1
                              Ну у меня тоже преподавали и эту книгу, я ее честно всю прочитал, местами несколько раз.
                              ПМБОК, как следует из его концепции, отлично подходит для управления любым проектом. Подумать только, как это здорово, правда? Одну книгу прочитал - и управляй чем хочешь. Хочешь - дом строй, хочешь - канаву рой, хочешь - софт разрабатывай. Аккуратно и стандартно. Приученно.
                              Так что формально, я, разумеется, неправ - там и про ПО тоже. В том смысле, что именно про ПО там ничего не написано, но все, что написано, мол, годится и для ПО.
                              Не, а книжка, конечно, ценная, прочитать однозначно стоит, тут я согласен.

                              Но софт по ней - сами разрабатывайте, я свою команду не готов считать ресурсом.
                                0
                                >я свою команду не готов считать ресурсом.
                                В этом я абсолютно с вами согласен.

                                Дело в том, что пока команда разработчиков небольшая, стандарты будут только отягощать. Но как только их количество привысит определенный порог, отсутсвие стандартов даст о себе знать. И использование тогоже PMBOK (или другого стандарта, лучше даже ГОСТа, если он есть) будет очень полезно.
                                  0
                                  Классическая Джоэловская диллема "Голый повар против Макдональдса". В этом смысле стандарты решают проблему масштабирования управления. Когда вы готовы работать силами многочисленной команды удовлетворительных разработчиков. То есть, ресурсами. ПМБОК как раз это поощряет - там утверждается, что если все делать по стандартам, то все будет хорошо.

                                  Я к тому, что вместо стандартов лучше иметь идеи.
                          0
                          Поправьте пожалуйста - не Usetics, а Usethics
                            0
                            Спасибо, исправленно
                              0
                              и еще в одном месте - там, где Бонус )
                              Спасибо
                            +1
                            Содержательная статья, большое спасибо. Хотелось бы добавить к теме следущее: несмотря на низкую интерактивность InDesign у него есть то преимущество, что файл InDesign можно использовать как основу для разработки дизайна в Illustrator, что сокращает время разработки дизайна.
                              0
                              Интересная мысль. Спасибо! Вот она польза общего обсуждения. Я в анонсированном инструменте пошёл другим путём, сближая прототип и разработку.
                              +2
                              совершенно прекрасный обзор
                              у нас в компании с этим все, конечно на нуле, и я пытаюсь сейчас внедрять это, так или иначе используя это во всех своих проектах
                              спасибо!
                                0
                                InDesign достаточно интерактивен
                                  0
                                  Больше чем переход на другой экран по клику как в Visio?
                                    0
                                    Да. Можно много чего делать. Слои, которые появляются при наведении, нажатии на кнопку и тд.
                                      0
                                      Это интересно. Не знал. Можете посоветовать какой-нибудь мануальчик по этой теме? Заранее благодарен.
                                        0
                                        К сожалению, учился не по мануалам, поэтому ничего не могу посоветовать.
                                  +1
                                  Благодарю за такой итоговый обзор. Как раз наткнулся на него, начиная рисовать прототипы для нового проекта. Как и большинство проголосовавших, чаще использую бумагу, по крайне мере на ранних этапах. Также имею опыт работы с Визио, он мне кажется довольно удобным для многих задач инструментом, в т.ч. и для прототипов. С удовольствием попробую и ваш инструмент.
                                    0
                                    Отвечу на возникшие вопросы. Выслушаю предложения и замечания. Спасибо.
                                    0
                                    господа, а что посоветуете для динамического прототипирования на Mac?
                                    Спасибо.

                                    p.s. OmniGraffle не предлагать :)
                                      0
                                      Interface Builder

                                      en.wikipedia.org/wiki/Interface_Builder
                                      habrahabr.ru/blogs/macosxdev/30553/

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

                                    Only users with full accounts can post comments. Log in, please.