Statistics and Data
When presenting data to users...
Responsive Data Tables
Alerts should be helpful and concise. Remember, not every user will be tech savy. Use layman terms when guiding our visitors through their journey. This is especially helpful for tips, warnings and error messages. Also, if the problem a user if facing can not be easily solved by simply stating the issue, provide an example to help clarify.
TableSaw - Stack Table
For instance if a user wants to perform a specific search class search but the system produces an error, provide an example search term that will yield results. In addition, add a brief description on the type of search pattern the system is expecting.
Example
Movie Title | Rank | Year | Rating | Gross |
---|---|---|---|---|
Movie TitleAvatar | Rank1 | Year2009 | Rating83% | Gross$2.7B |
Movie TitleTitanic | Rank2 | Year1997 | Rating88% | Gross$2.1B |
Movie TitleThe Avengers | Rank3 | Year2012 | Rating92% | Gross$1.5B |
Movie TitleHarry Potter and the Deathly Hallows—Part 2 | Rank4 | Year2011 | Rating96% | Gross$1.3B |
Movie TitleFrozen | Rank5 | Year2013 | Rating89% | Gross$1.2B |
Movie TitleIron Man 3 | Rank6 | Year2013 | Rating78% | Gross$1.2B |
Movie TitleTransformers: Dark of the Moon | Rank7 | Year2011 | Rating36% | Gross$1.1B |
Movie TitleThe Lord of the Rings: The Return of the King | Rank8 | Year2003 | Rating95% | Gross$1.1B |
Movie TitleSkyfall | Rank9 | Year2012 | Rating92% | Gross$1.1B |
Movie TitleTransformers: Age of Extinction | Rank10 | Year2014 | Rating18% | Gross$1.0B |
<table class="tablesaw tablesaw-stack" data-tablesaw-mode="stack" id="tablesaw-4541">
<thead>
<tr>
<th scope="col" data-tablesaw-sortable-col="" data-tablesaw-priority="persist">Movie Title</th>
<th scope="col" data-tablesaw-sortable-col="" data-tablesaw-sortable-default-col="" data-tablesaw-priority="3">Rank</th>
<th scope="col" data-tablesaw-sortable-col="" data-tablesaw-priority="2">Year</th>
<th scope="col" data-tablesaw-sortable-col="" data-tablesaw-priority="1">
<abbr title="Rotten Tomato Rating">Rating</abbr>
</th>
<th scope="col" data-tablesaw-sortable-col="" data-tablesaw-priority="4">Gross</th>
</tr>
</thead>
<tbody>
<tr>
<td class="title"><strong class="tablesaw-cell-label">Movie Title</strong><span class="tablesaw-cell-content"><a href="http://en.wikipedia.org/wiki/Avatar_(2009_film)">Avatar</a></span></td>
<td><strong class="tablesaw-cell-label">Rank</strong><span class="tablesaw-cell-content">1</span></td>
<td><strong class="tablesaw-cell-label">Year</strong><span class="tablesaw-cell-content">2009</span></td>
<td><strong class="tablesaw-cell-label"><abbr title="Rotten Tomato Rating">Rating</abbr></strong><span class="tablesaw-cell-content">83%</span></td>
<td><strong class="tablesaw-cell-label">Gross</strong><span class="tablesaw-cell-content">$2.7B</span></td>
</tr>
<tr>
<td class="title"><strong class="tablesaw-cell-label">Movie Title</strong><span class="tablesaw-cell-content"><a href="http://en.wikipedia.org/wiki/Titanic_(1997_film)">Titanic</a></span></td>
<td><strong class="tablesaw-cell-label">Rank</strong><span class="tablesaw-cell-content">2</span></td>
<td><strong class="tablesaw-cell-label">Year</strong><span class="tablesaw-cell-content">1997</span></td>
<td><strong class="tablesaw-cell-label"><abbr title="Rotten Tomato Rating">Rating</abbr></strong><span class="tablesaw-cell-content">88%</span></td>
<td><strong class="tablesaw-cell-label">Gross</strong><span class="tablesaw-cell-content">$2.1B</span></td>
</tr>
<tr>
<td class="title"><strong class="tablesaw-cell-label">Movie Title</strong><span class="tablesaw-cell-content"><a href="http://en.wikipedia.org/wiki/The_Avengers_(2012_film)">The Avengers</a></span></td>
<td><strong class="tablesaw-cell-label">Rank</strong><span class="tablesaw-cell-content">3</span></td>
<td><strong class="tablesaw-cell-label">Year</strong><span class="tablesaw-cell-content">2012</span></td>
<td><strong class="tablesaw-cell-label"><abbr title="Rotten Tomato Rating">Rating</abbr></strong><span class="tablesaw-cell-content">92%</span></td>
<td><strong class="tablesaw-cell-label">Gross</strong><span class="tablesaw-cell-content">$1.5B</span></td>
</tr>
</tbody>
</table>
TableSaw - Swipe Table with Mini Map
These types of alerts allow the user to close the message after they have read them. Although any alert can be made dissmissible, we should restrict them to warnings and tips. Since error message stops the user from moving forward, we should keep that message present so users can utilize the description hint to solve their problem.
Example
Movie Title | Rank | Year | Rating | Gross |
---|---|---|---|---|
Avatar | 1 | 2009 | 83% | $2.7B |
Titanic | 2 | 1997 | 88% | $2.1B |
The Avengers | 3 | 2012 | 92% | $1.5B |
Harry Potter and the Deathly Hallows—Part 2 | 4 | 2011 | 96% | $1.3B |
Frozen | 5 | 2013 | 89% | $1.2B |
Iron Man 3 | 6 | 2013 | 78% | $1.2B |
Transformers: Dark of the Moon | 7 | 2011 | 36% | $1.1B |
The Lord of the Rings: The Return of the King | 8 | 2003 | 95% | $1.1B |
Skyfall | 9 | 2012 | 92% | $1.1B |
Transformers: Age of Extinction | 10 | 2014 | 18% | $1.0B |
<table class="tablesaw" data-tablesaw-mode="swipe" data-tablesaw-minimap>
<thead>
<tr>
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="persist">Movie Title</th>
<th scope="col" data-tablesaw-sortable-col data-tablesaw-sortable-default-col data-tablesaw-priority="3">Rank</th>
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="2">Year</th>
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="1">
<abbr title="Rotten Tomato Rating">Rating</abbr>
</th>
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="4">Gross</th>
</tr>
</thead>
<tbody>
<tr>
<td class="title"><a href="http://en.wikipedia.org/wiki/Avatar_(2009_film)">Avatar</a></td>
<td>1</td>
<td>2009</td>
<td>83%</td>
<td>$2.7B</td>
</tr>
<tr>
<td class="title"><a href="http://en.wikipedia.org/wiki/Titanic_(1997_film)">Titanic</a></td>
<td>2</td>
<td>1997</td>
<td>88%</td>
<td>$2.1B</td>
</tr>
<tr>
<td class="title"><a href="http://en.wikipedia.org/wiki/The_Avengers_(2012_film)">The Avengers</a></td>
<td>3</td>
<td>2012</td>
<td>92%</td>
<td>$1.5B</td>
</tr>
<tr>
</tbody>
</table>