ทฤษฎี UI รู้จักชั้นเชิง UI (UI Stack) By uiblogaziner September 16, 201511122 views ShareTweet 5 เราจะไม่สามารถออกแบบ UI ที่ดีได้เลย หากไม่รู้จักองค์ประกอบย่อยของ UI ที่หล่อรวมกันเพื่อตอบสนองการใช้งานของยูสเซอร์ให้สำเร็จลุล่วง ในมุมมองที่ตาเรามองเห็น เราคงเข้าใจว่าองค์ประกอบย่อยของ UI ได้แก่ รูปร่าง, สีสัน, รูปภาพ และตัวอักษร แต่ในอีกด้านหนึ่ง เราสามารถมอง UI ในแง่ของสถานะ ณ ช่วงเวลาหนึ่งได้ด้วยครับ ซึ่งสามารถแจกแจงออกเป็นชั้นๆ ต่อๆ กัน จนเกิดเป็น UI ในภาพรวมในที่สุด ครั้งนี้เราจึงมาทำความรู้จัก ชั้น(เชิง)ของ UI หรือ UI Stack กันครับ แผนภาพแสดงชั้นสถานะของ UI ทั้ง 5 ชั้น การจะผลิต UI ให้ออกมาใช้งานได้อย่างมีประสิทธิภาพ เราจำเป็นต้องคำนึงถึงว่า UI แต่ละหน้าสามารถมีได้ด้วยกัน 5 ชั้นสถานะ (แต่ไม่จำเป็นต้องมีทุกชั้น) คือ ชั้นสถานะว่าง (Blank State) ชั้นสถานะสมบูรณ์พร้อม (Ideal State) ชั้นสถานะก้ำกึ่ง (Partial State) ชั้นสถานะกำลังโหลด (Loading State) ชั้นสถานะผิดพลาด (Error State) เรามาทำความเข้าใจในแต่ละชั้นกันเลยดีกว่าเนอะ โดยผมจะนำเสนอผ่านตัวอย่างสมมติที่น่าจะทำให้เราเห็นภาพได้ดีกว่าการนิยามเป็นตัวหนังสือ เรื่องมีอยู่ว่า… app Wishy สำหรับใช้สร้างความปรารถนา, บันทึกและแบ่งปัน ผมกำลังจะออกแแบบ app หนึ่งที่ชื่อว่า “Wishy” ซึ่งเป็น app ที่ให้คนมาใส่ความปรารถนาของตนเองว่าอยากได้, อยากทำอะไร โดยจะคอยเตือนและติดตามความปรารถนาว่าเป็นจริงแล้วหรือยัง และสุดท้ายหากความปรารถนาเป็นจริง ก็สามารถแชร์ความปรารถนานั้นให้ผู้อื่นเชยชมได้ด้วย 1. ชั้นสถานะว่าง (Blank State) สถานะว่างของ app เมื่อไม่มีรายการความปรารถนา เริ่มต้นการใช้งาน app Wishy ก่อนอื่นต้องให้เราเพิ่มความปรารถนาเข้าไปก่อน แต่ครั้นพอเปิด app มาเจอสถานะว่าง (Blank state) เหมือนอย่างภาพด้านบน คงจะไม่สร้างความประทับใจแรกพบเป็นแน่ เหตุเพราะอาจทำให้ยูสเซอร์เข้าใจผิดว่า app เกิดทำงานผิดพลาดอะไรบางอย่างหรือเปล่า ดังนั้นแล้วหาก UI ที่ต้องรอการสร้างจากยูสเซอร์ เราก็ควรชักจูงยูสเซอร์ให้สร้างมันขึ้นมาด้วยการใส่ UI อะไรสักอย่างลงไปในสถานะว่างนั้นซะ สถานะว่างของ app ที่นำเสนอช่องทางการสร้างรายการ แทนที่จะปล่อยให้หน้าว่าง ผมออกแบบ UI ให้มีข้อความกระตุ้นความอยากรู้อยากเห็นของยูสเซอร์ พร้อมลิงค์ที่พร้อมให้ยูสเซอร์กดเพิ่มเริ่มต้นการสร้างความปรารถนาแรกขึ้นมา เท่านี้สถานะที่ว่างเปล่าก็ถูกเติมเต็มด้วยคำเชิญที่ยากจะปฏิเสธ สถานะว่างของ app ที่นำเสนอช่องทางการสร้างรายการแบบกลมกลืน หรือใครจะมีความคิดแปลกอื่นไปอีก ก็สามารถลองทำได้เช่นกันนะ เช่น ทำ block ที่ปกติเป็นส่วนแสดงผลความปรารถนาที่มีอยู่แล้ว ก็ใช้เป็น UI เพิ่มความปรารถนา อย่าง app Line ก็ใช้เบอร์โทร เพื่อเพิ่มเพื่อนให้กับเราได้โดยไม่ต้องนั่งเพิ่มใหม่ทีละคน ก็เป็นเทคนิคที่ใช้เทคโนโลยีและข้อมูลแวดล้อมมาสร้างข้อมูลกลบเกลื่อนสถานะว่างเปล่าให้กับยูสเซอร์ได้เป็นอย่างดีเลยครับ ตัวเลือกเพิ่มรายการเพื่อลดความเป็นสถานะว่าง สถานะว่างไม่จำเป็นต้องว่างทั้งหมดนะครับ ว่างเพียงบางส่วนก็ได้ เช่น เมื่อยูสเซอร์มีการเพิ่มความปรารถนาด้วยตัวเองไปแล้ว เราอาจมีตัวช่วยให้ยูสเซอร์เพิ่มความปรารถนาอื่นๆ เข้าไปอีก โดยนำเสนอตัวเลือกที่เตรียมไว้ อาทิ ความปรารถนายอดนิยม, ความปรารถนาที่น่าท้าทาย เป็นต้น 2. ชั้นสถานะสมบูรณ์พร้อม (Ideal State) ภาพสุดท้ายที่คาดหวังให้ยูสเซอร์ใช้งานได้ถึงจุดนี้ สถานะนี้จะตรงข้ามกับสถานะว่างโดยสิ้นเชิง เพราะเป็นภาพ UI สุดท้ายที่เราอยากนำยูสเซอร์ให้มาถึงจุดนี้ อย่างจุดสูงสุดที่คาดหวังไว้ของ app Wishy นี้ก็คือ การที่ยูสเซอร์ทำความปรารถนาที่ตัวเองเพิ่มเข้าไปแล้วให้เป็นจริงและแชร์ให้เพื่อนๆ คนอื่นได้ทราบ หรือจุดคาดหวังของ Twitter ก็คือ เรา follow คนกลุ่มหนึ่ง, มีคน follow เรากลุ่มหนึ่ง, เรา tweet ข้อความไป/กลับ, ใส่รูป profile 3. ชั้นสถานะก้ำกึ่ง (Partial State) ยูสเซอร์มีการเพิ่มความปรารถนาเข้าไปบางส่วน แต่ยังไม่ถึงจุดคาดหวังของผู้ออกแบบ เป็นสถานะที่อยู่กึ่งกลางระหว่างสถานะสมบูรณ์กับสถานะว่างเปล่า สถานะนี้มองได้ว่า ยูสเซอร์เริ่มเข้าใจและมีการใช้งาน app บ้างแล้ว แต่อาจติดปัญหาหรือขาดแรงกระตุ้นเพื่อมุ่งไปสู่สถานะสมบูรณ์พร้อม รูปตัวอย่างด้านบนคือ ยูสเซอร์เริ่มมีการสร้างความปรารถนา แต่ยังไม่ได้ทำความปรารถนาใดเลยให้เป็นจริง การเพิ่มแรงกระตุ้นด้วยวิธีล่อให้เหมือนเกม ดังนั้นเราจึงต้องสร้าง UI ที่ช่วยนำทางยูสเซอร์ไปให้ถึงฝั่งที่หมายไว้ ไม่ว่าจะเป็นการหลอกล่อให้เหมือนเล่นเกม (Gamification) ที่เมื่อทำภารกิจสำเร็จ ก็จะได้แต้มหรือไอเท็มไปอวดประชาชีโลกออนไลน์ ตัวช่วยบอกระดับความสำเร็จของ UI หรือจะทำเป็นระดับบอกความสำเร็จเป็น % เพื่อแจ้งให้ยูสเซอร์รู้ว่า นี่ยังไม่ใช่สถานะสมบูรณ์ของความปรารถนานี้นะ 4. ชั้นสถานะกำลังโหลด (Loading State) แสดงไอคอนโหลดเพื่อสื่อให้ยูสเซอร์รู้ว่าระบบกำลังเรียกข้อมูล ชั้นนี้ดูเหมือนจะออกแบบง่ายๆ เพราะจะเกิดขึ้นเมื่อระบบต้องการโหลดข้อมูลบางอย่างจากระบบส่วนกลาง ก็จะมีไอคอนสื่อให้รู้ว่ายูสเซอร์รอหน่อยนะ app กำลังโหลดข้อมูล สถานะในชั้นนี้ เราสามารถเล่นพลิกแพลงได้หลายอย่าง โดยมีหัวใจของการออกแบบในชั้นสถานะนี้ คือ ออกแบบ UI ที่ต้องรอให้เหมือนไม่ต้องรอ มาดูตัวอย่างกันครับ การใช้ข้อความหรือกราฟิคที่มีประโยชน์ขณะที่ยูสเซอร์กำลังรอการทำงานของระบบ ในช่วงที่รอโหลด เราสามารถใส่คำโปรยโฆษณาหรือคำแนะนำการใช้งาน app ให้กับยูสเซอร์ได้อ่านแก้ขัดไปพลางๆ ยิ่งเป็นเรื่องโปรโมชันก็จะช่วยล่อให้ยูสเซอร์ไม่หันไปคิดว่าตัวเองกำลังรอโหลดอยู่นะ การแสดงโครงสร้างของหน้าก่อนที่จะมีการโหลดข้อมูลอื่นๆ ตามมา และด้วยเทคโนโลยีสมัยใหม่ เราสามารถโหลดโครงสร้างหน้าของเว็บหรือ app มาแสดงผลก่อน แล้วค่อยโหลดข้อมูลที่ต้องร้องขอจาก server ตามมาทีหลังก็ได้ การแสดงผลที่แยกกับการทำงานเบื้องหลังของระบบ เช่นเดียวกับวิธีการด้านบน หากเรากดแชร์ความปรารถนา ก็ไม่จำเป็นต้องแสดงไอคอนโหลดให้ยูสเซอร์ได้เห็น ให้ระบบทำการแชร์ข้อมูลต่างหากอยู่เบื้องหลัง ส่วนด้านหน้า เราก็ออกแบบ UI แสดงผลให้เห็นว่าการแชร์เสร็จสิ้นสำเร็จแล้วโดยทันที 5. ชั้นสถานะผิดพลาด (Error State) การแจ้งเตือนเมื่อยูสเซอร์กดส่งฟอร์มโดยไม่กรอกข้อมูลให้ครบ สถานะนี้จะปรากฏก็ต่อเมื่อยูสเซอร์เกิดทำอะไรผิดพลาดที่ไม่ตรงตามเงื่อนไขตามที่ระบบต้องการ เช่น การกรอกข้อมูลไม่ครบ การใช้อีเมลลงทะเบียนซ้ำ เป็นต้น หากเป็น UI ที่ออกแบบมาเป็นอย่างดี ชั้นสถานะนี้จะพบเจอได้น้อยมาก แต่ในปฏิบัติทำได้ยากนะ 555 ก็ขอให้เรานึกถึงชั้นการออกแบบ UI ทั้ง 5 ชั้นนี้ให้ขึ้นใจนะครับเวลาออกแบบ UI ใดๆ ก็ตาม (บอกอีกครั้ง ไม่จำเป็นต้องใช้ทุกชั้นในการออกแบบ UI หนึ่งๆ นะ) มันจะช่วยเก็บรายละเอียด UI ของเราให้ใช้งานได้ลื่นไหล สร้างความประทับให้แก่ยูสเซอร์ และยกระดับมาตรฐานการออกแบบของเราขึ้นสูงไปอีกระดับแน่นอน รับรอง ╭( ・ㅂ・)و ̑̑ อ้างอิง http://scotthurff.com/posts/why-your-user-interface-is-awkward-youre-ignoring-the-ui-stack