สัปดาห์ที่ผ่านมาได้สอนเรื่องราวเกี่ยวกับ Design and Culture หรือการออกแบบ ศิลปะและวัฒนธรรม โดยเนื้อหานั้นได้แบ่งออกเป็น 2 ส่วนคือ ส่วนแรกจะเป็นการเรียนรู้เกี่ยวกับศิลปะและวัฒนธรรมที่เด่นๆ ของโซนเอเซียที่เรารู้จักกันก่อน ซึ่งชาติที่ได้จับมาคุยกันนั้นมี 4 ชาติ 4 สไตล์ดังนี้ ญี่ปุ่น จีน อินเดีย และ บาหลี-อินโดนีเซีย และส่วนที่ 2 คือโซน ยุโรป อาฟาริกา อเมริกาเหนือและใต้ ซึ่งจะคุยกันในสัปดาห์หน้า
สำหรับ presentation ในสัปดาห์นี้ นศ. สามารถ download ได้จาก link นี้
วันอังคารที่ ๒๖ สิงหาคม พ.ศ. ๒๕๕๑
วันจันทร์ที่ ๑๘ สิงหาคม พ.ศ. ๒๕๕๑
เราใช้โทรศัพท์บ้านครั้งสุดท้ายเมื่อไร่?
วันนี้คุยกันใน rgb72 กันด้วยเรื่องของเบอร์โทรศัพท์ คุยกันว่ามีคนโทรหาเราใช้เบอร์ 02 ตอนดึก ก็เลยเดาว่าไม่น่าจะใช่โทรศัพท์ office และดูเหมือนว่าเสียงรอบข้างนั้นเงียบสงบ ก็เลยคิดว่าน่าจะใช้โทรศัพท์บ้านโทร
ก็เลยมานั่งเอะใจว่า เราใช้โทรศัพท์บ้านครั้งสุดท้ายเมื่อไร่?
ตั้งแต่มีโทรศัพท์มือถือเข้ามา ทำให้การติดต่อสื่อสารสะดวกขึ้นมากมาย การติดต่องานการโทรหาลูกค้า หรือแม้กระทั่งการขอเบอร์สาวในผับก็ต้องเป็นเบอร์มือถือ เพราะว่ามันตรงตัว โทรแล้วเจอแน่ๆ ไม่เหมือนกับเบอร์บ้านแต่ก่อนที่โทรทีไรก็ไม่เจอ หรือแม่รับก็ต้องขอสายเพื่อน ซึ่งบางครั้งก็เผลอเรียกชื่อพ่อมันออกไป -_-"
จำได้ว่าก่อนหน้านี้ที่ยังไม่มีมือถือ เวลานัดเจอเพื่อนก็ต้องมีจุดนัดพบแบบเฉพาะเจาะจง เช่นใต้สะพานลอย หรือป้ายรถเมล์หน้าห้างฯ หากใครคนใดมาช้า สิ่งที่เราทำได้มากสุดก็คือโทรไปตามที่บ้าน ซึ่งโดยมากก็มักจะไม่เจอ (แน่นอน ถ้า late แล้วเราโทรไปมันยังอยู่บ้านคงโดนยำเละ) แต่ว่าก็ยังได้ยินเสียงคนที่รับสายบอกสถานะของเพื่อนที่กำลังมาให้ได้อุ่นใจว่า "ออกไปนานแล้วนะ ประมาณชั่วโมงหนึ่งได้แล้ว"
พอต่อมามี pager ก็ทำให้หลายอย่างง่ายขึ้น แต่ก็ยังไม่สู้มือถือ
ปัจจุบันมือถือมีกันทุกคน บางคนมีมากกว่า 1 เครื่อง หลายคนมีมากกว่า 1 เบอร์ มีมากจนทำให้เรานั้นไม่จำเป็นต้องใช้เบอร์บ้านอีกต่อไป หรือถ้าจะใช้ก็เป็นกรณีที่ไม่อยากจะจ่ายค่ามือถือ ใช้เบอร์ office หรือใช้เบอร์บ้านให้แม่จ่ายให้
ถึงตอนนี้แล้วคิดออกรึยังว่าใช้โทรศัพท์บ้านครั้งสุดท้ายเมื่อไร่??
สำหรับผมนั้นคิดว่าน่าจะเป็นปีนะครับ แต่จำไม่ได้ซะแล้วสิ
ก็เลยมานั่งเอะใจว่า เราใช้โทรศัพท์บ้านครั้งสุดท้ายเมื่อไร่?
ตั้งแต่มีโทรศัพท์มือถือเข้ามา ทำให้การติดต่อสื่อสารสะดวกขึ้นมากมาย การติดต่องานการโทรหาลูกค้า หรือแม้กระทั่งการขอเบอร์สาวในผับก็ต้องเป็นเบอร์มือถือ เพราะว่ามันตรงตัว โทรแล้วเจอแน่ๆ ไม่เหมือนกับเบอร์บ้านแต่ก่อนที่โทรทีไรก็ไม่เจอ หรือแม่รับก็ต้องขอสายเพื่อน ซึ่งบางครั้งก็เผลอเรียกชื่อพ่อมันออกไป -_-"
จำได้ว่าก่อนหน้านี้ที่ยังไม่มีมือถือ เวลานัดเจอเพื่อนก็ต้องมีจุดนัดพบแบบเฉพาะเจาะจง เช่นใต้สะพานลอย หรือป้ายรถเมล์หน้าห้างฯ หากใครคนใดมาช้า สิ่งที่เราทำได้มากสุดก็คือโทรไปตามที่บ้าน ซึ่งโดยมากก็มักจะไม่เจอ (แน่นอน ถ้า late แล้วเราโทรไปมันยังอยู่บ้านคงโดนยำเละ) แต่ว่าก็ยังได้ยินเสียงคนที่รับสายบอกสถานะของเพื่อนที่กำลังมาให้ได้อุ่นใจว่า "ออกไปนานแล้วนะ ประมาณชั่วโมงหนึ่งได้แล้ว"
พอต่อมามี pager ก็ทำให้หลายอย่างง่ายขึ้น แต่ก็ยังไม่สู้มือถือ
ปัจจุบันมือถือมีกันทุกคน บางคนมีมากกว่า 1 เครื่อง หลายคนมีมากกว่า 1 เบอร์ มีมากจนทำให้เรานั้นไม่จำเป็นต้องใช้เบอร์บ้านอีกต่อไป หรือถ้าจะใช้ก็เป็นกรณีที่ไม่อยากจะจ่ายค่ามือถือ ใช้เบอร์ office หรือใช้เบอร์บ้านให้แม่จ่ายให้
ถึงตอนนี้แล้วคิดออกรึยังว่าใช้โทรศัพท์บ้านครั้งสุดท้ายเมื่อไร่??
สำหรับผมนั้นคิดว่าน่าจะเป็นปีนะครับ แต่จำไม่ได้ซะแล้วสิ
วันอาทิตย์ที่ ๑๗ สิงหาคม พ.ศ. ๒๕๕๑
Toyota Camry (by rgb72)
เสร็จเรียบร้อยไปอีกงานหนึ่ง สำหรับ Toyota Camry ซึ่งตัวนี้เป็น Microsite ที่เน้นการให้ข้อมูลเฉพาะรุ่นของ Toyota Camry เท่านั้น สำหรับงานนี้ลงมือตั้งแต่ออกแบบ design และ flash interactive โดยคุณ Nora นั่นเอง โดยตัว concept ของงานนั้น ลูกค้าต้องการให้การออกแบบ และ movement ต่างๆ สะท้อน character หรือตัวตนที่แท้จริงของความเป็น Camry ซึ่งนั่นคือความเรียบหรู มีระดับ แต่อย่างไรก็ตาม ตัวเว็บไซต์เองต้องไม่น่าเบื่อ ดังนั้น animation นั้นต้องมีให้พอเหมาะ ไม่มากหรือน้อยจนเกินไป
การแสดงภาพแบบเต็มขนาด window นั้นจะช่วยให้ภาพลักษณ์และรูปแบบของเว็บไซต์ออกมาดูดีมาก แต่อย่างไรก็ตาม limit ในเรื่องของระยะเวลาในการ download ไฟล์นั้นเป็นสำคัญ เนื่องจาก target ของคนที่จะเข้ามาดูเว็บไซต์นี้มี range ที่กว้างมาก เป็นไปได้ตั้งแต่คนทำงาน office คนเล่น computer ที่บ้าน และนักธุรกิจระดับสูง ดังนั้นตัวเว็บจำเป็นต้อง load เร็ว ใช้ง่าย และสะท้อนภาพลักษณ์ของ Camry ออกมาได้ ซึ่งตรงนี้คิดว่าทางคุณนอร่าน่าจะทำงานออกมาได้ดีพอสมควร เพราะดูจาก feedback ลูกค้าแล้ว comment ที่ให้แก้มีเพียงน้อยนิดเท่านั้น
หากจะดูเว็บไซต์นี้แบบ live สามารถดูได้จาก section "Interactive Brochure" ของเว็บ e-toyotaclub.com หรือเข้าไปกดที่ link Toyota Camry จากหน้า Works ของ rgb72 เพราะเนื่องจากเว็บไซต์นี้เป็น pop up หากกด link ตรงไปยังเว็บเลยจะทำให้ flash แสดงผลไม่ตรงกับ window จะทำให้ดูแล้วไม่สวยครับ
OXFORD Website Reviews (www.ox.ac.uk)
วิเคราะห์เว็บไซต์ของ มหาวิทยาลัย Oxford (University of OXFORD)www.ox.ac.uk
เมื่อประมาณเดือนที่แล้วหลังจากที่ได้เข้าไปรับ brief งานมาจากทาง จุฬาลงกรณ์มหาวิทยาลัย ก็ได้รู้จักกับเว็บไซต์นี้ เว็บไซต์ออย่างเป็นทางการ เว็บไซต์ของมหาวิทยาลัย Oxford (www.ox.ac.uk) ซึ่งเป็นมหาวิทยาลัยที่มีชื่อเสียงมากแห่งหนึ่งในโลก และเผอิญว่าเว็บไซต์ของ Oxford นี้ใช้พื้นฐานของความเรียบง่ายในการใช้งาน (แต่ไม่เรียบง่ายในการ develop) การเน้นที่ user แต่สำคัญแต่ก็ไม่ได้ทอดทิ้งความสวยงามใดๆ เลยเห็นว่า เว็บนี้เหมาะที่จะเป็นเว็บที่จะมา review กัน
ตัวเว็บไซต์นั้นใช้ความเรียบง่ายแต่สวยงาม สะอาดตา มาเป็น key หลักในการออกแบบ โดยนำมาซึ่งความง่ายในการค้นหาและอ่านข้อมูลต่างๆที่มีอยู่ในเว็บไซต์ จากหน้าแรก เว็บไซต์นี้ได้ใช้สีน้ำเงินเข้มเป็นสีพื้นในการออกแบบ ซึ่งสีน้ำเงินนั้นช่วยให้ดูมีความน่าเชื่อถือ มั่นคง และการทำเว็บไซต์ที่มีตัว content หรือตัวอักษรสีขาวบนพื้นสีน้ำเงินนั้น ทำให้เว็บไซต์ดูดี ทันสมัย และโดดเด่นมาก
เริ่มจากด้านบนซ้ายของเว็บไซต์ มี Logo ของ Oxford ตั้งเด่นอยู่ ทำให้ user นั้นสามารถรู้ได้ชัดเจนทันทีว่า ขณะนี้ได้เข้ามาอยู่ในเว็บไซต์ของ University of Oxford แล้ว และเนื่องจาก logo มีสีเดียว ดังนั้นจึงได้ทำตัว logo อยู่ใน gif format
ถัดมาเป็น link ต่างๆ และ Search box ที่โดดเด่น สามารถให้ user ค้นหาข้อมูลที่เขาต้องการได้อย่างรวดเร็ว นอกจากนี้ยังมี Quick Links ที่ user สามารถเลือกเข้าชมหน้าต่างๆในเว็บได้ โดยไม่ต้องเสียเวลาผ่านหน้าหลักจากเมนูหลักทางด้านล่าง สังเกตได้ว่า เว็บไซต์นี้เป็นเว็บที่เน้นเรื่องการใช้งานของ user เป็นที่สุด ตั้งแต่การใช้รูปภาพที่น้อย และใช้ตัวอักษรมากกว่า เพื่อเน้นการ load เร็ว การมี search box และ quick links ช่วยอำนวยความสะดวกรวดเร็วในการเข้าถึงข้อมูล ซึ่งทั้งหมดนี้เป็นความน่าชื่นชมในการจัดทำเว็บไซต์ของ Oxford
ถัดมาเป็น main area สำหรับ promote ข่าวต่างๆ และรูปภาพที่เป็น key visual โดยทั้งหมดนี้ไม่มี flash เข้ามาใช้งานเลย แต่กลับเป็นแค่ javascript ที่นำมาใช้ประโยชน์ได้อย่างน่าสนใจ ตั้งแต่ animation และ technique ต่างๆ ซึ่งนั่นหมายถึงเมนูหลักทางด้านล่าง และรูปภาพหลักที่จะได้กล่าวถึงต่อไป
ดูเผินๆ ก็เหมือนว่า javascript ที่มาใช้ตรงนี้นั้นก็แค่ช่วยเมนูหลักทางด้านล่างในการเปลี่ยนรูปหลังจากกดเลือกแล้วเท่านั้น แต่จริงแล้ว มีจุดที่น่าสนใจมากอยู่จุดหนึ่งที่ javascript ได้มีการนำมาใช้เพื่อประโยชน์ในการ support user นั่นคือความสามารถในการ Mask รูป เพื่อ support จอขนาด 800x600 และ 1024x768 ได้อย่างลงตัวในเว็บเดียวกัน
ลองดูรูปแรก (รูป default) รูปอาคารที่มีต้นไม้อยู่ทางด้านขวามือ หากขยายหน้าจอให้กว้างเกินกว่า 1024 (ถ้าจอคุณกว้างได้มากกว่านั้น) จะพบว่า รูปจะสุดอยู่แค่นั้น ไม่ได้ขยายไปไหน นั่นคือรูป default นั้นมีความกว้างอยู่ที่การ support จอขนาด 1024pixels นั่นเอง แต่หากเราลองย่อขนาดจอให้เล็กลง จะพบว่ารูปต้นไม้บางส่วนหายไป ถูกตัดไป จนกระทั่งสุดอยู่ที่จอขนาดประมาณ 800x600
ขยายเกิน 1024
ขนาด 800x600
บางคนอาจจะคิดว่านี่เป็นเรื่องธรรมดาที่ไม่น่าตื่นเต้นอะไรนัก แต่จากที่ได้สังเกตมา ผมเองยังไม่เคยเห็นเว็บไซต์ใด (โดยเฉพาะเว็บในไทย) นำเทคนิคนี้มาใช้ประโยชน์ได้อย่างดีขนาดนี้
ก่อนหน้านี้เคยเห็นเว็บที่พยายาม support จอ 800 และจอ 1024 ในเว็บเดียวกันนั่นคือเว็บไซต์ของ UBS (www.ubs.com) ซึ่งหากใช้จอ 800 หรือ 1024 เว็บของ ubs นี้ก็จะสามารถให้ user ได้เห็นภาพและ layout ที่เหมือนกันได้ทั้งคู่ แต่ต่างตรงที่ว่า เว็บไซต์ของ ubs นั้นจะต้องทำการ refresh เมื่อมีการปรับหน้าจอ ซึ่งตัวเว็บจะทำการ detect ว่าเราใช้ windows ที่ size ไหน แล้วก็เลือกหน้าที่ออกแบบมาสำหรับ size นั้นให้ ซึ่งผลเสียคือความช้าในการเรียก load อีกครั้ง (อย่างไรก็ตาม ใครจะมานั่งเปลี่ยน size window กันบ่อยๆล่ะ)
กลับมาต่อที่ Oxford เมนูนั้นใช้ Style Sheet มาช่วยทำ hi-light menu ทำให้ประหยัดการใช้รูปไปได้ค่อนข้างมาก และก็ไม่ได้ทำให้เว็บดูไม่สวยแต่อย่างใด
ด้านล่างมองเผินๆ เหมือนเป็น sitemap ซึ่งแสดงหน้าทั้งหมดที่มีอยู่ในเว็บไซต์ ถามว่าดูน่าเกลียดไหม โดยส่วนตัวกลับคิดว่าเราต้องดูที่จุดประสงค์ของคนที่เข้ามาในเว็บไซต์ เมื่อ user ที่เข้ามารู้อยู่แล้วว่าตัวเองเข้ามาเพื่อค้นหาข้อมูล การที่เรามีข้อมูลให้เค้าได้อย่างรวดเร็ว และเข้าถึงง่าย นั่นน่าจะบรรลุจุดประสงค์ของ user และจุดประสงค์ของเราคือการนำเสนอข้อมูล ซึ่งในกรณีนี้ รูปภาพที่สวยงาม animation นั้นเป็นแค่ส่วนประกอบ
ด้านใน การ design นั้นได้มีการปรับให้พื้นสีน้ำเงินมีเฉพาะด้านบน ในส่วนของ content นั้นเป็นพื้นสีขาว ทั้งนี้เพื่อความสบายตาของ user ในการอ่านข้อมูล อย่างไรก็ตาม ในเชิงของการพัฒนา develop ยังคงใช้ text based และ javascript เป็นหลัก ซึ่งจะเห็นได้จาก sub menu ทางด้านบน ส่วนความสามารถในการ support จอ 800 นั้นยังคงมีอยู่ ซึ่งก็ยังดูได้จากรูปที่มีอยู่ในเว็บด้านในนั้น สามารถยืดจะหดได้โดยใช้ feature mask
อีกหนึ่ง feature ที่คาดว่าน่าจะได้เห็นจากเว็บนี้ แล้วก็ได้เห็นจริงๆนั่นคือความสามารถในการ print ให้ได้พอดีกระดาษ A4 โดยปกติแล้ว หากเราทำเว็บแล้วไม่ได้ support การ print ให้พอดีกระดาษ A4 นั้น ก็จะทำให้เว็บที่ print ออกมาจะกว้างเกินกระดาษ ซึ่งวิธีแก้ก็ต้องไปแก้ที่ user โดยการปรับให้ print เป็นแนวนอน ซึ่งวิธีนี้นั้นดุไม่ pro เอาซะเลย
วิธีที่เว็บ Oxford นี้ใช้นั่นคือการคัดเอาเฉพาะส่วนที่เป็น content หรือเนื้อหาสำหรับเว็บนี้เท่านั้นมาใช้ในการพิมพ์ ลอง test ดูได้จากการกด print preview จะเห็นว่า ได้มีการกำหนดเฉพาะส่วนของ content ให้แสดงบนกระดาษ A4 นอกจากจะคัดเฉพาะ content แล้ว ความกว้างของเนื้อหาก็ยังไม่กว้างเกินกระดาษ A4 ด้วย ดังนั้น เมื่อ user print เว็บนี้ไป ก็จะได้แต่เนื้อหา (ไม่มีพวก banner หรือเมนู) และได้ขนาดที่พอดี ไม่ต้องมาปรับกระดาษให้เป็นแนวนอน ซึ่งถือว่าเป็นการ support user ได้อย่างละเอียดลึก อย่างไรก็ตามในบางหน้าของเว็บ Oxford ยังมีหลุดๆบ้าง คือพอสั่ง print แล้วมีตัวอักษรบางกลุ่มไม่อยู่ใน column หรือหลุดเรื่องขนาดและรูปแบบของ font
หน้า Research ก่อนพิมพ์
หน้า Print Preview
** การทำ print version แบบนี้นั้นทาง rgb72 ก็เคยทำแล้วกับงานเมื่อสองปีที่แล้วคืองาน INGFunds (www.ingfunds.co.th) ซึ่งเหมือนเป็นการปิดทองหลังพระลูกค้าเองก็แทบจะไม่รู้ว่าสิ่งที่เราทำนี้เป็น extra ส่วนตัวคนที่เข้ามาเล่นแล้ว print นั้นก็ไม่รู้หรอกว่า การ print แล้วได้พอดีนั้นเป็นการใช้เทคนิคพิเศษ **
ทั้งหมดที่ได้ review ไปนั้น เป็นการ review จุดเด่น จุดที่ทำให้เว็บ Oxford นั้นแตกต่าง กล่าวคือ เว็บไซต์ของ Oxford นั้น สามารถนำเสนอเว็บไซต์เพื่อ support User ไม่ว่าจะเป็นเรื่องของ ข้อมูล รูปภาพ ความรวดเร็วในการ load ความสามารถในการ support จอสองขนาด และการสั่ง print บนกระดาษ A4 โดยทั้งหมดนี้สามารถทำออกมาได้เป็นอย่างดี โดยยังไม่ทิ้งในเรื่องของความสวยงาม การออกแบบ และ design
ความเนียบในการทำงาน การ develop และการออกแบบ ก็สามารถเห็นได้ชัดโดยไม่ต้องมานั่งสังเกต :-)
เมื่อประมาณเดือนที่แล้วหลังจากที่ได้เข้าไปรับ brief งานมาจากทาง จุฬาลงกรณ์มหาวิทยาลัย ก็ได้รู้จักกับเว็บไซต์นี้ เว็บไซต์ออย่างเป็นทางการ เว็บไซต์ของมหาวิทยาลัย Oxford (www.ox.ac.uk) ซึ่งเป็นมหาวิทยาลัยที่มีชื่อเสียงมากแห่งหนึ่งในโลก และเผอิญว่าเว็บไซต์ของ Oxford นี้ใช้พื้นฐานของความเรียบง่ายในการใช้งาน (แต่ไม่เรียบง่ายในการ develop) การเน้นที่ user แต่สำคัญแต่ก็ไม่ได้ทอดทิ้งความสวยงามใดๆ เลยเห็นว่า เว็บนี้เหมาะที่จะเป็นเว็บที่จะมา review กัน
ตัวเว็บไซต์นั้นใช้ความเรียบง่ายแต่สวยงาม สะอาดตา มาเป็น key หลักในการออกแบบ โดยนำมาซึ่งความง่ายในการค้นหาและอ่านข้อมูลต่างๆที่มีอยู่ในเว็บไซต์ จากหน้าแรก เว็บไซต์นี้ได้ใช้สีน้ำเงินเข้มเป็นสีพื้นในการออกแบบ ซึ่งสีน้ำเงินนั้นช่วยให้ดูมีความน่าเชื่อถือ มั่นคง และการทำเว็บไซต์ที่มีตัว content หรือตัวอักษรสีขาวบนพื้นสีน้ำเงินนั้น ทำให้เว็บไซต์ดูดี ทันสมัย และโดดเด่นมาก
เริ่มจากด้านบนซ้ายของเว็บไซต์ มี Logo ของ Oxford ตั้งเด่นอยู่ ทำให้ user นั้นสามารถรู้ได้ชัดเจนทันทีว่า ขณะนี้ได้เข้ามาอยู่ในเว็บไซต์ของ University of Oxford แล้ว และเนื่องจาก logo มีสีเดียว ดังนั้นจึงได้ทำตัว logo อยู่ใน gif format
ถัดมาเป็น link ต่างๆ และ Search box ที่โดดเด่น สามารถให้ user ค้นหาข้อมูลที่เขาต้องการได้อย่างรวดเร็ว นอกจากนี้ยังมี Quick Links ที่ user สามารถเลือกเข้าชมหน้าต่างๆในเว็บได้ โดยไม่ต้องเสียเวลาผ่านหน้าหลักจากเมนูหลักทางด้านล่าง สังเกตได้ว่า เว็บไซต์นี้เป็นเว็บที่เน้นเรื่องการใช้งานของ user เป็นที่สุด ตั้งแต่การใช้รูปภาพที่น้อย และใช้ตัวอักษรมากกว่า เพื่อเน้นการ load เร็ว การมี search box และ quick links ช่วยอำนวยความสะดวกรวดเร็วในการเข้าถึงข้อมูล ซึ่งทั้งหมดนี้เป็นความน่าชื่นชมในการจัดทำเว็บไซต์ของ Oxford
ถัดมาเป็น main area สำหรับ promote ข่าวต่างๆ และรูปภาพที่เป็น key visual โดยทั้งหมดนี้ไม่มี flash เข้ามาใช้งานเลย แต่กลับเป็นแค่ javascript ที่นำมาใช้ประโยชน์ได้อย่างน่าสนใจ ตั้งแต่ animation และ technique ต่างๆ ซึ่งนั่นหมายถึงเมนูหลักทางด้านล่าง และรูปภาพหลักที่จะได้กล่าวถึงต่อไป
ดูเผินๆ ก็เหมือนว่า javascript ที่มาใช้ตรงนี้นั้นก็แค่ช่วยเมนูหลักทางด้านล่างในการเปลี่ยนรูปหลังจากกดเลือกแล้วเท่านั้น แต่จริงแล้ว มีจุดที่น่าสนใจมากอยู่จุดหนึ่งที่ javascript ได้มีการนำมาใช้เพื่อประโยชน์ในการ support user นั่นคือความสามารถในการ Mask รูป เพื่อ support จอขนาด 800x600 และ 1024x768 ได้อย่างลงตัวในเว็บเดียวกัน
ลองดูรูปแรก (รูป default) รูปอาคารที่มีต้นไม้อยู่ทางด้านขวามือ หากขยายหน้าจอให้กว้างเกินกว่า 1024 (ถ้าจอคุณกว้างได้มากกว่านั้น) จะพบว่า รูปจะสุดอยู่แค่นั้น ไม่ได้ขยายไปไหน นั่นคือรูป default นั้นมีความกว้างอยู่ที่การ support จอขนาด 1024pixels นั่นเอง แต่หากเราลองย่อขนาดจอให้เล็กลง จะพบว่ารูปต้นไม้บางส่วนหายไป ถูกตัดไป จนกระทั่งสุดอยู่ที่จอขนาดประมาณ 800x600
ขยายเกิน 1024
ขนาด 800x600
บางคนอาจจะคิดว่านี่เป็นเรื่องธรรมดาที่ไม่น่าตื่นเต้นอะไรนัก แต่จากที่ได้สังเกตมา ผมเองยังไม่เคยเห็นเว็บไซต์ใด (โดยเฉพาะเว็บในไทย) นำเทคนิคนี้มาใช้ประโยชน์ได้อย่างดีขนาดนี้
ก่อนหน้านี้เคยเห็นเว็บที่พยายาม support จอ 800 และจอ 1024 ในเว็บเดียวกันนั่นคือเว็บไซต์ของ UBS (www.ubs.com) ซึ่งหากใช้จอ 800 หรือ 1024 เว็บของ ubs นี้ก็จะสามารถให้ user ได้เห็นภาพและ layout ที่เหมือนกันได้ทั้งคู่ แต่ต่างตรงที่ว่า เว็บไซต์ของ ubs นั้นจะต้องทำการ refresh เมื่อมีการปรับหน้าจอ ซึ่งตัวเว็บจะทำการ detect ว่าเราใช้ windows ที่ size ไหน แล้วก็เลือกหน้าที่ออกแบบมาสำหรับ size นั้นให้ ซึ่งผลเสียคือความช้าในการเรียก load อีกครั้ง (อย่างไรก็ตาม ใครจะมานั่งเปลี่ยน size window กันบ่อยๆล่ะ)
กลับมาต่อที่ Oxford เมนูนั้นใช้ Style Sheet มาช่วยทำ hi-light menu ทำให้ประหยัดการใช้รูปไปได้ค่อนข้างมาก และก็ไม่ได้ทำให้เว็บดูไม่สวยแต่อย่างใด
ด้านล่างมองเผินๆ เหมือนเป็น sitemap ซึ่งแสดงหน้าทั้งหมดที่มีอยู่ในเว็บไซต์ ถามว่าดูน่าเกลียดไหม โดยส่วนตัวกลับคิดว่าเราต้องดูที่จุดประสงค์ของคนที่เข้ามาในเว็บไซต์ เมื่อ user ที่เข้ามารู้อยู่แล้วว่าตัวเองเข้ามาเพื่อค้นหาข้อมูล การที่เรามีข้อมูลให้เค้าได้อย่างรวดเร็ว และเข้าถึงง่าย นั่นน่าจะบรรลุจุดประสงค์ของ user และจุดประสงค์ของเราคือการนำเสนอข้อมูล ซึ่งในกรณีนี้ รูปภาพที่สวยงาม animation นั้นเป็นแค่ส่วนประกอบ
ด้านใน การ design นั้นได้มีการปรับให้พื้นสีน้ำเงินมีเฉพาะด้านบน ในส่วนของ content นั้นเป็นพื้นสีขาว ทั้งนี้เพื่อความสบายตาของ user ในการอ่านข้อมูล อย่างไรก็ตาม ในเชิงของการพัฒนา develop ยังคงใช้ text based และ javascript เป็นหลัก ซึ่งจะเห็นได้จาก sub menu ทางด้านบน ส่วนความสามารถในการ support จอ 800 นั้นยังคงมีอยู่ ซึ่งก็ยังดูได้จากรูปที่มีอยู่ในเว็บด้านในนั้น สามารถยืดจะหดได้โดยใช้ feature mask
อีกหนึ่ง feature ที่คาดว่าน่าจะได้เห็นจากเว็บนี้ แล้วก็ได้เห็นจริงๆนั่นคือความสามารถในการ print ให้ได้พอดีกระดาษ A4 โดยปกติแล้ว หากเราทำเว็บแล้วไม่ได้ support การ print ให้พอดีกระดาษ A4 นั้น ก็จะทำให้เว็บที่ print ออกมาจะกว้างเกินกระดาษ ซึ่งวิธีแก้ก็ต้องไปแก้ที่ user โดยการปรับให้ print เป็นแนวนอน ซึ่งวิธีนี้นั้นดุไม่ pro เอาซะเลย
วิธีที่เว็บ Oxford นี้ใช้นั่นคือการคัดเอาเฉพาะส่วนที่เป็น content หรือเนื้อหาสำหรับเว็บนี้เท่านั้นมาใช้ในการพิมพ์ ลอง test ดูได้จากการกด print preview จะเห็นว่า ได้มีการกำหนดเฉพาะส่วนของ content ให้แสดงบนกระดาษ A4 นอกจากจะคัดเฉพาะ content แล้ว ความกว้างของเนื้อหาก็ยังไม่กว้างเกินกระดาษ A4 ด้วย ดังนั้น เมื่อ user print เว็บนี้ไป ก็จะได้แต่เนื้อหา (ไม่มีพวก banner หรือเมนู) และได้ขนาดที่พอดี ไม่ต้องมาปรับกระดาษให้เป็นแนวนอน ซึ่งถือว่าเป็นการ support user ได้อย่างละเอียดลึก อย่างไรก็ตามในบางหน้าของเว็บ Oxford ยังมีหลุดๆบ้าง คือพอสั่ง print แล้วมีตัวอักษรบางกลุ่มไม่อยู่ใน column หรือหลุดเรื่องขนาดและรูปแบบของ font
หน้า Research ก่อนพิมพ์
หน้า Print Preview
** การทำ print version แบบนี้นั้นทาง rgb72 ก็เคยทำแล้วกับงานเมื่อสองปีที่แล้วคืองาน INGFunds (www.ingfunds.co.th) ซึ่งเหมือนเป็นการปิดทองหลังพระลูกค้าเองก็แทบจะไม่รู้ว่าสิ่งที่เราทำนี้เป็น extra ส่วนตัวคนที่เข้ามาเล่นแล้ว print นั้นก็ไม่รู้หรอกว่า การ print แล้วได้พอดีนั้นเป็นการใช้เทคนิคพิเศษ **
ทั้งหมดที่ได้ review ไปนั้น เป็นการ review จุดเด่น จุดที่ทำให้เว็บ Oxford นั้นแตกต่าง กล่าวคือ เว็บไซต์ของ Oxford นั้น สามารถนำเสนอเว็บไซต์เพื่อ support User ไม่ว่าจะเป็นเรื่องของ ข้อมูล รูปภาพ ความรวดเร็วในการ load ความสามารถในการ support จอสองขนาด และการสั่ง print บนกระดาษ A4 โดยทั้งหมดนี้สามารถทำออกมาได้เป็นอย่างดี โดยยังไม่ทิ้งในเรื่องของความสวยงาม การออกแบบ และ design
ความเนียบในการทำงาน การ develop และการออกแบบ ก็สามารถเห็นได้ชัดโดยไม่ต้องมานั่งสังเกต :-)
วันอังคารที่ ๑๒ สิงหาคม พ.ศ. ๒๕๕๑
ewit meeting & Design+Culture
เมื่อศุกร์ที่ผ่านมา ศุกร์ที่มีพิธีเปิดโอลิมปิกนั่นแหละ ผมมีนัดสังสรรค์กับเพื่อนๆสมัยทำงานอยู่ ewit เมื่อ 7-8 ปีที่แล้ว โดยมีผู้ร่วมวงมากมายดังนี้ (ชื่อ / ที่ทำงานปัจจุบัน) พี่เอก / ewit, พี่วิชญ์, เหน่ง / Ogilvy, นัท / be our friend, ชล / Ogilvy, พี่โอ๋ / redlab, รัช / ACE, Guess / Ogilvy, แว่น / ewit, โจ้ / รอยเตอร์
เรื่องราวที่คุยกันในช่วงแรกก็มีแต่เรื่องเผากัน เม้ากันถึงเรื่องในอดีต เรื่องเก่า สมัยยังทำงานด้วยกันอยู่ ซึ่งมีแต่ความสนุกสนาน บ้าบอ และหาไม่ค่อยจะได้ในสมัยนี้ แต่ว่าเรื่องราวที่ได้มาคุยกันในตอนท้ายนี่สิ ไม่รู้ว่าคุยกันยังงัย คุยไปคุยมามาจบกันที่เรื่องของ design ในประเทศไทย
เรื่องมันเริ่มอยู่ที่ว่า พี่โอ๋ ถามผมถึงเรื่องของการไป pitch งานว่ามีปัญหาอะไรมั้ย ยากมั้ย ผมก็ตอบว่าไม่่ค่อยจะมีปัญหานะ ของผมเน้นไปในทาง design ส่วนพี่โอ๋บอกว่า จริงๆถ้าเราเน้นเรื่อง function ทำให้เว็บเราสามารถเก็บข้อมูลลูกค้าได้มากๆ และสามารถนำข้อมูลเหล่านั้นมาวิเคราะห์และตอบโจทย์ทางการตลาดได้ นั่นน่าจะเป็นวิธีที่ทำให้งานมันขายได้ง่ายขึ้น และลูกค้าเป็นภาพที่ัชัดและง่ายกว่าการขาย design อย่างเดียว
พี่วิชญ์เข้ามาพูดเปิดประเด็นต่อว่า ถ้าคิดจะ design ในเมืองไทยน่ะ ยาก เมืองไทยน่ะขาย design ลำบาก เมื่อมาลงรายละเอียดจริงๆในตัวเนื้องานจะเห็นว่า design น่ะ แทบจะไม่ได้ราคาอะไรเลย
ไอ้นัทเห็นด้วย
แต่ผมเห็นด้วยไม่ 100% เลยคุยต่อว่า จริงๆแล้วงานที่ rgb72 ทำ จะเป็นเว็บที่เน้น design และแสดงให้เห็นถึงภาพลักษณ์ของบริษัท องค์กร หรือ product นั้นๆ ดังนั้นจริงๆแล้วทุกวันนี้เราก็ขาย design อยู่ ส่วนตัว programming นั้นเราก็เอาไว้ support เฉยๆ บริษัทที่เห็นค่าของการออกแบบนั้นมักจะเป็นบริษัทที่ต้องการเน้นการสร้างภาพลักษณ์์องค์กร บริษัทสมัยใหม่ ดังนั้นนี่คือ target ลูกค้าส่วนใหญ่ของ rgb72
อย่างไรก็ตาม ไม่ใช่ว่าเราจะไม่เจอปัญหา ปัญหาที่เจอบ่อยๆ และน่าเบื่อก็คือ การที่เราได้ทำการออกแบบไปแล้ว ได้รับการ approve จากทีมงานในฝั่งของลูกค้าแล้ว (ซึ่งมีจำนวน 5-10คน) แต่เมื่อลูกค้าเอางานไปให้นายใหญ่ดู นายใหญ่ไม่ OK ซะงั้น แล้วก็กลายเป็นว่า ทุกอย่างที่ได้คุยกันมา ปรับกันมาตลอด 2 อาทิตย์ต้องเริ่มใหม่หมดตั้งแต่ศูนย์ ซึ่งจริงๆแล้ว ถ้านายใหญ่มีอำนาจมากขนาดเสียงทั้งหมดที่เคย vote กันมาว่าดีแล้ว ถูก reject ได้นั้น นายใหญ่เองก็น่าจะมาร่วมประชุมซะตั้งแต่ทีแรก (แล้วเราก็เริ่มยกตัวอย่างลูกค้าใหญ่ๆ หลายรายที่เพิ่งจะประสบมาไม
"ลูกค้าพวกนั้นกูก็เคยเจอ" พี่วิชญ์บอก (และไอ้นัทก็ด้วย)
บริษัทหลายที่ที่เราเห็นใหญ่ๆ แต่จริงๆแล้วก็ทำงานกันแบบนี้ พี่วิชญ์พูดว่า "สุดท้ายแล้วมันก็เป็นเรื่องของ connection"
Connection ความสัมพันธ์และความเชื่อถือนั่นแหละที่เป็น bottom line ไม่ใช่ design หลายงานที่ลูกค้า "เชื่อ" ในตัวเรา เพียงแค่เราไป present งานก็สามารถขายได้อย่างรวดเร็ว แต่ในทางตรงกันข้าม ถ้าลูกค้าไม่เชื่อในตัวเรา งาน design ที่ว่าดีนักหนา ถูกหลัก usability มากมายก็ยากที่จะผ่าน
อย่างงานหนึ่งที่ทางผมเพิ่งจะเจอมา เจ้านายใหญ่เชื่อในฝีมือของชาวต่างชาติมากกว่า ดังนั้นไม่ว่าเราจะพูดอะไรไป ก็ยากที่จะเข้าหู (ทั้งๆที่ผมเองเคยทำงาน freelance ให้กับต่างประเทศ โดยงานที่ได้รับมานั้นก็คืองานเว็บของบริษัทใหญ่ในประเทศไทยนั่นเอง เพียงแต่ว่าบริษัไทยบริษัทนี้ไม่รู้ว่างานที่เค้าส่งออกให้ต่างประเทศนั้น แท้จริงคนที่ทำงานทั้งหมด นั่งอยู่ในห้องที่อยู่ไกลไม่เกิน 5กม.)
เลยทำให้กลับมาคิดต่อว่า หรือการที่ทีมงานเข้าไป present งานให้นายใหญ่นั้น ไม่เป็นที่น่าเชื่อถือพอ เรียกง่ายๆว่า นายใหญ่ไม่เชื่อมั่นในทีมงานของตัวเอง คิดไปถึง project หนึ่งที่ลูกทีมของบริษัทลูกค้าเองเข้าไป present เท่าไร่ก็ไม่ผ่าน กลับมามีแก้มากมาย แต่พอเราเข้าไปในฐานะ designer ไปอธิบายให้เค้าฟัง เค้าก็เชื่อและให้ผ่านง่ายดายซะอย่างนั้น
หรือสรุปแล้ว design ไม่ใช่เรื่องจำเป็นสำหรับเมืองไทย และยังเป็นสิ่งที่ขายไม่ได้ แต่ว่า connection ต่างหาก ที่ใช่
ผมเองก็ยังสรุปอะไรมากไม่ได้ แต่เห็นว่าเรื่องที่คุยกันนี้น่าสนุกดี น่าเอามาแชร์ให้หลายๆคนได้คิดดู
แล้วไม่รู้ว่าคุยกันยังงัยต่อ แต่เราก็ได้พูดถึงว่า ช่วงนี้เราได้อ่านหนังสืออยู่เล่มหนึ่ง ดีมาก ชื่อ Design + Culture โดยคุณประชา สุวีรานนท์ ซึ่งได้เจองานของพี่วิชญ์อยู่ในนั้นด้วย
พี่วิชญ์ พี่เอก ไอ้นัท ไอ้เหน่ง รู้จักคุณประชากันหมด แล้วก็เคยได้อ่านหนังสือเล่านี้กันแล้ว
เลยแวะเอามาบอกเป็นของแถมว่า Design + Culture เป็นหนังสือที่น่าอ่านมากๆ รวบรวมเรื่องราวของการออกแบบ แนวคิด และเบื้องหลังต่างๆที่น่าสนใจ โดยคนที่ใครก็บอกว่าเค้าเป็นคนที่สุดยอด ขนาดพี่เอกยังบอกว่า
"คนอะไรก็ไม่รู้ เก่งชะมัด"
เรื่องราวที่คุยกันในช่วงแรกก็มีแต่เรื่องเผากัน เม้ากันถึงเรื่องในอดีต เรื่องเก่า สมัยยังทำงานด้วยกันอยู่ ซึ่งมีแต่ความสนุกสนาน บ้าบอ และหาไม่ค่อยจะได้ในสมัยนี้ แต่ว่าเรื่องราวที่ได้มาคุยกันในตอนท้ายนี่สิ ไม่รู้ว่าคุยกันยังงัย คุยไปคุยมามาจบกันที่เรื่องของ design ในประเทศไทย
เรื่องมันเริ่มอยู่ที่ว่า พี่โอ๋ ถามผมถึงเรื่องของการไป pitch งานว่ามีปัญหาอะไรมั้ย ยากมั้ย ผมก็ตอบว่าไม่่ค่อยจะมีปัญหานะ ของผมเน้นไปในทาง design ส่วนพี่โอ๋บอกว่า จริงๆถ้าเราเน้นเรื่อง function ทำให้เว็บเราสามารถเก็บข้อมูลลูกค้าได้มากๆ และสามารถนำข้อมูลเหล่านั้นมาวิเคราะห์และตอบโจทย์ทางการตลาดได้ นั่นน่าจะเป็นวิธีที่ทำให้งานมันขายได้ง่ายขึ้น และลูกค้าเป็นภาพที่ัชัดและง่ายกว่าการขาย design อย่างเดียว
พี่วิชญ์เข้ามาพูดเปิดประเด็นต่อว่า ถ้าคิดจะ design ในเมืองไทยน่ะ ยาก เมืองไทยน่ะขาย design ลำบาก เมื่อมาลงรายละเอียดจริงๆในตัวเนื้องานจะเห็นว่า design น่ะ แทบจะไม่ได้ราคาอะไรเลย
ไอ้นัทเห็นด้วย
แต่ผมเห็นด้วยไม่ 100% เลยคุยต่อว่า จริงๆแล้วงานที่ rgb72 ทำ จะเป็นเว็บที่เน้น design และแสดงให้เห็นถึงภาพลักษณ์ของบริษัท องค์กร หรือ product นั้นๆ ดังนั้นจริงๆแล้วทุกวันนี้เราก็ขาย design อยู่ ส่วนตัว programming นั้นเราก็เอาไว้ support เฉยๆ บริษัทที่เห็นค่าของการออกแบบนั้นมักจะเป็นบริษัทที่ต้องการเน้นการสร้างภาพลักษณ์์องค์กร บริษัทสมัยใหม่ ดังนั้นนี่คือ target ลูกค้าส่วนใหญ่ของ rgb72
อย่างไรก็ตาม ไม่ใช่ว่าเราจะไม่เจอปัญหา ปัญหาที่เจอบ่อยๆ และน่าเบื่อก็คือ การที่เราได้ทำการออกแบบไปแล้ว ได้รับการ approve จากทีมงานในฝั่งของลูกค้าแล้ว (ซึ่งมีจำนวน 5-10คน) แต่เมื่อลูกค้าเอางานไปให้นายใหญ่ดู นายใหญ่ไม่ OK ซะงั้น แล้วก็กลายเป็นว่า ทุกอย่างที่ได้คุยกันมา ปรับกันมาตลอด 2 อาทิตย์ต้องเริ่มใหม่หมดตั้งแต่ศูนย์ ซึ่งจริงๆแล้ว ถ้านายใหญ่มีอำนาจมากขนาดเสียงทั้งหมดที่เคย vote กันมาว่าดีแล้ว ถูก reject ได้นั้น นายใหญ่เองก็น่าจะมาร่วมประชุมซะตั้งแต่ทีแรก (แล้วเราก็เริ่มยกตัวอย่างลูกค้าใหญ่ๆ หลายรายที่เพิ่งจะประสบมาไม
"ลูกค้าพวกนั้นกูก็เคยเจอ" พี่วิชญ์บอก (และไอ้นัทก็ด้วย)
บริษัทหลายที่ที่เราเห็นใหญ่ๆ แต่จริงๆแล้วก็ทำงานกันแบบนี้ พี่วิชญ์พูดว่า "สุดท้ายแล้วมันก็เป็นเรื่องของ connection"
Connection ความสัมพันธ์และความเชื่อถือนั่นแหละที่เป็น bottom line ไม่ใช่ design หลายงานที่ลูกค้า "เชื่อ" ในตัวเรา เพียงแค่เราไป present งานก็สามารถขายได้อย่างรวดเร็ว แต่ในทางตรงกันข้าม ถ้าลูกค้าไม่เชื่อในตัวเรา งาน design ที่ว่าดีนักหนา ถูกหลัก usability มากมายก็ยากที่จะผ่าน
อย่างงานหนึ่งที่ทางผมเพิ่งจะเจอมา เจ้านายใหญ่เชื่อในฝีมือของชาวต่างชาติมากกว่า ดังนั้นไม่ว่าเราจะพูดอะไรไป ก็ยากที่จะเข้าหู (ทั้งๆที่ผมเองเคยทำงาน freelance ให้กับต่างประเทศ โดยงานที่ได้รับมานั้นก็คืองานเว็บของบริษัทใหญ่ในประเทศไทยนั่นเอง เพียงแต่ว่าบริษัไทยบริษัทนี้ไม่รู้ว่างานที่เค้าส่งออกให้ต่างประเทศนั้น แท้จริงคนที่ทำงานทั้งหมด นั่งอยู่ในห้องที่อยู่ไกลไม่เกิน 5กม.)
เลยทำให้กลับมาคิดต่อว่า หรือการที่ทีมงานเข้าไป present งานให้นายใหญ่นั้น ไม่เป็นที่น่าเชื่อถือพอ เรียกง่ายๆว่า นายใหญ่ไม่เชื่อมั่นในทีมงานของตัวเอง คิดไปถึง project หนึ่งที่ลูกทีมของบริษัทลูกค้าเองเข้าไป present เท่าไร่ก็ไม่ผ่าน กลับมามีแก้มากมาย แต่พอเราเข้าไปในฐานะ designer ไปอธิบายให้เค้าฟัง เค้าก็เชื่อและให้ผ่านง่ายดายซะอย่างนั้น
หรือสรุปแล้ว design ไม่ใช่เรื่องจำเป็นสำหรับเมืองไทย และยังเป็นสิ่งที่ขายไม่ได้ แต่ว่า connection ต่างหาก ที่ใช่
ผมเองก็ยังสรุปอะไรมากไม่ได้ แต่เห็นว่าเรื่องที่คุยกันนี้น่าสนุกดี น่าเอามาแชร์ให้หลายๆคนได้คิดดู
แล้วไม่รู้ว่าคุยกันยังงัยต่อ แต่เราก็ได้พูดถึงว่า ช่วงนี้เราได้อ่านหนังสืออยู่เล่มหนึ่ง ดีมาก ชื่อ Design + Culture โดยคุณประชา สุวีรานนท์ ซึ่งได้เจองานของพี่วิชญ์อยู่ในนั้นด้วย
พี่วิชญ์ พี่เอก ไอ้นัท ไอ้เหน่ง รู้จักคุณประชากันหมด แล้วก็เคยได้อ่านหนังสือเล่านี้กันแล้ว
เลยแวะเอามาบอกเป็นของแถมว่า Design + Culture เป็นหนังสือที่น่าอ่านมากๆ รวบรวมเรื่องราวของการออกแบบ แนวคิด และเบื้องหลังต่างๆที่น่าสนใจ โดยคนที่ใครก็บอกว่าเค้าเป็นคนที่สุดยอด ขนาดพี่เอกยังบอกว่า
"คนอะไรก็ไม่รู้ เก่งชะมัด"
สมัครสมาชิก:
บทความ (Atom)
บทความ
