Apps with data - data expressions on mobile phones

Previously, I studied the best way to express data charts. With the endless development of mobile applications, this time I extended the expression of data charts to mobile phones. Compared with the space advantage of displaying data on the web, how should mobile phones choose to take into account the convenience, simplicity and key features of handheld devices? Is there a more appropriate way of expression? The following is a small summary of the parts of mobile applications that are worth learning from after reading or trying various apps with data, which also allows me to have a deeper understanding of the characteristics of different data charts.

In the process of searching for App categories, I found that most of the applications that can better reflect data expression are distributed in the following categories: finance, health, medical, business, tools, and efficiency; among them, applications in finance, health, and business are the most widely used. Today, I will enumerate these three categories of chart applications for everyone to see.

Usually, most of the data charts we use can be found in Highchart. Today, we will use the charts in Highchart as a reference to see how to properly use and express charts in mobile apps.

1. Financial

The purpose of using financial (financial management) apps is usually to understand the trends of income, expenditure and revenue, so as to save or make money. Such apps usually ask users to set up income, expenditure, bills and budgets in advance, and then the main task when opening the app is to check the application feedback.
Mint Bills & Money

The picture above is a bookkeeping application; the left picture uses a solid gauge to show the bill due; the right picture uses a bar chart-like method to show the credit card usage and balance, as well as the minimum repayment amount. In this way, within a given range, you can know the overall expenditure by scanning; both of them have expressions of progress and process, but the left picture is more suitable for describing the countdown; and the right picture will be clearer in describing the minimum repayment scale.

Mint

It has a similar application to the previous app. Later, I felt that this "stacked bar chart" with only one line was more like a basic heat map, and it shows the current score, making it easy to check the current credit value and coordinates. The addition of arrows visually gives a sense of progress and also serves as an indicator.

Saver 2

It is also an accounting app. The Donut chart on the left is divided by different color blocks representing each expense category. It is a more effective application of the original pie chart. The center of the pie is hollowed out to put the total amount of expenses. This practice has gradually become the mainstream in apps and modern web charts. It allows you to easily see the percentage and total amount. The right picture is to refine the specific classification items based on the color blocks on the left picture to view the budget and expense ratio of each item.

MoneyWiz

The left picture is a calendar management method, which is convenient for viewing the corresponding bill categories and can clearly show which days have expenses or bill reminders; the right picture uses a conventional column chart to compare the monthly income and expenditure.

TapToTrack

It is still an accounting app. The left picture uses a timeline to record the details of daily income and expenditure data, and uses common sense colors (red and green) to indicate income and expenditure; the line chart in the upper part of the right picture inherits the red and green income and expenditure color markings in the left picture, allowing users to view the monthly income and expenditure situation. The lower part ranks the detailed income and expenditure (the color scheme is not entirely accurate), and the proportion indicates a highlighted sub-item expenditure and proportion data.

EnergyMonitorUI

A related energy monitoring chart design draft on Dribbble uses a polar wind rose to represent the monthly energy consumption in 2013. Compared with the bar chart with the same diagram, the polar wind rose is more innovative. Although other details of the design draft have yet to be explained, it also intuitively shows the energy-intensive months, which helps users to take corresponding energy-saving measures later.

Yahoo Finance

This time it is not an accounting application; needless to say, this is a stock tracking app from Yahoo. The left picture is the most familiar to stockholders. The line charts with different colors show the trend of the day. You can also view the data performance of different latitudes by selecting or switching regions and time. The red and green rise and fall in the lower part are also clearly visible. The right picture uses an area chart to show the trend changes of a single stock at different times. From the design point of view, the area chart is filled with color, and the opposite is a line or curve chart. However, after filling with color, the performance of detailed time periods can be set on the coordinates (right picture). The data charts related to stocks are applied very professionally and fixedly, which can be regarded as the common sense and habits established for users by a complex business. As long as you see the fixed chart combination, there is no need to say more.

ARBITRAGE TRADER

Stock app. The data in a grid is similar to the form of a heat map, which is usually more common in data detail tables on the web where there is abundant space. It is a very useful presentation method: different color blocks are used to represent some intervals preset by the user. The seemingly dense numbers can be used to quickly understand the range and commonality of the data.

Review <br /> Regular basic chart applications on mobile phones will take space factors into consideration and make visual adjustments clearer; let's take a look at the chart application review of financial apps:

also,

– Bills combined with calendar reminders are also a good way

– The use of colors is important. In an app with limited space, using colors well will greatly improve efficiency.

– Filters are also indispensable in the app, such as controls for switching dimensions such as region and time, which can effectively adjust the granularity of the view

Controlling the targeted application of basic elements in limited spaces and highlighting the key points can also provide guidance for users' next steps in saving money, investing, and other behaviors.

2. Health

One of the health categories is sports and fitness, and the other is health indicator monitoring. Users of health apps mainly focus on their own sports indicators, completion and changes. Usually, after users set some monitoring standards according to the guidance, they record new data in the app through exercise, which is convenient for viewing and tracking at any time.

FitPort

This is an app for weight and step counting. The left picture still uses a donut chart (which can also be seen as a circular bar chart) to show the results of today's training: number of steps, exercise kilometers, completion, and weight changes. The first two are thin donut charts, which clearly express the completion progress and gap, and the latter is a visual beautification to maintain the style to show weight changes; the bottom of the right picture uses a bar chart and a baseline to show the change in the number of steps at different times of the day in the case of a daily time dimension, so that users can find some of their own rules. Another type of health is the monitoring of health indicators, and some medical treatments are also temporarily included in this list. The commonality is that these apps all use certain external devices to carry around, detect and measure body data at any time, and record them synchronously in the app; then users can view the changes in indicators in the app, and then adjust their eating, living and other habits to improve the current situation.

iHealth MyVitals 2.0

This is a blood pressure monitoring app. The line chart on the left describes the recent changes in the blood pressure range and weight during a certain period of time within a day. The right picture shows the coordinates of the current blood pressure data and the variation heat map of the reference range. It is very similar to the credit value coordinates in the previous financial management app, but with one more dimension. It also meets the actual basic data requirements of blood pressure (systolic and diastolic pressure coordinates); so the coordinate heat map can also be flexibly applied.

iHealth Gluco-Smart

This is a blood sugar monitoring app. The left picture shows the measurement data in the app through an external blood sugar monitoring device; the donut chart with visual effects has an instrument scale, indicating the average blood sugar value before meals or at night for 7 days, and the scatter plot below is used as an auxiliary detailed chart to mark the time periods when high, medium and low values ​​occur respectively. In the right picture, the line chart shows the blood sugar changes before meals and at night, and different color lines are used to express the blood sugar changes at breakfast, lunch, dinner and night. Both pictures have green areas - safe ranges, which are also very convenient for viewing and comparing your own data changes.

SnoreLab

This is a snoring monitoring app. The left picture shows the monitoring performance of snoring degree. There is a color filter from soothing to severe on the left. The color blocks in the tight bar chart follow the three dimensions of the filter. You can intuitively see in which period the most severe snoring is distributed; you can also listen to the severity of the snoring at the bottom; the right picture uses a colored heat line chart to show the degree of snoring in each period; and convert it into an evaluation value of the sound in a specific part, which can be used as a reference for effective treatment when users seek medical treatment.

SleepCycle

Similar to the right picture of the previous app, this is a data chart for sleep monitoring. Design draft from Dribbble. Many of the beautiful design drafts on Dribbble like to use curves and color gradients, but there are also many errors in expression. The gradient color in this design draft is just right to combine with the curve, clearly expressing the degree of sleep depth observed in the matching time period; the doughnut completion degree indicates the proportion of different types, and makes an intuitive summary of the overall sleep situation.

review

In addition to monitoring indicators and checking changes and trends, the classic charts used in this type of app focus on highlighting problem points so that users can adjust their daily routines, diet, and training plans.

3. Commercial

The business category is mainly used to monitor business data: traffic, visits, reach, etc. It also incorporates an efficiency tool that monitors and manages the use of time.

Mandrill

This is an app that tracks email sending data. The upper part summarizes the key indicators of email open rate, click rate, deduplication open, click count, complaints, unsubscribe count, etc. within the optional time range; the lower part uses a transparent area chart to show the open rate and click rate.

MailChimp

This is also an email monitoring app, the familiar MailChimp. It uses bar graphs to represent the open rate and click rate; in the key data section, it displays the email delivery, open, click rate, and bar graphs can also be thin donut graphs twisted into circles, usually used to indicate percentages, and the same concept applies to completion.

TODAY Calendar

This is a time and task management app. It still uses the calendar and color blocks to distinguish different tasks (left picture). Then on the dial in the right picture, you can see the previous task schedule and whether there are conflicts or overlaps in time. It is much more intuitive than linearly counting the time spent on a single task.

Statistics

I don't remember if I found this on Dribbble or Pinterest, but this is a visit source data chart. The top map is a bit like a map bubble, which directly expresses the source region; the bottom shows PV, number of visitors, and number of return visits in a semi-transparent area chart, which can also be viewed as a simple funnel view based on the order of these three data.

review

Business efficiency categories focus more on monitoring results, indicator data, etc. in order to find areas for improvement.

In the process of organizing examples, I thought of the idea of ​​migrating web or client services to mobile phones when apps were first created: take the core backbone of the business. Now, looking back, as the proportion of mobile applications has increased significantly, in addition to considering the core backbone, we must also strive to clearly indicate the main tasks that users need to do or the effective guidance given to users. For data apps, in a limited space, summary data or key indicators are indispensable, and data tables will appear relatively less, and the element structure will roughly become as follows:

When there are multiple elements or combinations, we must consider the priority, just like the core and disposable parts of a rocket. If the content can only be displayed on an Apple Watch or in a smaller space, which piece should we keep?

In summary, this is a summary and refinement of the application of data charts on mobile phones during work exploration; each basic chart has its own characteristics, and mastering its characteristics and making good use of it to make more innovations is the value of visual data. Data is not boring, and interesting data charts are its best translators. The above views, cases and thoughts are inevitably superficial and one-sided, and more and better applications are waiting for everyone to continue to explore.