แบบฟอร์มติดต่อเป็นองค์ประกอบหลักของเว็บไซต์จำนวนมาก แม้ว่าโดยทั่วไปจะตรงไปตรงมา แต่คุณต้องตรวจสอบให้แน่ใจว่าใช้งานง่ายหากคุณต้องการรวบรวมโอกาสในการขายและติดต่อกับผู้ใช้ของคุณ โดยปกติจะไม่เป็นปัญหากับการจราจรในสำนักงาน แต่การใช้แบบฟอร์มอาจเป็นเรื่องยากหากคุณใช้อุปกรณ์เคลื่อนที่

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

มาทำงานกันเถอะ!

ทำไมความสำคัญของรูปแบบของคุณจึงเหมาะกับอุปกรณ์เคลื่อนที่

แบบฟอร์มมีทุกรูปทรงและขนาด ส่วนใหญ่คุณจะต้องจัดการกับแบบฟอร์มการติดต่อ:

ตัวอย่างของ contact form.png

แบบฟอร์มการลงทะเบียน (สมัครสมาชิก) ยังเป็นที่นิยมอย่างมากเนื่องจากอนุญาตให้คุณรวบรวมอีเมลและกำหนดเป้าหมายในระหว่างแคมเปญ:

กำหนดเป้าหมายอีเมลระหว่าง campaigns.png

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

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

การใช้แบบฟอร์มจากคอมพิวเตอร์เดสก์ท็อปหรือแล็ปท็อปมักจะง่ายมาก คุณมีเมาส์และคีย์บอร์ดเต็มรูปแบบดังนั้นการเลือกฟิลด์ที่คุณต้องการใช้และป้อนข้อมูลจึงไม่น่าจะเป็นปัญหา อย่างไรก็ตามการท่องเว็บจากสมาร์ทโฟนหรืออุปกรณ์ขนาดกะทัดรัดอื่น ๆ ของคุณมีความยุ่งยาก

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

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

เคล็ดลับ 5 สำหรับการออกแบบฟอร์มมือถือที่ใช้งานง่าย

โชคดีที่การออกแบบรูปแบบที่เหมาะกับอุปกรณ์เคลื่อนที่ไม่ใช่เรื่องยากอย่างที่คุณคิด ในกรณีส่วนใหญ่คุณต้องคำนึงถึงปัจจัยพื้นฐานบางประการและทดสอบแบบฟอร์มของคุณอย่างละเอียดก่อนนำไปใช้ มาพูดถึงวิธีทำกัน!

1 ลบส่วนที่ไม่จำเป็นออกทั้งหมด

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

นี่คือตัวอย่างรวดเร็วของ แบบฟอร์มติดต่อ ด้วยฟิลด์เพิ่มเติมบางอย่างที่ไม่จำเป็นบนมือถือ:

ไม่จำเป็นต้องกรอกข้อมูลในช่อง

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

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

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

2 ใช้รายการแบบหล่นลงถ้าเป็นไปได้

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

วิธีหนึ่งในการทำให้ชีวิตผู้เยี่ยมชมบนมือถือของคุณง่ายขึ้นคือลดความซับซ้อนของตัวเลือกที่พวกเขาต้องทำเกี่ยวกับองค์ประกอบของไซต์ของคุณ เพื่อให้คุณได้ทราบว่าเรากำลังพูดถึงอะไรอยู่ ลองใช้ประโยชน์จากตัวอย่างก่อนหน้าของเรา การจอง ร้านอาหาร:

สำรองห้องพัก

เพื่อทำ การจองคุณอาจต้องฝากชื่อ อีเมล โทรศัพท์  et  ระบุเวลาและจำนวนคนที่อยู่ด้วย มีสองวิธีที่คุณสามารถสร้างฟิลด์แบบฟอร์มเพื่อตรวจสอบช่วงเวลาของวันได้ การจอง:

  1. กำหนดค่าเขตข้อมูลที่ยอมรับเฉพาะรายการที่เป็นตัวเลข
  2. ออกแบบรายการแบบหล่นลงรวมถึงเวลาที่มีอยู่ทั้งหมดสำหรับการจอง

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

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

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

3 ตรวจสอบให้แน่ใจว่าปุ่มส่งของคุณนั้นง่ายต่อการสัมผัส

เคล็ดลับนี้ค่อนข้างง่าย แต่ยังคงต้องกล่าวถึง ทุกรูปแบบที่คุณออกแบบควรมีวิธีให้ผู้ใช้ยืนยันว่าต้องการส่งข้อมูลที่ป้อน ในกรณีส่วนใหญ่นั่นหมายถึงการสร้างปุ่มส่ง:

สร้างปุ่มส่ง

เมื่อใช้คอมพิวเตอร์ทั่วไปการคลิกปุ่มส่งเป็นสิ่งที่เป็นธรรมชาติที่สุดในโลก อย่างไรก็ตามเราได้พบกับรูปแบบต่างๆบนมือถือซึ่งการกดปุ่มนั้นยากกว่ามาก

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

ในการออกแบบปุ่มส่งที่ดีกว่าสำหรับมือถือต่อไปนี้เป็นเคล็ดลับสามข้อที่ควรพิจารณา:

  1. ตรวจสอบให้แน่ใจว่ามีขนาดใหญ่พอที่คุณจะแตะบนอุปกรณ์เคลื่อนที่ได้อย่างง่ายดาย
  2. อย่าวางปุ่มของคุณไว้ใกล้กับรายการอื่นมากเกินไปเพื่อที่ผู้ใช้จะไม่ได้สัมผัสอย่างถูกต้อง
  3. เน้นปุ่มของคุณเช่นใช้สีตัดกันหรือตัวอักษรที่สร้างสรรค์

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

4 ตรวจสอบว่าฟอร์มของคุณโหลดได้อย่างรวดเร็ว

เราพูดถึงประสิทธิภาพของเว็บไซต์มากมายในบทความหลาย ๆ บทความของเราและไม่ใช่เพราะเราต้องการความรวดเร็ว ประเด็นคือคนส่วนใหญ่ไม่ชอบเว็บไซต์ที่ช้าซึ่งก็สมเหตุสมผลดี

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

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

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

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

5 ทดสอบแบบฟอร์มก่อนเผยแพร่

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

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

มาดูตัวอย่างสั้น ๆ กัน หากคุณใช้ Chrome ให้ไปข้างหน้าและดูตัวอย่างหน้าด้วยแบบฟอร์มที่คุณต้องการทดสอบ จากนั้นคลิกขวาที่ใดก็ได้ในหน้านี้และเลือกตัวเลือก ตรวจ . Chrome จะแสดงชุดเครื่องมือที่คุณสามารถใช้เพื่อตรวจสอบและแก้ไขซอร์สโค้ดของเพจทางด้านขวาและทางด้านซ้ายคุณสามารถดูตัวอย่างลักษณะที่ปรากฏได้จากอุปกรณ์เคลื่อนที่:

ภาพรวมของเครื่องมือพัฒนา Chrome

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

ณ จุดนี้คุณควรตรวจสอบลักษณะและพฤติกรรมของแบบฟอร์มการติดต่อของคุณบนอุปกรณ์หลายเครื่อง ลองดูตัวอย่างด้านล่าง - แบบฟอร์มใช้งานได้ดี แต่คุณจะเห็นว่ามันไม่พอดีเท่าที่ควร ให้ความสนใจเป็นพิเศษกับข้อความและไอคอนซึ่งอยู่ใกล้ขอบหน้าจอมากเกินไป:

แบบฟอร์มสำหรับ mobile.png

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

ตัวอย่างของแบบฟอร์มที่ไม่มีปัญหาการขยาย

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

สรุป

การตรวจสอบให้แน่ใจว่าเว็บไซต์ของคุณเข้ากันได้กับอุปกรณ์เคลื่อนที่เป็นกุญแจสำคัญในการรักษาการเข้าชมและไม่ทำให้ผู้เข้าชมของคุณหงุดหงิด โดยเฉพาะแบบฟอร์มของคุณควรใช้งานง่ายบนอุปกรณ์เคลื่อนที่หากคุณไม่ต้องการพลาดการรับข้อความหรือรวบรวมโอกาสในการขายที่มีค่า

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

  1. ลบส่วนที่ไม่จำเป็นออกทั้งหมด
  2. ใช้รายการแบบหล่นลงถ้าเป็นไปได้
  3. ตรวจสอบให้แน่ใจว่าปุ่มส่งของคุณนั้นกดง่าย
  4. ตรวจสอบว่าฟอร์มของคุณโหลดได้อย่างรวดเร็ว
  5. ทดสอบแบบฟอร์มก่อนที่จะเผยแพร่