Copy of ส่วนต่อประสาน

ส่วนต่อประสาน user interface, UI พระนครินทร์

จัดทำโดย พระนครินทร์ จิรฏฺฐิโก

วันนี้จะเรียนรู้อะไรบ้าง? 1.ความหมายและลักษณะของส่วนต่อประสานในคอมพิวเตอร์ 2.ตัวอย่างของส่วนต่อประสานหรือ Ul แบบกราฟิก และ Ul มือถือ 3.กฎ 3 ข้อ ในการออกแบบส่วนต่อประสานของ Theo Mandel 4.สรุป ตัวอย่าง/วิธีใช้งาน/ประโยชน์และโทษ

User Interface (UI) ส่วนต่อประสานกับผู้ใช้ หมายถึง สิ่งที่มีไว้ให้ผู้ใช้ใช้ในการกระทำกับ ระบบหรือสิ่งของต่างๆ ซึ่งอาจจะเป็นคอมพิวเตอร์ เครื่องจักร เครื่องกล อุปกรณ์ใช้ไฟฟ้าใดๆ หรือระบบที่มี ความซับซ้อนอื่นๆ เพื่อให้สิ่งๆนั้นทำงานตามความต้องการ ของผู้ใช้

ส่วนต่อประสานกับผู้ใช้ สามารถจัดได้เป็น 2 ประเภท 1.ส่วนที่นำข้อมูลเข้า หรือส่วนสั่งงาน เรียกว่า อินพุต (input) 2.ส่วนที่ใช้แสดงผลลัพธ์ หรือส่วนที่ไว้รอคำ สั่งจากผู้ใช้ เรียกว่า เอาต์พุต (output)

รูปแบบของ User interfaces คือรูปแบบที่ถูกสร้างขึ้นมาเพื่อให้ผู้ใช้งานสามารถโต้ตอบกับระบบอย่างมีประสิทธิภาพ หรือการ ออกแบบ User Interfaces เพื่อให้ผู้ใช้งานได้ใช้งานได้อย่างง่าย และเข้าใจระบบ นิยมใช้แบบกราฟิก (Graphics User Interface :GUI ) มีรูปแบบดังนี้ การโต้ตอบด้วยคำสั่ง (Command Language Interaction) การโต้ตอบด้วยเมนูคำสั่ง (Menu Interaction) การโต้ตอบด้วยแบบฟอร์ม (Forms Interaction) การโต้ตอบด้วยการทำงานเชิงวัตถุ (Object-Based Interaction) การโต้ตอบด้วยภาษามนุษย์ (Natural Language Interaction)

สัญลักษณ์ของ Dialogue Diagram มีรายละเอียดดังนี้ Top ใช้แสดงหมายเลข ลำดับเพื่อการอ้างอิงจากหน้าจออื่นหมายเลข ลำดับในส่วนบนนี้จะต้องไม่ซ้ำกัน Middle ใช้แสดงชื่อหน้าจอทำงานหรือข้อความแสดงราย ละเอียดการทำงาน เพื่อให้ทราบว่าหน้าจอหมายเลขดังกล่าวใช้ทำงานใด Bottom ใช้แสดง หมายเลขของหน้าจอที่อ้างอิงมา (เชื่อมโยง) คั่นด้วยเครื่องหมายจุลภาค (,) ตามด้วย หมายเลขหน้าต่อไปหรือหน้าจอย้อนกลับเมื่อเสร็จสิ้นการทำงานแล้ว

แผนภาพแสดงลำดับการเชื่อมโยงจอภาพการประเมินส่วนต่อประสาน หลังจากสร้างต้นแบบแล้ว จะต้องมีการประเมินว่าเป็นไปตามความต้องการของผู้ใช้หรือ ไม่ โดยทีมงานต้องเก็บข้อมูลความคิดเห็นของผู้ใช้ เพื่อนำไปปรับปรุงให้สมบูรณืที่สุด ความสามารถในมือถือปัจจุบันสามารถประชุมงาน , พิมพ์ , แก้ไข หรือจัดการงานต่างๆ ได้อย่างดี แต่ทั้งหมดนี้ก็ขึ้นอยู่กับหน้าตาของระบบปฏิบัติการหรือ User Interface (UI) บนตัวเครื่องที่จะแตกต่างกันตั้งแต่หน้าตา , การจัดวาง , ฟังก์ชันการทำงานและความยืดหยุ่น ของระบบปฏิบัติการนั้นๆอีกด้วย ตัว UI ถือว่าเป็นอีกหนึ่งปัจจัยหลักในการตัดสินใจซื้อมือถือ ของใครหลายคน เพราะถ้าใช้งานแล้วเกิดชอบหน้า UI หรือการปรับแต่งของมือถือที่มี UI นั้นๆ แล้วก็ยากที่จะเปลี่ยนแบรนด์ไปใช้มือถือแบรนด์อื่นๆได้นั่นเอง

ระบบปฏิบัติการก่อนหน้านี้จะเป็นการที่แบรนด์มือถือนั้นๆอยากออกแบบหน้าตาเมนู , เพิ่มฟีเจอร์ หรือสร้างลูกเล่นที่จะทำให้ ระบบปฏิบัติการของตัวเองน่าสนใจ โดยพัฒนาจากระบบปฏิบัติการ Android ซึ่งเราเรียกว่า stock Android แต่จริงๆแล้ว Android ก็มีระบบปฏิบัติการของตนเองเพื่อให้แบรนด์มือถือที่ไม่มีระบบปฏิบัติการเป็นของตัวเอง ก็สามารถนำเอา Android One ไปใช้ได้ เช่น Google , Motorola , Nokia หรือแบรนด์อื่นๆ โดยหน้าตาของ Android One ก็จะมีความเรียบง่าย ไม่มีการปรับแต่งหน้าจอหรือไอคอนให้สวยงามมาก แต่ก็จะมาพร้อมกับความสามารถของ Android แท้ๆ ตัวอย่างมือถือที่เราน่า จะรู้จักกันก็มี Google Pixel 5 , Motorola Moto G100 หรือ Lenovo Legion Dual นั่นเอง ทั้งหมดนี้ก็เป็นหน้าตาของระบบ ปฏิบัติการที่ทำงานอยู่บนมือถือในแต่ละแบรนด์นะครับ ถึงแม้ว่าทุก UI จะถูกพัฒนามาจาก Android แต่ก็สามารถสร้างจุดเด่น และความสวยงามได้แตกต่างกัน และยังมีลูกเล่นที่ไม่เหมือนกันทำให้สามารถรองรับความชอบของแต่ละคนได้นั่นเอง

ระบบปฏิบัติการก่อนหน้านี้จะเป็นการที่แบรนด์มือถือนั้นๆอยากออกแบบหน้าตาเมนู , เพิ่มฟีเจอร์ หรือสร้างลูกเล่นที่จะทำให้ ระบบปฏิบัติการของตัวเองน่าสนใจ โดยพัฒนาจากระบบปฏิบัติการ Android ซึ่งเราเรียกว่า stock Android แต่จริงๆแล้ว Android ก็มีระบบปฏิบัติการของตนเองเพื่อให้แบรนด์มือถือที่ไม่มีระบบปฏิบัติการเป็นของตัวเอง ก็สามารถนำเอา Android One ไปใช้ได้ เช่น Google , Motorola , Nokia หรือแบรนด์อื่นๆ โดยหน้าตาของ Android One ก็จะมีความเรียบง่าย ไม่มีการปรับแต่งหน้าจอหรือไอคอนให้สวยงามมาก แต่ก็จะมาพร้อมกับความสามารถของ Android แท้ๆ ตัวอย่างมือถือที่เราน่า จะรู้จักกันก็มี Google Pixel 5 , Motorola Moto G100 หรือ Lenovo Legion Dual นั่นเอง ทั้งหมดนี้ก็เป็นหน้าตาของระบบ ปฏิบัติการที่ทำงานอยู่บนมือถือในแต่ละแบรนด์นะครับ ถึงแม้ว่าทุก UI จะถูกพัฒนามาจาก Android แต่ก็สามารถสร้างจุดเด่น และความสวยงามได้แตกต่างกัน และยังมีลูกเล่นที่ไม่เหมือนกันทำให้สามารถรองรับความชอบของแต่ละคนได้นั่นเอง

การออกแบบส่วนต่อประสาน ( DESIGN)

เป็นการออกแบบหน้าจอ หรือหน้าต่างการทำงานของโปรแกรม ซึ่งจะมีความสำคัญต่อการใช้งานของ USER โดยลักษณะของ INTERFACE ที่ดีควรมี ลักษณะ เรียนนรู้การใช้งานได้ง่าย ใช้งานง่ายไม่ยุ่งยาก และ เข้าใจการทำงานได้ ง่าย ซึ่งการออกแบบหน้าจอให้เหมาะสมกับผู้ใช้งานควรศึกษา ความต้องการจากผู้ ใช้งานมาก่อน จากนั้นจึงจะนำมาทำการออกแบบหน้าจอการใช้งาน ได้บัญญัติกฎ 3 ข้อในการออกแบบส่วนต่อประสาน คือ PLACE THE USER IN CONTROL REDUCE THE USER’S MEMORY LOAD MAKE THE INTERFACE CONSISTENT

PLACE THE USER IN CONTROL (การให้ผู้ใช้เป็นผู้ควบคุมการทำงาน) 1. กำหนดโหมดการโต้ตอบในลักษณะที่ไ ม่บังคับผู้ใช้โดยไม่จำเป็น หรือในทางที่ผู้ใช้ไม่ ต้องการที่จะทำ เช่น ส่วนตรวจสอบคำสะกดในโปรแกรม ไม่ควรบังคับให้ผู้ใช้เข้าสู่โหมดการตรวจ สอบคำทันทีที่พบคำผิด ควรให้ผู้ใช้ไปแก้ไขเองเมื่อต้องการ และเป็นการแก้ไขที่ใช้งานได้ง่ายด้วย 2. จัดให้มีการโต้ตอบที่ยืดหยุ่น สามารถโต้ตอบกับระบบได้มากกว่า 1 ทาง เนื่องจากผู้ใช้งาน แต่ละคนมีความชอบที่แตกต่างกัน จึงต้องมีตัวเลือกให้ใช้โปรแกรมผ่าน คีย์บอร์ด เมาส์ ปากกา หรือเสียงเพื่อสั่งงานระบบได้

ต่อ PLACE THE USER IN CONTROL (การให้ผู้ใช้เป็นผู้ควบคุมการทำงาน) 3. อนุญาตให้ผู้ใช้งานทำการหยุดหรือสามา รถยกเลิกได้ เช่น ผู้ใช้ควรที่จะสามารถสลับการ ทำงานไปยังโปรแกรมอื่น โดยไม่ส่งผลกระทบกับข้อมูลที่ทำไป 4. ออกแบบให้การโต้ตอบเป็นไปตามระดับความชำนาญในการใช้งาน เตรียมเครื่องมือสร้าง การทำงานแบบอัตโนมัติให้กับผู้ใช้ เนื่องจากผู้ใช้มีทักษะในการใช้งานไม่เหมือนกันจึงควรปรับ เปลี่ยนส่วนต่อประสารให้เหมาะสมกับความต้องการเฉพาะตัวได้ บ่อยครั้งที่ผู้ใช้ต้องการทำงานที่ซ้ำ เดิม จึงควรมีกลไกแมคโคร (MARCO) ที่ช่วยให้ผู้ใช้สะดวกในการทำงาน

REDUCE THE USER’S MEMORY LOAD (ลดภาระการต้องจดจำของผู้ใช้) 1. ลดความต้องการใช้งานหน่วยความจำระยะสั้นของผู้ใช้ ขณะที่ใช้โปรแกรมอยู่ ส่วนต่อ ประสานควรออกแบบให้ลดความจำเป็นที่ต้องจดจำการกระทำและผลที่เพิ่งทำมา เพื่อให้ผู้ใช้ สามารถตรวจสอบงานที่ทำโดยไม่ต้องเสียเวลานึกย้อนกลับไปด้วยตนเอง 2. การกำหนดค่าเริ่มต้น ควรกำหนดค่าเริ่มต้นการใช้งานที่เหมาะสมกับผู้ใช้งานทั่วไป และ มีตัวเลือกอื่นเพื่อให้ผู้ใช้งานสามารถปรับแต่งค่าได้ และสามารถเรียกค่าเริ่มต้นกลับมาได้ด้วย

ต่อ REDUCE THE USER’S MEMORY LOAD (ลดภาระการต้องจดจำของผู้ใช้) 3. การกำหนดค่าเริ่มต้น ควรกำหนดค่าเริ่มต้นการใช้งานที่เหมาะสมกับผู้ใช้งานทั่วไป และมี ตัวเลือกอื่นเพื่อให้ผู้ใช้งานสามารถปรับแต่งค่าได้ และสามารถเรียกค่าเริ่มต้นกลับมาได้ด้วย 4. การจัดการของส่วนต่อประสานควรเป็นไปตามอุปลักษณ์ของโลกจริงเพื่อให้ผู้ใช้เข้าใจ ลำดับการทำงานได้ง่าย โดยไม่ต้องจดจำขั้นตอนการโต้ตอบกับระบบ 5. เปิดเผยข่าวสารในลักษณะค่อย ๆ เพิ่มพูน ส่วนต่อประสานควรมีการจัดลำดับชั้นแสดงราย ละเอียดการใช้งาน เช่น แสดงรายละเอียดพอสังเขปก่อน ส่วนรายละเอียดอื่น ๆ ให้ผู้ใช้คลิกเลือก เองเมื่อต้องการ เช่น การขีดเส้นใต้ มีหลายรูปแบบจะไม่ถูกแสดงในเบื่องต้น เมื่อผู้ใช้เลือกเมนู ขีดเส้นใต้ จึงค่อยแสดงรายละเอียด เช่น เส้นเดี่ยว เส้นคู่ เส้นประ เป็นต้น

MAKE THE INTERFACE CONSISTENT ( สร้างส่วนต่อประสานสอดคล้องกัน ) ส่วนประสานควรรับและแสดงผลในลักษณะสอดคล้องกัน หมายถึง รูปแบบของ CONTENT ที่แสดงผลในระบบควรจัดให้อยู่ภายใต้มาตรฐานการออกแบบเดียวกันตลอดทุกหน้าจอ รวมทั้ง กลไกการส่งผ่านจากระบบหนึ่งไประบบหนึ่ง ควรเป็นไปอย่าสอดคล้องกัน 1. ช่วยให้ผู้ใช้ทราบว่างานปัจจุบันอยู่ภายใต้บริบทใด ระบบอาจมีหลายหน้าจอซึ่งอาจทำให้ ผู้ใช้สับสนว่าทำงานอยู่ขั้นตอนใด จึงต้องมีส่วนที่บ่งบอก เช่น ชื่อหน้า ไอคอน สี ที่ช่วยให้ผู้ใช้ ทราบว่าปัจจุบันคืออะไร มาจากส่วนงานไหน และจะไปต่อได้อย่างไรบ้าง

ต่อ MAKE THE INTERFACE CONSISTENT ( สร้างส่วนต่อประสานสอดคล้องกัน ) 2. มีความสอดคล้องกันตลอดทั้งระบบ ส่วนประสานต้องเหมือนและสอดคล้องกันตลอดกลุ่ม ผลิตภัณฑ์เดียวกัน แม้ว่าวัตถุประสงค์ของแต่ละโปรแกรมจะแตกต่างกันก็ตาม เช่น โปรแกรม WORD, EXCEL, ACCESS ซึ่งผลิตภัณฑ์ในกลุ่มผลิตภัณฑ์เดียวกัน จะมีส่วนต่อประสานที่คล้ายกัน 3. ถ้ารูปแบบการโต้ตอบที่ผ่านมาทำให้ผู้ใช้เกิดความคาดหมาย อย่าเปลี่ยนกฎนั้น ยกเว้นมี เหตุผลสมควร นั้นคือ ไม่ควรเปลี่ยนลักษณะการโต้ตอบที่โปรแกรมส่วนใหญ่ เพราะผู้ใช้จะคุ้น เคยกับการโต้ตอบในลักษณะนั้น เช่น CTRL + S เป็นการบันทึกข้อมูล ถ้าเราเปลี่ยน CTRL + S เป็นการทำงานอย่างอื่น ผู้ใช้จะสับสนได้

สรุปส่วนต่อประสานคอมพิวเตอร์

ส่วนประสานกับผู้ใช้ (User Interface) ส่วนติดต่อ ระหว่างผู้ใช้กับระบบ เพื่อการ เตรียมสารสนเทศ การทา งานและการนาเสอนสารสนเทศนั้นไปใช้ด้วยการโต้ตอบ กับคอมพิวเตอร์ ซึ่งมีหลายชนิด ได้แก่ รายงาน การป้อน ข้อมูล เอกสาร และการโต้ตอบกับระบบ

กระบวนการออกแบบส่วนประสานประกอบด้วย (1) วิเคราะห์ผู้ใช้และระบบ (2) ออกแบบ โครงสร้างส่วนประสาน (3) ออกแบบมาตรฐานส่วนประสาน (4) สร้างต้นแบบที่ใช้งานจริง (5) ผู้ใช้ ประเมินผล

• เกณฑ์คุณภาพของซอฟต์แวร์ประกอบด้วย การประเมินจากลักษณะ ดังนี้ Functionality, Usability, Reliability, Performance, Supportability และ Maintainability การวัดคุณภาพของวอฟต์แวร์ต้องอาศัยการวัดซอฟต์แวร์เพื่อให้ได้ค่าที่เป็นตัวเลขของ คุณลักษณะบางอย่างของซอฟต์แวร์หรือกระบวนการผลิต • กระบวนการออกแบบส่วนประสานประกอบด้วย (1) วิเคราะห์ผู้ใช้และระบบ (2) ออกแบบ โครงสร้างส่วนประสาน (3) ออกแบบมาตรฐานส่วนประสาน (4) สร้างต้นแบบที่ใช้งานจริง (5) ผู้ใช้ ประเมินผล

• กระบวนการออกแบบส่วนประสานประกอบด้วย (1) วิเคราะห์ผู้ใช้และระบบ (2) ออกแบบ โครงสร้างส่วนประสาน (3) ออกแบบมาตรฐานส่วนประสาน (4) สร้างต้นแบบที่ใช้งานจริง (5) ผู้ใช้ ประเมินผล ประโยชน์ โทษ ช่วยในการควบคุมขั้นตอนการใช้ ทำให้ข้อมูลหรือโปรแกรมถูกทำลายได้ งานของผู้ใช้ต่อโปรแกรมที่กำลังใช้ ง่าย เช่น อาจจะถูกทำลายด้วยไวรัส งานอยู่ ผ่าน แป้นพิมพ์หรือคีย์บอร์ด ซึ่งสามารถแพร่ไปยังระบบคอมพิวเตอร์อื่นๆ หรือ เมาส์ ได้โดยผ่านเครือข่ายคอมพิวเตอร์

Thank you