Doing what you’re not supposed to…sometimes it works.
We are just finalizing some designs for our upcoming release [about 10 days from now]. We have redesigned a few pages including our “view user” page. I have long had a problem with our “view user” page. We used bold text to describe information like this:
I have never really like the way that looked. The text emphasis in on the bolded words like, “Contact, Email, etc.” It’s just wrong.
We are doing something slightly different in the new release. We are dropping the text size of the bolded words (they are still useful for contextual reference within the page) and leaving the plain text (i.e. the useful content) larger. It looks like this (see the Green box):
Resizing text like this is unconventional and I love it.
P.S. For those of you observant types who look at pictures carefully, this does in fact mean that you are days away from having the ability to make and track credits using FreshBooks. Consider it leaked.
Copyright © 2000-2007
2:00 pm
[...] Breaking Conventions For Better Usability “We are doing something slightly different in the new release. We are dropping the text size of the bolded words (they are still useful for contextual reference within the page) and leaving the plain text (i.e. the useful content) larger. It looks like this (see the Green box)…” [...]
4:00 pm
Another method to lesson the dominance of that bolded text would have been to lighten value of that black(maybe it’s grey).
4:05 pm
Great point Kris.
If you look at that text now (in the screenshot), versus the black text links on this page, you’ll see we have done some of that already…but you make a great point. Thanks for chipping in.
7:03 pm
After I read a book by Edward Tufte a few years ago (on visual reprsentation of data) I never looked at labels in the same way again. Ever since in our web apps we typically make labels smaller and much less prominent than actual data. After all, people in interested in your data, not in labels!
For example, see screenshots on this webpage:
http://www.wildapricot.com/tour1.aspx
So take it further! Grey labels out. You are supposed to do that kind of things, you got it all mixed
4:05 am
Think its a great post and highilight an interesting point, however the use of giving the email adress a blur doesn’t really work does it? Especially with the company name still being so obivous…
4:19 pm
i can read the email address just fine
6:52 pm
Better usability = Good. Updated FreshBooks rolling out in less than 10 days = Priceless!
12:51 pm
Good post! But why don’t take this a little bit further: why would you even have to bolden the labels, and not the data instead?
3:02 am
Sebastian - we thought of/tried that and the page gets confusing that way…the labels give context and I find in skimming a page the bold on the labels gives you the context you need. So, while logically it should work as you outlined, it just does note seem to work as well as it “should”. Thanks for the comment.
9:29 pm
Sebastian & Mike- That is an interesting suggestion. I feel the label boldening in the upper photos is re-enforcing a 2 column grid pattern. Perhaps if one bolds the data portion that grid pattern become unbalanced.