Mse july13 (1/3)

Mobile SoftwareMobile Software
EngineeringEngineering
By
Prof. Dr.Prof. Dr. O.P.VyasO.P.Vyas
DAAD Fellow (Germany), AOTS Fellow (Japan)
Indian Institute of Information TechnologyIndian Institute of Information Technology
AllahabadAllahabad
Mobile Software Engineering
Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India

n Mobile Software: Evolution or Revolution
HH Smartphone Vs Other Mobile DevicesSmartphone Vs Other Mobile Devices
HH Mobile OS: Android OS, Windows Phone,Mobile OS: Android OS, Windows Phone, iOSiOS
HH Mobile Software: Cross Device ApplicationsMobile Software: Cross Device Applications
n Mobile Apps Characteristics & Issues
HH Software trends : Native Apps & Web AppsSoftware trends : Native Apps & Web Apps
Mobile Software EngineeringMobile Software Engineering
2
HH Mobile Information Architecture: PatternsMobile Information Architecture: Patterns
n Why Mobile SE ? Mobile SE Approaches
HH Mobile SE trends : Usability Lifecycle & UX DesignMobile SE trends : Usability Lifecycle & UX Design
HH Mobile Interaction Design: MobileMobile Interaction Design: Mobile IxDIxD PatternsPatterns
HH Mobile Software Testing : Native & Web AppsMobile Software Testing : Native & Web Apps
n Mobile Web & Responsive Web Design
nn Implementation issuesImplementation issues:: Software ProjectsSoftware Projects

Our Approach …Our Approach …
nn Introduction to Mobile SoftwareIntroduction to Mobile Software
nnNeed for Engineering approachNeed for Engineering approach
nn Significant issues:Significant issues:
nnMobile UX design, Information ArchitectureMobile UX design, Information Architecture
nn Implementations: Mobile Apps Design & DevelopmentImplementations: Mobile Apps Design & Development
nn Responsive Web DesignResponsive Web Designnn Responsive Web DesignResponsive Web Design
nn Tools & Frameworks:Tools & Frameworks: PhonegapPhonegap,, MosyncMosync && jQueryjQuery
HH Modeling with UMLModeling with UML
HH Tools & TechniquesTools & Techniques
4Overview of Mobile Platform:
– Writing codes: Implementing using Tools & Framework
4Tools : J2ME, Javascript, jQuery, HTML5,…..3

Helpful Developer ToolsHelpful Developer Tools
n Mobile developers aren’t just looking into coding and
design resources.
n There is also a high demand for software tools and IDEs,
not to mention powerful mobile frameworks.
n Mobile Software development is a difficult task which
requires quite a bit of dedication, but utilizing additional
tools will make your job a whole lot easier.tools will make your job a whole lot easier.
H jQuery is a multi-browser JavaScript library
designed to simplify the client-side scripting of
HTML.
H jQuery Mobile: Touch-Optimized Web Framework
for Smartphones & Tablets. A unified, HTML5, HTML5--
based user interfacebased user interface system for all popular
mobile device platforms,
nn Mobile Software Testing: SeleniumMobile Software Testing: Selenium
4

SmartphonesSmartphones
q Feature phones were initial model of Mobile phones
and were superseded by Smartphones.
q A Smartphone is a mobile phone that offers more
advanced computing ability and connectivity than a
contemporary basic feature phone.
Oct. 2010 Feb. 2012

q A smartphone allows the user to install and run more
advanced applications based on a specific platform.
q Smartphones run complete operating system software
providing a platform for application developers.
6

n A mobile application (or Mobile App) is software written for
mobile devices that performs a specific task, such as a
game, calendar, music player, etc.
n While application development for mobile devices goes
back at least 10 years, there has been exponential growth in
mobile application development since the iPhoneiPhone AppStoreAppStore
opened in July, 2008.
n The term “AppApp" has become popular, and in 2010 was listedn The term “AppApp" has become popular, and in 2010 was listed
as ""Word of the YearWord of the Year" by the American Dialect Society
n Mobile App ranges from Game or Music to business
processes as well.
7

With recentWith recent
emergence ofemergence of Apple Apps Store,Apple Apps Store,
Google Play (Google Play (known as Androidknown as Android
Marketplace previouslyMarketplace previously), Nokia), Nokia OviOvi
Store,Store,Store,Store,
Windows Phone MarketplaceWindows Phone Marketplace andand
Amazon App StoreAmazon App Store open up a hugeopen up a huge
possibility for designers andpossibility for designers and
developers alikedevelopers alike..
8

n Since 2008, device makers have created outlets for other
mobile devices, including Android, BlackBerry, Nokia Ovi
Windows Phone, and more.
n A May 2012 study reported that during the previous quarter,
more mobile subscribers used apps than browsed the web
on their devices: 51.151.1% vs. 49.849.8% respectively.
n Researchers found that usage of mobile applicationsn Researchers found that usage of mobile applications
strongly correlates with user context and depends on user's
location and time of the day.
n Industry analysts estimate that there are more thanthan 250,000
applications available through the various stores and
marketplaces, some of which are available for multiple types
of devices.
9

n Mobile Apps are usually available through application
distribution platforms, which are typically operated by
the owner of the mobile operating system, such as the
Apple App Store, Google Play, Windows Phone Store and
BlackBerry App World.
n Some Apps are free, while others must be bought.
Usually, they are downloaded from the platform to a
target device, such as an iPhone, BlackBerry, Android
Mobile Apps & OS…..Mobile Apps & OS…..
target device, such as an iPhone, BlackBerry, Android
phone or Windows Phone, but sometimes they can be
downloaded to laptops or desktops.
n For apps with a price, generally a percentage, 20-30%,
goes to the distribution provider (such as iTunes), and
the rest goes to the producer of the app.
10

Many comprehensive programming environments available for the
major mobile platforms.
Ø Apple’s iOS Dev Center offers the Xcode package, which includes
an Interface Builder, an iPhone emulator, and a complete
development environment that can be used across all Apple
products.
Ø For Android, developers can use the Android Development ToolsØ For Android, developers can use the Android Development Tools
plug-in for the Eclipse programming environment.
Ø For Windows Phone, developers can use a specialized version of
Microsoft’s Visual Studio environment . Similarly, there are
application development tools for BlackBerry, Symbian, and other
platforms.
11

In addition, there are now some cross-platform development
tools, such as RhoMobile’s Rhodes and the open source
PhoneGapPhoneGap, which can be used to create native applications
on various brands of Smartphones.
Similarly, Netbiscuits, Appcelerator, Kyte, and other companiesSimilarly, Netbiscuits, Appcelerator, Kyte, and other companies
provides tools and frameworks to support the creation of
mobile web and hybrid sites using their SDK or one of the
previously mentioned environments.
12

Windows Store: Windows 8Windows Store: Windows 8
n Microsoft confirmed that the Windows Store will be a platform
for distributing Windows applications, both Metro-style and
traditional apps, and the store will only support Windows 8 and
above.
n The Windows Store will be the primary means of distributing its
namesake applications to users; the official reason is to allow
Microsoft to scan apps for security flaws and malware.
n Line of Business Metro-style apps can be installed from
outside the Windows Store by an organization's IT department,outside the Windows Store by an organization's IT department,
however.
n The Windows Store will take a 30% cut of application sales.
Once an application reaches $25,000 USD in revenue, the cut
drops to 20%. Third-party transactions are also allowed, of
which Microsoft does not take a cut.
n Individual developers will be able to register for $49 USD, and
$99 USD for companies. Developers from 120 countries can
submit applications to Windows store.
n similar platforms, such as the Mac App Store and Google Play
13

Mobile OS & Apps developmentMobile OS & Apps development
Ø Mobile Apps are running on a specific OS but are being
desired for various other OS ranging from Android OS,
Apple iOS, and Windows 8, Blackberry as well.
Ø But can we develop an App which runs wellruns well in all OS….?
Ø How Mobile Apps are really different?
14

Mobile OS & Apps developmentMobile OS & Apps development
n When you install an Android app onto an
AndroidAndroid devicedevice, you are installing an app that
was written specifically for the Android operating
system.
HH YouYou cancan installinstall AndroidAndroid appsapps ontoonto aa WindowsWindows
computercomputer —— andand eveneven onon MacsMacs andand LinuxLinux PCsPCs —— butbutcomputercomputer —— andand eveneven onon MacsMacs andand LinuxLinux PCsPCs —— butbut
onlyonly ifif thethe computercomputer isis runningrunning specialspecial softwaresoftware calledcalled
anan AndroidAndroid emulatoremulator,, whichwhich createscreates aa virtualvirtual AndroidAndroid
devicedevice onon youryour computer.
15

PlatformsPlatforms Language(s)Language(s) RemarksRemarks
Android Java, C, C++ Open source OS (based on Linux)
developerandroid.com
bada C, C++ Samsung’s mobile platform running on Linux or real
time OS
developerbada.com
Blackberry Java J2ME compatible, extensions
Enable title integration
me.blackberry.com/eng/developers
iOS Objective-C, C Requires Apple Developer Account
developer apple.com/iphone
MeeGo Qt, Web Apps, C++ Intel and Nokia guided Open source OS (based onMeeGo Qt, Web Apps, C++
,others
Intel and Nokia guided Open source OS (based on
Linux)
meego.com/developers
Symbian C, C++, Java, Qt, Web
Apps , others
Open Source OS built from the ground up for mobile
devices
www.forum.com/symbian
WebOS HML, CSS,
JavaScript, C
Support widget style programming, (based on Linux)
developer.palm.com
Windows
Mobile
C#, C .NET, CF of Windows Mobile API, most devices ship
with J2ME compatible JVM
developer.windowsmobile.com
Window
Phone
C#, VB.NET SilverLight, XNA Framework

HH Mobile OS: Android OS, Windows Phone,Mobile OS: Android OS, Windows Phone, iOSiOS
HH Mobile Software: How Mobile Software is differentMobile Software: How Mobile Software is different
HH Cross Device ApplicationsCross Device Applications
17
nn Implementation issuesImplementation issues:: Software ProjectsSoftware Projects

What Makes Mobile Apps Different?What Makes Mobile Apps Different?
n In many respects additional requirements that are less
commonly found with traditional software applications,
including:
1)Sensor handling – most modern mobile devices, e.g.,
“smartphones”, include an accelerometer that responds to
device movement, a touch screen that responds to numerous
gestures, along with real and/or virtual keyboards, a global
positioning system, a microphone usable by applications otherpositioning system, a microphone usable by applications other
than voice calls, one or more cameras, and multiple
networking protocols
2) Potential interaction with other applications – most embedded
devices only have factory-installed software, but mobile
devices may have many applications from varied sources
interacting
3) Native and Web (mobile web) applications
4) Families of hardware and software platforms

Mobile App is Embedded Software ?Mobile App is Embedded Software ?
n In many respects, developing mobile applications is different
from traditional software development
H similar to embedded applications….Some differences also
n Common issues include integration with device hardware, as
well as traditional issues of security, performance, reliability,
and storage limitations.

Mobile Software: Physicality and specificationsMobile Software: Physicality and specifications
Ø Most mobile devices employ touch screens, where users rely on
gestures – in addition to simple interface elements – to interact with
them.
ØDoes it make significant change if software is to
be developed for touch screens ?
ØBecause of their smaller dimensions, we expect the content
20
ØBecause of their smaller dimensions, we expect the content
structures to be simpler and smaller.

Mobile Software: Physicality and specificationsMobile Software: Physicality and specifications
ØAlso, because of their limited bandwidth and connectivity, mobile
devices require designs to be optimized for loadingloading time,time, withwith reducedreduced
datadata requirementrequirements.
Øwe may use the device under difficult viewing conditions, or among a
variety of distractions
21

Mobile Apps development…Mobile Apps development…
n More and more organizations aim at leveraging mobile devices
and applications for their respective business……
n Mobile Apps development market is young and growing
extremely fast paced…….
The explosion of consumer appsapps can be seen in just about every
industry, but here are a few of the more notable ones:
Ø Retail: Location-intelligent mobile commerceØ Retail: Location-intelligent mobile commerce
Ø Media: Magazines & newspapers going 100% digital
Ø Travel: Mobile bookings, check-ins, maps, deals, etc.
Ø Education: Tablets and apps in classrooms
Ø Healthcare: Patient records, physician notes, etc.
Ø Finance: Apps for real-time trading, portfolio analysis
Ø Social: Games and social media platforms 22

Mobile Business AppsMobile Business Apps
n And Mobile Business Apps are running rampant in the B2BB2B
worldworld as well, including spaces such as:
Ø •Business Apps: CRM, ERP, HR systems
Ø Productivity: Docs, spreadsheets, presentations
Ø Collaboration: Email, IM, publishingØ Collaboration: Email, IM, publishing
n Still think that mobile apps are for games, music and
“entertainment purposes” only?
n Do you really think that mobile applications won’t be
relevant to a industry, a company, software teamrelevant to a industry, a company, software team and youryour
career as Software Engineercareer as Software Engineer,, a year from now?
H Think again.
23

Mobile AppsMobile Apps developementdevelopement
n The high quality requirements of mobile business apps
require them to be thoroughly engineered.
n Unfortunately, today’s software engineering approaches are
often too heavy-weight to allow developing high-quality
mobile business apps in the context of mobile projects,
which often face
H small budgets,H small budgets,
H extremely limited effort, and
H short time-to-market requirements.
24

n The key quality requirements include
Mobile Business AppsMobile Business Apps
H Driven by tough timetime--toto--marketmarket constraints,
H Rapid ROI ( Return on Investment…)
H Great user experience,
H Security,
H As well as flexibility with respect to future
extensions
n Can you start coding with #include <stdio.h>
and get above mentioned results…. 25

Mobile Apps: Pitfalls & OpportunitiesMobile Apps: Pitfalls & Opportunities
26

Mobile SEMobile SE
Week #2Week #2
27

HH Mobile Devices: Phones Vs TabletsMobile Devices: Phones Vs Tablets
28
HH Mobile SE: SW Process ModelsMobile SE: SW Process Models

Mobile Device
Mobile Device CategoriesMobile Device Categories
NonNon--PhonePhone
29
TabletsTabletsMobileMobile
PhonesPhones
Basic &Basic &
FeatureFeature
phonesphones
SocialSocial
PhonesPhones
TVTV
Android
Based
Apple
iPhones
NonNon--PhonePhone
devicesdevices

Mobile DevicesMobile Devices
TabletsTablets
MobileMobile
PhonesPhones
Basic Mobile Phones:Basic Mobile Phones:
These are phones with call and
Data Mining FunctionalitiesData Mining Functionalities
30
These are phones with call and
SMS support. They don’t have web
browsers or Internet connectivity, and
they don’t have any installation
possibilities.
ØThe Nokia 1100 is most widely distributed
in the world, with over 250 million250 million sold since
its launch in 2003.
Feature Phones:Feature Phones:
Feature phones, also known as low-
end mobile devices, have a great
advantage: they have web support.
They typically have only a very basic
browser, Nokia, Motorola, Kyocera, LG,
Samsung, and Sony Mobile
Social PhonesSocial Phones Android
Based
Apple
iPhone

Mobile Device CategoriesMobile Device Categories
Smartphones
TabletsTablets
Mobile
Phones
31
Android
based
Apple
iPhones
Basic & Feature
Phones
Social PhonesSocial Phones
ØSocial phones are also known as mid-
range and/or high-end mobile devices.
ØThe difference is that they are prepared
for social users: apps such as Facebook,
Twitter, and WhatsApp are always
preinstalled and a minimum data plan is
also usually included with the contract.
Ødevices typically offer a mediuma medium--sizedsized
screen, basic HTML browser support,screen, basic HTML browser support,
sometimes 3G connectionsometimes 3G connection support, a
decent camera, a music player, games,
and application support

TabletsTablets
Mobile
Phones
Smartphones
Data MiningData Mining
ØA tablet is a flat device that usually doesn’t fit in
a pocket and that has a touch screen with a size
ranging from 7 to 11 inches.
32
Feature
Phones
Social
Phones
Android
based
iPhones
ranging from 7 to 11 inches.
ØSometimes it uses a mobile operating system
(such as iOS instead of Mac OS), & sometimes it
uses a touch-optimized version of a desktop
operating system (such as Windows for tablets
instead of Windows Phone).
ØTablets have the same functionalities as
smartphones, including multitasking operating
systems, installed applications, and full modern
web browsers. Every tablet has WiFi support, and
there are some with 3G or 4G connections.
ØØSome devices are difficult toSome devices are difficult to categorizecategorize—for
example, the Samsung Galaxy Note is a 4G phone with
a 5.3” pointer- and finger-based touchscreen that can
also be included in the tablet category.

Mobile Devices
TabletsBasic & Feature
Phones
SmatphonesSmatphones
33
Phones
Baisc Phones
Social Phones
A smartphone, as defined today, has a
multitasking operating system, a full
desktop browser, WiFi and 3G/4G
connection support, a music player, and
several features from following:
ü GPS (Global Positioning System) or A-GPS
(Assisted Global Positioning System)
üDigital compass, Video-capable camera
ü• Bluetooth, Touch support
ü• 3D video acceleration
ü• Accelerometer , Gyroscope
ü• Magnetometer
Smartphone
Categories

Mobile devices
TabletsBasic &
Feature Phones
34
Smartphones
Features
Currently, this category includes the
Apple iPhone, every Android device
(including
the Samsung Galaxy series and the
Sony Xperia series), the Nokia Lumia
920, and later
BlackBerrys.
Feature Phones
Basic Phones
Social
Phones

Mobile Apps: Cross Device ApplicationsMobile Apps: Cross Device Applications
Ø Mobile Apps are no longer confined to Phones but are
being developed for various other devices ranging from
Digital TV , Tablet PC, and Home Consumer Electronics as
well.
Ø But can we develop an App which fits wellfits well in all devices….?
35

Mobile Apps: Cross Device ApplicationsMobile Apps: Cross Device Applications
36
ØMany researchers have drawn parallel with Embedded SE with Mobile SE as
well.
ØCommon issues include integration with device hardware, as well as
traditional issues of security, performance, reliability, and storage
limitations.
ØHowever, Mobile applications present some additional requirements that are
less commonly found with traditional software applications.

n Different Vendors, heterogeneous
platforms but SE paradigmSE paradigm for one and
all…
n But OOSE ?
Mobile Apps and SE…..Mobile Apps and SE…..
37

Object OrientationObject Orientation
is highly suitable foris highly suitable for
Software ReSoftware Re--use Engineering…….use Engineering…….
&&
ReRe--use Engineeringuse Engineering is key to meet toughis key to meet tough
timetime--toto--marketmarket constraints,constraints,
38

Mobile AppsMobile Apps andand OOSE…..OOSE…..
Ø Driven by tough timetime--toto--
marketmarket constraints,
Ø The key quality
Requirements include
Ø Effective Software
Re-use for saving time
and money by using
already developed &
tested Codes, Structures.
ØUse existing framework
H User Interface Design
H a great user experience,
H security,
H as well as flexibility with
respect to future extensions
39
ØUse existing framework
and APIs for GUI
development
Ø OCP Open Closed
Principle for Software
Designs….
OCPOCP: Software entities like classes, modules and functions
should be open for extension but closed for modifications.

40

Mobile Software & UI DesignMobile Software & UI Design
Although UI Design is significant in all the Software but
it is more in Mobile UI Design….
41
UI Design may be dependent on various factors i.e. device size,
particular platform , Native App or Web App…….

42

43

Large number ofLarge number of Mobile SoftwareMobile Software
are failing to meetare failing to meet useruser
expectationsexpectations…….…….
44

According to a recent studyAccording to a recent study, 60% of, 60% of
mobile usersmobile users will abandon your app orwill abandon your app or
site if it doesn’t loadsite if it doesn’t load within threewithin three
seconds.seconds. Three seconds!Three seconds!
Of those usersOf those users, 43% said they would, 43% said they would
never return to your app or sitenever return to your app or site –– andand
that’s just scratching the surface ofthat’s just scratching the surface of
user expectations !!user expectations !!
45

SE for Mobile SoftwareSE for Mobile Software
However, as mobile applications become more complex, moving
beyond inexpensive recreational applications to more
business critical uses, it will be essential to apply software
engineering processes to assure the development of secure, highhigh--
quality mobilequality mobile applications.
n Mobile business applications (Mobile Business Apps) bear
huge potentials for increased work productivity, work
comfort, and even sales if they are of high quality.
n Developing application software for mobile devices requires
considering the constraints of these devices.
n Mobile Apps developers adhered to recommended sets of
“best practices” but rarely used any formal development
processes, and;
n Developers did very little organized tracking of their
development efforts and gathered few metrics.
n As a result lot number of Apps are being withdrawn as they
fail to meet user expectations… 46

Why Failing Hurts …Why Failing Hurts …
n Back in the day, one bad customer experience – whether it
be with a business, service or product – would spread via
word-of-mouth and reach a few prospective customers.
n Thanks to social media platforms like Twitter, Facebook,
Yelp and others, however, that same wordthat same word--ofof--mouth nowmouth now
travels at the speed of light and reaches hundreds,travels at the speed of light and reaches hundreds,travels at the speed of light and reaches hundreds,travels at the speed of light and reaches hundreds,
thousandsthousands, or even more users.
n The other major difference is app store ratingsapp store ratings.
H Imagine if a poor review were stamped
directly on the packing of a product.
H With app store ratings, that’s exactly
what’s happening.
47

Various Mobile AppsVarious Mobile Apps
1) Data Driven App – this is simple app except that the data is
dynamic, either stored in a local (on the device) database, or
retrieving the data from an external source.
2) Games – have you heard of Angry Birds? That is a game.
Apparently, there are other games too. Games can range from the
simple “thinking man’s game” through to the very complex “action”
games.
3) Device App – a device app is an app that makes use of the
hardware to provide its core functionality, i.e. something basedhardware to provide its core functionality, i.e. something based
around the functionality of the camera, accelerometer, or GPS, etc.
4) Bespoke Functionality App – a bespoke functionality app an
app that is designed to provide a solution to a specific need or
problem. It would be an app that may include ‘data-driven‘ features,
‘device’ features, bells and whistles, but will also include very
dedicated and specific features that will only be relevant to provide
the solution to the defined problem.
For example, if you wanted a Time Management style app, most of
the features could be defined under the data-driven app type, but this
app would also include very specific Time Engine functionality.
48

Types of Mobile AppsTypes of Mobile Apps
nn Native AppsNative Apps
A native app as one that is
specifically designed to
run on a device’s
operating system and
machine firmware, and
nn Web AppsWeb Apps
A Web app, or browser
application, is one in
which all or some parts
of the software are
downloaded from themachine firmware, and
typically needs to be
adapted for different
devices.
Ex. Address book,Address book,
calendar andcalendar and
calculatorcalculator
downloaded from the
Web each time it is run.
Ø It can usually be
accessed from all Web-
capable mobile devices.
Ex. Weather Widgets,Weather Widgets,
Social Networking andSocial Networking and
Online GamesOnline Games.
8/20/2013 49

Technical difference between the two?Technical difference between the two?
n For instance, a native
application developed for
the iPhone will need to run
on its proprietary iOS
platform, or on Symbian
for many Nokia devices,
and so forth.
n One interesting point to note
is that while architectural
differences will likely remain
between a native and Web
application for some time, the
user experiences provided by
both interfaces are
increasingly blurred, as most
native apps utilize real-time
and so forth.
n A Web app, however, is
typically coded in a
browser-rendered
language such as HTML
combined with
JavaScript.
native apps utilize real-time
Web connectivity and Web
apps provide offline modes
that can be accessed without
network connectivity.
n As a result, some of these
apps are now referred to as
hybrid apps.
8/20/2013 50
Best practices for Mobile Apps development: http://www.w3.org/TR/mwabp/

Native:Native:
n For native apps, the advent
of the Apple App Store was
the game changer.
n Native apps will remain
preferred choice for heavy
apps such as 3D gaming in
the near future.
Web:Web:
n For mobile Web apps, notable
developer interest emerged only in
the last year or so after Google’s
successful implementation of
HTML5-based apps
n Web useful for subscription -
based services such as
communications, news & weather,
financial services, retail andfinancial services, retail and
shopping.
8/20/2013 51

Why Web Apps…..Why Web Apps…..
Web Apps offer an architectural advantage
when targeting a crossa cross--device launchdevice launch, where significantly less
platform migration is required compared to native applications,
Similar Platform independence paradigm of Java Technology…
8/20/2013 52

Compile-time EnvironmentCompile-time Environment
Java
Java
Source
(.java)
Java
Just in
Class
Loader
Bytecode
Verifier
Java
Class
Libraries
How Platform independence in JAVA worksHow Platform independence in JAVA works
Java
Bytecodes
move locally
or through
networkJava
Compiler
Java
Bytecode
(.class )
Java
Interpreter
Just in
Time
Compiler
Runtime System
Operating System
Hardware
Java
Virtual
machine

Java’sJava’s Platform IndependencePlatform Independence
Editor
:
7
;
Source
code
Compiler
:
;
Bytecodes
3-54
7
K Hello.java
;
Hello.class
;
"Interpreter
Hello,
World!
¿
Interpreter
Hello,
World!
:

55

56

ComparisionComparision……
57

58

Native or Web Apps?Native or Web Apps?
59

60

62

63
HH Mobile SE: SW Process ModelsMobile SE: SW Process Models

Software Engineering Process ModelsSoftware Engineering Process Models
64

65

Software Process modelsSoftware Process models
²² Waterfall modelWaterfall model
§ Plan-driven model. Separate and distinct phases of
Software development.
² In practice, most large systems are developed using a
process that incorporates elements from many process modelsprocess models
but Waterfall models is still one of the most popular approach.
Chapter 2 Software
Processes

When to use the Waterfall ModelWhen to use the Waterfall Model
n Requirements are very well known
n Product definition is stable
n Technology is understood
n New version of an existing product
n Porting an existing product to a new platform.n Porting an existing product to a new platform.
HCan it be usable for Embedded
Software or Mobile Software ?

68

Fountain ModelFountain Model
n The Fountain Model is a highly iterative approach
that is well-suited to object-oriented software
development.
n The Fountain Model allows for the fact that there
is considerable overlap of activities throughout
the development cycle — although some activitiesthe development cycle — although some activities
can't start before others.
n Just as a fountain’s water rises up and falls backfountain’s water rises up and falls back
to the pool belowto the pool below, in object-oriented software
development, the general workflow from analysis
through design to implementation is overlaid with
iterative cycles across many phases.
69

The Fountain model is a logicalThe Fountain model is a logical
70
The Fountain model is a logicalThe Fountain model is a logical
improvement to the Waterfallimprovement to the Waterfall
model.model.
The steps are still there, in theThe steps are still there, in the
same sequencesame sequence, however at any, however at any
step there can be a fallback tostep there can be a fallback to
an earlier step.an earlier step.
Moving through aMoving through a number ofnumber of
steps and falling back one orsteps and falling back one or
more stepsmore steps, performed, performed
repeatedly, is far morerepeatedly, is far more flexibleflexible
than the Waterfall model.than the Waterfall model.

71

72

73

Agile methodsAgile methods
n Dissatisfaction with the overheads involved in
software design methods of the 1980s and 1990s led
to the creation of agile methods. These methods:
HH Focus on the code rather than theFocus on the code rather than the designdesign
HH Are based on an iterative approach to softwareAre based on an iterative approach to software developmentdevelopment
HH Are intended to deliver working software quickly and evolveAre intended to deliver working software quickly and evolveHH Are intended to deliver working software quickly and evolveAre intended to deliver working software quickly and evolve
this quickly to meet changing requirementsthis quickly to meet changing requirements..
n The aim of agile methods is to reduce overheads in
the software process (e.g. by limiting documentation)
and to be able to respond quickly to changing
requirements without excessive rework.
74
Chapter 3 Agile
software development

Agile manifestoAgile manifesto
n We are uncovering better ways of developing software by doing
it and helping others do it. Through this work we have come to
value:
HH Individuals and interactionsIndividuals and interactions overover processesprocesses
and tools,and tools,
HH Working softwareWorking software overover comprehensivecomprehensiveHH Working softwareWorking software overover comprehensivecomprehensive
documentation,documentation,
HH Customer collaborationCustomer collaboration overover contractcontract
negotiation,negotiation,
HH Responding to changeResponding to change overover following a planfollowing a plan
n That is, whilethere is value in the items on the right, we value
the items on the left more.
Chapter 3 Agile
75

PlanPlan--drivendriven andand agile specificationagile specification
76
Chapter 3 Agile

Agile Vs Plan DrivenAgile Vs Plan Driven
H What type of system is being developed?
4 Plan-driven approaches may be required for systems that require
a lot of analysis before implementation (e.g. real-time system with
complex timing requirements).
H What is the expected system lifetime?
4 Long-lifetime systems may require more design documentation to
communicate the original intentions of the system developers to
the support team.the support team.
H What technologies are available to support
system development?
4 Agile methods rely on good tools to keep track of an evolving
design
H How is the development team organized?
4 If the development team is distributed or if part of the
development is being outsourced, then you may need to develop
design documents to communicate across the development
teams.
77
Chapter 3 Agile

78
HH Mobile SE: SW Process Models for AppsMobile SE: SW Process Models for Apps
44 Mobile OS & PlatformsMobile OS & Platforms

Process ModelsProcess Models for Mobile Softwarefor Mobile Software
nn Waterfall ModelWaterfall Model
nn Spiral ModelSpiral Model
nn Agile ProcessAgile Process
ModelModel
H Scrum approach &
other agile
techniques, e.g.,
testdrivennn Fountain ModelFountain Model testdriven
development,
nn Mobile SoftwareMobile Software
ModelModel
HH MM--BusinessBusiness
Procedure ModelProcedure Model
(2005)(2005)
HH mConcApptmConcAppt (2011)(2011) 79

Why Mobile Software EngineeringWhy Mobile Software Engineering
n Because mobile devices have fundamentally changed user
expectations, it’s extremely important that we, as designers,
follow a user-centered design process to arrive at our
solutions.
n The only problem is that our traditional best practices may
notnot always apply.
80

Characteristic IssuesCharacteristic Issues
81

Mobile Information ArchitectureMobile Information Architecture
82

83

While some “classic” software engineering techniques may
transfer to the mobile application domain with some minor
changes, but there are other areas having bonafide issues for
new research and development.
H Usability and User eXperience, in particular, are
among the key quality attributes.
H Mobile Information Architecture and Interaction
Design are other areas of design, critical to
success of Mobile Software
H Most of the applications were relatively small,
averaging several thousand lines of source code,
with one or two developers responsible for
conceiving, designing, and implementing the
application;
84

Mobile SE & DesigningMobile SE & Designing
How MobileMobile affects designers
n Sharp divide between “native” applications, those
that run entirely on the mobile device, and web
applications, which have a small device-based
client with execution occurring on a remote
server;server;
n Mobile’s differences directly impact all parts of the user-
centred design process:
H from user research to the final development
and testing of the solution.
H The biggest parts of the process it affects
are our delivery methods and our
information architecture. 85

n Developing a mobile and tablet friendly
information architecture is just the first step in
creating a great mobile experience.
n Mobile devices have their own set of Information
Architecture patterns, too.
n This has to do with arranging the functionality andn This has to do with arranging the functionality and
content into a logical structure to help users find
information and complete tasks. This includes
Hnavigation, search and labeling.
n Some characteristic designs and patterns
observed each for iOSiOS, AndroidAndroid and WindowsWindows
phone.phone.
86

n Guidelines
H Present links to the main features and content on the
landing page, prioritized according to the user’s needs.
H Mobile Design Pattern Gallery has examples of primary
and secondary navigation patterns for mobile, many of
which are vertical instead of horizontal as on desktopwhich are vertical instead of horizontal as on desktop
websites.
H Enable mobile users to navigate to the most important
content and functionality in as few taps or key presses
as possible.
87

User Navigation on MobileUser Navigation on Mobile
H Navigation optimized for small screens is usually broad
and shallow instead of deep.
H While three clicks (or taps) is not the magic number,
users need to be able to recognize that each tap is
helping them complete their task.
H Every additional level also means more taps, more
waiting for a page to load and more bandwidthwaiting for a page to load and more bandwidth
consumed.
H Address the navigation needs of both touchscreen and
non-touchscreen (Track Ball in Blackberry ) users.
4 When designing for touch, make sure the tap size of the
navigation item is at least 30 pixels wide or tall.
4 Provide keypad shortcuts for feature phones, so that users
can enter, say, a number (0 to 9) to quickly access a link.
88

Navigation GuidelinesNavigation Guidelines
n Provide navigational cues to let users know where they are,
how to get back and how to jump back to the start.
n Mobile breadcrumbs are often implemented by replacing the
“Back” button with a label showing users the section or
category that they came from.
H For mobile websites, use standard conventions, such as
a home icon that links back to the start screen,a home icon that links back to the start screen,
especially when navigation is not repeated on every
screen.
H Use concise, clear, consistent and descriptive labels for
navigation items and links. While always a good practice,
it becomes even more important on tiny mobile devices.
89

Today’sToday’s Solutions becomeSolutions become
tomorrow’stomorrow’s Standards andStandards and
Guidelines.Guidelines.
90

Mobile Information Architecture exhibits thethe Information deliveryInformation delivery
patternspatterns for the Mobile devices
91
The Information delivery on Mobile can be planned in many possible ways
and
There is no single pattern can be said to be best for each & every case

Information Architecture for UXInformation Architecture for UX
92

Mobile devices have theirMobile devices have their own set ofown set of
Information Architecture patternsInformation Architecture patterns, too, too..
While the structure ofWhile the structure of a responsive sitea responsive site maymay
follow morefollow more “standard”“standard” patterns,patterns, nativenative
apps,apps, for example, often employfor example, often employapps,apps, for example, often employfor example, often employ
navigational structures that are tabnavigational structures that are tab--based.based.
Again, there’s noAgain, there’s no “right ““right “way to architect away to architect a
mobile site or applicationmobile site or application
93

Information Architecture PatternsInformation Architecture Patterns
n While the structure of a responsive site may follow more
“standard” patterns, native apps, for example, often employ
navigational structures that are tab-based.
n Again, there’s no “right “way to architect a mobile site or
application. some of the most popular patterns:
HH Hierarchy,Hierarchy,
HH Hub & spoke,Hub & spoke,HH Hub & spoke,Hub & spoke,
HH Nested doll,Nested doll,
HH Tabbed view,Tabbed view,
HH Bento box andBento box and
HH Filtered view:Filtered view:
94

Hierarchy PatternHierarchy Pattern
The hierarchy pattern is a standard site
structure with an index page and a series
of sub pages.
If you are designing a responsive site
you may be restricted to this, however
introducing additional patterns could
allow you to tailor the experience for
mobile.
95
Ref:LukeRef:Luke Wroblewski’sWroblewski’s Mobile FirstMobile First
approachapproach : features and user journeys
that will help create great user
experiences.
Good forGood for
Organising complicated site structures that need to follow a desktop site’s
structure.
Watch forWatch for
Navigation. Multi-faceted navigation structures can present a problem to people
using small screens.

Hub & SpokeHub & Spoke
A hub and spoke pattern gives you a
central index from which users will
navigate out. It’s the default pattern on
Apple’sApple’s iPhoneiPhone.
Users can’t navigate betweencan’t navigate between spokes but
must return to the hub, instead.
This has historically been used on desktop
where a workflow is restricted however
96
where a workflow is restricted however
this is becoming more prevalent within the
mobile landscape due to users being
focused on one task, as well as the form
factor of the device, making a global
navigation more difficult to use.
Good forGood for
Multi-functional tools, each with a distinct internal navigation and purpose.
Watch forWatch for
Users that want to multi-task.

Nested DollNested Doll
n The nested doll pattern leads users in a linear fashion ton The nested doll pattern leads users in a linear fashion to
more detailed content.
n When users are in difficult conditions this is a quick and easy
method of navigation. It also gives the user a strong sense of
where they are in the structure of the content due to the
perception of moving forward and then back.
97
Good forGood for
Apps or sites with singular or closely related topics. This can also be used
as a sub section pattern inside other parent patterns, such as the standard
hierarchy pattern or hub and spoke.
Watch forWatch for
Users won’t be able to quickly switch between sections so consider whether
this will be suitable, rather than a barrier to exploring content.

Tabbed viewTabbed view
n This is a pattern that regular app users will be familiarregular app users will be familiar with.n This is a pattern that regular app users will be familiarregular app users will be familiar with.
n It’s a collection of sections tied together by a toolbarcollection of sections tied together by a toolbar menu.
n This allows the user to quickly scan and understand the
complete functionality of the app when it’s first opened.
98
Good forGood for
Tools based apps with a similar theme. Multi-tasking.
Watch forWatch for
Complexity. This pattern is best suited to very simple content structures.

Bento Box/DashboardBento Box/Dashboard
n The bento box or dashboard pattern brings more detailed content directly to
the index screen by using components to display portions of related tools or
content.content.
n This pattern is more suited to tabletmore suited to tablet than mobile due to its complexity It can
be really powerful as it allows the user to comprehend key information at a
glance, but does heavily rely on having a well-designed interface with
information presented clearly.
99
Good forGood for
Multi-functional tools and content-based tablet apps that have a similar theme.
Watch foratch for
The tablet screen gives you more space to utilize this pattern well, however it becomes
especially important to understand how a user will interact with and between each
piece of content, to ensure that app is easy, efficient and enjoyable to use.

Filtered viewFiltered view
n A filtered view pattern allows the
user to navigate within a set of
data by selecting filter options to
create an alternative view.
n Filtering, as well as using faceted
search methods, can be ansearch methods, can be an
excellent way to allow users to
explore content in a way that suits
them.
100
Good for
Apps or sites with large quantities of content, such as articles, images andarticles, images and
videosvideos. Can be a good basis for magazine style apps or sites, or as a sub
pattern within another navigational pattern.
Watch for
Mobile. Filters and faceted search can be difficult to display on a smaller
screen due to their complexity.

101
nn Why Mobile SE ? Mobile SE ApproachesWhy Mobile SE ? Mobile SE Approaches

UserUser--Centered Mobile Design Life cycleCentered Mobile Design Life cycle
102

What Is User Experience?What Is User Experience?
User experience (abbreviated as UX) is how a person feels when
interfacing
with a system.
The system could be a website, a web application desktop software or
Mobile Software and,
in modern contexts, is generally denoted by some form of human-
computer interaction (HCI).
103

User ExperienceUser Experience
n The term “user experienceuser experience” was coined by Dr. DonaldDr. Donald
NormanNorman, a cognitive science researcher who was also the
first to describe the importance of user-centered design
n Regardless of how much has changed in the development
process, a Website’s success or a Mobile Phone’s success
still hinges on just one thing:
H How users perceive it.H How users perceive it.
H “Does this website give me value? Is it easy to
use? Is it pleasant to use?”
H These are the questions that run through the
minds of visitors as they interact with our
products, and they form the basis of their
decisions on whether to become regular users.
n User experience design is all about striving to make them
answer “Yes” to all of those questions.
104

UX DesignUX Design
n Those who work on UX (called UX designersUX designers) study and
evaluate how users feel about a system, looking at such
things as ease of use, perception of the value of the system,
utility, efficiency in performing tasks and so forth.
n UX designers also look at sub-systems and processes
within a system.
H For example, they might study the checkout
process of an e-commerce website to seeprocess of an e-commerce website to see
whether users find the process of buying
products from the website easy and pleasant.
H They could delve deeper by studying
components of the sub-system, such as seeing
how efficient and pleasant is the experience of
users filling out input fields in a Web form.
105

Why Is UX Important?Why Is UX Important?
n Nowadays, with so much emphasis on user-centered design,
describing and justifying the importance of designing and
enhancing the user experience seems almost unnecessary.
n We could simply say, “It’s important because it deals with our
users’ needs — enough said,”.
n However, those of us who worked in the Web design industry,
Mobile Apps development industry prior to the codification of
user-centered design, usability and Web accessibility woulduser-centered design, usability and Web accessibility would
know that we used to make websites differently.
106

Why Is UX Important?Why Is UX Important?
n Before our clients (and we developers) understood the value
of user-centered design, we made design decisions based
on just two things:
H what we thought was awesome and
what the client wanted to see.
n We built interaction based on what we thought worked — wen We built interaction based on what we thought worked — we
designed for ourselves.
n The focus was on aesthetics and the brand, with little to no
thought of how the people who would use the website or
Mobile would feel about it.
n There was no science behind what we did.
n We did it because the results looked good, because they
were creative (so we thought) and because that was what
our clients wanted.
107

UX DesignUX Design
108

Things To Know About UX DesignThings To Know About UX Design
UX design is an amazing discipline, but it cannot, or will not,
accomplish certain things.
Ø UX Design Is Not One Size Fits All
H User experience design won’t work in every situation for every
user because, as human beings, we are all different.
H What works for one person might have the opposite effect on
another.
H And just as we can’t design a user experience, we can’t replicateH And just as we can’t design a user experience, we can’t replicate
the user experience for one website exactly on another website.
User experiences will be different between websites or Mobile
Software. a design must be tailored to the goals, values,
production process and products of its website / Mobile
Software.
109

Things To Know About UX DesignThings To Know About UX Design
Ø Can’t Be Directly Assessed With Traditional
Metrics
H You can’t determine the effectiveness of a user experience
design based solely on statistics such as page views, bounce
rates and conversion rates. We can make assumptions, and we
can ask users for anecdotal evidence, but we can’t install an
app (at least not yet) that automatically records user
experience statistics directly.experience statistics directly.
Ø Not the Same Thing as Usability
H User experience and usability have become synonymous, but
these two fields are clearly distinct. UX addresses how a user
feels when using a system, while usability is about the user-
friendliness and efficiency of the interface.
n Usability is big part of the user experience and plays a major role
in experiences that are effective and pleasant, but then human
factors science, psychology, information architecture and user-
centered design principles also play major roles. 110

Tasks And Techniques Of UX DesignersTasks And Techniques Of UX Designers
n UX designers perform various tasks at various points in the
process. Following are the few things that they deliver.
Ø Evaluation of Current System
Ø A/B Testing
Ø User Surveys
Ø Wireframes and Prototypes
Ø User Flows
Ø Storytelling
Ø Design Patterns
Ø User Profiles and Personas
Ø Content Inventory
Ø Content Style Guides
111

UX Design techniquesUX Design techniques
n Evaluation of Current
System
n If a system already exists, a
UX professional will
holistically evaluate its current
state. They will report issues
and suggest fixes based on
their analysis of research
data.
A/B Testing
A UX specialist might devise a study to
compare the effectiveness and quality of
experience of different user interfaces.
This is done by stating a hypothesis
(e.g. “A green button is more attractive
than a red button.”), proposing or
creating multiple versions of a design,
defining what a “better experience”
means (e.g. “The green button is betterdata.
112
means (e.g. “The green button is better
because users clicked it more.”) and
then conducting the test.

User SurveysUser Surveys
Wireframes and PrototypesWireframes and Prototypes
n A UX designer could
interview existing and
potential users of the
system to gain insight into
what would be the most
effective design.
n Because the user’s
experience is subjective,
the best way to directly obtain
information is by studying and
interacting with users.
n Based on their findings, UX
specialists might develop
wireframes of different
layouts and perhaps also
higher-fidelity prototypes.
113

Tools Of UX designTools Of UX design
n Few popular and easily accessible tools for UX professionals. Which
aren’t exclusive to UX professionals; developers, designers and
interaction designers, use them as well.
Ø Wireframing and Prototyping Applications
n Wireframing and prototyping can be done simply with pen and paper
and also with Software.
114

Wireframes &Wireframes & PrototypingPrototyping
115
ØPaper prototyping in particular, has many benefits, such as
being inexpensive, conducive to group prototyping and
quick and easy to produce.
ØSome software-based Wireframing and Prototyping tools
are:
ØOmniGraffle
ØBalsamiq Mockups
ØMockingbird

Elements of Mobile UXElements of Mobile UX
n The mobile user experience encompasses the user’s
perceptions and feelings before, during and afterbefore, during and after their interaction
with your mobile presence
H be it through a browser or an app
H using a mobile device that could lie
anywhere on the continuum from low-end
feature phone to high-definition tablet.feature phone to high-definition tablet.
n Creating mobile user experiences that delight users forces us
to rethink a lot of what we have taken for granted so far with
desktop design.
n It is complicated in part by mobile-specific considerations that
go hand in hand with small screens, wide variations in device
features, constraints in usage and connectivity, and the
hard-to-identify-but-ever-changing mobile context.
116

Elements of Mobile UX designElements of Mobile UX design
117
The relevance of these elements will change depending
on the type of device (feature phone versus smartphone versus
tablet) and the presentation interface (app versus Web).

Mobile UX Guidelines Functionality & GuidelinesMobile UX Guidelines Functionality & Guidelines
n This has to do with tools and features that enable users to
complete tasks and achieve their goals.
n Guidelines
n Prioritize and present core features from other channels that
have especial relevance in a mobile environment.
H For an airline, this includes flight statusesH For an airline, this includes flight statuses
and flight check-ins.
H For cosmetic chain Sephora, it includes
supporting in-store shopping via easy
access to product reviews on mobile
devices.
118

Mobile UX GuidelinesMobile UX Guidelines
n Offer relevant mobile-only functionality (like barcode scanning
and image recognition), and enhance functionality using the
capabilities of mobile devices where possible to engage and
delight users..
n Ensure that fundamental features and content are optimized for
mobile.
H For example, make sure the store locator shows
the nearest storesnearest stores based on the device’s location,the nearest storesnearest stores based on the device’s location,
and
H make the phone numbers click-to-call.
n Include features that are relevant to the business category. For
retail websites and apps, this would include product search,
order status and shopping cart.
n Offer key capabilities across all channels. Users who sign in
should see their personalized settings, irrespective of the device
or channel being used. If certain functionality is not offered on
mobile, then direct users to the appropriate channel,
119

Criticisms Of UX As A ProfessionCriticisms Of UX As A Profession
Not everyone sees the value of having a UX designer on the team.
Arguments against hiring UX specialists revolve around the
perceived associated costs, redundancy in skill set and fear of
change.
Ø Yet Another Thing to Worry About
n The traditional website / Mobile S/W developers especially at
small companies and start-ups, whose resources aren’t as deepsmall companies and start-ups, whose resources aren’t as deep
as they’d like, consists of one Web or Mobile Software designer
and one Web or Mobile Software developer.
n The Web or Mobile Software designer might be the one who
develops the user experience, along with other tasks such as
designing a wireframe and functional prototype, while the
developer builds the production website as specified by the
designer. A UX specialist only complicates this process.
120

Criticisms Of UX As A ProfessionCriticisms Of UX As A Profession
Too Far Removed From the Process
n A few people in the business of building websites believe that UX
designers are too far removed from the actual process. Ryan
Carson, founder of Carsonified and a leading voice in the Web
design industry, for example, has criticized UX professionals who
aren’t “involved in the day-to-day process of designing, building,
testing, marketing and updating a Web project.”
n This view of the profession basically says that UX professionals
with no background in the actual process of building websites
can’t devise solutions as expertly as people who create the
actual products.
n However, many UX professionals do have a background in the
build process; many were Web designers or developers who
chose to specialize in this particular area of the production
process.
121

Mobile Interaction DesignMobile Interaction Design
122

Interaction DesignInteraction Design
n interaction design, often abbreviated IxD, is "about shapingabout shaping
digital things for people’s usedigital things for people’s use",
H Alternately defined as "the practice of
designing interactive digital products,
environments, systems, and services.“
H Like many other design fields interactionH Like many other design fields interaction
design also has an interest in formform but its
main focus is on behaviorbehavior.
H It’s important to understand how mobile and
tablet interactions differ when compared to
their desktop counterparts.
123

n Mobile Interaction Design explores important issues
relating to this ever-changing technology, including,
developing interfaces and devices with a great deal ofinterfaces and devices with a great deal of
sensitivitysensitivity to human needs, desires, and capabilities.
touch screens;
n Most modern, mobile devices employ touch screens;
which provide their own set of opportunities and
constraints.
124
We use touch screenstouch screens not only to view content, but also to
interactinteract with that content.
This forces designers to consider ergonomics, gestures,ergonomics, gestures,
transitionstransitions, and finally, mobile-specific interaction patterns

ErgonomicsErgonomics
n Designing for mobile ergonomics requires that we pay attention to
device dimensions as well as the pragmatic concerns of touch
screens.
n The way a user holds a device and touches the screen, for
example, influences how easy it is for that user to reach parts of
the screen.
H Hit areas, or “areas of the screen the user touches
to activate something” require adequate space forto activate something” require adequate space for
the user to accurately (and confidently) press.
H The average fingertip is between one to two
centimeters wide, which roughly correlates to
somewhere between 44px and 57px44px and 57px on a standard
screen and on a high-density (“retina”) screen.
HH Nokia, AppleNokia, Apple andand MicrosoftMicrosoft each recommend slightlyeach recommend slightly
different sizes to account for the nature ofdifferent sizes to account for the nature of touchscreenstouchscreens..125

ErgonomicsErgonomics
Ø Yet there are no hard and
fast rules with regards to hit
areas.
Ø Instead of looking to the
various standards for an
answer, simply consider
GesturesGestures
n Gestures are Each part
of a touchscreen
dedicated to functionality
precludes the display of
content in that area,
making gestures aanswer, simply consider
what the user needs to
achieve on the screen, how
important that task is, and
how quickly they need to
complete it – then design
accordingly.
making gestures a
crucial component of
mobile interaction design.
n All of the major touch
operating systems
employ them, including:
Google’s Android, Apple’s
iOS, and Microsoft’s
Windows 8. 126

GesturesGestures
PressPress Double Press Long Press
127
Small Swipe LargeSwipe Pinch / spreadPinch / spread

TransitionsTransitions
n Transitions are interactions that smooth the boundaries betweeninteractions that smooth the boundaries between
application statesapplication states,
H helping to tell a story or (re)establish a
gestural metaphor.
H More generally, transitions help facilitate
recall and prevent users from getting lost.recall and prevent users from getting lost.
128
Gesture TransitionGesture Transition

n Grill et al. describe a pattern approach to mobile interaction designpattern approach to mobile interaction design.
n The approach starts with the elicitation of requirements with a
focus on the analysis of the mobile environment.
n The mobile technology, the users, as well as data and information
are parameters for the mobile environment.
n After being elicited, the parameters are used in a second step as then After being elicited, the parameters are used in a second step as the
basis for the upcoming interaction design process (IxDIxD--Process).Process).
n The IxD-Process is iterative and consists of building numerous
design drafts followed by a formative evaluation.
129

n Beneath common tools for interaction design like personaspersonas and
scenariosscenarios, the interaction designer has tool-based access to a
library of mobile interaction pattern.
n Thus, the interaction designer is able to use common practices in
the field of mobile interaction design to generate a design
solution.
n The evaluation of the interaction designs created in a tool has
n The evaluation of the interaction designs created in a tool has
shown that especially expert users of mobile devices have some
trouble with the interaction because of their concrete experiences
and expectations regarding interaction with a mobile device.
130

Mobile Software ImplementationMobile Software Implementation
TypesTypes ofof Mobile AppsMobile Apps :: Web AppWeb App VsVs Native AppNative App
131
TypesTypes ofof Mobile AppsMobile Apps :: Web AppWeb App VsVs Native AppNative App
Does it make any differenceDoes it make any difference as Software Engineeras Software Engineer ??

Why Web Apps…..:Why Web Apps…..: Development ParadigmDevelopment Paradigm
Web Apps offer an architectural advantage
when targeting a crossa cross--device launchdevice launch, where significantly less
platform migration is required compared to native applications,
Similar Platform independence paradigm of Java Technology…
8/20/2013 132

Java’sJava’s Platform IndependencePlatform Independence
Editor
:
7
;
Source
code
Compiler
:
;
Bytecodes
3-134
7
K Hello.java
;
Hello.class
;
"Interpreter
Hello,
World!
¿
Interpreter
Hello,
World!
:

Native AppNative App
n An application
specifically designed to
run on a device’s
operating system and
machine firmware
n It typically needs to be
adapted/adjusted for
Web AppWeb App
n An application in which
all or some parts of the
software are
downloaded from the
Web each time it is run
n •It can usually be
accessed from all web-adapted/adjusted for
different devices
accessed from all web-
capable mobile devices
8/20/2013 135

Native:Native:
n For native apps, the advent
of the Apple App Store was
the game changer.
n Native apps will remain
preferred choice for heavy
apps such as 3D gaming in
the near future.
Web:Web:
n For mobile Web apps, notable
developer interest emerged only in
the last year or so after Google’s
successful implementation of
HTML5-based apps
n Web useful for subscription -
based services such as
communications, news & weather,
financial services, retail andfinancial services, retail and
shopping.
8/20/2013 136

137

MosyncMosync
nn MoSyncMoSync is ais a free and open source software development kitfree and open source software development kit
(SDK)(SDK) for mobile applications.for mobile applications.
nn It is integrated with theIt is integrated with the Eclipse development environmentEclipse development environment,,
and is provided under a dual license scheme; a commercialand is provided under a dual license scheme; a commercial
license and an open source GPL version 2 license.license and an open source GPL version 2 license.
nn The framework producesThe framework produces native mobile applications fornative mobile applications for
multiple platforms using C/C++, html5 scriptingmultiple platforms using C/C++, html5 scripting and anyand anymultiple platforms using C/C++, html5 scriptingmultiple platforms using C/C++, html5 scripting and anyand any
combination thereof.combination thereof.
nn The target group forThe target group for MoSyncMoSync are both web developersare both web developers
looking to enter the mobile space, as well as the ordinarylooking to enter the mobile space, as well as the ordinary
PC/Mac desktop developer with knowledge in C/C++PC/Mac desktop developer with knowledge in C/C++
developmentdevelopment
138

Mosync SDKMosync SDK
CrossCross--platform SDK and HTML5 tools for mobile app developmentplatform SDK and HTML5 tools for mobile app development

Mosync ReloadMosync Reload

Working of PhoneGap
Phonegap
—— Inputs are Mobile Web Apps & Output is the Native Apps forInputs are Mobile Web Apps & Output is the Native Apps for
chosen platformschosen platforms

Web AppWeb App toto Native AppNative App
n The Tools and Frameworks are making it possible to do the
transformation,
n core features and functionality of the PhoneGapPhoneGap framework

143
44 Mobile OS & Platforms: Developing Native AppsMobile OS & Platforms: Developing Native Apps

Mobile Platforms & VendorsMobile Platforms & Vendors
144

Mobile Platforms & VendorsMobile Platforms & Vendors
n To discuss about brands and models is very difficult. The market
changes a lot every year.
n In fact, during the months while I was preparing this material, I
had to update this information several times.
n So, I’ll be general here and aim to give you not only an idea of
what’s out there now, but also of how to understand new devices
that may appear on the market.that may appear on the market.
n We will see the developing and working of a Native App for one
of the most popular Mobile platform
145

AppleApple iOSiOS
nn Apple,Apple, is significance in Mobile world not
because the greatest market share, but as
Apple has caused a revolution in the market.
n It changed the way userschanged the way users see mobile devices
and mobile web browsing, and it is the reason
why many developers (web or not) have
turned their attention to the mobile world.
n Apple, known desktop computer company,n Apple, known desktop computer company,
entered the mobile world with a revolutionary
device: thethe iPhoneiPhone.
nn iPod touchiPod touch continued the iPhone revolution
with a similar device without phone
capabilities.
n All of Apple’s small mobile devices are quite
similar. They have aa multitouchmultitouch screen, a 3.5”screen, a 3.5”
screen with medium or ultrascreen with medium or ultra--high resolution orhigh resolution or
a 4” screen with ultraa 4” screen with ultra--high resolution,high resolution, WiFiWiFi
connections, and Safariconnections, and Safari on iOS as browser.
146

n The iPad series added a 9.7” screen size (medium and high
resolution), with almost the same other features as the iPod
touch and iPhone.
n As of June 2012, Apple had sold over 400 million iOS devices,
including iPhones, iPod touches, and iPads
n Apple’s devices have a great feature: an operating system called
iOS (formerly iPhone OS) that is based on Mac OS X (a Unix-
AppleApple iOSiOS
iOS (formerly iPhone OS) that is based on Mac OS X (a Unix-
based desktop OS).
n Usually, the last hardware versions of the iPhone can be
upgraded to the latest operating system version.
n By default, the iPhone, iPad, and iPod touch are charged using a
USB adapter; when you charge your device, iTunes (the Apple
software for managing your device’s content and music) will
detect automatically if an OS update is available for your device,
and you can install the update in minutes without any technical
skill needed. 147

n Starting withwith iOSiOS 5.05.0, the device can upgrade itself over the air
(OTA), just using your wireless connection.
n That is why today, for a mobile web developer, it’s more
important to know what OS version an Apple devicewhat OS version an Apple device has installed
than which device it is.
n For those of us whose aim is to create great web experiences for
the iPhone, it doesn’t matter if the device is an iPhone (the
AppleApple iOSiOS
the iPhone, it doesn’t matter if the device is an iPhone (the
original phone), an iPhone 4S (the S stands for speed).
n So, the important thing is to know which OS version a device that
accesses your website is running. It may be iOS 1.0, 2.2, 3.0,
3.2, 4.0, 5.0, 6.0, or newer (although versions 1.0 to 3.2 are
rarely seen on devices in use today, so we can safely work with
versions 4.0 and beyond).
nn Up to version 4.0,Up to version 4.0, iOSiOS was calledwas called iPhoneiPhone OSOS. Every version
has upgrades in the browser—for example, the Gmail version for
the iPhone is different if you have an iPhone running OS 2.2 or
6.0—and is backward compatible..
148

iPhonesiPhones
149

Same Gmail account accessed fromSame Gmail account accessed from anan iPhoneiPhone running OS 2.0running OS 2.0
andand one running 6.0——the latter provides a more rich and contextual experiencethe latter provides a more rich and contextual experience
for the userfor the user
150

Android OSAndroid OS
&&
Application DevelopmentApplication Development
151

AndroidAndroid
n Android is a platform, not a manufacturer. Therefore, it may not
seem to fit in this list.
n It does, though—if we are developing a website for an Android
device, we don’t need to bother too much about who the
manufacturer is.
n This is because the Android platform is powerful enough to leave
the brand and model in second place when we are talking aboutthe brand and model in second place when we are talking about
developer features.
n Android is an open source, Linux-based operating system
created and maintained by a group of software and hardware
companies and operators called the Open Handset Alliance.
n Google mainly maintains it, so it is sometimes known as the
“Google Mobile Operating System.”
152

Android VersionsAndroid Versions
153

n As with any open source software, any manufacturer
could theoretically remove all the Google-specific
stuff from the operating system before installing it
on its devices.
n However, as of this writing no vendor has done this,
which is why every Android device is very “Google
friendly.”
AndroidAndroid
n According to official Google data, as of July 2012
there were 400 million Android devices in use and
1 million new devices activating every day.
n Android is a software stack including a Linux-core,
multitasking operating system based on the
concept of a virtual machine that executes bytecode,
similar to .NET or JVM (Java Virtual Machine).
n Google chose Java as the main language to compile
(not compatible with Java ME) with web users in
mind.
154

n Android includes a bunch of Google services, such as Google
Maps, Google Calendar, Gmail, and an email client, and provides
connections to many free Google web services. It’s not an
obligation, but as of every Android device is touch-based, and
many of them have a QWERTY physical keyboard, GPS, a digital
compass, and an accelerometer.
n Today, HTC, Motorola, Samsung, LG, Acer, Asus, and Sony
AndroidAndroid
n Today, HTC, Motorola, Samsung, LG, Acer, Asus, and Sony
Mobile make Android devices.
n There are also some nonphone devices, such as tablets, that use
Android. There are even some personal video-playing glasses
that use Android, and Google TVGoogle TV, an interactive television
platform, is based on this mobile operating system.
155

AndroidAndroid
n An Android device usually comes with the Google Play
Store (previously known aspreviously known as Android MarketAndroid Market), the official
platform store for Android apps, music, books, and other
multimedia content, preinstalled. Some Android-based
vendors replace this or add their own stores, such as the
Amazon Appstore or Samsung Apps.
n Android is the mobile platform with the most choices when
talking about mobile browsers. From the default Android browsertalking about mobile browsers. From the default Android browser
available before Android 4.1, to Firefox, Google Chrome, Opera
Mobile, Opera Mini, UCWeb, and many others, there are multiple
options available to download and install for free.
n Android 3.0 was the first version supporting large screens and
tablets.
n However, you can find lots of 7” tablets—such as the first
generation of Samsung Galaxy Tabs—and some 10” tablets from
low-budget manufacturers using Android 2.2 and Android 2.3
sold before 2012.
156

Mse july13 (1/3)

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie Mse july13 (1/3)

Ähnlich wie Mse july13 (1/3) (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Mse july13 (1/3)