หน้านี้จะมีหลักเกณฑ์ในการออกแบบเกี่ยวกับวิธีสร้างประสบการณ์ที่ยอดเยี่ยมสำหรับผู้ใช้บนเครือข่ายที่ช้าและเมื่อออฟไลน์
คุณภาพของการเชื่อมต่อเครือข่ายอาจได้รับผลกระทบจากปัจจัยหลายประการดังต่อไปนี้
- ความครอบคลุมของผู้ให้บริการเครือข่ายไม่ดี
- สภาพอากาศเลวร้าย
- ไฟฟ้าดับ
- การเข้าสู่ "พื้นที่อับสัญญาณ" ถาวร เช่น ในอาคารที่มีผนังที่บล็อกการเชื่อมต่อเครือข่าย
- การเข้าสู่ "พื้นที่อับสัญญาณ" ชั่วคราว เช่น เมื่อเดินทางบนรถไฟและลอดอุโมงค์
- การเชื่อมต่ออินเทอร์เน็ตแบบระบุเวลา เช่น การเชื่อมต่อในสนามบินหรือโรงแรม
- แนวทางปฏิบัติทางวัฒนธรรมที่ต้องมีการเข้าถึงอินเทอร์เน็ตที่จำกัด หรือไม่ต้องมีเลยในบางเวลาหรือบางวัน
เป้าหมายของคุณในฐานะนักพัฒนาแอปคือการมอบประสบการณ์การใช้งานที่ดีที่ช่วยลดผลกระทบจากการเปลี่ยนแปลงด้านการเชื่อมต่อ
ตัดสินใจว่าจะแสดงข้อมูลใดแก่ผู้ใช้เมื่อการเชื่อมต่อเครือข่ายไม่ดี
คำถามแรกที่ควรถามคือ ความสำเร็จและความล้มเหลวของการเชื่อมต่อเครือข่ายของแอปของคุณเป็นอย่างไร การเชื่อมต่อที่ประสบความสำเร็จคือประสบการณ์ออนไลน์ตามปกติของแอป ความล้มเหลวในการเชื่อมต่อรวมถึงลักษณะการทำงานของแอปทั้งแบบออฟไลน์และในเครือข่ายที่ล่าช้า
หากต้องการทราบวิธีจัดการกับความล้มเหลวในการเชื่อมต่อ ให้ถามตัวเองด้วยคำถามสำคัญเกี่ยวกับ UX ต่อไปนี้
- คุณจะรอนานเท่าใดกว่าจะทราบว่าการเชื่อมต่อสำเร็จหรือล้มเหลว
- คุณควรทำสิ่งใดขณะที่พิจารณาถึงความสำเร็จหรือความล้มเหลว
- คุณควรทำอย่างไรหากการเชื่อมต่อล้มเหลว
- คุณจะแจ้งให้ผู้ใช้ทราบถึงสิ่งที่เกิดขึ้นได้อย่างไร
แจ้งให้ผู้ใช้ทราบถึงสถานะปัจจุบันและการเปลี่ยนสถานะ
แจ้งผู้ใช้ทั้งสถานะของแอปพลิเคชันและการดำเนินการที่ผู้ใช้ยังทำได้เมื่อเครือข่ายล้มเหลว ตัวอย่างเช่น การแจ้งเตือนอาจระบุว่า
ดูเหมือนว่าคุณจะมีการเชื่อมต่อเครือข่ายที่ไม่ดี ไม่ต้องกังวล ระบบจะส่งข้อความเมื่อ กู้คืนเครือข่ายแล้ว
![แอปรับส่งข้อความอีโมจิ EmoJo จะแจ้งให้ผู้ใช้ทราบเมื่อมีการเปลี่ยนแปลงสถานะเกิดขึ้น](https://web.developers.google.cn/static/articles/offline-ux-design-guidelines/image/the-emojoy-emoji-messagin-70c51ef118a7.png?authuser=5&hl=th)
![แอป I/O 2016 จะแจ้งให้ผู้ใช้ทราบเมื่อมีการเปลี่ยนแปลงสถานะ](https://web.developers.google.cn/static/articles/offline-ux-design-guidelines/image/the-o-2016-app-informing-f644b43fd92eb.png?authuser=5&hl=th)
แจ้งให้ผู้ใช้ทราบเมื่อการเชื่อมต่อเครือข่ายมีการปรับปรุงหรือได้รับการคืนค่า
วิธีที่คุณบอกผู้ใช้ว่าการเชื่อมต่อเครือข่ายมีการปรับปรุงจะขึ้นอยู่กับแอปพลิเคชันของคุณ แอปที่ให้ความสำคัญกับข้อมูลปัจจุบัน เช่น สภาพอากาศหรือเครื่องติดตามตลาดหุ้น ควรอัปเดตอัตโนมัติและแจ้งให้ผู้ใช้ทราบโดยเร็วที่สุด
เราขอแนะนำให้คุณแจ้งให้ผู้ใช้ทราบว่าเว็บแอปได้อัปเดต "เบื้องหลัง" แล้วโดยใช้สัญลักษณ์ภาพ เช่น องค์ประกอบโทสต์ดีไซน์ Material ซึ่งจะเกี่ยวข้องกับการตรวจหาทั้งโปรแกรมทำงานของบริการและการอัปเดตเนื้อหาที่มีการจัดการ คุณดูตัวอย่างโค้ดของฟังก์ชันในที่ทำงานได้ที่นี่
ตัวอย่างหนึ่งคือ สถานะแพลตฟอร์ม Chrome ซึ่งจะโพสต์หมายเหตุถึงผู้ใช้เมื่อแอปได้รับการอัปเดต
![ตัวอย่างแอปสภาพอากาศ](https://web.developers.google.cn/static/articles/offline-ux-design-guidelines/image/an-example-weather-app-656cb36f8252f.png?authuser=5&hl=th)
![สถานะ Chrome จะใช้ข้อความโทสต์](https://web.developers.google.cn/static/articles/offline-ux-design-guidelines/image/chrome-status-uses-toast-0157248fc0b6d.png?authuser=5&hl=th)
แอปบางแอปสามารถแสดงเวลาล่าสุดที่อัปเดตได้ทุกเมื่อ ตัวอย่างเช่น จะมีประโยชน์อย่างยิ่ง สำหรับแอปแปลงสกุลเงิน
![แอป Material Money เป็นเวอร์ชันเก่า](https://web.developers.google.cn/static/articles/offline-ux-design-guidelines/image/the-material-money-app-be-d96547b7d1b9b.png?authuser=5&hl=th)
![อัปเดตเงินค่าวัตถุแล้ว](https://web.developers.google.cn/static/articles/offline-ux-design-guidelines/image/material-money-has-been-u-1b9996995200f.png?authuser=5&hl=th)
แอปข่าวสามารถแสดงการแจ้งเตือนแตะเพื่ออัปเดตแบบง่ายๆ เพื่อแจ้งผู้ใช้ใหม่เกี่ยวกับเนื้อหาใหม่ การอัปเดตบทความอัตโนมัติอาจทำให้ผู้ใช้เสียอ่าน
![Tailp ตัวอย่างแอปข่าวในสถานะปกติ](https://web.developers.google.cn/static/articles/offline-ux-design-guidelines/image/an-example-news-app-tail-33ace032d408.png?authuser=5&hl=th)
![ตัวอย่างแอปข่าว Taillet เมื่อพร้อมที่จะอัปเดต](https://web.developers.google.cn/static/articles/offline-ux-design-guidelines/image/example-news-app-tailpie-a423153089499.png?authuser=5&hl=th)
อัปเดต UI ให้สอดคล้องกับสถานะบริบทปัจจุบัน
องค์ประกอบ UI แต่ละรายการอาจมีบริบทและลักษณะการทำงานของตัวเองที่เปลี่ยนแปลงไปโดยขึ้นอยู่กับว่าต้องใช้การเชื่อมต่อที่สำเร็จหรือไม่ ตัวอย่างหนึ่งคือเว็บไซต์อีคอมเมิร์ซที่เรียกดูแบบออฟไลน์ได้ แต่ปิดใช้ราคาและปุ่ม "ซื้อ" จนกว่าจะกลับมาเชื่อมต่ออีกครั้ง
สถานะบริบทในรูปแบบอื่นๆ อาจรวมถึงข้อมูล ตัวอย่างเช่น แอปการเงินอย่าง Robinhood ใช้สีและกราฟิกในการบอกผู้ใช้เมื่อตลาดหุ้นเปิด อินเทอร์เฟซทั้งหมดจะเปลี่ยนเป็นสีขาวและเป็นสีเทาเมื่อตลาดปิด เมื่อมูลค่าของหุ้นเพิ่มขึ้นหรือลดลง วิดเจ็ตหุ้นแต่ละรายการจะเปลี่ยนเป็นสีเขียวหรือสีแดงตามสถานะ
ให้ความรู้ผู้ใช้เพื่อทำความเข้าใจว่าโมเดลออฟไลน์คืออะไร
ผู้ใช้ส่วนใหญ่คุ้นเคยกับการเชื่อมต่อเครือข่ายตลอดเวลา คุณต้องให้ความรู้ผู้ใช้เกี่ยวกับ การเปลี่ยนแปลงในแอปเมื่อไม่มีการเชื่อมต่อ แจ้งให้ผู้ใช้ทราบถึงตำแหน่งที่บันทึกข้อมูลขนาดใหญ่ และมอบการตั้งค่าเพื่อเปลี่ยนการทำงานเริ่มต้น ใช้องค์ประกอบการออกแบบ UI หลายอย่าง (เช่น ภาษาที่ให้ข้อมูล ไอคอน การแจ้งเตือน สี และภาพ) ร่วมกันเพื่อถ่ายทอดไอเดียเหล่านี้ แทนที่จะอาศัยตัวเลือกการออกแบบเพียงตัวเลือกเดียว เช่น ใช้ไอคอนเพียงอย่างเดียวในการเล่าเรื่อง
มอบประสบการณ์การใช้งานแบบออฟไลน์โดยค่าเริ่มต้น
หากแอปไม่จำเป็นต้องใช้อินเทอร์เน็ตมากนัก ให้แคชข้อมูลไว้โดยค่าเริ่มต้น ผู้ใช้อาจหงุดหงิดมากขึ้นหากเข้าถึงข้อมูลได้ด้วยการเชื่อมต่อเครือข่ายเท่านั้น
พยายามทำให้การใช้งานมีความเสถียรมากที่สุด การเชื่อมต่อที่ไม่เสถียร ทำให้แอปไม่น่าไว้วางใจ แอปที่ช่วยลดผลกระทบจากการล้มเหลวของเครือข่ายจะสร้างความประทับใจให้กับผู้ใช้
เว็บไซต์ข่าวจะได้รับประโยชน์จากการดาวน์โหลดอัตโนมัติและบันทึกข่าวล่าสุดโดยอัตโนมัติ ซึ่งอาจประหยัดข้อมูลด้วยการดาวน์โหลดเฉพาะข้อความเพื่อให้ผู้ใช้อ่านข่าวของวันนี้ได้โดยไม่ต้องเชื่อมต่ออินเทอร์เน็ต คุณสามารถปรับพฤติกรรมนี้ตามพฤติกรรมของผู้ใช้ได้โดยจัดลำดับความสำคัญของการดาวน์โหลดหมวดหมู่ข่าวที่ผู้ใช้ดูมากที่สุด
![Tailชิ้นใช้วิดเจ็ตการออกแบบแบบต่างๆ เพื่อบอกผู้ใช้ว่าพวกเขาออฟไลน์อยู่](https://web.developers.google.cn/static/articles/offline-ux-design-guidelines/image/tailpiece-informs-user-3cf8f64ad441c.png?authuser=5&hl=th)
![ส่วนปลายรถมีสัญญาณบอกสถานะซึ่งแสดงให้เห็นส่วนที่พร้อมสำหรับการใช้งานแบบออฟไลน์](https://web.developers.google.cn/static/articles/offline-ux-design-guidelines/image/tailpiece-has-visual-ind-e45dbae7b63c5.png?authuser=5&hl=th)
แจ้งให้ผู้ใช้ทราบเมื่อแอปพร้อมใช้งานแบบออฟไลน์
เมื่อโหลดเว็บแอปเป็นครั้งแรก เว็บแอปนั้นต้องระบุให้ผู้ใช้ทราบว่าพร้อมใช้งานแบบออฟไลน์หรือไม่ โดยใช้วิดเจ็ตที่ให้ความคิดเห็นสั้นๆ เกี่ยวกับการดำเนินการผ่านข้อความที่ด้านล่างของหน้าจอ เช่น เมื่อมีการซิงค์ส่วนหรือดาวน์โหลดไฟล์แล้ว
อย่าลืมดูว่าภาษาที่คุณใช้เหมาะกับผู้ชม และใช้วลีเดียวกันในทุกกรณี ผู้ชมที่ไม่ได้รู้ทางเทคนิคมักจะเข้าใจคำว่า "ออฟไลน์" ดังนั้นให้ใช้ภาษาตามการกระทำที่กลุ่มเป้าหมายเข้าถึงได้แทน
![แอป I/O แบบออฟไลน์](https://web.developers.google.cn/static/articles/offline-ux-design-guidelines/image/io-app-offline-e8851102c8a54.png?authuser=5&hl=th)
![เว็บไซต์สถานะ Chrome ออฟไลน์อยู่](https://web.developers.google.cn/static/articles/offline-ux-design-guidelines/image/chrome-status-site-is-off-aa745a23d2117.png?authuser=5&hl=th)
ทำให้ตัวเลือก "บันทึกไว้สำหรับออฟไลน์" ชัดเจนในอินเทอร์เฟซ
หากแอปพลิเคชันใช้อินเทอร์เน็ตมาก ตรวจสอบว่ามีสวิตช์หรือ PIN สำหรับเพิ่มรายการสำหรับใช้งานแบบออฟไลน์ ดาวน์โหลดไฟล์อัตโนมัติเฉพาะในกรณีที่ผู้ใช้ถามเกี่ยวกับลักษณะการทำงานนี้โดยเฉพาะผ่านเมนูการตั้งค่า ตรวจสอบว่าผู้ใช้มองเห็นการปักหมุดหรือ UI การดาวน์โหลดได้ชัดเจน และไม่มีองค์ประกอบ UI อื่นๆ ซ่อนอยู่
ตัวอย่างหนึ่งคือโปรแกรมเล่นเพลงที่ต้องใช้ไฟล์ขนาดใหญ่ ผู้ใช้ตระหนักถึงค่าใช้จ่ายด้านข้อมูลที่เกี่ยวข้อง แต่อาจต้องการใช้โปรแกรมเล่นแบบออฟไลน์ด้วย การดาวน์โหลดเพลงไว้ใช้ภายหลังจะกำหนดให้ผู้ใช้ต้องวางแผนล่วงหน้า ดังนั้นคุณอาจต้องการให้ข้อมูลผู้ใช้เกี่ยวกับเพลงดังกล่าวในระหว่างการเริ่มต้นใช้งาน
ชี้แจงสิ่งที่ใช้งานแบบออฟไลน์ได้
มีความชัดเจนในตัวเลือกที่คุณนำเสนอ คุณอาจต้องแสดงแท็บหรือการตั้งค่าสำหรับ "ไลบรารีออฟไลน์" หรือดัชนีเนื้อหาเพื่อให้ผู้ใช้ดูว่ามีอะไรเก็บไว้ในอุปกรณ์บ้างและต้องบันทึกอะไรบ้าง การตั้งค่าต้องกระชับและชัดเจนเกี่ยวกับตำแหน่งที่เก็บข้อมูลและบุคคลที่เข้าถึงข้อมูลได้
แสดงต้นทุนจริงของการกระทำ
ผู้ใช้จำนวนมากสามารถ "ดาวน์โหลด" ได้เทียบเท่ากับความสามารถในการทำงานแบบออฟไลน์ ผู้ใช้ในประเทศที่การเชื่อมต่อเครือข่ายล้มเหลวเป็นประจำหรือไม่พร้อมใช้งาน มักจะแชร์เนื้อหากับผู้ใช้คนอื่นๆ หรือบันทึกเนื้อหาไว้ใช้งานแบบออฟไลน์เมื่อมีการเชื่อมต่อ
บางครั้งผู้ใช้แพ็กเกจอินเทอร์เน็ตหลีกเลี่ยงการดาวน์โหลดไฟล์ขนาดใหญ่เพราะกลัวค่าใช้จ่าย คุณจึงอาจต้องแสดงค่าใช้จ่ายที่เกี่ยวข้องเพื่อให้ผู้ใช้เปรียบเทียบไฟล์หรืองานที่เฉพาะเจาะจงได้ ตัวอย่างเช่น แอปเพลงที่กล่าวถึงข้างต้นสามารถตรวจจับได้ว่าผู้ใช้ใช้แพ็กเกจอินเทอร์เน็ตหรือไม่ และแสดงขนาดไฟล์เพื่อให้ผู้ใช้เห็นค่าใช้จ่ายของไฟล์
ช่วยป้องกันการถูกแฮ็ก
ผู้ใช้มักแฮ็กประสบการณ์โดยที่ไม่รู้ว่ากำลังถูกทำอยู่ ตัวอย่างเช่น ก่อนที่จะมีเว็บแอปสำหรับแชร์ไฟล์ในระบบคลาวด์ ผู้ใช้มักบันทึกไฟล์ขนาดใหญ่และแนบไฟล์ไปกับอีเมลเพื่อให้แก้ไขไฟล์เหล่านั้นจากอุปกรณ์อื่นต่อไปได้ UI ที่ดีจะช่วยแก้ปัญหาที่ผู้ใช้พยายามแก้ไขโดยไม่เข้าไปเกี่ยวข้องกับการถูกแฮ็ก เช่น มอบวิธีแชร์ไฟล์ขนาดใหญ่ในอุปกรณ์ต่างๆ แทนที่จะทำให้การแนบไฟล์ขนาดใหญ่ไปกับอีเมลใช้ได้ง่ายขึ้น
ทำให้แชร์ประสบการณ์จากอุปกรณ์เครื่องหนึ่งไปยังอีกเครื่องหนึ่งได้
เมื่อสร้างเครือข่ายที่ไม่สม่ำเสมอ ให้ลองซิงค์ทันทีที่การเชื่อมต่อดีขึ้น เพื่อให้สามารถถ่ายโอนประสบการณ์ได้ ตัวอย่างเช่น สมมติว่าแอปท่องเที่ยว ขาดการเชื่อมต่อเครือข่ายระหว่างที่จอง เมื่อการเชื่อมต่อกลับมาเหมือนเดิม แอปจะซิงค์กับบัญชีของผู้ใช้ ซึ่งทำให้ผู้ใช้ทำการจองบนอุปกรณ์เดสก์ท็อปต่อไปได้และทำให้ผู้ใช้ได้รับประสบการณ์การใช้งานที่ราบรื่น
บอกให้ผู้ใช้ทราบถึงสถานะข้อมูล เช่น คุณจะแสดงให้เห็นว่า แอปซิงค์แล้วหรือไม่ ให้ความรู้หากเป็นไปได้ แต่พยายามอย่าสื่อข้อความมากเกินไป
สร้างประสบการณ์การออกแบบที่ไม่แบ่งแยก
เมื่อออกแบบ UX ให้พยายามสร้างความไม่แบ่งแยกโดยจัดหาอุปกรณ์การออกแบบที่สื่อความหมาย ภาษาที่เรียบง่าย ระบบการตีความสัญลักษณ์มาตรฐาน และภาพที่สื่อความหมาย ซึ่งนำทางผู้ใช้ให้ดำเนินการหรือทำงานให้เสร็จสิ้นโดยไม่ขัดขวางการใช้งาน
ใช้ภาษาที่เรียบง่ายและชัดเจน
UX ที่ดีไม่ใช่แค่การออกแบบอินเทอร์เฟซ ซึ่งรวมถึงเส้นทางที่ผู้ใช้ใช้ผ่านแอป และทุกอย่างที่พวกเขาต้องเจอตลอดเส้นทาง รวมถึงภาษาที่แอปใช้เพื่ออธิบายเส้นทางนั้น เมื่ออธิบายคอมโพเนนต์ UI หรือสถานะของแอป ให้หลีกเลี่ยงคำศัพท์เฉพาะทางเทคนิค คำว่า "ออฟไลน์" มักไม่ชัดเจน พอที่จะบอกผู้ใช้ว่าแอปกำลังทำอะไร
![ตัวอย่างที่ไม่ดีคือไอคอนโปรแกรมทำงานของบริการ](https://web.developers.google.cn/static/articles/offline-ux-design-guidelines/image/a-service-worker-icon-is-9ab93716e75ef.png?authuser=5&hl=th)
![ตัวอย่างที่ดีคือไอคอนดาวน์โหลด](https://web.developers.google.cn/static/articles/offline-ux-design-guidelines/image/a-download-icon-is-good-53eec1dd7a257.png?authuser=5&hl=th)
ใช้อุปกรณ์ออกแบบหลากหลายเพื่อสร้างประสบการณ์ของผู้ใช้ที่เข้าถึงได้ง่าย
ใช้ภาษา สี และภาพองค์ประกอบเพื่อแสดงสถานะหรือการเปลี่ยนสถานะ การใช้เพียงสีเพื่อแสดงสถานะอาจทำให้ผู้ใช้สังเกตเห็นได้ยาก หรือแม้กระทั่งผู้ใช้ที่มีความพิการทางสายตาก็ไม่สามารถเข้าถึงได้เลย นอกจากนี้ เนื่องจากการออกแบบเว็บมีแนวโน้มที่จะใช้สีเทาสำหรับองค์ประกอบที่ปิดใช้อยู่ การใช้ UI ที่เป็นสีเทาเพื่อแสดงว่าแอปออฟไลน์อยู่อาจทำให้เกิดความสับสนว่าแอปทำอะไรได้บ้างขณะที่ออฟไลน์ โดยเฉพาะอย่างยิ่งหากคุณใช้เพียงสีเพื่อแสดงสถานะ
เพื่อป้องกันไม่ให้เกิดความเข้าใจผิด แสดงแอปให้ผู้ใช้ทราบได้หลายวิธี เช่น ระบุสี ป้ายกำกับ และคอมโพเนนต์ UI
![ตัวอย่างที่ดีที่ใช้สีและข้อความเพื่อแสดงข้อผิดพลาด](https://web.developers.google.cn/static/articles/offline-ux-design-guidelines/image/a-example-uses-color-t-d090f90d2476a.png?authuser=5&hl=th)
![ตัวอย่างที่ไม่ดี
เกี่ยวกับการใช้สีเท่านั้น](https://web.developers.google.cn/static/articles/offline-ux-design-guidelines/image/a-bad-example-using-colo-8e9dd82778ffc.png?authuser=5&hl=th)
ใช้ไอคอนสื่อความหมาย
อย่าลืมใช้ป้ายกำกับข้อความที่มีความหมายควบคู่กับไอคอน ไอคอนเพียงอย่างเดียวอาจชวนให้สับสน โดยเฉพาะเพราะแนวคิด "ออฟไลน์" บนเว็บนั้นค่อนข้างใหม่ กรณีอื่นๆ ที่ทำให้เกิดความสับสน เช่น การใช้ฟลอปปีดิสก์เพื่อแสดงถึงการ "บันทึก" ซึ่งอาจมีความหมายสำหรับผู้ใช้อายุน้อยที่ไม่เคยเห็นฟลอปปีดิสก์หรือไอคอนเมนู "แฮมเบอร์เกอร์"
เมื่อเปิดตัวไอคอนแบบออฟไลน์ ให้พยายามใช้ภาพที่สอดคล้องกับมาตรฐานอุตสาหกรรม หากมีอยู่ รวมถึงระบุป้ายกำกับข้อความและคำอธิบายด้วย ตัวอย่างเช่น คุณสามารถใช้ไอคอนดาวน์โหลดที่หมายถึงการบันทึกสำหรับออฟไลน์ ซึ่งเป็นไอคอนซิงค์สำหรับการทำงานที่เกี่ยวข้องกับการซิงค์ โปรดระมัดระวังเมื่อใช้ไอคอนเพื่อแสดงสถานะที่อาจตีความได้ว่าเป็นการบันทึกหรือการดาวน์โหลด
![ตัวอย่างไอคอนต่างๆ ที่สื่อถึงออฟไลน์](https://web.developers.google.cn/static/articles/offline-ux-design-guidelines/image/various-icon-examples-co-a2e7adbcf4246.png?authuser=5&hl=th)
หากต้องการแรงบันดาลใจเพิ่มเติม โปรดดูชุดไอคอนของดีไซน์ Material
ใช้เลย์เอาต์โครงกระดูกและกลไกการแสดงความคิดเห็นอื่นๆ
ขณะที่แอปโหลดเนื้อหา โปรดแสดงให้ผู้ใช้เห็นว่าแอปกำลังโหลดอยู่เพื่อไม่ให้ผู้ใช้คิดว่าแอปเสียหาย วิธีหนึ่งคือการใช้เลย์เอาต์ของ Skeleton ซึ่งเป็นเวอร์ชันไวร์เฟรมของแอปที่แสดงขณะที่เนื้อหากำลังโหลด นอกจากนี้ ให้พิจารณาใช้ UI ตัวโหลดล่วงหน้าที่มีป้ายกำกับข้อความที่บอกผู้ใช้ว่าแอปกำลังโหลด หรือใช้ภาพเคลื่อนไหวที่กะพริบเบาๆ สำหรับโครงสายไฟเพื่อให้รู้สึกว่าแอปกำลังโหลดอยู่ วิธีนี้จะช่วยให้ผู้ใช้มั่นใจได้ว่ามีบางอย่างเกิดขึ้นและช่วยป้องกันการส่งซ้ำหรือการรีเฟรชโดยไม่จำเป็น
![ตัวอย่างเลย์เอาต์โครงกระดูก](https://web.developers.google.cn/static/articles/offline-ux-design-guidelines/image/a-skeleton-layout-example-be82e48f16f75.png?authuser=5&hl=th)
![ตัวอย่างบทความที่โหลด](https://web.developers.google.cn/static/articles/offline-ux-design-guidelines/image/a-loaded-article-example-daa80c34d8194.png?authuser=5&hl=th)
แสดงสถานะของการดำเนินการด้วยการแสดงความคิดเห็น ตัวอย่างเช่น ถ้าผู้ใช้แก้ไขเอกสารแบบออฟไลน์ ให้ลองเปลี่ยนการออกแบบความคิดเห็นเพื่อให้แตกต่างจากตอนที่ออนไลน์อย่างชัดเจน แต่ยังคงแสดงว่าไฟล์ "บันทึกแล้ว" และจะซิงค์เมื่อมีการเชื่อมต่อเครือข่าย วิธีนี้จะช่วยให้ผู้ใช้ทราบถึงวิธีการทำงานของแอปและให้ความมั่นใจว่าผู้ใช้จัดเก็บงานหรือการดำเนินการแล้ว ซึ่งจะช่วยให้ผู้ใช้มั่นใจในการใช้งานแอปพลิเคชันของคุณได้มากขึ้น
ไม่บล็อกเนื้อหา
ในบางแอป ผู้ใช้อาจเรียกใช้การดำเนินการ เช่น การสร้างเอกสารใหม่ แอปบางแอปพยายามเชื่อมต่อกับเซิร์ฟเวอร์เพื่อซิงค์เอกสารใหม่ และเพื่อแสดงกล่องโต้ตอบโมดัลการโหลดที่รบกวนซึ่งครอบคลุมทั้งหน้าจอ ซึ่งอาจได้ผลหากผู้ใช้มีการเชื่อมต่อเครือข่ายที่เสถียร แต่ถ้าเครือข่ายไม่เสถียร ผู้ใช้จะไม่สามารถออกจากการดำเนินการได้ ดังนั้น UI จะบล็อกไม่ให้ผู้ใช้ดำเนินการอื่นๆ
หลีกเลี่ยงคำขอเครือข่ายที่บล็อกเนื้อหา ให้ผู้ใช้เรียกดูแอปของคุณต่อไป และจัดคิวงานที่จะทำและซิงค์เมื่อการเชื่อมต่อดีขึ้น
การออกแบบเพื่อผู้ใช้อีกพันล้านคนในอนาคต
ในหลายภูมิภาค อุปกรณ์ระดับล่างเป็นอุปกรณ์ทั่วไป การเชื่อมต่อไม่น่าเชื่อถือ และสำหรับผู้ใช้จำนวนมาก อินเทอร์เน็ตก็มีราคาแพงมาก ได้รับความไว้วางใจจากผู้ใช้ด้วย ความโปร่งใสและประหยัดค่าใช้จ่าย ลองหาวิธีช่วยเหลือผู้ใช้ ที่การเชื่อมต่อไม่ค่อยดี และลดความซับซ้อนของอินเทอร์เฟซ เพื่อให้ทำงานได้เร็วขึ้น พยายามถามผู้ใช้เสมอ ก่อนดาวน์โหลดเนื้อหาจำนวนมาก
เสนอตัวเลือกแบนด์วิดท์ต่ำสำหรับผู้ใช้การเชื่อมต่อที่ล่าช้า จัดให้มีเนื้อหาขนาดเล็กกว่าเมื่อมีการเชื่อมต่อเครือข่ายที่ช้ากว่า หรือเสนอตัวเลือกในการเลือกเนื้อหาคุณภาพสูงหรือต่ำ
บทสรุป
การศึกษาเป็นกุญแจสำคัญของ UX แบบออฟไลน์เนื่องจากผู้ใช้ไม่คุ้นเคยกับการใช้งาน ในการเรียนรู้ ให้พยายามสร้างความเชื่อมโยงกับแนวคิดที่คุ้นเคย เช่น อธิบายว่าการดาวน์โหลดไว้ใช้ในภายหลังนั้นเหมือนกับการทำข้อมูลเป็นแบบออฟไลน์
เมื่อออกแบบการเชื่อมต่อเครือข่ายที่ไม่เสถียร โปรดคำนึงถึงหลักเกณฑ์ต่อไปนี้
- การออกแบบเพื่อความสำเร็จ ความล้มเหลว และความไม่เสถียรของการเชื่อมต่อเครือข่าย
- อินเทอร์เน็ตอาจมีค่าใช้จ่ายสูง ดังนั้น โปรดคำนึงถึงผู้ใช้
- สำหรับผู้ใช้ส่วนใหญ่ทั่วโลก สภาพแวดล้อมของเทคโนโลยีนั้นแทบจะไม่ต้องใช้อุปกรณ์เคลื่อนที่เพียงอย่างเดียวเลย
- อุปกรณ์ระดับล่างเป็นอุปกรณ์ทั่วไปที่มีพื้นที่เก็บข้อมูล หน่วยความจำ และความสามารถในการประมวลผลที่จำกัด มีจอแสดงผลขนาดเล็ก และคุณภาพของหน้าจอสัมผัสต่ำลง ดูว่าประสิทธิภาพเป็นส่วนหนึ่งของขั้นตอนการออกแบบ
- อนุญาตให้ผู้ใช้เรียกดูแอปพลิเคชันของคุณเมื่อออฟไลน์
- แจ้งให้ผู้ใช้ทราบถึงสถานะปัจจุบันและการเปลี่ยนแปลงสถานะ
- พยายามให้ใช้งานแบบออฟไลน์โดยค่าเริ่มต้นหากแอปของคุณไม่จำเป็นต้องใช้อินเทอร์เน็ตมือถือมากนัก
- หากแอปมีข้อมูลมาก ให้สอนผู้ใช้เกี่ยวกับวิธีดาวน์โหลดไว้ใช้งานแบบออฟไลน์
- ทำให้สามารถโอนประสบการณ์ระหว่างอุปกรณ์ได้
- ใช้ภาษา ไอคอน ภาพ แบบอักษร และสีร่วมกันเพื่อแสดงความรู้สึกแก่ผู้ใช้
- ให้ความมั่นใจและความคิดเห็นเพื่อช่วยผู้ใช้