คำศัพท์ UI แนะนำ 20 คำพร้อมความหมายแบบละเอียด
ในแต่ละสาขาอาชีพต่างก็มีคำศัพท์เฉพาะหรือศัพท์เทคนิคที่ใช้กันภายในวงการ มันเป็นความภาคภูมิใจและน่าดีใจสุด ๆ หากเราพูดคำเหล่านี้แล้วคนที่ประกอบอาชีพสายงานอื่นไม่เข้าใจ
ในทางกลับกัน หากเราพูดกับคนที่อยู่ในวงการเดียวกัน แต่เค้าดันไม่เข้าใจ มันจะเป็นเรื่องน่าเศร้ายิ่งนัก
ดังนั้นแล้ว ผมจึงอยากทำให้แน่ใจว่า Designer ในวงการ UI (User Interface) ของไทย จะไม่พลาดศัพท์เทคนิคเด็ด ๆ 20 คำที่ควรรู้ เวลาไปอ่านบทความหรือไปคุยกับ UI Designer ฝรั่งก็สบาย พยักหน้าตามได้หมด
มาดูกันว่ามีคำว่าอะไรบ้าง โดยผมจะพยายามแปลไทยให้เข้าใจง่ายที่สุดกันนะครับ
คำศัพท์ UI Design ไม่รู้ไม่ได้แล้ว
1. Holy Grail Layout (เลย์เอาท์เทพบันดาล)
Holy Grail Layout คือ การทำเลย์เอาท์คอลัมน์บนเว็บที่อยู่แถวเดียวกันให้มีความสูงเท่ากันโดยอิงความสูงตามคอลัมน์ที่มีเนื้อหายาวที่สุด (ดูรูปด้านบนประกอบ)
ในสมัยก่อน การจะโค้ดเพื่อทำเลย์เอาท์แบบนี้ได้บนหน้าเว็บ Developer เห็นดีไซน์แล้วแทบร้องจ๊าก หลายคนก็จะพยายามมาต่อรองกับ designer ให้ผ่อนปรนตรงจุดนี้ได้ไหมหนอ (เอาจริง ๆ ตอนนี้ก็ยังแอบลำบากอยู่นะครับ ผมก็ต้องเอา JavaScript มาช่วยบ่อย ๆ ถ้าใครหาอยู่ ผมแนะนำตัวชื่อ jQuery MatchHeight ครับ)
แต่ด้วยการมาถึงของ Flexbox ซึ่งเป็น CSS framework ใหม่ ที่กำลังถูกผลักดันให้เป็นมาตรฐานสำหรับเว็บบราวเซอร์ ทำให้การทำเลย์เอาท์แบบนี้ ไม่ใช่เรื่องยากอีกต่อไปแล้ว มิเช่นนั้น เราจะต้องทนเห็นเลย์เอาท์ที่ขาดแหว่งเหมือนภาพด้านบน ซึ่งสำหรับ designer มันคือความผิดพลาดที่ไม่อาจยอมได้
2. IxD (ออกแบบจิตสัมผัส)
Designer หลายคนอาจไม่ค่อยคุ้นกับตัวย่อ IxD นี้เท่าไรนัก แต่ถ้าผมบอกใบ้ให้เทียบเคียงกับตัวย่อ UXD (User Experience Design) ก็อาจจะพอเดาได้บ้าง หากยังเดาไม่ได้ ไม่ต้องเสียใจครับ ตอนแรกผมก็ไม่รู้เหมือนกัน งั้นขอเฉลยเลยแล้วกันเนอะ
IxD เป็นคำย่อของ Interaction Design ซึ่งเป็นแขนงหนึ่งในซับเซตของ UXD ที่มีองค์ประกอบที่ต้องพิจารณาในการออกแบบ เช่น ถ้อยคำ (words) , ภาพ (appearance), เสียง (sound), พื้นที่ ( space), เวลา (time), พฤติกรรม (behavior) เป็นต้น และหากเป็นการออกแบบผลิตภัณฑ์ก็จะมีองค์ประกอบเพิ่มขึ้นอีก เช่น พื้นผิว (texture), กลิ่น (smell) เป็นต้น
3. Stencil (แผ่นฉลุลอกลายเหมือน)
ถ้าใครเคยมีประสบการณ์ไปสกรีนลายเสื้อยืด น่าจะเคยเห็นการทำซิลค์สกรีน (Silk Screen) ที่เค้าจะเอาแผ่นที่ถูกฉลุเป็นลวดลายหรือตัวอักษรวางทาบไปที่เสื้อแล้วใช้สีทาไปบนแผ่นนี้ ผลที่ได้คือ สีก็จะปรากฏเป็นไปตามลวดลายที่ฉลุ แผ่นฉลุลายที่เป็นเหมือนแม่พิมพ์นี้ เราเรียกว่า Stencil
ในวงการ UI เราก็มีแผ่นอย่างที่ว่านี้ครับ ซึ่งจะเป็นลักษณะแผ่นเหล็กที่ฉลุเป็น UI หรือไอคอนที่จะใช้เพื่อทำการวาดประกอบออกมาเป็น wireframe (โครงแบบหน้าตา UI) หากใครสนใจอยากซื้อไว้ใช้ก็แวะเข้าไปที่เว็บ UIstencils.com มีเยอะจนเลือกซื้อกันไม่ถูกเลยล่ะ (สรุป ก็เลยไม่ซื้อสักอัน ^v^!)
Stencil ยังหมายรวมถึง UI ทั้งหมดที่รวบรวมจากเว็บใดเว็บหนึ่ง เพื่อช่วยลดการสร้าง UI ที่ซ้ำซ้อน และหากเป็น stencil ที่สามารถแก้ไขได้ก็ยิ่งทำให้การนำ UI ไปประกอบสร้างหน้าจอ (screen) เป็นไปอย่างรวดเร็วและสอดคล้องกันทั่วทั้งเว็บ (consistency)
4. Skeumorphism (ทำลอกหลอกว่าจริง)
Skeumorphism เป็นแนวการออกแบบที่พยายามทำ UI เลียนแบบสภาพพื้นผิวหรือวัตถุจริง หรือมีการใช้สีเกรเดียนต์หรือเงาหนักๆ เพื่อแสดงความเป็นมิติที่สมจริง
เหตุผลของแนวทางออกแบบเช่นนี้ ก็เพื่อให้ยูสเซอร์สามารถใช้งาน app หรือเว็บได้โดยไม่ต้องเรียนรู้ใหม่ โดยอิงประสบการณ์จากการใช้งานวัตถุในโลกจริง เช่น การออกแบบประสบการณ์เลือกหนังสือจากตู้หนังสือของ app iBook
หรือจะเป็น app ตั้งสายกีตาร์ที่ออกแบบให้ใช้งานเหมือนกับได้ดีดตัวกีตาร์จริง ๆ เลย แต่เมื่อพอมาเป็นยุคที่หน้าจอแต่ละอุปกรณ์เริ่มไม่มีมาตรฐานและไม่มีขอบเขต ทำให้แนวทางออกแบบเช่นนี้ไม่ค่อยยืดหยุ่นต่อการแสดงผลและเสียเวลาในการพัฒนาเป็นอย่างมาก
เพราะการทำ Skeumorphism จำเป็นต้องเตรียมไฟล์ภาพให้เหมาะสมกับความละเอียดของแต่ละอุปกรณ์ หรือต้องเขียนโค้ดเพิ่มเพื่อทำ/จัดวางภาพให้พอดีกับทุกขนาดหน้าจอ
ทำให้ในยุคสมัยนี้ การออกแบบจึงไปในแนว Flat Design (เรียบแบน) ที่ไม่ค่อยพึ่งการเล่นสีเกรเดียนต์ และมีการใช้เงาอ่อนๆ พอให้รู้ว่าเป็นวัตถุที่อยู่บนเลเยอร์ที่ต่างกัน โดยจะเลือกใช้สีโทนเดียว (solid color) เพื่อทำเป็นพื้นหลังหรือเงา
5. A/B Testing (บททดสอบ ชอบ A หรือ B)
สิ่งที่สนุกอย่างหนึ่งในงาน UI design ก็คือ การค้นหาคำตอบว่า design ไหนที่จะทำให้บรรลุตัววัดผล (metrics) ได้มากกว่า design ที่เป็นอยู่ โดยผ่านการทดสอบ design ด้วยวิธีที่เรียกว่า A/B testing ซึ่งประกอบไปด้วย 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 ไหนที่ยูสเซอร์คลิกปุ่มซื้อมากกว่ากัน
สมมติผลออกมาว่า แบบ A มียูสเซอร์คลิกที่ปุ่ม 5 คน ขณะเดียวกัน แบบ B มียูสเซอร์คลิกเป็นจำนวน 8 คน ผลเช่นนี้ เราถือว่า design แบบ B เป็นผู้ชนะ จากนั้นเราจึงจะปล่อย design แบบ B ใหักับยูสเซอร์ทั้งหมดได้เห็นและใช้งานแทนที่ design แบบ A
นี่เป็นการทำ A/B test แบบง่ายๆ นะครับ ขั้นสูงกว่านี้อาจจะมีตัวแปรหรือตัววัดผลที่มากกว่านี้ ซึ่งก็ต้องอาศัยความชำนาญและทักษะที่ไม่ธรรมดา
ถ้าใครสนใจอ่านแบบละเอียด ติดตามได้ที่บทความนี้เลยครับ
เทคนิคการทำ A/B Testing ให้เว็บไซต์ขายของได้เยอะขึ้น
6. John Doe (คุณจอห์นแห่งมหาชน)
เวลาที่มีการออกแบบ UI ที่เกี่ยวกับโปรไฟล์ยูสเซอร์ designer จะนึกถึงบุคคลคนนี้เป็นคนแรก ซึ่งเราไม่เคยรู้จักหน้าคร่าตาเลยว่าเค้าคือใคร เกิดที่ไหน อายุเท่าไร รู้แต่ว่าชื่อของเค้าคือ จอห์น โด (John Doe)
John Doe เป็นชื่อที่เหมือนจะยอมรับกันทั่วโลกแล้วว่า ถ้ามีการออกแบบ UI ที่จำเป็นต้องอ้างชื่อใครสักคน John Doe จะต้องเป็นรายชื่อหนึ่งในนั้น ถ้าใครต้องการชื่อจำลองมากกว่า 1 ชื่อ ลองเข้าเว็บ UINames ดูนะครับ เว็บนี้จะช่วยสุ่มชื่อจำลองให้กับเรา เพียงแค่กดปุ่ม Spacebar หรือเราจะกำหนดเฉพาะเพศและสัญชาติ ก็สามารถนะ แต่อย่างไรก็ตาม เบอร์ 1 ต้องคือ John Doe
ส่วนถ้าอยากได้รูป Avatar หน้าคนมาใช้ Mockup ก็ขออนุญาตแนะนำเว็บ UIFaces ครับ มีให้เลือกเยอะมาก เลือกไซส์ได้ด้วย
7. Progressive Disclosure (ไปเรื่อยๆ เผยให้เห็น)
ลองเข้า Facebook ดูนะครับ แล้วสังเกตดีๆ ว่าพอเราคลิกเมาส์ที่ช่อง Write something.. แล้วเกิดอะไรขึ้น?
จะเห็นไอคอนเมนูและปุ่มปรากฎเพิ่มขึ้นมาตรงด้านล่างใช่ไหมครับ? การออกแบบเช่นนี้เราเรียกว่า Progressive Disclosure ครับ คือการแสดงผล UI เท่าที่จำเป็นในช่วงเวลาหนึ่ง และจึงค่อยแสดงผล UI มากขึ้นเมื่อถึงเวลาที่ประจวบเหมาะกับพฤติกรรมที่คาดการณ์ไว้
ในตัวอย่างนี้ก็คือ จะแสดงผลปุ่มและไอคอน ก็ต่อเมื่อยูสเซอร์มีความสนใจที่จะกรอกข้อมูลลงในช่อง ด้วยพฤติกรรมบ่งบอกคือ การคลิก
แนะนำให้ลองศึกษาเพิ่มเติมเรื่อง Progressive Disclosure นี้ได้ที่บล็อคของผม และต่อด้วย Progressive Reduction ซึ่งเป็นแนวคิดสวนทางกับแบบแรกที่น่าสนใจเอามากๆ เลยครับ
8. Sprite (แผงรวมวงจรกราฟฟิค)
Sprite เป็นไฟล์ภาพหลักที่รวบรวมเอาภาพไอคอนหรือภาพกราฟิคที่ใช้ตกแต่งบนเว็บมาไว้เป็นไฟล์เดียวกัน ด้วยเหตุผลเพื่อลดเวลาการโหลดภาพให้น้อยลง ตัวอย่างเช่น จากที่เรามีภาพไอคอน 10 ภาพ จำเป็นต้องส่งคำสั่งโหลดภาพ 10 รอบให้กับ server
หากเราเอาทั้ง 10 ไอคอนมารวมเป็นไฟล์เดียว ก็จะเสียเวลาการโหลดภาพเพียงแค่รอบเดียวเท่านั้นเอง การทำ Sprite จึงเป็นการช่วยเพิ่มประสิทธิภาพการโหลดหน้าเว็บได้อย่างดีทีเดียว
แต่ข้อเสียของ Sprite ก็คือ เวลาที่เราจะเพิ่มไอคอนใหม่เข้าไป จำเป็นต้องเสียเวลาสักหน่อย เพราะต้องใส่ให้ได้แนวกริดที่วางไว้ และเวลาเรียกใช้ก็ต้องเลื่อนกริดให้ไปตรงไอคอนที่ต้องการแสดงผลด้วย
ดังนั้นหากไม่ได้เป็นเว็บขนาดใหญ่ การทำ Sprite อาจไม่จำเป็นเสมอไปก็ได้นะครับ แต่อย่างเว็บ Booking.com การทำ Sprite นี่ช่วยได้มากเลยครับ ก็เล่นมีไอคอนเป็นร้อยๆ ไม่รู้ถึงพันเปล่านะ ไม่อยากนับ ^^!
อย่างไรก็ตาม มี Tool ดี ๆ ที่ผมอยากแนะนำ คือ SpriteCow ที่พอมีรูปแล้วมันจะ generate CSS มาให้ หรือถ้าเขียน Grunt ได้ก็แนะนำ Grunt Spritesmith อันนี้ดีงามมาก generate ให้ทั้งรูปทั้งโค้ดเลยครับ
9. MVP (ทำน้อยสำเร็จได้)
MVP (Minimal Viable Product) เป็นแนวคิดการสร้างผลิตภัณฑ์หรือบริการด้วยการลงทุนทรัพยากรเท่าที่จำเป็น โดยเน้นไปที่ฟีเจอร์หลักของสินค้าและบริการนั้นๆ ซึ่งเหมาะกับธุรกิจ Startup
ภาพประกอบด้านบนบอกเราว่า หากเราอยากจะสร้างรถยนต์ เราไม่ได้เริ่มจากล้อรถยนต์ แต่เราจะเริ่มที่ฟีเจอร์ของรถยนต์ก่อน นั่นก็คือ ความสามารถในการเคลื่อนที่ ดังนั้นหากเราจะลงทุนและทดสอบตลาด เราอาจลองแค่สร้างสเกตบอร์ดแล้วค่อยพัฒนาเป็นจักรยาน -> จักรยานยนต์ หากตลาดมีความต้องการฟีเจอร์นี้ จนในทีสุดจึงค่อยพัฒนาเป็นรถยนต์ขับเคลื่อน 4 ล้อ
ในการพัฒนาออกแบบ app ก็เช่นกัน เราอาจไม่จำเป็นต้องทำ app ออกมาให้เสร็จก่อน แต่อาจเริ่มจากการทำคลิปวิดีโอแสดงฟีเจอร์เด่นๆ ของ app นี้ จากนั้นก็มีช่องให้ลงทะเบียนเพื่อรับลิงค์ดาวน์โหลดเมื่อ app พัฒนาเสร็จ เพียงแค่นี้เราก็พอรู้แล้วว่าตลาดตอบสนองกับบริการนี้มากน้อยแค่ไหน
ดังนั้นการทำ MVP ทำไปเพื่อเป็นการพิสูจน์ตลาดได้อย่างรวดเร็ว ทดสอบไอเดียของเราได้เร็วยิ่งขึ้น ว่าสิ่งนี้จะเป็นที่ต้องการหรือไม่
10. Chevron Icon (ไอคอนเชฟรอน)
ทุกคนคงคุ้นตาดีกับโลโก้บริษัทเชฟรอน ซึ่งเป็นความโชคดีหรือบังเอิญก็ไม่รู้นะครับ ที่โลโก้นี้ไปตรงกับไอคอนที่มีลักษณะเป็นลูกศรทิ่มลงแบบสองชั้น
ไอคอนลูกศรลงแบบสองชั้นมักจะใช้เป็นสื่อบ่งบอกว่า หากคลิกแล้วจะมีข้อมูลเพิ่มเติมแสดงให้เห็น มักใช้คู่กับ UI accordion ที่เมื่อคลิกที่หัวข้อก็จะยืด/หด กล่องข้อมูล เพื่อแสดง/ซ่อน ข้อมูลของกล่องนี้ และเนื่องจากไม่มีใครตั้งชื่อไอคอนนี้อย่างเป็นทางการ จึงจบด้วยชื่อ ไอคอน Chevron ด้วยเหตุผลที่รูปทรงคล้ายกันนั่นเอง ง่ายดีเนอะ ^^
ไอคอนในลักษณะเดียวกัน แต่เป็นลูกศรชี้ลงเพียงหนึ่งชั้น เป็นสัญลักษณ์ที่มีชื่อเรียกเป็นภาษาอังกฤษอยู่แล้ว นั่นก็คือ Caret (คาเร็ท)
การใช้งาน Caret ในชีวิตประจำวันของเรา ก็อย่างเช่น ใช้บ่งชี้คำที่พิมพ์ตกหรือข้อความแทรก หรือบนแป้นคีย์บอร์ดของเราก็ไว้สำหรับพิมพ์เพื่อให้มีความหมายเป็นเลขยกกำลัง (^, Caret แบบหงายชี้ฟ้า) เป็นต้น
แต่พอมาอยู่ในโลก UI ไอคอน Caret จะเป็นตัวที่ทำหน้าที่เหมือนกับไอคอน Chevron เลยครับ ดังนั้นแล้ว ทั้งสองไอคอนนี้จึงใช้แทนกันได้ครับ
11. Low Fidelity and High Fidelity Prototypes การทำโปรโทไทป์แบบขั้นสูง และไวร์เฟรม
High fidelity คือการทำ Prototype ขั้นสูง แบบที่มีการลงทั้งหมด และเห็นข้อมูล รูปภาพทั้งหมดของเว็บไซต์แล้ว เพื่อนำไปใช้ในการทดสอบการใช้งานกับ Users ของเรา
Low fidelity คือการทำ Prototype แบบยังไม่ลงสี บางครั้งเราจะเรียกการทำ Prototype แบบนี้ว่า Wireframe ทำเป็นแค่เส้นโครงสร้างขาวดำ พร้อมหัวข้อและตัวหนังสือแบบละเอียด เพื่อให้ User เข้าใจและสามารถใช้งานได้
ส่วนใหญ่เราจะใช้คำย่อกันนะครับ คือ
Low-fi และ High-fi
12. Information architecture (IA) สถาปัตยกรรมข้อมูล
การทำ Information architecture หรือสถาปัตยกรรมของข้อมูลหมายถึง วิธีการคิดตัดสินใจในการจัดเรียงข้อมูลให้สามารถเข้าใจได้ง่าย หรือในอีกความหมายนึงก็คือ IA คือการจัดวางโครงสร้าง ลำดับของข้อมูล ที่ช่วยให้ผู้คนสามารถเข้าใจเนื้อหา และตามหาสิ่งที่ต้องการได้บนโลกใบนี้ รวมถึงบนออนไลน์
IA คือโครงสร้างของข้อมูลสำหรับเว็บไซต์ แอพ และโปรเจคอื่น ๆ ที่จะช่วยให้เราเข้าใจว่าเราอยู่ตรงไหน และข้อมูลไหนที่มีความเกี่ยวข้องเชื่อมโยงกัน โดยลักษณะของ IA ก็จะมีวิธีการทำวางแผนในการทำได้หลายแบบรวมไปถึง Deliverable หรือของที่จะส่งมอบหลังจากทำ IA สำเร็จก็มีหลายแบบเช่นเดียวกัน
ตัวอย่างงานที่เกี่ยวข้องกับการทำ IA และ Deliverable ของที่จะส่งมอบหลังจากทำ IA เช่น
- Sitemaps
- Hierarchies
- Categorisations
- Navigation
- Metadata
- Taxonomies
- Labeling
- Wireframe
- User flow
- Data Modeling
- และอื่น ๆ
13. Onboarding นำทางผู้ใช้งาน
คือการออกแบบขั้นตอนของ UX เพื่อนำทางให้ User ใหม่เข้ามาใช้งานในระบบของเราได้รวดเร็ว เป็นการนำทาง Users เช่นเวลาที่เราดาวน์โหลดแอพลิเคชั่นมาใหม่ เราจะเห็นหน้าต่าง Onboarding ก่อนใช้งานให้เรา Swipe ไปมา เป็นการแนะนำฟีเจอร์ทั้งหมดของแอพนั้น ๆ
14. Call to Action (CTA) ปุ่มกด
สำหรับดีไซน์เนอร์แล้ว เรื่องของปุ่มเป็นสิ่งที่สำคัญมาก ๆ คำว่า CTA คือปุ่มบนเว็บไซต์หรือแอพลิเคชั่น ที่มีการเขียนคำเพื่อดึงดูด User ให้สามารถใช้งานต่อได้ ทำตามเป้าหมายได้สำเร็จ
15. 5 Second testing
คือการทำเทสการออกแบบของเราภายในระยะเวลา 5 วินาทีกับผู้ใช้งาน
เป็นการทำเทสโดยเราจะเปิดรูปให้กับผู้ใช้งานภายใน 5 วินาที หลังจากนั้นจะถามผู้เข้าร่วมการทดสอบของเราว่าเขาจะสามารถตอบคำถามของเราอะไรได้บ้าง จากความทรงจำภายใน 5 วินาที
ข้อดีของการทำเทสแบบนี้คือเพื่อไว้ดูความสวยงามของงานออกแบบเรา และดูว่าข้อมูลที่เราต้องการจะนำเสนอนั้นสามารถเข้าใจใช้งานได้ง่ายภายในเวลาอันจำกัดหรือไม่
เหมาะสำหรับการทดสอบกับงานประเภท website, graphic design, app design, prototype, wireframe, logo, การเขียนคำ หรืออะไรก็ตามที่เกี่ยวข้องกับงานนำเสนอ
16. 8pt Grid System and 4pt Grid System
การออกแบบโดยการใช้กริดประเภทต่างๆ ปัจจุบัน 8pt grid system จะเป็นการใช้กริดที่ยอดนิยมที่สุด จะใช้หลักการคำนวนและการเว้นระยะห่างของ UI ทั้งหมดบนหน้าจอให้มีเลขระยะห่างที่หารด้วยเลข 8 ลงตัว
ส่วน 4pt ก็คือการเว้นระยะห่างทุกๆ 4 pixel นั่นเอง
ข้อดีคือจะช่วยให้งานเราเนี้ยบ ระยะห่างมีความสวยงาม น่าอ่านและใช้งานได้ง่าย
17. Color contrast
คือการออกแบบให้สีมี contrast ที่คมชัด ให้ผ่านการรองรับ ratio ของมาตรฐาน WCAG ที่มีระดับ AAA และ AA เพื่อทำให้งานดีไซน์ของเรานั้นอ่านง่าย ทำให้ User ของเราใช้งานได้อย่างราบรื่น
18. Accessibility design
คือขั้นตอนของการออกแบบที่ทำให้รองรับกับผู้ใช้งานทุกรูปแบบ ให้สามารถใช้งานทั้งเว็บและแอพของเราได้อย่างราบรื่น ไม่ว่าจะเป็นคนที่ตาบอดสี ตาบอด หูหนวก หรือคนที่มีปัญหาทางด้านการเรียนรู้ และอื่นๆ
19. Affordance
คือความสัมพันธ์ระหว่างผู้ใช้กับวัตถุ ต้องทำการออกแบบให้มีสิ่งสะกิดใจและดึงดูด ออกแบบยังไงเพื่อให้ Users เข้าใจได้ว่าองค์ประกอบนี้สามารถใช้งานได้บ้าง ลองคิดถึงภาพการออกแบบที่จับประตู เราจะออกแบบยังไงให้ Users เข้าใจได้ว่าประตูนี้สามารถดึง หรือผลัก หรือเลื่อน
ทำอย่างไรให้ User รู้ว่าการใช้งานนี้จะต้องใช้การกด, การดึง, การผลัก, การสอด, การหมุน ฯลฯ เป็นต้น
ในส่วนของการใช้ Affordance ในการออกแบบ UI บนหน้าจอนั้น ก็คือการนำเสนอ UI ให้ผู้ใช้งานนั้นรู้ว่า ปุ่มนี้สามารถกดได้ กดไม่ได้ กดแล้วต้องรอนะ หรือห้ามกดซ้ำ เป็นต้น
20. Design ops
Design ops หรือ Design operation คือกลุ่มของคน ขั้นตอนการทำงาน วิธีการสร้างงานในทีมออกแบบ เพื่อนำเสนอมูลค่าของงานออกแบบในมุมกว้าง ส่งไปยังองค์กรของเราได้
ความท้าทายของงาน Design ops คือ
- วิธีการสร้าง Design teams ในองค์กรให้เจริญเติบโต
- การตามหาและการจ้างคนให้ได้สกิลที่ตรงกับงาน
- การสร้างวิธีขั้นตอนการทำงานที่มีประสิทธิภาพ
- วิธีพัฒนาผลงาน ดูผลลัพธ์ของงานออกแบบให้มีประสิทธิ์ภาพสูงที่สุด
จบกันไปแล้วกับบทความแนะนำคำศัพท์ UI ถ้าใครสนใจมาติดตามกันเรื่อย ๆ ในเว็บไซต์ Designil ได้เลยนะครับ
บทความที่เกี่ยวข้อง
