UPDATED : Designing A Reader User Experience On Tablets
•Descargar como KEY, PDF•
0 recomendaciones•456 vistas
This presentation aims to provide a base overview of how to build easy-to-navigate publications on tablets by using a certain design framework The update is more concise and has speaker notes !!!
Recomendados
Más contenido relacionado
Último
Último (20)
Destacado
Destacado (20)
UPDATED : Designing A Reader User Experience On Tablets
- 1. YOUR CUSTOMERS FRONT AND CENTER Designing a Reader Experience on Tablets Expansion Kit 1: Navigating Articles and Sections
- 2. Bart <I am> De Pelsmaeker </I am> CEO Readz bart@readz.com @BartDP
- 3. READING ARTICLES READING ARTICLES Magazine page real Tablet screen real estate estate means optimally means optimally 1 page > 1 article 1 article > 1 screen SPRING2012 Welcome to the 14th issue of Content. As content continues to dominate the marketing landscape, this issue provides great insight into a number of TheVideoRevolution: As broadband becomes pervasive, the use of video is more pronounced than ever. Content producers are now leveraging this medium to engage customers. Our cover piece, “Coming Soon, to a Screen Near You…” illustrates how and where video is being used by brand marketers. IndustryWatch: Technology: Technology has always been on the cutting edge of the content revolution, with Microsoft, Cisco, IBM, and Intel leading the way in both B2B and B2C communications. This feature provides a deep look at this robust industry sector. Content2012: calendar for March 21 to attend. Take advantage of our GhostBlogging: The term “blogging” has now entered the Oxford English Dictionary, so the medium is secure. Should bloggers blog on their own or is ghost blogging effective? We hope you enjoy this issue as much Lori Rosen as we enjoyed putting it together. EXECUTIVE DIRECTOR CUSTOM CONTENT
- 4. READING ARTICLES multiple pages
- 5. READING ARTICLES web- or blog- style WEB FLOW PRINT FLOW magazine-style
- 6. READING ARTICLES web- or blog- style WEB FLOW PRINT FLOW magazine-style
- 7. BLOG FLOW Laundry Line Paradigm
- 8. BLOG FLOW Laundry Line Paradigm
- 9. BLOG FLOW Vertical Jump Paradigm
- 10. BLOG FLOW Vertical Jump Paradigm
- 11. READING ARTICLES print-style PRINT FLOW
- 12. READING ARTICLES print-style PRINT FLOW
- 17. SECTION PAGES Connecting to multiple articles
- 18. BROWSING ARTICLES “guided shortcut”, not “sequential” Laundry Line
- 19. BROWSING ARTICLES “guided shortcut”, not “sequential” Laundry Line
- 20. BROWSING ARTICLES “guided shortcut”, not “sequential” Double Whammy
- 21. BROWSING ARTICLES “guided shortcut”, not “sequential” Double Whammy
- 22. SUMMARY Use Section/Summary Laundry Line OR Double
- 23. READING ARTICLES IN BLOGFLOWS continuous ‘page’ scroll scroll BLOG FLOW
- 24. We have started with a solid frame but there is more to build... More coming soon... Suggestions? Let me know !
- 25. COOL STUFF? DIVE IN!! For publishers , Readz tablet content management • Striking, easy-to-configure layouts • Linked summary pages • Instant publishing as web apps • and much, much more... Learn more via info@readz.com or www.readz.com If you are a designer, and want to design app publications or you want to offer this to your customers, contact us at: partners@readz.com
- 26. Thank you! Questions? Reach me via bart@readz.com or
Notas del editor
- \n
- About \nBart De Pelsmaeker is the CEO of Readz, where he helps companies rethink and redevelop their publications for tablets. In this role, he often encounters the difficulties, doubts and questions publishers face. This presentation aims to provide a base overview of how to build easy-to-navigate publications on tablets by using a certain design framework. As a former executive at Agfa Graphics, IBM and Sony, Bart has a close understanding of the challenges faced by publishers and software developers. As a native of Belgium, he knows good beer and great food. As a person, he&#x2019;s eager to share his expertise in any (and all) of these areas. \n
- Articles are content-rich, and can include many different types of content, including pictures, graphics on a single magazine page. Tablet displays are generally not as large as printed pages and quickly become crowded. But, unlike print, there is no price to pay in terms of printing or shipping for opening up your layouts to fit on multiple tablet screens. The only price to pay is potential usability concerns, from requiring readers to swipe or tap to see additional content. This is easily outweighed by the increase in readability offered by an airier layout. As a publisher, you&#x2019;ll want to move to your content to a multi-screen layout sooner rather than later.\n
- We will start ground-up with the design of a digital publication and look first at the basics of our framework for navigating within articles and publications.\n\nMost of the time, content will occupy multiple screens.\n
- To offer a relaxing, intuitive user experience, there are only two ways to move through the different screens on a tablet: up and down, or left and right. One could think of more funky ways, such as diagonally, but readers will generally resist them. This creates two different paradigms:\n\nWeb/Blog Flow, where the user scrolls up and down between the different screens/pages of the article.\n\nPrint Flow, where the user scrolls left and right between the different screens/pages of the article.\n
- To offer a relaxing, intuitive user experience, there are only two ways to move through the different screens on a tablet: up and down, or left and right. One could think of more funky ways, such as diagonally, but readers will generally resist them. This creates two different paradigms:\n\nWeb/Blog Flow, where the user scrolls up and down between the different screens/pages of the article.\n\nPrint Flow, where the user scrolls left and right between the different screens/pages of the article.\n
- Continuing on the Blog Flow paradigm, there are different possibilities for moving between article or screen. Users can reach the next article or screen by swiping up, down, left or right. As a publisher, you want to offer a zen-like reading experience to your users, so let&#x2019;s have a closer look at the options. \n\nThe first option is to move horizontally between articles, I refer to this paradigm as the &#x201C;laundry line&#x201D;. This approach works really nicely with the blog flow: user swipes up or down to move between the different screens within an article, and swipes left or right to move between different articles.\n
- The second option under the Blog Flow model is for the user to move vertically between articles. The user swipes up or down to move between different screens within an article, and also swipes up or down to move between different articles. But how does the program or user know which is which? You can have the user adopt different swipes, such as fast/slow, long/short, but this seems bound to cause confusion. \n\nThis also plays against the print paradigm of moving left and right. We could just make the publication one long vertically scrollable list, but we&#x2019;re trying to create a better model, so let&#x2019;s skip that one. A better option is hot spots. For example, swiping on an article button moves the reader between articles, while swiping anywhere else moves to the next screen within the article. \n\nBut personally, I would not use this model. It feels very counter-intuitive.\n
- The second option under the Blog Flow model is for the user to move vertically between articles. The user swipes up or down to move between different screens within an article, and also swipes up or down to move between different articles. But how does the program or user know which is which? You can have the user adopt different swipes, such as fast/slow, long/short, but this seems bound to cause confusion. \n\nThis also plays against the print paradigm of moving left and right. We could just make the publication one long vertically scrollable list, but we&#x2019;re trying to create a better model, so let&#x2019;s skip that one. A better option is hot spots. For example, swiping on an article button moves the reader between articles, while swiping anywhere else moves to the next screen within the article. \n\nBut personally, I would not use this model. It feels very counter-intuitive.\n
- The second paradigm is horizontal or Print Flow, moving left and right within the contents of an article, just like we&#x2019;re used to with a book or magazine. This is a powerful paradigm, and it translates well across demographic and cultural boundaries. \n
- Since I touted swiping left to right within an article as an optimal solution for moving within an article, why not make swiping up and down the way to move between articles? Sigh.. this just does not feel right. Njet. \n
- A better option is to go for the double whammy, and to find a good way to allow the reader to choose to either move to the next page of an article or to the next entire article. A good way to do this is to create hotspots at the top of the article, which take the reader to the next article, and to make the rest of the screen move to the next &#x201C;page.&#x201D; \n
- Now, it&#x2019;s time to introduce the next building block of our framework: the summary or Section Page that helps readers select articles to read. \n\nThis page links to all the articles displayed, shows summaries of each article and includes some visual elements. It offers readers a very fast and smooth method for browsing through contents and selecting articles. The article summary should display the title, subtitle and at least some of the first sentence. After all, the writer and editor have spent considerable time making these elements eye catching, so our design should leverage that investment.\n
- Let&#x2019;s apply the summary page concept to our framework and pick up where we left off. Adding section pages, as shown here, works great with the Laundry Line and the Double Whammy. It adds another level of navigation and offers guided shortcuts in addition to sequential content discovery. \n\nSection pages are used in many leading publications and aggregation apps, including the New York Times, the International Herald Tribune, Flipboard, USA Today and Zite, just to name a few. \n\nI consider section pages a must. If you do not use them, your publication app does not transcend the level of print.\n
- Let&#x2019;s apply the summary page concept to our framework and pick up where we left off. Adding section pages, as shown here, works great with the Laundry Line and the Double Whammy. It adds another level of navigation and offers guided shortcuts in addition to sequential content discovery. \n\nSection pages are used in many leading publications and aggregation apps, including the New York Times, the International Herald Tribune, Flipboard, USA Today and Zite, just to name a few. \n\nI consider section pages a must. If you do not use them, your publication app does not transcend the level of print.\n
- Let&#x2019;s apply the summary page concept to our framework and pick up where we left off. Adding section pages, as shown here, works great with the Laundry Line and the Double Whammy. It adds another level of navigation and offers guided shortcuts in addition to sequential content discovery. \n\nSection pages are used in many leading publications and aggregation apps, including the New York Times, the International Herald Tribune, Flipboard, USA Today and Zite, just to name a few. \n\nI consider section pages a must. If you do not use them, your publication app does not transcend the level of print.\n
- Let&#x2019;s apply the summary page concept to our framework and pick up where we left off. Adding section pages, as shown here, works great with the Laundry Line and the Double Whammy. It adds another level of navigation and offers guided shortcuts in addition to sequential content discovery. \n\nSection pages are used in many leading publications and aggregation apps, including the New York Times, the International Herald Tribune, Flipboard, USA Today and Zite, just to name a few. \n\nI consider section pages a must. If you do not use them, your publication app does not transcend the level of print.\n
- Let&#x2019;s apply the summary page concept to our framework and pick up where we left off. Adding section pages, as shown here, works great with the Laundry Line and the Double Whammy. It adds another level of navigation and offers guided shortcuts in addition to sequential content discovery. \n\nSection pages are used in many leading publications and aggregation apps, including the New York Times, the International Herald Tribune, Flipboard, USA Today and Zite, just to name a few. \n\nI consider section pages a must. If you do not use them, your publication app does not transcend the level of print.\n
- Let&#x2019;s apply the summary page concept to our framework and pick up where we left off. Adding section pages, as shown here, works great with the Laundry Line and the Double Whammy. It adds another level of navigation and offers guided shortcuts in addition to sequential content discovery. \n\nSection pages are used in many leading publications and aggregation apps, including the New York Times, the International Herald Tribune, Flipboard, USA Today and Zite, just to name a few. \n\nI consider section pages a must. If you do not use them, your publication app does not transcend the level of print.\n
- Let&#x2019;s apply the summary page concept to our framework and pick up where we left off. Adding section pages, as shown here, works great with the Laundry Line and the Double Whammy. It adds another level of navigation and offers guided shortcuts in addition to sequential content discovery. \n\nSection pages are used in many leading publications and aggregation apps, including the New York Times, the International Herald Tribune, Flipboard, USA Today and Zite, just to name a few. \n\nI consider section pages a must. If you do not use them, your publication app does not transcend the level of print.\n
- Let&#x2019;s apply the summary page concept to our framework and pick up where we left off. Adding section pages, as shown here, works great with the Laundry Line and the Double Whammy. It adds another level of navigation and offers guided shortcuts in addition to sequential content discovery. \n\nSection pages are used in many leading publications and aggregation apps, including the New York Times, the International Herald Tribune, Flipboard, USA Today and Zite, just to name a few. \n\nI consider section pages a must. If you do not use them, your publication app does not transcend the level of print.\n
- Let&#x2019;s apply the summary page concept to our framework and pick up where we left off. Adding section pages, as shown here, works great with the Laundry Line and the Double Whammy. It adds another level of navigation and offers guided shortcuts in addition to sequential content discovery. \n\nSection pages are used in many leading publications and aggregation apps, including the New York Times, the International Herald Tribune, Flipboard, USA Today and Zite, just to name a few. \n\nI consider section pages a must. If you do not use them, your publication app does not transcend the level of print.\n
- Let&#x2019;s apply the summary page concept to our framework and pick up where we left off. Adding section pages, as shown here, works great with the Laundry Line and the Double Whammy. It adds another level of navigation and offers guided shortcuts in addition to sequential content discovery. \n\nSection pages are used in many leading publications and aggregation apps, including the New York Times, the International Herald Tribune, Flipboard, USA Today and Zite, just to name a few. \n\nI consider section pages a must. If you do not use them, your publication app does not transcend the level of print.\n
- Let&#x2019;s apply the summary page concept to our framework and pick up where we left off. Adding section pages, as shown here, works great with the Laundry Line and the Double Whammy. It adds another level of navigation and offers guided shortcuts in addition to sequential content discovery. \n\nSection pages are used in many leading publications and aggregation apps, including the New York Times, the International Herald Tribune, Flipboard, USA Today and Zite, just to name a few. \n\nI consider section pages a must. If you do not use them, your publication app does not transcend the level of print.\n
- Let&#x2019;s apply the summary page concept to our framework and pick up where we left off. Adding section pages, as shown here, works great with the Laundry Line and the Double Whammy. It adds another level of navigation and offers guided shortcuts in addition to sequential content discovery. \n\nSection pages are used in many leading publications and aggregation apps, including the New York Times, the International Herald Tribune, Flipboard, USA Today and Zite, just to name a few. \n\nI consider section pages a must. If you do not use them, your publication app does not transcend the level of print.\n
- Let&#x2019;s apply the summary page concept to our framework and pick up where we left off. Adding section pages, as shown here, works great with the Laundry Line and the Double Whammy. It adds another level of navigation and offers guided shortcuts in addition to sequential content discovery. \n\nSection pages are used in many leading publications and aggregation apps, including the New York Times, the International Herald Tribune, Flipboard, USA Today and Zite, just to name a few. \n\nI consider section pages a must. If you do not use them, your publication app does not transcend the level of print.\n
- Let&#x2019;s apply the summary page concept to our framework and pick up where we left off. Adding section pages, as shown here, works great with the Laundry Line and the Double Whammy. It adds another level of navigation and offers guided shortcuts in addition to sequential content discovery. \n\nSection pages are used in many leading publications and aggregation apps, including the New York Times, the International Herald Tribune, Flipboard, USA Today and Zite, just to name a few. \n\nI consider section pages a must. If you do not use them, your publication app does not transcend the level of print.\n
- Let&#x2019;s apply the summary page concept to our framework and pick up where we left off. Adding section pages, as shown here, works great with the Laundry Line and the Double Whammy. It adds another level of navigation and offers guided shortcuts in addition to sequential content discovery. \n\nSection pages are used in many leading publications and aggregation apps, including the New York Times, the International Herald Tribune, Flipboard, USA Today and Zite, just to name a few. \n\nI consider section pages a must. If you do not use them, your publication app does not transcend the level of print.\n
- Let&#x2019;s apply the summary page concept to our framework and pick up where we left off. Adding section pages, as shown here, works great with the Laundry Line and the Double Whammy. It adds another level of navigation and offers guided shortcuts in addition to sequential content discovery. \n\nSection pages are used in many leading publications and aggregation apps, including the New York Times, the International Herald Tribune, Flipboard, USA Today and Zite, just to name a few. \n\nI consider section pages a must. If you do not use them, your publication app does not transcend the level of print.\n
- Let&#x2019;s apply the summary page concept to our framework and pick up where we left off. Adding section pages, as shown here, works great with the Laundry Line and the Double Whammy. It adds another level of navigation and offers guided shortcuts in addition to sequential content discovery. \n\nSection pages are used in many leading publications and aggregation apps, including the New York Times, the International Herald Tribune, Flipboard, USA Today and Zite, just to name a few. \n\nI consider section pages a must. If you do not use them, your publication app does not transcend the level of print.\n
- Let&#x2019;s apply the summary page concept to our framework and pick up where we left off. Adding section pages, as shown here, works great with the Laundry Line and the Double Whammy. It adds another level of navigation and offers guided shortcuts in addition to sequential content discovery. \n\nSection pages are used in many leading publications and aggregation apps, including the New York Times, the International Herald Tribune, Flipboard, USA Today and Zite, just to name a few. \n\nI consider section pages a must. If you do not use them, your publication app does not transcend the level of print.\n
- Let&#x2019;s apply the summary page concept to our framework and pick up where we left off. Adding section pages, as shown here, works great with the Laundry Line and the Double Whammy. It adds another level of navigation and offers guided shortcuts in addition to sequential content discovery. \n\nSection pages are used in many leading publications and aggregation apps, including the New York Times, the International Herald Tribune, Flipboard, USA Today and Zite, just to name a few. \n\nI consider section pages a must. If you do not use them, your publication app does not transcend the level of print.\n
- Let&#x2019;s apply the summary page concept to our framework and pick up where we left off. Adding section pages, as shown here, works great with the Laundry Line and the Double Whammy. It adds another level of navigation and offers guided shortcuts in addition to sequential content discovery. \n\nSection pages are used in many leading publications and aggregation apps, including the New York Times, the International Herald Tribune, Flipboard, USA Today and Zite, just to name a few. \n\nI consider section pages a must. If you do not use them, your publication app does not transcend the level of print.\n
- Let&#x2019;s apply the summary page concept to our framework and pick up where we left off. Adding section pages, as shown here, works great with the Laundry Line and the Double Whammy. It adds another level of navigation and offers guided shortcuts in addition to sequential content discovery. \n\nSection pages are used in many leading publications and aggregation apps, including the New York Times, the International Herald Tribune, Flipboard, USA Today and Zite, just to name a few. \n\nI consider section pages a must. If you do not use them, your publication app does not transcend the level of print.\n
- Just to be complete, when you choose to use a blog flow you have another choice to make, which is how readers move between the screens. A swipe can move you from one complete page to the next, or the screen can move up and down, in a continuous vertical scroll that resembles scrolling on a web page. \n\n
- There is of course much more to add to the framework. I plan to extend this presentation - if I just figure out how to cram 28 hours in a 24 hour day... If you have suggestions for future topics, I would be glad to hear them. \n
- Readz tablet content management system empowers users to design, edit, publish and host interactive HTML5 publications on tablets. The web-based Readz solution enables users to publish striking layouts that incorporate rich media without installing software or touching a line of code. Readz also allows users to invite as many collaborators as they need without buying additional licenses. Through Readz, publications can be assembled quickly and distributed instantly, without waiting for approval from an app store or sharing revenue. Contact info@readz.com to learn more. \n
- Thank you for your time. I am happy to further discuss navigation paradigms and web publishing via email or Twitter. \n