10 เคล็ดลับเพื่อการใช้งานมือถือที่ดีขึ้น

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

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

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

1. ตัดสินใจเกี่ยวกับความละเอียดหน้าจอ

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

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

2. แบ่งหน้าเว็บออกเป็นส่วนเล็ก ๆ

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

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

ข่าวซีบีเอส

TreeHugger

3. ลดความซับซ้อนของการออกแบบ

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

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

สุดยอดซื้อ

YouTube

4. ตัวเลือกเพื่อดูเว็บไซต์แบบเต็ม

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

ตัวอย่างเช่น Ars Technica มีปุ่มลิงก์ไปยังเว็บไซต์มาตรฐานที่วางไว้บนส่วนหัว ในขณะที่แชงกรีลามีลิงค์เว็บไซต์แบบเต็มของพวกเขาวางไว้บนส่วนท้าย.

Ars Technica

Shangri-La

5. ตำแหน่งการนำทาง

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

D & G

นักการเมือง

ดวงรายวัน

6. ใช้ลิงค์ข้อความ

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

รายการนอกเหนือ

Reddit

7. สร้างความแตกต่างระหว่างลิงค์ที่เลือก

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

Geek Squad

ดีเซล

8. ยอดคงเหลือลิงก์

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

Flickr

พูดเบาและรวดเร็ว

9. ลดการป้อนข้อความของผู้ใช้

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

สำหรับตัวอย่างด้านล่างของเรา Fedex ใช้ประโยชน์จากรายการตรวจสอบและเมนูแบบเลื่อนลง ในขณะที่ Tumblr ทำให้คุณเลือกภาษาของคุณโดยใช้เมนูแบบเลื่อนลง.

เฟดเอ็กซ์

Tumblr

10. ไม่ปรากฏหรือรีเฟรช

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

โดยสังเขป

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

คุณมีเว็บไซต์บนมือถือที่ต้องการเป็นแรงบันดาลใจให้คุณจริงๆหรือไม่? คุณสามารถแบ่งปันเคล็ดลับการออกแบบเว็บไซต์บนมือถือได้ไหม? แจ้งให้เราทราบ!

อ่านเพิ่มเติม

1. ออกแบบเว็บไซต์ที่ตอบสนอง (alistapart.com)
2. ทำให้ไซต์ของคุณเป็นมิตรกับมือถือ (thinkvitamin.com)
3. W3C mobileOK ตัวตรวจสอบ (w3.org)
4. iPhone Simulator