Responsive Web Design กับความเป็นไปได้ในวงการออกแบบเว็บไทย

ตรวจทาน: จ๋า

สำหรับคนที่ยังไม่รู้จัก Responsive Web Design อธิบายง่ายๆ คือการออกแบบเว็บไซต์ให้รองรับขนาดหน้าจอสำหรับอุปกรณ์ทุกชนิด ตั้งแต่ คอมพิวเตอร์ที่มีขนาดจอหลากหลาย ไปจนถึง Tablet ซึ่งมีมาตรฐานของขนาดหน้าจอที่แตกต่างกัน และโทรศัพท์มือถือ Smart Phone ต่างๆ

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

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

แต่ในปัจจุบัน ทั้งมือถือ และ Tablet ต่างก็มีหน้าจอที่หลากหลายขนาด ดังนั้น วิธีแก้ที่กำลังเป็นที่นิยมในต่างประเทศคือ การทำ Responsive Web Design

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

ดังตัวอย่างด้านล่างจะเห็นว่า เว็บไซต์ที่ทำสำเร็จมาแล้ว จะสามารถรองรับขนาดหน้าจอได้ทุกอุปกรณ์จริงๆ

Simon Collison (http://colly.com)

Andersson-Wise Architects (http://www.anderssonwise.com)

Food Sense (http://foodsense.is)

อย่างไรก็ตาม แม้ว่าต่างประเทศจะเริ่มตื่นตัวมากๆ กับ Responsive Web Design มาตั้งแต่ประมาณกลางปี(2011)ที่ผ่านมาแล้ว แต่สำหรับเมืองไทยล่ะ? จะมีใครทำไหม? แล้วลูกค้าจะต้องการไหม?

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

อย่างไรก็ตาม การออกแบบเว็บไซต์เพื่อรองรับการทำ Responsive Web Design นั้นค่อนข้างมีข้อจำกัด
อยู่ไม่น้อย

1. เว็บไซต์จะต้องไม่เป็น Flash
แน่นอน เมื่อเป็น flash แล้ว การออกแบบก็จะยืดหยุ่นมากไม่ได้ ที่สำคัญ Tablet และ มือถือ ที่ได้รับความนิยมอย่าง iPhone และ iPad นั้น ไม่รองรับการใช้งาน Flash อีกด้วย

2. การออกแบบเว็บไซต์จะต้องถูกวางเป็น Block เป็นกล่อง แต่หากใครจะออกแบบให้แปลกแหวกแนวออกไป ก็ไม่ได้หมายความว่าจะทำ Responsive ไม่ได้ แค่จะยากและยุ่งหน่อยเท่านั้น
ดังนั้น

3. ต้องมีการวางแผนการออกแบบให้ดี เพราะหากต้องมาปรับเปลี่ยนแก้ไขกันทีหลัง จะยุ่งมิใช่น้อย

4. ต้องเขียนโปรแกรมมิ่งใหม่ด้วย HTML 5

5. ต้องทดสอบให้ใช้งานได้ในอุปกรณ์ทุกประเภท

ทั้งหมดนี้คือเรื่องที่ทีมออกแบบเว็บต้องใส่ใจในรายละเอียดให้มากขึ้น

ซึ่งนั่นหมายถึงเวลาที่ใช้มากขึ้น

และค่าใช้จ่ายที่มากขึ้นด้วย

จากมุมมองของคนทำงานออกแบบเวบไซต์ ต้องยอมรับว่า การแบน flash ของ Apple มีผลกระทบอย่างแรงถึง Adobe แล้ว จริงๆ ลูกค้าเริ่มรับได้ และไม่ต้องการ flash แล้ว

แต่การออกแบบที่เป็น Block หรือความยุ่งยากที่เพิ่มขึ้นในการการทดสอบ หรือการวางแผนให้ดี 100% ก่อนลงมือทำโดยไม่แก้ไขหน้างานมากๆ นั้นเป็นไปได้มั้ย?

ยิ่งคิดยิ่งรู้สึกถึงความหวังที่ริบหรี่…

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

เพราะการออกแบบที่ดี คือการออกแบบที่มีทั้งความสวยและการใช้งานที่เหมาะสม

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

บ้านต้นไม้.. สูง เสียว แต่ สวย

พักหลังๆนี่เริ่มสังเกตเห็นว่า เจ้าของธุรกิจโรงแรมเริ่มสรรหาสิ่งใหม่ๆให้กับลูกค้ามากกว่าเดิม

โรงแรมพร้อมสวนน้ำขนาดใหญ่, บ้านพักในฟาร์ม, โรงแรมในแพกลางน้ำ, โรงแรมในไร่องุ่น เป็นต้น

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

ในเมืองไทยเริ่มเห็นมีกันหลายที่แล้ว เช่น ในจังหวัดราชบุรี และ กาญจนบุรี

ในต่างประเทศก็เช่นกัน

บังเอิญว่าวันนี้ไปโหลด App แมกกาซีนของ BMW มาเล่มหนึ่ง (ฟรี) ชื่อ “BMW Magazine 1/2011 english” โดย BMW Group (http://itunes.apple.com/us/app/bmw-magazine-1-2011-english/id428238236?mt=8) เป็นหนึ่งใน App แมกกาซีนดีดี ที่มี interactive และการออกแบบเหมาะกับการอ่านบน iPad อย่างแท้จริง (หลังจากค้นพบว่า การอ่านแมกกาซีนที่นำเอา PDF มาใส่ใน iPad หรือหนังสือที่ไม่ได้ออกแบบมาสำหรับ iPad แล้วนั้น อ่านได้ไม่ถนัดจริงๆ) หนึ่งในเนื้อหาที่นอกจากเรื่องรถของ BMW แล้ว เค้ายังมีแนะนำให้ได้รู้จักกับ “บ้านต้นไม้” ที่ออกแบบมาได้สวยสะดุดตา

วันนี้จึงคิดว่าจะเอามาแชร์กัน

Final Wooden House

เริ่มจากหลังที่ชอบที่สุดก่อน “Final Wooden House” ตั้งอยู่ที่เมือง Kumamoto ประเทศญี่ปุ่น งานนี้ออกแบบโดย Sou Fujimoto Architects ไอเดียหลักคือการนำไม้ชิ้นใหญ่ๆมาวางซ้อนๆกัน ทำให้เกิดพื้นที่ในการใช้สอยได้ต่างๆนานา โดย ผู้อยู่อาศัยจะสามารถหาพื้นที่สำหรับการทำกิจกรรมต่างๆที่ตนต้องการได้อย่างอัตโนมัติ

The Bird’s Nest

ถัดมาคือบ้านต้นไม้อีกหลังหนึ่งมีชื่อว่า “The Bird’s Nest” ตั้งอยู่ในประเทศสวีเดน

เป็นบ้านที่ดูแล้วเหมาะกับการเป็นบ้านต้นไม้ที่สุด เพราะสามารถพรางตัวเองให้เข้ากับบรรยากาศได้ดีในขณะที่การออกแบบภายในยังคงให้ความรู้สึกเป็น modern น่าอยู่มากๆอีกด้วย

สำหรับราคาค่าที่พักนั้น จากการคำนวนดูคร่าวๆก็ประมาณคืนละ สองหมื่นกว่าบาทไทยเท่านั้นเอง -_-” ใครสนใจลองเข้าไปจองได้ที่ http://www.treehotel.se

Redwoods Treehouse

หลังต่อมาคือร้านอาหาร ตั้งอยู่ในโรงแรม “Redwoods Treehouse” ประเทศนิวซีแลนด์

เห็นหน้าตาแปลกๆแบบนี้ ร้านอาหารนี้สามารถบรรจุคนได้ถึง 50 คนเลยทีเดียว

Spherical Tree House

หยิบยกมาให้ดูอีกที่นั้นอยู่ในประเทศแคนนาดา บ้านต้นไม้รูปทรงกลมแตะตานี้มีชื่อว่า “Spherical Tree House”

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

สำหรับผู้ที่สนใจสามารถเข้าไปดูในเว็บไซต์ได้ที่ http://www.freespiritspheres.com (ซึ่งในฐานะของผู้ออกแบบเว็บคนหนึ่ง อยากแนะนำให้แกออกแบบเว็บใหม่ให้สวยเหมือนบ้านต้นไม้ที่แกทำจริงๆ) สำหรับราคาค่าที่พักนั้นไม่แพงเท่าหลังด้านบนเท่าไรนัก ราคาตกคืนละประมาณ 135-200 เหรียญสหรัฐ หรือเท่ากับ 4,500-6,000 บาทบ้านเรา

ดูงานออกแบบของเมืองนอกมากๆ ก็สนุกดีเหมือนกัน งานบ้านต้นไม้สวยๆยังมีอีกมาก เดี๋ยวนี้ข้อมูลก็หาได้ง่าย เพียงเข้าไป Search ใน Google แล้วพิมพ์คำว่า “Tree House” แค่นี้ เราก็จะได้เห็นงานดีดี ไอเดียมากมาย โดยไม่ต้องขยับลุกเดินไปไหนไกลให้เมื่อย

ไม่มีอะไรที่ ถูก ดี และ ง่าย ขนาดนี้อีกแล้ว

YouTube Redesign หน้าตาใหม่ของ YouTube ในรอบหลายปี

วันนี้หากใครได้เข้าไปในเว็บของ YouTube.com จะพบว่า หน้าตาที่เราคุ้นเคยมาหลายปี บัดนี้ได้เปลี่ยนไปเสียแล้ว

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

การออกแบบ

การออกแบบในเชิงของ Look & Feel นั้น เว็บในเครือของ Google ทั้งหมดจะถูกปูทางด้วย Google Plus ไม่ว่าจะเป็นเรื่องของปุ่ม พื้น background สีเทาอ่อนเหล่านี้เป็นต้น

icon ด้านบนในช่อง URL ที่ถูกปรับ

นอกจากนี้ตัวโลโก้ของ YouTube เองก็ถูกปรับให้มีสีที่เข้มและมืดขึ้น ตัวอักษรที่ถูกปรับ font ขนาด และ สี ให้ดูสวยขึ้น รวมไปถึง icon ด้านบนในช่อง URL ก็ถูกปรับด้วยเช่นกัน

หน้าที่การทำงาน

หากพูดในเชิงหน้าที่การใช้งานแล้ว YouTube ดีไซน์ใหม่ได้เน้นไปให้ความสำคัญกับ “Channel” มากขึ้น สิ่งที่เพิ่มขึ้นมาคือ

แถบสีเทาเข้มด้านซ้ายมือที่รวม list ของ Channel ต่างๆที่เราได้เป็นสมาชิก ให้เราสามารถกดเลือกเพื่อให้คลิปวิดีโอใหม่ๆ ถูกแสดงผลในพื้นที่ตรงกลางที่ YouTube เรียกว่า “Homepage Feed”

แน่นอนว่าเราสามารถเพิ่มรายชื่อ Channel เองได้ YouTube ได้จัดให้มีปุ่มสีน้ำเงินโดดเด่นทางด้านซ้ายบนเขียนว่า “Add Channels” โดยการ Add Channels นั้นสามารถเลือกเพิ่มได้ทีเดียวมากมายหนึ่งช่อง ตั้งแต่เครือข่ายดังๆ อย่าง MTV, Sony, Warners จนไปถึงกลุ่ม review สินค้าที่ทำกันง่ายๆ หรือคลิปวิดีโอ How-To

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

หลายคนที่เห็นอาจสงสัยว่า ทำไมถึงเอา Facebook เข้ามาอยู่ในตำแหน่งที่โดดเด่นขนาดนี้ ในขณะที่ Google เองก็มีตัว Google Plus ที่กำลังโปรโมทอยู่ แต่เนื่องจาก Facebook เองนั้นเป็นชุมชนขนาดใหญ่ YouTube เองก็ใหญ่ แต่ Google Plus เอง ยังไม่ใหญ่พอ และนี่คืออีกทางหนึ่งที่จะทำให้คนจาก Facebook สามารถรู้จักกับ Google Plus ได้

ด้านการตลาด

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

โดยทั้งนี้ทาง YouTube เองคาดหวังว่า การออกแบบใหม่นี้จะเพิ่มให้คน “ติด” YouTube มากขึ้น ทำให้คนหันมาใช้เวลาอยู่กับ YouTube นานขึ้น จากเดิมประมาณ 15 นาที ต่อวัน ต่อคน และด้วยเวลาที่ใช้มากขึ้น นั่นแปลว่า เม็ดเงินที่ได้จากการโฆษณาก็มากขึ้นเช่นกัน (ข้อมูลจาก The Wall Street Journal: YouTube Redesigns Around ‘Channels’ Strategy - http://blogs.wsj.com/digits/2011/12/01/youtube-redesigns-around-channels-strategy/?mod=google_news_blog)

สรุป

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

นอกจากนี้การเปลี่ยนดีไซน์ไม่ได้มีผลเฉพาะกับเว็บไซต์ปกติเท่านั้น แต่หากเข้า YouTube ด้วย iPhone ก็จะเห็นการเปลี่ยนแปลงเช่นกัน และการเปลี่ยนแปลงใหม่นี้ แหล่งข่าวอย่าง Mashable บอกว่าจะช่วยให้การเข้าถึงคลิปวิดีโอของ YouTube ผ่านทาง XBox ได้ดีขึ้นอีกด้วย!

ของแบบนี้ต้องลองเข้าไปเล่นเองถึงจะรู้ว่า เปลี่ยนแปลงแล้วดีขึ้นหรือแย่ลงอย่างไร

7 การออกแบบที่เปลี่ยนโลก โดย Steve Jobs

บทความนี้ถือเป็นหนึ่งในการไว้อาลัยให้กับบุคคลที่สำคัญมากที่สุดคนในของโลก บุคคลที่สร้างผลงานที่เปลี่ยนโลกในหลากหลายแขนง และแน่นอนเปลี่ยนแปลงโลกการออกแบบ วันนี้เรารู้ดีอยู่แล้วว่า iPhone, iPad, iPod และ iMac นั้นเปลี่ยนโลกมากขนาดไหน และในโลกของการออกแบบ 7 สิ่งที่ Steve Jobs ทำไว้เป็นแรงบันดาลใจให้เราโดยบางครั้ง “อาจไม่รู้ตัว”

1. หูฟังสีขาว

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

2. Apple Web Design

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

3. iPhone icon

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

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

4. Presentation

การนำเสนอ การ present เปิดตัวสินค้าของ Steve Jobs มีสไตล์ที่น่าตื่นเต้น สนุก และน่าติดตาม มากจนทำให้หลายคนอยากทำตาม ทำให้หลายคนเขียนหนังสือ HOW-TO นำเสนอให้ได้แบบนี้ แต่อีกสิ่งหนึ่งที่หลายคนแอบติดใจ นั่นคือภาพเคลื่อนไหวและสไลด์ต่างๆที่อยู่ด้านหลังเค้า จอใหญ่ขนาดมหึมาสร้างความหน้าตื่นเต้นได้มาก และเป็นเรื่องดีทีเดียวที่ Apple ได้เห็นข้อดีของจุดนี้ ทำโปรแกรม Keynote ให้เราได้สร้าง presentation ออกมาได้สวยพอๆกันกับที่เรา “เห็นจากในทีวี”

5. Slide to Unlock – Multi-touch

จะมีใครรู้ตัวมาก่อนรึเปล่าว่า นิ้วของเราสามารถเป็นปากกา Stylus ได้ การเปิดตัว iPhone ครั้งแรกด้วยการ Slide to Unlock ทำให้โลกตะลึง เมื่อ Steve บอกว่าเค้าไม่ใช่หรอกปากกา ทำไมเราต้องพกปากกาด้วย ในเมื่อเรามี “นิ้ว” ของเราอยู่ และนิ้วในการสัมผัสต่อยอดไปถึงการทำ Multi-touch เปลี่ยนรูปแบบการ “ย่อ-ขยาย” ภาพง่ายๆ ด้วยการใช้นิ้วเพียงสองนิ้ว

6. iTunes Cover Flow

รูปแบบการเลือกเพลงที่ไม่ใช่เป็นเพียงแค่ตัวอักษรอีกต่อไป แต่ใช้สิ่งที่คนไม่เคยคิดถึงมาก่อนเมื่อเปลี่ยนรูปแบบการฟังเพลงจากแผ่น CD มาเป็น mp3 นั่นคือ “ปกซีดี”

ปกซีดี นั้นเป็นศิลปะที่สวยงาม แต่คนจะทิ้งมันไปเพราะเมื่อเอาเพลงลงเครื่อง mp3 แล้ว ปกก็ไม่จำเป็นอีกต่อไป แต่ Apple iTunes สร้าง Cover Flow การเลือกฟังเพลงโดยเลือกจากปก ทำให้การใช้งานไม่เพียงแต่สนุกขึ้น แต่กลับสวยงามด้วย

7. การออกแบบให้ทุกอย่างอยู่ในหน้าเดียว

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

งานออกแบบที่เป็นแรงบันดาลใจจาก Apple และ Steve Jobs ยังมีอีกมากมาย แต่เท่าที่คิดได้ขณะที่โดดงานมาเขียนภายในหนึ่งชม.นี้ให้จบ คิดได้เร็วๆ 7 อย่าง

แม้จะบอกว่า Steve Jobs ไม่ใช่คนที่ออกแบบทั้งหมด ยังมีคนที่อยู่เบื้องหลังอยู่อีกมากมาย โดยเฉพาะ designer ระดับโลกอย่าง Jonathan Ive  แต่คงไม่เถียงว่า หากทุกอย่างไม่ได้เริ่มต้นจากผู้ชายคนนี้ ทุกอย่างคงไม่ได้ถูกสร้างสรรค์มาได้ดีขนาดนี้

บทความนี้ขอเขียนไว้เพื่อเป็นการไว้อาลัยให้กับการจากไปของบุคคลที่สร้างแรงบันดาลใจ แรงผลักดัน แรงกดดัน ให้กับ เรา และผู้คนทั่วโลก จบบทความนี้ผมขอนำคำพูดของ Steve Jobs มาเป็นคำส่งท้าย คำพูดที่ชอบมากถึงกับมีเขียนไว้ในเว็บของ rgb72.com เอง ที่หน้า The Works.. ประโยคสั้นมีใจความว่า..

“Design is not just what it looks like and feels like, design is how it works”

Rest in Peace, Steve Jobs

ทำไมปุ่ม Contact Us ต้องอยู่สุดท้าย?

เราคงออกแบบกันมาจนชิน ชินจนไม่รู้ว่า ทำไมเราถึงได้เอาปุ่ม Contact Us ไว้เป็นปุ่มสุดท้าย

เป็นเพราะมันไม่สำคัญหรอ? ใครว่า มันสำคัญมากเลยต่างหาก หรือเป็นเพราะความคุ้นเคยที่ว่า เว็บไหนๆที่เอาไว้สุดท้าย เราก็เลยเอาไว้บ้าง

แล้วมันถูกต้องมั้ยที่เอาไว้สุดท้าย หรือว่าเราควรจะเปลี่ยน? แน่ล่ะ มันถูกต้องแน่ๆ เพราะจนถึงวันนี้ใครๆก็เอาปุ่ม Contact Us ไว้สุดท้าย แต่วันนี้จะเอาเหตุผลในเชิงจิตวิทยามาให้ได้รู้กันว่า “ทำไมมันต้องอยู่สุดท้าย”

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

แต่มันจะไม่ติดใจผมเลยซักนิด หากผมไม่ได้เจอลูกค้ารายหนึ่งที่บอกผมว่า เค้าต้องการให้คนมาติดต่อเค้ามากๆ ช่วยเอา “Contact Us” ไปไว้เป็นปุ่มแรกเลยไม่ได้หรือ?

นั่นสิ? ไว้เป็นปุ่มแรกเลยไม่ได้หรือ? และหากไว้เป็นปุ่มแรก คนจะมาติดต่อเรามากขึ้นมั้ย??

เว็บไซต์ UXmovement ได้เขียนบทความที่มีชื่อว่า “Why the Contact Us Page Always Goes Last” (http://uxmovement.com/navigation/why-the-contact-us-page-always-goes-last/) ซึ่งได้อธิบายเหตุผลของการนำไอ้เจ้าปุ่ม Contact Us ไปไว้สุดท้ายในเชิงจิตวิทยาของมนุษย์ว่า

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

1. เมนูสำหรับการเรียนรู้ (Learning Links) คือเมนูที่จะพาเราไปยังหน้าที่ให้ข้อมูล ให้เรารู้จักเว็บไซต์ รู้ว่าเว็บนี้คืออะไร ทำหน้าที่อะไร

2. เมนูให้ลงมือทำ (Action Links) คือเมนูที่จะพาเราไปยังหน้าที่เราต้องตอบรับ หรือทำอะไรบางอย่างในหน้านั้นๆ

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

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

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

ทีนี้เราก็จะได้รู้กันเสียทีว่า ทำไมเราถึงต้องเอา Contact Us ไว้สุดท้าย