UI Pattern UI Hybrid By uiblogaziner December 28, 20152991 views ShareTweet 0 ความคิดสร้างสรรค์เป็นสิ่งที่ขาดไม่ได้เลยในงานด้าน design และมันก็ไม่ใช่สิ่งยากที่จะทำด้วยครับ ความคิดสร้างสรรค์ไม่จำเป็นต้องเป็นสิ่งใหม่และมีประโยชน์ใช้งานได้ (เพราะสมัยนี้ หาสิ่งใหม่ 100% แทบไม่มีแล้ว) โดยมีแนวคิดภายใต้กรอบวิธีการง่ายๆ ดังนี้ ขยายให้ใหญ่ ย่อให้เล็ก เปลี่ยนสี, รสชาด, ผิวสัมผัส, เสียงบรรเลง ผสมปนเป รู้จักสังเกตพฤติกรรมและปัญหา แน่นอนครับ แนวทางการออกแบบ UI เชิงสร้างสรรค์ก็สามารถใช้แนวคิดนี้ได้เช่นกัน ผมจึงลองนำเอา UI แบบต่างๆ มาผสมปนเป จนเกิดเป็น UI Hybrid (UI ลูกผสม) บาง UI คงคุ้นตาและใช้งานได้จริง แต่บาง UI ก็อาจดูแปลกๆ หรือบางทีอาจไม่เหมาะกับการใช้งานจริง จึงต้องให้ใช้วิจารณญาณในการรับชมครับ [hr] Tab + Dropdown ในตัวอย่างคือ เราสามารถเปลี่ยนหัวข้อของ Tab ได้ด้วยการคลิกเลือกปุ่มลูกศร dropdown ทำให้เราสามารถประหยัดจำนวน tab และช่วยกรุ๊ปหัวข้อให้อยู่ภายใต้ tab เดียวกัน [hr] Tab + Radio เราอาจเคยเห็น UI คล้ายๆ กันนี้ ในการเลือกเที่ยวบิน โดยการเลือก tab เป็นเสมือนการตัดสินใจเลือกตัวเลือกนั้น ทำให้จำเป็นต้องมีการใช้ radio button เป็นตัวสื่อถึงการยืนยันการเลือก [hr] Table + Carousel UI นี้เหมาะกับตารางการแสดงผลแบบ Responsive ซึ่งมีข้อจำกัดด้านพื้นที่หากเรียกดูบนอุปกรณ์มือถือ โดยเราสามารถเลื่อนดูคอลัมน์ที่ถูกซ่อนได้ด้วยการคลิกปุ่มซ้าย/ขวา โดยมีตัวบ่งชี้ตำแหน่งการเลื่อนให้ทราบเหมือนกับ UI carousel [hr] Icon + Textbox / Button การใช้ Icon ประกอบจะทำให้สื่อความหมายได้ชัดเจนขึ้น ดังนั้นการใช้ Icon รวมกับ UI textbox จึงทำให้ยูสเซอร์เกิดความมั่นใจในการกรอกข้อมูลมากขึ้น เช่นเดียวกัน หากเรามีการใส่ Icon ในปุ่ม ก็จะช่วยสื่อถึงฟังก์ชันของปุ่มได้ดียิ่งขึ้น [hr] Dropdown + Textbox เราสามารถใช้ dropdown รวมกับ textbox ได้ในกรณีที่ทั้งสองข้อมูลมีความเกี่ยวข้องกัน โดยต้องคำนึงถึงตำแหน่งการวางว่าจะไว้ข้างหน้าหรือข้างหลังที่สอดคล้องกับบริบทจริง เช่น ถ้าเป็นคำนำหน้าชื่อ ก็วางไว้ข้างหน้า, ถ้าเป็นสกุลเงินก็วางไว้ข้างหลัง เป็นต้น [hr] Dropdown + Checkbox + Table UI hybrid ไม่จำกัดแค่การผสมเพียง 2 สายพันธุ์ เราสามารถรวม 3 UI เพื่อสร้างสรรค์การเรียกดูคอลัมน์ของตารางได้ ซึ่งหากเราเลือก dropdown แสดงคอลัมน์ เราจะสามารถเลือกติ๊กว่าจะให้ตารางแสดงคอลัมน์อะไรบ้าง โดยสามารถนำไปประยุกต์ใช้งานสำหรับการแสดงผลแบบ responsive ได้เป็นอย่างดี [hr] Slider + Textbox การใช้ textbox เข้ามารวมกับ slider จะทำให้เราสามารถเลือกตัวเลขได้แม่นยำมากขึ้น [hr] Tag + Textbox การใช้ tag ใส่ไว้ใน textbox จะช่วยตีกรอบว่า แต่ละคำอยู่ภายใต้ฟังก์ชันเดียวกันกับที่ผูกไว้กับ textbox เช่น textbox สำหรับค้นหา ก็จะทำหน้าที่ค้นหา tag ใน textbox ด้วย [hr] Textbox + Button เราสามารถใส่ปุ่มหรือลิงค์ที่เกี่ยวกับการใช้งาน textbox ได้ เช่น แสดงปุ่ม X เมื่อยูสเซอร์มีการพิมพ์ข้อความเข้ามาใน textbox เมื่อกดปุ่ม X ก็คือ การล้างค่าข้อความทั้งหมดใน textbox นี้เป็นต้น [hr] Textbox + Tooltip Tooltip จะช่วยแนะให้ยูสเซอร์กรอกข้อมูลใน textbox ได้ถูกต้องตามรูปแบบที่กำหนด หรือแจ้งเตือนความผิดพลาดให้ทราบโดยทันที นอกจาก tooltip ที่มีแต่ตัวหนังสือ เราอาจสามารถใส่ฟอร์มเข้าไปใน tooltip เพื่อทำการปรับข้อมูลใน textbox หรือ dropdown อย่างมีรูปแบบ [hr] Button + Dropdown หากเรากดปุ่มที่ตัวอักษร ระบบจะทำงานตามฟังก์ชันหลักที่เราเลือกไว้ ส่วนพังก์ชันอื่นๆ ให้เลือกจากปุ่ม dropdown ในตัวอย่าง ฟังก์ชันหลักคือการบันทึกข้อมูล ส่วนฟังก์ชันอื่นๆ ที่เกี่ยวข้อง เราซ่อนไว้ใน dropdown แทน ทำให้ประหยัดเนื้อที่ในการแสดงผลปุ่ม และกรุ๊ปฟังก์ชันที่เกี่ยวข้องเข้าไว้ด้วยกัน [hr] Checkbox + Textbox เราจะสามารถกรอกข้อความใน textbox ได้ก็ต่อเมื่อ เลือกติ๊กที่ checkbox [hr] Dropdown + Textbox เราสามารถพิมพ์ข้อความใน textbox เพื่อค้นหาตัวเลือกจาก dropdown ได้รวดเร็วขึ้น [hr] Text + Textbox การใส่ text เพื่อเป็นตัวไกด์รูปแบบการกรอกข้อมูล (format placeholder) ช่วยลดข้อผิดพลาดในการกรอกข้อมูลของยูสเซอร์ [hr] Checkbox + Accordion ในกรณีที่ checkbox ต้องการคำอธิบายตัวเลือกที่ค่อนข้างเยอะ เราสามารถซ่อนคำอธิบายเหล่านั้นด้วย UI accordion [hr] Table + Accordion หากมีพื้นที่การแสดงผลคอลัมน์ไม่เพียงพอ เราสามารถซ่อนข้อมูลเหล่านั้นไว้ใน accordion ได้เช่นกัน โดยเปลี่ยนจากการแสดงผลแนวคอลัมน์มาเป็นแนวนอนแทน [hr] Textbox + Progress bar เราสามารถใช้ progress bar เป็นตัวบ่งบอกความสมบูรณ์ของรูปแบบรหัสผ่านได้ [hr] สร้างสรรค์ได้ไม่รู้จบ ตอนนี้ถึงคราวคุณผู้อ่านแล้วล่ะครับ ที่จะลองไอเดียสร้างสรรค์ UI แปลกๆ นอกเหนือจากที่ผมนำเสนอ เริ่มเลย แล้วจะรู้ว่ามันสนุกนะ ความคิดสร้างสรรคที่ไม่มีกรอบความถูกต้อง
