Data representation on mobile devices
How to effectively transfer data from tables to the smartphone screen
Initially, paper was the only medium of information. People have tried to analyze the collected data to see the big picture or the dynamics of change. The peaks are important in all data, both maximum and minimum. People have drawn data tables and graphs on paper, taking into account its features.
Features of perception of information from the paper
Paper is static, as opposed to the screen of a computer or a mobile device. Therefore, the table contains the maximum number of columns and rows to show all the data. It’s difficult to read these tables, but there is no alternative; the readers use their index finger or another tool, e.g. a ruler, as a pointer, to visually highlight the desired line. They read from left to right and move the pointer down.
This table should be transferred to the application on the iPhone screen in portrait mode. Obviously, it does not fit, and read it in this way is difficult.Humans also have a special feature, they can perceive a limited amount of data at a unit of time. Readers can not cover at once the entire table consisting of seven rows and three columns, so they use their finger as a pointer. To read the table, you make an effort to look for the needed value. For convenience, all information is divided into parts, look at any newspaper, for example, “The New York Times.” The column and the paragraph are optimum human-readable pieces of information.
Out of all the objects or phenomena of the world that are perceived through your senses or imagination, you can concentrate on just one at a time . This is called a locus of attention.
Read more about the locus of attention, in the book The Humane Interface by Jef Raskin
The features of graphics for a mobile devices screen
Screen size and interactivity. Iphone’s screen size is optimal for perception, a newspaper column can fit in it . We are free to move from one column to another with the familiar gesture of swiping left or right, and scrolling the text up and down.
The table from a book is on the left and the result of a transfer to a mobile screen is on the right. Can you see a difference?How to move the table to the screen of smartphone?
Obviously if we carry it as it is, then it’s more difficult to read the data, as the table size must be correspond to the size of a phone’s screen. High information density and fine print makes perception more difficult. In order to properly transfer table data to the phone, we need to understand how a person reads this data and what is important in it. We’ve already figured out how one reads, he highlights a data string with a finger or a pointer and reads it.
Optimal data block
We can make this task easier for people and highlight the optimum data block for them. Optimal data block in the table is a string. Thus we relieve a person from stress.
The source table does not fit, but a string or an optimal data block perfectly fit into the iPhone screen.Rows and columns
Let’s determine where to put the key values of the rows or columns. In this case, the years from 2000 to 2013 are arranged vertically and go down, which is not correct. The timeline is traditionally placed horizontally from left to right on the x-axis e.g. YouTube player, download progress bar, etc. Let’s use this pattern.
We have made another improvement to make the (boring) data in the column easier to perceive. Now we can see the dynamics and peak values.In this case, one year is represented on one screen , where we simply show the name and value in one column. Thus, we can add an infinite number of years in the X-axis and move between them with a swipe gesture, and we can add an infinite number of names and values in a column and scroll up and down.
Dynamics
The best way to show the dynamics of the entire period is the graph or chart. We know that it does not make sense to show all the graphics, because a person can take a limited amount of information. Therefore, for each parameter, we present a graph and note only the peak values, because they are important.
Let’s make another useful improvement and show a small graph in each row.Outcome
We have made a graph easy to understand using the principle of human centered design. We have made the data on the mobile interface more readable and useful. We have focused on the most important information in our table.
Links: Medium