User Interface Designgorskicompsci.ca/ICS3U/Unit4/ppt8_User_Interface_Design2.pdfUser Interface...
Transcript of User Interface Designgorskicompsci.ca/ICS3U/Unit4/ppt8_User_Interface_Design2.pdfUser Interface...
![Page 1: User Interface Designgorskicompsci.ca/ICS3U/Unit4/ppt8_User_Interface_Design2.pdfUser Interface Design Author Gorski, Amanda Created Date 12/10/2020 5:07:44 PM ...](https://reader033.fdocuments.net/reader033/viewer/2022060821/609a2940282a0f1f4a6a7a75/html5/thumbnails/1.jpg)
User Interface Design
![Page 2: User Interface Designgorskicompsci.ca/ICS3U/Unit4/ppt8_User_Interface_Design2.pdfUser Interface Design Author Gorski, Amanda Created Date 12/10/2020 5:07:44 PM ...](https://reader033.fdocuments.net/reader033/viewer/2022060821/609a2940282a0f1f4a6a7a75/html5/thumbnails/2.jpg)
![Page 3: User Interface Designgorskicompsci.ca/ICS3U/Unit4/ppt8_User_Interface_Design2.pdfUser Interface Design Author Gorski, Amanda Created Date 12/10/2020 5:07:44 PM ...](https://reader033.fdocuments.net/reader033/viewer/2022060821/609a2940282a0f1f4a6a7a75/html5/thumbnails/3.jpg)
Red
Green Blue
RGB Colours
Magenta
Cyan
Yellow
![Page 4: User Interface Designgorskicompsci.ca/ICS3U/Unit4/ppt8_User_Interface_Design2.pdfUser Interface Design Author Gorski, Amanda Created Date 12/10/2020 5:07:44 PM ...](https://reader033.fdocuments.net/reader033/viewer/2022060821/609a2940282a0f1f4a6a7a75/html5/thumbnails/4.jpg)
Red
Green Blue
RGB Colours
Magenta
Cyan
Yellow R + G = YG + B = CR + B = M
![Page 5: User Interface Designgorskicompsci.ca/ICS3U/Unit4/ppt8_User_Interface_Design2.pdfUser Interface Design Author Gorski, Amanda Created Date 12/10/2020 5:07:44 PM ...](https://reader033.fdocuments.net/reader033/viewer/2022060821/609a2940282a0f1f4a6a7a75/html5/thumbnails/5.jpg)
![Page 6: User Interface Designgorskicompsci.ca/ICS3U/Unit4/ppt8_User_Interface_Design2.pdfUser Interface Design Author Gorski, Amanda Created Date 12/10/2020 5:07:44 PM ...](https://reader033.fdocuments.net/reader033/viewer/2022060821/609a2940282a0f1f4a6a7a75/html5/thumbnails/6.jpg)
![Page 7: User Interface Designgorskicompsci.ca/ICS3U/Unit4/ppt8_User_Interface_Design2.pdfUser Interface Design Author Gorski, Amanda Created Date 12/10/2020 5:07:44 PM ...](https://reader033.fdocuments.net/reader033/viewer/2022060821/609a2940282a0f1f4a6a7a75/html5/thumbnails/7.jpg)
![Page 8: User Interface Designgorskicompsci.ca/ICS3U/Unit4/ppt8_User_Interface_Design2.pdfUser Interface Design Author Gorski, Amanda Created Date 12/10/2020 5:07:44 PM ...](https://reader033.fdocuments.net/reader033/viewer/2022060821/609a2940282a0f1f4a6a7a75/html5/thumbnails/8.jpg)
![Page 9: User Interface Designgorskicompsci.ca/ICS3U/Unit4/ppt8_User_Interface_Design2.pdfUser Interface Design Author Gorski, Amanda Created Date 12/10/2020 5:07:44 PM ...](https://reader033.fdocuments.net/reader033/viewer/2022060821/609a2940282a0f1f4a6a7a75/html5/thumbnails/9.jpg)
How do you make custom colours?
![Page 10: User Interface Designgorskicompsci.ca/ICS3U/Unit4/ppt8_User_Interface_Design2.pdfUser Interface Design Author Gorski, Amanda Created Date 12/10/2020 5:07:44 PM ...](https://reader033.fdocuments.net/reader033/viewer/2022060821/609a2940282a0f1f4a6a7a75/html5/thumbnails/10.jpg)
255 0 0
0 255 0
0 0 255
How do you make custom colours?
![Page 11: User Interface Designgorskicompsci.ca/ICS3U/Unit4/ppt8_User_Interface_Design2.pdfUser Interface Design Author Gorski, Amanda Created Date 12/10/2020 5:07:44 PM ...](https://reader033.fdocuments.net/reader033/viewer/2022060821/609a2940282a0f1f4a6a7a75/html5/thumbnails/11.jpg)
255 0 0
255 255 0
0 255 0
0 0 255
How do you make custom colours?
![Page 12: User Interface Designgorskicompsci.ca/ICS3U/Unit4/ppt8_User_Interface_Design2.pdfUser Interface Design Author Gorski, Amanda Created Date 12/10/2020 5:07:44 PM ...](https://reader033.fdocuments.net/reader033/viewer/2022060821/609a2940282a0f1f4a6a7a75/html5/thumbnails/12.jpg)
255 0 0
255 255 0
0 255 0
0 255 255
0 0 255
How do you make custom colours?
![Page 13: User Interface Designgorskicompsci.ca/ICS3U/Unit4/ppt8_User_Interface_Design2.pdfUser Interface Design Author Gorski, Amanda Created Date 12/10/2020 5:07:44 PM ...](https://reader033.fdocuments.net/reader033/viewer/2022060821/609a2940282a0f1f4a6a7a75/html5/thumbnails/13.jpg)
255 0 0
255 255 0
0 255 0
0 255 255
0 0 255
255 0 255
How do you make custom colours?
![Page 14: User Interface Designgorskicompsci.ca/ICS3U/Unit4/ppt8_User_Interface_Design2.pdfUser Interface Design Author Gorski, Amanda Created Date 12/10/2020 5:07:44 PM ...](https://reader033.fdocuments.net/reader033/viewer/2022060821/609a2940282a0f1f4a6a7a75/html5/thumbnails/14.jpg)
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?
![Page 15: User Interface Designgorskicompsci.ca/ICS3U/Unit4/ppt8_User_Interface_Design2.pdfUser Interface Design Author Gorski, Amanda Created Date 12/10/2020 5:07:44 PM ...](https://reader033.fdocuments.net/reader033/viewer/2022060821/609a2940282a0f1f4a6a7a75/html5/thumbnails/15.jpg)
Provide clear titles.Clear instructions
![Page 16: User Interface Designgorskicompsci.ca/ICS3U/Unit4/ppt8_User_Interface_Design2.pdfUser Interface Design Author Gorski, Amanda Created Date 12/10/2020 5:07:44 PM ...](https://reader033.fdocuments.net/reader033/viewer/2022060821/609a2940282a0f1f4a6a7a75/html5/thumbnails/16.jpg)
Put prompts in front of JTextfields. Clear instructions
![Page 17: User Interface Designgorskicompsci.ca/ICS3U/Unit4/ppt8_User_Interface_Design2.pdfUser Interface Design Author Gorski, Amanda Created Date 12/10/2020 5:07:44 PM ...](https://reader033.fdocuments.net/reader033/viewer/2022060821/609a2940282a0f1f4a6a7a75/html5/thumbnails/17.jpg)
Provide instructions in JLabels.Clear instructions
![Page 18: User Interface Designgorskicompsci.ca/ICS3U/Unit4/ppt8_User_Interface_Design2.pdfUser Interface Design Author Gorski, Amanda Created Date 12/10/2020 5:07:44 PM ...](https://reader033.fdocuments.net/reader033/viewer/2022060821/609a2940282a0f1f4a6a7a75/html5/thumbnails/18.jpg)
Visually Appealing Use colour and pictures.
![Page 19: User Interface Designgorskicompsci.ca/ICS3U/Unit4/ppt8_User_Interface_Design2.pdfUser Interface Design Author Gorski, Amanda Created Date 12/10/2020 5:07:44 PM ...](https://reader033.fdocuments.net/reader033/viewer/2022060821/609a2940282a0f1f4a6a7a75/html5/thumbnails/19.jpg)
Resize the applet to one that displays the content well.Visually
Appealing
![Page 20: User Interface Designgorskicompsci.ca/ICS3U/Unit4/ppt8_User_Interface_Design2.pdfUser Interface Design Author Gorski, Amanda Created Date 12/10/2020 5:07:44 PM ...](https://reader033.fdocuments.net/reader033/viewer/2022060821/609a2940282a0f1f4a6a7a75/html5/thumbnails/20.jpg)
Similar widgets should be the same size.
Visually Appealing
![Page 21: User Interface Designgorskicompsci.ca/ICS3U/Unit4/ppt8_User_Interface_Design2.pdfUser Interface Design Author Gorski, Amanda Created Date 12/10/2020 5:07:44 PM ...](https://reader033.fdocuments.net/reader033/viewer/2022060821/609a2940282a0f1f4a6a7a75/html5/thumbnails/21.jpg)
Widget Arrangement
Widgets appear in the order the user will need them.
![Page 22: User Interface Designgorskicompsci.ca/ICS3U/Unit4/ppt8_User_Interface_Design2.pdfUser Interface Design Author Gorski, Amanda Created Date 12/10/2020 5:07:44 PM ...](https://reader033.fdocuments.net/reader033/viewer/2022060821/609a2940282a0f1f4a6a7a75/html5/thumbnails/22.jpg)
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
![Page 23: User Interface Designgorskicompsci.ca/ICS3U/Unit4/ppt8_User_Interface_Design2.pdfUser Interface Design Author Gorski, Amanda Created Date 12/10/2020 5:07:44 PM ...](https://reader033.fdocuments.net/reader033/viewer/2022060821/609a2940282a0f1f4a6a7a75/html5/thumbnails/23.jpg)
Have a reset/undo button
Error handling
![Page 24: User Interface Designgorskicompsci.ca/ICS3U/Unit4/ppt8_User_Interface_Design2.pdfUser Interface Design Author Gorski, Amanda Created Date 12/10/2020 5:07:44 PM ...](https://reader033.fdocuments.net/reader033/viewer/2022060821/609a2940282a0f1f4a6a7a75/html5/thumbnails/24.jpg)
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
![Page 25: User Interface Designgorskicompsci.ca/ICS3U/Unit4/ppt8_User_Interface_Design2.pdfUser Interface Design Author Gorski, Amanda Created Date 12/10/2020 5:07:44 PM ...](https://reader033.fdocuments.net/reader033/viewer/2022060821/609a2940282a0f1f4a6a7a75/html5/thumbnails/25.jpg)
Summary
![Page 26: User Interface Designgorskicompsci.ca/ICS3U/Unit4/ppt8_User_Interface_Design2.pdfUser Interface Design Author Gorski, Amanda Created Date 12/10/2020 5:07:44 PM ...](https://reader033.fdocuments.net/reader033/viewer/2022060821/609a2940282a0f1f4a6a7a75/html5/thumbnails/26.jpg)
Error Handling
Summary
![Page 27: User Interface Designgorskicompsci.ca/ICS3U/Unit4/ppt8_User_Interface_Design2.pdfUser Interface Design Author Gorski, Amanda Created Date 12/10/2020 5:07:44 PM ...](https://reader033.fdocuments.net/reader033/viewer/2022060821/609a2940282a0f1f4a6a7a75/html5/thumbnails/27.jpg)
Error Handling
Widget Arrangement
Summary
![Page 28: User Interface Designgorskicompsci.ca/ICS3U/Unit4/ppt8_User_Interface_Design2.pdfUser Interface Design Author Gorski, Amanda Created Date 12/10/2020 5:07:44 PM ...](https://reader033.fdocuments.net/reader033/viewer/2022060821/609a2940282a0f1f4a6a7a75/html5/thumbnails/28.jpg)
Error Handling
Widget Arrangement
Clear Instructions
Summary
![Page 29: User Interface Designgorskicompsci.ca/ICS3U/Unit4/ppt8_User_Interface_Design2.pdfUser Interface Design Author Gorski, Amanda Created Date 12/10/2020 5:07:44 PM ...](https://reader033.fdocuments.net/reader033/viewer/2022060821/609a2940282a0f1f4a6a7a75/html5/thumbnails/29.jpg)
Error Handling
Widget Arrangement
Clear InstructionsVisually Appealing
Summary
![Page 30: User Interface Designgorskicompsci.ca/ICS3U/Unit4/ppt8_User_Interface_Design2.pdfUser Interface Design Author Gorski, Amanda Created Date 12/10/2020 5:07:44 PM ...](https://reader033.fdocuments.net/reader033/viewer/2022060821/609a2940282a0f1f4a6a7a75/html5/thumbnails/30.jpg)
Error Handling
Widget Arrangement
Clear InstructionsVisually Appealing
Restricts Input
Summary