กฎ 10 ข้อของการออกแบบ UI ที่ดีที่ต้องปฏิบัติตามในทุกโครงการออกแบบเว็บ

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

กฎ 10 ข้อของการออกแบบ UI ที่ดีที่ต้องปฏิบัติตามในทุกโครงการออกแบบเว็บ

สมัครสมาชิกช่อง Youtube ของเรา

1. ทำให้ทุกสิ่งที่ผู้ใช้ต้องการสามารถเข้าถึงได้ง่าย

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

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

อีกตัวอย่างหนึ่งคือตัวเลือก Help/Support/Contact เมื่อออกแบบ UI ไม่ว่าจะเป็นสำหรับแอปมือถือ เว็บแอป เว็บไซต์ WordPress หรืออย่างอื่น ผู้ใช้ของคุณจะต้องค้นหาปุ่มวิธีใช้ เสมอ (หรือปุ่มติดต่อฝ่ายสนับสนุน) พวกเขาจะต้องติดต่อคุณอย่างแน่นอนในบาง ครั้ง นั่นเป็นเหตุผลที่คุณต้องแน่ใจว่าได้วางปุ่มช่วยเหลือไว้ด้านหน้าและตรงกลางเสมอ ดูดิ. ในทุกโมดูล เรามีปุ่มสนับสนุนพร้อมให้คุณใช้งานเพียงปลายนิ้วสัมผัส ทุกเมื่อที่คุณต้องการ

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

2. มีความสม่ำเสมอ

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

ความสอดคล้องยังรวมถึงแบบอักษรของคุณและการออกแบบควรทำงานจากหน้าหนึ่งไปอีกหน้าหนึ่ง อย่าไปสลับฟอนต์ส่วนหัว/เนื้อหาจากหน้าหนึ่งไปอีกหน้า

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

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

3. ชัดเจน

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

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

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

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

4. ให้คำติชม

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

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

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

5. ใช้การรับรู้ไม่ใช่การเรียกคืน

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

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

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

6. เลือกว่าผู้คนจะโต้ตอบกันอย่างไรก่อน

เครดิตภาพ John Picklap ได้รับความอนุเคราะห์จาก MarieClaire.com

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

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

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

7. ปฏิบัติตามมาตรฐานการออกแบบ

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

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

ไม่ผิดที่จะคิดนอกกรอบและมองหาการออกแบบที่แปลกใหม่ แต่นั่นไม่ได้หมายความว่าการออกแบบนั้นใช้งานยาก

8. เรื่องลำดับชั้นธาตุ

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

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

หลักการง่ายๆ ก็คือ คุณต้องการให้สิ่งต่าง ๆ ไหลจากซ้ายไปขวา บนลงล่าง

9. ทำให้ทุกอย่างเรียบง่าย

ดูแบบฟอร์มการติดต่อนี้:

ตอนนี้ดูอันนี้:

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

10. ให้ผู้ใช้ของคุณเป็นอิสระและอยู่ในการควบคุม

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

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

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

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

UI พร้อมหรือยัง?

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

คุณมีกฎเกณฑ์ใดบ้างสำหรับการออกแบบ UI ที่ดีที่คุณปฏิบัติตามอยู่เสมอ

ภาพเด่นของบทความโดย emojoez / shutterstock.com