This document can be downloaded from www.chetanahegde.in with most recent updates.

1
Notes for Mobile Applications (16MCA53)

MODULE – 1: INTRODUCTION
1.1 PRELIMINARY CONSIDERATIONS
A developer may go for mobile app development because of following reasons –
 Your competitors have mobile apps, but you don’t. So, to improve the business and
to sustain in the market, one may like to go for having a mobile-app.
 Mobile apps make good business sense. One can give good quality service in a
faster time frame.
 Your services would add value to a user’s mobile experience but your website isn’t
mobile friendly.
 Do you need a mobile application or a mobile website?

1.2 COST OF DEVELOPMENT

Mobile app development costs related to hardware and software. The developer team
needs devices to test the software on. And if you want to deploy your application to any
public market, then your company will need accounts on the various markets (these often
renew annually).

1.2.1 Hardware
To develop good mobile apps:
a. Need an intel based Mac:
 Can run Windows on them either virtually or on the bare metal.
 Expect to spend between $800 to $1600
b. Need multiple monitors
 When debugging any application requires 3 machines
 Emulator/simulator
 My Dev Tool (IDE)
 Web browser
 Having access to all of this information at once prevents context switching for
a developer.
c. Examples of devices you can use to test the various platforms instead of emulator:
 Android 2.2 (Froyo): Motorola Droid 2
 Android 3.0 Tablet: Samsung Galaxy Tablet
 Apple iPod Touch: iPod Touch 3rd Generation
 Apple iPhone (versions 3.x and 4.x) (cell service): iPhone 3GS
 Apple iPhone (versions 4 and greater) (cell service): iPhone 4
 Apple iPad (WiFi or 3G for cell service testing): iPad 1
 Apple iPad (with camera): iPad 2 or iPad 3
 Windows Phone 7: Samsung Focus

1.2.2 Software
When developing mobile applications, there are few overlaps when it comes to software.
To develop for iOS you need a Mac. To develop for BlackBerry you need Windows. For

By: Dr. Chetana Hegde and Rajatha S, RNS Institute of Technology, Bangalore – 98
 This document can be downloaded from www.chetanahegde.in with most recent updates. 2
Notes for Mobile Applications (16MCA53)

Java-based frameworks use Eclipse. Building HTML for PhoneGap can be done in your
text editor of choice. Table 1.1 shows software needed for development.

Table 1.1 Software needed for development

Window Phone 7 Windows Phone SDK
Visual Studio Express
Expression Blend for Windows Phone
iOS xCode 4, iOS SDK
xCode 4.1, iOS SDK
(on Mac OS X 107)
Android Eclipse, Android SDK
BlackBerry BlackBerry Eclipse, BlackBerry Plugin,
BlackBerry Simulator (only
works on Windows)
Titanium Titanium Studio, Titanium Mobile SDK
+ Android software + iOS software
PhoneGap PhoneGap Plugin + iOS software (Mac only) +
Android software +
Windows Phone 7 software (Windows only)
Any Framework Text Mate ( Mac)
Text Editors Notepad++ (Windows)

1.2.3 Licenses and Developer Accounts

Table 1.2 shows the information regarding various accounts necessary to develop mobile
app. One has to pay some amount for developer accounts per year.

Table 1.1 Software needed for development

Platform URL Remarks
BlackBerry http://us.blackberry.com/developers/
appworld/distribution.jsp
Titanium https://my.appcelerator.com/auth/
signup/offer/community
Windows Dev http://create.msdn.com/ Can submit unlimited paid apps, can
Marketplace en-US/home/membership submit only 100 free apps. Cut of
Market Price to Store: 30%
Apple iOS http://developer.apple.com/ Can only develop ad-hoc applications
Developer programs/start/standard/ on up to 100 devices. Developers
create.php who publish their applications on the
App Store will receive 70% of sales
revenue, and will not have to pay any
distribution costs for the application.
Android https://market.android.com/ Application developers receive 70% of
Developer publish/signup the application price, with the
remaining
30% distributed among carriers
and payment processors.

By: Dr. Chetana Hegde and Rajatha S, RNS Institute of Technology, Bangalore – 98
 This document can be downloaded from www.chetanahegde.in with most recent updates. 3
Notes for Mobile Applications (16MCA53)

1.2.4 Documentation and APIs

Following are links to the respective technologies’ online documentation and APIs. This will
be the location for the latest information in the respective technology
 MSDN Library: http://msdn.microsoft.com/enus/library/ff402535(v=vs.92).aspx
 iOS Documentation: http://developer.apple.com/devcenter/ios/index.action
 BlackBerry Documentation: http://docs.blackberry.com/en/developers/?userType=21
 Android SDK Documentation: http://developer.android.com/reference/packages.html
and http://developer.android.com/guide/index.html
 PhoneGap Documentation: http://docs.phonegap.com/
 Titanium API Documentation: http://developer.appcelerator.com/apidoc/mobile/latest

1.3 IMPORTANCE OF MOBILE STRATEGIES IN BUSINESS WORLD

 If potential customers cannot reach your services, they are lost potential customers.
Smartphones tablets, and other nontraditional devices are pervasive in the market.
 The responsibility of developers is to help customers get a product anywhere.
 Whether you’re a content provider, product company, or service company,
expanding product reach is necessary. And one of the most effective ways to reach
farther is to simplify a message so that it can be delivered to a wider audience.
 As of September 2011, Nielsen reports that 40 percent of all mobile consumers in
the United States over the age of 18 have smartphones
 Wired states as of November 2011 that global smartphone usage has reached 30
Percent

Why is Mobile Development Difficult?

 Mobile development is difficult because the paradigms of design and functionality
differ between it and types of development that have existed for decades.
 It is still new, the technologies change rapidly, and not all of the answers are known.
What makes a great app different from a good app? Design? Utility? These are all
things to be mindful of while developing your app.
 The limitations when looking at the resolution offerings made by Apple iOS devices,
but these strict requirements afford developers dimensions they can take for
granted.
 Android development, there are eleven standard potential configurations. Not all
potential resolutions are actively being developed and produced.
 They understand the difficulty of accounting for all the different sizes when creating
quality applications.

MOBILE MYTHS
There are many myths associated with mobile application development.
Myth #1: It is inexpensive to develop a mobile solution.
This does not include any development time, design time, and deployment time, or any
potential money lost by taking too long to get to market. Iterative design and development
can be expensive. Finding a happy medium is necessary to be successful when developing
a mobile solution.

By: Dr. Chetana Hegde and Rajatha S, RNS Institute of Technology, Bangalore – 98
 This document can be downloaded from www.chetanahegde.in with most recent updates. 4
Notes for Mobile Applications (16MCA53)

Myth #2: It’s easy to develop a mobile solution.

Use new technologies to expose that data, interpret the nuances of the native development
platforms, and use the newer third-party platforms for mobile application development.

Myth #3: We don’t need a mobile presence.

With the smartphone market growing at such a large rate, and the ease with which mobile
applications become available there is a large set of potential customers to reach.

Myth #4: You need a large development team.

Many single-developer companies are successfully releasing quality applications on the
different platform markets.

Myth #5: Sweat equity can pay for the application.

Not to disparage the act of creating a startup, and not to fl y in the face of innovation, but
potential and dreams do not always a fortune make. Working with a partner to develop a
product or solution with no capital is not easy.

1.4 EFFECTIVE USE OF SCREEN REAL ESTATE

The first step to use the smaller interfaces of mobile devices effectively is to know the
context of use. Who are the users, what do they need and why, and how, when, and where
will they access and use information? Mobile design is difficult, as developers try to
elegantly display a telescoped view of almost limitless information. But user experience
issues are improved on mobile interfaces. Embracing minimalism, maintaining a clear
visual hierarchy and staying focused are the three key issues to use screen effectively.
These are discussed detail in the following sections.

Embrace Minimalism:
 Limit the features available on each screen, and use small, targeted design
features.
 Content on the screen can have a secondary use within an application, but the
application designer should be able to explain why that feature is taking up screen
space.
 Banners, graphics, bars etc. should have a purpose.

Use a Virtual Hierarchy:

 Help users to fight cognitive distractions with a clear information hierarchy.
 Draw attention to the most important content with visual emphasis.
 Users will be drawn to larger items, more intense colours, or elements that are
called out with bullets or arrows; people tend to scan more quickly through lighter
colour contrast, less-intense shades, smaller items, and text-heavy paragraphs.
 A consistent hierarchy means consistent usability; mobile application creators can
create a hierarchy with position, form, size, shape, colour, and contrast.

Stay Focused:

By: Dr. Chetana Hegde and Rajatha S, RNS Institute of Technology, Bangalore – 98
 This document can be downloaded from www.chetanahegde.in with most recent updates. 5
Notes for Mobile Applications (16MCA53)

 Start with a focused strategy, and keep making decisions to stay focused
throughout development.
 A smaller file size is a good indicator of how fast an application will load.
 Focused content means users won’t leave because it takes too long for the
overwhelming amount of images per screen to load.
 Users won’t be frustrated with the number of links that must be cycled through to
complete a task.
 Text-heavy pages reduce engagement as eyes glaze over and users switch to
another application.

1.5 UNDERSTANDING MOBILE APPLICATION USERS

Mobiles are used everywhere for many applications. When you are standing in a queue, or
waiting for someone, you may take out your mobile and go through various social media,
check mails etc.

The Gestalt principles have had a considerable influence on design, describing how the
human mind perceives and organizes visual data. The Gestalt principles refer to theories of
visual perception developed by German psychologists in the 1920s. According to these
principles, every cognitive stimulus is perceived by users in its simplest form. Key principles
include proximity, closure, continuity, figure and ground, and similarity.

Proximity:
 Users tend to group objects together.
 Elements placed near each other are perceived in groups as shown in Figure 1.1.

Figure 1.1 Proximity

 Many smaller parts can form a unified whole.

 Icons that accomplish similar tasks may be categorically organized with proximity.
 Place descriptive text next to graphics so that the user can understand the
relationship between these graphical and textual objects.

Closure:
 If enough of a shape is available, the missing pieces are completed by the human
mind.
 In perceiving the unenclosed spaces, users complete a pattern by filling in missing
information. For example, people recognize it as a triangle even though the Figure
1.2 is not complete.
 In grid patterns with horizontal and vertical visual lines, use closure to precisely
show the inside and outside of list items.

By: Dr. Chetana Hegde and Rajatha S, RNS Institute of Technology, Bangalore – 98
 This document can be downloaded from www.chetanahegde.in with most recent updates. 6
Notes for Mobile Applications (16MCA53)

Figure 1.2 Closure

Continuity:
 The user’s eye will follow a continuously-perceived object. When continuity occurs,
users are compelled to follow one object to another because their focus will travel in
the direction they are already looking.
 They perceive the horizontal stroke as distinct from the curled stroke in the Figure
1.3, even though these separate elements overlap.

Figure 1.3 Continuity

 Smooth visual transitions can lead users through a mobile application, such as a
link with an indicator pointing toward the next object and task.

Figure and Ground:

 A figure, such as a letter on a page, is surrounded by white space, or the ground.
For example, in Figure 1.4, the figure is the gear icon, and the ground is the
surrounding space.

Figure 1.4 Figure and Ground

 Primary controls and main application content should maintain a distinct separation
between figure and ground.

Similarity:
 Similar elements are grouped in a semi-automated manner, according to the strong
visual perception of colour, form, size, and other attributes. Figure 1.5 illustrates it.
 In perceiving similarity, dissimilar objects become emphasized.
 Strict visual grids confuse users by linking unrelated items within the viewport.
 The layout should encourage the proper grouping of objects and ideas.

By: Dr. Chetana Hegde and Rajatha S, RNS Institute of Technology, Bangalore – 98
 This document can be downloaded from www.chetanahegde.in with most recent updates. 7
Notes for Mobile Applications (16MCA53)

Figure 1.5 Similarity

1.5.1 The Social Aspect of Mobile

Social networking and social media outlets collect and distribute chunks of content from
people across the globe, adding value to the user experience while spreading ideas and
building reputations through trusted social networks.

Connect with Existing Outlets:

 It can certainly help spread the word about an application when users share in
application content with a wider audience.
 Count on users to share achievements or interests when “tweet results” or “like
article” options are available.
 It might also be beneficial to simplify sharing and retrieving content from current
network connections.
 This requires API integration according to the integrated network.

1.5.2 Usability
With real-world distractions and limited dexterity, usable applications are the ones users will
return to.

 Determining and Reaching the Target Audience: Determine the audience: Who
are they, what do they need, and how can they get it? It is important to consider the
different hardware and usage patterns, whether holding an iPad with two hands in a
meeting or thumbing through menus on the bottom of an Android phone screen.
 Designing for Gestures:
o If it is difficult to discover gestures to tap, pinch, swipe, and zoom across an
application, users will be missing out on those great features developers
spent time building.
o One simple solution is a pop-up box to announce the first time each gesture
prompted feature becomes available.
o Avoid swipe ambiguity.
o When there is no nearby gestural action, accommodate for finger sizes and
user error by extending the actual input area into the white spaces beyond
buttons and tabs
 Error Protection and Correction:
o Without a mouse, touch-screen navigation through menus, buttons, links, and
scrolling is more prone to user errors. Be sure to include an “undo” or “back”
option.
o Every process should be designed to protect user input.

By: Dr. Chetana Hegde and Rajatha S, RNS Institute of Technology, Bangalore – 98
 This document can be downloaded from www.chetanahegde.in with most recent updates. 8
Notes for Mobile Applications (16MCA53)

o Develop a log to preserve input history, and design the interface to simplify
information retrieval.
o Implicit data protection avoids information loss, such as a hard stop between
taps to slow text deletion.
o Explicit protections recover data with an undo option, and abandoned forms
can be repopulated with recently entered data.

1.5.3 Accessibility
Consider accessibility as a way to reach more users, as well as a better way to reach
existing users. Find better ways to build features for the entire intended audience. Similar to
the Web Content Accessibility Guidelines (WCAG) 2.0 POUR (Perceivable, Operational,
Understandable, and Robust) principles, Mobile Web Best Practices (MWBP) is a World
Wide Web Consortium standard defining a set of five checkpoints for mobile accessibility:

 Overall Behaviour: Independent of specific device features, the guidelines for a

general mobile experience.
 Navigation and Links: The ease of user interaction with hyperlinks on the mobile
device interfaces.
 Page Layout and Content: How content is designed on each page, and how
chunks of content are laid out for accessible consumption.
 Page Definition: Defining content areas for mobile device interpretation.
 User Input: Considerations of available mobile device input methods.

The POUR principles were initially created for mobile web interfaces, but apply to all mobile
viewports and mobile user experiences. Common barriers to users with disabilities —
whether content and features are perceivable, operable, understandable, and robust are
given by W3C.

As human lifespan is increasing, the need for mobile devices that can assist people with
disabilities is also increasing. Such assistive technology should consider following
situations:

 Hearing:
o Hearing loss can make it difficult for many people to communicate with a
standard telephone, but many mobile devices offer features that make
promising progress.
o Adjustable volume control offers a simple way to connect with mobile content.
o Most solutions are focused on visual alerts: incoming or missed messages in
call logs, text messages, on-screen prompts, and hardware-specific features
such as blinking alert lights.
 Vision:
o Many users depend on audio, or other sensory alerts to access resources
using mobile devices.
o People with blindness may benefit from sliding or flipping a phone to answer
and end calls rather than a touch-screen button.

By: Dr. Chetana Hegde and Rajatha S, RNS Institute of Technology, Bangalore – 98
 This document can be downloaded from www.chetanahegde.in with most recent updates. 9
Notes for Mobile Applications (16MCA53)

o Sensors (like tactors) markers on keyboards and other hardware-specific

buttons can help users to input.
o Features like device vibration provide feedback that a button has been
pressed.
o Audible feedback and notifications can include action confirmation, such as
low battery or incoming calls.
 Speech:
o Aid users with speech-related accessibility issues with output-related
functionality using text features like messaging, email etc.
o Allow users to save text inputs to reuse personalized outputs like “I am
leaving the office now”.
 Dexterity:
(The meaning of this word is – skill in performing tasks using hands)
o People like cooks, drivers may use hands-free devices to use mobile phones.
o Voice recognition is an increasingly common way to manage hands-free
controls.
o Limiting text input through auto-completion is increasingly common, and
becoming valuable.
 Cognition:
o Clear navigation and simple instructions are helpful for the people with
cognitive issues (the problem to remember and learn things)
o Associating images or photographs with list of information such as contacts
can be helpful.
o Anticipate the information that users are seeking and allow shortcuts and pre-
recorded commands.
o Enable user customization to include audio/visual alerts, as well as
audio/visual feedback as users navigate application features.

1.6 UNDERSTANDING MOBILE INFORMATION DESIGN

Mobile devices offer an exciting space to design information, fitting personalized and real-
time data into tightly-constrained screens. But keep audience goals in mind when crafting
an application, because mobile devices are not generally used for extensive browsing or
complex searches. Various mobile design patterns are discussed hereunder.

1.6.1 Information Display

o People identify signals, interpret the meaning of these signals, determine the goal
according to these interpretations, and then carry out an action until the goal is
reached.
o For example, a microwave has a simple display. When the timer alerts us the
popcorn is done.
o Overly detailed designs do not suit mobile users, who are often micro-tasking,
influenced by urgent and new surroundings, and looking for a quick fix for boredom.

1.6.2 Design Patterns

o A design pattern recycles and repurposes components, reusing the best ideas.

By: Dr. Chetana Hegde and Rajatha S, RNS Institute of Technology, Bangalore – 98
 This document can be downloaded from www.chetanahegde.in with most recent updates. 10
Notes for Mobile Applications (16MCA53)

o More than time efficiency, patterns have been refined by use.

o Look to the user and the purpose of an individual design above any best practices.

 Navigation
• Good design makes it clear how users can move through and use application
features.
– Annunciator Panel
– Fixed Menu
– Expandable Menu
– Scroll
– Notifications and Feedback

i. Annunciator Panel
o An annunciator panel, seen at the top of Figure 1.6, gives information
on the state of a mobile device.
o Developers can modify or suppress the annunciator panel — which
lists the hardware features such as network connection and battery
power — within an application.
o Because the information in this area is only notifications, application
users will not usually have any direct interaction with the annunciator
panel.

Figure 1.6 Annunciator Panel

ii. Fixed Menu

o A menu that remains fixed to the viewport as users roam content is useful in
many situations:
- When users need immediate access to frequently selected functionality
on multiple screens
- When a reveal able menu is already used on the same screen
- When a lack of controls, conflict with key interactions, or low discovery
makes a reveal able menu a poor choice.
- Because fixed menus are always accessible (at the bottom and top of
Figure 1.7), users can interact with page content as needed; keep in

By: Dr. Chetana Hegde and Rajatha S, RNS Institute of Technology, Bangalore – 98
 This document can be downloaded from www.chetanahegde.in with most recent updates. 11
Notes for Mobile Applications (16MCA53)

mind the small screen real estate, and limit any fixed menus to the
absolute necessities.

Figure 1.7 Fixed menu

iii. Expandable Menu

o When all function options for one page cannot fit on the viewport, an
expanding menu can provide selectively available options: a full menu similar
to the one shown in Figure 1.8 will reveal once prompted.

Figure 1.8 Expandable Menu

iv. Scroll

By: Dr. Chetana Hegde and Rajatha S, RNS Institute of Technology, Bangalore – 98
 This document can be downloaded from www.chetanahegde.in with most recent updates. 12
Notes for Mobile Applications (16MCA53)

o As in the case of a reveal able menu giving additional functionality, there will
often be more content on a screen than can be seen in the device viewport.
Fig 1.7
o It is best to limit scrolling, limiting application screens to the size of the
viewport whenever possible.
o Only in-focus items should be able to scroll.
o Scrolling must occur both horizontally and vertically.
o An endless list of information breaks large data sets into manageable,
consumable sizes within the viewport. (Figure 1.8 Endless Scroll)
o An expandable list, shown in Figure 1.9, reveals additional, valuable content
for selected (touched) list items without leaving the current view.

Fig 1.7 Scroll View Port Fig 1.8 Endless Scroll Fig 1.9 Expandable list

o Graphical data — profile photos, category icons, status indicators — can

clarify content lists.
o Use position as well as size, contrast.
o Selecting the thumbnail can lead to different functionality than the other
content in a list item

Scroll-selecting thumb bail

By: Dr. Chetana Hegde and Rajatha S, RNS Institute of Technology, Bangalore – 98
 This document can be downloaded from www.chetanahegde.in with most recent updates. 13
Notes for Mobile Applications (16MCA53)

v. Notifications and Feedback

o Feedback is the user-perceived result of an interaction, providing
immediate confirmation like a color change, message, or being led to a
new page
o Delayed feedback leads to user frustration and redundant, often error-
inducing input; confirmation feedback is useful when user data could
otherwise be lost, and should be indicated with a distinct change in
state from the initial view.
o Notification can inform a user (presenting a single button to close the
notification), offer the ability to cancel a process or correct an error, or
give multiple options from which to select. A user should never be
presented with more than three options from any notification.

1.6.3 Content Structure and Usage

o Input mechanisms, the controls users manipulate to enter or modify data,
- Can be enhanced during the design process by keeping a few key concepts of
mobile usability.
o Use standard controls, which positively shape user perceptions of an application.
o Consider giving distinct personality with custom graphics or textures on controls, to
invite touch interaction with screen depth.

Reveal Content
o You can display content either as a full page or revealed in context.
o When you use a full-page layout, the user should not need to constantly bounce back
and forth between pages:
o All necessary information to use the features on that page should be displayed on that
very page.
o A pop-up box, shown below is a modally presented piece of information that overlays
the current screen and disrupts an ongoing user task.

By: Dr. Chetana Hegde and Rajatha S, RNS Institute of Technology, Bangalore – 98
 This document can be downloaded from www.chetanahegde.in with most recent updates. 14
Notes for Mobile Applications (16MCA53)

1.6.4 Intervening Screens

Be sure to include application branding with the title of the application. In this section you
learn about designing for intervening screens, beginning with the home and idle screens.
 The Home and Splash Screen
 The Loading Screen

The Home and splash Screen

 The home and splash screens show a default set of available information when the
application starts, or after a task has been completed.
 Make it clear when users are on the homepage with a distinctly different screen.
 The first screen of an application is a great opportunity for branding, as well as a
frustration for impatient users.
 Minimize the use of long, over-animated splash screens and slow-to-access main
features Advertising.
 Parallax scrolling, where foreground and background content move at different
speeds, will make the screen appear to have more depth. This technique helps
users understand their current location within an application, and invite more
immersive engagement

The Loading Screen

 “Loading” screen signals when new data is loading, whether the user logs in to an
account.
 Develop applications to load as quickly as possible to avoid showing the loading
screen.
 When there is sufficient delay, you can display advertising on the loading screen.

1.6.5 Advertising
 Advertising can certainly help.

By: Dr. Chetana Hegde and Rajatha S, RNS Institute of Technology, Bangalore – 98
 This document can be downloaded from www.chetanahegde.in with most recent updates. 15
Notes for Mobile Applications (16MCA53)

 Advertising styles and guidelines will vary across platforms, but advertisements must
generally:
o Be clearly differentiated from application content.
o Remain unobtrusive to application features.
o Be actionable, and allow user interaction.
o Be legible.
o Use consistent styles and layout throughout application screens.

1.6.6 Content Structure and Usage

 Mobile application users are there to consume, produce, and share content: it does
not matter how pretty or useful the application.
 Page layouts must therefore reflect the mental models that users understand.
 Be sure to maintain consistent capitalization, using either sentence or title case
throughout all headers. Titles can include icons.
o Information Architecture
 Give every application a strong foundation by organizing, labeling, and
identifying all content that users will perceive.
 The most common structure is the parent-child relationship of a
hierarchy.
 Consistent, simple navigation elements help users find and use the
best information an application has to offer.
o Typography
 The central focus of every application will often be textual content.
 The fonts used in any design are far less important than the way
traditional typography methods are used throughout a mobile
application.
 Size, shape, contrast, color, and position all matter.
 Text layout and alignment should follow certain readability guidelines.
o Plain Language
 “Plain language” is the idea that content producers should provide for
their users, in a way that is clear and understandable to the audience.
 Content usability is one of the most important factors for task success,
and plain language is usable language.
 These tips are especially relevant to mobile application creators:
 Omit unnecessary words.
 Use the simplest form of a verb.
 Use short, simple words; avoid jargon and abbreviations.
 Use pronouns.

1.7 UNDERSTANDING MOBILE PLATFORMS

1.7.1 Android
o Android has a diverse ecosystem, with fewer institutionalized restrictions and a wider
variety of mobile devices than other popular systems.
o They are strong competitor in the mobile market, but the flexibility of Android design
can introduce new issues.

By: Dr. Chetana Hegde and Rajatha S, RNS Institute of Technology, Bangalore – 98
 This document can be downloaded from www.chetanahegde.in with most recent updates. 16
Notes for Mobile Applications (16MCA53)

o Development of the Android operating system is led by Google

o http://developer.android.com/guide/practices/ui_guidelines/index.html

 Interface Tips
– Get started on Android application design with these hints.
 Android convention is to place view-control tabs across the top, and not
the bottom, of the screen.
 Use the main application icon for temporal, hierarchical navigation, instead
of a “back” button and main icon link to the home screen.
 Don’t mimic user interface elements or recycle icons from other platforms.
For instance, list items should not use carets to indicate deeper content.
 Parallax scrolling is common in Android applications.
 Android development can extend to home-screen “widget” tools.

 Accessibility
 Google provides guidelines and recommendations, such as testing with the
often-preinstalled and always-free Talkback. Accessibility design guidelines are
listed on the Android Developer website
 (http://developer.android.com/guide/topics/ui/accessibility/index.html), and further
discussed by the Google “Eyes Free” project (http://eyes-
free.googlecode.com/svn/trunk/documentation/android_access/index.html).

1.7.2 iOS
o Apple maintains strict design standards, which are detailed and updated online. iOS
interface documentation and general mobile design strategies are available from
Apple, including design
o strategies and case studies, at
http://developer.apple.com/library/ios/#documentation/UserExperience/Conceptual/
MobileHIG/Introduction/Introduction.html

 Interface Tips
-Apple can reject an application from the official App Store because of design
problems. Follow the current guidelines closely, starting with these tips:
 iPhone users generally hold from the bottom of the device, so main navigation
items should be in reach of user thumbs.
 Target areas for controls should be a minimum of 44 x 44 points.
 Support standard iOS gestures, such as swiping down from the top to reveal
the Notification Center.
 Larger iPad screens are great for custom multi-finger gestures, but non-
standard gestures should never be the only way to reach and use important
features.

 Accessibility
 Accessible touch and gestural controls are available on the iPad and later
generation iPhones;
 Screen magnification and colour contrast adjustments are also available.

By: Dr. Chetana Hegde and Rajatha S, RNS Institute of Technology, Bangalore – 98
 This document can be downloaded from www.chetanahegde.in with most recent updates. 17
Notes for Mobile Applications (16MCA53)

1.7.3 BlackBerry OS
o BlackBerry OS is often the mobile device of choice in or corporate environments.
o BlackBerry includes native support of corporate emails; and runs on many devices
with hard keypads.
- Which is favoured by users with accessibility issues as well as late adopters
to touch-screen interfaces.

 Interface Tips
- Link common tasks to the BlackBerry track pad according to standard actions:
 Press the track pad: Default option, like revealing the menu
 Press and hold track pad: Activate available pop-up box
 Press track pad and select Shift: Highlight content
 Press track pad and select Alt: Zoom
 Move finger along track pad: Cursor or mouse will move accordingly

 Accessibility
- BlackBerry mobile devices include
o text-based push-delivery messages,
o closed captions on multimedia content, and
o hearing-aid compatibility for hearing accessibility issues.
o Low-vision users can use the Clarity theme and other screen adjustments,
and benefit from tactile keyboards.
o Predictive text and AutoText aid users with mobility and cognitive issues.
o Best practices and device capabilities are maintained online at
http://docs.blackberry.com/en/

1.7.4 Windows Phone7

o Developed by Microsoft, Windows Phone 7 (WP7) is a currently smaller
contender, focused on consumer markets.
o Using the “Metro” theme, features are divided into “Live Tiles” that link to
applications.
o Six dedicated hardware buttons (back, start, search, camera, power, and
volume), at least 4 GB of Flash memory, and Assisted GPS.
 Interface Tips
o Windows Phone 7 interfaces are minimalist,
 Using empty space to lend clarity to the application.
o WP7 uses movement over gradients for on-screen elements to immerse
users in the application experience.
o Users will enter a WP7 application from a “tile,” which can display dynamic
and real-time information.
 Tile images should be in the PNG format, 173 pixels 173 pixels at 256
dpi.eaving focus.
o Do not use a “back” button to navigate back the page stack.
o Panorama controls slide horizontally through panes, and pivot controls list
panes users can visit.

By: Dr. Chetana Hegde and Rajatha S, RNS Institute of Technology, Bangalore – 98
 This document can be downloaded from www.chetanahegde.in with most recent updates. 18
Notes for Mobile Applications (16MCA53)

o Uniform Page Shuffle presents non-hierarchical information users can shuffle

through;
 “leaf-blowing turn” flips content area into focus,
 Scattering and tilting tiles leaving focus.

 Accessibility
o WP7 devices include many standard accessibility features, such as color and
Contrast adjustment to themes for low-vision users. Many, but not all, devices
are compatible with TTY, TDD, and hearing aids.
o Learn more about the basics of WP7 accessibility at
http://www.microsoft.com/

1.7.5 Mobile Web Browsers

o If a mobile application sends users to a website, that website should be
optimized for mobile browsers.
o Similarly, mobile web applications should follow key mobile design methods.
o A great resource for design best practices for mobile web browsers is published
by the W3C.

 Interface Tips
Few quick tips to get started:
 Test for a consistent experience: when websites are accessed from a
variety of mobile browsers.
 Provide minimal navigation: at the top of the page, and use
consistent navigation mechanisms.
 Do not change or refresh the current window: or cause pop-ups,
without informing the user and providing the means to stop it.
 Limit content: what the user has requested, and what the user’s device can
display by avoiding large image files.
 Specify default input formats : when possible, provide preselected defaults

 Accessibility
o The W3C Web Accessibility Initiative provides introductions, solutions, and
further resources to create accessible mobile websites and mobile web
applications

1.8 USING THE TOOLS OF MOBILE INTERFACE DESIGN

1.8.1 User Acceptance Testing

Understand your users: Their behaviours, and their goals, with accurate measurement and
thorough analysis.
What is User Acceptance Testing?
 User Acceptance Testing (UAT) is an organization-specific, and a project-
specific, process.

By: Dr. Chetana Hegde and Rajatha S, RNS Institute of Technology, Bangalore – 98
 This document can be downloaded from www.chetanahegde.in with most recent updates. 19
Notes for Mobile Applications (16MCA53)

 But the right tools help application designers qualitatively and quantitatively know
what users are doing, and what stakeholders are getting wrong.

 Information Capture:
o Document user inputs and reactions the old-fashioned way by taking notes as
users complete tasks.
o Video recording can archive tests for later review, but cameras should not
distract user focus.
o Larger budgets can get access to eye-tracking and screen-capture software.
o Established testing environments will be using these emulators on a desktop
environment with keyboard and mouse navigation; be aware that interscreen
interactions will suffer from the incorrect context.
o But applications may be run in emulator environments for precise data on where
users looked, and when, on a screen-specific basis.

 Task Analysis:
o Standard user acceptance testing procedures apply to the mobile context.
o Testers will continue to monitor results until time, budget, or questions run out.

1.8.2 Information Design Tools

Here, we briefly discuss some information design tools.

 Sketching and Wireframes

o Sometimes we need to shape ideas on paper before focusing on the pixels.
o Storyboard application screens to outline features and flow, focusing on the big
picture.
o Save wasted time developing the wrong thing the right way by involving all key
stakeholders in the sketching and wire framing process.
o Mobile stencils are even on the market to help non doodlers pencil in ideas
before turning to computer screens.
o A wireframe is a rough outline of each application’s framework.
o Stay focused on functionality during wire framing;
 these easy-to-share,
 easy-to-edit files are just a skeleton of the design.

A simple image will do, but tools such as Balsamiq Mock-ups let designers drop
boilerplate into a wireframe editor

 Mock-up Designs
o When you are ready to consider colors and fonts, you can build the mock-up
design concept in Adobe Creative Suite.
o The final images of buttons and icons will be pulled from the final mock-up
design, but details will solidify only after some experimentation.
o Look to existing stencils for a streamlined process that does not re-create the
wheel.

By: Dr. Chetana Hegde and Rajatha S, RNS Institute of Technology, Bangalore – 98
 This document can be downloaded from www.chetanahegde.in with most recent updates. 20
Notes for Mobile Applications (16MCA53)

 Prototype:
o “Perfection is the enemy of good,” and designs that start as ugly prototypes
quickly progress to elegant, usable applications.
o The most primitive start is a most important iteration.
o Platform-specific tools are available, such as the Interface Builder or Xcode for
iOS, but HTML and CSS are a standard and simple way to quickly build
prototypical interactions

 On-device Testing:
o One of the most important tools during design will be the physical device.
o Buy, or Borrow, the devices and application will run on.

 Simulators and Emulators:

 Simulators and emulators are important when the hardware is unavailable and the
service contracts for devices are prohibitively expensive.
 A simulator uses a different codebase to act like the intended hardware
environment.
 An emulator uses a virtual machine to simulate the environment using the same
codebase as the mobile application.
 It can be cost prohibitive to test on many devices, making emulators incredibly
useful.
 Emulators can be run in collaboration with eye-tracking software already available in
most testing labs, but an emulator lacks the touch experience of a mobile
application.
 At an absolute minimum, use one of the target devices for user testing at this level.
During design, development, testing, and demonstration, these tools are incredibly
valuable.

Question Bank:
1. Discuss preliminary costs involved in mobile application development.
2. What are the key issues involved in using the screen real-estate effectively? Explain.
3. What are the myths associated with mobile application development? Explain.
4. Explain Gestalt Principles in detail.
5. Mention the importance of user interface design in mobile application.
6. Explain various Navigation Design patterns.
7. Explain following mobile application development platform:
a. Android b. iOS
c. Blackberry OS d. Windows Phone 7
8. Explain various steps involved in Mobile Information design.
9. Write a short note on.
i. Mobile platforms
ii. Mobile web browsers
iii. Information design tools

By: Dr. Chetana Hegde and Rajatha S, RNS Institute of Technology, Bangalore – 98