Mobile Wireframing with Indigo Studio
•Download as PPTX, PDF•
0 likes•452 views
A workshop session prepared especially for MobCon Bulgaria 2015 that introduces the audience to the wireframing and prototyping tool Indigo Studio. Key features and necessary workflows for the creation of an interactive mobile wireframe are introduced and showcased. After an initial general overview of what is possible with Indigo Studio, there is a hands on experience to offer a deeper dive into mobile prototyping. The centerpiece of the session is to create an interactive wireframe for a mobile app, based on a paper prototype that has underwent user validation. Thus, a small part of the UXD cycle for the development of a product is covered as well.
Recommended
More Related Content
Viewers also liked
Viewers also liked (15)
Similar to Mobile Wireframing with Indigo Studio
Similar to Mobile Wireframing with Indigo Studio (20)
More from Stefan Ivanov
More from Stefan Ivanov (20)
Recently uploaded
Recently uploaded (20)
Mobile Wireframing with Indigo Studio
- 1. CONFIDENTIAL © MobCon Bulgaria. All rights reserved.
- 2. CONFIDENTIAL © MobCon Bulgaria. All rights reserved. Mobile Wireframing with Indigo Studio http://www.infragistics.com/products/indigo-studio 2 Stefan Ivanov UX Architect, Infragistics @StefanIvan0vstefanivanovux April 4, 2015
- 3. CONFIDENTIAL © MobCon Bulgaria. All rights reserved. Agenda Wireframing feature overview demo hands on good practices 3 April 4, 2015
- 4. CONFIDENTIAL © MobCon Bulgaria. All rights reserved. Wireframing High-fidelity prototypes The skeleton of the product Rich libraries with components Define screen layouts, transitions and interactions One of the last iterations during the UCD process 4 April 4, 2015
- 5. CONFIDENTIAL © MobCon Bulgaria. All rights reserved. Wireframing Closely resemble the final product Test workflows, structure and animations Reference point for developers to code Difficult to create but easy to extend and update Sketching, whiteboards, cutouts 5 April 4, 2015
- 6. CONFIDENTIAL © MobCon Bulgaria. All rights reserved. digo Studio Wireframing and prototyping code free For desktop, mobile and responsive web Rich component library Rich set of animations The beginner’s heaven 6 April 4, 2015
- 7. CONFIDENTIAL © MobCon Bulgaria. All rights reserved. digo Studio Storyboards Cross-platform Screen parts Export and sharing Prototype hosting 7 April 4, 2015
- 8. CONFIDENTIAL © MobCon Bulgaria. All rights reserved.8 April 4, 2015 Wireframing Inbox
- 9. CONFIDENTIAL © MobCon Bulgaria. All rights reserved.9 April 4, 2015 Hands-on
- 10. CONFIDENTIAL © MobCon Bulgaria. All rights reserved.10 April 4, 2015
- 11. CONFIDENTIAL © MobCon Bulgaria. All rights reserved. Feedback People confuse camera and gallery very often – merge them License plate, date and note are too cluttered – split them in two People tend to try to scroll rather than flick/tap to see next image – change to a scrolling browsing When browsing the feed users want to see the ranking of the one, who reported the case and the number of views of the case The radar allows me to add my license plate but there is no other information about my profile (such as photo, ranking etc.) Some were confused as the submission of a case did not show them the submit/report/done button at first glance 11 April 4, 2015
- 12. CONFIDENTIAL © MobCon Bulgaria. All rights reserved.12 April 4, 2015
- 13. CONFIDENTIAL © MobCon Bulgaria. All rights reserved.13 April 4, 2015
- 14. CONFIDENTIAL © MobCon Bulgaria. All rights reserved. Wrap up Wireframing feature overview demo hands on good practices 14 April 4, 2015
- 15. CONFIDENTIAL © MobCon Bulgaria. All rights reserved. Resources 15 April 4, 2015 http://indigo.infragistics.com/help/what-you-can-do-with-indigo-studio.html https://www.youtube.com/watch?v=uE9fx-GdG_Q http://indigo.infragistics.com/help/storyboards-overview-and-key-concepts.html http://indigo.infragistics.com/help/designing-for-ios.html http://indigo.infragistics.com/help/targeting-platforms-and-screen- sizes.html
- 16. CONFIDENTIAL © MobCon Bulgaria. All rights reserved. Stefan Ivanov UX Architect Infragistics @StefanIvan0vstefanivanovux 16 April 4, 2015
Editor's Notes
- Здравейте всички, аз съм Стефан Иванов и през последните 5 години се занимавам с дизайн на потребителско преживяване. Всичко започна с една магистратура в Германия, която за мое щастие още през първия семестър ме срещна с HCI и това до голяма степен предопредели остатъка от следването ми. Като студент работих над не малък брой проекти от игри с Кинект, когато току що беше излязъл, до мобилни приложения и игри. Научих много, работих над интересни проекти към университета и нямах търпение да го приложа на практика. Върнах се в България и започнах работа като UI developer, което успя да ме спечели за година, но осъзнах, че ме отдалечава от това, което исках да правя и затова се наех да организирам първият голям курс по UX design. 25 лекции съставляващи около 60 астрономически часа обучение. След това стартирах собствена компания, където освен с управление се занимавах и с потребителски фокусирания дизайн, но понеже нещата не потръгнаха с бизнеса се завърнах в корпоративния свят и от половин година работя като UX Architect в Infragistics Bulgaria. Разработката на developer tools се оказа интересна задача понеже правиш от всичко по малко, а и винаги имаш една потребителска група с крайни потребители (както е за множеството от продукти) но и една група от разработчици на софтуер, които са твои клиенти и се стремиш да „окрилиш“ с продукта, който им предлагаш. Отскоро също съм и локален лидер заедно с Лазар в IDF където основната ни мисия е да развием локално Interaction Design културата и да помагаме на хората да получават нови познания в сферата.
- Днес ще говорим за създаването на интерактивни уайърфрейми с помощта на един интересен инструмент, който моята компания разработва. Ще започна с кратко въведение по темата за тези, които не са наясно със силата на този похват и след това ще разкажа как работи Indigo Studio и какво ни предлага/предоставя като функционалност. Ще направя и едно кратко демо, опитвайки се набързо да пресъздам един познат мобилен апп, но това което следва след това е същината на този уъркшоп. Ще се хванем да направим някой друг уайърфрейм като съм ви подготвил една интересна задачка, която ще отнеме около час от цялата продължителност на сесията. В заключение ще разгледаме няколко интересни примера демонстриращи добрите практики при правенето на уайърфрейми.
- Какво представлява самият процес по изготвянето на уайърфрейми. Или какво общо имат телта и рамката с този тип на правене на прототипи. Всъщност това е много сходно с начина, по който като деца тъчахме в час по трудово. Сковавахме си една рамка (прозорец) и опъвахме през идентични разстояния тел, корда или конец за структура, след което с цветни конци тъчахме заветната си цел. По сходен начин чрез уайърфрейминга ни се дава възможността да разделим работната си площ (рамка, прозорец, канвас) на идентични части в един грид и да подредим съдържанието, така че да е красиво подравнено и оформено. Това съдържание се състои от богат набор компоненти като бутони, лейбъли, чартове и изображения като много от решенията на пазара предоставят финкционалност за дизайн на собствени компоненти. По този начин ние изграждаме визуална йерархия и подредба, а след това дефинираме преходите между екраните и различните интеракции и анимации, с които това се случва. Важно е да отбележим, че уайърфрейминга е една от последните стъпки в процеса на потребителски фокусиран дизайн, а не от първите. Това са прототипи с много голяма сложност и ниво на детайлите и се правят в късните етапи на дизайн процеса.
- Уайърфреймите са прототипът стоящ най-близко до крайната версия и визия на продукта. Много често хора извън дизайн екипа са сходни да сбъркат прототипа с продукт. От една страна това е добре понеже предоставя една детайлна референтна точка въз основа, на която програмистите спокойно може да пишат код. Все пак съществува риска от това че мениджърите могат да останат с впечатлението, че това е едва ли не крайният продукт или нещо много близко до него, а всъщност да не е написан един ред код и цялата работа да предстои. Това което отличава този тип прототипи от всички останали е че те имат най-голямата сложност и детайлност и съответно за доста трудоемки за създаване. За сметка на това промените се правят доста лесно поради богатата им интерактивност. Това че говорим за уайърфрейми като дигитален продукт, не значи че те непременно са такъв. Понякога може да е по-правилно да отпечатаме екраните на хартия и така да тестваме прототипа с потребители.
- Indigo Studio ни помага да създаваме напълно функционални уайърфрейми и прототипи без да напишем нито един ред код. Подреждането на интерфейси става много лесно посредством drag and drop метафора, всичко може да бъде дооформено благодарение на принципите за директна манипулация, а настройките по използваните компоненти са достъпни през доста популярните property grids за конфигурация. Този софтуерен продукт ни позволява да правим прототипи за десктоп приложения, мобилни аппове и респонсив уеб страници. На наше разположение е богата библиотека от най-необходимите компоненти като можем да дефинираме и начините, по които се сменят екраните в един мобилен прототип например. Най-важното е, че това е рай за начинаещите. Ако никога не сте правили уайърфрейми досега, то това е идеалният избор, за да започнете, защото стъпките и тяхната последователност изграждат един диалог между вас като създател и системата, който много лесно се навигира, така че да достигнете до желания резултат. За сравнение аз съм работи преди това с Axure, считан за стандарт в индустрията, където всичко е много по завъртяно и сложно и ако не сте експерт имате едно доста неприятно и тежко преживяване.
- Какво допълнително ни дава Indigo Studio? На първо място това е създаването дигитални сторибордове илюстриращи употребата на прототипа в един реалистичен сценарий и контекст. Можем да започнем именно с този сториборд и да създадем основното като екрани, след което да минем на следващото ниво и да попълним липсващото от уайърфрейма докато го направим завършен. Работи на всички десктоп платформи и онлайн, като самите прототипи могат да бъдат отворени и тествани, независимо от средата, в която това се случва. Много полезна функционалност е създаването на части от екрана. Така лесно можем да дефинираме един хедър/футър или специално меню за нашия уебсайт, който да е еднакъв по всичките ни екрани и при промяна на едно място, това да рефлектира навсякъде, където е използван този скрийнпарт. Имаме възможност да правим експорт до png-та или pdf, при което обаче се губи интерактивността, но по интересното е, че може да споделяме прототипа си и да го качваме на собствен или Infragistics сървър, за да правим дистанционно тестване без никакви усложнения. Просто изпращаме линк към прототипа на всички стейкхолдъри и участници в теста, а те получават напълно функционален прототип за оценка.
- Нека ви покажа как можем набързо да скалъпим един прототип, като за отправна точка ще ползвам мобилното приложение Inbox на Google. Нека видим как би изглеждало то като един мобилен прототип на Indigo Studio каквато би била стъпката непосредствено преди да предоставим документация и прототип на софтуерните разработчици, за да имаме продукт след известно количество работа.
- Indigo Studio е ваше, нека упражнението започне. Имате 55 мин за работа
- Добре, а сега нека разгледаме едно друго мобилно приложение. Имаме задача от клиент да изградим апп за нарушенията по пътищата. След брейнсторминг, user research по софийските таксита и много интервюта със съвестни граждани роптаещи против своеволията по улиците, ние сме изградили една концепция във формата на хартиен прототип. След което сме се срещнали с още будни граждани и те са ни дали обратна връзка, която ние сме обобщили и стигнали до следното:
- Това са т.нар. болни точки на нашите потребители в прототипа, който сме тествали с тях. Ние сме решили като следваща стъпка да изградим интерактивен уайърфрейм, който се съобразява с дизайна на хартиения прототип от една страна и получената обратна връзка при тестовете от друга. Сега ще ви раздам и копие от хартиения прототип и фийдбека по него, за да ви е по-лесно да се ориентирате в задачата.
- Това е едно приложение за поддръжка на автомобила, което ни позволява да следим „здравето“ му. Този апп показва дигиталния експириънс на един потребител, който иска да оправи спуканата си гума в най-близкия сервиз. Както сами виждате не е реализирана цялата функционалност а само част от нея като: Зареждане с гориво в секцията с разход на гориво като анимиран овърлей Диагностициране на проблема на автомобила Информация за спецификата на проблема Локализиране на сервиз на картата Запазване на час по телефона Посещение за ремонт Последователност от стъпки във връзка със самият ремонт Тук имаме един процес който следва един тестван процес за отстраняване на проблема напълно. Тестваме дълбочина, а не широчина чрез този прототип и изкуствено ограничава изборът (решенията), които потребителят е необходимо да направи.
- Това е един прототип на приложение, което ни позволява да следим разходите си. Както сами виждате не е реализирана цялата функционалност а само част от нея като: Добавяне, редакция, изтриване на разходи Разглеждане на разходи по категория Графика на разходите от началото на годината Поставяне на ограничения за разхода Това, че не всичката интерактивност е добавена се прави с целта да се насочи потребителя в определен уъркфлоу, който желаем да тестваме. Също така избягваме проблема с прекалено завършен прототип, който може да подведе мениджърите предполагайки, че продуктът е едва ли не готов.
- Това е и краят на моя уъркшоп. Разказах ви за това какво точно представлява уайърфрейминга и какви проблеми решава, показах ви по-специално каква функционалност ни предоставя Indigo Studio и демонстрирах част от нея, след което направихме едно интересно упражнение, за да се „сблъскаме“ със самия продукт и за финал ви показах два добре направени прототипа, обръщайки внимание на силните им страни.
- Тук има и малко полезни връзки с повече ресурси като видеа за създаването на подобни прототипи с Indigo Studio, интересни статии и тутуориали специални за iOS мобилни приложения, както и за респонсив уеб. Има линк с обща информация за самия продукт както и функционалностите, които той предлага и това, на което е способен.
- Благодаря ви за съдействието и по мое мнение се получи един прекрасен уъркшоп. Ако има върпоси, на които не съм успял да отговоря сега или вие не сте имали смелостта да зададете може да го направите сега или да използвате социалните мрежи, за да ме откриете и да ги зададете.