A New Navigation Model For TWiki.Org

Summary of past discussions...

• Use tabs or buttons on the top for our main topics of interest - see WebPageAudienceSiteStructure
• Don't use Webs for tabs
• Don't use side bar for navigation - have just site tools like WebChanges in it
• Consider using color codes for different sections
• Use trigger words for links like "contribute" or "get involved"
• Use images instead of just plain text - maybe show some faces as well
• Renaming "web" to "section" is a difficult. We already have two different use cases for "section" in wikis: (1) sectional editing and (2) start-end section in transclusions. "Web space" or "work space" meets the typical use of webs more closely.

Navigation examples

• http://plone.org/
• http://digg.com/
• TWikiOrgHomepageRedesign2007
• http://www.irvingtondevelopment.org
• WebTopBarTest

Contributors: CarloSchulz, ArthurClemens, CrawfordCurrie, KennethLavrsen, SvenDowideit, EricCharikane, MichaelDaum, FranzJosefGigler, KwangErnLiew, SteffenPoulsen

First Round of Design Proposals

About

There's a general agreement, that Arthurs design proposals lead into the rigth direction. Still some concerns about the right colors, how to style the top bar, use tabs or not...

Design decisions

• There are 5 main sections. The menu blocks are images so we can use the Avenir font.
• Main web is not one of the main sections; it is offered as secondary link at the top: "User pages"
• Also Sandbox is a secondary link
• The left bar shows a number of links of the current section. It would be good to have some kind of hierarchical navigation if you are one level deeper in the site. But without having a costly dynamic search. Possibly a fixed menu for a number of main sections could work.
• There is a white content area. The page has a fixed width. That gives visual 'rest', less complexity. Occasionally an image or large table will stick out (not such a problem on developer pages), but we should try to stick to the content width.

-- ArthurClemens - 10 Feb 2008

Tabs or no tabs?

Actually we have no tabs at all in these drafts, they are just large buttons.

If we wanna have tabs we need to visually connect the body with the tab. This works best using one of the following apporaches:

• put a second bar underneath the tab bar which has the same color as the active tab
  • like amazon does it

• use the same color for both, highlighted tab and background
  • as wikipedia does it (same as in my color coding examples)

The highlighted tab and the body must be connected as if they were one, otherwise the tabs loose their power and they become just buttons that look like tabs but do not behave like tabs...

The Question is do we need tabs or are buttons just fine?

-- CarloSchulz - 12 Feb 2008

First Draft

This is a design proposal for a modified pattern skin, demonstrating an overview page as defined in WebPageAudienceSiteStructure.

first draft

-- ArthurClemens - 03 Feb 2008

Reactions:

• Too red, too angry

Second Draft

Less red, and less link underlines:

Second draft

-- ArthurClemens - 03 Feb 2008

Reactions:

• lost a bit of "edge" by removing the red menu bar and leaving the text in red.
• "Choosing for TWiki" is not good English. "Why TWiki?" or "Why choose TWiki?".

Third Draft

Design alternative: red menu bar, blue links:

Third draft

-- ArthurClemens - 03 Feb 2008

Reactions:

• visual appearance
  • lost a bit of "edge" by removing the red menu bar and leaving the text in red.
  • problem with the sponsor links in the sidebar. Either they are too far down the sidebar and the white space above should be fixed. Or put the sponsor links in a horizontal bottom bar.
  • What about the bottom of the page anyway? Are there any special links besides copyright? How about a repeated navigation?
  • more contrast between the highlighted and non-highlighted sections like in draft 2. Just from the colors you can't easily tell in which section you are.

• wording
  • "Choosing for TWiki" is not good English. "Why TWiki?" or "Why choose TWiki?".
  • The new terminology introduced (sections) is interesting and I'm all for it ("hey, it's just namespace ..")
  • renaming "About TWiki" in the tab navi with "Home" and add a "Recent blog postings" section under the "About TWiki" section on the home page?

• navigation
  • have a combined search & jump box as their different purposes is not clear for new users.
  • use notifications, they are very much longed for.
  • Consider color coding - it is much easier to orientate your self in a color coded environment and your pages/sections appear more dynamic.
    • 
    • 
    • 
    • More color codin examples
      • Illustrator
      • After Effects.
      • Museum, Activities
      • Service pages.

• missing content
  • A link to "Extensions" is missing in the "Download" column
  • In the "What is TWiki", is "Our users" about "People using TWiki" or linking to the registered users on twiki.org?
  • What about personas that want to migrate from other wiki engines to TWiki? Where do they click?
  • A link to screenshots and movies somewhere would be great.

Fourth Draft

Another variation with a less distracting top bar:

Fourth Draft

See a test with a color coded background:

Fourth Draft 2

-- ArthurClemens - 09 Feb 2008

Reactions:

• red version with the blue links is better.
• Too washed out. The pages lost its balance.

Fifth Draft

How about adding a line as shown below? It makes it much clear that these serve as tabs, which one we are currently browsing and where else we may be able to go.

Pankaj's Tabs

-- PankajPant - 12 Feb 2008

Reactions:

• Need to visually connect the body with the tab. See "Tabs or no tabs" section...

Sixth Draft

• I tweaked Pankaj idea a bit so that the buttons look more like real tabs
• sponsors at the bottom.

• Amazon-like_tabs_1
• Amazon-like_tabs_2

-- CarloSchulz - 12 Feb 2008

I refactored the topic and added summaries of the over-all discussion and summaries about the draft-discussions. See rev=41 for old version.

-- CarloSchulz - 12 Feb 2008

New Design

The previous design hacked too quickly. This one is more thought out. It is more a design document than a final content plan for the page "About TWiki" - some elements may be missing.

Rounded design

-- ArthurClemens - 19 Feb 2008

Discussion

Aaaah, much better. I like the new colors. I think we could do with a little more image material to illustrate the frontpage in the header position, with secondary pages having a flat header.

• Wait, this is not the front page. This is a secondary page, namely "About TWIki", or the homepage of this section. - AC
• OIC. Well, I think having header art is no must, but an "opportunity" to do something nice and meaningful. Images transport emotions immediately. It makes up a nice interior. I think we need more of that stuff on TWiki.org, even on non-frontpages. - MD

The header (and btw standard twiki) is too ... unfinished ... empty .... how do I say. Maybe the spacing is a bit too tight as well. We could easily have a bit more air there, offering room for a nice headerart, thus drawing in people visually first.

• Most header art is just decoration. I prefer to have a (more) balanced menu bar. -AC
• Hm, people like things to be nicely decorated, i.e. non-techies. - MD

The "Home, Sandbox, User pages, Log in / Register" toolbar somewhat does not align with the horiz "About TWiki, Examples" navigation bar.

• They are meant to right-align to the content (that has a fixed width), but I agree it looks like it is floating.

The horiz navibar is too bold and. I'd consider aligning it with the content area, however that will interfer with the alignment of the logo. This in turn might change anyway given there's some headerart.

• I will try alignment with the content area.

The wording "Implementing TWiki" might be a bit misleading. You want to express a "Using/Deploying TWiki" more than a "Hacking TWiki" itself.

• Yes, "Deploying" might be better wording. Note that all of these labels are open for change in WebPageAudienceSiteStructure.

I like the icons very much.

I like the feedback bubble pointing to a featured success story.

The main columns "What is TWiki? Implementing TWiki Documentation Get TWiki" are not perceived as four but three columns plus some extra column that looks different and does not bottom-align with the others.

• Correct. The 4th column is meant as example triggers that can be used on other pages as well.

I'd still consider any possibility to make the separate Jump and Search boxes just one, that has got the combined functionality.

• Yes, but we don't have it right now. Proposals have been put in GoIsSearch.

Okay, but this approach is much more promissing than the others before.

The font-size of the content area, i.e. that of text outside of lists, ("TWiki is software to create a wiki site with...." is too large.

• That font size is only for the introduction paragraph. It makes the text look less. But there are other ways - I will have a look again.

I'd remove some of the bottom topic actions. For example, backlings is too expensive for TWiki.org.

• Good idea.

There are three "Edit" buttons all over the page: the one using the universal wiki button, and two more in the bottom topic actions. I think we can dispense one.

• We can't remove "Edit raw". We also can't remove an edit link at the bottom because you would need to scroll back to the top to click that universal button. And then the universal button is a part of wiki promotion.

How about the sponsors. Where do you plan to put them?

There is still a tendency to put too much on the page. It is quite crowded actually. It still looks more like a wiki dashboard than a site frontpage. Nothing wrong with dashboards and link-rich pages.

• Because this is not the front page.

There is a visual balance/unbalance in the page with regards to the amount of text and white space that kind of makes a diagonal top-left to bottom right, looking at all elements and their distribution on the page: there is black text in the top-left of the sidebar (the bullet list "* What is TWiki?, * Implementing TWiki) which has got about 10px to the top and to the left. Going right from there to the left on the same height, you only have the tagme widget, then a lot of whitespace and then the edit button. The line containing the tagme widget and the edit button has got lots of white space underneath, before the text content starts, which is good actually. However, the "* What is TWiki?..." bullet list in the sidebar puts more weight on its part. This is paralleled by the accent added by the feature-bubble in the bottom-right. This is not counter balanced with similar elements on the same height on the bottom-left side. While it is good to have the visitor look top-left to bottom right, there is no clear guidance for him to do so. Colors and spacing don't suggest that; these two points don't share commonness. So overall the page is somewhat unbalanced/asymmetric in that respect, imho. Not sure if I was clear.

• Agreed. This is not a final page layout. And this should be done on a page by page basis if we have all the elements.

Just my 2cent.

-- MichaelDaum - 20 Feb 2008

Here are my 2 cents, i actually liked the previous iteration more: nice bright colors, images, all in all more exciting I think. I know it was expressed that red was an evil color, but isn't that just a cliche? Bright colors can also serve the purpose of ligthening things up, transcending their cliche semantics.

Although there is some red in the new design, it goes back to the boring gray corporate look. Perhaps that is what we are after, but it would not necesarilly appeal to me. The previous design says to me 'hey, we're here, we're vibrant, use this!'. The new design is more like 'look, we're rock solid but don't expect anything fancy, we do our job and we do it right'.

-- KoenMartens - 20 Feb 2008

True, the current design has got a low visual impact - nor did the previous have. It still has got a higher quality and is somewhat more professional, yet not as good as it can be. I can't quite subscribe to your associations about the previous designs. I haven't seen vibrations, passion and dynamics yet in all of the current designs, while still expressing "professional and reliable" ... a design which is far from trivial to come up with.

-- MichaelDaum - 20 Feb 2008

Colour Lovers is all we need sometimes. There are no palettes for the current twiki logo colours from my quick search. Someone pick the colours?

-- KwangErnLiew - 20 Feb 2008

Thanks Michael for you elaborate feedback. I've put my answers inline.

-- ArthurClemens - 20 Feb 2008

:)

-- MichaelDaum - 20 Feb 2008

BTW: I love suggestions for artwork, if not for the header than for the content.

-- ArthurClemens - 20 Feb 2008

• Updated with comments MD:
  

-- ArthurClemens - 20 Feb 2008

• Michael's try:
  

-- MichaelDaum - 21 Feb 2008

With a picture now. The idea is that the left bar is meant for navigation, plus the 4 iconic triggers. The other links go to the bottom (which is not finished yet). Also anticipating GoIsSearch.

-- ArthurClemens - 21 Feb 2008

The dark bottom bar is too heave compared to the thin header art. You aren't using enough colours. I can see only two: shades of very light gray-blue (near-by colors with very low saturation) and red (fully saturated). Red is used too often. It is an alarm color, used to put emphasis on certain elements. However, it is all over the page now. Red - used as an alarm color - should be used more rarely to make it work as an alarm. How about considering a more vital color palette with colors of at least one different hue and with more saturation.

The types in the breadcrumbs are too different. I wouldn't use underlines or different font weights. The breadcrumbs are in a too prominent position (right under the logo).

I like the repeated/additional navigation items in the bottom bar! Although there's an alignment problem with the sponsors and the extra navi relative to the content area and the sidebar and the copyright note. Not sure. It doesn't feel right, maybe because spacing is not balanced.

Different text paragraphs seem to fall appart / are spreading too much / are bumpy / too many different fonts, in different positions. Maybe consider removing / reducing the spaces between the three paragraphs. Or try to clear the area under the feature-bubble.

A suggestion: try a header art only above the content area, which is a bit higher, and put the "TWiki is the Wiki for the Enterprise" headline on top of it. Maybe have some special typo work on the central statements on each page with a header art supporting it.

Any comments on the variation I uploaded yesterday?

Just came across this : http://www.rakacreative.com:

-- MichaelDaum - 22 Feb 2008

Actually, all nice sites are quite different in layout from the L-shaped layout we have at twiki. And which is a constraint as long as we use twiki.org as a tool, not just as a communication medium. For instance a high header will become a pain. A right nav bar will not work with multiwidth text content (images, tables) - same goes for a fixed content width. But we can go one step further on the landing pages of each section.

Your design is hard to judge as long as it is this clean. Only with all the content elements you will be able to judge how useful it is. My critique with the blue image is that it takes a lot of space without attributing a meaning. But your idea for a header with a headline makes sense.

-- ArthurClemens - 22 Feb 2008

Another great resource: 10 Principles Of Effective Web Design

-- ArthurClemens - 22 Feb 2008

I disagree a tiny bit about Arthur's design having too much red (though I would actually call it orange). The red is used to call out important categories of information. This is an important aspect of information organization. Used as such it is very effective. The two uses I would change would be the subheads just under the breadcrumbs and the bottom bar items.

I also like the slim header bar. Bigger headers may look pretty, but one quickly tires of them on sites very often used, because you have to do more vertical scrolling to get to the useful content. I do agree that the bottom area is much too heavy in relation to the rest of the page.

Good point about the space between paragraphs. In good information presentation it is always important that items that go together are both visually connected to each other and visually separated from other groups. So text following a head should be closer to the head, but there should be more space between that text and the next head. Running paragraphs that are not indented should have a little space between them to separate them, but it should not be so much that the paragraphs don't read as a continuation.

As far as too many fonts in the running text, probably the bold can just be eliminated to make for easier reading.

I like the clean, organized look of Arthur's work. I realize that much more will likely be fit into the page when it's final, but as a template/grid/skin, I think it provides for great visual organization and easy navigation.

There does need to be a bit more space around the Success Story--especially at the bottom.

-- DavidWolfe - 23 Feb 2008

Another approach: keeping a minimal menu and removing the left bar; instead use content navigation. This way the page starts with the most important content. Site navigation is now in the bottom bar. Obviously the sponsor logos need custom rework to fit on a dark background.

Also with more colors. The brownish link block needs more thought. We can either add imagery or short intro texts for the section, or a summary line for each link.

These are the colors I have used:

-- ArthurClemens - 23 Feb 2008

Very nice I like that last design of yours Arthur. Do you create a new skin for each of your design? What tool do you use for designing your skins? Do you just jump into the CSS and templates code?

-- StephaneLenclud - 24 Feb 2008

A no, this is just Photoshop. Works much faster

-- ArthurClemens - 24 Feb 2008

A second way to utilize the broad page setup with a showcase gallery, not unlike Michaels example of http://www.rakacreative.com.

-- ArthurClemens - 24 Feb 2008

Very good progress! Arthur, you do an excellent job pushing this forward.

Here are my comments based on your most recent rounds.

There's lots of gray and gray blends.

The logos in the bottom bar shouldn't be toned down.

The header/top bar - though it has a horiz gradient - is too "untouched", i.e. its top left white corner.

The normal color of the links in the tab navi are red, while the indicator color (for the current topic) is dark-gray. How about reversing this: red attracts attention while dark-gray doesn't; attention should be generated to indicate the current location/page.

In your pallet you specified to be using a bold blue (the right most one). That's a good choice. However I cant see where it is used in your screenshot.

To make it a really balanced color map, a third color is still missing. According to your current colors (base colors = light gray + shade gray, red + light red, blue + very light blue) the third color would be in the area between yellow and green (with no specific saturation). That would be a great color for example for a h1 foreground, depending on the saturation obviously. You could also decide to use this yellow-greenish in the header art, which is missing imho

I like the design to have no side navi! This split-page (that's how I call it) works out great, giving you clearly separated sections of different backgrounds that each focus the reader on their content, depending on how far you scrolled down. The page currently has got three sections, not counting the header area: (1) TWiki - for Enterprise ... (2) What is TWiki?... (3) Bottom bar. So far so good. I'd add a section zero that has got some more graphics work in it.

The universal edit button is quite hidden. Maybe it should be only visible if you are logged in, but then in a more prominent place in section 1 instead of at the bottom of section 2.

I know people using wikis don't want to scroll down passing some "punchy" graphics. They want to see their content and not some barricade the CMS puts in between which they get bored of soon. Perfectly understandable, but not the point here. The current work on a NewNavigationModelForTWikiDotOrg is part of marketing TWiki.org, its community and partners. It strives to generate more attention and interest in our work, to make people stay longer on the site. It is not so much about tempting them to click on "edit". Wiki edit usability has to step back for a while ... to come back even stronger and better later on

Therefore, let me reiterate: pictures are better in transporting emotions than anything else (even better than sound). We need more emotions / good vibes / freshness / vitality. This is about seconds a visitor decides to stay or go away, forgetting what he has seen.

-- MichaelDaum - 25 Feb 2008

Here is another site that uses a grey-ish dark base color and one additional "feature" color that really kicks out: http://www.ifistanbul.com/en/. See how this color changes in the different sections. Quite nice actually. Well never mind, just food for thought.

-- MichaelDaum - 25 Feb 2008

Very good progress, indeed, but just from the visual perspective I feel like this isn't a step forward. It's too grey, too clean, no action/emotions in it.

But I do like how information is represented, the middle part easily tells you what you can browse for next. The "next showcase" is a really good idea as well.

Unfortunately the bottom bar looks like it's not part of the site and it's content does not make sense for anyone new to TWiki.

And again there's no connection between the content area and the menu links. The fact that the headline "TWiki - for the enterprise" belongs to "About" is quiet easy to miss.

-- CarloSchulz - 26 Feb 2008

Arthur, would you mind attaching the PSD or XCF so I can have a play with the colours and such?

-- KwangErnLiew - 26 Feb 2008

I came across this article today and thought that some of the points it makes are along the same lines as this discussion.

Web Design Best Practices: Home Page Goals

-- DavidWolfe - 28 Feb 2008

OK, so I've picked out some colours.

Depends on how you guys want to portray TWiki in the end. It's by no means definitive, and you can make use of grey shades to blend in too.

Personally I find TWiki would go well with Antidesign or Maddening caravan.

-- KwangErnLiew - 29 Feb 2008

Doesn't have this discussion lost focus? It is about navigation, isn't it?

-- FranzJosefGigler - 29 Feb 2008

I wouldn't discount the use of colours when designing the layout of the website. Unless we agree to use the same default ones, but I think most would agree that it's a bit stale.

User interface/experience comes with colours too...not just navigation. If it's not true, I don't see why PatternSkin? had the new facelift nor any of the above. Am just trying to play a small part in this. Like it or not, UI/UE needs to take colours into account.

-- KwangErnLiew - 29 Feb 2008

Colors play an importan role in navigation, and they can lead the user to focus on a specific part. Even if the navigation is perfect from a cognoscitive point of view, if the wrong colors are used the effect will be lost. Anyway, I understand Franz concern... By reading this page I still don't know which is the new navigation model for TWiki.org. I would like to see a diagram, mind map or whatever showing the different "knowledge areas", how they are related, how will the be navigated, which are the hub nodes, etc,etc...

-- RafaelAlvarez - 03 Mar 2008

The site structure is layed out in WebPageAudienceSiteStructure.

Yes, we need to reorganize these topics.

-- ArthurClemens - 03 Mar 2008

Navigation Rulez:: please have a look at this article on SmashingMagazine? http://www.smashingmagazine.com/2008/02/26/navigation-menus-trends-and-examples/

-- MichaelDaum - 03 Apr 2008

brilliant artricle, thanks Micha

-- CarloSchulz - 03 Apr 2008

one navigation issue I have found a problem with in TWiki; I believe most developers in Code follow topics in TWiki.org by following WebChanges which reflects recent topic changes, but not topic viewes. In other words developers are only viewing topics which are incomplete or in some way incorrect which have a lot of comments added but when somebody creates a topic that is both complete and profound, nothing more should be said on the topic. if nobody says anything on the topic it doesn't appear on webchanges as often therefor it never gets any views. Seems almost sad to me, topics, as they approach perfection approach also obscurity from WebChanges and therefor the public eye. INFO modules like "Hot Topics" can go a long way to help such a thing but I don't think a top 10 list is good enough, I would like to see how [most] all topics stack up against each other just as WebChanges shows top 50, 100, 500, all recent changes.

-- TravisBarker - 03 Apr 2008

on the other end of that spectrum we could find out what topics exist that have not been viewed since their creation. which might go a long way to help people decide what information to refactor/delete

-- TravisBarker - 03 Apr 2008