อยากออกแบบเว็บไซต์ มีอะไรบ้างที่ต้องแคร์

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

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

1.จุดประสงค์ของเว็บไซต์

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

2.เรียงลำดับความสำคัญ

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

3.จัดวางรูปแบบในการนำเสนอ

รูปแบบในการนำเสนอ จะเป็นการกำหนดหน้าตาให้กับเว็บไซต์ของเรา ว่าผู้ใช้จะได้สัมผัสประสบการณ์อย่างไรบ้าง จะได้รับความไหลลื่น / ความต่อเนื่องของเนื้อหาอย่างไร ซึ่งเรียกง่ายๆว่า ได้เข้าสู่การออกแบบโครงร่าง UX/UI ของเว็บไซต์

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

ตัวอย่างเช่น Pinterest ที่ใช้รูปแบบการนำเสนอแบบ Card-Base ให้ผู้ใช้ได้พบกับความหลากหลายของเนื้อหา ต่อเนื่องยาวลงไปเรื่อยๆ โดยมีช่องค้นหาขนาดใหญ่และปุ่มเมนูพาดอยู่ด้านบนสุด เป็นต้น

4.ความง่ายและสนุกในการท่องเว็บ

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

การสำรวจเว็บต้องเข้าใจง่าย

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

การมีปฏิสัมพันธ์จากเว็บต่อผู้ใช้

เช่น การแสดงตัวอย่างของเนื้อหาภายในขึ้นมาเมื่อเมาส์ลากผ่านหัวข้อ หรือ การแสดงแถบสีในส่วนที่ถูกเลือก หรือ การคลิกแล้วมีวงคลื่นรอบๆเมาส์ ฯลฯ

ขนาดและตำแหน่งต่างๆของปุ่ม

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

การเปิดหน้าเข้าสู่เนื้อหาย่อย

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

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

5.การใช้งานบนอุปกรณ์ที่แตกต่างกัน

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

6.สัญญาณอินเตอร์เน็ต

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

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

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

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

The FWA Favorite Website Awards เว็บที่ให้รางวัลเว็บจากความชอบของคณะกรรมการ คัดเลือกงานที่แปลกใหม่มารวบรวมกันไว้ในที่เดียว

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

ฝากแชร์ให้เพื่อนๆที่กำลังอยากมีเว็บไซต์เป็นของตัวเอง ได้รับทราบโดยทั่วกัน