ПО для электронных архивов и библиотек, оцифровка
42,40
рейтинг
29 марта 2011 в 18:38

Дизайн → Как мы выбирали инструмент прототипирования. Часть I


Между разработчиками ПО и пользователями ситуации непонимания имеют место достаточно часто. Пользователь хочет получить эффективный инструмент для решения тех или иных задач, к тому же простой в освоении и удобный в использовании, но имеет весьма приблизительное представление о специфике работы программиста. Программист же зачастую имеет весьма и весьма приблизительное представление о круге задач, с которыми имеет дело пользователь. То, что разработчику кажется блестяще реализованным, конечному пользователю может показаться неудобным. На вещи, которые представляются вполне очевидными пользователю, программист может вообще не обратить внимания. (Подробный анализ этих проблем см., например, в книге Дэвида Платта с провокационным, но выразительным названием «Софт — отстой! И что с этим делать?»). Как избежать ситуаций непонимания и помочь программисту и пользователю найти общий язык? (Данная тема уже не раз становилась предметом исследования представителей самых разных областей знаний — программистов, психологов, специалистов в области эргономики. Подробный и интересный обзор литературы по теме — здесь)

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

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

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

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

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

Проблема 1. Веб и десктоп


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

Проблема 2. Визуализация


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

Проблема 3. Движение


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

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

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

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

Проблема 4. Простота и доступность


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

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

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

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

И что в итоге?


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


UPD: Часть II. История создания инструмента прототипирования
Автор: @GUIMachine
ALEE Software
рейтинг 42,40
ПО для электронных архивов и библиотек, оцифровка

Комментарии (33)

  • 0
    Нравиться Axure RP. Можно сделать дизайн, максимально приближенный к конечному, можно создавать достаточно интерактивные макеты. Огорчает цена в $589, причем это на год, если хочется обновлений то еще нужно доплачивать $149 в год.
    • 0
      Небольшое примечание: для компании цена вполне нормальная, не хватает лицензии для частного использования.
      • 0
        Насчет цены — это отдельный большой разговор, ибо каждая компания выбирает цену на свой продукт по весьма неясным и известным только им меркам. Правда иногда, следуя запросам от пользователей могут отделяться лицензии для частного использования/обучения/других случаев, впрочем это происходит достаточно редко и занимает длительные периоды.

        P.S. Ответ строкой ниже на самом деле предназначался Вам, извиняюсь за промах.
  • +3
    Axure был одним из первых на проверку, когда мы пытались найти подходящий инструмент, но у нас остро стояла необходимость в кроссплатформенном решении, как я уже писал.

    Если говорить конкретно — у нас часть фирмы работает на Linux'ах, пара Mac'ов и остатки — Windows (даже некоторое время была пара Sun'овский станций). Axure — win/mac решение only, увы.
    К тому же на тот момент (не хочу соврать, был примерно 2005-2006 год) разрабатывать в Axure десктопные приложения было весьма накладно.
    По этим и некоторым другим причинам этот вариант отпал достаточно быстро.

    Хотя сложно поспорить, что Axure на данный момент один из самых лучших инструментов для прототипирования вэб-сайтов.
  • +8
    «И что в итоге?»

    Что-то с заголовком статьи не вяжется. Начали бы сразу с рекламы своего продукта (вы ведь ради него здесь?) — было бы проще :)
    • 0
      Если уж об этом говорить — добрая половина постов делается ради рекламы, но все же хочется поделиться своим опытом, а не просто банально прорекламировать какой-либо очередной продукт, не согласны?)

      Просто для тех, кому интересно узнать продолжение истории мы сделаем следующий пост, в котором детально опишем этапы создания инструмента, какие проблемы и сложности мы встретили и как их решали. Думаю это может быть полезно вне зависимости от того нужен ли Вам сам продукт или нет :)
    • +1
      В этом топике мы попытались очертить специализацию нашего инструмента.
      Не сомневаюсь, что для многих читателей достаточны прототипы, к примеру, только веб-сайтов или low-fidelity прототипы, и существующие инструменты покрывают их требования. Однако также уверен, что многие столкнулись с теми же проблемами, что и мы. Поэтому топик призван выявить аудиторию, для которой перечисленные проблемы актуальны и для которой обзор решения проблем будет полезен и интересен. Кроме того, очень хотелось получить фидбэк от читателей
  • 0
    Прототипированием плотно не занимаюсь, но мне кажется, самые нужные фичи в инструментах прототипирования при коллективной разработке – это версионирование, ревизии, отображение диффов своих и чужих изменений. По этой причине после Balsamiq я выбрал www.lucidchart.com/.
    • 0
      Lucidchart все же больше ориентирован на построение графиков
  • +1
    Может кто сделает голосовалку — какой самый лучший бесплатный (ограниченно платный) инструмент для прототипирования веб сайтов?

    Нужен сервис, с которого можно сделать экспорт проекта допустим в Illustrator, что бы потом уже дизайнить макет.
  • +2
    Странно, что в статье озвучен только вопрос о выборе, но не предложено ответа.
    Если вы что-то уже выбрали, то напишите сразу и скажите почему. А то получается вы рассказали о том «как же мы задавались вопросом выбора» или «как мы думали что выбрать» — именно так, не «выбирали», а «думали как выбирать».
    Можно еще тогда поменять заголовок.
    • +1
      Мы именно «выбирали» инструмент прототипирования, способный покрыть наши требования, но не говорим о том, что мы «выбрали» какой-то конкретный из существовавших на тот момент. Некорректным было бы название «Как мы выбрали инструмент прототипирования». В нашем же случае — «выбирали» — это процесс, который действительно имел место быть. Результатом этого процесса явился вывод о том, что среди существующих инструментов мы не нашли подходящий. А как известно: отрицательный результат — тоже результат :)
      • 0
        ну если только так…
    • 0
      Думаю, действительно, заголовок мог быть немного смущающим.
      Добавили, что это была «Часть I» — продолжение следует ;)
  • 0
    Adobe® Fireworks® CS5 не устроил?
    • 0
      — не дописал — Цена у него не такая уж и большая — 300$.
      И обладает, как мне кажется, всем необходимым функционалом.
      • +1
        Fireworks, на самом деле, слабо подходит для прототипирования (особенно приложений), так как нет готовых компонентов и слабоват набор действий. Плюс сам прототип получается практически статичен.
        Выезжает Fireworks засчет хорошей работы с другими продуктами Adobe — не было бы этого, думаю мало кто бы его впринципе использовал. Ну, это лично мое мнение…

        А, да, еще он только Win/Mac. А у нас люди, занимающиеся содание прототипов отчасти сидят на Linux'ах, поэтому этот вариант отпадает. И нет, менять ОС ради одного инструмента мы были не готовы.

        А на цену, на самом деле, мы смотрели в последнюю очередь.
  • 0
    гугл докс дроингс с правильными темлейтами всем в помощь.
    за ссылкой на темплейты обращайтесь
    • 0
      Мне кажется, что с тем же успехом, имея нужные изображения объектов можно и в Word/Excel (кстати мы сами видели, как некоторые фирмы так делают) клипать прототипы. Увы, это совсем не говорит о том, что это удобно/быстро/просто.
      Хотя учитывая как Google Docs набирает обороты, возможно там вскоре появится что-то для создания прототипов ;)
      • 0
        ну, если кому-то охота платить за то, чтобы подключить дополнительных людей к коллаборации…
        Тем более, что есть бесплатные очень хорошие темплейты, и все лепится просто на ура.
        Так и быть, поделюсь со всеми (за карму, конечно) mortenjust.com/2010/04/19/a-wireframe-kit-for-google-drawings/

        может быть, там нет возможности сделать макеты интерактивными, но я считаю, что подобный шик нужен для избранных проектов. В остальном же можно обойтись вот такими гайдами www.linowski.ca/sketching
        • 0
          Проблема еще в том, что эти темплейты — просто некий абстрактный набор стандартных компонентов, причем достаточно скудный. При любой необходимости использовать более сложный объект придется поработать дизайнеру. Да бесплатно, но платят за инструменты прототипирования как раз таки, чтобы разгрузить дизайнера/разработчика от лишних задач.

          А насчет интерактивности — вопрос спорный. Полная интерактивность действительно редко нужна, но небольшое количество действий обычно присутствует в каждом создаваемом конкретно нами прототипе.
          Тем более, как только Вам захочется или понадобится показать прототип заказчику (как минимум в более-менее приближенном к финальному варианту виде) возникнут проблемы.
  • 0
    хаха… все так предсказуемо… сразу минус поставили…
    я уж давно думаю, что нужно описать психологию хабровчанина…

    все остались при своих мнениях )
    но я за простоту и доступность. в любом случае ограниченность есть. На то они и стандартные формы, а если уж нужна работа дизайнера, то она действительно нужна. На то он и дизайнер, чтобы придумать функцию, а потом форму для нее.
    • 0
      Все же мне кажется, что работа дизайнера должна заключаться в отрисовке дизайна, но никак не нативных компонентов для какой либо платформы. И тем более он не должен, как мне кажется, заниматься созданием прототипа.
      Впрочем, в небольших фирмах дизайнер может выполнять много ролей сразу, это не редкость.
      • 0
        я специально сказал про стандартность. Дизайнер не всегда должен брать готовое и просто все это совмещать на его вкус (это типичное понимание дизайнера). Он иногда должен придумывать что-то. КАскадное меню, наверное кем-то было когда-то придумано, заменители рэдио баттонов, которые сделали в iOs.

        Если это дизайнер-оформитель, как я его называю, то он, может, и не должен делать прототипы.
        • 0
          Как раз в моем понимании дизайнер — это тот, кто придумывает что-то новое и не заморачивается теми деталями, которые уже давно продуманы и сделаны.
  • 0
    Пользуюсь онлайн-сервисом прототипирования www.justproto.com
    Из плюсов:
    — онлайн-сервис, поэтому очень удобно работать удалённо, коллективно и делиться ссылками
    — приличный набор стандартных элементов интерфейса и всяких иконок/картинок
    — кроссплатформен, т.к. работает из браузера

    Сервис платный, от 19 до 99 долларов в месяц в зависимости от тарифа, но есть 30-ти дневный триал на любой тариф.
    • +1
      Подобные онлайн сервисы сейчас действительно набирают оборот (частично засчет быстрого развития вэб-технологий, частично засчет востребованности отрасли).

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

      Кстати, на тот момент, когда мы принимали решение подобных инструментов еще не было в наличии.
      Они наросли как грибы за последний год-два
  • 0
    Выложена обещанная вторая часть статьи:
    habrahabr.ru/company/alee/blog/117400/
  • 0
    XAF смотрели? (http://devexpress.com/Products/NET/Application_Framework/)
    • 0
      Собственно, сам фреймворк видел одним глазом, но не совсем понимаю, как он относится непосредственно к теме?..
      • +1
        Можно сказать, что эта штука относится коим-то образом к прототипированию. Может какие идеи почерпнёте.
        • 0
          В плане идей — согласен, компоненты у них приятные и проработанные. Есть некоторые действительно интересные моменты.
          Другое дело, что копированием их интерфейсов мы всяко заниматься не будем — это идет вразрез и с нашими убеждениями и с лицензией того же DevExpress, наверняка.

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

Самое читаемое Дизайн