Pitchcoachingrheinlandpitchpublic 130724124348-phpapp02-130929071901-phpapp02
Mobileuidevchallengesinnovate2012a 120607124912-phpapp02
-
Upload
alexander-muse -
Category
Technology
-
view
102 -
download
0
description
Transcript of Mobileuidevchallengesinnovate2012a 120607124912-phpapp02
Mobile User Interface Development Challenges and Trade-offs
Alexander Muse CEO ShopSavvy Inc.
Jon Ferraiolo Distinguished Engineer, Emerging Technologies [email protected]
Session 1824
© 2012 IBM Corporation 2
The Premier Event for Software and Systems Innovation
Please note
IBM’s statements regarding its plans, directions, and intent are subject to change or withdrawal without notice at IBM’s sole discretion.
Information regarding potential future products is intended to outline our general product direction and it should not be relied on in making a purchasing decision.
The information mentioned regarding potential future products is not a commitment, promise, or legal obligation to deliver any material, code or functionality. Information about potential future products may not be incorporated into any contract. The development, release, and timing of any future features or functionality described for our products remains at our sole discretion.
Performance is based on measurements and projections using standard IBM benchmarks in a controlled environment. The actual throughput or performance that any user will experience will vary depending upon many factors, including considerations such as the amount of multiprogramming in the user’s job stream, the I/O configuration, the storage configuration, and the workload processed. Therefore, no assurance can be given that an individual user will achieve results similar to those stated here.
© 2012 IBM Corporation 3
The Premier Event for Software and Systems Innovation
Agenda
Mobile Apps in the Real World: ShopSavvy®
Mobile HTML5 Tools and Toolkits – Introducing Maqetta – Mobile UI Visual Designer
© 2012 IBM Corporation 4
The Premier Event for Software and Systems Innovation
Mobile Apps in the Real World: ShopSavvy®
Alexander Muse CEO ShopSavvy Inc.
© 2012 IBM Corporation 5
The Premier Event for Software and Systems Innovation
Agenda
Brief History of ShopSavvy® in Pictures
Visualization and Design Philosophies
Human Interface Guides
Screen Dimensions & Density Differences
To Skeuomorph or Not
The Back Button
© 2012 IBM Corporation 6
The Premier Event for Software and Systems Innovation
ShopSavvy Background
Winner of 2008 Google Developer Challenge
First third-party Android app in market
T-Mobile’s Featured Application
Publicity: Super Bowl Commercial, Oprah, Martha Stewart, Jay Leno, Jimmy Kimmel…
Today on iOS, Android, WP7 and Symbian (Nokia)
40M+ Downloads, 1-2M+ Downloads per month
25 person team
Ad based business model – average $500CPM
© 2012 IBM Corporation 7
The Premier Event for Software and Systems Innovation
ShopSavvy Versions (Android)
© 2012 IBM Corporation 8
The Premier Event for Software and Systems Innovation
ShopSavvy Versions (iOS)
© 2012 IBM Corporation 9
The Premier Event for Software and Systems Innovation
ShopSavvy Version (WP7)
© 2012 IBM Corporation 10
The Premier Event for Software and Systems Innovation
ShopSavvy ~ What’s Next?
© 2012 IBM Corporation 11
The Premier Event for Software and Systems Innovation
Platform Philosophies
Raising Developers
Android iOS
© 2012 IBM Corporation 12
The Premier Event for Software and Systems Innovation
Platform Philosophies
iOS = developers fall into the pit of success
Android = developers are free to succeed or fail
WebOS ~ failed because it was a copy of iOS, but much weaker
WP7 ~ watched WebOS and made strict rules, but differentiated
© 2012 IBM Corporation 13
The Premier Event for Software and Systems Innovation
Platform Philosophies
Button hit areas for iOS buttons as in this this case “New Tweet” are larger than the button. This makes it more difficult to have buttons under that button as the Android version does.
© 2012 IBM Corporation 14
The Premier Event for Software and Systems Innovation
Platform Philosophies
Standard button style for iOS generally involves rounded corners while Android and Windows phone feature square corners. See Facebook for iOS vs Facebook for Android.
© 2012 IBM Corporation 15
The Premier Event for Software and Systems Innovation
Human Interface Guides
Android iOS WP7
© 2012 IBM Corporation 16
The Premier Event for Software and Systems Innovation
Human Interface Guides
Android – HIG 2008
– HIG 2011
iOS – HIG Evolution 2008-Present
WP7 – HIG 2011
© 2012 IBM Corporation 17
The Premier Event for Software and Systems Innovation
Screen Dimension & Density Differences
Android – 16 Potential Screen Dimension/
Density Combinations
– 4px Exceptions
iOS – 2 Potential Screen Dimension/Density
Combinations
WP7 – Strict (watched Android challenges)
No Reflow on Mobile
© 2012 IBM Corporation 18
The Premier Event for Software and Systems Innovation
To Skeuomorph or Not
iOS = Skeuomorphism – Stylize everything
– Lots of depth
– More touchable
– Literal UI texture
Android/WP7 = Simple/Flat – ‘No Chrome just Content’
– Less clutter
– Flat
– Huge differentiator
© 2012 IBM Corporation 19
The Premier Event for Software and Systems Innovation
The Back Button and Other Differences
iOS = No Back Button Android = Back Button
Device Shake (not in Android) Swipe in table view (not in Android) Long Press on list view (not in iOS) Touch & hold editable text (Popup
menu with copy past options in Android, display magnified view for cursor positioning in iOS)
Scrolling scrollable area beyond limits (Borders highlight in Android, Bounce effect in iOS)
© 2012 IBM Corporation 20
The Premier Event for Software and Systems Innovation
The Back Button and Other Differences
Complete Ground Up Builds
© 2012 IBM Corporation 21
The Premier Event for Software and Systems Innovation
www.ibm.com/software/rational
© 2012 IBM Corporation 22
The Premier Event for Software and Systems Innovation
Mobile HTML5 Tools and Toolkits
Jon Ferraiolo Distinguished Engineering IBM SWG Emerging Technology
© 2012 IBM Corporation 23
The Premier Event for Software and Systems Innovation
Enterprise Mobile using HTML5
Mobile JavaScript toolkits – Dojo Mobile (open source – backed by IBM)
– jQuery Mobile (open source – contributions from Adobe)
– Sensha Mobile (commercial)
– SproutCore (open source – developers acquired by FaceBook)
PhoneGap - for hybrid web+native
Developer tools – Eclipse JSDT
– IBM Worklight Studio
– Rational Application Developer (RAD)
– WAS Developer Tools for Eclipse (WDT)
Designer tools (for non-programmers) – Adobe: Dreamweaver, Illustrator, Edge, Wallaby, …
– Maqetta
© 2012 IBM Corporation 24
The Premier Event for Software and Systems Innovation
Dojo Mobile 1.7 - http://dojotoolkit.org/features/mobile
Write once, run anywhere
Native look&feel using HTML5/CSS3/JS – Common native mobile widgets and touch gestures available as HTML/CSS/JS components
– For most applications, you can’t tell it’s not native
Styling options – Default native restyling based on runtime device (i.e., when running on iPhone, looks like iPhone)
– Custom CSS themes to match corporate mobile branding standards
Full collection of Enterprise-ready common mobile controls – Common mobile widgets (page headings, lists, switches, edit boxes, date pickers, sliders)
– Large collection of mobile-ready grids, charts and gauges
Application framework features to simplify development
Enterprise-ready – Single distribution (no mix/match), globalization, accessibility, integrated build system, windowed data
© 2012 IBM Corporation 25
The Premier Event for Software and Systems Innovation
PhoneGap
Allows JavaScript access to native device APIs – Camera, phone dialer, contacts, network, …
– JavaScript APIs are write-once, run-anywhere
Automatic platform-specific build tools – Rational products
– build.phonegap.com
Open source at Apache – Major contributions by IBM and Adobe
Links: – Apache Cordova project: http://incubator.apache.org/cordova/
– PhoneGap: http://phonecap.com
© 2012 IBM Corporation 26
The Premier Event for Software and Systems Innovation
IDEs for Mobile Code Construction
IBM Worklight Studio – Includes tools focused on mobile client development with mobile web, hybrid and native approaches – Joins the strength of Worklight Studio and Rational mobile tools – Available only as part of the IBM Mobile Foundation and IBM Worklight
Rational Application Developer (RAD) – Enterprise application development for WebSphere – Advanced programming, cloud, collaboration and code quality tools – Includes mobile web and web 2.0 support – Sold standalone or as a WAS/Tools bundle
WAS Developer Tools for Eclipse (WDT) – Subset of RAD focused on core programming models – Available bundled with WAS – Available unsupported at no charge, or supported for a fee – Includes mobile web and web 2.0 support
© 2012 IBM Corporation 27
The Premier Event for Software and Systems Innovation
Source editing tools
HTML JavaScript Dojo CSS JSON Code Assist x x x x x Validation x x x x x Outline x x x x x
© 2012 IBM Corporation 28
The Premier Event for Software and Systems Innovation
Visual UI Construction
Construct Mobile UI with Rich Page Editor
© 2012 IBM Corporation 29
The Premier Event for Software and Systems Innovation
Preview in browser
Perform device specific tests in the Mobile Browser Simulator: supports PhoneGap and Worklight client API
© 2012 IBM Corporation 30
The Premier Event for Software and Systems Innovation
Debug web code
Remote Debug with Desktop browser from inside the workbench
© 2012 IBM Corporation 31
The Premier Event for Software and Systems Innovation
Native build and test
© 2012 IBM Corporation 32
The Premier Event for Software and Systems Innovation
Adapters
• An Adapter is a transport layer used by the Worklight Platform to connect to various back-end systems.
• Adapters are used for: – Retrieving information
– Performing actions
• Out of the box: – SQL Adapter
– HTTP Adapter (supports both REST and SOAP)
Query Update
data
Data/Result
as JSON Invoke adapter
procedure
SQL WS HTTP
Response
1
2 3
4
JMS CastIron
© 2012 IBM Corporation 33
The Premier Event for Software and Systems Innovation
Rational Team Concert Integration
Worklight Build Ant
RTC Code Repository SDK
Cmd Line
© 2012 IBM Corporation 34
The Premier Event for Software and Systems Innovation
Introducing Maqetta – Mobile UI Visual Designer
© 2012 IBM Corporation 35
The Premier Event for Software and Systems Innovation
Maqetta – HTML5/Dojo Visual Design Tool – desktop and mobile • Application Visualization Tool (UI mockups)
• True WYSIWYG – uses real widgets (vs pictures) • Quick UI sketching – acts as simple drawing tool • Can create live, interactive mockups w/o coding
• Designer/developer workflow • Similar HTML as developers would create by hand • Eclipse-compatible projects
• Team features • Web-based review/commenting • Integration with source code mgmt coming 2012
• Runs in browser (zero install, no plugins) • Each user gets his own workspace in the cloud
• Technology Preview at http://maqetta.org • Core technology is open source at Dojo Foundation • Free “as is” hosting at http://maqetta.org
© 2012 IBM Corporation 36
The Premier Event for Software and Systems Innovation
Maqetta’s mobile UI authoring features
• WYSIWYG authoring inside of device replica • True WYSIWYG – exact device dimensions • Comprehensive library of common mobile widgets • Write-once, run-anywhere mobile apps • Dynamic restyling to match native look/feel
• Multi-screen authoring support • Can subdivide application into series of linked views
• Advanced mobile theme editor (all via GUI) • Modify Dojo’s CSS to match company styling stds
• Web-based review/commenting on mobile Uis
• Developer-ready mobile prototypes • Maqetta authors actual running mobile HTML apps
that work on actual devices • Can be imported into RAD to turn into a production
application
© 2012 IBM Corporation 37
The Premier Event for Software and Systems Innovation
www.ibm.com/software/rational
© 2012 IBM Corporation 38
The Premier Event for Software and Systems Innovation
www.ibm.com/software/rational
© 2012 IBM Corporation 39
The Premier Event for Software and Systems Innovation
We love your Feedback!
Don’t forget to submit your Impact session and speaker feedback! Your feedback is very important to us, we use it to improve our conference for you next year.
Go to impactsmartsite.com from your mobile device
From the Impact 2012 Online Conference Guide: – Select Agenda
– Navigate to the session you want to give feedback on
– Select the session or speaker feedback links
– Submit your feedback
© 2012 IBM Corporation 40
The Premier Event for Software and Systems Innovation
Daily iPod Touch giveaway
Complete your session surveys online each day at a conference kiosk or on your Innovate 2012 Portal!
Each day that you complete all of that day’s session surveys, your name will be entered to win the daily IPOD touch!
On Wednesday be sure to complete your full conference evaluation to receive your free conference t-shirt!
© 2012 IBM Corporation 41
The Premier Event for Software and Systems Innovation
Acknowledgements and disclaimers
© Copyright IBM Corporation 2012. All rights reserved. – U.S. Government Users Restricted Rights - Use, duplication or disclosure restricted by GSA ADP Schedule Contract with IBM Corp.
IBM, the IBM logo, ibm.com, Rational, the Rational logo, Telelogic, the Telelogic logo, Green Hat, the Green Hat logo, and other IBM products and services are trademarks or registered trademarks of International Business Machines Corporation in the United States, other countries, or both. If these and other IBM trademarked terms are marked on their first occurrence in this information with a trademark symbol (® or ™), these symbols indicate U.S. registered or common law trademarks owned by IBM at the time this information was published. Such trademarks may also be registered or common law trademarks in other countries. A current list of IBM trademarks is available on the Web at “Copyright and trademark information” at www.ibm.com/legal/copytrade.shtml Other company, product, or service names may be trademarks or service marks of others.
Availability: References in this presentation to IBM products, programs, or services do not imply that they will be available in all countries in which IBM operates.
The workshops, sessions and materials have been prepared by IBM or the session speakers and reflect their own views. They are provided for informational purposes only, and are neither intended to, nor shall have the effect of being, legal or other guidance or advice to any participant. While efforts were made to verify the completeness and accuracy of the information contained in this presentation, it is provided AS-IS without warranty of any kind, express or implied. IBM shall not be responsible for any damages arising out of the use of, or otherwise related to, this presentation or any other materials. Nothing contained in this presentation is intended to, nor shall have the effect of, creating any warranties or representations from IBM or its suppliers or licensors, or altering the terms and conditions of the applicable license agreement governing the use of IBM software.
All customer examples described are presented as illustrations of how those customers have used IBM products and the results they may have achieved. Actual environmental costs and performance characteristics may vary by customer. Nothing contained in these materials is intended to, nor shall have the effect of, stating or implying that any activities undertaken by you will result in any specific sales, revenue growth or other results.
© 2012 IBM Corporation 42
The Premier Event for Software and Systems Innovation
© Copyright IBM Corporation 2012. All rights reserved. The information contained in these materials is provided for informational purposes only, and is provided AS IS without warranty of any kind, express or implied. IBM shall not be responsible for any damages arising out of the use of, or otherwise related to, these materials. Nothing contained in these materials is intended to, nor shall have the effect of, creating any warranties or representations from IBM or its suppliers or licensors, or altering the terms and conditions of the applicable license agreement governing the use of IBM software. References in these materials to IBM products, programs, or services do not imply that they will be available in all countries in which IBM operates. Product release dates and/or capabilities referenced in these materials may change at any time at IBM’s sole discretion based on market opportunities or other factors, and are not intended to be a commitment to future product or feature availability in any way. IBM, the IBM logo, Rational, the Rational logo, Telelogic, the Telelogic logo, and other IBM products and services are trademarks of the International Business Machines Corporation, in the United States, other countries or both. Other company, product, or service names may be trademarks or service marks of others.
www.ibm.com/software/rational