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

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

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

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

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

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

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

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

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

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

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

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

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

• การจัดเรียงหน้าแบบ Grid – การจัดหน้าเว็บในรูปแบบของตาราง จะทำให้เว็บดูเป็นระเบียบ สะอาดตา และหา Content ได้ง่าย

(ตัวอย่าง 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 ของเว็บไซต์คุณจะต้องดี (ขึ้น) แน่นอน

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

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

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