เมื่อประมาณเดือนที่แล้วหลังจากที่ได้เข้าไปรับ 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 และการออกแบบ ก็สามารถเห็นได้ชัดโดยไม่ต้องมานั่งสังเกต :-)
บทความ
ไม่มีความคิดเห็น:
แสดงความคิดเห็น