หลักการฮิวริสติกสำหรับอินเทอร์เฟซมือถือ

เผยแพร่แล้ว: 2022-03-11

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

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

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

การวิเคราะห์พฤติกรรมการใช้งานเริ่มต้นด้วยความต้องการของผู้ใช้

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

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

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

#1 ความโปร่งใสของโครงสร้างระบบ

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

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

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

#2 คำติชมของการดำเนินการทันที

การตอบสนองต่อการกระทำของผู้ใช้ที่ยืนยันว่าระบบได้รับคำขอแล้ว

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

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

#3 การรับรู้ถึงข้อผิดพลาด

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

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

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

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

#4 ความยืดหยุ่นในการใช้งาน

อินเทอร์เฟซที่ผู้ใช้ที่มีประสบการณ์หลากหลายสามารถใช้งานได้อย่างเป็นธรรมชาติและมีประสิทธิภาพ

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

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

หลักการทางวิศวกรรมองค์ความรู้ของ Jill Gerhardt-Powal แนะนำให้นักออกแบบ "จัดเตรียมการเข้ารหัสข้อมูลหลายชุดตามความเหมาะสม ระบบควรให้ข้อมูลในรูปแบบและ/หรือระดับของรายละเอียดที่แตกต่างกัน เพื่อส่งเสริมความยืดหยุ่นในการรับรู้และตอบสนองความต้องการของผู้ใช้" อินเทอร์เฟซที่ล้นหลามหรือจำกัดจะทำให้ประสบการณ์ที่น่าผิดหวัง

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

#5 ความคุ้นเคยของประสบการณ์สากล

การใช้องค์ประกอบการออกแบบที่เกี่ยวข้องกับประสบการณ์และความคาดหวังของมนุษย์ทั่วไป

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

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

หลักการฮิวริสติกอาศัยความคุ้นเคย
ไอคอนทั้งสองนี้สามารถจดจำได้ทันทีและบ่งบอกถึงการกระทำที่ผู้ใช้ส่วนใหญ่เข้าใจได้อย่างชัดเจน (ออกแบบโดย <a href=”https://dribbble.com/pixelamiri

#6 ข้อจำกัดของข้อมูลและการออกแบบที่สวยงาม

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

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

Ben Terrett มักใช้หลักการออกแบบข้อที่สี่ของ GOV.UK: “ทำงานหนักเพื่อทำให้ง่าย” เขาเชื่อว่าทีมออกแบบจะต้องเข้าใจปัญหาที่พวกเขากำลังเผชิญอย่างถ่องแท้ ตลอดจนกระบวนการที่นำไปสู่ทางออกที่ดีที่สุดในการมอบประสบการณ์ผู้ใช้ที่ใช้งานง่าย ให้ข้อมูล และประสบความสำเร็จ วิธีการบางอย่างได้อธิบายไว้ในกรณีศึกษานี้

Gov.uk
British Government Digital Services แยกย่อยข้อมูลเพื่อกำหนดสิ่งที่ผู้ใช้จำเป็นต้องรู้ และสร้างการออกแบบภาพที่ขจัดสิ่งที่ไม่จำเป็นออกไป เพื่อรองรับความชัดเจนของข้อมูล (ออกแบบโดย Government Digital Services)

#7 การจัดลำดับความสำคัญของฟังก์ชันมากกว่า Form

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

“ถ้าคุณคิดว่าบางอย่างฉลาดและซับซ้อน ให้ระวัง—นั่นอาจเป็นการตามใจตัวเอง” — ดอน นอร์แมน นักออกแบบผลิตภัณฑ์และผู้แต่ง 'The Design of Everyday Things' ที่มีผลงานมากมาย

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

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

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

#8 ความพร้อมของข้อมูล

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

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

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

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

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

#9 ความน่าเชื่อถือของความสม่ำเสมอ

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

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

“นี่ไม่ใช่เสื้อรัดรูปหรือหนังสือกฎเกณฑ์ ทุกกรณีมีความแตกต่างกัน” หลักการออกแบบของ GOV.UK ระบุว่าอินเทอร์เฟซควรสอดคล้องกัน แต่ไม่เหมือนกัน ดังที่ Jill Gerhardt-Powal ย้ำ "ข้อมูลใหม่ควรนำเสนอภายในกรอบการทำงานที่คุ้นเคย (เช่น สคีมา คำอุปมา คำศัพท์ในชีวิตประจำวัน) เพื่อให้ง่ายต่อการเข้าใจข้อมูล"

การวิเคราะห์พฤติกรรมของ Nielsen เรียกร้องให้มีความสม่ำเสมอ
การมุ่งเน้นที่การออกแบบที่เพิ่มขึ้นของ Google แสดงให้เห็นในแนวทางโดยละเอียดสำหรับการออกแบบ UI ทั้งหมด (ออกแบบตามวัสดุ)

#10 ความซ้ำซากจำเจ

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

Jakob Nielsen เป็นคนแรกที่ยอมรับว่าเป็นไปไม่ได้ที่จะนำเสนอลักษณะเฉพาะที่เป็นสากลสำหรับการออกแบบ UI ตัวอย่างเช่น หลักการฮิวริสติกสองข้อของเขาอาจขัดแย้งกันอย่างเห็นได้ชัด—#6: ให้ข้อมูลทั้งหมดที่ผู้ใช้ต้องการในการตัดสินใจ และ #8: กำจัดสิ่งที่ไม่จำเป็นออกไป

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

• • •

อ่านเพิ่มเติมเกี่ยวกับบล็อก Toptal Design:

  • Heuristic Analysis สำหรับ UX - วิธีเรียกใช้การประเมินความสามารถในการใช้งาน
  • หลักการออกแบบและความสำคัญ
  • ความสำคัญของการออกแบบที่เน้นมนุษย์เป็นศูนย์กลางในการออกแบบผลิตภัณฑ์
  • การสร้างคู่มือสไตล์ UI เพื่อ UX . ที่ดีขึ้น
  • แนวทางปฏิบัติที่ดีที่สุดและข้อผิดพลาดในการออกแบบแอพมือถือ