User Interface Design

1

User Interface DesignUser Interface Design

2

What is it?What is it?

• Interface design is the process of creating an interaction between the computer and humans.

• It is a way of allowing humans to communicate with computers and computers to communicate with humans.

• Interface design is the process of creating an interaction between the computer and humans.

• It is a way of allowing humans to communicate with computers and computers to communicate with humans.

3

What is it?What is it?

• Interface design is achieved through the screen, mouse, keyboard, touchpads etc.

• Interface design is achieved through the screen, mouse, keyboard, touchpads etc.

4

Why is it Important?Why is it Important?

• Makes software easier to use.

• The better the interface, the less help people will need.

• More users will want to use the software.– An application that is difficult to

use won’t be used.

• Makes software easier to use.

• The better the interface, the less help people will need.

• More users will want to use the software.– An application that is difficult to

use won’t be used.

5

Interface Design HistoryInterface Design History

• Initially computers communicated through flashing lights and mechanical switches.

• Then it was through printing devices such as punched cards.

• Then came video screens - but they were limited to text only.

• Now there is a Graphical User Interface (GUI) such as Windows

• Initially computers communicated through flashing lights and mechanical switches.

• Then it was through printing devices such as punched cards.

• Then came video screens - but they were limited to text only.

• Now there is a Graphical User Interface (GUI) such as Windows

6

Usability ProblemsUsability Problems

• To whom the interface is targeted?

• Which tasks the application should support?

• What are the requirements of the user and the surroundings?

• How fast the user can learn to use the interface?

• To whom the interface is targeted?

• Which tasks the application should support?

• What are the requirements of the user and the surroundings?

• How fast the user can learn to use the interface?

7

Usability ProblemsUsability Problems

• What kinds of mistakes occur and how the user corrects them?

• How tiring is the use of the interface to the user?

• What are the requirements of hardware?

• What kinds of mistakes occur and how the user corrects them?

• How tiring is the use of the interface to the user?

• What are the requirements of hardware?

8

Good User Interface DesignGood User Interface Design

1. Be consistent

• Put buttons in consistent places

• Use a consistent colour scheme

• Use the same wording in messages

1. Be consistent




2. Set a Standard

• To maintain consistency a standards sheet or template should be used.

• This should contain information on fonts, backgrounds and graphic formats

2. Set a Standard

• To maintain consistency a standards sheet or template should be used.

• This should contain information on fonts, backgrounds and graphic formats

9


3. Help

• Provide help screens and/or menus to assist both novice and expert users.

3. Help

• Provide help screens and/or menus to assist both novice and expert users.

4. How To ..

• A precise and clear explanation on how the program works should be available.

4. How To ..

• A precise and clear explanation on how the program works should be available.

10


5. Clear Navigation




5. Clear Navigation




6. Navigation within the Screen

• People read left to right and top to bottom - so information should be organised in a similar manner.

6. Navigation within the Screen

• People read left to right and top to bottom - so information should be organised in a similar manner.

11

Good User Interface DesignGood User Interface Design7. Use Colour

• Be careful not to overuse colour.

• Don’t use bright colours in the background - so that everyhting else is lost.

7. Use Colour

• Be careful not to overuse colour.

• Don’t use bright colours in the background - so that everyhting else is lost.

8. White Space is OK

• Try and avoid overcrowding on the screen by leaving plenty of ‘white space’ between objects and controls.

8. White Space is OK

• Try and avoid overcrowding on the screen by leaving plenty of ‘white space’ between objects and controls.

12


9. Interface Objects

• Objects used on screen should look and behave exactly like the ‘real’ objects they represent.

9. Interface Objects

• Objects used on screen should look and behave exactly like the ‘real’ objects they represent.

10. Consider the User

• Cater to a particular group

• Readers - read text• Viewers - entertainment • Users - functionality

10. Consider the User

• Cater to a particular group

• Readers - read text• Viewers - entertainment • Users - functionality

13


DON’T

• Squeeze in too much text on one screen• USE ALL CAPITAL LETTERS• Use fonts that aren’t generally available• Assume the user knows what to do.• Place important information at the top or

bottom of the screen

DON’T

• Squeeze in too much text on one screen• USE ALL CAPITAL LETTERS• Use fonts that aren’t generally available• Assume the user knows what to do.• Place important information at the top or

bottom of the screen

14

UI QuestionsUI Questions

• Does the design simplify the user’s task

• Is it clear what actions are currently possible

• Is there clear, understandable and relevant feedback

• Is the information arranged into logical chunks

• Does the design simplify the user’s task

• Is it clear what actions are currently possible

• Is there clear, understandable and relevant feedback

• Is the information arranged into logical chunks

15

ColourColour

• Be consistent!

• Don’t change the meaning of a colour in the middle of the document.

• The use of color should relate to normal expectations: hot - red, cold - blue.

• The result should be aesthetically pleasant.

• Be consistent!

• Don’t change the meaning of a colour in the middle of the document.

• The use of color should relate to normal expectations: hot - red, cold - blue.

• The result should be aesthetically pleasant.

16

What makes a Good Interface?What makes a Good Interface?

• It’s invisible!

• It’s predictable

• It’s easy to learn

• It’s flexible

• It’s easy to recover from errors

• People like it!

• It’s invisible!

• It’s predictable

• It’s easy to learn

• It’s flexible

• It’s easy to recover from errors

• People like it!

User Interface Design

Business

Transcript of User Interface Design