พื้นฐานการออกแบบปฏิสัมพันธ์ (Interaction Design Basic)
•
5 likes•4,387 views
#พื้นฐานการออกแบบปฏิสัมพันธ์ #Interaction Design Basic การออกแบบการปฏิสัมพันธ์ ไม่ใช่แค่การโต้ตอบระหว่างมนุษย์กับคอมพิวเตอร์เท่านั้น และไม่ใช่แค่ผลงานด้านมัลติมีเดีย แต่การปฏิสัมพันธ์เป็นการคิดเชิงระบบ ที่มนุษย์สามารถจะทำอะไรบางอย่างทั้งกับสิ่งมีชีวิตและไม่มีชีวิต
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Similar to พื้นฐานการออกแบบปฏิสัมพันธ์ (Interaction Design Basic)
Similar to พื้นฐานการออกแบบปฏิสัมพันธ์ (Interaction Design Basic) (7)
More from Dr.Kridsanapong Lertbumroongchai
More from Dr.Kridsanapong Lertbumroongchai (20)
พื้นฐานการออกแบบปฏิสัมพันธ์ (Interaction Design Basic)
- 1. พื้นฐานการออกแบบปฏิสัมพันธ์ Interaction Design Basic ดร.กฤษณพงศ์ เลิศบารุงชัย facebook.com/TouchPoint.in.th TouchPoint.in.th
- 2. การออกแบบการปฏิสัมพันธ์ ไม่ใช่แค่การโต้ตอบระหว่างมนุษย์กับคอมพิวเตอร์ เท่านั้น และไม่ใช่แค่ผลงานด้านมัลติมีเดีย แต่การปฏิสัมพันธ์เป็นการคิดเชิงระบบ ที่มนุษย์สามารถจะทาอะไรบางอย่างทั้งกับสิ่งมีชีวิตและไม่มีชีวิต
- 4. การที่เราจะปฏิสัมพันธ์กับสิ่งใดนั้น ย่อมมีการปฏิสัมพันธ์โต้ตอบกลับมา ถ้าเป็น สิ่งมีชีวิตก็จะขึ้นอยู่กับประสบการณ์ของผู้ถูกปฏิสัมพันธ์ด้วย ถ้ากับสิ่งของจะขึ้นอยู่ กับการออกแบบซึ่งจะต้องศึกษาถึงประสบการณ์ผู้ใช้
- 6. เข้าใจคอมพิวเตอร์ เช่น ความจุของพื้นที่ ระบบปฏิบัติการ หน่วยประมวลผล และหน่วยความจา การออกแบบ สาหรับการปฏิสัมพันธ์ระหว่างมนุษย์กับคอมพิวเตอร์ เราต้องเข้าใจอะไรบ้าง เข้าใจผู้ใช้งาน ให้ศึกษาในด้านของกายภาพ ผลกระทบต่อสังคม ความผิดพลาดของ มนุษย์ที่อาจเกิดขึ้นได้ และมองถึงการ ปฏิสัมพันธ์ในด้านต่างๆ
- 7. ความผิดพลาดของมนุษย์ ความผิดพลาดของมนุษย์มักเกิดขึ้นเสมอ เช่น เครื่องบินตก อุบัติเหตุในโรงงาน ซึ่ง มักจะถูกคิดว่าเป็นความผิดพลาดของมนุษย์ แต่เมื่อคอนกรีตแตก ประตูแตก มักจะ บอกว่าเป็นเพราะน้าหนักตัวมนุษย์ที่มากเกินไป ตกลงเป็นความผิดของมนุษย์หรือ ความผิดของการออกแบบ เพราะฉะนั้นเราจะต้องออกแบบมาให้ดีตั้งแต่แรก
- 19. การออกแบบที่ประสบความสาเร็จอาจไม่ได้มาจากทฤษฎีหรือหลักการของ (Human Computer Interaction) เท่านั้น เนื่องจากมันครอบคลุมถึงสิ่งต่างๆ ที่ ไม่ใช่คอมพิวเตอร์ ดังนั้นการออกแบบปฏิสัมพันธ์ที่ดีที่สุดคือการคานึงการ ออกแบบที่มองเห็นความคิดของผู้ใช้
- 23. การมุ่งความสนใจไปที่ผู้ใช้งาน การมุ่งความสนใจไปที่ผู้ใช้งาน จะต้องรู้ข้อมูลเกี่ยวกับผู้ที่จะมาใช้สิ่งที่เราออกแบบ หรือสร้างขึ้น โดยสิ่งที่ต้องรู้เกี่ยวกับผู้ใช้งาน ได้แก่ พวกเขาคือใคร พวกเขาเป็นคนอย่างไร มีพื้นฐานทางวัฒนธรรมอย่างไร เป็นไปได้หรือไม่ที่พวกเขาจะไม่ชอบในงานของเรา
- 25. รายละเอียดส่วนบุคคล นายศิวกร อายุ 42 ปี เขาเป็นอาจารย์มหาวิทยาลัยมา 14 ปี เขาเป็นคนที่ไม่สันทัดการใช้ เทคโนโลยีใหม่ๆ ที่ใช้ในการจัดการเรียนการสอน เขาเป็นอาจารย์ที่เข้าสอนตรงต่อเวลา เสมอ และใช้วิธีการจัดการเรียนการสอนแบบดั้งเดิมมาโดยตลอด หลังจากสถานณการณ์ โควิด 19 เข้ามา ทาให้มหาวิทยาลัยต้องออกนโยบายการจัดการเรียนการสอนออนไลน์ เท่านั้น ห้ามให้นักศึกษาเข้ามหาวิทยาลัยโดยไม่จาเป็น นายศิวกรจึงรู้สึกเครียดกับการ จัดการเรียนการสอนรูปแบบใหม่ เรื่องราวสามารถนามาใช้ในการออกแบบได้ ซึ่งอาจจะเกี่ยวกับการติดต่อสื่อสารกับคน การเปรียบเทียบกับรูปแบบอื่น การเข้าใจชีวิตวิถีใหม่ที่เปลี่ยนแปลงไป
- 26. การคิดเชิงออกแบบการปฏิสัมพันธ์ อะไรคือสิ่งที่พวกเขาสามารถเห็นได้ (ซึ่งอาจจะเป็นแบบร่าง) อะไรคือสิ่งที่พวกเขาสามารถทากับมันได้ (เช่น ใช่คีย์บอร์ด เมาส์ การสัมผัส) อะไรคือสิ่งที่พวกเขาคิด
- 29. การใช้เรื่องราวมาช่วยในการออกแบบ • เพื่อการติดต่อกับผู้อื่น ซึ่งจะมีคนออกแบบ ลูกข่าย และผู้ใช้งาน • เพื่อการเปรียบเทียบกับระบบอื่น • เพื่อการเคลื่อนไหวของแต่ละหน้า ทาให้เห็นถึงลักษณะที่มองเห็นได้ ส่วนรายละเอียดของเรื่องราวที่จะทาให้มองเห็นถึงพฤติกรรม
- 30. ทิศทางการออกแบบ โครงสร้างแบบง่ายๆ ทาเป็นแบบหน้าจอเดียว โครงสร้างแบบครอบคลุม แสดงหน้าจอทั้งหมดให้เห็น
- 31. การจัดระดับ • รูปแบบทางเลือก เช่น เมนู และปุ่ม เป็นต้น • การออกแบบหน้าจอ จะเป็นแบบทั้งหน้าจอ หรือแค่แสดงเป็นส่วนหนึ่งของหน้าต่าง สามารถตัวชี้ในการออกแบบสิ่งแวดล้อม เช่น ระบบปฏิบัติการ โปรแกรมอื่นๆ
- 32. สิ่งที่ต้องคิดในการออกแบบเว็บไซต์ • การออกแบบโครงสร้างเว็บไซต์ • การออกแบบหน้าจอ • การออกแบบตัวนาทาง • การออกแบบส่วนต่างๆ • การวางเลย์เอาท์ • การเชื่อมต่อภายนอก • วิดเจ็ตตัวเลือก • การควบคุมด้วยปุ่มต่างๆ
- 34. ไดอะแกรมเชิงสัมพันธ์ ส่วนของโปรแกรม หน้าจอ หรือกลุ่มของหน้าจอ โดยทั่วไปแล้วจะแยกการทางาน ออกจากกัน การนาทางแบบมีความสัมพันธ์ ยิ่งลึกยิ่งยาก The System ManagementInfo and Help Messages Add User Remove User
- 35. ไดอะแกรมเครือข่าย อะไรจะเกิดขึ้นบ้างเมื่อเลือกอย่างใดอย่างหนึ่งขึ้นมา | ต้องรวมถึงสาขาหรือแขนง ของมันด้วย | มีหลายหน้าที่ในการที่มันสัมพันธ์กันอยู่ระหว่างโปรแกรม Main Screen Remove User Add User Remove User
- 36. การออกแบบหน้าจอและการวางเลย์เอาท์ หลักการพื้นฐาน การรวมกลุ่ม โครงสร้าง การวางตาแหน่ง การใช้พื้นที่สีขาว
- 39. การจัดลาดับของแต่ละชิ้น • การคิด ต้องดูว่าอะไรคือลาดับตามธรรมชาติของมัน • การจัดลาดับของแต่ละหน้าจอต้องเข้ากันได้ โดยการใช้รูปร่าง การใช้พื้นที่ว่าง การเว้นวรรคอย่างถูกต้อง • การสั่งการ จะต้องระมัดระวังว่าแต่ละส่วนมันจะเข้ากันไม่ได้ 1 2 3 4
- 41. การจัดวางชื่อ • ปกติแล้วธรรมเนียมของชาวตะวันตก มักจะมองที่นามสกุลก่อน • ธรรมเนียมของไทย มักจะมองที่ชื่อก่อน Kridsanapong Lertbumroongchai • ฉะนั้นต้องทาให้มองง่ายเข้าไว้
- 42. การจัดวางตัวเลข ต้องคิดถึงวัตถุประสงค์ของการจัด ซึ่งปกติแล้วตัวเลขที่มีความยาวจะมีค่ามากที่สุด แต่มันก็ไม่เสมอไป เมื่อเราวาตาแหน่งของจุดทศนิยม ตัวเลขที่ยาวที่สุดอาจไม่ได้ใช่ ตัวเลขที่มีค่ามากที่สุดก็ได้
- 43. การจัดวางตัวเลข การจัดวางให้อยู่ใกล้กันเพื่อให้มองเห็นง่าย คอมพิวเตอร์ 59900 กล้องถ่ายรูป 29900 โทรศัพท์มือถือ 9900 กระเป๋า 790 อาจจะต้องระวังเพราะมันอาจไม่ค่อยสวยงาม
- 44. การจัดวางตัวเลข การใช้เส้นในการนาสายตา คอมพิวเตอร์ 59900 กล้องถ่ายรูป 29900 โทรศัพท์มือถือ 9900 กระเป๋า 790
- 45. การจัดวางตัวเลข การใช้เส้นในการนาสายตา + คอมม่า คอมพิวเตอร์ 59,900 กล้องถ่ายรูป 29,900 โทรศัพท์มือถือ 9,900 กระเป๋า 790
- 46. การจัดวางตัวเลข การใช้ความเข้มของสีพื้นหลังแต่ละแถวที่แตกต่างกัน คอมพิวเตอร์ 59900 กล้องถ่ายรูป 29900 โทรศัพท์มือถือ 9900 กระเป๋า 790
- 47. การจัดวางตัวเลข การใช้ความเข้มของสีพื้นหลังแต่ละแถวที่แตกต่างกัน + คอมม่า คอมพิวเตอร์ 59,900 กล้องถ่ายรูป 29,900 โทรศัพท์มือถือ 9,900 กระเป๋า 790
- 50. การป้อนข้อมูลเข้า ฟอร์ม หรือกล่องโต้ตอบ มันจะแสดงออกมาพร้อมกับให้ป้อนข้อมูลเข้าไป จะมี ปัญหาคล้ายๆ กับการจัดวางเลย์เอาท์ เช่น จะทาอย่างไรเมื่อตัวหนังสือมีขนาด ความยาวไม่เท่ากัน ชื่อ นามสกุล Name Sur name TH EN
- 51. เลย์เอาท์ทางตรรกะ โดยการวิเคราะห์ดูจากหน้าที่การทางาน / การรวมกลุ่ม / การจัดลาดับตามธรรมชาติของการป้อนข้อมูลเข้า เช่น จาก บนลงล่าง จากซ้ายไปขวา (ขึ้นอยู่กับแต่ละวัฒนธรรมด้วย) 1 2 3 4
- 52. การจัดลาดับของการป้อนข้อมูล • ต้องรู้ว่าจะทาอะไร • อะไรที่เป็นฝ่ายรุก อะไรที่ต้องเป็นฝ่ายรับ จะต้องคลิกตรงไหน • การใช้รูปแบบอักษรเข้ามาช่วย เช่น การขีดเส้นใต้สาหรับการเชื่อมโยงเว็บไซต์ • การป้ายข้อความและไอคอน จะต้องดูมาตรฐานของการใช้งานปกติ ภาษาที่ใช้
- 53. การจัดลาดับของการป้อนข้อมูล • การป้ายข้อความและไอคอน จะต้องดูมาตรฐานของการใช้งานปกติ ภาษาที่ใช้ • การปรากฏที่เหมาะสม ได้แก่ การแสดงข้อมูลอย่างมีสุนทรียภาพ การใช้สี • การนาเสนอข้อมูล จะต้องดูว่าตรงตามเป้าหมายที่ตั้งเอาไว้หรือไม่ การเรียงลาดับข้อมูล คอลัมน์ไหน ควรอยู่ก่อนอยู่หลัง ต้องให้ตัวเลขหรือตัวอักษรอยู่ก่อนกัน
- 55. การใช้สี • จอภาพแบบเก่าจะมีข้อจากัด ทาให้แสดงสีออกมาได้ไม่ตรง • การใช้สีสันมากเกินไป ทาให้หาอะไรไม่เจอ • การใช้สีสันกับคนตาบอดสี ย่อมไม่ได้ผล เพราะพวกเขาจะไม่รู้ว่าเป็นสีอะไร • ลองปรับโทนสีของจอคอมพิวเตอร์เป็นแบบสีเทา แล้วดูว่ายังสามารถอ่าน หนังสือบนหน้าจอได้อย่างชัดเจนหรือไม่
- 56. สามมิติ การใช้สามมิติอาจเหมาะกับการแสดงสารสนเทศทางกายภาพ และกราฟ บางอย่าง แต่ถ้าใช้มากเกินไปก็อาจดูไม่เหมาะสม เช่น การใช้สามมิติกับตัวอักษร อาจทาให้อ่านลาบาก มองไม่เห็น การใช้กราฟวงกลมสามมิติอาจทาให้มองไม่ชัด
- 57. เข้าใจวัฒนธรรม แต่ละวัฒนธรรมจะมีรูปแบบการปฏิสัมพันธ์ที่แตกต่างกัน โดยเฉพาะในเรื่องของ ภาษาที่ใช้ในการสื่อสาร ถ้าต้องการสื่อสารได้ตรงกันทั่วโลก จะต้องพยายามใช้ สัญลักษณ์แทน
- 58. การสร้างต้นแบบ การสร้างต้นแบบทาขึ้นเพื่อให้เห็นภาพ และเพื่อเริ่มต้น ดาเนินการสร้างสิ่งต่างๆ ได้อย่างดี หลุมพรางของการสร้างต้นแบบ จาเป็นจะต้องเริ่มจากจุดที่ดีก่อน จาเป็นต้องทาความเข้าใจว่าอะไรมันผิด จะได้ไม่ทาต่อไปอีก
- 59. สรุป พื้นฐานของการออกแบบปฏิสัมพันธ์ คือ การที่ต้องทราบถึงเป้าหมายในการ ออกแบบตามข้อกาหนด ได้แก่ วัตถุดิบ และปัจจัยต่างๆ ที่เราจะต้องออกแบบภายใต้ แพล็ตฟอร์มที่กาหนด โดยกระบวนการออกแบบมีส่วนสาคัญที่ต้องดาเนินการ คือ ความต้องการของระบบ การวิเคราะห์เพื่อทาความเข้าใจถึงความสาคัญของระบบ การลงมือออกแบบ การทวนซ้า และการสร้างงานต้นแบบเพื่อให้แน่ใจว่าได้สิ่งที่ตรง ตามความต้องการมากที่สุด รวมถึงการปรับปรุงและการนาไปใช้งานด้วย
- 60. แบบฝึกหัด 1. จงอธิบายความหมายของการออกแบบปฏิสัมพันธ์ 2. จงอธิบายกระบวนการออกแบบการปฏิสัมพันธ์ 3. จงยกตัวอย่างสิ่งของในบ้านที่ออกแบบมาดี 1 ชิ้น และไม่ดี 1 ชิ้น พร้อมรูปภาพประกอบ และอธิบาย ว่าดีหรือไม่ดีอย่างไร
- 61. ฐิติรัตน์ ศิริบวรรัตนกุล ส่วนต่อประสานงานกับผู้ใช้และการออกแบบปฏิสัมพันธ์ สานักพิมพ์สถาบันบัณฑิตพัฒนบริหารศาสตร์ สถาบันบัณฑิตพัฒนบริหารศาสตร์ User Interface and Interaction Design เอกสารอ้างอิง