10 คำศัพท์เด็ดวงการ UI Design ที่ไม่รู้ไม่ได้ !!

เมษายน 18, 2018 9:42 am โดย admin
0
26

 

user-interface-top-words

10 คำศัพท์เด็ดวงการ UI Design ที่ไม่รู้ไม่ได้ !!

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

ดังนั้นแล้ว ผมจึงอยากทำให้แน่ใจว่า Designer ในวงการ UI (User Interface) ของไทย จะไม่พลาดศัพท์เทคนิคเด็ด ๆ 10 คำที่ควรรู้ เวลาไปอ่านบทความหรือไปคุยกับ UI Designer ฝรั่งก็สบาย พยักหน้าตามได้หมด

มาดูกันว่ามีคำว่าอะไรบ้าง โดยผมจะพยายามแปลไทยให้เข้าใจง่ายที่สุดกันนะครับ

1. HOLY GRAIL LAYOUT (เลย์เอาท์เทพบันดาล)

holy-grail-layout-01

เลย์เอาท์แบบ Holy Grail ที่มีความสูงของคอลัมน์เท่ากันในแถวเดียว

Holy Grail Layout คือ การทำเลย์เอาท์คอลัมน์บนเว็บที่อยู่แถวเดียวกันให้มีความสูงเท่ากันโดยอิงความสูงตามคอลัมน์ที่มีเนื้อหายาวที่สุด (ดูรูปด้านบนประกอบ)

ในสมัยก่อน การจะโค้ดเพื่อทำเลย์เอาท์แบบนี้ได้บนหน้าเว็บ Developer เห็นดีไซน์แล้วแทบร้องจ๊าก หลายคนก็จะพยายามมาต่อรองกับ designer ให้ผ่อนปรนตรงจุดนี้ได้ไหมหนอ (เอาจริง ๆ ตอนนี้ก็ยังแอบลำบากอยู่นะครับ ผมก็ต้องเอา JavaScript มาช่วยบ่อย ๆ ถ้าใครหาอยู่ ผมแนะนำตัวชื่อ jQuery MatchHeight ครับ)

holy-grail-layout-02

การแสดงผลของเลย์เอาท์คอลัมน์ทั่วไป หากไม่มีการใช้เทคนิคพิเศษช่วย

แต่ด้วยการมาถึงของ Flexbox ซึ่งเป็น CSS framework ใหม่ ที่กำลังถูกผลักดันให้เป็นมาตรฐานสำหรับเว็บบราวเซอร์ ทำให้การทำเลย์เอาท์แบบนี้ ไม่ใช่เรื่องยากอีกต่อไปแล้ว มิเช่นนั้น เราจะต้องทนเห็นเลย์เอาท์ที่ขาดแหว่งเหมือนภาพด้านบน ซึ่งสำหรับ designer มันคือความผิดพลาดที่ไม่อาจยอมได้

2. IXD (ออกแบบจิตสัมผัส)

ixd-01

IxD การออกแบบที่ต้องคำนึงถึงบริบทเรื่องเวลาและพฤติกรรมการใช้งาน

Designer หลายคนอาจไม่ค่อยคุ้นกับตัวย่อ IxD นี้เท่าไรนัก แต่ถ้าผมบอกใบ้ให้เทียบเคียงกับตัวย่อ UXD (User Experience Design) ก็อาจจะพอเดาได้บ้าง หากยังเดาไม่ได้ ไม่ต้องเสียใจครับ ตอนแรกผมก็ไม่รู้เหมือนกัน งั้นขอเฉลยเลยแล้วกันเนอะ

IxD เป็นคำย่อของ Interaction Design ซึ่งเป็นแขนงหนึ่งในซับเซตของ UXD ที่มีองค์ประกอบที่ต้องพิจารณาในการออกแบบ เช่น ถ้อยคำ (words) , ภาพ (appearance), เสียง (sound), พื้นที่ ( space),  เวลา (time), พฤติกรรม (behavior) เป็นต้น และหากเป็นการออกแบบผลิตภัณฑ์ก็จะมีองค์ประกอบเพิ่มขึ้นอีก เช่น พื้นผิว (texture), กลิ่น (smell) เป็นต้น

3. STENCIL (แผ่นฉลุลอกลายเหมือน)

silkscreen

การสกรีนภาพโดยใช้แผ่นแม่พิมพ์ (Stencil)

ถ้าใครเคยมีประสบการณ์ไปสกรีนลายเสื้อยืด น่าจะเคยเห็นการทำซิลค์สกรีน (Silk Screen) ที่เค้าจะเอาแผ่นที่ถูกฉลุเป็นลวดลายหรือตัวอักษรวางทาบไปที่เสื้อแล้วใช้สีทาไปบนแผ่นนี้ ผลที่ได้คือ สีก็จะปรากฏเป็นไปตามลวดลายที่ฉลุ แผ่นฉลุลายที่เป็นเหมือนแม่พิมพ์นี้ เราเรียกว่า Stencil

stencil-02

เครื่องมือ stencil สำหรับวาดไอคอนต่างๆ, ภาพ: เว็บ uistencils.com

ในวงการ UI เราก็มีแผ่นอย่างที่ว่านี้ครับ ซึ่งจะเป็นลักษณะแผ่นเหล็กที่ฉลุเป็น UI หรือไอคอนที่จะใช้เพื่อทำการวาดประกอบออกมาเป็น wireframe (โครงแบบหน้าตา UI) หากใครสนใจอยากซื้อไว้ใช้ก็แวะเข้าไปที่เว็บ UIstencils.com มีเยอะจนเลือกซื้อกันไม่ถูกเลยล่ะ (สรุป ก็เลยไม่ซื้อสักอัน ^v^!)

stencil-03

Stencil ทีรวบรวม UI ต่างๆ ที่ใช้งานอยู่ภายในเว็บ

Stencil ยังหมายรวมถึง UI ทั้งหมดที่รวบรวมจากเว็บใดเว็บหนึ่ง เพื่อช่วยลดการสร้าง UI ที่ซ้ำซ้อน และหากเป็น stencil ที่สามารถแก้ไขได้ก็ยิ่งทำให้การนำ UI ไปประกอบสร้างหน้าจอ (screen) เป็นไปอย่างรวดเร็วและสอดคล้องกันทั่วทั้งเว็บ (consistency)

4. SKEUMORPHISM (ทำลอกหลอกว่าจริง)

ibooksapp

ตัวอย่าง app iBook ที่ใช้แนวการออกแบบสไตล์ skeumorphic design

Skeumorphism เป็นแนวการออกแบบที่พยายามทำ UI เลียนแบบสภาพพื้นผิวหรือวัตถุจริง หรือมีการใช้สีเกรเดียนต์หรือเงาหนักๆ เพื่อแสดงความเป็นมิติที่สมจริง

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

good_garageband

app ที่ทำ Interface เหมือนกับตัวกีตาร์จริงๆ

หรือจะเป็น app ตั้งสายกีตาร์ที่ออกแบบให้ใช้งานเหมือนกับได้ดีดตัวกีตาร์จริง ๆ เลย แต่เมื่อพอมาเป็นยุคที่หน้าจอแต่ละอุปกรณ์เริ่มไม่มีมาตรฐานและไม่มีขอบเขต ทำให้แนวทางออกแบบเช่นนี้ไม่ค่อยยืดหยุ่นต่อการแสดงผลและเสียเวลาในการพัฒนาเป็นอย่างมาก

เพราะการทำ Skeumorphism จำเป็นต้องเตรียมไฟล์ภาพให้เหมาะสมกับความละเอียดของแต่ละอุปกรณ์ หรือต้องเขียนโค้ดเพิ่มเพื่อทำ/จัดวางภาพให้พอดีกับทุกขนาดหน้าจอ

screen322x572

app สอนคอร์ดอูคูเลเล่ที่ใช้แนวการออกแบบสไตล์ flat design

ทำให้ในยุคสมัยนี้ การออกแบบจึงไปในแนว Flat Design (เรียบแบน) ที่ไม่ค่อยพึ่งการเล่นสีเกรเดียนต์ และมีการใช้เงาอ่อนๆ พอให้รู้ว่าเป็นวัตถุที่อยู่บนเลเยอร์ที่ต่างกัน โดยจะเลือกใช้สีโทนเดียว (solid color) เพื่อทำเป็นพื้นหลังหรือเงา

5. AB TEST (บททดสอบ ชอบ A หรือ B)

abtest-01

เปรียบเทียบ design A ที่เป็น design ดั้งเดิม กับ design B ที่เป็น design ใหม่

สิ่งที่สนุกอย่างหนึ่งในงาน UI design ก็คือ การค้นหาคำตอบว่า design ไหนที่จะทำให้บรรลุตัววัดผล (metrics) ได้มากกว่า design ที่เป็นอยู่ โดยผ่านการทดสอบ design ด้วยวิธีที่เรียกว่า A/B test ซึ่งประกอบไปด้วย design แบบ A (design ที่เป็นอยู่ ณ ปัจจุบัน, ในทางวิทยาศาสตร์ เรียกว่า กลุ่มควบคุม-Control Group) และ design แบบ B (design แบบใหม่, กลุ่มตัวแปร-Variable Group)

ตัวอย่างในรูปด้านบน เป็นการทำ A/B test ในกรณีที่หากเราอยากรู้ว่าปุ่มสีฟ้า (design A) หรือสีชมพู (design B) จะทำให้ยูสเซอร์คลิกซื้อสินค้าได้มากกว่ากัน เราก็เพียงแค่ทำการแสดงผลให้กับยูสจำนวนหนึ่ง เช่น 20 คน (จำนวนยิ่งมาก ยิ่งแม่นยำ) โดยแบ่งยูสเซอร์ 10 คนให้เห็น design แบบ A และอีก 10 คน ได้เห็น design แบบ B  แล้วดูผลลัพธ์ว่า design ไหนที่ยูสเซอร์คลิกปุ่มซื้อมากกว่ากัน

abtest-02

การวัดผล A/B test

สมมติผลออกมาว่า แบบ A มียูสเซอร์คลิกที่ปุ่ม 5 คน ขณะเดียวกัน แบบ B มียูสเซอร์คลิกเป็นจำนวน 8 คน ผลเช่นนี้ เราถือว่า design แบบ B เป็นผู้ชนะ จากนั้นเราจึงจะปล่อย design แบบ B ใหักับยูสเซอร์ทั้งหมดได้เห็นและใช้งานแทนที่ design แบบ A

นี่เป็นการทำ A/B test แบบง่ายๆ นะครับ ขั้นสูงกว่านี้อาจจะมีตัวแปรหรือตัววัดผลที่มากกว่านี้ ซึ่งก็ต้องอาศัยความชำนาญและทักษะที่ไม่ธรรมดา

6. JOHN DOE (คุณจอห์นแห่งมหาชน)

john-doe

UI ประเภทโปรไฟล์ที่ต้องมีการใส่ชื่อของผู้ใช้ประกอบ

เวลาที่มีการออกแบบ UI ที่เกี่ยวกับโปรไฟล์ยูสเซอร์ designer จะนึกถึงบุคคลคนนี้เป็นคนแรก ซึ่งเราไม่เคยรู้จักหน้าคร่าตาเลยว่าเค้าคือใคร เกิดที่ไหน อายุเท่าไร รู้แต่ว่าชื่อของเค้าคือ จอห์น โด (John Doe)

John Doe เป็นชื่อที่เหมือนจะยอมรับกันทั่วโลกแล้วว่า ถ้ามีการออกแบบ UI ที่จำเป็นต้องอ้างชื่อใครสักคน John Doe จะต้องเป็นรายชื่อหนึ่งในนั้น ถ้าใครต้องการชื่อจำลองมากกว่า 1 ชื่อ ลองเข้าเว็บ UINames ดูนะครับ เว็บนี้จะช่วยสุ่มชื่อจำลองให้กับเรา เพียงแค่กดปุ่ม Spacebar หรือเราจะกำหนดเฉพาะเพศและสัญชาติ ก็สามารถนะ แต่อย่างไรก็ตาม เบอร์ 1 ต้องคือ John Doe

ส่วนถ้าอยากได้รูป Avatar หน้าคนมาใช้ Mockup ก็ขออนุญาตแนะนำเว็บ UIFaces ครับ มีให้เลือกเยอะมาก เลือกไซส์ได้ด้วย

7. PROGRESSIVE DISCLOSURE (ไปเรื่อยๆ เผยให้เห็น)

progressive-disclosure-01

การแสดงผลช่องกรอกข้อมูล Feed ของเว็บ Facebook

ลองเข้า Facebook ดูนะครับ แล้วสังเกตดีๆ ว่าพอเราคลิกเมาส์ที่ช่อง Write something.. แล้วเกิดอะไรขึ้น?

progressive-disclosure-02

การแสดงผลของช่องกรอกข้อความเมื่อทำการคลิกเมาส์ที่ช่อง

จะเห็นไอคอนเมนูและปุ่มปรากฎเพิ่มขึ้นมาตรงด้านล่างใช่ไหมครับ? การออกแบบเช่นนี้เราเรียกว่า Progressive Disclosure ครับ คือการแสดงผล UI เท่าที่จำเป็นในช่วงเวลาหนึ่ง และจึงค่อยแสดงผล UI มากขึ้นเมื่อถึงเวลาที่ประจวบเหมาะกับพฤติกรรมที่คาดการณ์ไว้

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

แนะนำให้ลองศึกษาเพิ่มเติมเรื่อง Progressive Disclosure นี้ได้ที่บล็อคของผม และต่อด้วย Progressive Reduction ซึ่งเป็นแนวคิดสวนทางกับแบบแรกที่น่าสนใจเอามากๆ เลยครับ

8. SPRITE (แผงรวมวงจรกราฟฟิค)

sprite-booking-com-sample

Sprite บางส่วนของเว็บ Booking.com

Sprite เป็นไฟล์ภาพหลักที่รวบรวมเอาภาพไอคอนหรือภาพกราฟิคที่ใช้ตกแต่งบนเว็บมาไว้เป็นไฟล์เดียวกัน ด้วยเหตุผลเพื่อลดเวลาการโหลดภาพให้น้อยลง ตัวอย่างเช่น จากที่เรามีภาพไอคอน 10 ภาพ จำเป็นต้องส่งคำสั่งโหลดภาพ 10 รอบให้กับ server

หากเราเอาทั้ง 10 ไอคอนมารวมเป็นไฟล์เดียว ก็จะเสียเวลาการโหลดภาพเพียงแค่รอบเดียวเท่านั้นเอง การทำ Sprite จึงเป็นการช่วยเพิ่มประสิทธิภาพการโหลดหน้าเว็บได้อย่างดีทีเดียว

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

ดังนั้นหากไม่ได้เป็นเว็บขนาดใหญ่ การทำ Sprite อาจไม่จำเป็นเสมอไปก็ได้นะครับ แต่อย่างเว็บ Booking.com การทำ Sprite นี่ช่วยได้มากเลยครับ ก็เล่นมีไอคอนเป็นร้อยๆ ไม่รู้ถึงพันเปล่านะ ไม่อยากนับ ^^!

อย่างไรก็ตาม มี Tool ดี ๆ ที่ผมอยากแนะนำ คือ SpriteCow ที่พอมีรูปแล้วมันจะ generate CSS มาให้ หรือถ้าเขียน Grunt ได้ก็แนะนำ Grunt Spritesmith อันนี้ดีงามมาก generate ให้ทั้งรูปทั้งโค้ดเลยครับ

9. MVP (ทำน้อยสำเร็จได้)

download2

ภาพอธิบายแนวคิดของ MVP ที่เน้นการสร้างฟิเจอร์หลักเพื่อใช้งาน

MVP (Minimal Viable Product) เป็นแนวคิดการสร้างผลิตภัณฑ์หรือบริการด้วยการลงทุนทรัพยากรเท่าที่จำเป็น โดยเน้นไปที่ฟีเจอร์หลักของสินค้าและบริการนั้นๆ ซึ่งเหมาะกับธุรกิจ Startup

ภาพประกอบด้านบนบอกเราว่า หากเราอยากจะสร้างรถยนต์ เราไม่ได้เริ่มจากล้อรถยนต์ แต่เราจะเริ่มที่ฟีเจอร์ของรถยนต์ก่อน นั่นก็คือ ความสามารถในการเคลื่อนที่ ดังนั้นหากเราจะลงทุนและทดสอบตลาด เราอาจลองแค่สร้างสเกตบอร์ดแล้วค่อยพัฒนาเป็นจักรยาน -> จักรยานยนต์ หากตลาดมีความต้องการฟีเจอร์นี้ จนในทีสุดจึงค่อยพัฒนาเป็นรถยนต์ขับเคลื่อน 4 ล้อ

mvp-02

หน้าเว็บที่มีการอธิบายฟีเจอร์ของ app โดยผู้สนใจจะได้รับการแจ้งเตือนเมื่อ app พร้อมให้บริการ

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

10. CHEVRON ICON (ไอคอนเชฟรอน)

chevron

โลโก้บริษัท เชฟรอน จำกัด

ทุกคนคงคุ้นตาดีกับโลโก้บริษัทเชฟรอน ซึ่งเป็นความโชคดีหรือบังเอิญก็ไม่รู้นะครับ ที่โลโก้นี้ไปตรงกับไอคอนที่มีลักษณะเป็นลูกศรทิ่มลงแบบสองชั้น

chevron-ui-01

UI accordion ทีใช้ไอคอน accordion บ่งบอกสถานะเปิด / ปิด

ไอคอนลูกศรลงแบบสองชั้นมักจะใช้เป็นสื่อบ่งบอกว่า หากคลิกแล้วจะมีข้อมูลเพิ่มเติมแสดงให้เห็น มักใช้คู่กับ UI accordion ที่เมื่อคลิกที่หัวข้อก็จะยืด/หด กล่องข้อมูล เพื่อแสดง/ซ่อน ข้อมูลของกล่องนี้ และเนื่องจากไม่มีใครตั้งชื่อไอคอนนี้อย่างเป็นทางการ จึงจบด้วยชื่อ ไอคอน Chevron ด้วยเหตุผลที่รูปทรงคล้ายกันนั่นเอง ง่ายดีเนอะ ^^

caret-ui-01

UI accordion ที่ใช้ไอคอน Caret บ่งบอกสถานะการเปิด / ปิด

ไอคอนในลักษณะเดียวกัน แต่เป็นลูกศรชี้ลงเพียงหนึ่งชั้น เป็นสัญลักษณ์ที่มีชื่อเรียกเป็นภาษาอังกฤษอยู่แล้ว นั่นก็คือ Caret (คาเร็ท)

caret-ui-02

การใช้งาน Caret แบบทั่วไป

การใช้งาน Caret ในชีวิตประจำวันของเรา ก็อย่างเช่น ใช้บ่งชี้คำที่พิมพ์ตกหรือข้อความแทรก หรือบนแป้นคีย์บอร์ดของเราก็ไว้สำหรับพิมพ์เพื่อให้มีความหมายเป็นเลขยกกำลัง (^, Caret แบบหงายชี้ฟ้า) เป็นต้น

แต่พอมาอยู่ในโลก UI ไอคอน Caret จะเป็นตัวที่ทำหน้าที่เหมือนกับไอคอน Chevron เลยครับ ดังนั้นแล้ว ทั้งสองไอคอนนี้จึงใช้แทนกันได้ครับ

ศัพท์คำที่ 11

อันที่จริงยังมีศัพท์อื่นๆ ในวงการอีกมากมายเลยครับ แต่คิดว่า 10 ศัพท์ UI นี้จะช่วยเติมช่องว่างความรู้ที่หายไปให้สมบูรณ์สมฐานะการเป็น UI designer แต่ถ้าใครยังไม่พอกับ 10 คำศัพท์นี้ งั้นผมแถมศัพท์คำที่ 11 ให้แล้วกัน

UIB…

ไม่ต้องคิดให้ปวดหมองครับ เป็นตัวย่อของเว็บผมเองครับ UI Blogazine 

รับรองศัพท์ UI เพียบ  (─‿─)

 

แหล่งที่มา : designil.com