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

ก่อนอื่นเลย ผมขอพรีวิวให้ชมก่อนครับ

ในบทความนี้ผมจะมานำเสนอการนำ UX/UI Design Principles มา implement กับ เว็บไซต์ปัจจุบันของผมอย่างไรบ้างครับ จริง ๆ อยากเล่าถึง process ทั้งหมด ซึ่งส่วนตัวรู้สึกว่ามันเยอะมาก เช่น พอเวลาเราทำ element แต่ละอันออกมาแล้ว test แล้วมา reflex ดูอีกที ก็กลับไปแก้ ทำแบบนี้วนไปหลายรอบมากครับ UX มันต้อง test เยอะจริง

วินาทีแรกที่ user เห็นนั้น อาจจะเกิดคำถามตามมาดังนี้

และคำถามตามมาอื่น ๆ อีกมากมาย ใด ๆ ก็แล้วแต่ ความรู้เรื่อง ux จะเข้ามาตอบให้กับสิ่งเหล่านี้

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

จากตัวอย่างข้างต้นคือ ผมแทบจะไม่ได้เข้าใจ user เลย คิดเองทำเอง ผลลัพธ์คือ อาจจะออกมาแย่ หากลูกค้าที่เข้ามา เขาใช้มือถือล่ะ แต่เว็บผมไม่รองรับ responsive design นะ ปัญหาเกิดแล้ว?! user อาจจะอ่านไม่รู้เรื่อง เกิด impression ที่ไม่ดี ละออกจากเว็บไปดูเว็บอื่น ผมเสียลูกค้าไป 😨

ผมมองว่าเราจะทำอะไรออกมาแต่ละอย่างคือ ควรเข้าใจคนที่เขาจะมาใช้สิ่งที่เราทำ จากตัวอย่างข้างบนคือ ผมต้องการให้ลูกค้าซื้อสินค้าของผม แต่ปัญหาของผมคือ เว็บไซต์ไม่ได้ออกแบบมาดี ไม่ได้สนใจ user ขนาดนั้น จึงทำให้ผมเสียลูกค้าไป การนำความรู้เรื่อง user experience มาใช้ก็จะเป็นทางออกให้กับปัญหาที่ผมเจออยู่ คือ achieving user's task!

ผมอาจจะศึกษาว่าลูกค้าเป็นใคร ชอบอะไร ทำไมเขาถึงมาดูหน้าเว็บไซต์ผม แล้วเขาจะมี interact อย่างไรกับเว็บไซต์ของผม กระบวนการที่ผมได้พูด ๆ ไปข้างต้นก็เป็นอีกหนึ่งในขั้นตอนของการศึกษาผู้ใช้ แต่ในบทความนี้ผมไม่ได้ลงรายละเอียดเกี่ยวกับ process ตรง ๆ

พอเราเข้าใจแล้วว่า user เราเป็นยังไง (อาจสร้าง persona, journey map, etc.) ก็มาถึงขั้นตอนระดมสมอง เทส ทำแบบนี้วน ๆ ไป จนกว่าจะได้ outcome ที่ดีที่สุดออกมาให้ user ของเราเพื่อให้ user ทำ task ได้สำเร็จ (เช่น อาจซื้อของกับร้านเรา)

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

ในงานนี้ ผมอาจจะเน้นอธิบายเรื่อง ui design เป็นส่วนใหญ่ โดยผมก็ได้นำหลักการออกแบบต่าง ๆ รวมไปถึง patterns มาปรับใช้กับงาน ซึ่งหลาย ๆ คนอาจจะเคยได้ยิน เช่น gestalt principles หรือ common region และอื่น ๆ

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

ในภาพคือผมแบ่งเป็น 4 ส่วนที่ อยากจะเก็บไว้ในเว็บไซต์ของตนเอง แต่ตอนทำงานจริง ผมได้ยุบ Participation กับ Certification ไว้เป็นหมวดหมู่เดียวกัน

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

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

ก่อนที่ผมจะเข้าไปเล่าให้ฟังว่างานของผมประกอบขึ้นมาอย่างไรนั้น ผมอยากพาไปรู้จักกับ design patterns ครับ

ในโปรเจคนี้ผมนำ design patterns มาใช้กับงานในหลาย ๆ ส่วนครับ จริง ๆ เยอะมาก แต่ผมอาจจะนำมาเล่าได้ไม่หมดครับ 😂 โดยที่จะเล่าถัดจากนี้ผมจะเล่า

ในหน้าแรกของผม แบ่ง layout เป็น 2 ส่วน คือส่วนข้อความ และ ส่วน navigation นำทางให้ user ไปยังหน้าอื่น ๆ โดยที่ในหน้าแรกผมได้แบ่ง ให้ฝั่งข้อมูลของผมมีขนาดที่ใหญ่กว่าอีกฝั่ง และแบ่งโดยการใช้ gap แบ่งช่องว่างให้ user อาจเดาได้ว่าในหน้านี้มี ทั้งสองเป็นคนละส่วนกัน

การทำแบบนี้อาจเรียกว่าการ grouping ของสิ่งที่มันเหมือนกัน และ isolate ของสิ่งที่ต่างกันออกมา สิ่งนี้คือ proximity ใน gestalt principles นั่นเองครับ🥸 ซึ่งมาก็ได้เอามาใช้กับหน้าอื่น ๆ เพื่อจัดให้ element เป็นกลุ่ม ๆ เห็น relationship ของแต่ละสิ่งได้ครับ (Jenifer, 2010)

Heading ข้างบน ผมมีการใช้ ขนาดตัวอักษรที่ใหญ่กว่าเพื่อดึงดูดสายตาผู้ใช้งาน ในหัวข้อ Reach me via ผมก็ใช้ขนาดของฟอนต์ที่ต่างกันออกไปเพื่อให้ user แยกออกว่าอะไรเป็นหัวข้อ อะไรเป็น subset สิ่งนี้ก็อาจเรียกว่าเป็นการใช้ visual hierarchy มาช่วยจัดการลำดับความสำคัญของข้อมูล

อย่างในหน้า blogs ผมก็ได้ทำการแบ่งหัวข้อบทความ เป็นสอง column โดยที่ในแต่ละคอลัมน์มีขนาดเท่ากัน การแบ่งแบบนี้คือ ทำให้ user เห็นว่าสองคอลัมน์นี้ มีความสำคัญพอ ๆ กัน เป็น alternative choice ให้ user สามารถเลือกได้ตามความสนใจของตนเอง

Focal points ก็เป็นอีกหนึ่งอย่างที่มาใช้กำหนด visual flow ให้กับ user ครับ อย่างในหน้าแรกของผม ผมได้ใช้สีมาทำเป็น focal point นำทางให้ user ไปยังหน้าอื่นได้ focal points คือจุดโฟกัสที่ user จะต้องมองมาแน่ ๆ แต่ การมี focal points ที่มากเกินไปก็อาจจะลดทอนความสำคัญของสิ่งที่เราอยากจะโฟกัสได้

ในส่วนถัดไปผมขอยกตัวอย่างการใช้ Design Pattern ที่ผมเอามาใช้ในโปรเจคนี้กันนะครับ

แล้วเราจะทำให้เหมือนกันทำไม? เพื่อให้ user รู้ครับว่าเรากำลังอยู่ในหน้าไหน และกำลังหาอะไรอยู่ อีกทั้งยังส่งผลในเรื่องภาพลักษณ์ของเว็บไซต์เราด้วยครับ

ลองมาดูตัวอย่างการปรับใช้ visual framework ของผมนะครับ

ผมกำหนดขนาด margin แกน x หรือ ฝั่งซ้ายขวาไว้ที่ 8 rem สำหรับหน้าจอที่ขนาด min-width: 1024px ครับ หากขนาด device เล็กกว่านั้นผมจะปรับมาใช้เป็น 1.5 rem ครับ ส่วน margin top อยู่ที่ 4 rem ครับ และผมปรับแบบนี้ไว้กับทุก ๆ หน้าเพื่อคงความ consistency ไว้ครับ

ส่วน Title ผมก็ทำให้เหมือนกันทั้งสามหน้าครับ ทั้งหน้า Projects, Blogs, และ Experience และ element รองลงมาผมก็แบ่งให้เป็น 2 คอลัมน์เหมือนกัน เพื่อคงความ consistency ไว้ครับ และเพื่อให้ user เกิดความชินกับ layout ที่ผมได้วางเอาไว้ครับ พูดอีกอย่างเหมือนให้เขารู้คาแรคเตอร์ของผมครับ

Titled Section คือการที่แบ่งสัดส่วนของแต่ละหน้าโดยใช้ title มาบ่งบอก user ครับว่ากำลังอยู่หน้าไหน อย่างของผมในหน้า expreience ผมเขียนไว้ว่า “See how I grew up!” จริง ๆ ผมไม่อยากเขียนคำว่า Experience ไปเฉย ๆ เพราะการคิดแต่ละคำออกมาก็เป็นหนึ่งในกระบวนการ UX เช่นเดียวกัน

ผมมองว่าคำที่ผมเขียนมานั้นผมอยากสร้าง characteristic feature ให้กับตัวหน้าเว็บไซต์ผมครับ อีกอย่างคือ ผทอยากได้รับ attention และอยากให้ user รู้จักผมมากกว่าคำแค่ว่า experience ครับ

จริง ๆ global navigation เป็นหนึ่งใน navigation model ครับ อย่างในหน้าแรกส่วนทางขวามือที่ผมได้เล่าไปในส่วน focal point อันนั้นก็เป็นอีกหนึ่งใน navigation model ครับ

ในโปรเจคนี้ผมได้ทำ navbar และ footer เพื่อให้ user สามารถเลือกไปดูข้อมูลได้ตามความต้องการครับ

ข้างบนนี้เป็น navbar ในขนาด desktop size ครับ หาก min-width ต่ำกว่า 1024px ผมจะเปลี่ยนไปใช้แบบ popup navbar แทนครับ

จากตัวอย่างข้างบนนั้นคือ navbar ที่รองรับ responsive design ครับ และเมื่อ user เอาเมาส์ไปชี้ที่แต่ละหัวข้อ ก็มี action ตอบรับกลับมาเพื่อให้ user รู้ว่ากำลังทำอะไรอยู่ จากในคลิปคือ เมื่อชี้ที่หัวข้อ blog หัวข้ออื่นก็จะมี text ที่สีจางลง เพื่อเน้นให้ user รู้ว่ากำลังจะไปหน้า blog นะ ประมาณนี้ครับ

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

จากภาพด้านบนเป็น บล็อกเวอร์ชั่นล่าสุดครับ นอกจากปรับสีแล้ว ผมปรับขนาดความกว้างของ ตัว paragraph ไว้ด้วยครับ เพราะ จุดโฟกัสของตามนุษย์ไม่ได้กว้างขนาดนั้น หากจะต้องมานั่งอ่านบทความที่ ความกว้างของ paragraph กว้างเกินไป อาจส่งผลให้ user เหนื่อยสายตาที่จะต้องกวาดตามอง

สังเกตเพิ่มเติม ในส่วนบทความผมใช้ตัวอักษรแบบมี loop เพื่อให้ อ่านได้ง่ายครับ หากเราจะใช้ typeface แบบไม่มี loop ก็อาจจะส่งผลแย่ต่อผู้อ่านครับ อารมณ์เดียวกับใช้ comic sans กับทั้งพารากราฟครับ

อย่างตัวอย่างด้านบนนี้ จะเห็นได้ว่า อันหนึ่งจะดูข้อมูลได้ง่ายกว่า และไม่ได้ดูว่าทุกอย่างมันดูสำคัญเท่ากันหมด นั่นเป็นเพราะผมใช้สีเข้ามาช่วยในเรื่องของ visual hierarchy ครับ หากใน Figma บางคนอาจจะมีสี Primary และถ้าอยากได้สีไว้ใช้กับ body text ก็อาจจะปรับ HSL ในส่วน Lightness ครับ

หลังจากที่ผมใช้สีเข้ามาช่วยจัดลำดับความสำคัญแล้ว ก็อาจจะช่วยให้ user สามารถดูหน้าเว็บได้สบายตามากขึ้นครับ

อีกทั้ง การใช้รูปเป็นแบบทั้งก้อน stack กันหลาย ๆ ชั้น ผมอยากให้ลองจินตนาการว่าทั้งสองฝั่งเป็นแบบนี้ เราจะพบว่า แทบไม่มีพื้นที่โล่ง ๆ ให้กับ user การ clustering หรือ crowding อาจทำให้ user เกิดความอึดอัด ซึ่งอาจส่งผลไม่ดีกับ user (Jenifer, pp.492)

หลังจากตัดสินใจได้ผมจึงเลือกแบบที่สาม และปรับ margin ระหว่าง text และ image กับ line clamp ให้เหลือเพียง 3 บรรทัดครับ ลองดูผลลัพธ์ด้านล่างนี้ครับ

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

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

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