เพิ่ม UX ของคุณด้วยลำดับชั้นภาพที่ชัดเจน

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

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

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

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

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

กำหนด UX และวัตถุประสงค์ของแบรนด์

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

การกำหนดนิยามของเป้าหมาย UX โดยเป็นไปตามเกณฑ์สำหรับวิธีการ SMART ( S pecific, M easurable, A ctionable, R elevant, T rackable) เป็นวิธีหนึ่งที่นิยมในการทำเช่นนี้ มีบทความที่ดีเกี่ยวกับเรื่องนี้ที่นี่

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

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

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

จากนั้นแชร์หน้าจอ (หรือเสียบเข้ากับจอภาพ) แล้วเริ่มทำหมายเหตุประกอบ!

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

จัดอันดับการดำเนินการและเนื้อหาสำหรับลำดับชั้นภาพที่ชัดเจน

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

ก่อนอื่นจำเป็นต้องมีอนุกรมวิธาน เป็นการดีที่สุดที่จะใช้สเกล 1 ถึง 3—1 สำคัญที่สุด 3 คือน้อยที่สุด

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

ในตัวอย่างนี้ มีวัตถุประสงค์ UX ว่า " ฉันต้องการเรียนรู้เพิ่มเติมเกี่ยวกับบริการของแบรนด์นี้เพื่อพิจารณาว่าบริการนี้เหมาะสมกับงบประมาณ ความต้องการ และความชอบของ ฉันหรือไม่ " วัตถุประสงค์ของแบรนด์คือ a) สร้างแบรนด์ให้เป็นบริการระดับพรีเมียม และ b) ส่งเสริมการค้นหารถยนต์

ด้วยเหตุนี้ การส่งข้อความถึงแบรนด์ ค้นหารถในอุดมคติของคุณจากรถยนต์กว่า 500 คัน ได้รับมอบหมายลำดับชั้นที่ 1 เช่นเดียวกับแบบฟอร์มและ CTA ที่มาพร้อมกัน

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

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

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

สร้างลำดับชั้นของภาพลงในระบบการออกแบบ

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

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

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

เมื่อมีการสร้างแนวคิดกว้างๆ เกี่ยวกับองค์ประกอบแล้ว องค์ประกอบของ UI ที่หลากหลายสามารถเริ่มต้นได้

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

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

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

สรุป

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

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

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

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