Super Apps

Software Design for Handheld Devices

www.atomicrhubarb.com/handheld Lecture 8 – October 15, 2012

Super Application Development

Rim’s “Super Apps”

“A new class of mobile applications that make you wonder how you ever lived

without them”

“The kinds of apps that people love, that they use every day because they offer

such a seamless, integrated, contextualized and efficient experience.”

Super App

•  Well Designed •  With thought on HOW the user will use it. •  A set of guidelines on how to make apps

that take advantage of all that the mobile device offers (hardware and software and network)

Super App

•  Thoroughly Designed Apps •  Clever Apps •  Intuitive Apps •  Smart Apps

What sort of attributes do you think a ‘Super App’ should

have?

A Super App is …

•  Always-on

•  Highly Contextualized

•  Tightly Integrated with the Native Apps

•  Social and Connected

•  Proactive and Notification-driven

•  Designed for Efficiency

Dan’s Additions

•  Takes full advantage of modern hardware capabilities

•  Provides a rich multimedia experience

•  Provides a user interface that is logical, easy to use, and complete.

•  Connects diverse capabilities to provide a unique result

•  Looks like it belongs

Designing For Seamlessnes - Google’s Android Guidelines

•  Don't Drop Data •  Don't Expose Raw Data •  Don't Interrupt the User •  Got a Lot to Do? Do it in a Thread •  Don't Overload a Single Activity Screen •  Extend System Themes •  Design Your UI to Work with Multiple Screen

Resolutions •  Assume the Network is Slow •  Don't Assume Touchscreen or Keyboard •  Do Conserve the Device Battery

Super Apps

•  Not every applications needs to do ALL of these.

•  General guidelines •  Intended to help developers improve the

overall quality of their applications.

The Always-on Experience

•  App starts at device power on and run in background

•  Was not possible older devices with J2ME –  No background processes. –  No platform specific capability

•  Listen and react to events, listen for inbound push data

•  Download content before the user needs it •  Generate notifications •  Share data with other third-party apps

Start on device power-on

•  Changes the architecture of your application.

•  Do you want the GUI to run on power-on or a service library?

Sensor Events

•  We could query the sensors (accelerometer for example) to determine when the device was not being used (face down, no motion) and use that time to receive data, or perform a complex calculation, or something.

Push

•  We could use the background task to receive push events from a push server.

•  What is push?

Push

•  Push technology, or server push, describes a style of Internet-based communication where the request for a given transaction is initiated by the publisher.

•  It is contrasted with pull technology, where the request for the transmission of information is initiated by the receiver or client.

Why use Push?

•  Use more efficient strategies than polling. Polling techniques waste battery power, since these techniques are designed to regularly open a connection to check for new data, even when there is no new data available.

•  Bring information directly to the user's attention. The user does not need to initiate the transfer the content to the device, the app receives the content from the server, and only needs to notify the user when the content is available on the device.

•  Deliver content in a timely manner. With push technology, content can be sent as soon as it is available.

Why is push more efficient than pull (polling)?

Push No#fica#on  

Data  request/Transmit  

Pull Polling  

Data  request/Transmit  

Mobile  Transmi9er  and  receiver  on  constantly    (each  poll)  

Mobile  Receiver  on,  transmi9er  on  only  aCer  it  receives  a  push  message.    

Highly Contextualized

•  Added to the context menus of other capability. – Multiple points of entry to run app. – Knows the point of entry

•  Provide users with useful information when and where they need it.

•  Provide information, content and services that are relevant in the current context.

Examples

•  Date, Time •  Incoming call •  Location •  Weather events •  News events •  Power events •  Phone in/out holster •  Flip open/closed •  Slide open/closed/in motion •  Available memory size. •  USB connected.

Tight Integration with Native Applications

•  Gets needed data/function from contact list, email, browser, twitter/facebook clients, location.

•  You don’t have to enter data twice(friends in Facebook and Friends in contact list)

•  You don’t need to remember URLs and type them into a browser (you click on them and the app starts the browser at the URL).

Examples

•  Add menu items to the messages application, calendar or address book to provide one-click access to the app

•  Inject custom messages into the messages application with a unique icon so users can see alerts and updates within their messages list

•  Invoke the messages application, address book, calendar, BlackBerry Maps, phone and media player with relevant contextual data

Social and Connected

•  Incorporates social networking into application.

•  Keep users in touch by building social networking and sharing into your app.

•  Uses the network (its on a network all the time)

•  Takes advantage of the network responsibly.

Examples

•  Invoke the messages application, SMS, MMS or instant messaging clients to allow users to share content from your app with contacts in their address book

•  Leverage peer-to-peer communications or server-initiated push to share information within your app between two or more users

•  Register with the camera to become the default handler for picture or video sharing

Proactive and Notification-driven

•  Near real time alerting and notification of events.

•  Keep users informed by notifying them when certain events occur or relevant push data arrives on the smartphone.

Examples

•  Initiate a custom audible notification or vibrate the smartphone

•  Change the status of its Home screen icon •  Inject a custom notification into the top

banner of the smartphone Home screen •  Inject a custom message into the

messages application •  Present users with a pop-up dialog screen

Designed for Efficiency

•  An app that quickly drains the smartphone battery is an app that quickly gets deleted. Develop your app so that its respectful of device resources:

•  Battery life •  Network capacity •  Cellular data costs

Examples

•  Leverage push technology instead of network polling

•  Download large amounts of data in the background over Wi-Fi instead of the cellular network

•  Ensure your app goes to sleep when waiting in the background

Takes full advantage of modern hardware capabilities.

•  Uses the geo-location API to its advantage, uses the compass & magnetometer & accelerometer to enhance to user experience

•  Takes advantage of the capabilities of a touchscreen

•  Also provides for alternative inputs (keyboard, joystick, gestures, motions)

Examples

•  Adapts to the screen size of the device dynamically.

•  Is aware of device rotation. •  Use geolocation capability rather than

prompting for city, zip, etc •  Use accelerometers for tilt to activity

sensing •  Know about platform specific buttons/

input devices

Provides a multimedia experience

•  Links to you-tube, lyrics database, images database, when appropriate to enhance the users experience.

•  Scanning data and turning URLs, phone numbers, etc into Hyper-links

•  Recognizing names of contacts and linking to email or contact list or facebook.

Examples

•  MP3 player links to artists web sites, lyrics databases

•  Technical apps link to corporate web sites, or wikipedia

•  Camera app links to flickr geo-tagged images for similar views or unique views

User interface that is logical, easy to use, and complete.

•  UI should be designed for minimum interaction (no complex menus).

•  Easy to navigate using 1 finger or thumb.

•  Logically similar to native applications (same setting, exit, about menu options)

•  Fits on the display.

Connects diverse capabilities to provide a unique result.

•  A mashup. •  Give me an application that is better

than the sum of the parts. •  Use multiple sources of data and

combine them to give me a new capability

What is a Mashup?

Mashup

•  MASHUP - a Web page or application that uses and combines data, presentation or functionality from two or more sources to create new services.

•  The term implies easy, fast integration, frequently using open APIs and data sources to produce enriched results that were not necessarily the original reason for producing the raw source data.

•  http://www.programmableweb.com/

Look Like You Belong

•  Use the system theme, colors, patterns. •  Behave like the system apps (buttons,

menus, function) •  Unique might be interesting, but only

for a few minutes. •  On a BlackBerry, look and behave like a

BlackBerry app. On an Android, look and behave like an android app. On an iPhone, look and behave like an iPhone all.

References

1.  Super App Development Guide

Lots of HandHeld Devices

This means ... •  Many different screen sizes, shapes,

resolutions, colors •  Many different keyboard/keypad

layouts •  Many different means of navigation

Range Of Mobile Screen Sizes

In general •  Phone manufacturers desire to increase

the device capability (bigger, brighter screen) and lower the cost of manufacturing (cheaper overall device).

•  Continuous evolution in screen construction.

•  Increasing screen size in mobile devices (physical size and resolution).

Screen physical Size

iPhone 5 1136 x 640

4” diag

Samsung Galaxy S III 1920 x 1080

4.8” diag

Techniques for increasing the effective screen size

•  Zooming •  Scrolling / Panning •  Windows •  Dialog boxes •  Paging •  Rotating

Differences in Menus •  Pull down •  Popup •  Column/Headers •  Tabs •  Nested

Where to place navigation …

Ok    Good    Not  so  good  

What do you think, is this a good idea?

Common Layouts

From the NOKIA S40 style guide

Android style …

Paging

Consider Orientation

Take Note

Menu Design •  Keep it as simple as possible. •  Limit choices. Take the content that’s

relevant to a mobile user and discard the rest.

•  Create a simple site drill-down architecture, nesting content into well-labeled categories.

Menu Design This menu design might be easy for a mobile user to get lost in.

Better Menu

This menu design is more appropriate for a mobile device

Menus •  Limit menu categories as much

possible. •  Prioritize menu items by activity or

popularity

Design Considerations: Simplicity

•  Show the most frequently used controls directly on the interface

•  Hide secondary controls in menus

•  Automate as many processes as you can

•  Show only relevant data

•  Group related tasks

Design Considerations: Simplicity

•  Allow users to navigate to data by selecting options

•  Reduce the amount of data entry users must perform

•  Reduce number of steps needed to complete a task

Simplicity

•  Functionality Versus Simplicity •  The more functionality included in a

product, the more difficult it is to learn and use.

•  Use the 80/20 rule: Identify the 20% of the functionality that will meet 80% of the consumers’ needs and optimize your design accordingly.

Design Considerations: Consistency

•  Reuse existing user interface concepts and design guidelines.

•  Use controls, such as scroll bars, that behave similarly regardless of context.

•  Extend existing concepts to cover new situations.

•  Design a new control or concept only if you cannot extend your solution.

Design Considerations: User Control

•  Allow users to complete tasks in fewer steps.

•  Provide ways for users to customize your application.

•  Give users the opportunity to reverse or continue their actions despite non-critical errors.

•  Allow programs to be interrupted

Design Considerations: User Control

•  Supply default values for expected replies.

•  Don't make the user enter data twice.

•  Save data between sessions

•  Provide options for personalization.

Make Everything Interruptible

•  Enable consumers to interrupt an application no matter what state it is in. Assume they will do it anyway.

•  If a consumer is in the middle of an activity, the consumer should be able to start over at the beginning.

•  Allowing consumers to interrupt anything keeps the control of the product in the hands of the consumer.

Design Considerations: Feedback

•  Users need and should receive clear and immediate feedback on their actions.

•  Two types of Feedback are:

•  Visual Feedback achieved through:

•  Messages

•  Animation

•  Audio Feedback achieved through:

•  A sound or voice message.

•  Alert messages.

Design Considerations: Aesthetics

•  Select interface elements (icons, buttons) carefully.

•  Create a neat and orderly appearance

•  Establish a design strategy and style convention before you begin development

•  Respect user settings and preferences

•  Select the fewest elements needed to communicate information

Know Your User

1. Early and continual user testing. Designers should conduct sufficient testing so that they can detect usability errors as early as possible.

2.  Integrated design. All aspects of usability (user interface, help system, documentation) should evolve in parallel, rather that sequentially.

Know The Platforms

1. Early and continual user testing on a variety of platforms. Choose platforms that will demonstrate the full range of capability (screen size, input method, orientation, memory limits, processor speed)

2. Use the platforms. Know what is conventional use and what is not.

3. Allow user control where appropriate (orientation, left-hand vs right-hand, etc).

Good Resources

Good Resources

UI Guidelines for mobile and tablet web app design

•  http://www.mobilexweb.com/blog/ui-guidelines-mobile-tablet-design •  iOS Human Interface Guidelines (iPhone, iPod and iPad) - PDF version •  iPad Human Interface Guidelines iPad HaIG was merged with iPhone in iOS HIG (see above) •  UI Guidelines for BlackBerry 6.0 Smartphones – PDF version •  UI Guidelines for BlackBerry 4.x, 5.x Smartphones – PDF version •  Android User Interface Guidelines •  Nokia N9 & Meego 1.2 Harmattan UX Guidelines •  UI Guildelines for BlackBerry PlayBook – PDF version •  BlackBerry Browser Content Design Guidelines (PDF) •  Motorola’s Best Practices for Android UI •  Symbian^3 UI Style Guidelines (PDF) •  Symbian UI Wiki •  Bada Application UI Guide •  Sony Ericsson UI Rulebook •  UI Guidelines for Windows Mobile •  Windows Touch UI Guideline •  UI Design & Interaction Guide for Windows Phone 7 (PDF) •  webOS UI Guidelines •  Hildon UI Guidelines for Nokia Maemo •  MeeGo UI Design Guidelines (shared by Mark Jones) •  More tips on mobile web design on the Programming the Mobile Web book.