การออกแบบเว็บไซต์

สอนการออกแบบเว็บไซต์(Web Design) ใน 3 ขั้นตอน

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

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

การออกแบบเว็บ(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 วินาทีอันมีค่าของพวกเราขอรับ

2. อย่าใส่สิ่งที่ User รังเกียจ
จากการทดสอบเกี่ยวกับ 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 ของพวกเรา “ดียิ่งขึ้น” อย่าลืมดูด้วยว่ามันมีความใกล้เคียงกันมั้ย? มันไปร่วมกันได้มั้ย?

3. ทำให้ 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 จะไม่ทิ้งพวกเราไปไหนแน่ๆครับผม