วิธีออกแบบเว็บไซต์ใหม่ให้ดูน่าทึ่งบนมือถือ

[ Proto .io เป็นเครื่องมือสร้างต้นแบบแอปบนอุปกรณ์เคลื่อนที่ที่ใช้โดยผู้ประกอบการและสตาร์ทอัพเพื่อสร้างต้นแบบเสมือนจริงแบบโต้ตอบเต็มรูปแบบซึ่งมีรูปลักษณ์และให้ความรู้สึกเหมือนแอปจริง]

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

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

วิธีออกแบบเว็บไซต์ใหม่เพื่อประสบการณ์มือถือที่หล่อเหลา

Handsome (@HandsomeMade) เป็นบริษัทด้านการออกแบบและเทคโนโลยีที่มีค่านิยมหลัก ได้แก่ “การคิดที่เน้นมนุษย์เป็นศูนย์กลางในทุกระดับ” และ “ซอฟต์แวร์ที่สวยงามและน่าพึงพอใจอย่างมีจุดมุ่งหมาย” ผู้อำนวยการฝ่ายสร้างสรรค์ Brandon Termini และผู้อำนวยการด้านเทคนิค Alex Zub อธิบายว่าพวกเขานำหลักการเหล่านั้นไปใช้ในการออกแบบเว็บไซต์บนมือถืออย่างไร:

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

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

วิธีออกแบบเว็บไซต์ใหม่ให้ดูสวยงามบนมือถือ

เราขอให้ Termini แบ่งปันแนวทางปฏิบัติที่ดีที่สุดในการออกแบบภาพบางส่วนของเขา “มีสิ่งที่ควรทำและไม่ควรทำนับร้อยที่เราได้รวบรวมไว้ตลอดหลายปีที่ผ่านมา” เขากล่าว นี่คือแนวทางปฏิบัติที่ดีที่สุด 3 อันดับแรกที่เขาใส่ไว้ในตำแหน่งที่หล่อเหลา:

• ใส่ความคิดอย่างรอบคอบในลำดับชั้นของเลย์เอาต์ของคุณ “เลย์เอาต์ที่ประสบความสำเร็จหมายความว่าผู้ใช้ควรจะสามารถแนะนำสิ่งที่คุณเห็น/อ่านตามลำดับที่คุณตั้งใจได้ การใช้พื้นที่สีขาว ทฤษฎีสี การพิมพ์ ฯลฯ อย่างเหมาะสม ล้วนมีบทบาทสำคัญในเรื่องนี้”
• ใช้สีให้เหมาะสม “เลือกสีที่เหมาะสมกับแบรนด์ของคุณ และตรวจสอบให้แน่ใจว่าสีเข้ากันดี ใช้สีฮีโร่ที่คุณเชื่อมโยงกับองค์ประกอบ UI ที่สำคัญ เช่น ปุ่มเรียกร้องให้ดำเนินการ ตรวจสอบให้แน่ใจว่าคุณใช้สีเท่าที่จำเป็นในที่ที่เหมาะสมซึ่งให้ผู้ใช้ของคุณไหลผ่านอินเทอร์เฟซและไม่ติดขัด”
• การพิมพ์ควรจะง่ายในสายตา “ตรวจสอบให้แน่ใจว่าการออกแบบตัวอักษรของคุณเหมาะสมกับแบรนด์และอ่านง่ายบนอุปกรณ์ที่คุณออกแบบ และใช้ประเภทไม้ประดับเท่าที่จำเป็น”

การทดสอบการออกแบบเว็บไซต์บนมือถือของคุณใหม่

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

แนะนำสำหรับคุณ:

ทรัพยากร

บทบัญญัติต่อต้านการแสวงหากำไรสำหรับสตาร์ทอัพในอินเดียมีความหมายอย่างไร?

จรัญญา ล.

31 กรกฎาคม 2565

ทรัพยากร

Edtech Startups ช่วยให้แรงงานอินเดียเพิ่มพูนทักษะและเตรียมพร้อมสู่อนาคตได้อย่างไร...

อังคุช เอส

31 กรกฎาคม 2565

ข่าว

หุ้นเทคโนโลยียุคใหม่ในสัปดาห์นี้: ปัญหาของ Zomato ยังคงดำเนินต่อไป, EaseMyTrip Posts Stro...

ตปัญจนา ร.

31 กรกฎาคม 2565

คุณสมบัติ

สตาร์ทอัพอินเดียใช้ทางลัดในการไล่ล่าหาทุน

นิกิล เอส.

31 กรกฎาคม 2565

ข่าว

แพลตฟอร์มการตลาดดิจิทัล Logicserve ระดมทุน INR 80 Cr รีแบรนด์เป็น LS Dig...

เชตัน ต.

31 กรกฎาคม 2565

ข่าว

รายงานเตือนให้มีการพิจารณาทบทวนกฎข้อบังคับเกี่ยวกับ Lendingtech Space

เชตัน ต.

31 กรกฎาคม 2565

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

เราต้องการเรียนรู้เพิ่มเติมเกี่ยวกับวิธีการทดสอบและ QA การออกแบบเว็บไซต์บนมือถือใหม่ ด้วยเหตุนี้ เราได้ยินจาก Simon Papineau ซีอีโอของ Crowdsourced Testing(@crowdsourcingqa) Papineau ได้สร้าง Crowdsourced Testing เพื่อจัดการกับจุดบอดบางอย่างที่เขาพบจากประสบการณ์ในการทดสอบแอปบนอุปกรณ์เคลื่อนที่ เว็บไซต์ เกม และอื่นๆ อีกมากมาย

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

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

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

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

วิธีออกแบบเว็บไซต์ใหม่โดยใช้การออกแบบที่ตอบสนอง

Bob Bentz เป็นประธานของ ATS Mobile (@atsMobile) ซึ่งเป็นหน่วยงานด้านการตลาดบนมือถือที่ให้บริการเต็มรูปแบบซึ่งดูแลการออกแบบเว็บไซต์ใหม่สำหรับลูกค้าในหลายอุตสาหกรรม เบ็นซ์มีความกระตือรือร้นที่จะทำให้แน่ใจว่าประสบการณ์เว็บไซต์จะดูดีและให้ความรู้สึกที่ดีในอุปกรณ์มือถือเช่นเดียวกับบนหน้าจอเดสก์ท็อปที่มีความละเอียดสูง และหนึ่งในวิธีหลักที่ ATS Mobile บรรลุผลสำหรับลูกค้าคือการใช้การออกแบบที่ตอบสนอง

ทำไมต้อง Responsive Design? ไพรเมอร์

“การออกแบบเว็บที่ตอบสนองตามอุปกรณ์ (RWD) ซึ่งออกแบบโดยทั่วไปด้วย HTML5 ส่วนใหญ่จะเป็นตัวเลือกที่เป็นไปได้ในการสร้างเว็บบนมือถือใหม่เกือบทั้งหมด” Bentz กล่าว “ยังสามารถออกแบบโดยใช้ CSS3 และ Javascript การออกแบบที่ตอบสนองตามอุปกรณ์มีข้อได้เปรียบที่โดดเด่นคือมีความยืดหยุ่นสูง เนื่องจากมีการเปลี่ยนแปลงอย่างไหลลื่นเพื่อรองรับอุปกรณ์ทุกชนิด RWD ทำงานโดยส่งรหัสเดียวกันโดยไม่คำนึงถึงอุปกรณ์ แล้วจัดเรียงใหม่ในฝั่งไคลเอ็นต์ ซึ่งช่วยให้สามารถแสดงหน้าเว็บเดียวกันบนอุปกรณ์ใดก็ได้”

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

การออกแบบที่ตอบสนองเป็นอย่างไร แท้จริงแล้วเป็นอย่างไร และเหตุใดคุณจึงควรใช้สำหรับการออกแบบเว็บไซต์ของคุณใหม่ “การออกแบบเว็บไซต์ที่ตอบสนองใหม่นั้นให้บริการโค้ด HTML เดียวกันบน URL เดียวกัน ไม่ว่าอุปกรณ์ของผู้ใช้จะเป็นเดสก์ท็อป แท็บเล็ต phablet สมาร์ทโฟน ฟีเจอร์โฟน หรืออุปกรณ์สวมใส่ (เช่น Apple Watch)” Bentz กล่าว “มันยังสามารถตอบสนองได้แตกต่างกันไปตามขนาดหน้าจอของเว็บไซต์ นักพัฒนาสามารถเลือกได้ว่าจะใช้กราฟิกและเนื้อหาใดสำหรับผู้ใช้มือถือและแท็บเล็ต ข้อความและรูปภาพสามารถปรับได้ตามเบราว์เซอร์หรือขนาดหน้าจอ”

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

แนวทางปฏิบัติที่ดีที่สุดในการออกแบบภาพที่ตอบสนอง

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

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

การออกแบบเว็บไซต์ใหม่ที่สวยงามเริ่มต้นด้วยต้นแบบที่งดงาม

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