4 เคล็ดลับการออกแบบรูปแบบ UX ที่คุณควรรู้ (พร้อมตัวอย่าง)
เรามักจะคิดถึงฟอร์มเป็นเพียงวิธีในการรวบรวมข้อมูลผู้ใช้ แต่บางครั้งก็เป็นวิธีหนึ่งเช่นกัน วิธีเดียว, สำหรับผู้ใช้ของเรา เชื่อมต่อกับเรา. อาจคิดว่าเราสามารถสร้างผู้ใช้ได้ ความรัก การกรอกแบบฟอร์มอย่างไรก็ตามเป็นไปได้อย่างแน่นอน เพื่อค้นหาวิธีแก้ไขที่ไม่รบกวนพวกเขามากเกินไป, และช่วยพวกเขาตลอดกระบวนการ.
ในขณะที่ท่องเน็ตเราสามารถหาวิธีแก้ไขปัญหาที่น่าแปลกใจที่ถูกต้องทางโปรแกรม แต่บางครั้งก็ถูกออกแบบมาในแบบที่เป็นไปได้มากที่สุด ทำให้ผู้ใช้หลายคนละทิ้งเว็บไซต์เนื่องจากประสบการณ์การใช้งานที่ไม่ดี.
หากแบบฟอร์มของเราได้รับการออกแบบมาอย่างดีเราจะไม่เพียง แต่ทำให้ผู้ใช้ของเราพอใจ แต่ยังเป็นทีมงานแบ็กเอนด์ที่สามารถจัดการได้ ข้อผิดพลาดของผู้ใช้ที่ป้อนเข้าน้อยมาก. ดังนั้นในบทความนี้เราจะดูว่าเราสามารถทำได้ ลดข้อผิดพลาดการป้อนข้อมูลของผู้ใช้ และยังคง ทำให้ผู้ใช้ของเรามีความสุข.
คาดการณ์ความต้องการของผู้ใช้
เว็บไซต์และแอพพลิเคชั่น ฐานผู้ใช้และเป้าหมายที่แตกต่างกัน, และแม้แต่ตำแหน่งเดียวกันยังสามารถโฮสต์หลายรูปแบบที่รวบรวมข้อมูลประเภทต่าง ๆ เพียงเพื่อตั้งชื่อรูปแบบที่พบบ่อยที่สุด:
- แบบฟอร์มเข้าสู่ระบบ
- แบบฟอร์มลงทะเบียน
- แบบฟอร์มโปรไฟล์ผู้ใช้
- แบบฟอร์มสมัครจดหมายข่าว
- แบบฟอร์มการชำระเงิน
- แบบสำรวจผู้ใช้
- แบบฟอร์มการติดต่อ
- แบบฟอร์มแสดงความคิดเห็น
- ค้นหาแบบฟอร์ม
ประเภทฟอร์มทั้งหมดเหล่านี้ ต้องการสิ่งที่แตกต่าง. เมื่อออกแบบฟอร์มชำระเงินเป็นสิ่งสำคัญที่จะต้องมั่นใจได้ว่าผู้ใช้มั่นใจในความปลอดภัยในขณะที่ในกรณีของแบบฟอร์มความคิดเห็นเป็นความคิดที่ดี เพิ่มอิโมจิหรือวิธีอื่น ๆ ที่ช่วยให้ผู้ใช้แสดงอารมณ์ที่แท้จริงของพวกเขา.
อย่างไรก็ตามแม้กระทั่งรูปแบบที่คล้ายกันอาจจำเป็นต้องได้รับการออกแบบที่แตกต่างกันเนื่องจากเว็บไซต์ทั้งหมดมี ฐานผู้ใช้ที่ไม่ซ้ำกัน. ก่อนที่จะเริ่มกระบวนการออกแบบมันเป็นความคิดที่ดีเสมอ คาดหวังสิ่งที่ผู้ใช้ของเราต้องการ, และการออกแบบตาม.
ตัวอย่าง: ความต้องการของผู้ใช้ในการลงชื่อเข้าใช้โซเชียล
แบบฟอร์มการเข้าสู่ระบบของ Codepen ประกอบด้วยการเข้าสู่ระบบสังคมสามแบบด้วย Github ที่ด้านบน ตัวเลือกนี้จะไม่มีเหตุผลสำหรับเว็บไซต์ส่วนใหญ่.
แต่ มันเหมาะสำหรับ Codepen, เนื่องจากฐานผู้ใช้ของพวกเขาประกอบด้วยนักพัฒนาซอฟต์แวร์หลายคนต้องการเข้าสู่ระบบด้วยบัญชี Github ของพวกเขาหรือเชื่อมต่อบัญชีการพัฒนาของพวกเขากับแต่ละอื่น ๆ ในครั้งเดียว.
คิดว่ามือถือเป็นอันดับแรก
ผู้ใช้มือถือและเดสก์ท็อปมีความต้องการที่แตกต่างกันออกไป การกรอกแบบฟอร์มเป็นความท้าทายที่ยิ่งใหญ่กว่าบนหน้าจอมือถือ, ใช้ท่าทางมือมากกว่าบนแป้นพิมพ์กายภาพ a วิธีการใช้มือถือเป็นครั้งแรก สามารถพาเราไปไกลกว่านี้ได้เมื่อเราต้องการออกแบบฟอร์มที่ใช้งานได้.
นอกจากนี้รูปแบบ UI หลายรูปแบบที่ทำงานได้ดีบนมือถือจะทำงานได้ดีบนเดสก์ท็อปเช่นกัน.
ตัวอย่าง: ตัวควบคุมแบบแตะได้
ไม่สามารถจินตนาการถึงแบบฟอร์มมือถือคุณภาพสูง การควบคุมที่มองเห็นได้ ที่ ผู้ใช้มือถือสามารถแตะได้อย่างง่ายดาย ด้วยมือของพวกเขา.
รูปแบบการลงทะเบียนจดหมายข่าวของการประชุมการออกแบบเว็บเหตุการณ์นอกเหนือจากปรับให้เหมาะกับวิธีที่ผู้ใช้มือถือเข้าถึงหน้าจอ - มันมี สองช่องป้อนข้อมูลที่ง่ายต่อการแตะ และ ปุ่มขนาดปลายนิ้ว.
ฟิลด์ป้อนข้อความจะสูงกว่าปกติเพื่อให้ผู้ใช้มือถือสามารถแตะที่พวกเขาได้อย่างง่ายดายและปุ่มสีส้มขนาดใหญ่พร้อมไอคอนติ๊กส่งเสริมให้ผู้ใช้ส่งแบบฟอร์มต่อไป.
เวอร์ชันเดสก์ท็อปของไซต์ ใช้การออกแบบรูปแบบเดียวกัน, เพราะมันดูดีและใช้งานได้ดีบนหน้าจอขนาดใหญ่.
ตัวอย่าง: อินพุตที่ขยายได้
เมื่อออกแบบฟอร์มสำหรับอุปกรณ์พกพาสิ่งสำคัญคือการพิจารณาว่าเราจะทำได้อย่างไร ลดพื้นที่ที่เราใช้. อินพุตที่ใช้ได้ รูปแบบการออกแบบ UI ได้รับความนิยมค่อนข้างเร็วและใช้งานได้ดีกับมือถือโดยเฉพาะ.
Booking.com ใช้รูปแบบนี้ในแบบฟอร์มการค้นหาบนเว็บไซต์มือถือ เมื่อผู้ใช้แตะลงในช่องค้นหาผู้ใช้จะขยายเพื่อ เว้นที่ว่างสำหรับท่าทาง, และรายการที่เลือกพร้อมคำแนะนำจะปรากฏขึ้นด้านล่าง.
เมื่อผู้ใช้เคาะออกจากสนามมันจะหดตัวและข้อมูลเพิ่มเติมจะหายไป.
ตัวอย่าง: ปุ่ม Morphing
ปุ่มเปลี่ยนภาพ ใช้รูปแบบการป้อนข้อมูลที่ใช้จ่ายได้ในขั้นตอนเดียวยิ่งขึ้นไปอีกเมื่อผู้ใช้เห็นปุ่มครั้งแรก morphs เป็นแบบฟอร์ม เมื่อพวกเขาแตะที่มัน.
ภาพหน้าจอด้านล่างมาจากบทความยอดเยี่ยมของ The Startup เกี่ยวกับการออกแบบรูปแบบใหม่ซึ่งนำเสนอโซลูชั่นสร้างสรรค์อื่น ๆ อีกมากมายเช่นกัน.
อำนวยความสะดวกในการรับข้อมูลเข้า
แบบฟอร์มที่มีความยาวมีแนวโน้มที่จะยับยั้งผู้ใช้ สิ่งที่ดีที่สุดที่เราสามารถทำได้คือ ขอข้อมูลที่เราต้องการเท่านั้น. สิ่งนี้ไม่เพียง แต่สำคัญจากมุมมองประสบการณ์ผู้ใช้เท่านั้น แต่ผู้ใช้ยังสามารถลังเลที่จะให้ข้อมูลส่วนบุคคลมากเกินไปเพราะ ความกังวลเกี่ยวกับความเป็นส่วนตัว.
อย่างไรก็ตามบางครั้งเรา ยังคง ต้องไปพร้อมกับฟอร์มที่ยาวขึ้น ในกรณีนี้มันเป็นความคิดที่ดี หั่นมันเป็นชิ้นเล็ก ๆ, และ ให้บริการชิ้นเป็นหน้าจอต่อเนื่อง.
เว็บไซต์อีคอมเมิร์ซหลายแห่ง (เช่นอเมซอน) ใช้โซลูชันนี้เพื่อลดอัตราการละทิ้งรถเข็น.
ถ้าเราต้องการให้การกรอกฟิลด์ของฟอร์มง่ายขึ้นกฎของหัวแม่มือก็คือ ลดการรบกวนและการกระทำของผู้ใช้ มากเท่าที่จะมากได้.
ตัวอย่าง: เครื่องมือเลือกอินพุตส่วนบุคคล
เครื่องมือเลือกเนื้อหาที่แตกต่างกันเช่นเครื่องมือเลือกวันที่หรือเครื่องมือเลือกสีไม่เพียงทำให้ง่ายขึ้นในการป้อนข้อมูลที่ถูกต้อง แต่ยังสร้างแบบฟอร์มได้อีกด้วย น่าสนใจยิ่งขึ้น, และอย่างมีนัยสำคัญ ลดข้อผิดพลาดของผู้ใช้.
แอปรับ - ส่งรายการ Todoist ให้คำแนะนำส่วนบุคคล ภายในเครื่องมือเลือกวันที่เมื่อผู้ใช้เลื่อนผ่านวันที่.
ตัวอย่างเช่นภาพหน้าจอด้านล่างผู้ใช้จะเห็นว่าในวันที่ 31 ส.ค. เธอมีงานที่ต้องทำถึง 2 งานและสามารถนำข้อมูลนี้มาพิจารณาในการตัดสินใจเลือกวันที่เหมาะสม มันเป็นความคิดที่ยอดเยี่ยมสำหรับแอปที่ให้ความสำคัญกับประสิทธิภาพของผู้ใช้เป็นหลัก.
ตัวอย่าง: การลากแล้วปล่อย
การออกแบบแบบลากแล้ววาง มักจะทำงานได้ดีกับเขตข้อมูลอัปโหลดไฟล์โดยเฉพาะอย่างยิ่งที่ผู้ใช้ควรอัปโหลดภาพ.
พวกเขาอาจไม่ลดการกระทำของผู้ใช้เมื่อเทียบกับปุ่มอัพโหลดไฟล์ธรรมดา แต่ก็ทำให้ง่ายขึ้นมาก เลือกไฟล์ที่ผู้ใช้ต้องการอัปโหลด, จึงลดโอกาสในการส่งไฟล์ผิด.
WordPress.com มีส่วนต่อประสานผู้ใช้แบบลากและวางที่ใช้งานง่ายและสง่างามในรูปแบบเครื่องมือแก้ไขโพสต์ รูปย่อขนาดเล็ก และ การแสดงภาพของไฟล์ที่อัพโหลดแล้ว ช่วยให้ผู้ใช้ดำเนินการอัปโหลดได้อย่างรวดเร็ว.
ตัวอย่าง: การซ้อนทับเพื่อลบสิ่งรบกวน
หากผู้ใช้ถูกรบกวนในขณะที่กรอกแบบฟอร์มของเราพวกเขามีแนวโน้มที่จะเกิดข้อผิดพลาดและยังได้รับความรำคาญได้ง่ายขึ้น
วางซ้อนเนื้อหา เป็นทางเลือกที่ดีในการออกแบบรูปแบบมินิมอล พวกเขาจะใช้ โดยไซต์ที่ซับซ้อนมากขึ้น ที่ต้องการแสดงข้อมูลประเภทต่าง ๆ บนหน้าจอเดียวกัน.
ในภาพด้านล่างคุณสามารถดู Booking.com บนเดสก์ท็อป เมื่อผู้ใช้วางเมาส์บนฟอร์มการค้นหาเนื้อหาที่เหลือจะได้รับ ครอบคลุมด้วยการซ้อนทับสีเทา เพื่อช่วยพวกเขา ให้ความสำคัญกับกระบวนการกรอกแบบฟอร์ม.
ให้ข้อเสนอแนะกับผู้ใช้
ให้ ข้อเสนอแนะที่ถูกต้องในเวลาที่เหมาะสม สามารถปรับปรุงประสบการณ์ผู้ใช้อย่างมีนัยสำคัญ.
ในการออกแบบรูปแบบมี การตอบกลับของผู้ใช้สองชนิด:
- ข้อเสนอแนะที่ได้รับ ก่อน ส่งแบบฟอร์ม - เพื่อที่จะ ลดข้อผิดพลาด และ แบบฟอร์มอัตราการละทิ้ง, เช่นเครื่องมือติดตามความคืบหน้าการตรวจสอบอินพุตทันทีที่ให้รางวัลผู้ใช้ทันทีสำหรับอินพุตที่ถูกต้องหรือเคล็ดลับเครื่องมือช่วยเหลือ
- ข้อเสนอแนะที่ได้รับ หลังจาก ส่งแบบฟอร์ม - เพื่อให้ผู้ใช้ทราบ พวกเขาส่งข้อผิดพลาด, เช่นข้อความแสดงข้อผิดพลาด
ความคิดเห็นของผู้ใช้ที่ผู้ใช้ของเราต้องการนั้นขึ้นอยู่กับลักษณะของกลุ่มเป้าหมายของเราและเป้าหมายของเว็บไซต์ของเรา.
ตัวอย่าง: ตัวติดตามความคืบหน้า
แบบฟอร์มที่ยาวกว่าหนึ่งหน้าเช่นแบบสำรวจและแบบฟอร์มเช็คเอาต์อีคอมเมิร์ซส่วนใหญ่สามารถใช้ประโยชน์จาก ติดตามความคืบหน้า รูปแบบการออกแบบ. ตัวติดตามความคืบหน้าให้ ข้อเสนอแนะภาพทันที แก่ผู้ใช้เกี่ยวกับสถานะของพวกเขาและสนับสนุนให้พวกเขาไปกับกระบวนการ.
เว็บแอป SnapSurveys ผู้สร้างแบบสำรวจแสดงตัวติดตามความคืบหน้าเล็กน้อยด้านบนปุ่มส่งเพื่อให้ผู้ใช้สามารถทำได้ ตามธรรมชาติจับสายตาของมัน.
ตัวติดตามความคืบหน้าไม่ได้ใช้ป้ายกำกับใด ๆ แต่เป็นวิธีที่ออกแบบไว้ ทำให้เป้าหมายชัดเจน - จำนวนแวดวงระบุจำนวนขั้นตอนขั้นตอนที่ดำเนินการแล้วจะกลายเป็นสีน้ำเงินและผู้ใช้สามารถดูจำนวนขั้นตอนที่ยังอยู่ข้างหน้าได้อย่างง่ายดาย.
ตัวอย่าง: การตรวจสอบความถูกต้องตามเวลาจริง
ร้านค้าปลีกเครื่องสำอางของ The Body Shop ใช้ การตรวจสอบตามเวลาจริง ในแบบฟอร์มโปรไฟล์ผู้ใช้เพื่อกำจัดข้อผิดพลาดและปรับปรุง UX ของกระบวนการเสร็จสิ้นแบบฟอร์ม.
อินพุตจะถูกตรวจสอบในขณะที่ผู้ใช้กรอกแบบฟอร์มและคำตอบที่ถูกและผิดจะถูกระบุโดยทันที ไอคอนแยกแยะได้ง่าย อีกเล็กน้อยทางด้านขวา แต่ยังอยู่ในพื้นที่ที่มองเห็นได้.
ตัวอย่าง: คำแนะนำเครื่องมือ
microcopy ที่เข้าใจได้ ยังเป็นส่วนสำคัญของความคิดเห็นของผู้ใช้ที่ประสบความสำเร็จในการออกแบบฟอร์ม ตามคำจำกัดความไมโครโค้ดของเว็บไซต์ประกอบด้วย ข้อความเล็ก ๆ ใช้ในองค์ประกอบต่าง ๆ - ป้ายชื่อปุ่มข้อความผิดพลาดเคล็ดลับเครื่องมือ ฯลฯ.
ในรูปแบบการเข้าสู่ระบบกลุ่มธนาคารของ Barclay ตอบคำถามที่ผู้ใช้อาจถามด้วยความช่วยเหลือ เคล็ดลับเครื่องมือที่ออกแบบมาอย่างดี ซึ่งรวมถึง microcopy ที่เข้าใจง่าย.
เคล็ดลับเครื่องมือถูกซ่อนอยู่ด้านหลังเล็กน้อย? ไอคอน ไม่รบกวนผู้ใช้ ใครจะรู้วิธีกรอกแบบฟอร์มเข้าสู่ระบบ แต่ ที่จะนำเสนอเสมอ สำหรับผู้ใช้ที่ไม่แน่ใจ.
เคล็ดลับเครื่องมือบางอย่างมีอยู่ด้วย ภาพบัตรเดบิตที่มีคำอธิบายประกอบเล็กน้อย เพื่อให้ผู้ใช้สามารถค้นหาข้อมูลที่พวกเขาต้องป้อนลงในแบบฟอร์มการเข้าสู่ระบบได้อย่างง่ายดาย.