8 กฎทองของการออกแบบมือถือ

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

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

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

01. สร้างประสบการณ์ที่มุ่งเน้นเป้าหมาย

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

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

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

02. ปรับเนื้อหาของคุณให้ทำงานในพื้นที่ขนาดเล็ก

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

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

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

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

ใช้ขนาดตัวอักษรที่อ่านได้: 11 คะแนนเป็นขนาดขั้นต่ำที่แน่นอนสำหรับข้อความ ขนาดนี้ช่วยให้ผู้ใช้อ่านข้อความที่ระยะการรับชมทั่วไปโดยไม่มีการซูม

เลือกฟอนต์ที่ปรับขนาดได้ดี: หากประสบการณ์เว็บไซต์ต้องอ่านมันจะดีกว่าที่จะใช้ Typefaces Sans-Serif เช่น Helvetica หรือ Roboto

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

การศึกษาการทำงานของ MIT Touch Lab พบว่าขนาดเฉลี่ยของปลายนิ้วคือ 8-10 มม ทำให้ขนาดเป้าหมายสัมผัสขั้นต่ำ 10 มม. x 10 มม.

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

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

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

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

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

03. เพิ่มประสิทธิภาพเนื้อหาสำหรับการสแกน

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

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

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

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

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

04. สร้างการนำทางที่คาดการณ์ได้

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

ใช้รูปแบบการนำทางที่คุ้นเคย: เมื่อมันมาถึงการสร้างกลไกการนำทางสำหรับเว็บไซต์ของคุณมันคุ้มค่าที่จะจดจำกฎง่ายๆ: อย่าสร้างวงล้อใหม่ - พยายามสร้างประสบการณ์ที่คุ้นเคย มันจะดีกว่าเสมอที่จะพึ่งพารูปแบบการนำทางที่ผู้ใช้ส่วนใหญ่คุ้นเคยกับ (เช่นแถบนำทางหรือเมนูแฮมเบอร์เกอร์ด้านบน) แทนที่จะสร้างระบบนำทางที่เป็นเอกลักษณ์ของคุณเอง (เช่นระบบนำทางตามท่าทาง) เมื่อคุณสร้างการนำทางที่คุ้นเคยคุณช่วยให้ผู้ใช้พึ่งพาประสบการณ์ก่อนหน้านี้เมื่อมีปฏิสัมพันธ์กับผลิตภัณฑ์ของคุณ

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

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

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

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

สื่อสารตำแหน่งปัจจุบัน: "ฉันอยู่ที่ไหน?" เป็นคำถามพื้นฐานที่ผู้ใช้ต้องการคำตอบเพื่อนำทางอย่างมีประสิทธิภาพ ระบุตำแหน่งปัจจุบันอย่างชัดเจน

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

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

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

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

05. หลีกเลี่ยงการสร้างสิ่งกีดขวางบนถนน

Roadblocks สร้างแรงเสียดทานและแรงเสียดทานเป็นศัตรูที่เลวร้ายที่สุดของการแปลง โชคดีที่มีสิ่งง่าย ๆ ที่คุณสามารถทำได้เพื่อก้าวเท้าเลี่ยงพวกเขา

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

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

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

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

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

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

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

06. การออกแบบแบบฟอร์มที่มีประสิทธิภาพ

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

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

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

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

ตั้งค่าประเภทอินพุต HTML เพื่อแสดงปุ่มกดที่ถูกต้อง ต่อไปนี้เป็นเจ็ดประเภทอินพุตที่เกี่ยวข้องกับการออกแบบฟอร์ม:

• อินพุตชนิด = "ข้อความ" แสดงแป้นพิมพ์ปกติของอุปกรณ์มือถือ
• ประเภทอินพุต = "อีเมล" แสดงแป้นพิมพ์ปกติและ '@' และ '.com'
• ประเภทอินพุต = "โทร" แสดงปุ่มกด 0 ถึง 9 ตัวเลข
• ประเภทอินพุต = "หมายเลข" แสดงแป้นพิมพ์ที่มีตัวเลขและสัญลักษณ์
• ประเภทอินพุต = "วันที่" แสดงตัวเลือกวันที่อุปกรณ์มือถือ
• Input Type = "DateTime" แสดงวันที่และตัวเลือกเวลาของอุปกรณ์มือถือ
• ประเภทอินพุต = "เดือน" แสดงตัวเลือกเดือนและปีของอุปกรณ์มือถือ

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

07. มุ่งมั่นที่จะสร้างประสบการณ์ที่สอดคล้องกัน

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

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

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

08. สร้างเว็บไซต์มือถือที่ดีที่สุดของคุณ

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

บทความนี้ได้รับการตีพิมพ์ครั้งแรกในฉบับที่ 317 ของ สุทธิ นิตยสารที่ขายดีที่สุดในโลกสำหรับนักออกแบบเว็บไซต์และนักพัฒนา ซื้อปัญหา 317 หรือ สมัครสมาชิกสุทธิ .

บทความที่เกี่ยวข้อง:

• 6 แนวโน้มที่เปลี่ยนโฉมหน้าของการออกแบบ UI มือถือ
• 10 เคล็ดลับสำหรับการออกแบบ UX มือถือที่ดีขึ้น
• วิธีการออกแบบอินเตอร์เฟสมือถือที่ใช้งานง่าย