Design principle ในงาน UI
ใครที่จบสายออกแบบคงได้เรียน Design Principle กันมาแล้วเพราะมันคือพื้นฐานสำคัญ ที่สอนให้เรารู้จักสัญชาตญาณของมนุษย์ในการแยกกลุ่มข้อมูล เพื่อช่วยให้มนุษย์ทำความเข้าใจภาพที่เห็นได้เร็วขึ้น สำหรับใครที่ไม่ได้เรียน Design Principle แบ่งออกเป็น 4 หัวข้อหลัก ๆ ดังนี้
จำง่าย ๆ ว่ามันคือ CRAP ซึ่งเรามีพูดไว้บ้างแล้วในบทความเรื่อง ลดการใช้สมองด้วย Design Principle ในตอนนั้นเราทดลองปรับป้ายบอกทางให้อ่านง่ายขึ้น
พอมันช่วยให้ผู้ใช้แยกของได้เร็วขึ้นแถมสมองยังทำโดยอัตโนมัติด้วย แทบไม่ต้องใช้ความคิดเลย มันจึงถูกนำไปใช้ในงานออกแบบ Poster, Newspaper, Banner หรืองานอะไรก็ตามที่ต้องการให้ผู้ใช้เข้าใจเนื้อหาได้โดยเร็ว และใช้ความคิดน้อยที่สุด ในบทความนี้เราจะไม่เล่า CRAP แต่ละข้อ ถ้าสนใจอยากแนะนำให้ลองไปอ่านอันนี้ดูครับ
- Design Principle form Ant
- Design Principle from VWO
- รวม Design Principle เบื้องหลัง Product อาจจะไม่เกี่ยวกับ CRAP แต่น่าไปอ่านสุด ๆ
ในครั้งนี้เราจะลองนำ Design Principle มาปรับปรุง User Interface โดยใช้หน้าแรกของ Mobile application โดยนำ App ของ Thai Lion air มาเป็นตัวอย่าง ในภาพด้านล่างผมเก็บมาตั้งแต่ปี 2017 ตอนนี้หน้าแรกเค้าเปลี่ยนไปแล้วครับ แต่มันก็ยังเป็นที่ดีอยู่เลยเอามาให้ดูกัน
ในหน้านี้ถ้าดูทั่วไปก็คงไม่มีปัญหาอะไร แต่ถ้าเราคิดว่ามันง่ายกว่านี้ได้หรือเปล่า 🤔เราจะเริ่มเห็นว่า Banner ที่ควรจะดูได้ชัด กลับจมลงไปพื้นหลัง ส่วนคำว่า Term & Condition ก็มองแทบไม่เห็น ถึงแม้จะไม่อยากให้เห็น แต่ถ้าแอบไว้แบบนี้ก็ดูเหมือนหมกเม็ดมากกว่าจริงใจ ทางแก้ง่าย ๆ ก็คือหาพื้นหลังใหม่ ที่ Contrast กับตัว Banner ในครั้งนี้เราลองหาภาพพื้นหลังที่เข้มขึ้นดู
เท่านี้ตัว Banner และ Term & Conditions ก็ชัดขึ้นมานิดหน่อยแล้ว 🤗 แต่มันชัดกว่านี้ได้หรือเปล่า? ทางออกที่ง่ายขึ้นไปอีกคือการไม่นำภาพมาแข่งกันเอง ปรับพื้นหลังให้ดูเรียบร้อย เน้นให้ Content เป็นพระเอกแทนที่จะเอา UI มาแข่ง
ผมลองปรับพื้นหลังให้เป็นสีเรียบ ๆ ดูครับ ทำให้พื้นหลังกับ Banner ดู Contrast กันมากขึ้นส่งให้ Banner เด่นขึ้นไปอีก แต่ก็มีอีกปัญหาที่ตามมาคือ call to action หลักมันจมหายไปใน Background เพราะเป็นสีเดียวกัน เราเลยขีดเส้นแบ่งกล่องขึ้นมาโดยเส้นนั้นใช้ Alignment เดียวกับสีขาวด้านบน และ Banner ด้านล่าง
ภาพด้านซ้ายจะเหลือสิ่งที่ไม่เข้าพวกหนึ่งอย่างคือ icon setting ด้านบนขวา ซึ่งผมคาดว่าผู้พัฒนาคงต้องการให้คนรู้ว่ามี Setting อยู่ตรงนี้จึงตั้งใจใส่พื้นหลังสีขาวลงไปเพื่อให้มันเด่น แต่ก็มีปัญหาว่ามันไปแย่งความเด่นของ Branding และมันไม่อยู่ในที่ปกติที่โปรแกรมอื่น ๆ เค้าเอาไว้กันทำให้คนต้องคิดว่ามันคืออะไร ในรูปขวาเราจึงลองเอามาวางไว้ในที่มุมขวาบน ให้มี Alignment เดียวกับ Title ซึ่งเป็นที่ปกติที่ Application อื่นเค้าวางกัน (คนส่วนมากจะทำตาม Guideline)
การว่างแบบนี้ช่วยให้คนสังเกตน้อยลง มอง Title มากขึ้น และเมื่อเค้าต้องการหาก็จะหาเจอเพราะมันอยู่ในที่ ที่คนนิยมวางกัน
แต่ก็ยังเหลือสิ่งที่เป็นปัญหาอยู่คือ นั่นคือเนื้อหาทั้งหมดถูกรวมเป็นก้อนเดียวกัน ภาพทางซ้ายผู้ใช้ต้องใช้สมาธิมากขึ้นในการมองแต่ละช่อง เราเลยลองแยกเนื้อหาออกจากกันตามหลักการ Proximity ทำให้ได้ภาพทางขวามือซึ่งง่ายในการวางสายตา
ปรับง่าย ๆ แค่นี้ เราแทบไม่ได้เพิ่มงาน Developer เลย แต่เมื่อเรานำภาพสุดท้ายมาเทียบกับภาพต้นฉบับ จะเห็นว่ามันเรียบร้อยขึ้น แบ่งสัดส่วนได้ง่ายขึ้น ผู้ใช้สามารถวางสายตาเพื่ออ่านแต่ละช่องได้ง่ายขึ้น สิ่งที่เสียไปคือความหวือหวา และสีสรรค์ที่ดูสดใสของต้นฉบับ สิ่งนี้เป็นเรื่องที่คนทำ UI ต้องชั่งน้ำหนักให้ดี ว่าจะเอาความหวือหวาหรือความสบาย ต้องคิดว่าเพราะผู้ใช้ยังต้องใช้พลังกับเว็บของเราอีกหลายหน้ากว่าเค้าจะจบการใช้งาน การตัดกำลังผู้ใช้ตั้งแต่หน้าแรกก็เป็นความเสี่ยงอยู่เหมือนกันนะ 🤔
สำหรับคนที่ทำงานออกแบบมานาน มักใช้งาน CRAP หรือ Design Principle กันแบบอัตโนมัติจนบางครั้งลืมไปเลยว่าเรากำลังใช้สิ่งเหล่านี้อยู่ พอถูกหัวหน้าหรือลูกค้าถามว่า “ทำไม icon นั้นสูงกว่านี้ไม่ได้” หรือ “ทำไมถึงต้องให้หัวข้อกว้างเท่านี้” เราก็มักจะตอบลำบาก แล้วบางทีก็อ้างว่ามันสวยกว่า ซึ่งประเด็นนี้จะถูกปัดตกไปอย่างง่ายดาย เพราะมันวัดลำบาก และดูไม่มีหลักการ
วันหลังอยากให้ลองอ้าง Desing Principle ดูครับ มันมีหลักการจริง ๆ นะ ว่าทำไมเราถึงวางแบบนั้น แต่ก็อย่าใช้จนมันกลายเป็นอุปสรรค์ของตัวเองนะครับ เพราะความรู้สึกมันเร็วกว่าความคิด ถ้าคิดเยอะเดี๋ยวงานไม่ออกซะที 😅
ถ้าสนใจในเรื่องการออกแบบ โดยเฉพาะเรื่อง UX สามารถเข้าไปอ่านต่อได้ที่ blog.uxacademy.in.th หรือลองดูบทความอื่น ๆ ของ uxacademy ได้ที่
- ยื่นภาษีง่ายขึ้นด้วย UX Design (ตอนแรก, ตอนจบ)
- ตำแหน่งไหนบ้างที่ใช้ UX แล้วงานลดลง (ตอนที่หนึ่ง, ตอนที่สอง)
- ลองวัดความเป็น UX ของเราดู
หรือถ้าอยากแลกเปลี่ยนความคิดเห็นก็เข้าไปคุยกันได้ที่ uxinthai.com ครับ
