Dr Dat Tran - Week 1 Lecture NotesDr Dat Tran - Week 1 Lecture Notes 11

User Interface DesignUser Interface Design

Programming Graphical User Interfaces PG (7110)Programming Graphical User Interfaces PG (7110)

University of CanberraUniversity of CanberraSchool of Information Sciences & EngineeringSchool of Information Sciences & Engineering

Dr Dat Tran - Week 1 Lecture NotesDr Dat Tran - Week 1 Lecture Notes 22

User Interface DesignUser Interface Design

Visual DesignVisual DesignComposition and OrganizationComposition and OrganizationDesign PrinciplesDesign PrinciplesColoursColoursFontFontDimensionalityDimensionalityExamplesExamplesChecklist for a good interfaceChecklist for a good interface

http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnwue/html/ch14e.asp

Dr Dat Tran - Week 1 Lecture NotesDr Dat Tran - Week 1 Lecture Notes 33

Visual DesignVisual Design

Visual design is an important tool for effective Visual design is an important tool for effective communication, it is not just decorationcommunication, it is not just decoration

It is a good idea to work with a designer who has It is a good idea to work with a designer who has education and experience in visual or education and experience in visual or information design. information design.

Good graphic designer should know Good graphic designer should know – how best to take advantage of the screen, how best to take advantage of the screen, – how to design and organize information and how to design and organize information and – how to use the concepts of shape, colour, contrast, how to use the concepts of shape, colour, contrast,

focus, and composition effectively. focus, and composition effectively.

Dr Dat Tran - Week 1 Lecture NotesDr Dat Tran - Week 1 Lecture Notes 44

Composition and OrganizationComposition and Organization

Users choose information to read by its Users choose information to read by its appearance and organization. appearance and organization.

The eye is always attracted to The eye is always attracted to – coloured elements before black-and-white elements, coloured elements before black-and-white elements, – isolated elements before elements in a group, and isolated elements before elements in a group, and – graphics before text. graphics before text.

Users even read text by scanning the shapes of Users even read text by scanning the shapes of groups of letters. groups of letters.

Dr Dat Tran - Week 1 Lecture NotesDr Dat Tran - Week 1 Lecture Notes 55

Design PrinciplesDesign Principles

1.1. Hierarchy of information Hierarchy of information

2.2. Focus and emphasis Focus and emphasis

3.3. Structure and balance Structure and balance

4.4. Relationship of elements Relationship of elements

5.5. Readability and flow Readability and flow

6.6. Unity of integrationUnity of integration

Dr Dat Tran - Week 1 Lecture NotesDr Dat Tran - Week 1 Lecture Notes 66

1. Hierarchy of Information1. Hierarchy of Information

The placement of information based on its relative The placement of information based on its relative importance to other visual elements. importance to other visual elements. The outcome of this ordering determines which The outcome of this ordering determines which information a user sees first and what a user is information a user sees first and what a user is encouraged to do first. encouraged to do first. To further consider this principle, answer these To further consider this principle, answer these questions regarding your application:questions regarding your application:– Which information is most important to the user? Which information is most important to the user? – What are the user's priorities when your application is What are the user's priorities when your application is

started? started? – What does the user want or need to do first, second, third, What does the user want or need to do first, second, third,

and so on? and so on? – What should the user see on the screen first, second, What should the user see on the screen first, second,

third, and so on? third, and so on?

Dr Dat Tran - Week 1 Lecture NotesDr Dat Tran - Week 1 Lecture Notes 77

2. Focus and Emphasis2. Focus and Emphasis

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

Dr Dat Tran - Week 1 Lecture NotesDr Dat Tran - Week 1 Lecture Notes 88

3. Structure and Balance3. Structure and Balance

Structure and balance are two of the most important Structure and balance are two of the most important visual design principles. visual design principles. A lack of structure and balance makes it more difficult for A lack of structure and balance makes it more difficult for the user to clearly understand the interface the user to clearly understand the interface

4. Relationship of Elements4. Relationship of ElementsThe placement of a visual element can communicate a The placement of a visual element can communicate a specific relationship to other elements. specific relationship to other elements. For example, if a button in a dialog box affects the For example, if a button in a dialog box affects the content of a list box, there should be a spatial content of a list box, there should be a spatial relationship between the button and the list box. relationship between the button and the list box.

Dr Dat Tran - Week 1 Lecture NotesDr Dat Tran - Week 1 Lecture Notes 99

5. Readability and Flow5. Readability and Flow

Readability and flow can determine the usability Readability and flow can determine the usability of a dialog box or other interface component.of a dialog box or other interface component.

When you design the layout of a window, When you design the layout of a window, consider the following questions:consider the following questions:– Could the idea or concept be presented more simply? Could the idea or concept be presented more simply? – Can the user easily step through the interface? Can the user easily step through the interface? – Do all the elements have a reason for being there?Do all the elements have a reason for being there?

Dr Dat Tran - Week 1 Lecture NotesDr Dat Tran - Week 1 Lecture Notes 1010

6. Unity of Integration6. Unity of Integration

Reflect how to evaluate a design in relation to its larger Reflect how to evaluate a design in relation to its larger environment. environment.

Users find an application easier to use when its interface Users find an application easier to use when its interface is visually unified with the Windows interface to present a is visually unified with the Windows interface to present a consistent and predictable work environment. consistent and predictable work environment.

For design unity and integration, consider the following For design unity and integration, consider the following questions:questions:– How do all of the different parts of the screen work How do all of the different parts of the screen work

together visually? together visually?

– How does the visual design of the application relate to the How does the visual design of the application relate to the system's interface or to other applications with which it is system's interface or to other applications with which it is used?used?

Dr Dat Tran - Week 1 Lecture NotesDr Dat Tran - Week 1 Lecture Notes 1111

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

Dr Dat Tran - Week 1 Lecture NotesDr Dat Tran - Week 1 Lecture Notes 1212

ColoursColours

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

Dr Dat Tran - Week 1 Lecture NotesDr Dat Tran - Week 1 Lecture Notes 1313

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

Dr Dat Tran - Week 1 Lecture NotesDr Dat Tran - Week 1 Lecture Notes 1414

FontsFonts

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

Dr Dat Tran - Week 1 Lecture NotesDr Dat Tran - Week 1 Lecture Notes 1515

FontsFonts

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

Dr Dat Tran - Week 1 Lecture NotesDr Dat Tran - Week 1 Lecture Notes 1616

DimensionalityDimensionality

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

Dr Dat Tran - Week 1 Lecture NotesDr Dat Tran - Week 1 Lecture Notes 1717

Example 1Example 1http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnwue/html/ch09c.asp

Dr Dat Tran - Week 1 Lecture NotesDr Dat Tran - Week 1 Lecture Notes 1818

Example 2Example 2http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnwue/html/ch09c.asp

Dr Dat Tran - Week 1 Lecture NotesDr Dat Tran - Week 1 Lecture Notes 1919

Example 3Example 3http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnwue/html/ch09c.asp

Dr Dat Tran - Week 1 Lecture NotesDr Dat Tran - Week 1 Lecture Notes 2020

Example 4Example 4http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnwue/html/ch09c.asp

Dr Dat Tran - Week 1 Lecture NotesDr Dat Tran - Week 1 Lecture Notes 2121

Example 5Example 5http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnwue/html/ch09c.asp

Dr Dat Tran - Week 1 Lecture NotesDr Dat Tran - Week 1 Lecture Notes 2222

Example 6Example 6http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnwue/html/ch09c.asp

Dr Dat Tran - Week 1 Lecture NotesDr Dat Tran - Week 1 Lecture Notes 2323

Example 7Example 7http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnwue/html/ch09c.asp

Dr Dat Tran - Week 1 Lecture NotesDr Dat Tran - Week 1 Lecture Notes 2424

Example 8Example 8http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnwue/html/ch14e.asp

Dr Dat Tran - Week 1 Lecture NotesDr Dat Tran - Week 1 Lecture Notes 2525

Example 9Example 9http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnwue/html/ch14e.asp

Dr Dat Tran - Week 1 Lecture NotesDr Dat Tran - Week 1 Lecture Notes 2626

Example 10Example 10http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnwue/html/ch14e.asp

Dr Dat Tran - Week 1 Lecture NotesDr Dat Tran - Week 1 Lecture Notes 2727

Checklist for a Good InterfaceChecklist for a Good Interface1.1. Your application installs easily in a minimum Your application installs easily in a minimum

number of steps. number of steps. 2.2. Your application installation does not require the Your application installation does not require the

system to restart. system to restart. 3.3. Users do not have to read a Readme file before Users do not have to read a Readme file before

using your application. using your application. 4.4. User-generated data files are stored by default User-generated data files are stored by default

in the My Documents folder. in the My Documents folder. 5.5. Your application avoids cryptic file names that Your application avoids cryptic file names that

are visible to users. are visible to users. 6.6. Your application does not create folders outside Your application does not create folders outside

of the Program Files folder. of the Program Files folder.

Dr Dat Tran - Week 1 Lecture NotesDr Dat Tran - Week 1 Lecture Notes 2828

Checklist for a Good InterfaceChecklist for a Good Interface

7.7. Your application does not write files to the root of Your application does not write files to the root of the hard disk. the hard disk.

8.8. If your application uses a disk cache, it also If your application uses a disk cache, it also registers with the Disk Cleanup utility. registers with the Disk Cleanup utility.

9.9. Your application does not include entries to its Your application does not include entries to its Help, Readme, and Uninstall files on the Help, Readme, and Uninstall files on the StartStart menu. menu.

10.10.Your application does not install icons to the Your application does not install icons to the Windows desktop without the user's permission. Windows desktop without the user's permission.

11.11.If your application is run at startup, it loads If your application is run at startup, it loads without displaying splash screens and dialog without displaying splash screens and dialog boxes. boxes.

Dr Dat Tran - Week 1 Lecture NotesDr Dat Tran - Week 1 Lecture Notes 2929

Checklist for a Good InterfaceChecklist for a Good Interface

12.12.Your application does not use the taskbar Your application does not use the taskbar notification area for status, for launching notification area for status, for launching applications or utilities, or for querying applications or utilities, or for querying properties. It uses the notification area only to properties. It uses the notification area only to alert the user of an important change. alert the user of an important change.

13.13.Your application appropriately applies the color Your application appropriately applies the color choices the user selected in Display properties choices the user selected in Display properties in Control Panel. in Control Panel.

14.14.Your application is keyboard accessible. Your application is keyboard accessible. 15.15.Your application works correctly if the user Your application works correctly if the user

increases the size of the default font. increases the size of the default font.

Dr Dat Tran - Week 1 Lecture NotesDr Dat Tran - Week 1 Lecture Notes 3030

Checklist for a Good InterfaceChecklist for a Good Interface

16.16.Your application supports the standard set of Your application supports the standard set of keyboard shortcuts, where applicable. keyboard shortcuts, where applicable.

17.17.Your application's uninstall process leaves no Your application's uninstall process leaves no remaining files or registry entries other than files remaining files or registry entries other than files created by the user. created by the user.

18.18.Your application does not use jargon in its user Your application does not use jargon in its user interface text. Use industry-specific or technical interface text. Use industry-specific or technical terms only if they are clearly understood by the terms only if they are clearly understood by the user. user.

19.19.Your application adjusts appropriately when the Your application adjusts appropriately when the user changes the display resolution as well as user changes the display resolution as well as for multiple-monitor configurations. for multiple-monitor configurations.