Web Usability Design

Input แบบต่างๆ ของ HTML5 ที่น่านำมาใช้

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

วิวัฒน์ของเว็บ ณ คศ. 2009

กลับมาแล้ว :) ต้องขอโทษที่หายไปนานครับผม แต่สำหรับคนที่ follow ผมที่ Twitter หรือ อยู่ใน Facebook คงได้เห็นผม re-tweet หรือ share link บทความคนอื่นที่คิดว่าเป็นประโยชน์ให้อ่านอยู่นานนม เวลาในชีวิตมันคับแคบอึดอัดไปหน่อยต้องขออภัยมา ณ​ ที่นี้ด้วยนะครับ ช่วงที่หายไปก็ไปขุดคุ้ยทำงาน หมกมุ่นอยู่กับเทคโนโลยีที่มันผุดขึ้นมาใหม่ แล้วก็กระแส User Experience พิวัฒน์ในโลกกว้างทำให้ศาสตร์ต่าง ๆ เริ่ม ๆ เกิดขึ้นมาใหม่ หรือ บางอย่างที่มีมานานนมแล้วแต่ยังไม่ได้ บัญญัติ จำกัดความไว้ ก็ได้คำบัญัติ จำกัดความกันเสียที วันนี้ผมก็มาเขียนข่าว เชิงบ่น เป็น guideline แจ้งแถลงให้ได้รับรู้ว่าเราขยับกันไปที่ไหนกันได้บ้างแล้ว

ในสายงานการผลิตผมก็ขอพูดเต็ม ๆ ปากเสียทีว่า ขอต้อนรับเข้าสู่โลกของการทำงานเชิงวัตถุ จากที่ผมได้พูดคุย ถกปัญหา และ วิเคราะห์ร่วมกับพร (@pornAntha) เมื่อ W3C ได้ประกาศเทคโนโลยีต่าง ๆ ที่จะใช้กับ www มาเรื่อย ๆ เช่น EmotionML, HTML5 และ CSS3 จะเห็นได้ว่ามันเริ่มจะยาก และ ลงลึก และ ทำงานได้ละเอียดลึกซึ้งเชื่อมกันเป็นทอด ๆ ต่อไปนี้เราจะทำงานแยกเป็น unit กันชัดเจนมากขึ้นเพราะเทคโนโลยีบนโลก www นั้นเริ่มลึกซึ้งกันไปเรื่อย ๆ ยอดมนุษย์ (ในที่นี่ผมหมายถึง all in one people หรือ generalist) จะเริ่มลดลงคุณจะเห็นว่าหลาย ๆ บริษัทเริ่มที่จะทำงานแยกสัดส่วนกันชัดเจนแล้ว (ผมขอกล่าวถึงแต่อาชีพใหม่ และ อาชีพที่ต้อง update นะครับ) เช่น

มาทำ Wire Frames กันเถอะ

ผมไม่ทราบว่าเพื่อน ๆ designer, Media Agency และ บริษัทต่าง ๆ ส่วนใหญ่ในประเทศเรามี process การทำงานกันอย่างไรบ้าง แต่เท่าที่สอบถามคนรอบข้างนั้น หลาย ๆ คนยังไม่เคยใช้หลักการระดมสมองที่เรียกว่า Wire Framing นี้ น้อยคนมากที่รู้จัก หรือ อาจจะทำอยู่เป็นนิจแต่ไม่รู้ว่า ไอ้สิ่งที่ทำนั้นมันคือ อะไร ผมเองก็เพิ่งรู้จักมาเมื่อไม่กี่เดือนนี้เหมือนกัน ว่าสิ่งที่เราทำบางครั้งก่อนลงมือทำงานขั้นตอนหนึ่ง มันเรียกว่า Web Wire Framing ต้องขอบพระคุณพี่เอ้ @DjFunkyDog ที่เปิดหูเปิดตา และ เอื้อเฟื้อเวลานั่งสอนน้องคนนี้มา ณ ที่นี้ เป็นอย่างมากครับ (สอนโดยไม่รู้ตัวบางทีก็มี เอิ๊ก ๆ) ก่อนอื่นผมจะขออนุญาติอธิบายเกี่ยวกับ Wire Frames ก่อนนะครับ

Wire Frame นั้นเป็นขั้นตอนที่ ทุกคนที่เกี่ยวข้องในตัวผลิตภัณฑ์นั้น ๆ ต้องร่วมกันแสดงความคิดเห็น ก่อนลงมือผลิตเจ้าผลิตภัณฑ์นั้น ๆ ขึ้น เหมือนเป็นการร่วมกันร่าง พิมพ์เขียวของเจ้าสิ่ง ๆ นั้นขึ้นมา โดยแต่ละทีมนั้นสามารถทำ Wire Frame ของแต่ละทีมมาก่อน ก่อนที่จะ Finalize Wire Frames ของเจ้าผลิตภัณฑ์ที่จะสร้างขึ้นนั้นอีกทีเป็นรอบปิดท้าย

สร้าง Findability Website ด้วย Web Standards

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

วันนี้ผมจะพูดถึงอะไร ผมจะพูดถึง Findability website ชื่อมันดูโก้เก๋ดีไหมครับ มันเป็นแนวคิดใหม่ของ Aaron Walter จริง ๆ แล้วก็ไม่ใช่อะไรใหม่ไปเลยทีเดียวเพียงแต่แนวคิดเหล่านี้ยังไม่มีใครบัญญัติชื่อให้มัน ลักษณะการทำงานของมันอย่างเป็นรูปธรรม ทีนี้เรามาดูกันว่า ไอ้ Findability Web มันคืออะไร ซึ่งโดยการทำงานของมันแล้วมันก็คือ Website ที่มีเป้าหมายมุ่งเน้นช่วยเหลือผู้ใช้ให้

  • เจอ website ที่พวกเขาค้นหา
  • เจอ content ที่ต้องการใน website นั้น ๆ
  • หรือ รับรู้ถึงคุณค่า ของ content ใหม่ ๆ ที่พวกเขาค้นเจอ

accessibility หน้าที่เรา ไม่ใช่หน้าที่ใคร

หลายคนในตอนนี้วันนี้ ที่ทำงานอยู่ใน field นี้ (web designer และ web programmer) เชื่อว่า 95% ยังไม่รู้จัก accessibility หรือ รู้จักในทางที่ผิด ๆ หรือ ไม่ดีพอ คุณจะทำอย่างไรถ้าวันนึงเจ้าสิ่งนี้เป็นหนึ่งใน requirement ของลูกค้าของคุณ? หลาย ๆ คนคิดว่า acessibility เนี่ยต้องมานั่งทำหลังจากที่ website เสร็จแล้วเปิดใช้งานแล้วค่อยมาตามเก็บกันทีหลัง หรือ ทำก็ต่อเมื่อลูกค้ามาร้องขอ เป็น requirement เพิ่มเติมเก็บเงินกันไป

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

James Edwards, กล่าวไว้ในบทความ Why Accessibility? Because It’s Our Job! ว่า

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

CSS กับการคิดนอกกรอบ (สี่เหลี่ยม ตอนที่ 2)

CSS ทำให้สิ่งที่ผมกล่าวมาในตอนที่ 1 นั้นเปลี่ยนไป และแน่ใจได้เลยว่า ถ้าได้ลองใช้ดูแล้วจะได้รู้ว่า ความฝันที่พวกเรานั้นเคยวาดไว้ มันจะเป็นจริงขึ้นมาเสียทีแล้ว เราจะต้องเริ่มทำความเข้าใจ มันจากอะไร Designer หลาย ๆ คนที่เริ่มทำงานกับ CSS นั้นจะรู้ได้เลยว่า ลักษณะโครงสร้างของ CSS นั้น แตกต่างไปจาก Table และก้าวข้ามขีดจำกัดของ Grid Design ได้สบาย ๆ เลย และมันสามารถลดสิ่งที่ไม่จำเป็นต้องใช้ออกไปจากงานของเราได้มากขึ้น และ ทำให้เราจัดการงานของเราได้ดีขึ้น ตอบสนองความต้องการจากไอเดียได้มากขึ้นกว่าเดิม (มองในแง่มุมของ Designer นะครับ)

CSS Visual Model เป็นได้ทั้ง lines และ boxes ซึ่งใช่มันเป็นส่วนหนึ่งของ Grid แต่เราสามารถทำอะไรกับ boxes ได้มากขึ้นไม่ว่าจะด้านในด้านนอกของ boxes หรือ เราอาจจะอยากให้มันไม่ทำหน้าที่เป็นเหมือน boxes ด้วยก็ได้ เราสามารถกำหนดคุณลักษณะให้กับมันได้อย่างอิสระตามที่เราอยากจะให้มันเป็น

Back to Top