Harri Heikkilä, Sami Pekkala: Studies on new tablet publication

AALTO ARTS 23.5.2013
Harri Heikkilä, Sami Pekkala:
Studies on new tablet
publication
concepts
eReading & Coffee 23.5.
TODAY
‣
‣
‣
‣
‣
‣
MCRG in brief
New and noteworthy
Shifts in digital publishing
Tablet/Mobile usability
Findings from the ARTS tablet course
2013 spring : Agile development
MCRG
MCRG
MEDIA CONCEPTS RESEARCH GROUP IN BRIEF
‣ Aalto University
‣ School of Arts, Design and Architecture
‣ Department of Media
‣ Graphic Design study programme
‣ Media Concepts Research Group
MCRG
MEDIA CONCEPTS RESEARCH GROUP IN BRIEF
‣
‣
‣
‣
‣
Professor Maija Töyry (Group director)
Ph.D. Merja Helle (Head of research)
12–14 DA and MA –students and project researchers
Work in various fields of media in general
Common factor: Media convergence
www.mediaconceptsrg.net
mediaconceptsrg.blogspot.fi
http://gutenberg3x.tumblr.com/
New and noteworthy
Tablet market
ANDROID WILL PASS IOS AS THE MOST POPULAR TABLET OS DURING 2013
Q1 / 13
IOS
63 %
48 %
ANDROID
34 %
43 %
WIN
0 %
7.5 %
OTHER
3 %
1 %
STRATEGY ANALYTICS, APRIL 2013
TOP 5 Tablet Vendors and Market Share
Q1 / 12
Q1 / 13
APPLE
58 %
40 %
SAMSUNG
11 %
18 %
AMAZON
4 %
3,5 %
MICROSOFT
0 %
2 %
OTHER
32 %
24 %
IDC WORLD WIDE TABLET TRACKER MAY, 2013
http://gigaom.com/2013/05/01/ipad-is-top-selling-tablet-but-android-now-most-common-tablet-os-says-idc/
Q1 / 12
http://www.prnewswire.com/news-releases-test/strategy-analytics-apple-maintains-48-percent-share-ofglobal-branded-tablet-shipments-in-q1-2013-204381411.html
Global Tablet Operating System Shipments and Market Share
New Surface Pro
Hybrid notebook-tablet by Microsoft wont likely be a big issue within the publishing market
Microsoft
SurfacePro
Apple
iPad 3
WEIGHT
907 g
652 g
SIZE
275 x 173 x 13
241 x 185x 9,2
PX
1920 x 1080 pixels
2048 x 1536 pixels
RES.
208 ppi
264 ppi
PLUS
• Stylish look and premium, workhorse feel
MINUS
• Standard display
• Poor selection of apps
• Too heavy to be held -> table device
• Sluggish graphics
• Hybrid approach:
apps and applications ,
cursor and touch
http://www.digiday.com/publishers/modern-publishings-death-spiral/?mkt_tok=3RkMMJWWfF9wsRovsqTKZKXonjHpfsX76OUpXaKg38431UFwdcjKPmjr1YsCTMB0dvycMRAVFZl5nR1NG%2FKe
New kid in town
QUARK, THE ANCIENT KING OF DTP IS ON TO SOMETHING?
http://www.digiday.com/publishers/modern-publishings-death-spiral/?mkt_tok=3RkMMJWWfF9wsRovsqTKZKXonjHpfsX76OUpXaKg38431UFwdcjKPmjr1YsCTMB0dvycMRAVFZl5nR1NG%2FKe
New kid in town
QUARK, THE ANCIENT KING OF DTP IS ON TO SOMETHING?
http://www.digiday.com/publishers/modern-publishings-death-spiral/?mkt_tok=3RkMMJWWfF9wsRovsqTKZKXonjHpfsX76OUpXaKg38431UFwdcjKPmjr1YsCTMB0dvycMRAVFZl5nR1NG%2FKe
New kid in town
APP STUDIO
‣ Based on HTML5, not PDF
‣ Works in Quark as well as in Indy (plug-in)
‣ Smaller file sizes, better aptitude
– We didn’t want to be limited in what we did with our
magazine because of file sizes. App Studio was the only
solution to be able to offer us that.
— Rebekah Billingsley, Publishing Director, Mobile Devices for Immediate Media at Good Food magazine
http://www.digiday.com/publishers/modern-publishings-death-spiral/?mkt_tok=3RkMMJWWfF9wsRovsqTKZKXonjHpfsX76OUpXaKg38431UFwdcjKPmjr1YsCTMB0dvycMRAVFZl5nR1NG%2FKe
New kid in town
APP STUDIO
‣ Possible solution for problems creating “native
looking” apps from InDesign (See: Alanko / Sähköinen shushibaari,
Mondo-publications)
http://www.digiday.com/publishers/modern-publishings-death-spiral/?mkt_tok=3RkMMJWWfF9wsRovsqTKZKXonjHpfsX76OUpXaKg38431UFwdcjKPmjr1YsCTMB0dvycMRAVFZl5nR1NG%2FKe
Shifts in digital publishing
The shift(s)
IN MEDIA CONSUMPTION
‣ Print > Desktop > Tablets & mobile phones
‣ But platforms do not replace each other
13
The shift(s)
IN MEDIA CONSUMPTION
“Thinking of your typical weekday, when do you usually read or use a local daily newspaper in the following format?”
N=1896, Multiple mentions allowed.
Newspaper Multiplatform Usage (Newspaper Association of America)
14
The shift(s)
IN MEDIA DISTRIBUTION
N=210 representatives of North-American media companies (58 consumer magazines, 122 newspapers, 24 business publications, 6 others)
How media companies are innovating and investing in cross-platform opportunities (Alliance for Audited Media - The New Audit Bureau of Circulations)
15
The shift(s)
IN MEDIA DISTRIBUTION
N=210 representatives of North-American media companies (58 consumer magazines, 122 newspapers, 24 business publications, 6 others)
How media companies are innovating and investing in cross-platform opportunities (Alliance for Audited Media - The New Audit Bureau of Circulations)
15
The shift(s)
IN MEDIA DISTRIBUTION
N=210 representatives of North-American media companies (58 consumer magazines, 122 newspapers, 24 business publications, 6 others)
How media companies are innovating and investing in cross-platform opportunities (Alliance for Audited Media - The New Audit Bureau of Circulations)
15
The shift(s)
IN MEDIA DISTRIBUTION
N=210 representatives of North-American media companies (58 consumer magazines, 122 newspapers, 24 business publications, 6 others)
How media companies are innovating and investing in cross-platform opportunities (Alliance for Audited Media - The New Audit Bureau of Circulations)
15
The shift(s)
MOBILE APPS – FROM NATIVE TO WEB
‣ According to Jakob Nielsen, in the terms of mobile
usability, apps are better currently. But in the future,
web apps will prevail – in some categories at least.
‣
‣
‣
‣
Expenses of native mobile app development increases too much
New (responsive) web technologies to improve mobile web apps/sites
Easy to integrate full web content into web apps
“Walled garden” restrictions in native apps
‣ Business (Financial Times http://apps.ft.com/ftwebapp/)
‣ Censorship (Playboy)
“Apps may remain better for tasks that are intensely feature-rich applications, such as photo editing —
whereas mobile sites will be better for design problems like e-commerce/m-commerce, corporate
websites, news, medical info, social networking, etc. that are rich in content but don't require intense
data manipulation. – Jakob Nielsen in Mobile Usability (2012)
16
The shift(s)
AN EYETRACKING EXPERIMENT: FINANCIAL TIMES
17
Tablet/Mobile usability
Mobile & Tablet usability
TABLET MAGAZINE USABILITY
‣
‣
‣
‣
Unrestricted and customizable user experience
Effortless navigation
Additional value from digitalization
Easy access to all (important) content
Sami Pekkala Usability evaluation of design solutions for tablet magazines (2012)
‣ Accessibility (Legibility & Readability, Guidance)
‣ Usability (Touch screen ergonomics, Perceivability, Orientation, Consistency, Responsivity)
‣ User experience (Flow, Interestingness & Playfulness, Mood and brand, Interactivity)
Harri Heikkilä Towards tablet publication heuristics (2012)
Preview in Finnish http://www.vkl.fi/files/2185/Aikakauslehden_tablettiversion_kaytettavyys.pdf
Full paper http://media.tkk.fi/visualmedia/publications/msc-theses/DI_S_Pekkala_2012.pdf
http://www.mediaconceptsrg.net/wp-content/uploads/2011/05/D1.2.1.1_eReading_Towards-tablet-publication-heuristics.pdf
19
Mobile & Tablet usability
THE PEEPHOLE PROBLEM
‣ Text in iPhone-sized screen is twice as hard to
comprehend than in desktop-sized
‣ Small screen > Little context > Users have to scroll to different parts of the text instead of
looking around
‣ Scrolling takes more time > Pressure on short-term memory
‣ Scrolling and going back and forth in the text is harder cognitively > Attention is taken away from the main task of
understanding
Evaluating the Readability of Privacy Policies in Mobile Environments http://www.igi-global.com/article/evaluating-readability-privacy-policies-mobile/51657
20
Mobile & Tablet usability
THE PEEPHOLE PROBLEM
‣ Text in iPhone-sized screen is twice as hard to
comprehend than in desktop-sized
‣ Small screen > Little context > Users have to scroll to different parts of the text instead of
looking around
‣ Scrolling takes more time > Pressure on short-term memory
‣ Scrolling and going back and forth in the text is harder cognitively > Attention is taken away from the main task of
understanding
‣ Both contents and features should be trimmed in mobile
‣ E.g. thumbnail images to reveal salient content only
‣ Only important and frequently used
content in mobile homepages
21
Mobile & Tablet usability
THE PEEPHOLE PROBLEM: SOLUTIONS
‣ Visual landmarks mixed in body text
‣ Pull-quotes, images, sub-headlines, drop caps…
‣ Extra effort on hyperlink perceivability and functionality
‣ Very simple interaction features
‣ “Thumb-screen” ergonomics
22
Me Naiset Plus
FOR IPAD & IPHONE
‣ SMF launched Me Naiset Plus for iPhone in April
‣ Previously available in print replica for iPad only
‣ Only a few magazines in the world have done “smart phone only” versions
‣ Android and Windows phone versions coming
‣ Native app, done with Adobe DPS
‣
‣
‣
‣
Cost-effective
Easy to master for graphic designers
PDF ensures consistent typography
iPhone only (for now)
23
Findings from the ARTS tablet course
Me Naiset Plus
FOR IPAD & IPHONE
COURSE 24265 3+3 CR
Publication
design for
emerging
publishing
platforms
Harri Heikkilä’s students
did studies on different
SMF products
25
Me Naiset Plus
ECOSYSTEM: SANOMA MAGAZINES
26
Me Naiset Plus
ECOSYSTEM: CONDE NAST
27
Me Naiset Plus
ECOSYSTEM: CONDE NAST
28
Me Naiset Plus
ECOSYSTEM
29
Me Naiset Plus
AN EYETRACKING EXPERIMENT
30
Me Naiset Plus
THE READER
31
Me Naiset Plus
THE READER
32
Me Naiset Plus
THE READER
33
Me Naiset Plus
THE READER
34
Me Naiset Plus
THE READER
35
Me Naiset Plus
THE READER
35
Me Naiset Plus
CONCLUSIONS
‣ iPhone
‣ Too much features (TOC x 3)
‣ In the beginning of the magazine, page map browser and content buttons
‣ Article length should be visible
‣ In the first page (creates hierarchy)
‣ And in the middle of the article (sense of place)
‣ More value from digitalization
‣ Such as sharing and more images
‣ Long texts need breaks
‣ To reduce monotony
‣ (And to create visual landmarks)
‣ iPad
‣ Better than print replica, in the terms of layout and readability
Sanoma Magazines iPad products (Antti Karvanen, Linnéa Puranen, Satu Kemppainen)
ME NAISET EXTRA -smart phone app (Iina Lievonen & Outi Kainiemi)
MENAISET iPhone App (marja tikka, terhi korhonen, luyi ma)
Sanoma Magazines Handheld Publications Ecosystem (Markku Luotonen, Ranjit Menon)
36
Other course works
NEWSPAPER LAYOUTS FOR TABLET
Karolina Konieczna & Linnea Puranen
37
Other course works
NEWSPAPER LAYOUTS FOR TABLET
Terhi Korhonen & Outi Kainiemi
38
Other course works
NEWSPAPER LAYOUTS FOR TABLET
Lili Koves & Ma Luyi
39
Other course works
NEWSPAPER LAYOUTS FOR TABLET
Iina Lievonen & Satu Kemppainen
40
Other course works
NEWSPAPER LAYOUTS FOR TABLET
Marja Tikka & Antti Karvanen
41
Agile dev. 2013 spring
Agile dev
SPRING 2013
‣ HBL+
Heuristic evaluation, questionnaire, interviews
43
HBL+ refinement
”The Kindle Killer”
EXAMPLES OF ASSESSMENTS
CLAIM 1: Constructing more logical and
simple navibar would enhance the UX
Is it necessary to have two overlapping navigations?
”Innehåll (content)” and ”översikt (overview)” have
redundant function in navigation bar. Actually, TOC is
presented three times in slightly different forms.
FLOW (X1) Keep it simple
ORIENTATION (U3) Sense of directions
ORIENTATION (U3) Sense of place
HBL+ refinement
”The Kindle Killer”
EXAMPLES OF ASSESSMENTS
CLAIM 1: Constructing more logical and
simple navibar would enhance the UX
Is it necessary to have two overlapping navigations?
”Innehåll (content)” and ”översikt (overview)” have
redundant function in navigation bar. Actually, TOC is
presented three times in slightly different forms.
Get rid of INNEHÅLL or ÖVERSIKT!
FLOW (X1) Keep it simple
ORIENTATION (U3) Sense of directions
ORIENTATION (U3) Sense of place
HBL+ refinement
”The Kindle Killer”
EXAMPLES OF ASSESSMENTS
CLAIM 2: Navigation needs to be improved
elsewhere also
Link and swipe uses same symbol
No indication of article length. Especially problem in
long articles. / Use scrollbar to show progress in the
right edge of the screen.
Perceivability (U2)
Affordances (alternatives of action). Prefer real world familiar metaphors,
existing design patterns and platform conventions.
HBL+ refinement
”The Kindle Killer”
EXAMPLES OF ASSESSMENTS
CLAIM 2: Navigation needs to be improved
elsewhere also
Changing font-size requires scrolling to the beginning
of body text. / Font-size adjustment should be placed
some where where it is always available. Hints of
navigation are missing, navigation not working as
expected
Perceivability (U2)
Affordances (alternatives of action). Prefer real world familiar metaphors,
existing design patterns and platform conventions.
HBL+ refinement
”The Kindle Killer”
EXAMPLES OF ASSESSMENTS
CLAIM 3: UX would benefit of more
coherent doorviews
Interactive parts of door view have no
similarity in appearance. Hierarchy is
missing.
CONSISTENCY (U4)
Similarity of appearance, location and behavior.
Follow and know the design patterns and platform conventions.
ORIENTATION (U3) Sense of direction
PERCIEVABILITY (U2) Natural mapping
HBL+ refinement
”The Kindle Killer”
EXAMPLES OF ASSESSMENTS
Poll strengthens findings
•
•
•
Over 100 answers, analysis on-going
Average age of respondents: 58
Almost no-one had chosen
option to subscribe HBL+ only
HBL+ refinement
”The Kindle Killer”
EXAMPLES OF ASSESSMENTS
Poll strengthens findings
4,0
3,0
2,0
1,0
0
VERSION 2013
•
5,0
VERSION 2012
•
Users considered HBL+ fairly easy to use
Innehåll” favored over “översikt”
“Omslag”-button was used rarely
Navigation should be available already
in cover
Disliked: some of the interactive
features available only on-line
To follow: the interviews
VERSION 2011
•
•
•
•
AGREEMENT 1–5
FOR THE CLAIM:
“CONTENT WAS
STRUCTURED WELL”
Agile dev
SPRING 2013
‣ AKU ANKKA LATAAMO
Heuristic evaluation, co-creation in Facebook
54
Agile dev
SPRING 2013
Thats all folks!
Next eReading&Coffee
26.9.2013
55