1. Dr Dat Tran - Week 1 Lecture Notes 1 User Interface Design Programming Graphical User Interfaces PG (7110) University of Canberra School of Information Sciences & Engineering

2. Dr Dat Tran - Week 1 Lecture Notes 2 User Interface Design Visual Design Composition and Organization Design Principles ColoursFontDimensionalityExamples Checklist for a good interface http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnwue/html/ch14e.asp

3. Dr Dat Tran - Week 1 Lecture Notes 3 Visual Design Visual design is an important tool for effective communication, it is not just decoration It is a good idea to work with a designer who has education and experience in visual or information design. Good graphic designer should know –how best to take advantage of the screen, –how to design and organize information and –how to use the concepts of shape, colour, contrast, focus, and composition effectively.

4. Dr Dat Tran - Week 1 Lecture Notes 4 Composition and Organization Users choose information to read by its appearance and organization. The eye is always attracted to –coloured elements before black-and-white elements, –isolated elements before elements in a group, and –graphics before text. Users even read text by scanning the shapes of groups of letters.

5. Dr Dat Tran - Week 1 Lecture Notes 5 Design Principles 1. Hierarchy of information 2. Focus and emphasis 3. Structure and balance 4. Relationship of elements 5. Readability and flow 6. Unity of integration

6. Dr Dat Tran - Week 1 Lecture Notes 6 1. Hierarchy of Information The placement of information based on its relative importance to other visual elements. The outcome of this ordering determines which information a user sees first and what a user is encouraged to do first. To further consider this principle, answer these questions regarding your application: –Which information is most important to the user? –What are the user's priorities when your application is started? –What does the user want or need to do first, second, third, and so on? –What should the user see on the screen first, second, third, and so on?

7. Dr Dat Tran - Week 1 Lecture Notes 7 2. Focus and Emphasis The placement of priority items. Identify the central idea then determine the focus for activity. Determine the emphasis by choosing the prominent element and isolating it from others. Culture and interface design decisions largely determine where the user looks first for information. For example, people in western cultures look at the upper left corner of the screen or window for the most important information. It makes sense to put a top-priority item there, giving it emphasis

8. Dr Dat Tran - Week 1 Lecture Notes 8 3. Structure and Balance Structure and balance are two of the most important visual design principles. A lack of structure and balance makes it more difficult for the user to clearly understand the interface 4. Relationship of Elements The placement of a visual element can communicate a specific relationship to other elements. For example, if a button in a dialog box affects the content of a list box, there should be a spatial relationship between the button and the list box.

9. Dr Dat Tran - Week 1 Lecture Notes 9 5. Readability and Flow Readability and flow can determine the usability of a dialog box or other interface component. When you design the layout of a window, consider the following questions: –Could the idea or concept be presented more simply? –Can the user easily step through the interface? –Do all the elements have a reason for being there?

10. Dr Dat Tran - Week 1 Lecture Notes 10 6. Unity of Integration Reflect how to evaluate a design in relation to its larger environment. Users find an application easier to use when its interface is visually unified with the Windows interface to present a consistent and predictable work environment. For design unity and integration, consider the following questions: –How do all of the different parts of the screen work together visually? –How does the visual design of the application relate to the system's interface or to other applications with which it is used?

11. Dr Dat Tran - Week 1 Lecture Notes 11 Colours Colour is very important in the visual interface. To identify elements in the interface to which you want to draw the user's attention — for example, the current selection. Colour also has an associative quality; we often assume there is a relationship between items of the same colour. Colour also carries with it emotional or psychological qualities — for example, a colour can be categorized as cool or warm. However, misuse of colour can cause an unfavorable user reaction to your application It is not always obvious to the user to associate a colour with a particular meaning.

12. Dr Dat Tran - Week 1 Lecture Notes 12 Colours Everyone has different tastes in colour. What is pleasing to you may be unusable to someone else. Some percentage of the population may have colour- identification problems. Interpretation of colour can vary by culture. Use colour as an additional or enhanced form of information. Colour is not the only means to convey information. Text labels, shape, pattern, and location of items in the interface also convey information. Design visuals in black and white or monochrome first, then add colour. Use colour only to enhance information

13. Dr Dat Tran - Week 1 Lecture Notes 13 Colours The colours should fit their purpose. Muted, subtle, complementary colours are often better than bright, highly saturated ones. One colour affects another. Pay attention to background colour. A neutral colour (eg. light grey) is often the best background colour. Opposite colours, eg. red and green, can make it difficult for the eye to focus. Dark colours tend to recede in the visual space, whereas light colours come forward Allow the user to change colours where possible. For interface elements, Windows provides standard system interfaces and colour schemes.

14. Dr Dat Tran - Week 1 Lecture Notes 14 Fonts Fonts have many functions in addition to providing letterforms for reading. Like other visual elements, fonts are used to organize information or to create a particular mood. When you vary the size and weight of a font, the user sees text as more or less important and perceives the order in which it should be read. At conventional resolutions of computer displays, fonts are generally less legible online than on a printed page. Avoid italic and serif fonts, as these are often hard to read, especially at low resolutions Limit the number of fonts and styles. Using too many fonts usually results in visual clutter.

15. Dr Dat Tran - Week 1 Lecture Notes 15 Fonts Bold text attracts attention but overusing it can distract the user and make it difficult to focus on what is important. Limit its use to titles, headings, and key items that should have the user's attention. Italic text attracts attention, but it can decrease the emphasis on the information and make the text less readable. Wherever possible, use the standard system font for common interface elements for visual consistency between your interface and the system's interface. Make the fonts adjustable so that users can change them to suit their preferences.

16. Dr Dat Tran - Week 1 Lecture Notes 16 Dimensionality Many elements in the Windows interface use perspective, highlighting, and shading to provide a three- dimensional appearance. Windows bases its three-dimensional effects on a common theoretical light source to produce the lighting and shadow effects. The light source in Windows comes from the upper left. Be careful not to overdo the use of dimensionality when designing your own visual elements. Avoid unnecessary three-dimensional effects for an element that is not interactive. Introduce only enough detail to provide useful visual cues, and use designs that blend well with the system interface

17. Dr Dat Tran - Week 1 Lecture Notes 17 Example 1 http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnwue/html/ch09c.asp

18. Dr Dat Tran - Week 1 Lecture Notes 18 Example 2 http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnwue/html/ch09c.asp

19. Dr Dat Tran - Week 1 Lecture Notes 19 Example 3 http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnwue/html/ch09c.asp

20. Dr Dat Tran - Week 1 Lecture Notes 20 Example 4 http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnwue/html/ch09c.asp

21. Dr Dat Tran - Week 1 Lecture Notes 21 Example 5 http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnwue/html/ch09c.asp

22. Dr Dat Tran - Week 1 Lecture Notes 22 Example 6 http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnwue/html/ch09c.asp

23. Dr Dat Tran - Week 1 Lecture Notes 23 Example 7 http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnwue/html/ch09c.asp

24. Dr Dat Tran - Week 1 Lecture Notes 24 Example 8 http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnwue/html/ch14e.asp

25. Dr Dat Tran - Week 1 Lecture Notes 25 Example 9 http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnwue/html/ch14e.asp

26. Dr Dat Tran - Week 1 Lecture Notes 26 Example 10 http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnwue/html/ch14e.asp

27. Dr Dat Tran - Week 1 Lecture Notes 27 Checklist for a Good Interface 1. Your application installs easily in a minimum number of steps. 2. Your application installation does not require the system to restart. 3. Users do not have to read a Readme file before using your application. 4. User-generated data files are stored by default in the My Documents folder. 5. Your application avoids cryptic file names that are visible to users. 6. Your application does not create folders outside of the Program Files folder.

28. Dr Dat Tran - Week 1 Lecture Notes 28 Checklist for a Good Interface 7. Your application does not write files to the root of the hard disk. 8. If your application uses a disk cache, it also registers with the Disk Cleanup utility. 9. Your application does not include entries to its Help, Readme, and Uninstall files on the Start menu. 10. Your application does not install icons to the Windows desktop without the user's permission. 11. If your application is run at startup, it loads without displaying splash screens and dialog boxes.

29. Dr Dat Tran - Week 1 Lecture Notes 29 Checklist for a Good Interface 12. Your application does not use the taskbar notification area for status, for launching applications or utilities, or for querying properties. It uses the notification area only to alert the user of an important change. 13. Your application appropriately applies the color choices the user selected in Display properties in Control Panel. 14. Your application is keyboard accessible. 15. Your application works correctly if the user increases the size of the default font.

30. Dr Dat Tran - Week 1 Lecture Notes 30 Checklist for a Good Interface 16. Your application supports the standard set of keyboard shortcuts, where applicable. 17. Your application's uninstall process leaves no remaining files or registry entries other than files created by the user. 18. Your application does not use jargon in its user interface text. Use industry-specific or technical terms only if they are clearly understood by the user. 19. Your application adjusts appropriately when the user changes the display resolution as well as for multiple-monitor configurations.