Mobile UI Challenges and Trade-offs

Mobile User Interface Development
Challenges and Trade-offs

Alexander Muse
CEO
ShopSavvy Inc.

Jon Ferraiolo
Distinguished Engineer, Emerging Technologies
jferrai@us.ibm.com

Session 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


Agenda

  Mobile Apps in the Real World: ShopSavvy®

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

3


Mobile Apps in the Real World:
ShopSavvy®

Alexander Muse
CEO
ShopSavvy Inc.

4


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

5


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

6


ShopSavvy Versions (Android)

7


ShopSavvy Versions (iOS)

8


ShopSavvy Version (WP7)

9


ShopSavvy ~ What’s Next?

10


Platform Philosophies

Raising Developers

Android iOS

11



  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

12



  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



  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


Human Interface Guides

Android iOS WP7

15


Human Interface Guides

  Android
–  HIG 2008
–  HIG 2011

  iOS
–  HIG Evolution 2008-Present

  WP7
–  HIG 2011

16


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

17


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

18


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


The Back Button and Other Differences

Complete Ground Up Builds

20


www.ibm.com/software/rational

21


Mobile HTML5 Tools and Toolkits

Jon Ferraiolo
Distinguished Engineering
IBM SWG Emerging Technology

22


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

23


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

24


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

25


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

26


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

27


Visual UI Construction

28
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
29


Debug web code

Remote Debug with Desktop browser from inside the workbench
30


Native build and test

31


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
procedure

32


Rational Team Concert Integration

RTC Code
Repository Worklight SDK
Build Ant Cmd Line

33


Introducing Maqetta –
Mobile UI Visual Designer

34


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

35


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

36



37



38


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

39


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


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



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

42

Mobile UI Challenges and Trade-offs

Recommended

Recommended

More Related Content

What's hot

What's hot (19)

Similar to Mobile UI Challenges and Trade-offs

Similar to Mobile UI Challenges and Trade-offs (20)

Recently uploaded

Recently uploaded (20)

Mobile UI Challenges and Trade-offs