4 เคล็ดลับการออกแบบรูปแบบ UX ที่คุณควรรู้ (พร้อมตัวอย่าง)

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

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

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

คาดการณ์ความต้องการของผู้ใช้

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

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

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

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

ตัวอย่าง: ความต้องการของผู้ใช้ในการลงชื่อเข้าใช้โซเชียล

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

แต่ มันเหมาะสำหรับ Codepen, เนื่องจากฐานผู้ใช้ของพวกเขาประกอบด้วยนักพัฒนาซอฟต์แวร์หลายคนต้องการเข้าสู่ระบบด้วยบัญชี Github ของพวกเขาหรือเชื่อมต่อบัญชีการพัฒนาของพวกเขากับแต่ละอื่น ๆ ในครั้งเดียว.

คิดว่ามือถือเป็นอันดับแรก

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

นอกจากนี้รูปแบบ UI หลายรูปแบบที่ทำงานได้ดีบนมือถือจะทำงานได้ดีบนเดสก์ท็อปเช่นกัน.

ตัวอย่าง: ตัวควบคุมแบบแตะได้

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

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

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

เวอร์ชันเดสก์ท็อปของไซต์ ใช้การออกแบบรูปแบบเดียวกัน, เพราะมันดูดีและใช้งานได้ดีบนหน้าจอขนาดใหญ่.

ตัวอย่าง: อินพุตที่ขยายได้

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

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

เมื่อผู้ใช้เคาะออกจากสนามมันจะหดตัวและข้อมูลเพิ่มเติมจะหายไป.

ตัวอย่าง: ปุ่ม Morphing

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

ภาพหน้าจอด้านล่างมาจากบทความยอดเยี่ยมของ The Startup เกี่ยวกับการออกแบบรูปแบบใหม่ซึ่งนำเสนอโซลูชั่นสร้างสรรค์อื่น ๆ อีกมากมายเช่นกัน.

อำนวยความสะดวกในการรับข้อมูลเข้า

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

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

เว็บไซต์อีคอมเมิร์ซหลายแห่ง (เช่นอเมซอน) ใช้โซลูชันนี้เพื่อลดอัตราการละทิ้งรถเข็น.

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

ตัวอย่าง: เครื่องมือเลือกอินพุตส่วนบุคคล

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

แอปรับ - ส่งรายการ Todoist ให้คำแนะนำส่วนบุคคล ภายในเครื่องมือเลือกวันที่เมื่อผู้ใช้เลื่อนผ่านวันที่.

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

ตัวอย่าง: การลากแล้วปล่อย

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

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

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

ตัวอย่าง: การซ้อนทับเพื่อลบสิ่งรบกวน

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

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

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

ให้ข้อเสนอแนะกับผู้ใช้

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

ในการออกแบบรูปแบบมี การตอบกลับของผู้ใช้สองชนิด:

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

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

ตัวอย่าง: ตัวติดตามความคืบหน้า

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

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

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

ตัวอย่าง: การตรวจสอบความถูกต้องตามเวลาจริง

ร้านค้าปลีกเครื่องสำอางของ The Body Shop ใช้ การตรวจสอบตามเวลาจริง ในแบบฟอร์มโปรไฟล์ผู้ใช้เพื่อกำจัดข้อผิดพลาดและปรับปรุง UX ของกระบวนการเสร็จสิ้นแบบฟอร์ม.

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

ตัวอย่าง: คำแนะนำเครื่องมือ

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

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

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

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