Comments on: Before/After: Table cleanup http://tworivers.com/blog/archives/74 Thu, 21 Apr 2011 11:55:27 +0000 hourly 1 http://wordpress.org/?v=3.3.2 By: Justin Sinclair http://tworivers.com/blog/archives/74#comment-34 Justin Sinclair Tue, 23 Feb 2010 11:22:36 +0000 http://tworivers.com/blog/?p=74#comment-34 I like your version much better. But, I think it's tough to redesign the table out of context. For example, your visual id for links is the colour blue. But, this isn't necessarily clear. At first glance, I wasn't sure whether "More Copies" was a link or a header for the button actions. My initial though was that the visual id for a link was bold text - like the item name or the top tabs. This would make it not a link. But then I noticed, bold is also used for form labels like "Sort by:" and the ever so helpful error message " Warning: Unable to sort search results" - so my initial mental model breaks down. Also, some other questions I would ask: 1) Are the numbers of the search result important? That is, for a given page does it matter whether you are looking at number 1 or 5, or 23 or 27? I think no. If that's the case you could get rid of the numbers. 2) Is the medium the most important piece of information? Perhaps, and that is what you're suggesting by placing it top left. I was thinking, because it's a repeated glyph (i.e you look at it once to decode and then only glance at it again) that it could be smaller and placed at the start of the item name. Kind of like a doctype icon in a file-system. But this is arguable. 3) Are the three actions at the right of each search result equivalent? That is, are they all equally important? Also, are the outcomes of clicking them similar? Looking at the real site - "Add to my list" is a toggle which involves no page load. Whereas "Request item" takes you to another page (at least for users like me who aren't logged in). If they invoke different sorts of responses, should they then be treated differently visually to hint at this? Anyway, I've gone on for far too long now, and am probably reading way too much into it :-) As I said at the top, I like your design much more than the original. It conveys more information in a smaller space and is easier to scan. So, much improved. I like your version much better. But, I think it’s tough to redesign the table out of context. For example, your visual id for links is the colour blue. But, this isn’t necessarily clear. At first glance, I wasn’t sure whether “More Copies” was a link or a header for the button actions. My initial though was that the visual id for a link was bold text – like the item name or the top tabs. This would make it not a link. But then I noticed, bold is also used for form labels like “Sort by:” and the ever so helpful error message ” Warning: Unable to sort search results” – so my initial mental model breaks down.

Also, some other questions I would ask:
1) Are the numbers of the search result important? That is, for a given page does it matter whether you are looking at number 1 or 5, or 23 or 27? I think no. If that’s the case you could get rid of the numbers.
2) Is the medium the most important piece of information? Perhaps, and that is what you’re suggesting by placing it top left. I was thinking, because it’s a repeated glyph (i.e you look at it once to decode and then only glance at it again) that it could be smaller and placed at the start of the item name. Kind of like a doctype icon in a file-system. But this is arguable.
3) Are the three actions at the right of each search result equivalent? That is, are they all equally important? Also, are the outcomes of clicking them similar? Looking at the real site – “Add to my list” is a toggle which involves no page load. Whereas “Request item” takes you to another page (at least for users like me who aren’t logged in). If they invoke different sorts of responses, should they then be treated differently visually to hint at this?

Anyway, I’ve gone on for far too long now, and am probably reading way too much into it :-) As I said at the top, I like your design much more than the original. It conveys more information in a smaller space and is easier to scan. So, much improved.

]]>