user interface designgorskicompsci.ca/ics3u/unit4/ppt8_user_interface_design2.pdfuser interface...
TRANSCRIPT
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