แนวทางปฏิบัติที่ดีที่สุดสำหรับการออกแบบ UI เพื่อการสแกนที่ดีขึ้น

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

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

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

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

ความล้มเหลวและความสำเร็จในการออกแบบ UI ที่ดีที่สุด
การเปรียบเทียบที่ยอดเยี่ยมระหว่างเลย์เอาต์ที่ไม่สามารถสแกนได้ เลอะเทอะ และใช้งานไม่ได้ กับอินเทอร์เฟซที่สแกนได้ สะอาดตา และมีการจัดระเบียบอย่างดี (โดย จามิลิน แอนด์ สแล็ค)

Scannability คืออะไร?

ผู้เชี่ยวชาญด้าน UX ที่ Nielsen Norman Group ได้ทำการวิจัยเพื่อตอบคำถาม: ผู้คนอ่านบนเว็บอย่างไร การค้นพบของเขานั้นเรียบง่าย พวกเขาทำไม่ได้

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

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

ต้องการนักออกแบบ UI อิสระที่ทำงานเต็มเวลาในสหรัฐอเมริกา

ประโยชน์ของอินเทอร์เฟซที่สแกนได้

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

  1. เนื้อหาของหน้าสอดคล้องกับความคาดหวังของผู้ชมหรือไม่?
  2. ข้อความหลักของเพจเข้าใจง่ายในระยะเวลาอันสั้นหรือไม่?

แม้ว่าอินเทอร์เฟซที่สแกนได้จะใช้ความพยายามในการผลิต แต่ก็ให้ผลตอบแทนในระยะยาวด้วยการสร้างการออกแบบ UI ที่ติดหนึบ การศึกษาของ Nielsen Norman Group แสดงให้เห็นว่าหน้าเว็บที่ปรับให้เหมาะสมสำหรับความสามารถในการสแกนนั้นมีประสิทธิภาพมากขึ้นด้วยวิธีต่อไปนี้:

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

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

พลังของนิสัยผู้ใช้ในรูปแบบการสแกน

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

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

ตาม Nielsen Norman Group มีรูปแบบทั่วไปเจ็ดรูปแบบที่ผู้ใช้สแกนอินเทอร์เฟซ:

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

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

ส่งมอบคุณค่าผ่านการวิจัยผู้ใช้และรูปแบบการสแกน

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

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

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

Instacart
Instacart ออกแบบการออกแบบเค้าโครงเว็บตามการวิจัยผู้ใช้และรูปแบบการสแกนแบบ Spotted

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

Yelp
Yelp นำเสนอข้อมูลแก่ผู้ใช้ตามรูปแบบการสแกน F

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

Airbnb
Airbnb สื่อสารกับผู้ใช้อย่างชัดเจนโดยทำตามรูปแบบการสแกนและการทำเครื่องหมายและสร้างเนื้อหาที่สแกนได้

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

Sticky UI เกิดขึ้นได้จากการจัดวางองค์ประกอบการออกแบบ UI อย่างมีกลยุทธ์
Airbnb พิจารณาการใช้อุปกรณ์เมื่อวางองค์ประกอบการออกแบบ UI ที่ปรับปรุงความสามารถในการสแกน (โดย Airbnb)

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

แนวทางปฏิบัติที่ดีที่สุดสำหรับการออกแบบ UI เพื่อการสแกนที่ดีขึ้น

สร้างลำดับชั้นภาพที่เหมาะสม

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

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

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

Google
หน้าผลการค้นหาของ Google ใช้หลักการลำดับชั้นที่มองเห็นได้มากมาย (โดย Google)

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

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

ใช้ประโยชน์จากพื้นที่เชิงลบ

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

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

ใช้หัวข้อย่อยเพื่อสรุปเนื้อหา

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

ขณะเขียนหัวข้อย่อย สิ่งสำคัญคือต้องทำให้ตรงประเด็น เพียงสื่อสารข้อความสำคัญที่เนื้อหาด้านล่างนี้นำเสนอ

สร้างรายการสัญลักษณ์แสดงหัวข้อย่อยและลำดับเลข

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

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

เห็นภาพเนื้อหา

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

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

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

กำหนดจุดเน้นที่เหมาะสมใน CTAs

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

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

Uber ใช้รูปแบบการออกแบบ UI ที่เรียบง่ายเพื่อสร้าง CTA ที่มีประสิทธิภาพ
Uber ใช้ "แตะปุ่ม" Get a Ride” ให้คำมั่นสัญญาโดยใช้ CTA ที่มีคอนทราสต์สูงพร้อมพื้นที่เชิงลบจำนวนมาก

ความสำคัญของความสามารถในการสแกน

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

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

• • •

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

  • แนวทางปฏิบัติที่ดีที่สุดสำหรับการออกแบบ UI และข้อผิดพลาดทั่วไป
  • รัฐที่ว่างเปล่า – แง่มุมที่ถูกมองข้ามมากที่สุดของ UX
  • ความเรียบง่ายคือกุญแจสำคัญ – สำรวจการออกแบบเว็บขั้นต่ำ
  • หลักการฮิวริสติกสำหรับอินเทอร์เฟซมือถือ
  • การออกแบบเพื่อให้อ่านง่าย – A Guide to Web Typography