หลักเกณฑ์การออกแบบ UX แบบออฟไลน์

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

คุณภาพของการเชื่อมต่อเครือข่ายอาจได้รับผลกระทบจากปัจจัยหลายประการดังต่อไปนี้

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

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

ตัดสินใจว่าจะแสดงข้อมูลใดแก่ผู้ใช้เมื่อการเชื่อมต่อเครือข่ายไม่ดี

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

หากต้องการทราบวิธีจัดการกับความล้มเหลวในการเชื่อมต่อ ให้ถามตัวเองด้วยคำถามสำคัญเกี่ยวกับ UX ต่อไปนี้

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

แจ้งให้ผู้ใช้ทราบถึงสถานะปัจจุบันและการเปลี่ยนสถานะ

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

ดูเหมือนว่าคุณจะมีการเชื่อมต่อเครือข่ายที่ไม่ดี ไม่ต้องกังวล ระบบจะส่งข้อความเมื่อ กู้คืนเครือข่ายแล้ว

แอปรับส่งข้อความอีโมจิ EmoJo จะแจ้งให้ผู้ใช้ทราบเมื่อมีการเปลี่ยนแปลงสถานะเกิดขึ้น
แจ้งให้ผู้ใช้ทราบอย่างชัดเจนเมื่อมีการเปลี่ยนแปลงสถานะโดยเร็วที่สุด
แอป I/O 2016 จะแจ้งให้ผู้ใช้ทราบเมื่อมีการเปลี่ยนแปลงสถานะ
แอป Google I/O ใช้ "ข้อความโทสต์" เพื่อแจ้งให้ผู้ใช้ทราบเมื่อออฟไลน์

แจ้งให้ผู้ใช้ทราบเมื่อการเชื่อมต่อเครือข่ายมีการปรับปรุงหรือได้รับการคืนค่า

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

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

ตัวอย่างหนึ่งคือ สถานะแพลตฟอร์ม Chrome ซึ่งจะโพสต์หมายเหตุถึงผู้ใช้เมื่อแอปได้รับการอัปเดต

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

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

แอป Material Money เป็นเวอร์ชันเก่า
อัตราแคชเงินวัตถุ...
อัปเดตเงินค่าวัตถุแล้ว
...และแจ้งเตือนผู้ใช้เมื่อแอปได้รับการอัปเดต

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

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

อัปเดต UI ให้สอดคล้องกับสถานะบริบทปัจจุบัน

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

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

ให้ความรู้ผู้ใช้เพื่อทำความเข้าใจว่าโมเดลออฟไลน์คืออะไร

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

มอบประสบการณ์การใช้งานแบบออฟไลน์โดยค่าเริ่มต้น

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

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

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

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

แจ้งให้ผู้ใช้ทราบเมื่อแอปพร้อมใช้งานแบบออฟไลน์

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

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

แอป I/O แบบออฟไลน์
แอป Google I/O 2016 ได้แจ้งผู้ใช้เมื่อ แอปพร้อมใช้งานแบบออฟไลน์...
เว็บไซต์สถานะ Chrome ออฟไลน์อยู่
...และเว็บไซต์สถานะแพลตฟอร์ม Chrome ซึ่งมีข้อมูลเกี่ยวกับพื้นที่เก็บข้อมูลที่มีการใช้พื้นที่เก็บข้อมูล

ทำให้ตัวเลือก "บันทึกไว้สำหรับออฟไลน์" ชัดเจนในอินเทอร์เฟซ

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

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

ชี้แจงสิ่งที่ใช้งานแบบออฟไลน์ได้

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

แสดงต้นทุนจริงของการกระทำ

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

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

ช่วยป้องกันการถูกแฮ็ก

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

ทำให้แชร์ประสบการณ์จากอุปกรณ์เครื่องหนึ่งไปยังอีกเครื่องหนึ่งได้

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

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

สร้างประสบการณ์การออกแบบที่ไม่แบ่งแยก

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

ใช้ภาษาที่เรียบง่ายและชัดเจน

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

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

ใช้อุปกรณ์ออกแบบหลากหลายเพื่อสร้างประสบการณ์ของผู้ใช้ที่เข้าถึงได้ง่าย

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

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

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

ใช้ไอคอนสื่อความหมาย

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

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

ตัวอย่างไอคอนต่างๆ ที่สื่อถึงออฟไลน์
ไอคอนบางส่วนที่อาจหมายความว่า "ออฟไลน์"

หากต้องการแรงบันดาลใจเพิ่มเติม โปรดดูชุดไอคอนของดีไซน์ Material

ใช้เลย์เอาต์โครงกระดูกและกลไกการแสดงความคิดเห็นอื่นๆ

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

ตัวอย่างเลย์เอาต์โครงกระดูก
เลย์เอาต์ตัวยึดตำแหน่งโครงกระดูกจะปรากฏขึ้นระหว่างการดาวน์โหลดบทความ...
ตัวอย่างบทความที่โหลด
...ซึ่งจะแทนที่ด้วยเนื้อหาจริงเมื่อการดาวน์โหลดเสร็จสิ้น

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

ไม่บล็อกเนื้อหา

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

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

การออกแบบเพื่อผู้ใช้อีกพันล้านคนในอนาคต

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

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

บทสรุป

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

เมื่อออกแบบการเชื่อมต่อเครือข่ายที่ไม่เสถียร โปรดคำนึงถึงหลักเกณฑ์ต่อไปนี้

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