เบื้องหลังแนวคิดในการพัฒนาเว็บไซต์ใหม่ของ Property Perfect เวอร์ชั่น 2014 (www.pf.co.th)

July 28, 2014 rgb72 Comments

ผลงานล่าสุดของ rgb72 ที่เพิ่งจะเปิดตัวใช้จริง คือเว็บไซต์ของบริษัท อสังหาริมทรัพย์ที่ใหญ่ที่สุดแห่งหนึ่งของเมืองไทย บริษัท พร๊อพเพอร์ตี้ เพอร์เฟ็ค – Property Perfect (www.pf.co.th) ซึ่งงานนี้ถือเป็นการรื้อ re-design website ใหม่ทั้งหมดอีกครั้ง และในครั้งนี้จะเป็นการเล่าให้ฟังถึงเบื้องหลัง concept แนวความคิด และการทำงาน ที่ “กว่าจะมาเป็นเว็บไซต์ PF.co.th” ได้ ต้องผ่านอะไรมาบ้าง

ในการทำเว็บไซต์ใหม่ทุกครั้ง สิ่งที่เราต้องทำก็คือ

  1. การค้นหาข้อเสีย เพื่อ แก้ไขปรับปรุงให้ดีขึ้น
  2. การพัฒนาเว็บไซต์ด้วย concept ใหม่ โดยคำนึงถึงการใช้งานของ user ที่เปลี่ยนไปและใช้เทคโนโลยีที่เหมาะสม และ
  3. ตอบโจทย์ทางการตลาดที่ลูกค้าต้องการ

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

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

โครงสร้างของเว็บ ที่เริ่มต้นจากหน้าแรก เข้ามาแล้ว user สามารถเลือกเข้าดู “บ้านเดี่ยว” “ทาวน์โฮม” หรือ “คอนโด” ได้นั้น ยังอยู่เหมือนเดิม

แต่ที่น่าแปลกคือ เราได้สังเกตพฤติกรรมของ user แล้วพบว่า user ที่มักจะใช้ “sitemap” ที่อยู่ด้านล่างในส่วนของ footer เพื่อเข้าถึงแต่ละโครงการ มากกว่าการใช้เมนูด้านบน นั่นน่าจะเป็นเพราะ เมนูด้านบนของเดิม ไม่โดดเด่นพอ หรือว่าใช้ไม่ง่ายนัก หรือสอง user อาจจะชอบที่จะเหลือเข้าดูบ้านแต่ละโครงการด้วยการมองเห็นทั้งหมดก่อน แล้วจึงกดเลือกเข้าโครงการที่ตัวเองต้องการเลย.. ไม่ต้องการเลือกจากเมนูด้านบนที่มีหลาย step

ดังนั้น.. เราจึงแก้ไขสองจุดด้วยการ 1. ปรับการออกแบบ เมนูด้านบนใหม่ และ 2. ถ้า user ชอบเข้าถึงจาก footer อยู่แล้ว เราก็จะพัฒนาให้ footer นั้นใช้งานได้ดีขึ้น!

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

ส่วนตัว footer เรายังยึด concept เดิม คือตีแผ่ทุกโครงการออกมา แต่ “เพิ่ม” feature ที่ให้ user สามารถเลือกดูโครงการทั้งหมดในรูปแบบของ “map view” ด้วย

สิ่งที่เป็น concept ใหม่ที่เราต้องการนำเสนอ เพื่อตอบโจทย์วิถีการใช้งานเว็บไซต์ที่เปลี่ยนไปของ user ในปัจจุบัน ซึ่งมีมากมายหลายอย่าง หนึ่งในสิ่งที่ต้องปรับปรุงเร่งด่วนเลยก็คือ การเพิ่มความสามารถให้กับเว็บไซต์เพื่อ support อุปกรณ์เคลื่อนที่ประเภท Mobile device.. และคำว่า Mobile device ในที่นี้ไม่ได้พูดถึงแค่ Smart phone เท่านั้น แต่รวมไปถึงอุปกรณ์พกพาจำพวก tablet และ iPad ซึ่งเป็นอีกหนึ่งอุปกรณ์ที่มีเทรนด์กำลังเติบโตอย่างต่อเนื่อง

แน่นอนว่า เมื่อเราบอกว่าต้องการ support อุปกรณ์พกพา ดังนั้นหลักการใช้งานของเว็บนี้ก็ต้องเป็นหลักการใช้งานที่คนเล่นอุปกรณ์จำพวก tablet นี้คุ้นเคย เช่นการ swipe เลื่อนภาพ, การสร้างปุ่มให้ใหญ่พอดีกับนิ้วให้สามารถกดได้อย่างง่ายดาย และอื่นๆอีกมากมาย

แต่ความยากของการสร้างเว็บไซต์นี้ไม่ได้อยู่ที่งาน production การออกแบบ หรือการเขียน coding แต่อย่างใด

ความยากมันอยู่ที่ “เวลา”

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

เมื่อลูกค้าแจ้งเราว่า ระยะเวลาที่เหลืออยู่นี้พอจะทำได้สำเร็จทันไหม? ผมตอบลูกค้าไปว่า “ทันครับ”

จากนั้นเมื่อถึงเวลาเริ่มงาน ทีม production rgb72 ได้ทำการประชุมภายใน เราตั้งคำถามกันว่า เราจะต้องการทีมงาน outsource เข้ามาเพิ่มเพื่อช่วยเหลือมั้ย? ซึ่งทางทีมให้คำตอบมาว่า “เรามาทำเองเสาร์-อาทิตย์ ลุยกันไปเลยดีกว่า”

เมื่อความมุ่งมั่นเป็นเช่นนั้น เรา rgb72 ก็ได้เริ่มทำงานโดยไม่หยุดเสาร์-อาทิตย์เลย เป็นเวลา 3 สัปดาห์ ซึ่งหากจะนับวันแล้วก็คงจะคิดเป็นการทำงานประมาณ 19 วัน ติดต่อกันโดยไม่มีวันหยุด!!

โหดมาก..แต่เราก็ทำสำเร็จ

แต่นั่นก็ยังเป็นแค่งานใน Phase แรก ..

แม้ว่าใน phase นี้จะยังไม่ support อุปกรณ์อย่าง smart phone กล่าวคือ อุปกรณ์มือถืออย่าง iPhone และ Smart phone นั้น ยังสามารถดูได้ เพียงแค่ไม่ได้มีรูปแบบและขนาดที่พอดีสำหรับ smart phone .. ไม่ได้เป็น responsive หรือเป็น mobile site เพราะด้วยเวลาอันจำกัดมากๆ แต่ feature นี้ กำลังเดินทางมาอย่างแน่นอน!

ยังมี features อีกมากมายที่รอจะ update ตามมาเร็วๆนี้

ซึ่งถ้ามี update เมื่อไหร่ ผมไม่ลืมที่จะมา update ใน blog72 นี้แน่นอนครับ..

สำหรับตอนนี้.. ลองเข้าเว็บ pf.co.th ดู version ใหม่นี้ไปก่อนนะครับ ^^

12 สิ่งที่ได้เรียนรู้จากบรรยายของคุณฝน ประสานสุข วีระสุนทร ในหัวข้อเรื่อง “VISUAL STORYTELLING FROM FROZEN”

งาน Bangkok Comic Con ที่เพิ่งจบไปเมื่อศุกร์ เสาร์ อาทิตย์ (4-6 กรกฎาคม) ที่ผ่านมา เรียกได้ว่ายิ่งใหญ่อลังการมากมาย โดยในงานนั้นเต็มไปด้วยเหล่าฮีโร่ในดวงใจของคนมากมาย ตั้งแต่ Batman, spiderman, cartoon network, ยาวไปถึง Game of Throne และนั่นทำให้จำนวนคนที่มาร่วมงานนั้นไม่เรียกว่าแน่น แต่ต้องเรียกว่า “ล้น” ถึงจะถูก (ล้นมากๆ จนผมแทบจะหายใจไม่ออก)

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

แต่งาน comic con ก็ใช่ว่าจะมีแต่คนแต่งตัวเป็น Super Hero เดินไปเดินมาให้คนถ่ายรูปเล่นเท่านั้น ช่วงบ่ายวันเสาร์ผมได้มีโอกาสไปฟังคุณฝน ประสานสุข วีระสุนทร หนึ่งในทีมงานของดีสนีย์ ผู้สร้างเรื่องราวให้กับหนังการ์ตูนสุดดังเรื่องล่าสุด “Frozen” ณ โรงภาพยนตร์สกาล่า และแน่นอนว่างานนี้ “ฟรี”

คุณฝน ประสานสุข วีระสุนทร เป็นคนไทย (อ่ะแน่นอน) ที่มีประสบการณ์ที่เกี่ยวข้องกับ animation มายาวนาน เธอมาเล่าให้ฟังถึงที่มาที่ไปในการคิด story หรือเรื่องราว ก่อนจะมาเป็นเรื่อง Frozen ที่เราดูๆกันนั้น จะต้องผ่านการปรับเปลี่ยนอะไรบ้าง

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

ซึ่งแน่นอนว่าระหว่างทางที่ “ขายเรื่องราว” ให้ผู้คนได้ฟังนั้น งานจะต้องมีการปรับเปลี่ยน แก้ไข ฉีกทิ้ง นับครั้งไม่ถ้วน ..แต่เอาล่ะ นี่คือ 12 สิ่งที่ผมได้เรียนรู้จากการฟังบรรยายของ คุณฝน ประสานสุข วีระสุนทร ในหัวข้อเรื่อง “Visual Storytelling from Frozen”
(ในงานกำชับมากๆว่าห้ามถ่ายรูป ดังนั้นเราจะมีภาพเฉพาะช่วงที่เค้าอนุญาตให้ถ่ายเท่านั้นนะครับ)

1. ที่ดิสนี่ย์มีคนทำงานรวมๆแล้วประมาณ 900คน ซึ่งนอกจากจะมีคนทำการ์ตูนแล้ว ยังมีนักวิทยาศาสตร์อีกด้วย! ส่วนหนังเรื่อง Frozen นั้นใช้คนสร้างรวมแล้วประมาณ 300 คน

2. ในบริษัทดิสนีย์ปัจจุบันมีคนไทยทำงานอยู่ด้วย รวมคุณฝนเองก็ สามคน

3. วิธีการอธิบายเรื่องราวของหนังได้ดีที่สุดก็คือการอธิบายผ่านรูปภาพ และบางครั้ง รูปภาพนั้นก็ไม่ต้องการคำอธิบายใดๆเลย

เช่นภาพนี้ที่คุณฝนบอกว่า แค่ดูก็รู้สึกตลกแล้ว ไม่ต้องอธิบายอะไรเลย

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

5. การให้ “แสง” สามารถช่วยแสดงให้เห็นถึงอารมณ์ของการ์ตูน ณ ฉากนั้นๆได้

6. หนังเรื่อง Frozen มีการใช้ “สัญลักษณ์” บางอย่างเพื่อแสดงให้เห็นถึงสิ่งที่ “กั้นขวาง” ระหว่างสองพี่น้อง ซึ่งนั่นคือ “ถุงมือ”และ “ประตู”

ประตู.. สิ่งที่กั้นขวางระหว่างสองพี่น้อง

7. ในหนังของดิสนี่ย์ทุกเรื่องจะต้องมีเพลงหนึ่งที่เค้าเรียกกันว่า “I Want Song” คือเพลงที่แสดงให้เห็นถึงความต้องการของตัวละคร เช่น หนังเรื่อง Lion King ก็จะมีเพลง “I just can’t wait to be King” ที่ซิมบ้าต้องการจะบอกทุกคนว่า ฉันต้องการเป็นเจ้าป่าแล้วนะ! ส่วนเรื่อง Frozen นั้นก็มีเช่นกัน นั่นก็คือเพลง “For the First Time in Forever”

8. เพลง “For the First Time in Forever” ที่ว่าเป็นเพลง “I Want Song” นั้น เดิมที่เกือบจะไม่ได้เป็นเพลงนี้แล้ว เพราะก่อนหน้านี้ได้มีการแต่งอีกเพลงขึ้นมาชื่อ “More Than Just the Spare” ซึ่งพูดถึงการที่แอนนา น้องสาวนางเอกนั้นไม่อยากจะเป็นคนที่ไม่สำคัญ ไม่อยากจะเป็นตัวสำรองอีกต่อไป

9. คุณฝนเองได้ยกตัวอย่าง ฉากที่มีการปรับเปลี่ยนไป เช่น ฉากงานเลี้ยงที่แอนนาพยายามจะขอเอลซ่าว่าเธออยากจะแต่งงาน ฉากนี้เดิมทีเป็นการสนทนาระหว่าง พี่กับน้อง เท่านั้น แต่ภายหลังถูกปรับเปลี่ยนให้มี เจ้าชายฮานส์ เข้ามายืนอยู่ในฉากด้วย โดยสามารถสังเกตได้ว่า เจ้าชายนั้นจะยืนอยู่ “ระหว่าง” สองพี่น้องนี้ตลอดเวลา เพื่อแสดงให้เห็นถึงการแบ่งแยกสองคนออกจากกัน

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

11. แล้วก็มีคนถามคุณฝนว่า แล้วเราจะรู้ได้ไงว่า เราชอบอะไร? คุณฝนบอกว่า “ของแบบนี้ต้องลอง ลองทำดูนานๆ แล้วเราจะรู้ว่าเราชอบอะไรหรือไม่ชอบอะไร”

12. สุดท้าย มีคนถามว่า “เงินดีมั้ย?” คุณฝนตอบว่า “ถ้าจะทำอาชีพนี้เพื่อเงินล่ะก็… แนะนำให้ไปทำอย่างอื่นดีกว่านะ!” และนั่นเรียกเสียงเฮได้ดังก้องโรงภาพยนตร์สกาล่าเลยทีเดียว

Search This Site:



rgb72 on Facebook

คำศัพท์ Internet วันละคำ

Air (คำที่เกี่ยวข้อง: Adobe, Flash, HTML, JavaScript)
– หนึ่งใน technology ที่พัฒนาโดย Adobe ซึ่งมีคุณสมบัติที่ช่วยให้นักพัฒนาสามารถสร้างโปรแกรมสำหรับคอมพิวเตอร์ได้ใช้เทคนิคเดียวกันกับการเขียน code สำหรับเว็บ ไม่ว่าจะเป็น HTML, JavaScript หรือ Flash โดยคำว่า AIR นั้นย่อมาจาก Adobe Integrated Runtime

72's Friends

Useful Links

rgb72


being72 คือหนังสือที่รวบรวมเรื่องราวความเป็น rgb72 บริษัทออกแบบเว็บไซต์ ตั้งแต่อดีตถึงปัจจุบัน โดยจัดทำเนื่องในโอกาสครบรอบ 10ปี

+ บทความจากผู้เขียน
+ ตอนที่1: Pre-rgb72 / ทำงานกับ Martha Stewart
+ ตอนที่2: Pre-rgb72 / Arcadian
+ ตอนที่3: Pre-rgb72 / ewit
+ ตอนที่4: เริ่มต้นอย่างเงียบๆ
+ ตอนที่5: Generation 1 (ยุคที่1:บุกเบิก) / เริ่มต้นที่ศูนย์
+ ตอนที่6: โทร โทร โทร...
+ ตอนที่7: นามบัตร
+ ตอนที่8: หนังสือพิมพ์และโทรทัศน์
+ ตอนที่9: MATCHING STUDIO
+ ตอนที่10: มีเงินที่ไหน ให้ไปที่นั่น
+ ตอนที่11: พนักงานคนแรก
+ ตอนที่12: ภาพแทรก ออฟฟิสที่สองของ rgb72
+ ตอนที่13: เพื่อนจาก ewit
+ ตอนที่14: GettyImages ฟ้องจริง ถึงจริง
+ ตอนที่15: เว็บไซต์ที่ทำแบบมากที่สุด
+ ตอนที่16: ความฝันที่ 1 พบชื่อลูกค้าทุกๆ ห้านาทีที่ขับรถ
+ ตอนที่17: สมุย.. สร้างเสร็จได้ในวันเดียว
+ ตอนที่18: ขึ้นศาล.. มันไม่สนุก
+ ตอนที่19: นักธุรกิจต่างชาติ
+ ตอนที่20: ความฝันที่ 2 เที่ยวต่างประเทศ
+ ตอนที่21: Super AE
+ ตอนที่22: สินบน
+ ตอนที่23: ผู้หญิงที่ผมไม่รับ
+ ตอนที่24: งานที่คุณไม่ได้ดู
+ ตอนที่25: นักออกแบบ
+ ตอนที่26: คู่แข่งที่รัก
+ ตอนที่27: เซียนหลังกระดานหุ้น ตอนที่ 1/2
+ ตอนที่27: เซียนหลังกระดานหุ้น ตอนที่ 2/2
+ ตอนแทรก: หาาา?... อะไรนะ!!??
+ ตอนที่28: ยิ่งให้... ยิ่งได้
+ ตอนที่ 29: Wall of Frames
+ ตอนที่ 30: ผี 72
+ ตอนที่ 31: เพื่อนจากตะวันออกกลาง
+ ตอนที่ 32: Photography
+ ตอนที่ 33: Too Far from the Dream





Recent Comments

Powered by Disqus