Radiz Sutthisoontorn

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

เข้าเรื่องกันครับ สิ่งที่ผมจะพูดถึงวันนี้ เป็นส่วนหนึ่งในการออกแบบ Usability และ เกี่ยวข้องกับ User Experience สิ่งที่จะพูดตามหัวข้อเลยครับ Eye Tracking Theory ครับ

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

Dean Hachamovich พูดเกี่ยวกับ IE9 ในงาน MIX10:

เราวางแผนที่จะสนับสนุน HTML5 ให้ทำงานได้ดีกับ Hardware ต่าง ๆ ที่ใช้งานร่วมกับ IE9 รวมไปถึงทำให้ IE9 ทำงานได้ดีกับ GPU เพื่อให้ทำงานกับ HTML5 Platform ได้สูงสุด และ ขอบคุณนักพัฒนาทุก ๆ คนที่ช่วยกันรณรงค์ให้ผู้ใช้งานทั่วไปเลิกใช้ IE6 กัน

เป้าหมายที่ 1 สำหรับ IE9: พัฒนาให้ IE9 ทำงานได้ดี และ รวดเร็ว เมื่อใช้ Javascript และ Feature ที่เป็น JS ใน HTML5 โดยใช้ Multi-Core

เป้าหมายที่ 2 สำหรับ IE9: คือ IE9 จะสนับสนุน Web Standards เต็มที่ลดการเขียน code ที่ต้อง Hack และ Filter สำหรับ Web Browser ที่ต่างกัน (เพิ่งสำนึกตนเหรอครับ ก็มีแต่ของค่ายพี่นั่นแหละ ที่มีปัญหากว่าชาวบ้านเขาที่สุด)

เรารัก HTML5 มาก และ อยากให้มันทำงานได้ดีใน IE9 เราจะทำการสนับสนุนทุก ๆ อย่างสำหรับ Web Platform เหมือนที่เราทำมาแล้วใน IE8 (CSS2.1) border-radius rgba opacity CSS3 test: ผ่าน 578 test โดย CSS3.info

เราพยายามทำตาม และ สนับสนุน Standards ให้มากที่สุด เพื่อลดข้อแตกต่างระหว่าง Browsers ให้มากที่สุดเท่าที่จะทำได้ การทำงานบน GPU ของ IE9 จะทำให้ HTML5 ทำงานได้ดีที่สุดบน Graphic Hardware นั้น ๆ

ถอด จากข้อความของป้ามอลลี่ Molly E. Holzschlag (@mollydotcom)

จะเห็นว่า HTML5 เริ่มคลุกวงในเข้ามาทุกทีแล้วนะครับ Standards เริ่มบีบให้ Microsoft เปลี่ยนเพื่อความก้าวหน้าทางเทคโนโลยี และ ความเท่าเทียม

ช่วงนี้ผมวุ่นวาย ๆ กับงานจนเวลาที่มีว่างเล็กน้อยจะเอาไปใช้ในการบำบัดรักษา พักผ่อนสมองตน และ เปิดห้องเรียนสอน xhtml css coder กับ แมกซ์ (@max_mayer) เล็ก ๆ ที่บ้านเป็นส่วนใหญ่ ต้องขออภัยที่ “หายหัว” ไปนานโขพอสมควร สำหรับหน้าที่เขียนบทความ ณ สถานที่แห่งนี้ เลยต้องให้พร รับบทหนักอยู่คนเดียวเป็นส่วนใหญ่ช่วงนี้ เพราะพร พลังเยอะ ฮ่า ๆ

โอเคครับ วกกลับมาหาสิ่งที่จะพูดกันวันนี้ สั้น ๆ ห้วน ๆ ไม่ยาวมากเท่าที่สมองจะรวบรัดกระชับมาให้ได้ ต้องอารัมภบทก่อนว่าที่ผ่าน ๆ มาผมได้มีโอกาสคลุกคลีกับระบบงานที่ต้องทำงาน คร่ำคิด วิเคราะห์ สิ่งของต่าง ๆ ที่ส่งผลต่อผู้ใช้งานปลายทางส่วนใหญ่ (ในขอบข่ายของผลิตภัณฑ์เว็บไซต์นะครับ) ต้องขอขอบพระคุณพี่เอ้อ (@errorlloyd) และ พี่เอ้(@DjFunkyDog) ที่ให้ไอเดีย และ สอนสั่งทั้งทางตรง และ ทางอ้อม ทำให้ผมสนใจที่จะต้องหาความรู้ สังเกต และ ทดลอง อะไรบางอย่างที่เกี่ยวกับ User Experience (แปลเป็นไทยอย่างไรดี ความพึงพอใจของผู้ใช้งาน ดีไหม?) ครับ อย่าเพิ่งบ่นนะว่า ทำไมไอ้คุณปลา มันไม่เขียนอะไรที่มันเป็น HTML / CSS เลยวะ? เพราะผมคิดว่า ผมบ้าครับ :)

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

การวางกลยุทธ์เนื้อหาที่ใช้กับเว็บไซต์นั้นมีมานมนานพอ ๆ กับการผลิตเว็บไซต์ออกไปสู่โลกออนไลน์ แต่บทบาทของการวางกลยุทธ์เนื้อหาจะเริ่มมามีบทบาทเด่นชัดมากขึ้นในช่วง 2 – 3 ปีที่ผ่านมา เพราะอะไร? … แน่นอนครับจำนวนผู้ใช้งานของอินเตอร์เน็ต และ จำนวนผู้ประกอบการธุรกิจบนโลกออนไลน์ มีเพิ่มมากขึ้นเป็นหลายเท่าตัว ปี ต่อ ปี ทำให้การแข่งขันกันของผู้ประกอบการต่าง ๆ บนโลก online มีเพิ่มมากขึ้นเรื่อย ๆ อัตราที่จะเกิด และ ดับในวันเดียว 100 เปอร์เซ็นต์ ก็มีเช่นกัน

คนที่คิดริเริ่มก่อน คิดผลิตภัณฑ์ หรือ บริการ ออนไลน์ได้ก่อนใครก็จะมีภาษีได้ถือไพ่เหนือกว่า ยิ่งถ้าได้การวางแผนระบบโครงสร้างพื้นฐานมาอย่างดี (Infra Structure) ก็ยิ่งมีลุ้นว่าจะอยู่ได้ยืนยาว หรือ ตลอดไป แต่กระนั้นก็ยังคงต้องพึ่งพาเนื้อหา (Content) ที่ดีเพื่อดึงดูดใจกลุ่มเป้าหมายด้วย (End Users) คนที่มาทีหลังก็คงต้องทำการบ้านการอย่างหนักกันหน่อย ว่าจะทำอย่างไรให้เกิดความแตกต่างในผลิตภัณฑ์ของตน (Differentiate) กับบริษัทคู่แข่งเราทราบกันแล้วว่าปัจจุบันนี้ เนื้อหา สามารถถูกนำไปเผยแพร่ได้หลายช่องทาง (Channel) และ ในหลาย ๆ สื่อ (Media) ต่อไปนี้คงต้องวางแผนกันรอบคอบหน่อย ปวดหัวมากขึ้นกันหน่อย และ ต้องใช้ผู้เชี่ยวชาญฌฉพาะทางมากขึ้นหน่อย คงจะหมดยุคสมัยของมนุษย์เป็ดแล้วอย่างแท้จริง ต้องขอบคุณ Sir Tim Berners Lee ที่สร้าง WWW ให้เราได้ใช้กัน สื่อ ตัวนี้เป็นสื่อที่แพร่กระจายตัวได้รวดเร็ว และ เข้าถึงมนุษยชาติได้ทุกท้องที่ทุกเพศทุกวัย หลาย ๆ บริษัท หรือ นักธุรกิจคงเห็นแล้วว่ามันเป็นของที่ลงทุนถูกแสนถูกแต่กำไรที่จะได้กลับมานั้นมหาศาล ถ้าทำการบ้านมาดี

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

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

เชื่อว่าเพื่อน ๆ พี่ ๆ น้อง ๆ เห็นชื่อเรื่องที่เกริ่นไว้คงทราบกันทันทีว่าคราวนี้ผมจะพูดถึงหนึ่งในสมาชิกหน้าใหม่ของ HTML5 ซึ่งก็คือเจ้า dialog นั่นเองครับ เนื่องจาก HTML5 นั้นมีการปรับโครงสร้างภาษา ไปค่อนข้างมากครับ เหตุผลก็คงหลีกไม่พ้นประโยชน์เหล่านี้ครับ เช่น เพื่อให้ง่ายต่อการใช้งานในการออกแบบโครงสร้าง HTML/CSS และ มีความหมายมากขึ้น (semantics) เพราะฉะนั้นเจ้า dialog จึงถูกสร้างมาเพื่อที่จะเข้ามาทำหน้าที่ในการควบคุมโครงสร้างเนื้อหาที่เกี่ยวข้องกับกรณีต่อไปนี้ครับผม

• บทสนทนาระหว่าง คนสองคน หรือ หลาย ๆ คน
• บทสัมภาษณ์
• บทละคร ที่เป็นการสนทนากันระหว่างตัวละคร
• และ อื่น ๆ ที่เกี่ยวข้องกับการสนทนา ปฏิสัมพันธ์ระหว่างคนสองคนขึ้นไป

ใน HTML5 นั้น dialog จัดอยู่ในหมวดของ Flow Content ชนิด Grouping Content (@pornAntha จะอธิบายเกี่ยวกับหมวด และ ชนิดของ elements ใน HTML5 เร็ว ๆ นี้ครับ) ซึ่งรูปแบบโครงสร้างของ code จะเป็นอย่างตัวอย่างนี้ครับ: