UNIT_1_1626771386169.ppt

 Reasons to Build a Mobile App
 Costs of Developing a Mobile App
 Importance of Developing a Mobile Strategy
 Difficulties in Mobile App Development
 Mobile Application Development Today
 Myths of Mobile Application Design
 Explanation of Third-Party Mobile Frameworks

 Your competitors have mobile apps, but you
don’t.
 Mobile apps make good business sense.
 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?

 Competition
◦ Do your competitors offer products or services that you
do not?
◦ Is that why they have an app?
◦ Is that a market you want to expand into?
◦ If you are already in that market, can you add any features
to an app that will have more draw than your
competitors?
 Quality vs. Time to Market
◦ Sometimes, a bad mobile application or website can be
worse than no mobile app or website.
 Legacy System Integration
◦ Limitations to overcome when developing inside the
company intranet bubble.
◦ Enterprise Level Development.
 Mobile Web vs. Mobile App

 Each developer will need hardware and
software to develop the applications on.
 The team will need 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).

 BlackBerry (6 or 7): BlackBerry Bold 9900
 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

 Total cost per developer to create, maintain,
and distribute mobile applications for all the
platforms you can expect to pay a few
thousand dollars just for the minimum
infrastructure.
 Given the opportunity to upgrade making
these upgrades you will incur a higher initial
cost, but the speed increase compared to the
bare bones will recoup that cost.
 It is difficult to quantify the savings from these
upgrades, but developers without them are at
a distinct disadvantage.

 The apps are not defined solely by what they do
or how they look, but rather by how they fulfill a
need and codify it for the user.
 Nature of mobile application (I touch this and it
does what I told it to do), and the more rigid
(fixed size) UI design patterns of the mobile
device.
 with proper planning and research, you target
your potential clients and start imposing your
own parameters on the problem at hand, and the
rest can be accounted for within that scope.

FIGURE 1-1: Screen sizes and densities per Google research

FIGURE 1-1: Screen sizes and densities per Google research
FIGURE 1-2: Resolutions available to Android

 As it stands, there are really four major development targets.
 Each of the native frameworks comes with certain expectations and a user
base. BlackBerry is often used in education and government, whereas the
iPhone and Android user base is far more widespread. Windows Phone 7
being the newcomer
 iOS, the technology that is run on Apple mobile devices, has benefi ts and
limitations specific to its development cycle. The base language is bjective-
C, with Cocoa Touch as the interface layer. At this time iOS can be
developed only using Apple’s XCode, which can run only on a Macintosh.
 The Android framework, on the other hand, is written in Java, and can be
developed using any Java tools. The specific tooling recommended by
Google and the Android community is Eclipse with the Android toolkit, and
that is what the examples in Chapter 6 use. Unlike iOS, it can be developed
on PC, Mac, or Linux.
 Like Android, the BlackBerry device framework is also written in Java;
however, it is limited in that the Emulator and Distribution tools run only on
Windows at this time.
 The newest native framework on the market is Windows Phone 7 and its
framework sits on top of the Microsoft’s .NET Framework. The language of
choice is C# and the framework lies in a subset of Silverlight, Microsoft’s
multiplatform web technology. It also has the limitation that the Microsoft
Windows Phone tools run only on Windows.

 There are many myths associated with mobile
application development. It’s cheap, it’s easy, it’s
unnecessary, you can’t do it without a large team,
and you shouldn’t have to pay for it.
 Myth #1: It is inexpensive to develop a mobile
solution.
 Myth #2: It’s easy to develop a mobile solution.
 Myth #3: We don’t need a mobile presence.
 Myth #4: You need a large development team.
 Myth #5: Sweat equity can pay for the application.

 Appcelerator Titanium Mobile Framework
 Nitobi PhoneGap
 MonoDroid and MonoTouch

 Mobile applications are the hottest technology since
websites became popular in the dot-com boom of the late
1990s.
 In the late 1990s the toy was the Internet, and today it’s
the IDevice.
 IDevices like the iPad and iPhone are making their way into
upper-management hands;
 They like the ease of use, and feel that every application
should be developed with a user interface that is as easy
to use as the iDevices.
 It’s just a matter of convincing upper management that
they really don’t need that new shiny app. Before
dismissing the brilliant idea of the person who signs your
paychecks, the following sections compare when it makes
sense to create a mobile application, and when a mobile
website will suffice.

FIGURE 2-1: The increase in the number of mobile Internet
users

 A mobile website experience is significantly
different from the desktop view.
 With a limited screen size, new usability
techniques have been developed to help people
view and navigate data.
 Mobile web browsers do the best job they can,
providing rich tools for panning and zooming
through a website, but commonly used, complex
drop-down menus make mobile navigation
troublesome.
 Navigation is one of the most important.
It’s common to present users with thinned-down
content they can access on a mobile device.

 In order to create a great mobile interface, you should
spend time identifying behaviors of mobile users.
 The following list gives a few reasons why users might
need access to your mobile content:
 Repetition: It’s possible they are sitting on the page and
hitting refresh to see new content.
◦ Is site content changing frequently enough that users would
come back and check for updates? Sports scores, weather
reports, and stock quotes are types of content that need to be
available, and fast, on mobile devices.
 Boredom: Maybe users are trying to pass time in the
lobby of a doctor’s office. They are surfing the web like
they do in the comfort of their own home, but in public.
 Urgency: Users are out and about and suddenly have the
urge for a hamburger. They need to find the nearest
open burger joint.

 If you require graphics and processing power
 If you require the use of the device’s camera
 If you need to use the device’s microphone
 If you require access to the device’s address
book
 If you require access to the device’s media
library
 If you will be using the market for payment
 If you require use of push notifications
 If you need to run as a background service
 If you want to design a game

1. New Revenue Sources
2. Types of Mobile Apps
3. Do People Really Want to Put
Your App on Their Mobile
Device?
4. Resources
5. Development of Your Mobile
Solution

 In-App Purchasing for mobile applications has
revolutionized digital commerce.
 Print Media
◦ People started purchasing digital content

• A study from Nielsen
(http://blog.nielsen
.com/nielsenwire/onli
ne_mobile/gamesdomi
nate-americas-
growing-appetite-
formobile-apps/)
across a wide range of
phone
users have found that
iPhone users install the
most applications,
coming in at 40 apps,
as shown in
Figure 2-8.

 Make use of native device features
 Offline content
 Rich user experience
 Ease of discovery
 Push notifications
 Increased customer feedback

 why you are
developing mobile
apps
 Advertising is not
personal and
directed toward the
general public
 Marketing is a
process.

 Quick response (QR)
codes provide a
means for users to
scan an image with
their mobile device.
 (QR) codes originally
created for use in the
automobile industry
in the early 1990s.
 A Microsoft Tag is a
high capacity color
barcode (HCCB),
developed by
Microsoft.

 The App Store
 (iOS), Market
(Android), Market
Place (Windows
Phone), and App
World (BlackBerry)
give apps
Discoverability.

 Featured sections
are the first areas
users see when
they access the
market, and
people are
inclined to
download what
other people are
downloading.

 Your app
description
may
arguably be
the most
important
marketing
tool within
the market.

 Easier to get started:
 Easier cross-platform development
 HTML5 offers rich features
 Easier updates:
 No approval process:

 Design falls into the category of
craftsmanship
 mobile devices are portable enough to carry
at all times, connected to voice and data
networks, and contextually aware by using
sensors and networks to preemptively
complete tasks.
 Current mobile limitations
◦ Bandwidth
◦ Times when users cannot access wireless
◦ as well as a lack of technical capabilities like flash

 Developers can concentrate on the precise
features cause of constraints on the devices.
 Application can also use exciting new
features like:
◦ Motion
◦ Gestures: zooming, swiping, tapping, turning, and
shaking

 Mobile design is difficult
 Cognitive load
 Navigate, remember what was seen and refine
original context.
 Embrace Minimalism
◦ Limit the features available on each screen, and use
small, targeted design features.
 Use a Visual Hierarchy
◦ Help users fight cognitive distractions with a clear
information hierarchy.
 Stay Focused
◦ Start with a focused strategy, and keep making decisions
to stay focused throughout development.

 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.
 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;
 Closure
◦ If enough of a shape is available, the
missing pieces are completed by the human
mind.
 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.
 Figure and Ground
◦ A figure, such as a letter on a page, is
surrounded by white space, or the ground.
 Similarity
◦ Similar elements are grouped in a semi
automated manner, according to the strong
visual perception of color, form, size, and
other attributes

 The Social Aspect of Mobile
◦ We all want to be connected, and to share something
with the world.
◦ Connect with Existing Outlets
 Usability
◦ In a perfect world, usability considerations would be a
regular, ongoing part of the whole process,
checking how pixels and fingers interact in the real
world
 Determining and Reaching the Target Audience

 Designing for Gestures
◦ If it is difficult to discover gestures to
tap, pinch, swipe, and zoom across an
application, this means
average users will be missing out on
those great features developers spent
time building.
–One simple solution is a pop-up box to announce the
first time each gesture-prompted feature becomes
available.
– Error Protection and Correction
–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.

 Accessibility
◦ An application that is easier for people to use with poor or
diminished vision, limited dexterity, or a cognitive impairment will
be easier for all people to use. Consider accessibility as a way to
reach more users.
◦ 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 Behavior: 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.

 Hearing
◦ Moderate to profound 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.
For moderate hearing loss, adjustable volume control offers a simple way to connect
with mobile
content.
 Vision
◦ Many users depend on tactile, audio, or other sensory alerts to access resources using
mobile devices.
 Speech
◦ Aid users with speech-related accessibility issues with output-related functionality
using text
features. Text messaging, email, and predictive text are popular solutions.
 Dexterity
◦ A hands-free mode can limit how much the phone must be held to properly navigate,
which benefits
low-dexterity users as well as busy cooks, lost drivers, and distracted parents. Voice
recognition is
an increasingly common way to manage hands-free controls. Limiting text input has a
similar effect:
auto completion is increasingly common, and incredibly valuable.
 Cognition
◦ Any feature to reduce the cognitive load — the amount of information users must hold
in their memory — is helpful. Associating images or photographs with long lists of
information such as contacts can be helpful. Anticipate the information that users are
seeking and allow shortcuts and prerecorded commands. Enable user customization to
include audio, visual, and tactile alerts, as well as audio, visual, and tactile feedback as
users navigate application features.

 The visual display of information is how
people connect with loved ones, colleagues,
and friends.
 Information Display
◦ A microwave has a simple display.

 Navigation
◦ Good design makes it clear how
users can move through and use
application features.
◦ Annunciator Panel
 An annunciator panel, seen at the top
of Figure 4-7, gives information
on the state of a mobile device.

 Fixed Menu
◦ 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.

 Expandable Menu
◦ When all function options for one
page cannot fit on the viewport, an
expanding menu can provide
selectively available options.
◦ A gesture, like a swipe or double tap,
may prompt the reveal as well as
selecting an on-screen icon.
◦ Users may exit a menu using a back
button, a close button that is part of
the revealed menu list, or by toggling
with the same gesture or soft key
that prompted the reveal.

 Scroll
◦ 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.

 Notifications and Feedback
◦ If the user needs new information,
application creators must use
notifications. These prompts pause
ongoing tasks, and enable users to
change processes and behaviors
according to the new information or
feedback.

 Content and Controls
◦ 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.

◦ Reveal Content
 You can display content either as a full
page or revealed in context. When you
use a full-page layout, the user should
not need to constantly bounce back
and forth between pages:

 Intervening Screens
◦ Application branding with the title of the
application
◦ Content is loading
◦ In between screens

 The first screen of an application is a great
opportunity for branding.
 Minimize the use of long, over-animated splash
screens and slow-to-access main features.
 A useful design method to disguise slow launch
times is to use the splash screen image
 Application background: users will perceive a
quicker entry to application features.
 Parallax scrolling, where foreground and
background content move at different speeds.
 The home screen is where important, frequently
used features are highlighted

 An in-progress, “loading” screen
Signals when new data is loading.
 Include the estimated position in
progress.
 place the progress indicator over a
screen shot of the last screen.
 When there is sufficient delay, you
can display advertising on the
Loading screen.

 Project stakeholders need to pay the bills, and
advertising can certainly help.
 Advertising styles and guidelines will vary
across platforms, but advertisements must
generally:
➤ Be clearly differentiated from application content.
➤ Remain unobtrusive to application features.
➤ Be actionable, and allow user interaction.
➤ Be legible.
➤ Use consistent styles and layout throughout
application screens.

 Mobile application users are there to consume, produce,
and share content.
 Users need to quickly locate and effectively use information.
 Page layouts must reflect the mental models that users
understand.
 These content titles should always be horizontal, and set
apart with a different background or surrounding box.
 Be sure to maintain consistent capitalization, using either
sentence or title case throughout all headers.
 Titles can include icons, but these should be descriptive of
the content, and not needlessly redundant or vague.
 Structured, template designs are valuable to great user
experience:
◦ when people can predict which information will appear on what
screen, users can more easily manipulate and navigate through
mobile screens.

 A strong foundation by organizing, labeling, and
identifying all content that users will perceive.
 A growing segment of interactive content is
faceted, tagging chunks of content with attributes
 Classifying information by:
◦ Name
◦ Sequence
◦ Fixed relationship between values
◦ The distance between values
◦ Geographic location
◦ Proximity
◦ Goals
◦ Categorical subject matter

 Textual content.
 Vector shapes will be
rasterized on devices as
fonts are converted to comply with device
formats.
 Size, shape, contrast, color, and position all
matter.
 Text layout and alignment should follow
certain readability guidelines.
 Mobile interfaces compound the issues of web
interfaces, and add new environmental factors
and use cases.

 That is clear and understandable to the audience
 these tips are especially relevant to mobile
application creators:
➤ Omit unnecessary words. Take the first draft
and cut it in half, and then see if you can cut it
in half again (you probably can).
➤ Use the simplest form of a verb.
➤ Use short, simple words; avoid jargon and
abbreviations.
➤ Use pronouns'.

 Precision is key to successful mobile content.
Mobile plain language best practices also
include:
➤ Focus keywords to the beginning or top of any
screen.
➤ Use the same voice, preferably active voice,
throughout the interface. Try to also use the
same tense, when practical.
➤ If a product must be referenced, use a
consistent product name.
➤ Correct unnecessarily mean or passive-
aggressive error messages and task prompts.
➤ Avoid redundant content.

 Developers can take advantage of native
functionality across mobile devices. More than a
smaller, web like interface, an Android,
BlackBerry, WP7, or iOS device can make phone
calls as well as record and transmit contextual
information like geolocation.

 Android has a diverse ecosystem, with fewer
institutionalized restrictions and a wider variety of
mobile devices than other popular systems.
 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.

 Apple maintains strict design standards.
 iOS interface documentation and general mobile
design strategies are available from Apple,
including design strategies and case studies.
 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:

 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

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

 Interface Tips
◦ When designing a BlackBerry mobile application, keep
these standards in mind:
➤ Use BlackBerry UI components, not the tabs or
other components of alternate platforms.
➤ Use standard interaction behaviors for an intuitive
experience.
➤ 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

 Developed by Microsoft, Windows Phone 7 (WP7) is
a currently smaller contender, focused on
consumer markets. Using the “Metro” theme,
features are divided into “Live Tiles” that link to
applications.
 Microsoft maintains design-impacting
requirements for hardware, including six dedicated
hardware buttons (back, start, search, camera,
power, and volume), at least 4 GB of Flash memory,
and Assisted GPS.

 Interface Tips
◦ Windows Phone 7 interfaces are minimalist, using empty space
to lend clarity to the application.
➤ WP7 uses movement over gradients for on-screen
elements to immerse users in the application
experience.
➤ 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.
➤ Do not use a “back” button to navigate back the page
stack.
➤ Give users a distinctly WP7 experience. Panorama
controls slide horizontally through panes, and pivot
controls list panes users can visit. Uniform Page Shuffle
presents nonhierarchical information users can shuffle
through; “leaf-blowing turn” flips content area into
focus, scattering and tilting tiles leaving focus.

 Similarly, mobile web applications should follow key
mobile design methods.
 Interface Tips - More detail is included in Chapter 5,
but here are a 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 to 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.

 User Acceptance Testing
◦ Information capture
◦ Task Analysis
 Information design tools
◦ Sketching and wireframes
◦ Mock up designs
◦ Prototype
◦ On device testing
◦ Simulators and emulators

UNIT_1_1626771386169.ppt

Recommended

Recommended

More Related Content

Similar to UNIT_1_1626771386169.ppt

Similar to UNIT_1_1626771386169.ppt (20)

Recently uploaded

Recently uploaded (20)

UNIT_1_1626771386169.ppt