UI Blogazine

UI Pattern

UI Hybrid

ui-hybrid-featured

ความคิดสร้างสรรค์เป็นสิ่งที่ขาดไม่ได้เลยในงานด้าน design และมันก็ไม่ใช่สิ่งยากที่จะทำด้วยครับ ความคิดสร้างสรรค์ไม่จำเป็นต้องเป็นสิ่งใหม่และมีประโยชน์ใช้งานได้ (เพราะสมัยนี้ หาสิ่งใหม่ 100% แทบไม่มีแล้ว) โดยมีแนวคิดภายใต้กรอบวิธีการง่ายๆ ดังนี้

  • ขยายให้ใหญ่ ย่อให้เล็ก
  • เปลี่ยนสี, รสชาด, ผิวสัมผัส, เสียงบรรเลง
  • ผสมปนเป
  • รู้จักสังเกตพฤติกรรมและปัญหา

แน่นอนครับ แนวทางการออกแบบ UI เชิงสร้างสรรค์ก็สามารถใช้แนวคิดนี้ได้เช่นกัน ผมจึงลองนำเอา UI แบบต่างๆ มาผสมปนเป จนเกิดเป็น UI Hybrid (UI ลูกผสม) บาง UI คงคุ้นตาและใช้งานได้จริง แต่บาง UI ก็อาจดูแปลกๆ หรือบางทีอาจไม่เหมาะกับการใช้งานจริง จึงต้องให้ใช้วิจารณญาณในการรับชมครับ

Tab + Dropdown

ui-hybrid-01

ในตัวอย่างคือ เราสามารถเปลี่ยนหัวข้อของ Tab ได้ด้วยการคลิกเลือกปุ่มลูกศร dropdown ทำให้เราสามารถประหยัดจำนวน tab และช่วยกรุ๊ปหัวข้อให้อยู่ภายใต้ tab เดียวกัน

Tab + Radio

ui-hybrid-02

เราอาจเคยเห็น UI คล้ายๆ กันนี้ ในการเลือกเที่ยวบิน โดยการเลือก tab เป็นเสมือนการตัดสินใจเลือกตัวเลือกนั้น ทำให้จำเป็นต้องมีการใช้ radio button เป็นตัวสื่อถึงการยืนยันการเลือก

Table + Carousel

ui-hybrid-03

UI นี้เหมาะกับตารางการแสดงผลแบบ Responsive ซึ่งมีข้อจำกัดด้านพื้นที่หากเรียกดูบนอุปกรณ์มือถือ

ui-hybrid-04

โดยเราสามารถเลื่อนดูคอลัมน์ที่ถูกซ่อนได้ด้วยการคลิกปุ่มซ้าย/ขวา โดยมีตัวบ่งชี้ตำแหน่งการเลื่อนให้ทราบเหมือนกับ UI carousel

Icon + Textbox / Button

ui-hybrid-05

การใช้ Icon ประกอบจะทำให้สื่อความหมายได้ชัดเจนขึ้น ดังนั้นการใช้ Icon รวมกับ UI textbox จึงทำให้ยูสเซอร์เกิดความมั่นใจในการกรอกข้อมูลมากขึ้น

ui-hybrid-15

เช่นเดียวกัน หากเรามีการใส่ Icon ในปุ่ม ก็จะช่วยสื่อถึงฟังก์ชันของปุ่มได้ดียิ่งขึ้น

Dropdown + Textbox

ui-hybrid-06

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

Dropdown + Checkbox + Table

ui-hybrid-07

UI hybrid ไม่จำกัดแค่การผสมเพียง 2 สายพันธุ์ เราสามารถรวม 3 UI เพื่อสร้างสรรค์การเรียกดูคอลัมน์ของตารางได้

 

ui-hybrid-08

ซึ่งหากเราเลือก dropdown แสดงคอลัมน์ เราจะสามารถเลือกติ๊กว่าจะให้ตารางแสดงคอลัมน์อะไรบ้าง โดยสามารถนำไปประยุกต์ใช้งานสำหรับการแสดงผลแบบ responsive ได้เป็นอย่างดี

Slider + Textbox

ui-hybrid-09

การใช้ textbox เข้ามารวมกับ slider จะทำให้เราสามารถเลือกตัวเลขได้แม่นยำมากขึ้น

Tag + Textbox

ui-hybrid-10

การใช้ tag ใส่ไว้ใน textbox จะช่วยตีกรอบว่า แต่ละคำอยู่ภายใต้ฟังก์ชันเดียวกันกับที่ผูกไว้กับ textbox เช่น textbox สำหรับค้นหา ก็จะทำหน้าที่ค้นหา tag ใน textbox ด้วย

Textbox + Button

ui-hybrid-11

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

Textbox + Tooltip

ui-hybrid-13

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

ui-hybrid-12

นอกจาก tooltip ที่มีแต่ตัวหนังสือ เราอาจสามารถใส่ฟอร์มเข้าไปใน tooltip เพื่อทำการปรับข้อมูลใน textbox หรือ dropdown อย่างมีรูปแบบ

Button + Dropdown

ui-hybrid-14

หากเรากดปุ่มที่ตัวอักษร ระบบจะทำงานตามฟังก์ชันหลักที่เราเลือกไว้ ส่วนพังก์ชันอื่นๆ ให้เลือกจากปุ่ม dropdown ในตัวอย่าง ฟังก์ชันหลักคือการบันทึกข้อมูล ส่วนฟังก์ชันอื่นๆ ที่เกี่ยวข้อง เราซ่อนไว้ใน dropdown แทน ทำให้ประหยัดเนื้อที่ในการแสดงผลปุ่ม และกรุ๊ปฟังก์ชันที่เกี่ยวข้องเข้าไว้ด้วยกัน

Checkbox + Textbox

ui-hybrid-16

เราจะสามารถกรอกข้อความใน textbox ได้ก็ต่อเมื่อ เลือกติ๊กที่ checkbox

Dropdown + Textbox

ui-hybrid-17

เราสามารถพิมพ์ข้อความใน textbox เพื่อค้นหาตัวเลือกจาก dropdown ได้รวดเร็วขึ้น

Text + Textbox

ui-hybrid-18

การใส่ text เพื่อเป็นตัวไกด์รูปแบบการกรอกข้อมูล (format placeholder) ช่วยลดข้อผิดพลาดในการกรอกข้อมูลของยูสเซอร์

Checkbox + Accordion

ui-hybrid-21

ในกรณีที่ checkbox ต้องการคำอธิบายตัวเลือกที่ค่อนข้างเยอะ เราสามารถซ่อนคำอธิบายเหล่านั้นด้วย UI accordion

Table + Accordion

ui-hybrid-19

หากมีพื้นที่การแสดงผลคอลัมน์ไม่เพียงพอ เราสามารถซ่อนข้อมูลเหล่านั้นไว้ใน accordion ได้เช่นกัน

ui-hybrid-19b

โดยเปลี่ยนจากการแสดงผลแนวคอลัมน์มาเป็นแนวนอนแทน

Textbox + Progress bar

ui-hybrid-20

เราสามารถใช้ progress bar เป็นตัวบ่งบอกความสมบูรณ์ของรูปแบบรหัสผ่านได้

สร้างสรรค์ได้ไม่รู้จบ

ตอนนี้ถึงคราวคุณผู้อ่านแล้วล่ะครับ ที่จะลองไอเดียสร้างสรรค์ UI แปลกๆ นอกเหนือจากที่ผมนำเสนอ เริ่มเลย แล้วจะรู้ว่ามันสนุกนะ ความคิดสร้างสรรคที่ไม่มีกรอบความถูกต้อง

 

Tagged , , ,

About uiblogaziner

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

View all posts by uiblogaziner →

Related Posts

Leave a Reply

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

บทความล่าสุด