Top bar, right bar and comp variation

[Jorge Ferrer Zarzuela <jferrer ieeesb etsit upm es>]

Hi all,

First of all I'd like to say that you are doing a great job. I really like
the improvement which is being made over the actual web page both visually
and in organization. I have some opinions which could be helpful to the
project. Please take the good out of them, I'm not trying to criticize
anyone's work.

TOP BAR

I'd like to start talking about the top bar. I believe it was agreed on
this list some time ago that the top bar should be kept on every web
related to GNOME to achieve consistency among all. IMHO the top bar shown
in all of the comps but Joakim's is too big for this. That is the reason
why I prefer hims among all the rest.

I also agree with what has been said about showing clearly at which
section (of those shown at the top bar) the user is at. I've tried to
achieve this using a 'tab' metaphor. I believe that tabs are very easy to
understand. We could use just a background color to show a section is
selected, but IMO it wouldn't be so clear for a first time visitor. I've
made a variation of the Joakim's comp top var, using a tab to show that we
are currently in the 'about' section and removing the '|' symbols (so that
we avoid some visual clutering). You can find the comp at:

http://www.jorgeferrer.com/gnome-web/comp-jorge1.png

I believe the result is very clean and any visitor sees quickly which
section he is in, which other sections exist, etc.

We could use tabs with a lighter yellow color for the rest of the sections
in the top bar to show more clearly that they are also sections.

As you can see I've used the original line which goes from left to right
and then down. I've reduced the radius of the corner. I believe that this
line together with the tab metaphor used in the top bar really gives the
page a nice visual look and it also has a functional meaning as it clearly
shows that all the contents of the page are part of the 'about' (or
whatever is selected) section. We could have different color of this
line for the different sections if we want (a very quick example in
http://www.jorgeferrer.com/gnome-db/comp-jorge-devel.png).

RIGHT BAR

I've added the right bar of other comps to Joakim's. Why? Well, I believe
that besides being visualy atractive the bar could have an important
functional meaning such as:

- Showing very up to date information: 'new software' and 'news' are a
good example of this

- Showing the most used/accesed programs, projects, etc..

- Show some concrete information which is particularly important for the
user (this will be posible if we allow some personalization of the web).

ICONS

I agree with Joakim's comp that we shouldn't use icons in the top bar. The
reason is that icons are great when they mean something to the user. When
this happens the icon helps the user find faster what he/she is looking
for. But when you also need a word to describe what the icon means, maybe
it's time to think about its usefulness. There has been a lot of talk
in the gnome-gui-list about when to use icons and when not to use to
which we could refer, but I really believe the top bar and even the left
bar are not places to use icons. At least not a different one for each
item.

Please, don't get me wrong. I'm not saying we shouldn't use icons at all,
just that we should be carefull when using them. In fact I like the icons
shown in the center of the comp. Another example: we could use one
icon beside every news item (the same one for all the items). After
visiting the site twice, the user knows that that icon means 'news'
without any further explanation and we could use the icon to say that
elsewhere without the need of the word news.

Please tell me if you agree with what I've said and  feel free to modify
the comp anyway you think that could be helpful to the project.

See you,
	Jorge
        GNOME-DB webmaster


                    |||
 -------------oOOO--0 0--OOOo----------
|                    U                 |
| Jorge Ferrer Zarzuela                |
| Web: www.jorgeferrer.com             |
| jferrer ieeesb etsit upm es          |
|                                      |
 --------------------------------------