วิธีการออกแบบหน้าเว็บเปล่าสำหรับเว็บไซต์ & แอพมือถือ

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

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

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

มูลค่าของรัฐที่ว่างเปล่า

ความงามของการออกแบบของรัฐที่ว่างเปล่าอยู่ในความเรียบง่าย อธิบายหน้าว่าง สิ่งที่ควรจะอยู่ในหน้า เมื่อมีเนื้อหาบางส่วน อาจเป็นแบบพาสซีฟเช่นกล่องจดหมายว่างเปล่าหรืออาจกำลังรอผู้ใช้เช่นฟีด Twitter ที่ว่างเปล่า.

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

รัฐว่างยังให้ความรู้สึก “ความสด” ด้วยบัญชีใหม่ที่ไม่มีข้อมูลอยู่.

การทดสอบนี้ดำเนินการโดย Redditor Bambo_Ocha ได้ทำการตรวจสอบแอพต่าง ๆ 20 แอพสำหรับการออกแบบสถานะที่ว่างเปล่า รูปแบบการออกแบบที่หลากหลายเกิดขึ้นกับปุ่ม CTA ข้อมูลตัวอย่างและแม้แต่คำแนะนำแบบสั้น ๆ.

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

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

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

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

องค์ประกอบของหน้าสำคัญ

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

และในขณะที่ข้อความเป็นสื่อการสื่อสารหลักบนเว็บคุณไม่สามารถมองข้ามคุณค่าของกราฟิกและไอคอนได้.

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

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

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

Dropbox มีการออกแบบที่ยอดเยี่ยมพร้อมปุ่ม CTA สองปุ่ม เมื่อใดก็ตามที่ผู้ใช้ Dropbox ไม่มีโฟลเดอร์พวกเขาสามารถสร้างโฟลเดอร์ใหม่หรือเพิ่มโฟลเดอร์ตัวอย่างลงในหน้า.

สนับสนุนกิจกรรมของผู้ใช้

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

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

สถานะว่างโดย ModSpot เป็นตัวอย่างที่ยอดเยี่ยมของการออกแบบที่มีคุณภาพและเนื้อหาที่สนับสนุน.

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

ในทำนองเดียวกันรัฐว่างเปล่า Gumroad เสนอสองตัวเลือกการกำหนดเป้ ผู้ใช้สามารถเพิ่มผลิตภัณฑ์ดิจิทัลหรือผลิตภัณฑ์ทางกายภาพเพื่อเริ่มขาย.

ลิงค์อื่น ๆ ในหน้านี้จะช่วยแนะนำและรายละเอียดการติดต่อ ทุกอย่างมีความคล่องตัวอย่างไม่น่าเชื่อและเชื่อมโยงกันอย่างดี.

แอปบนเว็บและมือถือ

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

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

สิ่งนี้สามารถแก้ไขได้ในลักษณะเดียวกันกับ Nusii ในหน้าข้อเสนอของพวกเขา ในกรณีที่ไม่มีข้อเสนอใด ๆ “เพิ่มข้อเสนอ” ปุ่มในแถบนำทางด้านบน.

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

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

ตัวอย่างการออกแบบที่ว่างเปล่าของรัฐ

บางทีวิธีที่ดีที่สุดในการเรียนรู้เกี่ยวกับการออกแบบสถานะว่างเปล่าคือการศึกษาตัวอย่าง แกลเลอรี่เว็บที่ยอดเยี่ยม emptystat.es ดามัสก์หน้าว่างจากเว็บไซต์ต่าง ๆ ไปยังโปรแกรมมือถือ.

ฉันเลือกตัวอย่างที่สมควรได้รับจากความสนใจของคุณซึ่งแสดงการออกแบบสถานะที่ว่างเปล่าได้ดีที่สุด หากคุณมีข้อเสนอแนะอื่น ๆ โปรดแจ้งให้เราทราบ.

IP ดิจิทัลที่ลอยอยู่ในมหาสมุทร