UI Blogazine

ทฤษฎี UI

รู้จักชั้นเชิง UI (UI Stack)

ui-stack-featured

เราจะไม่สามารถออกแบบ UI ที่ดีได้เลย หากไม่รู้จักองค์ประกอบย่อยของ UI ที่หล่อรวมกันเพื่อตอบสนองการใช้งานของยูสเซอร์ให้สำเร็จลุล่วง ในมุมมองที่ตาเรามองเห็น เราคงเข้าใจว่าองค์ประกอบย่อยของ UI ได้แก่ รูปร่าง, สีสัน, รูปภาพ และตัวอักษร แต่ในอีกด้านหนึ่ง เราสามารถมอง UI ในแง่ของสถานะ ณ ช่วงเวลาหนึ่งได้ด้วยครับ ซึ่งสามารถแจกแจงออกเป็นชั้นๆ ต่อๆ กัน จนเกิดเป็น UI ในภาพรวมในที่สุด ครั้งนี้เราจึงมาทำความรู้จัก ชั้น(เชิง)ของ UI หรือ UI Stack กันครับ

ui-stack

แผนภาพแสดงชั้นสถานะของ UI ทั้ง 5 ชั้น

การจะผลิต UI ให้ออกมาใช้งานได้อย่างมีประสิทธิภาพ เราจำเป็นต้องคำนึงถึงว่า UI แต่ละหน้าสามารถมีได้ด้วยกัน 5 ชั้นสถานะ (แต่ไม่จำเป็นต้องมีทุกชั้น) คือ

  1. ชั้นสถานะว่าง (Blank State)
  2. ชั้นสถานะสมบูรณ์พร้อม (Ideal State)
  3. ชั้นสถานะก้ำกึ่ง (Partial State)
  4. ชั้นสถานะกำลังโหลด (Loading State)
  5. ชั้นสถานะผิดพลาด (Error State)

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

wishy

app Wishy สำหรับใช้สร้างความปรารถนา, บันทึกและแบ่งปัน

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

1. ชั้นสถานะว่าง (Blank State)

ui-stack-02

สถานะว่างของ app เมื่อไม่มีรายการความปรารถนา

เริ่มต้นการใช้งาน app Wishy ก่อนอื่นต้องให้เราเพิ่มความปรารถนาเข้าไปก่อน แต่ครั้นพอเปิด app มาเจอสถานะว่าง (Blank state) เหมือนอย่างภาพด้านบน คงจะไม่สร้างความประทับใจแรกพบเป็นแน่ เหตุเพราะอาจทำให้ยูสเซอร์เข้าใจผิดว่า app เกิดทำงานผิดพลาดอะไรบางอย่างหรือเปล่า ดังนั้นแล้วหาก UI ที่ต้องรอการสร้างจากยูสเซอร์ เราก็ควรชักจูงยูสเซอร์ให้สร้างมันขึ้นมาด้วยการใส่ UI อะไรสักอย่างลงไปในสถานะว่างนั้นซะ

ui-stack-03

สถานะว่างของ app ที่นำเสนอช่องทางการสร้างรายการ

แทนที่จะปล่อยให้หน้าว่าง ผมออกแบบ UI ให้มีข้อความกระตุ้นความอยากรู้อยากเห็นของยูสเซอร์ พร้อมลิงค์ที่พร้อมให้ยูสเซอร์กดเพิ่มเริ่มต้นการสร้างความปรารถนาแรกขึ้นมา เท่านี้สถานะที่ว่างเปล่าก็ถูกเติมเต็มด้วยคำเชิญที่ยากจะปฏิเสธ

ui-stack-04

สถานะว่างของ app ที่นำเสนอช่องทางการสร้างรายการแบบกลมกลืน

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

ui-stack-05

ตัวเลือกเพิ่มรายการเพื่อลดความเป็นสถานะว่าง

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

2. ชั้นสถานะสมบูรณ์พร้อม (Ideal State)

ui-stack-09

ภาพสุดท้ายที่คาดหวังให้ยูสเซอร์ใช้งานได้ถึงจุดนี้

สถานะนี้จะตรงข้ามกับสถานะว่างโดยสิ้นเชิง เพราะเป็นภาพ UI สุดท้ายที่เราอยากนำยูสเซอร์ให้มาถึงจุดนี้ อย่างจุดสูงสุดที่คาดหวังไว้ของ app Wishy นี้ก็คือ การที่ยูสเซอร์ทำความปรารถนาที่ตัวเองเพิ่มเข้าไปแล้วให้เป็นจริงและแชร์ให้เพื่อนๆ คนอื่นได้ทราบ หรือจุดคาดหวังของ Twitter ก็คือ เรา follow คนกลุ่มหนึ่ง, มีคน follow เรากลุ่มหนึ่ง, เรา tweet ข้อความไป/กลับ, ใส่รูป profile

3. ชั้นสถานะก้ำกึ่ง (Partial State)

ui-stack-11

ยูสเซอร์มีการเพิ่มความปรารถนาเข้าไปบางส่วน แต่ยังไม่ถึงจุดคาดหวังของผู้ออกแบบ

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

ui-stack-06

การเพิ่มแรงกระตุ้นด้วยวิธีล่อให้เหมือนเกม

ดังนั้นเราจึงต้องสร้าง UI ที่ช่วยนำทางยูสเซอร์ไปให้ถึงฝั่งที่หมายไว้ ไม่ว่าจะเป็นการหลอกล่อให้เหมือนเล่นเกม (Gamification) ที่เมื่อทำภารกิจสำเร็จ ก็จะได้แต้มหรือไอเท็มไปอวดประชาชีโลกออนไลน์

ui-stack-16

ตัวช่วยบอกระดับความสำเร็จของ UI

หรือจะทำเป็นระดับบอกความสำเร็จเป็น % เพื่อแจ้งให้ยูสเซอร์รู้ว่า นี่ยังไม่ใช่สถานะสมบูรณ์ของความปรารถนานี้นะ

4. ชั้นสถานะกำลังโหลด (Loading State)

ui-stack-13

แสดงไอคอนโหลดเพื่อสื่อให้ยูสเซอร์รู้ว่าระบบกำลังเรียกข้อมูล

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

ui-stack-14

การใช้ข้อความหรือกราฟิคที่มีประโยชน์ขณะที่ยูสเซอร์กำลังรอการทำงานของระบบ

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

ui-stack-12

การแสดงโครงสร้างของหน้าก่อนที่จะมีการโหลดข้อมูลอื่นๆ ตามมา

และด้วยเทคโนโลยีสมัยใหม่ เราสามารถโหลดโครงสร้างหน้าของเว็บหรือ app มาแสดงผลก่อน แล้วค่อยโหลดข้อมูลที่ต้องร้องขอจาก server ตามมาทีหลังก็ได้

ui-stack-15

การแสดงผลที่แยกกับการทำงานเบื้องหลังของระบบ

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

5. ชั้นสถานะผิดพลาด (Error State)

ui-stack-10

การแจ้งเตือนเมื่อยูสเซอร์กดส่งฟอร์มโดยไม่กรอกข้อมูลให้ครบ

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

555

ก็ขอให้เรานึกถึงชั้นการออกแบบ UI ทั้ง 5 ชั้นนี้ให้ขึ้นใจนะครับเวลาออกแบบ UI ใดๆ ก็ตาม (บอกอีกครั้ง ไม่จำเป็นต้องใช้ทุกชั้นในการออกแบบ UI หนึ่งๆ นะ) มันจะช่วยเก็บรายละเอียด UI  ของเราให้ใช้งานได้ลื่นไหล สร้างความประทับให้แก่ยูสเซอร์ และยกระดับมาตรฐานการออกแบบของเราขึ้นสูงไปอีกระดับแน่นอน รับรอง  ╭( ・ㅂ・)و ̑̑

 

อ้างอิง

http://scotthurff.com/posts/why-your-user-interface-is-awkward-youre-ignoring-the-ui-stack

Tagged , ,

About uiblogaziner

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

View all posts by uiblogaziner →

5 thoughts on “รู้จักชั้นเชิง UI (UI Stack)

  1. paul

    ชอบครับ แต่พิมพ์ผิดเยอะอยู่เหมือนกันนะครับ
    เช่น “อัพเดพ” “เทคโนโยลี” “ประทับ__” เป็นต้น

    Reply
    • uiblogaziner Post author

      @paul ขอบคุณมากครับคุณ Paul ต้องขออภัยในความผิดพลาดด้วยครับ แก้คำตามที่แนะนำเรียบร้อย แต่ผมหาคำว่า “อัพเดพ” ไม่เจอน่ะครับ ถ้าไม่เป็นการรบกวน อาจช่วยบอกชื่อบทความให้ทราบหน่อยนะครับ ^^!

      Reply
    • uiblogaziner Post author

      @Taweesak ขอบคุณมากครับสำหรับคำชมที่เป็นเสมือนค่าจ้างและกำลังใจสำหรับคนเขียนบทความครับ(*´▽`*)

      Reply
  2. อายุวัฑ

    พอเข้าใจ แต่ยังเอาไปใช้ไม่ได้แสดงว่ายังไม่แจ่มแจ้ง
    คงต้องศึกษาตัวอย่างเยอะๆต่อไป

    Reply

Leave a Reply

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

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