Nielsen Norman GroupEvidence-Based User Experience Research, Training,and Consulting

HOME REPORTS TRAINING CONSULTING ARTICLES ABOUT NN/G

TopicsE-commerceIntranetsMobile & TabletUser TestingWeb UsabilitySee all topics

AuthorJakob NielsenDon NormanBruce "Tog" TognazziniSee all authors

Recent ArticlesHow to Run a UsabilityTest with Users WhoAre on Your Site NowSmartwatches Are theFutureBut SamsungGalaxy Gear OnlyPartway ThereState the Price to GiveB2B Sites a CompetitiveAdvantageSuggested-EmployeeSearchThe BestIntranet DesignTodayCould SaveYour Organization Half aMillion DollarsSeamlessness in theCross-Channel UserExperienceSee all articles

Popular ArticlesUsability 101:Introduction to UsabilityTop 10 Mistakes in WebDesignHow Users Read on theWeb

Mobile: Native Apps, Web Apps, and Hybrid Appsby RALUCA BUDIU on September 14, 2013

Topics: Applications Mobile & Tablet

Summary: Native and hybrid apps are installed in an app store,whereas web apps are mobile-optimized webpages that look like anapp. Both hybrid and web apps render HTML web pages, but hybridapps use app-embedded browsers to do that.

In the mobile realm, youll hear often terms like native app or web app, or evenhybrid app. Whats the difference?

Native AppsNative apps live on the device and are accessed through icons on the device homescreen. Native apps are installed through an application store (such as Google Play orApples App Store). They are developed specifically for one platform, and can take fulladvantage of all the device featuresthey can use the camera, the GPS, theaccelerometer, the compass, the list of contacts, and so on. They can also incorporategestures (either standard operating-system gestures or new, app-defined gestures).And native apps can use the devices notification system and can work offline.

Mobile Web AppsWeb apps are not real apps; they are really websites that, in many ways, look and feellike native applications. They are run by a browser and typically written in HTML5. Users first access them as they would access any web page: they navigate to a specialURL and then have the option of installing them on their home screen by creating abookmark to that page.

Web apps became really popular when HTML5 came around and people realized thatthey can obtain native-likefunctionality in the browser. Today, as more and more sitesuse HTML5, the distinction between web apps and regular web pages has becomeblurry.

In 2011 Financial Times withdrew its native app from Apples App Store to circumventsubscription fees and maintain closer connection with their subscribers. Instead, itcame out with an iPhone web app (app.ft.com):

Mobile: Native Apps, Web Apps, and Hybrid Apps http://www.nngroup.com/articles/mobile-native-apps/

1 de 8 10/12/13 10:53

Subscribe to:Jakob Nielsen's AlertboxNewsletterDon Norman's JND.orgRSS feedBruce "Tog" Tognazzini'sAsktog.com

Financial Times web app for iPhone

Horizontal swiping on Financial Times' web app

Its web app is, in many ways, hard to distinguish from a native app. For instance, thereare no visible browser buttons or bars, although it runs in Safari (when accessed froman iPhone). Users can swipe horizontally to move on to new sections of the app. And,due to browser caching, its even possible to read the newspaper offline.

Mobile: Native Apps, Web Apps, and Hybrid Apps http://www.nngroup.com/articles/mobile-native-apps/

2 de 8 10/12/13 10:53

These are all features that are available in HTML5. Also available are the GPS, thetap-to-call feature, and, there is talk about a camera API, although I havent seen anyweb app (or web page) that takes advantage of it so far. There are, however, nativefeatures that remain inaccessible (at least from now) in the browser: the notifications,running in the background, accelerometer information (other than detecting landscapeor portrait orientations), complex gestures.

Of course, one can argue that many apps (native or otherwise) do not take advantageof those extra features anyhow. But if you really need those native features, youll haveto create a native app or, at least, a hybrid app.

Hybrid appsHybrid apps are part native apps, part web apps. (Because of that, many peopleincorrectly call them web apps). Like native apps, they live in an app store and cantake advantage of the many device features available. Like web apps, they rely onHTML being rendered in a browser, with the caveat that the browser is embeddedwithin the app.

Often, companies build hybrid apps as wrappers for an existing web page; in that way,they hope to get a presence in the app store, without spending significant effort fordeveloping a different app. Hybrid apps are also popular because they allow cross-platform development: that is, the same HTML code components can be reused ondifferent mobile operating systems, reducing significantly the development costs. Toolssuch as PhoneGap and Sencha Touch allow people to design and code acrossplatforms, using the power of HTML.

Walgreens provides two very similar hybrid apps one for Android and the other foriPhone. Both apps have multiple sections and many native features such as access tonotifications and a Refill by scan feature that uses the phone camera to refillprescriptions:

Walgreens app for Android

However, the Shop section in both the Android and iPhone apps uses a browser viewthat renders the corresponding page of the Walgreens mobile website. Here are threepages displaying the same content in the Android app, iPhone app, and mobilewebsite:

Mobile: Native Apps, Web Apps, and Hybrid Apps http://www.nngroup.com/articles/mobile-native-apps/

3 de 8 10/12/13 10:53

Walgreens app for Android

Walgreens app for iPhone

Mobile: Native Apps, Web Apps, and Hybrid Apps http://www.nngroup.com/articles/mobile-native-apps/

4 de 8 10/12/13 10:53

Walgreens mobile website (m.walgreens.com)

As you can see, all these pages are the same, except for the top header, which isplatform specific. The Back button on iOS is translated into a caret on Android; the logois present on the web page, but not in the app. (The designers have correctly assumedthat on the web people need the logo to orient themselves, since they are likely to landon a deep page without navigating through the homepage. In contrast, in their apps allnavigation has to go through the homepage).

Banana Republic is such another example of hybrid app; it has used the exact samedesign on Android and iPhone:

Mobile: Native Apps, Web Apps, and Hybrid Apps http://www.nngroup.com/articles/mobile-native-apps/

5 de 8 10/12/13 10:53

Banana Republic app for Android

Banana Republic app for iPhone

However, the Back button in the Android app ignores the fact that, unlike iPhones,

Mobile: Native Apps, Web Apps, and Hybrid Apps http://www.nngroup.com/articles/mobile-native-apps/

6 de 8 10/12/13 10:53

Android devices come with a physical or virtual Back button. The tab bar at the bottomof the page works well in the iOS design, but is clunky and clearly non-native onAndroid.

Native, Web App, or Hybrid: Which Should You Choose?Each of these types of apps has their advantages and disadvantages, as Ive tried topoint out. Lets summarize them here.

Device features. Although web apps can take advantage of some features, nativeapps (and the native components of the hybrid apps) have access to the fullparaphernalia of device-specific features, including GPS, camera, gestures, andnotifications.

Offline functioning. A native app is best if your app must work when there is noconnectivity. In-browser caching is available in HTML5, but its still more limited thanwhat you can get when you go native.

Discoverability. Web apps win the prize on discoverability. Content is a lot morediscoverable on the web than in an app: When people have a question or aninformation need, they go to a search engine, type in their query, and choose a pagefrom the search results. They do not go to the app store, search for an app, downloadit, and then try to find their answer within the app. Although there are app aficionadoswho may fish for apps in app stores, most users dont like installing and maintainingapps (and also wasting space on their device), and will install an app only if theyexpect to use it often.

Speed. Native apps win the speed competition. In 2012 Mark Zuckerberg declaredthat Facebooks biggest mistake had been betting on the mobile web and not goingnative. Up to that point, the Facebook app had been a hybrid app with an HTML core;in 2012 it was replaced with a truly native app.

Installation. Installing a native or hybrid app is a hassle for users: They need to bereally motivated to justify the effort. Installing a web app involves creating a bookmarkon the home screen; this process, while arguably simpler than downloading a new appfrom an app store, is less familiar to users, as people dont use bookmarks that muchon mobile.

Maintenance. Maintaining a native app can be complicated not only for users, but alsofor developers (especially if they have to deal with multiple versions of the sameinformation on different platforms): Changes have to be packaged in a new versionand placed in the app store. On the other hand, maintaining a web app or a hybrid appis as simple as maintaining a web page, and it can be done as often or as frequently asneeded.

Platform independence. While different browsers may support different versions ofHTML5, if platform independence is important, you definitely have a better chance ofachieving it with web apps and hybrid apps than with native apps. As discussed before,at least parts of the code can be reused when creating hybrid or web apps.

Content restrictions, approval process, and fees. Dealing with a third party thatimposes rules on your content and design can be taxing both in terms of time andmoney. Native and hybrid apps must pass approval processes and content restrictionsimposed by app stores, whereas the web is free for all. Not surprisingly, the first webapps came from publications such as Playboy, who wanted to escape Apples prudishcontent censure. And buying a subscription within an iOS app means that 30% of thatsubscription cost goes to Apple, a big dent in the publishers budget.

Development cost. Its arguably cheaper to develop hybrid and web apps, as theserequire skills that build up on previous experience with the web. NN/g clients often findthat going fully native is a lot more expensive, as it requires more specialized talent.

Mobile: Native Apps, Web Apps, and Hybrid Apps http://www.nngroup.com/articles/mobile-native-apps/

7 de 8 10/12/13 10:53

Research ReportsThe Best Applications: Installment 2Mobile Intranets and Enterprise AppsMobile Website and Application UsabilityThe Best Applications: Installment 1Customization Features Done Correctly forthe Right Reasons

Training CoursesMobile Websites and Apps Day 1 and Day2Application Usability: Day 1 and Day 2Complex Applications and Websites: Day 1and Day 2Visual Design for Mobile and Tablet: Day 1and Day 2Cross-Channel User Experience

ArticlesWorkflow Expectations: Presenting Stepsat the Right TimeTablet UsabilityMobile Sites vs. Apps: The ComingStrategy ShiftForm Design Quick Fix: Group FormElements Effectively Using White SpaceBest Application Designs

But, on the other hand, HTML5 is fairly new, and good knowledge of it, as well as agood understanding of developing for the mobile web and hybrid apps are also fairlyadvanced skills.

User Interface. Last but not least, if one of your priorities is providing a userexperience that is consistent with the operating system and with the majority of theother apps available on that platform, then native apps are the way to go. That doesntmean that you cannot provide a good user experience with a web app or a hybridappit just means that the graphics and the visuals will not be exactly the same asthose with which users may be already accustomed.

To summarize, native apps, hybrid apps, or web apps are all ways to cater to theneeds of the mobile user. There is no unique best solution: each of these has theirstrengths and weaknesses. The choice of one versus the other depends on eachcompanys unique needs.

Learn More

Mobile: Native Apps, Web Apps, and Hybrid Apps http://www.nngroup.com/articles/mobile-native-apps/

8 de 8 10/12/13 10:53