Slide Chapter3_Aug24 NHH notes.pdf

TDCS2043 USER INTERFACE DESIGN Chapter 3 User Interface Guidelines: Rules and Principles 1  OUTLINE Interface design guidelines User-centred design principle Principles for user interface design...

TDCS2043 USER INTERFACE DESIGN Chapter 3 User Interface Guidelines: Rules and Principles 1  OUTLINE Interface design guidelines User-centred design principle Principles for user interface design 2  Interface Design Guidelines ✔What is mean by guideline? ✔Is a suggestion of rules to follow when creating interface elements, their appearance and behaviours. ✔Guidelines are needed to enhance the design process. 3  Interface Design Guidelines (cont.) ✔4 main roles : 1)Raising awareness 2)Assisting in choices 3)Offering strategies 4)Supporting evaluation 4  Interface Design Guidelines (cont.) ✔Principles that offer high level guidelines which can be applied widely: 1)Know the user population - For example, provide program shortcuts for knowledgeable users and allowing users to perform tasks in more than one way. 2) Reduce cognitive load - users do not have to remember large amount of details. 5  Interface Design Guidelines (cont.) 3) Engineer for errors - Include taking actions that prevent the user from making an error by providing good error messages. 4) Maintain consistency and clarity - Consistency emerges from standard operations and representations and from using appropriate metaphors that help to build and maintain a user’s mental model of a system. 6  User-centred design principle ✔In the past, many computer systems forced users to adapt to the system. Nowadays, the system must adapt to the user. ✔User-centred design principles are the basis for building usable systems. 7  User-centred design principle ✔The principles are : 1)Place the users in control of the interface. 2) Reduce user’s memory load 3) Make the user interface consistent 8  1)Place the users in control of the interface User in Control Principle Allow users to use either the keyboard or the mouse. Flexible Allow users to change focus. Interruptible Display descriptive messages and text Helpful Provide immediate and reversible actions and feedback. Forgiving Provide meaningful paths and exits. Navigable Allow users to directly manipulate interface objects. Interactive Allow users to customize the Interface. Preferences Accommodate users with different skill levels. Accessible Users in Control : Principles 9 2) Reduce user’s memory load Reduce Users’ memory load Principle Relieve short-term memory. Remember Rely on recognition, not recall. Recognition Provide visual cues. Inform Provide defaults, undo and redo Forgiving Provide interface shortcuts. Frequency Use progressive disclosure Context Promote an object-action syntax Intuitive Promote visual clarity Organise Principles that reduce users’ memory load 10  3) Make the user interface consistent ✔ Consistency in user interface is a key element of usable interfaces. ✔This consistency allow users to transfer their knowledge and learning to new programs after they have learned the common interface elements and programs they use frequently. ✔Users should provided with points of reference as they navigate through an interface. 11 Example of point of reference  3) Make the user interface consistent (cont.) ✔Consistency in presentation is very important. ✔ This consistency helps the users to see information in the same logical, visual and physical way throughout the product. ✔Example : Information that users cannot change should be presented in the same font type and colour throughout the program. 13  3) Make the user interface consistent (cont.) ✔Consistency in behaviour means that the way an interface element works in the same everywhere. ✔ The behaviour of interface controls such as buttons, lists and menu items should not change within or between programs. 14  3) Make the user interface consistent (cont.) ✔Consistency in interaction technique means that the same shortcut keys should work in similar programs and mouse actions should produce the same results anywhere in the interface. ✔Keyboard mnemonics should not change for the same menus from program to program. ✔ Users except the same results when they interact the same way with similar interface elements. 15  Principles for user interface design ✔There are 7 principles of: 1)User’s profile 2)Metaphor 3)Feature Exposure 4)State Visualisation 5)Grammar 6)Help 7)Aesthetics 16  1)Principle of User’s profile ✔Is about 🡪 Know who your user is. ✔With the specific detail such as : = what are the user’s goals? =What are the user’s skills and experience? =What are the user’s needs? 17  2)Principle of Metaphor ✔Is about 🡪 Borrow behaviours from systems familiar to your users. ✔Examples : ✔i)Desktop metaphor ✔ii) Tape deck metaphor seen on many audio and video player programs with the standard control such as play, rewind, pause, stop etc. 18 3)Principle of Feature Exposure ✔Says that 🡪 Let the user see clearly what functions are available. ✔GUI allows the user to know the availability of functions in a program. ✔It means the features of the program need to be easily exposed so that a quick visual can determine what the program actually does. ✔Examples: toolbar, printer state,dialog box, menu etc 19 4)Principle of State Visualisation ✔Says that 🡪 Changes in behaviour should be reflected in the appearance of the program. ✔Each change in behaviour of the program should be reflected by a corresponding change in the appearance of the interface. 20 5)Principle of Grammar ✔Says that 🡪 A user interface is a kind of language know what the rules are. ✔2 most common grammars are known as : 1)Action🡪 Object 2)Object🡪 Action Action🡪 Object : the operation is selected first. When a object is chosen, the tool immediately operates on the object. Example: paint program– a tool such as a paintbrush/eraser is selected, which can then make many brush strokes before a new tool is selected. 21 5)Principle of Grammar (cont.) Object🡪 Action : the object is selected first and persists from one operation to the next. Also called as direct manipulation. Example: dragging the object to a new position or resizing it. 22 6)Principle of Help - Explains that : Understand the different kinds of help a user needs. - 5 basic types of help based on 5 basic questions that users ask: 1)Goal-oriented : What kind of things can I do with this program? 2)Descriptive:What is this?What does this do? 3)Procedural: How do I do this? 4)Interpretive:Why did this happen? 5)Navigational:Where am I? 23 7)Principle of Aesthetics - Means : Create a program of beauty. - Example: an interface can be seen in the placement of buttons etc. 24