Как мне создавать ло-фи (неинтерактивные) прототипы пользовательского интерфейса?

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

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

Каков рекомендуемый способ для разработчиков эффективно создавать неинтерактивные прототипы пользовательского интерфейса?

И почему?

Я попробовал несколько версий ручек, бумаги и пост-заметок, и они упали как свинцовый шарик (вероятно, мои навыки рисования). В конце концов я использовал Balsamiq , который до сих пор нравится большинству пользователей, и они получают его как прототип. Увы, у некоторых людей все еще возникают проблемы с идеей, что сначала нужно получить представление о том, что приложение должно делать с помощью прототипов lo-fi, и действительно хотят «увидеть что-то на экране», прежде чем что-то делать.

Я предпочитаю доску.

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

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

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

http://balsamiq.com/

Pencil Project - это дополнение к Firefox, которое делает красивые и простые макеты.

Карандаш предоставляет различные встроенные коллекции фигур для рисования различных типов пользовательского интерфейса, начиная от настольных систем до мобильных платформ. Начиная с 2.0.2, Pencil поставляется с предварительно установленными трафаретами для Android и iOS. Это облегчает запуск прототипирования приложений с простой установкой.

Популярные функции рисования также реализованы в Карандаш, чтобы упростить операции рисования ...

Я использую комбинацию MS Paint и Visual Studio. Я использую VS для перетаскивания всех элементов управления, которые я хочу, на форму, а затем делаю снимок экрана в MS Paint, чтобы переставить их, пока мне не понравится, как он выглядит.

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

Изменить: ответ Тоби привел меня к Balsamiq , и теперь это мой основной инструмент выбора для макетов пользовательского интерфейса для представления другим людям.

Иногда я по-прежнему вытаскиваю MSPaint или ручку / бумагу, но обычно это происходит только тогда, когда я делаю наброски базового дизайна пользовательского интерфейса для собственной справки или если я хочу представить клиенту две опции для завершенного экрана (например, " хотите кнопки здесь или здесь? " )

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

При этом различные подходы с низким уровнем фантастики имеют разные сильные стороны:

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

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

• Бальзамик - это быстрое создание бумажных прототипов, которые можно использовать повторно. Я распечатываю скриншоты и использую их как бумажные прототипы. Я также использую его во время встреч, чтобы помочь имитировать идеи, как они у нас есть - подобно прототипированию доски. Я также использовал Visio и OmniGraffle для этого.

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

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

Моими первыми макетами всегда были карандаш, бумага или белая доска, но, как только основа придумана, я обычно перехожу к HTML. У меня есть куча изображений-заполнителей, которые просто говорят «Заголовок», «Баннер», «Изображение», «Диаграмма» и тому подобное. Несколько простых CSS для того, чтобы выложить некоторые вещи разумно, и я готов. Небольшой JS, привязанный к элементу управления, может дать вам некоторое подобие функциональности, и люди, кажется, просто «получают его» лучше.

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

Сначала я использую ручку и бумагу, а затем, несколько раз нарисовав интерфейс, пытаюсь сделать это в powerpoint 2 или 3 раза. Наличие 5 или 6 итераций перед тем, как войти в настоящий редактор, помогает мне сократить неработающие пользовательские интерфейсы (например, генерировать контент Y на основе текстового поля X, когда пользователь еще даже не видел X). Я вижу в этом шанс вытащить глупостей прямо сейчас.

Перо и бумага / доска, вы также можете использовать Visio или что-то подобное (Visio поставляется с шаблонами пользовательского интерфейса для общих элементов управления). Иногда я делаю снимки существующего (похожего) интерфейса, который у нас есть, и вырезал и вставлял в него новый интерфейс, используя программу рисования, такую ​​как Paint.NET.

Я делал быстрые прототипы в Delphi несколько раз. Это позволяет очень быстро собрать воедино макет экрана, гораздо быстрее, чем в PowerPoint или Visio. Полученный exe-файл может быть прикреплен к электронной почте без каких-либо зависимостей. Поскольку я использую его для создания прототипов веб-приложений, нет никакой опасности, что люди будут путать прототип с готовой версией наполовину.

Я пытался сделать то же самое с Sencha Ext Designer, но система компоновки Ext JS сложнее в использовании, и это было скорее бременем, чем удобством для быстрой итерации идей.

Я не всегда использую один и тот же подход. Вот некоторые из методов, которые я использую (в грубом порядке частоты):

• Доска (для интерактивного создания прототипов / обсуждения. Сделайте фото позже!)

• Дизайнер графического интерфейса в стиле RAD (Visual Studio, NetBeans, Delphi)

  • Добейтесь успеха в этом, и он может стать одним из самых быстрых способов создания прототипов приложения «окна, виджеты и формы». Бонус: прототипы могут выглядеть действительно довольно профессионально, в зависимости от того, как быстро вы их бросите. Иногда они могут даже служить отправной точкой для создания реальной вещи, когда прототип одобрен.
    
    

• Бумага и ручка / карандаш (обычно для мозгового штурма)

• Статические файлы HTML / CSS / JS на диске

  • Я полагаю, что приложение для разработки WYSIWYG здесь не повредит, но я обычно просто взламываю необработанный HTML. Во всяком случае, я этим не занимаюсь.
    
    

• Векторные инструменты рисования - Illustrator / Inkscape / Visio / PowerPoint / Impress

• Инструменты растровой графики - Photoshop / Gimp

• ASCII art ;-)