bangkok graphic

ขั้นตอนในการออกแบบปฏิสัมพันธ์ (interface design)

ศึกษาหลักการเบื้องต้น 

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

            2). ลงมือปฏิบัติต่อองค์ประกอบต่าง ๆ  

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

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

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

3). การจัดวางองค์ประกอบต่าง ๆ ให้เข้ากัน (Margaret Bearman, 1997) เป่นการจัดวางองค์ประกอบต่าง ๆ ให้เข้ากัน เหมาะสมกันวิธีการจัดองค์ประกอบดังกล่าวมีลักษณะคล้ายการจัดองค์ประกอบของงานออกแบบกราฟิก มีหลักการดังนี้    

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

+  ความกระจ่างชัด (clarify) องค์ประกอบที่เป็นภาพกราฟิกต่าง ๆ ในหน้าจอ จะต้องง่ายต่อการจดจำ มีความหมายชัดเจน ไม่คลุมเครือ  

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

+ มีความน่าสนใจ (visual appeal) ความน่าสนใจและความสวยงามมักขึ้นอยู่กับรสนิยมของแต่ละบุคคล นักออกแบบจึงควรระบุกลุ่มเป้าหมายให้ชัดเจน เพื่อจะได้กำหนดรูปแบบความน่าสนใจให้ตรงกับกลุ่มเป้าหมาย และสำคัญคือ ต้องมีมาตรฐานในการออกแบบ เช่น คุณภาพของกราฟิก คุณภาพในการจัดวางองค์ประกอบ  

+ ความเป็นเอกลักษณ์ (identity) นักออกแบบต้องพยายามสร้างภาพลักษณ์หรือเอกลักษณ์ของงานให้เหมาะสมกับประเภทของงานและผู้ใช้ซึ่งเป็นกลุ่มเป้าหมาย บางครั้งนักออกแบบยังต้องคำนึงถึงองค์กรผู้ผลิตด้วย

2.8.3. การทดสอบเพื่อประเมินผลการออกแบบ  การทดสอบงานออกแบบเพื่อคนหามาตรฐานของผู้ใช้ การทดสอบเป็นสิ่งที่สำคัญมากเพื่อให้เราได้ทราบผลของงานออกแบบที่เกิดขึ้นว่า งานออกแบบมีความเป็นไปได้และมีประสิทธิภาพมากน้อยแค่ไหน อย่างไร ดังนั้นการทดสอบควรทดสอบกับกลุ่มตัวอย่างที่เป็นกลุ่มเป้าหมายในช่วงระดับเดียวกัน เช่น กลุ่มที่มีประสบการณ์ใกล้เคียงกัน กลุ่มที่มีทักษะในการใช้งานใกล้เคียงกัน เพื่อได้ผลที่มีความเที่ยงตรง และนำผลย้อนกลับจากกลุ่มตัวอย่างมาปรับปรุงรูปแบบงานออกแบบ ก่อนที่จะนำผลงานเอาไปใช้จริง การออกแบบอย่างมีประสิทธิภาพ ควรคำนึงถึง (Jakob Nielsen, 2002)

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

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

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

4). สร้างช่องรับข้อคิดเห็นของผู้ใช้ เช่น อาจมีช่องกรอกข้อมูล หรือ มีข้อมูลติดต่อฝ่ายเทคนิค เป็นต้น

5). เตรียมวิธีการป้องกันความผิดพลาดของผู้ใช้เมื่อเกิดมีความผิดพลาดในการใช้ เช่น เมื่อผู้ใช้หลงทาง หรือกดข้อมูลผิด นักออกแบบจะต้องมีทางเลือก เช่น การย้อนกลับ หรือ ออก(quit) ให้ผู้ใช้เสมอ ยกตัวอย่างโปรแกรม web browser มักมีสัญลักษณ์ (icon) ย้อนกลับ (back) และปุ่มไปข้างหน้า (forward) เสมอ ดังนั้นกราฟิกที่ออกแบบมาจะต้องชัดเจน และอยู่ในตำแหน่งที่มองเห็นได้ง่ายบนหน้าจอภาพ

6). พยายามสร้างตัวช่วยในการใช้งาน เช่น ถ้าออกแบบหน้าจอโปรแกรม จะต้องมีตัวช่วย (help) ถ้าเป็นการออกแบบเว็บเพจก็อาจจะมีแผนที่ (sitemap) คอยช่วยนำทาง เป็นต้น

7). ใช้ภาพเคลื่อนไหว เสียงเพลง หรือสีให้เหมาะสมและไม่มากจนเกินงาม การใช้ภาพเคลื่อนไหวควรมีเหตุผลเพียงพอในการใช้งานไม่ใช่สร้างภาพเคลื่อนไหวให้ผู้ใช้สับสน

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

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