User Interface Designgorskicompsci.ca/ICS3U/Unit4/ppt8_User_Interface_Design2.pdfUser Interface...

Preview:

Citation preview

User Interface Design

Red

Green Blue

RGB Colours

Magenta

Cyan

Yellow

Red

Green Blue

RGB Colours

Magenta

Cyan

Yellow R + G = YG + B = CR + B = M

How do you make custom colours?

255 0 0

0 255 0

0 0 255

How do you make custom colours?

255 0 0

255 255 0

0 255 0

0 0 255

How do you make custom colours?

255 0 0

255 255 0

0 255 0

0 255 255

0 0 255

How do you make custom colours?

255 0 0

255 255 0

0 255 0

0 255 255

0 0 255

255 0 255

How do you make custom colours?

255 0 0

255 255 0

0 255 0

0 255 255

0 0 255

255 0 255

0 0 0

255 255 255

How do you make custom colours?

Provide clear titles.Clear instructions

Put prompts in front of JTextfields. Clear instructions

Provide instructions in JLabels.Clear instructions

Visually Appealing Use colour and pictures.

Resize the applet to one that displays the content well.Visually

Appealing

Similar widgets should be the same size.

Visually Appealing

Widget Arrangement

Widgets appear in the order the user will need them.

Code if statements to handle invalid data entry.

if (e.getActionCommand ().equals ("check")){

String choice = ans.getText ();if (choice.equalsIgnoreCase ("A"))

showStatus ("No, cactus.");else if (choice.equalsIgnoreCase ("B"))

showStatus ("No, rocks.");else if (choice.equalsIgnoreCase ("C"))

showStatus ("Correct! Juicy ants!");else if (choice.equalsIgnoreCase ("D"))

showStatus ("No, grass.");else

showStatus ("Try a, b, c or d.");}

Error handling

Have a reset/undo button

Error handling

if (e.getActionCommand ().equals ("check")){

String choice = ans.getText ();if (choice.equalsIgnoreCase ("A"))

showStatus ("No, cactus.");else if (choice.equalsIgnoreCase ("B"))

showStatus ("No, rocks.");else if (choice.equalsIgnoreCase ("C"))

showStatus ("Correct! Juicy ants!");else if (choice.equalsIgnoreCase ("D"))

showStatus ("No, grass.");else

showStatus ("Try a, b, c or d.");}

if (e.getActionCommand ().equals ("A"))showStatus ("No, cactus.");

else if (e.getActionCommand ().equals ("B"))showStatus ("No, rocks.");

else if (e.getActionCommand ().equals ("C"))showStatus ("Correct! Juicy ants!");

else showStatus ("No, grass.");

Restrict input

Summary

Error Handling

Summary

Error Handling

Widget Arrangement

Summary

Error Handling

Widget Arrangement

Clear Instructions

Summary

Error Handling

Widget Arrangement

Clear InstructionsVisually Appealing

Summary

Error Handling

Widget Arrangement

Clear InstructionsVisually Appealing

Restricts Input

Summary

Recommended