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

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

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

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

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

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

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

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

เมื่อนึกถึงความสำเร็จหรือความล้มเหลวของการเชื่อมต่อเครือข่าย คุณต้องถามตัวเองด้วยคำถามสำคัญต่อไปนี้เกี่ยวกับ UX

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ออฟไลน์อาจมีความหมายหลายประการขึ้นอยู่กับบริบท เช่น การดาวน์โหลด การส่งออก การปักหมุด ฯลฯ หากต้องการแรงบันดาลใจเพิ่มเติม โปรดดู ชุดไอคอน Material Design

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

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

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

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

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

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

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

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

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

บทสรุป

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

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

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