Design discussion

Navigability

Of course, organisation of the pages is strongly linked to the content of the site. There are four categories in this site, plus the homepage. Each category contains two to four pages, except the pictures category which contains three pages which themselves are linked to sixteen individual pages (the photos).

I’ve defined two types of navigability. The first which I could call the “full tour” as if it is followed, the user see every pages. This is possible because of the small number of pages. Here is the navigation chart.

Website navigation chart

The second type of navigability is more random as it allows the user to directly jump to a category he is interested in. For this purpose, any page is linked to the first page of each category, bolder boxes in the navigability chart.

General layout

The following layout is the final result of all the points discussed later in this report.

General layout, used as a template for every pages

Presently, we can see the different ways to navigate in my site. Firstly to jump through sections. I use a traditional left bar navigation which is quite common on the Internet. But, I also use a second way throw a drop-down menu, especially useful for low resolutions when coupled with the “top of the page” link. Then the key to navigate is the “navigation links” which indicates the previous logical page and mostly the next page best to see. By always using the “next page” we can do a full tour of the site.

Title of the site and title of the page answers the different questions “where am I”, “Where can I go”, “What else to do”, etc… Especially, numerated pages indicate to the user where he is in the category, but also that’s there are others pages after the one he’s looking at.

Screen resolution

I’ve decided to use a fixed width design for 800x600 resolution, because it allows more freedom in design compared to variable width (using percentages values) which provide random layout (especially when using pictures inside text).

This resolution is quite low to be compatible with a maximum of configurations (about 95% of internet users use resolutions equals or higher than 800x600, but we have previously seen that our target audience should be under this average). I could design for lowest resolution but they are to limited in terms of place on the screen.

For high resolutions, it perfectly works. For lowest resolution (640x480 and WebTV) : horizontal scrollbar appears but users will naturally scroll to the right of the screen to fully display the text area : once in this configuration the site can be fully consulted without scrolling back to the left thanks to the drop-down menu on the top-right hand corner. In order to improve the user experience in this type of configuration, a “Top of the page” links has been placed at the bottom of each page. When clicked, the page automatically scrolls to the top of the page and the pointer (typically the mouse cursor) is just over the drop-down menu. This system is useful in the case where the user would like to jump to a specific category, meanwhile the classic “next” and “previous” navigation common to all pages still as easily accessible.

Colours

The palette of used colours is limited to three : black, white and pink (more exactly depending of video settings, this third colour can go from bright red to dark pink). This pink colour helps to create a warm, cheerful and welfare atmosphere as in the hippie’s spirit. Moreover, it avoids problems such as reduced sensibility to blue, which comes with age, or disability to differentiate green and red.

Texts are black on white, which is considered as the best combination in terms of contrast.

Links use the pink colour, which provides an efficient difference with the black text. Even with greyscale screens the link colour is enough to differentiate from normal text : pink will be seen as grey, this means lighter than normal text. However in respects of accessibility guidelines, links are not only differentiated by colours but are also in bold and underlined, so that three properties allow to distinguish links from normal text.

These 3 used colours are among the 216 websafe colours palette. However graphical elements like navigation buttons use relief effects, which can look a bit uglier on 8bits systems, while stilling usable.

Fonts used

I use two fonts in this web site. An artistic –but readable- font used to make graphical buttons which don’t need to be installed on the user’s machine; and a sans-serif family font (Verdana, Arial, Helvetica or other depending of the target system) for all texts, links and titles. This last one has been chosen for its high readability.

Additionally, I’ve particularly been attentive that users with deficient sight still be able to increase the size of texts without breaking the all layout. To my knowledge, this feature fully works on Gecko-based browsers (Netscape, Mozilla or Phoenix for example), which are generally browsers people with disabilities use (Opera offers a global zoom function so we don’t have to take care of anything, whilst Internet Explorer offers no support to this kind of people). We can also mention that it can happens that users impose their own Style Sheets (with big fonts, doubled line spacing, special colours,…) instead of the one provided by the web site : in this case it should also correctly be mixed with our design, all the more so that I correctly use standard HTML tags (H1 for title, P for paragraph and so on).

Concerning accessibility, all pages of the site are short –this is almost important in the Biography section-; and when needed text blocks have been cut into small paragraphs.

Interactions & heuristics

Our web site isn’t very interactive with the user. In concrete, we propose a small menu of pages to the user, the user chooses one, and the selected page appears. No forms to feel, no complex action… the feedback to provide is limited and mainly already attended by a web server or the browser (like missing page, download progression, etc…).

However a point to take care are links as it is in fact the only interaction the user have with the system. Firstly, links should be clearly identifiable as links : the user doesn’t have to stroll up the screen to find links. We have seen that our links are identifiable by the colour, the bold style and underlined which is adequate. Instead, left buttons are not necessary identify as links that’s why I put a rollover feedback : pinks buttons become white when the mouse is over. To specify the function of left buttons, I didn’t use icons because for example I don’t see any icon which clearly means “Biography”; text still more explicit.

We can also add that even novice users know how to recognise a link, simply by moving the mouse cursor over the supposed link and then the cursor become a hand. Then come the drop-down menu. As it is a standard component of any graphical user interface, the user should be familiar with him. However, drop-down menus aren’t always used for navigation that’s why I explicitly put the word “— menu –-”.

In terms of accessibility, the primordial point has been to use ALT tags for graphical buttons, and of course to avoid pollution like Flash animations, or tables only used for their coloured borders.

Apprenticeship

Any user interface requires a little time of apprenticeship. However, in the case of a web site, this time must be the shortest possible. We have already seen how colours and heuristics are used for this manner. But to reduce dramatically this time, the constancy of the interface is necessary. Technically, this has been achieved by using Dreamweaver’s template system and a common Style Sheet.

Particularly, I’d like to point a voluntary bad design on the home page. On this page, in general the page the user first sees, a small description of each category is provided. As we could expect, each description contains a direct link to the section in question. But however, this direct link is quite discrete (a small arrow). This is voluntary to force the user, if not already done, to quickly look around the interface and localise the menus, navigation links, titles, etc… The goal is to make the user familiar with the constant interface starting with the first page. Moreover, due to this subtle links, the navigation link “Biography” has a better visibility, which increase chances that the user takes the full tour.

Memory

The subject of the site, “a tribute to Janis Joplin” is specified as the title of pages, and also graphically on the top of each page. This can seems unnecessary, but it is in fact part of accessibility as some people suffer of loss of short memory and sometimes need while reading a page to refresh their memory.

In the same way the subject of each page is stated, just under the title of the site. Furthermore, the number of the current page is indicated as well as the total number of pages in the category (example : “Biography (2/4)”). This permits to situate where we are in the category and also, in principle, where we come from (Biography 1 in our example), and where we should go (Biography 3). This manner is doubled by the navigation links at the bottom of the page which indicates the previous page and the next page of the category (the last page of previous category or the first page of next category when appropriate).

The left buttons menu helps the user to quickly remind what is the content of the site (Biography, Discography, etc…). As buttons use text instead of icons or other, there is no need to learn the meaning of each button.

Moreover, visited links don’t appear pink anymore but grey instead. They still clearly identifiable as links (grey, bold and underlined), while avoiding the user to remember all the pages he has already visited, really useful when the site is visited randomly. At last, constancy of pages also here avoid memory confusion as any link looks like any other one, buttons are always in the same place and same order, etc…

Sounds

To my point of view, a fan site which try to make discover and like a singer still quite incomplete without offering some music extracts. However, this simple point has introduced some difficulties:
 Legal aspect, Janis Joplin records still copyrighted for around forty years in Europe
 Technical aspect, as far as I know, there’s no W3C specification to furnish long sound on web pages
 User aspect, I wanted a user-friendly integration in pages, and to avoid to constrain the user to download and install a large third-party program.

For the first point, there’s no real solution. However, a general tolerance exists for sites promoting artists. It is generally well accepted to offer short extracts (30 seconds in general), low quality and not [easily] downloadable on user hard disk. However in the context of this ICA, the site isn’t accessible by public so this question isn’t so important.

Technically, I had three common solutions:
 Let download mp3 or ogg vorbis files : however this solution isn’t very friendly for novice; they have to save files somewhere on their hard-disk, to manually launch them with a player, if they have one installed… and as we have seen previously, rights owners aren’t fond of this solution
 Integrated Wav files : if this solution is nice, it breaks compatibility with W3C specifications, which is unacceptable. In concrete, Dreamweaver MX uses a Microsoft ActiveX, which of course only works with Internet Explorer/MS-Windows.
 Proprietary solutions like RealAudio, QuickTime or Windows-Media-Audio: this allows the best integration but all are totally closed formats, and all available to a limited number of Operating Systems (RealAudio on MS-Windows/MacOs/Linux x86, QuickTime on MS-Windows and Macintosh only and WMA on MS-Windows and Macintosh). The worst thing is that major part of users will have to download and install these specific software which is firstly a difficult job for novice, and secondly may requires a long download time. Not very user-friendly…

At this point, I thought to more exotic solutions. Macromedia Flash came to my mind as it integrates a sound player, but it presents the same problems as proprietary software : limited Operating System support and not installed on most configurations. Is it necessary to precise that Flash isn’t a W3C recommendation (worse internal format isn’t documented at all) ?

Finally the solution came with Java. According to a study of Carsten Albrecht IT published in April 2002, 99,7% of browsers have Java activated and good news, Java applets can play sounds since the first version in 1996. Moreover, Java applets can be controlled by JavaScript (working on 95,4% of configurations according to the same study), allowing a perfect integration in pages. Java specifications are public and thus implementations exist for all Operating System, the World Wide Web has accepted its use and validated the applet HTML tag. But we must put two flats : first the most popular Java implementation is the Microsoft one (supplied with Internet Explorer 4 and higher), which is only Java 1.1 compliant. The second flat is the consequence of the first : Java 1.1 applets only allows very low quality sound (8000Hz).

So I wrote a small Java 1.1 applet (1KB) and integrated it in my pages. I reach a compatibility with more than 95% of configurations (Java and JavaScript activated), a very friendly interface as one click on the title of a song plays the music, and eventually a second click on the same title stops it. While still conforming to W3C specifications, users don’t have to worry about any technical aspect except for the 0.3% of users who don’t have Java installed or activated, for them a message warns that they need a functional Java. About the quality of the sound, it is correct in our case because records at this time weren’t CD quality; in fact it approaches the quality of diffusion on a MW radio which contributes to the nostalgic effect. Finally the only dark point of the Java solution is that it can make the page heavy to load on old computers like first generation of Pentiums as the Java Virtual Machine must be launched.