mse july13 (1/3)

Mobile Software Mobile Software EngineeringEngineering

By

Prof. Dr. Prof. Dr. O.P.VyasO.P.VyasDAAD Fellow (Germany), AOTS Fellow (Japan)

Indian Institute of Information Technology Indian Institute of Information Technology AllahabadAllahabad

Mobile Software Engineering

Prof. OP Vyas Indian Institute of Information Technology, Allahabad, India

n Mobile Software: Evolution or RevolutionHH 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 Applications Mobile Software: Cross Device Applications

n Mobile Apps Characteristics & IssuesHH Software trends : Native Apps & Web AppsSoftware trends : Native Apps & Web Apps

Mobile Software EngineeringMobile Software Engineering

2

HH Software trends : Native Apps & Web AppsSoftware trends : Native Apps & Web Apps

HH Mobile Information Architecture: PatternsMobile Information Architecture: Patterns

n Why Mobile SE ? Mobile SE ApproachesHH Mobile SE trends : Usability Lifecycle & UX Design Mobile SE trends : Usability Lifecycle & UX Design

HH Mobile Interaction Design: Mobile Mobile 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 Software Introduction 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 Toolsn 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 interface based user interface system for all popular mobile device platforms,

nn Mobile Software Testing: SeleniumMobile Software Testing: Selenium4



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



Mobile SoftwareMobile Softwaren 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 AppStoreAppStoreopened in July, 2008.

n The term “AppApp" has become popular, and in 2010 was listed n 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 recentemergence of emergence of Apple Apps Store, Apple Apps Store, Google Play (Google Play (known as Android known as Android

Marketplace previouslyMarketplace previously), Nokia ), Nokia OviOviStore,Store,Store,Store,

Windows Phone Marketplace Windows Phone Marketplace and and Amazon App Store Amazon App Store open up a huge open up a huge

possibility for designers and possibility for designers and developers alikedevelopers alike..

8



Mobile SoftwareMobile Software

n Since 2008, device makers have created outlets for other mobile devices, including Android, BlackBerry, Nokia OviWindows 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 applications n 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 than than 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 applicationdistribution platforms, which are typically operated bythe owner of the mobile operating system, such as theApple App Store, Google Play, Windows Phone Store andBlackBerry App World.

n Some Apps are free, while others must be bought.Usually, they are downloaded from the platform to atarget device, such as an iPhone, BlackBerry, Android

Mobile Apps & OS…..Mobile Apps & OS…..

target device, such as an iPhone, BlackBerry, Androidphone or Windows Phone, but sometimes they can bedownloaded to laptops or desktops.

n For apps with a price, generally a percentage, 20-30%,goes to the distribution provider (such as iTunes), andthe rest goes to the producer of the app.

10



somya

Highlight

somya

Highlight


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 companies Similarly, 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 8n 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 Play13



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 well runs 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 anAndroidAndroid devicedevice, you are installing an app thatwas written specifically for the Android operatingsystem.

HH YouYou cancan installinstall AndroidAndroid appsapps ontoonto aa WindowsWindowscomputercomputer —— andand eveneven onon MacsMacs andand LinuxLinux PCsPCs —— butbutcomputercomputer —— andand eveneven onon MacsMacs andand LinuxLinux PCsPCs —— butbutonlyonly ifif thethe computercomputer isis runningrunning specialspecial softwaresoftware calledcalledanan AndroidAndroid emulatoremulator,, whichwhich createscreates aa virtualvirtual AndroidAndroiddevicedevice 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 Accountdeveloper apple.com/iphone

MeeGo Qt, Web Apps, C++ Intel and Nokia guided Open source OS (based on MeeGo 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 deviceswww.forum.com/symbian

WebOS HML, CSS, JavaScript, C

Support widget style programming, (based on Linux) developer.palm.com

WindowsMobile

C#, C .NET, CF of Windows Mobile API, most devices ship with J2ME compatible JVMdeveloper.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 Applications Cross Device Applications

n Mobile Apps Characteristics & Issues


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 other positioning 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.



somya

Highlight

Mobile Software: Physicality and specificationsMobile Software: Physicality and specifications

Ø Most mobile devices employ touch screens, where users rely ongestures – in addition to simple interface elements – to interact withthem.

ØDoes it make significant change if software is tobe developed for touch screens ?

ØBecause of their smaller dimensions, we expect the content

20

ØBecause of their smaller dimensions, we expect the contentstructures to be simpler and smaller.



http://www.uxbooth.com/articles/designing-for-mobile-part-2-interaction-design/

somya

Highlight

Mobile Software: Physicality and specificationsMobile Software: Physicality and specifications

ØAlso, because of their limited bandwidth and connectivity, mobiledevices require designs to be optimized for loadingloading time,time, withwith reducedreduceddatadata requirementrequirements.

Øwe may use the device under difficult viewing conditions, or among avariety 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 platforms22



Mobile Business AppsMobile Business Apps

n And Mobile Business Apps are running rampant in the B2B B2B world world 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 team relevant to a industry, a company, software team and your your career as Software Engineercareer as Software Engineer,, a year from now?

H Think again. 23



Mobile Apps Mobile 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





n Mobile Apps Characteristics & IssuesHH 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--Phone Phone

29

TabletsTabletsMobile Mobile

PhonesPhones

Basic & Basic & FeatureFeaturephonesphones

Social Social PhonesPhones

TVTV

Android Based

Apple iPhones

NonNon--Phone Phone

devicesdevicesSmartphonesSmartphones



Mobile DevicesMobile Devices

TabletsTablets

Mobile Mobile

PhonesPhones

Basic Mobile Phones: Basic Mobile Phones: These are phones with call and


Data Mining FunctionalitiesData Mining Functionalities

30

These are phones with call andSMS 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 million 250 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

AppleiPhone




Mobile Device CategoriesMobile Device Categories

SmartphonesTabletsTablets

Mobile

Phones

31

Android based

AppleiPhones

Basic & Feature

PhonesSocial 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--sized sized screen, basic HTML browser support, screen, basic HTML browser support, sometimes 3G connection sometimes 3G connection support, a decent camera, a music player, games, and application support



TabletsTablets

MobilePhones

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 to Some 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 & FeaturePhones

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

SmartphonesFeatures

Currently, this category includes the Apple iPhone, every Android device

(includingthe Samsung Galaxy series and the

Sony Xperia series), the Nokia Lumia 920, and laterBlackBerrys.

Feature Phones

Basic Phones

SocialPhones



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 fromDigital TV , Tablet PC, and Home Consumer Electronics as well.

Ø But can we develop an App which fits well fits 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 aswell.

ØCommon issues include integration with device hardware, as well astraditional issues of security, performance, reliability, and storagelimitations.

ØHowever, Mobile applications present some additional requirements that areless commonly found with traditional software applications.



n Different Vendors, heterogeneous platforms but SE paradigm SE 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 Engineering use Engineering is key to meet tough is key to meet tough

timetime--toto--marketmarket constraints,constraints,38



Mobile Apps Mobile 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 of Large number of Mobile Software Mobile Software

are failing to meetare failing to meet user user

expectationsexpectations…….…….

44



According to a recent studyAccording to a recent study, 60% of , 60% of mobile users mobile users will abandon your app or will abandon your app or

site if it doesn’t load site if it doesn’t load within three within 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 site never return to your app or site –– and and that’s just scratching the surface of that’s just scratching the surface of

user expectations !!user expectations !!

45



SE for Mobile SoftwareSE for Mobile SoftwareHowever, 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 mobile quality 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 now mouth 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.

HWith app store ratings, that’s exactly what’s happening.

47



Various Mobile Apps Various 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 based hardware 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 the machine firmware, and

typically needs to be adapted for different devices.

Ex. Address book, Address book, calendar and calendar 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 and Social 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 50Best practices for Mobile Apps development: http://www.w3.org/TR/mwabp/



somya

Highlight

somya

Highlight

somya

Highlight

somya

Highlight

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 and financial services, retail and shopping.

8/20/2013 51



somya

Highlight

somya

Highlight

Why Web Apps…..Why Web Apps…..

Web Apps offer an architectural advantagewhen 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



somya

Highlight

Compile-time EnvironmentCompile-time Environment

Java

JavaSource(.java)

JavaJust in

Class Loader

BytecodeVerifier

Java Class

Libraries

How Platform independence in JAVA worksHow Platform independence in JAVA works

JavaBytecodes

move locallyor through

networkJavaCompiler

JavaBytecode(.class )

JavaInterpreter

Just in Time

Compiler

Runtime System

Operating System

Hardware

JavaVirtual

machine



Java’s Java’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



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 Accountdeveloper apple.com/iphone

MeeGo Qt, Web Apps, C++ Intel and Nokia guided Open source OS (based on MeeGo 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 deviceswww.forum.com/symbian

WebOS HML, CSS, JavaScript, C

Support widget style programming, (based on Linux) developer.palm.com

WindowsMobile

C#, C .NET, CF of Windows Mobile API, most devices ship with J2ME compatible JVMdeveloper.windowsmobile.com

Window Phone

C#, VB.NET SilverLight, XNA Framework



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 models process 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 activities the development cycle — although some activities can't start before others.

n Just as a fountain’s water rises up and falls back fountain’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 logical The Fountain model is a logical

70

The Fountain model is a logical The Fountain model is a logical improvement to the Waterfall improvement to the Waterfall

model. model. The steps are still there, in the The steps are still there, in the

same sequencesame sequence, however at any , however at any step there can be a fallback to step there can be a fallback to

an earlier step.an earlier step.Moving through a Moving through a number of number of steps and falling back one or steps and falling back one or

more stepsmore steps, performed , performed repeatedly, is far more repeatedly, is far more flexible flexible

than the Waterfall model. than the Waterfall model.



71



72



73



Agile methodsAgile methods

n Dissatisfaction with the overheads involved insoftware design methods of the 1980s and 1990s led to the creation of agile methods. These methods:

HH Focus on the code rather than the Focus on the code rather than the designdesign

HH Are based on an iterative approach to software Are based on an iterative approach to software developmentdevelopment

HH Are intended to deliver working software quickly and evolve Are intended to deliver working software quickly and evolve HH Are intended to deliver working software quickly and evolve Are 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.

74Chapter 3 Agile

software development



Agile manifesto Agile 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 interactions Individuals and interactions overover processes processes and tools,and tools,

HHWorking software Working software over over comprehensive comprehensive HHWorking software Working software over over comprehensive comprehensive documentation,documentation,

HH Customer collaboration Customer collaboration overover contract contract negotiation,negotiation,

HH Responding to change Responding to change overover following a plan following 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

software development75



PlanPlan--driven driven andand agile specificationagile specification

76Chapter 3 Agile




Agile Vs Plan DrivenAgile Vs Plan Driven

HWhat type of system is being developed?4Plan-driven approaches may be required for systems that require

a lot of analysis before implementation (e.g. real-time system with complex timing requirements).

HWhat is the expected system lifetime?4Long-lifetime systems may require more design documentation to

communicate the original intentions of the system developers to the support team.the support team.

HWhat technologies are available to support system development?4Agile 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.

77Chapter 3 Agile









78


HH Mobile SE: SW Process Models for AppsMobile SE: SW Process Models for Apps


44 Mobile OS & PlatformsMobile OS & Platforms







Process Models Process Models for Mobile Softwarefor Mobile Software

nn Waterfall ModelWaterfall Model

nn Spiral ModelSpiral Model

nn Agile Process Agile Process ModelModel

H Scrum approach & other agile techniques, e.g., testdrivennn Fountain ModelFountain Model testdrivendevelopment,

nn Mobile Software Mobile Software ModelModel

HH MM--Business Business Procedure Model Procedure Model (2005)(2005)

HH mConcApptmConcAppt (2011)(2011) 79



Why Mobile Software EngineeringWhy Mobile Software Engineeringn 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



Mobile Software EngineeringMobile Software EngineeringCharacteristic IssuesCharacteristic Issues

81



Mobile Information ArchitectureMobile Information Architecture

82








83











Mobile SoftwareMobile SoftwareWhile 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 and n 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, Android Android and Windows Windows 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 desktop which 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 bandwidth waiting 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.

4When 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’s Today’s Solutions become Solutions become

tomorrow’stomorrow’s Standards and Standards and

Guidelines.Guidelines.

90




Mobile Information Architecture exhibits the the Information delivery Information delivery patternspatterns for the Mobile devices

91

The Information delivery on Mobile can be planned in many possible waysand

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 of own set of Information Architecture patternsInformation Architecture patterns, too, too. .

While the structure of While the structure of a responsive site a responsive site may may follow morefollow more “standard” “standard” patterns,patterns, native native

apps, apps, for example, often employ for example, often employ apps, apps, for example, often employ for example, often employ navigational structures that are tabnavigational structures that are tab--based. based.

Again, there’s no Again, there’s no “right ““right “way to architect a way to architect a mobile site or applicationmobile site or application

93



Information Architecture PatternsInformation Architecture Patternsn 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 and Bento box and

HH Filtered view:Filtered view:

94



Hierarchy PatternHierarchy PatternThe 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 First Mobile First approach approach : features and user journeys

that will help create great user experiences.

Good forGood forOrganising 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’s Apple’s iPhoneiPhone.

Users can’t navigate between can’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 forMulti-functional tools, each with a distinct internal navigation and purpose.

Watch forWatch forUsers that want to multi-task.



Nested DollNested Doll

n The nested doll pattern leads users in a linear fashion to n 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 forApps 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 familiar regular app users will be familiar with. n This is a pattern that regular app users will be familiar regular app users will be familiar with.

n It’s a collection of sections tied together by a toolbar collection 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 forTools based apps with a similar theme. Multi-tasking.

Watch forWatch forComplexity. 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 tablet more 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 forMulti-functional tools and content-based tablet apps that have a similar theme.

Watch foratch forThe 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 an search methods, can be an excellent way to allow users to explore content in a way that suits them.

100

Good forApps or sites with large quantities of content, such as articles, images and articles, 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 ApproachesHH Mobile SE trends : Usability Lifecycle & UX Design Mobile SE trends : Usability Lifecycle & UX Design






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. Donald Dr. 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 Designn 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 see process 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 would user-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:

Hwhat we thought was awesome and what the client wanted to see.

n We built interaction based on what we thought worked — we n 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 DesignUX 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 replicate H 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 techniquesn 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 TestingA 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 better data.

112

means (e.g. “The green button is better because users clicked it more.”) and

then conducting the test.



User SurveysUser SurveysWireframes 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 & Prototyping Prototyping

115

ØPaper prototyping in particular, has many benefits, such asbeing inexpensive, conducive to group prototyping andquick and easy to produce.

ØSome software-based Wireframing and Prototyping toolsare:ØOmniGraffleØBalsamiq MockupsØMockingbird



Elements of Mobile UXElements of Mobile UXn The mobile user experience encompasses the user’s

perceptions and feelings before, during and after before, 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 statuses H 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 Guidelinesn 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 stores nearest stores based on the device’s location, the nearest stores nearest 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 deep small 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 shaping about 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 interaction H 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 of interfaces and devices with a great deal of sensitivity sensitivity 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



ErgonomicsErgonomicsn 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 for to 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 57px 44px and 57px on a standard screen and on a high-density (“retina”) screen.

HH Nokia, Apple Nokia, Apple and and MicrosoftMicrosoft each recommend slightly each recommend slightly different sizes to account for the nature of different 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 functionalityprecludes the display of content in that area, making gestures a answer, 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 between interactions that smooth the boundaries between application statesapplication states,

H helping to tell a story or (re)establish a gestural metaphor.

HMore 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 the n 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 Implementation Mobile Software Implementation

Types Types of of Mobile Apps Mobile Apps : : Web App Web App Vs Vs Native AppNative App

131

Types Types of of Mobile Apps Mobile Apps : : Web App Web App Vs Vs Native AppNative AppDoes it make any difference Does it make any difference as Software Engineer as Software Engineer ??



Why Web Apps…..: Why Web Apps…..: Development ParadigmDevelopment Paradigm

Web Apps offer an architectural advantagewhen 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



Compile-time EnvironmentCompile-time Environment

Java

JavaSource(.java)

JavaJust in

Class Loader

BytecodeVerifier

Java Class

Libraries

How Platform independence in JAVA worksHow Platform independence in JAVA works

JavaBytecodes

move locallyor through

networkJavaCompiler

JavaBytecode(.class )

JavaInterpreter

Just in Time

Compiler

Runtime System

Operating System

Hardware

JavaVirtual

machine



Java’s Java’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 App Native 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 App Web 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 devicesaccessed 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 and financial services, retail and shopping.

8/20/2013 136



137



MosyncMosync

nn MoSyncMoSync is a is a free and open source software development kit free and open source software development kit (SDK)(SDK) for mobile applications. for mobile applications.

nn It is integrated with the It is integrated with the Eclipse development environmentEclipse development environment, , and is provided under a dual license scheme; a commercial and 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 produces The framework produces native mobile applications for native mobile applications for multiple platforms using C/C++, html5 scripting multiple platforms using C/C++, html5 scripting and any and any multiple platforms using C/C++, html5 scripting multiple platforms using C/C++, html5 scripting and any and any combination thereof. combination thereof.

nn The target group for The target group for MoSyncMoSync are both web developers are both web developers looking to enter the mobile space, as well as the ordinary looking 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 ReloadMobile Software Engineering


Working of PhoneGap

Phonegap

óó Inputs are Mobile Web Apps & Output is the Native Apps for Inputs are Mobile Web Apps & Output is the Native Apps for chosen platformschosen platforms



Web App Web App to to 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



Apple Apple iOSiOSnn 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 users changed 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: the the iPhoneiPhone.

nn iPod touch iPod 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 a a multitouchmultitouch screen, a 3.5” screen, a 3.5” screen with medium or ultrascreen with medium or ultra--high resolution or high resolution or a 4” screen with ultraa 4” screen with ultra--high resolution, high resolution, WiFiWiFiconnections, 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-

Apple Apple 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 with with 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 device what 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

Apple Apple 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 called was 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 from Same Gmail account accessed from an an iPhoneiPhone running OS 2.0running OS 2.0and and one running 6.0——the latter provides a more rich and contextual experience the 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 about the 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 as previously 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 browser talking 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



The Galaxy from Samsung and RZR from Motorola are the most famousAndroid device series; here you can see the Galaxy SIII and the RZR M.

157



Google’s Nexus devicesGoogle’s Nexus devices

n In 2011, Google acquired Motorola Mobility, the well-known mobile device manufacturer.

n This means that Google is now itself a manufacturer of mobile devices—including the well-known tablet Motorola Xoom and the Motorola Droid series—and Motorola is still working as a separate company under its own name.

n While Google has promised that Android will continue its n While Google has promised that Android will continue its current open source.Despite its link with Motorola, Google has some devices that it identifies as key devices—examples of the best hardware for every Android version.

n Different vendors, such as HTC, Asus, and Samsung, manufacture these devices without any customization (pure Android), and they are usually very high-end devices, mostly acquired by developers.

n These Google key devices are under the Nexus series name; they include the Nexus One, Nexus S, Galaxy Nexus, and the multimedia home player Nexus Q.

158



FragmentationFragmentation

n One of the big problems of Android from a developer’s perspective is its fragmentation.

n Which means the diversity of manufacturers and devices on the market, from very low-end cheap hardware to very expensive high-end hardware, and from really small screens and resolutions to high-definition devices with large screens.

n Compared to to iOSiOS, where every device is basically the same , where every device is basically the same n Compared to to iOSiOS, where every device is basically the same , where every device is basically the same with a few hardware improvements, the difference is huge.

n The openness of Android makes it the perfect platform for customization.

n That is why you will find lots of Android devices with different user interfaces (UIs), and even with different mobile browsers. For example, Samsung adds its own UI layer to the basic

n Android interface on some devices, and there are also some tablets with a complete layer over the Android UI. Amazon has released tablets under the series name Kindle Fire that are Android devices with a different user interface;

159



Android Application developmentAndroid Application development

160



Application Development on AndroidApplication Development on Android

nAndroid Software Environment

HH Linux KernelLinux Kernel

HH Libraries & DVMLibraries & DVM

HH Application FrameworkApplication Framework

HH ApplicationsApplicationsHH ApplicationsApplications

nDevelopment Tools

HH Android SDKAndroid SDK

44Android SDKAndroid SDK

44Android Development ToolsAndroid Development Tools

44DalvikDalvik Virtual MachineVirtual Machine

44How to develop Android Applications How to develop Android Applications 161



162



Android Application developmentAndroid Application development

n Android applications consist of different components and can recomponents and can re--use componentsuse components of other applications.

n This leads to the concept of a tasktask in Android; an application can re-use other Android components to archive a task. task.

H For example you can trigger from your application another application which has itself registered with the Android system to handle photos. the Android system to handle photos.

H In this other application you select a photo and return to your application to use the selected photo.

n The Android system supports background processing, provides a rich user interface library, supports 2-D and 3-D graphics using the OpenGL libraries, access to the file system and provides an embedded SQLite database.

163



Google Play (Android Market)Google Play (Android Market)

Google offers the Google Play service in which programmers can offer their Android application to Android users.

Google phones include the Google Play application which allows to install applications.

n Google Play also offers an update service, e.g. if a programmer n Google Play also offers an update service, e.g. if a programmer uploads a new version of his application to Google Play, this service will notify existing users that an update is available and allow to install it.

n Google Play used to be called Android Market.

164



Android Development Tools Android Development Tools

nn Android SDK Android SDK

n The Android Software Development Kit (Android SDK) contains the necessary tools to create, compile and package Android application. Most of these tools are command line based. he primary way to develop Android applications is based on the Java programming language.

n The Android SDK also provides an Android device emulator, so n The Android SDK also provides an Android device emulator, so that Android applications can be tested without a real Android phone. You can create Android virtual devices (AVD) via the Android SDK, which run in this emulator.

n The Android SDK contains the Android debug bridge (adb) tool which allows to connect to an virtual or real Android device.

165



Android Development Tools Android Development Tools

n Google provides tools based on the Eclipse and IntelliJ IDE to develop new applications.

n The Android Development Tools (ADT) are based on Eclipse to develop Android applications.

HH ADT extends the capabilities of Eclipse to let you ADT extends the capabilities of Eclipse to let you quickly set up new Android projects,quickly set up new Android projects,

HH Developing in Developing in Eclipse with ADT Eclipse with ADT is highly is highly recommended and is the fastest way to get startedrecommended and is the fastest way to get started. .

n ADT is a set of components (plug-ins) which extend the Eclipse IDE with Android development capabilities.

166



ADTADT

n Google also supports an IDE called the Android Studio for creating Android applications. This IDE is based on the IntelliJ IDE.

n Both tools contains all required functionalities to create, compile, debug and deploy Android applications from the IDE.

n They also allow the developer to create and start Android virtual n They also allow the developer to create and start Android virtual devices for testing.

n Both tools provide specialized editors for resources files, e.g. layout files. These editors allow to switch between the XML representation of the file and a preview mode of the user interface

167



DalvikDalvik Virtual Machine Virtual Machine n The Android system uses a special virtual machine, i.e. the

Dalvik Virtual Machine to run Java based applications.

n Dalvik uses an own bytecode format which is different from Java bytecode.

n Therefore you cannot directly run Java class files on Android, they need to get converted in the DalvikDalvik bytecodebytecode format.

E d i t o r C o m p i le r

168

E d i t o r

: 7

K H e l lo . j a v a

;

S o u r c e c o d e

C o m p i le r

:

H e l l o . c la s s

;

B y t e c o d e s

" In t e r p r e t e r 0 1

H e l l o , W o r l d !

¿ In t e r p r e t e r 0 2

H e l l o , W o r l d !

:



JVM Vs DVMJVM Vs DVM

169



How to develop Android Applications How to develop Android Applications

n Android applications are primarily written in the Java programming language.

n The Java source files are converted to Java class files by the Java compiler.

n The Android SDK contains a tool called dxdx which converts Java class files into a .dex (Dalvik Executable) file.

H All class files of one application are placed in H All class files of one application are placed in one compressed .dex file.

H During this conversion process redundant information in the class files are optimized in the .dex file.

170



Developing Android ApplicationDeveloping Android Application

n These dex files are therefore much smaller in size than the corresponding class files.

n The .dex file and the resources of an Android project, e.g. the images and XML files, are packed into an .apk (Android Package) file.

n The program aapt (Android Asset Packaging Tool) performs this n The program aapt (Android Asset Packaging Tool) performs this packaging.

n The resulting .apk file contains all necessary data to run the Android application and can be deployed to an Android device via the adb tool.

n The Android Development Tools (ADT) performs these steps transparently to the user.

n If you use the ADT tooling you press a button the whole Android application (.apk file) will be created and deployed.

171



Android Application & ActivityAndroid Application & Activity

n Unlike other programming paradigms in which apps are launched with a main() method,

H the Android system initiates code in an Activity instance by invoking specific callback methods that correspond to specific stages of its lifecycle. specific stages of its lifecycle.

H There is a sequence of callback methods that start up an activity and a sequence of callback methods that tear down an activity.

172



173

