forrest-dev mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From Stefano Mazzocchi <stef...@apache.org>
Subject Re: Usability news website
Date Wed, 26 Mar 2003 11:23:03 GMT
Nicola Ken Barozzi wrote:

> I'm still confused though WRT the multiple levels and how to work with 
> them... could you explain a bit on them with examples of when the 
> second-level is selected, the third, fourth, etc?

ok, let us suppose we have a tree like this

  1
  1.1
  1.1.1
  1.1.2
  1.2
  1.3
  2
  2.1
  2.2
  2.3
  2.3.1
  2.3.1.1
  2.3.1.2
  2.3.2
  2.3.2.1
  2.3.2.1.1

when entering the tree, it is shown as

  v 1
    > 1.1
      1.2
      1.3
  v 2
      2.1
      2.2
    > 2.3

this is better than simply

  > 1
  > 2

because it gives enough contextual information for the user to navigate.

The visual codes are:

  1) icons indicate which branches are open, which branches contain 
inside information and which do not

  2) colors/borders/shades indicate the current page.

Possible icons are:

  - triangles (used in macosx aqua and swing metal)
  - +/- signs (used in windows)

All nodes that relate to a page are hyperlinked. The current page is 
*NOT* hyperlinked.

Now, let us suppose that we want to reach section 2.3.2.1.1 We click on 
"2.3" and the tree becomes.

  v 1
    > 1.1
      1.2
      1.3
  v 2
      2.1
      2.2
    v 2.3
      > 2.3.1
      > 2.3.2

then click on '2.3.2' and the tree becomes

  v 1
    > 1.1
      1.2
      1.3
  v 2
      2.1
      2.2
    v 2.3
      > 2.3.1
      v 2.3.2
        > 2.3.2.1

then click on '2.3.2.1' and the tree becomes

  v 1
    > 1.1
      1.2
      1.3
  v 2
      2.1
      2.2
    v 2.3
      > 2.3.1
      v 2.3.2
        v 2.3.2.1
            2.3.2.1.1

Now, suppose that we click on '2.3.1' the tree becomes

  v 1
    > 1.1
      1.2
      1.3
  v 2
      2.1
      2.2
    v 2.3
      v 2.3.1
          2.3.1.1
          2.3.1.2
      > 2.3.2

now, suppose that we click on '1.1' the tree becomes

  v 1
    v 1.1
        1.1.1
        1.1.2
      1.2
      1.3
  v 2
      2.1
      2.2
    > 2.3

This navigation method has several advantages:

1) high-depth navigation is possible and still it's very easy to find 
the way up without having to resort on the damn back button.

2) navigation is kept contextually minimal, this is done to reduce the 
visual occupation cost since we provide visibility only for those nodes 
that we assume can be useful to show.

3) it can handled arbitrarely-complex trees, optimizing visible space.

There are potential optimization for high-depth trees, most notably, 
keeping the depth size fixed to, say, three or four levels. This means 
that only the 3 or 4 levels higher than the current page are shown.

This behavior could be made configurable, as the trimming of node names 
to save space.

> Ok, what I did is to use only two colors for links. Dark blue for 
> not-visited links, and black for visited links, because I reckon that 
> they don't need the attention of the user anymore. Do you have a better 
> suggestion maybe?

I would use two tones of blue. A ligther one for non-visited links (say 
'navy') and a darker one for visited ones. and some highly contract 
color (dark red-ish) for active links.

using black gives the wrong impression since black underlined link gives 
cognitive dissonance to people since they don't know if the text is 
really meant to be underlined or it was a link.

this is where cromatic information (also called 'color keying') really 
does help removing cognitive misconceptions.

>> 3) the section bars are too big. you don't need more than one pixel to 
>> indicate separation. everything else is abusing precious screen space.
> 
> 
> I disagree to some point. I want to keep a visual consistency with the 
> rounded corners, and added them to these bars. The height is the 
> smallest reasonable one IMHO that can be used, remembering that 
> second-level sections have even thinner bars.

You must ask your self if the information you want to convey with those 
rounded corners is important enough for the screen space it consumes.

it's a measure of cognitive cost and it's not an objective metric so 
there is no objective point to make.

I personally believe that those rounded corners aren't worth (visively) 
the price of the space they occupy, but that I'm more and more into 
'down to the bone' visual semantics.

> Not sure here, but there was a meaning for them to be like that.

I'll leave it up to you.

>> 4) I would place the logo buttons on the left but down the very bottom 
>> of the page so that they are visible, but not intrusive.
> 
> 
> IMHO this doesn't change things much from having them at the bottom... 
> they seem ok where they are ATM, where also they usually are on other 
> sites (and where users think they'll find them).

Again, there is no objective reasons for having stuff there or at the 
bottom so there is no reason to argue.

As a sidenote I would say that those colorful bottons are distracting 
where they are and I would like to see them at the bottom, after the 
person has 'scanned' the top of the page for information.

>> 5) I would make the font sizing +/- appear more as buttons to convey 
>> the visual information that they are clickable (this goes along with 
>> #1 but note that this is not a hyperlink so it should not be indicated 
>> with the same visual semantic)
> 
> 
> Yes, you are right. It sucks to have to click on those small 
> non-underlined links.

Yes, mostly because non-underlined text is usually non-clickable.

> I tried underlining them, but it was suboptimal and confusing WRT the 
> us-case of other links, so I used buttons, and they look not bad IMHO.
> 
> I preferred buttons to images for visual consistency with the above 
> search button.

ok. it doesn't really matter *how* you convey the visual information as 
long as you keep coherence and you use the screen space optimally.

>> 6) I would leave a space between the very last paragraph and the 
>> copyright bar. This increases readability of the last paragraph.
> 
> 
> Yes, I just saw it too now when checking for the logo placement. Done :-)
> 
>> 7) the media="print" properties of the CSS has to be tweaked to remove 
>> the logos and to put the published date in the better position.
> 
> 
> When I did the print CSS, I kept the logos on purpose. Maybe I should 
> use the alternate text as text in the top of the page, but how?

In theory, you could match for the attributes and turn them into blocks. 
But I doubt that any browser supports that.

> For the date should it go on the top too?

Should be at the bottom, but again, not sure any browser supports 
vertical floats.

Stefano.


Mime
View raw message