UI พื้นที่ว่าง (White Space)

หากจะให้ผมบอกชื่อ UI ที่ผมชอบใช้มากที่สุดออกมาสักชื่อหนึ่ง คงหนีไม่พ้น white-space UI หรือ UI พื้นที่ว่าง และ designer หลายๆ คนอาจยังไม่รู้ด้วยซ้ำว่าตัวเองกำลังใช้ UI นี้อยู่

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

อย่างแรก เว็บดังๆ ของเมืองไทย เช่น sanook, kapook.com, ให้ความสำคัญกับ white-space น้อยมาก จากรูปด้านบนของเว็บ sanook.com บางอันข้อความติดชิดทั้งรูปข้างบนและข้างล่างทำให้ไม่รู้ว่ามันเป็นข้อความของอันไหนกันแน่นะ

รวมไปถึงเว็บในทวีปเอเชียที่เน้นให้ข้อมูลเนื้อหาแบบว่าเน้นปริมาณ แต่ไม่ได้คำนึ่งถึงความยากง่ายต่อการอ่าน (Readability) จำไว้เสมอเลยครับว่า ยูสเซอร์สแกนข้อมูล ไม่ใช่อ่าน ดังนั้นแล้ว เราต้องจัดกลุ่มข้อมูลให้เป็นสัดส่วน ด้วยการใช้เส้นคั่นหรือง่ายที่สุดก็คือ ใช้ white-space ครับ

เว็บ medium.com จะเด่นเรื่องการใช้ white-space เอามากๆ ครับ อ่านบล็อคของเว็บนี้จะรู้สึกสบายๆ ไม่ต้องเกร็งสายตา

ส่วนเว็บ time.com พอขึ้น section ใหม่ เค้าก็ใช้ white-space หนักๆ เลย (ส่วนไฮไลท์สีฟ้า)

เว็บ stock2morrow ผมลองปรับให้แต่ละรายการมี white-space มากขึ้นก็ช่วยให้อ่านได้ง่ายขึ้นนะครับ

อีกตัวอย่างของพลังของ white-space คือ ผมเคยต้องออกแบบฟอร์มค้นหาใหม่ให้ Agoda โจทย์คือ ต้องการให้ฟอร์มเด่นขึ้น แต่ของเดิมที่ไฮไลท์สีฟ้ารอบๆ ผมว่าก็เด่นแล้วนะ แต่พอผมลองเพิ่มพื้นที่ขาวๆ เป็น 2 เท่ารอบๆ ฟอร์ม แล้วใช้ขอบเป็น transparent สีดำ เท่านี้แหละ ทุกคนโอเคเลย เพราะมันทั้งสวยและเด่นกว่าของเดิมจริงๆ

การใช้งาน white-space ยังช่วยเรื่องอารมณ์ความรู้สึกด้วย สินค้าที่มีแบรนด์หรือหรูหราหน่อยมักจะใช้ white-space สื่อถึงความฟุ่มเฟือย หรูหรา แต่ดูดี เช่น

หน้าเว็บนาฬิกา rolex ตรงแบนเนอร์หลัก จะเห็นเลยครับว่าตัวหนังสือจะอยู่รอบๆ white-space ที่กินพื้นที่ใหญ่มาก เทียบได้กับบ้านคฤหาสน์ที่ใหญ่โตอลัง แล้วจัดดิสเพลย์เล็กๆ ไว้ตรงกลางห้องโถง มันทั้งเด่นและสื่อว่าเรารวย ^^

ไม่ใช่เฉพาะในหน้าจอคอมเท่านั้น white space ยังสามารถนำมาประยุกต์ใช้งานกับงานออกแบบต่างๆ ได้อีกด้วย เช่น ลองเปรียบเทียบงานออกแบบบรรจุภัณฑ์ (packaging design) ทั้งสองแบบด้านบนดูครับว่า อย่างไหนดูน่าใช้กว่า อันซ้ายอ่านง่ายแต่ให้ความรู้สึกว่าเป็นของราคาถูก อันขวาขนาดตัวหนังสือเอาแค่พออ่านได้พอ แล้วใช้ white-space สร้างความรู้สึกว่าเป็นสินค้ามีคุณภาพดูดี

อีกตัวอย่างง่ายๆ เรื่องการออกแบบตกแต่งภายใน (interior design) ที่เราพบเห็นกันอยู่ ที่ apple store เค้าจะวางสินค้าบนเนื้อที่ที่ดูกว้างขวางมาววววก และจัดวางสินค้าแต่ละชิ้นให้ห่างกันในระยะที่ดูแล้วไม่แออัด เกิดช่องว่าง (white space) ที่ทำให้เวลาเราจ้องมองสินค้าใดก็ตาม จะสร้างโฟกัสให้สายตาเราจับจ้องไปที่สินค้านั้น เกิดเป็นสมาธิให้ชวนต้องสัมผัส

เห็นไหมครับว่า white space เป็นสิ่งสำคัญมากๆ ในการออกแบบ UI เพราะ white space ช่วย

• ทำให้การอ่าน (ด้วยการสแกนและแบบลงรายละเอียด) ง่ายขึ้นและรวดเร็ว
• สร้างความสัมพันธ์และแบ่งกลุ่มวัตถุ สร้างโฟกัสให้วัตถุ
• ทำให้ดีไซน์ดูดีมีราคา มีราศีสง่า

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