รายการตรวจสอบการออกแบบ UX

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

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

การออกแบบปฏิสัมพันธ์

01 – การกระทำซ้ำๆ หรือทำกิจกรรมบ่อยๆ ทำให้รู้สึกไม่เพลีย

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

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

02 – ผู้ใช้สามารถกู้คืนจากข้อผิดพลาดได้อย่างง่ายดาย

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

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

03 – ผู้ใช้ได้รับการสนับสนุนอย่างเพียงพอตามระดับความเชี่ยวชาญของพวกเขา

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

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

04 – การเข้าถึงความช่วยเหลือไม่เป็นอุปสรรคต่อความคืบหน้าของผู้ใช้

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

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

การออกแบบภาพ

05 – ไม่เกินสามแม่สี

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

วิธีทดสอบ: ตรวจสอบให้แน่ใจว่าจานสีที่คุณใช้ในการออกแบบผลิตภัณฑ์มีสีหลักไม่เกินสามสี

06 – สีเพียงอย่างเดียวไม่ได้ใช้เพื่อสื่อถึงลำดับชั้น เนื้อหา หรือการทำงาน

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

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

07 – ลำดับชั้นภาพนำผู้ใช้ไปยังการกระทำที่จำเป็น

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

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

08 – รายการที่อยู่ด้านบนของลำดับชั้นภาพเป็นสิ่งสำคัญที่สุด

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

วิธีทดสอบ: จับภาพหน้าจอผลิตภัณฑ์ดิจิทัลของคุณ จากนั้น Gaussian ทำให้ภาพหน้าจอนั้นเบลอเป็นรัศมีประมาณ 5px เมื่อดูผลลัพธ์ คุณจะมองเห็นลำดับชั้นในทันทีและสังเกตเห็นว่าองค์ประกอบใดโดดเด่น สิ่งเหล่านั้นสำคัญที่สุดสำหรับธุรกิจและผู้ใช้หรือไม่?

09 – การกระทำหลักแตกต่างจากการกระทำรองอย่างเห็นได้ชัด

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

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

10 – องค์ประกอบเชิงโต้ตอบไม่ถูกแยกออก

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

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

11 – การส่งแบบฟอร์มได้รับการยืนยันในลักษณะที่ชัดเจน

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

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

12 – ข้อความแจ้งเตือนมีความสอดคล้อง

มันคืออะไร: ข้อความแจ้งเตือนมีลักษณะภาพเหมือนกันและปรากฏในตำแหน่งเดียวกันในลักษณะเดียวกัน

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

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

13 – ข้อความแจ้งเตือนมีความแตกต่างทางสายตา

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

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

สถาปัตยกรรมสารสนเทศ

14 – การนำทางมีความสม่ำเสมอ

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

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

15 – ห้องสำหรับการเติบโต

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

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

วิชาการพิมพ์

16 – ใช้ตระกูลประเภทที่แตกต่างกันไม่เกินสองตระกูล

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

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

17 – แบบอักษรที่ใช้สำหรับเนื้อหาข้อความมีขนาดอย่างน้อย 12px

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

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

18 – จองคำตัวพิมพ์ใหญ่สำหรับป้ายกำกับ ส่วนหัว หรือตัวย่อ

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

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

19 – ใช้รูปแบบตัวอักษรหรือตระกูลที่แตกต่างกันเพื่อแยกเนื้อหาออกจากการควบคุม

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

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

20 – ขนาดตัวอักษร/น้ำหนักแตกต่างระหว่างประเภทเนื้อหา

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

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

หน้าจอผู้ใช้

21 – ความใกล้ชิดและการจัดตำแหน่ง

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

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

22 – ตัวบ่งชี้ความคืบหน้าสำหรับเวิร์กโฟลว์หลายขั้นตอน

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

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

23 – องค์ประกอบเบื้องหน้า (เช่น เนื้อหาและส่วนควบคุม) แยกจากพื้นหลังได้ง่าย

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

วิธีทดสอบ: จับภาพหน้าจอผลิตภัณฑ์ของคุณและ Gaussian blur ที่ภาพหน้าจอเป็นรัศมีประมาณ 3px ถึง 5px เมื่อดูผลลัพธ์ คุณสามารถบอกได้อย่างง่ายดายว่าอะไรอยู่เบื้องหน้าและเบื้องหลังคืออะไร

ขอแสดงความยินดีที่ผ่านรายการ! อย่างไรก็ตาม นี่ไม่ใช่จุดจบ

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