(อาจารย์) ขึ้นมาค่ะ เพราะว่าในนี้มีงานให้เราด้วย 2 งานนะคะ ท้าย ๆ คาบ ดูสไลด์ตามไปสวัสดีค่ะ ได้ยินนะคะ มีใครเข้า Ca class ครูสอนวิชานี้หลายห้องนะคะ ก็จะมีตั้งชื่อชั้นเรียนแยกกันไปนะคะ วันนี้เราพูดถึงเรื่อง Interactionนะคะ ภาษาไทย ก็คือการสัมพันธ์นะคะ ตามชื่อวิชาของเรานะคะ การปฏิสัมพันธ์กันระหว่างมนุษย์กับคอมพิวเตอร์นะคะ เราพูดถึงมนุษย์ พูดถคสภาพแวดล้อมในการทำงาน ที่มนุษย์ที่มีคอมพิวเตอร์ในการดำเนินการไปแล้วนะคะ พูดถึงกระบวนการเรียนรู้ รับรู้นะคะ การถ่ายทอดนะคะ นะคะ การประมวลผลนี่ไปแล้ว เราพูดถึงเทคโนโลยีไปแล้วด้วย ในคราวที่แล้ว ในคราวนี้ยังอยู่ในเฟสของมนุษย์กับคอมพิวเตอร์อยู่นะคะ ก็คืออยู่ในส่วนตามตัว diaของ SCRI ในภาพนี้วันนี้จะพูดถึงส่วนของการออกแบบ Input Output โดยใช้หลักการ นี่เราจะเรียกว่า "ส่วนต่อประสาน" นะคะ ถือเป็น 1 ในกระบวนการกระบวนการคอมพิวเตอร์กราฟฟิกเหมือนกันนะคะ อยู่นะ ใน คราวนี้นะคะ ตัวคอนเท้นที่จะพูดถึงวันนี้ ก็จะมีทั้งนิยามนะคะ ของการปฏิสัมพันธ์ ก็คือความหมายนั่นล่ะ ปฏิสัมพันธ์คืออะไรบ้าง มีแบบจำลองเป็นตัวหลักนะคะ ของงานปฏิสัมพันธ์นะคะ มี Module มีแบบจำลองของใครบ้างนะคะ หลักของการยศาสตร์ หรือ Intentionก็คือกระบวนแบบที่เราจะใช้ในส่วนของ Interaction นะคะ หรือส่วนต่อประสาท Interaction ส่วนต่อประสานนะคะ ครูก็จะสรุปให้ว่าเราเรียนอะไรไปบ้าง ให้ทำมีงานให้ อันนี้มาดูนิยามของปฏิสัมพันธ์ก่อนนะคะ การปฏิสัมพันธ์คืออะไรนะคะ ก็คือการติดต่อสื่อสารระหว่าง uUser ระบบนะคะ ผู้ใช้กับระบบ โดยติดต่อผ่านส่วนที่เราเรียกว่า "ส่วนต่อประสานนะคะ ซึ่งถ้าเป็นมนุษย์กับมนุษย์นี่ เราจะเรียก ระบบนี่เราไม่สามารถคุยกับคอมพิวเตอร์ได้โดยตรง เราจะติดต่อกับคอมพิวเตอร์นี่ผ่านส่วนที่เรียกว่า "ส่วนต่อประสาน" นะคะ หรือเราอาจจะเรียกว่าผ่านตัวกลางนะคะ ส่วนต่อประส ผู้ใช้กับตัวระบบเองนะคะ ส่วนต่อประสานเราจะใช้เมื่อไร เราจะใช้เมื่อผู้ใช้เริ่มป้อนคำสั่งนะคะ หรือการออกคำสั่งนั่นล่ะ ให้ส่วนต่อประสานนะคะ แล้วหน้าที่ หลังจากนั้น ก็จะเป็ฯ ที่ต้องดำเนินตามคำสั่งของผู้ใช้ไปนะคะ ดังนั้น นะคะ จึงสรุปได้ว่าการสื่อสารระหว่างคนนี่ ระหว่างมนุษย์หรือผู้ใช้กับระบบนี่ เป็นรูปแบบการสื่อที่เรียกส lagure เป็นภาษาทางอ้อม เพราะเราไม่ได้คุยกับคอมพิวเตอร์ทางตรง อันนี้คือการสื่อสารแบบ direct action คือ สื่อสารโดยตรง แต่ของเรานะคะ สื่อสารผ่าน คราวนี้แบบจำลองการปฏิสัมพันธ์นะคะ ใน SCI มีแบบจำลองหลัก ๆ อยู่ 2 ตัวนะคะ อันแรกเลย ก็คือแบบจำลองที่เราจะพูดถึง เป็นต้นกำเนินของคนที่คิดเกี่ยวกับทฤษฎีการปฏิสัมพันธ์นะคะ โดยก่อนที่เราจะพูดถึงแบบจำลองนะคะ เราจะต้องรู้จักใน 3 ส่วนนี้ก่อน ก็คือ 1. คำศัทพ์ นะคะ หรือสร้างปฎิสัมพันธ์เราจะต้องรู้คำศัพท์ก่อนนะคะ เราค่อยเรียนรู้แบบจำลองว่ามีกระบวนการอะไรบ้างนะคะ แล้วก็กรอบนะคะ ของการปฏิสัมพันธ์มพันธ์มีอะไรบ้าง ศัพท์ที่เกี่ยวข้องกับอันนี้เราต้องมีความเข้าใจในคำศัพท์ตรงนี้ก่อน นะคะ ก่อนที่เราจะไปสร้างส่วนต่อประสานในการปฏิสัมพันธ์ คำแรก ก็คือ Domain นะคะ Key word ที่สำคัญของ Content นะคะ อาจารย์จะ Hiligh ไว้ให้ เผื่อนักศึกษาไปอ่านสอบ จับประเด็น ไปสรุปเนื้อหาอีกทีนะคะ เราสังเกตเป็นตัวหนังสือสีเหลืองให้ เป็นคีย์เวิร์ดที่สำคัญของ Paragraph นะคะ เป็นคีย์เวิร์ดที่สำคัญของเรื่องนั้น ๆ นะคะ อย่าง domain นี่ มันก็คือขอบเขตของการทำงานนะคะ ซึ่งเวลาเราศึกษาเรื่องใดเรื่องหนึ่งนี่ หรือขอบเขตของงานให้ชัดเจนนะคะ เช่น domain ของกราฟิกดีไซน์ Domain ของกราฟฟิก ศึกษาของเขตของการศึกษาออกแบบงานกราฟิกนะคะ ยกตัวอย่าง คือ งานกราฟฟิกก็เช่น การศึกษารูปทรงต่าง ๆ การวาดพื้นผิวให้กับวัตถุ ดีไซน์นะคะ ส่วนผลลัพธ์นะคะ หรือเป้าหมายหรือ Goal ก็คือสิ่งที่นักศึกษาต้องการทำให้เสร็จ ทำให้สำเร็จนะคะ อย่างเช่น ถ้าเป็นกราฟิก ที่เราต้องการจัดการรูปทรงต่าง ๆ ก็คือการสร้าง กำหนดเป้าหมายไว้ก่อน ในเรื่องของการดีไซน์นะคะ เราก็กำหนดเป้าหมายไว้ว่า เราต้องการสร้าง นะเป็นสีแดงล้วน เป็นผืนผ้าใบ อันนี้คือเป้าหมาย เป้าหมายปลายทางหรือผลลัพธ์ที่เราต้องการ ต้องการได้นะคะ แล้วงานที่ต้องทำมีอะไรบ้างนะคะ งานหรือการปฏิบัติเพื่อทำให้ภารกิจของเราสำเร็จนะคะ ตอนนี้ผลลัพธ์ที่เราต้องการ ก็คือการสร้างรูปทรงสามเหลี่ยมสีแดง สีแดงล้วนนะคะ ไม่มีสีอื่นมาพาดนะ งานที่ต้องทำ ก็คือเลือกเครื่องมือสำหรับเติมนะคะ เติมสี พอเลือกได้แล้วเราก็คลิกตรงรูปทรงสามเหลี่ยมนะคะ แล้วก็เอาไปเติมสี อันนี้คืองานที่ต้องทำนะคะ สุดท้ายสิ่งสำคัญนะคะ นะคะ อีกศัพท์หนึ่งที่สำคัญลืมไม่ได้เลย ก็คือ Intention Intention หมายถึง เจตนาในการสร้างงานหรือความตั้งใจจริงที่เราจะทำงาน ศัพท์ 4 คำศัพท์นี้เกี่ยวข้องกับการปฏิสัมพันธ์นะคะ เราต้องรู้ทั้ง 4 เรื่องนี้นะคะ เวลาที่เราสร้างงานปฏิสัมพันธ์นะคะ คราวนี้เรามาดูแบบจำลองของ norman บ้างนะคะ แบบจำลองของนอแมนมีอยู่การทำงานนะคะ เราเรียกว่าวงจรปฏิสัมพันธ์ Interactive cycle นะคะ แบ่งเป็น 2 ขั้นตอนใหญ่ ๆ ก็คือ เราเรียกว่า Execution หมายถึงขั้นตอนการดำเนินการนะคะ กับขั้นตอนการประเมิน evaluation นะคะ ทำแล้วก็ประเมินนะคะ มี 2 ขั้นตอนใหญ่ โดยนะคะ การนำแบบจำลอง Norman อธิบายว่าทำไมบางระบบถึงใช้งานยากกว่าบางระบบ ทำไมบางระบบมันถึงมีความซับซ้อนนะคะ ทั้ง ๆ ที่การทำงานมันก็มีแค่ 2 ส่วน ก็คือ ถ้าเของการประเมินนะคะ แต่แบบจำลองนอแมนนี่จะมาอธิบายการทำงานของระบบงานบางส่วนนี่บางงานนี่มันถึงยาก มันถึงมีขั้นตอนซับซ้อน บางงานทำไมมันง่ายนะคะ ซึ่ง Scout of Exclution ก็คือการกำหนดรูปแบบนะคะ ให้กับผู้ใช้น่ะค่ะ งานบางงานนี่ ผู้ใช้มีความต้องการที่จะทำแต่ก็ต้องการที่จะใส่ไดนะคะ แต่อีกงานหนึ่งนะคะ ผู้ใช้คาดหวังว่าจะเห็นสิ่งนี้นะคะ หรือความต้องการที่แท้จริงของผู้ใช้ ตัวระบบไม่สามารถตอบสนองผู้ใช้ได้นักศึกษาเคยเห็นงานที่... เอาเราก็ได้ นักศึกษาเป็นผู้ใช้อยู่แล้ว เป็นผู้ใช้ระบบ มีไหมคะ ที่เราต้องการเห็นระบบแบบนี้หรือต้องการเห็น View ของระบบรูปแบบหนึ่ง แต่สิ่งที่เราเห็นเป็นอีกแบบหนึ่ง อันนี้เราเรียกความคาดหวัง เคยมีระบบที่เรา หรือเข้าไปจัดการได้มากกว่านี้ โดยสิทธิ์ที่เราได้นี่ คือ ทำได้แค่นี้ มีระบบแบบนี้บ้างไหมคะ ในชีวิตเรา เคยใช้งานระบบไหนที่เราคาดหวังน่ะค่ะ ว่าเราคาดหวังน่ะค่ะ ว่าใช้ระบบนี้ 1, 2, 3 แต่พอไปใช้งานจริง ๆ มันทำงานได้แค่ 1 หรือเรามีสิทธิ์เข้าข้อมูลได้แค่ 1 อย่าง เอาอย่างนี้ ระบบของมหาวิทยาลัยเคยเข้าไปดูเกรดผ่านระบบไหมคะ เคย ในระบบนั้นเราทำอะไรได้บ้าง ระบบบริหารการสื่อสารน่ะค่ะ นักศึกษาก็จะเข้าไปใน Viwe ของนักศึกษานะคะ ข้อมูลส่วนตัวของตัวเองได้ไหมคะ ได้ไม่เอ่ย ข้อมูลส่วนตัวของเราเอง เช่น ชื่อผิด นามสกุลผิด ที่อยู่ เบอร์โทร. ได้ไหมคะ ไม่ได้ แล้วเราอยากแก้เองได้ไมหคะ คือ มันข้อมูลนะ เราอยากกรอกเอเราอยากก่อเอง แต่เขาให้สิทธิ์เราแค่เรียกดู อันนี้คือความคาดหวังของเรา ก็คือเข้าไปแล้ว ก็ข้อมูลเรา เราเปลี่ยนเบอร์ เราก็จะเห็นว่ามันเป็นเบอร์เก่า เป็นข้อมูลเก่า เราอยากแก้ใหม่ทำไม่ได้ เราต้องไปติดต่อเจ้าหน้าที่ที่อยู่ในฝ่ายแก้ไขน่ะค่ะ พอเราเข้าไปดูเห็นประวัติตัวเองแล้ว ดูเกรดตัวเองได้ไหมคะ ดูเกรดเพื่อนได้ไหมคะ ไม่ได้ อยากดูเกรดเพื่อนได้ไหมคะ อยากเห็นเกรดเพื่อนไหม อยากเห็นเกรดเพือ่น ถามว่าแล้วเพื่อนอยากให้เราให้เกรดเราไหม เราไหม คำตอบเดียวกันนะคะ เราอยากไปเห็นเกรดหรือข้อมูลคนอื่น แต่เราไม่อยากให้คนอื่นเห็นข้อมูลเรา ผลมันก็ออกมาแค่ เห็นข้อมูลเรา พอดูได้แล้วนะ ดได้แค่ข้อมูลตัวเอง แก้เกรดได้ไหม วิชานี้ตั้งใจมากเลย ทำไมถึงได้แค่ B ทำไมไม่ได้ A อย่างนี้ค่ะ แก้ไม่ได้ค่ะ เพราะสิทธิ์แค่เรียกดูนะคะ อันนี้ คือ แบบจำลองนอแมนจะมาอธิบายส่วนนี้ ระบบเหมือนง่าย ๆ นะ เห็นแล้ว แต่แก้ไม่ได้ หรือเราอยากเห็นสโคบ แต่เราก็ดูได้แค่นี้นะคะ จะอธิบายนะคะ อธิบายระบบว่าทำไมบางระบบมันถึงเป็น View แบบนี้ มันแต่ละสาย ก็จะต่างกันออกไปอีกนะคะ เพิ่มนะคะ ในกรอบการลงมือทำจริง ๆ เราเรียกระบอบการทำงานของเอบาวกับวีวนะคะ ก็คือมาขยายแบบจำลองของ Norman ว่า ในความเป็นจริงแล้ว การสร้างปฏิสัมพันธ์กับระบบนี่ เรลงไปได้เป็น 4 ส่วนหลัก ๆ นะคะ ส่วนแรก ก็คือผู้ใช้ ส่วนที่ 2 คือ Input ส่วนที่ 3 คือ ตัวระบบเองนะคะ และส่วนที่ 4 เป็นส่วน output นะคะ ซึ่งสิ่งที่นักศึกษาจะต้องทำความเข้าใจก็คือใน 4 ส่วนนี้นะคะ จะมีภาษานะคะที่ใช้ในการปฏิสัมพันธ์นะคะ ถ้าเป็นตัวระบบเอง ตัวระบบหลักนี่เราจะใช้ Core Language ระบบจะใช้ภาษาแกนนะคะ ส่วนของการปฏิบัติ การทำงานของระบบ อันนี้ผู้ใช้จะสามารถใช้ภาษาที่เรียกว่า ภาษาภารกิจ หรือ ภาษาในการทำงาน เราเรียกว่า taskในการรับข้อมูล และแสดงผลนะคะ Input interface เป็นส่วนขซึ่งเป็นส่วนปฏิสัมพันธ์ที่เราจะต้อง Design เราเป็นเอกเทคโนโลยีสารสนเทศนะคะ ไม่ใช่ใช้งานระบบ นักศึกษาต้องสามารถดีไซน์ อีกหัวข้อหนึ่งนะคะ เรารู้แล้ว ส่วนที่เราต้องทำ ก็คือส่วน interface หรือส่วนการสร้างส่วนต่อประสานนะคะ เราจะสร้างแบบไหนนะคะ นี้ได้ไหมเอ่ย การยศาสตร์  หรือ โอโคโดมิเคยได้ยินไหมคะ เคยพูดไปตอนบทที่ 1 ใน  นะคะ มี เออโคโนมิก นะคะ ภาษาไทยแปลว่า การยศาสตร์ นะคะ หมายถึงการศึกษาถึงลักษณะทางกายภาพของคนนะคะ บางทีเราจะศึกษาในสโคปของ humที่เกี่ยวข้องกับมนุษย์ ปัจจัยที่เกี่ยวข้องกับระบบนี่ล่ะ ก็เลยมีตัวอย่างนะคะ นอกจากเราจะศึกษามนุษย์แล้วนะคะ เราก็จะ ที่เอามาอำนวนความสะดวกในการทำงานนะคะ ในที่นี้นะคะ เราเป็นเอกทางด้านคอมพิวเตอร์นะคะ เอกเทคโนโลยีสารสนเทศนี่ อยู่ในฟิลล์ของคอมพิวเตอร์นะคะ ครูก็เลยเรียก ที่เป็นเกี่ยวข้องกับพวกเราอย่างเช่น การใช้งาน การนั่ง การยืนนะคะ อันนี้คือลักษณะทางกายภาพที่เห็นได้นะคะ ควรนั่งแบบไหน ควรยืนแบบไหน มือต้องวางแบบไหน สายตานี่ค่ะ จะอยู่ประมาณไหนห่างกันเท่าไร รวมไปถึงการออกแบบเก้าอี้ อันนี้เป็นตัวอย่างนะคะ การออกแบบเมาส์ ออกแบบคีย์บอร์ด หลายอุปกรณ์เหมือนกันในการออกแบบนะคะ เพื่อให้เหมาะสมกับสรีระหรือกายภาพของคนแต่ละคนนะคะ คราวนี้นะคะ หัวใจสำคัญของบทนี้ ก็คือ Interaction stไทยใช้คำว่า "กระบวนแบบการปฏิสัมพันธ์นะคะ หมายถึงอะไรเอ่ย กระบวนแบบ พูดถึงที่ไปที่มาที่มาก่อน ถ้าพูดถึงปฏิสัมพันธ์นะคะ ภาษาง่าย ๆ ที่เราใช้ ก็คือคำสนทนา การพูดคุยกัน ถ้าเป็นการปฏิสัมพันธ์แบบมนุษย์ 1 งต่ออีกคน 2 คนนะคะ แต่ละคนเวลาติดต่อสื่อสารกัน ก็คือการสนทนากัน แต่เวลามนุษย์คนหนึ่งสื่อสารกับระบบคอมพิวเตอร์นี่ จะผ่านส่วนที่เรียกว่า หรือส่วนต่อประสารหรือที่เราเรียกว่า Dialog น่ะค่ะ ซึ่ง dialogue จะมีหลากหลายรูปแบบมาก เราสามารถใช้ เพราะตัวนี้นะคะ เน้นสอนตอน ปี 3 เทอม 2 น่ เพื่อให้นักศึกษาเอาตัวความรู้ที่ได้ในวิชานี้ ในวิชานี้ในเรื่องนี้ไปปรประยุกต์ใช้ในวิชา นะคะ ไปใช้ในการออกแบบนะคะ เรามาดูกระบวนแบบกัน อันนี้เป็นตัวอย่าง จะมีตั้งแต่กระบวนแบบเก่า ๆ เลย  ใช้อยู่ในปัจจุบัน แต่จริง ๆ มีเยอะกว่านี้อีก ครูทำสัญลักษณ์เยอะนะคะ ที่ยกตัวอย่างมานะคะ เช่น Command line interface หนึ่งนะคะ ในการสร้างส่วนต่อประสาน ภาษาไทยใช้คำว่า "ส่วนต่อประสานที่เป็นแบบบรรทัดคำสั่ง" หรือส่วนต่อประสานที่เป็นเมนูนะคะ เราเรียก natural language หรือจะเป็นแบบ Query interface WIMP Point and click interfaces Query interface navigation และอื่น ๆ เราสามารถเลือกนะคะ รูปแบบส่วนต่อประสานต่อไปนี้ที่กล่าวมานี่ไปใช้ในงานเราได้ อันนี้ยังไม่หมดนะคะ ครูยกตัวอย่างให้ดู ให้เราพอนึกภาพออกว่าถ้าเราจะสร้างระบบขึ้นมานี่ นักศึกษาจะต้องมีความรู้ทางด้านดีไซน์พวกส่วนต่อประสานนี้ด้วยนะคะ มีอธิบายให้บางส่วน นะคะ ให้บางส่วน เช่น ส่วนต่อประสานที่เป็นแบบบรรทัดคำสั่ง เราเรียกว่า "Command Line Interface"เป็นอย่างไร ก็คือการสร้าง Interv เราสามารถบอกหรือแสดงคำสั่งให้คอมพิวเตอร์ทราบได้โดยตรง นะคะ โดยการป้อนคำสั่ง หรือ Function keys คือ การป้อนนี่เราอาจจะป้อนเป็นตัวอักษรเดี่ยว ๆ น่ะค่ะ หรือเป็นตัวย่อนะคะ หรือเป็นข้อความ เป็นคำยาว ๆ เป็นประโยคยาว ๆ นะคะ แต่มันจะต้องถูกรูปแบบของคำสั่ง เขาเรียก "syntax" น่ะ จะไม่สามาสามารถพิมพ์คำที่เราคิดได้ทั้งหมด มันจะมีคำบังคับว่าให้ใช้คำไหนสื่อสารกับคอมพิวเตอร์ได้บ้างนะคะ ข้อดีของ Command line ก็คือคำสั่งที่เราป้อนเข้าไปน่ะ มันจะเข้าถึงตัวระบบได้โดยตรง ไม่ต้องผ่านการแปลงนะคะ คอมพิวเตอร์รับรู้ได้เลย ทำงานได้เร็วนะคะ เพราะว่าคำสั่งโดยตรง อยากฝากหรืออยากคุยกับเพื่อน เราก็คุยกับเพื่อนโดยตรงเลย อันนี้คือรับรู้กัน แต่ถ้าเกิดเราคุยกับเพื่อนคนนี้ แต่ฝากไปกับเพื่อนอีกคนหนึ่ง ออกไปโดยกระบวกการของสารที่รับไปนะคะ อันนี้เหมือนกัน ถ้าเราใช้ Command Line เราสามารถสั่งงานคอมพิวเตอร์ภายใต้คำสั่งได้โดยตรง แต่ข้อเสียของมัน คือ เราจะต้องมีความรู้เกี่ยวกับคำสั่งที่เราจะป้อนให้ระบบนะคะ ว่าคำไหนบ้างที่สามารถสั่งได้และคอมพิวเตอร์เข้าใจนะคะ ยกตัวอย่างระบบที่ใช้ Command Line เช่น พวก... แต่เป็นโหมดของ Command นะ ที่เป็นหน้าจอสีดำและคำสั่งเป็นคำน่ะนะคะ UNIX นี่ UNIX ไม่มี iไม่มี Interface เลย  ระบบปฏิบัติการ doS ก็จะเป็นหน้าตาของ Command Line ก็จะเป็นแบบนี้ เป็นหน้าจอสีดำ สีน้ำเงินก็แล้วแต่ แต่ตัวหนังสือนะคะ คำสั่งก็จะเป็นตัวหนังสือภาษาอังกฤษนะคะ เราสามารถโต้ตอบกับระบบได้ เราก็พิมพ์คำสั่งเข้าไปนะคะ อย่างเมื่อก่อนที่ครูใช้งานระบบ DOS น่ะค่ะ อย่างเช่น ครูอยากรู้ว่า Drive C มีข้อมูลอะไรเก็บอยู่บ้าง มันก็จะมีคำบังคับ C;\ เป็นการขอดูไดรฟ์ C หน่อยว่ามีอะไรบ้าง อันนี้คือการใช้คำสั่งแบบ Command line นะคะ ในทาง SCI นี่ เรามองว่า ด้อยของการปฏิสัมพันธ์ที่ใช้หลักการของ HCI ทำไมถึงเรียกว่า Command line เป็นข้อด้อยคะ เราคิดว่า เพราะเหตุใดในการออกแบบระบบ โดยใช้หลักการ HCI นี่ Command Line จุดอ่อน หรือเป็นรูปแบบโบราณเป็นวิธีเก่าที่ไม่นิยมใช้ HCI ในการออกแบบ นักศึกษาคิดว่าเป็นเพราะอะไรเอ่ย ถ้าเราออกแบบระบบมา 1 ระบบให้ผู้ใช้นี่ เราจะเรียกคำสั่งแบบนี้ไหม ให้พิมพ์คำสั่ง ถ้าพิมพ์ผิดระบบก็จะตอบกลับมาว่า Back command แปลว่าคุณพิมพ์คำสั่งผิดนะคะ จะผิดในตั่วคำสั่งเองหรือผิดรูปแบบ ก็ต้องพิมพ์ให้ถูกต้อง ทั้งเว้นวรรค ทั้งพิมพ์ตัวใหญ่ตัวเล็ก เหมือนกันเขียนโค้ดที่เป็นแบบ เขียนถ้ามันผิดมันก็ Run ไม่ได้เหมือนกันนะคะ อันนี้ถือเป็นข้อด้อยของ HCI เพราะอะไร เพราะมันใช้งานยากไง ระบบของเราที่ใช้หลักการ HCI นี้คือ ผู้ใช้สามารถ ไม่ต้องจดจำสามารถใช้งานได้ง่าย ๆ สวยงาม แต่พอ Command Line คือ เป็น command line เป็นหน้าจอแบบนี้ สวยงามไหม ยุ่งยากในการจดจำคำสั่ง ก็เลยมองว่ามันใช้งา่น คราวนี้ก็จะมีรูปแบบของเมนู Driven เมนู Interface ถ้าพูดถึง Menu ก็คือกลุ่มของทางเลือกนะคะ มันจะปรากฏบนหน้าจอ Windowนะ หน้าต่างหน้าจอเรา เวลาที่เราเข้าระบบไป ตัวเลือกจะต้องสามารถมองเห็นได้ทั้งหมด ไม่ซ้อนทับกัน เวลาออกแบบ Menu นะคะ แล้วการใช้คำเมนูมันจะเป็นข้อความน่ะค่ะ คำจะต้องสื่อความหมายด้วย โดยหลักการของการใช้เมนูนะคะ จะใช้หลักการจำนี่น้อย แต่ใช้หลักการรู้จำ เขาเรียก เราไม่จำเป็นต้องท่องจำน่ะค่ะ ว่าเมนูคำนี้คืออะไร แปลว่าอะไรนะคะ Menu File อย่างนี้ค่ะ หรือเมนูออกแบบ เมนูมมเราไม่ต้องท่องจำ แต่เราจะเรียนรู้ ก็คือการรู้จำได้เอง อ่านคำเมนูสั้น ๆ เราจะรู้ว่าคลิกตรงนี้แล้วมันจะมีอะไรออกมา อย่างนี้ค่ะ ซึ่งการใช้งานเมนู คือ การใช้เมาส์คลิ๊ก หรือเลื่อนลูกศรนะคะ ในคีย์บอร์ดในหน้าจอน่ะ เลื่อนแล้วก็คลิกนะคะ อันนี้คือการใช้งานเมนู เมนูมี 2 แบบนะคะ ในการสร้าง interface ขขอก็คือเมนูที่เป็นแบบ Pull-Doiwnpull-down แปลว่าอะไรเอ่ย ขึ้นหรือลง Down คือ ลง เวลาเราพิมพ์ข้อมูลนะคะ เช่น คลิกเมนู Tools มันก็จะมีคำสั่งเมนูย่อยลงมา อันนี้คnvงานเราได้นะคะ อีกแบบหนึ่ง คือ Pop-up Pop-up เมนูู คือ คลิกขวน่ะค่ะ คลิกขวาในโปรแกรมไหนก็ได้ แล้วมันจะมีคำสั่งลัดขึ้นมา นะคะ ในที่ไหนก็ได้ค่ะ ใน Word Excel PowerPoint หรือโปรแกรมอื่น เรียกว่า "เมนูแบบ Popup thush นะคะ มันก็จะขึ้นเด้งขึ้นมา ไม่มีหัวมีท้ายอะไรน่ะ คือ เด้งขึ้นมาเลยนะคะ อันนี้เราเรียกเมนูที่เป็นแบบ ต่อไปนะคะ กระบวนแบบที่เรียกว่า Natural languนะคะ Interface ก็คือภาษาธรรมชาตินะคะ ภาษาธรรมชาตินี่ เป็นภาษาที่ใช้ติดต่อกับคอมนะคะ ซึ่งถ้าพูดถึงภาษาธรรมชาติผู้ใช้จะคุ้นเคยนะคะ เราสามารถใช้ภาษาธรรมชาติในการสั่งงานระบบได้ เรียกว่า "ถ้าเราพัฒนาระบบW เรียนรู้การ speech recognition คือ การให้ให้ระบบเรียนรู้การรู้จำเสียงพูด แล้วระบบก็จะโต้ตอบกับเราได้ อันนี้เราเรียก "ภาษาธรรมชาตินะคะ บางทีเราจะเรียกการพิมพ์ด้วยภาษาธรรมชาติ ด้วยภาษาธรรมชาติ คือ การพิมพ์ด้วยภาษาพูดน่ะค่ะ แล้วคอมพิวเตอร์ก็เข้าใจ หรือบางทีเราจะเรียกว่าภาษาที่มนุษย์ใช้ในการโต้ตอบนะคะ แต่ความยากของการสร้างภาษาธรรมชาติในการสร้่วระบก็คือมันจะมีปัญหาเรื่องความคลุมครือของเสียง น่ะค่ะ ถ้ามันไม่ชัดระบบจะไม่เข้าใจ จะไม่สามารถดทำงานได้ ตามคำสั่งเสียงเราออกไปนะคะ เหมือนเราออกเสียงไม่ชัดคุยกันนี่ เพื่อนก็จะงง ว่าเราพูดอะไร เคยใช้คำสั่งในการสั่งงานคอมพิวเตอร์ไหมคะ สมาร์ตโฟนเป็นคอมพิวเตอร์ประเภทหนึ่ง เราเคยสั่งเครื่องโทรศัพท์มือถือเราทำอะไรบ้าง สั่งงานด้วยเสียง คุยกับ Siri สิริ เป็นระบบไหมคะ มีไหมคะ ศิริตอบไม่ได้ แต่อาจจะตอบไม่ตรง เพราะ Siri ไม่เข้าใจว่าเราถามอะไร มีไหมคะ แต่ระบบตัวรู้จำเสียงพูดนี่ นอกจากศิริมีอย่างอื่นไหม Google สั่งงานด้วยเสียงได้ เช่น ต้องการค้นคำ แต่บางทีเราไม่สะดวกหรือเราขี้เกียจพิมพ์นะ เราก็จะพูด แต่เราต้องไปกดตรงไมค์ก่อน เปิดให้เรากรอกข้อมูลที่เป็นเสียงได้ อันนี้ คือ ภาษาธรรมชาตินะคะ เราเคยคิดที่จะพัฒนาระบบที่สั่งงานด้วยภาษาธรรมชาติไหมคะ โครงงานเรามีไหม ไม่ต้องพิมพ์ สั่งงาน มีไหมคะ ทฤษฎีบอกไว้ว่าถ้าเรามีความสนใจในการพัฒนาระบบที่สั่งงานด้วยเสียงนี่ เราจะต้องทำความเข้าใจกลุ่มผู้ใช้ด้วยนะคะ ว่าผู้ใช้เป็นอย่างไร และกลุ่มคำที่จะเลือกใช้ในการโต้ตอบนะคะ พยายามเลือกเฉพาะ เราเรียก "คีย์เวิร์ด" คีย์เวิร์ดสำคัญ คือคำสำคัญมาใช้งาน มาอย่างนี้ค่ะ โหลดมาใน Smartphone คลิกที่จอมือถือน่ะ ไม่ต้องคลิกที่สมาร์ตโฟน เคยสั่งงานด้วยเสียงไหมคะ ถ่ายรูป มีคีย์เวิร์ดอะไรบ้าง Capture Capture ถ่ายไหม บางที คือ Acset ก็ต้องได้นะ หมายถึงการออกเสียงมันต้องชัด มีคำอื่นอีกไหมคะ นอกจากคีย์เวิร์ดว่า Capture มีชิส ทำไมถึงพูดคำนี้ ยิ้มนึกออกไหมคะ เราจะยิ้มจริงไหม พลอยทำหน้าชีส คือ เสียงไม่ได้ระบบก็จะไม่รับรู้ กล้องก็จะไม่ถ่ายนะคะ ฉะนั้น ถ้านักศึกษาที่จะใช้การออกแบบส่วนต่อประสานที่เป็นภาษาธรรมชาตินี่ เราดูด้วยว่าเราจะใช้ภาษาระบบนี้กับใคร เราก็เลือกกลุ่มคำนะคะ คีย์เวิร์ดมาใช้นะคะ เพราะว่าการพูดประโยคยาว ๆ โดยเฉพาะภาษาไทยนี่นะคะ มันจะยากในการแปลนะคะ เพราะว่าการใช้ภาษาธรรมชาติมันจะมีกระบวนการนะคะ กระบวนการในการแปลหลายสเต็ปนะคะ การทำงานก็จะยุ่งยากกว่าจะมีทั้ง Noriเพราะว่ามันเป็น Speed Recognition รู้จำ เสียงแบบไหน เสียงแบบไหน ออกเสียงอย่างไร ถึงจะสั่งงานได้อย่างนี้ค่ะ ต่อไปนะคะ interInteraction Style ส่วนต่อไป ก็คือส่วนต่อประสานที่เป็นแบบ query interface นะคะ Query interface ภาษาไทยใช้คำว่า ส่วนต่อหมายถึงอะไร ก็คือผู้ใช้นี่จะถูกถามผ่านระบบน่ะค่ะ ผ่านระบบน่ะค่ะ คำถามเป็นชุด ผู้ใช้อาจจะต้อบ Yes กับ No อ่านไปแล้ว ชอบเรียนคอมพิวเตอร์ไหม ก็จะมี Yes กับ No ต่อไปนะคะ หรือเป็นแบบ Multiple Choice maltipal choose หรือ เราอาจจะอยากตอบมากกว่า 1 งานนะคะ คือ Multiple Choice อันนี้คือลักษณะส่วนต่อประสานที่เป็นแบบ query interface นะคะ ซึ่งการสร้างส่วนต่อประสานตัวนี้นะคะ เราจะใช้ภาษา Q ในการสร้างนะคะ พวกภาษา HQL ภาษาทาง Data base น่ะค่ะ ในการ query ขึ้นมา ก็จะสร้างเป็นรูปแบบโครงสร้างฐานข้อมูลนะคะ ผู้ใช้จะต้องมีความรู้ทางเรื่อง โครงสร้างของฐานข้อมูลหรือ siภาษาไทยใช้คำว่า "วากยสำคัญของภาษา ก็คือ syntax ที่ผู้ใช้ในการ Query นะคะ ในการสร้าง interface แบบ Query ก็เลยมีตัวอย่างมาให้ดู เหมือนเราตอบแบบสอบถามออนไลน์น่ะค่ะ อันนี้เป็นส่วน iเราต้องการสอบถามความพึงพอใจ ขึ้นมานะคะ แต่เราไม่สะดวกที่จะไปแจกแบบสอบถามเป็นกระดาษ ก็เลยสร้างขึ้นมาผ่าน ตอนนี้ที่นิยมใช้กัน ก็คือ Google  ผู้ใช้คลิกเข้าไปแล้วตอบ ให้เลยนะคะ ไม่ต้องเสียเวลาไปคีย์อีก ต่อไปนะคะ form-fills in เป็นรูปแบบปฏิสัมพันธ์อีกรูปแบบหนึ่ว ซึ่งลักษณะของ form-fills นี่ก็เหมือนกับเรากรอกเอกสารในกระดาษนะคะ แต่ form-fills จะแสดงบล็อกให้เราตอบนะคะ หรือแสดงฟอร์มนี่อยู่ในจอภาพนะคะ เราก็กรอกหรือป้อนข้อมูลเข้าไปนะคะ ระบุความต้องการเข้าไป ซึ่งการสร้างนะคะ เขาบอกว่าการออกแบบฟอร์มฟิลล์นี่ จะต้องออกแบบให้ดีให้ผู้ใช้กรอกข้อมูลได้ง่าย ให้จัดกรุ๊ปข้อมูลที่ต้องกรากต่อเนื่องกันเอาไว้ด้วยกัน หลักการสร้างฟอร์มฟิลล์ ข้อมูลจากบนลงล่าง กรอกจากซ้ายไปขวา หรือเรากรอกข้อมูลในกระดาษ แต่ในที่นี้เราจะกรอกลงไปในคอมพิวเตอร์นะคะ ควรแบ่ง Grop กรุ๊ปนี้เป็นข้อมูลของประวัติส่วนตัวอย่างนี้ค่ะ ก็ควรจะอยู่ด้วยกัน เรื่องที่ 2 เป็นเรื่องของประวัติการศึกษาอย่างนี้น่ะค่ะ ควรแบ่งเป็นกรุ๊ป ๆ ไปนะคะ ให้ผู้ใช้กรอกข้อมูลไปอย่าง แล้วก็กระโดดไปถามอีกเรื่องหนึ่ง จะทำให้ผู้ใช้รู้สึกหงุดหงิดเวลาใช้ระบบนะคะ เวลากรอกข้อมูลให้เรานะคะ อันนี้คือตัวอย่างของ form-fills นะคะ ก็คือมีชื่อ ก็คือมีโจทย์ให้ถามนะคะ นะคะ มีโจทย์ถามแล้วก็มีช่อง นะคะ Text box ให้เราตอบ เราก็ตอบลงไปนะคะ คราวนี้ลักษณะการออกแบบที่ดีนะคะ เราอยากบอกผู้ใช้ว่าฟอร์มไหนที่ต้องกรอก เราก็ใส่ ฏรู้จัก Drop-down ไหมคะ ในตัวอย่างนี้ ฟิลด์ไหนบ้างที่มี Drop down คือ ดอกจันทสีแดง ใส่สีแดงด้วยนะคะ บอกว่าฟิลด์นี้ หรือข้อมูลตัวนี้ จำเป็นต้องกรอก ภาษาไทยใช้คำว่า จำเป็นต้องกรอกข้อมูลนี้ ดังนั้น ไม่ใช่ทุกฟิลล์ที่ผู้ใช้ต้องกรอก แต่ฟิลล์ที่เราบังคับน่ะเอาอย่างนี้ แล้วเราต้องวิเคราะห์ด้วยนะคะ ต้องมีนะคะ เขาถึงจะมีข้อมูลมากรอกให้เรานะคะ ไม่ใช่ไปบังคับให้กรอกชื่อสามีหรือภรรยา ซึ่งเราไม่มีไง เราก็จะตอบอะไรล่ะ อันนี้ฟิลด์นี้จะไม่บังคับ แต่เราจะไปบังคับอะไรที่ทุกคนมี ข้อมูลอะไรบ้างที่นักศึกษาทุกคนต้องมี รหัสนักศึกษา ชื่อ-นามสกุล โทรศัพท์ทุกคนต้องมีไหม ก็น่าจะมีนะ ไม่ก็เราให้เลือกน่ะค่ะ ว่าช่องทางติดต่อเอาที่สะดวก บางทีเขาอาจไม่อยากบอกเบอร์ แต่เขายินดีที่จะบอกเมล บอกเฟซฯ LINE IG อย่างนี้ค่ะ ติดต่อกับเขาได้น่ะ เราก็ให้เขาตอบอย่างนี้ค่ะ แต่ชื่อนี่ทุกคนต้องมีอยู่แล้ว เราก็ใส่ Drop-down สีแดงไว้ ช่องไหนที่... อันนี้คือการออกแบบฟอรที่เป็นแบบฟอร์มฟิลด์นะคะ นะคะ ส่วนต่อประสานที่เรียกว่า WIMP Interface ย่อมากจาก WIMP ก็คือเป็นรูปแบบของส่วนต่อประสานในระบบคอมพิวเตอร์นี่ล่ะ เป็นส่วนปฏิสัมพันธ์เขาบอกว่ามันเป็นตัว WIMP นี่ ใช้เฉพาะกับเครื่องคอมพิวเตอร์ส่วนบุคคล ก็คือเครื่องตั้งโต๊ะ, โน้ตบุ๊ก Laptop อะไรอย่างนี้ Windows คืออะไร Windows คือ หน้าจอทำงานน่ะค่ะ เปิดปุ๊บขึ้นมา ตอนนี้ คือตอนนี้มันเป็นแบบลักษณะ multi นะคะ เราสามารถเปิดหลายหน้าต่างขึ้นมาพร้อมกันได้ไหม ได้เลย เราอาจจะย่อลง หรือเราอาจจะย่อขนาดลง มันอาจจะมี ไปเลยหรือย่อ เราก็สามารถเปิด Window ได้หลายหน้า เมื่อก่อนนะคะ มันเป็น Single นี่เราจะเปิดได้หน้าเดียว คือ เมื่อก่อนมันเป็น Command line ด้วย มันก็เปิดหน้าใดหน้าหนึ่งได้เท่านั้น  นะคะ เราก็สามารถเปิดงานได้หลาย Window ด้วยกัน ได้หลายหน้าต่างนั่นล่ะ ซึ่งหลายหน้าต่างก็จะมีส่วนของ Scorebar Scorebar อใน 1 หน้าต่างนี่ค่ะ สี่เหลี่ยม หน้าต่างหนึ่งนี่ ที่เปิดโปรแกรมขึ้นมา 1 Windows นี่ Scroll bar ไหนได้บ้าง เคยใช้งาน Scrollbars ไหมคะ scor Score bar ภาษาไทย คือ สงสัยจะเรียนเกินไป เรียนเกิน Score bar คือ คืออะไรคะ เขาบอกว่ามันเป็นส่วนหนึ่งของ Window ไม่ใช่ระบบจัดการนะคะ พัทชราภาตอบถูก Scroll bar ก็คือแถบเลื่อน Task แถบเลื่อนจะอยู่ตรงไหน ไม่ด้านข้างก็ด้านล่าง Scrollbars เราจะให้งาน Scroll bar เมื่อไรคะ เราจะใช้งาน คือ Scrobar เมื่อเราเปิดโปรแกรม เช่น Microsoft Word ก็ได้ แล้วเราซูมหรือเราขยายเกิน 100 เปอร์เซ็นต์น่ะ มันไม่สามารถแสดง Viwe ได้ในหน้า เช่น เราต้องการขยาย 200 เปอร์เซ็นต์ มันก็จะทำให้ Windows มันขยายหน้าจอการทำงานน่ะนะคะ เราก็สามารถเลื่อนขึ้น-ลง หรือลาก ดูหน้าถัดไปนะคะ อันนี้เราเรียก Scrollbar นอกจากนี้หน้าต่างก็จะมี title bars ก็คือแถบแสดงชื่อนะคะ แต่ละหน้าต่างมันก็จะมีชื่อ Title bar อยู่นะคะ บางโปรแกรมเขาก็จะให้เราตั้งชื่อเองน่ะค่ะ ตั้งชื่อ Windows หน้านั้นเองนะคะ ตัวที่ 2 ก็คือ icon รู้จัก icon ไหมคะ รู้จัก Icons ไหมเอ่ย รู้จัก Icon ไหมเอ่ย ค่ะ icons เป็นอย่างไร ความเป็นรูปภาพ เป็นแบบไหน เป็นรูปภาพเล็ก ๆ แทนการพิมพ์ข้อความนะคะ icon ใช้ทำอะไร เป็นส่วนต่อประสานที่จะทำให้เราเปิดโปรแกรมขึ้นมา เคยใช้งาน Icon ไหมคะ บนหน้าจอ Desktop เราน่ะ เราเปิดเครื่องคอมพิวเตอร์ขึ้นมาปุ๊บ Boot เข้าคอมพิวเตอร์ได้แล้ว หน้าจอมันจะขึ้นมาใช่ไหมคะ แล้ว Icon ก็คือรูปภาพเล็ก ๆ เอาไว้ทำอะไร 1. icon แทนอะไรคะ แทน 1 โปรแกรม แทน 1 การทำงานอันนั้นล่ะนะคะ ใช้งานอย่างไร คลิกขึ้นอยู่กับการตั้งค่า บางทีเราคลิก icons ครั้งเดียวก็ทำงานได้ แค่บางทีเราต้องคลิก 2 ครั้งเร็ว ๆ ก็คือการดับเicons ถึงจะเปิดโปรแกรมนั้นขึ้นมานะคะ ต่อไป คือ Menu อันนี้เราพูดไปแล้วนะคะ มันเป็นส่วนหนึ่งของ WIMP เหมือนกัน ก็คือเป็นตัวเลือกที่เป็นข้อความนะคะ แล้วเราสามารถคลิกให้มันเป็น pull-down หรือ คลิักเพื่อให้มันเป็น Pop-up Menu ได้ สุดท้าย ก็คือ Pointers นะคะ ความหมายตามตัวนะคะ Pointers ชี้ตำแหน่งและเลือกวัตถุบนจอนะคะ เราเรียก Pointer เรียก Pointers นะคะ บางทีเราก็ใช้เมาส์ในการเลื่อน ใช้จอย ใช้ Mouse ในการเลื่อนก็ได้นะคะ คือ pointers อันนั้นนั่นล่ะ อันนี้คือตัวอย่าง Interaction Style ที่เป็นแบบ WIMP interface 4 ตัวนี้ ต่อไปนะคะ เป็น เป็นรูปแบบหนึ่งนะคะ point and Click ก็คือเป็นการใช้งานแบบชี้ตำแหน่งและคลิก เขาจะนิยมใช้ interface ตัวนี้ ใช้ตัวส่วนต่อประสานอันนี้ multimidia web Hypertext รู้จัก hypertext ไหมคะ รู้จักMultimediaWeb เป็นอย่างไรเอ่ย ถ้าเป็น Multimedia Web ก็คือ Web ที่มันมี คือสื่อนั่นล่ะ คือเว็บที่มันมีเนื้อหาหลากหลาย หลากหลาย ไม่ว่าจะเป็นข้อความ รูปภาพ สื่อ คลิป ภาพนิ่ง ภาพเคลื่อนไหว เราเรียกว่า multimedia web หรือ Hypertext คือ ข้อความที่เป็นตัวลิงก์น่ะ เราเรียก "hypertext" นะคะ เช่น เราเอาเมาส์ไปชี้ที่ข้อความ เช่น ถ้าตัวชี้น่ะ มันเปลี่ยนจากตัวลูกศรเป็นรูปมือ แปลว่าอะไรคะ เราเลื่อน cursor ไป ปกติ Cursor มันก็จะเป็นลูกศรนะ นึกภาพตาม ทุกคนเปิด Browser Web ขึ้นมา อะไรก็ได้ค่ะ Firefox เป็นตัวไหนก็ได้ที่เครื่องตัวเองมี แล้วเราเอา Pointers ก็คือ Cursorเลื่อนไป ปกติ cerser หรือตัวลูกมันเป็นรูปอะไรคะ เป็นลูกศรนะคะ ถ้าเราเลื่อนไปชี้ที่ข้อความหรือรูปใดแล้วมันเปลี่ยนจากลูกศรเป็นรูปมือ แปลว่าอะไรเอ่ย แปลว่าเป็น Hypertext หมายความว่ามันสามารถเชื่อมโยงไปยังที่อื่นได้อีก อันนี้เรียกว่า Hypertext นะคะ ก็แปลว่าข้อความนั้นมันเป็นลิงก์มันเป็นประตูที่จะเปิดไปอีกงานอื่น หรือเว็บฯ อื่น หรือหน้าอื่นนะคะ ได้อีกนะคะ เขาก็เลยบอกว่าส่วนต่อประสานไม่จำเป็นต้องเป้น Click นี่ มันไม่ได้ขึ้นอยู่กับ mต้องเป็น Mouse น่ะค่ะ เป็นรูปแบบอื่นก็ได้ เราเอามือจิ้มที่หน้าจอก็ได้ ผ่านตัว ตัว Touch screen น่ะก็ได้นะคะ เช่น เราเปิดหน้าเว็บขึ้นมา เราเอา Corsore ไปคลิก มันก็ย่อยต่อไปอีกน่ะ อันนี้ข้อความเป็นตัว hypertext ต่อไปนะคะ interaction ตัวต่อไปนะคะ Predimentional เป็นตัวเชื่อมต่อแบบ 3 มิติ ตัวนี้นะคะ เราจะนิยมใช้กับตัว Virtual Reality ก็คือตัวงานที่เป็นความเสมือนจริง อันนี้สุรเชฏการสร้างส่วนต่อประสานที่เป็นแบบ 3 Dimansional 3D น่ะค่ะ แบบ 3D นะคะ เหมาะกับการออกแบบ intInterface ที่ต้องการความเสมือนจริงนะคะ ก็เลยมีหลักการบอกว่าเทคนิคที่ง่ายที่สุดในการออกแบบส่วนต่อประสาน การใช้แสงและเงามาทำให้ดูเป็น 3 มิติ เช่น เราวาดปุ๊บ Buttonถ้าเราวาดเป็นสี่เหลี่ยมเฉย ๆ มันก็คือ 2 มิติ คือ เห็นด้านเดียวนะคะ แต่เราให้แสงและเงาเพิ่ม มันจะดูมีความลึ มีความสูงขึ้นอย่างนี้ค่ะ อันนี้คือวิธีง่ายสุดในการสร้าง ที่เป็น 3 มิตินะคะ แต่ถ้าเกิดเป็นเทคนิคที่ซับซ้อนขึ้น ก็คือเป็นการสร้างโมเดลที่เป็น 3 มิติน่ะค่ะ ครูเลยมีภาพมาประกอบให้ดู นี่ถ้าเราวาดภาพสีเหลี่ยมเฉย ๆ มันก็เป็นปุ่ม 2 มิติ แต่พอเราให้แสงกับเงาเพิ่ม วัตถุนั้นมันจะดูเป็น 3 มิติ จริง ๆ แล้ว มันเหมือนมันเป็นภาพหลอกตาน่ะ ให้ดูเสมือนจริงจขึ้น นะคะ แต่ถ้าเป็นเหมือนตัวต่อประสานแบบ 3 มิติ จริง ๆ ก็คือสร้างโมเดลจริง ๆ แบบนี้ เหมือนที่เราทำที่เรานิยมทำโครงงานกัน ก็คือการ์ตูน 3D เกม 3D พวกนั้นนะคะ พวก AR, VR น่ะ อันนี้ คือ 3 มิติ ใช้ Marker มือถือไปส่อง Marker แล้วก็เห็นขึ้นมาเป็นโมเดลน่ะค่ะ อันนี้คือการ 3 มิตินะคะ ต่อไปนะคะ ส่วนต่อประสารแบบ Direct หมายถึงโดยตรง โดยตรงนะคะ direct manipulation ส่วนต่อประสานตัวนี้ก็จะใช้กับการออกแบบงาน IOTส่วนต่อประสานกับงาน IOT น่ะค่ะ หรืองานที่ผู้ใช้สามารถดำเนินการกับ object บนหน้าจอได้โดยตรง เอาง่ายสุดนะคะ ที่ใกล้ตัวนักศึกษา ก็คือการใช้ touch Multitouch คืออะไรเอ่ย multi touch หมายถึง การใช้นิ้วสัมผัสที่หน้าจอ จะเป็น Smartphone หรือ คอมคอมพิวเตอร์ก็ได้นะคะ เอาสมาร์ทโฟนตัวเองแล้วกัน สมาร์ทโฟนที่เราใช้งานมานี่ มีใครซื้อสมาร์ตโฟน ถ้าซื้อใหม่วันนี้พรุ่งนี้ ยังไม่ถึงนะ ถ้าซื้อใหม่เมื่อวาน วันนี้หรือวันก่อนนี่อาจจะยังไม่รู้ว่าทำอะไรได้บ้าง มีไหมคะ เพิ่งซื้อ ไม่มี ใช้จนจะพังแล้วกำลัให้อยู่ เราเคยใช้ Multi touch กับมือถือเรารูปแบบไหนบ้าง ใช้แบบ Spin ไหมคะ เวลาเราใช้มือจิ้มที่จอน่ะ มือถือเราน่ะ รองรับแบบไหนบ้าง mulแบบ Tap ได้ไหม ครั้งหนึ่ง ครั้งหนึ่งเบา ๆ แล้วมันก็สั่งงานน่ะค่ะ ให้ทำอะไรคลิกตรงนั้นตรงนี้ อันนี้เรียก "Tap ใช้ 2 นิ้วมันมีชื่อของมันอยู่นะ เราเคยใช้โดยแบบการเคยชิน เขาเรียก "การรู้จำ" แต่เราไม่ได้ท่องจำนะคะ ถ้าทำแบบนี้ อย่างเช่น ถ่ายรูป รูปหนึ่ง มาแต่สิ่งที่อยากดู คือ เบลอ ๆ ข้างหลังเราไม่อยากดูหน้าเพื่อน เราก็จะทำอย่างไรคะ ซูมนี่คือ 1 หรือ 2 นิ้ว 2 นิ้วนี่คือนิ้วไหน นิ้วไหนก็ได้ค่ะ แต่ต้องใช้ร่วมกันนะคะ ใช้คู่กัน 2 นิ้ว แล้ว Flip เข้าหรือกางนิ้วออก Zoom เราจะ... อันนี้ คือ การรู้จำค่ะ เรารู้ว่าทำอย่างนี้แต่เราจะไม่รู้ว่าเขาเรียกว่าอะไรนะคะ นะคะ อย่างเช่น ถ้าบีบเข้าหาศู นึกถึงเวลาเราเขียนโปรแกรมให้มัน Multi touch น่ะ เราต้องใช้คำให้ถูกนะ ผู้ใช้ Swipe ได้อย่างนี้น่ะค่ะ เราจะใช้ผู้ใช้แค่แตะเบา หรือจะให้ผู้ใช้แบบใช้ 2 นิ้ว 2 นิ้วกางออก คำสั่งให้ถูก อันนี้ คือ ผู้ใช้สามารถสั่งงานผ่านระบบได้แบบ direct ทำที่ตัว obj ได้เลยนะคะ เราดูภาพนี้ประกอบเข้าใจมากขึ้นไหม ภาพแรกทำอะไรเอ่ย เสาวลักษณ์มีความชำนาญการเรื่องนี้มาก ถามปุ๊บตอบได้ทันทีเลย เราอยากรู้ว่ารถยนต์ของเรานี่สีนี้ เหมาะกับ Max แบบไหนนะคะ ถ้าไปเปลี่ยนเลย พอเปลี่ยนไปแล้วมันอาจจะไม่เหมาะ เขาก็เลยมี มาให้เลือก แอปฯ นี้สามารถเลือกประเภทรถได้อีก รถใหญ่ รถเล็ก รถประเภทน่ะค่ะ แล้วก็เลือกสี แล้วเราก็คลิกได้เลยค่ะ ตรงแม็กซ์ มันก็จะไปเปลี่ยน อันนี้ คือ direct นะคะ เราทำระบบแนวนี้ไหม โครงงานมีแบบนี้ไหมคะ ทำระบบเหมือนเสมือนจริง แต่ผู้ใช้สามารถทำกับตัว แบบนี้มีไหมคะ ลองทำดูอันนี้ระบบน่าสนใจ ที่ปรึกษารุ่น... เขาเป็นรุ่นพี่เรานะคะ ปีหนึ่ง ทำเกี่ยวกับระบบจำลองการจัดวางเฟอร์นิเจอร์เฟอร์นิเจอร์ในบ้าน ทำแอปฯ ค่ะ ลักษณะงานของเขาคือเวลาเราจะซื้อเฟอร์นิเจอร์หรืออะไรมาตกแต่งนี่วางตรงไหนมันถึงจะเหมาะ เหมือนจำลองขึ้นมาก่อน กับ Max นี่ละ แต่ของเขาทำแบบ AR นะคะ เราเลือกขนาดโดยใส่ข้อมูลกว้าง-ยาวน่ะค่ะ ของพื้นที่แล้วเราก็เอามือถือไปส่อง เช่น ครูจะเอาโต๊ะมาตั้งตรงนี้ ตรงผนังอย่างนี้ค่ะ ตรงผนังตรงนี้ ครูก็เอามือถือไปส่อง แล้วครูก็เลือกขนาดโต๊ะนะคะ อ้อ วางตรงนี้เหมาะไหม แทนที่เราจะเอามาแล้วเหมาะไหม เราสมารถจำลองได้ก่อน ซึ่งครูก็เลยเพิ่มขอบเขตให้เขาไปว่าเป็นแบบสั่งของออนไลน์ไหม สั่งเฟอร์นิเจอร์น่ะค่ะ เพราะเรายังไม่เห็นนะ ของจริง เราก็ลองดีไซน์ดูก่อน ว่าเราซื้อมาแล้ววางตรงนี้เหมาะไหม อย่างไรน่ะค่ะ เขาก็ทำ อันนี้คือการ direct นะคะ การไดเรกนะคะ การออกแบบไดเรก นะคะ Direct action Multi touch ในมือถือก็เหมือนกัน เป็น Direct สรุป สรุปแล้วนะคะ วันนี้เราเรียนอะไร เราเรียนรู้เกี่ยวกับการปฏิสัมพันธ์นะคะ ระหว่างผู้ใช้กับตัวระบบนะคะ ทั้งนี้นะคะ ระบบที่มีการปฎิสัมพันธ์นี่ นะคะ ให้สำเร็จตามเป้าหมายได้ อย่างสะดวกสบายนะคะ ตาม Model ของ จะใช้หลักการปฏิสัมพันธ์นะคะ ซึ่งนอกจากนี้นะคะ การออกแบบกระบวนแบบนี่ เราจะต้องดูหลักการยศาสตร์ ก็คือลักษณะทางกายภาพนะคะ ที่มันเป็นไปด้วย ซึ่งกระบวนแบบนะคะ ที่นิยมใช้งานกันในปัจจุบันนี่ เราจะใช้ WIMP นะคะ หรือใช้รูปแบบอื่น หรือ diaDialog Box แต่เมื่อรวม ๆ กันแล้วนะคะ ทั้งหมดที่กล่าวไปนี่ เราจะเรียกว่า "widgets" นะคะ โอ.เค. อันนี้คือเนื้อหาของวันนี้ มีคำถามไหมคะ ก่อนจะทำงานจะให้ถามคำถามก่อน ถามไหมเอ่ย รู้จักส่วนต่อประสาน หรือ Interaction พอจะนำไปประยุกต์กับงานเราได้ไหมคะ มีรูปแบบไหนที่เราคิดว่า อ๋อ เราตั้งใจว่าจะใช้รูปแบบนี้ล่ะ แต่เราไม่รู้ว่าอะไร มีไหมเอ่ย หรือที่ครูอธิบายไปทั้งหมดไม่ใช่รูปแบบที่เราจะใช้ หรือเรามีรูปแบบที่แบบใหม่ ๆ เจ๋งกว่านี้ก็ว่าไปนะคะ มีคำถามไหม จตุรครมีคำถามไหม ยังไม่ถาม โอ.เค. ผ่านไปน่ะค่ะ อย่างนั้นทำแบบฝึกหัดกันก่อนนะคะ อันนี้ให้วาดนะ เราจะได้มีความลึกซึ้งในกระบวนแบบนั้น ๆ นะคะ มีอยู่ 14 ข้อนะคะ ให้ 5 คะแนน ครูก็จะมีความโหดร้ายนิดหนึ่ง คือ ผิดนี่หักข้อละ 1 ถ้าตอบถูกหมดได้ 5 คะแนนนะคะ ครูมีความโหดร้าย เดี๋ยวจะแจกกระดาษให้ทุกคนนะคะ มีติดลบมีไหม เต็ม 5 ค่ะ แต่ว่าสุรเชทวาดผิดไป 6 รูป เสาวลักษณ์ของแบบอยู่ตัว คือไม่ทำ เดี๋ยวแจกกระดาษให้ พี่ปอยมีกระดาษเปล่าไหม ได้ ใช้หน้าเดียวก็ได้ ก็แจกคนละ 2 แผ่นค่ะ เผื่อวาดไม่พอ กระดาษ Recycle ก็ได้ค่ะ recycle ก็ได้ค่ะ คนละแผ่นก่อน ถ้าวาดไม่พอแล้วค่อยให้น้อง ให้นักศึกษาวาดรูปนะคะ เราสามารถไปค้นข้อมูลนะคะ ถามว่าทำไมอาจารย์ต้องให้ทำอันนี้ เพราะว่าครูเชื่อว่าสิ่งที่เราจะเลือกมาใช้ในการสร้างส่วนต่อประสานนี่ แน่ ๆ น่ะ เราจะเลือกรูปแบบที่เป็นกราฟิกอยู่แล้ว แน่นอนเลยนะคะ graphical user interfaแน่ ๆ ล่ะ ในนี้ ใน 14 ตัวนี้ เราต้องใช้ 1 อย่างว แน่ ๆ นะคะ แจกกระดาษให้คนละ 1แผ่นนะคะ ให้ค้นในอินเทอร์เน็ตได้ แต่ให้วาดลงในแผ่นกระดาษนั้น แล้วส่ง อย่างเช่น Textbox เราก็เขียน Textbox แล้วบอกด้วยว่า Textbox ใช้ทำอะไร โอ.เค. ไหมคะ วางตรงไหนที่เราจะหยิบง่าย วางตรงโน้นก็ได้ ถ้าเขียนไม่พอใน 1 หน้า ให้ไปหยิบกระดาษด้านข้างนะคะ ไปเขียนเพิ่มได้ อย่าลืมเขียนรหัส เขียนชื่อตัวเองใส่ ทบทวนคำสั่งแบบฝึกหัดอีก 1 รอบ แบบฝึกหัดนี้ไม่ได้ทำฟรีค่ะ แบบฝึหดนี้วาดรูปแล้วเหนื่อย ให้ 5 คะแนนนะคะ มีเงื่อนไขว่าถ้าวาดผิด ถ้าวาดไม่เหมือนนี่ไม่หักนะคะ แต่พอดูออกว่า อันนี้ อย่างนี้ค่ะ ก็ให้อยู่นะคะ ให้วาดรูป Textbox มา แล้วบอกด้วยว่า Textbox ใช้ทำอะไร เป็นกราฟิก User interface ในการ Design หน้า interface Textbox radiobox spinbox หรือ Spinerbox เคยได้ยินไหมคะ Check Button Listbox Stausbar Box และ togcle butใให้วาดรูปใส่กระดาษมา ถ้าให้ไปก็อบมาทางอินเทอร์เน็ตเลยเดี๋ยวมันจะไม่เกิดความลึกซึ้งในการเรียน ถ้าเราวาดได้ลงมือทำ เราจะได้สังเกตว่า Textbox มันเป็นหน้าตาแบบนี้ แล้วบอกหน้าที่ของมันด้วย เราจะใช้ Textbox ทำอะไร เอาอะไรคุณสมบัติของมันน่ะค่ะ ยังสงสัยในคำสั่งไหมเอ่ย สงสัยไหมคะ ถามไหม ใช้ดินสอหรือปากกาวาดก็ได้ค่ะ พัชราภาบอกว่าอุปกรณ์ไม่ครบ สงสัยงานศิลปะวันนี้จะไม่สวยงาน เน้นที่ความถูกต้องค่ะ สวยงามไม่เท่าไร เอาแบบให้อาจารย์เห็นปุ๊บ มันคือ Combobox จริง ๆ ไม่ใช่เห็นปุ๊บ ทำไม มีคำถามไหมคะ มีคำถามไหมคะ ถามเลย บางคนเห็นปุ๊บใช้งานมาตั้งนาน เขาเรียกอันนี้หรือ อันนี้มีชื่อว่าแบบนี้หรือ พอให้วาดแล้วมันก็จะลึกซึ้งลงไปนะ ใช่ค่ะ ให้วาดให้ครบทั้ง 14 อัน เพราะเราอยู่ในแวดวงไอที IT นี่ เราจะต้องมีความรู้อย่างน้อย กราฟิก User Interf มันแล้วจะต้องรูปว่ามันเอาไว้ทำอะไรค่ะ เวลาวันหน้าที่เราไปออกแบบinterface นะคะ เราจะได้เลือกใช้ได้ถูก เลือกใช้ได้ถูกนะคะ ว่าอ๋อเราอยากให้ผู้ใช้คลิกคำตอบแค่ครั้งเดียว ตอบแค่ Single น่ะค่ะ เราะต้องเลือกตัว graphic user interface แบบไหน อยากให้ผู้ตอบมากกว่า 1 คำตอบ เลือกใช้ตัว GUI ตัวไหน อยากให้ผู้ใช้เลือกเอาจาก Chose ที่เรามี มันตายตัวน่ะ เราก็ไม่จำเป็นต้องให้ผู้ใชพิม ข้อความนะคะ มันเสียเวลา เราก็ให้ผู้ใช้ติ๊กเลือกเอติ๊กเลือกเอาเลย เช่น เราอยากรู้ข้อมูลของผู้ใช้ว่าเป็นเพศชายหรือหญิง ถูกไหมคะ เราไม่จำเป็นต้องให้ผู้ใช้พิมพ์วว่าชายหรือพิมพ์ว่าหญิง มันเสียเวลา ก็มีให้เลือกเลย แล้วให้ผู้ใช้ติ๊กเอานะคะ คลิกเลือกเอานะคะ 1 คน ก็จะมี 1 เพศ ฉะนั้น เราจะต้องเลือก GUI ตัวไหน ที่ทำให้ผู้ใช้ติ๊กได้อันเดียว แต่ถ้าเกิดเราอยากรู้ว่าผู้ใช้มีความสนใจนะคะ User ของเรานี่มี ในเรื่องใดเรื่องหนึ่งนะคะ เช่น งานอดิเรก ผู้ใช้สนใจอะไรบ้าง ตอบได้มากกว่า 1 ข้อ เราก็จะเลือก GUI แบบไหนให้ผู้ใช้ติ๊กได้มากกว่า 1 วันนี้ละ ที่เราจะได้รู้นะคะ มีคำถามเพิ่มไหมคะ ถามมาเลย วาดรูปนะคะ แล้วก็อธิบายข้าง ๆ ว่า GUI ตัวนี้ ถามเลยค่ะ วาดหน้าตาหลักมา เห็นปุ๊ปอันนี้ คือ Menu barนึกออกไหมคะ แล้วก็อธิบายมาพอสังเขปว่าเอาไว้ทำอะไร ค่ะ อธิบายมาพอเข้าใจ เช่น ยกตัวอย่างนะคะ Textbox เอาไว้รับข้อความจากผู้ใช้อย่างนี้ค่ะ ไม่ต้องบอกว่าเอาไว้รับรหัส ชื่อ วันที่เกิด ไม่ต้องค่ะ อะไรก็ได้ที่ผู้ใช้ต้องการกรอกเข้าไปในระบบ เราจะใช้ Textbox นอกเสียจากเราจะยกตัวอย่างเพิ่ม เช่น Textbox เราก็วาดรูปหน้าตา Textbox ขึ้นมา ใช้รับข้อมูลนะคะ หรือรับข้อความจากผู้ใช้ เช่น ชื่อ สกุล อย่างนี้ค่ะ หรือ หรือ Combination box เราก็วาดหน้าตา communication box อธิบายว่าเอาไว้ทำอะไร ให้ผู้ใช้เลือกแบบไหนเลือกจาก Choitตัวเลือกที่เรามีนะคะ หรือป้อนข้อมูลเข้าไปเพิ่ม หรืออย่างไรนะคะ ปรึกษา Buddy ๆไดนั่งด้วยกัน ก็ถามกันได้ เพราะอันนี้ไม่ได้สอบนะคะ ครูอยากให้เรียนรูเกี่ยวกับพวกรูปแบบการติดต่อกับรูปแบบการติดต่อกับผู้ใช้เราอาจจะเคยได้ยินจาก 14 นี่ะ เราอาจจะเคย 14 แต่เราอาจจะเคยใช้งานหรือเคยได้ยินมาแค่ 4-5 อย่าง แต่ในชีวิตจริงมันมีมากกว่านั้น เผื่อวันหน้ารูปนี้จำได้เราเคยวาดในภาพ ตอนร้อนให้วาดรูป Status bar เราก็วาดรูปมา แล้วก็บอกด้วยว่าเราใช้ทำอะไรนะคะ ถ้าเราได้ฝึกวาดฝึกเขียน เราก็จะได้รู้จำนะคะ เวลาไปเลือกใช้งานจะได้ไปเลือกถูกว่าจะใช้ตัวไหนนะคะ โอ.เค. ไหม วาดนานไหมคะ วิชาศิลปะนี่ค่อยข้างใช้เวลานาน ่่ยังไม่มีนะ อย่างนั้นวาดไปก่อนนะคะ ช่วงวาดรูปครูก็จะเช็กชื่อไปด้วย วันนี้ใครไม่มาเอ่ย วันวิศาไม่มานะ จุฬามาศก็ไม่มานะ กาญจนา ก็ไม่มา 3 คนใช่ไหมคะ โอ.เค. ที่เหลือมาครบ [สิ้นสุดการถอดความ]