Human Interface Design

Nopporn Cho t ikakamthorn

E -ma i l : n o ppo rn@ i t . km i t l . a c . t h

h t t p : / /www . km i t l . a c . t h /~k cnoppo r

h t t p : / / e l e a rn i n g . i t . km i t l . a c . t h

วตัถปุระสงค์2

� ทราบถงึหลกัการ ขอ้กาํหนดและขั �นตอนในการออกแบบรปูแบบการเชื�อมต่อกบัมนุษย์

� ทราบประเภทของรปูแบบการเชื�อมต่อที�สาํคญั

� ทราบถงึเทคโนโลยใีนการเชื�อมต่อกบัมนุษยแ์ละแนวทางการประยกุตใ์ชง้านทราบถงึเทคโนโลยใีนการเชื�อมต่อกบัมนุษยแ์ละแนวทางการประยกุตใ์ชง้าน

� ทราบถงึปจัจยัที�เกี�ยวกบัมนุษยแ์ละสิ�งแวดลอ้มที�มผีลต่อการใชง้านคอมพวิเตอร์

� เรยีนรูก้ารใชเ้ครื�องมอืในการสรา้งหน้าจอเพื�อทดสอบการเชื�อมต่อที�เหมาะสม

หวัข้อ3

� Introduction to Human Interface Design� Requirement Gathering Techniques� Human Factors� Principles of Human Interface Design� Principles of Human Interface Design� Interaction Styles� Evaluation methods� Software Prototyping Tools� Interaction Devices

การประเมินผล4

� Mini project : Re-design of GUI Application (20 %)� Quiz, Homework, In-class (10 %)� สอบขอ้เขยีน

� Midterm 30 % � Midterm 30 % � Final 40 %

ตาํราและเอกสารอ้างอิง5

� User Interface Design and Evaluation, Debbie Stone et. al., � Human-computer Interaction, Alan Dix, Janet Finlay, G.D.

Abowd, Prentice-Hall.� Designing the User Interface, Ben Shneiderman et. al., � Designing the User Interface, Ben Shneiderman et. al.,

Addison Wesley.� Principles of Web Design: Joel Sklar

บทที� 1 : บทนํา6

� การออกแบบการเชื�อมต่อ (UI) และระบบปฏสิมัพนัธ์

� ความสาํคญัของการออกแบบ User Interface

� การออกแบบโดยคาํนึงถงึผูใ้ช ้(User-Centered Design)

การประเมนิผล (Evaluation)� การประเมนิผล (Evaluation)

1.1 การออกแบบการเชื�อมต่อและระบบปฏิสมัพนัธ ์7

� การเชื�อมต่อ /สว่นต่อประสาน = สว่นเชื�อมต่อในการสื�อสารระหวา่งผูใ้ชห้รอืมนุษย ์และ คอมพวิเตอร์

� ศาสตรแ์ละศลิป์ที�วา่ดว้ยการเชื�อมต่อระหวา่งผูใ้ชก้บัคอมพวิเตอร ์(Human-Computer Interaction -HCI) เป็นการผสมผสานของความรูห้ลาย ๆ ดา้น เช่นComputer Interaction -HCI) เป็นการผสมผสานของความรูห้ลาย ๆ ดา้น เช่น� จติวทิยา: Psychology� คอมพวิเตอร:์ Computer Science� การออกแบบบทเรยีนและกราฟิก: Instructional and Graphic Design � การเขยีนเอกสารเชงิวชิาการ: Technical Writing � กายวภิาคศาสตร:์ Human Factors and Ergonomics� มนุษยวทิยา/สงัคมวทิยา: Anthropology and Sociology

ประเภทของจดุเชื�อมต่อ (Interface)8

Training Courses

User interfaces Accounting

system

Technicalinterfaces

Manual (printed/online)

Hotline This System

Factory

Factory Automation System

1.1 การออกแบบการเชื�อมต่อและระบบปฏิสมัพนัธ์9

� คาํที�เกี�ยวขอ้งและมคีวามหมายใกลเ้คยีงกนั� HCI – Human Computer Interaction� CHI – Computer Human Interaction� MMI – Man-Machine Interface

� HCI (Human Computer Interaction) = an interdisciplinary area concerned with the analysis, design and evaluation of interactive computing systems for HCI (Human Computer Interaction) = an interdisciplinary area concerned with the analysis, design and evaluation of interactive computing systems for human user .. (ACM SIGCHI)

� HCI = the design and implementation of computer systems that people interact with (PC Magazine encyclopedia). � Although the user interface is the primary element between user and computer, HCI is

a larger discipline that deals not only with the design of the screens and menus, but with the reasoning for building the functionality into the system. It is also concerned with the consequences of using the system over time and its effects on the individual, group and company.

1.2 ความสาํคญัของการออกแบบ User Interface10

User’vew : User interface = computer system

1.2 ความสาํคญัของการออกแบบ User Interface11

Easy to make a user interface:Just give access to the database

Hard to makea gooduser interfaceDatabase

คณุภาพของซอฟทแ์วรแ์ละระบบสารสนเทศ

=>

Quality factors:CorrectnessAvailabilityPerformanceSecurityEase of useMaintainability. . .

Functionality: Necessary features

vs

1.2 ความสาํคญัของการออกแบบ User Interface12

Databaseระบบลงทะเบียน

Functionality: • ลงทะเบียนเรียน (create)• เพิ�ม / ถอน วิชา (create / delete)• โอนย้าย (edit)• ตรวจสอบสถานะการลงทะเบียน (see)

Tables: • main registration table• classes-registration tables• classes / courses opened

1.2 ความสาํคญัของการออกแบบ User Interface13

� ปญัหาที�เกดิจาก User Interface ที�ไมด่/ีไมเ่หมาะสม� user frustration, dissatisfaction

� safety

� public concerns� public concerns

1.2 ความสาํคญัของการออกแบบ User Interface14

� Interface ที�ดสีาํคญัอยา่งไร� กรณีศกึษาการใชโ้ปรแกรมสั �งยาทางการแพทย:์

http://www.masternewmedia.org/news/2005/04/17/bad_user_interface_design_can.htmgn_can.htm

� UI Hall of Shame : http://www.rha.com/ui_hall_of_shame.htm

� http://www.webpagesthatsuck.com

1.2 ความสาํคญัของการออกแบบ User Interface15

� ตวัอยา่ง� การใชค้า่ default value ที�ผดิพลาด

เชน่ ขนาดยา (10, 20, 30 mg) และจาํนวนเมด็ (1, 2, 3 ..)

การเลอืกชื�อ (ผูป้ว่ย, ยา) จาก� การเลอืกชื�อ (ผูป้ว่ย, ยา) จากรายการที�เรยีงตามตวัอกัษร

� Automatic syringe

1.2 ความสาํคญัของการออกแบบ User Interface16

� Good user interface พจิารณาจากคุณสมบตัทิี�เรยีกว่า Usability

� มคีวามหมายในลกัษณะเดยีวกบั “user-friendly”; easy to use; accessible; comprehensible

� บางครั �งหมายรวมถงึประโยชน์ใชง้าน = utility + ease of use� บางครั �งหมายรวมถงึประโยชน์ใชง้าน = utility + ease of use

� ในที�นี� usability = การใชป้ระโยชน์ได้

� การใชป้ระโยชน์ได ้= มฟีงักช์ั �นที�สนบัสนุนการทาํงานหรอืตอบสนองความตอ้งการของผูใ้ช้ (effective) + ใชง้านงา่ย สะดวก และมีประสทิธภิาพ (efficient)

17

1.2 ความสาํคญัของการออกแบบ User Interface18

1.2 ความสาํคญัของการออกแบบ User Interface19

1.3 การออกแบบโดยคาํนึงถึงผูใ้ช้ (User-centered design)20

� classic software development lifecycle

1.3 การออกแบบโดยคาํนึงถึงผูใ้ช้ (User-centered design)21

� user interface design and development process

1.3 การออกแบบโดยคาํนึงถึงผูใ้ช้ (User-centered design)22

� User-centered design� = involve users in all processes� Is an iterative process whose goal is the development of usable systems ..

achieved through involvement of potential users of a system during design process.process.

� Who are the users?� Customers (who pay for the development cost)� Other people in user’s organization interested in the development of the

system� Users or end users

1.3 การออกแบบโดยคาํนึงถึงผูใ้ช้ (User-centered design)23

� star life cycle model

1.4 การประเมิน (Evaluation)24

� When to evaluate� early in the life cycle (can be used to improve current design)

� later in the life cycle (can be used for improve next version)

� How to evaluate� How to evaluate� Observing (organization and how people work)

� Interviewing, talking

� Making prediction (ex: based on guided principle, past experience)

Homework25

• ตรวจสอบรปูแบบการใชง้านโทรศพัทเ์คลื�อนที�ของคุณ จากนั �นสรปุขอ้ด ีขอ้เสยีในแงข่องความยากงา่ยในการใชง้านดงันี�1. แสดงวธิแีละขั �นตอนการใชโ้ทรศพัทม์อืถอื โดยแสดงหน้าจอในแต่ละขั �นตอน

ประกอบ สาํหรบัฟงักช์ั �นต่อไปนี�1. การกาํหนด Configurations เชน่ Ring Tone, Wall Paper, ฯลฯ1. การกาํหนด Configurations เชน่ Ring Tone, Wall Paper, ฯลฯ2. การบนัทกึ แกไ้ข สมดุบนัทกึหมายเลข

2. อธบิายวจิารณ์การออกแบบในแต่ละฟงักช์ั �นขา้งตน้ วา่มขีอ้ด ีขอ้เสยีอยา่งไร3. ขอ้เสนอแนะในการปรบัปรงุการออกแบบเพื�อใหก้ารใชง้านฟงักช์ั �นในขอ้ 1

งา่ยขึ�นกาํหนดสง่ : จดัทาํเป็นรายงานสง่ ภายใน 2 สปัดาห ์ผา่น ระบบ e-

learning