ออกแบบอย่างไรให้รองรับ Google Glass ?

ในการทำ Responsive Web Design ใครๆ ก็อยากให้เว็บตัวเองดูดีไม่ว่าจะดูด้วย devices อะไรก็ตาม แน่นอนว่าหลายๆ คน คงจะนำเว็บไปทดสอบกับ devices อย่าง smartphones และ tablets ต่างๆ รวมไปถึง desktops แต่อย่าลืมว่าในตอนนี้มีอีก device หนึ่งที่เราควรจะให้ความสำคัญด้วย นั่นก็คือ Google Glass

รู้จักกับ Web Browser ใน Google Glass

เนื่องจาก Google Glass ยังไม่สามารถเข้าหน้าเว็บโดยตรงได้ web browser ใน Google Glass จึงมีไว้สำหรับดูเว็บที่เป็นผลลัพธ์ในการค้นหาด้วย Google Search เท่านั้น ลักษณะเด่นของ web browser ใน Google Glass มีดังนี้

• แสดงผลแบบ full-screenเนื่องจากขนาดของหน้าจอแสดงผลที่ไม่ใหญ่นัก การแสดงผลจึงเป็นแบบ full-screen mode คือจะไม่มี browser ui  เหมือนใน devices อื่นๆ
• วิธีเลื่อนหน้าเราจะใช้ touchpad ที่อยู่ด้านข้าง ในการเลื่อนหน้าขึ้นหรือลง
• วิธีเลื่อน cursorส่วนการเลื่อน cursor จะทำได้ลำบากกว่า ให้เราใช้ 2 นิ้ว แตะไปที่ touchpad ก่อน cursor จะปรากฎขึ้นที่กลางหน้าจอ จากนั้นให้เราขยับศีรษะ web browser จะ pan หน้าเว็บตามการขยับศีรษะของเรา เมื่อ cursor อยู่ในตำแหน่งที่เราต้องการแล้ว ให้เรา click โดยการ tap ที่ touchpad
• วิธีการ zoomเราสามารถ zoom ได้โดยการใช้ 2 นิ้ว swipe ที่ touchpad การ swipe ไปด้านหน้าจะเป็นการ zoom out ส่วนการ swipe ไปด้านหลังจะเป็นการ zoom in
• วิธีการพิมพ์ในตอนนี้ Google Glass ยังไม่รองรับการพิมพ์ตัวอักษร นั่นหมายความว่าเราไม่สามารถกรอกฟอร์มใดๆ ได้

Responsive Web Design กับ Google Glass

Mobile User Agent

user agent ของ Google Glass นั้นจะเป็นแบบ mobile ทำให้มันสามารถเปิดเว็บไซต์ที่มีเวอร์ชั่นสำหรับ mobile  อย่าง http://m.youtube.com/ หรือ https://m.facebook.com/ ได้โดยไม่มีปัญหา

Media Queries

เนื่องจาก viewport แบบ default ของ web browser ใน Google Glass จะมีขนาดอยู่ที่ 960px หากเราไม่ได้กำหนด viewport meta tag หรือ css @viewport rule เลย เว็บของเราก็จะแสดงผลใน Google Glass แบบ desktop version

หากเว็บเราเป็น responsive web เมื่อเราได้ปรับแต่งค่า viewport ให้ width มีค่าเท่ากับ device-width แล้ว เราอาจใช้ css media queries เข้ามาช่วยกำหนด styles พิเศษให้กับ Google Glass โดยเฉพาะ ซึ่งข้อมูลที่เป็นประโยชน์ในการเขียน media queries มีดังนี้

• width: 427px
• height: 240px
• orientation: landscape
• -webkit-device-pixel-ratio: 1.5

จากข้อมูลดังกล่าว เราจะสามารถนำมาเขียน media queries สำหรับ Google Glass ได้ประมาณนี้

หลักในการออกแบบเว็บให้รองรับ Google Glass

• เรียบง่ายพยายามตัดเนื้อหาส่วนที่ไม่จำเป็นออก เพื่อให้ตัวหนังสือมีไม่เยอะจนเกินไป เราไม่ควรให้ users ต้อง scroll down ถ้าไม่จำเป็น
• ตัวหนังสืออ่านง่ายสำหรับ devices อื่นๆ หาก users พบว่าตัวหนังสือเล็กไป เค้าอาจจะปรับขนาดให้ใหญ่ขึ้น หรืออาจ zoom in แต่สำหรับ Google Glass แล้ว การทำสิ่งเหล่านั้นอาจจะไม่สะดวกเท่าไรนัก เราจำเป็นจะต้องเลือกขนาดตัวอักษรให้เหมาะสม อ่านง่าย รวมไปถึงการเลือกสีของตัวอักษรที่ตัดกับสีของพื้นหลัง ที่จะช่วยให้อ่านได้ชัดเจนยิ่งขึ้น
• กด link ได้ง่ายส่วนไหนที่เป็น link ก็ต้องออกแบบให้ดูออกว่าเป็น link และมีขนาดใหญ่พอที่จะสามารถ click ได้ง่าย อย่าลืมว่าการเลื่อน cursor ของ Google Glass ไม่ได้สะดวกเหมือน devices อื่นๆ
• ลดขั้นตอนให้สั้นลงให้เราพยายามลดขั้นตอนต่างๆ ให้สั้นลงเท่าที่จะเป็นไปได้ ถ้ามีฟอร์ม ให้เราเลือกค่าเริ่มต้นให้เป็นค่าที่คาดว่าคนส่วนใหญ่จะลือก
• ลดโฆษณาเราอาจต้องเอาโฆษณาที่รบกวนสายตาออกไปบ้าง พยายามทำให้ users โฟกัสไปที่เนื้อหาของเรา

จะรองรับ Google Glass ไปทำไม ?

มาถึงตอนนี้คาดว่าหลายๆ คนคงจะได้แนวทางในการออกแบบเว็บให้รองรับ Google Glass กันบ้างแล้ว คำถามต่อมาคือ มันจะคุ้มมั้ย ? เพราะในไทยจะมีสักกี่คนที่มี Google Glass ใช้ หรือต่อให้เว็บเรามีผู้ใช้งานทั่วโลกก็เถอะ มันจะมีผลดีแค่ไหนกัน หากเราต้องมาเสียเวลาเพิ่มในการให้ความสำคัญกับคนเหล่านี้ ?

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