mobile user interface development challenges and trade-offs

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.



Agenda

 Mobile Apps in the Real World: ShopSavvy®

 Mobile HTML5 Tools and Toolkits – Introducing Maqetta – Mobile UI Visual Designer



Mobile Apps in the Real World: ShopSavvy®

Alexander Muse CEO ShopSavvy Inc.



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



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



ShopSavvy Versions (Android)



ShopSavvy Versions (iOS)



ShopSavvy Version (WP7)



ShopSavvy ~ What’s Next?



Platform Philosophies

Raising Developers

Android iOS




  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




  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.




  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.



Human Interface Guides

Android iOS WP7



Human Interface Guides

  Android – HIG 2008

– HIG 2011

  iOS – HIG Evolution 2008-Present

  WP7 – HIG 2011



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



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



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)



The Back Button and Other Differences

Complete Ground Up Builds



www.ibm.com/software/rational



Mobile HTML5 Tools and Toolkits

Jon Ferraiolo Distinguished Engineering IBM SWG Emerging Technology



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



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



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



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



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



Visual UI Construction

Construct Mobile UI with Rich Page Editor



Preview in browser

Perform device specific tests in the Mobile Browser Simulator: supports PhoneGap and Worklight client API



Debug web code

Remote Debug with Desktop browser from inside the workbench



Native build and test



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



Rational Team Concert Integration

Worklight Build Ant

RTC Code Repository SDK

Cmd Line



Introducing Maqetta – Mobile UI Visual Designer



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



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



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



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!



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.



© 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.
