การรีดีไซน์เริ่มต้นด้วยสิ่งที่เว็บไซต์ใหม่เอี่ยมไม่เคยมี: หลักฐาน เว็บไซต์ปัจจุบันของคุณแสดงอยู่แล้วว่าคนเจอหน้าไหน เส้นทางไหนนำไปสู่การติดต่อสอบถาม คนค้นหาด้วยคำอะไร และเลิกกลางทางตรงไหน ขั้นตอนการรีดีไซน์เว็บไซต์ที่ดี ใช้หลักฐานนั้นตัดสินว่าอะไรต้องเปลี่ยน และปกป้องสิ่งที่ได้ผลอยู่แล้ว
บทความนี้ไล่การตัดสินใจด้านการออกแบบตามลำดับ ถ้าคุณยังไม่ได้ตัดสินใจว่าต้องรีดีไซน์หรือไม่ ให้เริ่มจาก สัญญาณว่าเว็บไซต์ของคุณต้องรีดีไซน์ การรักษาอันดับและการจับคู่ URL เก่า มี เช็กลิสต์ SEO สำหรับการย้ายเว็บไซต์ ของตัวเอง ส่วนขั้นตอน บทบาท และการอนุมัติ อยู่ใน แผนโปรเจกต์เว็บไซต์
ภาพรวมขั้นตอนการรีดีไซน์เว็บไซต์
เจ็ดขั้นตอนการรีดีไซน์เว็บไซต์ แต่ละขั้นส่งต่อให้ขั้นถัดไป:
- รวบรวมหลักฐาน จากระบบวิเคราะห์ Search Console การบันทึกเซสชัน และการทดสอบการใช้งานแบบรวดเร็ว
- ตัดสินใจว่าจะเก็บ เปลี่ยน หรือเอาอะไรออก ทั้งเนื้อหา ป้ายชื่อ และรูปแบบการออกแบบ
- เลือกขนาดของงาน: รีดีไซน์แบบค่อยเป็นค่อยไปทีละขั้น หรือเปลี่ยนทั้งหมดในครั้งเดียว
- วางแผนเนื้อหาก่อนภาพ ทีละหน้า
- ทำ wireframe ของเทมเพลตหลัก แล้วเชื่อมเป็นต้นแบบที่คลิกได้
- ทดสอบต้นแบบกับผู้ใช้จริง ด้วยงานชุดเดียวกับครั้งก่อน
- ออกแบบภาพ และเก็บไว้ใน design system ขนาดเล็ก
จากนั้นเปิดตัว แล้ววัดผลเทียบกับค่าตั้งต้นจากขั้นที่ 1
ขั้นที่ 1: เริ่มจากหลักฐาน ไม่ใช่ความเห็น
ทุกคนที่เกี่ยวข้องมีความเห็นเกี่ยวกับเว็บไซต์ปัจจุบัน ซึ่งเกิดจากการเห็นมันบ่อยกว่าลูกค้าคนไหน ๆ มาก ก่อนที่ใครจะร่างเลย์เอาต์ ให้รวบรวมสิ่งที่ผู้เข้าชมทำจริง
หน้ายอดนิยมและเส้นทางใน GA4
ใน Google Analytics 4 รายงาน Pages and screens และ Landing page (ในหมวด Engagement) แสดงว่าคนดูหน้าไหน และเข้ามาที่หน้าไหน ดูย้อนหลังสิบสองเดือนถ้ามีข้อมูล เพื่อไม่ให้ช่วงพีคตามฤดูกาลหลอกคุณ จากนั้นสร้าง path exploration เพื่อดูเส้นทางที่นำไปสู่การติดต่อสอบถาม exploration ย้อนหลังได้ไกลเท่าที่การตั้งค่าการเก็บข้อมูลของคุณอนุญาต (ค่าเริ่มต้นคือสองเดือน)
ถ้ายังไม่ได้ติดตามการติดต่อสอบถามเป็น key event ให้ ตั้งค่าการติดตามการติดต่อสอบถามใน GA4 ก่อน ไม่เช่นนั้นคุณจะไม่มีวันรู้ว่าการรีดีไซน์ได้ผลหรือไม่
คำค้นใน Search Console
ใน Google Search Console ให้กรองรายงาน Performance ตามหน้า เพื่อดูคำค้นที่พาคนมายังหน้านั้น รายงานนี้แสดงว่าหน้าไหนได้คลิก การรีดีไซน์จึงต้องไม่ทำให้หน้าเหล่านั้นพัง และแสดงว่าคนค้นหาด้วยคำอะไร ซึ่งมักไม่ใช่คำในเมนูของคุณ
การบันทึกเซสชัน
เครื่องมือฟรีอย่าง Microsoft Clarity บันทึกว่าผู้เข้าชมจริงเลื่อน แตะ และลังเลอย่างไร ดูเซสชันบนมือถือสักสองสามสิบเซสชันในหน้าสำคัญ แล้วจดรูปแบบที่เห็น: การแตะสิ่งที่ไม่ใช่ลิงก์ ฟอร์มที่ถูกทิ้งกลางทาง ส่วนที่ทุกคนเลื่อนผ่าน Clarity ปิดบังสิ่งที่คนพิมพ์ลงในช่องกรอก แต่ควรตรวจการตั้งค่าและกฎเรื่องความยินยอมของคุณ ก่อนเปิดใช้
ทดสอบการใช้งานเว็บไซต์ปัจจุบันแบบรวดเร็ว
ขอให้คนราวห้าคนที่ตรงกับกลุ่มลูกค้าของคุณ ทำงานที่สมจริงไม่กี่อย่างบนมือถือ: หาบริการ ดูราคา ส่งการติดต่อสอบถาม สังเกตโดยไม่ช่วย และจดทุกครั้งที่เขาหยุดชะงักหรือไปผิดทาง คำแนะนำที่ใช้มานานของ Nielsen Norman Group คือ ผู้ทดสอบราวห้าคนต่อรอบ เผยปัญหาทั่วไปได้เกือบทั้งหมด เก็บรายการงานไว้ใช้ในขั้นที่ 6 บทความ UX audit ของเว็บไซต์ ของเราอธิบายวิธีจัดการทดสอบให้ได้ผล
ผลลัพธ์: สรุปหลักฐานหนึ่งหน้า
ขั้นที่ 2: ตัดสินใจว่าจะเก็บ เปลี่ยน หรือเอาอะไรออก
ตรวจเว็บไซต์เป็นสามชั้น ทุกรายการได้คำตัดสิน และทุกคำตัดสินต้องมีเหตุผลจากขั้นที่ 1 ไม่ใช่ความชอบ
รีดีไซน์แล้ว ควรเก็บอะไรไว้
- หน้าที่ติดอันดับหรือนำการติดต่อสอบถามมา พร้อมหัวข้อ ข้อความ และ title ที่อยู่เบื้องหลังผลลัพธ์เหล่านั้น ปรับปรุงแทนการเขียนใหม่
- ที่อยู่เว็บ ในทุกที่ที่โครงสร้างใหม่ทำได้ โดยเฉพาะหน้าที่คนลิงก์มาหรือบุ๊กมาร์กไว้
- ป้ายชื่อที่ลูกค้าใช้อยู่แล้ว โดยเฉพาะคำที่ตรงกับสิ่งที่พวกเขาค้นหา
- ตำแหน่งที่คุ้นเคย ของสิ่งที่ผู้เข้าชมที่กลับมามองหา: เมนู เบอร์โทร ล็อกอิน รายการราคา
- สินทรัพย์แบรนด์ที่คนจำได้ เว้นแต่ธุรกิจจะเปลี่ยนไปจริง ๆ
ป้ายชื่อ คือจุดที่หลักฐานให้ผลเร็วที่สุด
ถ้าเมนูเขียนว่า “โซลูชัน” แต่คนค้นหาเจอคุณผ่านคำว่า “งานผลิตสแตนเลส” ป้ายชื่อนั้นกำลังทำให้คุณเสียโอกาส การเปลี่ยนชื่อแทบไม่มีต้นทุน แต่มักถูกมองข้าม เมื่อการรีดีไซน์เริ่มจากเรื่องสี อ่านเรื่องป้ายชื่อเพิ่มเติมได้ใน การออกแบบเมนูนำทางของเว็บไซต์
ขั้นที่ 3: ค่อยเป็นค่อยไปหรือทำทีเดียว
การรีดีไซน์แบบค่อยเป็นค่อยไป เปลี่ยนเว็บไซต์ทีละขั้น: ป้ายชื่อและการนำทางก่อน แล้วเทมเพลตที่สำคัญที่สุด แล้วส่วนที่เหลือ การรีดีไซน์ทั้งหมดในครั้งเดียว แทนที่ทุกอย่างในการเปิดตัวครั้งเดียว ซึ่งเป็นทางเลือกที่ถูกต้อง เมื่อตัวรากฐานเองคือปัญหา
เมื่อการรีดีไซน์ คือการรีแบรนด์จริง ๆ
ถ้าบรีฟรวมชื่อ โลโก้ กลุ่มเป้าหมาย หรือน้ำเสียงใหม่ ให้ตัดสินใจเรื่องเหล่านั้นให้เสร็จก่อนเริ่มออกแบบ ไม่เช่นนั้นเว็บไซต์จะสื่อแบรนด์ที่ยังถกเถียงกันอยู่ บทความ รีแบรนด์เว็บไซต์ อธิบายว่าควรบอกลูกค้าเดิมอย่างไร
ขั้นที่ 4: วางเนื้อหาก่อนภาพ
การออกแบบโดยเริ่มจากเนื้อหา (content-first design) หมายถึงการออกแบบโดยยึดถ้อยคำ รูปภาพ และหลักฐานจริงที่แต่ละหน้าจะมี เลย์เอาต์ที่ออกแบบโดยใช้ข้อความชั่วคราวจะพังเมื่อเนื้อหาจริงมาถึง: พาดหัวยาวสามบรรทัด ส่วนที่ทำไว้สำหรับสามประเด็นสั้น ๆ ต้องรองรับเจ็ดประเด็นยาว ๆ และคำแปลก็ยาวหรือสั้นกว่าเดิม
ให้ทุกหน้ามีหน้าที่
สำหรับแต่ละหน้า เขียนบรีฟสั้น ๆ: ใครมาถึง ต้องรู้อะไรและในลำดับไหน และการกระทำเดียวที่คุณอยากให้เกิดต่อ หน้าที่กำหนดหน้าที่ชัดเจนไม่ได้ น่าจะอยู่ในคอลัมน์เอาออก
ร่างโครงด้วยคำจริง และรวบรวมหลักฐานแต่เนิ่น ๆ
นักออกแบบไม่ต้องการข้อความฉบับสุดท้าย แต่ต้องการมากกว่าชื่อหน้า: หัวข้อจริงตามลำดับ ประเด็นสำคัญ หลักฐาน และปุ่มหรือข้อความชวนให้ติดต่อ (CTA) เริ่มรวบรวมรูปผลงานของคุณเอง คำรับรองจากลูกค้าที่ได้รับอนุญาตให้ใช้ ราคา และสเปกตั้งแต่ตอนนี้ เพราะสิ่งเหล่านี้ใช้เวลารวบรวมนานที่สุด และมักเป็นสิ่งที่ผู้เข้าชมเชื่อถือมากที่สุด แผนเนื้อหาเว็บไซต์ วางไว้ว่าใครเขียนอะไร และเสร็จเมื่อไร
ขั้นที่ 5 และ 6: wireframe ต้นแบบ และทดสอบกับผู้ใช้จริง
Wireframe และต้นแบบ (prototype) สำหรับการรีดีไซน์ ช่วยให้ทดสอบโครงสร้างได้ในตอนที่การเปลี่ยนแปลงยังถูก การย้ายส่วนหนึ่งใน wireframe ใช้เวลาไม่กี่นาที แต่หลังสร้างเสร็จ ต้องรื้อทำใหม่
ทำ wireframe ของเทมเพลต ไม่ใช่ทุกหน้า
เว็บไซต์ธุรกิจส่วนใหญ่ทำงานบนเทมเพลตไม่กี่แบบ: หน้าแรก หน้าบริการ หน้าโปรเจกต์หรือสินค้า หน้าบทความ และหน้าติดต่อ ทำ wireframe ของเทมเพลตเหล่านั้นที่ความกว้างมือถือก่อน เป็นสีเทาเรียบ ๆ พร้อมหัวข้อจริง เพื่อให้ความเห็นเป็นเรื่องลำดับและความสำคัญ ไม่ใช่สี แล้วตรวจแต่ละแบบ:
- ลำดับตรงกับคำถามที่ผู้เข้าชมถาม ตามลำดับที่พวกเขาถามไหม?
- ขั้นต่อไปมองเห็นได้ ในทุกจุดที่คนอาจพร้อมลงมือไหม?
- มีอะไรจากรายการที่ต้องเก็บ หายไปไหม?
ทำต้นแบบ แล้วทดสอบด้วยงานชุดเดิม
เชื่อม wireframe เข้าเป็นต้นแบบที่คลิกได้ในเครื่องมืออย่าง Figma รวมถึงเมนู ฟอร์มติดต่อสอบถาม และข้อความยืนยัน เพื่อให้คนทำงานได้ครบทั้งงาน จากนั้นใช้งานชุดเดิมจากขั้นที่ 1 กับผู้ทดสอบใหม่ราวห้าคน บนมือถือ
เพราะงานเป็นชุดเดิม คุณจะเห็นโดยตรงว่าโครงสร้างใหม่แก้อะไรได้ อะไรที่ยังไม่ได้แก้ และทำอะไรพัง แก้ปัญหาที่หนักที่สุดแล้วทดสอบอีกครั้ง การทดสอบสั้น ๆ สองสามรอบ มักสอนได้มากกว่ารอบใหญ่รอบเดียว ถ้าลูกค้าของคุณใช้มากกว่าหนึ่งภาษา ให้ทดสอบในทุกภาษา
ขั้นที่ 7: ออกแบบภาพ แล้วสร้าง design system ขนาดเล็ก
ถึงตอนนี้เท่านั้น ที่ชั้นภาพจะเป็นพระเอก: ตัวอักษร สี ภาพ ระยะห่าง และการเคลื่อนไหว มันได้ผลดีที่สุดเมื่อเสริมโครงสร้างที่ทดสอบแล้ว แทนที่จะตกแต่งโครงสร้างที่ยังไม่ได้ทดสอบ
ใส่การเข้าถึงสำหรับทุกคนไว้ตรงนี้ แทนการมาตรวจตอนท้าย ที่ระดับ AA ของ WCAG 2.2 กำหนดคอนทราสต์ของข้อความอย่างน้อย 4.5:1 (3:1 สำหรับข้อความขนาดใหญ่) 3:1 สำหรับขอบเขตและสถานะที่ใช้ระบุปุ่ม ช่องกรอก และตัวควบคุมอื่น ๆ และเป้าหมายการคลิกหรือแตะอย่างน้อย 24 คูณ 24 CSS pixel โดยมีข้อยกเว้นบางกรณี บทความ อธิบาย WCAG 2.2 ครอบคลุมเกณฑ์ระดับ AA ที่เหลือ
ทำ design system ให้เล็ก
การรีดีไซน์ทำให้เว็บไซต์ดีในวันเปิดตัว ส่วน design system ช่วยไม่ให้มันแตกเป็นเสี่ยง ๆ เมื่อคนต่าง ๆ เพิ่มหน้าเข้ามา เว็บไซต์ธุรกิจส่วนใหญ่ต้องการเพียงสี่ส่วน:
- รากฐาน: สี ขนาดตัวอักษร และระยะห่าง กำหนดไว้ครั้งเดียว
- คอมโพเนนต์: ปุ่ม ฟอร์ม การ์ด การนำทาง และส่วนชวนติดต่อ พร้อมสถานะตอนชี้เมาส์ ตอนโฟกัส และตอนผิดพลาด
- เทมเพลต: ประเภทหน้าจากขั้นที่ 5 พร้อมหมายเหตุว่าเมื่อไรใช้แบบไหน
- กฎด้านเนื้อหา: น้ำเสียง ถ้อยคำบนปุ่ม และสไตล์รูปภาพ
มันควรอยู่ในเว็บไซต์ ไม่ใช่แค่ในไฟล์ออกแบบ บน WordPress นั่นหมายถึงสไตล์ส่วนกลาง ส่วนที่ใช้ซ้ำได้ และเทมเพลตหน้าที่ผู้แก้ไขใช้สร้างหน้า บทความ design system สำหรับเว็บไซต์ ของเราอธิบายตัวเลือกต่าง ๆ
ตัวอย่างจริง: รีดีไซน์เว็บไซต์ผู้พัฒนาอสังหาริมทรัพย์
กรณีศึกษาผู้พัฒนาอสังหาริมทรัพย์ แสดงให้เห็นว่าการตัดสินใจใหญ่ของการรีดีไซน์อยู่ตรงไหน เว็บไซต์เดิมใช้เวลาโหลดเก้าวินาทีและพังบนมือถือ การติดต่อสอบถามมาทางโทรศัพท์เท่านั้นและไม่ได้ติดตาม และฝ่ายการตลาดต้องจ่ายเงินให้นักพัฒนาเพื่อเปลี่ยนรูปเพียงรูปเดียว
ในสามเดือนหลังเปิดตัว การติดต่อสอบถามจากผู้ซื้อเพิ่มขึ้น 40%
ไม่มีการตัดสินใจไหนในนั้นเป็นเรื่องสีหรือฟอนต์ ซึ่งเตือนว่าการรีดีไซน์ต้องไปไกลกว่าชั้นภาพมาก ตามที่บทความ อะไรทำให้เว็บไซต์ดี อธิบายไว้
หลังเปิดตัว: วัดผลเทียบกับเว็บไซต์เก่า
ไม่กี่สัปดาห์หลังเปิดตัว ให้ทำการตรวจแบบขั้นที่ 1 ซ้ำ แล้วเทียบกับค่าตั้งต้น: การติดต่อสอบถามและ key event รายหน้า คลิกและคำค้นใน Search Console, Core Web Vitals และงานทดสอบการใช้งานชุดเดิม อันดับที่ขยับบ้างในสัปดาห์แรก ๆ เป็นเรื่องปกติ เช็กลิสต์การย้ายเว็บไซต์อธิบายวิธีแยกเรื่องนี้ออกจากปัญหาจริง จากนั้น แผนการปรับปรุงอย่างต่อเนื่อง จะช่วยไม่ให้เว็บไซต์ค่อย ๆ ไหลไปสู่การรีดีไซน์ครั้งถัดไป
ขั้นตอนต่อไป
ทุกขั้นตอนในนี้กลับมาที่นิสัยเดียว: ตัดสินใจด้วยหลักฐาน เก็บสิ่งที่ผู้เข้าชมพึ่งพา และตัดสินผลลัพธ์โดยเทียบกับเว็บไซต์เก่า ไม่ใช่ความเห็น
ถ้าคุณไม่อยากทำเรื่องนี้เอง บริการ รีดีไซน์เว็บไซต์ ของเราเริ่มต้นที่จุดเดียวกัน: เรา crawl เว็บไซต์ปัจจุบันของคุณและอ่านข้อมูล Search Console ย้ายหน้าที่ติดอันดับหรือนำการติดต่อสอบถามมาไปด้วย redirect ทุกที่อยู่เก่า และสร้างบนเว็บตัวอย่างแบบส่วนตัว ขณะที่เว็บไซต์ปัจจุบันของคุณยังออนไลน์อยู่
อยากได้มุมมองจากคนนอกก่อนขั้นที่ 1? ตรวจสอบเว็บไซต์ฟรี จะแสดงว่าเว็บไซต์ปัจจุบันของคุณเสียผู้เข้าชมไปตรงไหน ตั้งแต่ความเร็วบนมือถือ ไปจนถึงความง่ายในการติดต่อ