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

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

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

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

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

เนื้อหาเป็นหมวดหมู่ สำคัญมาก เนื้อหาต้องจัดหมวดหมู่ ผู้เยี่ยมชม จะได้หาข้อมูลได้อย่างง่ายดาย และไม่สับสน ว่าอะไร อยู่ตรงไหน

ต้องอ่านง่ายสบายตา (Read Ability) ตัวหนังสือที่เราใช้นั้นต้องไม่เล็กเกินไปหรือไม่ใหญ่เกินไป (ปัจจุบันมีการใช้ CSS Style เพื่อกำหนดให้กับขนาดหรือสีของตัวอักษรแบบตายตัว)และควรใช้สีที่ตัดกับแบ็คกราว เช่นแบ็คกราวสีขาวไม่ควรใช้สีเขียวอ่อน,เหลือง หรือสีอื่นที่อ่อนๆจางๆ

โหลดไม่ช้าหน้าไม่ยาว (Fast Load) ส่วนนี้สำคัญนะครับ ถ้าคุณทำเว็บออกมาแล้วโหลดช้ามากก็จะทำให้ลูกค้าหันไปดูเว็บอื่นระหว่างรอ หรือร้ายกว่านั้น ปิดเว็บของเราไปเลยก็ได้ แต่ก็อย่าดงว่านะครับ Internet ประเทศไทยยังไม่พัฒนาเลยช้านิดหน่อย ถ้าช้าแบบพอทนได้ก็รอกันต่อไป ส่วนที่ว่าหน้าไม่ยาวนั้นคือ เว็บบางเว็บ(ส่วนใหญ่จะเป็นเว็บพอทอล เช่น hunsa,sanook) จะทำหน้าที่ยาวมาก กว่าจะเลื่อนสกอลบาร์ลงไปถึงเลื่อนเม้าส์เลื่อนลูกกลิ้งกันจนจะสุดโต๊ะ(เว่อไป!..) เอาเป็นว่า จะให้ดีไม่ควรยาวเกิน 3 หน้าจอครับ

อัพเดทข่าวให้บ่อย (Update) ส่วนนี้เป็นจุดเชิดชูของเว็บเลยนะครับ ผมขอร้องเลยครับว่าถ้าทำเว็บแล้วอย่าทำครั้งเดียวทิ้ง ขอให้ทำแล้วทำตลอดไปเรื่อยๆเลยครับ (พวกทำครั้งเดียวแล้วไม่อัพเดทน่าจะเหมาะกับทำเว็บแนวประวัติของตัวเองมากกว่า) เพราะผมเข้าไปหลายเว็บตามเว็บสมัครเล่นมีประมาณ 60% เลยครับที่ทำแล้วปล่อยทิ้งไว้ไปดูกี่ทีกี่ครั้ง Last Update ก็ยังอยู่ที่ 02/06/1999 เจออย่างงี้ก็น่าเบื่อนะครับ ผมขอแนะนำว่า ถ้าจะให้ดีข้อมูลควร update ทุกๆ 2 - 3 วันต่อครั้ง หรือ 1 อาทิตย์ครั้ง หรือ 15 วันครั้ง หรือถ้าเดือนละครั้งอันนี้ก็ไม่ไหวนะครับ แต่ถ้าท่านไม่มีเวลาจะ update จริงๆ ควรจะเขียนกล่าวไว้ที่หน้าเว็บว่าจะงด update ชั่วคราวเพื่อจะได้ไม่เสีย creadit ของตัวเองครับ และให้ลูกค้าติดตามมาดูบ่อยๆด้วย

อย่าปล่อยให้มีคำผิด (Good Spelling) ถ้าท่านทำเว็บมาแล้วปล่อยให้มีคำผิดขึ้นมายิ่งเป็นข้อความใหญ่ๆแล้วด้วยจะทำให้เว็บเราดูด้อยไปเลยครับจะดูเหมือนกับว่า webmaster เว็บนั้นไม่เป็นมือโปรเลย แต่สำหรับคำผิดเล็กๆน้อยๆ ตามบทความถ้าท่านมีเยอะจนไม่สามารถตรวจสอบได้ทุกหน้าก็พออนุโลมได้ครับ

ทุกทิศมีที่ไป (Navigation Bar) การหลงในเว็บเพจหงุดหงิดกว่าการเดินหลงในห้างอีกนะครับ เพราะในเว็บมันไม่มีอะไรให้ดูนอกจากหน้าจอ และก็เสียเวลามากกว่า และรู้สึกว่าตัวเองโง่ไปถนัดตาเลยว่าทำไมกะอีแค่เว็บๆเดียวทำเราวุ่ววายไปหมด ดังนั้นทุกหน้าเราต้องมีเมนูไปกลับหน้าแรกและหน้าอื่นๆติดอยู่เสมอ เพื่อความสะดวกของลูกค้า

เครื่องหมายมีให้ติดตาม (Use Sign) ภาพหนึ่งภาพแทนความหมายได้พันคำ การใช้เครื่องหมายที่ง่ายต่อความเข้าใจ เช่น "ลูกศร" ที่จะนำทางให้คุณคลิ๊กเพื่อไปดูรายละเอียดในหน้าถัดไป เครื่องหมาย หรือสัญลักษณ์ใด ๆ ที่สามารถทำให้ลูกค้ารู้ว่า คุณกำลังจะบอกอะไรกับเขา

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

ทุกคำชอบต้องมีโชว์ (Testimonial) คำชมจากลูกค้านั้นมีความหมายและมีความสำคัญมาก มันคือตัวที่แสดงถึงความเชื่อใจ และสร้าง Creadit ให้เราได้มากกว่าการที่เราจะมานั่งชมมตัวเอง ดังนั้นถ้าเป็นไปได้น่าจะเอามาโชว์เพื่อให้ลูกค้าคนอื่นเห็นและเกิดความมั่นใจ ยิ่งในเว็บที่เกี่ยวกับ E-commerce

เบอร์โทรชัดไม่ขัดตา (Logo, Brand Name & Tel No.) ตัวนี้ไม่ใช่แค่เบอร์โทรอย่างเดียวนะครับ มันรวมไปถึงข้อมูลที่ใช้ติดต่อเราทั้งหมด ไม่ว่าจะ เบอร์โทร E-mail ICQ logo แผนที่ หรืออื่นๆ เราควรจะโชว์ให้ชัดเจนและเป็นจริงที่สุดเพื่อการติดต่อกลับที่สะดวกหรือเป็นไปได้ให้ติดตั้งสคิ้ปในการติดต่อกลับแบบอัตโนมัติก็จะทำให้ง่ายและรวดเร็วขึ้น

เพื่อลูกค้าใช้อ้างอิง (Reference Address) การที่คุณใส่ที่อยู่ที่ติดต่อได้เข้าไปที่ด้านท้ายของทุกเว็บเพจ ช่วยสร้างโอกาสธุรกิจให้กับคุณได้ ทำไมหรือครับ เพราะนอกจากลูกค้าจะจำได้ว่า ที่ติดต่อหรือธุรกิจของคุณอยู่ที่ไหน เขาก็จะติดต่อได้ทันที นอกจากนี้ เวลาที่ลูกค้าพิมพ์เว็บเพจของคุณออกไป ที่อยู่ที่ติดต่อเหล่านี้ก็จะติดไปด้วย ซึ่งหากเป็นการส่งต่อเอกสารนั้นให้กับผู้อื่น คุณก็จะได้กลุ่มเป้าหมายที่สามารถติดต่อคุณได้ทันทีโดยไม่ต้องออนไลน์ เพื่อค้นหาข้อมูลติดต่อให้วุ่นวายแต่อย่างใด (เช่นเว็บ 2capsule ถ้าท่านต้องการ Print บทความก็จะมี logo และ URL ติดอยู่ เพื่อการโปรโมทไปในตัว) จะเหมาะกับเว็บแนว E-Commerce มากๆ

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

ทุกอย่างง่ายทำได้เอง (Help) ส่วนนี้จะคล้ายๆกับ FAQ แต่ว่ามันจะเป็นส่วนที่สอนการใช้งานของเว็บของคุณ ยิ่งเว็บของคุณมีระบบเยอะก็จำเป็นที่จะต้องมี Comment หรือคำแนะนำในการใช้ทุกจุด เพื่อความไม่ผิดพลาดของลูกค้า

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

ต้องเกรงใจลูกค้าเรา (Friendly Dialog) การเกรงใจในที่นี้หมายถึงการใช้คำพูดในเว็บ ควรใช้ให้เหมาะสม และเป็นกันเองที่สุดหรือสากลที่สุด เพื่อการติดต่อสื่อสารที่ง่าย และเป็นมิตร ยิ่งใน E-Commerce ถ้าลูกค้าเป็นมิตรกับเรา เขาก็ย่อมจะเลือกซื้อสินค้าของเรามากกว่าเว็บอื่นที่ไม่เป็นมิตร

ลดขนาดภาพให้เล็กสวยคงเดิม (Fix Image Size) การลดขนาดของรูปในที่นี้ผมไม่ได้หมายความว่า ให้เอารูปขนาด 500 x 500 มาย่อในโปรแกรมเขียนเว็บให้เลือก 200 x 200 นะครับ เพราะการย่อแบบนั้น มันย่อให้รูปที่เราเปิดดูเล็กลงได้จริงแต่ขนาดหรือ Size นั้นก็ยังเท่าเดิม เวลาโหลดก็โหลดนานเท่าเดิมดังนั้นมันจะไม่ช่วยอะไรขึ้นมาเลย แต่สิ่งที่ผมจะบอกคุณคือ ให้ย่อขนาด หรือลดขนาดของภาพโดยใช้โปรแกรมพวก Photoshop หรือโปรแกรมเกี่ยวกับการแต่งภาพอื่นๆ เพราะการย่อขนาดในนั้นจะช่วยทำให้ภาพของคุณลดขนาดตามไปด้วย แต่การลดขนาดนั้นคุณก็ต้องมีความรู้ทางโปรแกรมกราฟฟิกนั้นไม่น้อยเหมือนกัน เพราะเราต้องลดขนาดรูปให้ได้เยอะที่สุดแต่ยังสวยคงเดิม(คงเคยเห็นนะครับ รูปที่ ขนาด 50KB กับ 45KB สวยเหมือนกัน เพราะคนที่ย่อขนาดนั้นมีความสามารถพอครับ) แต่ปัจจุบันมีโปรแกรมออกมาเพื่อการลดขนาดของรูปโดยเฉพาะ ซึ่งผมจะนำมาให้ download กัน ลองติดตามนะครับ

เรื่องของ Tag เปิดบ่อยๆ (Open tag) Tag ใน HTML นั้น มันจะแสดงออกมาก็ต่อเมื่อมันอ่านเจอ Tag ปิด ดังนั้นให้คุณเขียนเว็บแล้วเปิด ปิด Tag บ่อยๆเพื่อความเร็วในการแสดงผลครับ

Link ผิดต้องอย่าปล่อย (Link Break) เมื่อทำเว็บเสร็จแล้ว พยายามตรวจสอบ link ให้แน่ใจว่าจะไม่ผิดพลาด แต่บางครั้งที่คุณ link ไปเว็บอื่นแล้วเขา ปิดเว็บลงไปแล้วก็ช่วยไม่ได้นะครับ คุณต้องลองติดตามดูบ่อยๆ

ลดขนาด file เว็บเรา ( Fix File Size) ขนาดของ file html นั้นแต่ก่อนไม่ค่อยมีการออกเว็บเท่าไรจึงมีขนาดไม่เกิน 20 -30 kb แต่ปัจจุบันมีการเล่นสคิ้ปและรูปแบบและเนื้อหามากขึ้น ขนาดจึง ไปอยู่ที่ 70 - 150 kb แต่ตามความคิดผมไม่ควรจะเกิน 50 - 80 kb ครับ เพราะยิ่งมากก็ยิ่งช้า เหมือนกับเรากำลัง download file ชนิดหนึ่งที่มีขนาด 100 kb คุณว่านานไหมล่ะ(แค่ตัวหนังสือไม่รวมรูปหรืออื่นๆนะ) แต่ถ้าจำเป็นก็ไม่เป็นไรครับ เพราะปัจจุบัน เรื่องของ Internet เร็วพอสมควร

"