????????????????????????? (User Interface

1
?????????????????????????(User Interface
Design)
2
System Development Life Cycle SDLC
3
???????????????????? User Interface

• User Interface ???????
• ??????????????????????????????
• ??????????????????????????????????????????????????
  ???????????????????????
• Dialogues ???????
• ??????????????????????????????????????????????????
  ????????????????????????????

4
????????????????????????????????

• ??????????????????????????????????????????
• ???????????????????????????
• ???????????

5
??????????????????????
6
(No Transcript)
7
??????????

• ????????????
• ??????
• Plotter
• Computer Output Microfilm (COM)
• ?????
• Device

8
???????????????????????

• Hard copy ????????????????????????????
• Soft copy ??????????????????????
  ????????????????????????
• CRT (cathode ray tube)
• LCD (liquid crystal display)
• VDT (Video display terminal)

9
???????????????????????

• ????????????????????
• ???????????????????????? (Detail reports)
• ??????????????????? (Exception reports)
• ?????????? (Summary reports)
• ???????????????????????????????
• ????????????????? (Internal reports)
• ?????????????????? (External reports)

10
?????????????????????????

• ???????????????
• ?????????????????
• ??????????????????????????
• ????????? Effect ????????????????????

11
?????????????????????????

• ??????????????????
• ??????????? (Batch)
• ??????????? (Online)

12
????????????????????????

• Keyboard
• Mouse
• Touch screen
• Touch-tone telephone
• ???????????????????????????????? (Graphic input
  device)
• ???????????????

13
?????????????????????????????
14
?????????????????????????

• ??????????
• ???????????? Prompt
• ??????????????????????????? (Combination screen)

15
?????????????????????????????????
16
??????????????????????????????

• ??????????????????????????????????????????????????
  ??????
• ??????????????????????????????????????????????????
  ?????????????
• ??????????????????????????????????????????????????
  ????????????
• ????????????????????????????????
• ??????????????????????????????????????????????????
  ??????????
• ????????????????????????? ????????????????????????
  ????????????????????????

17
????????????????????????????????????????????

• Gebhardt Stellmacher (1978) ??????????? 8
  ???????????
• ????????????? (Simplicity)
• ?????????????????
• ?????????????????????????
• ????????????????
• ????????????????????????

18
????????????????????????????????????????????

• ?????????? (Clarity)
• ???????????????????????
• ?????????????????????
• ??????????????
• ????????????????
• ????????????????? (Uniqueness)
• ????????????????
• ??????????????????????

19
????????????????????????????????????????????

• ?????????????????? (Comfortable language)
• ??????????????????????????
• ??????????????
• ????????????????????????
• ???????????????????????????????????

20
????????????????????????????????????????????

• ????????????????????????? ? ??????????????
  (Other comfort)
• ????????????????????
• ????????????????????????????????
• ???????????????????????
• ???????????????????? ?

21
????????????????????????????????????????????

• ?????????????????????????? (Evidence
  reusability)
• ?????????
• ????????????????
• ??????????????????
• ???????????????????? (Stability)
• ????????????????????????
• ??????????????????
• ??????????????????????????? (Data security)

22
????????? Interfaces

• ?????????????????? (Layouts) ?????????
• ????????????????????????? (Structure Data Entry)
• ???????????????????????????????????????
  (Controlling Data Input)
• ????????????????? (Providing Feedback)
• ???????????????????? (Help)
• ???????????????????????????????????????????
• ??????????????????????????????? (Dialogue Design)

23
???????????????????????????

• ????????????? ?????????????????????????????????
  ?
• ?????????????????????? ??????????????????????????
  ??????
• ??????????????????????????? ?????????????????????
  ???????
• ???????????????????? ????????????????????????????
  ??????
• ????????????? ??????????????? ???? ???????
  ?????? ???????
• ?????????????????????? ??????????????????????????
  ????????????
• ??????????????????? ?????????????????????????????
  ?????????

24
???????????????????????

• ????????????????????????
• ?????????????????????????????
• ???????????????????????????????????
• ??????????????????????????????????????????????????
  ?
• ????????????????????????????????????????????

25
???????????????????????????

• ???????????? (intensity)
• ???????????????? (marking)
• ????????????? (size fonts)
• ????????????????????? (inverse video blinking)
• ???????? (color)
• ??????????? (audio)

26
?????????????????????????????????

• ???????????????????????? ?????????????????????????
  ????? ????????????? ??????????????????????????????
  ???????
• ??????????????????????????????????????????????????
  ????????????
• ??????????????????????????????????????????????????
  ?? ???????????????? ??????????????????????????????
  ??????????????????????????????

27
???????????????????

• ???????????????????????
• ??????????????????????????????????????????????????
  ??????????????????
• ?????????????????????????????????????
• ??????????????????????????????????????????????
• ??????????????????????? ?
• ??????????????????????????????????

28
????????????????????????

• ???????????????????????
• ????????????
• ???????????????????????????????????????
• ???????????????????????????????????
• ????????????????????????????????????????????????
• ?????????????????????
• ???????????????????????????????????????
• ??????????????????????????????????

29
????????????????

• ?????????????????????
• ???????????????????????????????
• ????????????????????????????????
• ??????????????????????????????????????????????????
  ????????
• ?????????????????????????????????????????

30
???????????????????????????

• ??????????????????????????????????????
  ????????????????????????????????????????????
• ??????????????????????????????????????????????????
  ??
• ????????????????????????????????????????????????
• ????????????????????????????????????
• ????????????????????? ??????????????
• ??????????????????????????????????????
  ?????????? cursor ???????????????????????????????

31
Bad Flow in a Form
32
Good Flow in a Form
33
????????????????????????
1. ???????????????????????????????????????
(Cursor) ?????????????????????????????????????????
????????? ??????????????????????????????
???????????????????????????????????? (Cursor)
???????????????????????????????????? ???
??????????????????????????????????????????????????
?????????????????????? ????????????????????? 2.
?????????????????????????????? ???????????????????
???? ??????????????????????????
??????????????????????????????????????????????????
??????????????????????????? 3. ???????????????????
??????????????????????????????????????????????????
????????????? ??????? 4. ?????????????????????
??????????????????????????????????????? Enter
????????????????? ????????????????????????????????
??????????????????????????? ??????????????????????
??????????????????????????????????????????
???????????????????
34
????????????????????????
5. ???????????????????????????????????????????????
???????????????????? ?????????????????????????????
??????? 6. ???????????????????????????????????????
? 0 ??????????????????????? ??????? 7.
??????????????????????????????????????????????????
?? , ??????????????? ?????????????????????? 8.
????????????????????????????????????????
(Default) ??? ???????????????????? ?????????
(Default) ???????????
35
????????????????????????

• 9. ???????????????????????????????????????????????
  ???????? ??? ?????????
• ??????????????????????????????????????????
  ??????????????????????????????????????
• ??????????????????????????????
• 10. ??????????????????? ? ????????????????????????
  ????????????
• 11. ????????????????????????????? ?
  ??????????????????????????????????
• ??????????????????????????????????????????????????
  ???????????????????????

36
??????????????????????????????????????????????

• ??????????????????? (Cursor)
• ????????????????????????
• ??????????????? (Exit)
• ??????????????? (Help)

37
????????????????????????? (Structure Data Entry)
??????????????????????????????? ???
????????????????????????? ????????????????????????
??? ???????????????????????????????? ????
??????????????????? ??????????????? ???????
38
??????????????????

• ????????????? (Entry) ????????????????????????????
  ??????????????????
• ??????????? (Default Value) ??????????????????????
  ???????????????????? ????????????????????
  ??????????????????? ???? ?????? ???????????
  Running Number ???????
• ?????????????? (Unit) ????????????????????????
  ???? ??? ??????? ???????? ???????
• ???????? ???? ??????????????????????(Caption)
  ?????????????????????????????????????????????????
  ????????????????????

39
??????????????????

• ??????????????? (Format) ?????????????????????????
  ???? ??????????????????????????????????????
• ???????????????(Justify) ?????????????????????????
  ????????????? ???????????????? ??????????????
  ???????
• ????????????? (Help) ?????????????????????????????
  ????????????? ???????? F1 ???????????????????
• ??????????????????????????????????????????? (GUI)

40
??????????????????????????? (Graphic User
Interface GUI)

• ??????????????????? ???????? GUI Input Control
• ????????????????????????????????????????????
• ?????????????????????????????????????????????
• ????????????????????????????????????????????

41
????????? GUI

1. Text Box
2. Radio Button
3. Check Button
4. List box
5. Drop-down List Box
6. Combination Box (Combo Box)
7. Spin Box (Spinner Box)
8. Menu bars
9. Toolbars
10. Dialog boxes
11. Toggle buttons
12. Scroll bars
13. Calendars
14. Status Bar

42
???????? Graphic User Interface
Radio Button
ListBox
TextBox
ComboBox
43
(No Transcript)
44
Common GUI Components
45
Advanced GUI Components
46
Advanced GUI Components
47
Input Prototype for Data Maintenance
48
Input Prototype for Transaction
49
Input Prototype for Data Maintenance
50
Input Prototype for Web Interface
51
Input Prototype for Web Interface
52
???????????????????????????????????????
(Controlling Data Input)

• ???????????????????????
• ??????????????????????????????????????????
• ?????????????????????????????
• ?????????????????????????????????????
• ??????????????????????????????????????????

53
????????????????? (Providing Feedback)

• ????????????? 3 ???? ???
• ????????????????? (Status Information)
• ??????????????????????????? (Prompting Cues)
• ?????????????????????????????????????
  (Error/Warning Messages)

54
????????????????? (Status Information)

• ??????????????????????????????????????????????????
  ??? ????
• ????????????????????????????
• ????????????????????????????

Combination of Text and Graphics for End User
feedback
55
??????????????????????????? (Prompting Cues)

• ??????????????????????????????????????????????????
  
• ???? ???? Login ???????? cursor ????????????
  username
• ???? ????????????????? _ _ _-_ _ _

56
?????????????????????????????????????
(Error/Warning Messages)

• ?????????????????????????????????
  ?????????????????????? ???????????????????????????
  ?????????????????????

57
???????????????????? (Help)

• ???????????? Help ???????? ??????
• ???????????????? (Simplicity)
• ?????????????????????????????? (Organization)
• ????????????????? (Example)

58
???????? Help
Poorly designed help display
Improved designed help display
59
???????? Help
60
????????????????????????????????????????

• ?????????????????????????????????????????????
  (View/Subschema)
• ??????????????????????? (Authorization Rules)
• ??????????? (Encryption Procedures)
• ???????????????????????? (Authentication schemas)

61
???????????????????????????????

• ??????????????????????????????????????????????????
  ??????? ??????????????????????? User Interface
  ????????????????????
• ???????????????????????????????? (Dialogues
  Diagram) ???????????? 3 ???? ???
• ?????? ??????????????
• ???????? ??????????????????
• ???????? ?????????????????????????? ????? ????
  ????????

62
Dialogues Diagram

• Dialogues Diagram ????????????????????????????????
  ???????
• ?????????

63
???????? Dialogue diagram for
Customer Information System
64
???????? Dialogue diagram for e-commerce
65
???????? Dialogue diagram
66
???????????????

• ?????????????????????????????????? ???????????
• ???????? ????????????????
• ????????????????? (?????????????)
• ???????????? (???????????????????
  ???????????????????)
• ?????????? (???????????????????????????????
  ???????????? ???????????????????
  ?????????????????)
• ????????????????????????? ???? ???????? ?????
  .....
• ??????????
• ???????????? ????????????????

67
??????????????

• ????????????????????????
• ???????????????????????
• ?????????????????????????
• ????????????? ? ?????? ....
• ???????????????????????????
• ???

68
Human-Computer Interaction(HCI)
69
Human-Computer Interaction ???????

• ??? ???????????????????????????????????? ????????
  ???? ???????????? ?????????????????????? ???????
  ????????????????????????
• ???????????????? ???? Interactive ???????????
  ??????
• ??????????????????????????? ??????????????
  ????????? ??????????????????
• ???????????????? ????????????? ???????????????????
  ?????????
• ???????????????????????????? ??????????????
  ???????????
• ????? ?????????????????? ??????????????????????
• ?????????????? ??????????????????
• ?????????????????? ???????????????????????????????
  ???
• ?????????????????????? ?????????????
  ??????????????????????????????????
  ???????????????????????????

70
????????????? HCI

• ???????????????????????????????????? 10
  ?????????? 20 ??????
• ???????????????????????????????????????????
  ????????? ????????????????????????????????????????
  ....
• ????????????????????????? ??? HCI ??????
• ?????????????? HCI ???????????????????????????????
  ???????????????????

71
????????????? HCI

• ?????????????????????????????????????????????
  ??????????????????????????????????????????????????
  ????????????????????????????????????????????????
  ??????????????????????????????????????????????????
  ????????????????????????????????????
• ??????????????????????????????????????????????????
  ???????????????????????????????????
  ????????????????????????????? ???????????????????
  ??????????????????????????????????????????????????
  ????

72
HCI versus UI

• ??????????????? HCI ??? UI ??????????????????
  ????????????????????
• UI ???????????????????????????????????????????????
  ?? ?????????????????
• HCI ?????????????????????????????????????????
  ????????????????????????????????????????????????
• ??????? HCI ???????????????????????????? UI
  ????????????????
• ?????????? ? ?????????????????????????????????????
  ??????
• ???? UI ????????????????????????????????
  ??????????????????????? ???? ??, ???????? ???

73
?????????????????????????????????

• ???????????????????
• ???????????????
• ??????????????????????
• ?????????????????????
• ?????????
• ???

74
????????????????? HCI

• ??????????????????????????????????????????????
• ?????????????????????????????????
  ?????????????????????????????? ????????????? ????
  ???????????????????????
• ??????????????????????
• ??????????????????????????????
• ??????????????????????????????????????????
  ?????????
• ???????????????????????
• ?????????????????????
• ?????????????????????????????????
• ????????????????
• ??????????????????? ???? ??????????????????????

75
Interfaces in the Real World

• ??????????????????????????????
• Phone
• Copier
• Car
• Plane cockpit
• Airline reservation
• Air traffic control
• Running shoes!

76
?????????????????????

• ??? ?????????????????????? ???????????????????????
  ??? ???????????????? ??? User Interface Design
  HCI ????????????????????? ?????????? ???????????
  ????????????? Computer (Hardware) ???
• ??????????????? 1 ??? ??????????????????????
  computer
• ??????????????? 2 ??? User Interface Design HCI
• iPod touch, iPad ?????????????????????????????????
  ???????????????????????????? ?????????????????????
  ???????????

77
?????????????????????

• ???????????????????????? ?????????????????????????
  ???????????????????????????????????????????????
  ??????????????????????????????????????????????????
  ???????????????? ?????????????????????????????????
  ??????????????????????????????????????????????????
  ?????????????????????????

78
?????????????????????

• ???????????????????????????????
  ?????????????????????????????????????
  ??????????????????????????????????????
  ???????????????????????? ?????????????????????????
  ?? ?????????????????
• ??????????????????????????????????????????????????
  ???????? ? ???????????????????????????
  ??????????????????????????????????????????????????
  ?????????????????????????????

79
?????????????????????

• ?????????????????????? ???????????????????????????
  ??????????????????????????????????????????????????
  ? ????
• ??????????????????????????????????????????????????
  ???????????????? ????????????????????????????????
  ??????????????????????????????????????????????????
  ??????

80
??????????????????????????????????????????????????
?????????????????????????????????

• ???????????????? ?????????????????????????????????
  ?????????????????????????????????????????
  ???????????????????? ?????????????????????????????
  ?????????????????????? ?????????????????????????
  ??????????????????????????????????? ?????????? ?
  ?????????????????? ???? ??????????????????
  ????????? ??????? ???????
• ??????????????????????????? ??????????????????????
  ?????? ???? ?????????????????????????????????????
  ??????????? ??????????????????????????????????????
  ???

81
??????????????? ??????????????????????????????????
?????????????????????????

• ?? 4 ??????????????? ??????
• ?????????? (Manager) ?????????????????????????????
  ?????????????? ????????????? ?????????????????????
  ?????????? ?????????????? ???????????????????
  ??????????????????????????????????????????????????
  ????????
• ????????????? (Designer) ?????????????????????????
  ????

82
??????????????? ??????????????????????????????????
?????????????????????????

• ?????????????????????????????????????????
  (User-Interface Building Tools)
  ???????????????????????? ????????????????????
• ???????????????? (Evaluation) ????????????????????
  ????????????????????????????????
  ???????????????????????

83
??????????????????????????????? (Usability
Requirements)

• ??????????????????????????? ???
• ????????????????????????????? (Usability)
• ?????????????? (Universality)
• ?????????????? (Usefulness)
• ??????????????????????????????????????????????????
  ??????????????????? ??????????????????????????????
  ???????????????????

84
??????????????????????????????? (Usability
Requirements)

• ??????????????????????????? ?????????????????
  (User Friendliness) ??????????????????????????????
  ??? ???????????????????????????????????????
  ??????????????????????????????????????????????????
  ? ?????????????????????????????????? ???????????
• ??????????????????????????????????????????????????
  ? ???????????????????????????????
  ?????????????????????? ???????????????????????????
  ? ????????????????????????????????????????????????
  ???????? ?

85
??????????????????????????????? (Usability
Requirements)

• ?????????????????????????????????????????????????
  ??????????????????????????????????????????????????
  ?????????????? ??????????????????????????????????
  ?????????????? ????
• ?????????????????????????????????????????? IE
  ?????????????????????????????????????????? IE
  ??????????????????????????????????????????????????
  ???? ?????????????????????????????????? IE
  ??????????????????????????????????????????????????
  ?????????

86
??????????????????????????????? (Usability
Requirements)

• ??????????????????????????????????????????????????
  ???????????????????(Human Engineering Design
  Criteria 1999) ???????????????????????????????????
  ?????????
• ??????????????????? ????????????? ?????????
  ??????????????????????????????????????????????????
  ???????????
• ??????????????????????????????????????????????????
  
• ?????????????????????????????????????????
  ????????????????????? ??????? ????????????????????
  ???

87
??????????????????????????????? (Usability
Requirements)

• ??????????????????????????????????????????????????
  ???????????????????(Human Engineering Design
  Criteria 1999) ???????????????????????????????????
  ????????? (???)
• ??????????????????????????????????????????????????
  ???????????????
• ???????????? ????????????????????????????????????
  ??????????????????????????????????
  ??????????????????????????????????????????????????
  ??????????????????????????????????????????????
  ????????????????????????????????
  ???????????????????????????????????????????????
  (Requirement Analysis)

88
??????????????????????????????? (Usability
Requirements) (???)

• ??????????????????????? (Requirement Analysis)
• ???????????????????????????????????????????????
  (Ascertain the Users Needs) ?????????????????????
  ?????????????????
• ??????????? (Frequent Tasks) ?????????????????????
  ???????? ?????????????????????????????????????????
  ?????? ???? ??????????????? ??????????????????????
  ?
• ???????????????????? (Occasional Tasks) ????
  ?????????????????????????????????? ? ????
  ?????????????????????? ??????????????????????????
  ?????????????????????????
• ?????????????????????????????????????
  (Exceptional Tasks) ???? ?????????????????????????
  ????????????????????????????????????
• ???????????????? (Repair Tasks)
  ??????????????????????????????????????????
  ??????????????????????????????????????

89
??????????????????????????????? (Usability
Requirements)

• ??????????????????????? (Requirement Analysis)
• ???????????????????????? ?????????????????????????
  ? (Ensure Proper Reliability) ????????????????
  ????????????? ??????????? ???????
• ??????????????????????????????????????????????????
  (Promote Appropriate of Use) ???????? ?????????
  ???????????????????????????????????????????????
  ??????????????????????????????????????????????????
  ?????????????????????????
• ???????????????????? (Complete on time)
  ?????????????????????? ???? ??????????????????????
  ????????????????????????????????????????????

90
???????????????????????????????????????????????
(Usability Measures)

• ??????????????????????????????????????????????????
  ??????? ?????????????????????????
  ???????????????????????????????????????? ????
  ?????????????????????????????? www.google.com
  ???????????????????????????????
  ?????????????????????????????????????
  ??????????????????????????????????????????????????
  ????

91
???????????????????????????????????????????????
(Usability Measures)

• ??????????????? 5 ????????????????????????????????
  ?????????????????
• ????????????????????? (Time to Learn)
  ?????????????????????????????????????
  ??????????????????????????????????????????????????
  ????????
• ???????????????????????? (Speed of Performance)
  ?????????????????????????????????????????????????
• ???????????????????????????? (Rate of Errors)
  ??????????????????????????????????????????????????
  ??????????????

92
???????????????????????????????????????????????
(Usability Measures)

• ??????????????? 5 ????????????????????????????????
  ?????????????????
• ??????????? (Retention Over Time)
  ??????????????????????????????????????
  ????????????????
• ?????????????????????????? (Subjective
  Satisfaction) ??????????????? ????????????????????
  ??????????????????????????????????????????????????
  ????????? ????????????????????????????????????????
  ????????????????????????????????????????

93
?????????????????????????(Usability Motivations)

• ?????????????????????????? ????????????
  ??????????????????????????????????????????????????
  ??????????????????? ??????????????????????????????
  ???????????????????????????
• ????????????????????????????????????
  ?????????????????????? (Life Critical System)
  ????
• ?????????????????????????? (Air Traffic Control)
• ?????????????????????????????
• ?????????????????????
• ?????????????????????????????????????????????
  ?????????????????????????? ?????????????

94
?????????????????????????(Usability Motivations)

• ?????????????????????????? ????????????
  ??????????????????????????????????????????????????
  ??????????????????? ??????????????????????????????
  ???????????????????????????
• ????????????????????????????????? (Industrial and
  Commercial Use) ???? ?????????????????????
  ??????? ?????????
• ??????????????????????? ????????????????
  ????????????? (Office, home and entertainment
  applications) ???? e-mail, game ??????????????
  ?????????????????? ???????????????????
  ??????????????????? ???????

95
?????????????????????????(Usability Motivations)

• ?????????????????????????? ????????????
  ??????????????????????????????????????????????????
  ??????????????????? ??????????????????????????????
  ??????????????????????????? (???)
• ?????????????????? ???????????????????????????????
  ???? (Exploratory, creative and cooperative
  systems) ???????????????????????????????? (Web
  Browsing) ?????????????????????????????????
• ??????????????????????????????????????????????????
  ???????????? (Social technical Systems)
  ?????????????????????? ???????????????????????????
  ?? ??????????????????????????

96
???????????????????? (Universal Usability)

• ????????????????????????????????????
  ??????????????????(Anthropometry)
  ??????????????????????????? ??????????????????????
  ????????????????? ????????????????????????????????
  ??
• ???????????????? ????????? ???????
  ??????????????????
• ?????????????????????????????
• ????????????????????????????? ???????
• ?????????
• ?????????
• ?????????

97
????????????????????????????????????? (Goals for
Profession)

• ???????????????????? 3 ???????????????????????????
  ?????????????????????????????????
• ???????????????????????????????? ????
  ??????????????????????????????????? ????????
  ???????????????
• ?????????????????????? ?????????????? ?
  ???????????????????????????????
• ??????????????????????????????????????????????????
  ??????? ???????????????????????

98
?????????????????????????????????????????

• ?????????????????????????????????
• ?????????????????????????????? ???????????????????
  ?????
• ???????????????????????????
• ????????????????????????????
• ???????????????????????????????
• ???????
• ?????????????????
• ????????????????????? ???????
• ???????????????? ?????????????????????????????????
  ????

99
???????????????????

• ????????????????????????????????????????????
  ???????????????????????? ?????????????????????????
  ???????????????????????
• ?????????????????????????

100
???????????????????

• ??????????? ??? ??????????????????????????????
  HCI
• ???? ????? ??? ????????????????????
• ??? 2 ??????????????????????????????
  ??????????????????????????????? ????? 2
  ????????????????????? ??????????????????????????

101
???????????????? ??????????????????

• ???????????????? Input ??? Output
• ????????? Input
• ?????????
• ?????? ????????? ???????? ????????
• ?????????
• ????????????????? ?????????????? ?????? ????
  ?????????? ????????? ????????
• ????????? Output
• ?????????????????????????????????
• ??????????????? ???????????????????
• ????????????????
• ?????????????????????

102
Homework
??? 1

• ???????????????????????????????????????????? -
  ????????????????????????????????
• - ??????????????????????????????
• ??????????????????????????????????????????????????
  ?????????????
• ??????????????????????????????????????????????????
  ??????????????????

103
Homework
??? 2

• ?????? User Interface ??????????????????? Pizza
  ?????????????????????
• ??????????????? Pizza ?????????????????
• ???????????? ?????????????????????????????????????
  ?????????????????? ????????????????????? input
  ???????????????????????
• ???????????????? Pizza ????????????
• ??????????????????????????????????? ?????????????
  ????????????????????? ????????????????
• ???????????????????????