ข้อควรพิจารณา UI อันดับต้นๆ สำหรับการออกแบบ PWA ที่ดีที่สุด

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

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

แบบอักษรของระบบ

หากคุณต้องการให้ผู้ใช้รู้สึกสบายใจขณะใช้ Progressive Web App (PWA) ควรปรับปรุงรูปแบบเล็กน้อยเพื่อให้เข้ากับระบบปฏิบัติการ (OS) ก่อนใช้งานเมนูและปุ่มต่างๆ ในแต่ละแพลตฟอร์ม คุณสามารถเริ่มต้นด้วยแบบอักษรที่ระบบต้องการ สำหรับ iOS, Android, Windows แยกกัน

กล่าวอีกนัยหนึ่ง ปล่อยให้การทำงานหนักของ Microsoft (Segoe), Google (Roboto), Apple (San Francisco) หรือแม้แต่ Mozilla (Fira Sans) ทำให้งานของคุณง่ายขึ้นโดยการเพิ่มประสบการณ์ให้กับผู้ใช้ ด้วยเหตุนี้ ฟอนต์ระบบจึงเป็นรายการหนึ่งที่คุณไม่ควรละทิ้งจากรายการของคุณ

 /* ไอโอเอส */
ตระกูลแบบอักษร: 'Helvetica Neue', Helvetica, Arial, sans-serif;

/* แอนดรอยด์ */
ตระกูลแบบอักษร: 'RobotoRegular', 'Droid Sans', sans-serif;

/* Windows Phone */
ตระกูลแบบอักษร: 'Segoe UI', Segoe, Tahoma, Geneva, sans-serif;

ไอคอนแอพ

เป็นความจริงที่นักออกแบบแอพมือถือให้ความสนใจเป็นพิเศษกับการออกแบบไอคอน และเนื่องจาก PWA ของคุณ (โดยการเพิ่มลงในหน้าจอหลัก) จะอยู่ถัดจากแอปพื้นฐานที่เหลือ จึงควรคำนึงถึงการออกแบบไอคอนด้วย

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

ในการทำให้ไอคอน PWA ของคุณกลมกลืนกับแอปที่เหลือในอุปกรณ์ของคุณ จะต้องมีความยืดหยุ่นในการปรับให้เข้ากับแพลตฟอร์มต่างๆ เช่น Android, iOS และ Windows และปรับให้เข้ากับองค์ประกอบโวหาร (รูปร่าง หน้าตา มี/ไม่มีพื้นหลังอย่างไร) หรือสีต่างๆ เป็นต้น) วิธีที่ดีในการทำเช่นนี้คือทำให้การออกแบบไอคอน PWA ของคุณตรงกัน หรืออย่างน้อยก็ใกล้เคียงกับมาตรฐานภาพของไอคอนแอปที่มาพร้อมเครื่อง แหล่งที่มาของแรงบันดาลใจคือแนวทางการออกแบบวัสดุของ Google ไอคอนวัสดุของ Google

 การอ่านที่แนะนำ: PWA กับ Native App: ไหนเหมาะกับคุณมากกว่ากัน?

การโต้ตอบแบบสัมผัส

ควรใช้การโต้ตอบแบบสัมผัสเป็นอย่างดีหรือไม่ควรทำเลย

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

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

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

เนื้อหาที่แชร์ได้

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

เคล็ดลับเล็กๆ น้อยๆ สำหรับกรณีนี้: หากคุณกำลังใช้ปุ่มแบ่งปันทางสังคม อย่าลืมชะลอการโหลด JavaScript ของบุคคลที่สามจนกว่าเนื้อหาหลักในหน้าเว็บจะโหลดเสร็จ

แตะข้อเสนอแนะ

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

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

ตัวอย่างการตอบสนองด้วยการแตะทำได้ดี:

เว็บแอป Google I/O 2016 จะแสดงไฮไลต์สีเทาทันทีเมื่อแตะการพูดคุยและปิดใช้การแตะสีน้ำเงินตามค่าเริ่มต้น (โดยค่าเริ่มต้น เบราว์เซอร์บางตัวจะแสดงไฮไลต์ ของตัวเอง เมื่อแตะองค์ประกอบ รูปแบบเริ่มต้นนี้ไม่น่าสนใจและอาจขัดแย้งกับ คุณภาพของภาพแบรนด์)

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

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

ตัวอย่างการตอบสนองการสัมผัสที่ให้ในเวลาที่ไม่ถูกต้อง:

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

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

คงตำแหน่งการเลื่อนในหน้ารายการก่อนหน้า

การกดกลับจากหน้ารายละเอียดควรคงตำแหน่งการเลื่อนในหน้ารายการก่อนหน้า

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

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

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

หลีกเลี่ยงการออกแบบที่ “เหมือนเว็บ” มากเกินไป

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

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

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

ธีมมืด

ธีมสีเข้มจะคงอยู่ต่อไป และจะดีขึ้นเท่านั้น

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

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

สรุปแล้ว

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

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