หากเราจะเริ่มต้นออกแบบเว็บไซต์ขึ้นมาสักเว็บไซต์หนึ่ง เราควรคำนึงถึงอะไรบ้าง? บางเว็บไซต์แม้จะมีหน้าตาธรรมดาๆ แต่กลับมีคนเข้าวันละหลายแสนคน เค้าทำได้อย่างไร ในทางกลับกัน บางเว็บไซต์หน้าตาสวยงาม ลูกเล่นน่าตื่นตาตื่นใจ แต่กลับไม่มีคนเข้า ทำไมถึงเป็นเช่นนั้น? วันนี้ผมจะมานำเสนอประเด็นต่างๆ ที่เราควรนึกถึงเสมอเวลาออกแบบเว็บไซต์ ซึ่งจะช่วยให้งานออกมามีคุณภาพมากขึ้นครับ
สมมติเรากำลังมองหาร้านอาหารสักร้าน เพื่อที่จะนั่งทานอาหารกลางวันกับแฟน ในเวลาประมาณเที่ยงๆ ซึ่งคนกำลังเยอะมาก เมื่อเราเข้าไปในร้าน สิ่งแรกที่เราทำคือการกวาดสายตาไปรอบๆ ร้าน เพื่อหาที่นั่งที่ยังว่างอยู่ ถ้าเราหาไม่พบ เราก็จะเดินออกจากร้าน ไปหาร้านอื่น
การออกแบบเว็บไซต์(Web Design) ก็เหมือนกันครับ จากการสำรวจพบว่า User ไม่อ่านเนื้อหาทุกตัวอักษร แต่จะ Scan หาสิ่งที่ตัวเองสนใจในหน้านั้นๆ โดยใช้เวลาไม่เกิน 4 วินาทีเท่านั้น แถมส่วนใหญ่จะไม่เลื่อนหน้าจอ(Scroll) ลงมาด้านล่าง นั่นหมายความว่า User จะ Scan หาสิ่งที่ตัวเองสนใจ ภายในภาพแรกที่ตัวเองเห็น หากหน้าของเราไม่มีสิ่งที่ User ต้องการ หรือมี แต่นำเสนอไม่ตรงประเด็น จนทำให้ User คิดว่าเสียเวลานานเกินไปกว่าจะหาพบ เค้าก็จะจากเราไป นั่นหมายความว่า เราต้องใช้เวลา 4 วินาทีของเราให้คุ้มค่าที่สุด
จากหลายๆ การทดลองเกี่ยวกับ Eye tracking พบว่า User นั้น Scan เนื้อหาในเว็บไซต์เป็นรูปทรงคล้ายตัว “F” ครับ คือจะ Scan เนื้อหาด้านบนสุดตลอดทั้งแนว เนื้อหาที่อยู่ต่ำกว่าจะ Scan เพียงแค่ครึ่งทาง ส่วนเนื้อหาที่อยู่ล่างสุด จะ Scan เพียงแค่ด้านซ้ายสุดเท่านั้น ที่เป็นเช่นนี้ เพราะ User อ่าน Web Content เหมือนกับการอ่านหนังสือนั่นเอง คืออ่านจากซ้ายไปขวา และบนลงล่าง และนี่คือที่มาของการวางตำแหน่งของโลโก้ไว้ที่มุมซ้ายบนด้วยครับ
การทดลองข้างต้น ทำให้เรารู้ว่า ควรใส่สิ่งที่ User มองหาไว้ตรงจุดไหน ไม่ว่าจะเป็น โลโก้, ปุ่มสมัครสมาชิก, ปุ่มลงชื่อเข้าใช้ระบบ, กล่องค้นหาข้อมูล, ฟอร์มต่างๆ หากต้องการให้ User หาเจอได้ง่าย ให้เราวางตำแหน่งสิ่งเหล่านี้ไว้ตามแนวรูปตัว “F” ของหน้านั้นๆ
การนำเสนอสิ่งที่ User มองหา อย่างตรงประเด็น เป็นสิ่งที่สำคัญมากครับ เพราะถ้าหากเราพลาดตรงจุดนี้ ข้อหลังจากนี้ไป แม้เราจะทำดีแค่ไหน ก็ไม่มีความหมาย เพราะ User ได้ปิดหน้าเว็บเราไปแล้ว นึกไว้เสมอว่าหน้านี้ มีไว้ทำไม แล้วนำเสนอให้ตรงจุดครับ ให้ User เข้ามาแล้วรู้ได้ทันทีว่าเราจะสื่ออะไร อย่าให้ User ต้องคิด หรือคิดให้น้อยที่สุด ก่อนจะหมดเวลา 4 วินาทีอันมีค่าของเราครับ
จากการทดลองเกี่ยวกับ Usability ทำให้เรารู้จักกับ “Banner blindness” คือพบว่า User จะไม่สนใจ Ads(โฆษณา) ไม่ว่าจะมาในรูปแบบของ Banner Ads หรือ Text Ads ก็ตาม User จะมองผ่านไปโดยไม่สนใจ จะดีกว่ามั้ย? หากเรานำพื้นที่ตรงส่วนนี้มาใช้ให้เกิดประโยชน์มากขึ้น โดยการใส่สิ่งที่ User ต้องการจริงๆ เข้าไปแทน อย่าลืมว่าเรามีเวลาไม่มาก ในการทำให้ User ประทับใจ!
อย่างไรก็ดี “Banner blindness” จะเกิดขึ้นต่อเมื่อ User เข้ามาเพื่อที่จะค้นหาข้อมูลเกี่ยวกับเรื่องใดเรื่องหนึ่งโดยเฉพาะเท่านั้นครับ แต่หาก User เข้าเว็บไซต์เพื่อดูข้อมูลทั่วไป ไม่ได้เจาะจงหาอะไรเป็นพิเศษ กลับพบว่า User ยังคงให้ความสนใจกับ Banner ที่เคลื่อนไหวได้ รวมไปถึง Text ที่มีสีสันสดใสอยู่
บางคนบอกว่าไม่มีโฆษณา แล้วเว็บเราจะอยู่ได้อย่างไร? คำตอบคือผมไม่ได้บอกให้เราเอาโฆษณาออกให้หมดครับ แต่ให้เราจัดการกับพื้นที่ๆ เรามีอยู่ให้เกิดประโยชน์สูงสุด โฆษณามีได้ครับ แต่ต้องไม่สร้างความรำคาญให้แก่ User หรือไปทำให้ User ใช้งานได้ลำบากขึ้น ไม่เช่นนั้น โฆษณา จะเป็นตัวลดรายได้ของเราแทนครับ จะมีประโยชน์อะไร หากเราติดโฆษณาที่สร้างรายได้ให้กับเรามากมาย แต่โฆษณานั้น ไปสร้างความรำคาญให้กับ User เวลาผ่านไป คนเข้าชมเว็บเราก็จะน้อยลงไปเรื่อยๆ จนโฆษณาถอนตัวออกจากเราไปในที่สุด จำไว้เสมอว่า “อยากได้อะไรจากใคร เราต้องให้เค้าก่อน”
นอกจากเรื่องโฆษณาแล้ว ยังรวมไปถึง Graphics หรือ Effects ต่างๆ ที่เกินความจำเป็น จนอาจส่งผลเสียมากกว่าผลดี Graphics หรือ Effects สามารถใส่ได้ แต่ต้องให้อยู่ในความพอดี ไม่ใช่ว่าเราไปรู้จักเทคนิคนี้มานะ ในไทยยังไม่ค่อยมีคนเอามาทำนะ ก็เอาใส่ในเว็บตัวเอง จนลืมถามตัวเองว่า เราทำเว็บนี้เพื่ออะไร? เพื่อนำเสนอ Content หรือนำเสนอลูกเล่นแปลกใหม่กันแน่? ในการออกแบบเว็บไซต์ ให้เราโฟกัสไปที่ Content ของเราก่อนเสมอ แล้วใช้ Graphics หรือ Effects เป็นตัว “ส่งเสริม” ให้ Content ของเรา “ดีขึ้น” อย่าลืมดูด้วยว่ามันมีความกลมกลืนกันมั้ย? มันไปด้วยกันได้มั้ย?
สิ่งที่ User ให้ความสนใจมักเป็นพวก สโลแกน หรือ ข้อความสั้นๆ ที่มีสีสันสดใสครับ User ส่วนใหญ่ไม่ชอบอ่านข้อความยาวๆ เนื่องจาก Scan ยาก หาของที่ต้องการไม่เจอ หรือต้องใช้เวลานาน กว่าจะเข้าใจว่าข้อความนั้นต้องการจะสื่ออะไร
วิธีง่ายๆ ที่จะช่วยให้ User หาของเจอง่ายๆ คือการใช้ Headings(การใส่หัวข้อให้กับข้อความ) นั่นเองครับ หากจะเขียนบทความยาวๆ ให้เราแบ่งบทความของเราออกเป็นก้อนๆ (Text Blocks) โดยในแต่ละ Text Block นั้นให้เราโฟกัสอยู่แค่เรื่องเดียวเท่านั้น แล้วให้ใส่ Heading ให้กับ Text Block นั้นๆ ด้วยครับ โดยใช้คำสั้นๆ ที่จะช่วยให้ User เข้าใจได้ทันที ว่า Text Block นี้พูดเกี่ยวกับอะไร
หลังจากที่เราได้ Text Block พร้อมกับ Heading มาแล้ว หาก Text Block ยังยาวอยู่ ให้แบ่งออกเป็นย่อหน้า(Paragraph) แล้วให้เราเน้นความสำคัญให้กับข้อความด้วยการใช้ตัวหนา ตัวเอียง หรือขีดเส้นใต้ จะช่วยให้อ่านได้ง่าย และน่าสนใจมากขึ้นครับ
สุดท้าย อย่าลืมเว้นช่องไฟให้กับเนื้อหาของเราด้วยครับ ไม่ว่าจะเป็นระยะห่างระหว่างตัวอักษร(letter-spacing) ความสูงของแต่ละบรรทัด(line-height) รวมไปถึงระยะห่างระหว่างเนื้อหากับขอบของหน้า หรือ element ข้างเคียง(margin & padding) การเว้นระยะห่างที่พอเหมาะ จะช่วยให้เนื้อหาดูสบายตา น่าอ่านมากขึ้นครับ
ในการออกแบบเว็บไซต์(Web Design) ให้เรามอบสิ่งที่ดีที่สุดแก่ Users เสมอครับ อย่าเพิ่งคิดว่า เราอยากได้อะไรจากเค้าเป็นอันขาด เมื่อเราออกแบบโดยคำนึงถึง Users เป็นหลัก รับรองว่าเว็บเราจะมีคนเข้ามาแน่นอนครับ โดยที่เราแทบไม่ต้องโฆษณาอะไรมากมาย เมื่อคนรักเราแล้ว การสร้างรายได้ไม่ยากเกินเอื้อมแล้วละครับ ทั้ง 3 ข้อ ที่ผมพูดมา สามารถสรุปสั้นๆ ได้ว่า เราต้องทำของๆ เราให้ดีก่อน จากนั้นให้เรายกมือบอก Users ว่าเรามีของดีนะ สุดท้ายให้เราทำให้ Users รู้สึกสบายใจมากที่สุดเมื่อเค้ามาหาเรา เพียงเท่านี้ Users จะไม่ทิ้งเราไปไหนแน่นอนครับ
Credit : Siamhtml.com
