Blog

การออกแบบเว็บไซต์ที่ดี..ตอนที่ 9 เว็บที่ใช้งานง่าย

ใน ตอนที่ 8 … ดูดีและใช้งานง่าย เป็นเรื่องของความสวยงามของเว็บไซต์ที่นอกจากจะสวยแล้วต้องใช้งานได้ง่ายด้วย การดีไซน์แบบ Simple & Clean จะช่วยตอบโจทย์ข้อนี้ใด้  Simple & Clean คือการมีหน้าตาที่สวย เรียบง่าย ไม่เลอะเทอะ เป็นที่ยอมรับกันว่า “ดูดี มีสไตล์” แล้ว “เว็บที่ใช้งานง่าย” ล่ะ..มันเป็นยังไง?

หากเว็บใดมีสิ่งต่อไปนี้ :

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

ยินดีด้วย..ขอเตรียมตัวไว้ให้พร้อมครับ..

รายการ “ล่าท้าผี” จะมามอบรางวัลเว็บไซต์ที่มีผีอยู่มากที่สุดให้กับคุณ

เนื่องจากตัวอย่างที่กล่าวมาข้างบน เป็นตัวทำลายประสบการณ์ในการใช้งานที่ดี (UX) ชั้นเยี่ยมเลยครับ

ถ้าเว็บมันใช้ยากขนาดต้องมีคู่มือให้ศึกษากัน…อย่าทำเลยครับ แล้วถ้ามันโหลดช้าหรือเข้าได้มั่ง ไม่ได้มั่งเอา Smartphone เข้ามาก็อ่านไม่ได้ ไม่รองรับวีดีโอไม่เล่นอีกต่างหาก … ผมไปเว็บอื่นดีกว่า

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

ครับ Simple & Clean สามารถช่วยในเรื่องของการใช้งานได้ในระดับหนึ่ง แต่ในสายเลือด ในDNA ของเว็บไซต์ควรจะมีสิ่งเหล่านี้เป็นองค์ประกอบเสมอ

  • โหลดเร็ว – แต่ละหน้าของเว็บควรมีขนาดเล็กที่สุดเท่าที่จะเล็กได้ และไม่ควรมีขนาดใหญ่กว่า 2 MB คุณสามารถทดสอบเพื่อดูว่าเว็บของคุณโหลดได้เร็วเพียงใดที่ tools.pingdom.com พิมพ์ url ของหน้าที่ต้องการทดสอบเข้าไป ก็จะได้ผลลัพธ์ดังนี้

pingdom

ผลลัพธ์ของ Pingdom ยังบอกให้เรารู้ด้วยว่าอะไรบนหน้าที่ถูกทดสอบมีขนาดใหญ่และใช้เวลาโหลดนานเกินไป เราก็ไปจัดการแก้ไขหด้อย่างง่ายดาย

  • การจัดเรียงหน้า – ควรจัดให้เป็นระเบียบ มีการใช้ย่อหน้าและ Bullet  มีการใช้ขนาดตัวอักษรที่แตกต่างกันและมีขนาดใหญ่เล็กไม่เท่ากัน โดยเรียงจากใหญ่ไปเล็กดังนี้  ชื่อเรื่อง หัวข้อ และหัวข้อย่อย แต่อย่าให้มากกว่า 3 ขนาด (ไม่รวมขนาดของเนื้อความปกติ) นะครับ เพราะขนาดที่ 4 เป็นต้นไปจะเริ่มไม่เห็นความแตกต่างระหว่างขนาด
  • การจัดเรียงหน้าแบบ Grid – การจัดหน้าเว็บในรูปแบบของตาราง จะทำให้เว็บดูเป็นระเบียบ สะอาดตา และหา Content ได้ง่าย

ตัวอย่าง GRID

 

(ตัวอย่าง GRID Lay-out)

  • การใช้ฟอนต์ – ไม่ควรใช้ฟอนต์ที่มีลวดลายหรือหาง หรือ อะไรก็ตามที่ทำให้อ่านยาก ขนาดตัวอักษรปกติในกรณีที่เป็นฟอนต์ San Sarif ที่สามารถอ่านได้อย่างสบายๆ คือ 16px ทั้งนี้ขอให้ดูประเภทของฟอนต์ด้วย เพราะแต่ละประเภทจะมีขนาดไม่เท่ากัน
  • ภาพ – การใช้ภาพย่อมเป็นเรื่องที่ดี ภาพที่สวยทำให้ UX ดีขึ้น แต่ข้อควรระวังคือขนาดของไฟล์ที่ใหญ่เกินไปจนทำให้ภาพและหน้าเว็บโหลดได้ช้า  ถ้าภาพที่นำมาใช้มีตัวอักษรอยู่ในภาพขอให้ใช้ไฟล์แบบ PNG เนื่องจาก PNG ให้รายละเอียดของภาพได้ดีตัวอักษรจึงมีความคมชัดและอ่านได้ง่าย แต่ PNG มีขนาดไฟล์ใหญ่กว่า JPG ดังนั้นหากภาพนั้นไม่มีตัวอักษรควรจะใช้ JPG เพราะจะโหลดได้เร็วกว่าและให้รายละเอียดของภาพได้ดีไม่แพ้ PNG เลย

TIPS : ภาพ JPG ที่คุณภาพ 99% จะมีขนาดเล็กกว่าครึ่งหนึ่งของ JPG ที่คุณภาพ 100%

  • Navigation – มันต้องง่ายสำหรับผู้ใช้งานที่จะเสพย์เนื้อหาหนึ่งไปยังอีกเนื้อหาหนึ่ง…ไปยังอีกเนื้อหาหนึ่ง…ไปยีงอีกเนื้อหาหนึ่ง…ไปยังเนื้อหาใดๆ ได้อย่างทั่วถึงบนเว็บไซต์ของเรา การวัดว่า Navigation ดีขนาดไหน กฏ 3 คลิ๊ก ตอบได้ดีที่สุด ถ้ามีส่วนใดในเว็บต้องใช้มากกกว่า 3 คลิ๊กในการเข้าถึง ยินดีด้วย..คุณสอบตกครับ วิธีแก้ทำได้ด้วยการจัดลำดับชั้นของเมนูใหม่ การใช้ Breadcrumbs การใช้ Search Box การใช้ Call-to-action เป็นต้นตัวอย่าง Breadcrumbs : Home > How to > Web Design > การออกแบบเว็บไซต์ที่ดี..ตอนที่ 9
  • สี – แต่ก่อน Designer จะมีกฏของการจับคู่สี แต่ Flat Design และ Simple & Clean ได้แหกกฏของการจับคู่สีไปอย่างไม่มีชิ้นดี ดังนั้นสิ่งที่ต้องระวังของเรื่องสีจึงเหลือเพียง อย่าให้สีของ Font กับ Background ใกล้เคียงกันมากเกินไป (ที่เรียกกันว่า “จม”) จนทำให้อ่านลำบากหรืออ่านไม่ออกเลย

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

หากทำตามที่กล่ามาข้างบนนี้ไปพร้อมๆ กับ 6 วิธีเพิ่ม UX ให้เว็บไซต์ ผมรับรองว่า UX ของเว็บไซต์คุณจะต้องดี (ขึ้น) แน่นอน

ถ้าไม่เชื่อ..ผมท้าให้ลองไปทำดูครับ!

 

ตอนหน้าเป็นตอนสุดท้ายของมินิซีรียส์ การออกแบบเว็บไซต์ที่ดี แล้วนะครับ

(แน่ะๆ…ไม่ต้องแอบดีใจเลย ผมก็ดีใจเหมือนกัน..จบซะที)





Leave a Reply








สวัสดี..ครับ

Search

Tag Cloud

#Responsive Web #User Interface #ประสบการณ์การใช้งาน Digital Marketing F. Hilaire OST. ฟ. ฮีแลร์ OST. ฟ. ฮีแลร์ ครูฝรั่งแห่งสยามประเทศ SEM SEO SMM UI User Experience UX กลยุทธ์ การออกแบบเว็บที่ดี การออกแบบเว็บไซต์ การออกแบบเว็บไซต์ที่ดี การเลี้ยงปลาเสือตอ ความหวังในการเพาะพันธุ์ ปลาเสือตอ ความเป็นมาของปลาเสือตอ คุณลักษณะของเว็บไซต์ที่ดี จำนวนผู้ใช้งานมือถือ จำนวนผู้ใช้งานอินเตอร์เน็ต ดรุณศึกษา ประสบการณ์ชีวิต ปลาเสือตอ ปลาเสือตอพันธุ์ไทย ปลาเสือตอลายคู่ ปลาเสือตอลายใหญ่ ปลาเสือตอเขมร ฝึกพูดภาษาอังกฤษ พระมหาชนก ฟ.ฮีแลร์ ครูฝรั่งแห่งสยามประเทศ ภาพยนตร์ ฟ. ฮีแลร์ วิธีดูปลาเสือตอ วิธีเพิ่ม UX วิธีเลี้ยงปลาเสือตอ ศาสนา ศาสนาพุทธ หนัง ฟ. ฮีแลร์ องค์ประกอบของเว็บไซต์ที่ดี ฮวงจุ้ย ฮวงจุ้ยที่ทำงาน เหรียญพระมหาชนก โรงเรียนอัสสัมชัญ