Logical structure of the portal webpage

Vlad Atanasiu 2007

Table of content

Goal
Owner's intentions
Architectural principles
Basis of choices
Caveat
Elements
Quicklinks
Visual symbolism
Wording
Layout
Page scanning
Website navigation
Accessibility, conformance, portability
References
Browser portability

goal

The design of the webpage should help users find an answer to the following question in the 2 to 5 seconds after their arrival on the website.
1. Where am I?
2. What do I do here?
3. Where do I go next?

In addition the design should serve the intentions of the website owner in regard to the website:
4. What does the website owner want with it?

owner's intentions

The intentions of the Bernstein website can be expressed in general terms as:
1. inform users about what it offers;
2. guide users to the offers;
3. facilitate the use of the offers.

architectural principles

Given the high number and complexity of the nature and interaction with the resources of this website priority was given in its design to functionality. The problem posed then to the website developer can be seen as finding solutions to the flow management of users through the website.

Rather than putting forward resources on offer, the website's chosen driving principle is that of actions (use cases, expressed by verbs) that users can perform with the available resources (expressed by nouns). For example "Search catalog" or "Map distributions" was preferred to "Catalog" or "Atlas" (being more compact, the later however are used for the quicklinks intended for regular users).

Because "use cases are ruling" there is not an absolute match between them and resources. More usual one resource will be used in different ways and a single use case will function on top of a combination of different resources. For example "search catalog", "discover structures" and "map distributions", all have links to the "statistics" functionality.

A solution to the access to numerous resources was found in the use of a portal page, that introduce them to users by means of summaries. Being a transient place for the user, the fundamental of the portal page itself is considered to be the speed with which he can be ushered to his next click towards a Bernstein resource offer.

A distinction was made between first-time and regular users. The first need to be informed and made decisions, while the later can proceed directly to the resources. At the practical level this was translated in the use of a quicklinks element on the portal page for steering the flow of regular users to the different workspaces. The links serve as "gates".

What is called "movement" of the user on the webpages and through the website consists in ocular movements on the screen and finger movements on the keyboard, mouse or other interface hardware. Gaze and motricity can be influenced by the choice of logical elements to be present on the webpage, their shape-attributes (position, size, color, shape) and wording of textual elements. The choices are explained further down, simplicity being the pursued goal.

Accessibility and software code conformance to standards and browser portability were also part of the architectural design.

basis of choices

The choices were taken on the basis of several factors:
1. analysis of the user demand and resource offer;
2. analysis of implementation options, several being considered;
3. taking in account available user feedback on the present website mock-up;
4. practical experience of the website developer;
5. printed and on-line references (selection given below).

caveat

In absence of psychophysical measurements of users behaviors on the website it is not possible to have an evaluation other than empirical of the effectiveness of the selected design.

Such a measurement would be however relatively easy to perform and would consist in recording and analyzing the ocular movement of a sufficient number of subjects across the webpage given a specific task (e.g.: "After looking at the page for 5 seconds tell what it is about and what it offers").

elements

1. Website description / says what the website is about, what it is not and to who it belongs
2. Resources descriptions / abstracts of the use cases allowed by the resources
3. Quicklinks to the resources /
4. Title, logo, image /
5. Website tools / Contact, credits, website language choices, search, quicklinks description

quicklinks

The quicklinks size is determined by the total number of hits on a specific quicklink. The more people are visiting the linked page the more prominent the link to it will become. Not popular pages are fading in the typographical background. This adaptive visualization and navigation technique is called a 'link cloud'.

There are three operation modi for the cloud:
1. the "all time" popularity is based on the number of hits per link since recordings began;
2. the "trend" modus is based on the last 3 or 6 month hits per link so as to adapt to long-term changes in interest of the users;
3. the "individual" modus depends on the preferences of a particular user, so the website's link cloud will look different to people that use it in different ways.

A digital link cloud is like fruits and vegetable on a market table: those that sell well are in front, but when the merchant is seeing a regular customer he offers him something particular to his tastes. And if he thinks he has some really juicy yet exotic fruit, the merchant will make them as much as prominent he can, even yell advertising it, in order to sell it.

visual symbolism

The role of a website cover photo is to attract people to the content and anchor the website in their mind. It also provides tension of graphical order by contrasting photorealistic texture to uniform surfaces of drawings (logo) and script (titles, text blocks).

The Bernstein logo is an abstraction of a paper mould. The font is "Eurostile", designed by the Italian Aldo Novarese (1920-1995).

The cover photo of the version 1 portal page shows different aspects of the activity involved in digital paper studies: the white Austrian medieval manuscript page represents a historical document, the blue Russia-made, Persia-used paper structure stands for the reproduction stage, the green Fourier transform matrix shows an image processing method and the red image of the Intel Pentium microchip symbolize the integration of digital resources.

The version 2 photo explains visualy the name and title of the project, something I observed most people ask about when first hearing about Bernstein (no, not the musician...). It shows a bespectacled individual, presumably a scientists, holding a paper in front of him and gazing evaluatingly at it and it's watermark. He is performing the same gesture as anybody on a shore finding a bernstein and looking at it towards the sun. Inside one is discovering an insect, the other a watermark. Both are looking at pieces of ancient history frozen in time.

wording

The wording of the resources, use cases and titles is - as much as it was possible - the result of the following process. First, a precise technical term was selected, say "quantitative history" or "geographical information system". Then, a metaphorical variant, in a laypersons language, was conceived: "discover structures" and "atlas". It is intended to achieve clarity and memorization.

In addition to naming resources, matching use case names were also found. For example the exhibition, catalog and other papers considered to be one of the three classes of the dissemination resources, are refered to as a resource by the noun "Learning" and as a use case by the verb "Learn".

layout

The structure of the layout has the website's visual identity elements (cover photo, title, logo) in the center and at the top of the page, the quicklinks below, the description of the nature of the website at its right, the description of the resources starting at the bottom and the website tools at the beginning and end of the page.

The adjacent diagram shows the location of the different logical elements of the portal page.

page scanning

The intention is to guide the users to the elements of layout in the order of their relevance. For first-time users this would be title > website description > resources description > resource link; while regular users would go directly to the quicklinks.

It is likely that the selected position of these elements on the webpage facilitate such a page scanning: both the title and the quicklinks are close to the initial fixation point supposed to be located in the middle of the screen (in green on the diagram). By their size and shape they also differ from other elements, thus having a potential to attract the gaze. Furthermore, a user reading the website description on the right column scrolls down while reading thus progressively displaying also the available resources description on the left.

website navigation

This diagram is a schematic view of the navigational function of the portal page in the context of the whole website.

acessibility, conformance, portability

1. The portal webpage is based on a color scheme that retains its readability for "color blind" users (circa 8 % of the male world population and 0.5 % of females). For users with "normal" vision examples are given below of how the portal webpage is looking like to a protanope, a deuteranope and a tritanope (courtesy of Vischeck Daltonize).

Normal vision users	Protanope users
Deuteranope users	Tritanope users

2. Users should be able to increase the size of the text. A font size modifier was tested but deemed not adequate (it makes most text elements of the same size regardless of initial size differences). Users can however accede to this functionality through their browser menu. Or, better, they should change the screen resolution.
3. The webpage is printer friendly. (In the TWiki however there is for this a special link on the toolbar that removes accessory elements such as the banner image and the left content column.)
4. The website maintains its functionalities and look across web browser types. Portability data for the portal page is given at the bottom of this page.
5. The HTML, CSS and JavaScript of the portal page conforms to common standards of W3C. Test websites for conformity are here (HTML) and here (CSS).

references

interfaces

Debbie Stone, Caroline Jarrett, Mark Woodroffe, Shailey Minocha (2005) - User Interface Design and Evaluation, Morgan Kaufmann, San Francisco.
– Provides a wealth of information on both designing and evaluating computer graphical interfaces.

Stephen Few (2006) - Information Dashboard Design: The Effective Visual Communication of Data, O'Reilly, Sebastopol (CA).
– Written specifically on webpages that have to present a lot of information in a confined space, dashboards for example.

Patricia Gallot-Lavallée (2007) - Internet, donne-moi ce que je veux ! 60 modèles de navigation pour satisfaire vos internautes, Kenazart Strategy Interactive, Paris.
– Navigation types: examples, analysis and ratings of existing webpages.

information display

Edward R. Tufte (2001) - The Visual Display of Quantitative Information, Graphics Press, Cheshire (CT).
– On information visualization (a Bible).

typography

Timothy Samara (2005) - Making and Breaking the Grid: A Graphic Design Layout Workshop, Rockport Publishers, Beverly (MA).
– Helps find consistent structures for positioning logical elements on a webpage.

Robert Bringhurst (2004) - The Elements of Typographic Style, Hartley and Marks Publishers, Vancouver (BC).
– On typesetting (a Bible).

color

*
– Collection of color schemes for the web and print.

Cindy Brewer - ColorBrewer.
– Color schemes specifically selected for representing quantities on digital maps.

Vischeck
– On color accessibility for "color blind" users.

gallery

*
A catalog of websites.

W3C (1999) - Web Content Accessibility Guidelines 1.0

browser portability

Mircrosoft Windows XP:
Mozilla Firefox 2.0.0.8
Internet Exporer 6.0 SP2