การพัฒนาอินเทอร์เฟซ การออกแบบส่วนต่อประสานกราฟิกกับผู้ใช้

สารบัญ:

การพัฒนาอินเทอร์เฟซ การออกแบบส่วนต่อประสานกราฟิกกับผู้ใช้
การพัฒนาอินเทอร์เฟซ การออกแบบส่วนต่อประสานกราฟิกกับผู้ใช้
Anonim

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

จุดเริ่มต้นของการออกแบบ

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

การพัฒนาอินเทอร์เฟซที่มีการจัดการ
การพัฒนาอินเทอร์เฟซที่มีการจัดการ

ปิรามิดความต้องการสินค้า

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

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

GUI
GUI

เรื่องราวของผู้ใช้และสถานการณ์

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

การพัฒนาอินเตอร์เฟสการเขียนโปรแกรม
การพัฒนาอินเตอร์เฟสการเขียนโปรแกรม

การพัฒนาอินเทอร์เฟซที่มีการจัดการ

ความสามารถในการเปลี่ยนอินเทอร์เฟซตามความต้องการของผู้ใช้อย่างอิสระนั้นมีอยู่ในผลิตภัณฑ์ของบริษัท "1C" ตัวอย่างเช่น ในระบบ 1C:Enterprise 8.2 โดยใช้เครื่องมือการพัฒนาในตัว ผู้ดูแลระบบสามารถตั้งโปรแกรมแบบฟอร์ม เพิ่มประสิทธิภาพการโต้ตอบระหว่างส่วนไคลเอนต์และเซิร์ฟเวอร์ และปรับแต่งแพลตฟอร์ม โซลูชันแอปพลิเคชันมีให้ใช้งานไม่เฉพาะในเครือข่ายท้องถิ่นเท่านั้น แต่ยังใช้ได้ผ่านทางอินเทอร์เน็ต หากใช้ช่องทางการสื่อสารความเร็วต่ำ

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

สรีรวิทยาของการรับรู้ของอินเทอร์เฟซ

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

การพัฒนาอินเทอร์เฟซผู้ใช้
การพัฒนาอินเทอร์เฟซผู้ใช้

ตัวเลขมหัศจรรย์ 7±2 และ 4±1

ในปี ค.ศ. 1920 นักจิตวิทยา George Miller ได้ทำการทดลองใน Bell Labs ซึ่งกลุ่มคนแก้ปัญหาบางอย่างโดยใช้วัตถุจำนวนต่างกัน ผลที่ได้คือยิ่งใช้วัตถุน้อยลงเท่าไหร่งานก็จะยิ่งได้รับการแก้ไขมากขึ้นเท่านั้น หลังจากทบทวนผลการศึกษาแล้ว Millerเขาอนุมานกฎว่าวัตถุ 7 ± 2 ชิ้นเป็นจำนวนสูงสุดที่หน่วยความจำระยะสั้นของบุคคลสามารถรองรับได้ สมองเริ่มที่จะหลีกเลี่ยงจำนวนมากเพื่อประหยัดทรัพยากร ไม่นานมานี้ มีการศึกษาใหม่ปรากฏขึ้นซึ่งบอกว่าไม่ควรมี 7±2 แต่มีวัตถุ 4±1

ความแตกต่างในการประมวลผลของสมอง

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

การพัฒนาอินเทอร์เฟซ 1 วินาที
การพัฒนาอินเทอร์เฟซ 1 วินาที

ความสำคัญของการใช้กฎ 4±1

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

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

การพัฒนา GUI
การพัฒนา GUI

ใช้การรับรู้สีและขนาด

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

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

รูปภาพและข้อความ

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

อินเทอร์เฟซการพัฒนาแอปพลิเคชัน
อินเทอร์เฟซการพัฒนาแอปพลิเคชัน

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

การอ่านข้อความ

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

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