Mobile User Interface Development Challenges and Trade-offs

Mobile User Interface DevelopmentChallenges and Trade-offsAlexander MuseCEOShopSavvy Inc.Jon FerraioloDistinguished Engineer, Emerging Technologiesjferrai@us.ibm.comSession 1824

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.2 © 2012 IBM Corporation

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 Designer3 © 2012 IBM Corporation

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 Button5 © 2012 IBM Corporation

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 $500CPM6 © 2012 IBM Corporation

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 differentiated12 © 2012 IBM Corporation

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.13 © 2012 IBM Corporation

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.14 © 2012 IBM Corporation

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 Mobile17 © 2012 IBM Corporation

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 differentiator18 © 2012 IBM Corporation

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)19 © 2012 IBM Corporation

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, … –  Maqetta23 © 2012 IBM Corporation

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 data24 © 2012 IBM Corporation

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.com25 © 2012 IBM Corporation

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 support26 © 2012 IBM Corporation

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 API29 © 2012 IBM Corporation

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 Query Response 2 3 Update –  Performing actions data •  Out of the box: –  SQL Adapter SQL WS HTTP –  HTTP Adapter (supports both CastIron JMS REST and SOAP) 1 Data/Result Invoke adapter as JSON 4 procedure32 © 2012 IBM Corporation

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.org35 © 2012 IBM Corporation

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 application36 © 2012 IBM Corporation

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 feedback39 © 2012 IBM Corporation

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!40 © 2012 IBM Corporation

The Premier Event for Software and Systems Innovation Acknowledgements and disclaimers 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. © 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.41 © 2012 IBM Corporation

The Premier Event for Software and Systems Innovation www.ibm.com/software/rational© 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 havethe 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 IBMsoftware. 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 capabilitiesreferenced 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 featureavailability 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 MachinesCorporation, in the United States, other countries or both. Other company, product, or service names may be trademarks or service marks of others. 42 © 2012 IBM Corporation

Mobile User Interface Development Challenges and Trade-offs

by JonFerraiolo on Jun 07, 2012

Accessibility

Categories

Upload Details

Usage Rights

Statistics

Mobile User Interface Development Challenges and Trade-offs Presentation Transcript