วิกฤตการณ์ทั่วไปในการออกแบบที่ตอบสนอง & วิธีการทำงาน

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

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

นี่คือสิ่งที่ฉันเรียนรู้เกี่ยวกับการออกแบบสำหรับเว็บที่ตอบสนอง:

การออกแบบสำหรับผู้ชมของคุณ ไม่ใช่ตัวคุณเอง

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

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

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

ดีไซเนอร์มักมองไม่เห็นว่าตัวเองกำลังออกแบบเพื่อใคร

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

สำหรับหมายเลขเฉพาะมือถือ ให้ใช้ Mobile Planet ของ Google ถามลูกค้าของคุณเกี่ยวกับผู้ชมของพวกเขา

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

'โครงลวด' ต้องการเรื่องราว

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

การออกแบบของคุณ (น่าจะ) จะไม่เป็นแบบหน้าเดียวที่มีเนื้อหาปรากฏขึ้นและไม่มีอะไรเกิดขึ้นอีก

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

ลงทุนเวลาเพื่อสร้างต้นแบบเชิงโต้ตอบของความคิดของคุณ ทำงานร่วมกันในวงกว้างก่อนเริ่มด้วยการพัฒนาส่วนหน้า

อย่าเพิ่งโยนความคิด คุณเคยได้ยินเกี่ยวกับการเล่าเรื่อง?

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

ใช้เครื่องมือเช่น Balsamiq, Axure, UXPin เป็นต้น เพื่อสร้าง 'เรื่องราว' ในรูปแบบภาพ ขีดจินตนาการของพวกเขาด้วยคำพูด ป้อนด้วยต้นแบบที่สร้างขึ้นมาอย่างดี
จะช่วยปรับปรุงการออกแบบและการพัฒนาของคุณในภายหลังและให้แนวทางที่ชัดเจนแก่คุณ และเป็นโบนัส: การแสดงครั้งแรกยังคงมีความสำคัญ ต้นแบบที่ดีแสดงให้เห็นว่าคุณกระตือรือร้นเกี่ยวกับโครงการ

เนื้อหา: อันดับแรก มองเห็นได้ และปรับเปลี่ยนได้ เสมอ

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

คุณเอาชนะจุดประสงค์ทั้งหมดของการออกแบบที่ตอบสนองโดยต้องซ่อนเนื้อหาของคุณ

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

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

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

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

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

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

ประการที่สอง: DO ให้ข้อมูลที่สมบูรณ์แก่ผู้ใช้แทนที่จะเป็นเพียงเวอร์ชันที่กระจัดกระจาย

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

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

เคารพข้อจำกัดและความสามารถของอุปกรณ์

เมื่อเราพูดถึง 'mobile-first' หรือ 'progressive Enhancement' เราเข้าใจและปรับให้เข้ากับราคาขั้นต่ำที่ต่ำที่สุดจริง ๆ หรือไม่? นี่คือบทสรุปของสิ่งที่ 'ขั้นต่ำเปลือย' ควรเป็น:

• ความกว้างของหน้าจอที่ใช้งานได้: 120 พิกเซล ขั้นต่ำ
• รองรับภาษามาร์กอัป: XHTML Basic 1.1 มาพร้อมกับประเภทเนื้อหา application/xhtml + xml
• การเข้ารหัสอักขระ: UTF-8
• รองรับรูปแบบภาพ: JPEG, GIF 89a
• สี: 256 สี ขั้นต่ำ
• รองรับสไตล์ชีต: CSS ระดับ 1, CSS ระดับ 2 @media rule ร่วมกับอุปกรณ์พกพาและสื่อทุกประเภท
• HTTP: HTTP/1.0 หรือ HTTP1.1 . ที่ใหม่กว่า
• สคริปต์: ไม่รองรับสคริปต์ฝั่งไคลเอ็นต์

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

โปรดแบ่งเบาภาระ

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

พูดง่ายๆ ก็คือ หากหน้าของคุณโหลดช้า จะไม่มีใครคอยกวนใจให้คอยติดตาม

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

นอกจากนี้ และคุณไม่จำเป็นต้องได้รับการเตือนว่า คุณต้องรักษาขนาดของสื่อของคุณภายใต้การตรวจสอบ

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

รักษาการออกแบบของคุณให้เพรียว บาง (อย่างน้อยก็สำหรับลูกค้าและผู้ใช้ทั้งหมดของคุณ)

ทีแอล; DR

นี่คือสิ่งที่ฉันเรียนรู้เกี่ยวกับการออกแบบสำหรับเว็บที่ตอบสนองอย่างใดอย่างหนึ่ง:

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

ชีวประวัติผู้แต่ง: Lucy Barret เกี่ยวข้องกับ HireWPGeeks Ltd. เธอให้บริการการแปลง HTML เป็น WordPress และเธอมีทีมนักพัฒนาผู้เชี่ยวชาญที่จะช่วยเธอ เธอยังเป็นบล็อกเกอร์ที่กระตือรือร้นและชอบที่จะแบ่งปันความรู้ของเธอกับชุมชน WordPress ขนาดใหญ่ ติดตามบริษัทของเธอบนเครือข่ายโซเชียลมีเดีย เช่น Facebook และ Google+