8 วิธีออกแบบ UI ให้รองรับสถานการณ์ที่ไม่คาดคิด (unexpected state)

goodownday

ระหว่างทำงานออกแบบ UI นักออกแบบอาจจะเคยเจอคำถามเหล่านี้จากผู้ใช้งานกันบ้าง อาทิเช่น เกิดอะไรขึ้น? ทำไมมันไม่ทำงานล่ะ? ไม่ชอบใช้งานแบบนี้เลย

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

และสิ่งเหล่านี้ เราเรียกรวมกันว่าเป็น unexpected state

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

สถานการณ์ Unexpected state แบบต่าง ๆ

1. Slips นิ้วเบียด นิ้วลื่น

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

อาทิเช่น อยากจะพิมพ์ “ขอบคุณครับ” แต่ก็ดันพลาดไปพิมพ์คำว่า “ชอบคุณครับ” ซึ่งสถานการณ์พิมพ์ผิด 1 ตัวอักษรที่อยู่ใกล้กันบนคีย์บอร์ดนี้ เราจะเรียกว่า SLIP (มือลื่น) ที่สำคัญคือคุณไม่สามารถลดการเกิด “การกดพลาด” หรือ “อาการนิ้วเบียด” นี้ได้ แต่ปัจจุบันก็มีระบบจากตัว OS เองที่แนะนำคำที่ใช้บ่อยขึ้นมาบนระบบ หรือระบบ AI ในการคาดเดาตัวหนังสือที่จะพิมพ์ถัดไป

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

2. Mistakes ข้อผิดพลาด

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

เช่น ช่องกรอกฟอร์มจะใส่ขีดกลางให้อัตโนมัติ เมื่อกรอกเลขบัตรเครดิต, ช่องกรอกเลขไปรษณีย์ประเทศไทย จะบังคับให้ใส่ตัวเลขเท่านั้น ห้ามใส่ตัวหนังสือ, ช่องกรอกเบอร์โทรศัพท์ประเทศไทย จะใส่ขีดกลางให้อัตโนมัติ เป็นต้น

(หมายเหตุ: Mental model คือ สิ่งที่ User ได้เรียนรู้และมีประสบการณ์ผ่านมาในอดีต หรือสิ่งที่ User คิดว่าถ้าเขาทำแบบนี้เขาจะไปสู่เป้าหมาย goal ของเขาได้)

3. User Interface Problems ปัญหาของ UI

บางครั้งการเกิด Error นั้นจะเกิดจากตัวของ UI เอง อาทิเช่น ถ้าหาก User ตั้งใจที่จะกดตัวหนังสือที่ดูเหมือนลิงค์ แต่กดไปไหนไม่ได้, อยากจะกดปุ่มเมนู แต่ปุ่มเล็กเกินไป (Accessibility), หรือกำลังมองหาสินค้าที่อยู่ใน navigation แต่ว่าเข้าไปแล้วไม่เจออะไรเลย

สิ่งเหล่านี้เป็นปัญหาที่จะต้องร่วมกันแก้ไขกับผู้ที่ทำงานด้าน UX เพื่อนำทางผู้ใช้งานให้ไปสู่เป้าหมายได้อย่างราบรื่น เพื่อช่วยลดข้อผิดพลาดที่เกิดจาก UI ระหว่างการใช้งาน ลดการเกิด bounce rate และยังจะช่วยให้ user อยู่กับเราได้นานมากยิ่งขึ้นด้วย

4. บางทีเราอาจจะหาข้อผิดพลาดไม่เจอบน Usability testing

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

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


8 วิธีออกแบบ UI ให้รองรับกับ ​Unexpected State

1. Dark Mode กำลังมาแรง อย่าลืมเช็คเรื่องของสี

นับวันจะยิ่งมีผู้ใช้ที่เปลี่ยนไปใช้ดาร์กโหมดในการท่องเว็บและอีเมลเพิ่มขึ้นทุกที จากสถิติแล้วผู้ใช้ Android จะเปลี่ยนโหมดจาก White mode ไปใช้ Dark mode มากถึง 81% เลย

ส่วนผู้ใช้ Apple iOS ก็หันมาใช้งาน Dark mode เพิ่มขึ้นโดย 37% เพราะฉะนั้นการออกแบบจึงต้องให้ความสำคัญกับดาร์กโหมดให้มากขึ้น โดยสร้างปุ่มสลับโหมด ซึ่งจะใช้ CSS และ JavaScript

ทั้งนี้ทั้งนั้นการพัฒนาระบบก็แล้วแต่ความถนัดของนักออกแบบแต่ละท่านว่าจะพัฒนาในระบบแบบไหน ทั้งเรื่องของ Design system และโครงสร้างของ design

unexpected state light dark mode

เพียงแต่ต้องจำไว้ว่า ดาร์กโหมดนั้นไม่ใช่แค่การเปลี่ยนสีพื้นหลังให้มืดและเปลี่ยนสีตัวอักษรให้สว่างเท่านั้น คุณอาจต้องตั้งค่าชุดสีที่สอง หรือเปลี่ยนแปลงการออกแบบบางอย่างเพื่อให้รองรับดาร์กโหมดอย่างแม่นยำด้วย

และเรื่องของการเปลี่ยนโหมดจะมีส่วนของ Accessibility และเรื่องของ Shadow มาเกี่ยวข้องเป็นจำนวนมาก ดังนั้นอย่าลืมเช็คค่า contrast และขนาดของตัวหนังสือให้ดีระหว่างสองโหมดนี้ด้วย

โดยเพื่อน ๆ สามารถดูตัวอย่างการออกแบบและสลับโหมดไปมาได้จาก Google Material design หรือ iOS HIS Guidelines ได้เลยครับ


2. ใช้เบราเซอร์ที่เก่าเกินไป

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

unexpected state out of date browsers

วิธีการลดความเสี่ยงที่จะเจอเหตุไม่คาดคิดเหล่านี้ มีอยู่หลายวิธี เช่น

  • ใช้หรือเขียนโค้ดให้เรียบง่ายที่สุด
  • ใช้การรีเซ็ต CSS
  • เขียนโค้ดโดยรวม DOCTYPE เข้าไปด้วย
  • ตรวจสอบโค้ดให้ถูกต้อง
  • ทดสอบความเข้ากันได้ก่อนเสมอ
  • เทส เทสให้กับครบกับทุกขนาดหน้าจอและ browser

3. การทำ Backlink ไปที่ลิงค์เสีย หรือลิงค์ไม่มีคุณภาพ

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

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


4. เรื่องการแปลและการแก้ปัญหา

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

คุณอาจออกแบบและก็อปปี้เว็บไซต์โดยใช้คนแปลตรงๆ และตั้งค่าคนเข้าตามข้อมูลตำแหน่งทางภูมิศาสตร์ด้วยส่วนขยายที่ส่วนท้ายของ URL เช่น /th หรือ /en ก็ได้ หรือจะใช้ปลั๊กอิน/เครื่องมือที่ช่วยให้ผู้เยี่ยมชมสามารถสลับเป็นภาษาที่เหมาะสมก็ทำได้เช่นกัน ที่สำคัญคือ ผู้ออกแบบ UI ต้องทำให้ผู้เข้าเว็บมองเห็นเมนูแสดงภาษาได้ง่ายและชัดเจน

นอกจากนี้ยังมีเรื่องของการทำ UI ให้รองรับกับหลายภาษาซึ่งเป็นสิ่งที่เราเรียกว่า Internationalization นั่นเองครับ มันคือการทำ UI รองรับกับหลาย ๆ Character ตามภาษาต่าง ๆ หากว่า Product ของเรานั้นเป็น product ที่จะใช้งานทั่วโลก ก็ต้องคำนึงถึงเรื่องนี้เป็นพิเศษด้วยนะครับ

ขั้นตอนนี้จะสามารถแก้ไขปัญหาได้ด้วยการมี UX Designer + UX Writer ของแต่ละภาษาที่เทพ ๆ รวมไปถึงการเทสบ่อย ๆ เพื่อดูว่า UI ของเราจะมีปัญหาและกำกวมตรงส่วนไหนบ้างครับ


5. เน็ตช้าก็ก่อปัญหาได้

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

และนี่คือตัวอย่างบางส่วนที่ช่วยลดปัญหาที่อาจเกิดขึ้นได้ 

  • บีบอัดและเขียนโค้ดให้สั้นที่สุดเท่าที่จะทำได้
  • ใส่ alt สำหรับรูปภาพและวิดีโอเพื่ออธิบายว่าเป็นภาพหรือคลิปอะไรในกรณีมันโหลดไม่ขึ้น
  • ใช้แคชหรือโฮสติ้งที่ตั้งค่าเพิ่มประสิทธิภาพมาให้แล้ว
  • ลดการ redirect ให้เหลือเฉพาะที่จำเป็น
  • อะซิงโครนัสและดีเลย์การโหลด CSS และ JavaScript
  • ลบปลั๊กอินที่ไม่ได้ใช้ออกไปให้หมด

6. โลเกชั่นชวนสับสน

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

unexpected state location confusion

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


7. การเดินทางของผู้ใช้งาน (User Journey)

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

เราอาจมองเห็นได้จากการสังเกตดูเส้นทางผู้เข้าเยี่ยมชมใน Google Analytics (หรือระบบวิเคราะห์อื่น ๆ) การที่เราปรับ call to action ให้แตกต่างออกไป หรือแก้ไขให้ผู้เข้าเยี่ยมชมมีจำนวนขั้นตอนและการคลิกน้อยลงเพื่อไปสู่จุดหมายให้เร็วที่สุด รวมทั้งหาทางให้พวกเขาเยี่ยมชมเว็บไซต์และแอพในแบบที่เราต้องการได้ ทำให้ user ประสบความสำเร็จกับเป้าหมายที่วางไว้นั้นเป็นความรับผิดของนักออกแบบ UI ทุกคนครับ

ดังนั้นอย่าลืม Test บ่อย ๆ นะครับ ไม่ว่าจะทั้ง Qualitative หรือ Quantitative เองก็ตาม ทุกการวัดผล มีคุณค่าเสมอ


8. ป้องกันปัญหา Error จาก UI

การป้องกันปัญหาข้อผิดพลาดที่เกิดจาก UI ได้นั้น จะต้องอาศัยประสบการณ์จากนักออกแบบ User interface ที่มีความละเอียด และใส่ใจกับจุดเล็ก ๆ อาทิเช่น

1. การทำ Onboarding tutorial ให้กับผู้ใช้งานใหม่ นำทาง user ที่มี mental model แบบเก่า ๆ ให้มารู้จักกับเราให้มากขึ้น

2. ทำ limitation ให้ชัดเจนหากมีข้อจำกัดของระบบ เช่น มีตัวหนังสือสีแดงขึ้นว่า “-15” เมื่อพิมพ์ทวีตยาวเกิน 280 characters

3. สร้างทางเลือกหรือคำแนะนำให้กับผู้ใช้งานหากเกิดข้อผิดพลาด

4. ใช้คำศัพท์ที่เข้าใจง่ายในการอธิบายเพื่อสื่อสารกับผู้ใช้งาน user ที่ตรงกับกลุ่มเป้าหมายของเรา อย่าใช้คำ Jargon หรือคำกำกวมทางการ เฉพาะด้านที่ไม่ตรงกับผู้ใช้งานของเรา

5. ออกแบบให้ผ่าน Accessibility มีความสม่ำเสมอ consistency ทั้งระบบ เพื่อช่วยลดความสับสนในการใช้งาน

6. ใช้ Pattern ที่จดจำได้ง่าย เพื่อเป็นการนำทาง เช่นการใช้ breadcrumbs, การวางตัวหนังสือให้อ่านง่าย ไม่พิมพ์ยาวจนเกินไปในแต่ paragraph

7. อย่าใช้ภาพที่ไม่สื่อกับเนื้อหาที่ต้องการนำเสนอ เช่น ไอค่อนที่ดูกำกวม

8. สำหรับคนที่ทำ UI อย่างละเอียด ลองทำ Checklist ของตัวเองขึ้นมาดู เพื่อใช้ในการตรวจสอบก่อนนำส่งมอบงาน และสามารถนำไปใช้งานต่อกับ Design system ได้
เช่น Blank state, Error state, Accessibility, Wording, Design system และอื่น ๆ ดูได้จากตัวอย่างภาพของ Spectrum design system จาก Adobe ด้านล่างนี้

design checklist from adobe
design checklist from spectrum design system

9. เตรียมการเขียน Microcopy, Wording, Content สำหรับการแต่ละ Error type เช่น Permissions issue, Systems issue, Configuration required, Action not supported

โดยในฝั่งของ UI บางครั้งก็จะมีเรื่องของ copy มาเกี่ยวข้องด้วยในหลาย ๆ ส่วน ดังนั้นอย่าลืมทำงานร่วมกันกับทั้งทีม เพื่อส่งมอบ Product ที่ดีเยี่ยมให้กับองค์กร และผู้ใช้งานครับ

นอกจากนี้ยังมีเรื่องให้เพื่อน ๆ ได้เช็คก่อนการส่งมอบอีกเพียบเลยนะครับ วันนี้ Designil ขอยกตัวอย่างไว้เพียงเท่านี้ก่อน เดี๋ยวเราจะกลับมาเขียนกันใหม่ในโอกาสหน้าครับ ^_^


บทสรุป

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

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

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

อ้างอิงจาก


และบทความนี้ก็จบแล้วนะครับ เป็นเนื้อหาที่ยาวมาก ๆ ถ้าใครอ่านมาถึงตรงนี้ และชอบเรื่องราวด้านของ UX UI ของเรา อย่าลืมติดตามบความอื่น ๆ ของเราได้ที่นี่นะครับ

ถ้าอ่านจบแล้ว เราขอแนะนำบทความนี้