Creating Better Typographic Hierarchy
The most overlooked element in interaction design.
Typographic hierarchy is often overlooked in interaction design. However, typography has to be considered from the beginning stages of the process in order to create a successful user flow.
Typographic hierarchy plays a large role in communication, directing a user towards the desired result, and improving user experience. Web apps often have many levels of typographic hierarchy that aren’t clearly differentiated. Each level competes against each other leaving the user overwhelmed and lost.
The breaking news app Inside.com is a great example of how an unclear typographic hierarchy impacts user experience. In the “all updates” feed news stories are shown one after another. Each story contains 7 levels of typographic hierarchy (shown below). The category name (1), headline (2), headline link (3), body copy link (4), body copy (5), website link (6), and post time (7) all compete for the users' attention because they are not clearly differentiated. This ambiguous hierarchy makes each story hard to scan and slows down user interaction.
In order to better differentiate the levels of typographic hierarchy one needs to understand how a user wants to transverse the information. Without doing usability testing I would make the assumption that people first glaze over the headline then read the body copy and if interesting they will click the website link.
I have quickly redesigned the first article to better differentiate the typographic hierarchy. I increased the headline size and placed it outside the body copy, changed the body copy to a mid-grey, dropped the website link below the body copy, and added line-height to increase legibility.
These changes help differentiate typographic hierarchy and subsequently improves user experience.
There is a lot more that could be done from a structural standpoint to make the overall hierarchy more clear. Keep in mind that typography is only one element (although usually the most important) and by re-designing the navigation bar, picture placement, and article arrangement the overall user experience could be improved. We will save that for another day…
