Mobile: Native Apps, Web Apps, and Hybrid Apps

http://www.nngroup.com/articles/mobile-native-apps/

Nielsen Norman Group

Evidence-Based User Experience Research, Training,
and Consulting

HOME

REPORTS

Topics
E-commerce
Intranets
Mobile & Tablet
User Testing
Web Usability
See all topics

TRAINING

CONSULTING

ARTICLES

ABOUT NN/G

Mobile: Native Apps, Web Apps, and Hybrid Apps

by 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 an
app. Both hybrid and web apps render HTML web pages, but hybrid
apps use app-embedded browsers to do that.

Author
Jakob Nielsen

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

Don Norman
Bruce "Tog" Tognazzini

Native Apps

See all authors

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

Recent Articles
How to Run a Usability
Test with Users Who
Are on Your Site Now
Smartwatches Are the
FutureBut Samsung
Galaxy Gear Only
Partway There
State the Price to Give
B2B Sites a Competitive
Advantage
Suggested-Employee
SearchThe Best
Intranet Design
TodayCould Save
Your Organization Half a
Million Dollars
Seamlessness in the
Cross-Channel User
Experience
See all articles

Mobile Web Apps

Web apps are not real apps; they are really websites that, in many ways, look and feel
like 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 special
URL and then have the option of installing them on their home screen by creating a
bookmark to that page.
Web apps became really popular when HTML5 came around and people realized that
they can obtain native-likefunctionality in the browser. Today, as more and more sites
use HTML5, the distinction between web apps and regular web pages has become
blurry.
In 2011 Financial Times withdrew its native app from Apples App Store to circumvent
subscription fees and maintain closer connection with their subscribers. Instead, it
came out with an iPhone web app (app.ft.com):

Popular Articles
Usability 101:
Introduction to Usability
Top 10 Mistakes in Web
Design
How Users Read on the
1 de 8
Web

10/12/13 10:53

Subscribe
to:Web Apps, and Hybrid Apps
Mobile:
Native Apps,

http://www.nngroup.com/articles/mobile-native-apps/

Jakob Nielsen's Alertbox

Newsletter
Don Norman's JND.org
RSS feed
Bruce "Tog" Tognazzini's
Asktog.com

Financial Times web app for iPhone

Horizontal swiping on Financial Times' web app

2 de 8

Its web app is, in many ways, hard to distinguish from a native app. For instance, there
are no visible browser buttons or bars, although it runs in Safari (when accessed from
10/12/13 10:53
an 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.

are all features that are available in http://www.nngroup.com/articles/mobile-native-apps/

HTML5. Also available are the GPS, the
Mobile: Native Apps, Web Apps, and These
Hybrid Apps
tap-to-call feature, and, there is talk about a camera API, although I havent seen any
web app (or web page) that takes advantage of it so far. There are, however, native
features that remain inaccessible (at least from now) in the browser: the notifications,
running in the background, accelerometer information (other than detecting landscape
or portrait orientations), complex gestures.
Of course, one can argue that many apps (native or otherwise) do not take advantage
of those extra features anyhow. But if you really need those native features, youll have
to create a native app or, at least, a hybrid app.

Hybrid apps
Hybrid apps are part native apps, part web apps. (Because of that, many people
incorrectly call them web apps). Like native apps, they live in an app store and can
take advantage of the many device features available. Like web apps, they rely on
HTML being rendered in a browser, with the caveat that the browser is embedded
within 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 for
developing a different app. Hybrid apps are also popular because they allow crossplatform development: that is, the same HTML code components can be reused on
different mobile operating systems, reducing significantly the development costs. Tools
such as PhoneGap and Sencha Touch allow people to design and code across
platforms, using the power of HTML.
Walgreens provides two very similar hybrid apps one for Android and the other for
iPhone. Both apps have multiple sections and many native features such as access to
notifications and a Refill by scan feature that uses the phone camera to refill
prescriptions:

Walgreens app for Android

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

3 de 8

10/12/13 10:53

Mobile: Native Apps, Web Apps, and Hybrid Apps

http://www.nngroup.com/articles/mobile-native-apps/

Walgreens app for Android

Walgreens app for iPhone

4 de 8

10/12/13 10:53

Mobile: Native Apps, Web Apps, and Hybrid Apps

http://www.nngroup.com/articles/mobile-native-apps/

Walgreens mobile website (m.walgreens.com)

As you can see, all these pages are the same, except for the top header, which is
platform specific. The Back button on iOS is translated into a caret on Android; the logo
is present on the web page, but not in the app. (The designers have correctly assumed
that on the web people need the logo to orient themselves, since they are likely to land
on a deep page without navigating through the homepage. In contrast, in their apps all
navigation has to go through the homepage).
Banana Republic is such another example of hybrid app; it has used the exact same
design on Android and iPhone:

5 de 8

10/12/13 10:53

Mobile: Native Apps, Web Apps, and Hybrid Apps

http://www.nngroup.com/articles/mobile-native-apps/

Banana Republic app for Android

Banana Republic app for iPhone

6 de 8

10/12/13 10:53

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

devices come with a physical or virtual

Back button. The tab bar at the bottom
Mobile: Native Apps, Web Apps, and Android
Hybrid Apps
http://www.nngroup.com/articles/mobile-native-apps/
of the page works well in the iOS design, but is clunky and clearly non-native on
Android.

Native, Web App, or Hybrid: Which Should You Choose?

Each of these types of apps has their advantages and disadvantages, as Ive tried to
point out. Lets summarize them here.
Device features. Although web apps can take advantage of some features, native
apps (and the native components of the hybrid apps) have access to the full
paraphernalia of device-specific features, including GPS, camera, gestures, and
notifications.
Offline functioning. A native app is best if your app must work when there is no
connectivity. In-browser caching is available in HTML5, but its still more limited than
what you can get when you go native.
Discoverability. Web apps win the prize on discoverability. Content is a lot more
discoverable on the web than in an app: When people have a question or an
information need, they go to a search engine, type in their query, and choose a page
from the search results. They do not go to the app store, search for an app, download
it, and then try to find their answer within the app. Although there are app aficionados
who may fish for apps in app stores, most users dont like installing and maintaining
apps (and also wasting space on their device), and will install an app only if they
expect to use it often.
Speed. Native apps win the speed competition. In 2012 Mark Zuckerberg declared
that Facebooks biggest mistake had been betting on the mobile web and not going
native. 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 be
really motivated to justify the effort. Installing a web app involves creating a bookmark
on the home screen; this process, while arguably simpler than downloading a new app
from an app store, is less familiar to users, as people dont use bookmarks that much
on mobile.
Maintenance. Maintaining a native app can be complicated not only for users, but also
for developers (especially if they have to deal with multiple versions of the same
information on different platforms): Changes have to be packaged in a new version
and placed in the app store. On the other hand, maintaining a web app or a hybrid app
is as simple as maintaining a web page, and it can be done as often or as frequently as
needed.
Platform independence. While different browsers may support different versions of
HTML5, if platform independence is important, you definitely have a better chance of
achieving 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 that
imposes rules on your content and design can be taxing both in terms of time and
money. Native and hybrid apps must pass approval processes and content restrictions
imposed by app stores, whereas the web is free for all. Not surprisingly, the first web
apps came from publications such as Playboy, who wanted to escape Apples prudish
content censure. And buying a subscription within an iOS app means that 30% of that
subscription cost goes to Apple, a big dent in the publishers budget.
7 de 8

Development cost. Its arguably cheaper to develop hybrid and web apps, as these
10:53
require skills that build up on previous experience with the web. NN/g clients10/12/13
often find
that going fully native is a lot more expensive, as it requires more specialized talent.

onApps
the other hand, HTML5 is fairly new,
and good knowledge of it, as well as a
Mobile: Native Apps, Web Apps, and But,
Hybrid
http://www.nngroup.com/articles/mobile-native-apps/
good understanding of developing for the mobile web and hybrid apps are also fairly
advanced skills.
User Interface. Last but not least, if one of your priorities is providing a user
experience that is consistent with the operating system and with the majority of the
other apps available on that platform, then native apps are the way to go. That doesnt
mean that you cannot provide a good user experience with a web app or a hybrid
appit just means that the graphics and the visuals will not be exactly the same as
those with which users may be already accustomed.
To summarize, native apps, hybrid apps, or web apps are all ways to cater to the
needs of the mobile user. There is no unique best solution: each of these has their
strengths and weaknesses. The choice of one versus the other depends on each
companys unique needs.

Learn More
Research Reports

Training Courses

The Best Applications: Installment 2

Mobile Websites and Apps Day 1 and Day

Mobile Intranets and Enterprise Apps

Mobile Website and Application Usability

Application Usability: Day 1 and Day 2

The Best Applications: Installment 1

Complex Applications and Websites: Day 1

Customization Features Done Correctly for and Day 2

the Right Reasons

Visual Design for Mobile and Tablet: Day 1

and Day 2
Cross-Channel User Experience

Articles
Workflow Expectations: Presenting Steps
at the Right Time
Tablet Usability
Mobile Sites vs. Apps: The Coming
Strategy Shift
Form Design Quick Fix: Group Form
Elements Effectively Using White Space
Best Application Designs

8 de 8

10/12/13 10:53