A Method for Program Design
IT, Høgskolen i Østfold
Program design > The Steps >Screen
../../common/gfx/prev.gif ../../common/gfx/home.gif ../../common/gfx/next.gif

The Screen

The screen or the program window is the place where it all should come together. We probably have a lot of documents, sketches and text, and the challenge is express all our ideas in an area a few inches across. We will find endless amounts of literature on screen design and user interface design. This literature describes techniques, aesthetics, psychological issues, readability, techniques for attracting attention and a lot of other useful issues. Some of the sources that I find useful are referenced [7] at the end of this article.The purpose of this section is not to summarise or extract essentials from this literature. We will emphasise some elements that is connected to the other techniques presented in this article.

The foundation

Let us look at some of the raw material we should have by now.

The metaphor will provide the most important material for the screen lay out. We have sketches in different forms and we have a vocabulary. We have identified places and roles. The metaphor will give us the general setting and it will give us the words to use in menus and screen texts. The challenge is more than anything else that of reduction. There is usually no point in making illustrations look as natural as possible. We will usually be better off with simple illustrations which focus the important issues. There is a general rule, in literature as well as in program design, that all elements should have a purpose. We discussed earlier the simplification of the metaphor, and this will continue when we want to realise it on the screen. Maybe our colourful drawings will be reduced to some simple lines or even a few text elements.

The market and the activity table will provide the functionality, and to some extent the structure of the functionality. We will be able to identify actions that should be implemented as direct manipulation and we will have a good basis for grouping menus. We will most certainly find that many actions may be doubled, that is we can let the user achieve the same result by different means, for instance a menu and a button and a short-cut key.

The objective should be reflected in the metaphor and the functionality, but we may want to check the decisions we make during screen design directly against the objective.

Stability

The idea of an open market that gives the user great amount of control and freedom in her work must be reflected on the screen design. The design should be open, it should support overview and it should be stable. This means that the layout should not throw the user into sudden, unknown surroundings. All actions that requires special information or detailed functionality should be short trips that brings us directly back to stable, well known surroundings. Usually such special "booths" are realised with modal windows that temporary covers part of the stable, lasting program window.

Surroundings

If we look back in time the natural, and a few decades ago the only, strategy would be to let our program occupy the entire screen. We could then rely on having the users full attention and we could have full control of all details like colours, text etc. Even if we still can do this, it is a strategy that we will apply only in very special programs. The situation has changed in two steps.

The desktop metaphor and the possibilities to run multiple programs simultaneously force us to adapt our design to the surroundings. This emphasise the use of standards wherever possible. Our program must behave like other programs. The argument for stability must be extended beyond the interior of our program.

The Internet has contributed even more to this dependency of the surrounding. Our program may execute as part of a web-page or it may execute parallel to web pages. The idea of grasping the web as a "big computer" adds an extra dimension to our thinking about the visible interface of our program.

The principle of stability is as valid as ever, but the need for adaptability is a an additional requirement. This requirement will be even more important as the concept of a computer will change, and our program should maybe perform, in one way or another, on mobile telephones as well.

Main Architecture

The principle of user control and the urge for stability indicates that some time should be spent on planning the overall architecture of the program window. We should try to identify areas in the window and try to group functions that conceptually belongs together. This is again a reflection of the or structure of the market. The sample at the end of this text may serve as an example of this. The screen is clearly divided in areas that is easily identified, and in turn supports the dialog. The architecture of the screen matches the layout in the market diagram.

The Basket

We introduced that basket as an important, and difficult, part of the market. We tried to use the basket as a metaphor for the accumulation of the learning that take place or the work that is done. This concept should find its place in the screen design, either as an explicit symbolic representation or as an inherent part of the design.

Sample

A Method for Program Design fra Høgskolen i Østfold: http://www.ia.hiof.no/~borres/marketmet/

../../common/gfx/prev.gif ../../common/gfx/home.gif ../../common/gfx/next.gif

Valid XHTML
popup card
Bygget med WXT : 02.jan.2006