12 ข้อผิดพลาด UX/UI ที่ไม่ควรกระทำในการออกแบบแอพ

เผยแพร่แล้ว: 2017-10-25

ข้อความมีขนาดเล็กเกินไปที่จะอ่าน

เนื้อหาแบบอักษรสีอ่อนขนาดเล็กบนพื้นหลังสีขาว

ผู้ใช้ไม่สามารถเห็นคุณสมบัติที่สำคัญซึ่งอยู่ในส่วนต่อประสานผู้ใช้อย่างอบอุ่น

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

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

1. เบี่ยงเบนจากความคาดหวังของผู้ใช้

Deviating from User Expectations

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

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

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

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

2. ไม่รู้ว่าผู้ใช้ต้องการอะไรจริงๆ

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

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

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

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

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

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

3. เป้าหมายการสัมผัสแย่

Poor Touch Targets

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

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

4. สโครลสยองขวัญ

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

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

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

5. ปุ่มที่เลียนแบบรูปลักษณ์ของปุ่มควบคุม GUI

Buttons that Mimic the Looks of GUI Control Buttons

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

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

เปิดเผยปุ่มตัวเลือกทุกที่ที่จำเป็นจริงๆ แต่อย่าทำให้ปุ่มตัวเลือกนั้นไม่มีความรู้สึกผิด

6. การควบคุม GUI ที่ไม่สอดคล้องกัน

การควบคุม GUI ควรสอดคล้องกัน หากคุณกำลังใช้คำเฉพาะสำหรับคำกระตุ้นการตัดสินใจและการกระทำที่คล้ายกัน ให้ใช้คำเดียวกันทั่วทั้งแอป การใช้คำต่างกันสำหรับการกระทำเดียวกันอาจสร้างความสับสนได้

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

7. ข้ามผังงานและลงไปที่การออกแบบ

Skipping the Flowcharts and Getting Down to the Designing

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

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

8. ไม่พิจารณา 'การรับรู้ความสามารถ'

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

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

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

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

9. ไม่มีกล่องโต้ตอบที่เหมาะสม

Absence of the Right Kind of Dialog Boxes

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

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

ตัวอย่างเช่น เมื่อผู้ใช้ตัดสินใจที่จะออกจากหน้าใดหน้าหนึ่งหลังจากพิมพ์ข้อมูล กล่องโต้ตอบอาจมาพร้อมกับกล่องยืนยันที่ระบุว่า "ทิ้งร่างจดหมายหรือไม่ ยกเลิกหรือยกเลิก”

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

10. สร้างข้อผิดพลาดทั่วไปด้วยข้อความแสดงข้อผิดพลาด

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

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

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

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

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

12. ละเว้นสีเน้นเสียงสำหรับปุ่มคำกระตุ้นการตัดสินใจ

Ignoring Accent Colors for the Call-to-Action Buttons

มันสำคัญมากที่จะต้องรวมสีที่เน้นเสียงไว้เพื่อดึงดูดความสนใจไปยังปุ่มต่างๆ เช่น "ซื้อเลย" "เริ่มบทช่วยสอนฟรี" "ลงทะเบียนเลย" ฯลฯ ใช้สีที่ต่างกันสำหรับปุ่มต่างๆ เพื่อให้ปุ่มดูโดดเด่น โดยเฉพาะอย่างยิ่งสำหรับปุ่มเหล่านั้น ปุ่มคำกระตุ้นการตัดสินใจที่สำคัญ

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

บทสรุป

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

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

คำเตือนครั้งสุดท้าย:

ขณะออกแบบแอปของคุณ อย่าลืมออกแบบสำหรับหลายแพลตฟอร์ม เว้นแต่คุณจะกำหนดเป้าหมายไปยังแพลตฟอร์มใดแพลตฟอร์มหนึ่งโดยเฉพาะ นี่คือวิธีที่คุณได้รับผลิตภัณฑ์ขั้นต่ำที่ทำงานได้ (MVP) ในร้าน