Hp’s concept for information on the net

What I did first: I started with creating templates with all useful HTML-Tags by reading the manual of Stefan Münz (German) and copying the example-tags to my template.

In Staf10 I created two html pages with pictures in it, to see how it works. I made also a framed version of this pages.

Before I start to invest much time in creating my information pages, I laid out the different metaphoric approaches. I found the following:

• Book
• file (card stack)
• bulletin board
• table or cube
• mind map
• virtual locations (real world metaphor).

The Book

All information is compiled in one file. If this file is going to be to large, it will be broken into sections. To help the reader, you can put in the begin of each sections all the titles of the sections that precede and at the end all the titles of the sections that follow. Then you get something like in the outline view of MS Word. You can add a table of contents and a alphabetic list of key words.

Advantages: well known, easy to maintain as long as you either plan your sections well from the very beginning or keep all information in one file.

Disadvantage: In document navigation by arrows (like in the TECFA internal home page file) break the metaphor of the book. Therefore they confuse the naïf reader. Large files my load slowly.

Example: This booklet is a example of a the book approach. By using very small pages, navigation seams quiet natural.

The File

A HyperCard approach. You break down the information in very small units. They should fit on a area of 500 to 400 pixels. One could create larger cards, but then readers with small screens find it inconvenient. Also you brake the card-file metaphor. In real world you also file just one idea or short note on a card or post-it note. The rest of the screen you need for a list of the cards (to the left) and for the navigation controls (at the bottom). If the number of cards is limited to less then about 21 you can also put the list of the cards in a table in top of the stack (as if this would be tab controls). Then you get a displayable area of about 620 times 400 pixels.

One can add list views of summary information.

Advantage: Easy to maintain. Compatible to navigation controls. Loads fast.

Disadvantage: Limitation to display size. Inconvenient for printing. Needs frames, when items in stack exceed 21 (three lines of seven items).

Example: See the stack about Readability. It’s still under construction but technically it works.

Bulletin board

In this approach we break down the information in sections. Every section is put in a colon of the bulletin board. Otherwise it is similar to the book. Navigation Controls let the user go to the column to the right or to the left, he may go up and down to the next sub-section. We emphasise the bulletin board approach by naming the columns (sections) A, B, C, D Ö and the sub-section 1, 2, 3, 4 Ö. On a overview page we show this bulletin board table as a whole with the headers and the titles inside the table.

You may colour some text areas of the bulletin board to distinguish different information on the same board.

You can use a three column table to let it appear that white paper sheets are sticked on coloured bulletins boards. You may use small graphics with pins on it to emphasise the metaphor.

Advantages: Quiet easy to maintain. Compatible to communication controls. Any break down in sections or subsections is compatible to the metaphor. You can even put subjects that are not related to each other on the bulletin board, without breaking the metaphor.

Disadvantages: none.

Table and cube

This is similar to the bulletin board. Only you define axes x, y, z that make sense. For instance: Staf11, Staf12, Staf13, Ö, or exercises, links, comments, others. The reader is to inform permanently where in the cube or table he is. Controls let him move in any direction or to the overview page of the cube or table. One could also make a frame version of this metaphor where the axes are x in top, y to the left and z at the bottom like in spread sheet applications.

Advantages: Easy to maintain when planned carefully. Compatible to navigation controls.

Disadvantages: Axes must make sense and all cells must contain information: At least the information, that they do not hold information.

Mind map or brunching tree approach

In this approach you must have a mind map as starting page (overview page). You may draw it by hand and scan it in. You may also bring it in the form of a directory tree, but this brakes the metaphor of a tree that brunches in all directions.

At the beginning of each html-file you bring a summary of all the brunching from the root to the place where you are. So the user can jump to all brunches back to the root and to all brunches that directly brunch of anywhere from his brunch. The user must really have the some view as a bird that sits in the tree and sees all the brunches next to it.

Advantages: I expect a very good overviews and no feeling of lost in the cyberspace.

Disadvantages: Rather difficult to maintain: Changes in one title or brunching affect a lot of related files. Using the mind map as clickable area is quiet difficult to set up.

Real World metaphor

With pictures (photographic or stylistic) of real world situation you let the user click on places (houses, information tables) or people to retrieve information from them. You move like in a adventury game or zoom in and out to move between places.

Advantages: Very intuitive. Very flexible.

Disadvantages: A lot of design has to be done. The user needs some initial knowledge of the places of the kind that you show.

This approach is useful for online shopping or for cities. If I would use it I would show my office: Book-shelves would lead to information in the net usually found in books, the PC would be used to search the net, files in the desk would hold things I have done, my desk would show my diary and the work in progress, an inbox lets one leave a message or a note.

Example: Come and visit my office.

Conclusion

I decided to start with the real world metaphor (office) as home page. I use the other metaphors as part of this office. In an office you find books, card stacks, bulletin boards, tables or mind maps.