แบบไหนที่เรียกว่า “สวย” ในการออกแบบ User Interface?

แบบไหนที่เรียกว่า “สวย” ในการออกแบบ User Interface?

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

ระหว่างอ่านบทความ เปิดเพลงเพราะ ๆ ฟังไปด้วยก็ได้ครับ เดี๋ยวท้ายๆ จะมีพูดถึงเพลงนี้ด้วย :)

ก่อนอื่น ต้องมองย้อนกลับมาที่ตัวมนุษย์ก่อนซึ่ง มนุษย์เราตามธรรมชาติแล้วเป็นสัตว์ที่ดำรงชีวิตบนพื้นฐานของความกลัวแทบจะทุกเรื่อง

เช่น…

การสร้างบ้านที่อยู่อาศัย เพื่อป้องกันตัวเองจากภัยอื่น ๆ ด้านนอก

การหาอาหาร เพราะกลัวตาย

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

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

ดังนั้น มนุษย์จึงต้องแสวงหาความปลอดภัยให้กับชีวิตตลอดเวลา และเลือกในสิ่งที่เป็นมิตรกับตัวเองมากกว่า

แล้วมันเกี่ยวกับดนตรีตรงไหน? (ส่วนเรื่อง UI จะขอพูดถึงตอนหลัง)

เคยรู้สึกไหมครับ ว่าทำไมคนบางคนถึงเล่นดนตรีเพราะจัง หรือ นักร้องคนนี้ร้องเพลงเพราะมาก

แต่บางครั้ง เราฟังคนอื่นเล่น หรือร้อง แต่กลับรู้สึกไม่เพราะเลย?

นั่นก็เป็นเพราะเรื่องของคลื่นเสียงครับ

คลื่นเสียงที่มีลักษณะคลื่นแบบเดียวกันอย่างต่อเนื่องและสม่ำเสมอ จะทำให้เราฟังแล้วรู้สึกดี รู้สึกเพราะ มากกว่าคลื่นเสียงที่ออกมาแบบไม่สม่ำเสมอ

เพราะคลื่นเสียงที่สม่ำเสมอนั้น ทำให้เราสามารถ”คาดเดา”ได้ว่า มันจะเป็นไปในทิศทางไหน ทำให้เรารู้สึกปลอดภัยกับคลื่นเสียงนี้ และทำให้เรา”สบายใจที่จะฟัง” มากกว่า

sound_1

“มนุษย์เราชอบสิ่งที่สามารถคาดเดาได้ เพราะทำให้รู้สึกปลอดภัย และสามารถควบคุมสิ่งนั้นได้มากกว่า”

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

ซึ่งถ้าอ่านมาถึงจุดนี้แล้วก็น่าจะพอเข้าใจได้ว่ามนุษย์ต้องการอะไร

ถ้าเอาเรื่องคลื่นเสียง มาใช้กับการออกแบบ UI  เรามักจะเรียกกันว่าความ “Consistency” (หรือการออกแบบไปในทิศทางเดียวกัน ใครมีคำอธิบายของคำนี้เป็นภาษาไทยได้ดีกว่านี้ รบกวนบอกหน่อยฮะ)

ยกตัวอย่างเช่น :

– ระยะความห่างของระหว่าง Block ควรจะเท่ากันทั้งหมด

– กล่องต่าง ๆ หรือการจัดเรียงข้อมูล ควรจะเรียงเป็นแนวเดียวกัน

– Header ก็ควรจะใช้ Font เดียวกัน ขนาดเดียวกัน Line-hight เท่ากันทั้งหมด

– Paragrap (P) ควรจะใช้ Font เดียวกัน สีเดียวกัน ขนาดเดียวกันทั้งหมด

– สีปุ่ม ก็ควรจะเป็นสีเดียวกัน หรือโทนเดียวกันทั้งหมด

– ขอบจะมนไหม? ถ้ามน ก็มันทั้งเว็บ หรือถ้าไม่มน ก็ไม่ต้องมนทั้งหมด

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

ทั้งนี้ทั้งนั้น เรื่องที่กล่าวมาทั้งหมด เป็นเพียงส่วนประกอบหนึ่งของการออกแบบ UI ให้สวยเท่านั้น เพราะส่วนอื่นจะเป็นเรื่องของ Mood and Tone, การเลือกใช้สี, การใส่แสงเงา และอื่น ๆ อีกมากมาย

ลองใส่ใจเรื่องเล็ก ๆ น้อย ๆ เหล่านี้ ก็จะสามารถสร้างประสบการณ์ที่ดีให้กับผู้ใช้ของเราได้เหมือนกันครับ :)

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