Touchscreens ทำงานแตกต่างจากคีย์บอร์ดและเม้าส์
ในช่วงแรก ๆ ของการออกแบบเว็บไซต์สำหรับอุปกรณ์เคลื่อนที่นักพัฒนาซอฟต์แวร์ส่วนใหญ่ได้แยกตัวออกการนำเสนอผลิตภัณฑ์ของตน พวกเขาปล่อยเวอร์ชันสำหรับเดสก์ท็อปที่ใช้งานได้อย่างสมบูรณ์และเป็นเวอร์ชัน "มือถือที่ดีที่สุด" ซึ่งช่วยลดความสามารถในการสร้างแบรนด์และภาพเพื่อรองรับความสามารถที่ จำกัด และความเร็วเครือข่ายของโทรศัพท์ลูกอมบาร์และเครือข่ายไร้สาย 3G
อย่างไรก็ตามสมาร์ทโฟนร่วมสมัยสามารถแสดงเว็บเพจได้อย่างมีประสิทธิภาพเช่นเดียวกับเดสก์ท็อปพีซีผ่านเครือข่ายดีหรือดีกว่าสาย DSL เมื่อวานนี้
การออกแบบจึงผสานเข้ากับอินเทอร์เฟซผู้ใช้คนเดียว แต่ความเสี่ยงสำหรับนักออกแบบไม่ได้หมายความว่าสมาร์ทโฟนหรือแท็บเล็ตไม่สามารถแสดงเว็บไซต์ที่มีการตอบสนองที่ทันสมัย ค่อนข้างเป็นที่ที่วิธีการป้อนข้อมูลของผู้ใช้บนอุปกรณ์หน้าจอสัมผัสต้องมีการเปลี่ยนแปลงที่มีนัยสำคัญต่อการออกแบบไซต์ที่อยู่เบื้องหลัง วันของการสร้างเว็บไซต์สมมติว่าผู้เข้าชมมีแป้นพิมพ์และเมาส์มีมากกว่า
กฎการออกแบบหน้าจอสัมผัสขั้นพื้นฐาน
การออกแบบสำหรับอินเทอร์เฟซเว็บสมาร์ททัชสกรีนต้องใช้วิวัฒนาการของวิธีการตรวจสอบแป้นพิมพ์เมาส์แบบเดิมในอดีต โดยเฉพาะคุณต้องรองรับการโต้ตอบเช่นท่าทางแตะและการป้อนข้อมูลแบบมัลติทัช
- การแตะอย่างไม่ถูกต้อง ยกเว้นกรณีที่ลูกค้ามีนิ้วมือของเด็กวัยหัดเดินแม้จะมีการควบคุมซอฟต์แวร์ที่ถูกต้องก็ตามก็ยากที่จะแตะและแม่นยำ
- ท่าทางจะแตกต่างจากก๊อก ในการเลื่อนหน้ายาวบนหน้าจอสัมผัสผู้ใช้กวาดนิ้วหนึ่งนิ้ว ขึ้น ที่หน้าต่างเบราเซอร์ นี่อาจดูเหมือนไม่สำคัญจนกว่าคุณจะรู้ว่าการเรียกดูด้วยเมาส์คุณเลื่อนเมาส์ ลง
- ก๊อกสองนิ้ว (และมากกว่า) ผู้ใช้สามารถใช้ก๊อกหลายนิ้วบนอุปกรณ์ในเวลาเดียวกันเพื่อควบคุมได้ ก๊อกเสริมเหล่านี้อาจหมายถึงบางอย่างที่เฉพาะเจาะจงขึ้นอยู่กับระบบปฏิบัติการของอุปกรณ์ของผู้ใช้
- อุปกรณ์แสงสะท้อนสูง หน้าจอของแท็บเล็ตหน้าจอสัมผัสส่วนใหญ่ทำมาจากแก้วที่ทนทาน วัสดุนี้อาจอ่านได้ยากมากในสถานการณ์ที่มีแสงจ้า นอกจากนี้เมื่อแตะทุกอย่างแล้วจะได้รับรอยนิ้วมือและรอยเปื้อนบนหน้าจอซึ่งอาจส่งผลต่อหน้าเว็บของคุณ
- แป้นพิมพ์บนหน้าจอ แม้ว่าผู้ใช้บางรายจะมีแป้นพิมพ์แบบไร้สายที่เชื่อมต่อกับแท็บเล็ต แต่ผู้ใช้แท็บเล็ตส่วนใหญ่จะใช้แป้นพิมพ์บนหน้าจอเพื่อป้อนข้อมูล รายการ OSK อาจส่งผลให้เกิดการพิมพ์ดีดที่น่าขันบางอย่างรวมถึงการไม่สะดวกในการใช้งานเป็นเวลานาน
เนื่องจากคุณลักษณะเหล่านี้ของอุปกรณ์นักออกแบบเว็บควรเน้นหลักเกณฑ์การออกแบบขั้นพื้นฐานหลายประการสำหรับผู้ใช้หน้าจอสัมผัส:
- อย่าวางรายการที่คลิกได้ใกล้กันเกินไป ไม่มีกฎที่ยากและรวดเร็วกำหนดว่าใกล้ชิดใกล้ชิดมากเกินไป แต่รายการลิงก์โดยเฉพาะขนาดตัวอักษรเล็ก ๆ อาจเป็นเรื่องยากที่จะนำทางโดยคลิก (แตะ) ด้วยนิ้วที่มีไขมัน อาจเป็นเรื่องน่ารำคาญที่ต้องซูมเข้าเพื่อลองคลิกลิงก์ หลักการนี้เป็นจริงสำหรับปุ่มรวมทั้งลิงก์
- ลำดับชั้นอาจเป็นเรื่องยากที่จะเปิดกว้าง รูป แบบเมนูแบบไดนามิก ยอดนิยมใช้ JavaScript เพื่อเปิดเมนูย่อยเมื่อผู้ใช้คลิกแล้วซ่อนเมาส์ไว้เหนือเมนูย่อย รัฐเหล่านี้อาจเป็นเรื่องยากมากหรือเป็นไปไม่ได้ที่จะใช้กับหน้าจอสัมผัสเพราะทั้งคู่ไม่อยู่หรือไม่สามารถปิดได้
- ย้ายลิงก์และพื้นที่คลิกได้จากขอบด้านขวาของหน้าต่าง คนส่วนใหญ่เป็นผู้ถนัดซ้ายและมีแนวโน้มที่จะเลื่อนไปทางด้านข้างของหน้าจอ เนื่องจากการเลื่อนทำด้วยท่าทางบางครั้งอาจเป็นไปได้ที่จะเริ่มกวาดนิ้วบนลิงก์โดยไม่ได้ตั้งใจ ผู้ใช้อาจรู้สึกหงุดหงิดหากต้องการเลื่อนหน้าและแทนที่จะแตะที่ลิงก์โดยบังเอิญ คุณสามารถช่วยหลีกเลี่ยงความไม่สะดวกได้โดยเลื่อนลิงก์ออกจากด้านขวา
- ไม่มีเมาส์ และนั่นหมายความว่าไม่มี ตัวชี้ เมาส์ คุณไม่ควรพึ่งพาตัวชี้เมาส์ที่เปลี่ยนไปเพื่อช่วยบ่งบอกว่ามีบางสิ่งที่คลิกได้
- สถานะ Hover ไม่มีอยู่ เป็นข้อสรุปข้างต้นเนื่องจากไม่มีเมาส์ไม่มีอะไรที่จะเลื่อนไปด้วย ลิงก์ถูกคลิกหรือแตะบนอุปกรณ์หน้าจอสัมผัสเพื่อให้ผู้ใช้ไม่สามารถสรุปข้อมูลที่เป็นประโยชน์จากรัฐเลื่อนลอยเช่นการเปลี่ยนสีเคล็ดลับเครื่องมือหรือการเปลี่ยนแปลงสถานะแถบ
- พื้นหลังสีดำเพิ่มแสงสะท้อน ไซต์ที่มีพื้นหลังสีดำอาจอ่านได้ยากบนหน้าจอสัมผัสเนื่องจากแสงจ้า สีดำทำให้ลายนิ้วมือบนอุปกรณ์ปรากฏชัดเจนขึ้นทำให้หน้าจอไม่ชัด และสีดำสามารถเปลี่ยนหน้าจอให้เป็นกระจกสะท้อนกลับไปที่ผู้ใช้เผชิญหน้ากับข้อความบนหน้าจอได้บ่อยกว่า
- ส่วนของข้อความในรูปแบบยาวไม่สามารถเขียนได้ แม้ว่าจะเป็นไปได้ที่จะเขียนนิยายทั้งเล่มบน iPad หรือแท็บเล็ต Android หรือ Windows คนส่วนใหญ่ไม่ชอบใช้แป้นพิมพ์บนหน้าจอสำหรับข้อความยาว ๆ การออกแบบของคุณทำให้การป้อนข้อมูลทำได้ง่ายและสั้นที่สุดเท่าที่จะเป็นไปได้
สิ่งสำคัญที่สุดในการออกแบบด้วย touchscreens คือการ ทดสอบหน้าเว็บของคุณ บนอุปกรณ์หน้าจอสัมผัส ในขณะที่ iPad และ Android มีตัวเลียนแบบมากมายและมีแท็บเล็ต Windows จำนวนมาก แต่ก็ยังไม่ได้ให้ความรู้สึกของหน้าจอสัมผัส คุณไม่สามารถบอกได้ว่าลิงก์ใกล้เกินไปหรือปุ่มเล็กเกินไปหรือแสงสะท้อนทำให้หน้าอ่านยากเกินไปเว้นแต่คุณจะได้รับแท็บเล็ตและทดลองใช้ ก่อนที่ คุณ จะ เผยแพร่การออกแบบเว็บไซต์ใหม่ของคุณ