ภาพประกอบการออกแบบลักษณะ mobile-first 2

10 ข้อที่จะทำให้คนไม่ยอมเปิดเว็บคุณด้วยมือถือ

เดี๋ยวนี้มือถือเป็นอาวุธคู่กายของใครหลายคน แต่บางคนกลับไม่ยอมเข้าเว็บไซต์เราผ่านมือถือ มาลองดูเหตุผลหรือสาเหตุใดบ้างที่น่าจะส่งผลกระทบบ้าง

1.คุณออกแบบมาเพื่อ Desktop ก่อนเป็นอย่างแรก

  คุณคงเคยได้ยินคำว่า Mobile First มาบ้างถ้าคุณรู้จักพวก CSS Framework เพราะเดี๋ยวนี้
การออกแบบเว็บไซต์ที่ดีเราจะมานั่งออกแบบในลักษณะ น้อยสุด กันก่อน เพื่อหาว่าอะไรเป็น
  อะไรที่เป็นสิ่งที่เราต้องการจริงๆ และอะไรที่จำเป็นจริงๆ แล้วแสดงในลักษณะที่รองรับมือถือก่อน
จากนั้นค่อนำสิ่งนี้ไปขยายผลในส่วนของแท๊บเล็ตและ Desktop ต่อไป
ภาพประกอบการออกแบบลักษณะ mobile-first

ภาพประกอบการออกแบบลักษณะ mobile-first

ภาพประกอบการออกแบบลักษณะ mobile-first 2

ภาพประกอบการออกแบบลักษณะ mobile-first 2

 

 

2. link และเมนูต่างๆเล็กเกินไป

  นอกจากสายตาคนดูจะมองลำบากแล้ว การใช้นิ้วสัมผัสไปที่ลิงค์นั้นๆยังทำได้ยาก หลายครั้งที่
จะกดลิงค์ทีหนึ่งต้องซูมเข้ามาก่อน
ภาพประกอบ responsive menu จาก www.creativeglance.com

ภาพประกอบ responsive menu จาก www.creativeglance.com

3.ไม่มีความเป็น Responsive

   คุณไม่ได้ออกแบบมาเพื่อให้รองรับการแสดงผลในทุกๆอุปกรณ์ แตกต่างจากส่วนของออกแบบมาเพื่อ
Desktop ก่อนนะครับเพราะงานนี้คือคุณไม่ได้ใส่ใจกับเรื่องของ viewport ใดๆเลย ไม่ได้กำหนด Layout
   ใหม่ ไม่ได้ย่อขนาดภาพและอื่นๆ
ภาพประกอบ Responsive Screens

ภาพประกอบ Responsive Screens

4. ใช้รูปภาพมากเกินไป (และบางรูปขนาดใหญ่เกินไป)

  กาใช้รูปหรือวิดีโอมากเกินไปไม่ดีนักโดยเฉพาะอย่างยิ่งกับมือถือ เพราะการใช้อินเตอร์เน็ตในการโหลด
จะนานมาก และช้าจนทำให้ผู้ใช้ทนรอไม่ไหว
ภาพประกอบ photo too many จาก demortalz.com

ภาพประกอบ photo too many จาก demortalz.com

5. มีแบบฟอร์มให้กรอกข้อมูลยาวๆ

  ลืมไปได้เลยกับเรื่องของการกรอกข้อมูลยาวๆสำหรับการใช้งานบนมือถือ เพราะคงไม่มีใครมานั่งพิมพ์
  กรอกแบบฟอร์มบนมือถือนานๆเป็นแน่
ภาพประกอบ form ยาวเกินไป จาก wecodeyoursite.com

ภาพประกอบ form ยาวเกินไป จาก wecodeyoursite.com

6. มีการใช้งานลูกเล่นในการแสดงผลมากเกินไป javascript

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

ภาพประกอบ notifyME

7. มีวิดีโอที่พร้อมจะเล่นทันทีเมื่อเว็บคุณเปิดขึ้นมา

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

ภาพประกอบ code-video-player-HTML5

8. หากล่องค้นหาข้อมูลไม่เจอ

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

ภาพประกอบ Ajax search form

9. เนื้อหาต้องโหลดลงมาเรื่อยๆไม่หมดซะที (หาทางกลับขึ้นไปข้างบนไม่เจอ)

  เดี๋ยวนี้การแสดงผลแบบโหลดลงมาเรื่อยๆนับว่าเป็นที่นิยมมากๆเพราะจะได้ไม่ต้องเปลี่ยนหน้าเพจ
  ทำให้การโหลดเร็วขึ้น แต่หากโหลดลงมาเรื่อยๆไม่จบไม่สิ้นซะทีสำหรับเว็บที่มีเนื้อหาเยอะๆ
  การกลับไปยังส่วนบนจึงยากเอาการ และยิ่งถ้าคุณไม่มีปุ่ม Back to topด ด้วย
ภาพประกอบการ load-more-post

ภาพประกอบการ load-more-post

10. คุณซ่อนเนื้อหาบางอย่างสำหรับมือถือ

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

ภาพประกอบการใช้ css display hide

 

11.(แถม) คุณลืมทำโฮมสกรีนไอคอน

   รูปภาพจิ๋วๆขนาดเล็กๆเพียง 57 x 57 px ที่เปรียบเหมือน favicon บน Tap Browser แต่อันนี้จะแสดงผล
  ก็ต่อเมื่อมีใคร Bookmark เว็บไซต์ของคุณเอาไว้ที่หน้าจออุปกรณ์ของค่าย Apple ที่ใช้แค่ code
  < link rel=”apple-touch-icon” href=”/apple-touch-icon.png”>
ภาพประกอบ icon-on-ipad จาก scoutzie.com

ภาพประกอบ icon-on-ipad จาก scoutzie.com