Usability

ลิงค์ Store Locator สิ่งดีๆ ที่เว็บไทยควรมีเป็นมาตรฐาน

เว็บ Kasikorn Bank โฉมใหม่ กลายเป็นประเด็นให้บรรดานักออกแบบเว็บเมืองไทยมาถกกันว่า เว็บแบบไหนดี-ไม่ดีอย่างไร

ผมขอใช้โอกาสงามๆ แบบนี้โฆษณา "ฟีเจอร์" ที่เว็บห้างร้านบริษัททั้งหลายควรมีเป็นอย่างยิ่ง นั่นคือ "Store Locator" ครับ

Responsive Design for Content Site - Next Guardian

Guardin Responsive Design

เรื่องมีอยู่ว่าหนังสือพิมพ์ The Guardian ของอังกฤษเขากำลังออกแบบหน้าเว็บใหม่ (ลองเล่นได้ที่ Guardian Next) ซึ่งโจทย์ของการออกแบบคือเป็น responsive รองรับอุปกรณ์ทุกขนาดหน้าจอ

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

สุดท้าย Guardian ได้พัฒนาแนวคิดที่น่าสนใจมาก เรียกมันว่า Container Model กับ Blended Content (รายละเอียดอ่านได้จาก Guardian Beta Blog และ Nieman Lab)

Jolla Sailfish UI

เคยประทับใจกับ Swipe UI ของ MeeGo บน N9 อยู่มาก ปัญหาหลักที่ผมเจอตอนใช้ N9 คือทุกอย่าง swipe ได้ยกเว้น Back ที่ต้องกดปุ่ม ทำให้ประสบการณ์ใช้งานมันสะดุดอยู่พอสมควร

เรื่องนี้เคยเขียนไปบ้างแล้วใน Ubuntu Phone

ทีนี้ไปค้นเจอข่าวเก่าช่วงปลายปีที่แล้ว (เซฟเก็บไว้เพิ่งได้อ่าน) ทีมของ Engadget ได้สัมภาษณ์ทีม Jolla ผู้สืบทอดของ MeeGo และได้ถ่ายวิดีโอการใช้งาน Sailfish OS มาด้วย ช่วยให้เราได้เห็นภาพว่าถัดจาก MeeGo แล้วไงต่อ

BlackBerry 10 - Peek & Flow

เพิ่งมีเวลามานั่งดูคลิปของงาน BlackBerry Jam Americas เมื่ออาทิตย์ที่แล้ว (ข่าวใน Blognone) ซึ่งถือเป็นการโชว์ BlackBerry 10 ค่อนข้างละเอียดเป็นครั้งแรก

ไอเดียของ UI BB10 ถือว่าน่าสนใจครับ ในภาพรวม RIM เรียกมันว่า "Flow" ซึ่งประกอบด้วยแนวคิด 2 แบบ

  • cascade หรือการซ้อนหน้าต่างเป็นชั้นๆ ต่อกันไปเรื่อยๆ อันนี้ใกล้เคียงกับ card ของ webOS
  • gesture หรือการวาดนิ้วเพื่อใส่คำสั่ง (เบื้องต้นก็คือลาก 4 ทิศ บนล่างซ้ายขวา) คนที่เคยเล่น PlayBook จะรู้ว่ามันใช้ gesture เยอะมาก และ BB10 ก็ต่อยอดแนวทางนี้มา

หมายเหตุ: ระบบปฏิบัติการอีกตัวที่ใช้แนวทางคล้ายๆ กันนี้คือ MeeGo ใน N9 ซึ่งผมชอบมาก

Changing Windows 7 Minimize-Maximize Button Size

เครื่อง Gateway ที่ซื้อมาใหม่ มาพร้อมกับ Windows 7 ซึ่งตั้งค่ามาพิเศษให้ปุ่ม Minimize-Maximize-Close มุมขวาบนของหน้าต่างนั้นใหญ่กว่าปกติ

ผมเข้าใจเอาเองว่าปรับมาให้เหมาะกับหน้าจอทัชสกรีน จะได้กดปิดหน้าต่างง่ายๆ (จอมันเป็น 1080p ซึ่งละเอียดในระดับหนึ่ง)

titlebar ใหญ่เกินไปไม่ใช่ปัญหานัก แต่ Firefox ดันไม่รู้จัก titlebar ขนาดนี้ ทำให้ไม่ยอมปรับขนาดของแท็บในแนวตั้งให้ล้อกับขนาดของ titlebar ไปด้วย

ผลคือ "ช่องว่าง" ระหว่างขอบบนของหน้าต่าง กับแท็บใน Firefox

ช่องว่างอันนี้เห็นเล็กๆ ไม่กี่พิกเซลแต่เป็นเรื่องใหญ่มากครับ เพราะมันผิดหลัก Fitt's Law ด้าน usability เข้าเต็มๆ คือเราไม่สามารถลากเมาส์ไปชนขอบบนเพื่อเลือกแท็บได้ ต้อง "ตั้งใจเล็ง" ให้ถูกเท่านั้น ซึ่งมันเปลืองแรงกว่ากันมาก (และเป็นเหตุผลที่ผมเกลียด Opera ที่ทำแบบนี้)

The Design Behind Honeycomb

สิ่งหนึ่งที่ต้องยอมรับว่ากูเกิลทำได้เยี่ยมมากใน Google I/O คือการถ่ายทอดสดแบบ real-time และการนำวิดีโอขึ้น YouTube ที่รวดเร็วมาก ชนิดว่าไม่ต้องไปงานก็ตามดูได้ทุก session ถ้าขยันพอ (แต่อดได้ของแจกนะ)

ช่วงนี้วันหยุดก็เลยนั่งดูบ้างเป็นบางอันเฉพาะที่สนใจ (เช่น Google TV) อันนี้เป็นแนวคิดเบื้องหลังการออกแบบ UI ของ Android Honeycomb

One Content, Multiple Screens

ในฐานะคนทำเว็บ สิ่งที่เราจะเจอแน่ๆ ในอนาคตคืออุปกรณ์ชนิดใหม่ๆ ที่มี 1) ขนาดของหน้าจอ และ 2) input method ที่ต่างออกไปจากพีซี

ผมกำลังทำ mobile theme อันใหม่ของ Blognone อยู่ หลังจากเรียนรู้ว่าอันเก่ามันยังไม่ค่อยดีนัก เท่าที่ลองทำมาพบว่า mobile edition (สำหรับจอ capasitive เราคงไม่ต้องพูดถึงมือถือแบบจอไม่สัมผัสหรือ resistive กันแล้ว) จำเป็นต้อง

  • ปุ่มใหญ่ๆ ใช้นิ้วกดได้ไม่ผิดพลาด ไม่ต้องเล็ง
  • ขนาดความกว้างพอดีกับหน้าจอ แปลว่าไม่ควรมี sidebar
  • ห้ามมีพวกเมนูแบบ scroll list ที่ต้อง mouse over ก่อน
  • หน้าจอต้องไม่ยาวเกินไป เพราะการ scroll หน้าจอด้วยนิ้วทำได้ยาก (ตรงนี้พวก collapsible ช่วยได้)
  • รองรับจอสองขนาดคือแนวตั้งกับแนวนอน อันนี้ยังหาโซลูชันไม่ได้กับพวกรูปภาพและ embed video ให้ปรับขนาดอัตโนมัติตามความกว้างของจอที่เปลี่ยนไปได้

อันนี้แค่แนวทางกว้างๆ ในรายละเอียดมันต้องมีอย่างอื่นอีกมาก

Problem of HTML5 Video

แม้ว่า HTML5 จะถูกผลักดันหรือส่งเสริมแค่ไหน แต่บางกรณีมันยังสู้เจ้าตลาดเดิมอย่าง Flash ไม่ได้จริงๆ (ซึ่งเป็นประเด็นที่เจ้าใหญ่อย่าง Hulu และ YouTube เห็นตรงกัน)

ที่ชัดเจนคือ <video> ยังขาด common UI สำหรับฟีเจอร์ที่มีใน Flash ลองดูตัวอย่างของวิดีโอ Firefox 4 Beta 1 UI Changes

Engadget for Android - UI Analysis

อย่างที่ประกาศไปแล้วใน Blognone Widget for Android ว่าผมตั้งใจจะทำ mobile app เต็มรูปแบบสำหรับ Blognone บน Android

ปัญหาก็คือผมไม่รู้ว่า mobile app ที่ดีควรมีอะไรบ้าง (เพราะทุกคนเพิ่งข้ามเรดไลน์เข้าสู่ "โลกใหม่" ด้วยกันทั้งนั้น) แต่ทางแก้ก็ไม่ยากนัก นั่นคือ เรียนรู้จากผู้มาก่อนทั้งหลาย ว่าอะไรเวิร์ค อะไรไม่เวิร์ค

ผู้มาก่อนที่ใกล้เคียงกับเรามากที่สุด ไม่มีใครดีไปกว่า Engadget for Android

10/GUI - Future of Computing

อ่าน Editorial: 10 outdated elements of desktop operating systems ที่ Engadget ดีมาก พูดถึงปัญหาของ "การใช้คอมพิวเตอร์" ในแง่มุมต่างๆ ตั้งแต่การจัดการหน้าต่าง ไปจนถึงความยากในการดูสเปกว่าเล่นเกม xyz ได้หรือไม่

ท้ายบทความยังแนะนำวิดีโอ 10/GUI คอนเซปต์ของคอมพิวเตอร์ยุคหน้า