รู้มั้ยคะว่าภายในเดือนมี.ค. 64 นี้ เว็บไซต์ที่ไม่สามารถเปิดใช้งานบนมือถือได้อย่างมีประสิทธิภาพ (Mobile-Friendly) เว็บไซต์นั้นจะหายไปจากผลลัพธ์การค้นหาบน Google ในทันที! เพราะฉะนั้นเรามาต้อนรับปี 2021 นี้ด้วยการพัฒนาเว็บไซต์ให้ตอบโจทย์การใช้งานผ่านมือถือและติดหน้าแรกของทุกการค้นหากันดีกว่าค่ะ!
วันนี้เรามี 11 เช็คลิสต์เด็ดที่จะช่วยให้คุณสามารถพัฒนาเว็บไซต์สำหรับการใช้งานบนมือถือให้มีประสิทธิภาพสูงสุด เพราะในปัจจุบันผู้ใช้งานมักใช้มือถือในการเข้าชมเว็บไซต์ต่างๆ มากกว่าอุปกรณ์อื่นๆ และคาดว่าจะมีจำนวนเพิ่มขึ้นเป็น 72 เปอร์เซ็นต์ภายในปี 2025 นี้จากจำนวนผู้ใช้งานในปัจจุบัน
แต่ถ้าคุณโฟกัสถูกจุด การขึ้นไปอยู่อันดับต้น ๆ ของ Search engine ก็จะไม่ใช่เรื่องยากอีกต่อไป เช็คลิสต์นี้จะทำให้พวกเขาติดใจอยากกลับมาใช้งานเว็บไซต์ของคุณอีก แต่จะมีลิสต์อะไรบ้างนั้น เรามาเช็คไปพร้อมกันเลยดีกว่าค่ะ!
สามารถเลือกอ่านเช็คลิสต์ที่สนใจได้เลยค่า
1. ปุ่มกด— เรื่องใหญ่กว่าที่คุณคิด
2. วาง Layer ดึงดูดสายตา— ซ้อนทับแต่ไม่สับสน
3. รูปภาพและตัวหนังสือ— จัดวางอย่างเป็นระบบ
4. ปรับเปลี่ยน Layout ตามเป้าหมาย
5. Navigation— ไกด์นำทางสำหรับผู้ใช้งาน
6. ป็อพอัพโฆษณา— ดึงดูดลูกค้าอย่างมีกลยุทธ์
7. Backlinking— ใช้ผิด Traffic หาย
8. เว็บต้องไว— ทันใจผู้ใช้งาน
9. Viewport Meta Tag— หมดห่วงเรื่องไซส์จอ
10. Desktop version บนมือถือ— ตัวเลือกที่ไม่ควรมองข้าม
11. Content โดนใจ— เว็บไซต์ที่ดีต้องมีพร้อม
1. ปุ่มกด— เรื่องใหญ่กว่าที่คุณคิด
ด้วยพื้นที่จำกัดบนหน้าจอโทรศัพท์ทำให้แถบมากมายบน Desktop ที่ออกแบบมาสำหรับเคอร์เซอร์จิ๋วของเมาส์ต้องแปลงร่างกลายเป็นปุ่มกดเพื่อให้สะดวกต่อการใช้งานบนมือถือมากขึ้น ดังนั้นคุณจำเป็นต้องสร้างปุ่มกดที่มีขนาดใหญ่มากพอที่ลูกค้าจะสามารถมองเห็นได้โดยไม่ต้องหรี่ตาหรือกดพลาดไปโดนปุ่มอื่นโดยไม่ตั้งใจ เพราะนั่นอาจเป็นเหตุผลที่ลูกค้าเลือกจะออกจากเว็บไซต์ของคุณไปยังเว็บไซต์ของคู่แข่งแทน!
2. วาง Layer ดึงดูดสายตา— ซ้อนทับแต่ไม่สับสน
นอกจากการใช้ขนาดมาช่วยนำเสนอไฮไลท์หรือไอเท็มเด็ดของคุณแล้ว เทคนิคการวางซ้อนทับเพื่อเพิ่มมิติก็สามารถทำให้เว็บไซต์ของคุณน่าสนใจขึ้นได้เช่นกัน แต่มีข้อแม้ว่าองค์ประกอบที่ซ้อนทับกันอยู่นั้นจะต้องมีจุดประสงค์และใช้สีตัดกันอย่างชัดเจน อีกทั้งยังจะต้องเป็นส่วนหนึ่งขององค์ประกอบโดยรวมในหน้าต่างเดียวกัน โดยคุณอาจใช้วงล้อสีเป็นตัวช่วยในการออกแบบให้ดูสะดุดตายิ่งขึ้น
3. รูปภาพและตัวหนังสือ— จัดวางอย่างเป็นระบบ
เป็นที่ทราบกันดีว่ารูปภาพสามารถช่วยดึงดูดความสนใจของผู้อ่านได้มากกว่าการอ่านตัวหนังสือเพียงอย่างเดียว แต่หากคุณจัดวางรูปภาพไม่เป็นระบบ ก็อาจกลายเป็นอุปสรรคในการอ่านที่สร้างความรำคาญแทนได้ ดังนั้นหากคุณต้องการแสดงทั้งรูปภาพและตัวอักษรพร้อมกันในหน้าเดียว ตัวอักษรจึงไม่ควรอยู่บรรทัดเดียวกับรูปภาพ โดยสามารถวางข้อความไว้ด้านบนหรือด้านล่างของรูปภาพแทนเพื่อไม่ให้เป็นการขัดจังหวะของผู้อ่านขณะกำลังเพลิดเพลินกับบทความ นอกจากนี้คุณต้องไม่ลืมคำนึงถึงรูปแบบตัวอักษรที่เข้ากับภาพรวมของเว็บไซต์ไม่ว่าจะเป็นดีไซน์หรือรูปแบบบริการ และที่สำคัญที่สุด คุณต้องทำให้พวกเขาเข้าถึงและเข้าใจข้อความได้โดยง่ายและชัดเจน เช่น ปรับสีของข้อความที่เป็น Link Text ให้ดูสะดุดตาและแตกต่างจากตัวอักษรอื่นในบทความ เป็นต้น
4. ปรับเปลี่ยน Layout ตามเป้าหมาย
คุณต้องการให้ผู้ใช้งานเห็นอะไรเป็นลำดับแรก? นี่คือคำถามที่คุณควรจะตอบได้ในทุก ๆ หน้าของเว็บไซต์ เพราะการมีเป้าหมายที่ชัดเจนจะทำให้คุณสามารถจัดลำดับความสำคัญของเนื้อหาและเรียบเรียงออกมาผ่านรูปแบบต่าง ๆ ได้อย่างมีประสิทธิภาพ ซึ่งจะสอดคล้องกับเทคนิคการใช้สีและขนาดให้เหมาะสมกับองค์ประกอบนั้น ๆ เช่น หากคุณต้องการให้ลูกค้าโฟกัสที่โปรโมชั่นล่าสุดเป็นอย่างแรก คุณควรกำจัดองค์ประกอบอื่นที่ไม่เกี่ยวข้องออกจากหน้านั้นก่อน และใช้ขนาดของรูปภาพหรือสีข้อความที่โดดเด่นกว่าหัวข้อย่อยอื่น ๆ ในหน้าเดียวกัน การทำเช่นนี้นอกจากจะทำให้ลูกค้าเข้าถึงเนื้อหาที่คุณต้องการสื่อได้ง่ายขึ้นแล้ว ยังทำให้พวกเขาใช้งานเว็บไซต์ของคุณบนโทรศัพท์ได้ง่ายขึ้นและไม่รู้สึกว่ากำลังถูกยัดเยียดข้อมูลจำนวนมากในเวลาเดียวกันอีกด้วย ยิ่งไปกว่านั้นยังทำให้คุณสามารถสื่อข้อความ CTA (Call to Action) ที่มีประสิทธิภาพ เช่น กดอ่านต่อ กดแชร์ กดติดตาม ได้อย่างง่ายดายอีกด้วย
5. Navigation— ไกด์นำทางสำหรับผู้ใช้งาน
แถบเมนูบนหน้าเว็บไซต์ก็เปรียบเสมือนไกด์นำทางของผู้ใช้งาน ดังนั้นแล้วคุณจึงควรให้ความสำคัญกับการวางรูปแบบและดีไซน์ของแถบเมนูให้ชัดเจนและง่ายต่อการค้นหา โดยเฉพาะเว็บไซต์บนมือถือควรมีตำแหน่งแถบเมนูหรือสัญลักษณ์ติดอยู่กับหน้าจอเสมอ เพราะไม่อย่างนั้นแล้วคุณอาจจะต้องเสียลูกค้าไป เนื่องจากลูกค้าอาจเลื่อนอ่านบทความจนจบแต่กลับหงุดหงิดจนต้องกดออกจากเว็บไซต์ของคุณเพราะหาทางกลับไปยังหน้าหลักไม่เจอก็เป็นได้
6. ป็อพอัพโฆษณา— ดึงดูดลูกค้าอย่างมีกลยุทธ์
หน้าต่างป็อพอัพมักถูกใช้เป็นกลยุทธ์นำเสนอสินค้าหรือบริการอย่างตรงไปตรงมา แต่ในทางกลับกันหน้าต่างนี้ก็อาจเป็นสาเหตุที่ทำให้ลูกค้าอารมณ์เสียและกดออกจากเว็บไซต์ของคุณทันทีเช่นกัน ดังนั้นคุณต้องมั่นใจก่อนว่าป็อพอัพที่จะแสดงขึ้นบนหน้าจอโทรศัพท์นั้นไม่ขัดจังหวะการใช้งานหรือสร้างความรำคาญให้ลูกค้า หากจำเป็นต้องใช้ป็อพอัพคุณต้องไม่ลืมที่จะทำให้ปุ่มกดปิดหน้าต่างสังเกตได้ง่ายและวางอยู่ในตำแหน่งที่ลูกค้าสามารถกดปิดได้ทันทีหากไม่ต้องการ หรือเมื่อลูกค้าต้องการจะออกจากเว็บไซต์ คุณสามารถเลือกใช้ข้อความบนป็อพอัพเพื่อดึงดูดความสนใจและทำให้เขาเปลี่ยนใจอยู่บนหน้าเว็บไต์ของคุณต่อ โดยเสนอสิ่งที่คิดว่าเป็นประโยชน์และไม่ควรพลาดแก่เขา ซึ่งนี่ก็เป็นอีกเทคนิคในการใช้ป็อพอัพอย่างมีกลยุทธ์
7. Backlinking— ใช้ผิด Traffic หาย
Backlink คือ ลิงค์บนเว็บไซต์อื่น ๆ ที่เชื่อมต่อมายังเว็บไซต์ของเรา หากคุณกำลังพยายามสร้าง Backlink จำนวนมากเพื่อหลอกให้กูเกิลเข้าใจว่าเว็บไซต์ของคุณกำลังถูกพูดถึงเป็นวงกว้างและหวังไต่ลำดับให้สูงขึ้นบนแร็งค์ SEO ล่ะก็ คุณกำลังคิดผิดสุด ๆ เพราะการทำเช่นนั้นจะทำให้เว็บไซต์ของคุณอยู่บนแร็งค์ได้เพียงระยะเวลาอันสั้น เนื่องจากเว็บไซต์ของคุณไม่ได้เกิดการบอกต่อจากผู้ใช้งานและอ้างอิงโดยเว็บไซต์อื่นอย่างแท้จริง ดังนั้นแล้วคุณควรให้ความสำคัญกับการให้ข้อมูลที่เกิดประโยชน์ต่อผู้ใช้งานเป็นลำดับแรก เพราะนอกจากลูกค้าจะได้รับข้อมูลตามที่ต้องการแล้วยังเป็นการสร้างความเชื่อมั่นที่มีต่อเว็บไซต์ของคุณอีกด้วย
นอกจากนี้ตำแหน่งของการวางลิงค์บนเว็บไซต์ก็สำคัญไม่แพ้กัน คุณควรวางลิงค์ให้อยู่ระหว่างข้อความหรือบทความที่สอดคล้องกับเนื้อหา และหากลูกค้าคลิกที่ลิงค์แล้วก็ควรมีตัวเลือกให้ลูกค้าระบุได้เองว่าต้องการเปิดลิงค์ไปยังแท็บใหม่หรือไม่ ถึงแม้ว่าการสร้างลิงค์ให้เด้งไปยังหน้าใหม่อัตโนมัติในทุกครั้งนั้นจะง่ายกว่า แต่ก็อย่าลืมว่าคุณอาจจะกำลังสร้างความรำคาญแก่ผู้ใช้งานบนมือถือแบบไม่รู้ตัว!
8. เว็บต้องไว— ทันใจผู้ใช้งาน
หนึ่งในสาเหตุอันดับต้น ๆ ที่ทำให้ลูกค้ากดออกจากเว็บไซต์ก็คือเว็บไซต์โหลดได้ไม่เร็วพอ แต่คุณสามารถแก้ปัญหานี้ได้ ด้วยเทคนิคดังต่อไปนี้
ใช้ AMP (Accelerated Mobile Pages)
เทคนิคแรกที่ช่วยเร่งความเร็วสำหรับการใช้งานบนมือถือก็คือการใช้ AMP โดยหลักการทำงานคือการลดขนาดไฟล์ให้เล็กลงเพื่อประหยัดเวลาในการโหลดหน้าเว็บไซต์ ซึ่งหมายความว่าลูกค้าจะไม่ต้องรอโหลดเว็บไซต์ของคุณให้นานจนต้องหงุดหงิดนั่นเอง
บีบอัด HTML, CSS และไฟล์ภาพให้เล็กลง
ไม่ว่าจะเป็นภาษาคอมพิวเตอร์ที่ใช้สร้างหน้าเว็บ (HTML), ภาษาที่ใช้การจัดรูปแบบเอกสาร (CSS) หรือแม้กระทั่งไฟล์ภาพต่าง ๆ บนเว็บไซต์ ล้วนเป็นข้อมูลที่ต้องใช้เวลาในการโหลดทั้งสิ้น ดังนั้นหากคุณบีบอัด HTML, CSS และไฟล์ภาพให้มีขนาดเล็กลงได้ก็จะอัพสปีดการโหลดบนเว็บไซต์ให้ดียิ่งขึ้นและยังทำให้ลูกค้าสัมผัสได้ถึงความเป็นมืออาชีพของคุณอีกด้วย!
อัพโหลดไฟล์เสียงหรือวิดีโอลงในเว็บไซต์อื่นแทนการวางไฟล์โดยตรงบนเว็บไซต์ของคุณ
คุณเคยรู้สึกหงุดหงิดเพราะต้องรอคลิปเสียงหรือวิดีโอบนเว็บไซต์ใช่หรือเปล่า แต่คงแย่ยิ่งกว่าถ้าคนที่หงุดหงิดคือลูกค้าของคุณ แต่ปัญหานี้จะหมดไปหากคุณอัพโหลดไฟล์เสียงหรือวิดีโอไว้บนเว็บไซต์อื่น ๆ ที่รองรับ เช่น Youtube และสร้าง URL เพื่อแสดงตัวอย่างคลิปไว้แทน จะทำให้ลูกค้าสามารถรับฟังไฟล์เสียงหรือรับชมวิดีโอพร้อมคุณภาพแบบจัดเต็มได้โดยไม่ต้องเสียเวลารอโหลดไฟล์เหล่านั้นบนเว็บไซต์ของคุณอีกต่อไป
ทดสอบความเร็วของเว็บไซต์ด้วย Page Speed Insights
หากคุณไม่มั่นใจว่าเว็บไซต์ของคุณทำงานได้รวดเร็วพอสำหรับผู้ใช้งานแล้วหรือยัง Page Speed Insights เป็นอีกหนึ่งตัวช่วยที่สามารถวิเคราะห์การทำงานเว็บไซต์ได้อย่างละเอียดภายในระยะเวลาอันสั้น เพียงแค่ป้อน URL ของเว็บไซต์ที่ต้องการตรวจสอบลงไป ข้อมูลการวิเคราะห์ต่าง ๆ ก็จะปรากฏขึ้นภายในเวลาไม่กี่วินาที นอกจากนี้แล้วคุณยังสามารถอ่านคำแนะนำที่จะช่วยอัพสปีดเว็บไซต์ของคุณโดยไม่ส่งผลกระทบต่อคะแนนประสิทธิภาพ ซึ่งถูกใช้เป็นหนึ่งในเกณฑ์วัดลำดับ SEO ของเว็บไซต์คุณอีกด้วย
9. Viewport Meta Tag— หมดห่วงเรื่องไซส์จอ
Viewport เป็นพื้นที่ของหน้าเว็บไซต์ที่ผู้ใช้สามารถมองเห็นได้ โดยพื้นที่ที่แสดงนี้จะแตกต่างกันไปตามอุปกรณ์ หากคุณไม่ใช้ Viewport Meta Tag ระบบจะใช้ขนาดหน้าจอสำหรับ Desktop เป็นค่าเริ่มต้นสำหรับทุกอุปกรณ์รวมทั้งมือถือด้วยเช่นกัน จึงทำให้ผู้ใช้งานต้องซูมรูปภาพหรือข้อความขนาดจิ๋วและเลื่อนหาแถบเมนูต่าง ๆ เองอยู่ตลอดเวลา ซึ่งหลายครั้งการเปลี่ยนไปเข้าเว็บไซต์อื่นแทนกลับเป็นตัวเลือกที่ง่ายและรวดเร็วกว่า ดังนั้น Viewport Meta Tag จึงถูกใช้เพื่อให้หน้าตาและขนาดของเว็บไซต์มีความเหมาะสมกับขนาดหน้าจอและความละเอียดของทุกอุปกรณ์ อีกทั้งยังสามารถคงมาตรฐานและเอกลักษณ์ของเว็บไซต์คุณไว้ได้ภายในโค้ด URL เดียวกันอีกด้วย
10. Desktop version บนมือถือ— ตัวเลือกที่ไม่ควรมองข้าม
อีกเรื่องที่น่าเสียดายสุด ๆ ที่หลายคนอาจลืมคิดไปก็คือ ผู้ใช้งานบางรายไม่ได้ต้องการใช้งานเว็บไซต์ที่ถูกออกแบบมาโดยเฉพาะสำหรับมือถือเพียงเท่านั้น แต่พวกเขากลับไม่มีทางเลือกอื่นเพราะนี่เป็นการตั้งค่าเริ่มต้นที่เว็บไซต์กำหนดไว้ ซึ่งมันอาจเปลี่ยนเป็นความรู้สึกลบของผู้ใช้งานต่อเว็บไซต์และยังส่งผลต่อความพึงพอใจในสินค้าและบริการของคุณอีกด้วย ดังนั้นการเสนอรูปแบบการใช้งานเว็บไซต์สำหรับ Desktop ไว้บนมือถือจึงเป็นตัวช่วยในการแก้ปัญหานี้สำหรับผู้ใช้งานได้
11. Content โดนใจ— เว็บไซต์ที่ดีต้องมีพร้อม
สุดท้ายนี้เช็คลิสต์ที่ขาดไม่ได้และนับว่าเป็นหัวใจที่จะทำให้ลูกค้าประทับใจและกลับมาที่เว็บไซต์ของคุณอีกก็คือ คอนเทนท์หรือเนื้อหานั่นเอง ถึงแม้ว่าลูกค้าจะสามารถใช้งานเว็บไซต์ของคุณได้สะดวกขนาดไหน แต่หากพวกเขาไม่ได้สิ่งที่กำลังมองหา หรือไม่สามารถเข้าใจสิ่งที่คุณต้องการจะสื่อภายในระยะเวลาอันสั้น เว็บไซต์นั้นก็จะไม่มีประโยชน์และไม่ใช่สิ่งที่ลูกค้าต้องการอีกต่อไป ดังนั้นแล้วทั้งความยาวของเนื้อหาและการเรียบเรียงอย่างตรงประเด็น พร้อมกับการทำความเข้าใจว่าลูกค้าต้องการอะไร โดยยึดอยู่บนแนวคิดการให้ลูกค้าเป็นศูนย์กลางในการสร้างสรรค์สินค้าและบริการหรือที่เรียกว่า Customer Centric จึงเป็น Key to Success ที่ขาดไม่ได้นั่นเอง เพียงเท่านี้คอนเทนท์ของคุณก็จะน่าสนใจและตอบโจทย์ลูกค้าได้อย่างแน่นอน
เป็นยังไงบ้างคะ จาก 11 ข้อได้คะแนนกันไปเท่าไหร่เอ่ย? นอกจากจะต้องพัฒนาให้ครบทุกข้อยังแล้ว ต้องตรวจสอบเว็บไซต์อย่างสม่ำเสมอเพื่อตอบโจทย์ผู้ใช้งานให้ได้มากที่สุดด้วยนะคะ เพราะปัจจุบันมีตัวเลือกสินค้าและบริการมากมายที่ผู้บริโภคสามารถเข้าถึงได้เพียงปลายนิ้วแตะ นั่นหมายความว่ายังมีคู่แข่งอีกจำนวนมากกำลังพัฒนากลยุทธ์เพื่อตอบสนองความต้องการของผู้บริโภคให้ได้มากที่สุด ดังนั้นนักการตลาดจึงต้องไม่พลาดที่จะพัฒนากลยุทธ์อยู่ตลอด และอย่าลืมเข้าใจความต้องการที่แท้จริงของลูกค้าของคุณด้วยนะคะ หากทำเช่นนั้นแล้วการแข่งขันที่พุ่งสูงขึ้นในทุกขณะนี้ก็จะไม่ใช่เรื่องที่คุณต้องกังวลอีกต่อไป
ถ้าทำครบทุกเช็คลิสต์แล้วอย่าลืมเข้ามาแชร์ความสำเร็จให้พวกเราฟัง หากมีคำถามหรือข้อสงสัยก็สามารถติดต่อสอบถามพวกเรา dgtl8 ได้เลยนะคะ 
แหล่งอ้างอิง
- https://www.cnbc.com/2019/01/24/smartphones-72percent-of-people-will-use-only-mobile-for-internet-by-2025.html
- https://thaidailyseo.com/2019/12/12/amp-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3-%E0%B8%AD%E0%B8%98%E0%B8%B4%E0%B8%9A%E0%B8%B2%E0%B8%A2%E0%B9%81%E0%B8%9A%E0%B8%9A%E0%B8%97%E0%B8%B3%E0%B9%83%E0%B8%AB%E0%B9%89/https://www.themevilles.com/responsive-web-design
- https://developers.google.com/speed/pagespeed/insights/
- https://phetnak-office-systems.co.th/2019/03/05/responsive-website/
- https://www.thinkwithgoogle.com/marketing-strategies/app-and-mobile/mobile-page-speed-new-industry-benchmarks/
- https://uxplanet.org/mobile-app-ux-design-making-a-great-first-impression-bed2805b967d
- https://cxl.com/blog/first-impressions-matter-the-importance-of-great-visual-design/
- https://www.freepik.com/premium-vector/colorful-web-design-button-collection-with-flat-design_3099341.htm
- https://usabilitygeek.com/colors-in-ui-design-a-guide-for-creating-the-perfect-ui/
- https://www.pinterest.com/pin/19562579617692359/
- https://www.smashingmagazine.com/2019/08/bottom-navigation-pattern-mobile-web-pages/
- https://uxmovement.com/mobile/5-techniques-to-make-mobile-call-to-action-buttons-intuitive/
- https://uxplanet.org/top-8-mobile-navigation-menu-design-for-your-inspiration-8a2d925bffc0
- https://wisepops.com/woocommerce-exit-popup/
- https://www.freepik.com/premium-vector/backlinks-link-building-business-concept-illustration_6463505.htm#page=1&query=backlink&position=4
- https://mobileklinik.ca/heres-how-to-fix-common-problems/
- https://ux.stackexchange.com/questions/52606/user-has-the-option-to-view-desktop-version-when-in-mobile-view-what-about-vice
- https://www.freepik.com/premium-vector/social-media-engagement-isometric-3d-concept-illustration_7233076.html
