Design of Homepages
For a start: A check list with WWW design errors (by Jorn Barger)
Homepages: the best way to welcome your guests?
– The challenge of a new way of communication and information presentation, Version No. 3 (8/2003), first version 3/1995 –
The Worldwide Web (WWW) surely is a milestone on the way to a real Information Superhighway. It consists of a variety of (multimedia) information systems that are grouped on high performance computers distributed all over the world (WWW servers). Each of these information systems and each of its numerous subsystems are entered by way of a contents page, the so-called homepage. The number of these systems and servers is steadily and heavily increasing, nobody can name their number. Practically all of these homepages are designed, produced, maintained, and updated by different persons. So, it is hardly astonishing that most of these homepages look different. To be true, they don’t have to have the same look, but still the way in which the WWW has developed leads to a number of problems:
- Typical functions like going forward/backward, jump back to the homepage etc. are represented in different ways, the traveller on the WWW constantly has to re-orientate. Sometimes special buttons are offered for these functions (and they always look different), sometimes the user has to apply the navigation instruments offered by the browser .
- It is very often that too much prescience is expected of the user, i.e. designers tend to assume that the users are familiar with their work and their approach to presenting information.
- Every individual homepage designer has a different concept of what may or must be part of an information system.
- Some designers overload their system with information they believe to be interesting in one way or another, and often they try to pack the homepage with links to all of these information bits.
- There are too many different concepts of how a link is to be represented / formulated, and what the semantics of links is. The users don’t always know what will happen, if they follow a link. Some standards seem to develop, e.g. if an e-mail address is presented as a hypertext link, clicking on this link will open an e-mail form, or, if a person’s name or the name of an institution is presented as a hypertext link, clicking on this link will open this person’s or institution’s individual homepage etc. .
These problems have a number of consequences:
- It takes time to find one’s way through each individual (sub-) system.
- You are forced to follow links just to see what lies behind them, and more often than not you end up on a garden path.
- Users are left alone if they want to find out something about what knowledge there is in a system and what possibilities there are to move through the system.
- Users don’t always react as a designer expects them to, e.g. if he/she clicks on especially attractive images (icons) which have only the function of being attractive, i.e. which do not serve as links.
- Very often users ‚accidentally‘ come across relevant information, i.e. the paths to relevant information are not found easily.
- The transmission of homepages often takes very long time, because the designers deem it necessary to decorate every ’subcategory‘ with an icon each of which takes a long time to transmit.
Many of these problems can be solved in a simple way by taking resort to known principles and standards of man-machine communication (design of user interfaces, principles of dialog planning, see e.g. DIN 29241, key words ‚task adequateness‘, ’self-describing capability‘, ‚fault tolerance‘, ‚conformity with expectation‘,’controllability‘, ‚learning ease‘, ‚individualizability‘) and of hypertext design (see Hofmann/Simon (1995), Kuhlen (1991), McKnight et al. (1993), Schaub (1992)). For others new solutions have to be found. First of all the following principles might be of some value and must be investigated: (vgl. Apple 1993, Shneiderman 1997a, Yale Style Guide):
- The user always must be sure what to expect: an information retrieval system? a system for associative information gathering? entertainment?
- The system must be well-structured, i.e. receive a clear division into obvious subsystems with expressive link names which do not require trial-and-error navigation, i.e. no ‚let’s try and see what lies behind this cryptic term‘.
- The users need clearly designated means of orientation and navigation. They always need to know or must be able to find out where they are, how they get to specific nodes, which information is available at which node of the network.
- All units of the (sub-)system have to be designed according to the same principles so that the users know what to expect from the individual information units, when they have seen the system homepage.
General rules like these can offer a preliminary orientation for system development; for their concrete realization there are some obstacles for which there is as yet no ideal solution:
- How much explaining text (context)?
- Which is the best path between too much and too little textual information about the links? The link name alone often does not suffice for the orientation about the link content – but too much context takes away space of which there is so little on a homepage and may obscure the useful information.
- How many/few and how big/small icons?
- Without icons information pages look unattractive, too many or too large icons make the handling of a system difficult, especially if it is accessed from afar.
- What is relevant? In fact, what does ‚relevant‘ mean?
- The designers must abstract from their own lines of interest (except on their own personal homepages), every piece of information must have a direct connection with the intention of its parental information system, if this can be defined at all. The designers must always bear in mind the question ‚What is useful for the user?‘.
- What kind of users are to be expected?
- Ideally an information system is tailored for different classes of users or is self-adaptive (user models, see Kobsa/Wahlster (Hrsg., 1989)). This is desirable and especially difficult at the same time in an internet information system where you have more different types of users than in any other information system. This was not the case as long as the WWW was predominantly used by academic and research organizations and hardly by the famous ‚man from the street‘. Today’s systems, however, ought to make a difference between strict/not so strict user guidance, specific / associative information search etc.
- To what extent can information be fractionalized?
- For the HYPERCARD hypertext system the ‚one screen – one information unit‘ principle has been created. It is based on the assumption that ideally one information unit is presented on one screen, as the ’scrolling‘ of a text is supposed to be a handicap for the user. I think this is a restriction which does not do justice to all kinds of information. It is adequate for encyclopedias with ‚handy‘ chunks of knowledge, and this was the purpose for which at least most of the early HYPERCARD applications where developed. It is inadequate e.g. where a flow of argumentation is to be represented which cannot be cut into pieces without becoming incoherent. Moreover, the ‚one screen – one information unit‘ principle is inadequate for the WWW, because it would lead to much more data traffic, for every single information unit is transmitted separately. So, every information unit has to be constructed individually.
- What kind of problems does the medium itself present to the developer/user?
- A specific set of problems results from the medium itself: the hypertext mark-up language (HTML) as the standard for the developer and the HTML browsers as the instruments for the users with which they view the HTML documents. What developers/authors still need is a really adequate editor with WYSIWYG function (‚what you see is what you get‘). On the other hand the developers must be sure that their intentions may not be falsified by different settings of the users‘ browsers (window size, font types etc.). Presently the author has no influence on the users‘ browsers, it is even difficult to anticipate how different browsers present the same HTML document.
The development of the WWW still is in its infancy (for the present status see the webpage of the WWW consortium ( http://www.w3.org/ ) . The Hypertext Mark-Up Language (HTML, presently in its 4th version) is a medium / instrument which – in contradiction to the SGML standard for text processing – has encouraged and advanced the development of the WWW from the beginning, one can even say it has made it possible. We cannot clearly predict the further development, but I tend to say: everything is possible. From today’s point of view one might assume that the following aspects will have some importance for the development of the WWW, aspects which are known from other types of information systems and which are of relevance to the field of information science:
- The WWW is the ideal type of a cosmopolitan communication instrument, i.e. it can become such an instrument, if the problem of the language barrier is solved. On the one hand, English is often used as the ‚lingua franca‘, on the other hand, the travellers on the WWW and especially the authors of WWW documents should not be forced to resign using their own language. Practical instruments must be developed which support the parallel presentation of information in more than one language or which make an automatic (informative) translation possible. The major MT systems are already presented as translational aids on the WWW, e.g. SYSTRAN (http://www.systransoft.com/ ) .
- Automatic Indexing / Information Retrieval
- WAIS (wide area information system) was one of the first approaches to the development of an internet Information Retrieval System which still left much room for development. In the meantime there are numerous tools that may be used in this area, see e.g. the survey by John December ( http://www.december.com/net/tools/index.html ).
- User models
- The ideal case of an information system is a self-adaptive intelligent system which offers the best possible interface to every user. Starting from a simple model which e.g. only makes a distinction between inexperienced and experienced users, different levels of development are possible. First attempts in this area are the personalization and individualization functions: web offerings may be tailored to the personal needs of users, i.e. automatically by offering ’similar‘ sites or by explicitly asking for the user’s requests. Of course, there are commercial interests behind this, but if these functions lead to a better information for the user it cannot be bad. Examples are the search engine „Mein Yahoo“ (http://de.my.yahoo.com/?myHome), the virtual news agency „Paperball“ ( http://paperball.de/ ) and the virtual bookshop“Amazon“ (http://www.amazon.com).
- Apple Computers (1993)
- Drag and drop. Human interface guidelines. September 14, 1993. Cupertino, CA: Apple Computer Inc.
- Apple Human Interface Guidelines
- DIN EN 29241 (1993)
- Ergonomische Anforderungen für Bürotätigkeiten mit Bildschirmgeräten. Berlin: Deutsches Institut für Normung e.V. Teil 10: Grundsätze der Dialoggestaltung.
- Hasebrock, J. (1995)
- Multimedia-Psychologie. Heidelberg et al.: Spektrum
- Jan Eric Hellbusch (2001)
- Kontraste und andere Hürden – über barrierefreies Webdesign. http://aktuell.de.selfhtml.org/artikel/design/barrierefrei/ , 1.12.2002
- M. Herczeg (2002)
- Ergonomiehandbuch zur Gestaltung virtueller Lerneinheiten: http://www.imis.mu-luebeck.de/de/forschung/publikationen.html#2002, 11.10.02
- Hofmann, M.; L: Simon (1995)
- Problemlösung Hypertext. Grundlagen – Entwicklung – Anwendung. Wien: Hanser-Verlag
- Issing, L.J.; P. Klimsa (Hrsg., 2002)
- Information und Lernen mit Multimedia und Internet. Weinheim: Beltz PVU.
- Kobsa, A.; W. Wahlster (Hrsg., 1989)
- User Modelling in Dialog Systems. Berlin et al.: Springer-Verlag
- Kuhlen, R. (1991)
- Hypertext. Ein nicht-lineares Medium zwischen Text und Wissensbank. Berlin et al.: Springer-Verlag
- McKnight, C.; A. Dillon; J. Richardson (Hrsg., 1993)
- Hypertext. A Psychological Perspective. New York et al.: Ellis Horwood
- Schaub, M. (1992)
- Code_x. Multimediales Design. Köln: DuMont
- Schulz, A. (1998)
- Interfacedesign. Die visuelle Gestaltung interaktiver Computeranwendungen. St. Ingbert: Röhrig Universitätsverlag
- Shneiderman, B. (1997a)
- Designing the User Interface. Reading Mass.: Addison-Wesley
- Shneiderman, B. (1997b)
- Designing Information-Abundant Websites: Issues and Recommendations. Human-Computer Interaction Laboratory, Department of Computer Science & Institute for Systems Research, University of Maryland http://www.cs.umd.edu/hcil/members/bshneiderman/ijhcs/ijhcs.html
- Yale Web Style Guide
- Lynch, P.J.; S. Horton (2002): Web Style Guide, ehemals: The Yale Web Style Guide.