Houston, we have a new story page design! It adds some functionality to the story pages, makes the recommend button easier to use (once you identify it in the social media icon area), and continues the front page sidebar with quick access to the diary lists so you don’t have to return to the front page to find the next story to read. So far, so good.
However, I clicked into my first text-heavy story today and had real difficulty reading the content. The layout is pretty standard: three column with the widest text column in the middle. However, the relative size of the visual elements/content and the separation between those different content areas causes serious confusion to the reader. One of the goals that must be addressed by the design tweaks is LEGIBILITY. So far, that hasn’t really improved.
Here is the new story page design. Story title is easy to see, along with byline and avatar. Once I start to read the story, though, my eye is distracted by the large, aggressive social media buttons and my eye is confused by their proximity to the right rail sidebar, which is sufficiently visually busy to really overwhelm me. I’ve analyzed that in an earlier diary, if anyone is interested in reading it. ;-) In fact, you can visit all my Cranky User Critique diaries: I’m Bloggin’ It!, Visual Hierarchy, To Open Sans or not Open Sans
I actually begin reading the story in the left rail navbar: Add to Blog. Then I begin “As those who read me regularly…” When I get to the end of that line, my eyes slip into the right rail sidebar, realize that isn’t the story, scan to the left rail sidebar, realize that is the story either, and then jump to “rescued cats…”
Easy fix here. Make the story column a bit narrower to increase the separation between the story and the sidebars. Move the social media icons to the left rail sidebar so they don’t compete with the story, the byline and the right rail navigation.
Above is my Perez Hilton version of the biggest areas of confusion in the new design.
As is my wont, I have also done a bit of tweaking of the design so I can show a “fixed” version! As an added bonus, I changed the typeface to VERDANA since I do not believe that Open Sans is the best choice in typefaces for the readership of this site, nor for the design of the site itself.
So here you go! Made the headline smaller. Changed the font to Verdana (in the byline as well), and have slightly less leading (space between lines of type) and slightly more paragraph margin to separate the paragraphs. Made the story column a bit narrower so that the margins separating the story from the sidebars are larger. Put the social media stuff in the left rail sidebar, which helps keep the story cleaner and ALSO helps give definition to the sidebar itself, which was weakly defined with just the pale “Add to Blog” content in the original design.
I guess I just do this for my own amusement. I don’t imagine that the design team are really interested in my suggestions. :-)
PS: I’m not enamored of the new comment design either: those skinny borders are all spidery and not as effective at delineating separate spaces as an actual BACKGROUND COLOR. They are busy and only slightly improved. I’ve already had my say about what I think the comment design needs, so why belabor it? Anyone can see my most awesome Photoshop redesigns as part of the mighty dKOS archive!
UPDATE: a comment redesign. I don’t like the skinny, invisible rule, and I think a subtle background color would do a better job. I also moved the rule, now thicker and darker, to the BOTTOM of the comment to help complete the rectangle. The top is already well delineated by the avatar.