Smashing Book: UI in Modern Web App

Posted by in Design

Smashing Book ออกมาจะครบปีแล้ว แต่ก็ยังอ่านได้ไม่หมด แต่ตอนนี้คิดจะลองมาสรุปความรู้ที่ได้มาดูสักหน่อย เราจะขอเน้นแต่เฉพาะส่วนที่เป็น UI design เพราะอยู่ในฟิลด์ที่ทำงานอยู่ หนังสือเล่มนี้อ่านแล้วได้อะไรเยอะดี แต่เสียที่หนักไปหน่อย พกพาไปอ่านนอกสถานที่ไม่ค่อยสะดวกเท่าไหร่

Learning from The Smashing Book by Smashing Magazine

1: UI in Modern Web Application

_______________________________________________________________________________

What is User Interface?

” The way that you accomplish tasks with a product – what you do and how it responds – that’s the interface” by Jef Raskin

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

What Makes A Great User Interface?

1. Clarity หรือ ความชัดเจน ผ่านการใช้ภาษา การสร้าง Flow, Hierarchy หรือ metaphor (สัญลักษณ์)  Interface ที่ชัดเจน ไม่จำเป็นต้องมีคู่มือการใช้ เพราะผู้ใช้สามารถเข้าใจได้ในทันที

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

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

4. Responsiveness หรือ การตอบสนอง มีความหมายใน 2 ทางคือ หนึ่ง การตอบสนองด้านความเร็วในการใช้งาน สอง คือการตอบสนองโดยการการแสดง feedback ให้ผู้ใช้เห็นการกระทำต่างๆที่เกิดขึ้นกับโปรแกรม เช่น Progress Bar, ข้อความบอกว่าได้ทำอะไรบางอย่างเสร็จสิ้นแล้ว

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

6. Aesthetics หรือความสวยงาม แม้ว่าเราจะต้องการ interface ที่ใช้งานง่าย โดยไม่จำเป็นต้องมีความสวยงาม แต่ถ้า interface ของเราดูสวยงาม น่าใช้ จะทำให้ผู้ใช้รู้สึกดี และมีความอดทนในการใช้งานโปรแกรมเรานานขึ้น

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

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

Visual Interface Design Toolbox

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

หลักสำคัญๆของ Visual Interface Design

Layout and Positioning

Layout เป็นโครงสร้างของหน้าตาของ Interface ทั้งหมด รวมไปถึงการแสดงถึงความต่อเนื่อง และความสัมพันธ์ ด้วยการเว้นที่ว่าง ระหว่างส่ิงต่างๆ การดึง element มาใกล้กันแสดงถึงความสัมพันธ์ระหว่าง Element นั้น และ ตำแหน่ง (Positioning) ก็แสดงถึง Flow ด้วย เช่น การเขียนชื่อเมนูไว้ใต้ icon แทนที่จะเป็นการวางไว้ด้านซ้าย เป็นการช่วยดึงสายตาในการกวาดตาลงไปด้านล่าง ได้ง่ายขึ้น

Shape and Size

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

Color

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

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

Texture

มีแนวคิดหนึ่งเกี่ยวกับ Interactive design ชื่อว่า  affordance ซึ่ง Affordance คือ ความสามารถในการสื่อสารกับผู้ใช้ ว่าสิ่งต่างๆใช้มีการใช้งานยังไง เช่น ลูกบิดประตู ถ้าเราต้องการทำประตูด้านหนึ่งสำหรับผลัก ด้านหนึ่งสำหรับดึง  โดยทำด้านผลักให้เป็นแผ่นเรียบๆ ไม่มีหูประตู ส่วนด้านดึงก็ทำหูประตูไว้ แบบนี้ผู้ใช้ส่วนใหญ่จะสามารถทราบได้เองว่า ต้องผลักหรือ ดึงประตูด้านไหน เราสามารถนำแนวคิดนี้มาประยุกต์ใช้การกับทำงานด้าน digital ได้