webinar: top ipad magazine applications: customer experience winners

www.OTOinsights.com 1

July, 2010

Top iPad Magazine ApplicationsCustomer Experience Winners in the Publishing Space


Dr. Philip Rhodes, Ph.D.

Philip holds a Ph.D. in Information Design from the University of Portsmouth. He has extensive research and teaching experience in hypermedia design and information architecture. He speaks fluent Portuguese, having lived and worked in Brazil. Before joining OTOinsights, he worked with US solution providers Rare Medium and Sapient, as Director of Information Architecture. Specializing in offering user-centric online solutions within the banking, education, and telecommunications sectors. He also taught at several universities in Brazil and the UK, and has been widely published. Philip is both the Managing Director and the Director of Customer Experience Research & Design at OTOinsights, and a Fellow of the Royal Society of Arts.


Established in 1997, One to One Interactive is the first global enterprise to assemble a complete solution for brands, agencies, and publishers executing one-to-one marketing strategies. The company employs over 140 professionals in 7 offices located in North America, Latin America, Europe, and Asia.

One of the 20 “Hottest Independent Digital Firms” GloballyAdAge, 2007

One of the Fastest Growing Private CompaniesInc Magazine, 2008


OTOinsights Overview

Established in 2002, OTOinsights has conducted over 400 research project

in over 30 countries.

Specialists in customer experience strategy, research and design

Undertake discrete point-in-time projects and strategic engagements

Experience across all platforms including digital (e.g. web, intranets, mobile

devices, PDA’s, i-TV, etc.), call centers, retail environments and physical

products (e.g. laptops, printers, etc.)

OTOinsights Offerings:

Amplifying Engagement

fhios quantemo Customer Experience Research Neuromarketing Research


Publishing Clients

6www.onetooneinteractive.com

Agenda


THE IPAD PHENOMENA


iPad Phenomena

• iPad has successfully launched

• Sales have surprised some people – why has it been so successful?

• Its Apple – media attention

• Its small

• Its portable

• Its useful (everyday tasks)

• Its very ‘sci-fi’

• Its got content – e.g. apps

The stats…

• 2,000,000 ipads sold

• 8,500 native iPad apps

• 35 milllion app downloads

• 5 million ebooks downloaded

• 19 countries

Apple - April 2010


Curious stats

• New York Times – 350,000 downloads in 1 week

• Wall Street Journal – 10,000 active users in 1 week

• $17 per month

• FT - – 130,000 active users since launch (28 May)

• The Times – 5,000 subscribers in 3 days

• £9.99 per download

• Wired – 24,000 downloads in first 24 hours

The stats…

By the end of 2010 there will be 8.13 million iPad globally

iPad Phenomena


• Electronic book sales in the US have risen dramatically in the last few years

• $11.2m in Q1 2008

• $25.8m in Q1 2009

• $91m in Q1 2010

• In the UK:

• £75-80m in 2008

• £150m in 2009

Publishing Statistics


IPAD REVIEW FRAMEWORK(DIGITAL PUBLICATIONS)


Review Framework

Useful

Engaging

Usable

Layout Navigation

Content and Interactivity Likelihood to reuse


Review Framework | Evaluation criteria

• Items of related content are kept together.

• Content is shown within context to preserve

meaning.

• There is a consistent experience between

landscape and portrait views.

• There is a consistent layout of key elements across

all screens of the app.

• The app doesn’t force users to rotate the iPad.

Layout Navigation



• Suitable web navigation elements, e.g.hyper-links.

• Multiple options for hyper-links, such as both

article headlines and images from a contents page.

• Uses conventional iPad gestures.

• Provides visual affordance to navigational

elements

• Allows users to recover from mistakes by going

back.

• Provides a search.

• Navigation is consistent throughout the app

• Users can identify where they are:

• Within each article

• Within the app itself


Layout Navigation



• All content from a landscape view is also available

in a portrait view.

• All content from the printed version should be

included, if not more.

• Individual interactive elements are easy to use.

• Interactive content affords an appropriate use.

• The app doesn’t persist with gesture manipulation

of content when it provides no benefit.


Layout Navigation



• Content appeals to users and is useful.

• Use of high quality images.

• Use of alternative media such as video and audio.

• Use of interactive elements such as 360˚ image

manipulation.

• The app is innovative:

• The content cannot be found elsewhere.

• The content is presented in a new way.


Layout Navigation



COMPETITIVE LANDSCAPE


COMPETITIVE REVIEW


Publisher App Total Score (out of 23)

19

14

13

13

10

Competitive Review | Results



Indices Score

Layout 4/5

Navigation 2/8Note: 2/8 criteria did not apply

Content and Interactivity

1/5Note: 2/5 criteria did not apply

Likelihood to reuse 3/5



Indices Score

Layout 2/5

Navigation 4/8

Content and Interactivity 4/5



Indices Score

Layout 2/5

Navigation 5/8






Indices Score

Layout 5/5

Navigation 4/8Note: 2/8 criteria did not apply

Content and Interactivity

3/5Note: 2/5 criteria did not apply



Indices Score

Layout 4/5

Navigation 6/8






• Surprising number of user experience issues in these very successful iPad apps:

• iPad orientation changing the content offering

• Navigation not always clear or intuitive

• Lacking ‘normal’ conventions e.g. hypertext links as links, easy means to return to primary pages

• Layout confusing

• Images and text not matching

• Lack of interactive features

• Lack of search

• User orientation within articles confusing


Competitive Review | Results Explanation


• Text is consistently presented in the same column layout

• Presentation persists across the two orientations

• As the user scrolls, background images are changed to stay in context with the text being presented

• This keeps items which are related together as well as preserving the meaning of images in relation to the text

• Users are told to rotate the iPad to view some articles

Layout


• Users can flick the magazine left or right to view different sections, and move into an article by swiping up and down


• Difficult to know how many sections or pages are included in the magazine

• No links are provided from the contents and cover page

• There is no search feature

Navigation


• It is difficult for users to identify where in the app they are

• It is also difficult to quickly skip to specific sections of the app

• If a user taps the left of the screen the text elements disappear.

• It is not initially clear how to bring the text back

Navigation


• All content seen while the iPad is in portrait are also shown when the iPad is used in landscape

• Gesture manipulation is included for pages where it serves no purpose.

• Text give the impression of being able to scroll to further content

Content & Interactivity


• The content will appeal to current Popsci readers and those interested in the subject

• High quality images are used throughout the app

• The content closely matches what is found in the magazine but is presented in a new way

• Other than being able to move images and text independently, little is made of the publication being in digital form

• There are no video/audio elements or interactive pieces of content

Likelihood to reuse


• The GQ app doesn’t force users to rotate the iPad in order to see content.

• Once the user has chosen their orientation, the layout of key functions such as moving between images, is consistent.

• However, the layout between portrait and landscape is very different.

Layout


• Navigational layout between the two orientations is inconsistent

• When turned to portrait, images and their related text are separated

• The two are shown in separate panels

• As the user moves through the images there is no indication of how these relate to the article.

Layout


• Typical iPad gestures are supported through most of the app

• Navigational elements are provided

• These are easily identifiable

• The user can clearly see where they are within an article and within the app

• Using the quick ‘contents feature’ allows the user to skip directly to an article.

Navigation


• There are a number of places where hyperlinks are not used

• Such as the GQ logo as a route back to the cover/contents and article titles on the cover page

• The contents list is not available when in landscape

• There is no search feature

• The pinch gesture cannot be used to zoom text in portrait

Navigation


• Individual interactive elements are easy to use and do not require precise finger movement

• These interactive elements clearly indicate their use

• The app only allows gestures when they are of use.

• Not all content found in landscape is available in portrait



• The content is the same as found in the magazine and will therefore be useful to GQs audience


• There is no inclusion of audio or video content

• The interactive content is minimal

Likelihood to reuse


Layout

• Items of content which are related are always kept together

• The user will have to actively select a slide-shown to view images in isolation

• Experience between portrait and landscape differs significantly

• The location of images changes

• Video is also included in landscape but not portrait

• Users are often forced to rotate the iPad when there is no need to.

• Most notably for video


• Hyperlinks are used to take users directly to articles

• User are able to click on article headlines or related images

• Conventional iPad gestures are used to move page and enlarge content

• Users can quickly locate themselves and move around using the efficient ‘page viewer’

• Current location is clearly highlighted

• Users are able to go ‘home’ to either the contents page or the cover page

Navigation


• It is not particularly clear which elements can be used to navigate

• In this example, the map suggests links – this is not the case

• It is not possible to move back if the user jumped to an article by mistake.

• There is no search

Navigation


• Interactive content such as image slide-shows are clearly identified and easy to use

• Many contextual images are completely lost when using the app in portrait

• It is often not possible to increase text size when in landscape



• All content from the magazine is included in the app

• High quality images are used throughout.

• Video is also used to supplement some article

• There is very little in the way of interactive content

Likelihood to reuse


Layout

• All content is shown within context so it is always clear to the user how an image relates an article

• There is a good level of consistency between landscape and portrait orientations

• Users are not forced to rotate the iPad at any point

• There is a good level of consistency throughout the app.


• The app provides a search


• Users can clearly see where they are within the app

• Typical iPad gestures are used to turn page and enlarge content

Navigation


• There are no hyperlinks within the app

• An apparent ‘back’ button take the user out of the current magazine

• It is not possible to return to a clear starting point such as the cover page or contents page

Navigation


• All content available in landscape is also available in portrait

• The app only uses simple gestures

• Gestures are not used unless they are needed.

• Interactive elements such as the contents and search use straightforward interfaces




• Limited interactivity is available

• Such as the ability to share magazines with others

• However, most of the content is static.

• The app does not provide the content in a way that differs much from the printed magazine

Likelihood to reuse


• Content is fixed in a traditional printed article format so all related items are kept together

• Images and video content are shown within the context of the article rather than in isolation

• Users are provided with a consistent experience between portrait and landscape views

• On some article title pages it is not clear that the user can navigate to further content

• The title pages look and feel very much like a one page advert

One page advert

Article title page with content hidden below

Layout


• Suitable links are used throughout the app, from the contents page through to external links

• Conventional iPad gestures are used and reinforced through use of icons

• Navigational elements appear in a way as to invite users to interact with them

• Users can easily identify where they are within app

Navigation


• Some elements are presented in the same way as links, but do not provide a link

• Images associated with articles on the contents page are not links

• There is no search

• Within each article is it difficult for users to see whether there is more content

• It is not clear to users where they are within an individual article

Numbered buttons – not links

Numbered buttons – links

Navigation


• The app maximises the fact it is on an iPad to bring the user more content than they would have on the printed version

• Gestures are only used when it makes sense for the user

• Interactive elements are easy to use

• Clear sign-posts of when and how use are given.

• All content available in landscape is also available in portrait view.




• Video and audio content are included within relevant articles

• Users can interact with images for a 360 view and to provide detail on what is being shown

• The app provides content that cannot be found elsewhere from Wired

Likelihood to reuse


ADVERTISING


• Ad supported apps are common amongst both free and paid for publications:

• Wired

• New York Times

• Wall Street Journal

• The Times

• A number of approaches have been taken:

• Flat-content, one page

• Flat-content, multiple page

• Basic user interaction

• Audio/video content

• Interrupting ads

Advertising


• Provides consistency with other advertising mediums

• Relatively unobtrusive

• Provides the entire message in one hit

• Unlikely to engage the user

• Missing an opportunity to drive the user to further content

• Sign-up process for example

• Unlikely to ‘educate’ users about the message or product

Advertising| Flat content – one page


• More space allows advertiser to build useful content for targeted users

• Such as ‘how to’ guides

• Allows advertiser to mimic articles so as to sell products subtly

• Chance of content on later pages being missed by the user

• Especially if the front page of the advert doesn’t allude to further content

• Missing an opportunity to drive users to further content

Advertising| Flat content – multiple page


• Clearly interactive elements invite users to stay on the page and interactive with the advert

• More engaging than flat content

• Can lead the user to product related content

• To make an order or to sign-up for a service

• Strong possibility that hidden content may be missed

• If links to further content take users out of the ‘app environment’ then user may show renitence or negative reactions

Advertising| Basic user interaction


• Most engaging content

• Effective way to educate users about a product or service

• Novelty effect – provides ad content that isn’t found in the paper version of the publication

• Encourages users to spend more time with the advert

• Message may be lost on users who skim over the page

Advertising| Audio/video content


• Users are forced to see the product/brand

• Users must think about how to interact with the advert in order to progress to their desired destination

• Likely to irritate users

• Provide a negative image of the app and the advertiser

• Users may dismiss the advert as it was not what they were looking for

Advertising| Interrupting ads


• Forcing users to rotate the iPad in order to see that ad

• Apps where all ads are removed when the user rotates the iPad

• GQ – no ads shown in portrait view

• Hiding the most important message in ‘scrolled to’ content or behind interactions

• Forcing users to watch a video without them requesting to do so

Advertising | What to avoid!


KEY TAKE-AWAY POINTS


• If elements can be manipulated independently of each

other then ensure that context is kept

• For example it is good to avoid showing a user an

article that discusses something shown in a picture

that is no longer visible, as seen in the GQ app

• Ensure that individual page elements don’t lose meaning

through lack of context

• For example, if photos are presented separately from

the text of an article then care must be taken to

ensure that the reason why they were included in the

first place is not lostGQ – separate image and text in an article

Key Points | Layout


• Portrait V Landscape

• While obvious changes need to occur to cater for

the change in screen dimension, consistency

between the two layouts is useful so that users do

not have to learn a whole new set of rules just

because they have rotated the iPad

• Don’t force users to rotate the iPad.

• It may be beneficial for the user to view some

content in landscape, such as video, but allow the

user to decide whether they do this or not, unlike

what is seen with the Time appTime – the same article shown in portrait and landscape

Key Points | Layout


• Consistency between pages

• Pages do not have to look the same, or

even be laid out exactly the same, but

consistency of key elements is important

• Key elements, such as a route

back, route to the contents page,

moving to the previous or next

article should all be positioned in

a consistent manner

New York Times – All images are clickable, route back is always shown at the top left

Key Points | Layout


• Bring the most beneficial elements of web navigation to

the app

• Hyperlinks to related content such as linking

directly to articles from a homepage/contents page

• The app does not have to exactly mimic a website

• There doesn’t have to be a “main menu” or “Next

page”, “Next article” buttons etc

• Increase the users routes for navigating

• If a contents page includes headings and images

for an article, make both parts a link to the article

page, as found with the New York Times app.

New York Times – All Headlines and images are links to the full story

Key Points| Navigation


• Users are quickly becoming accustomed to many touch-

screen gestures, such as tapping, swiping and pinching

• Users will feel more comfortable when performing

these gestures will give expected results, such as:

• Tapping means activate (or click in web

terms)

• Swiping means to move (down an article or

across an article, or to another article)

• Note: The PopSci app uses the tap action to make

text disappear which is likely to confuse users

PopSci – A tap on the right of the screen makes the text disappear



• Navigational elements should have some visual

characteristic that affords use (a tap or swipe)

• While this does not have to be a strong as found

on the web (with a submit button for example),

it is beneficial to have navigational elements

appear differently to flat elements in order for

them to be easier for users to discover

• Allow users to undo what they have done to allow

them to recover from mistakes

• Ensure users can get back to where they were

and not just a back to the cover page, or back to

contents

Wired – the dual arrow icon gives affordance of a “back and forth” swipe movement



• Provide a search

• Make the most of having the content in a digital

form by allowing users to search

• Keep navigation consistent

• Navigational items should appear in consistent

locations on the screen

• This should be the case whether in landscape or

portrait

Dwell – searching for content



• Inform the user where they are

• Some reference to where they are in the

article, and within the publication is useful.

• Clear vertical scroll bars help to

identify within-article location.

• Having a visual representation of the

number of pages and highlighting the

current page also works well for

within-article location.

• A scrolling index works well to identify

location within the publication, as

well as aiding navigation. New York Times – number of article pages shown using standard apple pips at bottom of the page



• Although there will be a temptation to exactly

replicate the magazine or newspaper page for page

on the iPad – don’t

• While this is not necessarily wrong, it means the

user misses out on a number of benefits the

digital age has brought, such as:

• Hyperlinks - both within the app and

externally

• Embedding of video or audio content

• Interaction with the app with elements

such as forms for entering competitions.

Wired – Image content can be manipulated by the user

Key Points| Content & Interactivity


• Give users a reason to use the app

• It should, at the very least, provide the user with all

the content they can get through printed version, if

not more

• The user should not miss out on content because of the

orientation of the iPad

• All content that is shown when holding the iPad in

landscape should also be shown when holding the

iPad in portrait and vice-versa.



• Interactive elements need to be easy to select

• For lists of links, fields in forms etc. it must

be remembered that a finger is not as

precise as a mouse pointer. These elements

need to be sufficiently spaced to allow a

user to accurately select the one they wish.

Financial Times – Interactive elements are all located together and are easy for users to select individually



• As with navigation, interactive content should afford

whichever interactions can be used to manipulate it

• If text can be edited, or empty text boxes filled,

then they should give the impression that this is

the case.

• If a static image is a placeholder for video content,

then it should be clear the user has the ability to

“play” the video

• Don’t allow users to change layout for the sake of it. If

all content fits onto one page then allowing users to

remove or move some elements off the page may cause

unnecessary confusion. PopSci – A tap on the right of the screen makes the text disappear



• Likelihood to reuse an app is based primarily on how

useful the user finds the content within it, how engaging

the experience is and how innovative the app is.

• How deeply users become engaged in the content relies

very much on the users personal tastes and the content and

style of the publication in general.

Key Points| Likelihood to reuse


• With regards to how engaging the app is, a number of

factors should be considered.

• Quality of imagery or videos used.

• High quality images that make the most of

the iPads great graphical capability will

enhance the experience of the user.

• Include media types that cannot be found on the

printed form.

• Video content and audio content help to

improve the level of user engagement and

also help distinguish the experience on the

iPad app from that of the printed magazine

or newspaper.

The Times – Video content used to supplement an article



• Including interactive elements that go beyond

just video or audio also improve the level of

engagement.

• The ability to build a list of favourite

articles, send articles to other people and

manipulate 360˚ images are all examples.

Sideways – Ability to link to a facebook account and share articles



• The more innovative the app, the more likely users

will use it in the first place, and the more likely they

are to continue using it.

• Providing the user with content they can’t get

elsewhere

• Providing users with content in a way that is not

currently done

Sideways – Interactive map

Key Points | Likelihood to reuse


CONCLUSIONS


Develop a strategy

• Remember the user

• Focus on the users needs

• Ensure that users are in control, informed and flexible

• Cater for all user situations

• Browsing content Vs Looking for specific information

• Reading in portrait Vs reading in landscape

• Make the user’s experience usable and engaging

• Make the most of the possibilities the iPad offers

Conclusions


Dr. Philip Rhodes: [email protected]

For copies of the presentation or further info on One to One interactive services:

[email protected]

Questions

webinar: top ipad magazine applications: customer experience winners

Business