คู่มือที่ครอบคลุมสำหรับการออกแบบประสบการณ์ผู้ใช้

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

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

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

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

• ใช้บทเรียนบางส่วนจากโลกแห่งปฏิสัมพันธ์ระหว่างมนุษย์กับคอมพิวเตอร์ (HCI) เพื่อให้เราออกแบบโดยคำนึงถึงหลักการเป็นอันดับแรก และ

• สร้าง 'รูปลักษณ์' สำหรับการออกแบบของเราในลักษณะที่ไม่เชื่อเรื่องอุปกรณ์ ซึ่งสามารถใช้ได้ทั้งในบริบทของเดสก์ท็อปและอุปกรณ์เคลื่อนที่

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

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

รับโครงกระดูกในสถานที่

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

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

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

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

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

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

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

เรื่องราวของผู้ใช้

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

คำว่า 'User Story' มีต้นกำเนิดมาจาก Alistair Cockburn ซึ่งเป็นหนึ่งในผู้ริเริ่มการเคลื่อนไหวที่คล่องตัวในการพัฒนาซอฟต์แวร์ ซึ่งสร้างวลีที่ว่า "เรื่องราวของผู้ใช้คือคำมั่นสัญญาสำหรับการสนทนา" ในระหว่างโครงการสำหรับไครสเลอร์ในปี 2541

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

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

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

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

• ในฐานะที่เป็น (บุคคลในบทบาทเฉพาะ)
• ฉันต้องการ (ดำเนินการหรือค้นหาบางสิ่ง)
• เพื่อที่ (ฉันสามารถบรรลุเป้าหมายของฉันได้)

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

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

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

ในฐานะนักเรียน ฉันต้องการเข้าถึงสไลด์บรรยายเพื่อให้สามารถอ้างอิงได้เมื่อแก้ไข

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

การใช้สถานการณ์จำลองเพื่อแจ้งการออกแบบของคุณ

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

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

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

ตัวอย่างเช่น ย้อนกลับไปที่ตัวอย่างก่อนหน้านี้ จากมุมมองของนักเรียน เราอาจพิจารณาสถานการณ์สมมติต่อไปนี้:

• ในระดับพื้นฐาน นักเรียนต้องการเข้าถึงสไลด์

• ในระดับที่ดีขึ้นเล็กน้อย นักเรียนอาจต้องการใส่คำอธิบายประกอบในสไลด์ จดบันทึกย่อของพวกเขา

• สุดท้าย หากแหล่งข้อมูลเอื้ออำนวย นักเรียนอาจต้องการแบ่งปันบันทึกของตนกับเพื่อนๆ เพื่อให้สามารถเรียนรู้ร่วมกันได้

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

การทำแผนที่โฟลว์การออกแบบของคุณ

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

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

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

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

• รวดเร็ว ทำให้คุณสามารถทำซ้ำได้อย่างรวดเร็วผ่านรูปแบบต่างๆ ของโฟลว์

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

สุดท้าย กระดาษ 'ช่วยตัวเอง' เมื่อเราออกแบบบนหน้าจอ เรามักจะสูญเสียสิ่งประดิษฐ์การออกแบบเนื่องจากธรรมชาติของ 'สถานะ' ของการบันทึกซอฟต์แวร์ ซึ่งเป็นจุดต่างๆ ในกระบวนการออกแบบ การสร้างต้นแบบกระดาษช่วยให้เราเห็นกระบวนการออกแบบทั้งหมดรวมถึงแนวคิดที่ถูกปฏิเสธระหว่างทางไปยังแนวคิดที่เสร็จสิ้นของเรา

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

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

ในการถอดความ Jason Santa Maria:

การสเก็ตช์ภาพไม่ใช่เรื่องของการเป็นศิลปินที่ดี แต่เป็นการเป็นนักคิดที่ดี

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

จุดแห่งวิทยาศาสตร์: กฎหมาย UX

UX อาจเป็นวินัยที่ค่อนข้างใหม่ แต่ได้รับแจ้งจากการวิจัยหลายทศวรรษในสาขา Human Computer Interaction (HCI)

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

หลักการเหล่านี้มากมายได้ถูกกลั่นออกมาในรูปแบบของ 'กฎ' ที่เราสามารถดึงออกมาได้ ตัวอย่างเช่น:

• กฎของฮิกซึ่งเน้นความจำเป็นในการ ลดทางเลือกเพื่อลดภาระด้านความรู้ความเข้าใจและช่วยขับเคลื่อนการตัดสินใจ

• กฎของ Fitt ซึ่งให้คำแนะนำที่มีค่าเกี่ยวกับวิธีที่เราสามารถ ลดความยุ่งยากในการโต้ตอบผ่านการปรับขนาดและการวางตำแหน่งขององค์ประกอบส่วนต่อประสานอย่างระมัดระวัง และ

• กฎของมิลเลอร์ซึ่งเน้น ถึงประโยชน์ของ 'การหั่นเป็นชิ้น' เพื่อบรรเทางานที่ซับซ้อน

หลักการเหล่านี้เป็นหลักการที่สามารถนำไปใช้ได้ทั้งในระดับมหภาคและระดับจุลภาค และควรปรับปรุงในฐานะนักออกแบบ ซึ่งควรค่าแก่การสำรวจในเชิงลึก ฉันจะสำรวจสามข้อ — กฎของฮิก, กฎของฟิตต์ และกฎของมิลเลอร์—แต่ยังมีอีกมากมาย

เว็บไซต์ Laws of UX ที่ยอดเยี่ยมของ Jon Yablonski เป็นการรวบรวมหลักการที่เป็นประโยชน์ ซึ่งควรค่าแก่การทำบุ๊กมาร์ก ไม่เพียง แต่เป็นการออกแบบที่สวยงามในตัวของมันเองเท่านั้น แต่ยังให้ภาพรวมที่ดีของแต่ละหลักการพร้อมด้วยลิงก์สำหรับอ่านเพิ่มเติม

กฎของฮิค

กฎของฮิก (หรือทั้งหมดคือกฎหมายฮิก-ไฮมัน) กล่าวว่า:

เวลาที่ใช้ในการตัดสินใจจะเพิ่มขึ้นตามจำนวนและความซับซ้อนของตัวเลือก

กฎหมายนี้ตั้งชื่อตาม William Edmund Hick และ Ray Hyman ซึ่งเป็นคู่ของนักจิตวิทยา กฎหมายได้เน้นย้ำถึงความสำคัญของ การลดจำนวนตัวเลือกที่คุณนำเสนอต่อผู้ใช้ด้วย

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

เราสามารถประยุกต์ใช้กฎหมายของ Hick กับการออกแบบ UX ได้หลายวิธี:

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

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

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

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

กฎของฟิตต์

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

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

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

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

เราสามารถประยุกต์ใช้กฎของ Fitt กับการออกแบบ UX ได้หลายวิธี:

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

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

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

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

กฎของมิลเลอร์

กฎของมิลเลอร์กล่าวว่า: คนทั่วไปสามารถเก็บสิ่งของได้เจ็ด (บวกหรือลบสอง) ไว้ในหน่วยความจำในการทำงานของพวกเขา กล่าวโดยย่อ: มีเพียงมากเท่านั้นที่เราสามารถเก็บไว้ในหัวของเราในช่วงเวลาสั้น ๆ

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

• 07700984964

• 07700 984 964

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

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

เราสามารถประยุกต์ใช้ Miller's Law กับการออกแบบ UX ได้หลายวิธี:

• เมื่อลงรายการหมายเลขโทรศัพท์ แล้ว ข้อมูลจะถูกเก็บไว้อย่างง่ายดายในหน่วยความจำ ที่ใช้งานได้

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

• ลดภาระด้านความรู้ความเข้าใจ โดยจำกัดจำนวนตัวเลือกที่มีให้

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

Look And Feel: การสื่อสารการออกแบบภาพ

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

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

ในการตอบสนองต่อภูมิทัศน์ที่เปลี่ยนแปลงไปนี้ เราได้เห็นการย้ายไปสู่สิ่งประดิษฐ์การออกแบบที่เปลี่ยนจากความสมบูรณ์แบบของพิกเซลไปเพื่อจับ 'รสชาติ' ของการออกแบบ สิ่งประดิษฐ์เหล่านี้ได้แก่:

• บอร์ดอารมณ์
• กระเบื้องสไตล์
• องค์ประกอบภาพตัดปะ

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

Moodboarding

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

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

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

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

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

องค์ประกอบภาพตัดปะ

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

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

ดังที่ Samantha Warren ผู้พัฒนาวิธีการ Style Tiles กล่าวไว้ว่า:

Style Tiles เป็นตัวเร่งปฏิกิริยาสำหรับการอภิปรายเกี่ยวกับความชอบและเป้าหมายของลูกค้า

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

จากประสบการณ์ของผม Style Tiles สามารถถูกเข้าใจผิดโดยลูกค้าที่เข้าใจผิดคิดว่าเป็นภาพจำลอง ฉันชอบรูปแบบอิสระมากกว่า ใช้เทมเพลตน้อยกว่า และเมื่อฉันค้นพบแนวทาง Element Collage ของ Dan Mall ฉันก็รู้สึกติดใจ

ในโพสต์ที่ยอดเยี่ยมซึ่งมีรายละเอียดขั้นตอนการออกแบบในโครงการ Reading Is Fundamental Mall เน้นย้ำถึงความจำเป็นในการเปลี่ยนการนำเสนอด้วยการสนทนา ทำให้ลูกค้ามีส่วนร่วมในกระบวนการนี้ Element Collages เป็นวิธีที่ยอดเยี่ยมในการขับเคลื่อนแนวทางการสนทนานี้ ตามที่ Mall วางไว้:

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

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

ในการปิด

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

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

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

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

การอ่านที่แนะนำ

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

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

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

• “กฎแห่ง UX” จอน ยาบลอนสกี้
  ไซต์ที่ยอดเยี่ยมพร้อมการรวบรวมหลักการที่เป็นประโยชน์ซึ่งควรค่าแก่การทำบุ๊กมาร์ก ไม่เพียง แต่เป็นการออกแบบที่สวยงามในตัวของมันเองเท่านั้น แต่ยังให้ภาพรวมที่ดีของแต่ละหลักการพร้อมกับลิงก์สำหรับอ่านเพิ่มเติม

• “จิตวิทยาและ UX” Nielsen Norman Group
  ด้วยรากฐานที่มั่นคงในกฎหมายต่างๆ ที่สามารถนำไปใช้ในด้านประสบการณ์ของผู้ใช้ ฉันขอแนะนำให้สำรวจจิตวิทยาด้วย

• “Element Collages,” แดนมอลล์
  สิ่งนี้ควรค่าแก่การอ่านหากคุณต้องการทำความเข้าใจว่าเครื่องมือเหล่านี้สามารถใช้ในการให้บริการของโครงการลูกค้าทั่วไปได้อย่างไร

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