บทที่ 1 : interaction design basic พื้นฐานการออกแบบระบบโต้ตอบ

1. บทที่ 1 :interaction design basicพื้นฐานการออกแบบระบบโต้ตอบ

2. พื้นฐานการออกแบบระบบโต้ตอบพื้นฐานการออกแบบระบบโต้ตอบ • design • the design process • users • scenarios • navigation • iteration and prototypes

3. Design? “การดำเนินงานให้ได้ตามเป้าหมายภายใต้ข้อจำกัด” • goals - purpose • constraints • trade-offs

4. for Human–Computer Interaction • understand computers • understand people • and their interaction …

5. To err is human • accident reports .. • industrial accident, hospital mistake • … blames … ‘human error’ • human ‘error’ is normal • ผู้ใช้ทำงานภายใต้ความกดดัน • so design for it!

6. scenariostask analysis guidelines principles precisespecification interviews dialoguenotations evaluation heuristics documentation help ขั้นตอนการออกแบบ what iswanted analysis design implement and deploy prototype

7. ขั้นตอน … • requirements • Analysis • design • iteration and prototyping • implementation and deployment

8. การทำงานทั้งหมดเป็นไปได้จริงหรือการทำงานทั้งหมดเป็นไปได้จริงหรือ • limited time • usability? • a perfect system is badly designed • too good  too much effort in design  

9. user focus ต้องรู้จัก user ลักษณะของ user อุปกรณ์ต่างๆ

10. รู้จักผู้ใช้งาน • พวกเขาเป็นใคร? • เป็นไปได้ที่เขาไม่ได้เก่งคอมพิวเตอร์เหมือนคุณ • คุยกับ user • สังเกตุการณ์ • ใช้จินตนาการ

11. cultural probes • สังเกตุการณ์โดยตรง • sometimes hard • ในบ้าน • ผู้ป่วย • กล่องเครื่องมือ • อุปกรณ์ต่างๆ • เพื่อให้ user เลือกบริเวณสำหรับการสัมภาษณ์ได้

12. the systems main screen remove user confirm info and help management messages start add user add user remove user navigation design local structure – single screen global structure – whole site

13. ระดับ • widget choice • menus, buttons etc. • screen design • application navigation design • environment • other apps, O/S

14. the web … • widget choice • screen design • navigation design • environment • elements and tags • <a href=“...”> • page design • site structure • the web, browser,external links

15. physical devices • widget choice • screen design • navigation design • environment • controls • buttons, knobs, dials • physical layout • modes of device • the real world

16. think about structure • local • looking from this screen out • global • structure of site, movement between screens

17. four golden rules • knowing where you are • knowing what you can do • knowing where you are going • or what will happen • knowing where you’ve been • or what you’ve done

18. top level category sub-category web site this page live links to higher levels where you are • shows path through web site hierarchy

19. global between screens within the application

20. the system info and help management messages add user remove user hierarchical diagrams

21. the systems info and help management messages add user remove user hierarchical diagrams ctd. • ส่วนหนึ่งของโปรแกรมทำงาน • หน้าจอหรือกลุ่มของหน้าจอ • การแบ่งกลุ่มของฟังก์ชันการทำงาน

22. navigating hierarchies • โครงสร้างที่มีความลึกใช้งานได้ยาก • มนุษย์จะสามารถเข้าใจโครงสร้างแบบนี้ได้ง่ายกว่า • การจัดกลุ่มรายการเหล่านี้ควรสัมพันธ์กับธรรมชาติความเป็นจริง

23. main screen remove user confirm add user network diagrams • show different paths through system

24. main screen remove user confirm add user network diagrams ctd. • แสดงให้เห็นว่าการทำงานนี้จะนำพาไปสู่สิ่งใด • แสดงให้เห็นว่าแต่ละสิ่งจะเกิดขึ้นเมื่อใด • สามารถใช้งานเงื่อนไขแบบทางเลือก (branch) และการทำซ้ำ (loop) • ขึ้นอยู่กับขั้นตอนการทำงานมากกว่าโครงสร้าง

25.  Dix , Alan Finlay, Janet Abowd, Gregory Beale, Russell ABCDEFGHIJKLM NOPQRSTUVWXYZ screen design and layout พื้นฐานในการออกแบบ การจัดกลุ่ม การวางโครงสร้าง และการเรียงลำดับ การจัดวางแนว การใช้พื้นที่สีขาว

26. วิธีในการจัดวางโครงสร้างวิธีในการจัดวางโครงสร้าง • grouping of items ข้อมูลที่สัมพันธ์กันจะถูกจัดเป็นกลุ่ม • order of items ลำดับการกรอกข้อมูล • decoration - fonts, boxes etc. การตกแต่ง • alignment of items การวางแนว • white space between items

27. grouping and structure (ctd.) Order: Administrative information Billing details Delivery details Order information Order line 1 Order line 2 …

28. Billing details: Name Address: … Credit card no Delivery details: Name Address: … Delivery time Order details: item quantity cost/item cost size 10 screws (boxes) 7 3.71 25.97 …… … … … grouping and structure

29. order of groups and items • ใช้ความคิดว่าแต่ละรายการนั้นมีการจัดเรียงอย่างธรรมชาติเป็นอย่างไร • นำมาจัดเรียงบนหน้าจอให้ได้ตามนั้น • ใช้กรอบหรือช่องว่าง • ตั้งแท็บในการกระโดดไปแต่ละ UI ให้ถูกต้อง • คำสั่ง • อย่าใช้คำสั่งแบบการทำเค้กเช่น… เติมนมและแป้ง จากนั้นจึงเติมผลไม้ และ...

30. ABCDEFGHIJKLM NOPQRSTUVWXYZ decoration • ใช้กรอบในการแบ่งกลุ่มส่วนต่างๆ • ใช้ฟ้อนเพื่อเน้นข้อความเช่น Heading • แต่อย่าใช้มากจนเกินไป!!

31. alignment - text • คนปกติอ่านจากซ้ายไปขวา(English and European) จัดข้อความให้ชิดซ้ายเสมอ น่าเบื่อแต่ อ่านรู้เรื่อง Willy Wonka and the Chocolate Factory Winston Churchill - A Biography Wizard of Oz Xena - Warrior Princess Willy Wonka and the Chocolate Factory Winston Churchill - A Biography Wizard of Oz Xena - Warrior Princess สวยงามแต่ค้นหายาก

32. alignment - names • การจัดวางหน้าจอเพื่อให้ค้นหานามสกุลได้ง่าย   Alan Dix Janet Finlay Gregory Abowd Russell Beale Dix , Alan Finlay, Janet Abowd, Gregory Beale, Russell  Alan Dix Janet Finlay Gregory Abowd Russell Beale

33. alignment - numbers จัดวางหน้าจอให้เหมาะสมกับ จุดประสงค์ในการใช้งาน! จากต.ย.เรารู้ได้ทันที่ว่าค่าใด มากที่สุด 532.56179.3256.3171573.94810353.142497.6256

34. alignment - numbers visually: long number = big number align decimal points or right align integers 627.865 1.005763 382.583 2502.56 432.935 2.0175 652.87 56.34

35. multiple columns • การจัดวางข้อมูลเป็นคอลัมน์จะมีปัญหาในการเช็คว่าบรรทัดไหนตรงกัน: sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85

36. sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85 multiple columns - 2 • ใช้เส้นกำกับ

37. multiple columns - 3 • ใช้สีที่ต่างกันในแต่ละแถว sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85

38. multiple columns - 4 • ลืมข้อจำกัดเกี่ยวกับการจัดวางแนว โดยใช้การจัดชิดขวา • แสกนข้อมูลข้อมูล + ตัวเลขง่าย • อาจไม่เหมาะกับการค้นหาชื่อข้อมูลอย่างเดียว sherbert 75 toffee 120 chocolate 35 fruit gums 27 coconut dreams 85

39. White space • เปรียบเสมือนเป็นตัวกั้นระหว่างข้อมูลเพื่อช่วยจัดกลุ่มสิ่งที่สัมพันธ์กัน • ข้อมูลที่สัมพันธ์กันแยกออกจากกันเราจะรู้สึกว่ามีอะไรผิดปกติไป Use of space A D B C F E (i) Space to separate (ii) Space to structure (iii) Space to highlight

40. กลุ่มการละลายอาหาร กลุ่มเลือกอาหาร กลุ่มเวลาที่ใช้ physical controls • การจัดกลุ่มgrouping of items

41. 1) ชนิดการอุ่น 1 2) อุณหภูมิ 3) เวลาที่ใช้ 2 4) เริ่มต้นทำงาน 3 4 physical controls • grouping of items • การจัดเรียงลำดับ

42. ใช้สีต่างกันแยกตามฟังก์ชันใช้สีต่างกันแยกตามฟังก์ชัน ใช้การตีกรอบล้อมฟังก์ชันที่ในกลุ่มเดียวกัน physical controls • grouping of items • order of items • การตกแต่ง • ใช้สีต่างกันตามแต่ละฟังก์ชัน • ใช้การตีกรอบล้อมกลุ่มฟังก์ชันชนิดเดียวกัน

43. วางแนวข้อมูลไว้ตรงกลางวางแนวข้อมูลไว้ตรงกลาง physical controls • grouping of items • order of items • decoration • การจัดวางแนว • centered text in buttons? easy to scan ? ? ง่ายต่อการอ่าน ?

44. ทำให้กลุ่มของฟังก์ชันถูกแยกออกจากกันทำให้กลุ่มของฟังก์ชันถูกแยกออกจากกัน physical controls • grouping of items • order of items • decoration • alignment • การใช้พื้นที่ว่าง • gaps to aid grouping

45. user action and control กรอกข้อมูล รู้ว่าต้องทำอะไร การทำงานสื่อหรือกระตุ้นให้รู้ว่าต้องทำอย่างไร

46. Name: Alan Dix Address: Lancaster Name: Alan Dix Address: Lancaster Name: Alan Dix Address: Lancaster entering information • forms, dialogue boxes • presentation + data input • similar layout issues • alignment - N.B. different label lengths • logical layout • groupings • natural order for entering information • top-bottom, left-right (depending on culture) • set tab order for keyboard entry  ?

47. knowing what to do • รู้ว่าอะไรคลิกได้ (active) และอะไรเป็นข้อมูลให้อ่านอย่างเดียว (Passive) • ตรงไหนคลิกได้ • ตรงไหนกรอกข้อมูลได้ • ใช้การออกแบบเหมือนกันหมดในทั้งระบบ • e.g. เว็บunderlined links • การใช้งาน label และ icon • แบบมาตรฐานใช้กับการทำงานปกติ • ตัว bold อาจใช้บอกสถานะว่ากำลังทำงานอยู่

48. appropriate appearance สามารถแสดงข้อมูลได้ ความสวยงามกับการสนับสนุนการทำงาน สีและการใช้งาน 3D

49. name size chap1 chap10 chap11 chap12 chap13 chap14 … 17 12 51 262 83 22 … name size chap10 chap5 chap1 chap14 chap20 chap8 … 12 16 17 22 27 32 … presenting information • ขึ้นอยู่กับจุดประสงค์ในการใช้งาน • เรียงตามลำดับ(which column, numeric alphabetic) • ข้อมูลแบบข้อความหรือไดอะแกรม • หากข้อมูลมีความซับซ้อนอาจใช้ scatter graph หรือ histogram • ใช้หลักในการออกแบบข้อมูลบนกระดาษ • และเพิ่มการโต้ตอบเข้าไป • ทำให้การนำเสนอมีความน่าสนใจมากขึ้น • เช่นความสามารถในการเรียงลำดับข้อมูลตามคอลัมน์ • กราฟเคลื่อนไหวได้ size

50. aesthetics and utility • การออกแบบที่สวยงาม • ช่วยให้ผู้ใช้พึงพอใจและทำให้การทำงานมีประสิทธิภาพมากขึ้น • ความสวยงามกับฟังก์ชันการทำงานอาจขัดแย้งกัน • การออกแบบที่ใช้หลากหลายรูปแบบง่ายต่อการแยกความแตกต่าง • การออกแบบที่ง่ายเกินไป – มีความแตกต่างน้อยอาจทำให้เกิดความสับสน • พื้นหลังของข้อความ • สวยงามแต่ก็ทำให้อ่านยาก • แต่เราสามารถออกแบบงานที่ใช้งานได้ดีและมีความสวยงามด้วย • เช่นการใช้พื้นที่ว่างในการจัดกลุ่ม • หรือการออกแบบที่แตกต่างไปเลยเช่น iMAC