Transcript Botany Presentation - Wellcome

การออกแบบ User Interface
การออกแบบยสู เซอร์ อินเตอร์ เฟซ
(User Interface Design)
การประมวลผลข้ อมูลเพื่ อให้ ได้ มาซึ่ งสารสนเทศที่ ต้องการ เป็ น
กระบวนการทางานใน เชิ งคอมพิวเตอร์ ศาสตร์ ส่ วนในด้ านของมนุษ ย์ ที่
เป็ นผู้ใช้ จาเป็ นต้ องมีการปฏิ สัมพันธ์ และโต้ ตอบกับระบบคอมพิวเตอร์
โดยตลอด สิ่ งเหล่ านีเ้ ป็ นแนวคิด เชิ งจิ ตวิทยา
การออกแบบยูสเซอร์ อินเตอร์ เฟซ คือ การออกแบบส่ วนประสาน
การใช้ งานระหว่ างผู้ใช้ กับระบบ จะมุ่งเน้ นถึงการปฏิสัมพันธ์ ระหว่ าง
มนุษย์ กับคอมพิวเตอร์ เป็ นสาคัญ ควรออกแบบการโต้ ตอบ
อย่ างไรเพื่อดึงดูดความสนใจแก่ ผ้ ใู ช้ และควรเลือกใช้ สื่ออุปกร์์
ที่เหมาะสมกับการปฏิสัมพันธ์ ระหว่ างมนุษย์ กับคอมพิวเตอร์
ชนิดของยสู เซอร์ อินเตอร์ เฟซ
(Type of User Interface)
1. การอินเตอร์ เฟซด้ วยภาษาธรรมชาติ (Natural-Language Interfaces)
2. การอิ นเตอร์ เฟซด้ วยคาถาม และคาตอบ (Question
Interfaces)
and
3. การอินเตอร์ เฟซด้ วยเมนู (Menus)
4. การอินเตอร์ เฟซด้ วยชุดคาสั่ ง (Command-Language Interfaces)
5. การอินเตอร์ เฟซแบบ GUI (Graphics User Interfaces)
Answer
ชนิดของยสู เซอร์ อินเตอร์ เฟซ
(Type of User Interface)
1. การอิ นเตอร์ เฟซด้ วยภาษาธรรมชาติ (NaturalLanguage Interfaces)
ผู้ใช้ สามารถโต้ ตอบกับระบบด้ วยการใช้
ถ้ อ ยค าภาษาพู ด ซึ่ ง เป็ นภาษาธรรมชาติ ที่ ใช้
สื่ อสารกัน
ชนิดของยสู เซอร์ อินเตอร์ เฟซ
(Type of User Interface)
2. การอิ นเตอร์ เฟซด้ วยคาถาม และคาตอบ (Question
Interfaces)
and
Answer
คอมพิวเตอร์ จะแสดงคาถามบนหน้ าจอ และให้ ผ้ ูใช้ โต้ ตอบด้ วยการ
ตอบคาถาม โดยจะดาเนิ นการโต้ ตอบแบบเรี ยงลาดับ ซึ่ งผู้ใช้ สามารถ
ตอบคาถามผ่ านทางคีย์บอร์ ดหรื อด้ วยการคลิกเมาส์
ชนิดของยสู เซอร์ อินเตอร์ เฟซ
(Type of User Interface)
2. การอิ นเตอร์ เฟซด้ วยคาถาม และคาตอบ (Question
Interfaces)
and
Answer
ชนิดของยสู เซอร์ อินเตอร์ เฟซ
(Type of User Interface)
3. การอินเตอร์ เฟซด้ วยเมนู (Menus)
การอิ น เตอร์ เฟซแบบเมนู จ ะให้ ผู้ ใ ช้ เ ลื อ กรายการที่ แ สดงอยู่ บ น
หน้ าจอ ผู้ใช้ สามารถโต้ ตอบกับระบบผ่ านเมนูด้วยอุปกร์์ หลายชนิ ด
ด้ วยกัน ไม่ ว่าจะเป็ นคี ย์บอร์ ด เมาส์ ปากกาแสง หรื อนิ ้วมื อ ในกร์ี ใช้
จอภาพแบบสั มผัส
ชนิดของยสู เซอร์ อินเตอร์ เฟซ
(Type of User Interface)
3. การอินเตอร์ เฟซด้ วยเมนู (Menus)
Pull-Down Menus, Nested Menus, Pop-Up Menus
ชนิดของยสู เซอร์ อินเตอร์ เฟซ
(Type of User Interface)
4. การอินเตอร์ เฟซด้ วยชุดคาสั่ ง (Command-Language Interfaces)
ผู้ ใ ช้ ง านจะโต้ ต อบกั บ แอปพลิ เ คชั น ด้ ว ยชุ ด ค าสั่ ง หรื อประโยค
ถ้ อยคา ซึ่ งคาสั่ งหรื อประโยคถ้ อยคาเหล่ านั้นจะมีรูปแบบการใช้ งานตาม
กฎเก์ฑ์ ที่แน่ นอน (Syntax Rules) ที่ ผ้ ใู ช้ จะต้ องจดจารู ปแบบการใช้ งาน
คาสั่ งหรื อประโยคถ้ อยคาที่ถกู ต้ อง
ชนิดของยสู เซอร์ อินเตอร์ เฟซ
(Type of User Interface)
4. การอินเตอร์ เฟซด้ วยชุดคาสั่ ง (Command-Language Interfaces)
ชนิดของยสู เซอร์ อินเตอร์ เฟซ
(Type of User Interface)
5. การอินเตอร์ เฟซแบบ GUI (Graphics User Interfaces)
หรื อไอคอน (Icon) เป็ นตัวนาเสนอบนจอภาพ ผู้ใช้ งานสามารถ
โต้ ตอบด้ วยคีย์บอร์ ด เมาส์ หรื อจอยสติ๊ก
ข้ อแนะนาในการออกแบบยสู เซอร์ อินเตอร์ เฟซทีด่ ี
1. ผู้ใช้ งานจะต้ องรั บรู้ เสมอว่ า สิ่ งที่ ได้ กระทาอยู่นีค้ ืออะไร และจะต้ องดาเนินการ
อย่ า งไรต่ อ ไป ระบบควรมี ก ารจั ด เตรี ยมค าแนะน าให้ แก่ ผ้ ู ใ ช้ ว่ า จะ ต้ อ ง
ดาเนินการอย่ างไรต่ อไป
•
บอกให้ ผ้ ใู ช้ งานรั บทราบว่ าต้ องทาอะไร
•
บอกให้ ผ้ ใู ช้ งานรั บทราบว่ าข้ อมูลที่ป้อนเข้ าไปนั้นถูกต้ อง หรื อไม่ ถกู ต้ อง
•
อธิ บายถึงเหตุผลว่ าต้ องใช้ เวลาในการประมวลผล
•
บอกให้ ผ้ ใู ช้ งานรั บทราบว่ า งานที่ส่งไปประมวลผลนั้น
เสร็ จสมบูร์์ หรื อไม่
ข้ อแนะนาในการออกแบบยสู เซอร์ อินเตอร์ เฟซทีด่ ี
2. หน้ าจอจะต้ องจัดเตรี ยมคาอธิ บายการใช้ งาน
3. ข้ อความ อธิ บาย หรื อสารสนเทศที่แสดงนั้นจะต้ องมีความยาวเพียงพอต่ อ
ผู้อ่าน ที่อ่านแล้ วเกิดความเข้ าใจ และยอมรั บ
4. การนาเสนอข้ อความบนจอภาพ ควรให้ เฉดสี ที่เหมาะสม
5. ในกร์ี ที่ผ้ ใู ช้ ได้ สั่งประมวลผลรายการใด ๆ ที่อาจส่ งผลต่ อความเสี ยหาย
หรื อความปลอดภัยต่ อระบบ ควรมีข้อความหรื อไดอะล็อกเพื่อยืนยัน
ถึงการประมวลนั้นก่ อน
ตัวอย่ างการออกแบบยสู เซอร์ อินเตอร์ เฟซของระบบเช่ ารถ
** สตอรี บอร์ ด (Storyboard) คื อเทคนิ คการออกแบบการโต้ ตอบ
(Dialogues) ระหว่ างผู้ใช้ งานกับคอมพิวเตอร์ โดยจะร่ างภาพเพื่อนาเสนอ
ลงบนกระดาษหรื อเอกสารอย่ างคร่ าว ๆ เพื่อแสดงถึงเหตุการ์์ และลาดับ
การทางานที่ต้องการนาเสนอผ่ านทางจอภาพ
การจัดทาโปรโตไทป์ (Prototyping)
โปรโตไทป์ หรื อต้ นแบบ ถือเป็ นการจัดทาต้ นแบบผลิตภั์ฑ์ ชนิด
หนึ่ง เพื่อให้ ผ้ ใู ช้ ได้ เห็นภาพ และแนวทางของระบบใหม่ เพื่อพิจาร์าว่ า
ตรงตามความต้ องการหรื อไม่ ซึ่ งมีข้อดีดังต่ อไปนี ้
1. ระบบงานจะได้ รับการเปลี่ยนแปลง ก่ อนที่จะดาเนินการพัฒนา
ระบบจริ ง
2. สามารถกาจัดความต้ องการบางส่ วนที่ไม่ ต้องการออกไป
เพื่อคงเหลือแต่ ส่วนที่จาเป็ นเท่ านั้น
3. ระบบที่ออกแบบ ตรงกับความต้ องการ หรื อตรง
ตามความคาดหวังของผู้ใช้ มากที่สุด
ประเภทของโปรโตไทป์
1. โปรโตไทป์ แบบทาแล้ วโยนทิง้
เป็ นเทคนิคการสร้ างผลิตภั์ฑ์ โดยเน้ นที่ความรวดเร็ ว เหมาะกับ
ระบบงานที่ไม่ มีความแน่ นอน หรื อเปลี่ยนแปลงบ่ อย
2. โปรโตไทป์ แบบมีพัฒนาการ
จะมีการสร้ างผลิตภั์ฑ์ ที่ตั้งอยู่บนรากฐานที่มีความมั่นคงขึน้ เรื่ อย ๆ
ตามความต้ องการของผู้ใช้ และท้ ายสุดก็คือระบบงานนั่นเอง
โปรโตไทป์ ประเภทนีจ้ ะมีความชัดเจนในรายละเอียดแต่ ละ
ขัน้ มากขึน้ เรื่ อย ๆ และสร้ างอย่ างมีคุ์ภาพ จึ งจาเป็ นต้ อง
ใช้ เวลามาก เนื่องจากต้ องมีการพัฒนาและปรั บปรุ งอยู่บ่อยครั้ ง
ประเภทของโปรโตไทป์
การออกแบบโปรแกรม (Program Design)
เป้ าหมายหลั ก ของการออกแบบ คื อการสร้ างโปรแกรมที่
ประกอบด้ วยฟั งก์ ชันหน้ าที่ ของโมดูลต่ าง ๆ ว่ ามีความสั มพัน ธ์ กับโมดูล
อื่น ๆ ที่เกี่ยวข้ องกันอย่ างไร ซึ่ งจะมุ่งเน้ นในด้ านของการกาหนดโมดูลการ
ทางานต่ าง ๆ ในโปรแกรม เทคนิ คที่ ใช้ นาเสนอเพื่ออธิ บายรู ปพรร์ คื อ
ผังโครงสร้ าง (Structure Chart) ซึ่ งเทคนิคนีจ้ ะช่ วยให้ ทราบถึงแอปพลิเค
ชันในเชิ งตรรกะว่ ามีการสื่ อสารระหว่ างโมดูลกันอย่ างไร
การออกแบบโปรแกรม (Program Design)
การออกแบบ
โปรแกรม
(Program
Design)
การออกแบบโปรแกรม (Program Design)
การออกแบบโปรแกรม (Program Design)
แนวทางในการออกแบบผังโครงสร้ างที่ดี
ควรออกแบบให้ แต่ ละโมดูลมีความเป็ นหนึ่งเดียวสูง (High Cohesion)
จะมีความแตกความซั บซ้ อนของโปรแกรมออกเป็ นโมดูลย่ อย ๆ โดย
โปรแกรมเมอร์ สามารถนาผังโครงสร้ างเหล่ านี ้ ใช้ เป็ นแนวทางหรื อเป็ น
กฎเก์ฑ์ ในการเขียนโปรแกรมได้ ง่ายขึน้ โมดูลที่ มีความเป็ นหนึ่ งเดียวใน
ฟั งก์ ชันจะทาให้ โมดูลนั้นง่ ายต่ อการเขียนโปรแกรม รวมถึงแก้ ไขปรั บปรุ ง
ง่ าย อี กทั้ งยังสามารถนามาเรี ยกใช้ งานซ้า ๆ ได้ อีกตามต้ องการ โมดูลที่
ปฏิบัติงานเพียงงานเดียว จะถือว่ ามี Cohesion สู ง
แนวทางในการออกแบบผังโครงสร้ างที่ดี
ควรออกแบบให้ แต่ ละโมดูล มีความสัมพันธ์ กนั แบบหลวม ๆ (Loosely Coupled)
แนวทางในการออกแบบผังโครงสร้ างที่ดี
ควรออกแบบให้ แต่ ละโมดูล มีความสัมพันธ์ กนั แบบหลวม ๆ (Loosely Coupled)
Tightly Coupled หมายความว่ า ตรรกะภายในโมดูลหนึ่ งมีการอ้ างอิ ง
ตรรกะบนโมดู ล อื่ นจ านวนมาก หรื อมี ก ารใช้ ตั ว แปรต่ า ง ๆในโปรแกรม
ร่ วมกันมาก ซึ่ งถือว่ าเป็ นการออกแบบโปรแกรมที่ ไม่ ดี เนื่ องจากหากมีการ
ปรั บปรุ งโมดูลหนึ่ ง ก็จะส่ งผลกระทบต่ อพวงไปยังโมดูลอื่ น ๆ ที่ เกี่ ยวข้ อง
ด้ วย ซึ่ งโมดูลที่ มีความสั มพันธ์ กับโมดูลอื่ น ๆ แบบหลวม ๆ หรื อที่ เรี ยกว่ า
Loosely Coupled นั้นจะมีคอนเน็กชันระหว่ างโมดูลเพียงเล็กน้ อย โดยมีการ
จัดใช้ ตัวแปรภายในแต่ ละส่ วนโดยเฉพาะ
แนวทางในการออกแบบผังโครงสร้ างที่ดี
ควรออกแบบให้ แต่ ละโมดูล มีความสัมพันธ์ กนั แบบหลวม ๆ (Loosely Coupled)
The End