ทฤษฎี UI

Gestalt Theory Rule#5-ทางร่วม

0

common-walkหากสังเกตให้ดี ขณะที่เราเดินอยู่บนทางเท้าหรือพื้นที่สาธารณะที่มีทางให้คนเดินสวนกันได้ เราจะพยายามเดินไปในทิศทางเดียวกับคนข้างหน้า ทั้งที่ๆ ไม่มีใครป้ายกำหนดว่าฝั่งนี้สำหรับเดินเข้า หรือฝั่งนี้สำหรับเดินออก มันเป็นสิ่งที่เราเข้าใจได้จากการไหลและเคลื่อนที่ของกลุ่มว่า หากคนหรือสิ่งใดที่เคลื่อนที่ไปในทางเดียวกัน จะเข้าใจว่าเป็นกลุ่มเดียวกัน

หัวใจสำคัญของทฤษฎีข้อนี้ คือ การเคลื่อนไหวและทิศทางครับ

หากเรามีวัตถุที่หน้าตาเหมือนกันหมด แต่อยากแยกออกให้เป็น 2 กลุ่ม เรายังสามารถทำได้โดยการทำให้วัตถุเคลื่อนที่ไปในทิศทางที่ต่างกัน 2 ทิศทาง กลุ่มที่ 1 เคลื่อนไปทางซ้าย กลุ่มที่ 2 เคลื่อนไปทางขวา เป็นต้น

common-fate-01ในทาง UI คือ เราจะพูดถึงการแสดงข้อมูลเมื่อเกิดความเคลื่อนไหวของเมาส์ ดูตัวอย่างจากเมนูภาพด้านบนครับ จะเห็นว่า พอเราเอาเมาส์เคลื่อนไปวางบนเมนู products แล้ว เมนูย่อยชั้นที่ 1 จะแสดงเพิ่มให้เห็นในแนวตั้ง ซึ่งจะดูดีกว่าแสดงในแนวนอนครับ ลองพิจารณาให้ละเอียด เราจะเห็นว่าการแสดงเมนูย่อยชั้นแรกในแนวตั้งจะเกิดทางร่วมกันที่มากกว่า กล่าวคือ เมนู Home, Products, Services, Company,… ซึ่งเป็นเมนูหลักเหมือนกำลังเคลื่อนที่ไปทางแนวนอน การจะให้แสดงเมนูย่อยในแนวนอนจะเป็นการไปผสมกลุ่มเมนูหลัก ซึ่งเราไม่ต้องการใช่ไหมครับ เราต้องแยกให้เห็นว่าเมนูย่อยชั้นที่ 1 แยกออกมาจากเมนูหลัก ดังนั้นการเคลื่อนที่ในแนวตั้งจึงดูมีเหตุผลกว่า

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

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

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

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

common-fate-03

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

ดังนั้นหาก Interface ของเรามีการเคลื่อนไหวของเมาส์เข้ามาเกี่ยวข้องล่ะก็ อย่าลืมเรื่องทางร่วมระหว่างวัตถุและความรู้สึกด้วยนะครับ ทั้งสองอย่างต้องไปด้วยกัน เพื่อให้เกิดการลื่นไหลที่สมบูรณ์แบบ (Perfect Flow)

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

Gestalt Theory Rule#4-ความสมมาตร

Previous article

Gestalt Theory Rule#6-การปกปิด

Next article

You may also like

Comments

Leave a reply

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