[WF-Infra] Re: [WF-General] Web site layout / some ideas

HansHäggström hans.haggstrom at helsinki.fi
Sun Oct 14 04:02:07 PDT 2001


At 15:14 2001-10-07, Philippe wrote:
>Hello,
>
>
>1. Layout
>---------
>
>Maybe it's just me, but I think that the current layout of the
>worldforge website is too complicated.
>
>That's why I created a new layout, and I'm asking if it seems easier for
>you.
>
>The new layout is at :
>http://moria.mit.edu:8080/media/top/screenshots/weblayouts/layout04.gif

Looks good.
We need a wide but low logo for WF.  Or we could use the old one,
and move the Project, Games, etc

The Edit Area and Edit Page links are well placed.

I like the status in the left menu.  It should however include the date of 
the last update.
Is it supposed to be a change message about what was updated, or some sort 
of todo/task list
for that page?  Or just what status the page is in after the last update, 
where each update is on its own row?
If the latter, then the update date should be shown too.  Preferably in a 
"12 days ago" format instead of "2001-09-27".
Although the latter is ok if the former is too computationally heavy.



Here's some suggestions of what should be on the front page:

* The WorldForge logo

* An one line explanation of what WF is, as on the old web page:
"The WorldForge Project is developing a complete system for massively 
multiplayer online roleplaying games."

* Link to the project about page, which explains WFs goals, philosophy, and 
background.
http://moria.mit.edu:8080/wf/project/intro/
The page is good at explaining what WF is all about, a very common question.

* Link to the newbie guide

* Link to a screenshot page, with screenshots from the different clients 
and games,
and also from the servers (even if that is just some text on a console).

* A link a download page, that contains a list or links to all our downloads.

* A link the FAQ, when we get it working.

* Perhaps a link to IRC and to the CGI IRC client.

* The 3-5 latest news items with medium or high importance.
* A _more news_ link that leads to the news page (below the news)

* A list of the 3-5 next upcoming events or meetings, when we get the event 
scheduler to work.
(could show a few past meetings too, with meeting logs and summaries).
* A _more events_ link that leads to the events page (below the events)


The links could be presented textually (for example:  "Check out the 
_Introduction to WorldForge_ for a
description of the project,  the _Newbie Guide_ if you would like to join 
us, and the _Screenshots_
page for a look at our achievements"),  or as a bulleted or iconified list 
or as a rectangular table.

I think a list with some text in addition to the link might work 
best.  Icons and text might be nice too.



>Note that some rules/ideas guided me :
>
>- The same layout for every page
>- Some kind of limit on the number of levels (else it's too hard to
>navigate)
>
>- There is room for a last level of navigation, but this should/could be
>avoided

Hmm..  Looking at typical navigation depths, we have
"Systems->Mason->Technology->Attachments->index_html",  for example.
This is the maximum level for Mason, and the level where most documents are.
I think is pretty representative for most medium to large sized products on 
the site
(seems like it should be enough for large products like STAGE too).
Often the last level is just an index_html file in a folder, perhaps with 
some diagram
pictures or other with it, or a single file instead of a folder with an 
index_html.

So we would typically have WebsiteArea->Product->ProductPart->Document
The ProductPart level is not needed for small tools or similar things.

It should of course be possible to have deeper hierarchies too, if needed,
even if it isn't recommended.


The current web site has four top level categories (from 
http://moria.mit.edu:8080/wf/sitemap ):
- Project Info
- Game Systems
- Developer Site
- Downloads

Developer Site has the following categories:
- Content
- Engineering
- systems (this seems to be a link to Game Systems)
- Resources
- Infrastructure

IMHO, one of the more confusing things about the current website is the
division in a newbie/user level and a developer subdirectory.

This also makes all the categories under Developer Site one additional level
deeper, pushing a lot of pages to depth 5 or more.  I think the four categories
under Developer Site should be moved to the top level, and the Developer Site
folder removed.

So the new top level would be:
- Project Info
- Games
- Downloads
- Content
- Engineering
- Resources
- Infrastructure

Seven items.  Certainly near the maximum number of items that are easy to grasp
at the same time, but still manageable I think.  And each item is at the same
conceptual level, which makes it easier to understand than the old site.
It also makes navigation faster, as page loads are time consuming.

It also requires minimal changes to the current website structure,
which has received a lot of thought too, and seems to otherwise be ok.

Also, renaming  Game Systems to Games could also be done.
This is easier to understand, and is also accurate, because every game 
system that we create
will very likely have a 'default' game, that is used for testing and 
developing it, and that is the only
game for the game system until someone else puts together some other game 
using the same framework(?).

I just noticed that you had done this in your design, as renamed Project 
Info to Project.
"Project Info => Project" seems good too.


>- There is room for other goodies such as a site map link, copyright
>infos,...
>- This design is easy to do using tables and css
>- There is a clue in the left navbar that tells you where you are (the
>little blue circle), and where you can go.
>- There is also a breadcrumb (how deep in the hierarchy am I ?)
>
>Note that the left navigation bar would changes itself when you go to
>another subsection.
>
>Note also that it could be easy to have different color themes for each
>top section. For example blue for project, green for games, red for
>developement, gray for downloads...

Hmm..  okay, I like colors, but let's be cautious here.
The site should have a consistent theme, and color branding of the 
different areas
is a good idea, but should be subtle.  For example, changing the color of 
the left navbar.
The links to the different areas at the top should each have as background 
the color used for that area.

We might update the background textures too.

Here's my subjective suggestion for colors:
( The color psychology quotes were taken from: 
http://psychology.about.com/library/weekly/aa031501a.htm )

Some dark, low-saturated colors should be used, with occasional highlights 
of brighter, medium-saturated colors.

- Project Info  - Blue.
Because information traffic signs etc. have a standard blue background.
Also:
"Blue relaxes our nervous system.
   It has a sobering effect on the mind and can cause people to be more 
contemplative,
   which is the opposite reaction as red."
"Blue surroundings, if not too
   dark, increase productivity. Studies show that students score higher, 
weightlifters
   lift heavier weights in blue rooms. People retain more when reading 
information
   written in blue text. "
"Blue is one of the most popular
   colors. To American consumers of both genders, blue is the favorite color."
I think the idea that blue symbolizes information is a strong one.  Also, 
Blue is well liked,
and symbolizes stability, which I think is something that our project is, 
with it's long life relative
to Internet projects in general.


- Games - Cyan
A dark hue between blue and green.
There's no particular reason to associate it with Games, other than that it 
happens to be my favorite color,
and that it fits the overall color scheme.


- Downloads     - Green.
Green signifies acceptance, freedom to go on (green traffic light), and 
speed / travel (used on highway traffic signs, at least here).


- Content       - Yellow
"Yellow, when used in small amount,
   produces sensations of brightness and warmth. It represents playfulness, 
light,
   creativity, warmth and an easygoing attitude toward life. It is as inviting
   as a warm, sunny day. Yellow is like sunlight -- you want it to be there to
   feel good, but you don't want it to be "in your eye". "
The keywords here are creativity, inviting, easygoing, sunny.
As noted, however, it is not good in large amounts, and the shade should be 
picked carefully.
For example, using the dark-yellow windows color as a background color for 
the left
side menu is not a good idea IMO.


- Engineering   - Orange
"Orange is associated with warmth,
   contentment, fruitfulness and wholesomeness. It looks strong and generous. "
"Orange has a declassifying, broad
   appeal. It can be used to indicate that a product is suitable for everyone,
   and can make an expensive product seem more affordable."
Hmm.. Well, strong, content, affordable are good keywords for clients, 
servers, and other tools.


- Resources     - Red.
"[Red] has the effect of stimulating people to make quick decisions and 
increase expectations."
"Brown is the color of earth and wood. It is solid and reliable and helps 
to create a neutral, comfortable
   and open atmosphere. It communicates credibility, solidity, strength and 
maturity."
Red also grabs the attention.  Some dark shade of red should be used, close 
to red-brown.
Credibility and comfort are key attributes here.


- Infrastructure        - Purple
"Purple is the color for royalties.
   It stands for luxury, wealth, and sophistication. It is also the color 
of passion,
   romance and sensitivity. "
Well, our infrastructure certainly is quite sophisticated, and a 'wealthy' 
infrastructure is something to strive for.


Oh no!  I did it again.  Ask me to color a series of items, and you will 
get a rainbow.. :-]



>It's not the most original design, but imho it could be a good starting
>point to rework the current design of the site.
>
>That's for the layout part.
>
>2. News / Todo / Status
>-----------------------
>
>As seen with recents posts of Michael Miyabara, it's hard to see what's
>going on at Worldforge. Even after a few months, I have myself no real
>ideas of the status of each project.
>
>This could be improved with a closer link between the website and the
>projects. Zope makes this quite easy imho.
>
>The idea :
>
>In each important folder, we add some subfolders :
>
>/news
>/todo
>/status

It seems to me that /todo is the same as tasks, and these are much more 
practical
to handle through Request Tracker.

Some way to integrate request tracker entries in a zope page would be great,
then each product (game effort, or client, or serever, etc), could have a 
page with
request tracker entries relevant for that project.

News too, could be automated in some way..



>Each item in those folders is a document (which is equivalent to a
>database field in an rdbms). For example, each news, each status report,
>each thing todo is a document.
>
>Then, in the root folder, we define a method (show_news), that gives a
>link to the last 5 news for example.

Hmm..  Well, it might be nice to be able to browse past news, for example,
or view all news in the whole project, not just the ones on the front page.


>And then on the final page, we'll call those methods that shows the
>latest news for the current section. With zope acquisition, we'll have
>the news on every page, and if specific news for the current section is
>available, it is shown (else you get more generic news form the parrent
>section).
>
>The same goes for todo and status.
>
>The layout reflects this system.
>
>What do you think about all of this ? I hope I didn't upset anyone,
>because this may seems too undertaking: I hope it is'nt, and your
>comments are warmly welcome !

Sorry for being slow to respond; I'm a bit zombified during the week after 
work. :-)


>Philippe


-- 
Hans Häggström (aka zzorn)
http://www.iki.fi/zzorn/
"Share and Enjoy" - Cirius Cybernetics corp. - THHGTTG




More information about the Infra mailing list