การออกแบบอินเตอร์เฟสที่เกี่ยวข้องกับศักยภาพของทั้งมนุษย์

1. Introduction:เป็นการเลือการแทนรุปภาพต่างๆ เพื่อทำให้

• ผู้ใช้เกิดปัญหาน้อยที่สุด
• มี productivity
• ไม่รู้สึกเครียด หรือกดดัน สนุกที่จะใช้ (enjoyable)

2. Manifest Model

• เป็นตัวประสานระหว่าง Implementation Model (ความเข้าใจของ developer) กับ Mental Model (ความเข้าใจของผู้ใช้)
• ซอฟต์แวร์ที่ดี ภาพของ Implementation Model กับ Mental Model จะต้องเป็นภาพเดียวกัน แต่ในทางปฏิบัติทำได้ยาก
• การทำให้ Implementation Model มีความใกล้เคียงกับ Mental Model นั้น จะต้องอาศัยการทำและปรับปรุงหลายๆ รอบ

3. Mental Models:ความเข้าใจ ความคิด จินตนาการ ในประเด็นต่างๆ จุดมุ่งหมายเพื่อน อธิบายให้เข้าใจตรงกันบางทีมันจะ overlap กัน (ในภาพกว้าง คนละมุมกับหัวข้อที่ 2)
ของสิ่งเดียวกัน แต่ Mental Model จะแตกต่างกัน เพราะ

• สิ่งที่มนุษย์สร้างภาพขึ้น ตามที่ตนมีปฏิสัมพันธ์ด้วย
• เพราะมนุษย์มีประสบการณ์ที่แตกต่างกัน
• เป็นความคิดของบุคคลหนึ่งต่อเรื่องหนึ่งๆ
• มนุษย์จะถ่ายทอดความคิดนั้นๆ ไปยังบุคคลอื่นๆ ด้วย

4. Three Interface Paradigms
"จะเข้าใจ interface ได้ดีก็เต่อเมื่อทราบกระบวนการ" เรียงจากเก่าไปใหม่สุด

• Technology Paradigm
• Metaphor Paradigm
• Idiomatic Paradigm

Technology Paradigm

• มอง interface จากความรู้ที่ว่าระบบทำงานอย่างไร และพัฒนาอย่างไร
• ได้รับความนิยมในระยะแรก โดยเฉพาะวิศวกร ที่ชอบรื้อ ค้น จนคุ้นเคย และเข้าใจว่าระบบทำงานอย่างไร
• ข้อเสียคือ ถ้าจะขยายระบบไปยังผู้ใช้ทั่วไป ก็ไม่ตอบสนองต่อผู้ใช้
• การใช้งานต้องลองผิด ลองถูก

Metaphor Paradigm

• มอง interface จากสภาพแวดล้อมความเป็นจริงของการใช้งาน
• พยายามจำลองสภาพแวดล้อมจริงนั้น ไปไว้ในคอมพิวเตอร์ (actual environment + computer interface)
• ทำให้ผู้ใช้คุ้นเคยกับการใช้งาน เพราะใกล้เคียงกับสภาพความเป็นจริง ตัวอย่างเช่น desktop บนวินโดว์ เสมือนโต๊ะทำงาน และมีถังขยะ
• ผู้ใช้เรียนรู้แค่การใช้งาน interface โดยที่ไม่จำเป็นที่ต้องรู้ กลไกลของ technology

• เราไม่ได้ใช้ความสามารถของคอมพิวเตอร์เลย
• ทำให้ผู้ใช้ขาดจินตนาการ
• ยากที่จะตรวจสอบ (test) ได้ว่า interface นั้นตรงตามความต้องการในโลกปัจจุบันแค่ไหน

Idiomatic Paradigm

• ให้ความหมายเป็นเชิงนัยยะ คือ ไม่สื่อตรงๆ เช่น go on ไม่ใช่ไปบน แต่หมายถึง ดำเนินงานต่อ
• mouse เป็นเพียงตัวอย่างเดียวที่ Idiomatic ใช้อ้าง ว่า metaphor ประสบความสำเร็จได้ เพราะ idiomatic คือ ง่ายต่อการเรียนรู้
• เพราะ metaphor อธิบายไม่ได้ว่า mouse จำลองพฤติกรรมอะไรในชีวิตจริง

5. Design of the Interface

• Design Principle
• User-System Interaction
• User Guidance

Desing Principle
(ให้ ผู้ใช้มีส่วนรวมในการออกแบบ, พยายามหา Feed back จากผู้ใช้, เน้นที่ผู้ใช้เป็นหลัก, เข้าใจผู้ใช้ทั้งเชิง limitation physical และ mental)

Design Concerns on Human Capability

• User Familiar - เลือกภาษาเดียวกับผู้ใช้
• Consistency - สอดคล้องกลมกลืน (แต่ถ้าต้องการกระตุกความสนใจก็อาจจะยกเว้น)
• Minimal Surprise - นำเสนอเฉพาะข้อมูลที่ผุ้ใช้ต้องการ
• Recoverability - ป้องกันความผิดพลาด หรือแนะนำทางแก้ไขถ้าทำผิด
• User Guidance - มี help

การออกแบบ User Interface มีวัตถุประสงค์หลัก ดังนี้

 

          1. มีลักษณะเป็นหน้าต่างและคำสั่งในการทำงานคล้ายโปรแกรมทั่วๆไปที่ Run บน Windows เพราะผู้ใช้งานคอมพิวเตอร์ส่วนใหญ่คุ้นเคยกับการใช้ Windows อยู่แล้วทำให้ผู้ใช้สามารถใช้โปรแกรมได้สะดวกมากขึ้น

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

          3. เพื่อความสะดวกในการใช้งาน สามารถเลือกความเร็วในการแสดงจากลำดับรายการ

          4. ผู้ใช้จะป้อนข้อความที่จะแสดงออกได้ที่ช่องข้อความ

          5. ใช้สีสันสวยงามดึงดูดใจให้น่าใช้

 

การออกแบบ  User Interface

- สอดคล้อง/รองรับ พฤติกรรมการค้นคว้าของผู้ใช้   เช่น สะดุดตา สะดุดใจ สะดวก สบาย รวดเร็ว

- เชื่อมโยงข้อมูลที่เป็นประโยชน์ไว้ด้วยกันทั้งหมด

 

หลักการออกแบบเว็บไซต์ 

         การออกแบบเว็บไซต์ คำนึงถึงความเหมาะสมกับกลุ่มบุคคลเป้าหมายผู้ใช้และลักษณะของเว็บไซต์ ความสะดวกในการใช้งาน

 

องค์ประกอบของการออกแบบเว็บไซต์ ต้องคำนึงถึง

        1. ความเรียบง่าย ได้แก่ มีรูปแบบที่เรียบง่าย ไม่ซับซ้อน และใช้งานได้สะดวก ไม่มีกราฟิกหรือตัวอักษรที่เคลื่อนไหวอยู่ตลอดเวลา ชนิดและสีของตัวอักษรไม่มากจนเกินไปทำให้วุ่นวาย

        2. ความสม่ำเสมอ ได้แก่ ใช้รูปแบบเดียวกันตลอดทั้งเว็บไซต์ เช่น รูปแบบของหน้า สไตล์ของกราฟิก ระบบเนวิเกชันและโทนสี ควรมีความคล้ายคลึงกันตลอดทั้งเว็บไซต์

        3. ความเป็นเอกลักษณ์ การออกแบบเว็บไซต์ควรคำนึงถึงลักษณะขององค์กร เพราะรูปแบบของเว็บไซต์จะสะท้อนถึงเอกลักษณ์และลักษณะขององค์กรนั้น ๆ เช่น ถ้าเป็นเว็บไซต์ของทาง ราชการ จะต้องดูน่าเชื่อถือไม่เหมือนสวนสนุก ฯลฯ

        4. เนื้อหาที่มีประโยชน์ เนื้อหาเป็นสิ่งที่สำคัญที่สุดในเว็บไซต์ ดังนั้นควร จัดเตรียมเนื้อหาและข้อมูลที่ผู้ใช้ต้องการให้ถูกต้อง และสมบูรณ์ มีการปรับปรุงและเพิ่มเติมให้ทันเหตุการณ์อยู่เสมอ

เนื้อหาไม่ควรซ้ำกับเว็บไซต์อื่น จึงจะดึงดูดความสนใจ

        5. ระบบเนวิเกชันที่ใช้งานง่าย ต้องออกแบบให้ผู้ใช้เข้าใจง่ายและใช้งานสะดวก ใช้กราฟิกที่สื่อความหมายร่วมกับคำอธิบายที่ชัดเจน มีรูปแบบและลำดับของรายการที่สม่ำเสมอ เช่น วางไว้ ตำแหน่งเดียวกันของทุกหน้า

        6. ลักษณะที่น่าสนใจ หน้าตาของเว็บไซต์จะต้องมีความสัมพันธ์กับคุณภาพขององค์ประกอบต่างๆ เช่น คุณภาพของกราฟิกที่จะต้องสมบูรณ์ การใช้สี การใช้ตัวอักษรที่อ่านง่าย สบายตา การใช้โทนสีที่เข้ากัน ลักษณะหน้าตาที่น่าสนใจนั้นขึ้นอยู่กับความชอบของแต่ละบุคคล

        7. การใช้งานอย่างไม่จำกัด ผู้ใช้ส่วนใหญ่สามารถเข้าถึงได้มากที่สุด เลือกใช้บราวเซอร์ชนิดใดก็ได้ในการเข้าถึงเนื้อหา สามารถแสดงผลได้ทุกระบบปฏิบัติการและความละเอียดหน้าจอต่างๆ กันอย่างไม่มีปัญหา เป็นลักษณะสำคัฐสำหรับผู้ใช้ที่มีจำนวนมาก

        8. คุณภาพในการออกแบบ การออกแบบและเรียบเรียงเนื้อหาอย่างรอบคอบ สร้างความรู้สึกว่าเว็บไซต์มี….คุณภาพ ถูกต้อง และเชื่อถือได้

        9. ระบบการใช้งานที่ถูกต้อง การใช้แบบฟอร์มสำหรับกรอกข้อมูลต้องสามารถกรอกได้จริง ใช้งานได้จริง ลิงค์ต่างๆ จะต้องเชื่อมโยงไปหน้าที่มีอยู่จริงและถูกต้อง ระบบการทำงานต่างๆ ในเว็บไซต์จะต้องมีความแน่นอนและทำหน้าที่ได้อย่างถูกต้อง

 

พื้นฐานในการออกแบบเว็บไซต์ที่ดี

        - มีเนื้อหาเป็นประโยชน์ ตรงกับที่ผู้ใช้ต้องการ

        - มีการปรับปรุงเพิ่มเติมเนื้อหา และพัฒนาเว็บไซต์อยู่เสมอ

        - ใช้เวลาในการดาวน์โหลดน้อย แสดงผลเร็ว ใช้งานที่สะดวก เข้าใจง่าย

ข้อควรพิจารณาในเรื่องการออกแบบหน้าจอ

1. ความน่าสนใจของเนื้อหาควรเป็นประเด็นหลักของการออกแบบ ควรทุ่มเทพื้นที่ บนเว็บไซต์เพื่อเนื้อหา อย่างน้อยครึ่งหนึ่ง หรือเกือบ 80 เปอร์เซ็นต์ มากกว่าเรื่อง navigation ที่ควรจะมีสัดส่วนต่ำกว่า 20 เปอร์เซ็นต์

2. พื้นที่สีขาวทำให้คนใช้เข้าใจการจัดหมวดหมู่เนื้อหา นำสายตาคนใช้ได้ดี และเสียเวลาดาวน์โหลดน้อยกว่าเมื่อเปรียบเทียบกับการใช้เส้นแบ่ง

3. หลักการทั่วไปของการออกแบบ user interface คือ ใช้องค์ประกอบการออกแบบให้น้อยๆ เพื่อให้หน้าเว็บมีความเรียบง่ายและใช้เวลาดาวน์โหลดน้อยลง

4. ควรออกแบบหน้าให้สามารถใช้งานได้กับหน้าจอทุกประเภท เพราะเราไม่รู้ว่าคนใช้ใช้หน้าจอขนาดไหน

5. คนออกแบบต้องกำหนดหน้าในลักษณะที่ช่วยให้คนใช้สามารถใช้ประโยชน์จากหน้านั้นได้สอดคล้องกับสภาวการณ์ที่ต่างกันของผู้ใช้แต่ละคน บางคนจอใหญ่ บางคนจอเล็ก บางคนชอบใช้ตัวอักษรขนาดใหญ่ บางคนขนาดเล็ก หน้าที่ออกแบบจะต้องทำงานได้ดีกับทุกขนาด คือไม่กำหนดขนาดตายตัว แต่กำหนด Layout เป็นเปอร์เซ็นต์ของพื้นที่ที่มีอยู่บนหน้า รวมไปถึงการออกแบบให้สามารถพิมพ์งานจากหน้าเว็บ ออกมาได้ในสัดส่วนที่พอดี มีเนื้อหาครบถ้วน

6. การออกแบบอย่าไปมุ่งเน้นเรื่องการอัพเกรดหรือใช้เทคโนโลยีใหม่ล่าสุดอยู่เสมอ เพราะปัจจุบันนักออกแบบตระหนักแล้วเว็บไซต์ของตนควรจะสามารถทำงานกับ เทคโนโลยีตัวเก่าได้ต่อไป ซึ่งเป็นผลมาจากตัวผู้ใช้ทั่วๆไปที่ไม่ใช่นักคอมพิวเตอร์ ยังคงใช้โปรแกรมเบราว์เซอร์ตัวเก่าที่ยังทำงาน และความแตกต่างระหว่างเทคโนโลยีเก่าใหม่ ในปัจจุบันไม่ได้มีมากมาย แถมปัจจุบันคนใช้คอมพิวเตอร์เป็นคนทั่วๆไปมีมากขึ้น ไม่ได้จำกัดอยู่เฉพาะนักเล่นคอมพิวเตอร์ที่แข่งกันว่าเครื่องใครมีเทคโนโลยี ดีกว่ากัน

ที่มา   http://www.social.nu.ac.th/papers/research/learning.pdf  

http://campus.en.kku.ac.th/project/2003/COE2003-09/conceptual.htm 

http://www.chaiwbi.com/501/5101.html 

www.tiac.or.th/slg/วรนุช1.ppt  

 

2.การออกแบบอินเตอร์เฟสที่เกี่ยวข้องกับศักยภาพของมนุษย์
- มีเนื้อหาเป็นประโยชน์ ตรงกับที่ผู้ใช้ต้องการ เพื่อบรรลุจุดมุ่งหมายของการใช้งานของผู้ใช้ ทำให้ผู้ใช้สามารถพัฒนาศักยภาพได้อย่างรวดเร็ว ไม่เสียเวลา
- มีการปรับปรุงเพิ่มเติมเนื้อหา และพัฒนาเว็บไซต์อยู่เสมอ เพื่อให้ผู้ใช้ได้รับข้อมูลที่ปรับปรุงใหม่อย่างเสมอและต่อเนื่อง
- ใช้เวลาในการดาวน์โหลดน้อย แสดงผลเร็ว ใช้งานที่สะดวก เข้าใจง่าย

ที่มา
 www.guru.google.coth.
www.docstoc.com
สอบถามผู้รู้

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

1. Information (สารสนเทศ)
คือ ข้อมูลสารสนเทศ ซึ่งได้จากการผลประมวลผลข้อมูล

2. Individualization (ความแตกต่างระหว่างบุคคล)
คือ ความแตกต่างระหว่างบุคคล ลักษณะสำคัญของคอมพิวเตอร์ช่วยสอน บุคคลแต่ละบุคคลมีความแตกต่างกันทางการเรียนรู้ ซึ่งเกิดจากบุคลิกภาพ สติปัญญา

3. Interaction (การโต้ตอบ)
คือ การแสดงออกของระดับต่างๆในปัจจัยหนึ่งไม่เท่ากัน เมื่อเปรียบเทียบจากระดับหนึ่งไปอีกระดับหนึ่งของอีกปัจจัย

4. Immediate Feedback (ผลป้อนกลับโดยทันที)
คือ การแสดงผลข้อมูลต่างๆ กลับโดนทันที

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

1. Information (สารสนเทศ)
คือ ข้อมูลสารสนเทศ ซึ่งได้จากการผลประมวลผลข้อมูล

2. Individualization (ความแตกต่างระหว่างบุคคล)
คือ ความแตกต่างระหว่างบุคคล ลักษณะสำคัญของคอมพิวเตอร์ช่วยสอน บุคคลแต่ละบุคคลมีความแตกต่างกันทางการเรียนรู้ ซึ่งเกิดจากบุคลิกภาพ สติปัญญา

3. Interaction (การโต้ตอบ)
คือ การแสดงออกของระดับต่างๆในปัจจัยหนึ่งไม่เท่ากัน เมื่อเปรียบเทียบจากระดับหนึ่งไปอีกระดับหนึ่งของอีกปัจจัย

4. Immediate Feedback (ผลป้อนกลับโดยทันที)
คือ การแสดงผลข้อมูลต่างๆ กลับโดนทันที

 

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

เรื่องที่ต้องพิจารณาในการออกแบบ User Interface
การออกแบบการจัดวาง (Layouts) ขององค์ประกอบบนหน้าจอ
การออกแบบโครงสร้างของการป้อนข้อมูล (Structure Data Entry)
การควบคุมความถูกต้องในการป้อนข้อมูล (Controlling Data Input)
ข้อความตอบสนอง (Feedback Message)
การแสดงส่วนช่วยเหลือ (Help)
การออกแบบการควบคุมการเข้าถึงข้อมูลของผู้ใช้ (Access Control)
การออกแบบลำดับการเชื่อมโยงจอภาพ (Dialogue Design)

การออกแบบส่วนต่อประสาควรคำนึงถึง
- ความหมลากหลายของผู้ใช้งานทั้งทางกายภาพและสภาพแวดล้อม
-บุคลิกของผู้ใช้ที่แตกต่างกัน
- ความแตกต่างของปัญหาและความสามารถในการรับรู้
-ความหลากหลายทางเชื้อชาติและวัฒนธรรม
-ผู้ใช้งานที่ไร้ความสามารถหรือพิการ
-อายุของผู้ใช้งาน
-การออกแบบสำหรับเด็ก
-การปรับให้เข้ากับซอฟแวร์และฮาร์ดแวร์

หลักการในการออกแบบส่วนต่อประสาน
ประเมินทักษะผู้ใช้งาน เพราะผู้ใช้งานมีหลากหลาย การรู้จักผู้ใช้ เป็นหลักการแรกที่ต้องทำ (Hansen, 1971) เราอาจแบ่งทักษะผู้ใช้งานออกเป็น 3 ส่วนใหญ่ ๆ คือ ผู้ใช้มือใหม่ (Novice or first-time user) ผู้ใช้ระดับกลาง (Knowledgeable intermittent users) และผู้เชี่ยวชาญ (Expert frequent user) หากจะออกแบบให้ใช้งานได้กับกลุ่มใดกลุ่มหนึ่งจะเป็นเรื่องง่าย แต่ถ้าต้องออกแบบให้คนทั้งสามกลุ่มเข้าใจร่วมกันได้ จะเป็นเรื่องที่ยากและท้าทายมาก
แจกแจงงาน นักออกแบบต้องแจกแจงหน้าที่และงานของระบบให้ละเอียดก่อน แล้วเรียงลำดับว่างานไหนมีความสำคัญก่อน งานไหนสำคัญหลัง
เลือกแบบการมีปฏิสัมพันธ์ การปฏิสัมพันธ์มีได้หลายรูปแบบนักออกแบบต้องเลือกให้เหมาะสม เช่น
Direct manipulation การจับต้องสัมผัสโดยตรง เช่น การลากไอคอนลงไปบนถังขยะ แสดงว่าต้องการลบ มีข้อดีคือ ภาพแสดงถึงหน้าที่อย่างชัดเจน เรียนรู้ได้ง่าย จดจำได้ง่าย หลีกเลี่ยงความผิดพลาด สนับสนุนการค้นหา และ ก่อให้เกิดการปฏิบัติตาม มีข้อเสียคือ สร้างยาก และต้องการการแสดงผลที่เป็นกราฟิกและต้องอาศัยเครื่องชี้ (เม้าส์, พ้อยเตอร์)
Menu Selection การเลือกเมนู มีข้อดีคือ เรียนรู้ได้ง่าย ลดการใช้คียบอร์ด เกิดการตัดสินใจที่มีโครงสร้าง ลดการเกิดข้อผิดพลาด มีข้อเสียคือ เมนูที่มากไปทำให้การนำเสนอไม่ดี ทำให้ผู้ใช้งานที่คล่องใช้งานได้ช้าลง ใช้พื้นที่ในการแสดงผลมาก
Form Fill in การเติมคำลงในฟอร์ม มีข้อดีคือ การกรอกข้อมูลมีความง่าย ฝึกฝนได้โดยไม่ยาก และมีคำแนะนำที่สะดวก มีข้อเสียคือ ใช้พื้นที่แสดงผลมาก
Command Language ภาษาสั่งการ เป็นการใช้ตัวอักษรในการสั่งการ ส่วนใหญ่จะใช้กับผู้ใช้ที่มีความเชี่ยวชาญ มีข้อดีคือ ยืดหยุ่น ดึงดูดผู้ใช้ระดับสูง ผู้ใช้สามารถสร้างคำสั่งเองได้ มีข้อเสียคือ มีข้อผิดพลาดได้ง่าย ต้องการการอบรมและการจดจำสูง
Natural Language ภาษาพูด หรือภาษาที่ใช้โดยธรรมชาติ มีข้อดีคือ สร้างสาระสำคัญของระบบการเรียนรู้ มีข้อเสียคือ ต้องแยกแยะบทสนทนา อาจไม่แสดงถึงเนื้อหา อาจต้องพิมพ์มาก และคาดเดาไม่ได้
ใช้กฎ 8 ข้อสำหรับการออกแบบหน้าจอ
Strive for consistency ทำให้เกิดความสม่ำเสมอ ไม่ว่าจะเป็นเมนู ไอคอน สี รูปแบบ ตัวอักษรต่าง ๆ ควรจะมีความสม่ำเสมอ เป็นรูปแบบเดียวกัน ไม่ว่าจะเป็นสัญลักษณ์ สี ขนาดที่ใช้ควรจะเป็นชุดเดียวกัน
Cater to universal usability ให้ความพอใจกับทุกคน กับทุกกลุ่มผู้ใช้ เราอาจต้องหาข้อมูลผู้ใช้งานมาให้ครอบคลุมทั้งหมด แล้วเลือกการออกแบบที่ผู้ใช้งานส่วนใหญ่พอใจ
Offer information feedback ให้ข้อมูลป้อนกลับเมื่อมีการปฏิสัมพันธ์ ข้อมูลป้อนกลับจะเป็นตัวเร้าที่ดีสำหรับผู้ใช้งาน ให้มีความรู้สึกว่ากำลังได้ควบคุมและโต้ตอบกับระบบอยู่
Design dialog yield closure ออกแบบให้มีจุดเริ่มต้น ระหว่างกลาง และจุดสุดท้าย
Prevent error มีการป้องกันความผิดพลาดจากผู้ใช้งาน เช่น เมื่อมีการคลิกเม้าส์ผิดที่ หรือป้อนข้อมูลผิด ระบบจะมีข้อความเตือนว่าผู้ใช้งานป้อนข้อมูลผิดพลาด จะช่วยลดความผิดพลาดของข้อมูลได้มาก
Permit easy reversal of actions สามารถย้อนกลับได้ง่ายเพื่อแก้ไขหากเกิดข้อผิดพลาด
Support internal locus of control ระบบมีการจัดการการควบคุมภายใน ต้องออกแบบให้เกิดการตอบสนองของหน้าจอกับสิ่งที่ผู้ใช้ได้กระทำลงไปให้มีความสัมพันธ์กัน
Reduce short-term memory load ลดความยาวของเวลาที่นำเสนอเนื้อหาเพื่อง่ายในการจดจำในความจำระยะสั้น

นอกจากนี้ปรมาจารย์ทางด้านการออกแบบส่วนต่อประสาน Jakop Nielson ได้สรุปสาระสำคัญของการออกแบบให้ใช้งานง่ายไว้ 10 ข้อ ดังต่อไปนี้

Visibility of system status

ระบบต้องแสดงให้ผู้ใช้งานเห็นเสมอว่าตนกำลังทำอะไรอยู่ กำลังจะเกิดอะไรขึ้น และให้ผลป้อนกลับในเวลาที่เหมาะสม

Match between system and the real world

ระบบต้องสามารถพูดภาษาเดียวกันกับผู้ใช้โดยมีตรรกะการใช้งานที่เป็นธรรมชาติ ไม่ใช้ภาษาที่แปลกไปจากปรกติ

User control and freedom

ผู้ใช้มักจะใช้งานผิดพลาดจึงจำเป็นต้องมีทางออกให้เสมอสำหรับสถานการณ์ที่ไม่พึงประสงค์ เมื่อผู้ใช้งานทำผิด สนับสนุนการ Undo และ Redo

Consistency and standards

มีความสม่ำเสมอและเป็นมาตรฐานไปทุก ๆ หน้าจอของการออกแบบ ผู้ใช้งานต้องไม่สับสนในเรื่องการจัดวางหรือขนาดของตัวหนังสือ ตัวระบบเองก็ควรจะมีชุดป้อนคำสั่งต่าง ๆที่เป็นมาตรฐาน

Error prevention

ระบบควรจัดให้มีคำเตือนให้ระวังความผิดพลาดซึ่งเป็นสิ่งที่ดีที่จะช่วยป้องกันความผิดพลาด ระบบควรจะให้มีการตกลงใจซ้ำอีกครั้งเพื่อตรวจสอบความแน่นอนของการตัดสินใจของผู้ใช้ เช่น ท่านต้องการแก้ไขหรือไม่ ให้ตอบ แก้ไข หรือ ไม่แก้ไข

Recognition rather than recall

พยายามทำให้ผู้ใช้งานต้องใช้ความจำในการจดจำคำสั่งต่างๆในระบบให้น้อยที่สุดโดยการทำให้ส่วนประกอบหน้าจอ การออกคำสั่งปฏิบัติและส่วนตัวเลือกมีความชัดเจน วิธีการใช้งานต้องเข้าถึงได้ง่ายและรับรู้ได้ง่าย

Flexibility and efficiency of use

มีความยืดหยุ่นสำหรับผู้ใช้งานหลากหลายกลุ่ม และมีประสิทธิผลในการทำงาน

Aesthetic and minimalist design

การนำเสนอเนื้อหาต้องไม่รวมเรื่องที่ไม่เกี่ยวข้องหรือใช้อย่างน้อยๆ  เพื่อจะได้เน้นเนื้อหาที่เราต้องการสื่อสารอย่างเต็มที่

Help users recognize, diagnose, and recover from errors

ข้อความแสดงความผิดพลาดต้องปรากฏในแบบตัวอักษรธรรมดาไม่ใช่โค๊ดโปรแกรมที่เข้าใจยาก ระบุปัญหาและบอกวิธีแก้ไข ให้ผู้ใช้งานสามารถแก้ไขได้เอง

Help and documentation

ถึงแม้จะคาดหวังไว้ว่าระบบที่ดีต้องทำงานได้โดยไม่ต้องอาศัยคู่มือการใช้ แต่อย่างไรก็ตามคู่มือก็ยังมีความจำเป็น ในคู่มือต้องมีการแบ่งสารบัญข้อมูลที่ให้ต้องหาง่ายเจาะจงไปยังหน้าที่ต่าง ๆ มีการเรียงลำดับอย่างเป็นระบบ และไม่หนาจนเกินไป

 

http://gotoknow.org/blog/useit/43505

 

ในการวิเคราะห์ส่วนต่อประสาน ต้องเข้าใจปัญหาก่อน นั่นคือ

the people  -- เข้าใจคน บุคลากรที่ใช้งานระบบ

the tasks  -- เข้าใจงานที่ผู้ใช้ต้องการใช้เพื่อให้ทำงานให้สำเร็จ

the content  -- เข้าใจเนื้อหาที่จะต้องนำเสนอในส่วนต่อประสาน

the environment  -- เข้าใจสิ่งแวดล้อมที่งานเหล่านั้นทำงานอยู่

สิ่งที่ควรคำนึงถึงการออกแบบส่วนต่อประสาน

การออกแบบ User Interface ต้องคำนึงถึงข้อจำกัดคน ได้แก่ ความสามารถในการจดจำข้อมูล ซึ่งคนไม่สามารถจดจำอะไรได้เยอะๆ จึงต้องจำกัดส่วนตอบสนองให้สั้นๆ คนย่อมต้องมีข้อผิดพลาด คนมีความแตกต่างกันไปทั้งร่างกายและจิตใจ และคนมีความแตกต่างด้านการตอบสนอง นักออกแบบควรทราบข้อจำกัดทางกายภาพ และ จิตใจของผู้คน และ ควรตระหนักว่า คนจะทำผิดพลาดในเรื่องใดบ้าง

การออกแบบ User Interface มีหลักการดังนี้

1. ออกแบบโดยพิจารณาถึงความคุ้นเคยของผู้ใช้ (User familiarity)
2. ออกแบบให้มีคุณสมบัติความเสมอต้นเสมอปลาย (Consistency) 
3. ออกแบบให้มีสิ่งที่ไม่คาดคิดเกิดขึ้นจากการใช้งานน้อยที่สุด (Minimal surprise)
4. ออกแบบให้สามารถกู้กลับสถานการณ์หรือข้อมูลได้ (Recoverability) 
5. ออกแบบให้มีคำแนะนำในการใช้งานแก่ผู้ใช้อย่างเหมาะสม (User guidance)
6. ออกแบบให้รองรับการใช้งานผู้ใช้ที่มีความสามารถแตกต่างกันได้อย่างหลากหลาย (User diversity) 

การออกแบบส่วนต่อประสานกับผู้ใช้ที่ดี ต้องคำนึงถึงปัจจัยพื้นฐาน 3 ด้าน

1. ด้านกายศาสตร์ (Ergonomics) ซึ่งกล่าวถึงวิธีการที่ผู้ใช้สามารถทำงาน เรียนรู้และติดต่อกับคอมพิวเตอร์
2. ด้านสุนทรียศาสตร์ (Aesthetics) ซึ่งเน้นในเรื่องความสวยงาม น่าสนใจและง่ายต่อการใช้งาน และ
3. ด้านอินเทอร์เฟสเทคโนโลยี (Interface Technology) ซึ่งเน้นในเรื่องของโครงสร้างในการดำเนินงานให้บรรลุวัตถุประสงค์ของการออกแบบ

dearnan.files.wordpress.com/2008/08/se-week8.ppt

www.spu.ac.th/~surasak.mu/images/cse323.../CSE323_Summary11_UI.doc

www.spu.ac.th/~surasak.mu/images/cse322.../CSE322_Quiz6_Solution.doc

การออกแบบอินเตอร์เฟสที่เกี่ยวข้องกับศักยภาพของทั้งมนุษย์

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

เรียกอีกอย่างว่า การออกแบบจอภาพ (Screen Design)

ลักษณะของผู้ใช้

• ผู้ใช้หน้าใหม่ด้อยประสบการณ์ (
• ผู้ใช้ที่มีประสบการณ์และความรู้ระดับกลาง (
• ผู้ที่ใช้งานเป็นประจำหรือผู้เชี่ยวชาญ (

โครงสร้างระบบความคิดของมนุษย์

• มนุษย์รับรู้โดยผ่านประสาทสัมผัส (
• จากนั้นจะส่งสิ่งที่รับรู้ผ่านเข้ามายังหน่วยความจำระยะสั้น
• จากนั้นจึงส่งข้อมูลผ่านไปยังส่วนความจำขั้นต้น
• สุดท้ายข้อมูลจะส่งไปยังหน่วยความจำระยะยาว

หลักการออกแบบตามความต้องการของผู้ใช้

• ดำรงความคงที่
• มีทางลัดให้เลือกเดิน
• เสนอคำตอบอย่างมีความหมาย
• ตอบโต้ยืนยันการสิ้นสุด
• จัดการกับข้อผิดพลาดอย่างง่าย ๆ
• อนุญาตให้ดำเนินการแก้ไขกลับได้
• สนับสนุนการควบคุมจากภายนอก
• ลดภาระความทรงจำระยะสั้น

หลักการพื้นฐานการนำเสนอแบบกราฟิก

• นำเสนอส่วนที่เป็นข้อความและสัญลักษณ์อย่างชัดเจน
• ออกแบบระบบที่เสนอโครงสร้างและขั้นตอนของการดำเนินการอย่างชัดเจน
• ในกรณีที่ผู้ใช้สั่งดำเนินการไม่ตรงตามขั้นตอนการทำงาน ควรจัดให้มีการเตือนผู้ใช้ หรือนำเสนอสัญลักษณ์ที่ทำให้ผู้ใช้ทราบว่าจะต้องแก้ไขอย่างไร

หลักการใช้สีบนจอกราฟิก

• ไม่ใช้จำนวนสีเกินความจำเป็น
• จำกัดจำนวนสี
• ใช้เทคนิคการกำหนดความหมายให้กับสีที่ใช้
• เปิดโอกาสให้ผู้ใช้ควบคุมการนำเสนอสี
• ควรออกแบบโดยคำนึงถึงจอภาพแบบสีเดียว
• ใช้สีในการสร้างรูปแบบ
• เลือกใช้สีที่ตรงกับความคาดหวังของผู้ใช้
• เลือกจัดสีที่นำเสนออย่างระมัดระวัง

รูปแบบของ User Interfaces

แบ่งได้เป็น 5 รูปแบบคือ

Command Language Interaction

• เป็นการโต้ตอบกับระบบโดยที่ผู้ใช้จะต้องพิมพ์คำสั่งลงในช่องป้อนคำสั่ง เพื่อกระตุ้นให้เกิดการทำงานในระบบ
• ผู้ใช้ระบบจะต้องสามารถจดจำคำสั่ง ไวยากรณ์ และกฏเกณฑ์ในการป้อนคำสั่ง
• เหมาะสำหรับผู้ใช้ที่มีความชำนาญในการใช้ระบบปฏิบัติการ

Menu Interaction

• เป็นการโต้ตอบกับระบบด้วยการแสดงเมนูคำสั่งให้ผู้ใช้คำสั่งเลือกคำสั่งใด ๆ เพื่อติดต่อกับระบบ โดยผู้ใช้ไม่ต้องป้อนคำสั่งเอง
• รูปแบบของเมนูในปัจจุบันมี

–       Pull-down Menu

–       Pop-up Menu

Form Interaction

• เป็นการโต้ตอบที่ผู้ใช้ระบบจะต้องป้อนข้อมูลลงในช่องว่างที่อยู่ในแบบฟอร์มที่แสดงทางหน้าจอคอมพิวเตอร์ ซึ่งมีลักษณะคล้ายกับการกรอกแบบฟอร์มลงในกระดาษ

Object-Based Interaction

• เป็นการโต้ตอบกับระบบที่ใช้สัญลักษณ์เป็นตัวแทนคำสั่งที่ใช้ในการปฏิบัติงาน เช่น การใช้
• ข้อดีคือ ประหยัดพื้นที่บนหน้าจอเนื่องจากเป็นสัญลักษณ์ที่เป็นรูปภาพที่มีขนาดเล็ก

Natural Language Interaction

• เป็นการโต้ตอบระบบด้วยการใช้เสียงพูดของผู้ใช้ระบบ ไม่ว่าจะเป็นการนำข้อมูลเข้าหรืออกจากระบบ
• ภาษาที่ใช้ เช่น ภาษาอังกฤษ

การออกแบบ Interfaces

แบ่งออกเป็น 5 ขั้นตอนคือ

การออกแบบ Layouts ของหน้าจอ

• ต้องมีการจัดวางด้วยรูปแบบเดียวกันกับที่ปรากฏอยู่บนเอกสารใช้งานจริง
• ลำดับการป้อนข้อมูลต้องมีลักษณะ จากซ้ายไปขวา และจากบนลงล่าง

การออกแบบโครงสร้างของการป้อนข้อมูล

• ควรออกแบบให้หน้าจอมีความสามารถดังนี้

–       การควบคุม Cursor

–       การแก้ไขตัวอักษรหรือข้อมูล

–       การใช้คำสั่ง Exit

–       มีส่วนช่วยเหลือ (Help)

การควบคุมความถูกต้องในระหว่างป้อนข้อมูล

• เพื่อกำหนดรูปแบบ หรือลักษณะของช่องที่จะใช้ในการป้อนข้อมูล
• เป็นการกำหนดลักษณะต่าง ๆ ที่เกี่ยวข้องกับช่องป้อนข้อมูล เพื่อเตรียมความสะดวกแก่ผู้ใช้ในระหว่างการทำงาน

การตอบสนองของระบบ

• แจ้งสถานะการทำงาน
• แสดงความพร้อมในการรับคำสั่ง
• ข้อความแจ้งหรือเตือนเมื่อมีข้อผิดพลาด

การแสดงส่วนช่วยเหลือ

• สามารถเข้าใจได้ง่าย
• มีการจัดรูปแบบอย่างเป็นระเบียบ
• มีการแสดงตัวอย่าง

ที่มา

 

1. http://www.google.co.th/#hl=th&q=interface+design+%E0%B8%84%E0%B8%B7%E0%B8%AD&aq=&aqi=&aql=&oq=&gs_rfai=&fp=79434384fc6d605b

2. http://en.wikipedia.org/wiki/User_interface_design

 

 

การออกแบบส่วนติดต่อกับผู้ใช้ (User Interface Design)

การออกแบบส่วนติดต่อกับผู้ใช้ (User Interface)

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

User Interface  หมายถึงส่วนติดต่อระหว่างผู้ใช้กับระบบ เพื่อรองรับการนำข้อมูลหรือคำสั่งเข้าไปสู่ระบบ ตลอดจนนำเสนอสารสนเทศกลับมายังผู้ใช้

 

รูปแบบของ User Interface

-  เพื่อให้ผู้ใช้งานสามารถโต้ตอบกับระบบอย่างมีประสิทธิภาพ

-  นิยมใช้แบบกราฟิก (Graphic User Interface :GUI) มีรูปแบบดังนี้ คือ

                                                                                                              

1. การโต้ตอบด้วยการพิมพ์คำสั่ง (Command Line Interaction)

2. การโต้ตอบด้วยเมนูคำสั่ง (Menu Interaction)

3. การโต้ตอบด้วยแบบฟอร์ม (Form Interaction)

4. การโต้ตอบผ่านวัตถุ (Object-Based Interaction)

5. การโต้ตอบด้วยภาษามนุษย์ (Natural Language Interaction)

1. การโต้ตอบด้วยการพิมพ์คำสั่ง (Command Line Interaction)

 

-  เป็นการโต้ตอบกับระบบโดยที่ผู้ใช้จะต้องพิมพ์คำสั่งลงในช่องป้อนคำสั่ง เพื่อกระตุ้นให้เกิดการทำงานในระบบ

-  ผู้ใช้จะต้องจำคำสั่ง ไวยากรณ์ และกฎเกณฑ์ต่างๆ เช่น คำสั่งของระบบปฏิบัติการ DOS

-  รวมถึงการใช้ Shortcut keys และ Function keys ด้วยเมนู   คือ การเตรียมคำสั่งสำหรับให้ผู้ใช้เลือก

-  เป็นการโต้ตอบกับระบบด้วยการแสดงเมนูคำสั่ง  โดยผู้ใช้ไม่จำเป็นต้องป้อนคำสั่งเอง

รูปแบบเมนูมีดังนี้ คือ

2. การโต้ตอบด้วยเมนูคำสั่ง (Menu Interaction)

-  Pull-down Menu  เมนูแสดงคำสั่ง   โดยแบ่งรายการของคำสั่งเป็นหมวดหมู่ เมื่อผู้ใช้   คลิกจะแสดงรายการคำสั่งจากบนลงล่าง

 

  - Pop-up Menu  เมนูแสดงคำสั่ง   คือเมื่อผู้ใช้คลิกเลือกวัตถุ หรือ object ใด ๆ ในจอภาพ คำสั่งหรือคุณสมบัติที่เกี่ยวข้องกับ object นั้นจะถูกแสดงออกมา

 

  -  Tool Bar เป็นปุ่มเลือกที่เตรียมไว้  

3. การโต้ตอบด้วยแบบฟอร์ม (Form Interaction)

-  เป็นการโต้ตอบที่ผู้ใช้ระบบจะต้องป้อนข้อมูลลงในช่องว่างที่อยู่ในฟอร์มที่แสดงบนหน้าจอคอมพิวเตอร์ คล้ายการกรอกแบบฟอร์มลงในกระดาษ

  -  ชื่อของช่องป้อนข้อมูลต้องสื่อความหมาย

  -  แบ่งส่วนของข้อมูลบนฟอร์มให้เหมาะสม

  -  ควรแสดงข้อมูลเริ่มต้น (Default) ให้กับช่องป้อนข้อมูลที่ต้องใช้ข้อมูลนั้นบ่อยครั้ง

  -  ช่องป้อนข้อมูลไม่ควรยาวมากจนเกินไป

  -  ไม่ควรให้หน้าของฟอร์มยาวเกินไป ซึ่งต้องทำให้ scroll ขึ้นลงไปมา

4. การโต้ตอบผ่านวัตถุ (Object-Based Interaction)

-  วัตถุสัญลักษณ์  หรือวัตถุรูปภาพ ถูกใช้เป็นตัวแทนคำสั่งหรือฟังก์ชัน โดยผู้ใช้สามารถโต้ตอบกับวัตถุเหล่านั้นเพื่อการออกคำสั่ง

-  วัตถุสัญลักษณ์หรือรูปภาพแทนคำสั่งการทำงานถูกเรียกว่า ไอคอน (Icon)  ซึ่งช่วยประหยัดพื้นที่บนหน้าจอและช่วยให้ผู้ใช้เข้าใจได้ง่ายขึ้น

 

5. การโต้ตอบด้วยภาษามนุษย์ (Natural Language Interaction)

-  เป็นการโต้ตอบกับระบบด้วยการใช้เสียงพูดของผู้ใช้ระบบ  

-  ใช้เสียงพูดทั้งการนำข้อมูลเข้าและออกจากระบบ

แหล่งที่มา

http://www.docstoc.com/docs/16828741/

http://softwaresiam.com/redirect.php?tid=198&goto=lastpost

 

User Interface Design การออกแบบส่วนต่อประสาน
User Interface Design การออกแบบส่วนต่อประสาน

 

User Interface Design หรือ Human-Computer Interaction คือ การออกแบบส่วนต่อประสานกับผู้ใช้ ระหว่างผู้ใช้กับคอมพิวเตอร์ ซึ่งเริ่มจากการรวมวิธีการค้นหาข้อมูลและภูมิความรู้ของนักจิตวิทยา นักการศึกษา นักออกแบบกราฟิก ช่างเทคนิค ผู้เชี่ยวชาญด้านมนุษย์ นักออกแบบสถาปัตยกรรมข้อมูล และนักสังคมศาสตร์ เพื่อการออกแบบพัฒนาส่วนต่อประสานให้ใช้งานได้อย่างมีประสิทธิภาพ โดยมีวัตถุประสงค์หลักคือ สามารถใช้งานได้ง่าย ใช้ทักษะส่วนบุคคลน้อย ฝึกอบรมการใช้งานน้อย เพิ่มมาตรฐานการออกแบบที่อยู่ในระบบ (U.S Military Standard for Human Engineering Design Criteria, 1999) นอกจากนี้ การออกแบบส่วนต่อประสานที่ดีจะทำให้งานที่สำเร็จออกมาดีใช้งานได้ง่าย เรียนรู้ได้ง่าย ก็จะสามารถแข่งขันกับซอฟท์แวร์อื่น ๆ ในตลาดได้ ดังที่ Jacob nielsen ผู้เชี่ยวชาญในการออกแบบ Web Usability ได้กล่าวว่า ?Bad usability equal no customers.?

 

Universal Usability ในการออกแบบส่วนต่อประสานเราควรคำนึงถึงเรื่องใดบ้าง

 

ความหลากหลายของผู้ใช้งานทั้งทางกายภาพและสภาพแวดล้อม
บุคลิกของผู้ใช้ที่แตกต่างกัน / ความต่างระหว่างบุคคล
ความแตกต่างของปัญญาและความสามารถในการรับรู้
ความหลากหลายทางเชื้อชาติและวัฒนธรรม
ผู้ใช้งานที่ไร้ความสามารถหรือพิการ
อายุของผู้ใช้งาน
การออกแบบสำหรับเด็ก
การปรับให้เข้ากับซอฟท์แวร์และฮาร์ดแวร์

Principle หลักการในการออกแบบส่วนต่อประสาน (Ben, 2005)

 

ประเมินทักษะผู้ใช้งาน เพราะผู้ใช้งานมีหลากหลาย การรู้จักผู้ใช้ เป็นหลักการแรกที่ต้องทำ (Hansen, 1971) เราอาจแบ่งทักษะผู้ใช้งานออกเป็น 3 ส่วนใหญ่ ๆ คือ ผู้ใช้มือใหม่ (Novice or first-time user) ผู้ใช้ระดับกลาง (Knowledgeable intermittent users) และผู้เชี่ยวชาญ (Expert frequent user) หากจะออกแบบให้ใช้งานได้กับกลุ่มใดกลุ่มหนึ่งจะเป็นเรื่องง่าย แต่ถ้าต้องออกแบบให้คนทั้งสามกลุ่มเข้าใจร่วมกันได้ จะเป็นเรื่องที่ยากและท้าทายมาก
แจกแจงงาน นักออกแบบต้องแจกแจงหน้าที่และงานของระบบให้ละเอียดก่อน แล้วเรียงลำดับว่างานไหนมีความสำคัญก่อน งานไหนสำคัญหลัง
เลือกแบบการปฏิสัมพันธ์ การปฏิสัมพันธ์มีได้หลายรูปแบบนักออกแบบต้องเลือกให้เหมาะสม เช่น
Direct manipulation การจับต้องสัมผัสโดยตรง เช่น การลากไอคอนลงไปบนถังขยะ แสดงว่าต้องการลบ มีข้อดีคือ ภาพแสดงถึงหน้าที่อย่างชัดเจน เรียนรู้ได้ง่าย จดจำได้ง่าย หลีกเลี่ยงความผิดพลาด สนับสนุนการค้นหา และ ก่อให้เกิดการปฏิบัติตาม มีข้อเสียคือ สร้างยาก และต้องการการแสดงผลที่เป็นกราฟิกและต้องอาศัยเครื่องชี้
Menu Selection การเลือกเมนู มีข้อดีคือ เรียนรู้ได้ง่าย ลดการใช้คียบอร์ด เกิดการตัดสินใจที่มีโครงสร้าง ลดการเกิดข้อผิดพลาด มีข้อเสียคือ เมนูที่มากไปทำให้การนำเสนอไม่ดี ทำให้ผู้ใช้งานที่คล่องใช้งานได้ช้าลง ใช้พื้นที่ในการแสดงผลมาก
Form Fill in การเติมคำลงในฟอร์ม มีข้อดีคือ การกรอกข้อมูลมีความง่าย ฝึกฝนได้โดยไม่ยาก และมีคำแนะนำที่สะดวก มีข้อเสียคือ ใช้พื้นที่แสดงผลมาก
Command Language ภาษาสั่งการ เป็นการใช้ตัวอักษรในการสั่งการ ส่วนใหญ่จะใช้กับผู้ใช้ที่มีความเชี่ยวชาญ มีข้อดีคือ ยืดหยุ่น ดึงดูดผู้ใช้ระดับสูง ผู้ใช้สามารถสร้างคำสั่งเองได้ มีข้อเสียคือ มีข้อผิดพลาดได้ง่าย ต้องการการอบรมและการจดจำสูง
Natural Language ภาษาพูด หรือภาษาที่ใช้โดยธรรมชาติ มีข้อดีคือ สร้างสาระสำคัญของระบบการเรียนรู้ มีข้อเสียคือ ต้องแยกแยะบทสนทนา อาจไม่แสดงถึงเนื้อหา อาจต้องพิมพ์มาก และคาดเดาไม่ได้
ใช้กฎ 8 ข้อสำหรับการออกแบบหน้าจอ
Strive for consistency ทำให้เกิดความสม่ำเสมอ ไม่ว่าจะเป็นเมนู ไอคอน สี รูปแบบ ตัวอักษรต่าง ๆ ควรจะมีความสม่ำเสมอ
Cater to universal usability ให้ความพอใจกับทุกคน กับทุกกลุ่มผู้ใช้
Offer information feedback ให้ข้อมูลป้อนกลับเมื่อมีการปฏิสัมพันธ์
Design dialog yield closure ออกแบบให้มีจุดเริ่มต้น ระหว่างกลาง และสุดท้าย
Prevent error ป้องกันความผิดพลาด
Permit easy reversal of actions สามารถย้อนกลับได้ง่ายเพื่อแก้ไขข้อผิดพลาด
Support internal locus of control สนับสนุนการควบคุมภายใน ต้องออกแบบให้เกิดการตอบสนองของหน้าจอกับสิ่งที่ผู้ใช้ได้กระทำลงไป
Reduce short-term memory load ลดความยาวของเวลาที่ใช้ในความจำระยะสั้น

Ten Usability Heuristics ( Jakob Nielsen, 2000)

 

Visibility of system status

ระบบต้องแสดงให้ผู้ใช้งานเห็นเสมอว่าตนกำลังทำอะไรอยู่ กำลังจะเกิดอะไรขึ้น และให้ผลป้อนกลับในเวลาที่เหมาะสม

Match between system and the real world

ระบบต้องสามารถพูดภาษาเดียวกันกับผู้ใช้โดยมีตรรกะการใช้งานที่เป็นธรรมชาติ

User control and freedom

ผู้ใช้มักจะใช้งานผิดพลาดจึงจำเป็นต้องมีทางออกให้เสมอสำหรับสถานการณ์ที่ไม่พึงประสงค์ สนับสนุนการ Undo และ Redo

Consistency and standards

ผู้ใช้งานต้องไม่เกิดความสงสัย ระหว่างตัวหนังสือที่แตกต่างกัน สถานการณ์หรือการกระทำที่ให้ผลเหมือนกันให้ทำตามระเบียบแบบแผนที่วางไว้

Error prevention

คำเตือนให้ระวังความผิดพลาดเป็นสิ่งที่ดีที่จะช่วยป้องกันความผิดพลาด ซึ่งควรจะให้มีการตกลงใจซ้ำอีกครั้งเพื่อตรวจสอบความแน่นอนของการตัดสินใจของผู้ใช้

Recognition rather than recall

ทำให้ผู้ใช้งานใช้ความจำให้น้อยที่สุดโดยการทำให้ส่วนประกอบ การปฏิบัติและตัวเลือกชัดเจน วิธีการใช้งานต้องเข้าถึงได้ง่ายและรับรู้ได้ง่าย

Flexibility and efficiency of use

มีความยืดหยุ่นสำหรับผู้ใช้งานหลากหลายกลุ่ม และมีประสิทธิผล

Aesthetic and minimalist design

ประโยคนำเสนอไม่ต้องรวมเรื่องที่ไม่เกี่ยวข้องหรือใช้น้อย

Help users recognize, diagnose, and recover from errors

ข้อความแสดงความผิดพลาดต้องปรากฏในแบบตัวอักษรธรรมดาไม่ใช่โค๊ด ระบุปัญหาและบอกวิธีแก้ไข

Help and documentation

ระบบที่ดีต้องทำงานได้โดยไม่ต้องอาศัยคู่มือการใช้ แต่ก็ยังมีความจำเป็น ข้อมูลที่ให้ต้องหาง่ายเจาะจงไปยังหน้าที่ต่าง ๆ มีการเรียงลำดับที่เป็นนามธรรมและไม่หนาจนเกินไป

 

แหล่งอ้างอิง

 

Shneiderman Ben, Plaisant Catherine. Design the user interface : Strategic for effective human-computer interaction. Pearson Education, 2005.

 

Nielsen Jacob. Designing Web Usability. Indianapolis: Newriders Publishing, 2000.

 

Talin. A Summary of Principles for User-Interface Design.(http://www.sylvantech.com/ ~talin/index.shtml)

Online. User Interface Design & Usability Testing. (http://www.usernomics.com/user-interface-design.html)

 

การออกแบบอินเตอร์เฟสที่เกี่ยวข้องกับศักยภาพของทั้งมนุษย์

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

เรียกอีกอย่างว่า การออกแบบจอภาพ (Screen Design)

ลักษณะของผู้ใช้

•ผู้ใช้หน้าใหม่ด้อยประสบการณ์ (
•ผู้ใช้ที่มีประสบการณ์และความรู้ระดับกลาง (
•ผู้ที่ใช้งานเป็นประจำหรือผู้เชี่ยวชาญ (
โครงสร้างระบบความคิดของมนุษย์

•มนุษย์รับรู้โดยผ่านประสาทสัมผัส (
•จากนั้นจะส่งสิ่งที่รับรู้ผ่านเข้ามายังหน่วยความจำระยะสั้น
•จากนั้นจึงส่งข้อมูลผ่านไปยังส่วนความจำขั้นต้น
•สุดท้ายข้อมูลจะส่งไปยังหน่วยความจำระยะยาว
หลักการออกแบบตามความต้องการของผู้ใช้

•ดำรงความคงที่
•มีทางลัดให้เลือกเดิน
•เสนอคำตอบอย่างมีความหมาย
•ตอบโต้ยืนยันการสิ้นสุด
•จัดการกับข้อผิดพลาดอย่างง่าย ๆ
•อนุญาตให้ดำเนินการแก้ไขกลับได้
•สนับสนุนการควบคุมจากภายนอก
•ลดภาระความทรงจำระยะสั้น
หลักการพื้นฐานการนำเสนอแบบกราฟิก

•นำเสนอส่วนที่เป็นข้อความและสัญลักษณ์อย่างชัดเจน
•ออกแบบระบบที่เสนอโครงสร้างและขั้นตอนของการดำเนินการอย่างชัดเจน
•ในกรณีที่ผู้ใช้สั่งดำเนินการไม่ตรงตามขั้นตอนการทำงาน ควรจัดให้มีการเตือนผู้ใช้ หรือนำเสนอสัญลักษณ์ที่ทำให้ผู้ใช้ทราบว่าจะต้องแก้ไขอย่างไร
หลักการใช้สีบนจอกราฟิก

•ไม่ใช้จำนวนสีเกินความจำเป็น
•จำกัดจำนวนสี
•ใช้เทคนิคการกำหนดความหมายให้กับสีที่ใช้
•เปิดโอกาสให้ผู้ใช้ควบคุมการนำเสนอสี
•ควรออกแบบโดยคำนึงถึงจอภาพแบบสีเดียว
•ใช้สีในการสร้างรูปแบบ
•เลือกใช้สีที่ตรงกับความคาดหวังของผู้ใช้
•เลือกจัดสีที่นำเสนออย่างระมัดระวัง

การออกแบบการอินเตอร์เฟส  มีความสำคัญต่อผู้ใช้อย่างมาก ซึ่งศักยภาพของผู้ใช้งานเป็นปัจจัยหลักในการติดต่อกับคอมพิวเตอร์ เช่น ผู้ที่พิการทางสายตาแต่เค้ายังสามารถได้ยินเสียงได้และสัมผัสอักษรเบลล์ได้  ผู้พิการทางการได้ยินแต่ก็ยังสามารถมองเห็นได้ ดังนั้น การออกแบบอินเตอร์เฟสจึงเป็นเรื่องสำคัญในการอำนวยความสะดวกให้กับผู้ใช้ในศักยภาพที่แตกต่างกันออกไป ดังนั้นการออกแบบอินเตอร์เฟสต้องคำนึกถึงความสะดวก เข้าใจง่าย  และรู้เรื่องของสิ่งที่ต้องการจะสื่อไปยังผู้ใช้งาน  ยกตัวอย่างเช่น งานสรรพากรซึ่งได้กำลังพัฒนาระบบ accessibility ซึ่งได้นำ
1. ซอฟต์แวร์จำแนกเสียง (Speech Recognition) จะมีส่วนช่วยให้ผู้ใช้ที่มีความพิการในด้านการใช้งานเมาส์หรือคีย์บอร์ด
2. ซอฟต์แวร์ขยายภาพ (Screen Magnification) จะมีส่วนช่วยให้ผู้ที่มีความบกพร่องในระยะการมองเห็น
3. ซอฟต์แวร์ในการอ่านเนื้อหาบนจอ (Screen Reader) จะมีส่วนช่วยอย่างสูงสำหรับผู้ที่มีความพิการทางด้านการมองเห็น โดยจะทำการเก็บการกระทำต่างๆ ที่เกิดขึ้นบนหน้าจอแสดงออกด้วยทางใดทางหนึ่งให้แก่ผู้ใช้ได้รับรู้
4. ซอฟต์แวร์ช่วยแปล (Translation Software) จะช่วยในการเข้าถึงแก่บุคคลใดๆ ที่มีปัญหาด้านการรับรู้ทางภาษา
ซึ่งซอฟแวร์เหล่านี้เป็นตัวช่วยในการอินเตอร์เฟสกับผู้ที่มีข้อจำกัดด้านความพิการทางร่างกายด้านต่างๆ

ที่มา
1. http://www.ktpbook.com/product/ProductDetail.asp?Id=9747015089&typeid=1&types=%หนังสือ
2. http://th.wikipedia.org/wiki/เว็บแอ็กเซสซิบิลีตี

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

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

ในการออกแบบ UI ให้สามารถใช้งานได้ง่ายนั้นมีแนวทางในการทำหลายแนวทาง โดยพอจะสรุปได้ดังนี้ 
                ในเรื่องของตัวอักษร และการวางจุดสนใจนั้น โดยธรรมชาติ เราจะอ่านหนังสือ จากทางด้านซ้าย ไปด้านขวา และจากด้านบน ลงมาด้านล่าง ตามลำดับ เพราะฉะนั้นการออกแบบ UI ในเรื่องของการวางตัวอักษรเพื่อให้ผู้ใช้งานสามารถอ่านได้สะดวก จึงควรจัดวางอักษรในรูปแบบดังกล่าว 
          เมื่อผู้ใช้งานต้องการที่จะค้นหาข้อมูลอะไรบางอย่าง ผู้ใช้มักจะกวาดสายตาอยู่บริเวณส่วนตรงกลางของหน้าจอเป็นส่วนแรก และเลื่อนไปหาต่อทางด้านซ้าย เรื่อยมาจนถึงด้านขาว แต่สำหรับส่วนที่อยู่บนสุด และล่างสุดของหน้าจอนั้นผู้ใช้งานมักจะไม่สนใจ ในกรณีที่หน้าจอมี Scroll ที่ใช้สำหรับเลื่อนดูข้อมูลนั้น ถ้าผู้ใช้ไม่พบข้อมูลที่ต้องการในหน้านั้น ผู้ใช้ส่วนใหญ่ก็มักจะไม่ยอมเสียเวลาในการเลื่อนลงไปดูข้อมูลทางด้านล่างอีก เพราะฉะนั้น ควรที่จะใส่ข้อมูลที่มีความสำคัญไว้ในส่วนด้านบนของหน้าจะ เพื่อให้ผู้ใช้งานสามารถค้นหาพบได้ง่าย โดยสรุปแล้ว หลักการออกแบบ UI นั้น ควรที่จะออกแบบเพื่อให้ผู้ใช้งานสามารถที่จะใช้งานได้โดยง่าย และสะดวกมากที่สุด เมื่อผู้ใช้งานเข้ามาใช้งานที่หน้าจอ ไม่จำเป็นที่จะต้องเรียนรู้วิธีการใช้งานอะไรมาก ก็สามารถที่จะเข้าใจ และใช้งานได้ ที่สำคัญควรจะไม่ให้มีข้อผิดพลาดใดๆเกิดขึ้นด้วย เพื่อให้ผู้ใช้งานรู้สึกดีกับ UI ที่ใช้งานอยู่

 

การออกแบบ User Interface มีวัตถุประสงค์หลัก ดังนี้

1. มีลักษณะเป็นหน้าต่างและคำสั่งในการทำงานคล้าย โปรแกรมทั่วๆไปที่ Run บน Windows เพราะผู้ใช้งานคอมพิวเตอร์ส่วนใหญ่คุ้นเคยกับการใช้ Windows อยู่แล้วทำให้ผู้ใช้สามารถใช้โปรแกรมได้สะดวกมากขึ้น

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

3.    เพื่อความสะดวกในการใช้งาน สามารถเลือกความเร็วในการแสดงจากลำดับรายการ

4.    ผู้ใช้จะป้อนข้อความที่จะแสดงออกได้ที่ช่องข้อ ความ

5.    ใช้สีสันสวยงามดึงดูดใจให้น่าใช้

 

 

Universal Usability ในการออกแบบส่วนต่อประสานเราควรคำนึงถึงเรื่องใดบ้าง

• ความหลากหลายของผู้ใช้งานทั้งทางกายภาพและสภาพแวด ล้อม
• บุคลิกของผู้ใช้ที่แตกต่างกัน /ความต่างระหว่างบุคคล
• ความแตกต่างของปัญญาและความสามารถในการรับรู้
• ความหลากหลายทางเชื้อชาติและวัฒนธรรม
• ผู้ใช้งานที่ไร้ความสามารถหรือพิการ
• อายุของผู้ใช้งาน
• การออกแบบสำหรับเด็ก
• การปรับให้เข้ากับซอฟท์แวร์และฮาร์ดแวร์

 

Visibility of system status ระบบต้องแสดงให้ผู้ ใช้งานเห็นเสมอว่าตนกำลังทำอะไรอยู่ กำลังจะเกิดอะไรขึ้น และให้ผลป้อนกลับในเวลาที่เหมาะสม

Match between system and the real world ระบบต้องสามารถพูด ภาษาเดียวกันกับผู้ใช้โดยมีตรรกะการใช้งานที่เป็นธรรมชาติ

User control and freedom ผู้ใช้มักจะใช้งานผิด พลาดจึงจำเป็นต้องมีทางออกให้เสมอสำหรับสถานการณ์ที่ไม่พึงประสงค์ สนับสนุนการ Undo และ Redo

Consistency and standards ผู้ใช้งานต้องไม่เกิด ความสงสัย ระหว่างตัวหนังสือที่แตกต่างกัน สถานการณ์หรือการกระทำที่ให้ผลเหมือนกันให้ทำตามระเบียบแบบแผนที่วางไว้

Error prevention คำเตือนให้ระวังความ ผิดพลาดเป็นสิ่งที่ดีที่จะช่วยป้องกันความผิดพลาด ซึ่งควรจะให้มีการตกลงใจซ้ำอีกครั้งเพื่อตรวจสอบความแน่นอนของการตัดสินใจ ของผู้ใช้

Recognition rather than recall ทำให้ผู้ใช้งานใช้ ความจำให้น้อยที่สุดโดยการทำให้ส่วนประกอบ การปฏิบัติและตัวเลือกชัดเจน วิธีการใช้งานต้องเข้าถึงได้ง่ายและรับรู้ได้ง่าย

Flexibility and efficiency of use มีความยืดหยุ่นสำหรับ ผู้ใช้งานหลากหลายกลุ่ม และมีประสิทธิผล

Aesthetic and minimalist design ประโยคนำเสนอไม่ต้อง รวมเรื่องที่ไม่เกี่ยวข้องหรือใช้น้อย

 Help users recognize, diagnose, and recover from errors ข้อความแสดงความผิด พลาดต้องปรากฏในแบบตัวอักษรธรรมดาไม่ใช่โค๊ด ระบุปัญหาและบอกวิธีแก้ไข

Help and documentation ระบบที่ดีต้องทำงาน ได้โดยไม่ต้องอาศัยคู่มือการใช้ แต่ก็ยังมีความจำเป็น ข้อมูลที่ให้ต้องหาง่ายเจาะจงไปยังหน้าที่ต่าง ๆ มีการเรียงลำดับที่เป็นนามธรรมและไม่หนาจนเกินไป

ที่มา  :     http://campus.en.kku.ac.th/project/2003/COE2003-09/conceptual.htm

 http://www.arip.co.th/blog.php?blogger=wanda&id=85

 www.ktpbook.com/product/ProductDetail.asp?Id...1...
 http://www.moodle.rmutt.ac.th/course/category.php?id=29      http://learners.in.th/file/zetha_oil/User%20Interface%20Design.doc

 

  แนวความคิดเกี่ยวกับปัจจัยของมนุษย์และการออกแบบอินเตอร์เฟสที่เกี่ยวข้อง กับศักยภาพของทั้งมนุษย์และคอมพิวเตอร์ ระบบการให้ความช่วยเหลือเมื่อมีปัญหา รูปแบบการ ปฏิสัมพันธ์ และหลักการออกแบบที่มองเห็นได้ แบบจำลองการอินเตอร์เฟสของผู้ใช้ และเครื่องมือที่นำมาพัฒนา ผลกระทบของเทคโนโลยีที่มีต่อมนุษย์ วางแผนในการเลือกใช้เทคโนโลยี การนำมาปฏิบัติและการใช้เทคโนโลยีเพื่อให้ผลกระทบปรากฏออกมาในเชิงบวก
 
           Concepts in human factors and interface design that relate to capabilities of both humans and computers. Understanding of technology's effects on people, and considers better plans for the selection, implementation, and use of technology so that the effects of implementation are positive instead of negative. Designing systems such as help systems, interaction styles and visual design principles examined along with user interface prototyping and development tools.

  เป้าหมายของการออกแบบ

          การออกแบบ User Interface มีวัตถุประสงค์หลัก ดังนี้

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

การออกแบบ User interface

          จากเป้าหมายที่เราตั้งไว้เราสามารถสร้าง GUI ได้ดังรูปที่ 3.1

รูปที่ 3.1 GUI ที่ใช้ควบคุมการแสดงข้อความของป้ายอักษรวิ่ง

          ผู้ใช้สามารถป้อนข้อมูลที่ต้องการให้แสดงออกในช่องข้อมูล และสามารถเลือกสีของตัวอักษรและสีพื้นหลังตามความต้องการโดยการคลิกที่สีตามความต้องการจากทั้งหมด 8 สี นอกจากนั้นผู้ใช้ยังสามารถเลือกความเร็วในการแสดงผลได้จากช่อง Select Speed และเริ่มทำงานโดยการกดปุ่ม Start หยุดการทำงานโดยกด Stop และ Exit เมื่อต้องการออกจากโปรแกรม

User Interface Design การออกแบบส่วนต่อประสาน

User Interface Design หรือ Human-Computer Interaction คือ การออกแบบส่วนต่อประสานกับผู้ใช้ ระหว่างผู้ใช้กับคอมพิวเตอร์ ซึ่งมีกระบวนการที่เริ่มจากการรวบรวมข้อมูลที่เกี่ยวข้องตลอดจนภูมิความรู้ ของนักจิตวิทยา นักการศึกษา นักออกแบบกราฟิก ช่างเทคนิค ผู้เชี่ยวชาญด้านมนุษย์วิทยา นักออกแบบสถาปัตยกรรมข้อมูล และนักสังคมศาสตร์ เพื่อมาร่วมกันพัฒนากระบวนการออกแบบพัฒนาส่วนต่อประสานให้ใช้งานได้อย่างมี ประสิทธิภาพ

โดยมีวัตถุประสงค์หลักคือ สามารถใช้งานได้ง่าย ใช้ทักษะส่วนบุคคลน้อย มีการฝึกอบรมการใช้งานน้อย เพิ่มมาตรฐานการออกแบบส่วนต่อประสานในระบบ (U.S Military Standard for Human Engineering Design Criteria, 1999) นอกจากนี้ การออกแบบส่วนต่อประสานที่ดีจะทำให้งานที่สำเร็จออกมาดีใช้งานได้ง่าย เรียนรู้ได้ง่าย เมื่อได้ผลงานออกมาดีก็จะสามารถแข่งขันกับซอฟท์แวร์อื่น ๆ ในตลาดได้ ดังที่ Jacob nielsen ผู้เชี่ยวชาญในการออกแบบ Web Usability ได้กล่าวว่า “Bad usability equal no customers.”  ไม่มีใครอยากใช้งานระบบซอฟแวร์ที่ใช้งานยาก เพราะเมื่อใช้งานยาก ก็จะไม่มีคนอยากจะใช้ 

 

Universal Usability ในการออกแบบส่วนต่อประสานเราควรคำนึงถึงเรื่องใดบ้าง

 

• ความหลากหลายของผู้ใช้งานทั้งทางกายภาพและสภาพแวดล้อม
• บุคลิกของผู้ใช้ที่แตกต่างกัน / ความต่างระหว่างบุคคล   มนุษย์เราย่อมมีความแตกต่างกัน
• ความแตกต่างของสติปัญญาและความสามารถในการรับรู้
• ความหลากหลายทางเชื้อชาติและวัฒนธรรม
• ผู้ใช้งานที่ไร้ความสามารถหรือพิการ
• อายุของผู้ใช้งาน
• การออกแบบสำหรับเด็ก เด็กต้องการการออกแบบที่แตกต่างจากผู้ใหญ่ ต้องมีการเร้าความสนใจสูง
• การปรับให้เข้ากับซอฟท์แวร์และฮาร์ดแวร์ ที่มีอยู่เพื่อไม่ให้เกิดปัญหาความเข้ากันไม่ได้ของระบบ

Principle หลักการในการออกแบบส่วนต่อประสาน (Ben, 2005)

 

• ประเมินทักษะผู้ใช้งาน เพราะผู้ใช้งานมีหลากหลาย การรู้จักผู้ใช้ เป็นหลักการแรกที่ต้องทำ (Hansen, 1971) เราอาจแบ่งทักษะผู้ใช้งานออกเป็น 3 ส่วนใหญ่ ๆ คือ ผู้ใช้มือใหม่ (Novice or first-time user) ผู้ใช้ระดับกลาง (Knowledgeable intermittent users) และผู้เชี่ยวชาญ (Expert frequent user) หากจะออกแบบให้ใช้งานได้กับกลุ่มใดกลุ่มหนึ่งจะเป็นเรื่องง่าย แต่ถ้าต้องออกแบบให้คนทั้งสามกลุ่มเข้าใจร่วมกันได้ จะเป็นเรื่องที่ยากและท้าทายมาก
• แจกแจงงาน นักออกแบบต้องแจกแจงหน้าที่และงานของระบบให้ละเอียดก่อน แล้วเรียงลำดับว่างานไหนมีความสำคัญก่อน งานไหนสำคัญหลัง
• เลือกแบบการมีปฏิสัมพันธ์ การปฏิสัมพันธ์มีได้หลายรูปแบบนักออกแบบต้องเลือกให้เหมาะสม เช่น
  • Direct manipulation การจับต้องสัมผัสโดยตรง เช่น การลากไอคอนลงไปบนถังขยะ แสดงว่าต้องการลบ มีข้อดีคือ ภาพแสดงถึงหน้าที่อย่างชัดเจน เรียนรู้ได้ง่าย จดจำได้ง่าย หลีกเลี่ยงความผิดพลาด สนับสนุนการค้นหา และ ก่อให้เกิดการปฏิบัติตาม มีข้อเสียคือ สร้างยาก และต้องการการแสดงผลที่เป็นกราฟิกและต้องอาศัยเครื่องชี้ (เม้าส์, พ้อยเตอร์)
  • Menu Selection การเลือกเมนู มีข้อดีคือ เรียนรู้ได้ง่าย ลดการใช้คียบอร์ด เกิดการตัดสินใจที่มีโครงสร้าง ลดการเกิดข้อผิดพลาด มีข้อเสียคือ เมนูที่มากไปทำให้การนำเสนอไม่ดี ทำให้ผู้ใช้งานที่คล่องใช้งานได้ช้าลง ใช้พื้นที่ในการแสดงผลมาก
  • Form Fill in การเติมคำลงในฟอร์ม มีข้อดีคือ การกรอกข้อมูลมีความง่าย ฝึกฝนได้โดยไม่ยาก และมีคำแนะนำที่สะดวก มีข้อเสียคือ ใช้พื้นที่แสดงผลมาก
  • Command Language ภาษาสั่งการ เป็นการใช้ตัวอักษรในการสั่งการ ส่วนใหญ่จะใช้กับผู้ใช้ที่มีความเชี่ยวชาญ มีข้อดีคือ ยืดหยุ่น ดึงดูดผู้ใช้ระดับสูง ผู้ใช้สามารถสร้างคำสั่งเองได้ มีข้อเสียคือ มีข้อผิดพลาดได้ง่าย ต้องการการอบรมและการจดจำสูง
  • Natural Language ภาษาพูด หรือภาษาที่ใช้โดยธรรมชาติ มีข้อดีคือ สร้างสาระสำคัญของระบบการเรียนรู้ มีข้อเสียคือ ต้องแยกแยะบทสนทนา อาจไม่แสดงถึงเนื้อหา อาจต้องพิมพ์มาก และคาดเดาไม่ได้
• ใช้กฎ 8 ข้อสำหรับการออกแบบหน้าจอ
  • Strive for consistency ทำให้เกิดความสม่ำเสมอ ไม่ว่าจะเป็นเมนู ไอคอน สี รูปแบบ ตัวอักษรต่าง ๆ ควรจะมีความสม่ำเสมอ เป็นรูปแบบเดียวกัน ไม่ว่าจะเป็นสัญลักษณ์ สี ขนาดที่ใช้ควรจะเป็นชุดเดียวกัน
  • Cater to universal usability ให้ความพอใจกับทุกคน กับทุกกลุ่มผู้ใช้ เราอาจต้องหาข้อมูลผู้ใช้งานมาให้ครอบคลุมทั้งหมด แล้วเลือกการออกแบบที่ผู้ใช้งานส่วนใหญ่พอใจ
  • Offer information feedback ให้ข้อมูลป้อนกลับเมื่อมีการปฏิสัมพันธ์ ข้อมูลป้อนกลับจะเป็นตัวเร้าที่ดีสำหรับผู้ใช้งาน ให้มีความรู้สึกว่ากำลังได้ควบคุมและโต้ตอบกับระบบอยู่
  • Design dialog yield closure ออกแบบให้มีจุดเริ่มต้น ระหว่างกลาง และจุดสุดท้าย
  • Prevent error มีการป้องกันความผิดพลาดจากผู้ใช้งาน เช่น เมื่อมีการคลิกเม้าส์ผิดที่ หรือป้อนข้อมูลผิด ระบบจะมีข้อความเตือนว่าผู้ใช้งานป้อนข้อมูลผิดพลาด จะช่วยลดความผิดพลาดของข้อมูลได้มาก 
  • Permit easy reversal of actions สามารถย้อนกลับได้ง่ายเพื่อแก้ไขหากเกิดข้อผิดพลาด
  • Support internal locus of control ระบบมีการจัดการการควบคุมภายใน ต้องออกแบบให้เกิดการตอบสนองของหน้าจอกับสิ่งที่ผู้ใช้ได้กระทำลงไปให้มี ความสัมพันธ์กัน
  • Reduce short-term memory load ลดความยาวของเวลาที่นำเสนอเนื้อหาเพื่อง่ายในการจดจำในความจำระยะสั้น

 

Ten Usability Heuristics ( Jakob Nielsen, 2000)

 

นอกจากนี้ปรมาจารย์ทางด้านการออกแบบส่วนต่อประสาน Jakop Nielson ได้สรุปสาระสำคัญของการออกแบบให้ใช้งานง่ายไว้ 10 ข้อ ดังต่อไปนี้

Visibility of system status

ระบบต้องแสดงให้ผู้ใช้งานเห็นเสมอว่าตนกำลังทำอะไรอยู่ กำลังจะเกิดอะไรขึ้น และให้ผลป้อนกลับในเวลาที่เหมาะสม

Match between system and the real world

ระบบต้องสามารถพูดภาษาเดียวกันกับผู้ใช้โดยมีตรรกะการใช้งานที่เป็นธรรมชาติ ไม่ใช้ภาษาที่แปลกไปจากปรกติ

User control and freedom

ผู้ใช้มักจะใช้งานผิดพลาดจึงจำเป็นต้องมีทางออกให้เสมอสำหรับสถานการณ์ ที่ไม่พึงประสงค์ เมื่อผู้ใช้งานทำผิด สนับสนุนการ Undo และ Redo

Consistency and standards

มีความสม่ำเสมอและเป็นมาตรฐานไปทุก ๆ หน้าจอของการออกแบบ ผู้ใช้งานต้องไม่สับสนในเรื่องการจัดวางหรือขนาดของตัวหนังสือ ตัวระบบเองก็ควรจะมีชุดป้อนคำสั่งต่าง ๆที่เป็นมาตรฐาน

Error prevention

ระบบควรจัดให้มีคำเตือนให้ระวังความผิดพลาดซึ่งเป็นสิ่งที่ดีที่จะช่วย ป้องกันความผิดพลาด ระบบควรจะให้มีการตกลงใจซ้ำอีกครั้งเพื่อตรวจสอบความแน่นอนของการตัดสินใจ ของผู้ใช้ เช่น ท่านต้องการแก้ไขหรือไม่ ให้ตอบ แก้ไข หรือ ไม่แก้ไข

Recognition rather than recall

พยายามทำให้ผู้ใช้งานต้องใช้ความจำในการจดจำคำสั่งต่างๆในระบบให้น้อยที่ สุดโดยการทำให้ส่วนประกอบหน้าจอ การออกคำสั่งปฏิบัติและส่วนตัวเลือกมีความชัดเจน วิธีการใช้งานต้องเข้าถึงได้ง่ายและรับรู้ได้ง่าย

Flexibility and efficiency of use

มีความยืดหยุ่นสำหรับผู้ใช้งานหลากหลายกลุ่ม และมีประสิทธิผลในการทำงาน

Aesthetic and minimalist design

การนำเสนอเนื้อหาต้องไม่รวมเรื่องที่ไม่เกี่ยวข้องหรือใช้อย่างน้อยๆ  เพื่อจะได้เน้นเนื้อหาที่เราต้องการสื่อสารอย่างเต็มที่ 

Help users recognize, diagnose, and recover from errors

ข้อความแสดงความผิดพลาดต้องปรากฏในแบบตัวอักษรธรรมดาไม่ใช่โค๊ดโปรแกรม ที่เข้าใจยาก ระบุปัญหาและบอกวิธีแก้ไข ให้ผู้ใช้งานสามารถแก้ไขได้เอง

Help and documentation

ถึงแม้จะคาดหวังไว้ว่าระบบที่ดีต้องทำงานได้โดยไม่ต้องอาศัยคู่มือการใช้ แต่อย่างไรก็ตามคู่มือก็ยังมีความจำเป็น ในคู่มือต้องมีการแบ่งสารบัญข้อมูลที่ให้ต้องหาง่ายเจาะจงไปยังหน้าที่ต่าง ๆ มีการเรียงลำดับอย่างเป็นระบบ และไม่หนาจนเกินไป

 

แหล่งอ้างอิง

 

Shneiderman Ben, Plaisant Catherine. Design the user interface : Strategic for effective human-computer interaction. Pearson Education, 2005.

 

Nielsen Jacob. Designing Web Usability. Indianapolis: Newriders Publishing, 2000.

 

Talin. A Summary of Principles for User-Interface Design.(http://www.sylvantech.com/ ~talin/index.shtml)

 

Online. User Interface Design & Usability Testing. (http://www.usernomics.com/user-interface-design.html)

 

Wichit thepprasit  Revise 27 July 2009.

http://science.bu.ac.th/index.php?option=com_content&task=view&id=33&Itemid=55
http://campus.en.kku.ac.th/project/2003/COE2003-09/conceptual.htm
http://gotoknow.org/blog/useit/43505

**การออกแบบอินเตอร์เฟสที่เกี่ยวข้องกับศักยภาพของทั้งมนุษย์

เอาต์พุตเฉพาะกิจ

สภาพแวดล้อม (เสียง ความเย็น ฯ)


ที่มา :

www2.cs.science.cmu.ac.th/person/panipa/gis/PSSA6-Design-IO-file.PPT

2.การออกแบบอินเตอร์เฟสที่เกี่ยวข้องกับศักยภาพของมนุษย์
การออกแบบอินเตอร์เฟส(Interface Design)
อินเตอร์เฟส(Interface) กับเรื่องการออกแบบความสวยงามจะมีส่วนที่แตกต่างกันอยู่นิดหน่อยตรงที่ อินเตอร์เฟส คือสิ่งต่างๆในเว็บไซต์ที่ Audience สามารถเข้ามามีปฏิสัมพันธ์(Interaction) กับเว็บไซต์ได้ ส่วนเรื่องความสวยงามจะเป็นเรื่องที่ Audience มองเห็นและรู้สึกกับมันได้ แต่อาจจะไม่สามารถเข้าไปมีปฏิสัมพันธ์กับมันได้ ดังนั้นการออกแบบอินเตอร์เฟสไม่ว่าจะเป็น เมนู formต่างๆ หรือองค์ประกอบต่างๆที่สามรถมีปฏิสัมพันธ์กับมันได้ จะต้องออกแบบให้สามารถใช้งานได้โดยการเรียนรู้ด้วยตัวเองในเวลาอันสั้นได้ หรือสามารถใช้งานอินเตอร์เฟสนั้นได้โดยไม่จำเป็นต้องมีประสบการณ์ หรือไม่เคยใช้ อินเตอร์เฟสนั้นมาก่อน ตัวอย่างการออกแบบอินเตอร์เฟส ง่ายๆก็คือเรื่องของการใช้งาน Icon ที่เป็นรูปภาพต่างๆ โดยแต่ละ Icon จำเป็นที่จะต้องสื่อความหมายได้ชัดเจน เพื่อให้ Audience สามารถเข้าใจ และไปถึงปลายทางที่ต้องการได้อย่างถูกต้อง

ทั้ง 3 องค์ประกอบเป็นเรื่องที่สำคัญในการออกแบบเว็บไซต์เว็บไซต์หนึ่ง ดังนั้นในการออกแบบแต่ละครั้งจำเป็นที่จะต้องคำนึงถึงทั้ง 3 เรื่องด้วยเพื่อให้เว็บไซต์ที่ออกแบบมาเป็นประโยชน์ และAudience สามารถใช้งานได้อย่างเต็มประสิทธิภาพมากที่สุด

http://nariopon.thport.com/?p=361

การออกแบบ User Interface มีวัตถุประสงค์หลัก ดังนี้

          1. มีลักษณะเป็นหน้าต่างและคำสั่งในการทำงานคล้ายโปรแกรมทั่วๆไปที่ Run บน Windows เพราะผู้ใช้งานคอมพิวเตอร์ส่วนใหญ่คุ้นเคยกับการใช้ Windows อยู่แล้วทำให้ผู้ใช้สามารถใช้โปรแกรมได้สะดวกมากขึ้น

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

          3. เพื่อความสะดวกในการใช้งาน สามารถเลือกความเร็วในการแสดงจากลำดับรายการ

          4. ผู้ใช้จะป้อนข้อความที่จะแสดงออกได้ที่ช่องข้อความ

          5. ใช้สีสันสวยงามดึงดูดใจให้น่าใช้

http://campus.en.kku.ac.th/project/2003/COE2003-09/conceptual.htm 

การออกแบบ User Interface จะพิจารณาปะสิทธิภาพในการโต้ตอบระหว่างผู้ใช้และระบบเป็นหลัก ซึ่งรูปแบบของการโต้ตอบมีหลายรูปแบบดังนี้
1.การโต้ตอบด้วยการพิมพ์คำสั่ง ( Command Line Interaction )
2.การโต้ตอบด้วยเมนูคำสั่ง ( Menu Interaction)
3.การโต้ตอบด้วยแบบฟอร์ม ( Form Interaction)
4.การโต้ตอบผ่านวัตถุ (Object-Based Interaction)
5.การโต้ตอบด้วยภาษามนุษย์ ( Natural Language Interaction)

http://www.docstoc.com/docs

2.การออกแบบอินเตอร์เฟสที่เกี่ยวข้องกับศักยภาพของมนุษย์
การออกแบบอินเตอร์เฟส(Interface Design)
อินเตอร์เฟส(Interface) กับเรื่องการออกแบบความสวยงามจะมีส่วนที่แตกต่างกันอยู่นิดหน่อยตรงที่ อินเตอร์เฟส คือสิ่งต่างๆในเว็บไซต์ที่ Audience สามารถเข้ามามีปฏิสัมพันธ์(Interaction) กับเว็บไซต์ได้ ส่วนเรื่องความสวยงามจะเป็นเรื่องที่ Audience มองเห็นและรู้สึกกับมันได้ แต่อาจจะไม่สามารถเข้าไปมีปฏิสัมพันธ์กับมันได้ ดังนั้นการออกแบบอินเตอร์เฟสไม่ว่าจะเป็น เมนู formต่างๆ หรือองค์ประกอบต่างๆที่สามรถมีปฏิสัมพันธ์กับมันได้ จะต้องออกแบบให้สามารถใช้งานได้โดยการเรียนรู้ด้วยตัวเองในเวลาอันสั้นได้ หรือสามารถใช้งานอินเตอร์เฟสนั้นได้โดยไม่จำเป็นต้องมีประสบการณ์ หรือไม่เคยใช้ อินเตอร์เฟสนั้นมาก่อน ตัวอย่างการออกแบบอินเตอร์เฟส ง่ายๆก็คือเรื่องของการใช้งาน Icon ที่เป็นรูปภาพต่างๆ โดยแต่ละ Icon จำเป็นที่จะต้องสื่อความหมายได้ชัดเจน เพื่อให้ Audience สามารถเข้าใจ และไปถึงปลายทางที่ต้องการได้อย่างถูกต้อง

ทั้ง 3 องค์ประกอบเป็นเรื่องที่สำคัญในการออกแบบเว็บไซต์เว็บไซต์หนึ่ง ดังนั้นในการออกแบบแต่ละครั้งจำเป็นที่จะต้องคำนึงถึงทั้ง 3 เรื่องด้วยเพื่อให้เว็บไซต์ที่ออกแบบมาเป็นประโยชน์ และAudience สามารถใช้งานได้อย่างเต็มประสิทธิภาพมากที่สุด

http://nariopon.thport.com/?p=361

การออกแบบ User Interface มีวัตถุประสงค์หลัก ดังนี้

          1. มีลักษณะเป็นหน้าต่างและคำสั่งในการทำงานคล้ายโปรแกรมทั่วๆไปที่ Run บน Windows เพราะผู้ใช้งานคอมพิวเตอร์ส่วนใหญ่คุ้นเคยกับการใช้ Windows อยู่แล้วทำให้ผู้ใช้สามารถใช้โปรแกรมได้สะดวกมากขึ้น

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

          3. เพื่อความสะดวกในการใช้งาน สามารถเลือกความเร็วในการแสดงจากลำดับรายการ

          4. ผู้ใช้จะป้อนข้อความที่จะแสดงออกได้ที่ช่องข้อความ

          5. ใช้สีสันสวยงามดึงดูดใจให้น่าใช้

http://campus.en.kku.ac.th/project/2003/COE2003-09/conceptual.htm 

การออกแบบ User Interface จะพิจารณาปะสิทธิภาพในการโต้ตอบระหว่างผู้ใช้และระบบเป็นหลัก ซึ่งรูปแบบของการโต้ตอบมีหลายรูปแบบดังนี้
1.การโต้ตอบด้วยการพิมพ์คำสั่ง ( Command Line Interaction )
2.การโต้ตอบด้วยเมนูคำสั่ง ( Menu Interaction)
3.การโต้ตอบด้วยแบบฟอร์ม ( Form Interaction)
4.การโต้ตอบผ่านวัตถุ (Object-Based Interaction)
5.การโต้ตอบด้วยภาษามนุษย์ ( Natural Language Interaction)

http://www.docstoc.com/docs

การออกแบบ User Interface มีวัตถุประสงค์หลัก ดังนี้

 

          1. มีลักษณะเป็นหน้าต่างและคำสั่งในการทำงานคล้ายโปรแกรมทั่วๆไปที่ Run บน Windows เพราะผู้ใช้งานคอมพิวเตอร์ส่วนใหญ่คุ้นเคยกับการใช้ Windows อยู่แล้วทำให้ผู้ใช้สามารถใช้โปรแกรมได้สะดวกมากขึ้น

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

          3. เพื่อความสะดวกในการใช้งาน สามารถเลือกความเร็วในการแสดงจากลำดับรายการ

          4. ผู้ใช้จะป้อนข้อความที่จะแสดงออกได้ที่ช่องข้อความ

          5. ใช้สีสันสวยงามดึงดูดใจให้น่าใช้

 

 

การออกแบบ  User Interface

- สอดคล้อง/รองรับ พฤติกรรมการค้นคว้าของผู้ใช้   เช่น สะดุดตา สะดุดใจ สะดวก สบาย รวดเร็ว

- เชื่อมโยงข้อมูลที่เป็นประโยชน์ไว้ด้วยกันทั้งหมด

หลักการออกแบบเว็บไซต์ 

         การออกแบบเว็บไซต์ คำนึงถึงความเหมาะสมกับกลุ่มบุคคลเป้าหมายผู้ใช้และลักษณะของเว็บไซต์ ความสะดวกในการใช้งาน

 

องค์ประกอบของการออกแบบเว็บไซต์ ต้องคำนึงถึง

        1. ความเรียบง่าย ได้แก่ มีรูปแบบที่เรียบง่าย ไม่ซับซ้อน และใช้งานได้สะดวก ไม่มีกราฟิกหรือตัวอักษรที่เคลื่อนไหวอยู่ตลอดเวลา ชนิดและสีของตัวอักษรไม่มากจนเกินไปทำให้วุ่นวาย

        2. ความสม่ำเสมอ ได้แก่ ใช้รูปแบบเดียวกันตลอดทั้งเว็บไซต์ เช่น รูปแบบของหน้า สไตล์ของกราฟิก ระบบเนวิเกชันและโทนสี ควรมีความคล้ายคลึงกันตลอดทั้งเว็บไซต์

        3. ความเป็นเอกลักษณ์ การออกแบบเว็บไซต์ควรคำนึงถึงลักษณะขององค์กร เพราะรูปแบบของเว็บไซต์จะสะท้อนถึงเอกลักษณ์และลักษณะขององค์กรนั้น ๆ เช่น ถ้าเป็นเว็บไซต์ของทาง ราชการ จะต้องดูน่าเชื่อถือไม่เหมือนสวนสนุก ฯลฯ

        4. เนื้อหาที่มีประโยชน์ เนื้อหาเป็นสิ่งที่สำคัญที่สุดในเว็บไซต์ ดังนั้นควร จัดเตรียมเนื้อหาและข้อมูลที่ผู้ใช้ต้องการให้ถูกต้อง และสมบูรณ์ มีการปรับปรุงและเพิ่มเติมให้ทันเหตุการณ์อยู่เสมอ

เนื้อหาไม่ควรซ้ำกับเว็บไซต์อื่น จึงจะดึงดูดความสนใจ

        5. ระบบเนวิเกชันที่ใช้งานง่าย ต้องออกแบบให้ผู้ใช้เข้าใจง่ายและใช้งานสะดวก ใช้กราฟิกที่สื่อความหมายร่วมกับคำอธิบายที่ชัดเจน มีรูปแบบและลำดับของรายการที่สม่ำเสมอ เช่น วางไว้ ตำแหน่งเดียวกันของทุกหน้า

        6. ลักษณะที่น่าสนใจ หน้าตาของเว็บไซต์จะต้องมีความสัมพันธ์กับคุณภาพขององค์ประกอบต่างๆ เช่น คุณภาพของกราฟิกที่จะต้องสมบูรณ์ การใช้สี การใช้ตัวอักษรที่อ่านง่าย สบายตา การใช้โทนสีที่เข้ากัน ลักษณะหน้าตาที่น่าสนใจนั้นขึ้นอยู่กับความชอบของแต่ละบุคคล

        7. การใช้งานอย่างไม่จำกัด ผู้ใช้ส่วนใหญ่สามารถเข้าถึงได้มากที่สุด เลือกใช้บราวเซอร์ชนิดใดก็ได้ในการเข้าถึงเนื้อหา สามารถแสดงผลได้ทุกระบบปฏิบัติการและความละเอียดหน้าจอต่างๆ กันอย่างไม่มีปัญหา เป็นลักษณะสำคัฐสำหรับผู้ใช้ที่มีจำนวนมาก

        8. คุณภาพในการออกแบบ การออกแบบและเรียบเรียงเนื้อหาอย่างรอบคอบ สร้างความรู้สึกว่าเว็บไซต์มี….คุณภาพ ถูกต้อง และเชื่อถือได้

        9. ระบบการใช้งานที่ถูกต้อง การใช้แบบฟอร์มสำหรับกรอกข้อมูลต้องสามารถกรอกได้จริง ใช้งานได้จริง ลิงค์ต่างๆ จะต้องเชื่อมโยงไปหน้าที่มีอยู่จริงและถูกต้อง ระบบการทำงานต่างๆ ในเว็บไซต์จะต้องมีความแน่นอนและทำหน้าที่ได้อย่างถูกต้อง

 

พื้นฐานในการออกแบบเว็บไซต์ที่ดี

        - มีเนื้อหาเป็นประโยชน์ ตรงกับที่ผู้ใช้ต้องการ

        - มีการปรับปรุงเพิ่มเติมเนื้อหา และพัฒนาเว็บไซต์อยู่เสมอ

        - ใช้เวลาในการดาวน์โหลดน้อย แสดงผลเร็ว ใช้งานที่สะดวก เข้าใจง่าย

ข้อควรพิจารณาในเรื่องการออกแบบหน้าจอ

1. ความน่าสนใจของเนื้อหาควรเป็นประเด็นหลักของการออกแบบ ควรทุ่มเทพื้นที่ บนเว็บไซต์เพื่อเนื้อหา อย่างน้อยครึ่งหนึ่ง หรือเกือบ 80 เปอร์เซ็นต์ มากกว่าเรื่อง navigation ที่ควรจะมีสัดส่วนต่ำกว่า 20 เปอร์เซ็นต์

2. พื้นที่สีขาวทำให้คนใช้เข้าใจการจัดหมวดหมู่เนื้อหา นำสายตาคนใช้ได้ดี และเสียเวลาดาวน์โหลดน้อยกว่าเมื่อเปรียบเทียบกับการใช้เส้นแบ่ง

3. หลักการทั่วไปของการออกแบบ user interface คือ ใช้องค์ประกอบการออกแบบให้น้อยๆ เพื่อให้หน้าเว็บมีความเรียบง่ายและใช้เวลาดาวน์โหลดน้อยลง

4. ควรออกแบบหน้าให้สามารถใช้งานได้กับหน้าจอทุกประเภท เพราะเราไม่รู้ว่าคนใช้ใช้หน้าจอขนาดไหน

5. คนออกแบบต้องกำหนดหน้าในลักษณะที่ช่วยให้คนใช้สามารถใช้ประโยชน์จากหน้านั้นได้สอดคล้องกับสภาวการณ์ที่ต่างกันของผู้ใช้แต่ละคน บางคนจอใหญ่ บางคนจอเล็ก บางคนชอบใช้ตัวอักษรขนาดใหญ่ บางคนขนาดเล็ก หน้าที่ออกแบบจะต้องทำงานได้ดีกับทุกขนาด คือไม่กำหนดขนาดตายตัว แต่กำหนด Layout เป็นเปอร์เซ็นต์ของพื้นที่ที่มีอยู่บนหน้า รวมไปถึงการออกแบบให้สามารถพิมพ์งานจากหน้าเว็บ ออกมาได้ในสัดส่วนที่พอดี มีเนื้อหาครบถ้วน

6. การออกแบบอย่าไปมุ่งเน้นเรื่องการอัพเกรดหรือใช้เทคโนโลยีใหม่ล่าสุดอยู่เสมอ เพราะปัจจุบันนักออกแบบตระหนักแล้วเว็บไซต์ของตนควรจะสามารถทำงานกับ เทคโนโลยีตัวเก่าได้ต่อไป ซึ่งเป็นผลมาจากตัวผู้ใช้ทั่วๆไปที่ไม่ใช่นักคอมพิวเตอร์ ยังคงใช้โปรแกรมเบราว์เซอร์ตัวเก่าที่ยังทำงาน และความแตกต่างระหว่างเทคโนโลยีเก่าใหม่ ในปัจจุบันไม่ได้มีมากมาย แถมปัจจุบันคนใช้คอมพิวเตอร์เป็นคนทั่วๆไปมีมากขึ้น ไม่ได้จำกัดอยู่เฉพาะนักเล่นคอมพิวเตอร์ที่แข่งกันว่าเครื่องใครมีเทคโนโลยี ดีกว่ากัน

http://www.social.nu.ac.th/papers/research/learning.pdf  

 http://campus.en.kku.ac.th/project/2003/COE2003-09/conceptual.htm 

http://www.chaiwbi.com/501/5101.html 

 www.tiac.or.th/slg/วรนุช1.ppt  

 

    User Interface Design หรือ Human-Computer Interaction คือ การออกแบบส่วนต่อประสานกับผู้ใช้ ระหว่างผู้ใช้กับคอมพิวเตอร์ ซึ่งมีกระบวนการที่เริ่มจากการรวบรวมข้อมูลที่เกี่ยวข้องตลอดจนภูมิความรู้ของนักจิตวิทยา นักการศึกษา นักออกแบบกราฟิก ช่างเทคนิค ผู้เชี่ยวชาญด้านมนุษย์วิทยา นักออกแบบสถาปัตยกรรมข้อมูล และนักสังคมศาสตร์ เพื่อมาร่วมกันพัฒนากระบวนการออกแบบพัฒนาส่วนต่อประสานให้ใช้งานได้อย่างมีประสิทธิภาพ

    โดยมีวัตถุประสงค์หลักคือ สามารถใช้งานได้ง่าย ใช้ทักษะส่วนบุคคลน้อย มีการฝึกอบรมการใช้งานน้อย เพิ่มมาตรฐานการออกแบบส่วนต่อประสานในระบบ (U.S Military Standard for Human Engineering Design Criteria, 1999) นอกจากนี้ การออกแบบส่วนต่อประสานที่ดีจะทำให้งานที่สำเร็จออกมาดีใช้งานได้ง่าย เรียนรู้ได้ง่าย เมื่อได้ผลงานออกมาดีก็จะสามารถแข่งขันกับซอฟท์แวร์อื่น ๆ ในตลาดได้ ดังที่ Jacob Nielsen ผู้เชี่ยวชาญในการออกแบบ Web Usability ได้กล่าวว่า “Bad usability equal no customers.”  ไม่มีใครอยากใช้งานระบบซอฟแวร์ที่ใช้งานยาก เพราะเมื่อใช้งานยาก ก็จะไม่มีคนอยากจะใช้

การออกแบบ User Interface มีวัตถุประสงค์หลัก ดังนี้

1. มีลักษณะเป็นหน้าต่างและคำสั่งในการทำงานคล้าย โปรแกรมทั่วๆไปที่ Run บน Windows เพราะผู้ใช้งานคอมพิวเตอร์ส่วนใหญ่คุ้นเคยกับการใช้ Windows อยู่แล้วทำให้ผู้ใช้สามารถใช้โปรแกรมได้สะดวกมากขึ้น

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

3.    เพื่อความสะดวกในการใช้งาน สามารถเลือกความเร็วในการแสดงจากลำดับรายการ

4.    ผู้ใช้จะป้อนข้อความที่จะแสดงออกได้ที่ช่องข้อ ความ

5.    ใช้สีสันสวยงามดึงดูดใจให้น่าใช้

ที่มา :
  http://gotoknow.org/blog/useit/43505
  http://campus.en.kku.ac.th/project/2003/COE2003-09/conceptual.htm 

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

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

ในการออกแบบ UI ให้สามารถใช้งานได้ง่ายนั้นมีแนวทางในการทำหลายแนวทาง โดยพอจะสรุปได้ดังนี้ 
ในเรื่องของตัวอักษร และการวางจุดสนใจนั้น โดยธรรมชาติ เราจะอ่านหนังสือ จากทางด้านซ้าย ไปด้านขวา และจากด้านบน ลงมาด้านล่าง ตามลำดับ เพราะฉะนั้นการออกแบบ UI ในเรื่องของการวางตัวอักษรเพื่อให้ผู้ใช้งานสามารถอ่านได้สะดวก จึงควรจัดวางอักษรในรูปแบบดังกล่าว
เมื่อผู้ใช้งานต้องการที่จะค้นหาข้อมูลอะไรบางอย่าง ผู้ใช้มักจะกวาดสายตาอยู่บริเวณส่วนตรงกลางของหน้าจอเป็นส่วนแรก และเลื่อนไปหาต่อทางด้านซ้าย เรื่อยมาจนถึงด้านขาว แต่สำหรับส่วนที่อยู่บนสุด และล่างสุดของหน้าจอนั้นผู้ใช้งานมักจะไม่สนใจ ในกรณีที่หน้าจอมี Scroll ที่ใช้สำหรับเลื่อนดูข้อมูลนั้น ถ้าผู้ใช้ไม่พบข้อมูลที่ต้องการในหน้านั้น ผู้ใช้ส่วนใหญ่ก็มักจะไม่ยอมเสียเวลาในการเลื่อนลงไปดูข้อมูลทางด้านล่างอีก เพราะฉะนั้น ควรที่จะใส่ข้อมูลที่มีความสำคัญไว้ในส่วนด้านบนของหน้าจะ เพื่อให้ผู้ใช้งานสามารถค้นหาพบได้ง่าย โดยสรุปแล้ว หลักการออกแบบ UI นั้น ควรที่จะออกแบบเพื่อให้ผู้ใช้งานสามารถที่จะใช้งานได้โดยง่าย และสะดวกมากที่สุด เมื่อผู้ใช้งานเข้ามาใช้งานที่หน้าจอ ไม่จำเป็นที่จะต้องเรียนรู้วิธีการใช้งานอะไรมาก ก็สามารถที่จะเข้าใจ และใช้งานได้ ที่สำคัญควรจะไม่ให้มีข้อผิดพลาดใดๆเกิดขึ้นด้วย เพื่อให้ผู้ใช้งานรู้สึกดีกับ UI ที่ใช้งานอยู่

 

การออกแบบ User Interface มีวัตถุประสงค์หลัก ดังนี้

1. มีลักษณะเป็นหน้าต่างและคำสั่งในการทำงานคล้าย โปรแกรมทั่วๆไปที่ Run บน Windows เพราะผู้ใช้งานคอมพิวเตอร์ส่วนใหญ่คุ้นเคยกับการใช้ Windows อยู่แล้วทำให้ผู้ใช้สามารถใช้โปรแกรมได้สะดวกมากขึ้น

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

3.    เพื่อความสะดวกในการใช้งาน สามารถเลือกความเร็วในการแสดงจากลำดับรายการ

4.    ผู้ใช้จะป้อนข้อความที่จะแสดงออกได้ที่ช่องข้อ ความ

5.    ใช้สีสันสวยงามดึงดูดใจให้น่าใช้

 

 

Universal Usability ในการออกแบบส่วนต่อประสานเราควรคำนึงถึงเรื่องใดบ้าง

• ความหลากหลายของผู้ใช้งานทั้งทางกายภาพและสภาพแวด ล้อม
• บุคลิกของผู้ใช้ที่แตกต่างกัน /ความต่างระหว่างบุคคล
• ความแตกต่างของปัญญาและความสามารถในการรับรู้
• ความหลากหลายทางเชื้อชาติและวัฒนธรรม
• ผู้ใช้งานที่ไร้ความสามารถหรือพิการ
• อายุของผู้ใช้งาน
• การออกแบบสำหรับเด็ก
• การปรับให้เข้ากับซอฟท์แวร์และฮาร์ดแวร์

 

Visibility of system status ระบบต้องแสดงให้ผู้ ใช้งานเห็นเสมอว่าตนกำลังทำอะไรอยู่ กำลังจะเกิดอะไรขึ้น และให้ผลป้อนกลับในเวลาที่เหมาะสม

Match between system and the real world ระบบต้องสามารถพูด ภาษาเดียวกันกับผู้ใช้โดยมีตรรกะการใช้งานที่เป็นธรรมชาติ

User control and freedom ผู้ใช้มักจะใช้งานผิด พลาดจึงจำเป็นต้องมีทางออกให้เสมอสำหรับสถานการณ์ที่ไม่พึงประสงค์ สนับสนุนการ Undo และ Redo

Consistency and standards ผู้ใช้งานต้องไม่เกิด ความสงสัย ระหว่างตัวหนังสือที่แตกต่างกัน สถานการณ์หรือการกระทำที่ให้ผลเหมือนกันให้ทำตามระเบียบแบบแผนที่วางไว้

Error prevention คำเตือนให้ระวังความ ผิดพลาดเป็นสิ่งที่ดีที่จะช่วยป้องกันความผิดพลาด ซึ่งควรจะให้มีการตกลงใจซ้ำอีกครั้งเพื่อตรวจสอบความแน่นอนของการตัดสินใจ ของผู้ใช้

Recognition rather than recall ทำให้ผู้ใช้งานใช้ ความจำให้น้อยที่สุดโดยการทำให้ส่วนประกอบ การปฏิบัติและตัวเลือกชัดเจน วิธีการใช้งานต้องเข้าถึงได้ง่ายและรับรู้ได้ง่าย

Flexibility and efficiency of use มีความยืดหยุ่นสำหรับ ผู้ใช้งานหลากหลายกลุ่ม และมีประสิทธิผล

Aesthetic and minimalist design ประโยคนำเสนอไม่ต้อง รวมเรื่องที่ไม่เกี่ยวข้องหรือใช้น้อย

 Help users recognize, diagnose, and recover from errors ข้อความแสดงความผิด พลาดต้องปรากฏในแบบตัวอักษรธรรมดาไม่ใช่โค๊ด ระบุปัญหาและบอกวิธีแก้ไข

Help and documentation ระบบที่ดีต้องทำงาน ได้โดยไม่ต้องอาศัยคู่มือการใช้ แต่ก็ยังมีความจำเป็น ข้อมูลที่ให้ต้องหาง่ายเจาะจงไปยังหน้าที่ต่าง ๆ มีการเรียงลำดับที่เป็นนามธรรมและไม่หนาจนเกินไป

ที่มา  :    http://campus.en.kku.ac.th/project/2003/COE2003-09/conceptual.htm

 http://www.arip.co.th/blog.php?blogger=wanda&id=85

 www.ktpbook.com/product/ProductDetail.asp?Id...1...
http://www.moodle.rmutt.ac.th/course/category.php?id=29      http://learners.in.th/file/zetha_oil/User%20Interface%20Design.doc

 

 

การออกแบบอินเตอร์เฟส(Interface Design)

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

ประสิทธิภาพของการออกแบบ User Interface
ในปัญจุบันจำเป็นต้องอาศัยนวัตกรรมและเทคโนโลยีหลายอย่างที่ช่วยในการ User Interface ออกแบบเพื่อยกระดับความซับซ้อนทางเทคนิคของผลิตภัณฑ์ให้ใช้งานด้านเทคโนโลยีอย่างดีและเป็นที่ยอมรับจากผู้ใช้
การออกแบบ User Interface มีวัตถุประสงค์หลัก ดังนี้

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

3.    ผู้ใช้จะป้อนข้อความที่จะแสดงออกได้ที่ช่องข้อ ความ

4.    ใช้สีสันสวยงามดึงดูดใจให้น่าใช้

ที่มา :

 

http://campus.en.kku.ac.th/project/2003/COE2003-09/conceptual.htm

 

 

20 ก.ค. 49 10:30

 

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

แม้ว่าการศึกษาเทคนิคการออกแบบอินเทอร์เฟซนี้จะมีการวิจัยอย่างแพร่หลายในปัจจุบัน แต่ส่วนใหญ่แล้วงานวิจัยเหล่านั้นจะมิได้ศึกษาจากประชากรในแถบประเทศเอเซียซึ่งนับได้ว่าเป็นกลุ่มประเทศที่มีรูปแบบวัฒนธรรมและแนวคิดที่แตกต่างจากประเทศแถบอื่นของโลก ดังนั้นงานวิจัยนี้จะศึกษารูปแบบของอินเทอร์เฟซที่ผู้ใช้โปรแกรมคาดหวังเมื่อมีการเรียกใช้โปรแกรมนั้นๆ ทั้งนี้การศึกษาจะมุ่งเน้นในประเด็นของการออกแบบอินเทอร์เฟซของโปรแกรมบนอินเทอร์เน็ตเป็นหลัก (เรียกสั้นๆ ว่า เว็บเพจ) โดยกลุ่มตัวอย่างที่ใช้ศึกษานี้เป็นอาสาสมัครคนไทยเท่านั้น

สภาวะแวดล้อมของระบบเก็บข้อมูลเพื่อการศึกษาความคาดหวังของผู้ใช้เว็บเพจ

การทดลองนี้ได้กำหนดให้มีการสร้างแบบสอบถามในรูปแบบของเว็บเพจที่ผู้ใช้เว็บทั่วไปซึ่งเป็นกลุ่มเป้าหมายของการศึกษาวิจัยในครั้งนี้สามารถเข้ามาตอบคำถามได้อย่างอิสระจากเว็บของระบบไทยเมล์ (www.thaimail.com) คำตอบจากผู้ตอบจะถูกบันทึกลงฐานข้อมูลไมโครซอฟท์ แอ็กเซส 97 (โครงสร้างระบบการดำเนินการที่เกิดขึ้นแสดงดังรูปที่ 1)

รูปที่ 1 สภาวะแวดล้อมของระบบเก็บข้อมูล

การสร้างแบบสอบถาม การศึกษาวิจัยครั้งนี้ได้สร้างแบบสอบถามซึ่งมีการแบ่งคำถามออกเป็น 3 ส่วน โดยส่วนที่ 1 จะเป็นส่วนของข้อมูลทั่วไป ส่วนที่ 2 เป็นการแสดงข้อคิดเห็นเพื่อการออกแบบจำนวน 10 ข้อ และส่วนที่ 3 ส่วนนี้จะเป็นส่วนของการตอบสนองต่อความคาดหวังจำนวน 10 ข้อ ทั้งนี้แบบสอบถามบนระบบเว็บนี้จะเป็นแบบสอบถามภาษาไทยเท่านั้น นอกจากนี้แล้วในการถามคำถามบางส่วนจะมีตัวอย่างอินเทอร์เฟซให้ผู้ใช้สามารถทำความเข้าใจในรูปแบบคำถามได้โดยง่าย รายละเอียดของการเก็บข้อมูลในส่วนต่างๆ มีดังนี้

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

รูปที่ 2 อินเทอร์เฟซเพื่อการเก็บข้อมูลทั่วไป

ส่วนที่ 2 การแสดงข้อคิดเห็นเพื่อการออกแบบ การตั้งคำถามในส่วนนี้จะแบ่งออกเป็น 10 คำถามโดยมีการกำหนดวัตถุประสงค์ของการถามคือ ศึกษาลักษณะของเนื้อหาที่ผู้เข้าชมเว็บไซต์ต้องการ และสามารถดึงดูดความสนใจในเนื้อหาข้อมูลเชิงวิชาการที่สามารถเกิดความเบื่อหน่ายได้ง่าย ให้น่าสนใจขึ้น ศึกษาความต้องการใช้ภาษาของผู้เข้าชมเว็บไซต์ ว่ามีความต้องการอย่างไรและต้องการแสดงเอกลักษณ์ของภาษาตนเองหรือไม่ ศึกษาลักษณะของแถบเลื่อนว่างแบบใดที่จะช่วยอำนวยความสะดวกต่อผู้ใช้ว่ามากที่สุด ศึกษาการเชื่อมโยงที่ควรจะเป็นในการสร้างอินเทอร์เฟซที่ต่อเนื่องกันที่ผู้ใช้ไม่เกิดความสับสนและทำให้รู้สึกคุ้นเคยได้โดยง่าย

ศึกษาลักษณะของปุ่มว่าควรจะมีการกระตุ้นความสนใจมากแค่ไหน มองเห็นเด่นชัด เรียบง่าย กลมกลืนไปกับหน้าจอ หรือดึงดูดความสนใจต่อหน้าจอนั้นอย่างรุนแรงด้วยเสียง ศึกษาลักษณะของเสียงที่ทำให้เกิดความน่าสนใจในหน้าจอนั้น ศึกษาตำแหน่งของหัวข้อและคำอธิบายที่ผู้ใช้จะรู้สึกคุ้นเคยที่สุด

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

ส่วนที่ 3 การตอบสนองต่อความคาดหวัง แบบสอบถามส่วนนี้มีทั้งสิ้น 10 ข้อ แต่ละข้อนั้นผู้ตอบสามารถตอบได้มากกว่าหนึ่งข้อและการตอบแต่ละครั้งจะมีการกำหนดลำดับความสำคัญของคำตอบเสมอ ในที่นี้กำหนดให้ลำดับที่ 1 เป็นลำดับที่มีความสำคัญมากที่สุด ส่วนลำดับอื่นๆ จะมีความสำคัญรองลงมาเรื่อยๆ วัตถุประสงค์ของการสอบถามในส่วนนี้มีเพื่อวัดความคาดหวังในด้านต่างๆ คือ เมื่อผู้ใช้ต้องการซื้อสินค้าจากระบบการค้าเชิงพาณิชย์แล้ว สิ่งใดคือสิ่งที่ผู้ใช้คาดหวังว่าจะสามารถพบได้หรือเป็นรายละเอียดที่ผู้ใช้ต้องการ

ศึกษาลักษณะของอินเตอร์เฟสที่ผู้ใช้เห็นว่าช่วยให้การศึกษาเนื้อหาต่างๆ เป็นไปได้โดยง่ายและมีความรู้สึกที่จะติดตามเนื้อหาเหล่านั้นต่อไป

 

 

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

แม้ว่าการศึกษาเทคนิคการออกแบบอินเทอร์เฟซนี้จะมีการวิจัยอย่างแพร่หลายในปัจจุบัน แต่ส่วนใหญ่แล้วงานวิจัยเหล่านั้นจะมิได้ศึกษาจากประชากรในแถบประเทศเอเซียซึ่งนับได้ว่าเป็นกลุ่มประเทศที่มีรูปแบบวัฒนธรรมและแนวคิดที่แตกต่างจากประเทศแถบอื่นของโลก ดังนั้นงานวิจัยนี้จะศึกษารูปแบบของอินเทอร์เฟซที่ผู้ใช้โปรแกรมคาดหวังเมื่อมีการเรียกใช้โปรแกรมนั้นๆ ทั้งนี้การศึกษาจะมุ่งเน้นในประเด็นของการออกแบบอินเทอร์เฟซของโปรแกรมบนอินเทอร์เน็ตเป็นหลัก (เรียกสั้นๆ ว่า เว็บเพจ) โดยกลุ่มตัวอย่างที่ใช้ศึกษานี้เป็นอาสาสมัครคนไทยเท่านั้น

สภาวะแวดล้อมของระบบเก็บข้อมูลเพื่อการศึกษาความคาดหวังของผู้ใช้เว็บเพจ

การทดลองนี้ได้กำหนดให้มีการสร้างแบบสอบถามในรูปแบบของเว็บเพจที่ผู้ใช้เว็บทั่วไปซึ่งเป็นกลุ่มเป้าหมายของการศึกษาวิจัยในครั้งนี้สามารถเข้ามาตอบคำถามได้อย่างอิสระจากเว็บของระบบไทยเมล์ (www.thaimail.com) คำตอบจากผู้ตอบจะถูกบันทึกลงฐานข้อมูลไมโครซอฟท์ แอ็กเซส 97 (โครงสร้างระบบการดำเนินการที่เกิดขึ้นแสดงดังรูปที่ 1)

รูปที่ 1 สภาวะแวดล้อมของระบบเก็บข้อมูล

การสร้างแบบสอบถาม การศึกษาวิจัยครั้งนี้ได้สร้างแบบสอบถามซึ่งมีการแบ่งคำถามออกเป็น 3 ส่วน โดยส่วนที่ 1 จะเป็นส่วนของข้อมูลทั่วไป ส่วนที่ 2 เป็นการแสดงข้อคิดเห็นเพื่อการออกแบบจำนวน 10 ข้อ และส่วนที่ 3 ส่วนนี้จะเป็นส่วนของการตอบสนองต่อความคาดหวังจำนวน 10 ข้อ ทั้งนี้แบบสอบถามบนระบบเว็บนี้จะเป็นแบบสอบถามภาษาไทยเท่านั้น นอกจากนี้แล้วในการถามคำถามบางส่วนจะมีตัวอย่างอินเทอร์เฟซให้ผู้ใช้สามารถทำความเข้าใจในรูปแบบคำถามได้โดยง่าย รายละเอียดของการเก็บข้อมูลในส่วนต่างๆ มีดังนี้

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

รูปที่ 2 อินเทอร์เฟซเพื่อการเก็บข้อมูลทั่วไป

ส่วนที่ 2 การแสดงข้อคิดเห็นเพื่อการออกแบบ การตั้งคำถามในส่วนนี้จะแบ่งออกเป็น 10 คำถามโดยมีการกำหนดวัตถุประสงค์ของการถามคือ ศึกษาลักษณะของเนื้อหาที่ผู้เข้าชมเว็บไซต์ต้องการ และสามารถดึงดูดความสนใจในเนื้อหาข้อมูลเชิงวิชาการที่สามารถเกิดความเบื่อหน่ายได้ง่าย ให้น่าสนใจขึ้น ศึกษาความต้องการใช้ภาษาของผู้เข้าชมเว็บไซต์ ว่ามีความต้องการอย่างไรและต้องการแสดงเอกลักษณ์ของภาษาตนเองหรือไม่ ศึกษาลักษณะของแถบเลื่อนว่างแบบใดที่จะช่วยอำนวยความสะดวกต่อผู้ใช้ว่ามากที่สุด ศึกษาการเชื่อมโยงที่ควรจะเป็นในการสร้างอินเทอร์เฟซที่ต่อเนื่องกันที่ผู้ใช้ไม่เกิดความสับสนและทำให้รู้สึกคุ้นเคยได้โดยง่าย

ศึกษาลักษณะของปุ่มว่าควรจะมีการกระตุ้นความสนใจมากแค่ไหน มองเห็นเด่นชัด เรียบง่าย กลมกลืนไปกับหน้าจอ หรือดึงดูดความสนใจต่อหน้าจอนั้นอย่างรุนแรงด้วยเสียง ศึกษาลักษณะของเสียงที่ทำให้เกิดความน่าสนใจในหน้าจอนั้น ศึกษาตำแหน่งของหัวข้อและคำอธิบายที่ผู้ใช้จะรู้สึกคุ้นเคยที่สุด

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

ส่วนที่ 3 การตอบสนองต่อความคาดหวัง แบบสอบถามส่วนนี้มีทั้งสิ้น 10 ข้อ แต่ละข้อนั้นผู้ตอบสามารถตอบได้มากกว่าหนึ่งข้อและการตอบแต่ละครั้งจะมีการกำหนดลำดับความสำคัญของคำตอบเสมอ ในที่นี้กำหนดให้ลำดับที่ 1 เป็นลำดับที่มีความสำคัญมากที่สุด ส่วนลำดับอื่นๆ จะมีความสำคัญรองลงมาเรื่อยๆ วัตถุประสงค์ของการสอบถามในส่วนนี้มีเพื่อวัดความคาดหวังในด้านต่างๆ คือ เมื่อผู้ใช้ต้องการซื้อสินค้าจากระบบการค้าเชิงพาณิชย์แล้ว สิ่งใดคือสิ่งที่ผู้ใช้คาดหวังว่าจะสามารถพบได้หรือเป็นรายละเอียดที่ผู้ใช้ต้องการ

ศึกษาลักษณะของอินเตอร์เฟสที่ผู้ใช้เห็นว่าช่วยให้การศึกษาเนื้อหาต่างๆ เป็นไปได้โดยง่ายและมีความรู้สึกที่จะติดตามเนื้อหาเหล่านั้นต่อไป

อ้างอิง google 

 

User Interface Design การออกแบบส่วนต่อประสาน

 

User Interface Design หรือ Human-Computer Interaction คือ การออกแบบส่วนต่อประสานกับผู้ใช้ ระหว่างผู้ใช้กับคอมพิวเตอร์ ซึ่งเริ่มจากการรวมวิธีการค้นหาข้อมูลและภูมิความรู้ของนักจิตวิทยา นักการศึกษา นักออกแบบกราฟิก ช่างเทคนิค ผู้เชี่ยวชาญด้านมนุษย์ นักออกแบบสถาปัตยกรรมข้อมูล และนักสังคมศาสตร์ เพื่อการออกแบบพัฒนาส่วนต่อประสานให้ใช้งานได้อย่างมีประสิทธิภาพ โดยมีวัตถุประสงค์หลักคือ สามารถใช้งานได้ง่าย ใช้ทักษะส่วนบุคคลน้อย ฝึกอบรมการใช้งานน้อย เพิ่มมาตรฐานการออกแบบที่อยู่ในระบบ (U.S Military Standard for Human Engineering Design Criteria, 1999) นอกจากนี้ การออกแบบส่วนต่อประสานที่ดีจะทำให้งานที่สำเร็จออกมาดีใช้งานได้ง่าย เรียนรู้ได้ง่าย ก็จะสามารถแข่งขันกับซอฟท์แวร์อื่น ๆ ในตลาดได้ ดังที่ Jacob nielsen ผู้เชี่ยวชาญในการออกแบบ Web Usability ได้กล่าวว่า “Bad usability equal no customers.”

 

Universal Usability ในการออกแบบส่วนต่อประสานเราควรคำนึงถึงเรื่องใดบ้าง

 

• ความหลากหลายของผู้ใช้งานทั้งทางกายภาพและสภาพแวดล้อม
• บุคลิกของผู้ใช้ที่แตกต่างกัน / ความต่างระหว่างบุคคล
• ความแตกต่างของปัญญาและความสามารถในการรับรู้
• ความหลากหลายทางเชื้อชาติและวัฒนธรรม
• ผู้ใช้งานที่ไร้ความสามารถหรือพิการ
• อายุของผู้ใช้งาน
• การออกแบบสำหรับเด็ก
• การปรับให้เข้ากับซอฟท์แวร์และฮาร์ดแวร์

 

Principle หลักการในการออกแบบส่วนต่อประสาน (Ben, 2005)

 

• ประเมินทักษะผู้ใช้งาน เพราะผู้ใช้งานมีหลากหลาย การรู้จักผู้ใช้ เป็นหลักการแรกที่ต้องทำ (Hansen, 1971) เราอาจแบ่งทักษะผู้ใช้งานออกเป็น 3 ส่วนใหญ่ ๆ คือ ผู้ใช้มือใหม่ (Novice or first-time user) ผู้ใช้ระดับกลาง (Knowledgeable intermittent users) และผู้เชี่ยวชาญ (Expert frequent user) หากจะออกแบบให้ใช้งานได้กับกลุ่มใดกลุ่มหนึ่งจะเป็นเรื่องง่าย แต่ถ้าต้องออกแบบให้คนทั้งสามกลุ่มเข้าใจร่วมกันได้ จะเป็นเรื่องที่ยากและท้าทายมาก
• แจกแจงงาน นักออกแบบต้องแจกแจงหน้าที่และงานของระบบให้ละเอียดก่อน แล้วเรียงลำดับว่างานไหนมีความสำคัญก่อน งานไหนสำคัญหลัง
• เลือกแบบการปฏิสัมพันธ์ การปฏิสัมพันธ์มีได้หลายรูปแบบนักออกแบบต้องเลือกให้เหมาะสม เช่น
  • Direct manipulation การจับต้องสัมผัสโดยตรง เช่น การลากไอคอนลงไปบนถังขยะ แสดงว่าต้องการลบ มีข้อดีคือ ภาพแสดงถึงหน้าที่อย่างชัดเจน เรียนรู้ได้ง่าย จดจำได้ง่าย หลีกเลี่ยงความผิดพลาด สนับสนุนการค้นหา และ ก่อให้เกิดการปฏิบัติตาม มีข้อเสียคือ สร้างยาก และต้องการการแสดงผลที่เป็นกราฟิกและต้องอาศัยเครื่องชี้
  • Menu Selection การเลือกเมนู มีข้อดีคือ เรียนรู้ได้ง่าย ลดการใช้คียบอร์ด เกิดการตัดสินใจที่มีโครงสร้าง ลดการเกิดข้อผิดพลาด มีข้อเสียคือ เมนูที่มากไปทำให้การนำเสนอไม่ดี ทำให้ผู้ใช้งานที่คล่องใช้งานได้ช้าลง ใช้พื้นที่ในการแสดงผลมาก
  • Form Fill in การเติมคำลงในฟอร์ม มีข้อดีคือ การกรอกข้อมูลมีความง่าย ฝึกฝนได้โดยไม่ยาก และมีคำแนะนำที่สะดวก มีข้อเสียคือ ใช้พื้นที่แสดงผลมาก
  • Command Language ภาษาสั่งการ เป็นการใช้ตัวอักษรในการสั่งการ ส่วนใหญ่จะใช้กับผู้ใช้ที่มีความเชี่ยวชาญ มีข้อดีคือ ยืดหยุ่น ดึงดูดผู้ใช้ระดับสูง ผู้ใช้สามารถสร้างคำสั่งเองได้ มีข้อเสียคือ มีข้อผิดพลาดได้ง่าย ต้องการการอบรมและการจดจำสูง
  • Natural Language ภาษาพูด หรือภาษาที่ใช้โดยธรรมชาติ มีข้อดีคือ สร้างสาระสำคัญของระบบการเรียนรู้ มีข้อเสียคือ ต้องแยกแยะบทสนทนา อาจไม่แสดงถึงเนื้อหา อาจต้องพิมพ์มาก และคาดเดาไม่ได้
• ใช้กฎ 8 ข้อสำหรับการออกแบบหน้าจอ
  • Strive for consistency ทำให้เกิดความสม่ำเสมอ ไม่ว่าจะเป็นเมนู ไอคอน สี รูปแบบ ตัวอักษรต่าง ๆ ควรจะมีความสม่ำเสมอ
  • Cater to universal usability ให้ความพอใจกับทุกคน กับทุกกลุ่มผู้ใช้
  • Offer information feedback ให้ข้อมูลป้อนกลับเมื่อมีการปฏิสัมพันธ์
  • Design dialog yield closure ออกแบบให้มีจุดเริ่มต้น ระหว่างกลาง และสุดท้าย
  • Prevent error ป้องกันความผิดพลาด
  • Permit easy reversal of actions สามารถย้อนกลับได้ง่ายเพื่อแก้ไขข้อผิดพลาด
  • Support internal locus of control สนับสนุนการควบคุมภายใน ต้องออกแบบให้เกิดการตอบสนองของหน้าจอกับสิ่งที่ผู้ใช้ได้กระทำลงไป
  • Reduce short-term memory load ลดความยาวของเวลาที่ใช้ในความจำระยะสั้น

 

Ten Usability Heuristics ( Jakob Nielsen, 2000)

 

Visibility of system status

ระบบต้องแสดงให้ผู้ใช้งานเห็นเสมอว่าตนกำลังทำอะไรอยู่ กำลังจะเกิดอะไรขึ้น และให้ผลป้อนกลับในเวลาที่เหมาะสม

Match between system and the real world

ระบบต้องสามารถพูดภาษาเดียวกันกับผู้ใช้โดยมีตรรกะการใช้งานที่เป็นธรรมชาติ

User control and freedom

ผู้ใช้มักจะใช้งานผิดพลาดจึงจำเป็นต้องมีทางออกให้เสมอสำหรับสถานการณ์ที่ไม่พึงประสงค์ สนับสนุนการ Undo และ Redo

Consistency and standards

ผู้ใช้งานต้องไม่เกิดความสงสัย ระหว่างตัวหนังสือที่แตกต่างกัน สถานการณ์หรือการกระทำที่ให้ผลเหมือนกันให้ทำตามระเบียบแบบแผนที่วางไว้

Error prevention

คำเตือนให้ระวังความผิดพลาดเป็นสิ่งที่ดีที่จะช่วยป้องกันความผิดพลาด ซึ่งควรจะให้มีการตกลงใจซ้ำอีกครั้งเพื่อตรวจสอบความแน่นอนของการตัดสินใจของผู้ใช้

Recognition rather than recall

ทำให้ผู้ใช้งานใช้ความจำให้น้อยที่สุดโดยการทำให้ส่วนประกอบ การปฏิบัติและตัวเลือกชัดเจน วิธีการใช้งานต้องเข้าถึงได้ง่ายและรับรู้ได้ง่าย

Flexibility and efficiency of use

มีความยืดหยุ่นสำหรับผู้ใช้งานหลากหลายกลุ่ม และมีประสิทธิผล

Aesthetic and minimalist design

ประโยคนำเสนอไม่ต้องรวมเรื่องที่ไม่เกี่ยวข้องหรือใช้น้อย

Help users recognize, diagnose, and recover from errors

ข้อความแสดงความผิดพลาดต้องปรากฏในแบบตัวอักษรธรรมดาไม่ใช่โค๊ด ระบุปัญหาและบอกวิธีแก้ไข

Help and documentation

ระบบที่ดีต้องทำงานได้โดยไม่ต้องอาศัยคู่มือการใช้ แต่ก็ยังมีความจำเป็น ข้อมูลที่ให้ต้องหาง่ายเจาะจงไปยังหน้าที่ต่าง ๆ มีการเรียงลำดับที่เป็นนามธรรมและไม่หนาจนเกินไป

 

 

 

 

http://learners.in.th/file/zetha_oil/User+Interface+Design.doc

การศึกษา การเรียนการสอน

คำสำคัญ: hci09_05

สัญญาอนุญาต: ซีซี: แสดงที่มา-ไม่ใช้เพื่อการค้า-อนุญาตแบบเดียวกัน

ศ. 17 กค. 2552 @ 22:49

 

การออกแบบอินเตอร์เฟส
การออกแบบข้อมูล(Information Design)
ข้อมูลถือเป็นองค์ประกอบสำคัญสำหรับเว็บไซต์ ดังนั้นจึงควรได้รับการออกแบบด้วย โดยเว็บไซต์ที่มีขนาดใหญ่ จะมีความท้าทาย(Challenge) ในเรื่องของการออกแบบข้อมูลอยู่ที่การค้นหา(Search)ข้อมูล เพราะเว็บไซต์ที่มีข้อมูลมากมาย Audience จะไม่สามารถหาข้อมูลที่ต้องการพบได้ง่ายนัก ส่วนเว็บไซต์ที่มีขนาดกลางถึงขนาดย่อมนั้น ความท้าทายจะอยู่ที่เรื่องของการดำเนินการ(Processing)กับข้อมูล ทั้งเรื่องของการจัดรูปแบบ(format)ของข้อมูลในหน้า(Page)ต่างๆของเว็บไซต์ให้เหมาะสม เพราะ Audience จะมีพฤติกรรมในการดูข้อมูลบนหน้าจอแบบผ่านๆ ไม่ได้ดูข้อมูลทั้งหมดที่มีอยู่ เพราะฉะนั้นจึงจะต้องทำการออกแบบข้อมูลให้มีจุดเด่น เพื่อดึงสายตาของ Audience ไปยังข้อมูลที่เราต้องการจะนำเสนอ ยกตัวอย่าเช่นการมี หัวข้อหลัก(Heading) หัวข้อย่อย(Subheading) การจัดย่อหน้า(Paragraph) ฯลฯ แต่ข้อมูลของเว็บไซต์ไม่ได้จำกัดอยู่เพียงแค่บนหน้าเว็บเพจเพียงหน้าเดียว ดังนั้นเรื่องของ ลิงค์(Link) และเมนู(Menu)ต่างๆจึงเป็นอีกเรื่องหนึ่งที่ต้องคำนึงถึง เพื่อให้การเข้าถึงข้อมูลของ Audience เป็นไปได้อย่างมีประสิทธิภาพมากที่สุด

ทั้ง 3 องค์ประกอบเป็นเรื่องที่สำคัญในการออกแบบเว็บไซต์เว็บไซต์หนึ่ง ดังนั้นในการออกแบบแต่ละครั้งจำเป็นที่จะต้องคำนึงถึงทั้ง 3 เรื่องด้วยเพื่อให้เว็บไซต์ที่ออกแบบมาเป็นประโยชน์ และAudience สามารถใช้งานได้อย่างเต็มประสิทธิภาพมากที่สุด

ที่มา
www.google.co.th
http://nariopon.thport.com/?p=361

 

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

   
User Interface Design หรือ Human-Computer Interaction คือ การออกแบบส่วนต่อประสานกับผู้ใช้ ระหว่างผู้ใช้กับคอมพิวเตอร์ ซึ่งมีกระบวนการที่เริ่มจากการรวบรวมข้อมูลที่เกี่ยวข้องตลอดจนภูมิความรู้ของนักจิตวิทยา นักการศึกษา นักออกแบบกราฟิก ช่างเทคนิค ผู้เชี่ยวชาญด้านมนุษย์วิทยา นักออกแบบสถาปัตยกรรมข้อมูล และนักสังคมศาสตร์ เพื่อมาร่วมกันพัฒนากระบวนการออกแบบพัฒนาส่วนต่อประสานให้ใช้งานได้อย่างมีประสิทธิภาพ

://gotoknow.org/blog/useit/43505

การออกแบบ User Interface มีวัตถุประสงค์หลัก ดังนี้

          1. มีลักษณะเป็นหน้าต่างและคำสั่งในการทำงานคล้ายโปรแกรมทั่วๆไปที่ Run บน Windows เพราะผู้ใช้งานคอมพิวเตอร์ส่วนใหญ่คุ้นเคยกับการใช้ Windows อยู่แล้วทำให้ผู้ใช้สามารถใช้โปรแกรมได้สะดวกมากขึ้น

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

          3. เพื่อความสะดวกในการใช้งาน สามารถเลือกความเร็วในการแสดงจากลำดับรายการ

          4. ผู้ใช้จะป้อนข้อความที่จะแสดงออกได้ที่ช่องข้อความ

          5. ใช้สีสันสวยงามดึงดูดใจให้น่าใช้

http://campus.en.kku.ac.th/project/2003/COE2003-09/conceptual.htm 

การออกแบบ  User Interface

- สอดคล้อง/รองรับ พฤติกรรมการค้นคว้าของผู้ใช้   เช่น สะดุดตา สะดุดใจ สะดวก สบาย รวดเร็ว

- เชื่อมโยงข้อมูลที่เป็นประโยชน์ไว้ด้วยกันทั้งหมด

www.tiac.or.th/slg/วรนุช1.pp

การออกแบบอินเตอร์เฟสที่เกี่ยวข้องกับศักยภาพของทั้งมนุษย์

ปัจจุบันเว็บไซต์เป็นสื่อที่ได้มีการประยุกต์ใช้ในงานด้านต่างๆมากมาย ทั้งใช้สำหรับเผยแพร่ข้อมูลความรู้ (wikipedia.org) โปรโมตสินค้าและบริการ หรือแม้การทั้งใช้เพื่อใช้เพื่อแสดงความเป็นตัวตนให้โลกได้รับรู้(Blog ต่างๆ)

การออกแบบเว็บไซต์(Web Design)ที่ดี ไม่ใช่แค่ออกแบบมาให้ดูดีเท่านั้น แต่เมื่อพูดถึงเรื่องของการออกแบบเว็บไซต์จะประกอบไปด้วย 3 องค์ประกอบหลักที่ไม่เกี่ยวกับเรื่องทางด้านเทคนิค(non-technical) ได้แก่ การออกแบบความสวยงาม(Aesthetic Design) การออกแบบข้อมูล(Information Design) และการออกแบบอินเตอร์เฟส(Interface Design)

การออกแบบความสวยงาม(Aesthetic Design)     
ความสวยงามของเว็บไซต์นั้นเป็นสิ่งแรกที่ Audience จะสัมผัสได้เมื่อเข้ามายังเว็บไซต์นั้นๆ แต่เรื่องของความสวยงามจัดเป็นเรื่องความชอบส่วนบุคคล ดังนั้นนอกจากจะต้องออกแบบให้สวยแล้วยังต้องออกแบบให้เว็บไซต์มีเอกลักษณ์(identity)ของตัวเองด้วย เพื่อให้ Audience เมื่อพบเห็นหน้าเว็บไซต์ที่เป็นรูปแบบนี้เมื่อไหร่ สามารถบอกได้ทันที่ว่าเป็นเว็บไซต์ของเรา

การออกแบบข้อมูล(Information Design)
ข้อมูลถือเป็นองค์ประกอบสำคัญสำหรับเว็บไซต์ ดังนั้นจึงควรได้รับการออกแบบด้วย โดยเว็บไซต์ที่มีขนาดใหญ่ จะมีความท้าทาย(Challenge) ในเรื่องของการออกแบบข้อมูลอยู่ที่การค้นหา(Search)ข้อมูล เพราะเว็บไซต์ที่มีข้อมูลมากมาย Audience จะไม่สามารถหาข้อมูลที่ต้องการพบได้ง่ายนัก ส่วนเว็บไซต์ที่มีขนาดกลางถึงขนาดย่อมนั้น ความท้าทายจะอยู่ที่เรื่องของการดำเนินการ(Processing)กับข้อมูล ทั้งเรื่องของการจัดรูปแบบ(format)ของข้อมูลในหน้า(Page)ต่างๆของเว็บไซต์ให้เหมาะสม เพราะ Audience จะมีพฤติกรรมในการดูข้อมูลบนหน้าจอแบบผ่านๆ ไม่ได้ดูข้อมูลทั้งหมดที่มีอยู่ เพราะฉะนั้นจึงจะต้องทำการออกแบบข้อมูลให้มีจุดเด่น เพื่อดึงสายตาของ Audience ไปยังข้อมูลที่เราต้องการจะนำเสนอ ยกตัวอย่าเช่นการมี หัวข้อหลัก(Heading) หัวข้อย่อย(Subheading) การจัดย่อหน้า(Paragraph) ฯลฯ แต่ข้อมูลของเว็บไซต์ไม่ได้จำกัดอยู่เพียงแค่บนหน้าเว็บเพจเพียงหน้าเดียว ดังนั้นเรื่องของ ลิงค์(Link) และเมนู(Menu)ต่างๆจึงเป็นอีกเรื่องหนึ่งที่ต้องคำนึงถึง เพื่อให้การเข้าถึงข้อมูลของ Audience เป็นไปได้อย่างมีประสิทธิภาพมากที่สุด

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

หลักการทำงาน
คือ การที่จะโอนย้ายข้อมูลทุกตัวนั้นจะต้องมีแหล่งที่ส่งข้อมูล และแหล่งที่รับข้อมูลสำหรับขบวนการเหล่านั้น จะมีส่วนที่สำคัญกว่า ข้อมูลนั้นเป็น แอดเดรสหรือว่าเป็นดาต้า จะส่งไปยังจุดไหน และจะส่งเมื่อไร การทำงานเหล่านี้โดยทั่วๆไป จะต้องมีสัญญาณ ในการตรวจสอบอุปกรณ์ว่าพร้อมที่จะส่ง/รับข้อมูล หรือยังก่อนเสมอ เนื่องจากจุดที่ส่งและรับ ข้อมูล จะต้องมีสัญญาณตรวจสอบความพร้อมเสมอเพื่อที่จะให้ข้อมูลที่เราใช้งานนั้นๆ เป็นระเบียบ ซึ่งจุดรับส่งคู่หนึ่งๆ อาจจะเป็นระหว่างซีพียูด้วยกัน หรือ ซีพียูกับหน่วยความจำ หรือ ซีพียูกับอุปกรณ์รอบข้าง หรือ ระหว่างอุปกรณ์รอบข้างด้วยกัน หรือ ระหว่างหน่วยความจำกับอุปกรณ์รอบข้าง ก็ได้ สำหรับข้อมูลที่โอนย้ายไปมานั้นจะอยู่ในลักษณะของเลขฐาน ขึ้นอยู่กับของระบบนั้นๆ ถ้าหากเป็นการต่อจากพอร์ตพีซีไม่ว่าจะเป็น Serial หรือ Parallel ในสัญญาณที่ส่งมาจะมีระบบแรงดันไฟฟ้า

หลักการออกแบบเว็บไซต์

การออกแบบเว็บไซต์ คำนึงถึงความเหมาะสมกับกลุ่มบุคคลเป้าหมายผู้ใช้และลักษณะของเว็บไซต์ ความสะดวกในการใช้งาน

องค์ประกอบของการออกแบบเว็บไซต์ ต้องคำนึงถึง

1. ความเรียบง่าย ได้แก่ มีรูปแบบที่เรียบง่าย ไม่ซับซ้อน และใช้งานได้สะดวก ไม่มีกราฟิกหรือตัวอักษรที่เคลื่อนไหวอยู่ตลอดเวลา ชนิดและสีของตัวอักษรไม่มากจนเกินไปทำให้วุ่นวาย
2. ความสม่ำเสมอ ได้แก่ ใช้รูปแบบเดียวกันตลอดทั้งเว็บไซต์ เช่น รูปแบบของหน้า สไตล์ของกราฟิก ระบบเนวิเกชันและโทนสี ควรมีความคล้ายคลึงกันตลอดทั้งเว็บไซต์
3. ความเป็นเอกลักษณ์ การออกแบบเว็บไซต์ควรคำนึงถึงลักษณะขององค์กร เพราะรูปแบบของเว็บไซต์จะสะท้อนถึงเอกลักษณ์และลักษณะขององค์กรนั้น ๆ เช่น ถ้าเป็นเว็บไซต์ของทาง ราชการ จะต้องดูน่าเชื่อถือไม่เหมือนสวนสนุก ฯลฯ

4. เนื้อหาที่มีประโยชน์ เนื้อหาเป็นสิ่งที่สำคัญที่สุดในเว็บไซต์ ดังนั้นควร จัดเตรียมเนื้อหาและข้อมูลที่ผู้ใช้ต้องการให้ถูกต้อง และสมบูรณ์ มีการปรับปรุงและเพิ่มเติมให้ทันเหตุการณ์อยู่เสมอ
เนื้อหาไม่ควรซ้ำกับเว็บไซต์อื่น จึงจะดึงดูดความสนใจ
5. ระบบเนวิเกชันที่ใช้งานง่าย ต้องออกแบบให้ผู้ใช้เข้าใจง่ายและใช้งานสะดวก ใช้กราฟิกที่สื่อความหมายร่วมกับคำอธิบายที่ชัดเจน มีรูปแบบและลำดับของรายการที่สม่ำเสมอ เช่น วางไว้ ตำแหน่งเดียวกันของทุกหน้า
6. ลักษณะที่น่าสนใจ หน้าตาของเว็บไซต์จะต้องมีความสัมพันธ์กับคุณภาพขององค์ประกอบต่างๆ เช่น คุณภาพของกราฟิกที่จะต้องสมบูรณ์ การใช้สี การใช้ตัวอักษรที่อ่านง่าย สบายตา การใช้โทนสีที่เข้ากัน ลักษณะหน้าตาที่น่าสนใจนั้นขึ้นอยู่กับความชอบของแต่ละบุคคล
7. การใช้งานอย่างไม่จำกัด ผู้ใช้ส่วนใหญ่สามารถเข้าถึงได้มากที่สุด เลือกใช้บราวเซอร์ชนิดใดก็ได้ในการเข้าถึงเนื้อหา สามารถแสดงผลได้ทุกระบบปฏิบัติการและความละเอียดหน้าจอต่างๆ กันอย่างไม่มีปัญหา เป็นลักษณะสำคัฐสำหรับผู้ใช้ที่มีจำนวนมาก
8. คุณภาพในการออกแบบ การออกแบบและเรียบเรียงเนื้อหาอย่างรอบคอบ สร้างความรู้สึกว่าเว็บไซต์มี….คุณภาพ ถูกต้อง และเชื่อถือได้
9. ระบบการใช้งานที่ถูกต้อง การใช้แบบฟอร์มสำหรับกรอกข้อมูลต้องสามารถกรอกได้จริง ใช้งานได้จริง ลิงค์ต่างๆ จะต้องเชื่อมโยงไปหน้าที่มีอยู่จริงและถูกต้อง ระบบการทำงานต่างๆ ในเว็บไซต์จะต้องมีความแน่นอนและทำหน้าที่ได้อย่างถูกต้อง

พื้นฐานในการออกแบบเว็บไซต์ที่ดี

1.มีเนื้อหาเป็นประโยชน์ ตรงกับที่ผู้ใช้ต้องการ

2.มีการปรับปรุงเพิ่มเติมเนื้อหา และพัฒนาเว็บไซต์อยู่เสมอ

3.ใช้เวลาในการดาวน์โหลดน้อย แสดงผลเร็ว ใช้งานที่สะดวก เข้าใจง่าย

โปรแกรมที่ใช้การสร้างเว็บไซต์

1.Macromedia Dreamweaver                                          2.Microsoft FrontPage

3.HomeSite                                                                          4.HotDog Pro

5.GoLive                                                                              6.NetObjects Fusion

7.CoffeeCup

ข้อผิดพลาดในการออกแบบเว็บไซต์

1. ใช้โครงสร้างหน้าเว็บเป็นระบบเฟรม การใช้กรอบ (Frame) เนื่องจากการใช้เฟรมมักจะมีปัญหาในการที่จะสร้างเว็บเพจ จึงไม่ควรนำมาใช้ แต่ในปัจจุบันขีดความสามารถของโปรแกรมที่ใช้สร้างเว็บเพจมากขึ้น ทำให้ปัญหาในข้อนี้หมดไป 2. ใช้เทคโนโลยีขั้นสูงโดยไม่จำเป็น   ความเร็วในการโหลดเว็บเพจ สิ่งที่ควรคำนึงถึงในการทำเว็บเพจอีกสิ่งหนึ่ง คือ ความเร็วในการโหลดเว็บเพจ ผู้เข้าชมไม่ควรใช้เวลานานเกินสมควร ในการรอให้โหลดเว็บเพจโดยเฉพาะอย่างยิ่งในหน้าแรกของการโหลด เพราะมีหลายครั้งผู้เข้าเยี่ยมชมจะหยุดการโหลด เว็บเพจและเปลี่ยนไปหาข้อมูลจากที่อื่น ซึ่งถือเป็นความผิดพลาดใหญ่หลวงของผู้ทำเว็บเพจ ปัจจัยที่จะกระทบต่อความเร็วได้แก่ ขนาดของรูปภาพที่ใช้, จำนวนของรูปภาพที่ใช้ และปริมาณของตัวอักษรที่อยู่บนหน้านั้น ๆ อนึ่งความเร็วในการโหลดเว็บเพจ อาจอยู่ที่ Server ที่เว็บเพจนั้นว่ามีความสามารถสูงเพียงใด ขนาดของรูปภาพที่ใช้ควรจะมีขนาดไม่เกิน 20 – 30 Kb. ต่อรูป ส่วนประกอบของรูปนั้นควรเป็น GIF หรือ JPEG ถ้าขนาดของรูปภาพใหญ่เกินไป อาจตัดแบ่งให้ขนาดเล็กลงและใช้ตารางช่วยในการจัดรูปภาพนั้น ๆ แต่ก็ไม่ควรมีจำนวนมากเกินไป เพราะนั่นก็เป็นสาเหตุหนึ่งที่ลดความเร็วของการโหลดเว็บเพจ 3. ใช้ตัวหนังสือหรือภาพที่เคลื่อนไหวตลอดเวลา การใช้เทคนิคต่าง ๆ มากเกินความจำเป็น เช่น ภาพเคลื่อนไหว หรือตัวอักษรวิ่ง (Marquees) นอกจากนี้มีความจำเป็นต้องใช้ประกอบเนื้อหา เนื่องจากเทคนิคเหล่านี้จะรบกวนการอ่านได้  4. มีที่อยู่เว็บไซต์ที่ซับซ้อน (URL) ยากต่อการจดจำ/พิมพ์ การใช้ยูอาร์แอลที่ซับซ้อนหรือยาวเกินไป ซึ่งจะไม่สะดวกต่อการพิมพ์ลงในช่องเเอดเดรส (Address) 5. ไม่มีการแสดงชื่อและที่อยู่ของเว็บไซต์ในหน้าเว็บเพจ 6. มีความยาวของหน้ามากเกินไป   หน้าจอที่เป็นลักษณะการเลื่อนขึ้นลง (Scrolling) เนื่องจากมีเนื้อหายาวเกินไปทำให้ผู้ใช้ส่วนใหญ่ไม่ดูเนื้อหาที่อยู่ด้านลง เพราะฉะนั้นจึงควรเสนอเนื้อหาที่มีความสำคัญไว้ ด้านบนสุดในแต่ละหน้า 7. ขาดระบบเนวิเกชันที่มีประสิทธิภาพ เช่น แผนผังของเว็บไซต์หรือปุ่มควบคุมเส้นทาง ไม่ว่าจะเป็นเดินหน้า ถอยหลัง รวมทั้งการใช้เครื่องมือสืบค้น (Search Engine) ช่วยในการค้นหาหน้าที่ต้องการ และ การมีหน้าที่ไม่มีการเชื่อมโยง (Orphan Page) ทำให้ผู้ใช้ไม่รู้จะทำอย่างไร ต่อไป อย่างน้อยในแต่ละหน้า ควรจะทำตัวเชื่อมโยงที่กลับไปยัง โฮมเพจ(หน้าแรกของเว็บไซต์) ได้ 8. ใช้สีของลิงค์ไม่เหมาะสม สีของตัวเชื่อมโยงที่ไม่เป็นมาตรฐาน ทำให้เกิดความสับสนได้  9. ข้อมูลเก่าไม่มีการปรับปรุงให้ทันสมัย   10. เว็บเพจแสดงผลช้า ใช้เวลาดาวน์โหลดนาน ผู้ใช้จะเกิดอาการเบื่อหน่ายและเลิกให้ความสนใจกับเว็บที่ใช้เวลาในการแสดงผลนาน สาเหตุเนื่องมาจาก การใส่รูปภาพขนาดใหญ่ ภาพเคลื่อนไหว ตัวอักษรวิ่ง และมีมากเกินไปต่อเอกสารหน้าเว็บ

อย่าลืมข้อจำกัดของมนุษย์ เวลาออกแบบ

เวลาออกแบบเพื่ออะไร เราก็ต้องเข้าใจในสิ่งนั้นๆ ข้อดีข้อด้อยของสิ่งนั้นๆด้วยเช่น  เวลาเราออกแบบส้วมแมว  เราก็ต้องไม่ลืมว่า แมวนั้น พูดไม่ได้  และส่วนใหญ่  กดชักโครกไม่เป็น  เวลาเราออกแบบกระถางให้ดอกบัว  เราก็ต้องไม่ลืมว่า  ดอกบัวต้องอยู่ในน้ำตลอดเวลา และมีที่พอสมควรให้รากหายใจได้ เจริญเติบโตได้  เวลาเราออกแบบสิ่งใดๆให้คน  (ซึ่งเป็นส่วนใหญ่ในสิ่งทั้งหมดที่เราออกแบบในโลกนี้  )เราก็ต้องเข้าใจคนเหมือนกัน  สิ่งหนึ่งที่เป็นพื้นฐานในความเข้าใจมนุษย์  นอกจากที่เราจะเข้าใจความสามารถ  ศักยภาพของมนุษย์แล้วนั้นก็คือ  การเข้าใจข้อจำกัดในความสามารถของมนุษย์ในเรื่องต่างๆ  เช่น  ถ้าเป็นเรื่องการออกแบบบันได  เราก็ต้องมีความรู้ความเข้าใจว่า  มนุษย์ก้าวในแนวตั้งได้สบายที่สุดอยู่ในระยะเท่าใด  ถ้าออกแบบโต๊ะทำงาน  เราก็ต้องมีความรู้ความเข้าใจว่า  คนปรกติ  (ที่เป็นผู้ใช้ของเรา)  จะรู้สึกวางแขนทำงานได้สบายที่สุดช่วงระยะใดถ้าเป็นโต๊ะคอมพิวเตอร์ จะวางแขนบนแป้นพิมพ์ได้องศาที่ดีที่สุด โต๊ะต้องสูงขนาดไหน  ถ้าในเรื่อง Application, Software  ก็จะมีข้อจำกัดที่ควรรู้มากมาย ทั้งนี้ ขึ้นอยู่กับกลุ่มผู้ใช้งานด้วย  ซึ่งจะมีข้อจำกัดและความสามารถเฉพาะแตกต่างกันไป

แต่โดยทั่วไป เวลาเราออกแบบ  ต้องไม่ลืมว่า เราออกแบบให้มนุษย์ใช้

1. มนุษย์ คือมนุษย์
คือผู้ที่สามารถสร้างข้อผิดพลาดได้ตลอดเวลา  เป็นสิ่งที่แตกต่างกับคอมพิวเตอร์อย่างเห็นได้ชัด
ระบบคอมพิวเตอร์ ถ้าเขียนโค้ดถูก ปราศจากบั๊ก ถ้ายังอยู่ใน environment เดิม มันก็ยังทำงานได้โดยปราศจากบั๊กตลอดไป  แต่กับคนแล้ว ไม่รู้ว่า วันดีคืนดีวันไหนจะเกิดเฮี้ยน  อาจจะนอนดึก ง่วงนอน สมาธิไม่ดี แม่ตี สอบตก แชทเพลิน  มีร้อยแปดพันเก้าอย่างที่ทำให้มนุษย์ทำอะไรหละหลวม ผิดพลาดได้ตลอด ฉะนั้น ถ้าระบบยิ่งมีบั๊ก มีข้อผิดพลาด หรือ workflow หละหลวมให้ผิดง่ายๆ  ก็ยิ่งส่งเสริมให้เกิดความผิดพลาดได้ง่ายๆ

*อย่าสรุปว่า ที่เกิดความผิดพลาดเป็นปัญหาของคนๆนั้นเสมอๆ  เพราะระบบอาจไม่ดีเอง หรือไม่ได้คิดถึง flow ที่จะรองรับความผิดพลาดทั่วไปเอาไว้  ให้แก้ที่ระบบก่อน จะง่ายกว่าแก้ที่คนประมาณสามล้านเท่า

2. ความเร็วของการคิด
สมองคนเราใช้เวลาประมาณ 1 ใน 10 วินาทีในการระลึกจำได้ในสิ่งๆหนึ่งๆบนหน้าจอ  และราวๆเกือบๆ 1 ใน 4 วินาที ในการเปลี่ยนความสนใจจากวัตถุหนึ่งไปยังวัตถุอื่นในหน้าจอเดียวกัน  และประมาณ 1.25 วินาทีในการตัดสินใจเลือก 1 ใน 2 ตัวเลือกที่ปรากฏขึ้นพร้อมๆกัน  (Olson and Olson, 1990)

* ถึงแม้ว่าหน่วยประมวลผลของคนเราจะเป็นหน่วยวินาที  มันก็ไม่ได้แปลว่าเร็วอย่างที่หลายๆคนเข้าใจ

3. ตาไปไวกว่ามือเสมอ
การพิมพ์ 1 ตัวอักษร ใช้เวลาโดยทั่วไป 0.1 – 1.25 วินาที  การคลิกเมาส์หนึ่งครั้ง ใช้เวลาเท่ากับการพิมพ์ 1 ตัวอักษร  ในขณะที่การเลื่อนเมาส์บนหน้าจอใช้เวลาเฉลี่ย 1.5 วินาที  (ทั้งนี้ การเลื่อนเมาส์เพื่อคลิกหรือหยุดในตำแหน่งที่ต้องการ ขึ้นอยู่กับ Fitt’s Law  ซึ่งว่าด้วยความสัมพันธ์ระหว่างขนาดของวัตถุและระยะทางที่จะไปยังวัตถุนั้นๆ  ถ้าวัตถุใหญ่และระยะทางสั้น ก็จะใช้เวลาน้อย  ในขณะที่ถ้าวัตถุเล็กแล้วระยะทางยังมากอีก ก็ใช้เวลามากขึ้นตามลำดับ)  การเปลี่ยนมือระหว่างคีย์บอร์ดกับเมาส์ ก็ใช้เวลาอีกประมาณ 0.36 วินาที
เมื่อดูแต่ละ action แล้วอาจจะไม่เยอะ แต่คนเราไม่ได้ทำ action เดียวเดี่ยวๆกับหน้าเว็บ 1 หน้า หรือ หน้า Interfaceใดๆ 1 การแสดงผล  เราทำทั้งระลึก ตัดสินใจ มือไป มือเลื่อน คลิก เปลี่ยนตำแหน่งมือ
รวมๆแล้ว เราใช้เวลาไม่น้อยต่อการทำงานเพียง task เดียว

4. Small Number
นักจิตวิทยานามกระเดื่อง George Miller’s ได้ให้กำเนิดทฤษฎี 7 บวกลบ 2 เอาไว้  ซึ่งแสดงถึงหน่วย หรือชุดข้อมูล ที่คนปรกติคนหนึ่ง พอจะจำได้พร้อมๆกัน  ด้วยความจำส่วนชั่วคราว (Short-term Memory)

ในยุคสมัยการพัฒนาช่วงหนึ่ง จึงได้มีการเข้มงวดเกี่ยวกับกฎนี้อย่างมาก  หลายๆคนได้ตีความกฏนี้ว่า ในหน้าเว็บไม่ควรจะมีเมนูเกิน 7 เมนู  อย่างไรก็ตาม กฏนี้ก็มีข้อยกเว้นไปตามปัจจัยและสถานการณ์ในการใช้งาน  แต่อย่างน้อย กฎนี้ก็ทำให้เราทราบว่า  คนเราไม่ได้จำอะไรได้มากมายนักหรอก อย่าหวังอะไรอย่างนั้นเวลาทำระบบ

5. จำหน้าได้ แต่ชื่อหนีไปไหนแล้วไม่รู้
โดยทั่วไป คนเราจะมีประสิทธิภาพในการ “ระลึก” ได้มากกว่าการ “ขุดความจำ” ขึ้นมาโดยไม่มีตัวช่วย
ถ้าเราเจอคนๆหนึ่งที่ไม่ได้เจอมาเป็นสิบปี ก็มีความเป็นไปได้สูงว่า เราจำชื่อเขาไม่ได้ ถ้าเทียบการที่ให้เอารายชื่อ ตัวเลือกหลอกปนคำตอบจริงมาให้เลือก เรามักจะตอบได้ถูกว่า อ๋อ ไอ้หมอนี่ชื่อนี้นี่เอง
มากกว่าการที่ให้เวลาเรานั่งระลึกชาติตามลำพัง วันหลังจะพูดถึงเรื่องระลึก(Recognize) กับการขุดความจำ(Recall)  ในรายละเอียดทีหลังแล้วกัน (ถ้าไม่ลืม)  ในการใช้ระบบที่เกี่ยวกับคอมพิวเตอร์ยุคแรกๆ
จึงเป็นเรื่องที่สาหัสสากรรจ์สำหรับคนความจำปลาทอง เพราะต้องจำชุดคำสั่งทั้งหมดในการใช้งานให้ได้ เพื่อการใช้งานระบบอย่างมีประสิทธิภาพ ตอนนั้นก็ช่างมันเถิด เพราะยุคนั้น ยังเป็นการเริ่มต้นของการใช้คอมพิวเตอร์อยู่ แต่มาถึงค.ศ. พ.ศ.นี้แล้ว ใครยังทำระบบอย่างนั้นอยู่ ก็มีทีท่าว่าจะขายไม่ออก หมายังไม่มอง(เพราะอ่านไม่ออก) ได้ง่ายๆ ไม่ใช่ว่าการใช้ชุดคำสั่งไม่ดีเสมอไป แต่เราต้องไม่ลืมด้วยว่า ธรรมชาติในการประมวลผลความจำของคนเรา ทั้ง Recognize และ Recall นั้น มีข้อดีข้อเสียต่างกันอย่างไร

6. Learning Curve
การเรียนรู้ของมนุษย์ เป็นปรกติที่จะเกิดข้อผิดพลาดในคราวแรกๆด้วยความไม่รู้ หรือไม่เคยชิน  เวลาที่เกิดการเรียนรู้ของใหม่ หรือวิธีใหม่ๆที่ใช้กับของเดิมๆ  Learning Curve จึงออกสตาร์ทอย่างช้าๆ ไปพร้อมๆกับความเอ๋อเป๋อเหลอที่จะเกิดขึ้น  ข้อนี้ก็เป็นอีกข้อที่นักพัฒนามักจะละเลย  เพราะมักจะคิดว่า ของมันดีนะ(แหงล่ะ ก็ทำเอง) ถ้าใครๆได้ใช้แล้วจะติดใจ (เข้าข้างตัวเองสุดๆ)  และลืมไปว่า คนอื่นๆไม่ใช่ตะเองนะ
ทำให้เกิดระบบ หรือ Application ที่ต้องใช้เวลาเรียนรู้อย่างมาก (หรือใช้เวลาเรียนรู้อย่างมากแล้ว แต่ก็ยังไม่เข้าใจมันอยู่ดี) เต็มตลาดทั่วโลกไปหมด

 

 

 

 

ที่มา :    http://www.chaiwbi.com/501/5101.html

            http://iamia.wordpress.com/2008/03/20/human-limitation/

 

 

 

 

 

การออกแบบอินเตอร์เฟสที่เกี่ยวข้องกับศักยภาพของทั้งมนุษย์

ปัจจุบันเว็บไซต์เป็นสื่อที่ได้มีการประยุกต์ใช้ในงานด้านต่างๆมากมาย ทั้งใช้สำหรับเผยแพร่ข้อมูลความรู้ (wikipedia.org) โปรโมตสินค้าและบริการ หรือแม้การทั้งใช้เพื่อใช้เพื่อแสดงความเป็นตัวตนให้โลกได้รับรู้(Blog ต่างๆ)

การออกแบบเว็บไซต์(Web Design)ที่ดี ไม่ใช่แค่ออกแบบมาให้ดูดีเท่านั้น แต่เมื่อพูดถึงเรื่องของการออกแบบเว็บไซต์จะประกอบไปด้วย 3 องค์ประกอบหลักที่ไม่เกี่ยวกับเรื่องทางด้านเทคนิค(non-technical) ได้แก่ การออกแบบความสวยงาม(Aesthetic Design) การออกแบบข้อมูล(Information Design) และการออกแบบอินเตอร์เฟส(Interface Design)

การออกแบบความสวยงาม(Aesthetic Design)     
ความสวยงามของเว็บไซต์นั้นเป็นสิ่งแรกที่ Audience จะสัมผัสได้เมื่อเข้ามายังเว็บไซต์นั้นๆ แต่เรื่องของความสวยงามจัดเป็นเรื่องความชอบส่วนบุคคล ดังนั้นนอกจากจะต้องออกแบบให้สวยแล้วยังต้องออกแบบให้เว็บไซต์มีเอกลักษณ์(identity)ของตัวเองด้วย เพื่อให้ Audience เมื่อพบเห็นหน้าเว็บไซต์ที่เป็นรูปแบบนี้เมื่อไหร่ สามารถบอกได้ทันที่ว่าเป็นเว็บไซต์ของเรา

การออกแบบข้อมูล(Information Design)
ข้อมูลถือเป็นองค์ประกอบสำคัญสำหรับเว็บไซต์ ดังนั้นจึงควรได้รับการออกแบบด้วย โดยเว็บไซต์ที่มีขนาดใหญ่ จะมีความท้าทาย(Challenge) ในเรื่องของการออกแบบข้อมูลอยู่ที่การค้นหา(Search)ข้อมูล เพราะเว็บไซต์ที่มีข้อมูลมากมาย Audience จะไม่สามารถหาข้อมูลที่ต้องการพบได้ง่ายนัก ส่วนเว็บไซต์ที่มีขนาดกลางถึงขนาดย่อมนั้น ความท้าทายจะอยู่ที่เรื่องของการดำเนินการ(Processing)กับข้อมูล ทั้งเรื่องของการจัดรูปแบบ(format)ของข้อมูลในหน้า(Page)ต่างๆของเว็บไซต์ให้เหมาะสม เพราะ Audience จะมีพฤติกรรมในการดูข้อมูลบนหน้าจอแบบผ่านๆ ไม่ได้ดูข้อมูลทั้งหมดที่มีอยู่ เพราะฉะนั้นจึงจะต้องทำการออกแบบข้อมูลให้มีจุดเด่น เพื่อดึงสายตาของ Audience ไปยังข้อมูลที่เราต้องการจะนำเสนอ ยกตัวอย่าเช่นการมี หัวข้อหลัก(Heading) หัวข้อย่อย(Subheading) การจัดย่อหน้า(Paragraph) ฯลฯ แต่ข้อมูลของเว็บไซต์ไม่ได้จำกัดอยู่เพียงแค่บนหน้าเว็บเพจเพียงหน้าเดียว ดังนั้นเรื่องของ ลิงค์(Link) และเมนู(Menu)ต่างๆจึงเป็นอีกเรื่องหนึ่งที่ต้องคำนึงถึง เพื่อให้การเข้าถึงข้อมูลของ Audience เป็นไปได้อย่างมีประสิทธิภาพมากที่สุด

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

หลักการทำงาน
คือ การที่จะโอนย้ายข้อมูลทุกตัวนั้นจะต้องมีแหล่งที่ส่งข้อมูล และแหล่งที่รับข้อมูลสำหรับขบวนการเหล่านั้น จะมีส่วนที่สำคัญกว่า ข้อมูลนั้นเป็น แอดเดรสหรือว่าเป็นดาต้า จะส่งไปยังจุดไหน และจะส่งเมื่อไร การทำงานเหล่านี้โดยทั่วๆไป จะต้องมีสัญญาณ ในการตรวจสอบอุปกรณ์ว่าพร้อมที่จะส่ง/รับข้อมูล หรือยังก่อนเสมอ เนื่องจากจุดที่ส่งและรับ ข้อมูล จะต้องมีสัญญาณตรวจสอบความพร้อมเสมอเพื่อที่จะให้ข้อมูลที่เราใช้งานนั้นๆ เป็นระเบียบ ซึ่งจุดรับส่งคู่หนึ่งๆ อาจจะเป็นระหว่างซีพียูด้วยกัน หรือ ซีพียูกับหน่วยความจำ หรือ ซีพียูกับอุปกรณ์รอบข้าง หรือ ระหว่างอุปกรณ์รอบข้างด้วยกัน หรือ ระหว่างหน่วยความจำกับอุปกรณ์รอบข้าง ก็ได้ สำหรับข้อมูลที่โอนย้ายไปมานั้นจะอยู่ในลักษณะของเลขฐาน ขึ้นอยู่กับของระบบนั้นๆ ถ้าหากเป็นการต่อจากพอร์ตพีซีไม่ว่าจะเป็น Serial หรือ Parallel ในสัญญาณที่ส่งมาจะมีระบบแรงดันไฟฟ้า

หลักการออกแบบเว็บไซต์

การออกแบบเว็บไซต์ คำนึงถึงความเหมาะสมกับกลุ่มบุคคลเป้าหมายผู้ใช้และลักษณะของเว็บไซต์ ความสะดวกในการใช้งาน

องค์ประกอบของการออกแบบเว็บไซต์ ต้องคำนึงถึง

1. ความเรียบง่าย ได้แก่ มีรูปแบบที่เรียบง่าย ไม่ซับซ้อน และใช้งานได้สะดวก ไม่มีกราฟิกหรือตัวอักษรที่เคลื่อนไหวอยู่ตลอดเวลา ชนิดและสีของตัวอักษรไม่มากจนเกินไปทำให้วุ่นวาย
2. ความสม่ำเสมอ ได้แก่ ใช้รูปแบบเดียวกันตลอดทั้งเว็บไซต์ เช่น รูปแบบของหน้า สไตล์ของกราฟิก ระบบเนวิเกชันและโทนสี ควรมีความคล้ายคลึงกันตลอดทั้งเว็บไซต์
3. ความเป็นเอกลักษณ์ การออกแบบเว็บไซต์ควรคำนึงถึงลักษณะขององค์กร เพราะรูปแบบของเว็บไซต์จะสะท้อนถึงเอกลักษณ์และลักษณะขององค์กรนั้น ๆ เช่น ถ้าเป็นเว็บไซต์ของทาง ราชการ จะต้องดูน่าเชื่อถือไม่เหมือนสวนสนุก ฯลฯ

4. เนื้อหาที่มีประโยชน์ เนื้อหาเป็นสิ่งที่สำคัญที่สุดในเว็บไซต์ ดังนั้นควร จัดเตรียมเนื้อหาและข้อมูลที่ผู้ใช้ต้องการให้ถูกต้อง และสมบูรณ์ มีการปรับปรุงและเพิ่มเติมให้ทันเหตุการณ์อยู่เสมอ
เนื้อหาไม่ควรซ้ำกับเว็บไซต์อื่น จึงจะดึงดูดความสนใจ
5. ระบบเนวิเกชันที่ใช้งานง่าย ต้องออกแบบให้ผู้ใช้เข้าใจง่ายและใช้งานสะดวก ใช้กราฟิกที่สื่อความหมายร่วมกับคำอธิบายที่ชัดเจน มีรูปแบบและลำดับของรายการที่สม่ำเสมอ เช่น วางไว้ ตำแหน่งเดียวกันของทุกหน้า
6. ลักษณะที่น่าสนใจ หน้าตาของเว็บไซต์จะต้องมีความสัมพันธ์กับคุณภาพขององค์ประกอบต่างๆ เช่น คุณภาพของกราฟิกที่จะต้องสมบูรณ์ การใช้สี การใช้ตัวอักษรที่อ่านง่าย สบายตา การใช้โทนสีที่เข้ากัน ลักษณะหน้าตาที่น่าสนใจนั้นขึ้นอยู่กับความชอบของแต่ละบุคคล
7. การใช้งานอย่างไม่จำกัด ผู้ใช้ส่วนใหญ่สามารถเข้าถึงได้มากที่สุด เลือกใช้บราวเซอร์ชนิดใดก็ได้ในการเข้าถึงเนื้อหา สามารถแสดงผลได้ทุกระบบปฏิบัติการและความละเอียดหน้าจอต่างๆ กันอย่างไม่มีปัญหา เป็นลักษณะสำคัฐสำหรับผู้ใช้ที่มีจำนวนมาก
8. คุณภาพในการออกแบบ การออกแบบและเรียบเรียงเนื้อหาอย่างรอบคอบ สร้างความรู้สึกว่าเว็บไซต์มี….คุณภาพ ถูกต้อง และเชื่อถือได้
9. ระบบการใช้งานที่ถูกต้อง การใช้แบบฟอร์มสำหรับกรอกข้อมูลต้องสามารถกรอกได้จริง ใช้งานได้จริง ลิงค์ต่างๆ จะต้องเชื่อมโยงไปหน้าที่มีอยู่จริงและถูกต้อง ระบบการทำงานต่างๆ ในเว็บไซต์จะต้องมีความแน่นอนและทำหน้าที่ได้อย่างถูกต้อง

พื้นฐานในการออกแบบเว็บไซต์ที่ดี

1.มีเนื้อหาเป็นประโยชน์ ตรงกับที่ผู้ใช้ต้องการ

2.มีการปรับปรุงเพิ่มเติมเนื้อหา และพัฒนาเว็บไซต์อยู่เสมอ

3.ใช้เวลาในการดาวน์โหลดน้อย แสดงผลเร็ว ใช้งานที่สะดวก เข้าใจง่าย

โปรแกรมที่ใช้การสร้างเว็บไซต์

1.Macromedia Dreamweaver                                          2.Microsoft FrontPage

3.HomeSite                                                                          4.HotDog Pro

5.GoLive                                                                              6.NetObjects Fusion

7.CoffeeCup

ข้อผิดพลาดในการออกแบบเว็บไซต์

1. ใช้โครงสร้างหน้าเว็บเป็นระบบเฟรม การใช้กรอบ (Frame) เนื่องจากการใช้เฟรมมักจะมีปัญหาในการที่จะสร้างเว็บเพจ จึงไม่ควรนำมาใช้ แต่ในปัจจุบันขีดความสามารถของโปรแกรมที่ใช้สร้างเว็บเพจมากขึ้น ทำให้ปัญหาในข้อนี้หมดไป 2. ใช้เทคโนโลยีขั้นสูงโดยไม่จำเป็น   ความเร็วในการโหลดเว็บเพจ สิ่งที่ควรคำนึงถึงในการทำเว็บเพจอีกสิ่งหนึ่ง คือ ความเร็วในการโหลดเว็บเพจ ผู้เข้าชมไม่ควรใช้เวลานานเกินสมควร ในการรอให้โหลดเว็บเพจโดยเฉพาะอย่างยิ่งในหน้าแรกของการโหลด เพราะมีหลายครั้งผู้เข้าเยี่ยมชมจะหยุดการโหลด เว็บเพจและเปลี่ยนไปหาข้อมูลจากที่อื่น ซึ่งถือเป็นความผิดพลาดใหญ่หลวงของผู้ทำเว็บเพจ ปัจจัยที่จะกระทบต่อความเร็วได้แก่ ขนาดของรูปภาพที่ใช้, จำนวนของรูปภาพที่ใช้ และปริมาณของตัวอักษรที่อยู่บนหน้านั้น ๆ อนึ่งความเร็วในการโหลดเว็บเพจ อาจอยู่ที่ Server ที่เว็บเพจนั้นว่ามีความสามารถสูงเพียงใด ขนาดของรูปภาพที่ใช้ควรจะมีขนาดไม่เกิน 20 – 30 Kb. ต่อรูป ส่วนประกอบของรูปนั้นควรเป็น GIF หรือ JPEG ถ้าขนาดของรูปภาพใหญ่เกินไป อาจตัดแบ่งให้ขนาดเล็กลงและใช้ตารางช่วยในการจัดรูปภาพนั้น ๆ แต่ก็ไม่ควรมีจำนวนมากเกินไป เพราะนั่นก็เป็นสาเหตุหนึ่งที่ลดความเร็วของการโหลดเว็บเพจ 3. ใช้ตัวหนังสือหรือภาพที่เคลื่อนไหวตลอดเวลา การใช้เทคนิคต่าง ๆ มากเกินความจำเป็น เช่น ภาพเคลื่อนไหว หรือตัวอักษรวิ่ง (Marquees) นอกจากนี้มีความจำเป็นต้องใช้ประกอบเนื้อหา เนื่องจากเทคนิคเหล่านี้จะรบกวนการอ่านได้  4. มีที่อยู่เว็บไซต์ที่ซับซ้อน (URL) ยากต่อการจดจำ/พิมพ์ การใช้ยูอาร์แอลที่ซับซ้อนหรือยาวเกินไป ซึ่งจะไม่สะดวกต่อการพิมพ์ลงในช่องเเอดเดรส (Address) 5. ไม่มีการแสดงชื่อและที่อยู่ของเว็บไซต์ในหน้าเว็บเพจ 6. มีความยาวของหน้ามากเกินไป   หน้าจอที่เป็นลักษณะการเลื่อนขึ้นลง (Scrolling) เนื่องจากมีเนื้อหายาวเกินไปทำให้ผู้ใช้ส่วนใหญ่ไม่ดูเนื้อหาที่อยู่ด้านลง เพราะฉะนั้นจึงควรเสนอเนื้อหาที่มีความสำคัญไว้ ด้านบนสุดในแต่ละหน้า 7. ขาดระบบเนวิเกชันที่มีประสิทธิภาพ เช่น แผนผังของเว็บไซต์หรือปุ่มควบคุมเส้นทาง ไม่ว่าจะเป็นเดินหน้า ถอยหลัง รวมทั้งการใช้เครื่องมือสืบค้น (Search Engine) ช่วยในการค้นหาหน้าที่ต้องการ และ การมีหน้าที่ไม่มีการเชื่อมโยง (Orphan Page) ทำให้ผู้ใช้ไม่รู้จะทำอย่างไร ต่อไป อย่างน้อยในแต่ละหน้า ควรจะทำตัวเชื่อมโยงที่กลับไปยัง โฮมเพจ(หน้าแรกของเว็บไซต์) ได้ 8. ใช้สีของลิงค์ไม่เหมาะสม สีของตัวเชื่อมโยงที่ไม่เป็นมาตรฐาน ทำให้เกิดความสับสนได้  9. ข้อมูลเก่าไม่มีการปรับปรุงให้ทันสมัย   10. เว็บเพจแสดงผลช้า ใช้เวลาดาวน์โหลดนาน ผู้ใช้จะเกิดอาการเบื่อหน่ายและเลิกให้ความสนใจกับเว็บที่ใช้เวลาในการแสดงผลนาน สาเหตุเนื่องมาจาก การใส่รูปภาพขนาดใหญ่ ภาพเคลื่อนไหว ตัวอักษรวิ่ง และมีมากเกินไปต่อเอกสารหน้าเว็บ

อย่าลืมข้อจำกัดของมนุษย์ เวลาออกแบบ

เวลาออกแบบเพื่ออะไร เราก็ต้องเข้าใจในสิ่งนั้นๆ ข้อดีข้อด้อยของสิ่งนั้นๆด้วยเช่น  เวลาเราออกแบบส้วมแมว  เราก็ต้องไม่ลืมว่า แมวนั้น พูดไม่ได้  และส่วนใหญ่  กดชักโครกไม่เป็น  เวลาเราออกแบบกระถางให้ดอกบัว  เราก็ต้องไม่ลืมว่า  ดอกบัวต้องอยู่ในน้ำตลอดเวลา และมีที่พอสมควรให้รากหายใจได้ เจริญเติบโตได้  เวลาเราออกแบบสิ่งใดๆให้คน  (ซึ่งเป็นส่วนใหญ่ในสิ่งทั้งหมดที่เราออกแบบในโลกนี้  )เราก็ต้องเข้าใจคนเหมือนกัน  สิ่งหนึ่งที่เป็นพื้นฐานในความเข้าใจมนุษย์  นอกจากที่เราจะเข้าใจความสามารถ  ศักยภาพของมนุษย์แล้วนั้นก็คือ  การเข้าใจข้อจำกัดในความสามารถของมนุษย์ในเรื่องต่างๆ  เช่น  ถ้าเป็นเรื่องการออกแบบบันได  เราก็ต้องมีความรู้ความเข้าใจว่า  มนุษย์ก้าวในแนวตั้งได้สบายที่สุดอยู่ในระยะเท่าใด  ถ้าออกแบบโต๊ะทำงาน  เราก็ต้องมีความรู้ความเข้าใจว่า  คนปรกติ  (ที่เป็นผู้ใช้ของเรา)  จะรู้สึกวางแขนทำงานได้สบายที่สุดช่วงระยะใดถ้าเป็นโต๊ะคอมพิวเตอร์ จะวางแขนบนแป้นพิมพ์ได้องศาที่ดีที่สุด โต๊ะต้องสูงขนาดไหน  ถ้าในเรื่อง Application, Software  ก็จะมีข้อจำกัดที่ควรรู้มากมาย ทั้งนี้ ขึ้นอยู่กับกลุ่มผู้ใช้งานด้วย  ซึ่งจะมีข้อจำกัดและความสามารถเฉพาะแตกต่างกันไป

แต่โดยทั่วไป เวลาเราออกแบบ  ต้องไม่ลืมว่า เราออกแบบให้มนุษย์ใช้

1. มนุษย์ คือมนุษย์
คือผู้ที่สามารถสร้างข้อผิดพลาดได้ตลอดเวลา  เป็นสิ่งที่แตกต่างกับคอมพิวเตอร์อย่างเห็นได้ชัด
ระบบคอมพิวเตอร์ ถ้าเขียนโค้ดถูก ปราศจากบั๊ก ถ้ายังอยู่ใน environment เดิม มันก็ยังทำงานได้โดยปราศจากบั๊กตลอดไป  แต่กับคนแล้ว ไม่รู้ว่า วันดีคืนดีวันไหนจะเกิดเฮี้ยน  อาจจะนอนดึก ง่วงนอน สมาธิไม่ดี แม่ตี สอบตก แชทเพลิน  มีร้อยแปดพันเก้าอย่างที่ทำให้มนุษย์ทำอะไรหละหลวม ผิดพลาดได้ตลอด ฉะนั้น ถ้าระบบยิ่งมีบั๊ก มีข้อผิดพลาด หรือ workflow หละหลวมให้ผิดง่ายๆ  ก็ยิ่งส่งเสริมให้เกิดความผิดพลาดได้ง่ายๆ

*อย่าสรุปว่า ที่เกิดความผิดพลาดเป็นปัญหาของคนๆนั้นเสมอๆ  เพราะระบบอาจไม่ดีเอง หรือไม่ได้คิดถึง flow ที่จะรองรับความผิดพลาดทั่วไปเอาไว้  ให้แก้ที่ระบบก่อน จะง่ายกว่าแก้ที่คนประมาณสามล้านเท่า

2. ความเร็วของการคิด
สมองคนเราใช้เวลาประมาณ 1 ใน 10 วินาทีในการระลึกจำได้ในสิ่งๆหนึ่งๆบนหน้าจอ  และราวๆเกือบๆ 1 ใน 4 วินาที ในการเปลี่ยนความสนใจจากวัตถุหนึ่งไปยังวัตถุอื่นในหน้าจอเดียวกัน  และประมาณ 1.25 วินาทีในการตัดสินใจเลือก 1 ใน 2 ตัวเลือกที่ปรากฏขึ้นพร้อมๆกัน  (Olson and Olson, 1990)

* ถึงแม้ว่าหน่วยประมวลผลของคนเราจะเป็นหน่วยวินาที  มันก็ไม่ได้แปลว่าเร็วอย่างที่หลายๆคนเข้าใจ

3. ตาไปไวกว่ามือเสมอ
การพิมพ์ 1 ตัวอักษร ใช้เวลาโดยทั่วไป 0.1 – 1.25 วินาที  การคลิกเมาส์หนึ่งครั้ง ใช้เวลาเท่ากับการพิมพ์ 1 ตัวอักษร  ในขณะที่การเลื่อนเมาส์บนหน้าจอใช้เวลาเฉลี่ย 1.5 วินาที  (ทั้งนี้ การเลื่อนเมาส์เพื่อคลิกหรือหยุดในตำแหน่งที่ต้องการ ขึ้นอยู่กับ Fitt’s Law  ซึ่งว่าด้วยความสัมพันธ์ระหว่างขนาดของวัตถุและระยะทางที่จะไปยังวัตถุนั้นๆ  ถ้าวัตถุใหญ่และระยะทางสั้น ก็จะใช้เวลาน้อย  ในขณะที่ถ้าวัตถุเล็กแล้วระยะทางยังมากอีก ก็ใช้เวลามากขึ้นตามลำดับ)  การเปลี่ยนมือระหว่างคีย์บอร์ดกับเมาส์ ก็ใช้เวลาอีกประมาณ 0.36 วินาที
เมื่อดูแต่ละ action แล้วอาจจะไม่เยอะ แต่คนเราไม่ได้ทำ action เดียวเดี่ยวๆกับหน้าเว็บ 1 หน้า หรือ หน้า Interfaceใดๆ 1 การแสดงผล  เราทำทั้งระลึก ตัดสินใจ มือไป มือเลื่อน คลิก เปลี่ยนตำแหน่งมือ
รวมๆแล้ว เราใช้เวลาไม่น้อยต่อการทำงานเพียง task เดียว

4. Small Number
นักจิตวิทยานามกระเดื่อง George Miller’s ได้ให้กำเนิดทฤษฎี 7 บวกลบ 2 เอาไว้  ซึ่งแสดงถึงหน่วย หรือชุดข้อมูล ที่คนปรกติคนหนึ่ง พอจะจำได้พร้อมๆกัน  ด้วยความจำส่วนชั่วคราว (Short-term Memory)

ในยุคสมัยการพัฒนาช่วงหนึ่ง จึงได้มีการเข้มงวดเกี่ยวกับกฎนี้อย่างมาก  หลายๆคนได้ตีความกฏนี้ว่า ในหน้าเว็บไม่ควรจะมีเมนูเกิน 7 เมนู  อย่างไรก็ตาม กฏนี้ก็มีข้อยกเว้นไปตามปัจจัยและสถานการณ์ในการใช้งาน  แต่อย่างน้อย กฎนี้ก็ทำให้เราทราบว่า  คนเราไม่ได้จำอะไรได้มากมายนักหรอก อย่าหวังอะไรอย่างนั้นเวลาทำระบบ

5. จำหน้าได้ แต่ชื่อหนีไปไหนแล้วไม่รู้
โดยทั่วไป คนเราจะมีประสิทธิภาพในการ “ระลึก” ได้มากกว่าการ “ขุดความจำ” ขึ้นมาโดยไม่มีตัวช่วย
ถ้าเราเจอคนๆหนึ่งที่ไม่ได้เจอมาเป็นสิบปี ก็มีความเป็นไปได้สูงว่า เราจำชื่อเขาไม่ได้ ถ้าเทียบการที่ให้เอารายชื่อ ตัวเลือกหลอกปนคำตอบจริงมาให้เลือก เรามักจะตอบได้ถูกว่า อ๋อ ไอ้หมอนี่ชื่อนี้นี่เอง
มากกว่าการที่ให้เวลาเรานั่งระลึกชาติตามลำพัง วันหลังจะพูดถึงเรื่องระลึก(Recognize) กับการขุดความจำ(Recall)  ในรายละเอียดทีหลังแล้วกัน (ถ้าไม่ลืม)  ในการใช้ระบบที่เกี่ยวกับคอมพิวเตอร์ยุคแรกๆ
จึงเป็นเรื่องที่สาหัสสากรรจ์สำหรับคนความจำปลาทอง เพราะต้องจำชุดคำสั่งทั้งหมดในการใช้งานให้ได้ เพื่อการใช้งานระบบอย่างมีประสิทธิภาพ ตอนนั้นก็ช่างมันเถิด เพราะยุคนั้น ยังเป็นการเริ่มต้นของการใช้คอมพิวเตอร์อยู่ แต่มาถึงค.ศ. พ.ศ.นี้แล้ว ใครยังทำระบบอย่างนั้นอยู่ ก็มีทีท่าว่าจะขายไม่ออก หมายังไม่มอง(เพราะอ่านไม่ออก) ได้ง่ายๆ ไม่ใช่ว่าการใช้ชุดคำสั่งไม่ดีเสมอไป แต่เราต้องไม่ลืมด้วยว่า ธรรมชาติในการประมวลผลความจำของคนเรา ทั้ง Recognize และ Recall นั้น มีข้อดีข้อเสียต่างกันอย่างไร

6. Learning Curve
การเรียนรู้ของมนุษย์ เป็นปรกติที่จะเกิดข้อผิดพลาดในคราวแรกๆด้วยความไม่รู้ หรือไม่เคยชิน  เวลาที่เกิดการเรียนรู้ของใหม่ หรือวิธีใหม่ๆที่ใช้กับของเดิมๆ  Learning Curve จึงออกสตาร์ทอย่างช้าๆ ไปพร้อมๆกับความเอ๋อเป๋อเหลอที่จะเกิดขึ้น  ข้อนี้ก็เป็นอีกข้อที่นักพัฒนามักจะละเลย  เพราะมักจะคิดว่า ของมันดีนะ(แหงล่ะ ก็ทำเอง) ถ้าใครๆได้ใช้แล้วจะติดใจ (เข้าข้างตัวเองสุดๆ)  และลืมไปว่า คนอื่นๆไม่ใช่ตะเองนะ
ทำให้เกิดระบบ หรือ Application ที่ต้องใช้เวลาเรียนรู้อย่างมาก (หรือใช้เวลาเรียนรู้อย่างมากแล้ว แต่ก็ยังไม่เข้าใจมันอยู่ดี) เต็มตลาดทั่วโลกไปหมด

 

 

 

 

ที่มา :    http://www.chaiwbi.com/501/5101.html

            http://iamia.wordpress.com/2008/03/20/human-limitation/

 

 

 

 

 

การออกแบบอินเตอร์เฟสที่เกี่ยวข้องกับศักยภาพของทั้งมนุษย์

ปัจจุบันเว็บไซต์เป็นสื่อที่ได้มีการประยุกต์ใช้ในงานด้านต่างๆมากมาย ทั้งใช้สำหรับเผยแพร่ข้อมูลความรู้ (wikipedia.org) โปรโมตสินค้าและบริการ หรือแม้การทั้งใช้เพื่อใช้เพื่อแสดงความเป็นตัวตนให้โลกได้รับรู้(Blog ต่างๆ)

การออกแบบเว็บไซต์(Web Design)ที่ดี ไม่ใช่แค่ออกแบบมาให้ดูดีเท่านั้น แต่เมื่อพูดถึงเรื่องของการออกแบบเว็บไซต์จะประกอบไปด้วย 3 องค์ประกอบหลักที่ไม่เกี่ยวกับเรื่องทางด้านเทคนิค(non-technical) ได้แก่ การออกแบบความสวยงาม(Aesthetic Design) การออกแบบข้อมูล(Information Design) และการออกแบบอินเตอร์เฟส(Interface Design)

การออกแบบความสวยงาม(Aesthetic Design)     
ความสวยงามของเว็บไซต์นั้นเป็นสิ่งแรกที่ Audience จะสัมผัสได้เมื่อเข้ามายังเว็บไซต์นั้นๆ แต่เรื่องของความสวยงามจัดเป็นเรื่องความชอบส่วนบุคคล ดังนั้นนอกจากจะต้องออกแบบให้สวยแล้วยังต้องออกแบบให้เว็บไซต์มีเอกลักษณ์(identity)ของตัวเองด้วย เพื่อให้ Audience เมื่อพบเห็นหน้าเว็บไซต์ที่เป็นรูปแบบนี้เมื่อไหร่ สามารถบอกได้ทันที่ว่าเป็นเว็บไซต์ของเรา

การออกแบบข้อมูล(Information Design)
ข้อมูลถือเป็นองค์ประกอบสำคัญสำหรับเว็บไซต์ ดังนั้นจึงควรได้รับการออกแบบด้วย โดยเว็บไซต์ที่มีขนาดใหญ่ จะมีความท้าทาย(Challenge) ในเรื่องของการออกแบบข้อมูลอยู่ที่การค้นหา(Search)ข้อมูล เพราะเว็บไซต์ที่มีข้อมูลมากมาย Audience จะไม่สามารถหาข้อมูลที่ต้องการพบได้ง่ายนัก ส่วนเว็บไซต์ที่มีขนาดกลางถึงขนาดย่อมนั้น ความท้าทายจะอยู่ที่เรื่องของการดำเนินการ(Processing)กับข้อมูล ทั้งเรื่องของการจัดรูปแบบ(format)ของข้อมูลในหน้า(Page)ต่างๆของเว็บไซต์ให้เหมาะสม เพราะ Audience จะมีพฤติกรรมในการดูข้อมูลบนหน้าจอแบบผ่านๆ ไม่ได้ดูข้อมูลทั้งหมดที่มีอยู่ เพราะฉะนั้นจึงจะต้องทำการออกแบบข้อมูลให้มีจุดเด่น เพื่อดึงสายตาของ Audience ไปยังข้อมูลที่เราต้องการจะนำเสนอ ยกตัวอย่าเช่นการมี หัวข้อหลัก(Heading) หัวข้อย่อย(Subheading) การจัดย่อหน้า(Paragraph) ฯลฯ แต่ข้อมูลของเว็บไซต์ไม่ได้จำกัดอยู่เพียงแค่บนหน้าเว็บเพจเพียงหน้าเดียว ดังนั้นเรื่องของ ลิงค์(Link) และเมนู(Menu)ต่างๆจึงเป็นอีกเรื่องหนึ่งที่ต้องคำนึงถึง เพื่อให้การเข้าถึงข้อมูลของ Audience เป็นไปได้อย่างมีประสิทธิภาพมากที่สุด

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

หลักการทำงาน
คือ การที่จะโอนย้ายข้อมูลทุกตัวนั้นจะต้องมีแหล่งที่ส่งข้อมูล และแหล่งที่รับข้อมูลสำหรับขบวนการเหล่านั้น จะมีส่วนที่สำคัญกว่า ข้อมูลนั้นเป็น แอดเดรสหรือว่าเป็นดาต้า จะส่งไปยังจุดไหน และจะส่งเมื่อไร การทำงานเหล่านี้โดยทั่วๆไป จะต้องมีสัญญาณ ในการตรวจสอบอุปกรณ์ว่าพร้อมที่จะส่ง/รับข้อมูล หรือยังก่อนเสมอ เนื่องจากจุดที่ส่งและรับ ข้อมูล จะต้องมีสัญญาณตรวจสอบความพร้อมเสมอเพื่อที่จะให้ข้อมูลที่เราใช้งานนั้นๆ เป็นระเบียบ ซึ่งจุดรับส่งคู่หนึ่งๆ อาจจะเป็นระหว่างซีพียูด้วยกัน หรือ ซีพียูกับหน่วยความจำ หรือ ซีพียูกับอุปกรณ์รอบข้าง หรือ ระหว่างอุปกรณ์รอบข้างด้วยกัน หรือ ระหว่างหน่วยความจำกับอุปกรณ์รอบข้าง ก็ได้ สำหรับข้อมูลที่โอนย้ายไปมานั้นจะอยู่ในลักษณะของเลขฐาน ขึ้นอยู่กับของระบบนั้นๆ ถ้าหากเป็นการต่อจากพอร์ตพีซีไม่ว่าจะเป็น Serial หรือ Parallel ในสัญญาณที่ส่งมาจะมีระบบแรงดันไฟฟ้า

หลักการออกแบบเว็บไซต์

การออกแบบเว็บไซต์ คำนึงถึงความเหมาะสมกับกลุ่มบุคคลเป้าหมายผู้ใช้และลักษณะของเว็บไซต์ ความสะดวกในการใช้งาน

องค์ประกอบของการออกแบบเว็บไซต์ ต้องคำนึงถึง

1. ความเรียบง่าย ได้แก่ มีรูปแบบที่เรียบง่าย ไม่ซับซ้อน และใช้งานได้สะดวก ไม่มีกราฟิกหรือตัวอักษรที่เคลื่อนไหวอยู่ตลอดเวลา ชนิดและสีของตัวอักษรไม่มากจนเกินไปทำให้วุ่นวาย
2. ความสม่ำเสมอ ได้แก่ ใช้รูปแบบเดียวกันตลอดทั้งเว็บไซต์ เช่น รูปแบบของหน้า สไตล์ของกราฟิก ระบบเนวิเกชันและโทนสี ควรมีความคล้ายคลึงกันตลอดทั้งเว็บไซต์
3. ความเป็นเอกลักษณ์ การออกแบบเว็บไซต์ควรคำนึงถึงลักษณะขององค์กร เพราะรูปแบบของเว็บไซต์จะสะท้อนถึงเอกลักษณ์และลักษณะขององค์กรนั้น ๆ เช่น ถ้าเป็นเว็บไซต์ของทาง ราชการ จะต้องดูน่าเชื่อถือไม่เหมือนสวนสนุก ฯลฯ

4. เนื้อหาที่มีประโยชน์ เนื้อหาเป็นสิ่งที่สำคัญที่สุดในเว็บไซต์ ดังนั้นควร จัดเตรียมเนื้อหาและข้อมูลที่ผู้ใช้ต้องการให้ถูกต้อง และสมบูรณ์ มีการปรับปรุงและเพิ่มเติมให้ทันเหตุการณ์อยู่เสมอ
เนื้อหาไม่ควรซ้ำกับเว็บไซต์อื่น จึงจะดึงดูดความสนใจ
5. ระบบเนวิเกชันที่ใช้งานง่าย ต้องออกแบบให้ผู้ใช้เข้าใจง่ายและใช้งานสะดวก ใช้กราฟิกที่สื่อความหมายร่วมกับคำอธิบายที่ชัดเจน มีรูปแบบและลำดับของรายการที่สม่ำเสมอ เช่น วางไว้ ตำแหน่งเดียวกันของทุกหน้า
6. ลักษณะที่น่าสนใจ หน้าตาของเว็บไซต์จะต้องมีความสัมพันธ์กับคุณภาพขององค์ประกอบต่างๆ เช่น คุณภาพของกราฟิกที่จะต้องสมบูรณ์ การใช้สี การใช้ตัวอักษรที่อ่านง่าย สบายตา การใช้โทนสีที่เข้ากัน ลักษณะหน้าตาที่น่าสนใจนั้นขึ้นอยู่กับความชอบของแต่ละบุคคล
7. การใช้งานอย่างไม่จำกัด ผู้ใช้ส่วนใหญ่สามารถเข้าถึงได้มากที่สุด เลือกใช้บราวเซอร์ชนิดใดก็ได้ในการเข้าถึงเนื้อหา สามารถแสดงผลได้ทุกระบบปฏิบัติการและความละเอียดหน้าจอต่างๆ กันอย่างไม่มีปัญหา เป็นลักษณะสำคัฐสำหรับผู้ใช้ที่มีจำนวนมาก
8. คุณภาพในการออกแบบ การออกแบบและเรียบเรียงเนื้อหาอย่างรอบคอบ สร้างความรู้สึกว่าเว็บไซต์มี….คุณภาพ ถูกต้อง และเชื่อถือได้
9. ระบบการใช้งานที่ถูกต้อง การใช้แบบฟอร์มสำหรับกรอกข้อมูลต้องสามารถกรอกได้จริง ใช้งานได้จริง ลิงค์ต่างๆ จะต้องเชื่อมโยงไปหน้าที่มีอยู่จริงและถูกต้อง ระบบการทำงานต่างๆ ในเว็บไซต์จะต้องมีความแน่นอนและทำหน้าที่ได้อย่างถูกต้อง

พื้นฐานในการออกแบบเว็บไซต์ที่ดี

1.มีเนื้อหาเป็นประโยชน์ ตรงกับที่ผู้ใช้ต้องการ

2.มีการปรับปรุงเพิ่มเติมเนื้อหา และพัฒนาเว็บไซต์อยู่เสมอ

3.ใช้เวลาในการดาวน์โหลดน้อย แสดงผลเร็ว ใช้งานที่สะดวก เข้าใจง่าย

โปรแกรมที่ใช้การสร้างเว็บไซต์

1.Macromedia Dreamweaver                                          2.Microsoft FrontPage

3.HomeSite                                                                          4.HotDog Pro

5.GoLive                                                                              6.NetObjects Fusion

7.CoffeeCup

ข้อผิดพลาดในการออกแบบเว็บไซต์

1. ใช้โครงสร้างหน้าเว็บเป็นระบบเฟรม การใช้กรอบ (Frame) เนื่องจากการใช้เฟรมมักจะมีปัญหาในการที่จะสร้างเว็บเพจ จึงไม่ควรนำมาใช้ แต่ในปัจจุบันขีดความสามารถของโปรแกรมที่ใช้สร้างเว็บเพจมากขึ้น ทำให้ปัญหาในข้อนี้หมดไป 2. ใช้เทคโนโลยีขั้นสูงโดยไม่จำเป็น   ความเร็วในการโหลดเว็บเพจ สิ่งที่ควรคำนึงถึงในการทำเว็บเพจอีกสิ่งหนึ่ง คือ ความเร็วในการโหลดเว็บเพจ ผู้เข้าชมไม่ควรใช้เวลานานเกินสมควร ในการรอให้โหลดเว็บเพจโดยเฉพาะอย่างยิ่งในหน้าแรกของการโหลด เพราะมีหลายครั้งผู้เข้าเยี่ยมชมจะหยุดการโหลด เว็บเพจและเปลี่ยนไปหาข้อมูลจากที่อื่น ซึ่งถือเป็นความผิดพลาดใหญ่หลวงของผู้ทำเว็บเพจ ปัจจัยที่จะกระทบต่อความเร็วได้แก่ ขนาดของรูปภาพที่ใช้, จำนวนของรูปภาพที่ใช้ และปริมาณของตัวอักษรที่อยู่บนหน้านั้น ๆ อนึ่งความเร็วในการโหลดเว็บเพจ อาจอยู่ที่ Server ที่เว็บเพจนั้นว่ามีความสามารถสูงเพียงใด ขนาดของรูปภาพที่ใช้ควรจะมีขนาดไม่เกิน 20 – 30 Kb. ต่อรูป ส่วนประกอบของรูปนั้นควรเป็น GIF หรือ JPEG ถ้าขนาดของรูปภาพใหญ่เกินไป อาจตัดแบ่งให้ขนาดเล็กลงและใช้ตารางช่วยในการจัดรูปภาพนั้น ๆ แต่ก็ไม่ควรมีจำนวนมากเกินไป เพราะนั่นก็เป็นสาเหตุหนึ่งที่ลดความเร็วของการโหลดเว็บเพจ 3. ใช้ตัวหนังสือหรือภาพที่เคลื่อนไหวตลอดเวลา การใช้เทคนิคต่าง ๆ มากเกินความจำเป็น เช่น ภาพเคลื่อนไหว หรือตัวอักษรวิ่ง (Marquees) นอกจากนี้มีความจำเป็นต้องใช้ประกอบเนื้อหา เนื่องจากเทคนิคเหล่านี้จะรบกวนการอ่านได้  4. มีที่อยู่เว็บไซต์ที่ซับซ้อน (URL) ยากต่อการจดจำ/พิมพ์ การใช้ยูอาร์แอลที่ซับซ้อนหรือยาวเกินไป ซึ่งจะไม่สะดวกต่อการพิมพ์ลงในช่องเเอดเดรส (Address) 5. ไม่มีการแสดงชื่อและที่อยู่ของเว็บไซต์ในหน้าเว็บเพจ 6. มีความยาวของหน้ามากเกินไป   หน้าจอที่เป็นลักษณะการเลื่อนขึ้นลง (Scrolling) เนื่องจากมีเนื้อหายาวเกินไปทำให้ผู้ใช้ส่วนใหญ่ไม่ดูเนื้อหาที่อยู่ด้านลง เพราะฉะนั้นจึงควรเสนอเนื้อหาที่มีความสำคัญไว้ ด้านบนสุดในแต่ละหน้า 7. ขาดระบบเนวิเกชันที่มีประสิทธิภาพ เช่น แผนผังของเว็บไซต์หรือปุ่มควบคุมเส้นทาง ไม่ว่าจะเป็นเดินหน้า ถอยหลัง รวมทั้งการใช้เครื่องมือสืบค้น (Search Engine) ช่วยในการค้นหาหน้าที่ต้องการ และ การมีหน้าที่ไม่มีการเชื่อมโยง (Orphan Page) ทำให้ผู้ใช้ไม่รู้จะทำอย่างไร ต่อไป อย่างน้อยในแต่ละหน้า ควรจะทำตัวเชื่อมโยงที่กลับไปยัง โฮมเพจ(หน้าแรกของเว็บไซต์) ได้ 8. ใช้สีของลิงค์ไม่เหมาะสม สีของตัวเชื่อมโยงที่ไม่เป็นมาตรฐาน ทำให้เกิดความสับสนได้  9. ข้อมูลเก่าไม่มีการปรับปรุงให้ทันสมัย   10. เว็บเพจแสดงผลช้า ใช้เวลาดาวน์โหลดนาน ผู้ใช้จะเกิดอาการเบื่อหน่ายและเลิกให้ความสนใจกับเว็บที่ใช้เวลาในการแสดงผลนาน สาเหตุเนื่องมาจาก การใส่รูปภาพขนาดใหญ่ ภาพเคลื่อนไหว ตัวอักษรวิ่ง และมีมากเกินไปต่อเอกสารหน้าเว็บ

อย่าลืมข้อจำกัดของมนุษย์ เวลาออกแบบ

เวลาออกแบบเพื่ออะไร เราก็ต้องเข้าใจในสิ่งนั้นๆ ข้อดีข้อด้อยของสิ่งนั้นๆด้วยเช่น  เวลาเราออกแบบส้วมแมว  เราก็ต้องไม่ลืมว่า แมวนั้น พูดไม่ได้  และส่วนใหญ่  กดชักโครกไม่เป็น  เวลาเราออกแบบกระถางให้ดอกบัว  เราก็ต้องไม่ลืมว่า  ดอกบัวต้องอยู่ในน้ำตลอดเวลา และมีที่พอสมควรให้รากหายใจได้ เจริญเติบโตได้  เวลาเราออกแบบสิ่งใดๆให้คน  (ซึ่งเป็นส่วนใหญ่ในสิ่งทั้งหมดที่เราออกแบบในโลกนี้  )เราก็ต้องเข้าใจคนเหมือนกัน  สิ่งหนึ่งที่เป็นพื้นฐานในความเข้าใจมนุษย์  นอกจากที่เราจะเข้าใจความสามารถ  ศักยภาพของมนุษย์แล้วนั้นก็คือ  การเข้าใจข้อจำกัดในความสามารถของมนุษย์ในเรื่องต่างๆ  เช่น  ถ้าเป็นเรื่องการออกแบบบันได  เราก็ต้องมีความรู้ความเข้าใจว่า  มนุษย์ก้าวในแนวตั้งได้สบายที่สุดอยู่ในระยะเท่าใด  ถ้าออกแบบโต๊ะทำงาน  เราก็ต้องมีความรู้ความเข้าใจว่า  คนปรกติ  (ที่เป็นผู้ใช้ของเรา)  จะรู้สึกวางแขนทำงานได้สบายที่สุดช่วงระยะใดถ้าเป็นโต๊ะคอมพิวเตอร์ จะวางแขนบนแป้นพิมพ์ได้องศาที่ดีที่สุด โต๊ะต้องสูงขนาดไหน  ถ้าในเรื่อง Application, Software  ก็จะมีข้อจำกัดที่ควรรู้มากมาย ทั้งนี้ ขึ้นอยู่กับกลุ่มผู้ใช้งานด้วย  ซึ่งจะมีข้อจำกัดและความสามารถเฉพาะแตกต่างกันไป

แต่โดยทั่วไป เวลาเราออกแบบ  ต้องไม่ลืมว่า เราออกแบบให้มนุษย์ใช้

1. มนุษย์ คือมนุษย์
คือผู้ที่สามารถสร้างข้อผิดพลาดได้ตลอดเวลา  เป็นสิ่งที่แตกต่างกับคอมพิวเตอร์อย่างเห็นได้ชัด
ระบบคอมพิวเตอร์ ถ้าเขียนโค้ดถูก ปราศจากบั๊ก ถ้ายังอยู่ใน environment เดิม มันก็ยังทำงานได้โดยปราศจากบั๊กตลอดไป  แต่กับคนแล้ว ไม่รู้ว่า วันดีคืนดีวันไหนจะเกิดเฮี้ยน  อาจจะนอนดึก ง่วงนอน สมาธิไม่ดี แม่ตี สอบตก แชทเพลิน  มีร้อยแปดพันเก้าอย่างที่ทำให้มนุษย์ทำอะไรหละหลวม ผิดพลาดได้ตลอด ฉะนั้น ถ้าระบบยิ่งมีบั๊ก มีข้อผิดพลาด หรือ workflow หละหลวมให้ผิดง่ายๆ  ก็ยิ่งส่งเสริมให้เกิดความผิดพลาดได้ง่ายๆ

*อย่าสรุปว่า ที่เกิดความผิดพลาดเป็นปัญหาของคนๆนั้นเสมอๆ  เพราะระบบอาจไม่ดีเอง หรือไม่ได้คิดถึง flow ที่จะรองรับความผิดพลาดทั่วไปเอาไว้  ให้แก้ที่ระบบก่อน จะง่ายกว่าแก้ที่คนประมาณสามล้านเท่า

2. ความเร็วของการคิด
สมองคนเราใช้เวลาประมาณ 1 ใน 10 วินาทีในการระลึกจำได้ในสิ่งๆหนึ่งๆบนหน้าจอ  และราวๆเกือบๆ 1 ใน 4 วินาที ในการเปลี่ยนความสนใจจากวัตถุหนึ่งไปยังวัตถุอื่นในหน้าจอเดียวกัน  และประมาณ 1.25 วินาทีในการตัดสินใจเลือก 1 ใน 2 ตัวเลือกที่ปรากฏขึ้นพร้อมๆกัน  (Olson and Olson, 1990)

* ถึงแม้ว่าหน่วยประมวลผลของคนเราจะเป็นหน่วยวินาที  มันก็ไม่ได้แปลว่าเร็วอย่างที่หลายๆคนเข้าใจ

3. ตาไปไวกว่ามือเสมอ
การพิมพ์ 1 ตัวอักษร ใช้เวลาโดยทั่วไป 0.1 – 1.25 วินาที  การคลิกเมาส์หนึ่งครั้ง ใช้เวลาเท่ากับการพิมพ์ 1 ตัวอักษร  ในขณะที่การเลื่อนเมาส์บนหน้าจอใช้เวลาเฉลี่ย 1.5 วินาที  (ทั้งนี้ การเลื่อนเมาส์เพื่อคลิกหรือหยุดในตำแหน่งที่ต้องการ ขึ้นอยู่กับ Fitt’s Law  ซึ่งว่าด้วยความสัมพันธ์ระหว่างขนาดของวัตถุและระยะทางที่จะไปยังวัตถุนั้นๆ  ถ้าวัตถุใหญ่และระยะทางสั้น ก็จะใช้เวลาน้อย  ในขณะที่ถ้าวัตถุเล็กแล้วระยะทางยังมากอีก ก็ใช้เวลามากขึ้นตามลำดับ)  การเปลี่ยนมือระหว่างคีย์บอร์ดกับเมาส์ ก็ใช้เวลาอีกประมาณ 0.36 วินาที
เมื่อดูแต่ละ action แล้วอาจจะไม่เยอะ แต่คนเราไม่ได้ทำ action เดียวเดี่ยวๆกับหน้าเว็บ 1 หน้า หรือ หน้า Interfaceใดๆ 1 การแสดงผล  เราทำทั้งระลึก ตัดสินใจ มือไป มือเลื่อน คลิก เปลี่ยนตำแหน่งมือ
รวมๆแล้ว เราใช้เวลาไม่น้อยต่อการทำงานเพียง task เดียว

4. Small Number
นักจิตวิทยานามกระเดื่อง George Miller’s ได้ให้กำเนิดทฤษฎี 7 บวกลบ 2 เอาไว้  ซึ่งแสดงถึงหน่วย หรือชุดข้อมูล ที่คนปรกติคนหนึ่ง พอจะจำได้พร้อมๆกัน  ด้วยความจำส่วนชั่วคราว (Short-term Memory)

ในยุคสมัยการพัฒนาช่วงหนึ่ง จึงได้มีการเข้มงวดเกี่ยวกับกฎนี้อย่างมาก  หลายๆคนได้ตีความกฏนี้ว่า ในหน้าเว็บไม่ควรจะมีเมนูเกิน 7 เมนู  อย่างไรก็ตาม กฏนี้ก็มีข้อยกเว้นไปตามปัจจัยและสถานการณ์ในการใช้งาน  แต่อย่างน้อย กฎนี้ก็ทำให้เราทราบว่า  คนเราไม่ได้จำอะไรได้มากมายนักหรอก อย่าหวังอะไรอย่างนั้นเวลาทำระบบ

5. จำหน้าได้ แต่ชื่อหนีไปไหนแล้วไม่รู้
โดยทั่วไป คนเราจะมีประสิทธิภาพในการ “ระลึก” ได้มากกว่าการ “ขุดความจำ” ขึ้นมาโดยไม่มีตัวช่วย
ถ้าเราเจอคนๆหนึ่งที่ไม่ได้เจอมาเป็นสิบปี ก็มีความเป็นไปได้สูงว่า เราจำชื่อเขาไม่ได้ ถ้าเทียบการที่ให้เอารายชื่อ ตัวเลือกหลอกปนคำตอบจริงมาให้เลือก เรามักจะตอบได้ถูกว่า อ๋อ ไอ้หมอนี่ชื่อนี้นี่เอง
มากกว่าการที่ให้เวลาเรานั่งระลึกชาติตามลำพัง วันหลังจะพูดถึงเรื่องระลึก(Recognize) กับการขุดความจำ(Recall)  ในรายละเอียดทีหลังแล้วกัน (ถ้าไม่ลืม)  ในการใช้ระบบที่เกี่ยวกับคอมพิวเตอร์ยุคแรกๆ
จึงเป็นเรื่องที่สาหัสสากรรจ์สำหรับคนความจำปลาทอง เพราะต้องจำชุดคำสั่งทั้งหมดในการใช้งานให้ได้ เพื่อการใช้งานระบบอย่างมีประสิทธิภาพ ตอนนั้นก็ช่างมันเถิด เพราะยุคนั้น ยังเป็นการเริ่มต้นของการใช้คอมพิวเตอร์อยู่ แต่มาถึงค.ศ. พ.ศ.นี้แล้ว ใครยังทำระบบอย่างนั้นอยู่ ก็มีทีท่าว่าจะขายไม่ออก หมายังไม่มอง(เพราะอ่านไม่ออก) ได้ง่ายๆ ไม่ใช่ว่าการใช้ชุดคำสั่งไม่ดีเสมอไป แต่เราต้องไม่ลืมด้วยว่า ธรรมชาติในการประมวลผลความจำของคนเรา ทั้ง Recognize และ Recall นั้น มีข้อดีข้อเสียต่างกันอย่างไร

6. Learning Curve
การเรียนรู้ของมนุษย์ เป็นปรกติที่จะเกิดข้อผิดพลาดในคราวแรกๆด้วยความไม่รู้ หรือไม่เคยชิน  เวลาที่เกิดการเรียนรู้ของใหม่ หรือวิธีใหม่ๆที่ใช้กับของเดิมๆ  Learning Curve จึงออกสตาร์ทอย่างช้าๆ ไปพร้อมๆกับความเอ๋อเป๋อเหลอที่จะเกิดขึ้น  ข้อนี้ก็เป็นอีกข้อที่นักพัฒนามักจะละเลย  เพราะมักจะคิดว่า ของมันดีนะ(แหงล่ะ ก็ทำเอง) ถ้าใครๆได้ใช้แล้วจะติดใจ (เข้าข้างตัวเองสุดๆ)  และลืมไปว่า คนอื่นๆไม่ใช่ตะเองนะ
ทำให้เกิดระบบ หรือ Application ที่ต้องใช้เวลาเรียนรู้อย่างมาก (หรือใช้เวลาเรียนรู้อย่างมากแล้ว แต่ก็ยังไม่เข้าใจมันอยู่ดี) เต็มตลาดทั่วโลกไปหมด

 

 

 

 

ที่มา :    http://www.chaiwbi.com/501/5101.html

            http://iamia.wordpress.com/2008/03/20/human-limitation/

 

 

 

 

 

User Interface Design การออกแบบส่วนต่อประสาน

 

User Interface Design หรือ Human-Computer Interaction คือ การออกแบบส่วนต่อประสานกับผู้ใช้ ระหว่างผู้ใช้กับคอมพิวเตอร์ ซึ่งเริ่มจากการรวมวิธีการค้นหาข้อมูลและภูมิความรู้ของนักจิตวิทยา นักการศึกษา นักออกแบบกราฟิก ช่างเทคนิค ผู้เชี่ยวชาญด้านมนุษย์ นักออกแบบสถาปัตยกรรมข้อมูล และนักสังคมศาสตร์ เพื่อการออกแบบพัฒนาส่วนต่อประสานให้ใช้งานได้อย่างมีประสิทธิภาพ โดยมีวัตถุประสงค์หลักคือ สามารถใช้งานได้ง่าย ใช้ทักษะส่วนบุคคลน้อย ฝึกอบรมการใช้งานน้อย เพิ่มมาตรฐานการออกแบบที่อยู่ในระบบ (U.S Military Standard for Human Engineering Design Criteria, 1999) นอกจากนี้ การออกแบบส่วนต่อประสานที่ดีจะทำให้งานที่สำเร็จออกมาดีใช้งานได้ง่าย เรียนรู้ได้ง่าย ก็จะสามารถแข่งขันกับซอฟท์แวร์อื่น ๆ ในตลาดได้ ดังที่ Jacob nielsen ผู้เชี่ยวชาญในการออกแบบ Web Usability ได้กล่าวว่า “Bad usability equal no customers.”

 

Universal Usability ในการออกแบบส่วนต่อประสานเราควรคำนึงถึงเรื่องใดบ้าง

 

• ความหลากหลายของผู้ใช้งานทั้งทางกายภาพและสภาพแวดล้อม
• บุคลิกของผู้ใช้ที่แตกต่างกัน / ความต่างระหว่างบุคคล
• ความแตกต่างของปัญญาและความสามารถในการรับรู้
• ความหลากหลายทางเชื้อชาติและวัฒนธรรม
• ผู้ใช้งานที่ไร้ความสามารถหรือพิการ
• อายุของผู้ใช้งาน
• การออกแบบสำหรับเด็ก
• การปรับให้เข้ากับซอฟท์แวร์และฮาร์ดแวร์

 

Principle หลักการในการออกแบบส่วนต่อประสาน (Ben, 2005)

 

• ประเมินทักษะผู้ใช้งาน เพราะผู้ใช้งานมีหลากหลาย การรู้จักผู้ใช้ เป็นหลักการแรกที่ต้องทำ (Hansen, 1971) เราอาจแบ่งทักษะผู้ใช้งานออกเป็น 3 ส่วนใหญ่ ๆ คือ ผู้ใช้มือใหม่ (Novice or first-time user) ผู้ใช้ระดับกลาง (Knowledgeable intermittent users) และผู้เชี่ยวชาญ (Expert frequent user) หากจะออกแบบให้ใช้งานได้กับกลุ่มใดกลุ่มหนึ่งจะเป็นเรื่องง่าย แต่ถ้าต้องออกแบบให้คนทั้งสามกลุ่มเข้าใจร่วมกันได้ จะเป็นเรื่องที่ยากและท้าทายมาก
• แจกแจงงาน นักออกแบบต้องแจกแจงหน้าที่และงานของระบบให้ละเอียดก่อน แล้วเรียงลำดับว่างานไหนมีความสำคัญก่อน งานไหนสำคัญหลัง
• เลือกแบบการปฏิสัมพันธ์ การปฏิสัมพันธ์มีได้หลายรูปแบบนักออกแบบต้องเลือกให้เหมาะสม เช่น
  • Direct manipulation การจับต้องสัมผัสโดยตรง เช่น การลากไอคอนลงไปบนถังขยะ แสดงว่าต้องการลบ มีข้อดีคือ ภาพแสดงถึงหน้าที่อย่างชัดเจน เรียนรู้ได้ง่าย จดจำได้ง่าย หลีกเลี่ยงความผิดพลาด สนับสนุนการค้นหา และ ก่อให้เกิดการปฏิบัติตาม มีข้อเสียคือ สร้างยาก และต้องการการแสดงผลที่เป็นกราฟิกและต้องอาศัยเครื่องชี้
  • Menu Selection การเลือกเมนู มีข้อดีคือ เรียนรู้ได้ง่าย ลดการใช้คียบอร์ด เกิดการตัดสินใจที่มีโครงสร้าง ลดการเกิดข้อผิดพลาด มีข้อเสียคือ เมนูที่มากไปทำให้การนำเสนอไม่ดี ทำให้ผู้ใช้งานที่คล่องใช้งานได้ช้าลง ใช้พื้นที่ในการแสดงผลมาก
  • Form Fill in การเติมคำลงในฟอร์ม มีข้อดีคือ การกรอกข้อมูลมีความง่าย ฝึกฝนได้โดยไม่ยาก และมีคำแนะนำที่สะดวก มีข้อเสียคือ ใช้พื้นที่แสดงผลมาก
  • Command Language ภาษาสั่งการ เป็นการใช้ตัวอักษรในการสั่งการ ส่วนใหญ่จะใช้กับผู้ใช้ที่มีความเชี่ยวชาญ มีข้อดีคือ ยืดหยุ่น ดึงดูดผู้ใช้ระดับสูง ผู้ใช้สามารถสร้างคำสั่งเองได้ มีข้อเสียคือ มีข้อผิดพลาดได้ง่าย ต้องการการอบรมและการจดจำสูง
  • Natural Language ภาษาพูด หรือภาษาที่ใช้โดยธรรมชาติ มีข้อดีคือ สร้างสาระสำคัญของระบบการเรียนรู้ มีข้อเสียคือ ต้องแยกแยะบทสนทนา อาจไม่แสดงถึงเนื้อหา อาจต้องพิมพ์มาก และคาดเดาไม่ได้
• ใช้กฎ 8 ข้อสำหรับการออกแบบหน้าจอ
  • Strive for consistency ทำให้เกิดความสม่ำเสมอ ไม่ว่าจะเป็นเมนู ไอคอน สี รูปแบบ ตัวอักษรต่าง ๆ ควรจะมีความสม่ำเสมอ
  • Cater to universal usability ให้ความพอใจกับทุกคน กับทุกกลุ่มผู้ใช้
  • Offer information feedback ให้ข้อมูลป้อนกลับเมื่อมีการปฏิสัมพันธ์
  • Design dialog yield closure ออกแบบให้มีจุดเริ่มต้น ระหว่างกลาง และสุดท้าย
  • Prevent error ป้องกันความผิดพลาด
  • Permit easy reversal of actions สามารถย้อนกลับได้ง่ายเพื่อแก้ไขข้อผิดพลาด
  • Support internal locus of control สนับสนุนการควบคุมภายใน ต้องออกแบบให้เกิดการตอบสนองของหน้าจอกับสิ่งที่ผู้ใช้ได้กระทำลงไป
  • Reduce short-term memory load ลดความยาวของเวลาที่ใช้ในความจำระยะสั้น

 

Ten Usability Heuristics ( Jakob Nielsen, 2000)

 

Visibility of system status

ระบบต้องแสดงให้ผู้ใช้งานเห็นเสมอว่าตนกำลังทำอะไรอยู่ กำลังจะเกิดอะไรขึ้น และให้ผลป้อนกลับในเวลาที่เหมาะสม

Match between system and the real world

ระบบต้องสามารถพูดภาษาเดียวกันกับผู้ใช้โดยมีตรรกะการใช้งานที่เป็นธรรมชาติ

User control and freedom

ผู้ใช้มักจะใช้งานผิดพลาดจึงจำเป็นต้องมีทางออกให้เสมอสำหรับสถานการณ์ที่ไม่พึงประสงค์ สนับสนุนการ Undo และ Redo

Consistency and standards

ผู้ใช้งานต้องไม่เกิดความสงสัย ระหว่างตัวหนังสือที่แตกต่างกัน สถานการณ์หรือการกระทำที่ให้ผลเหมือนกันให้ทำตามระเบียบแบบแผนที่วางไว้

Error prevention

คำเตือนให้ระวังความผิดพลาดเป็นสิ่งที่ดีที่จะช่วยป้องกันความผิดพลาด ซึ่งควรจะให้มีการตกลงใจซ้ำอีกครั้งเพื่อตรวจสอบความแน่นอนของการตัดสินใจของผู้ใช้

Recognition rather than recall

ทำให้ผู้ใช้งานใช้ความจำให้น้อยที่สุดโดยการทำให้ส่วนประกอบ การปฏิบัติและตัวเลือกชัดเจน วิธีการใช้งานต้องเข้าถึงได้ง่ายและรับรู้ได้ง่าย

Flexibility and efficiency of use

มีความยืดหยุ่นสำหรับผู้ใช้งานหลากหลายกลุ่ม และมีประสิทธิผล

Aesthetic and minimalist design

ประโยคนำเสนอไม่ต้องรวมเรื่องที่ไม่เกี่ยวข้องหรือใช้น้อย

Help users recognize, diagnose, and recover from errors

ข้อความแสดงความผิดพลาดต้องปรากฏในแบบตัวอักษรธรรมดาไม่ใช่โค๊ด ระบุปัญหาและบอกวิธีแก้ไข

Help and documentation

ระบบที่ดีต้องทำงานได้โดยไม่ต้องอาศัยคู่มือการใช้ แต่ก็ยังมีความจำเป็น ข้อมูลที่ให้ต้องหาง่ายเจาะจงไปยังหน้าที่ต่าง ๆ มีการเรียงลำดับที่เป็นนามธรรมและไม่หนาจนเกินไป