Як я повинен створити прототипи інтерфейсу інтерфейсу lo-fi (неінтерактивні)?

Зараз я працюю над тим, щоб зібрати деякі основні прототипи, почасти, щоб зібрати вимоги і частково розробити остаточний інтерфейс користувача.

На даний момент я намагаюся створити екран за допомогою приміток Post-it, з жовтими нотами для інформації та рожевими для дій (кнопок або меню). Ідея полягає в тому, що ви можете легко переміщувати, видаляти та додавати інформацію. Але я впевнений, що там є більш ефективні методи.

Який рекомендований спосіб розробникам ефективно створювати неінтерактивні прототипи інтерфейсу користувача?

І чому?

Я спробував кілька ручок, паперу та версій Post-it note, і вони зійшли, як свинцевий куля (ймовірно, мої навички малювання). Врешті-решт я використав Balsamiq , який поки що подобається більшості користувачів, і вони отримують його прототипом. На жаль, у деяких людей все ще виникають проблеми з думкою, що спочатку слід отримати уявлення про те, що програма повинна робити через деякі прототипи lo-fi і дійсно хочуть "щось побачити на екрані", перш ніж щось робити.

Я віддаю перевагу дошці.

Це дозволяє легко змінюватись, приймаючи рішення, не перемальовуючи всю справу. Поділитися з іншими (поблизу) розробниками легко. Коментувати легко за допомогою наліпок або інших кольорів.

Макети бальзаміків, як правило, є першим портом дзвінка, майже настільки ж швидкими, як використання ручки та паперу та багаторазового використання.

Крім того, ви можете додати деяку ступінь інтерактивності, якщо бажаєте, наприклад, зв’язуючи сторінки.

http://balsamiq.com/

Проект «Олівець» - це додаток для Firefox, який робить приємні та прості макети.

Олівець забезпечує різноманітну вбудовану колекцію фігур для малювання різних типів користувальницького інтерфейсу, починаючи від настільних і мобільних платформ. Починаючи з 2.0.2, олівець постачається з попередньо встановленими інтерфейсами інтерфейсу Android та iOS iOS. Це ще більше спрощує запуск програмування програм із простою установкою.

Популярні функції малювання також реалізовані в Pencil для спрощення операцій малювання ...

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

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

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

Я все одно витягую MSPaint або ручку / папір при нагоді, але це, як правило, лише тоді, коли я малюю базовий дизайн інтерфейсу для власної довідки або якщо хочу представити клієнту два варіанти для завершеного екрана (напр., "Чи ти" хочете кнопки тут чи тут? " )

Це здається, що ви використовуєте хороші методи, але ви зіштовхуєтесь з опором, коли люди приймають корисність швидкого прототипування. Усі люблять кодувати, але якщо через півгодини вони все ще борються з JScrollBars, і ви створили 12 макетів, вони можуть зрозуміти, що сила цих інструментів полягає в швидкій ітерації .

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

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

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

• Balsamiq - це ярлик для швидкого виготовлення паперових прототипів, які можна використовувати багаторазово. Я роздруковую скріншоти і використовую їх як паперові прототипи. Я також використовую його під час зустрічей, щоб допомогти знущатися над ідеями, як у нас їх, - подібно до прототипування на дошці. Я також використовував 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 важче користуватися, і це відчувало, що більше тягар, ніж зручність для швидкого повторення ідей.

Я не завжди використовую той самий підхід. Деякі з методів, які я використовую, є (приблизно, за частотою):

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

• GUI-дизайнер у стилі RAD (Visual Studio, NetBeans, Delphi)

  • Будьте добрі в цьому, і це фактично може стати одним з найшвидших способів створення прототипів програми "Windows, віджети та форми". Бонус: прототипи можуть виглядати по-справжньому досить професійно, залежно від того, наскільки швидко ви їх з'єднаєте. Іноді вони навіть можуть слугувати точкою запуску для створення реальної речі, як тільки прототип буде затверджений.
    
    

• Папір і ручка / олівець (зазвичай для мозкового штурму)

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

  • Я думаю, що додаток для дизайну WYSIWYG тут не зашкодить, але я зазвичай просто хакую на сирий HTML. Я багато чого з цього не роблю.
    
    

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

• Інструменти растрової графіки - Photoshop / Gimp

• ASCII мистецтво ;-)