4 ความสำคัญพื้นฐานของการออกแบบ UI/UX ที่นักพัฒนา Front-end ต้องรู้

คุณเคยเห็นไอคอน ✖ ตรงมุมขวาบนของกล่องใช่ไหม? แค่เห็นปุ๊บก็รู้ปั๊บว่ากดปิด! แต่ถ้าเอาไอคอนนี้ไปไว้กลางกล่องล่ะ? คุณอาจเอะใจว่า “นี่มันปุ่มอะไรเนี่ย”

“รูปภาพพูดแทนคำพูดนับพัน” — ไม่รู้ว่าแทนได้กี่คำจริงๆ แต่ที่แน่ๆ การออกแบบคือเครื่องมือสื่อสารชั้นดีที่บอกเล่า “ความหมาย” ได้มากกว่าตัวหนังสือเป็นตั้งๆ! เหมือนภาษาแบบธรรมดาเลย มันคือการผสมผสานกฎเกณฑ์และธรรมเนียมปฏิบัติจนเกิดเป็นความหมายร่วมกันในสังคม ถ้าเราทำลายกฎพวกนี้เมื่อไหร่ การสื่อสารก็พังทลาย!

จากการที่ผมทำงาน Front-end developer มาเกือบ 10 ปีทำให้ผมรู้ว่าสิ่งหนึ่งที่ควรศึกษาเพิ่มเติมเลยคือพื้นฐานการออกแบบ UI/UX ให้หน้าเว็บออกมาไม่ใช้แค่สวยงาม แต่ทุกจุดนั้นแสดงออกมานั้น มีความหมาย มีความสำคัญ

ซึ่งในบทความนี้จะพยายามสอนให้รู้ศัพท์แสงในวงการ, จับจุดสำคัญเวลาเจอปัญหา และอินกับ Logic การออกแบบมากขึ้น มาลองลุยกัน...

เกี่ยวกับภาพตัวอย่าง

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

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

วงกลมสีน้ำเงินใช้เพื่อแสดงหน่วยระยะห่าง วงกลมสีน้ำเงินไม่ได้เป็นส่วนหนึ่งของการออกแบบ

การจัดวาง (Alignment)

"จัดวางยังไงให้ปัง? วางตำแหน่งคืออาวุธลับที่ทำให้องค์ประกอบสื่อสารกันได้แบบเนียนๆ! แม้จะไม่มีเส้นกริดให้เห็นชัดๆ แต่แค่จัดองค์ประกอบให้ลงตัว มันก็สร้างความสัมพันธ์แบบ ‘ฉันเข้าใจเธอ เธอเข้าใจฉัน’ ระหว่าง UI กับผู้ใช้ได้แล้วล่ะ

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

❌ จัดผิดทาง = ผู้ใช้มึนตึ้บ
เหมือนเปิดตู้เย็นแล้วเจอแกงกะหรี่อยู่ข้างไอศกรีม แค่คิดก็รำคาญแทนแล้ว! (นักออกแบบเห็นทีแรกอาจถึงกับกรี๊ดเลยนะ)"

นี่คือตัวอย่างหน้าจอ Landing Page ลองจินตนาการถึงหน้าเว็บที่แบ่งเป็น 3 ชั้นเหมือนเค้ก (แต่ไม่มีครีมนะ) แล้วจะเห็นเส้นสีน้ำเงินสองเส้นคู่ขนาบข้าง – อย่าเพิ่งเข้าใจผิดว่านี่เป็นส่วนหนึ่งของดีไซน์! มันแค่เส้นช่วยจัดหน้าเฉยๆ

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

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

เคยเห็นพื้นหลังที่ดื้อๆ ไม่อยู่ในกรอบบ้างไหม? เหมือนในภาพตัวอย่างเนี่ย เจ้าพื้นหลังนี่ขี้อ้อนชัดๆ ไม่อยากอยู่ในกฎเกณฑ์ที่นักออกแบบตั้งไว้ซะแล้ว!

บางทีนักออกแบบก็แอบซุ่มเซอร์ไพรส์! ลองสังเกตดีๆ บางองค์ประกอบอาจ ยื่นออกมานอกกรอบแบบตั้งใจ

นี่คือการแหกกฎแบบมีชั้นเชิง องค์ประกอบที่ยื่นออกมาเปรียบเสมือน นักเรียนดื้อสุดปัง ในห้องเรียน – ยิ่งทำตัวนอกกรอบเท่าไหร่ ยิ่งโดนจับจ้องเท่านั้น!

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

แม้ว่าจะมีองค์ประกอบที่ยื่นออกมานอกขอบเขต แต่องค์ประกอบภายในบางครั้งก็อาจเรียงตัวตรงกับขอบเขต ดังนั้น เราต้องใส่ใจเรื่องนั้น

ในองค์ประกอบต่างๆ เช่น ปุ่มและ List บางครั้งมีองค์ประกอบที่มีความสูงต่างกันวางเรียงกัน ในกรณีดังกล่าว นักออกแบบอาจเลือกจัดวางองค์ประกอบเหล่านี้ในแนวตั้ง

เวลาเจอไอคอนในกรอบสี่เหลี่ยม อย่าเพิ่งไปกังวลกับรูปร่างของมันมากเกินไป! นักออกแบบมือโปรเค้ามักใช้เทคนิคจัดทุกไอคอนให้อยู่ในกรอบสี่เหลี่ยมเท่ากันเป๊ะ เพื่อให้พื้นที่ในการจัดวางเท่ากันหมด

แต่รู้ไหม? การจัดตำแหน่งไอคอนให้อยู่กลางกรอบแบบเป๊ะๆ บางทีก็ทำให้เลย์เอาต์ดูแปลกๆ ได้เหมือนกัน! เพราะบางครั้งการจัดกลางตามหลักคณิตศาสตร์อาจทำให้ภาพรวมไม่สมดุลนั่นเอง

ถ้าคุณใช้ซอฟต์แวร์ UX อย่าง Figma คุณจะสามารถเลือกทั้งกราฟิกของไอคอนและกรอบรอบๆ ได้ แต่ต้องระวังให้ดี! นักออกแบบมือโปรเค้าจะเลือกกรอบ (ซึ่งทำเครื่องหมายด้วยสี่เหลี่ยมสีน้ำเงินในตัวอย่างด้านบน) มากกว่ากราฟิกของไอคอน (สามเหลี่ยมสีดำ)

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

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

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

ช่องว่าง (Spacing)

เช่นเดียวกับการจัดวาง (Alignment) ช่องว่างก็มีบทบาทสำคัญในการสื่อถึงความสัมพันธ์ระหว่างองค์ประกอบต่างๆ

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

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

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

ในตัวอย่างข้างต้น เราจะเห็นว่านักออกแบบใช้ระยะห่างเดียวกันสำหรับภายในคอนเทนเนอร์ รวมถึงช่องว่างระหว่างรายการด้วย

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

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

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

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

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

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

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

ในโค้ด บางส่วนอาจเป็นระยะขอบภายใน (padding) บางส่วนอาจเป็นระยะขอบภายนอก (margin) หรือช่องว่าง (gap) แต่ทั้งหมดมีขนาด 1 หน่วยในโครงสร้างนี้ ซึ่งทำให้โครงสร้างดูเป็นระเบียบและน่าพึงพอใจมากขึ้น

สถานะเมื่อวางเมาส์ (Hover) และสถานะเมื่อถูกเลือก (Focus)

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

ใน Figma ปกติแล้วสถานะ hover จะถูกออกแบบแยกไว้ แล้วเอามาแสดงผลด้วย "prototypes" ซึ่ง prototypes ก็คือโหมดการดูอีกแบบหนึ่งที่นักออกแบบ UX สามารถจำลองการใช้งานจริงได้ ดังนั้น สิ่งสำคัญเลยคือเราต้องดู prototypes พวกนี้ เพื่อที่จะได้เห็นว่าสถานะ focus และ hover จะเป็นยังไง

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

ขนาดตัวอักษร (Text Size)

ทุกคนน่าจะรู้กันดีว่าขนาดตัวอักษรสำคัญต่อความสามารถในการอ่านแค่ไหน ขนาดตัวอักษร (หรือที่เรียกกันในภาษา CSS ว่า "font size") ที่เล็กกว่า 14px รับประกันได้เลยว่าจะมีคนบางกลุ่มอ่านไม่ออกแน่นอน อย่างผมเอง ขนาด 12px นี่อ่านยากมากในสถานการณ์ปกติ หรือจริงๆ แล้วสำหรับผม อะไรที่เล็กกว่า 16px บนสองจอที่ผมใช้บ่อยๆ ก็ยังไม่ค่อยดีเท่าไหร่เลยครับ แต่ถึงแม้จะไม่พูดถึงเรื่องสายตาที่ไม่ดี ขนาดตัวอักษรก็ยังมีความสำคัญอย่างมากต่อองค์ประกอบอื่นๆ บนหน้าเว็บด้วย

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

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

ปกติแล้ว นักพัฒนาจะตั้งค่า property font-size ใน element body หรือ html เป็นค่า Pixel ตามที่นักออกแบบบอกมาใช่มั้ยครับ? ขอบอกเลยว่านี่เป็นสิ่งที่ "ไม่ควรทำอย่างยิ่ง" ครับ ห้ามตั้งค่า font-size หลักด้วยหน่วยวัดทางกายภาพ เช่น px, pt, cm, in เด็ดขาด! แต่ให้เราใช้วิธีการปรับขนาดจากขนาดตัวอักษรที่เบราว์เซอร์มีให้ โดยใช้เป็นเปอร์เซ็นต์แทนครับ

ตัวอย่างเช่น ถ้านักออกแบบกำหนดให้ขนาดตัวอักษรเริ่มต้นเป็น 18px เราก็ตั้งค่า font-size เป็น 112.5% ครับ เพราะในเบราว์เซอร์ส่วนใหญ่ ขนาดตัวอักษรเริ่มต้นคือ 16px ดังนั้นขนาดตัวอักษรที่แสดงบนหน้าเว็บก็จะใกล้เคียงกับที่ออกแบบไว้ ถ้าผู้ใช้ไม่ได้เปลี่ยนแปลงค่าเริ่มต้น

อีกวิธีหนึ่งที่ทำได้คือ ตั้งค่า font-size เป็น 62.5% ที่ element html วิธีนี้จะปรับขนาดตัวอักษรลงมาเหลือ 10px จากนั้นก็ตั้งค่า font-size ที่ element body เป็น 1.8rem ซึ่งจะทำให้ขนาดตัวอักษรเป็น 18px ในเบราว์เซอร์ส่วนใหญ่ที่ผู้ใช้ไม่ได้เปลี่ยนค่าเริ่มต้น

หลังจากนั้น ให้เรากำหนดขนาดตัวอักษรอื่นๆ ทั้งหมดโดยใช้หน่วย rem, em, หรือเปอร์เซ็นต์ครับ ตัวอย่างเช่น ถ้าเราต้องการให้ขนาดตัวอักษรในองค์ประกอบหนึ่งเป็น 24px และขนาดตัวอักษรพื้นฐานของหน้าเว็บคือ 112.5% ก็จะเท่ากับ 1.33rem หรือถ้าขนาดตัวอักษรพื้นฐานคือ 62.5% ก็จะเท่ากับ 2.4rem และอื่นๆ ในลักษณะเดียวกันครับ

บทสรุป

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

Thank: https://medium.com/@hayavuk/ui-ux-design-fundamentals-for-the-front-end-developers-688ba43eaed4