ผู้บริหารระดับสูงด้าน Social Media ในบริษัทระดับโลก

ณ วันแรกที่ทำกิจกรรม มีงานเปิดตัวของรถ Ford Fusion อย่างยิ่งใหญ่อลังการณ์ในสนามกีฬาฯ และ Bloggers ก็ถูกเชิญมาในงานนี้เป็นจำนวนมากเช่นเดียวกัน คนที่ๆไปยืนพูดคนแรกก่อน CEO ของฟอร์ด ก็คือ Mr.Scott Monty นี่เอง ซึ่งเค้าพูดได้ดีมากครับ พอวันต่อมาที่งาน North America International Auto Show ทางฟอร์ด ได้ทำบูทสำหรับ Online Influencer ไว้โดย Provide ทั้ง WIfi (ที่ช้าเพราะโดนคนแย่งกันอุตลุด) และปลั๊กไฟพร้อมรู USB power ซึ่งที่น่าประทับใจคือฟอร์ดให้ ฺBloggers เลือกสัมภาษณ์ผู้บริหารของฟอร์ดหลายๆคนแบบส่วนตัว แน่นอนว่าหลายคนก็สัมภาษณ์เรื่องรถยนต์และทิศทางในอนาคตกับ Head ทางด้านนู้นด้านนี้ ส่วนผมเลือกสัมภาษณ์กับคุณ Scott Monty ในแง่มุมมองด้าน Social Media ในบริษัทขนาดใหญ๋

สำหรับคุณ Scott Monty นั้นได้รับการดึงตัวจากฟอร์ดเข้ามาทำงาน และ CEO ของฟอร์ดให้สมญานามเขาว่าเป็น a Visionary การสัมภาษณ์เป็นกันเอง ฟังง่าย น่าประทับใจดีครับ การพูดเพื่อลง YouTube แบบนี้คือการพูดในฐานะที่เป็นตัวแทนบริษัทระดับโลก ซึ่งเค้าตอบได้ค่อนข้างดี สังเกตจากที่ผมถามเรื่อง Agency ก็ยังบอกว่าทำงานกับใครบ้าง (แต่ไม่ได้บอกลึกไปถึงรายละเอียดการทำงาน)

ในฐานะที่ฟอร์ด เป็นบริษัท Big3 ของ USA เจ้าเดียวซึ่งยังมีสัญญาณทางธุรกิจที่ดีกว่า GM และ Chrysler อยู่มาก ทำให้มีความน่าสนใจเรื่องนโยบายการตลาด และยังเป็นบริษัทแรกๆที่เชิญ Bloggers จากทั่วโลก (146 คน) ไปร่วมงาน Auto Show นี้ที่เมือง Detroit สหรัฐอเมริกาด้วย แน่นอนว่าต้องลงทุนมากกับการให้ความสำคัญกับ Online Influencer ผมจึงอยากสัมภาษณ์เค้าในจุดนี้โดยเน้นในสิ่งสำคัญที่สุดที่บริษัทในเมืองไทยไม่ค่อยประสบความสำเร็จจากการเริ่มทำ Social Media Campaign นั่นคือ ทำอย่างไรให้ผู้บริหารเข้าใจ และเข้าถึงถึงปรัชญาของยุคสมัย เพื่อให้เกิดแรงผลักดันในองค์กรครับ

Interviewed @ScottMonty about Social Media perspective

สัมภาษณ์ @ScottMonty เรื่อง Social Media @FORD สัมภาษณ์โดย @iPattt @Booruball

สำหรับการแปลนี้ ถ้าท่านไหนมีจุดที่จะแก้ไขหรือเพิ่มเติม comment ได้เลยครับ ขอบคุณมากครับ

ทำไมถึงตัดสินใจที่จะเอาจริงเอาจังทางด้าน Social Media

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

เมื่อเราตั้งโปรแกรมเหล่านี้ขึ้นมา เราต้องทำงานอย่างมีหัวจิตหัวใจ (mentality) เราพูดคุยกับผู้คนทุกวัน เรามีเครื่องมือจำนวนหนึ่งที่ใช้ Monitor กระแสของ Conversation เหล่านี้ เช่น Google Alerts หรือใช้ตั้งแต่สิ่งที่ง่ายที่สุดคือการ Search twitter ไปจนถึงโปรแกรมซับซ้อน Proprietary ซึ่งการใช้เครื่องมือเป็นพื้นฐาน และกเป็นเหตุผลที่ทำไมเราถึงจัด Event ใหญ่ขนาดนี้สำหรับ Influencer เรารู้ว่าเราเชิญใครมา และเรารู้ว่าเค้ามี Conversation กับกลุ่มไหน คีย์เวิร์ดใดซึ่งง่ายต่อการ Monitor ในวงของ Influencer กลุ่มนั้น และสามารถหา Feedback จากการเข้าถึงกลุ่มนั้นๆที่มีต่อบริษัท Ford ได้อย่างง่ายดาย

การจะ Implement Social Media ได้ จำเป็นอย่างยิ่งที่ต้องให้ผู้บริหารเปิดใจ ทำอย่างไร

ผู้บริหารระดับสูงมักเป็นคนที่ยุ่งมากและเป็นพวกอนุรักษ์นิยม การที่เราจะประสบความสำเร็จใน Social Media ไม่ได้หมายความแค่เรามี CEO ที่ชอบ tweet และ Cheif marketing Officer ที่เขียนบล็อก หรือมีเครื่องมีอที่ดีในการปฎิบัติการ แต่มันเกี่ยวข้องกับการปรับเปลี่ยนวัฒนธรรมองค์กร ( Culture Change ) เราต้องมุ่งมั่นเข้าใจสิ่งที่เป็นพื้นฐานที่สุดของมนุษย์ ต้องเข้าใจลูกค้า เขาเหล่านั้นไม่ได้ต้องการการ Update facebook หรือ twitter จากทางบริษัท แต่เค้าต้องการเพียงแค่”ความจริง”

How CEO or Executives levels are skeptical about Social Media?

ตัวอย่างมาจากเหตการจริงคือ Chief Financial Officer นั้นมีความกังวลเกี่ยวกับ productivity ในการประชุมครั้งนั้น คุณ Scott เริ่มจากการตั้งคำถามใน ทวิตเตอร์ว่า ” For the new vehicle that you buy , What the minimum level of Fuel economy you wanna see to make that a good purchase?” ก่อนประชุมกับระดับ executives หลังจากนั้นประมาณ ครึ่งชั่วโมงได้กลับมาดูอีกครั้ง พบว่ามี 75 Mentions ในเรื่องนี้ และพบ Range ความต้องการกว้างมาก ตั้งแต่คนขับประเภท ไม่แคร์ว่าจะกินน้ำมันแต่อยากได้เครื่อง V8 ไปจนถึงอยากได้ความประหยัดระดับ 100 miles/gallon และพบ Range ที่เป็นเหตุเป็นผลมากที่สุดในช่วง 30-40 Mpg ซึ่งสรุปได้ว่าเราควรมุ่งทำธุรกิจกับกลุ่มนี้ (Projecting some business) ผลปรากฎว่า CFO ประหลาดใจและพึงพอใจมาก อีกทั้งยังคิดได้ว่า การเข้าถึง feedback จากลูกค้าอย่างต่อเนื่องเช่นนี้ทุกวัน จะเกิดผลประโยชน์ต่อธุรกิจมากทีเดียว (ทีนี้ CFO ก็ชอบ Social Media แล้ว)

เตรียมการสร้าง Social Network อย่างไรในฐานะ Global Company

เราจำเป็นต้องมี ยุทธศาสตร์ และ วิสัยทัศน์ , แต่ในแง่วิธีการนั้นไม่สามารถจะบอกให้ทำได้อย่างชัดเจนในแต่ละพื้นที่และสถานการณ์ แต่บอกเป็น Guideline คร่าวๆตามปรัชญาของความเป็นมนุษย์ (Humanization) และในแง่ที่ Ford ต้องการมอบคุณค่า (Value) กับคนในยุคปัจจุบันที่อยู่ในภาวะรีบเร่ง ต้องการการตอบสนองได้ทุกอย่าง , ดังนั้น วิธีการ Execcution ผ่าน Social media เช่น Tactics, Programs ต้องอาศัยความเข้าใจเรื่อง Individual Marketing และอาศัยความสามารถด้านกลยุทธและแท็กติกของ Communications Manager หรือ Marketing Manager ของประเทศนั้นๆ

Ford ทำงานกับ Marketing Agency อย่างไร

ฟอร์ดนั้นมีความสัมพันธ์อันดีกับ WPP holding company ซึ่งมี Agency อยู่มากมายนับร้อยบริษัท ในด้านของ Social Media เราได้ทำงานกับ Ogilvy และ Team Detroit ใน USA ส่วนในยุโรปก็จะเป็น Blue Hive และยังมีหลายๆเอเจนซี่ในอีกหลายประเทศ ส่วนการทำงานก็มีการร่วมทำงานในวัตถุประสงค์ต่างๆ เอเจนซี่เหล่านี้มีคนที่มีความเชี่ยวชาญและฟอร์ดเองก็ไม่ได้มีคนเพียงพอที่จะทำเองทั้งหมด แต่การทำงานของเราถือว่าเป็นทีมที่มีความกลมเกลียวกันดี ( Blended Team ) อย่างงาน Blogger วันนี้มาจาก 1 ใน 4 ทีมที่ทำงานร่วมกันอยู่

ทำไมจึงเชิญ Live Style Bloggers มาเยอะกว่า Automotive Bloggers

การเชิญ 146 bloggers มาครั้งนี้ Ford ต้องการเข้าถึงให้มากกว่าผู้นำเสนอสือด้านรถยนต์ “move beyond Traditional automotive journalists” ซึ่งปกติต้องปรากฎในงานนี้อยู่แล้ว และคนกลุ่มรถยนต์นี้มี relationship ที่ดีกับบริษัท Ford อยู่แล้ว , แต่ต้องการโฟกัสไปยังกลุ่มที่เป็นกลุ่มทั่วๆไป non-traditional target เช่นกลุ่มอนุรักษ์สิ่งแวดล้อม (Green) , กลุ่ม Lifestyles, กลุ่ม Design เราต้องการรู้ว่าคนรู้สึกยังไงกับเรา ไม่ใช่เรารู้สึกยังไงกับเค้า และวิธีที่จะเข้าถึงผู้บริโภคได้ดีคือฟังคนทุกคนในแง่มุมต่างๆพูดถึงรถยนต์ หลายๆครั้งเราอยากได้คำแนะนำด้านรถจากคนที่คล้ายๆเรา ฟอร์ดเองอยากจะลงไปยังกลุ่มเฉพาะด้านที่เล็กลงเรื่อยๆเช่นกลุ่มชอบฟังเพลงก็น่าจะพูดถึงระบบเสียงที่ดีในรถยนต์ เป็นต้น

แล้วจะ Monitoring ผลของงานนี้อย่างไร

มันง่ายมาก เพียง Tracking Twitter account , Blogs , youtube, และได้ขอให้ใช้ #FordNAIAS ซึ่งเป็นตัวช่วยให้ Track ง่ายขึ้นอีก ซึ่งเรามีเจ้าหน้าที่ Quick hit report ทุกๆ วัน ไม่ต่างกับ การสรุป Major Show Report ที่เราทำสำหรับงาน Event นี้

ขอขอบคุณ Ford Motor Company และคุณ Scott Monty ครับ

@Booruball กับ @ScottMonty ถ่ายรูปด้านหน้า Ford Fusion ใหม่

หมายเหต ภาพประกอบไม่เกี่ยวกับบทความนี้แต่อย่างใด ที่มา www.thaimarch.com/index.php?topic=13479.15

การทำโปรเจ็คเว็บไซต์ขนาดใหญ่ จ้างคนอื่นทำอย่างเดียวเจ๊ง ต้องมี in house ด้วย

ที่ผ่านมาทางทีมงานได้ order หลากหลายจากลูกค้า โดยมีลูกค้าบางกลุ่มมีโมเดล business ทาง internet ในใจเช่นบางคนอยากเป็นศูนย์กลางการ​ซื้อขายของเฉพาะด้าน (Classified) หรือบางคนต้องการทำ
ร้านค้าออนไลน์ครบวงจร (e-commerce) บางคนต้องการเป็นตลาด และมี social network ในตัวด้วย

จากนั้นลูกค้าก็จะเรียกบริษัททำระบบและทำเว็บเข้าไปคุย บางบริษัทก็เสนอราคาเป็นโปรเจ็ค บางบริษัทก็อาจเสนอราคาเป็น manday ซึ่งการเสนอราคาอย่างหลัง มักไม่ค่อยได้รับการจ้างเพราะลูกค้าเองไม่แน่ใจว่าตนเองจะต้องจ่ายรวมแล้วเท่าไหร่ แต่ท้ายที่สุด ลูกค้าที่เลือกจ่ายเป็นโปรเจ็คกลับมัปัญหาระหว่างผู้รับจ้างและผู้จ้างมากกว่าเพราะ requirement งอกออกมา ( การทำเว็บใหญ่แล้ว requirement เพิ่มขึ้นไม่แปลก มันเป็นกฎซะด้วยซ้ำ )

ในขณะที่การจ้างทำโปรเจ็คใหญ่โดยที่ตัวลูกค้าเองนั้นมีเพียงไอเดีย และไม่มี business ที่เป็นจุดแข็งอยู่แล้วและต้องการนำ internet มาต่อยอด โครงการจะเจ๊งทุกรายครับ

เว็บไซต์เหมือนองค์กร ต้องพัฒนาต่อเนื่อง ต้องรื้อและทำใหม่ ไม่สามารถทำครั้งเดียวเสร็จ

Business Model ที่ให้คนอื่นสร้างให้ยากที่จะประสบความสำเร็จได้ครับ เพราะ IDEA นั้นไม่สำคัญ แต่สำคัญที่ Implementation ต่างหาก ( วาทะ Guy Kawasaki ข้อ 8 ) หลายอย่างเกิดขึ้นโดยความบังเอิญ เช่นใครจะรู้ว่า Flickr ไม่ได้ต้องการเป็นเว็บ community ด้านรูปภาพ แต่กำเนิดจากการตั้งใจจะทำเกมส์ต่างหาก แต่ฟังก์ชั่นเก็บรูปได้รับความนิยมมากจึงถูกพัฒนาขึ้นมา (อ้างอิง @Jakrapong)

การทำเว็บไซต์ขนาดใหญ่จึงไม่เหมาะแก่การจ้างเป็นโปรเจ็คสำเร็จรูป

การ implementation สำคัญเพราะเราจะไม่มีทางรู้ภาพรวมเลยว่า เว็บเราจะได้รับความนิยมหรือไม่? user friendly ที่ดีมาจากการ research และรับ feedback จากลูกค้าไปเรื่อยๆ ปรับปรุงไปเรื่อยๆ แม้แต่ facebook ก็ยังปรับเปลี่ยนรูปแบบมาเรื่อยๆ ดังนั้นลักษณะการทำเว็บไซต์ขนาดใหญ่จึงไม่เหมาะแก่การจ้างเป็นโปรเจ็คสำเร็จรูป คุณอาจเถียงว่าเว็บราชการก็จ้างเป็นโปรเจ็คสำเร็จรูปนี่นา แต่ผมก็ถามกลับได้ว่ามีเว็บราชการไหนที่ Work และมีคนใช้จำนวนมากตั้งแต่การสร้างครั้งแรกเสร็จเรียบร้อยบ้าง?

แล้วจะแก้ไขหรือพัฒนาเว็บอย่างไรดี?

1. ธุรกิจของคุณ หรือตัวคุณต้องมีจุดแข็งสักอย่างก่อน

ค้นหาจุดแข็ง แล้วพัฒนาให้จุดแข็งของคุณนั้นสามารถที่จะต่อเชื่อมกับ Model Business ของคุณได้ อย่าเล็งผลเลิศจากการสร้างระบบออนไลน์เพียงอย่างเดียว กรีณีนี้ผมเคยเขียนไว้ในบล็อก One2Car ระบบต้องมาควบคู่กับการสร้างมาตรฐานการบริการ จะเห็นว่า one2car มีจุดแข็งที่”ช่างกล้องและการบริการจัดระเบียบถ่ายรูปรถ” และ การสร้างตลาด เริ่มด้วยการสร้าง Demand อาจง่ายกว่าเริ่มด้วยระบบ

2. ควรลงทุนกับพนักงานประจำเมื่อต้องทำโครงการใหญ่

ลองพิจารณาการทำโครงการให้ประสบความสำเร็จเพียง phase ที่ 1 อาจใช้ manday มากมายตั้งแต่ Art Director, System Analyst, Designer, Programmer ราคาก็แน่นอนว่าถ้าให้ถูกต้องตาม Business Model ของคนทำเว็บราคาน่าจะ 300,000 บาทขึ้นไปแน่นอนครับ และในจำนวน manday ที่แพงเหล่านี้ มีบางตำแหน่งที่เราใช้เค้าเพียงครั้งเดียวเช่น Art Diector ส่วนที่เราจะใช้ไปตลอดเพื่อปรับปรุงแก้ไขก็คือ Programmer

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

3. การจ้างงานเป็น phase

เพื่อแบ่งเบาภาระค่าใช้จ่าย และเกิดการดีลกับ Supplier ได้ง่ายขึ้น phase แรกควรเป็น phase แห่งการเรียนรู้ของคุณเอง ตัวอย่างที่ทำได้ง่ายมากเช่นการติดตั้ง blog เพื่อเพิ่มมูลค่าให้กับ domain name ของคุณเอง เป็นการตัดการเสียโอกาสในการรอเว็บไหญ่ที่ไม่รู้จะเกิดขึ้นหรือเปล่าด้วยการทำให้ website มีตัวตน ส่งผลด้าน SEO ที่ดี ณ วันที่ระบบใหญ่ถูกติดตั้ง

และเมื่อคุณได้ค้นคว้า Content ลึกลงไปใน keyword field ที่คุณเองต้องการทำธุรกิจ Community เล็กๆจะเกิดขึ้น และความเป็นตัวจริงของเราก็จะตามมาทั้งในมุมมองของคนภายนอก และตัวเราเองจริงๆครับ

ส่วน phase ต่อมาอาจเป็นการลง plugin สำเร็จรูปเพื่อทดลอง และหากลุ่มตัวอย่างหรือหน้าม้ามาอัด Content , การซื้อขายจำลองในเว็บไซต์เข้าไปเพื่อเรียก traffic ฯลฯ ก่อนจะรื้อและทำระบบที่ใกล้เคียงความต้องการมากขึ้นเรื่อยๆต่อไป ตามหลักการทำงานทางธุรกิจ เราควรจะลงทุนต่อยอดจากรายได้ที่เริ่มเข้ามา มากกว่าลงทุนตูมเดียวก้อนใหญ่ในครั้งแรก เพราะถ้า resource ไม่จำกัด model business ที่ถูกต้องจะไม่เกิด

สำหรับไทเกอร์ไอเดียนั้น มีให้บริการการทำงานสำหรับโปรเจ็คใหญ่ๆอยู่สองแบบครับคือ Design & CSS editting ซึ่งขั้นตอนนี้ทางทีมงานจะวิเคราะห์ Business Model ก่อนหาระบบและ System Architecture ที่เหมาะสมให้พร้อมทั้ง Design โดยใช้ประสบการณ์ของ Art Director อย่าง @iMenn เป็นผู้ design first draft ก่อนจะแจกจ่ายให้ Designer และให้ @rabbitinblack ซึ่งเป็นผู้เชียวชาญ CSS editting เป็นผู้ทำงานต่อจาก phase design ก่อนจะประสานงานกับ Programmer ฝั่งลูกค้าในการติดตั้งและ implementation ปรับปรุงต่อไปด้วยตนเองได้ ลองดูงานที่ผ่านมาใน http://www.ipattt.com/tag/tigeridea/
และ rate ราคาแบบ manday ของไทเกอร์ไอเดีย
อย่างไรก็ตาม ผู้เชี่ยวชาญด้าน Information Architecture ในไทยนั้นมีน้อยมากครับ ผมแนะนำ @malimali หรือที่ blog http://iamia.wordpress.com/

ตัวอย่างขั้นตอนการทำงานโครงการเว็บไซต์ขนาดใหญ่

1. Website WireFrame โดย @malimali team ร่วมกับลูกค้าเจ้าของไอเดีย
2. Web Design โดย TiGERiDEA
3. CSS Editing โดย TiGERiDEA
4. Systems Integration โดย in house ของลูกค้าเอง (ภายใต้การให้คำปรึกษาของไทเกอร์ไอเดีย)
5. Review and Improvement

สำหรับเว็บไซต์ที่ลูกค้าล้วนมี in house programmer อยู่แล้วและเคยทำงานร่วมกับ TiGERiDEA ได้แก่ Thailand YellowPages, Prakard Property , One2Car , digital2home และ painaidii

1. อย่าสับสนกับ “กฏสามคลิก”

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

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

จำนวนคลิกที่มาก ไม่ได้มีความสัมพันธ์กับความที่ผู้ใช้สามารถพบสิ่งที่เค้าต้องการ

ที่มา user interface engineer

2. สร้างคอนเท้นท์ที่น่าอ่านในรูปแบบตัวอักษร F

จากผลการวิจัยวิธีอ่านของผู้ใช้เว็บ 50 คน พบว่า จุดที่ผู้ใช้เว็บสนใจมากที่สุดอยู่ที่มุมบนด้านซ้าย และกวาดตาเป็นรูปตัวอักษร F ดังนั้นเป็นสิ่งสำคัญที่ต้องรู้สำหรับ Copy writer และผู้วางคอนเท้นท์ที่สำคัญที่จะทำให้สื่อสารได้เร็วที่สุด

F shape pattern บริเวณสีแดงคือบริเวณที่ตาของผู้ใช้กวาดไปและให้ความสำคัญมากที่สุด

ผลการทดลองจาก AlertBox

google golden triangle

ผลการทดลองจาก Nielsen’s independent research

3. เร่งความเร็วเว็บไซต์ อย่าให้ผู้ใช้ต้องรอ

ผู้ใช้เว็บปัจจุบันเกลียดการรอคอยเนื่องจากมีทางเลือกเยอะแยะ มีผลการทดสอบด้านประสิทธิผลของเว็บกับเวลาในการรอคอยการแสดงผลด้วยเช่นกัน

Bing ได้ทำการทดสอบและพบว่า ถ้าเว็บไซต์แสดงผลช้าขึ้นเพียง 2วินาที จะทำให้ ความพึงพอใจผู้ใช้ลด 3.8% และทำให้สูญเสียรายได้ (revenue per user) 4.3% และลดการคลิกลง 4.3% ซึ่งในฐานะบริษัทอย่างไมโครซอฟท์ 4.5% หมายถึงกำไรหายไปหลายล้านดอลล่าห์เลยทีเดียว

ผลการทดลอง bing เวลาที่เพิ่มขึ้นทำให้กำไรหดหายชัดเจน

นอกจากนี้ Google ยังให้ความสำคัญกับ speed และอันดับของเว็บด้วยตามลิงก์ Google now factors page speed in their search ranking

สำหรับเรื่องความเร็วลองดู 15 เครื่องมือที่ทำให้พัฒนาหน้าเว็บที่เร็วขึ้น และลองใช้ CSS Sprites เพื่อทำให้ความเร็วมากขึ้น

4. ทำให้คอนเท้นท์อ่านง่าย มีตัวอักษรเท่าที่จำเป็น

มีผลการทดลองว่า คนส่วนใหญ่อ่านตัวอักษรบนหน้าเว็บเพียง 28% เท่านั้น และจะยิ่งอ่านน้อยลงไปอีกถ้ามีตัวอักษรมากกว่านั้น

เปอร์เซ็นของการอ่าน กับจำนวนตัวอักษร

ที่มา การทดลองโดย Dr Nielsen

ดังนั้น ถ้าอยากให้ผู้ชมเว็บอ่านทุกอย่างในเว็บ ต้องทำให้อ่านง่าย ไฮไลท์คีย์เวิร์ด ใช้ heading เขียนย่อหน้าให้สั้น และปรับปรุงลิสต์

5. การ scroll ไม่ได้ทำให้ผู้ใช้รำคาญการอ่านเว็บ

ลูกค้าหลายคนอาจกังวลว่าการออกแบบเว็บที่ยาวจนต้อง scroll down ลงมา อาจทำให้ผู้ชมไม่ชอบ แต่จากผลการวิจัยพบว่าไม่มีความสัมพันธ์กันระหว่างเว็บที่ต้อง scroll หรือไม่ต้อง scroll

เปอร์เซ็นของการ scroll web ต่อความสูงของเว็บเป็น pixel จะเห็นว่าไม่มีความสัมพันธ์กัน

นอกจากนี้ยังมีผลการวิจัยอีกว่า ถ้าหน้าเพจด้านบนมี content อยู่น้อย จะสามารถดึงดูดให้ผู้ใช้ scroll เว็บลงมาด้านล่างเพื่อดูคอนเท้นท์อื่นๆได้ด้วย

ถ้าด้านบนของเว็บมีคอนเท้นท์น้อย จะสามารถดึงดูดให้ผู้ใช้เลื่อนลงมาดูด้านล่างได้

ที่มา Why we don’t worry about the fold : CXpartner

สิ่งที่จะสื่อในเรื่องนี้คือ ไม่จำเป็นต้องอัดสิ่งที่น่าสนใจไว้ด้านบนของเว็บทั้งหมดนั้นเอง

6. เอาของสำคัญไว้ด้านซ้าย

อันนี้ก็คล้ายๆกับ F shape ข้างต้นครับ มีผลการทดลองว่าคนจะใช้เวลาดูคอนเท้นท์ด้านซ้าย 69% ของการใช้เวลาทั้งหมด

บริเวณจำนวน pixel ที่ 300-400 นับจากด้านซ้ายของเว็บเพจจะใช้เวลาดูมากสุด

ที่มา Jakob Nielsen s Alertbox

อย่างไรก็ตาม ผลนี้ขึ้นอยู่กับภาษาที่ใช้ แต่ภาษาส่วนใหญ่ในโลกก็อ่านจากด้านซ้ายจึงเป็นการดีที่จะคำนึงด้านซ้ายไว้ก่อนครับ

7. พื้นที่ว่าง มีผลต่อการอ่านตัวอักษรและเวลาในการรับรู้ข้อความนั้น

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

ระยะวรรคและช่องไฟ มีผลต่อการอ่านได้เร็ว กับอ่านได้เข้าใจและรู้ประเด็น

ที่มา Software Usability Research Laboratory

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

8. รายละเอียดเล็กๆน้อย อาจสร้างความแตกต่างในการใช้งานได่้มาก

ในการทำเว็บใหญ่ๆ เรามักจะละเลยสิ่งเล็กน้อยในการใช้งานไป

มีเคสของการนำปุ่มออก และใส่คำอธิบายเกี่ยวกับ error ให้ชัดเจน เพื่อป้องกันปัญหา user error ในขั้นตอนเช็คเอ้าท์ ปรากฎว่าเว็บสามารถทำรายได้เพิ่มขึ้นถึง $300 ล้าน ซึ่งเพิ่มขึ้นถึง 45% จากยอดขายปกติในเดือนแรกที่มีการเปลี่ยนแปลง

แทนที่ error 404 ด้วยคำเช่น Sorry และให้คำแนะนำต่อผู้ใช้

ด้านบนคือผลการปรับปรุงเว็บโดย flowinteractive ซึ่งเปลี่ยนคำว่า Error occured: 404 – not found โดยใส่คำว่า “We’re sorry, we’ve had a problem processing your order. Your card hasn’t been charged yet. Please click checkout to try again.” ผลปรากฎว่า transaction รายเดือนสูงขึ้น

9. navigation ที่ดี สำคัญกว่าระบบ Search ในเว็บมาก

มีการทดสอบให้ทำ task test บนเว็บ และพบว่า 70% ของอาสาสมัครทำการคลิกลิงก์เพื่อทำภารกิจให้ลุล่วง มากกว่าจะไป Search ภายในเว็บ

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

ผลสรุปก็คือ การจัดการคอนเท้นท์ให้ดีและหาง่าย มีโครงสร้างที่ดี ให้ผลที่ดีกว่าการไปพึ่งระบบ Search ภายในเว็บ

10. Homepage ไม่ได้สำคัญอย่างที่คุณคิดนะ

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

จากผลการวิเคราะห์ของ Gerry McGovern และ The decline of homepage แสดงให้เห็นว่า การเข้าไปยัง page อื่นของเว็บโดยผ่านหน้าแรกของเว็บนั้นลดลงอย่างมาก ในปี 2003 นั้นคนเข้าเว็บจากหน้าแรก 39% แต่ปัจจุบันเข้าหน้าแรกเพียง 2% ! โดยในปี 2009-2011 ลดลงถึงปีละครึ่งหนึ่ง

ข้อมูลนี้บอกได้ว่าปัจจุบันเรามีทางเข้าถึงข้อมูลโดยตรงมากมายทั้ง Search engine และ Social media ดังนั้นควรไปโฟกัสที่ landing page มากกว่า Home page จะได้ผลตอบแทนที่คุ้มค่ากว่ามากครับ

ช่วงโฆษณา

วงดนตรี งานแต่งงาน

หากเห็นว่าเป็นประโยชน์ โปรดให้กำลังใจด้วยการกด Like ที่หน้า facebook page ผมนะครับ

follow @ipattt

สำหรับงานดังกล่าวจัดพร้อมกันในหลายประเทศ โดยมีวิทยากรเข้าร่วมจากที่ต่างๆกัน เลยทำให้การเข้าร่วมของไทยกลายเป็นเวลา สี่ทุ่มถึงเจ็ดโมงเช้า -_-” เรียกว่าถ้าไม่อึดจริงก็คงจะแย่ แต่ @rabbitinblack ของเราอึดอยู่แล้วครับ

ภาพบรรยากาศ CSSsummit ที่บ้าน @iannnnn

ผู้บรรยายโชว์ css 3d animation มี Perspective ด้วย พวกเราประสานเสียง เหยดดด

ขนม นม เนย เพียบบ

heineken สนับสนุน ซะเมื่อไหร่

บรรยากาศการเสวนา จอ LCD ของ @iannnnn เจ๋งมาก

ความหวังของนักพัฒนาไทย อยู่ในมือเจ้าแล้ว

ผู้ให้กำลังใจ ไม่รู้ @iannnnn ไปตบมาจากไหน

ระบบการสัมมนาของ CSS Summit นั้นค่อนข้างดี โดยระบบทุกอย่างอยู่บนเว็บหมด

ตัวระบบมีปุ่มให้ยกมือถามได้ และนี่คือ Chat ด้านข้างของการเสวนา บิ๊กพูดภาษาไทยไปมีฝรั่งเล่นมุกตอบมา

สนุกสนาน

@rabbitinblack กำลังตั้งใจเต็มที่

รายละเอียดการทวิต CSS Summit ของ @Rabbitinblack และ @iannnnn

• RT @Rabbitinblack
• Now Start Session : CSS3 Transitions & Transforms #CSSSummit
• เว็บสำหรับแปลง CSS3 ใช้มี Prefix สำหรับทุก Browser http://j.mp/idJnxP
• Slide ของ CSS3 : Keyframe http://j.mp/r7at8X
• jQuery : เล่นแสงเงากันแบบนี้เลย http://j.mp/q5HdVC #WebinBlack
• http://bit.ly/qmCsXH Slide หัวข้อ CSS3 VS jQuery
• jQuery Validator http://t.co/5uNnBpI
• เมื่อนำ jQuery มาทำ animation กับ background ของเรา http://t.co/HwAhODJ #CSSSummit
• ใช้ CSS3 ทำเป็น Slot Machine http://t.co/z3EFzrX
• jQuery : ใช้สำหรับจัดเรียงกล่องข้อความ รูปภาพเราให้เป็นสัดส่วน ลองเข้าไปดูตัวอย่าง http://t.co/whJLQNa
• ใช้ CSS HTML มาเขียนเกมโดยไม่ต้องใช้ Script http://t.co/L0KPOxJ #CSSSummit
• หัวข้อต่อไป พูดถึงเรื่อง Sass เป็นการเขียน css ในรูปแบบใหม่ #csssummit
• ผู้บรรยายบอกว่า css เหมือนสำหรับ designer แต่ sass เหมือนสำหรับ developer #csssummit
• แต่ปัจจุบัน css นั้นเขียนโดย developer จึงมีการพัฒนา sass มาเพื่อตัว developer #csssummit
• อย่างเช่นใน css เราต้องการแก้สีแดงของเว็บ เราก็ต้องหาเพื่อแก้สีในทุกตัว แต่ sass แก้ปัญหาโดยการกำหนดตัวแปรเพื่อเก็บค่าสีนั้น #csssummit
• การเปลี่ยนแปลงค่าสี โดยใช้ % หรือใช้คำสั่งในการเปลี่ยนแปลงค่าสีที่ตัว sassมีมาให้ #csssummit
• สำหรับคนที่อยากลองเขียน sass สามารถลองใช้งานด้วย http://t.co/9qhpBWV ได้ #csssummit
• Slide สำหรับหัวข้อนี้ http://j.mp/ojBbMz #CSSSummit
• ที่ชอบสำหรับ sass คือ nested selectors เช่น .abc .def {} เราสามารถเขียนเป็น .abc { .def {}}
• แก้ปัญหา cross browser ของ css3 ตอนนี้ด้วย compass css3 http://t.co/02FMdkH #csssummit
• ระหว่างที่รอผู้บรรยายท่านต่อมา ก็ฟังเพลงที่เค้าเปิด และท่าประจำของพิธีกร http://twitpic.com/5wqmjb ชักจะชอบท่าประจำของแกแล้วดิ #CSSSummit
• หัวข้อต่อมาเป็นเรื่อง eCSStender #csssummit
• Slide สำหรับหัวข้อนี้ http://t.co/sHkZ70h css-ecsstender #csssummit
• หนังสือแนะนำเกี่ยวกับ Responsive Web Design http://j.mp/hAlGYp #CSSSummit
• จากที่ดู + ฟัง #CSSSummit มา 1 ในสิ่งที่หลาย ๆ ท่านให้ความสนใจจะเป็นเรื่องของ Media Queries ซึ่งก็เกี่ยวโยงกับ Responsive Web Design
• เว็บตัวอย่างของการที่รูปสามารถขยาย และย่อตามขนาดของหน้าต่าง http://j.mp/hbNhFs #CSSSummit
• และเว็บนี้ http://j.mp/4cJBCQ เป็นตัวอย่างของเว็บที่ขนาดวิดีโอย่อ ขยายตามขนาดของหน้าต่าง #CSSSummit
• เว็บนี้สำหรับแปลงจาก px ไปเป็น em http://j.mp/D6Jop #CSSSummit
• หัวข้อต่อไปที่กำลังจะบรรยายคือหัวข้อ CSS Tools #CSSSummit
• Slide สำหรับหัวข้อ CSS Tools นะครับ http://j.mp/nNWRfB #CSSSummit
• ข้อแนะนำสำหรับ CSS ไม่ควรมีขนาดเกิน 18 kB โดยประมาณ ด้วยเหตุของเวลาในการเรนเดอร์หน้าเว็บ #CSSSummit
• คำแนะนำของผู้บรรยาย สำหรับการเขียน CSS ที่บางคนเขียนออกมาแล้วมีการประกาศค่าที่ไม่เป็นระเบียบ คือการใช้ CSS Framework
• การมองโครงสร้างของเว็บที่เราจะเขียน CSS จะทำให้ CSS ของเราเป็นระเบียบ และลดการเขียน CSS ที่มันจะทับซ้อนกัน
• การตั้งชื่อ ID กับ Class ให้สั้นกระชับก็มีผลให้ขนาดของเว็บเล็กลง แต่บางครั้งการตั้งชื่อให้สั้นเกินไป ก็ทำให้การอ่าน Code เข้าใจลำบากขึ้น
• Code สำหรับเปลี่ยน PNG ให้กลายเป็น CSS http://j.mp/ejrMn7 #CSSSummit
• อีกอย่างคือ การที่เราแปลง PNG เป็น CSS แล้ว ไม่ควรให้ขนาดของ CSS มีขนาดใหญ่กว่า PNG ไม่อย่างนั้นก็ใช้ PNG ไปเถอะ
• A Fluid Grid Calculator : http://j.mp/imjUeI ใส่ค่าลงไป เว็บจะแปลงมาเป็น CSS ให้
• การ Validate CSS เป็นการช่วยเช็ค CSS ของเราว่าถูกต้องหรือเปล่า แต่ไม่ได้ช่วยให้มันมีขนาดเล็กลง ถ้าอยากให้มีขนาดเล็กลงให้ลองใช้ CSS Lint
• หัวข้อต่อไปเป็นเรื่อง CSS Performance #CSSSummit แหม ผู้บรรยายคนนี้หล่อเชียว 555
• Slide หัวข้อ CSS Performance นะครับ goo.gl/o40Zz #CSSSummit
• เว็บนี้ก็ให้อัพโหลดรูปไปเพื่อแปลงเป็น CSS : http://j.mp/j6kB6N #CSSSummit
• ตัวอย่าง Box Shadow 39 แบบ http://j.mp/hNAv4y #CSSSummit
• บทความเกี่ยวกับ Box Shadow http://j.mp/hZskIn #CSSSummit
• Flux Gallery http://j.mp/jAKwoi Gallery สวย ๆ แนะนำ
• http://j.mp/mCGrYf ส่วนอันนี้เป็น Slideshow Effect งามมาก
• Faster HTML and CSS: Layout Engine Internals for Web Developers http://t.co/jXigHV1 #CSSSummit
• ส่วนเว็บนี้ลองกดเมนูดู http://j.mp/eZrXiV #CSSSummit
• อยากให้ IE ใช้ CSS3 ได้เหรอ ลองอันนี้ http://j.mp/diwNVf #CSSSummit
• บทความแนะนำการเขียน CSS ให้มีประสิทธิภาพ http://j.mp/qofc7 #CSSSummit
• เปรียบเทียบว่า Browser เก่า ๆ เป็นทีวีขาวดำ Browser ใหม่ ๆ เป็น LCD จอ Wide เราไม่เห็นต้องทำให้มันมองเห็นเหมือนกันเลย
• หัวข้อสุดท้ายของงาน CSS & Pseudo Elements #CSSSummit
• Slide สำหรับหัวข้อสุดท้าย http://j.mp/qVxdKp CSS & Pseudo Elements #CSSSummit
• คนบรรยายคนสุดท้าย บรรยายอยู่ในโรงรถ เย้
• บทความเกี่ยวกับ Pseudo Elements http://j.mp/qXMfjf #CSSSummit
• การใส่ :before หรือ :after มันไม่ได้เกิดขึ้นนอก Elements แต่เป็นการเกิดขึ้นใน Elements #CSSSummit
• การใช้ :before :after อย่าใช้ในการใส่ content ให้กับ element เปล่า ๆ เพราะ search ต่าง ๆ จะไม่ได้เห็นข้อความที่เรากำหนดใน CSS นะ #CSSSummit
• สิ่งที่ใส่ใน content ได้นั้น มี 1.Text 2.Image 3.Attribute 4.Counter 5.ไม่ใส่อะไรลงไปเลย แต่เราไม่สามารถใส่เป็น tag html ได้ #CSSSummit
• @iannnnn สำหรับ Attribute ยกตัวอย่างคือ
• 123456
• แบบนี้ Output ก็จะออกไปเป็น 123456 แต่ถ้าเราเขียนใน CSS ว่า
• @iannnnn h1:before { content:attr(text); } Output ที่ออกมาก็จะกลายเป็น abc123456 แทน
• @iannnnn text อันนี้ไม่ได้แปลว่าข้อความ สงสัยกำหนดให้กำกวมไปหน่อย คือ ถ้าดูทวิตก่อนหน้านั้น จะเห็น tag h1 มี attribute ที่ชื่อ text อยู่อะ
• @iannnnn แต่ถ้าเราเขียน CSS ไปว่า
• ul {counter-reset:item;}
• ul li:before {content:counter(item) “.”; counter-increment:item;} เราก็จะได้ Output ออกมาเป็นแบบนี้ http://yfrog.com/h4g6cqqwj
• ซึ่ง CSS ธรรมดา พวก list-style ก็ออกมาแบบนี้ได้เหมือนกัน แต่ถ้าจำไม่ผิด ใน list-style มันไม่มีให้ออกมาเป็น 4a. ดังนั้นก็เปลี่ยนมา เขียน CSS แบบนี้ http://yfrog.com/h8lk3efj Output ที่เราได้ก็จะเป็นแบบนี้ http://yfrog.com/kkqn2wdj

ทวิต @iannnnn

• ขณะนี้ข้าพเจ้ากำลังดูสัมมนา CSS โลกครับ เขาจัดให้ชมออนไลน์แบบเสียตังค์ที่บ้าน โดยเจ้ามือคือ #TiGERiDEA @iPattt @warong @Rabbitinblack @iMenn
• @Rabbitinblack http://t.co/ZGMuKic สไลด์ของเจ๊ที่กำลังพูดอยู่ตอนนี้ #CSSsummit
• เว็บนี้เอาไว้พ่นโค้ด CSS3 ไล่สี แต่งเงา มุมมนสารพัดได้ โดยหน้าตาเครื่องมือเมือน Photoshop Layer เป๊ะๆ http://t.co/XyQbarZ #CSSsummit
• ในโลกมีฟอนต์เป็นแสนเป็นล้าน แต่ที่ใช้ในเว็บจริงๆ มีแค่ 5 ฟอนต์ ที่ Support ทุกแพลตฟอร์ม กากไหมครับ #CSSsummit
• แต่ถ้าว่ากันจริงๆ มีอยู่ 182 ฟอนต์ที่เรียกได้ว่าเป็น Web Safe Fonts (นั่นคือเปิดในเบราว์เซอร์วินโดวส์กะแมคได้ก็สบายใจได้หน่อยละ) #CSSsummit
• http://yfrog.com/khr4smmj ข่าวดีก็คือตั้งแต่ปี 2009 เป็นต้นมา เบราว์เซอร์ทุกยี่ห้อหลักๆ สนับสนุน web fonts แล้วครับ
• แล้วอะไรล่ะคือ web font? (คำว่า web font มีเว้นวรรคด้วยนะครับ) #CSSsummit
• #CSSsummit ดูสไลด์สดเรื่อง Web Typography ได้ที่นี่ครับ http://t.co/hFUVk1u (จริงๆ ต้องเสียตังค์ดูนะ แต่ไหนๆ ก็ไหนๆ แจกเลยดีกั่ว )
• ปัจจุบันนี้พวกเบราว์เซอร์บนมือถือเนี่ย สนับสนุน web font แบบ TTF/OTF เป็นมาตรฐานแล้ว สบายใจได้ ไม่ต้องเสียเวลามานั่ง Convert #CSSsummit
• #CSSsummit ปัจจัยพิจารณาในการใช้ Web font คือ ความเร็วเซิฟเวอร์(เพราะฟอนต์ไฟล์ใหญ่), ลิขสิทธิ์ฟอนต์, ข้อจำกัดในการแสดงผลหน้าจอเรา
• http://yfrog.com/kfazoimj การเลือกใช้ฟอนต์ให้เหมาะกับเว็บ #CSSsummit
• การเลือกใช้ฟอนต์ให้เหมาะกับสถานการณ์ #CSSsummit http://yfrog.com/kjcxdjhj (กูจะฆ่ามึงละน้า ♡)
• #CSSsummit เรื่อง web font จบแล้วจ้ะ สัมมนาออนไลน์นี้มีสองวัน ตั้งแต่สามทุ่มยันเจ็ดโมงเช้าตามเวลาประเทศไทย ครอกกกก ˘0˘
• ตอนนี้วิทยากร #CSSsummit กำลังเปิดหัวข้อเรื่อง Media Queries ครับ ว่าด้วยการตั้งค่า CSS ให้เปิดเว็บเราสวยในทุกอุปกรณ์ http://t.co/l9buZRs
• http://yfrog.com/hsxvioxj เหยด นี่คือรายชื่อคุณสมบัติที่สามารถกำหนด CSS เป็นแบบต่างๆ ได้ในอุปกรณ์พกพาครับ #CSSsummit
• มีคนถามใน #CSSsummit ว่าในอุปกรณ์พกพาเนี่ย ปุ่มสำหรับนิ้วกดควรใหญ่เท่าไหร่ มีคนตอบว่า 40px ครับ ส่วนอีกคนบอกว่ามาตรฐานที่แอปเปิลใช้คือ 44px
• พักเที่ยง 1 ชั่วโมงครับ (เที่ยงของฝรั่งนะ) #CSSsummit ส่วนคนไทยดึกแล้ว มีใครตามอ่านมั่งเปล่าวะ 555 ก็ดันไม่หื่นนี่นา
• เริ่ม #CSSsummit ภาคบ่าย(ของฝรั่ง)แล้วครับ สำหรับคนไทยคงไม่มีใครตื่นฟัง/อ่านแท็กนี้แล้วมั้ง 555 งวดนี้เป็นเรื่อง CSS Transition ครับ ยาก T-T
• #CSSsummit ปรากฏว่าเรื่อง CSS Transition นั้นไม่ยากเท่าไหร่ครับ นึกภาพตอน :hover เราก็บอกแค่ div:hover {scale(2);} มันก็ x2 จากขนาดเดิมละ
• #CSSsummit แต่ก็อย่างว่า ปัญหาที่ทุกเบราว์เซอร์ Support ไม่เท่ากัน ทำให้ต้องเขียน -browserprefix กันไว้ก่อนเพื่อรอสักวันจะได้เขียนเพียวๆซะที
• http://t.co/S8BWHHD เว็บเมพ ถ้าไม่รู้จะใส่ CSS Prefix ยังไงก็เขียนกลางๆ ไว้แล้วโยนโค้ดลงไป มันจะ gen prefix มาให้ทุกเบราว์เซอร์ล่ะ
• #CSSsummit ตอนนี้วิทยากรกำลังบรรยายเรื่องคุณสมบัติ CSS Transform แบบต่างๆ ครับ รอให้เขาปล่อย PDF ก่อนจะเอามาแจก 〈 ≥ .. ≤ 〉หาในกูเกิลก็ได้นะ
• จะบอกว่า เรื่อง CSS Transform เนี่ยไม่ยากครับ ใครมีพื้นการเขียน ActionScript Animation อะไรแนวนี้มาก่อน เห็นศัพท์แล้วจะเก็ตทันที #CSSsummit
• #CSSsummit วิทยากรที่กำลังบรรยาย กำลังสาธิตโดยใช้ Dreamweaver ครับ!!!! มีผู้ชมคนนึงบอกว่า “สวัสดีดรีมฯ ไม่ได้เจอกันนานแล้วนะ” 555
• ความมันส์มาถึงแล้วครับ #CSSsummit กำลังพูดเรื่อง CSS Transitions (เมื่อกี้ Transform เฉยๆ แต่อันนี้เริ่มวื้บๆ ละ)
• #CSSsummit ความเฮงซวยก็คือ เราต้องรอให้ชาวบ้านบ้านเราใช้ IE10 ขึ้นไปกันก่อนถึงจะสนุกกับ CSS Transitions ได้ .. ก็อีกสิบปีละมั้งครับ
• http://yfrog.com/h379549745j ตารางนี้บอกว่า CSS Properties ตัวไหนบ้างที่เอามา Animate ได้บ้าง #CSSSummit
• การเขียน CSS Transitions นั้นต้องประกาศคลุมไว้ก่อนครับว่าจะใช้กับ properties ไหนบ้าง ถ้าขี้เกียจก็ประกาศ all ไว้ก่อน แล้วค่อยเลือกจิ้มเอาได้
• ชอบตรงมันกำหนดเวลาเป็นหน่วยวินาทีได้ เป็นธรรมชาติมนุษย์ดี หลักการคือบอก CSS ว่าจะขยับอะไรเป็นเวลาเท่าไหร่ (หาศัพท์กันเอาเองนะ) #CSSsummit
• #CSSsummit เอา Transition มารวมกะ Media Queries เบรกที่แล้วแล้วจะโคตรเมพครับ นึกภาพตอนเราค่อยๆ ย่อขนาดเบราว์เซอร์ แล้ววัตถุข้างในก็ไหลวื้บๆ!
• #CSSsummit เหยด! มี transition-timing ด้วยครับ คือกำหนดค่าความหน่วง (ease:ความหยุ่นอะไรงี้) ได้ด้วย! นี่มัน ActionScript ชัดๆ
• http://yfrog.com/kf82ukaj เหยด นี่คือตัวอย่างโค้ดเวลาเอามาใช้ครับ ลองแกะไปเล่นหนุกๆ ได้นะ #CSSSummit
• #CSSsummit โดยปกติแล้วไอ้พวก Transition เนี่ยมันจะเกิดขึ้นทันที แต่เราสั่งดีเลย์มันได้ด้วยนะครับ (ดูโค้ดจากทวีตที่แล้ว)
• ตะกี้ @warong ชวนคุยเรื่อง”แล้วมันจะไม่ตีกับ jQuery เหรอ” เลยได้ข้อสรุปว่า CSS มันจบที่”ดีไซน์”ครับ ไม่รวมถึงพฤติกรรมแบบ Ajax ที่เกิดกะวัตถุ
• ดูตัวอย่างของ CSS Transitions ง่ายๆ แต่แม่งเจ๋งน้ำตาไหลที่นี่ครับ http://t.co/SuJfUfg เลื่อนไปดูตรง Footer นะ #CSSsummit
• แล้วยังมี pseudo-class ชื่อ :target ที่เอาไว้… เอาไว้ทำไรวะ ห่า รีบพูดจริงอีฝรั่งจรวด T-T ใครรู้ช่วยหน่อยครับ แบ่งๆ กัน #CSSsummit
• http://yfrog.com/gy57qfwj เหยด ทีนี้เป็น 3D Transform ครับ และนี่คือตาราง Browser Compatible (IE10 เหมือนเดิม)
• เรื่อง CSS Transform แบบ 3D นี่ไม่ไหวจริงๆ ครับ สมองไม่รับเลย แค่ดูจอก็จะอ้วกแล้ว ใครมาจ้างทำเราก็หาจ้างคนอื่นต่อละกัน -_- #CSSsummit
• #CSSsummit ต่อไป CSS Animation ครับ! กรุณาเปิดเพลงแสตมป์!
• (ในห้องตอนนี้) @Rabbitinblack: “โห CSS นี่มันเป็นศิลปะจริงๆ T-T” @warong: “ไม่ใช่หรอก เราย่อศิลปะลงมาเป็น CSS ต่างหาก” เหยดดดด #CSSsummit
• ไอ้เหี้ยยยยยยยย ใช้ CSS ทำกล่องเพจเกจ 3D หมุนได้ เป็น Perspective เหยดดดดดดดดดดด #CSSsummit (ตอนนี้เหยดพร้อมกันห้าคนเลยครับ)
• @iPattt http://twitpic.com/5w7l84 – บรรยากาศในห้อง(ฟัง)สัมมนา #CSSSummit ครับ ที่บ้านลาร์ทพลาเค้าท์
• วิทยากร #CSSsummit อีตา Greg แกพูดเกินเวลาครับ โดนดูดเสียงเลย 555
• http://yfrog.com/h33beaej หนึ่งคอมเมนต์จากผู้ชมชาวไทยครับ #CSSSummit
• พี่ @iPattt บอกว่าอยากไปเช่าที่ห้องประชุมแบบ CS Loxinfo แล้วเก็บตังค์คนเขาดู #CSSsummit จังเลย คือมันคุ้มค่าในการฟลัดไทม์ไลน์จริงๆ นะครับ
• ต่อไปเป็นเรื่อง KeyFrame Animation ครับ บรรยายโดยวิทยากรสาว คุณ Weyl #CSSsummit (วิทยากรวันนี้มีผู้หญิงกับผู้ชายเท่าๆ กันเลยครับ)
• ตอนนี้เจ๊วิทยากรกำลังสาธิตการทำ CSS Keyframe Animation ด้วยการ…​ทำเว็บที่มีหิมะโปรยปรายให้ดูครับ -..- นี่มันยุค พ.ศ.2544 รึไง!!!!
• ขอบคุณครับ สรุปโน้ตที่ทวีต #CSSsummit ไว้ “@cyberwakeup: @iannnnn คงได้เท่านี้ล่ะครับ นอนละครับ ง่วงกลิ้ง ล่ะ ครับ http://t.co/wSeEF82 ”
• #CSSsummit เรื่อง Keyframes ขอไม่เกาะละกันนะครับ เว้นไว้อีกเรื่องละกันเพราะมันยิบไป ดูไปจดไปไม่ทันจริงๆ หาอ่านเอาง่ายกว่าจ้ะ
• #CSSsummit เจ๊คนตะกี้เพิ่งจบครับ ที่เป็นเรื่อง Keyframe Animation (ไม่สนุก) ต่อไปเป็นเรื่อง W3c Conversions
• #CSSsummit ว่าด้วยเรื่องความสามารถใหม่และการปรับตัวเพื่อใช้ CSS3 (เช่น background-position เปลี่ยนเป็นระบุได้ 4 พิกัดงี้)
• #CSSsummit ใน CSS3 นั้นกำหนด background-repeat: repeat no-repeat; ได้ (ตัวแรกเป็นแกน x ตัวสองเป็นแกน y)
• #CSSsummit background-clip กำหนดการซ่อนขอบของ background(image) ได้ เช่นจะซ่อนตรงนอกขอบ ในขอบ หรือแสดงแค่ตรงตำแหน่งเนื้อหาก็ได้
• #CSSsummit background-size กำหนดค่าเป็น pixels หรือ percent ได้ แถมมี cover (เบียดเต็มขอบ) หรือจะ contain) แสดงเต็มภาพแบบร้านอัดรูป) ได้ด้วย
• #CSSsummit ถ้าจะใช้ background-size เป็น cover/content กับให้ตั้งความสูงเป็น 100% ด้วย
• #CSSsummit ความสามารถใหม่ ใส่ภาพพื้นหลังได้เยอะๆ → background-image: url(‘img1.jpg’), url(‘img2.jpg’); ระบุตำแหน่ง,การซ้ำ คั่นด้วยลูกน้ำได้
• #CSSsummit เราสามารถใส่ background ซ้อนกันได้หลายรูป,แบบ ทั้งรูปภาพ การไล่สี กำหนดพิกัดและการซ้ำเอาเองนะ
• #CSSsummit เรื่อง border ก็กำหนด border-radius ได้นั่นแหละ อันนี้รู้กันอยู่แล้ว
• http://yfrog.com/kkjp4yfj ใช้ความรู้เรื่องขอบใน CSS3 มาวาดรูปสามเหลี่ยมก็ได้นะ ดังภาพ #CSSSummit
• http://yfrog.com/kim43fij โห อันนี้เป็นการใส่ภาพลงไปแล้วยืดเป็นพื้นหลังของวัตถุพอดี #CSSSummit
• http://yfrog.com/h3cl8zgj โค้ดมึนหน่อย แต่นี่คือการกำหนดขอบภาพแบบล้ำ และสวยด้วยภาพ #CSSSummit
• #CSSsummit ต่อไป box-shadow: x y blur spread color; อันนี้คงได้ใช้กันบ่อยละ ประยุกต์ไว้ทำอะไรเรืองแสงได้สนุกดี
• #CSSsummit ถ้าเราใช้สีแบบ RGBA (มีความใสนิดนึง) แล้วเงาจะสวยสมจริงมากขึ้น เดี๋ยวเอาไว้ลอง
• #CSSsummit โอ๊ะ เขาบอกว่า box-shadow สามารถใส่หลายๆ ค่าในวัตถุก้อนเดียวกันได้โดยคั่นลูกน้ำครับ ประยุกต์ทำกรอบภาพหลายชั้นได้เลย! ยังไม่เคยลอง
• http://yfrog.com/h3wrlysj ตัวอย่างการใช้ box-shadow ซ้อนกันหลายชั้นเป็นกรอบรูปสวยมาก #CSSSummit
• ส่วนเรื่อง Alpha Mask นี่งงครับ พอเข้าใจคอนเซปต์จาก Photoshop นะ แต่เอาไว้จะใช้ค่อยอ่านอีกทีละกัน (ตัวอย่างของวิทยากรไม่ค่อยสวย) #CSSsummit
• #CSSsummit โอ้ จริงๆ เรื่อง CSS Image Mask นี่น่าสนใจมากๆ เลยนะครับ เอามาประยุกต์ทำอะไรแว้บๆ คล้ายๆ ภาพไอคอนเวกเตอร์เงาวาวๆ ได้เลย ไว้หาอ่าน
• http://yfrog.com/kk522hvj ตัวอย่างการเอาไอคอนสีเดียวมา mask กับฉากหลังไล่สี #CSSSummit
• #CSSsummit ต่อไปเป็นเรื่อง CSS Regions โดยสรุปคือการ Wrap ก้อนย่อหน้าตัวอักษรให้อยู่ในกรอบ shape ที่เราต้องการ ส่วน CSS Exclusions ก็ตรงข้าม
• #CSSsummit วิทยากรกำลังสาธิตการใช้งาน CSS Framework หลายๆ เจ้าครับ (ขอข้ามไปนะ) เท่าที่ดู ช่วงนี้สาระแน่นเอี้ยดมาก เสียดายที่เริ่มง่วงแล้ว
• ง่วงแล้ว นอนละครับ ทีแรกว่าจะอยู่ยันเช้า แต่เดี๋ยวทำงานไม่ไหว ขอบคุณที่ติดตามและไม่ติดตามแต่ทนรำคาญยามดึกไหวครับ 555 #CSSsummit
• สัมมนา #CSSSummit วันสุดท้ายเริ่มแล้วครับ ไม่รู้คืนนี้จะโต้รุ่งแบบเมื่อวานได้หรือเปล่า เพราะเมื่อเช้าได้นอนหน่อยเดียวเอง -_-
• เสียดายเปิด session แรกของคืนนี้เกือบไม่ทัน [การแก้ปัญหา CSS!!!] เพราะป้าวิทยากรแกพูดจะจบแล้ว งั้นดูนี่ละกัน http://t.co/wWp7WHm #CSSsummit
• #CSSsummit หัวข้อต่อไปเป็นเรื่อง CSS3+jQuery ครับ หากสนใจลองแว้บๆ มามองแท็กนี้เอาเด้อ
• #CSSsummit หัวข้อ jQuery+CSS3 กำลังมาครับ บรรยายโดยท่านเซียน @snookca (แค่ชื่อก็สนุกแล้วค่า)
• http://yfrog.com/gyggnbulj ภาพนี้เป็นตัวแทน jQuery+CSS บทที่หนึ่งครับ #CSSSummit
• #CSSsummit คุณสนุกเขาโชว์ Slot Machine ที่ทำจาก CSS+jQuery Animation ครับ เชิญชม http://t.co/a1UZiM2
• พอเข้าช่วง jQuery Animation แล้วลายตาครับ พื้นฐานไม่แน่น บรรยายต่อไม่ถูก งั้นขอนั่งดูภาพรวมไปละกัน T-T #CSSsummit
• อ้าว ไหงหัวข้อไม่ใช่การโกง CSS แล้วครับ แต่เป็นเรื่อง The Future of StyleSheet (ถึงว่าสิมันซ้ำกับป้าเมื่อสามทุ่ม สงสัยเขาขอสลับ) #CSSsummit
• #CSSsummit วิทยากรท่านนี้กำลังบรรยายสรรพคุณความเมพของ SASS ครับ http://t.co/ldoqTHS มันคือตัวเพิ่มพลัง CSS ให้มีตัวแปร, ฯลฯลฯ ได้
• #CSSsummit เขียน CSS แบบ Nested นี่เจ๋งจริงๆ ครับ แก้ความยุ่งยากได้เยอะเลย ทำไมเขาไม่ผลักให้เป็นมาตรฐานหว่
• #CSSsummit ต่อไปเป็นเรื่อง CSS & eCSStender ครับ พอเข้าโหมดโปรแกรมเมอร์ 3 คาบติดๆ กันผมก็เริ่มง่วงแล้ว สงสัยคืนนี้ไม่ไหวจริงๆ T-T เตรียมนอน

ขอแถมทวิต @warong ด้วยครับ

• http://t.co/bIlQzeE ลองดูครับว่า css3 มันงามงดแค่ไหน #csssummit
• ผมว่าพลังอย่างนึงของ CSS3 น่าจะเป็นการทำให้ขั้นตอนการทำเว็บสามารถเป็นไปได้โดยไม่ต้องพึ่งพาแรงงาน Photoshop ในการทำให้ดีไซน์ปรากฏเป็นรูปร่าง
• พลังอีกอย่างของ CSS3 น่าจะสนับสนุนพลังการทำธีมกึ่งสำเร็จรูปมากขึ้น ทำให้การผู้ผลิตธีมสามารถสร้างธีม Customize ได้เองทรงพลังกว่าเดิม
• หาก CSS3 ไปได้ไกลและมี Browser รับรองมากกว่านี้ แรงงาน Photoshop จะจำเป็นน้อยลงในการทำเว็บ โปรแกรมเมอร์อาจทำเว็บได้เอง ดีไซเนอร์จะลดแรงงานลง

อยากทำงานบรรยากาศชิลล์ๆแบบนี้ไหมครับ มันมีสิ่งแลกเปลี่ยนคือความรับผิดชอบที่สูงขึ้น

ลูกจ้าง มักจะหาทางเอาประโยชน์ เจ้านายมักจะหาทางประหยัด ?

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

@imenn ที่ปาย

ระบบที่มาควบคุมบุคคล คือ พลังลบ

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

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

Tools ที่ใช้ทั้งหมดขณะกำลังประชุม online

ก้าวสำคัญ แห่งการเชื่อใจคน ด้วยการทดลองทำงานแบบไร้ออฟฟิศ

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

การทำอะไรให้สำเร็จได้บางครั้งต้องตัดสินใจอย่างมุ่งมั่นก่อนแล้วค่อยแก้ปัญหาตามมา เพราะถ้าลองคิดถึงอุปสรรคตั้งแต่แรกแล้วบางทีสิ่งนั้นจะไม่เกิดก็เป็นไปได้ครับ ผมเริ่มลิสต์สิ่งที่ต้องแก้ไขด้วยการสร้าง Norm ใหม่ให้พนักงานใหม่เข้าใจถึงลักษณะการทำงานที่บ้าน โดยวิธีคิดในการทำงานนั้นเปลี่ยนไปจากการ Track เรื่องเวลาเป็นการเน้นที่ความรับผิดชอบในงานที่ได้รับไปแทนซึ่งทำให้พนักงานรู้สึกถึงความเป็นผู้ใหญ่ในตัวเองมากขึ้น สำหรับพนักงาน admin เนื่องจากมีความเกี่ยวข้องกับเรื่องค่าใช้จ่ายก็ต้อง implement ความเข้าใจระบบบัญชีมาก่อนหน้านี้ และให้ที่ปรึกษาบัญชีทำการฝึกหัดให้ดี เรื่องระบบจ่ายเช็คก็ตั้ง Policy ใหม่เป็นพยายามโอนโดยใช้ internet ให้หมดยกเว้นเวลาจำเป็นจริง ( ขณะนี้ บริษัทไม่ได้ใช้ระบบจ่ายเช็คมาสองเดือนแล้ว ) และเรื่องของคอมพิวเตอร์และปรินเตอร์รวมทั้งค่าไฟฟ้าของพนักงาน admin ทางบริษัทก็สนับสนุนเช่นกัน และทำความรู้จักบ้านของน้อง Admin แต่ละคนไว้ครับ

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

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

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

อย่าควบคุมมนุษย์ด้วยระบบ แต่ต้องให้มนุษย์มาร่วมควบคุมบรรยากาศในการมุ่งไปสูจุดหมายเดียวกันด้วยกัน

คุณล่ะ เชื่อมั่นในมนุษย์ และพร้อมจะ Make THE Difference ทลายกำแพงที่ปิดกั้นพลังแห่งมนุษย์หรือยัง ?

เคล็ดลับสำหรับบริษัทไร้ออฟฟิศ

• ผู้บริหารควรมั่นใจว่าพนักงานในบริษัทควรมีความตื่นตัวในการรับฟังสิ่งใหม่ๆ ไม่เนือยอย่างผิดปกติ
• การตั้งวัฒนธรรมการประชุมตรงเวลา และการโต้ตอบแบบทันทีเป็นสิ่งที่ดีที่ควร Set ไว้เป็นจุดแลกเปลี่ยนของการไร้ออฟฟิศในครั้งแรก
• การทำงานเป็นทีมเล็กทำให้คนมีความรับผิดชอบโดยธรรมชาติ เพราะฉนั้นหากบริษัทมีขนาดใหญ่มากกว่า 20 คน จะต้องหาวิธีซอยเป็นโมดูลย่อยไม่เกิน 10 คนเพื่อเปิดโอกาสให้เกิดสภาวะความเป็นทีมขึ้น
• Admin ควรอยู่ในที่ๆเหมาะสม และมีเมสเซ็นเจอร์ที่รู้จักกันดีสำรวจบ้านของแต่ละคนเผื่อกรณีฉุกเฉิน
• ต้องมีระบบบัญชีและการออกเอกสารจำพวก Quotation, Invoice, Receipt และการเรียกเก็บเงินไว้แล้ว
• อาจมีการ meeting แบบสัญจร เช่นบริษัทของผมไป meeting ต่างจังหวัดหรือตามร้านกาแฟเพื่อไม่ให้รู้สึกเหงาจนเกินไป
• บริษัทควรมีระบบ task management การทำงานที่เหมาะสมซึ่งปัจจบันมี Solution online ราคาถูกเป็นจำนวนมาก
• ต้องแน่ใจว่า internet ของแต่ละคนไม่มีเปอเซ็นต์การล่มที่มากผิดปกติ
• หมั่นถามพนักงานว่าการทำงานคนเดียวติดปัญหาใดๆบ้างหรือเปล่า
• แนวการบริหารถ้าสามารถมีผลตอบแทนหรือโบนัสลักษณะเดียวกับการ ” ให้อาหารปลาโลมา” หรือให้ทันทีได้ จะดึงดูด freelance จำนวนมากให้มาอยู่ที่เราได้ดี

การทำงานแบบ Virtual office ในระดับโลก

หลายๆคนคงรู้จักวิธีการผลักดันงานโดยใช้ปรัชญาของ Open Source กันมา นั่นคือการรุมทำสิ่งใดสิ่งหนึ่งให้เกิดขึ้นมาและตัวเองจะมีส่วนได้ส่วนเสียกับสิ่งนั้น ไม่ว่าคนที่ทำจะมีคนใหม่คนเก่าหรือแม้แต่แต่ละคนอยู่กันคนละมุมโลกก็ตามครับ

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

ลองอ่านบทสัมภาษณ์เพิ่มเติมได้ที่ The Way I Work โดย Matt Mullenweg ผู้ก่อตั้งบริษัท Automattic และ WordPress

Matt Mullenweg ขณะทำงานที่บ้าน และ staff ของเขาทุกคนทำงานที่บ้านเช่นกัน

บรรยากาศการทำงานของ TiGERiDEA แบบไร้ออฟฟิศ

พนักงานของ TiGERiDEA นั้นถึงแม้จะทำงานกันแบบไร้ออฟฟิศแต่ทุกคนเป็นพนักงานถูกต้องตามกฏหมายและระบบภาษี ได้รับเงินเดือนตรงเวลา และมีประกันสังคมอย่างถูกต้องครับ

ผมเอง ขณะทำงานในสวนบ้าน @booruball ย่านพระประแดง

โปรแกรมที่ถูกเรียกใช้งานขณะประชุม

iMenn ขณะประชุมที่ปาย

น้องปู ซึ่งเป็น admin ทำงานที่บ้านและดูแลคุณแม่แถวบางน้ำผึ้ง สมุทรปราการ

บ้านน้อง admin บรรยากาศดีมากครับ

น้อง admin มีอุปกรณ์สำนักงานพร้อม และมีเมสเซ็นเจอร์ที่ไว้ใจได้

@rabbitinblack ขณะคร่ำเคร่งกับการประชุมงาน

ต้องมั่นใจในคุณภาพอุปกรณ์ต่างๆและอินเตอร์เน็ทของแต่ละคนพอสมควรครับ

จอใหญ่สองจอ จอหนึ่งสำหรับคุยงาน อีกจอสำหรับทำงาน

@muenue ขณะทำงานที่ร้านกาแฟ

@muenue ขณะตั้งใจทำงานที่บ้านในฐานะ AE

ขณะประชุมงานด้วย Skype

ประชุมและทำงานนอกสถานที่ร่วมกันเป็นบางครั้ง

ปัญหาบางประการของ Virtual office คือพนักงานอาจจะเหงาและต้องการสังคมบ้าง เราจึงมีกำหนดไปทำงานและประชุมนอกสถานที่กันเป็นประจำครับ เงินค่าเช่าออฟฟิศที่ไม่ได้ใช้ทำให้บางทีเราไปทำงานต่างสถานที่ เช่น ปาย ภูเก็ต หรือ มาเลเซีย ฯลฯ ได้ ซึ่งการไปทำงานนอกสถานที่ก็มีข้อดีตรงทำให้ทีมมีสมาธิในการทำงานร่วมกันได้ดีและไม่ต้องพวงเรื่องการกลับบ้านตอนเย็นครับ

ประชุมงานที่ เยอรมันตะวันแดง

ประชุมที่ TRUE Coffee จตุรัสจามจุรี

@rabbitinblack ตอนไปทำงานกับ @iMenn ที่ปาย

ทำงานไปด้วย กินอาหารยูนนานที่ปายไปด้วย!

โปรแกรม และ Tools ที่แนะนำสำหรับ Virtual Office

Google Apps

อยากให้ทดลอง Google App ดูครับ โดยเริมจาก Gmail และ Google Calendar

Google Calendar

Google App มีน่าสนใจหลายตัวครับ ถ้าไม่รู้จะเริ่มที่ไหน แนะนำให้เริ่มที่ Gmail เพราะเป็นเมล์ที่มีประสิทธิภาพสูงมาก เราสามารถปรับวิธีการสื่อสารและการเก็บข้อมูลได้อย่างง่ายๆด้วยการตั้งนโยบายการตั้งชื่อเมล์ในบริษัทและการสื่อสารกับลูกค้า สามารถรับส่งเมล์เป็น “@ชื่อบริษัท” ของเราเพื่อความน่าเชื่อถือได้ เช่นเมล์ pat@tigeridea ของผมนั้นเก็บที่ Gmail ครับ และมีการบริหารเวลาผ่าน Google Calendar โดยสามารถดูกำหนดการของพนักงานทุกคนได้ นอกจากนั้น Google spreadsheet ก็สามารถใช้ Back up ข้อมูลได้ดีครับ

SmallPad.org

smallpad เป็น เว็บสำหรับใช้ทำงานและบันทึกสิ่งต่างๆร่วมกันได้ดีมาก

smallpad เป็น เว็บสำหรับใช้ทำงานและบันทึกสิ่งต่างๆร่วมกันได้ดีมาก โดยปกติ TiGERiDEA ใช้เว็บนี้ในการบันทึกการประชุม และทุกคนสามารถพิมพ์ข้อความต่างๆได้ Realtime (เหมือน google app) และพิเศษคือ เว็บมีระบบ Timeline ที่สามารถย้อนดูเหตการณ์ต่างๆที่เคยถูกบันทึกในอดีตได้ ถ้าใช้งานร่วมกับลูกค้าและให้ลูกค้าพิมพ์สั่งงานก็สามารถย้อนดูคำสั่งลูกค้าในตอนเริ่มแรกได้เช่นกัน

skype

โปรแกรมที่ใช้ในการประชุมมีหลายตัว แต่ Skype ก็ยังมีความ Practicle สูงอยู่

Skype ยังคง practical สำหรับการประชุมครับ

Google+

google plus ใหม่เอี่ยม สามารถใช้งานในท่ทำงานได้ดี

เราสามารถใช้ Google+ ในการทำงานได้ สำหรับบริษัทขนาดกลาง ผู้บริหารสามารถควบคุมการแบ่งวง (Circles) ให้ฝ่ายต่างๆได้เช่น เซลล์ จัดซื้อ ฝ่ายผลิต ฝ่ายการตลาด ฯลฯ เพื่อการสื่อสารและออกตวามเห็นแบบ Social Network ที่สมบูรณ์แบบ

twitter

Twitter เป็นเครื่องสร้างความมีตัวตนของพนักงานและบริษัท และยังเป็นเครื่องมือสื่อสารเชิง Marketing ที่ดี

ปัญหาของบริษัทไร้ออฟฟิศในสายตาคนทั่วไปมีอีกประการคือ “ความน่าเชื่อถือ” เนื่องจากลูกค้ากลัวจะตามตัวไม่ได้ แต่ในปัจจบัน twitter เป็นเรื่องแสดงความมีตัวตนของบุคคลได้ดีที่สุด และยังสร้างความน่าเชื่อถือในงานที่ตนเองทำอยู่อีกด้วยเนื่องจากการสื่อสารกันระหว่างการทำงานจะเป็นการ Marketing บริษัทไปในตัว ข้อมูลที่เปิดเผยได้และการนัดแนะกันพนักงานจะสื่อสารกันโดยใส่ tag #TiGERiDEA ส่วนข้อมูลที่ไม่เปิดเผยจะอยู่ใน Smallpad

อย่างไรก็ตาม บริษัทนั้นตามกฏหมายมีความน่าเชื่อถืออยู่แล้วจากทุนจดทะเบียนบริษัทที่สามารถรับผิดชอบได้ เพียงแต่ลูกค้าบางรายอาจอยากเห็นออฟฟิศครับ

Dropbox

DropBox เป็นโปรแกรมเก็บไฟล์ผ่าน Cloud ที่ดีมาก แนะนำเป็นอย่างสูง

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

สำหรับบริษัทขนาดกลาง Dropbox ยังมี Dropbox Teams อีกด้วย ซึ่งบริษัทที่ซื้อ Package นี้จะได้พื้นที่ใช้งานเป็นจำนวนมาก สามารถจัดระบบ Billing ได้ และพิเศษคือไฟล์มีการเก็บเป็น Revision โดยสามารถย้อนดู Revision เก่าๆได้ ไม่ต้องกลัวเซพทับไฟล์หายไปครับ

โปรแกรมตัวอื่นๆที่แนะนำให้ทดลอง

Google Hangout ระหว่างประชุม

ประชุมด้วย hangout ครับ

Google Hangout สามารถใช้ในการประชุมได้ เพียงแต่ internet ต้อง Work พอสมควรมิเช่นนั้นจะติดขัดได้ แต่ผมคิดว่าปกติส่วนใหญ่การประชุมอาจไม่ต้องเห็นหน้ากันก็ได้ครับ จะได้มีสมาธิกับเอกสารที่อยู่ด้านหน้า ผมเขียนรีวิว Google Hangout ไว้ที่นี่

BaseCamp

Basecamp projects manage โปรแกรมชื่อดังสำหรับบริษัทที่มีโครงการซับซ้อนขึ้น

Basecamp เป็น tools จัดการโครงการที่ได้รับความนิยมทีเดียวครับ เหมาะกับบริษัทที่มีโครงการซับซ้อนขึ้น และยังมีผลิตภัณฑ์ด้านการบริหารโครงการหลายตัวที่น่าสนใจ มีหลายบริษัทที่ทำงาน IT ใช้โปรแกรมตัวนี้ สามารถจัดเก็บเอกสารและแสดงหน้าที่ได้หลายมุมมอง มีความสวยงามและดูง่าย ดูเหตการณ์ย้อนหลังได้

Yast

yast โปรแกรมบริหารเวลาทำงาน

โปรแกรมตัวนี้ใช้บริหาร resource เวลาในการทำงานได้ดีมาก ปุ่มกดเริ่มงานและหยุดงานใช้ง่าย เหมือนกับการตอกบัตรเข้างานออกงานก็ได้ครับ

Assembla

assembla โปรแกรมบริหารโครงการอีกตัวที่มีคุณสมบัติครบครัน

เพิ่มเติมโปรแกรมที่แนะนำมาจาก โพส เครื่องมือช่วยทำงานให้เสร็จ ของ @iMenn ครับ

ลองคลิกไปดูรายละเอียดได้

Factory Nova

Factory Nova

Taskfreak

taskfreak

Open Source ใช้ง่าย แต่วางแผนงานได้ไม่ซับซ้อน

omniplan

omniplan

โปรแกรม Project Management เจ๋งๆ บนแมค

Things

things

โปรแกรมที่คุณเม่นชอบใช้ manage ส่วนตัวครับ

โปรแกรมบัญชี Smartbiz

มีหลายคนถามเรื่องโปรแกรมบัญชีที่น้อง admin ใช้งาน ของผมใช้โปรแกรมตามที่ ที่ปรึกษาบัญชีของบริษัทแนะนำ นั่นคือ Smartbiz ครับ

สภาพกลืนไม่เข้าคายไม่ออกเมื่อโปรเจ็คไม่จบสักทีและไม่มีเงินมาทำต่อ

ทุกวันนี้ ส่วนใหญ่การทำเว็บนั้นไม่ได้ทำครั้งเดียวแล้วจบครับ คนจะสนใจเว็บที่มีชีวิตและมีคอนเท้นท์ที่น่าสนใจออกมาอย่างสม่ำเสมอมากกว่าเว็บที่หยุดนิ่งเหมือนตายแล้ว ดังนั้นวิธีการคิดราคาเว็บไซต์ก็ควรเปลี่ยนไป อีกทั้ง Solution หลายอย่างก็ช่วยให้ต้นทุนการทำเว็บแบบดั้งเดิมลดลงและต้นทุนการทำ Content กลับทวีความสำคัญมากขึ้นเรื่อยๆแทน

อย่างไรก็ตามเว็บองค์กรจะมี Mind set ที่ต้องการทำจบแล้วจบเลยอยู่ แต่เราสามารถนำวิธีคิดเบื้องต้นไป Convince ให้ลูกค้าเปลี่ยนเป็นเว็บรายเดือนแทนครับ ไทเกอร์ไอเดียมีความตั้งใจในการทำเว็บรายเดือนมาระยะหนึ่งจากบล็อก Rate ราคา manday ไทเกอร์ไอเดียที่เขียนมาระยะหนึ่งและเมื่อมีลูกค้ารายใหม่เข้ามา ผมจะส่งให้ลูกค้าดูก่อนเสมอ และตัวอย่างลูกค้าบริษัทใหญ่ (แต่เว็บไม่ใหญ่) อย่าง SCG ได้ทำมาแล้ว

ปัญหาของการทำเว็บแบบเหมาโปรเจ็คคือคาดเวลาจบงานได้ยากในทางปฎิบัติ

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

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

การทำเว็บรายเดือน สามารถแก้ไขปัญหานี้ได้

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

สำหรับกรณี SCG ทั้งสองเว็บที่ทำอยู่ ลูกค้าเลยเตรียมตัวเรื่องข้อมูลกันดีมากๆเพราะไม่อยากเสียเวลาไปกับการตัดสินใจระหว่างการทำเอง เพราะถ้าลูกค้าตัดสินใจนาน ผลเสียจะตกอยู่ที่ลูกค้าเองตรงที่เวลา Man day นั้นเดินไปเรื่อยๆครับ

ทำอย่างไรลูกค้าจึงจะตัดสินใจเลือกทำเว็บรายเดือน ?

อันดับแรกคือ เว็บรายเดือนมีสิทธิที่จะจบงานได้ด้วยราคาที่ถูก

สาเหตเพราะเราไม่ต้องคิดเผื่อ ต้นทุนความเสี่ยงจากการทำงานที่ไม่เสร็จสักที กับต้นทุนการหมุนกระแสเงินสดครับ ทำให้คิดราคาได้ถูกลงมากโดยสามารถคิดได้จากค่าแรงของพนักงานคูณกับตัวแปรด้านโสหุ้ยตรงๆนั่นเอง สมมติว่าทำเว็บรายเดือนๆละ 30,000 บาท ถ้าสามารถทำให้จบได้ในเดือนเดียวก็จะมีราคาเพียง 30,000 บาทเท่านั้น

ตัวอย่าง (จริงๆ) ที่กำลังทำอยู่ขณะนี้คือลูกค้าบริษัทมหาชนเจ้าหนึ่งต้องการทำเว็บให้องค์กรมหาชนของเขา ซึ่งมีเว็บ cataloque อยู่ด้วย ( เว็บนี้ซับซ้อนกว่าของ SCG ) จึงให้หัวหน้าฝ่าย IT ติดต่อทาง TiGERiDEA เพื่อประเมินราคาร่วมกับบริษัทอื่นๆ ในครั้งแรกผมเองได้เสนอ Solution เว็บรายเดือนไปแต่ทางบริษัทยังยอมรับได้ยากเพราะผู้บริหารใช้เหตผลที่ว่า ” บริษัทของเขาจะแน่ใจได้อย่างไรว่าเราจะทำเสร็จตามกำหนดจริงๆภายใต้คุณภาพที่เขาพอใจ” ดังนั้นผมจึงเสนอไปสองราคาดังนี้ครับ

• Quotation ตัวที่ 1 เสนอราคาเหมาทั้งโปรเจ็คที่ 300,000 บาท ใช้เวลาทำงานไม่เกิน 3 เดือน
• Quotation ตัวที่ 2 เสนอราคารายเดือน เดือนละ 40,000 บาท ใช้เวลาทำงานตาม requirement ประมาณให้ 4 เดือน ( รวมสี่เดือน 160,000 บาท )

จากราคาทำให้ Quotation ตัวที่ 2 มีความโดดเด่นเหนือบริษัทที่มาร่วม pitch งานด้วยกันอย่างมากและราคาถูกกว่า Quotation ตัวที่ 1 ครึ่งหนึ่งเลยทีเดียวครับ ทำให้ทีมงานต้องกลับมาพิจารณา ถึงแม้งานจะยังไม่เสร็จ ก็ไม่น่าจะเลทเกิน 1 เดือนรวมแล้ว 200,000 และเมื่อดูความคุ้มค่าแล้วจึงตัดสินใจทำเว็บด้วย Quotation ตัวที่สอง

อันดับที่สอง ทำอย่างไรจะให้ลูกค้าแน่ใจว่าเราจะทำเสร็จจริงๆ

ตัวอย่างแผนอย่างง่ายที่ @muenue วางให้ลูกค้า

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

• Wireframe หรือโครงร่างหลักของเว็บ เป็นขั้นตอนการรวบรวมลำดับความสำคัญในการนำเสนอเว็บไซต์ ตัว wireframe จะไม่มีสีสันใดๆมารบกวนทำให้การมองโครงสร้างของเว็บและ User interface นั้นตรงไปตรงมามากขึ้น สำหรับเว็บองค์กรโดยทั่วไปอาจใช้เวลาไม่ถึงเดือน แต่ถ้าเป็นเว็บ e-commerce หรือเว็บ social deal อาจจะใช้เวลานานมากหลายเดือนถ้าลูกค้ายังไม่ชัดเจนเรื่อง function การทำงานในแต่ละหน้า
• Design ทำการ design mood and tone ตาม requirement และ reference ของลุกค้า ผมมีข้อแนะนำว่าอย่าใช้วิธีคิดเชิง Agency มากเกินไปในการดีไซน์เว็บเพราะเว็บมีความ Dynamics มากกว่าสื่อสิ่งพิมพ์หรือ presentation ที่เราสามารถกำหนด environment ได้ โดยของไทเกอร์ไอเดียจะดีไซน์หน้าแรกก่อน เมื่อ Approve แล้วจึงเริ่มดีไซน์หน้าต่อไป
• จากนั้นจึงเป็นขั้นตอน Architecture ตัด CSS , HTML, testing ฯลฯ ตามลำดับซึ่งแล้วแต่นโยบายการเผื่อ Man day ของแต่ละบริษัทครับ

เว็บรายเดือน กับการเผื่อเวลา error และ delay

การวางแผนข้างต้นควรมีเผื่อเวลา Approve กับลูกค้าไว้ด้วยครับ( แล้วแต่ policy ) โดยอาจบอกลูกค้าไว้ก่อนว่าใช้เวลา Approve ไม่เกิน 1 วันและเราทำเสร็จก่อนหน้านั้น ของไทเกอร์ไอเดียเองช่วงเวลาทั้งหมดที่ Plan ไว้กับการดีไซน์จะเผื่อแก้ไขด้วยประมาณ 2-3 revision แต่ถ้าหากลูกค้าจะแก้เกินกว่านั้น ทางเราจะบอกลูกค้าว่าการแก้ไขจะกระทบเวลารวมของโปรเจ็ค และลูกค้าอาจต้องจ่ายเงินซื้อเวลาเพิ่มเติมในเดือนต่อไปครับ

เว็บรายเดือนกับความเข้าใจเรื่อง Man day เป็นเรื่องสำคัญ : กรณีศึกษาที่ล้มเหลว

ในช่วงแรกๆที่ไทเกอร์ทำงานแบบรายเดือน (ประมาณปีก่อน) ก็มีลูกค้าไม่พอใจอยู่บ้างเช่นกันถึงขั้นทางไทเกอร์คืนเงินลูกค้า ซึ่งความผิดพลาดของไทเกอร์คือการวางแผนที่ไม่ได้เผื่อเวลา error และเมื่อมีการแก้ไขทำให้ทำงานไม่ได้ตามแผน นอกจากนี้ Customer support ของไทเกอร์ยังไม่มีมาตรฐานเพียงพอที่จะ Service ได้อย่างใจลูกค้าในขณะนั้น

ในแง่ลูกค้าหากลูกค้าไม่เข้าใจเรื่อง Man day ก็อาจมีปัญหาเช่นกัน ลูกค้าหลายเจ้าอยู่บริษัทใหญ่ที่มี Agency ซึ่งได้ Agency fee หลายแสนหลายล้านบาทต่อเดือนและมีการบริการที่ดีมากเนื่องจาก Agency เหล่านั้นได้บวก Man day ไว้ใน Agency Fee แล้ว แต่พอมาทำเว็บราคาไม่แพงก็ยังต้องการบริการแบบเดียวกันเช่นกันทำให้บางคน โทรศัพท์หา AE ของไทเกอร์ทั้งวัน หรือใช้เวลาตอบเมล์แบบลงดีเทลลึกมากโดย AE ต้องใช้เวลาตอบเมล์นึงถึงครึ่งวัน ดังนั้นหากพบลูกค้าดังกล่าวทางบริษัทควรทำ Package การบริการที่ต่างกันให้เลือกตั้งแต่แรก และการจัด package จะทำให้ลูกค้าเข้าใจโดยธรรมชาติครับ

ตัวอย่างการจัด Package ให้ลูกค้าแบบทำแล้วจบงานเลย

• Package ที่ 1 ทำงานเดือนละ 25,000 ต่อเดือน ตาม requirement เริ่มแรก น่าจะทำเสร็จใน 4 เดือน และโทรศัพท์ติดต่อได้ในวันธรรมดาเวลา 13:00-14:30 เท่านั้น
• Package ที่ 2 ทำงานเดือนละ 40000 บาทต่อเดือน (โปรเจ็คเดียวกัน) ตาม requirement เริ่มแรก น่าจะทำเสร็จใน 2 เดือน โทรศัพท์ติดต่อได้ทั้งวัน เป็นต้น

ซึ่งลูกค้าเห็นราคาแล้วจะเข้าใจทันทีว่า ที่ Package ที่ 1 ราคาถูกกว่าเพราะเราจัด Man day ให้โปรเจ็คน้อยกว่าจึงทำให้เสร็จช้ากว่า

ตัวอย่างการจัด Package ให้ลูกค้าแบบทำเว็บเสร็จบริหาร Content ต่อ

• เดือนที่ 1-2 Wireframe and Design
• เดือนที่ 3 CSS HTML
• เดือนที่ 4 – 12 Blog and Social Media implementation

โปรเจ็คใหญ่มากก็สามารถคิดแบบรายเดือนได้

โปรเจ็คประเภทเว็บ System หรือ Social Commerce ขนาดใหญ่ก็สามารถทำเว็บรายเดือนได้เช่นกัน โดยเป็นลักษณะการจัดสรร Resource ตาม Rate Card ที่ลูกค้าซื้อครับ ลองดูที่ Rate ราคา manday ไทเกอร์ไอเดีย ด้านล่างสมมติว่าลูกค้าซื้อเวลาทั้งหมด 60000 บาทต่อเดือน จะสามารถจัดสรร System Analyst, Programmer, Art Director ลงไปได้ตามส่วนครับ และเดือนต่อๆไปก็สามารถนำเวลาทั้ง 60000 บาทไปลงกับ Content Copywriter แทนได้เช่นกัน

ทำไมผมถึงนำวิธีการทำเว็บรายเดือนมาแชร์ ?

เพราะว่าผมเองคิดว่า วิธีการทำงานแบบนี้มีประสิทธิภาพที่สูงกว่า และเป็นธรรมกับทุกฝ่ายทั้งลูกค้าและบริษัททำเว็บครับ Business การทำเว็บและการบริหารข้อมูล เป็น Business แบบพิเศษจริงๆ การทำงานแบบดั้งเดิมเองผมคิดว่าเป็นวิธีที่ไม่ค่อยเหมาะสมกับงานที่ Dynamics และต้องก้าวไปข้างหน้าตลอดเวลาของเว็บไซต์ เลยอยากให้เพื่อนๆบริษัททำเว็บและฟรีแลนส์ ลองพิจารณาดูเพื่อร่วมสร้างมาตรฐานใหม่กันครับ

การทำเว็บไซต์กลุ่มผลิตภัณฑ์กระดาษของ SCG ถือว่าเป็นมิติใหม่ของการทำเว็บองค์กร

เว็บไซต์ SCG TUPI คลิกที่รูปเข้าชมเว็บ

ที่ต้องยก case study เรื่องนี้มาเพราะว่าต้องถือว่าการดีลทำเว็บไซต์ที่ไม่ซับซ้อนให้แก่องค์กรขนาดใหญ่ที่มีมาตรฐานสูงอย่าง SCG ด้วยโปรเจ็ครายเดือน และราคาที่ถือว่า “ต่ำมากสำหรับเว็บในองค์กรระดับนี้” ( ประมาณ 80,000 บาท ) และยังถือว่า “ทำเสร็จได้เร็ว” ต้องถือว่าเป็นมิติใหม่จริงๆในหลายเรื่องครับ ต้องยอมรับทีมงานและผู้บริหารที่เปิดกว้างในเรื่องนี้อย่างมากในหลายเรื่องเช่นกัน

• มีการเตรียมความพร้อมด้านเนื้อหาอย่างสมบูรณ์มากก่อน Kick off project ทีมงานแบ่ง text และรูปลง folder ที่ตั้งชื่อตามเมนูของ site map อย่างชัดเจนก่อนส่งให้ TiGERiDEA
• ด้านการดีไซน์ มีการดีไซน์คร่าวๆผ่าน powerpoint เพื่อให้ผู้บริหารอนุมัติ mood and tone ก่อน 1 ครั้ง ก่อนที่จะส่งให้ TIGERiDEA ดีไซน์
• เปิดโอกาสให้ TIGERiDEA ได้ใช้ hosting นอกองค์กรที่มีสเป็คที่เปิดกว้างกว่า และใช้ WordPress ในการบริหารข้อมูลทั้งหมด

ลูกค้าประทับใจในวิธีการทำงานแบบเว็บรายเดือน

ขออนุญาต โฆษณาบริษัทเล็กน้อยด้วยคลิปรีวิวนี้ครับ

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

คุณสัญญา คุณากร พรีเซ้นเตอร์ TMB

TMB เริ่ม rebranding มาได้ระยะหนึ่งแล้ว ( หลังจากมีกระแสกดดันเรื่องแบ๊งค์ต่างๆ rebranding กันยกใหญ่ แถมแบ๊งค์ที่ใช้โทนสีน้ำเงินฟ้ามีอยู่ 3 แบ๊งค์ต้องช่วงชิงพื้นที่กัน ) โดยเอเจนซี่ค่อนข้างมีความเข้าใจจุดขายของการเป็นธนาคารที่สนับสนุนโดยรัฐฯ ( กระทรวงการคลังถือหุ้นใหญ่ ) นั่นคือความได้เปรียบในเรื่องค่าธรรมเนียมต่างๆนั่นเอง

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

template module by TiGERiDEA

สำหรับเว็บ tmb เอง การใช้ชื่อ tmbbank.com ก็ถือว่าเป็นการตัดสินใจที่ดี ธนาคารทหารไทยตั้งมาโดยจอมพลสฤษดิ์ซึ่งมีประวัติที่น่าสนใจ โดยเบื้องต้นเป็นธนาคารที่ตั้งเพื่ออำนวยความสะดวกในการให้บริหารทางการเงินแก่หน่วยงานทหาร ต่อมาจึงได้ขยายเป็นธนาคารรองรับลูกค้ามาตรฐาน

ด้านล่างเป็นหน้าเว็บ TMB ปัจจุบัน มีหลายคนได้ลองไปใช้ ebanking ของ TMB ก็มีคนชอบพอสมควรเลยนะครับ

หน้าเว็บ TMB ปัจจุบัน

แคมเปญพวกที่ฟรีค่าธรรมเนียมต่างๆ ถือเป็นสิ่งที่เอเจนซี่หยิบยกขึ้นมาพูดได้อย่างค่อนข้างเหมาะเจาะเพราะเป็นความได้เปรียบของแบ๊งค์ด้วยจริงๆ และกิจกรรมเชิงมาร์เก็ตติ้งนั้นก็ทยอยกันออกมาเป็นกองทัพ Social Media เหมือนกัน

แคมเปญ TMB Social Marketing

“Make THE Difference – พลังในตัวคุณ เปลี่ยนโลกให้ดีขึ้น”

ตามที่ผมได้ศึกษามา TMB ขยายแนวคิดมาจาก key หลักคือ “Make THE Difference – พลังในตัวคุณ เปลี่ยนโลกให้ดีขึ้น” และแนวคิดการบริหารโดยลูกค้าเป็นศูนย์กลางหรือ ” Cutomer Centric” ทำให้ธนาคารต้องพยายามจะสร้างความแตกต่างในทุกอย่างที่ลูกค้าได้เข้าไปสัมผัส

Theme : การนำเสนอของธนาคารเป็นการสร้างแรงบันดาลใจในการ กล้าที่จะคิดและทำสิ่งที่ แตกต่าง สู่การเปลี่ยนแปลงที่ยิ่งใหญ่ และหลุดออกจากกรอบของความคิด เปลี่ยนคำว่าเป็นไปไม่ได้ ให้มีแต่คำว่า เป็นไปได้ อยู่เสมอ จากจุดเปลี่ยนความคิดเพียงเท่านี้ ทุกคนก็จะสามารถเปลี่ยนโลกไปในทางที่ดีขึ้นได้

การพยายามสร้างความแตกต่างสื่อลงไปในโฆษณาด้วย เช่นโฆษณาที่ต้องดูด้วยแว่น 3D

นำเสนอเว็บ makeTHEdifference.org

จากความคิดเบื้องต้น เนื่องจากธนาคารเองไม่สามารถทำได้ในเว็บที่เป็นทางการของธนาคาร เลยพยายามนำเสนอเว็บ www.makeTHEdifference.org และสร้าง campaign ให้คนแชร์เรื่องราวของนักบอลกลุ่มนี้ (หลายๆคนคงเคยเห็นบนทีวีใน BTS) ให้มากสุด ใครแชร์มากสุดได้รางวัล ( รับตั๋วบินรอบโลก มูลค่า 500,000 บาท หมดเขต 31 มีนาคม นี้ ) แน่นอนว่าการตลาดเป็นแบบ Intrusive พอควรครับ แต่ก็ขึ้นกับการตัดสินใจของผู้บริโภคกับเพื่อนๆของผู้บริโภคนะ

กิจกรรมบน fanpage และ twitter

มี fanpage แชร์เรื่องราวที่สร้างแรงบันดาลใจ และคำคมต่างๆ ที่ http://www.facebook.com/TMBMakeTHEDifference และยังมีกิจกรรมร่วมรับรางวัลจากเมเจอร์ซีนีเพล็คถ้า RT @TMB_MTD อีกด้วย และปิดท้ายด้วย hashtag ยาววว อย่าง #MakeTHEDifference ซึ่งถ้าทวีตโดยมี hashtag นี้ก็ยังมีรางวัลให้วันละ 3 รางวัลอีกด้วย

@TMB_MTD แจกรางวัลด้วยแฮะ ลองเซิร์ทดูครับ

VDO บน YouTube และรูปบน Flickr

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

ตอนที่1 ปั้นฝัน

ตอนที่2 ปลุกพลัง

ตอนที่3 เป็นไปได้

ตอนที่ 4 เปลี่ยนโลก

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

และยังมีช่องทาง Flickr สำหรับคนอยากดูหรือโหลดรูปได้ด้วย ถึงแม้ว่า Flickr จะไม่ถึงกับได้รับความนิยมมากในไทยแต่ก็เรียกว่าทำไว้ครอบคลุมทั้งหมดได้ดีครับ http://www.flickr.com/tmbmakethedifference

บทสรุป TMB แคมเปญครั้งนี้

การพัฒนาองค์กรและภาพลักษณืระดับนี้ค่อนข้างจำเป็นที่จะต้องพัฒนาหลายๆส่วนพร้อมกัน รวมทั้งองค์กรภายในด้วย ( ซึ่งองค์กรภายในน่าจะทำได้ยากกว่ามาก ) ในส่วนของการทำ Campaign นั้นมีพื้นฐานวิธีคิดจากเอเจนซี่ในแบบคลาสสิคและมีตัว Content หลักที่ไปในทางช่วยให้แรงบันดาลใจซึ่งค่อนข้างจัดว่า ” นุ่มนวล ” สำหรับสังคมไทย อาจทำให้การ Viral ไม่ถึงกับแรงมากในกลุ่มผู้ใช้ Social ทีเดียวนัก ( เพราะพวกนี้ถูกกระตุ้นทุกวันจนเริ่มชิน ) แต่น่าจะไป impact ในกลุ่มที่เสพสื่อกระแสหลักมากกว่า

ในส่วนของ Social Media นั้น ความจริงการใช้วิธีทาง Social ในลักษณะ intrusive มีกระแสวิพากย์วิจารณ์กันพอสมควรในช่วงที่ผ่านมาก แต่กระแสของ TMB ยังไม่ถึงกับแรงมาก ซึ่งก็แลกมาด้วยความนุ่มนวลของความรู้สึกของ influencer และอาจจะส่งผลต่อความรู้สึกดีของกลุ่มเป้าหมายได้บ้างครับ

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