เว็บไซต์ที่ดูดีมีอะไรเหมือนกัน
ตัวอย่างเว็บไซต์ธุรกิจที่ดีมีห้าอย่างร่วมกัน คือ ลำดับความสำคัญของเนื้อหาชัดเจน มีพื้นที่ว่างให้สายตาได้พัก ใช้ภาพถ่ายจริงของธุรกิจ ใช้ตัวอักษรที่อ่านสบายทั้งภาษาไทยและอังกฤษ และมีปุ่มหลักเพียงปุ่มเดียวในแต่ละหน้าจอ
เว็บไซต์ที่คนมองว่าสวยจึงมักไม่ได้สวยเพราะลูกเล่นหรือแอนิเมชัน แต่เพราะอ่านง่ายและรู้ทันทีว่าควรทำอะไรต่อ ก่อนอ่านต่อ ขอแจ้งให้ชัดว่าตัวอย่างทั้งหมดในบทความนี้เป็นตัวอย่างประกอบ ไม่ใช่งานที่ทำให้ลูกค้ารายใด และไม่ใช่ภาพหน้าจอของบริษัทใด เราอธิบายโครงสร้างหน้าแบบร่างเพื่อให้เห็นเหตุผลเบื้องหลัง ซึ่งแกลเลอรีภาพหน้าจอทั่วไปมักไม่ได้บอก หากยังไม่แน่ใจว่าเว็บไซต์ประกอบด้วยอะไรบ้าง แนะนำให้อ่านบทความ เว็บคืออะไรและทำงานอย่างไร ก่อน
สิ่งที่ทำให้เว็บไซต์ดูไม่น่าเชื่อถือ
- ภาพสต็อกที่เห็นซ้ำในเว็บไซต์อื่นหลายแห่ง
- ข้อความตัวเล็กเบียดกันบนมือถือ
- ปุ่มหลายสีแย่งความสนใจในหน้าจอเดียว
- สไลด์โชว์ที่เลื่อนเองจนอ่านไม่ทัน
ตัวอย่างเว็บไซต์บริษัทและองค์กร
ตัวอย่างประกอบ ไม่ใช่งานที่ทำให้ลูกค้ารายใด: สมมติเป็นบริษัทจัดจำหน่ายอุปกรณ์อุตสาหกรรมขนาดกลางย่านบางนา หน้าแรกของเว็บไซต์บริษัทแบบนี้ควรเรียงจากบนลงล่างดังนี้
- แถบบน: โลโก้ เมนูไม่เกินหกรายการ ตัวสลับภาษา TH/EN และปุ่มขอใบเสนอราคา
- ส่วนเปิด: ประโยคเดียวที่บอกว่าบริษัทขายอะไรให้ใคร พร้อมภาพคลังสินค้าหรือทีมงานจริง
- กลุ่มสินค้าหรือบริการ: การ์ดสามถึงหกใบ แต่ละใบพาไปหน้ารายละเอียด
- เหตุผลที่ควรเลือก: ข้อเท็จจริงที่ตรวจสอบได้ เช่น มาตรฐานที่ได้รับ หรือพื้นที่ให้บริการ
- ส่วนท้าย: ที่อยู่ เวลาทำการ แผนที่ และช่องทางติดต่อ
เหตุผลที่โครงนี้ได้ผลคือผู้ซื้อแบบ B2B ต้องการคำตอบเร็วว่าบริษัททำอะไรและติดต่ออย่างไร ไม่ได้ต้องการเรื่องราวยาวในหน้าแรก บนมือถือ เมนูจะย่อเป็นปุ่มสามขีด การ์ดเรียงเป็นแถวเดียว และปุ่มโทรหรือขอใบเสนอราคาควรติดอยู่ด้านล่างจอ รายละเอียดเรื่องหน้าที่บริษัทควรมี ดูได้ที่หน้า รับทำเว็บไซต์บริษัท องค์กร และ SME
ตัวอย่างหน้าร้านค้าออนไลน์
ตัวอย่างประกอบ ไม่ใช่งานที่ทำให้ลูกค้ารายใด: ร้านขายเครื่องสำอางออนไลน์ที่ส่งสินค้าทั่วประเทศ หน้าที่สำคัญที่สุดของร้านแบบนี้ไม่ใช่หน้าแรก แต่เป็นหน้าสินค้า เพราะลูกค้าจำนวนมากเข้ามาจากการค้นหาหรือลิงก์ที่แชร์ต่อกันมาโดยตรง
โครงสร้างหน้าสินค้าที่ขายได้
- ภาพสินค้าหลายมุมบนพื้นหลังเรียบ และภาพขณะใช้งานจริงอย่างน้อยหนึ่งภาพ
- ชื่อสินค้า ราคา และตัวเลือก เช่น สีหรือขนาด อยู่ในหน้าจอแรกบนมือถือ
- ปุ่มหยิบใส่ตะกร้าปุ่มเดียว สีเด่นกว่าทุกองค์ประกอบ
- ข้อมูลการชำระเงินที่คนไทยคุ้นเคย เช่น PromptPay บัตร และเก็บเงินปลายทาง
- ข้อมูลการจัดส่ง เช่น ส่งผ่านไปรษณีย์ไทย KEX Express (ชื่อเดิม Kerry Express) หรือ Flash Express และระยะเวลาโดยประมาณ
- รายละเอียดส่วนผสม วิธีใช้ และนโยบายคืนสินค้า
บนมือถือ ปุ่มหยิบใส่ตะกร้าควรตามติดด้านล่างขณะเลื่อนอ่าน ส่วนรายละเอียดยาวควรพับเก็บเป็นหัวข้อให้แตะเปิดได้ ร้านที่ขายหลายร้อยรายการยังต้องมีตัวกรองตามประเภทและช่วงราคาที่ใช้งานง่ายด้วยนิ้วเดียว
ตัวอย่างเว็บไซต์คลินิกและโรงแรม
หน้าทรีตเมนต์ของคลินิก
ตัวอย่างประกอบ ไม่ใช่งานที่ทำให้ลูกค้ารายใด: คลินิกผิวหนังที่มีบริการหลายรายการ แต่ละทรีตเมนต์ควรมีหน้าของตัวเอง เริ่มจากคำอธิบายสั้นว่าทรีตเมนต์นี้เหมาะกับปัญหาใด ตามด้วยขั้นตอนการรักษา ระยะเวลา สิ่งที่ควรเตรียมตัว ข้อควรระวัง แพทย์ผู้ดูแล และปุ่มนัดหมาย เนื้อหาต้องใช้ภาษาที่ระมัดระวัง ไม่สัญญาผลลัพธ์ และควรตรวจสอบกับข้อกำหนดด้านการโฆษณาสถานพยาบาลก่อนเผยแพร่ ส่วนแบบฟอร์มนัดหมายต้องขอความยินยอมตาม PDPA เพราะข้อมูลสุขภาพเป็นข้อมูลอ่อนไหว
หน้าห้องพักของโรงแรม
ตัวอย่างประกอบ ไม่ใช่งานที่ทำให้ลูกค้ารายใด: โรงแรมบูทีกขนาดสามสิบห้องย่านสุขุมวิท หน้าห้องพักควรเปิดด้วยภาพห้องจริงที่ถ่ายในแสงธรรมชาติ ตามด้วยขนาดห้อง ประเภทเตียง จำนวนผู้เข้าพัก สิ่งอำนวยความสะดวก และปุ่มตรวจสอบห้องว่างที่พาไปยังระบบจองของโรงแรม แขกต่างชาติมักเปรียบเทียบกับหน้าบนเว็บไซต์ตัวกลางการจอง จึงควรบอกเหตุผลของการจองตรงอย่างตรงไปตรงมา หน้าอื่นที่เว็บโรงแรมควรมีสรุปไว้ในหน้ารับทำเว็บไซต์โรงแรมและรีสอร์ท
บนมือถือ ทั้งสองแบบใช้หลักเดียวกัน คือภาพเต็มความกว้างจอ ข้อมูลสำคัญเป็นรายการสั้น และปุ่มนัดหมายหรือจองติดอยู่ด้านล่างเสมอ
ตัวอย่างการจัดหน้าเว็บไซต์สองภาษา
ตัวอย่างประกอบ ไม่ใช่งานที่ทำให้ลูกค้ารายใด: บริษัทที่ปรึกษาที่มีทั้งลูกค้าไทยและชาวต่างชาติ แถบบนของเว็บไซต์มีตัวสลับภาษาเขียนว่า TH และ EN วางไว้มุมขวาใกล้ปุ่มติดต่อ เมื่อกดสลับ ผู้ใช้ต้องไปยังหน้าเดียวกันในอีกภาษา ไม่ใช่ถูกส่งกลับไปหน้าแรก
รายละเอียดที่มักถูกมองข้าม
- ความยาวบรรทัด: ข้อความภาษาไทยไม่มีการเว้นวรรคระหว่างคำ จึงควรจำกัดความกว้างของย่อหน้าให้อ่านสบาย และตั้งระยะห่างระหว่างบรรทัดมากกว่าภาษาอังกฤษเล็กน้อย เพื่อไม่ให้สระบนและวรรณยุกต์ชนกัน
- การจับคู่ฟอนต์: เลือกฟอนต์ไทยและฟอนต์อังกฤษที่มีน้ำหนักและความสูงใกล้เคียงกัน เพื่อให้หัวข้อสองภาษาดูเป็นชุดเดียวกัน
- ความยาวข้อความต่างกัน: ปุ่มและเมนูต้องรองรับคำที่ยาวขึ้นหรือสั้นลงเมื่อสลับภาษา
- เนื้อหาไม่ใช่การแปลตรงตัว: ลูกค้าไทยและต่างชาติถามคำถามต่างกัน เนื้อหาจึงควรเขียนให้เหมาะกับแต่ละกลุ่ม เช่น ผู้ซื้อคอนโดชาวต่างชาติมักถามเรื่องสิทธิ์การถือครองที่ผู้ซื้อคนไทยไม่ถาม ดูแนวทางในเว็บไซต์อสังหาสองภาษา
การวางตัวสลับภาษาและลำดับสายตาเป็นเรื่องของประสบการณ์ผู้ใช้มากกว่าความสวย อ่านเพิ่มได้ในบทความ ความแตกต่างระหว่าง UI กับ UX
ใช้ตัวอย่างเว็บไซต์เขียนบรีฟอย่างไร
การส่งลิงก์เว็บไซต์ที่ชอบให้ผู้ออกแบบเพียงอย่างเดียวมักไม่พอ เพราะแต่ละคนชอบด้วยเหตุผลต่างกัน บรีฟที่ใช้งานได้ควรมีข้อมูลดังนี้
- ลิงก์ตัวอย่างสามถึงห้าแห่ง พร้อมระบุว่าชอบส่วนไหน เช่น เมนู โทนสี หรือการจัดภาพ
- เหตุผลที่ชอบ เช่น ดูเป็นมืออาชีพ อ่านง่าย หรือหาปุ่มติดต่อเจอทันที
- สิ่งที่ไม่ต้องการ เช่น สีเข้มทั้งหน้า หรือวิดีโอเล่นอัตโนมัติ
- กลุ่มลูกค้าหลักและภาษาที่ต้องรองรับ
- การกระทำที่อยากให้ผู้เข้าชมทำมากที่สุด เช่น ทัก LINE โทร หรือกรอกฟอร์ม
ดูเป็นแนวทาง แต่อย่าลอกเลียนแบบ
งานออกแบบ ข้อความ และภาพถ่ายบนเว็บไซต์ของผู้อื่นได้รับความคุ้มครองตามกฎหมายลิขสิทธิ์ ตัวอย่างจึงใช้เพื่อกำหนดทิศทาง ไม่ใช่ต้นแบบสำหรับคัดลอก แหล่งตัวอย่างที่มีประโยชน์ที่สุดมักเป็นเว็บไซต์ของคู่แข่งในธุรกิจเดียวกันทั้งในไทยและต่างประเทศ รวมถึงแกลเลอรีงานออกแบบทั่วไป
อย่าลืมว่าความสวยต้องไปด้วยกันกับการค้นหาเจอ ควรอ่าน SEO คืออะไร และเริ่มต้นอย่างไร ประกอบ หากต้องการให้ทีมที่ออกแบบเองทั้งไทยและอังกฤษช่วยแปลงบรีฟเป็นแบบร่าง ดูรายละเอียดของ บริษัทออกแบบเว็บไซต์ในกรุงเทพฯ หรือส่งบรีฟผ่าน ช่องทางติดต่อทีมงาน ได้ทุกวัน 10:00 ถึง 19:00 น. และอ่านหัวข้ออื่นเพิ่มเติมใน คลังบทความเรื่องเว็บไซต์
บทความออกแบบเว็บไซต์อื่น ๆ
สร้างเว็บไซต์และดูแลอันดับการค้นหา รวมถึงวางระบบเบื้องหลังเว็บไซต์ลูกค้า 17 แห่งที่เราเผยแพร่ตัวเลขจาก Search Console เกี่ยวกับเรา (หน้าภาษาอังกฤษ)