As presented at DevWeek 2014 http://devweek.com/
Prototyping is often a misunderstood subject, especially when it comes to mobile apps. It is often mistaken for wire-framing or detailed project specifications. In this session, Ardeleanu will explore the tools and techniques available to create an agile environment where the client can participate in the process. He will take an app from the idea stage and progress it through the list of features, writing the Application Definition Statement (ADS), sketching, paper prototyping and eventually on to something that can run on the actual device. Clients love that! And it could save your bacon.
33. What to expect?
‣ “I have this idea...”
‣ I want to build the next Angry Birds
‣ I want to build an app that does ...
‣ Client brief
‣ List of requirements
‣ Wireframes / Sketches
34. New paradigms
‣ Constraints
‣ small size
‣ limited hardware
‣ one screen at a time
‣ one application at a time *
‣ touch input
‣ Interactions
‣ gestures
‣ shake
‣ orientation
‣ audio switch, volume buttons
‣ home & power buttons
38. Application Definition Statement
“A concise, concrete declaration of the app’s
main purpose and its intended audience.”
https://developer.apple.com/library/ios/documentation/
UserExperience/Conceptual/MobileHIG/
39. Solve real problems
"An app must solve a user's problem
clearly and elegantly."
Eric Hope, User Experience Evangelist, Apple
57. Wireframing
‣ identify main areas of the app
‣ identify screens
‣ identify relations between screens
‣ start from the simplest things and build up
‣ start from the main task of the app
58. Demo app: Timers
‣ simple countdown timer countdown
‣ CRUD for timer
‣ local notifications for when the timer is up
‣ collection of timers (i.e. sequences)
‣ CRUD for collections
60. ‣ simple countdown timer countdown
‣ CRUD for timer
‣ local notifications for when the timer is up
‣ collection of timers
‣ CRUD for collections
Sketching
61. ‣ simple countdown timer countdown
‣ CRUD for timer
‣ local notifications for when the timer is up
‣ collection of timers
‣ CRUD for collections
Sketching
62. ‣ simple countdown timer countdown
‣ CRUD for timer
‣ local notifications for when the timer is up
‣ collection of timers
‣ CRUD for collections
Sketching
63. ‣ simple countdown timer countdown
‣ CRUD for timer
‣ local notifications for when the timer is up
‣ collection of timers
‣ CRUD for collections
Sketching
64. ‣ simple countdown timer countdown
‣ CRUD for timer
‣ local notifications for when the timer is up
‣ collection of timers
‣ CRUD for collections
Sketching
65. ‣ simple countdown timer countdown
‣ CRUD for timer
‣ local notifications for when the timer is up
‣ collection of timers
‣ CRUD for collections
Sketching
66. ‣ CRUD for timer
‣ local notifications for when the timer is up
‣ collection of timers
‣ CRUD for collections
Sketching
67. ‣ CRUD for timer
‣ local notifications for when the timer is up
‣ collection of timers
‣ CRUD for collections
Sketching
68. ‣ CRUD for timer
‣ local notifications for when the timer is up
‣ collection of timers
‣ CRUD for collections
Sketching
69. ‣ local notifications for when the timer is up
‣ collection of timers
‣ CRUD for collectionsSketching
70. ‣ local notifications for when the timer is up
‣ collection of timers
‣ CRUD for collectionsSketching
71. ‣ local notifications for when the timer is up
‣ collection of timers
‣ CRUD for collectionsSketching
74. Sketching
‣ start from the most important task
‣ identify main areas of the app
‣ identify screens
‣ identify relations between screens
!
‣ Don’t worry! You won’t get it right the first time
90. Web based
‣ (almost) No technical skills required
‣ easy to communicate with the client
‣ possible offline access
‣ can run on the device
‣ but can deviate from the native experience
91.
92.
93. Visual tools
‣ Design rich
‣ Visually correct
‣ Slightly harder to communicate
‣ Might lead to confusions
97. Presentation based
‣ Use your existing skills
‣ The client can possibly create/amend these
‣ Offline access
‣ Easy to communicate
‣ Can run on the device
109. Storyboards
The good:
‣ use your existing skills
‣ deploy on device
‣ wysiwyg
‣ can be built upon
The not so good:
‣ must be a developer
‣ ad-hoc distribution
‣ client must have a device
‣ collaboration painful