ไม่รู้มาก่อนว่าเขียนอะไรเล่นๆๆ ใน blog ตัวเองแล้วมันเด้งขึ้นไปหน้าหน่ึงเฉยเลย (ไม่ค่อยอยากให้ขึ้นเท่าไหร่ เพราะเขิน) เห็นบทความเรื่อง interface design ดีๆ ที่เว็บนี้หลายบทความเหมือนกัน พอดีผมทำงานเทือกๆ นี้มาบ้าง ก็เลยเอามา post บ้าง แต่ขอพูดกว้างๆแล้วกัน ถึง Interface Design ซึ่งรวมไปถึง GUI VI TUI (tangible user interface) แล้วก็ interaction design ด้วย
เราสามารถติดต่อสื่อสารกับอุปกรณ์อิเลคทรอนิกส์ต่างๆได้ โดยมี interface เป็นตัวช่วยเชื่อมผู้ใช้งานเข้ากับอุปกรณ์นั้นๆ เนื่องจากตอนนี้เรายังไม่สามารถ (หรือสะดวกที่จะ) ต่อสายต่างๆที่ใช้ส่งสัญญาณจากสมองเราไปควบคุมเครื่องคอมพิวเตอร์หรือ อุปกรณ์อิเลคทรอนิกส์ต่างๆ ได้โดยตรง (อันที่จริงสามารถทำได้แล้วในงานวิจัย ซึ่งยังถืิอเป็นส่วนน้อยอยู่) ลองนึกภาพคนนั่งเอาสาย firewire ต่อเข้ากับ Macbook Pro หรือใช้ USB 2.0 เสียบเข้ากลางกระหม่อมเพื่อฟัง iPod คงแปลกดีพิลึก ดังนั้น interface จึงทำหน้าที่เป็นตัวกลางในการติดต่อสื่อสารระหว่างผู้ใช้งานกับอุปกรณ์ต่างๆ
การออกแบบ interface กับ interaction design จะว่าไปแล้วก็มีความเชื่อมโยงกันอยู่ไม่น้อย จนบางครั้งมีหลายๆคนคิดว่าเป็นเรื่องเดียวกัน ซึ่งจริงๆแล้วไม่ใช่เลย Interface Design นั้นเป็นเพียงแค่ส่วนหนึ่งของ interaction design เท่านั้น โดย interface สามารถสื่อสารกับผู้ใช้งานผ่านทางประสาทสัมผัสต่างๆ เช่น การมองเห็น การได้ยิน การสัมผัส เป็นต้น
ถ้าจะเปรียบเทียบ Interface design กับ interaction design แล้วมันก็เหมือนกับภูเขาน้ำแข็งนั่นเอง Interface design ก็คือส่วนยอดที่เห็นโผล่พ้นน้ำแค่นั้นเอง ยังมีส่วนที่มองไม่เห็นที่ซ่อนอยู่ใต้น้ำอยู่อีกมากมาย และส่วนที่ซ่อนอยู่นี่แหละ ที่เราอาจเรียกได้ว่าเป็นส่วนของ interaction design ซึ่งเป็นการออกแบบที่นักออกแบบได้ออกแบบระบบและวิธีการปฎิสัมพันธ์ต่างๆ ซึ่งซ่อนอยู่ข้างหลัง จะกดอะไรไปทำอะไร ทำ task นี้เสร็จแล้วไปไหนต่อ ถ้ากดผิดจะเกิดอะไรขึ้น ซึ่งส่วนนี้เป็นเหมือนกับโครงสร้างพื้นฐานที่มั่นคงที่คอยส่งเสริมให้ระบบ interface ใช้งานได้จริง
ตกลงจริงๆ แล้ว interface เนี่ยมันคืออะไรกันแน่ ? interface ก็คือส่วนที่ทำให้ผู้ใช้งานผลิตภัณฑ์ (ไม่ว่าจะเป็น software หรือ hardware) สามารถมองเห็นและเข้าถึงระบบขับเคลื่อนต่างๆซึ่งซ่อนอยู่ภายใน และใช้ประโยชน์จากตัวผลิตภัณฑ์ได้นั่นเอง (accessible and usable )
มาถึงคราวนี้คนที่เปน interface designer กับ interaction designer อาจมาเถียงกันว่าใครสำคัญกว่าใคร ดูเหมือนกับว่า interface design จะอยู่ภายใต้ interaction design อีกที แต่จริงๆแล้วสองอย่างนี้ไม่มีใครสำคัญไปกว่าใครหรอกนะ แทนที่จะมามองว่าใครเหนือกว่าใคร ควรจะมองว่าจริงๆแล้วทั้งสองอย่างนี้ควรที่จะทำงานอย่างสอดคล้องกัน และออกแบบไปควบคู่กันเสียมากกว่า การออกแบบ interaction ที่ดีแต่ขาดการนำเสนอที่ดีก็ทำให้ product ไม่สามารถใช้งานได้อย่างที่ควรจะเป็น หรือเกิด failure ขึ้นมาก็ได้
ก่อนหน้านี้การออกแบบผลิตภัณฑ์ (product design/industrial design) ยังไม่ได้ยุ่งเกี่ยวกับ electronics มากมายอย่างทุกวันนี้ ใครทำงานด้านการออกแบบอาจเคยได้ยิน motto คลาสสิคของ Horatio Greenough ที่ว่า "form follow function" (ต่อมา Louis Sullivan ได้นำมาใช้เปนปรัชญาทางสถาปัตยกรรมและการออกแบบจนเป็นที่รู้จักโดยทั่วไป ) ตัวอย่างเช่น ค้อนถูกออกแบบมาให้มีส่วนหัวที่หนัก และมีด้ามจับที่กระชับ เพื่อบ่งบอกถึงประโยชน์ใช้สอยของมัน ผู้ใช้งานสามารถรู้ได้ทันทีว่าจะต้องใช้มือจับตรงด้ามและเอาส่วนหัวที่หนักนั้นไปทุบอะไรสักอย่าง (อาจเป็นหัวคน แต่ในที่นี้หมายถึงตะปู)
แล้วคราวนี้ถ้าเราต้องออกแบบอะไรบางอย่างบนหน้าจอล่ะ มันก็ไม่จำเป็นเสมอไปที่หน้าตาของวัตถุบนจอซึ่งทำหน้าที่เป็น interface จะต้องมีหน้าตาเหมือนเดิมตลอดการ มันอาจมีรูปร่างหน้าตาอะไรก็ได้ตามแต่ที่นักออกแบบจะอยากให้เป็นตามแต่สถานการณ์ที่เหมาะสม ยกตััวอย่างเช่นปุ่ม link บน webpage อาจไม่ต้องเป็นปุ่มสี่เหลี่ยมเสมอไป มันอาจถูกออกแบบให้เป็นรูปถ้วยกาแฟ ช้าง ม้า วัว ควาย โดยที่หน้าที่ของมันก็ยังคงเป็นปุ่มซึ่งมีหน้าที่ link ไปหน้าอื่นเหมือนเดิมนั่นเอง (การออกแบบยังมีสิ่งอื่นที่ต้องคำนึงถึงด้วย เช่นเรื่องของ user experience, accessibility และการใช้วิธี metaphor ในการออกแบบ) ดังนั้นจะเห็นได้ว่า interaction design และ interface design มีความยืดหยุ่นในการออกแบบอยู่ค่อนข้างมากเลยทีเดียว
พื้นฐานการออกแบบ Interface
พูดถึง visual interface แล้วมันก็ต้องเป็นอะไรที่สามารถมองเห็นได้ด้วยตา แม้จะไม่ทั้งหมดแต่ก็ขอให้มีบางส่วนที่สามารถมองเห็นได้ด้วยตาได้ก็ยังดี ไม่งั๊นก็คงจะเรียกเป็นชื่ออื่นไปแล้ว ซึ่ง visual interface นี้ประกอบไปด้วย ปุ่มกด, label ต่างๆ การจัดกลุ่มและตำแหน่งของวัตถุต่างๆบนหน้าจอ การออกแบบตำแหน่งของหน้าจอในตัว device เป็นต้น
การวางเลย์เอาท์
หัวใจอันดับแรกของการออกแบบ user interface เลยก็คือการออกแบบ layout การวางเลย์เอาท์ทำให้องค์ประกอบต่างๆของตัว product วางตัวอยู่ได้อย่างเข้ารูปเข้ารอยและเป็นระบบตามลำดับขั้น ผู้ใช้งานสามารถรู้ได้ว่าส่วนไหนมีความสำคัญมากหรือน้อย และจะใช้งานส่วนไหนก่อนหรือหลัง ยกตัวอย่างเช่น เราควรวางองค์ประกอบที่สำคัญให้สามารถมองเห็นได้ตลอด และส่วนที่มีความสำคัญน้อยลงไปสามารถซ่อนอยู่ใน drop down menu การวาง layout มีความสำคัญเป็นอย่างมากเมื่อเราออกแบบ interface บน device ที่มีหน้่าจอขนาดเล็ก และการจัดสรรพื้นที่ทำได้ค่อนข้างลำบาก
ระบบ grid
เมื่อเราต้องการจัดองค์ประกอบของข้อมูลต่างๆ บนหน้าจอ อาจเกิดความยุ่งยากเมื่อต้องจัดการกับข้อมูลจำนวนมาก ถ้าเราไม่สร้างระบบการจัดกลุ่มหรือ composition ให้กับงานของเราแล้วผู้ใช้งานอาจเกิดอาการหลงทาง หาอะไรไม่เจอได้ การวาง grid หรือ guideline ช่วยให้เราออกแบบและจัดการข้อมูลที่เป็นหมวดหมู่เดียวกันให้อยู่ด้วยกันได้ง่ายขึ้น เราอาจเริ่มต้นการใช้ระบบ grid ด้วยการแบงหน้าจอออกแบบส่วนๆ ตามการใช้งาน รวมไปถึงการเผื่อพื้นที่ระหว่างหมวดหมู่ (gutter) ซึ่งเป็นที่ว่างด้านบน-ล่าง ซ้าย-ขวา ของวัตถุเพื่อให้ง่ายต่อการมองเห็น เราสามารถจัดองค์ประกอบของวัตถุต่างๆ โดยอ้างอิงตำแหน่งตาม grid ได้ อาทิเช่น เราใช้ grid แบ่งหน้าจอออกเป็นสามส่วน ส่วนบนใช้เป็น navigation ส่วนกลางใช้เป็น body และส่วนล่าง ใช้เป็น footing ทั้งนี้ grid เป็นเพียงแนวทางในการจัดวางเท่านั้น นักออกแบบไม่จำเป็นจะต้องยึดติดกับระบบ และเส้นของ grid จนทำให้งานออกแบบดูแล้วแข็งกระด้าง พึงระลึกไว้เสมอว่า grid ไม่ใช่ข้อจำกัดทางการออกแบบ แต่เป็นตัวช่วยในการจัดระบบความคิดของผู้ออกแบบ และทำให้ผู้ใช้งานเข้าใจได้ง่ายว่าข้อมูลส่วนไหนมีความสำคัญมาก - น้อยเพียงใด ทำให้การจัดหมวดหมู่ของ function ต่างๆ เป็นไปอย่างมีประสิทธิภาพ
- สนใจศึกษาเพิ่มเติม มีหนังสือแนะนำสำหรับการใช้่ grid ในการออกแบบดีๆ เล่มหนึ่ง น่าสนใจทีเดียว : Making and Breaking the Grid: A Graphic Design Layout Workshop ISBN-13: 978-1564968937
การใช้ grid เข้ามาช่วยในการออกแบบทำให้การจัดการวัตถุต่างๆ เป็นไปอย่างมีระบบเทียบตามรูปประกอบ
ตัวอย่างการใช้ grid system
การแบ่ง space แบบนี้สามารถดูโปรแกรม iTunes เป็นตัวอย่างได้ โดยพื้นที่ทางด้านบน และด้านข้างใช้สำหรับควมคุม หรือเป็น navigation ส่วนพื้นที่ตรงกลางใช้เป็นที่แสดงข้อมูล
grid ลักษณะนี้พื้นที่ทางด้านขวามือใช้แสดงผลข้อมูลมากกว่าหนึ่งข้อมูลซึ่งมีความเกี่ยวโยงกัน เช่นโปรแกรม e-mail ซึ่งพื้นที่ทางด้านบน และด้านซ้ายมือ ใช้เป็นส่วนควบคุม และพื้นที่ทางด้านขวามือใช้เป็นที่แสดงข้อมูล โดยแบ่งออกเป็นสองส่วน พื้นที่ด้านล่างของส่วนนี้ใช้เป็นที่แสดงรายละเอียดของข้อมูลด้านบน
ส่วนการออกแบบ แบบนี้พบได้ทั่วไปในการออกแบบ website โดย navigation และแถบ banner จะอยู่ด้านบนและเนื้อหาต่างๆ จะอยู่ตรงกลาง โดยแถบด้านซ้ายสุดใช้เป็นพื้นที่สำหรับ navigation ย่อย และแถบด้านขวาสุดใช้เป็นพื้นที่สำหรับโฆษณาหรีอ notice ต่างๆ
ในขณะที่ grid system ง่ายๆ แบบนี้สามารถนำไปใช้ได้กับ interface หลากหลายชนิดไม่ว่าจะเป็น web browser หรือบน application ซึ่งมีพื้นที่การแสดงผลจำกัดอย่างหน้าจอมือถือ โดยแถบบนสุดแสดงสถานะปัจจุบัน แถบแนวยาวรองลงมาแสดง icon ของ battery และสัญญาณ ในขณะที่พื้นที่ด้านล่างใช้แสดง content
ประโยชน์ของ grid อีกอย่างหนึ่งก็คือช่วยให้นักออกแบบได้วางแผนการใช้ whitespace หรือที่ว่างบนหน้าจอ ซึ่งมีหน้าที่ช่วยแยกเนื้อหาต่างๆ ออกจากกัน และเป็นที่สำหรับให้ผู้ใช้งานได้พักสายตา นักออกแบบบางคนพยายามใช้พื้นที่บนหน้าจอให้เป็นประโยชน์มากที่สุดเท่าที่จะมากได้ จึงพยายาม "ยัดเยียด" content ลงไปให้มากที่สุด โดยไม่คำนึงถึง whitespace และสายตาของผู้ใช้งานจนบางทีเกิดเป็น "ทัศนะอุจาด" ขึ้น เมื่อหน้าจอเกิดอาการ "รก" และเปน "ทัศนะอุจาด" แล้วส่งผลให้ application นั้นๆ ใช้งานยากขึ้นด้วย เนื่องจากสายตาของผู้ใช้งานหลงทาง ไม่รู้ว่าจะมองเนื้อหาส่วนไหนก่อนหรือหลังดี
ถ้าอ้างอิงตามหลักการออกแบบ และจิตวิทยาการออกแบบที่เรียกว่า gestaltung (เป็นภาษาเยอรมัน มีอยู่กฏหนึ่งว่าด้วยการจัดวางที่เรียกว่า prägnanz ได้อธิบายไว้ว่า วัตถุที่อยู่ใกล้กันจะทำให้เกิดความรู้สึกถึงการเป็นเอกภาพ และ อยู่เป็นหมวดหมู่เดียวกัน) ดังนั้นถ้าเกิดเราวางตำแหน่งของ object ใน interface จนเรียงชิดติดกันจนเกินไป สมองของเราจะสร้างจินภาพและอนุมานเอาว่า object นั้นๆ เป็นพวกเดียวกันซึ่งทำให้เกิดความเข้าใจผิดในการใช้งานขึ้นได้ ทั้งนี้เราสามารถนำไปใช้กับการวางตำแหน่งของปุ่มกดต่างๆ เพื่อให้สัมพันธ์กับการใช้งานได้ต่อไป
reference : http://www.thaimacdev.com/node/372