-
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