ทฤษฎี UIเรื่องเด๊นเด่น

ทฤษฎีเกสตอลท์สำหรับงานออกแบบ UI (Gestalt Theory for UI Design)

0

gestalt-featuring

บทความแรกๆ ของ UI Blogazine ได้นำเสนอทฤษฎีเกสตอลท์ (Gestalt) ในบริบทที่ใช้ในการออกแบบสื่อกราฟิคโดยรวม ไม่ได้เฉพาะเจาะจงเรื่องของ UI มากสักเท่าไรนัก ในบทความนี้ เราจะมาทบทวนทฤษฎีนี้กัน และลงรายละเอียดในหัวข้อที่เกี่ยวกับงานอออกแบบ UI กันครับ พร้อมตัวอย่างและสถานการณ์การนำทฤษฎีเกสตอลท์ไปใช้ทำงานได้จริงๆ

ทฤษฎีเกสตอลท์ (Gestalt Theory)

เกสตอลท์ (Gestalt) เป็นคำในภาษาเยอรมัน หมายถึง ‘รูปร่าง (Shape / Form)’ ซึ่งเป็นทฤษฎีที่ใช้อธิบายการรับรู้ภาพของมนุษย์ (Visual Perception) โดยมีอยู่ 6 หัวข้อหลัก ได้แก่

  1. ความเหมือน (Similarity)
  2. ความใกล้ชิด (Proximity)
  3. รูปร่างและพื้นหลัง (Figure & Ground)
  4. ความสมมาตร (Symmetry)
  5. ทางร่วม (Common Fate)
  6. การปกปิด (Disclosure)

หัวข้อที่เป็นหัวใจหลักซึ่งเกี่ยวข้องกับงานออกแบบ UI โดยตรงจะมีแค่ข้อ 1&2 ครับ หากเราศึกษา 2 เรื่องนี้ ความเหมือนและความใกล้ชิด ก็จะทำให้ UI ของเราเข้าใกล้ภาพในสมองของมนุษย์มากขึ้น อาจถึงกระทั่งแมทช์กันลงตัว 99.99% ก็เป็นได้ พูดอีกนัยคือ หาก UI ที่ออกแบบโดยคำนึงถึง 2 หัวข้อนี้ ก็จะทำให้การใช้งาน UI ทรงประสิทธิภาพมากขึ้น เพราะช่วยลดภาระการทำงานของสมองในการประมวลผลข้อมูลที่ไม่ตรงกับความคาดหวัง (Don’t Make Me Think)

ข้อตกลง

ขอให้จำไว้เลยครับว่า ความเหมือนและความใกล้ชิด คือวิธีการสร้าง / ทำลาย ความสัมพันธ์ระหว่างกลุ่มวัตถุ (Similarity & Proximity create / destroy Relationship) ต้องขออธิบายให้เข้าใจก่อนเลยว่า ในขณะที่เกิดการสร้างความสัมพันธ์ของวัตถุขึ้นมา ในอีกมุมมองหนึ่งก็คือ การแบ่งแยกกลุ่มวัตถุออกจากกัน ดังนั้นทั้งการสร้างหรือการแบ่งจึงเป็นเรื่องเดียวกัน ผมจึงกลัวว่าคำพูดทั้งสองจะทำให้สับสนได้ จึงต้องขอเน้นย้ำก่อนจะเริ่มในหัวข้อแรก ซึ่งผมจะขอเทไปในความหมายของการแบ่งกลุ่มวัตถุ อันน่าจะง่ายต่อการทำความเข้าใจครับ ถ้ายังงงๆ อยู่ เดี๋ยวลองอ่านไปสักพักน่าจะกระจ่างขึ้นครับ ^^!

1. ความเหมือน (Similarity)

กลุ่มวัตถุที่ทำให้สมองมนุษย์เข้าใจว่าเป็นกลุ่มเดียวกัน เพราะมีความเหมือนกันใน 4 ข้อดังนี้

1.1 สี (Color)

similarity-color-01

สีช่วยแยกกลุ่มวัตถุออกจากกัน

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

1.2 ขนาด (Size)

similarity-size-01

ขนาดช่วยแยกกลุ่มวัตถุออกจากกัน

คราวนี้เราจะเห็นว่ากลุ่มวงกลมจะถูกแบ่งออกเป็น 2 กลุ่มด้วยขนาด คือกลุ่มที่มีขนาดเล็กเหมือนกัน กับกลุ่มที่มีขนาดใหญ่เหมือนกัน

1.3 รูปร่าง (Shape)

similarity-shape-01

รูปร่างช่วยแยกกลุ่มวัตถุออกจากกัน

เช่นกัน สมองจะรับรู้กลุ่มวัตถุออกเป็น 2 กลุ่มด้วยรูปร่าง คือ กลุ่มที่มีรูปทรงสี่เหลี่ยมเหมือนกัน กับ กลุ่มที่มีรูปทรงวงกลมเหมือนกั

 

1.4 การเรียงตัว (Orientation)

similarity-orientation-01

การเรียงตัวช่วยแยกกลุ่มวัตถุออกจากกัน

สุดท้ายคือการเรียงตัว เราจะรับรู้ว่าวัตถุแยกออกเป็น 2 กลุ่ม คือ กลุ่มที่เรียงตัวแนวนอนเหมือนกัน กับ กลุ่มที่เรียงตัวแนวเฉียงเหมือนกัน

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

similarity-color-overide-01

สีใช้แยกกลุ่มวัตถุได้โดดเด่นกว่าวิธีการอื่น

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

จึงสรุปว่า ถ้าเทียบการแบ่งกลุมวัตถุด้วยวิธีการทั้ง 4 ด้านบน การใช้สีคือเทคนิคที่ทรงพลังมากที่สุดในการใช้สร้างความสัมพันธ์ระหว่างวัตถุโดยที่มองข้ามเรื่องความต่างด้านขนาด, รูปร่าง และการเรียงตัว (Color overrides all)

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

 

ตัวอย่างที่ 1– ใช้ขนาดเพื่อแบ่งหัวข้อและเนื้อความ

similarity-practice-01

การแยกหัวข้อกับเนื้อความด้วยขนาด

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

 

ตัวอย่างที่ 2: ใช้สีแบ่งส่วนที่เป็นลิงค์และข้อความธรรมดา

similarity-practice-02

การแยกลิงค์กับเนื้อหาด้วยสี

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

 

ตัวอย่างที่ 3: ใช้การเรียงตัวแบ่งฟังก์ชันเมนู

orientation-booking-menu

การแยกฟังก์ชันเมนูด้วยการเรียงตัว

ภาพด้านบนผมแคปมาจากเว็บ Booking.com เวลาที่เราล็อคอินเข้าระบบ แล้วเลือกตรงเมนูชื่อของเราเองด้านบน พอเมนูกางลงมา เราจะเห็นว่า เมนู Sign out จะเรียงตัวแตกต่างจากเมนูอื่น (ภาพด้านบนขวา)

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

 

2. ความใกล้ชิด (Proximity)

วัตถุที่อยู่ใกล้ชิดกัน เราจะรับรู้ว่าวัตถุพวกนั้นอยู่กลุ่มเดียวกัน เราสามารถแบ่งความใกล้ชิดนี้ได้ด้วย 3 วิธีดังนี้

2.1 เส้น (Line)

proximity-line

เส้นช่วยแยกกลุ่มวัตถุออกจากกัน

เราสามารถใช้เส้นเพื่อแบ่งแยกกลุ่มวัตถุอออกจากกัน ดั่งตัวอย่างภาพด้านบน

 

2.2 ใช้สีพื้นหลัง

proximity-bg

สีพื้นหลังช่วยแยกกลุ่มวัตถุออกจากกัน

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

 

2.3 ใช้พื้นที่ว่าง (Whitespace)

proximity-whitespace

พิ้นที่ว่างช่วยแยกกลุ่มวัตถุออกจากกัน

พื้นที่ว่าง (Whitespace) เป็นเทคนิคที่ทรงพลังที่สุดเพื่อใช้ในการแบ่งกลุ่มวัตถุ หากเทียบวิธีการทั้งหมดข้างต้น ไม่ว่าจะเป็นการใช้ สี, ขนาด, รูปร่าง, การเรียงตัว, เส้น หรือ พื้นหลัง การใช้พื้นที่ว่างชนะทุกเทคนิค (Whitespace wins all)

 

proximity-override

พื้นที่ว่างใช้แยกกลุ่มวัตถุได้โดดเด่นทีสุดเมื่อเทียบกับวิธีทั้งหมดที่นำเสนอ

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

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

minimal-background-pattern-wordpress-12

พื้นที่ว่างที่มีลักษณะเป็นลายแพทเทิร์น

หมายเหตุ พื้นที่ว่างไม่จำเป็นต้องเป็นสีขาวเสมอไปนะครับ จะเป็นสีอะไรก็ได้ หรือจะมี texture หรือลาย pattern ก็ยังเรียกว่า พื้นที่ว่างนะครับ เช่นภาพตัวอย่างด้านบน ดังนั้นขอเพียงแค่ไม่มีข้อมูลหลักที่ต้องการนำเสนอวางอยู่ด้านบน เราก็เรียกพื้นที่ส่วนนั้นว่า พื้นที่ว่าง (Whitespace)

 

ตัวอย่างที่ 1: ใช้พื้นว่างเพื่อแบ่งส่วนข้อมูล

proximity-practice-01

การใช้พื้นว่างที่เท่ากันหมด

designer มือใหม่หลายๆ คน มักจะชอบใช้ พื้นที่ว่าง แบบเกรงใจ คือ เวลาใช้มักจะเว้นพื้นที่ว่างระหว่างช่องให้เท่ากันหมด เพราะเชื่อว่ามันจะดูเรียบร้อยเป็นระเบียบ เช่นตัวอย่างภาพด้านบน คือใช้ช่องว่างห่างกัน 30px เหมือนกันหมด รวมถึงช่องว่างระหว่างหัวข้อที่ 2 กับเนื้อหาส่วนท้ายของหัวข้อที่ 1 ก็ห่างกัน 30px ด้วย

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

proximity-practice-02

การใช้พื้นที่ว่างระหว่างส่วนข้อมูลที่มากขึ้นเป็นเท่าตัว

วิธีแก้คือ ให้ใช้พื้นที่ว่างคั่นระหว่างส่วนข้อมูลที่ 2 ให้เป็นเท่าตัว หรือจะ 3-4 เท่าตัว ก็ไม่ผิดอะไร ในตัวอย่างผมใช้พื้นที่ว่าง 60px คั่นหลังจบส่วนข้อมูลที่ 1

proximity-practice-02b

ข้อมูล 2 ส่วนแยกกันชัดเจน เมื่อใช้พื้นที่ว่างที่มากขึ้น

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

 

ตัวอย่างที่ 2: การใช้พื้นที่ว่างแลกกับความสวยงาม

whitespace-booking-searchbox

Booking.com ลดพื้นที่ว่าง เพื่อสร้างความสัมพันธ์ระหว่างเลเบลกับตัวเลือก

ช่องค้นหาบริเวณด้านข้างของเว็บ Booking.com ให้สังเกตตรงตัวเลือก Rooms, Adults, Children นะครับ ของจริงคือ ภาพด้านบนขวา พอเห็นแล้วมันดูไม่ค่อยเรียบร้อยใช่ไหมครับ อันนี้แหละครับ คือกับดักของ designer มือใหม่ ที่ให้ความสวยงามมาเป็นอันดับต้นๆ ซึ่งถ้าออกแบบแล้ว บางทีตัวผมเองยังชอบเน้นเรื่องความสวยงามมาก่อนเหมือนกัน ผลงานที่ได้อาจเป็นดั่งภาพทางซ้ายที่ดูทุกอย่างลงตัวใช่ไหมครับ

แต่แท้จริงแล้ว การออกแบบที่เป็นเหมือนภาพด้านซ้าย ในแง่ของความสัมพันธ์ระหว่างเลเบลและตัวเลือกแทบไม่เหลือเลยครับ ดังนั้น Booking.com จึงยอมสละความสวยงาม เขยิบตัวเลือกเข้ามาใกล้ๆ กับเลเบลให้เพียงพอที่จะรับรู้ความสัมพันธ์ระหว่างสองวัตถุนี้ เพราะหลักของ UI เรื่องความสามารถในการใช้งานต้องมาก่อน (Usability comes first)

 

ตัวอย่างที่ 3 – การใช้เส้นและพื้นหลังผิด

proximity-practice-sample2-1

หัวข้อหน้าที่ถูกแบ่งด้วยเส้นและสีพื้นหลัง

ตัวอย่างนี้ให้สังเกตบริเวณสีเขียว ซึ่งเป็นส่วนที่แสดงหัวข้อของหน้านี้ (Page Title)

proximity-practice-sample2-2

การแสดงผลหัวข้อหน้าที่ไม่ถูกต้อง

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

 

proximity-practice-sample2-3

การใช้เส้นและพื้นหลังในสถานการณ์ที่ผิด

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

 

proximity-practice-sample2-4

การแสดงผลหัวข้อหน้าที่ถูกต้อง

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

 

ตัวอย่างพิเศษ: ออกแบบ UI แสดงผลข้อมูลโรงแรมด้วยเทคนิครวม

proximity-practice-03

ข้อมูลแสดงผลและการจัดกลุ่มข้อมูล

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

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

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

 

proximity-practice-05

การใช้พื้นที่ว่างเพื่อแบ่งกลุ่มข้อมูล

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

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

 

proximity-practice-06

การแบ่งกลุ่มข้อมูลที่มีผลต่อการตัดสินใจซื้อด้วยเส้น

ผมจึงเลือกใช้เส้นอ่อนๆ บางๆ (Proximity > Line) เพื่อลดความสัมพันธ์กับข้อมูลด้านบน ซึ่งเป็นการแยกข้อมูลในส่วนที่ใช้ประกอบการตัดสินใจซื้อกับส่วนที่ใช้ในการตัดสินใจซื้อสินค้า

ตรงข้อความเร่งผมอยากลองแบ่งย่อยความสัมพันธ์ภายในส่วนนี้อีก จึงทดลองใช้พื้นที่ว่างให้มากขึ้นกว่านี้อีก (Proximity > Whitespace)

 

proximity-practice-07b

การทดลองใช้เส้นและสีพื้นหลังเพื่อแบ่งส่วนข้อมูลเร่ง

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

 

proximity-practice-08

การใช้สีพื้นหลังกับส่วนข้อมูลเร่ง

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

 

finish

การใช้เลยเอาท์หรือรูปทรงที่เหมือนกัน เพื่อแสดงผลข้อมูลโรงแรมทีมี promotion

สุดท้ายผมก๊อปปี้การ์ดที่เสร็จแล้วเพิ่มเป็น 4 การ์ด (Similarity > Shape) เพื่อทำเป็นส่วนแสดงโรงแรมที่เสนอ Promotion อยู่

เรียบร้อยบริบูรณ์……( ͡° ͜ʖ ͡°)

 

Sim 4+ Prox 3

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

ไม่อยากให้วัตถุเหมือนกัน (Similarity) ต้องทำสิ่งเหล่านี้ให้ต่างกัน

  1. สี (Color)
  2. ขนาด (Size)
  3. รูปร่าง (Shape)
  4. การเรียงตัว (Orientation)

ไม่อยากให้วัตถุอยู่ใกล้ชิด (Proximity) ต้องใช้สิ่งเหล่านี้เป็นตัวคั่น

  1. เส้น (Line)
  2. สีพื้นหลัง (Background)
  3. พื้นที่ว่าง (Whitespace)

ด้วยทฤษฎีเกสตอลท์เพียง 2 ข้อนี้ เราก็สามารถสร้าง UI ที่ทรงประสิทธิภาพได้แล้วจริงๆ ครับ ลองนำไปใช้ดูนะครับ (=^ ◡ ^=)

 

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

Design Trend 2016

Previous article

10 Design Details, So in Details (10 ดีไซน์เจ๋ง เก่งรายละเอียด)

Next article

You may also like

Comments

Leave a reply

Your email address will not be published. Required fields are marked *