UQI120S2 Human Computer Interaction Designing and building GUIs We made the point that the final product should fit the cognitive makeup of the user. We saw that there are a variety of solutions in terms of ‘look and feel’. Summary So far we have looked at the broad aspects of design, and also the components used by GUI designers (widgets).

This week we focus on a number of aspects: Main GUI elements Icon design Metaphors GUI style guides and toolkits The object oriented approach to GUI design.

As far as the user is concerned, there are 3 aspects which are of interest: The visual appearance - the position and layout of menus and scroll bars, the kind of icons used and the mouse pointer type The behaviour - the way in which it responds to user actions – click, double click, drag, etc. The metaphor - this may be that of a desktop, a keyboard, a video camera, etc. (Question: apart from the standard icons, are there any from other domains that are generally useful?)

. Icon design There are 4 basic kinds of icon: Resemblance (a) – an analogous image is provided Exemplar (b) – a typical class object is represented Symbolic (c) – an abstract representation is given Arbitrary (d) – there is no direct resemblance to the referred object

Metaphors Originally, GUIs were designed for a specific task – the organisation of documents in an office environment. This work was carried out by the Xerox Corporation, based on earlier work (by Alan Kay and Seymour Papert) on the teaching of mathematics to children. However, there are plenty of other analogies, and as technology develops these will increase. Other examples of metaphors are: The paintbrush (interaction objects: brush and canvas The spreadsheet (cursor and cells) The recording studio (sliders and tracks) Note that the interaction device in most cases will be the mouse and / or keyboard.

ISO 1581 standard for interaction objects

Styleguides and toolkits There is a number of different styles of GUI: Open Look, OS/2(Windows), Macintosh, etc. The main problem is that application authors only want to write the code once. If the application is to be ported to a different platform, it should not be necessary to rewrite the code. It is necessary to take a generic approach if we want to write an application for a number of different platforms. Generally, we should make the code as platform-independent as possible. The WWW is a classic example of this platform independence.

Java object model Fortunately, the arrival of the World Wide Web has removed much uncertainty from the GUI building process, for the following reasons: Platform independence (e.g. WWW) Pure object model Provision of Abstract Windowing Toolkit (AWT) class library Seamless interaction with HTML and JavaScript This is very important for application development in the future, as we move away from the restriction of the ‘standard’ widget sets.

Object oriented development In outline, we should use the following stages to ensure a compatible design: 1. Understand and involve users 2. List objects associated with users and workgroups 3. Identify objects which are to be visible at user interface 4. Describe each visible object according to interface metaphor 5. Identify relationships between objects according to interface metaphor 6. Decide how to view each object 7. Sketch out the interface design 8. Test the design and iterate Steps 6, 7, 8.