Tools and techniques that support user interface development Design support is needed because designing software is typically very complex and requires

Tools and techniques that support user

interface development

Design support is needed because designing software is typically very complex and requires thorough knowledge.

Due to the limit in human memory capacity, designers cannot store an unlimited amount of information.

Tools and techniques continued

Therefore, Design Support is needed at both the individual task level and the overall process level, e.g. automatic code generation in Dreamweaver.

Many alternatives should ideally be compared with each other and designers should try to pick the best among the alternatives.


Different forms of design support according to Preece et al. (1994):

* Access to previous designs of similar systems.

* Well-tested criteria for evaluating alternatives between designs.

* Regular design reviews with other designers that allow criticism and constructive suggestions.

* Exploring alternatives with envisioning techniques (see end of chapter 4 for an explanation to envisioning design, e.g. more flexible, concrete design).


However, sometimes the formal communication that are established in large organisations due to managerial reasons restrict the involvement of users in the design process. This might also have adverse influence on design support.

The team structure usually has an influence of the kind of support that is available.


Examples of design support:* Paper and pencil techniques

* Computer-based support environments

* Widely applicable guidelines that are generally available.

* Specific rules for particular tasks (in this context, expert systems could provide useful support).

* Corporate Style guides

* Internationally agreed quality standards.


1. Design Guidelines

2. Standards

3. Prototyping

4. Software Support


1. Design Guidelines

Guidelines are usually published in publicly available books, reports and articles and often require a certain amount of interpretation in order to be beneficial for the particular purpose.


1. Design Guidelines continued

There are commercial as well as customised style guides.

A commercial style guide is sold by an organisation/company, e.g. Apple Macintosh interface guidelines. They try to improve consistency of the user interaction design.



A customised style guide is very specific to a particular application within a particular group or company, e.g. it is applicable for taylored applications. It is typically selected by the (often small) group of people who use it. Though very consistent and explicit for the particular application, it often lacks general applicability.



In general, design guidelines are never more than recommendations that try to provide useful examples for particular system applications.

These recommendations can then be adopted by people who agree that the design should be done this way.



Like design principles, guidelines are often translated in the process of describing specific design rules (which could for instance be implemented into expert systems)

Many guidelines are vague and open to interpretation, the specific context, etc.



Though vague and even contradictory in some circumstances, it is generally recommended to nevertheless rely on them (at least to some extent) rather than to completely rely on intuition.

It is important to mention that the development of a style guide does not automatically ensure usability in an interface.


1. Design Guidelines continuedShneiderman’s 8 “Golden Rules” in this context:

1. Strive for consistency

2. Enable shortcuts for experts

3. Offer informative feedback

4. Design dialogues that yield closure

5. Offer simple error handling

6. Permit easy reversal of actions

7. Support internal locus of control

8. Reduce short term memory load of user



These rules, however, must be adapted to each system environment, e.g. it is necessary to consider the specific context.

In addition, there are other rules that help designers in screen layout, online help, form fill-in, use of colour and interaction devices, navigation through the interface, provision of feedback and error messages etc.



All these guidelines are common sense suggestions to produce good interface design.

Today, most books agree that guidelines must emphasise the following issues (next 2 slides).



The actual practice of user-centred design

Developing a good system model

Need for consistency and simplicity

Considering memory and other cognitive issues, e.g. attention

Providing good system feedback, e.g. intelligent feedback, usable system messages, modality, reversible actions.



Consider methods to get the user’s attention

Consider individual user differences

End of 1. Design Guidelines.


2. Standards

Standards should be general, simple and offer effective guidance.

There are 2 types of Standards: Hardware and Software Standards.


2. Standards continued

Hardware Standards are related to human physiology (e.g. size of fingers, optimal size of characters on the screen so that it is pleasing to the human eye etc.)

Human physiology is very well-studied and well-known, so hardware standards are very consistent and considered effective.



Software Standards are related to psychology (e.g. developer’s memory of optimal code generation, developer’s planning skills etc.)

Psychology has been neglected by universities in the past centuries, so knowledge about psychological processes is still very limited.



When applying Psychology to Software Development, it is generally considered hard to translate the developers’ knowledge into standardised and useful software products.

One example would be how we could get the communities of developers to adhere to a unified standard rather than to be influenced by their own philosophies of code generation.



It is generally said that Hardware Design Standards are clear and specific, whilst Software Design Standards are vague and general.

There are several different organisations that are concerned with standards (see following slide for two major organisations).



International Organization for Standardization (ISO) which is concerned with mechanical standardization.

International Electrotechnical Commission (IEC), which is concerned with electro-technical standards.



These standards are useful to specify minimum health and safety requirements, ergonomics requirements (e.g. having a correct chair and a minimum distance from screen, a wristpad etc. in order to avoid back/wrist pain, having good monitors in order to avoid problems with vision etc.)



Preece et al. (1994) state that Standardisation in interface design provides:

• A common terminology• Maintainability and the ability to evolve• A common identity, because all systems have the same

appearance• Reduction in training and re-training• Health and safety issues.

End of 2. Standards.


3. Prototyping

Prototyping means to involve the users in testing design ideas by using experimental and incomplete designs known as prototypes.

The Development of Prototypes is an integral part of iterative (=repetitive) user-centred design, which allows designers to test their ideas by getting feedback from potential users.


3. Prototyping continued

2 types of prototyping:

Paper-based (e.g. paper and pencil sketches, questions and answers, plans, scenarios etc.) and

Computer-based (a version of the system with limited functionality, e.g. only focused on one particular application that users can test by interacting with it).



Possible reasons why prototyping is useful:• no matter how good designers are, they never get it right in

the first place• user interface design is often aimed at novel interfaces that

people have not experienced before. This implies that the user interface often needs a lot of refinement, based on the comments of its users.



Possible reasons why prototyping is useful:• It would be time consuming and often too expensive to design

a complete interface, test it, design an alternative interface, test the alternative interface and so on. Rather, prototyping allows to create models of the system quickly and efficiently.

• Because the prototype is less expensive and can be built more rapidly, a lot more refinement can be made in the same time by using this method, i.e. efficiency is a main criterion.



5 aspects where Prototyping helps designers to make decisions:

1. Functionality of the system

2. Operation sequences

3. User support needs

4. Required representations

5. Look and feel of the interface



Examples to these 5 aspects:

An example for the first aspect, functionality of the system, could be whether the camera application in a mobile phone actually works and whether people understand what buttons to press, i.e. whether they actually succeed to take photos.



Examples to these 5 aspects continued:An example for the second aspect, operation

sequences, could be to test how potential users deal with the activation of an application program such as Netmeeting, where you talk to and see your partner via a webcam. To activate this application, a number of steps are required, e.g. pressing buttons, entering the ip address of your partner etc.



Examples to these 5 aspects continued:

An example for the third aspect, user support needs, could be to test how potential users deal with an online airline ticket booking service. They might need online help messages if they get stuck, and different alternatives of providing fast and effective help could be compared with each other.




An example for the fourth aspect, required representations, could be to test representational requirements by using animators, screen painters, pre-specified forms and menu systems to see whether the icons and text menus are represented in the desired way by the potential users.




An example for the fifth aspect, look and feel of the interface, could be to test how the design of a new mobile phone is dealt with by the user. For example, see the following mobile phone, where the number-keypad is arranged in a circle instead of a rectangle grid:



Before implementing this mobile phone as a fully functional phone, one could test how users would be able to deal with it, e.g. what they think about the look and feel of this type of display.



There are different types of prototype methods:

1. Requirements animation

2. Rapid (throw-it-away) prototyping

3. Evolutionary prototyping

4. Incremental prototyping



Requirements animation allows possible requirements to be demonstrated in a software prototype.

Rapid (throw-it-away) prototyping recognises that prototypes are often inaccurate when first implemented and rather builds a new prototype than to refine the existing prototype.



Evolutionary prototyping does not replace the entire prototype, but rather tries to refine it by making additions and amendments.

Incremental prototyping tries to build on previous steps in the design process, i.e. the final system is produced gradually and the prototypes of each step are tested and refined before the next step is begun.


4. Software Support

Software tools are necessary for a variety of things: they make the software, they manage the process of making the software, they test the implementation by analysing, debugging and testing the programs.


4. Software Support continued

Any program that is used to design, make, maintain, manage or test a software product can be called a software tool.

Examples would be Borland Delphi 7 Studio, Macromedia Dreamweaver MX Studio etc.



It is an open question whether one may also want to consider the Macromedia Designer and Developer Centre, now called DevNet, a software tool. Some may consider it just a website with many of expert advice, but the sample code provided by all these experts could also be considered a support tool.



However, there is no clear definition for the term software tool. A rough working definition is that software tools are programs that support designers and developers at some point in the development of a software product.



Tools often have varying degrees of flexibility.

The more specialised the tool, the more support it will offer for a particular task it was designed to support, but the less number of tasks it will support in general.



Tools that are more general are typically helpful early in the design process, when ideas are generated. However, general tools are not specific enough for advanced stages in the design process.

End of Chapter 5

Documents

Tools and techniques that support user interface development Design support is needed because designing software is typically very complex and requires