Tables
Data tables are used to organize data with a logical relationship in grids.
Purpose
A table is great for displaying multiple points of data across a range of items. For example, a list of technology platforms with their product name, capacity, status, cost, etc. would display well as a table.
Accessibility Requirements
There are specific technical requirements for tables to be Section 508 compliant:
Each column or row that is a header, must be labeled the <th> element.
The table must include a <caption> element.
Best Practices
There are 3 simple rules.
Right-aligned numeric columns
Left-aligned text columns
Column names aligned according to column content
Focus
Focus on the most important
Try to position key columns from left to right (this may be the opposite way, based on the region you’re designing for) — this is based on the way we read. Columns on the left will get the most attention. We will check the other columns only if we’re interested in something specific.
The F-Layout relies upon various eye tracking studies for its foundational concept. These scientific studies show that web surfers read the screen in an “F” pattern — seeing the top, upper left corner and left sides of the screen most… only occasionally taking glances towards the right side of the screen. These eye tracking studies argue in favor of placing the most important elements of your site (branding, navigation, call to action) on the left side of the design.You can find out more about F-patterns in this article by Brandon Jones http://webdesign.tutsplus.com
Type
Don’t Use All Caps as it is hard to read
Avoid using Serif fonts as they create additional visual noise
Avoid using bold and italic
Use good fonts only
Avoid Duplication
I see needless duplication very often in UI design. It has big impact on readability as it adds extra items without any value.
Last updated
