Multi-dimensional web design

If the user only tells that she likes the design, it is not good enough. If she tells that she enjoys learning or working with it, then it is good.

The best design is the one not noticed by the user. It is not a goal in itself, but only a tool to make it possible for the user to enjoy learning or working.

The scope of interface design

The structure of web pages or screens is a way of expression for the designer, in precisely the same manner as words are for a writer.

At the same time, the structure shall make it as easy as possible for a user to find the information needed in order to:

Multi-dimensional structures make it easier for the designer to work with her expressions, and easier for the user to find what he needs.

Use of a web site, multimedia or application

Different users need different information at different times, and sometimes the user does not even know what he needs. He may know that he is going to carry out a particular task, but have no idea about the information needed for doing it.

Four different situations of use can be identified:

Browsing for entertainment can be similar to each of the other situations of use: The user may look for introductory or anecdotal knowledge or she may out of curiosity look for information on how to do a specific task.

In addition, the reader’s behavior depends not only on the specific situation of use. It depends also on how closely his attention is focused on the navigation through web pages or screens.

When the user’s attention is not focused on the navigation, it is done as an automatic process [9]. The user reacts to keywords, which ‘pop out’ at her [4], whereas the user cannot react properly on combinations of two or more words [10].

Such inattentive use is very common [9], and it means that the user’s ability to think about the navigation of the web pages or screens often is much more limited than expected by designers.

In contrast, if the user can orient herself in a web sit or another application by using the automatic processes learned by navigating physical space, other web pages or applications, she can navigate fast and with little effort.

Present structures of web sites

There has been some discussion about the width versus depth of web structures and applications.

Participants in the discussion often refer to G.A. Miller (reported from Eyseneck and Keane [2]). He found in 1957 that the span of immediate memory was seven plus or minus two ‘chunks’. Later Simon [8] found that the limit was even lower, it was on average only possible to hold about 5 separate words or one 6-word sentence in the immediate memory at the same time.

However, I found that 14 randomly selected home pages on the Internet on average showed 22 links on one screen. The maximum number of links is obviously not given by Simon’s [8] figures, but by the number of links, which can be shown in a readable manner at the same time on the screen.

If a web site shall accommodate less than 25 web pages, it can quite easily be made with a link directly from the main page to each of the pages below.

Most web sites are structured as a mixture of hierarchical and non-hierarchical links. In most cases, each cluster of web pages is grouped in a hierarchical structure with a number of non-hierarchical links in that structure. The clusters of web pages may then sometimes be part of a larger hierarchical structure or only connected by non-hierarchical links.

Mohageg [6] concludes that a hierarchical structure in general is optimal, when the development costs are taken into account. However, McDonald and Stevenson [5] find that Mohageg [6] underestimates the value of adding a number of non-hierarchical link to a hierarchical structure, and they conclude that the user experience less disorientation with such a structure, than with a non-linear or a purely hierarchical structure.

However, neither Mohageg [6] nor McDonald and Stevenson [5] address what might be the largest problem with present hierarchical structures: It is often impossible to make one structure which fits different groups of users and situations of use. It is therefore necessary to make compromises between different user requirements, and such compromises are difficult and reduce the usability.

As an alternative to the hierarchical structure web pages may be organized in a database with appropriate search tools. However, databases and search tools are merely means for implementing a structure, they do not in themselves solve any structural problems.

When using a database and search tools, the result of a search is normally presented as a list with the web pages in an arbitrary order and without any introduction to their use.

The result is similar to a book with the text written on loose cards, which may be found in an arbitrary order.

Therefore, when using a database or a search tool, it is still necessary to design a suitable structure for the web site. The only difference is that the structure is not implemented by defining links, but by adding suitable keywords for searches to each page.

Imagining and describing the structure

During design, editing and reviews of a web site or application, it is necessary to understand and get an overview of the structure.

That aspect of usability is often ignored: The designer and reviewers may waste time and make the wrong decisions if they do not understand the structure of the web site or application they are working on.

There are a number of good tools for describing data structures, for instance object oriented methods, but they bear little resemblance to the concepts normally used by human beings for structuring their knowledge.

A common method for web design is to use a map of all the web pages or screens and the links between them. However, when such a map covers more than about 30 different web pages or screens, it becomes difficult to use. As one example, Sano [7] shows in his book ‘Large-scale web sites’ never more than 24 separate web pages on one drawing. Another example is shown in Figure 1.

What is needed is a mean of describing the structure of a web site, which fits the ways humans normally structure and use their knowledge.

Figure 1: Map showing all pages of a hierarchical web site with 45 web pages. The abundance of details and lack of higher level structural elements make such a drawing difficult to use, even when no non-hierarchical links are used.

Principles of multi-dimensional structures

I have solved some of the problems by using a multidimensional structure, where the different hierarchies are structured in a matrix, creating in principle a three or higher dimensional structure.

Such a structure makes it possible to provide more than one entry point to each piece of information, making it possible to provide separate sets of entrances for different groups of users and for different situations of use.

Elements used for structuring web pages or applications

A web site or application without any structuring elements can best be compared to a city where all the houses are named, but not numbered, and where no streets are named.

In that case navigation is a problem, and some sort of meta-structure is needed, similar to the use of streets and areas in a city as structuring elements when navigating in it.

McDonald and Stevenson [5] identify one of the requirements of such a meta-structure. They argue that an overview of the conceptual relationships of the subject matter may be more beneficial than an overview of the structure of the hypertext (web pages) themselves.

Horn [3] offers a tool for describing the conceptual relationships of the subject matter. He describes the use of so-called Hypertrails, and he describes how a Hypertrail for instance may be built around geographical or chronological criteria’s or to cover different projects.

However, the use of Horn’s [3] Hypertrails requires a large amount of skill, and for the typical designer they can therefore serve more as an inspiration than as elements for use during the actual design.

The structuring elements shall fulfill the following requirements:

These requirements are fulfilled by the following structuring elements:

These elements may be combined in different manners: A path or a situation may go across several channels, and a channel may cross another.

Path

When on a path the user may go forward, backward or quit, and the user is clearly shown the way to progress, for instance by an arrow on each web page designated ’next’.

This structure may be used similar to a slide show for giving a first introduction to a topic before the user knows how to navigate, and it may be used for a work task which has to be done in a specific sequence. Paths are similar to the so-called linearized sequences for Hypertrails described by Horn [3], and Sano [7] describes the use of a structure resembling the path for order entry.

Situation

In a situation the user may access the web pages associated with it in any order.

The situation is used for tasks where the user may do his different actions in an arbitrary order, either looking up information or entering it. Even though the user knows which task he shall carry out, he may not know which information he needs to carry it out, or which inputs he shall make while carrying it out. Ideally, the situation shall therefore be a combination of user guide and toolbox.

Channel

In a channel the user may follow several alternative routes when progressing through the material, she may for instance access a particular piece of information either by clicking on icons on a drawing, by selecting them among a number of headlines or by clicking links in a piece of text. In addition, the channel shall have a clear direction and be of limited width: typically not more than three parallel links or ways of movement at any point in it.

The channels are made for browsing or for searching for a particular piece of information: the user can progress similar to reading a book, but without having to pass through all the information. In addition, the direction and limited width of the channel reduce the risk of the user bypassing the piece of information she is looking for.

Implementations

The structuring elements, paths, situations and channels, have been used when designing three web sites. They vary in size from approximately 30 to 111 items (web pages and downloadable documents).

This private web site

I started the work on multi-dimensional web sites, when working on my private web site. It consisted originally of 28 web pages structured by:

Figure 2: Structure of private web site with 22 web pages. The structure is presented to the users as shown. Actually it is a matrix structure with two crossing sets of two channels.

Solution presentation

Figure 3: Structure of solution presentation. Compare with the drawing in figure 1: The two web sites have approximately the same number of pages.

The solution presentation is a customer-oriented description of Ericsson's solutions for access management, for managing part of a telecommunication network. It shall be possible either to get a quick introduction to the benefits of the solution or more detailed information, and it shall be possible for each type of decision maker to focus on his own area of information.

The presentation consists of 44 web pages and 4 download-able items structured by:

The solution presentation is distributed on a CD-ROM.

web based Sales binder

A sales binder shall contain all the information and tools needed by a salesperson for selling a product, for instance descriptions of the advantages and ready-to-use overhead presentations. It is an important internal marketing tool, and shall be attractive and easy to use in order to motivate the salesperson for selling the product.

The web based sales binder describes the same range of products as the Solution presentation. It is designed to give the salesperson fast access to product information, even making it possible to look up specific information while being on the phone with a representative of the customer.

Figure 4: The structure of the Web based sales binder. In order to improve graphical clarity, the channels are shown in a slightly different order than the one presented to the users. In addition, the channel with Materials for download is shown as not crossing the situations. In the web site, the majority of the downloadable documents are part of a situation and one or more channels.

The web based sales binder consists of 94 web pages and 17 download-able items structured by:

The Web based sales binder is placed on Ericsson’s Intranet. For obvious reasons it is not publicly available.

Special design issues

The introduction of a multidimensional structure does not in itself solve all structural problems in web design.

In particular during the design of the Web based sales binder it was necessary to solve a number of specific problems.

Access to download-able documents

The user should have easy access to all down-loadable documents, and she should at the same time have the necessary information, so she could determine the relevance of a document without downloading it.

Figure 5: Links from channel or situation to download-able documents. The links make it possible either to use the guide or to go directly to the download-able documents.

These dual requirements were satisfied as follows:

In a few cases a guide covers material not included in a channel it is linked to. In such a case, it is only possible to access the relevant material directly from the channel. However, all materials covered by the guide are of course always shown in it.

Proper naming of situations and channels

I interviewed a number of users and based the definition of the situations and the material included in them on the interviews.

I then made a first test of the proposed titles for situations and channels. A number of users were asked a number of questions, and they should then decide under which title they would look for the relevant answer.

After the first test I could make a prototype and do a normal usability test.

Navigational aids

The results of Butler et al. [1] indicate that a map is far from the ideal navigational aid. Appropriate road signs pointing in the right directions provide a much more effective orientation. One problem may be that the user in order to use the map has to divide his attention between the map and the task he is carrying out [9].

Therefore, I decided not to tell the users more than necessary about the structure of the web pages. As an example Figure 2 shows how the user can select a web page, either according to topic or type of material, but the figure includes no description of the underlying matrix structure.

All three implementations include a header on each web page, showing the channels or situation it belongs to. These headings are similar to street names: When in a large city you will often describe your position as standing on the corner between two particular streets.

The Solution presentation and the Web based sales binder are made with a left column with links to each of the paths, channels and situations.

The Web based sales binder includes a manually generated index similar to the one used in a book, with entries based on inputs from sales people. A usability test showed that sales people use a number of different terms about the same topics, making it difficult for them to find the proper term to enter in a search tool. The manually generated index solved that problem.

In addition, the web based sales binder includes a list of topics not described in it. A usability test showed that sales people could spend a significant amount of time looking for information, which was not there. Therefore, such a list saves them considerable time.

I considered using colors to designate different areas of the webs, for instance using different colors for different channels or colors graduating from light to darker to indicate to the user how deep she is in the web site.

Sano [7] describes such a support for navigation, and according to him the web pages should be designed as small pieces of one large visual landscape. Such indicators can be perceived without paying particular attention [9], and they may therefore be very effective for counteracting the disorientation felt by the user when he does not know where he is. However, they are costly to implement, and were therefore left out.

Results

The use of the described structuring elements can be divided into three parts:

Design

The Internet is a new media, and design for it is a mixture of creativity and science.

I have found that the design process becomes substantially easier, when using the concepts of paths, situations and channels. They make it possible to work on the structure on an intermediate level, before deciding on the contents of each web page.

However, it is even more important, that a design using paths, situations and channels is easier to communicate and review than a design where all web pages are shown. The result may be less time spent on reviews and better comments made during the reviews.

This means that the development costs when using paths, situations and channels are on the same level as for a conventional hierarchical structure. The use of paths, situations and channels requires approximately twice as many web pages for navigation as the hierarchical structure, but it is easier to design a satisfying structure which means that the total time needed for design and test is comparatively smaller.

The production time for the Solution presentation equals 6.7 hours for each web page, and the production time for the Web based sales binder equals 5.1 hours for each web page. Compared to other web designs, these are low figures.

Finally, I have found that the introduction of situations and channels tends to make decisions about the web structure less emotional. When using a hierarchical structure, it is more tempting to see each item’s level and position as a statement about its importance, and not as part of a design which shall lead to the best possible usability of the web site.

Usability tests and actual use

The following usability tests have been done:

One test of the concepts used to indicate situations and channels in the Web based sales binder, the first usability test of the first prototype and the second approximately two weeks before completion. The first test resulted in some changes in the structuring of documents for download, and the second resulted in particular in the addition of an index and a list of topics, which were not covered by it.

The tests indicate that the two web sites are easy to use for their intended purposes, but it is not possible to determine how much the usability depends on the use of paths, situations and channels.

The Solution presentation has been in use for almost a year, and the Web based sales binder for four months. The reactions are positive, a number of local sales companies has even made direct links to the Web based sales binder from their own web sites, in order to provide a uniform easy access for their staff.

Modifications and maintenance

During the last phase of the development of the Web based sales binder it was necessary to reduce the total budgeted time from 540 to 475 hours (12% reduction).

The structure made it possible to describe the consequences of leaving out different types of materials and to plan the reduction in an orderly fashion (the development was completed within the reduced budget).

It has later been necessary to add information to the Web based sales binder: To include additions to the described products and additional information requested by salespersons.

It has been possible to include such information in an orderly fashion without any changes to the structure, even in cases where the information is of types not quite envisioned when the structure originally was planned.

It appears, that the additions make the Web based sales binder slightly less structured, and more inviting for exploring, whereas the time it takes to find a specific piece of information appears to be unchanged.

Conclusion and discussion

The multi-dimensional structure with paths, situations and channels as structuring elements offer some significant advantages. In addition, it is advantageous if the structure of a web site or application is seen as depending on its subject and purpose, and not as something generally applicable.

The discussion of width versus depth of web sites is today less relevant: As a general rule, current web sites are designed as flat as possible, given the number of links which can be shown on one screen.

The use of a hierarchical structure will often result in compromises, because different users at different times see the subject of a web site or application in different manners or need access to different parts of its contents.

The use of paths, situations and channels makes it possible to offer different users the information they need in each specific situation. The structuring elements make design and review easier, they may improve the designer's ability to express himself through his work, and they can improve the usability of the design.

Paths, situations and channels can also be used when designing multimedia and other large applications with different types of users and a significant number of screens. It is then also necessary to design a consistent structure, which fits different users and different situations of use.

The results from the usability tests are positive. However, no real comparison has been made between the multi-dimensional structure and other possible web structures, for instance hierarchical structures, so the observed differences in usability are not documented.

In contrast, I can already conclude that the maintenance of a multi-dimensional web site is easier than of a hierarchical one. It is comparatively easy to build a multidimensional structure, which can be reduced in scope or gradually expanded to include more information.

References

1. Butler, Darrell L., April L. Acquino, Alicia A. Hissong and Pamela A. Scott. Wayfinding by newcomers in a complex building, in Human Factors 1, 1993.

2. Eyseneck, Michael W. and Mark T. Keane. Cognitive Psychology. Lawrence Erlbaum Associates, 1990.

3. Horn, Robert E: Mapping Hypertext. (The) Lexington Institute, USA, 1989.

4. Kahneman, Daniel and Anne Treisman. Changing views of attention and automaticity, in Varieties of attention, ed. by Raja Parasuraman and D. R. Davies. Academic Press inc., Florida 1984.

5. McDonald, Sharon and Rosemary Stevenson. Effects of Text Structure and prior Knowledge of the Learner on Navigation in Hypertext, in Human Factors 1, 1998.

6. Mohageg, Michael F.. The Influence of Hypertext Linking Structures on the Efficiency of Information Retrieval, in Human Factors 3, 1992.

7. Sano, Darrell. Designing Large-Scale Web Sites. John Wiley and Sons Incorporated, 1996

8. Simon, Herbert A.. How big is a chunk? In Science, vol. 183, 1974.

9. Strom, Georg 1996: Inattentive Use of Electronic Equipment. Ph.D. thesis, 1996 (ordering information).

10. Treisman, Anne M., Marilyn Sykes and Gary Gelade. Selective attention and stimulus integration, in Attention and performance VI, Proceedings of the Sixth International Symposium on Attention and Performance, ed. by Stanislav Dornic. Lawrence Erlbaum Associates, New Jersey 1977.

von der neuen herbst / winter - kollektion 2012 buttero präsentieren wir die hoch oben tanino sneaker.es kommt zur neuen saison in leder und velours - optionen.NIKE AIR ZOOM VOMERO 12auf diese schuhe sehen sie die handwerkliche qualität und all die schönen details, komm mit.NIKE FLYKNIT RACER HERRENwährend die beiden alle leder - versionen sehen fantastisch aus, aber die wildleder hohem sneaker mit pflanzlichen gegerbtes leder der gap ist unser favorit.NIKE ZOOM WINFLO 4alle drei turnschuhe sind jetzt in aktien tres bien.Adidas Yeezy Boost 350 V2levi & # 8217;Nike Air Zoom Elite 9 s auch weiterhin fr die eröffnung seines jngsten flagship - store in paris ber die berhmten champs - elys es.nachdem arbeitete fr die eröffnung mit pedro winter ed banger records und james murphy, sie haben jetzt gemeinsam mit graffiti - knstler shepard fairey zu produzieren und andre eine limited edition trucker jeans und jacken.Basketball Shoesähnlich wie die jacken, die wir gesehen haben,Adidas NMD bereits im vergangenen jahr fr die & # 8216;Nike Air Jordan kunst auf der straße und # 8217;NIKE LUNAREPIC LOW FLYKNIT 2 ausstellung im moca in los angeles, die klassische jeans und jacken von levi & # 8217; s custom stickereien auf den rcken.zum preis von 190 euro (235 dollar) die akten veröffentlichen am 14.Adidas Yeezy 350 Boos juni, die ausschließlich den neuen levi & # 8217; s paris laden.