ทฤษฎี UI

ทำไมไอคอนแบบเส้นถึงดูเข้าใจง่าย?

0

free-psd-line-and-full-ios7-icons

หลังจาก Apple เปิดตัว Interface ใหม่สำหรับ iOS 7 รูปแบบสไตล์ของการออกแบบไอคอนก็หันมาใช้ Line icon  หรือไอคอนแบบเส้นกันมากขึ้น เหตุผลที่ง่ายๆ คือไอคอนแบบเส้น มันดูสะอาดตากว่าแบบ Full Icon (ไอคอนแบบเต็ม) ซึ่งเข้ากับคอนเซ็ปต์การออกแบบของ Apple อยู่แล้วที่ต้องการตัดทุกสิ่งที่ไม่จำเป็นออกไป และพยายามใช้ white space เพื่อเน้นแบรนด์ของบริษัทให้เด่นชัด แต่อีกเหตุผลที่ผมอยากยกมาเป็นประเด็นว่าทำไมไอคอนแบบเส้นถึงได้ดีกว่า ก็คือ ทฤษฎีการรับรู้รูปทรงและวัตถุครับ

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

XX      XX      XX      XX

แน่นอนว่าเกือบทุกคนจะมองเห็นกลุ่มของตัว X จำนวน 4 กลุ่ม แทนที่จะเป็นตัว X 8 ตัว ใช่ไหมครับ ส่วนที่เป็นแพทเทิร์นก็คือ ส่วน white space ที่อยู่ระหว่างกลุ่มตัวอักษรนั่นเองครับ

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

พัฒนาความรู้ขึ้นไปอีก ในปี 1959 สองนักวัจัย Hubel และ Wiesel ก็ได้ค้นพบว่าสมองส่วนการรับรู้ภาพมีเซลล์ประสาทที่แยกการตอบสนองออกเป็น ส่วนตอบสนองในเส้นแนวราบ (Horizontal Line), ส่วนตอบสนองในแนวตั้ง (Vertical Line), ส่วนตอบสนองต่อเส้นขอบ (Edge) และส่วนตอบสนองต่อมุมเฉพาะบางมุม (Angle)

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

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

geons-01

รูปทรงกีออนและวัตถุที่ประกอบจากกีออน

ยกตัวอย่างรูปทรงกีออนทั้ง 5 แบบ ดังรูปด้านบน และเรานำเอารูปทั้ง 5 นี้มาสร้างเป็นวัตถุชิ้นต่างๆ กัน โดยวัตถุ 1 ชิ้นสามารถประกอบขึ้นจากรูปทรงกีออนได้มากกว่า 1 ชิ้น

geons-02

การนำเอาวัตถุกีออนไปประกอบเป็นฉาก

คราวนี้ผมลองวิเคราะห์ต่อยอดจากทฤษฎีนี้อีก โดยการพยายามให้เหตุผลว่าทำไมไอคอนแบบเส้นถึงเป็นสไตล์ที่ดูแล้วเข้าใจได้ง่ายกว่าไอคอนแบบเติม geons-03

เปรียบเทียบไอคอนเต็มและไอคอนเส้นแบบมุมมอง 2D

geons-06

แสดงเส้นตัดแบ่งเพื่อให้เห็นรูปทรงกีออนพื้นฐาน

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

geons-04

เปรียบเทียบไอคอนเต็มและไอคอนเส้นแบบมุมมอง 3D

งั้นคราวนี้เรามาเปรียบเทียบไอคอนหรือวัตถุแบบ 3D กันครับ 3 อันแรกคือแบบเติมสีเต็มและอันสุดท้ายคือแบบเส้น เราจะเห็นได้เลยว่าแบบเต็มอันแรกมันมีความคลุมเคลือ เพราะรูปทรงไม่ได้อยู่ในรูปทรงพื้นฐานกีออนเลย (แต่สมองเราก็ยังพยายามหารูปทรงแพทเทิร์นจนเข้าใจว่ามันคืออะไร) พอมาเป็นอันที่ 2 ก็เริ่มเข้าใจได้เร็วขึ้น แต่ก็ยังมีบางส่วนที่สมองเราไม่ได้แมทช์ (match) กับรูปทรงกีออนได้ 100% มันก็เลยชะงักไปชั่วครู่เพื่อประมวลผล

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

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

geons-05

ตัวอย่างไอคอนแบบเส้น

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

อ้างอิง: 100 Things Every Designer Needs to Know About People โดย Susan Weinschenk

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

Redesign app Call Zen

Previous article

ดูเทรนด์ Graphic Design 2015 จาก ShutterStock

Next article

You may also like

Comments

Leave a reply

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