TWiki.org Homepage Redesign 2007

Resources and starting points

On twiki.org

• WebPageAudience - starting point for creation of user types and Personas
• CustomerFocusedTWikiOrg
• OneThousandDownloadsPerDay

On the web

• Lifestyles of the Link-Rich Home Pages - By Jared M. Spool
• The right trigger words - By Jared M. Spool
• Top Ten Guidelines for Homepage Usability - By Jakob Nielsen

Other wikis

• How do other wiki homepages look like? How do they "sell" their wiki?"

Differences between commercial and open source wiki homepages:

• Commercial wikis...
  • do not use their wiki to create their homepage
  • use images to make their homepages look prettier
  • offet tours/demos/videos
  • have more emotional homepages

• Open Source wikis...
  • use their wiki to create their hoempage
  • rarely use images
  • rarely offer tours/demos/videos

Drafts

I did some research on homepages that have to cater for a large and diverse user groups. The most inspiring and helpfull ones came from Jared M. Spool. This Draft is based upon his recommendations and the old but still valuable guidlines from Jakob Nielsen.

-- Contributors: PeterThoeny, CarloSchulz - 17 Sep 2007

Discussion

This first homepage draft is great! Only thing: I'd harmonize the colorset look of the images above each column. They are all quite different...

-- MichaelDaum - 18 Sep 2007

Yep, they are. I did this very quickly with powerpoint

-- CarloSchulz - 18 Sep 2007

Do you think 5 columns in a row are enuf

-- MichaelDaum - 18 Sep 2007

Good question. With a lower font-size we could aim for even more :-).

This design is pretty much inspired by Jareds Spools article and the http://staples.com site.

-- CarloSchulz - 18 Sep 2007

I'd make it two rows of 3 cols, no sidebar. That way you get room for a nice login and give the recent news "front-let" the same weight as the others. For example, have a look at this.

-- MichaelDaum - 18 Sep 2007

But for what do we need a login on the homepage?

-- CarloSchulz - 18 Sep 2007

I like it!

We use Ruby on Rails for some internal projects and this layout has kind of the same "get exited / get started / get better / get involved"-feel to it as their homepage does (http://rubyonrails.org/). Here less direct language is used, but the story is the same.

Rod often mentions the ubuntu homepage as a great example of a homepage that works - and again it is an example of the same story (http://www.ubuntu.com/).

- I am very thankful that you are throwing yourself at this, keep up the great work!

-- SteffenPoulsen - 18 Sep 2007

The number of links is a bit overwhelming for a constantly information-overloaded person such as myself, but given that they are organised in columns i'll probably survive

-- KoenMartens - 18 Sep 2007

True, lots of links. But this article (http://www.uie.com/articles/linkrich_home_pages/) made me change my mind when it comes to homepages like twiki.org that have thousands of pages in the background.

The idea are..

• Cluster information by use case. The columns represent information clusters aimed at specific target groups. Based upon this you can easily identify which cluster is the one you are interested in. The others will simply get ignored.
• Add transparency. Let the users know what's behind the frontpage.

-- CarloSchulz - 18 Sep 2007

Thanks for sharing. You see the number of reactions just by showing 1 mockup, that is cool.

My couple of cents though. This design is practical, a bit too practical perhaps. It will help people that know twiki for sure, but it won't give you an introduction, it won't tease you in, and it lacks a central message.

Nothing against the first draft, it is meant for discussion. But try to hold it against the target groups and see what goals it meets for the technical journalist, the business analyst, the Perl programmer or the grass roots developer who is looking for a collaboration tool.

It is very tempting to start right away. I have found that you will get to a better design if you first understand (and feel) the people of your audience.

When we work for clients we often use a 2 direction approach: 1 is analytical, setting the boundaries, getting a grasp on targets and audiences. The other is more emotional, sensing, trying to get the mood and feel. So it is quite productive to have 2 movements going on.

-- ArthurClemens - 18 Sep 2007

Just finished this article. I see their point and how it could fit wikis and twiki.org. Infact, most wikis are damn link-rich on their entrypage - and ugly.

I don't like ubuntu's homepage: it is a puzzle of lose items. The user's eye isn't guided to the main content area. Or: areas of content arent clearly separated.

While the the http://rubyonrails.org page is an ok product page, it takes me 2 extra clicks to get to http://wiki.rubyonrails.org/rails, which is similar in concept to the first draft of Carlo ... but much more faceless and washed out.

Have a look at Michigan State University College of Law: interesting colorset, great horizontal navigation bar, a 3 cols frontpage that changes to a 2cols on subsidiary pages, sidebar navigation right, enough space for the content to breath.

Or take http://www.joomla.org/. However, very bloggish, this too is much better than those of ubuntu or Ruby on Rails. It communicates a vibrating community, and does well on promoting their product.

• If we can agree on the story bit, with our capacity layout and design can probably be solved better than in the examples :-). I must admit MSU/Joomla are not inspiring to me at all, in my view they are way too boring / traditional / formalistic. I realize that some Personas might prefer this type of first impression, but they work the wrong way for me. -- SteffenPoulsen - 19 Sep 2007

-- MichaelDaum - 18 Sep 2007

@Micheal: Cool links, I really like horizontal navigation bars. In this context a NewNavigationModellForTWikiDotOrg is probably worth a discussion.

@Arthur: Interesting approach. Sounds quiet time consuming, though. Have you already started?

-- CarloSchulz - 18 Sep 2007

Time consuming - so is programming

But that is the only way if you want to create a site that is unique.

Actually, in a couple of hours one could have the main goals defined.

-- ArthurClemens - 18 Sep 2007

I have read that seeing pictures of people attracts many people. This is often done by adding generic pictures of photo models - which I personally find a bit too obvious. But we could actually add a picture of the community instead of a graphic for the TWiki Community. We have the great picture from Rome. The Codev topics with that picture really signals a positive community spirit. The page almost says "Welcome".

-- KennethLavrsen - 20 Sep 2007

Hmm, people you said? Wait...

-- CarloSchulz - 20 Sep 2007

Another cool and inspiring link: http://www.twistsystems.co.uk/ See how the layout is separated into several areas, one under the other, each with multiple columns, and how these areas are used.

-- MichaelDaum - 20 Sep 2007

Carlo, the problem with the people photos on the home page is that it makes the community appear too small... while only 11 people are in the photo from Rome, there are far more than 11 people in the TWikiCommunity.

Perhaps a small TWikiApplication that would randomly display a different snapshot of individual TWikiContributors ? Then each of us could choose to upload our own photo ? just an idea ...

But otherwise, I would not use the group photos from Rome, because they seem to under-represent (visually) the size of the true community.

-- KeithHelfrich - 21 Sep 2007

Actually, this was meant as a joke. More to see what Kenneth' idea would look like. I know about the issues using the Rome photos. But the thing with the TWikiApp came to my mind as well

Not sure if I like the yellow but http://www.twistsystems.co.uk/ is definetly somehing to keep in mind, I think such a design could work for for twiki.org as well.

-- CarloSchulz - 21 Sep 2007

Well the first photo "TWiki Rocks" may not really suit the TWiki mission of being an enterprise wiki. But the photo from the Rome where we are lined up is good.

It shows that the community consists of people and it is not important that everybody is there. If they were you could not see them as people.

But I would only have ONE photo. A rotating set of pictures is not an idea.

The idea of photos of people is that human psychology make people attracted to other people. We are social animals. And until now TWiki has had a text only web site with a logo and a few pictograms.

I have personally been very happy to see photos added to TWiki.org after the Rome trip. When I look at them I think of a really good time with other community members. And I am sure people arriving to t.o for the first time will get a good impression of TWiki as a community by seeing who some of us are.

-- KennethLavrsen - 21 Sep 2007

I agree. Faces are important to give it a human touch.

-- MichaelDaum - 24 Sep 2007

Dear all,

I've posted here BlogOnTheFrontPage and Carlo has invited me on this dicussion. I feel concern because thought I'm a new comer to TWiki I'm using it on a project and I feel very confident because TWiki is very powerful under the hood !

That said its home page is everything but attractive there is to many things and one gets quickly lost. As I wrote in my previous post the advocate for an OSS project is the tool itself that's why the OSS project website usually use their own product.

IMHO the community project should not target any audience than the community itself and let any commercial spin off deals the business audience. That is to say let TWiki.net deals with the IT, CEO, and so on and let TWiki.org talking to those who are using the OSS tool and wanted to contribute.

Just to introduce myself, I'm just a power user. I don't know many thing about coding but I don't care looking at the code and try to fixe small things. That sais I'm mainly use http://drupal.org which is a powerful CMS with a recently increasing community. This gives me some element of comparison :

- they regularly talk about the project on their home page, - they use their forum for the community support and put a teaser on the front page

This lead to home page which is always moving. And this the key thing : the ability to demonstrate that a project is alive !

Then we should have a user friendly navigation that is easy to understand : - about us - documentation - download - development

for the main. And this nav bar must be present evrywhere and not only on the home page.

You need to have one unique place for the same thing. For example on TWiki.org there is documentation everywhere, on Codev, TWiki, etc. after one month browsing here I'm still not sure about where to find things !!

And last, don't compare TWiki only with the other wikis around TWiki is much more powerful and can act more like a CMS so have a look at some famous CMS (joomla is mentionned above, I talked about drupal) and also Blog like wordpress with a very clean and soft presentation. Dokuwiki is also worth the look because it's gaining an increasing audience and have some feature that can be compare to TWiki. Have a look at this : http://www.google.fr/trends?q=twiki%2C+dokuwiki%2C+pmwiki%2C+moinmoin&ctab=0&geo=all&date=all&sort=0 Twiki is still on the top but its time for action ...

I was a bit long ..., best regards, Eric

-- EricCharikane - 04 Oct 2007

Thanks for your input. Yes, I believe also that developers are the most important users for twiki.org. At the same time, the site has been very developer centric (not developer friendly per se) for most time. I think that if we cater for non-developers - without being commercial, just clear - we can also win developers.

-- ArthurClemens - 05 Oct 2007

@Arthur, instead of talking of "developers" I would prefer to talk about the community at large. I'm not a developer but I would be happy to be in the TWiki community . I agree with you, developers will come first as end user and stay as developer if they have some programing skill.

@Carlo Thank you for your graphic proposal. Just my 2 cents about changing the look or not. I thing there are 2 possibilities here :
- updating the look a bit (but TWiki 4.2 will do that)
- a full change of the look (this will be time consuming and may not be quickly available)

My proposal here would be to go ahead first with just an update but focus the change on the content of the home page and stick with your 4 menu entries (TWiki, Community Developement, Distrubution) + 1 which should be clearly Documentation and dynamic content on page with some blog news for exemple.

Cheers, Eric

-- EricCharikane - 05 Oct 2007

Eric, send an e-mail to peter.thoeny.public@twikiPLEASENOSPAMPLEASENOSPAM.net or one of the TWikiAdminGroup members. They will be happy to ad you to the TWikiCommunityGroup.

We could also need some help on WebPageAudience. On this topic we created some Personas which shall represent our diverse userbase. The goal is to design our new front page referring to the needs of our WebPageAudience. As a relatively new users your eyes aren't blurred and you might notice things we tend to overlook.

-- CarloSchulz - 05 Oct 2007

By the way, some exemples just found here in TWikiInstallation:

• http://qa.mandriva.com/wiki/
• http://www.tdi-users.org/twiki/bin/view/Integrator/WebHome
• http://chandlerproject.org/wikihome (<- this one as a simple but efficient looking for tis home page and clean organisation)
• http://wiki.tdwg.org/ (<- very nice too, have a look at the home page !)
• http://www.denunciar.org.br/twiki/bin/view/SaferNet/WebHome (a weblog look)
• http://www.twiki.ufba.br/twiki/bin/view/Main/WebHome (<- many webs with different lloking)

Eric

-- EricCharikane - 05 Oct 2007

Some musing:

Actually, having two separate columns for community and developer might not work out in the end as there's too much overlap. There are five columns right now, including the news+webs sidebar I'd remove any sidebar navigation and divide the page in four sections top down, center aligned, 850px width.

First topmost section:

• header art and logo
• user login
• horizontal button navigation: Home, Community, Blog, Getting help

Second most prominent section with three columns, image in each column with text below:

1. TWiki: the open source wiki for the enterprise, the story, screenshots ... learn more about it.
2. Community: meetings, events, blog, mailing lists, webs, development ... join us.
3. Download: stable release, nightly builds, security alerts, plugins, ... get it now.

Third section: I'd put news and featured members/content/interviews here:

• first two columns: latest postings from blog
• third rightmost column: web navi, tag cloud

The fourth bottom section has got a kind of sitemap/weblist again explaining what is there, getting help, sponsor links and impress sort of.

-- MichaelDaum - 05 Oct 2007

I really like this one:

-- CarloSchulz - 28 May 2008

Yes, simple and clear. My concern would be that it does not really tell anything about openoffice (so I am expected to know it) and that no space for news or updates is provided. So it becomes a static splash page.

-- ArthurClemens - 28 May 2008

I don't like the "Search/Change Language/Log In" box. I don't know what to do with "Change Language". It is too prominent wrt to its importance, being more of a "look what I can do" thingy.

The subsequent pages are all quite different from "Home". They all feel like another site. The "News" category has got no sidebar or does not expand to the full width. The "News" page does not highlight the "News" tab. And yes, it needs a "what the heck is open office?". The explanation in the slogan "free and open productivity suite" does not suffice. It even opens another question: "productivity suite".

While I like the 5 task-oriented main categories, the "I want to do more with my OpenOffice.org" is only understandable if you read the small prints underneath.

-- MichaelDaum - 28 May 2008

"While I like the 5 task-oriented main categories"

That's what I mean. I visited the page, saw my options picked one and got what I wanted.

It's not about the rest of the page which sure is questionable...

-- CarloSchulz - 28 May 2008