There’s nothing quite like tearing apart your own work,1 and that’s exactly what I did after looking at the usability of kyledreger.com.
Most of the changes I made came from the feedback I’ve gotten from readers and from my own observation of people using the site. Although this design is quite different from the previous version, I feel that I’ve addressed a number of usability issues that make the site more enjoyable to visit.
Layout and Typography Size
One of the problems with the two-column layout I implemented was that it forced me to use a smaller font size for my content in order to keep the overall page width down. However, after watching some of my readers squint while navigating the site, my own fiancee needing her glasses at times, I decided that legibility superseded the need for two columns.
Originally, the base font size was set to 13px. Now the smallest font size you’ll see here is 16px. Although just a 3px difference, I now have little doubt that most readers can comfortably read my content. I also adjusted the font weight and size of several other elements, and the current typography styles are as follows (Note: “em” is the size relative to the base copy):
- Body copy: 16px
- Article headings: 2.5em, bold
- Page titles: 2.5em, normal weight (the lack of bolding allows for visual recognition that you are currently on a page not an article.
- Headers within an article: 1.25em, bold, uppercase, 1px letter spacing
Renaming for Clarity
My original navigation was named like this (navigation text: “page title”):
- Archive: “The Archives”
- Colophon: “Colophon”
- Contact: “Contact”
- RSS Feed: “Syndicate Feeds”
- Twitter Feed: “n/a.” — link to @kyledregercom
This posed several problems. Most of my readers didn’t know that “colophon” is a publishing term for “about this publication.” In addition, I had the link to my Twitter account on both the RSS Feed page and the navigation — did I really need both? Finally, the title of “RSS Feed” was misleading: clicking it wouldn’t take you to the actual feed, rather it presented you with ways to subscribe to the site.
Since clarity was one of my goals for the site, I made the following changes:
- Rename the navigation text for “Colophon” to “About” and make it the first link in the list. Also change the page title to “About This Site” (clear purpose).
- Remove the navigation link pointing to Twitter.
- Rename “RSS Feed” to “Subscribe” and change the page title from “Syndicate Feeds” (too fancy) to “Ways to Subscribe” (simple, actionable).
What is kyledreger.com?
For a while, I tried to get away with the tagline “Written before a live audience” underneath my site title. Although this sounded clever, it was also a lie. I wasn’t really inviting a bunch of people into my dorm room to watch me write, so the saying was, at best, a nostalgic nod to an old quote used by television studios.
However, I still needed some way to let readers know what type of content they could expect and who was writing it. To my embarrassment, nowhere on the site did I say what topics I would be writing about. This left my new readers to infer this on their own, based on my latest few posts.
Still forgoing a tagline, I wrote a brand new introduction to this site and myself on the About page. I styled the text in the form of a dictionary definition, but that was just for fun:
kyledreger.com n. A small webcolumn featuring long-form articles and short commentary on the world of technology, design, and liberal arts. Readers of this site tend to have an interest in new technologies, typography, web design, Apple Inc., and cool apps. All content is written and produced by Kyle Dreger.
The result is a clear message as to what I write about and who I try to write for. It does a 100x better managing reader expectations than the previous tagline, and it positions kyledreger.com as a simple and honest publication.
I found that performing a usability audit on my own site to be very rewarding, and I feel that it leaves kyledreger.com in a better place than when I began. This is a good first step, but I’m always open to hearing your feedback on the changes. Please don’t hesitate to contact me with any questions or comments, and, as always, thanks for reading.
- Thanks for the help, Dr. Schwartz.
—Tuesday, 19 November 2013