Designing a Mobile App from Paper to Delivery | mlearndevcon
117
Nick Floro [email protected] Twitter.com/NickFloro Designing a Mobile App from Paper to Delivery Designing Mobile from Paper to Delivery mLearnDevCon 2013 [email protected] 06/20/13 1 of 117
-
Upload
nick-floro -
Category
Business
-
view
102 -
download
0
description
Most companies that journey into development rush in without thinking about the user experience. This session will break it all down and provide the foundation knowledge that is needed to build better mobile learning. This session will cover the 10 key ingredients that will make your mobile app a learning success. You’ll learn design principles from user interface to user experience and how get the best in class. You look at several ways to prototype apps prior to programming, from paper to interactive. You will see the techniques and tools that you can use to test your app prior to programming. You will also look at the key types of apps and get dozens of ideas to get you started and to apply when you back to your office. This is a must-see session for anyone involved in building mobile learning. This session will get you started on the right road to mobile app creation. In this session, you will learn: - What makes a successful mobile app - The key design ingredients - The difference between UI and UX and why they are critical ingredients in your development - How to go from paper to prototype to test your ideas and get management support - Quickly designing options and testing content prior to programming - Latest tools that can be used for developing Audience: Novice learning professionals with a basic understanding of mobile apps and devices. Technology discussed in this session: iOS, Android, Windows; wireframing and design tools, pad of paper, Keynote, PowerPoint, Sketchy, iMockUps, cloud-based apps, Balsamiq, Photoshop prototyping techniques reviews and feedback.
Transcript of Designing a Mobile App from Paper to Delivery | mlearndevcon
Nick [email protected]/NickFloro
Designing a Mobile App from Paper to Delivery
Designing Mobile from Paper to Delivery mLearnDevCon 2013
[email protected] 06/20/13 1 of 117
Define
Design
Develop
Deliver
ProcessDesigning Mobile from Paper to Delivery mLearnDevCon 2013
[email protected] 06/20/13 2 of 117
Content Strategy
Designing Mobile from Paper to Delivery mLearnDevCon 2013
[email protected] 06/20/13 3 of 117
desktoptabletphone
Content Strategy
Designing Mobile from Paper to Delivery mLearnDevCon 2013
[email protected] 06/20/13 4 of 117
Content Strategy
Designing Mobile from Paper to Delivery mLearnDevCon 2013
[email protected] 06/20/13 5 of 117
Create a Road Map
Designing Mobile from Paper to Delivery mLearnDevCon 2013
[email protected] 06/20/13 6 of 117
desktoptabletphone
Think Mobile First
Designing Mobile from Paper to Delivery mLearnDevCon 2013
[email protected] 06/20/13 8 of 117
desktoptabletphone
Think Mobile First
Designing Mobile from Paper to Delivery mLearnDevCon 2013
[email protected] 06/20/13 9 of 117
desktoptabletphone
Think Mobile First
Progressive Enhancement
Designing Mobile from Paper to Delivery mLearnDevCon 2013
[email protected] 06/20/13 10 of 117
7 Questions to Define a Project
What is the goal?
Who is the audience?
What is the timetable?
What technology?
What is the budget?
Does the content exist?
How will they use it?
Designing Mobile from Paper to Delivery mLearnDevCon 2013
[email protected] 06/20/13 13 of 117
What is
Design?
Designing Mobile from Paper to Delivery mLearnDevCon 2013
[email protected] 06/20/13 14 of 117
How it works.
www.apple.com/designed-by-apple/
Designing Mobile from Paper to Delivery mLearnDevCon 2013
[email protected] 06/20/13 15 of 117
How should we
Design?
Designing Mobile from Paper to Delivery mLearnDevCon 2013
[email protected] 06/20/13 16 of 117
Focus on the
Audience
Designing Mobile from Paper to Delivery mLearnDevCon 2013
[email protected] 06/20/13 17 of 117
Content is Key
Designing Mobile from Paper to Delivery mLearnDevCon 2013
[email protected] 06/20/13 20 of 117
simplify.
write it down
cut in halfcut it again
breakcut it by half
then done
Designing Mobile from Paper to Delivery mLearnDevCon 2013
[email protected] 06/20/13 21 of 117
Sketching where ideas begin
Designing Mobile from Paper to Delivery mLearnDevCon 2013
[email protected] 06/20/13 22 of 117
Quick Prototyping Techniques
Tools:
• Fujitsu SCANSNAP – Scan direct to pdf– includes full Acrobat Pro
Designing Mobile from Paper to Delivery mLearnDevCon 2013
[email protected] 06/20/13 24 of 117
Just Sketch It!
Designing Mobile from Paper to Delivery mLearnDevCon 2013
[email protected] 06/20/13 25 of 117
Prototyping test driving your idea
Designing Mobile from Paper to Delivery mLearnDevCon 2013
[email protected] 06/20/13 29 of 117
Tools:
• Wireframes– Powerpoint / Keynote
Quick Prototyping Techniques
Designing Mobile from Paper to Delivery mLearnDevCon 2013
[email protected] 06/20/13 30 of 117
keynotekungfu.com
Designing Mobile from Paper to Delivery mLearnDevCon 2013
[email protected] 06/20/13 31 of 117
Custom Template in Keynote
Designing Mobile from Paper to Delivery mLearnDevCon 2013
[email protected] 06/20/13 32 of 117
Paper by FiftyThree
Designing Mobile from Paper to Delivery mLearnDevCon 2013
[email protected] 06/20/13 33 of 117
Adobe Acrobat
Designing Mobile from Paper to Delivery mLearnDevCon 2013
[email protected] 06/20/13 34 of 117
POP - Prototyping on Paper
Designing Mobile from Paper to Delivery mLearnDevCon 2013
[email protected] 06/20/13 35 of 117
POP - Prototyping on Paper
Designing Mobile from Paper to Delivery mLearnDevCon 2013
[email protected] 06/20/13 36 of 117
POP - Prototyping on Paper
Designing Mobile from Paper to Delivery mLearnDevCon 2013
[email protected] 06/20/13 37 of 117
POP - Prototyping on Paper
Designing Mobile from Paper to Delivery mLearnDevCon 2013
[email protected] 06/20/13 38 of 117
POP - Prototyping on Paper
Designing Mobile from Paper to Delivery mLearnDevCon 2013
[email protected] 06/20/13 39 of 117
Briefs
Designing Mobile from Paper to Delivery mLearnDevCon 2013
[email protected] 06/20/13 40 of 117
balsamiq.com
Designing Mobile from Paper to Delivery mLearnDevCon 2013
[email protected] 06/20/13 41 of 117
Sketchy & iMockUps
Designing Mobile from Paper to Delivery mLearnDevCon 2013
[email protected] 06/20/13 42 of 117
www.teehanlax.com/tools/
Designing Mobile from Paper to Delivery mLearnDevCon 2013
[email protected] 06/20/13 43 of 117
User Interface | UI
Designing Mobile from Paper to Delivery mLearnDevCon 2013
[email protected] 06/20/13 44 of 117
User Interface | UI
Designing Mobile from Paper to Delivery mLearnDevCon 2013
[email protected] 06/20/13 45 of 117
User Experience | UX
Designing Mobile from Paper to Delivery mLearnDevCon 2013
[email protected] 06/20/13 46 of 117
App or Web Delivery
Designing Mobile from Paper to Delivery mLearnDevCon 2013
[email protected] 06/20/13 47 of 117
Google Chrome 31% Yes
Mozilla Firefox 20% Yes
Internet Explorer 7-8 11% No
Internet Explorer 9-10 10% Yes
Apple Safari 15% Yes
iPhone / iPad 4% Yes
Google Android 2% Yes
Other 4% No
Market Share HTML5 Support
Browser Stats 2013
Designing Mobile from Paper to Delivery mLearnDevCon 2013
[email protected] 06/20/13 48 of 117
Web AppServer
Game / SimulationTool
Hybrid
InfoTool
Resources
Designing Mobile from Paper to Delivery mLearnDevCon 2013
[email protected] 06/20/13 49 of 117
Web App Native App
• Use web standards
• Easy to deploy & update
• Support all devices
• Faster development cycle
• Works everywhere
• Requires web connection
• Faster performance
• Unique platform features
• Requires programming
• Deploy via Store models
• iOS / Android / Amazon
Which is right for your project?
Enterprise Deployment
Designing Mobile from Paper to Delivery mLearnDevCon 2013
[email protected] 06/20/13 50 of 117
DEVICE ACCESS
PERFORMANCE & INTEGRATION
MULTIMEDIA
OFFLINE & STORAGECONNECTIVITY SEMANTICS
CSS3
3D, GRAPHICS & EFFECTS
Designing Mobile from Paper to Delivery mLearnDevCon 2013
[email protected] 06/20/13 51 of 117
Responsive DesignDesigning Mobile from Paper to Delivery mLearnDevCon 2013
[email protected] 06/20/13 52 of 117
twitter.github.io/bootstrap/
Designing Mobile from Paper to Delivery mLearnDevCon 2013
[email protected] 06/20/13 53 of 117
foundation.zurb.com
Designing Mobile from Paper to Delivery mLearnDevCon 2013
[email protected] 06/20/13 54 of 117
• bandwidth• input mechanism• context
• form factor
Mobile Factors
Designing Mobile from Paper to Delivery mLearnDevCon 2013
[email protected] 06/20/13 55 of 117
AmazonA Quick Example
Designing Mobile from Paper to Delivery mLearnDevCon 2013
[email protected] 06/20/13 56 of 117
The mobile environmentsingle early failure = non-returning user
Designing Mobile from Paper to Delivery mLearnDevCon 2013
[email protected] 06/20/13 59 of 117
The mobile environmentcrucial first 30-60 seconds usage
Designing Mobile from Paper to Delivery mLearnDevCon 2013
[email protected] 06/20/13 60 of 117
The mobile environmentFewer options
Designing Mobile from Paper to Delivery mLearnDevCon 2013
[email protected] 06/20/13 61 of 117
Graphics Location Storage Speed
Solving Developer Challenges
1997 2013
Designing Mobile from Paper to Delivery mLearnDevCon 2013
[email protected] 06/20/13 62 of 117
mobile
Designing Mobile from Paper to Delivery mLearnDevCon 2013
[email protected] 06/20/13 64 of 117
Example
Designing Mobile from Paper to Delivery mLearnDevCon 2013
[email protected] 06/20/13 68 of 117
Designing Apps
Need to Know
Designing Mobile from Paper to Delivery mLearnDevCon 2013
[email protected] 06/20/13 74 of 117
Android Xoom1280 x 720
Selecting a SizePixels & Aspect Ratio
iPad 3rd gen +2048 x 1536
iPad1024 x 768
Designing Mobile from Paper to Delivery mLearnDevCon 2013
[email protected] 06/20/13 76 of 117
Android Xoom1280 x 720Galaxy SIII
1280 x 720
Selecting a SizePixels & Aspect Ratio
Droid960 x 540
Kindle Fire 71024 x 600
Galaxy Note 21280 x 720
Designing Mobile from Paper to Delivery mLearnDevCon 2013
[email protected] 06/20/13 77 of 117
Android Xoom1280 x 720
HTC Incredible800 x 480
Selecting a SizePixels & Aspect Ratio
iPad1024 x 768
iPhone 4960 x 640
iPhone480 x 320
Galaxy1280 x 720
Designing Mobile from Paper to Delivery mLearnDevCon 2013
[email protected] 06/20/13 78 of 117
Classifying Apps
Designing Mobile from Paper to Delivery mLearnDevCon 2013
[email protected] 06/20/13 79 of 117
Flat Pages
Designing Mobile from Paper to Delivery mLearnDevCon 2013
[email protected] 06/20/13 80 of 117
Apple Weather
Designing Mobile from Paper to Delivery mLearnDevCon 2013
[email protected] 06/20/13 81 of 117
Yahoo Weather
Designing Mobile from Paper to Delivery mLearnDevCon 2013
[email protected] 06/20/13 82 of 117
Yahoo Weather
Designing Mobile from Paper to Delivery mLearnDevCon 2013
[email protected] 06/20/13 83 of 117
Tab Bar
Designing Mobile from Paper to Delivery mLearnDevCon 2013
[email protected] 06/20/13 84 of 117
Apple Clock
Designing Mobile from Paper to Delivery mLearnDevCon 2013
[email protected] 06/20/13 85 of 117
Tree Structure
One
Two
Three
Four
Five
Six
Designing Mobile from Paper to Delivery mLearnDevCon 2013
[email protected] 06/20/13 86 of 117
Tree Structure
< Back
Screen One >
Screen Two >
Screen Three >
Screen Four >
Screen Five >
Screen Six >
Designing Mobile from Paper to Delivery mLearnDevCon 2013
[email protected] 06/20/13 87 of 117
First Aid
Designing Mobile from Paper to Delivery mLearnDevCon 2013
[email protected] 06/20/13 88 of 117
First Aid
Designing Mobile from Paper to Delivery mLearnDevCon 2013
[email protected] 06/20/13 89 of 117
First Aid
Designing Mobile from Paper to Delivery mLearnDevCon 2013
[email protected] 06/20/13 90 of 117
Innovation
>
Designing Mobile from Paper to Delivery mLearnDevCon 2013
[email protected] 06/20/13 91 of 117
evernote
Designing Mobile from Paper to Delivery mLearnDevCon 2013
[email protected] 06/20/13 92 of 117
evernote
Designing Mobile from Paper to Delivery mLearnDevCon 2013
[email protected] 06/20/13 93 of 117
Pulse
Designing Mobile from Paper to Delivery mLearnDevCon 2013
[email protected] 06/20/13 94 of 117
Pulse
Designing Mobile from Paper to Delivery mLearnDevCon 2013
[email protected] 06/20/13 95 of 117
Design for Flexibility
Designing Mobile from Paper to Delivery mLearnDevCon 2013
[email protected] 06/20/13 98 of 117
Testing
Designing Mobile from Paper to Delivery mLearnDevCon 2013
[email protected] 06/20/13 99 of 117
Test on Mobile− iOS 4.x - 6.x
− Android 2.x - 4.x
− Windows 8
− Tablet vs Phablet vs Phone
− Portrait vs Landscape
Test on Windows 8, 7, Vista, XP
- Internet Explorer 6, 7, 8, 9, 10
- Firefox 15-21 +
- Chrome 15 - 19 +
Test on OS X− Safari 4, 5+
− Firefox 15-21 +
− Chrome 20 - 26 +
Testing Code
Designing Mobile from Paper to Delivery mLearnDevCon 2013
[email protected] 06/20/13 100 of 117
Test for Usability
• Have someone with fresh
eyes test drive your site to
make sure it accomplishes
both user goals and site
goals
• Survey
Fresh Eyes
Designing Mobile from Paper to Delivery mLearnDevCon 2013
[email protected] 06/20/13 101 of 117
Capture & Analyze
Designing Mobile from Paper to Delivery mLearnDevCon 2013
[email protected] 06/20/13 102 of 117
Using CoverFlow view and Preview of Graphics
Designing Mobile from Paper to Delivery mLearnDevCon 2013
[email protected] 06/20/13 103 of 117
ResourcesTo help you grow.
Designing Mobile from Paper to Delivery mLearnDevCon 2013
[email protected] 06/20/13 105 of 117
Do you brainstorm?
Useful Tips
• Keep meetings to a hour or less
• Kick-off with goals for the meeting
• Focus on creative ideas
• Keep it positive, no negative feedback or naysayers
• Follow-up session to move concepts forward
Designing Mobile from Paper to Delivery mLearnDevCon 2013
[email protected] 06/20/13 106 of 117
www.smashingmagazine.com
Designing Mobile from Paper to Delivery mLearnDevCon 2013
[email protected] 06/20/13 107 of 117
960.gs
Designing Mobile from Paper to Delivery mLearnDevCon 2013
[email protected] 06/20/13 109 of 117
solidify.com
Designing Mobile from Paper to Delivery mLearnDevCon 2013
[email protected] 06/20/13 110 of 117
reflectorapp.com
Designing Mobile from Paper to Delivery mLearnDevCon 2013
[email protected] 06/20/13 111 of 117
abookapart.com
Designing Mobile from Paper to Delivery mLearnDevCon 2013
[email protected] 06/20/13 112 of 117
Sketchy & iMockUps
Designing Mobile from Paper to Delivery mLearnDevCon 2013
[email protected] 06/20/13 113 of 117
kuler.adobe.com
Designing Mobile from Paper to Delivery mLearnDevCon 2013
[email protected] 06/20/13 114 of 117
Adobe Kuler kuler.adobe.com
Designing Mobile from Paper to Delivery mLearnDevCon 2013
[email protected] 06/20/13 115 of 117
Don’t Settle
Designing Mobile from Paper to Delivery mLearnDevCon 2013
[email protected] 06/20/13 116 of 117
Thank You
Nick [email protected]/NickFloro
Download the Presentation at:http://www.slideshare.net/nickfloro
Designing Mobile from Paper to Delivery mLearnDevCon 2013
[email protected] 06/20/13 117 of 117
