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

ลองมาดูเว็บที่ผมสร้างอันแรกกันครับ มัน user-friendly ไหม

ตอนนั้นผมก็รู้สึกว่าเว็บที่ผมทำเองก็ไม่ได้ดูแย่ แต่มาดูในปัจจุบัน ผมรู้สึกว่าเว็บนี้ User Unfriendly ค่อนข้างมาก สังเกตจากเรื่อง Typography เลยเป็นอย่างแรก font ที่ใช้ทั้งเว็บเป็นแบบ mono ผมรู้สึกว่าการใช้ฟอนต์แบบ mono ค่อนข้างส่งผล Readability ที่ไม่ดีให้กับ user ถ้าใช้กับทั้งเว็บไซต์แบบนี้ อีกทั้ง เนื้อหาดูโล่ง ๆ แต่อะไรดูใหญ่ไปหมด

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

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

ส่วนที่สองกับส่วนที่สาม เราจะเห็นว่า ข้อความหัวข้อ projects นั้นจะมีเซตของโปรเจคที่ผมเคยทำไว้ แต่ปัญหาคือ หัวข้อโปรเจค Artsgoz Website นั้นดันใหญ่กว่าส่วน Projects สิ่งเหล่านี้ส่งผลอย่างไร ? คือ ลำดับ hierarchy มันต่างกัน การไล่ลำดับนั้นก็เพื่อให้เห็นจากสิ่งที่สำคัญมากสุดไปสิ่งที่สำคัญรองลงมา แทนที่ Project จะเป็น topic และดูสำคัญกว่าตัวหัวข้อโปรเจคแต่ละอัน แต่กลับกลายเป็นว่า หัวข้อย่อยดันใหญ่กว่าหัวข้อหลัก ซึ่งอาจทำให้ user สับสนได้ว่าอะไรเป็นอะไร มันดูกระจัดกระจายไม่สม่ำเสมอ

อีกทั้งในส่วนของ Projects นั้น จะเห็นได้ว่า element ที่ใส่ลงไปมีขนาดค่อนข้างใหญ่ เมื่อ user เข้ามาในเว็บเรา อาจให้ความรู้สึกอึดอัด การสร้างเว็บโดยใช้ grid system และมี margin/padding ให้กับ element ก็อาจจะเข้ามาช่วยในเรื่องนี้ ทำให้ทุกอย่างดูเป็นชิ้นเป็นอัน ไม่ใช่เป็นก้อนแบบนี้เสียทีเดียว

ในส่วน Title ของโปรเจคดังกล่าว กับ Description นั้น ขนาดต่างกันค่อนข้างมาก และไม่มีการเว้นระยะจากกัน อาจทำให้อ่านรายละเอียดเกี่ยวกับโปรเจคต่าง ๆ ได้ยากมากขึ้น

Monospaced เป็น typewriter-style typeface ตัวอักษร และ spacing ก็จะฟิกไว้ ทำให้ความกว้างของแต่ละตัวอักษรออกมาเท่ากัน (ดูอ้างอิง, Figma, nd.) การใช้ monospaced ที่เราเห็นกันส่วนใหญ่ ก็มีไว้ใช้กับพวก code block หรือ command ต่าง ๆ การที่นำมาใช้กับเนื้อหาธรรมดา ก็อาจจะไม่ใช่ practice ที่ทำกันเป็นประจำ

จากรูปภาพด้านบนจะเห็นว่าข้อมูลทั้งหมดใช้ monospaced ทั้งหมดเลย การใช้ทั้งหมดแบบนี้อาจจะส่งผลให้ user ต้องใช้เวลามากขึ้นในการอ่าน การเลือก typeface อื่น ๆ ก็อาจจะเป็นตัวเลือกที่เหมาะสมมากกว่านี้

การเลือกใช้สีในเว็บไซต์เดิมนั้นจะเห็นได้ว่า ผมไม่ได้มีสี primary ซึ่งมันไม่ได้สร้าง identity ให้กับตัวเว็บของผมเลย และปัญหาอีกอย่างคือเรื่องของ color contrast ของตัว background และ text ในแต่ละ element ที่ไม่ได้พิจารณาตามหลัก WCAG Accessibility Criteria

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

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

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

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

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

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

จากที่ผมได้ยกตัวอย่างไปนั้น ผมรู้สึกว่า แนวคิดเรื่อง UX ค่อนข้างมีผลอย่างมากต่อมนุษย์ สามารถสร้าง impact บางอย่างให้กับ product ของเราได้

ในพาร์ทหน้า ผมจะขอแนะนำเรื่องการใช้ความรู้เรื่อง UX/UI มาใช้ปรับปรุงกับพอร์ตโฟลิโอของผมที่ (อาจจะ) ให้ user เกิด impression ที่ดีขึ้นได้ครับ 😃