April 8, 2013 at 14:47Content Applications: Towards the Reader
Now more and more people read books, news and other content on mobile devices. The advantages of this are obvious: you do not need to physically store a large number of books and magazines, at any time you have access to a huge library. At the same time, many still prefer paper books and magazines. The reasons for this are different: someone likes the smell of printing ink, someone likes the rustling of paper ... But in most cases, people prefer paper editions because applications for reading books and other content are simply not convenient.
With tablets and specialized devices (Nook, Kindle), everything is clear: in my opinion, they more or less cope with the task of conveniently displaying content. But with mobile applications (readers), not everything is so smooth. Having experience developing mobile applications for reading various content, I want to talk about the main mistakes and features of mobile readers and content applications.
Many applications for reading books are close to reality - here you have shelves with books, and covers of printed books, and the effect of real page turning (over which he once struggled for a long time). It looks something like this:
A book opened in the iBooks app on the iPad, and the Kiosk app.
It would seem that this is bad? In fact, nothing, except that this method works well only on devices whose physical size is commensurate with the physical size of books and magazines. Have you ever heard that on the same iPad and Kindle it’s not convenientto read computer literature, which is mainly composed in PDF and A4? Here I am about this: if the physical form factor of the device and the content do not match, then there are difficulties when reading. One solution to this problem was the emergence of the formats epub and mobi, adapted for mobile devices, which partially solved the problem.
How did Microsoft deal with this problem? For Windows Phone and Windows 8, the Metro interface design language (now called the Windows UI) was developed, one of the principles of which is: authentically digital, that is, it is initially oriented to digital devices without analogy with the physical world.
Windows 8 Kindle app
I think it will be interesting for you to look at examples of authentically digital designs and concepts on Pinterest .
A good example is the Flipboard application, which, on the one hand, is a bit like a printed newspaper, on the other hand, has all the elements of a digital edition:
Flipboard application
Many examples demonstrating the capabilities of mobile platforms are devoted to writing RSS readers. From the first days, a huge number of news clients and RSS readers fill application stores. It is believed that such an application can easily be written by a student in one evening.
The truth is that you can write something, only using such a client will be absolutely impossible. As well as half of the customers released for mobile devices.
Why? Because good readers should take into account many nuances. For example, it is necessary that they:
The main problem of readers and content applications is that the content is displayed in its original form (HTML), that is, using a web browser. In this case, the application is a regular wrapper over the browser, which, in my opinion, is not much different from using a regular web site (especially with an adaptive design or version for mobile phones). In addition, the web browser does not use native fonts of mobile platforms, which greatly affects the User Experience.
In the above example, I see several problems:
This problem was solved as follows: a minimum of space on branding, as well as to collapse, but at any moment accessible control panel (it is theoretically possible to make a header in one line, which will add another 10% of usable space in the case of long-headings):
This can be done conclusion that functionality and additional information should not interfere with the main task of the user - reading the content.
Navigation inside content applications should be as simple as possible, and all additional functions (functions that are not related to reading the news, with rare exceptions, are optional) should be hidden in the control panel or called using additional actions.
This is confirmed by the study , which says that one of the main problems of applications of this kind is a complex and not intuitive navigation model.
Application authors solve this problem in different ways. For example, Moleskine developers have illustrated the logic of user interaction with the application, since without additional explanations it is too complicated, which is why many abandon this application in favor of more “easy” and “understandable” ones: There’s
no way to figure it out
Users do not like this kind of scheme, because they do not want to feel "near" (who read instructions in our century?).
It is also impossible not to say about the importance of the reverse action (return to the search results, to the previous article or choose another section). The lack of a “Back” button or an intuitive way to return can lead to a deadlock (apparently, because of this, Windows Phone designers made the “Back” button hardware and required).
Another example is the Kinopoisk app for the iPad. Honestly, after a very convenient and thoughtful client for Windows Phone, I expected to see an equally convenient client for iPad (I got to know the applications in this order).
The lower you go down the hierarchy of materials when working with this application, the more congested the screen becomes and the less understandable is the logic of working with tabs.
It looks like this:
Kinopoisk application The
conclusion is as follows: more attention should be paid to the user interaction model, as well as to navigation within the application.
Here I would like to tell not so much about mistakes, but about different design approaches to displaying content. I can highlight several popular patterns.
1. Pinterest-style:
In my opinion, one of the most unsuccessful concepts, widely used. Apparently, the creators were not very concerned about learning patterns of user behavior when reading. In this case, the attention is scattered, not focusing on anything specifically. But many people like it.
2. Unlike Pinterest-style, Windows-style assumes even squares lined up along the line.
Additional indentation and grouping of objects make it easy to navigate in the application.
A: the indents on the left and on the top are the same throughout the application;
B: additional indents between groups of elements of the same type;
C: a small distance between elements of the same type in the same group;
D: the headers are aligned on the grid.
By the way, here lies a guide that describes how to design a Windows 8 application based on an existing site.
Another feature of Windows 8 is that in the horizontal position, the text is divided into columns and reads from left to right, and in the vertical position - from top to bottom, as we are used to seeing content on the site. Another example of adapting content to a specific form factor.
3. Facebook & Instagram style.
You rarely see such a design in mobile applications, but this is perhaps even better.
Many people forget about this and try to transfer the User Experience familiar to web users to mobile platforms. There are also situations when a mobile application, for example, for iOS, is trying to transfer one to one on a new platform - Android or Windows Phone.
This is fundamentally not true, since you need to design for a specific platform, taking into account all its features.
Here is an example of the situation described:
Applications look almost identical for all platforms. Companies often attribute this to recognition and branding issues. However, practice shows that users rarely use two or three phones with different operating systems, therefore, recognition should not be worked out in a cross-platform manner. In addition, the authors violate the guidelines of at least two mobile platforms.
I hope that a short excursion into the world of content applications and designs was successful, and it became more clear to you why writing content applications is not as simple as it might seem at first glance.
What are your favorite content apps?
With tablets and specialized devices (Nook, Kindle), everything is clear: in my opinion, they more or less cope with the task of conveniently displaying content. But with mobile applications (readers), not everything is so smooth. Having experience developing mobile applications for reading various content, I want to talk about the main mistakes and features of mobile readers and content applications.
Physical vs digital format
Many applications for reading books are close to reality - here you have shelves with books, and covers of printed books, and the effect of real page turning (over which he once struggled for a long time). It looks something like this:
A book opened in the iBooks app on the iPad, and the Kiosk app.
It would seem that this is bad? In fact, nothing, except that this method works well only on devices whose physical size is commensurate with the physical size of books and magazines. Have you ever heard that on the same iPad and Kindle it’s not convenientto read computer literature, which is mainly composed in PDF and A4? Here I am about this: if the physical form factor of the device and the content do not match, then there are difficulties when reading. One solution to this problem was the emergence of the formats epub and mobi, adapted for mobile devices, which partially solved the problem.
How did Microsoft deal with this problem? For Windows Phone and Windows 8, the Metro interface design language (now called the Windows UI) was developed, one of the principles of which is: authentically digital, that is, it is initially oriented to digital devices without analogy with the physical world.
Windows 8 Kindle app
I think it will be interesting for you to look at examples of authentically digital designs and concepts on Pinterest .
A good example is the Flipboard application, which, on the one hand, is a bit like a printed newspaper, on the other hand, has all the elements of a digital edition:
Flipboard application
Is it easy to write an RSS reader?
Many examples demonstrating the capabilities of mobile platforms are devoted to writing RSS readers. From the first days, a huge number of news clients and RSS readers fill application stores. It is believed that such an application can easily be written by a student in one evening.
The truth is that you can write something, only using such a client will be absolutely impossible. As well as half of the customers released for mobile devices.
Why? Because good readers should take into account many nuances. For example, it is necessary that they:
- maintained offline mode, while not taking up much space after several months of work;
- allowed to control the font, background, subscriptions, as well as the frequency of their updates;
- They were fast and consumed little traffic.
- provided the opportunity not only to consume content, but also to produce it, as well as share it;
- provided a convenient interface for consuming content and convenient gesture support for turning over and working with content - this is perhaps the most important thing.
The main problem of readers and content applications is that the content is displayed in its original form (HTML), that is, using a web browser. In this case, the application is a regular wrapper over the browser, which, in my opinion, is not much different from using a regular web site (especially with an adaptive design or version for mobile phones). In addition, the web browser does not use native fonts of mobile platforms, which greatly affects the User Experience.
In the above example, I see several problems:
- the text "Yesterday, 18:17" takes up too much space, while it does not contain a semantic load;
- the top branded panel + the lower control panel + the text “Yesterday 18:17” occupies 25-30% of the work space that could be used for the text of the news.
This problem was solved as follows: a minimum of space on branding, as well as to collapse, but at any moment accessible control panel (it is theoretically possible to make a header in one line, which will add another 10% of usable space in the case of long-headings):
This can be done conclusion that functionality and additional information should not interfere with the main task of the user - reading the content.
Easy navigation
Navigation inside content applications should be as simple as possible, and all additional functions (functions that are not related to reading the news, with rare exceptions, are optional) should be hidden in the control panel or called using additional actions.
This is confirmed by the study , which says that one of the main problems of applications of this kind is a complex and not intuitive navigation model.
Application authors solve this problem in different ways. For example, Moleskine developers have illustrated the logic of user interaction with the application, since without additional explanations it is too complicated, which is why many abandon this application in favor of more “easy” and “understandable” ones: There’s
no way to figure it out
Users do not like this kind of scheme, because they do not want to feel "near" (who read instructions in our century?).
It is also impossible not to say about the importance of the reverse action (return to the search results, to the previous article or choose another section). The lack of a “Back” button or an intuitive way to return can lead to a deadlock (apparently, because of this, Windows Phone designers made the “Back” button hardware and required).
Another example is the Kinopoisk app for the iPad. Honestly, after a very convenient and thoughtful client for Windows Phone, I expected to see an equally convenient client for iPad (I got to know the applications in this order).
The lower you go down the hierarchy of materials when working with this application, the more congested the screen becomes and the less understandable is the logic of working with tabs.
It looks like this:
Kinopoisk application The
conclusion is as follows: more attention should be paid to the user interaction model, as well as to navigation within the application.
Content Display Templates
Here I would like to tell not so much about mistakes, but about different design approaches to displaying content. I can highlight several popular patterns.
1. Pinterest-style:
In my opinion, one of the most unsuccessful concepts, widely used. Apparently, the creators were not very concerned about learning patterns of user behavior when reading. In this case, the attention is scattered, not focusing on anything specifically. But many people like it.
2. Unlike Pinterest-style, Windows-style assumes even squares lined up along the line.
Additional indentation and grouping of objects make it easy to navigate in the application.
A: the indents on the left and on the top are the same throughout the application;
B: additional indents between groups of elements of the same type;
C: a small distance between elements of the same type in the same group;
D: the headers are aligned on the grid.
By the way, here lies a guide that describes how to design a Windows 8 application based on an existing site.
Another feature of Windows 8 is that in the horizontal position, the text is divided into columns and reads from left to right, and in the vertical position - from top to bottom, as we are used to seeing content on the site. Another example of adapting content to a specific form factor.
3. Facebook & Instagram style.
You rarely see such a design in mobile applications, but this is perhaps even better.
Design for a specific platform
Many people forget about this and try to transfer the User Experience familiar to web users to mobile platforms. There are also situations when a mobile application, for example, for iOS, is trying to transfer one to one on a new platform - Android or Windows Phone.
This is fundamentally not true, since you need to design for a specific platform, taking into account all its features.
Here is an example of the situation described:
Applications look almost identical for all platforms. Companies often attribute this to recognition and branding issues. However, practice shows that users rarely use two or three phones with different operating systems, therefore, recognition should not be worked out in a cross-platform manner. In addition, the authors violate the guidelines of at least two mobile platforms.
Instead of conclusions
I hope that a short excursion into the world of content applications and designs was successful, and it became more clear to you why writing content applications is not as simple as it might seem at first glance.
What are your favorite content apps?