Lecture 5

1. Lecture 5 พื้นฐานเกี่ยวกับการติดต่อส่วนผู้ใช้ (Introduction to the Graphical User Interface (GUI) and visual programming)

2. UID Tools • OmniGraffle

3. UID Tools • Balsamiq

4. UID Tools • Adobe Flash Catalyst

5. Objectives วัตถุประสงค์ • Ability to understand different kinds of users and their needs.ทำความเข้าใจกับผู้ใช้และความต้องการ • Ability to understand attributes of a good user interface design. ทำความเข้าใจกับลักษณะของการออกแบบส่วนติดต่อผูใช้ที่ดี

6. What is a User Interface ? ส่วนติดต่อผู้ใช้ • Methods and tools used by the users to interact, communicate and use an application. วิธีการและเครื่องมือที่ผู้ใช้ใช้ในการโต้ตอบ สื่อสาร และใช้โปรแกรม • Graphical, textual, auditory information presented to the users including controls. ข้อมูลรูปภาพ ตัวหนังสือ เสียง และการควบคุมที่ผู้ใช้พบเมื่อใช้โปรแกรม • Think: • What is the user interface of the automobile? ส่วนติดต่อผู้ใช้ของรถยนต์คืออะไร • Different user interfaces may be provided in a system. Why? ระบบหนึ่งอาจมีมากกว่าหนึ่งรูปแบบของส่วนติดต่อผู้ใช้ ทำไม

7. Types of User Interface ชนิดของส่วนติดต่อผู้ใช้ • Recent categorized (2009): ปัจจุบันชนิดที่รู้จักกันดี คือ • Graphical User Interface (GUI) provide graphical output. รับอินพุทผ่านอุปกรณ์และแสดงผลเป็นภาพ • Web-based User Interface (WUI) provide web pages output. รับอินพุทและแสดงผลเป็นหน้าเวบ • Other types: ชนิดอื่น • Command line. รับคำสั่งเป็นชุดตัวหนังสือ • Touch. รับคำสั่งผ่านการสัมผัส • Voice. รับคำสั่งผ่านเสียง • Natural language. รับคำสั่งเป็นภาษาพูด • Etc. อื่นๆ • Think: What are other types? ชนิดส่วนติดต่อผู้ใช้อื่นมีอะไรบ้าง

8. Why do we need good User Interface ? ทำไมเราจึงต้องการส่วนติดต่อผู้ใช้ที่ดี • Easier to use. ใช้งานง่าย • Easier to train people to use it. สอนให้ผู้อื่นใช้ได้ง่าย • Less help people will need while using it. ผู้ใช้ต้องการความช่วยเหลือน้อย • Users will like to use it. Satisfaction increased. ผู้ใช้ชื่นชอบ เพิ่มความพึงพอใจ • Think: Do a lot of graphics help users to learnhow to use a program better than a few of clean and simple graphics?Why? การใช้ภาพจำนวนมากจะช่วยให้ผู้ใช้เรียนรู้วิธีการใช้โปรแกรมได้ง่ายกว่าการใช้ภาพง่ายเพียงไม่กี่ภาพหรือไม่ ให้เหตุผล

9. Usability ความสามารถในการใช้งาน • Usability • Efficient ใช้งานได้ดี • Ease of learning เรียนรู้ง่าย • Memorability จดจำได้ง่าย • Prevent errors ป้องกันข้อผิดพลาด • Satisfaction พึงพอใจ

10. Usability Measures วัดความสามารถในการใช้งาน • Time to learn. เวลาในการเรียนรู้ • Speed of performance. ความเร็วในการทำงาน • Rate of errors by users. จำนวนข้อผิดพลาด • Retention over time. ความสามารถในการจดจำเมื่อเวลาผ่านไป • Subjective satisfaction. ความพึงพอใจส่วนบุคคล

11. The Goal เป้าหมายของการออกแบบ UI ที่ดี • To deliver a usable system. สร้างระบบที่ใช้งานได้จริง • What is usable? อะไรคือใช้งานได้จริง • Meet requirements. ทำได้ตามความต้องการ • Easy to learn and easy to use. ง่ายในการเรียนรู้และใช้งาน • Increase effectiveness. เพิ่มประสิทธิภาพงาน • Increase satisfaction. เพิ่มความพึงพอใจ • Think: Name some applications required to meet these goals. ให้บอกชื่อโปรแกรมที่ใช้งานง่ายและเรียนรู้ได้ง่าย

12. User Interface Design (UID) Process Life Cycleวงจรชีวิตขบวนการออกแบบส่วนติดต่อผู้ใช้ • UID Process ขบวนการออกแบบ UI • Requirements Analysis Phase ขั้นตอนวิเคราะห์ความต้องการ • Design Phase ขั้นตอนการออกแบบ • Construction Phase ขั้นตอนการสร้างรหัสโปรแกรม • Usability Test Phase ขั้นตอนการทดสอบความสามารถในการใช้งาน • Deployment Phase ขั้นตอนการนำไปใช้งาน • Each phase involves Review and Rework. ทุกขั้นตอนจะต้องผ่านการทบทวนและทำซ้ำหากจำเป็น

13. UID Process Outputs ผลลัพธ์จากขบวนการ • Screen Prototypes ต้นแบบหน้าจอ • Use cases ยูสเคส • Screens Deployed หน้าจอใช้งานจริง • Tested Screens หน้าจอทดสอบ • Working Screens หน้าจอที่ใช้งานได้ • Think: Match each output above to phases in UID. จับคู่ผลลัพธ์ข้างต้นเข้ากับขั้นตอนในขบวนการ UID

14. Requirements Analysis Phase (RAP) ขั้นตอนวิเคราะห์ความต้องการ • Analyze user’s requirements. User profile Project Scope Requirements Analysis Customer Requirements Task profile UI Requirements Environment profile

15. Gathering Requirements รวบรวมความต้องการ • Observation สังเกตการณ์ • User Interview สัมภาษณ์ผู้ใช้ • Questionnaire แบบสอบถาม • Think: Name other methods. บอกชื่อวิธีรวบรวมความต้องการวิธีอื่น

16. Task Profile ข้อมูลงาน • User goals เป้าหมายของผู้ใช้ • Sub-goals and tasks included เป้าหมายย่อยและงานย่อย • Tasks sequence/order ลำดับงาน

17. Environment Profile ข้อมูลสภาพแวดล้อม • Application’s look and feel. หน้าตาของโปรแกรม • Interface type. ชนิดของส่วนติดต่อผู้ใช้ • Dialog box driven. • Command line. • Menu driven. • What more?

18. High Level Design Phase ขั้นตอนการออกแบบขั้นสูง • Build conceptual model. สร้างแบบจำลองความคิด • Design model represents designers’ perception of the system. • Conceptual model represents users’ perception of the system. • Identify the main components. ระบุส่วนประกอบหลัก • Main windows. • Major control points. • List the main features of each component. ทำรายการลักษณะสำคัญของแต่ละส่วนประกอบ • Sequence of events. ลำดับของเหตุการณ์ • Events required to complete different tasks.

19. Construction Phase ขั้นตอนการสร้างรหัส • Develop working screens. สร้างหน้าจอที่ใช้งานได้ • Fully functional screens. ทุกส่วนใช้งานได้จริง • Complete visualization of the high-level design. สร้างหน้าจอตามที่ออกแบบไว้ • Screen review to acquire feedback and suggestion for improvement and rework. ทบทวนหน้าจอเพื่อรับคำติชมแนะนำ นำไปปรับปรุง และทำใหม่

20. Usability Testing ทดสอบความสามารถการใช้งาน • Validate the user interface design against user requirements. ตรวจสอบการออกแบบ UI เทียบกับความต้องการ • Reveal areas will require refinement. เปิดเผยส่วนที่ต้องปรับปรุง • Begin as early as the design phase. เริ่มได้ตั้งแต่ขั้นตอนออกแบบ • Three levels: • Concept testing require informal, group discussion. ทดสอบว่าการออกแบบ UI เป็นไปตามแบบจำลองก่อที่จะสร้างต้นแบบ • Structured walkthrough with screen prototypes and specific tasks are performed. ทดสอบหน้าจอต้นแบบด้วยงานที่กำหนดขึ้น • User observation. สังเกตการทำงานบนแบบจำลองหน้าจอที่ใช้งานได้จริง

21. Deployment Phase ขั้นตอนการเตรียมระบบในการนำไปใช้งาน • Deployment must start in advance of actual production. การเตรียมระบบต้องเริ่มทำก่อนหน้าการใช้งานจริงเพื่อให้การใช้งานได้ในสถานการณ์จริงเป็นไปโดยราบรื่น • Deploy working models. ใช้หน้าจอที่พัฒนาเสร็จแล้ว • Train end users. อบรมผู้ใช้ • Provide support. ให้ความช่วยเหลือ • Help desk. • Documentation.

22. The Elements of UID ส่วนประกอบใน UI • Windows. • Events. • Pull-down menus / Drop-down menus. • Push buttons. • Icons. • Drop down or Combo box. • Check boxes. • Radio buttons. • Scrolling lists. • Text fields. • Popup List. • Spin Boxes. • Tabbed Panes.

23. Good vs. Bad

24. Good vs. Bad

25. Good vs. Bad

26. Good vs. Bad

27. Thank you……