1. วัตถุประสงค
ทราบถึงหลักการ ขอกําหนด ที่สําคัญในการออกแบบรูปแบบการเชื่อมตอกับ
มนุษยที่เหมาะสม
ทราบประเภทของรูปแบบการเชื่อมตอที่สําคัญ
Human Interface Design ทราบถึงเทคโนโลยีในการเชื่อมตอกับมนุษยและแนวทางการประยุกตใชงาน
เขาใจหลักการและขั้นตอนในการออกแบบการเชื่อมตอกับมนุษย
Nopporn Chotikakamthorn
เรียนรูการใชเครื่องมือในการสรางหนาจอเพื่อทดสอบการเชื่อมตอที่เหมาะสม
E-mail : nopporn@it.kmitl.ac.th
http://www.kmitl.ac.th/~kcnoppor/hid
หัวขอ การประเมินผล
Introduction (to human interface design and usability principle)
Guidelines, principles, and theories Assignment #1: วิจารณ/วิเคราะหความยากงายในการใช
Design processes งานของเว็บไซต (5%)
Evaluation methods Mini project # 1: การออกแบบหนาจอโปรแกรมสําหรับ
Software tools window applications (10 %)
Interaction styles
Interaction devices Mini project # 2: การออกแบบเว็บ (10 %)
Collaboration เขาฟงการบรรยาย, Lab และ workshop (5 %)
User manuals, online helps, and tutorials สอบขอเขียน : midterm / final => 30 % / 40 %

2. ตําราและเอกสารอางอิง บทที่ 1 : บทนํา
Designing the User Interface, Ben Shneiderman et. al., เกี่ยวกับการออกแบบระบบปฏิสัมพันธ (human interface of an interactive
Addison Wesley.
system)
User Interface Design: A Software Engineering
Perspective, S. Lauesen, Addison Wesley Usability และ Usability Requirements
Human-computer Interaction, Alan Dix, Janet Finlay, G.D. การวิเคราะหหาความตองการ (requirement analysis)
Abowd, Prentice-Hall. การวัดความยากงายในการใชงาน (Usability measures)
ความจําเปนในการออกแบบเพื่อ Usability
Universal Usability
Profession Goals
1.1 เกี่ยวกับการออกแบบระบบปฏิสัมพันธ Interface คืออะไร?
ศาสตรทางวิทยาศาสตรที่วาดวยการเชื่อมตอระหวางผูใชกับคอมพิวเตอร
(Human-Computer Interaction -HCI) เปนการผสมผสานของความรูหลาย ๆ
User Courses? Technical
ดาน เชน interfaces interfaces Accounting
นักจิตวิทยา: Psychologists (incl. Experimental, Educational, and system
Industrial Psychologists)
นักคอมพิวเตอร: Computer Scientists
System
นักออกแบบบทเรียนและกราฟฟก: Instructional and Graphic Designers Hotline?
นักเขียนเอกสารเชิงวิชาการ: Technical Writers
ผูเชี่ยวชาญดานกายวิภาค: Human Factors and Ergonomics Experts
นักมนุษยวิทยา/สังคมวิทยา: Anthropologists and Sociologists
Factory
Manual?
System interfaces

3. จําเปนตองเรียนรูการออกแบบ Interface หรือไม?
1.1 เกี่ยวกับการออกแบบระบบปฏิสัมพันธ
Easy to make a user interface: Hard to make
Just give access to the database a good
edit user interface Interface สําหรับผูใชทั่วไป (individuals)
see, Database
te,
crea te
dele Routine processes: tax return preparation
Decision support: a doctor’s diagnosis and treatment
Education and training: encyclopedias, drill-and-practice
Functionality: Quality factors: exercises, simulations
Necessary features Correctness
Availability Leisure: music and sports information
Performance
Security
All factors important.
Ease of use
Hard to measure, Maintainability
but possible. ...
1.1 เกี่ยวกับการออกแบบระบบปฏิสัมพันธ 1.1 เกี่ยวกับการออกแบบระบบปฏิสัมพันธ
Interface สําหรับชุมชนหรือกลุมคน Interface ที่ดีสําคัญอยางไร
Business use: financial planning, publishing applications กรณีศึกษาการใชโปรแกรมสั่งยาทางการแพทย:
Industries and professions: web resources for journals, http://www.masternewmedia.org/news/2005/04/17/ba
and career opportunities d_user_interface_design_can.htm
Family use: entertainment and communication UI Hall of Shame :
Globalization: language and culture http://www.rha.com/ui_hall_of_shame.htm
http://www.webpagesthatsuck.com
http://www.gmmstar.com

4. 1.2 Usability และ Usability Requirements
มีความหมายในลักษณะเดียวกับ “user-friendly”; easy to use;
accessible; comprehensible;
“เขาใจงาย และเพื่อนเขาใจเรา เพื่อนไมเคยทํารายเพื่อน และจะคอย
ชวยเหลือกันเสมอ แมในยามยาก”
These measures are still subjective and vague, so a systematic
process is necessary to develop usable systems for specific
users in a specific context
1.2 Usability และ Usability Requirements 1.2 Usability และ Usability Requirements
Examples: Severity classes:
The system works as intended by the
programmer, but the user: 1 Missing functionality
The U.S. Military Standard for Human Engineering Design Criteria (1999)
กําหนดไวในเรื่องการออกแบบเครื่องมือหรืออุปกรณสําหรับมนุษยใชงาน วา 2 Task failure
P1. Cannot figure out how to start the
มีประสิทธิภาพเหมาะสมกับการใชงานโดยผูใชทเกี่ยวของกับอุปกรณดังกลาว
ี่ search. 3 Annoying
ดั
Finally finds out to use F10.
ลดเวลาในการอบรมการใช และความตองการในแงทักษะของผูท่จะใชเครื่องมือดังกลาว
ี 4 Medium problem
(succeeds after long
มีความนาเชื่อถือเพียงพอกับการใชงาน P2. Believes he has completed the task, time)
but forgot to push Update.
มีมาตรฐานที่สอดคลองกันกับอุปกรณหรือองคประกอยสวนอื่น ๆ ของระบบ 5 Minor problem
เพื่อคุณภาพชีวตทีดขน
ิ ่ ี ึ้ P3. Sees the discount code field, but (succeeds after short
cannot figure out which code to use. time)
ในอันทีจะบรรลุวัตถุประสงคดังกลาว จําเปนตองมีการสํารวจและวิเคราะห
่ Critical problem =
ความตอง ตลอดจนการทดสอบที่เหมาะสม P4. Says it is crazy to use six screens to Missing functionality,
fill in ten fields. task failure, or annoying
P5. Wants to print a list of discount
codes, but the system cannot do it.

5. 1.3 การวิเคราะหหาความตองการ 1.3 การวิเคราะหหาความตองการ
เปาหมายของ requirements analysis สํารวจและยืนยันความตองการของผูใช (user’s needs)
Ascertain the users’ needs ระบุงานและงานยอย (tasks and subtasks) ที่สําคัญ
Ensure proper reliability รวมทั้งงานที่ทําเปนครั้งคราวเขาไปดวย (ซึ่งมักจะถูกหลงลืม
Promote appropriate standardization, integration, แตอาจมีความสําคัญ)
consistency, and portability Functionality (สิ่งที่ระบบสามารถทําได) ตองสอดคลองกับ
Complete projects on schedules and within budget ความจําเปน/ตองการ (need) ของผูใช ไมเชนนั้นผูใชก็จะไมใช
โปรแกรม หรือใชนอยกวาที่ขีดความสามารถที่โปรแกรมทําได
1.3 การวิเคราะหหาความตองการ 1.3 การวิเคราะหหาความตองการ
มีการกําหนดและใชมาตรฐาน การทํางานไดกบโปรแกรมอื่น ๆ ความ
ั
ทําใหระบบมีความนาเชื่อถือ (Ensure reliability) สอดคลองเขากัน และความสามารถในการใชงานภายใต platform ที่ตาง
ๆ กัน (standardization, integration, consistency, and portability)
ปุมกด เมนู หรือคําสั่ง ตองทํางานตามที่ควรจะเปน
Standardization: use pre-existing industry standards where they exist to aid
Standardization: pre-
ขอมูลที่แสดงผลถูกตอง learning and avoid errors (e.g. the W3C and ISO standards)
ลดความไมเชื่อมั่นของผูใช Integration: the product should be able to work/integrate with other
Integration:
tools/applications
ระบบควรทํางานไดสม่ําเสมอ และใชงานไดเมื่อตองการ (availability) Consistency:
Consistency:
ระบบตองไมสรางหรือเปนสาเหตุของขอผิดพลาด (error) compatibility across different product versions
ปกปองความเปนสวนตัวและความปลอดภัยขอขอมูลจากการเขาถึงที่ได compatibility with related paper and other non-computer based systems
non-
ไดรับอนุญาต use common action sequences, terms, units, colors, etc. within thethe
program
Portability: allow for the user to convert data across multiple software and
Portability: and
hardware environments

6. 1.4 การวัดความยากงายในการใชงาน (usability
1.3 การวิเคราะหหาความตองการ measures)
ระบุกลุมผูใชเปาหมายและกลุมของงาน (class of tasks) ที่
ปดโครงการไดตรงเวลาและในงบประมาณที่กําหนด
เกี่ยวของกับ interface ที่ตองการออกแบบ
(Complete projects on time and within budget)
5 human factors ที่เปนปจจัยสําคัญในการประเมิน
Late or over budget products can create serious Time to learn : How long does it take for typical members of the
pressure within a company and potentially mean community to learn relevant task?
Speed of performance : How long does it take to perform tasks?
dissatisfied customers and loss of business to Rate of errors by users : How many and what kinds of errors are made
competitors during benchmark tasks?
Retention over time : Frequency of use and ease of learning help
make for better user retention
Subjective satisfaction : Allow for user feedback via interviews, free-
form comments and satisfaction scales
usability test
1.4 การวัดความยากงายในการใชงาน
Trade-offs in design options Purpose:
Find usability problems
เชนการเปลี่ยนแปลงหนาจอในเวอรชนใหมอาจเปนผลทําใหเกิดปญหา
ั่ I try this User doesn’t
because ... notice ...
consistency กับเวอรชั่นเกา แตการเปลี่ยนแปลงอาจทําสามารถปรับปรุง
หนาจอใหดขน และ/หรือ เพื่อใหสามารถเพิ่มเติมฟงกชนใหม ๆ เขาไปได
ี ึ้ ั่
Facilitator
แบบที่มมากกวา 1 แบบ (Design alternatives) อาจประเมินจากโครง
ี Listens
Logkeeper
Asks as needed Listens
หนาจอ (mockups) หรือจากตนแบบโปรแกรมที่คอนขางสมบูรณ (high- Records problems
fidelity prototypes) โดยตองคํานึงถึงการได feedback แตเนิน เมื่อเทียบ
่ User
Performs tasks
กับประโยชนทจะไดรับจากการประเมินตนแบบที่ใกลเคียงของจริง
ี่ Thinks aloud

7. 1.5 ความจําเปนในการออกแบบเพือ Usability
่ 1.5 ความจําเปนในการออกแบบเพือ Usability
่
Life-critical systems Industrial and commercial uses
Air traffic control, nuclear reactors, power utilities, police & fire Banking, insurance, order entry, inventory management, reservation,
dispatch systems billing, and point-of-sales systems
High costs, reliability and effectiveness are expected Ease of learning is important to reduce training costs
Length training periods are acceptable despite the financial cost to
provide error-free performance and avoid the low frequency but high Speed and error rates are relative to cost
cost errors Speed of performance is important because of the number of
Subject satisfaction is less an issue due to well motivated users transactions
Subjective satisfaction is fairly important to limit operator burnout
1.5 ความจําเปนในการออกแบบเพือ Usability
่ 1.5 ความจําเปนในการออกแบบเพือ Usability
่
Office, home, and entertainment applications Exploratory, creative, and cooperative systems
Word processing, electronic mail, computer conferencing, and video Web browsing, search engines, artist toolkits, architectural design,
game systems, educational packages, search engines, mobile software development, music composition, and scientific modeling
device, etc. systems
Ease of learning, low error rates, and subjective satisfaction are
paramount due to use is often discretionary and competition fierce Collaborative work
Infrequent use of some applications means interfaces must be Benchmarks are hard to describe for exploratory tasks and device
intuitive and easy to use online help is important users
Choosing functionality is difficult because the population has a wide With these applications, the computer should "vanish" so that the
range of both novice and expert users user can be absorbed in their task domain
Competition cause the need for low cost

8. 1.5 ความจําเปนในการออกแบบเพือ Usability
่ 1.6 Universal Usability
Social-technical systems ความสามารถและพื้นที่ใชงานในดานกายภาพ (Physical
Complex systems that involve many people over long time periods abilities and physical workplaces)
Voting, health support, identity verification, crime reporting ขอมูลที่เกี่ยวกับขนาดของมนุษยไดมาจากการศึกษาดาน
Trust, privacy, responsibility, and security are issues anthropometry
Verifiable sources and status feedback are important ไมมีใครที่มีลักษณะเหมือน average user ดังนั้นในการออกแบบ
Ease of learning for novices and feedback to build trust จําเปนตองยอมรับขอจํากัดนี้และเลือกใหความสําคัญกับปจจัย
Administrators need tools to detect unusual patterns of usage ตาง ๆ อยางเหมาะสม หรือไมเชนนั้น จําเปนตองมีหลายเวอรชั่น
เพื่อใหเหมาะกับผูใชแตละประเภท
การพิจารณาเฉพาะขนาดอาจไมเพียงพอ ตองพิจารณาปจจัยอื่น
ๆ เชน ความสามารถในการบิดแขนหรือขอมือ/ความยืดหยุน
ความแข็งแรง ความแมนยํา และความเร็ว เปนตน
1.6 Universal Usability 1.6 Universal Usability
การมองเห็นของคนเรามีความแตกตางกัน The draft standard Human Factors Engineering of Computer
Screen-brightness preferences vary substantially, designers Workstations (2002) lists these concerns:
customarily provide a knob to enable user control Work-surface and display-support height
Account for variances of the user population's sense perception Clearance under work surface for legs
Vision: depth, contrast, color blindness, and motion sensitivity Work-surface width and depth
ประสาทสัมผัสในรูปแบบอื่น ๆ ก็เชนเดียวกัน Adjustability of heights and angles for chairs and work surfaces
Touch: keyboard and touch screen sensitivity Posture—seating depth and angle; back-rest height and lumbar
Hearing: audio clues must be distinct support
การออกแบบหอง และอุปกรณสํานักงานที่เหมาะสม Availability of armrests, footrests, and palmrests
เกาอี้ปรับสูงต่ําได Survival Guide for Computer Workstations: http://www.ehs.ohio-
state.edu/index.asp?PAGE=ohse.computer

9. • Eye-to-screen distance: at
least 25", preferably more.
1.6 Universal Usability
• Vertical location: viewing ความสามารถในการคิดและรับรูที่แตกตางกันระหวางผูใช
area of the monitor between
The journal Ergonomics Abstracts offers this classification of human
15° and 50° below horizontal
eye level.
cognitive processes:
• Monitor tilt: top of the Short-term and working memory
monitor slightly farther from the Long-term and semantic memory
eyes than the bottom of the
Problem solving and reasoning
monitor.
• Lighting: ceiling suspended,
Decision making and risk assessment
indirect lighting. Use blinds and Language communication and comprehension
shades to control outside light. Search, imagery, and sensory memory
• Screen colors: dark letters
on a light background
Learning, skill development, knowledge acquisition and concept
attainment
http://www.office-ergo.com/setting.htm
1.6 Universal Usability 1.6 Universal Usability
ปจจัยทีมีผลตอการรับรูการควบคุมอวัยวะตาง ๆ
่
การตืนตัว
่ ความแตกตางในแงอุปนิสัยและบุคลิกภาพ
ความออนลา There is no set taxonomy for identifying user personality types
ปริมาณขาวสารขอมูลที่รับรูผานประสาทสัมผัส Designers must be aware that populations are subdivided and that
ความรูความเขาใจเกี่ยวกับผลลัพธหรือ feedback ที่ไดจากโปรแกรม these subdivisions have various responses to different stimuli
ความเบื่อหนาย
การเสื่อมของประสาทสัมผัส Myers-Briggs Type Indicator (MBTI)
โภชนาการ extroversion versus introversion
ความกลัว ตื่นตระหนก กังวล (http://www.lessons4living.com/intoversion__extroversion.htm)
การใชยา สุรา บุหรี่ sensing versus intuition
(http://www.lessons4living.com/perceptive_functions.htm)
Physiological rhythm (จังหวะกายภาพ) perceptive versus judging
นอกจากนี้ พืนฐาน ประสบการณ และความรูความชํานาญในงานที่เกี่ยวของก็
้ (http://www.lessons4living.com/organizing.htm)
เปนปจจัยที่มีผลตอการเรียนรูการใชงานระบบและประสิทธิภาพในการใชงาน feeling versus thinking
(http://www.lessons4living.com/judging_functions.htm)

10. 1.6 Universal Usability 1.6 Universal Usability
Cultural and international diversity
Characters, numerals, special characters, and diacriticals Users with disabilities
Left-to-right versus right-to-left versus vertical input and reading Designers must plan early to accommodate users with disabilities
Date and time formats Early planning is more cost efficient than adding on later
Numeric and currency formats
Weights and measures Businesses must comply with the "Americans With Disabilities" Act for
Telephone numbers and addresses some applications
Names and titles (Mr., Ms.) Elderly Users
Social-security, national identification, and passport numbers
Including the elderly is fairly ease, designers should allow for
Capitalization and punctuation
Sorting sequences
variability within their applications via settings for sound, color,
Icons, buttons, colors brightness, font sizes, etc.
Pluralization, grammar, spelling
Etiquette (จารีต ประเพณี), policies, tone, formality, metaphors
1.7 Profession Goals 1.7 Profession Goals
Potential research topics Providing tools, techniques, and knowledge for system
Reducing anxiety and fear of computer usage implementers
Graceful evolution
Raising the computer consciousness of the general public
Specification and implementation of interaction
Many novice users are fearful due to experience with poor
Direct manipulation
product design,
Input devices
Online assistance Good designs help novices through these fears by being
Information exploration
clear, competent, and non-threatening

11. Homework
• แลกโทรศัพทมือถือกับเพื่อน ที่ใชตางยี่หอกัน โดยไมไดเรียนรูการใชงานจากเพื่อนหรือ
คูมือ ใหทดลองใชโทรศัพททําสิ่งตอไปนี้
• จากหมายเลขโทรศัพทของเครื่องที่แลกกับเพื่อน ทําการโทรไปที่เบอรดังกลาว โดย
ไมใชขอมูลที่เก็บใน memory ของเครื่อง
• เช็คดูวามี message (SMS) ใหมเขามาหรือไม
• ทําการอาน message ลาสุด 3 รายการแรกในเครื่อง
• ทําการสง SMS ขอความ Hello I am testing the m-phone usability. ไปยังเครื่องที่
แลกกับเพื่อน
• เปลี่ยน ringtone ของเครื่อง
• ตั้งเวลาเตือน/ปลุก
• ในขณะที่เพื่อนคนหนึ่งกําลังทดลองใชอยู ใหอีกคนทีเปนเจาของคอยสังเกตพฤติกรรมการ
่
ใช โดยพยายามไมใหความชวยเหลือใด ๆ นอกจากที่จําเปน ทําการจับเวลาที่ใชในการทํา
แตละอยางขางตน จดบันทึกความเห็นในแงความยากงายในการใชงานสําหรับแตละ
รายการขางตน (งาย ปานกลาง ยาก)
• ทําสิ่งเดียวกันกับขางตน แตตางคนตางใชเครื่องของตัวเอง