5 เคล็ดลับสำหรับการออกแบบแบบฟอร์มที่เหมาะกับอุปกรณ์พกพา

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

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

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

เหตุใดจึงสำคัญที่แบบฟอร์มของคุณต้องเป็นมิตรกับอุปกรณ์เคลื่อนที่

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

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

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

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

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

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

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

5 เคล็ดลับในการออกแบบแบบฟอร์มที่เหมาะกับอุปกรณ์พกพา

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

1. ลบส่วนที่ไม่จำเป็นออก

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

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

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

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

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

2. ใช้รายการแบบเลื่อนลงเมื่อเป็นไปได้

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

5. ทดสอบแบบฟอร์มของคุณก่อนเผยแพร่

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

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

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

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

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

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

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

บทสรุป

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

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

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

คุณมีคำถามเกี่ยวกับวิธีสร้างแบบฟอร์มที่เหมาะกับอุปกรณ์เคลื่อนที่โดยใช้ Divi หรือไม่? ถามออกไปในส่วนความคิดเห็นด้านล่าง!

ภาพขนาดย่อของบทความโดย Irina Adamovich / shutterstock.com