This Case Study has been Archived. It’s content is historically relevant, but some content may be out-dated. View the most recent case studies on the Case Studies page.
Title Formatting
The title of your mobile application should be noticeable and readable but not take away attention from the main content. This case study explores the best practices of title formatting for KP mobile applications. This example comes from the Express Check In component of the KP Mobile application.
Size – 19pt
Color – Blue (#003B71)
Size – 17pt
Color – Black (#000000)
Size – 17pt
Color – Gray (#333333)
The “Original” title is blue in color and using a large 19pt font. The blue color is distracting because it is not a tappable item but it is in the same vicinity as other blue items on the screen are tappable. This causes a conflict in the color language – the user may not know which blue colored items are tappable and which blue colored items are not tappable. The large 19pt font feels crowded in the title space and commands a bit too much attention. It doesn’t need to be that large to accomplish the goal of being readable and noticeable.
In the middle, we have “Iteration 1” which improves on some aspects of this design. Text size is reduced to 17 pt which makes it equal in size to the “Back” navigation item. The title is made black which resolves our color conflict issue. However, the black title color still commands more attention than is necessary for a successful title execution. This issue is addressed in the “Final” image to the right.
The “Final” image on the right utilizes a 17pt font with dark gray #333333 color. This is still readable but does not command as much attention as a black text title. This allows the main screen content to be the focus of attention.
Conclusion
See the “Final” example of Title Formatting below:
Size – 17pt
Color – Gray (#333333)
For application titles MCoE recommends using 17pt font in the #333333 color. We also recommend using descriptive words for your navigation items, such as “Back.”