ในวงการคนทำเว็บเอง ก็จะคล้ายๆกับไอที ก็คือมีการแลกเปลี่ยนความคิดเห็นเดียวกับแนวโน้มการออกแบบเว็บ ตัวอย่างที่สามารถเห็นได้ชัดในช่วงปีที่แล้ว ก็น่าจะเป็นช่วงเวลาของ การวาง layout แบบ Grid, การออกแบบในรูปแบบเรียบง่าย หรือ Minimalist design กับ องค์ประกอบที่เหมือนกับการย้อนยุคกลับไปช่วงเวลา 70′s หรือการใช้โทนสีในแบบ Vintage

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

Responsive web design หรือการพัฒนาเว็บที่ layout เหมาะสมและสามารถเข้าถึงได้โดยอุปกรณ์ที่หลากหลาย อันเนื่องมากจากความนิยม และการเพิ่มขึ้นของจำนวนผู้ใช้อุปกรณ์ mobile โดยเฉพาะ smartphone และ tablets เรื่องของ Responsive web design นี้เป็นหัวข้อที่ถูกเห็นตรงกันมากที่สุด

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

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

Multi-Column Menus คือรูปแบบการแสดงเมนูแบบตาราง.. เมนูไม่จำเป็นต้องเป็นแนวตั้ง หรือ แนวนอนเท่านั้น (โดยมี sub-menu ซ่อนเอาไว้แสดงผล) อีกต่อไป อาจจะเป็นแนวโน้มที่สืบเนื่องเพื่อสนับสนุนการทำเว็บแบบ responsive และ one-page design

Custom Fonts / Web Fonts ข้อจำกัดทางด้าน font ในสมัยก่อนกำลังจะหมดไปครับ ในช่วงระหว่างปีนี้ บริการในส่วนของการ กำหนด font ที่ใช้แสดงผลบนเว็บผ่าน สคริป ต่างๆที่ให้บริการออนไลน์ กำลังจะถูกนำมาใช้กันครับ

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

อ้างอิง:

http://www.hongkiat.com/blog/web-design-trend-2012/

http://webdesignledger.com/tips/web-design-trends-in-2012

http://www.dzineblog360.com/2011/12/top-7-web-design-trends-in-2012/

http://webdesign.tutsplus.com/articles/industry-trends/the-state-of-web-design-trends-2012-annual-edition/

http://newevolutiondesigns.com/5-new-things-for-web-designers-of-2012

บอกแบบนี้อาจจะงงๆ กัน งั้นลองดูตัวอย่างกันก่อน

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

อย่างไรก็ตาม การออกแบบของ Responsive Web Design ก็มีข้อจำกัดอยู่บ้าง เช่น

1. เว็บไซต์จะต้องไม่เป็น Flash  อันที่จริงก็ไม่น่าจะมีปัญหาไหม เพราะสมัยนี้นิยมออกแบบเว็บไซต์แบบไม่ใช้  Flash เพราะนอกจากจะมีปัญหาเรื่องของการโหลดหน้าเว็บช้าแล้ว แล้วยังทำ SEO ยาก แถมปัจจุบันนี้อุปกรณ์ Tablet กับ Smart Phone ยอดนิยมอย่าง iPAD iPhone ก็ไม่รองรับการใช้งาน Flash

2. ข้อจำกัดของการออกแบี่ต้องวาง layout เป็นบล็อกๆ แต่ถ้าอยากทำให้เจ็งกว่านั้นก็คงต้องใช้พลังภายในของ web designer และ web programer มากหน่อย

3. โปรแกรมมิ่งก็ใช้ HTML5 / CSS3

4. ต้องมีการออกแบบที่ดีตั้งแต่แรก เพราะถ้าออกแบบผิดชีวิตก็พัง มันแก้ไขยุ่งยากมากกกก ดังนั้นจึงไม่เหมาะกับคนที่รับงานเว็บแล้วลูกค้ามีการแก้ไข layout บ่อยๆ

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

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

ตัวอย่างเว็บที่ออกแบบตาม Responsive Web Design (ลองย่อหน้าต่างเล่นๆ ดูนะคะ)

http://themes.70kilo.com/responser/

http://white-noise.progressionstudios.com/

พอดีจำได้ว่าเคยอ่านบทความเกี่ยวกับการออกแบบตามหลักของ web 2.0 เมื่อนานมาแล้ว

เป็นบทความที่พูดถึงการออกแบบในยุคใหม่ที่เรียกว่า web 2.0 วันนี้เลยไปหาบทความนั้นมาฝากกันค่ะ

ตอนนั้นยังเป็นเวอร์ชั่นภาษาอังกฤษอยู่เลยที่อ่าน แต่ตอนนี้มีคนเอามาแปลแล้ว ลองเข้าไปอ่านกันดูนะคะ

เวอร์ชั่นภาษาไทย : http://www.divland.com/blog/2007/11/13/web-2-design/

เวอร์ชั่นภาษาอังกฤษ : http://www.webdesignfromscratch.com/web-design/web-2.0-design-style-guide/

หลายคนคงเป็นอย่างนี้ใช่ไหมคะ แต่รู้ไหมคะ เจ้าพวกดอทๆ ทั้งหลายนี่ ไม่ว่าจะ .com  .net  .th .org มันมีความหมายที่บ่งบอกถึงองค์กรเรา  รวมทั้งบอกถึงลักษณะหรือประเภทของเว็บไซต์เราด้วยค่ะ.

.com

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

.net

แสดงถึงเว็บที่เกี่ยวกับระบบเครือข่าย/อินเตอร์เน็ต

.org

เป็นนามสกุลโดเมนที่เหมาะสำหรับองค์กรทุกประเภทที่ไม่มุ่งหวังผลกำไร เช่น หน่วยงานราชการ มูลนิธิ เป็นต้น

.biz

เป็นนามสกุลโดเมนที่จะมาแทนที่ .com เหมาะสำหรับองค์กรธุรกิจ หรือเว็บไซต์ทุกประเภท กำลังได้รับความนิยมมากในต่างประเทศ

.info

เป็นนามสกุลที่เหมาะสำหรับองค์กร หรือเว็บไซต์ที่ให้ข้อมูลประชาสัมพันธ์ ข่าวสาร ทุกประเภท

.th

ใน ส่วนของนามสกุล .th นี้ จะเป็นการบอกว่าเว็บไซต์ที่จดทะเบียนโดเมนภายใต้ .th นี้เป็นองค์กรที่อยู่ภายในประเทศไทย ซึ่งประกอบด้วยโดเมน

.in.th

เหมาะสำหรับเว็บไซต์ของบุคคลทั่วไป หรือหน่วยงานในประเทศไทย

.co.th

เหมาะสำหรับองค์กรธุรกิจที่ได้จดทะเบียนเป็นนิติบุคคลภายในประเทศไทย

.ac.th

เหมาะสำหรับเว็บไซต์ที่เป็นสถาบันการศึกษาของประเทศไทย

.go.th

เหมาะสำหรับองค์กร หรือหน่วยงานของรัฐบาลไทย

.or.th

นามสกุลนี้จะเหมือนกับ .org แต่ต่างกันตรงที่บอกว่าเป็นองค์กร หรือหน่วยงานที่ไม่หวังผลกำไรในประเทศไทย

.mi.th

เหมาะสำหรับหน่วยงานทหารในประเทศไทย

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

5. Interface หลายชั้น

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

Tweeties

‘Tweeties’ ใช้การแบ่ง layer ในการจัดการกับข้อมูล ทำให้ผู้ใช้สามารถดูข้อมูลทุกอย่างได้ภายในหน้าเดียว!

6. Icons For the List View

ในหน้าจอเล็กๆ ไอคอนช่วยเรื่อง usability ได้เป็นอย่างดี

IStudiez

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

Top Floor

‘Top Floor’ ใช้ไอคอนที่เรียบและจดจำง่าย ในการสื่อถึง category ต่างๆ

New York Times

Application ที่มีข้อมูลจำนวนมากอย่าง ‘New York Times’ ก็ยังเห็นความสำคัญของการใช้ไอคอนมาช่วยในการสื่อสารกับผู้ใช้

แน่นอนว่าผู้อ่านจะต้องมี category ที่ชอบเป็นพิเศษ และ ‘New York Time’ ก็เห็นความสำคัญในจุดนี้ และช่วยอำนวยความสะดวกให้กับผู้ใช้ โดยการให้พวกเค้าสามารถจัดการกับ navigation ได้เอง โดยการลากเพื่อเปลี่ยนตำแหน่งไอคอนได้ตามต้องการ

7. ออกแบบโดยเน้นใช้ภาพประกอบ

Application ที่เน้นกราฟฟิคจ๋าไม่ค่อยพบใน interface ทั่วๆไป แต่ก็มีแนวโน้มความนิยมเพ่ิมมากขึ้น  นักพัฒนาเองก็ต้องการให้ app ของพวกเค้าแตกต่างจาก app ทั่วๆไป ซึ่งบาง app ก็ดีแต่บาง app ก็ไม่ เพราะมักจะมีปัญหาเรื่อง usability ดังนั้นก่อนที่จะปล่อย app ออกมาใช้ อย่าลืมทำการทดสอบเรื่อง usability ก่อนนะคะ

SugarSync

Interface ของ app นี้ออกแบบมาโดยทำเป็นแบบ list-view แต่ว่านักออกแบบเล่นกับคอนเส็บ “connectivity” จึงออกแบบมาให้สื่อถึงจุดประสงค์ของ app ด้วย

8. Using Gestures

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

ABC Animals

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

1. ใช้หลักการทำงานของ iPhone (iPhone User Interface)

การที่ดึงเอาหลักการทำงานของ interface iPhone มาใช้ทำให้ผู้ใช้งาน App ไม่จำเป็นต้องเรียนรู้วิธีการใช้ใหม่ ทำให้ประหยัดเวลาและพลังงาน

ตัวอย่าง App ที่ออกแบบการใช้งานตามแบบ interface iPhone :

Facebook

ใน Facebook 3.0 คุณจะเห็นได้ว่า layout ถูกจัดไว้เป็นตาราง (grid) ซึ่งผู้ใช้สามารถเลื่อนซ้าย-ขวาเพื่อดู categories อ่ืนๆได้ การที่ Facebook App ใช้การเลื่อนหน้าซ้าย-ขวา ซึ่งเป็น UI (User Interface) ของ iPhone อยู่แล้วทำให้ผู้ใช้ไม่ต้องเรียนรู้วิธีการใช้ใหม่ มันก็เหมือนกับการออกแบบเว็บไซต์ที่ผู้ใช้เว็บไซต์มักจะคาดหวังว่าจะได้เห็นโลโก้อยู่ที่มุมซ้ายบน, และเมนูเว็บ (navigation) จะทอดยาวอยู่บ้านบน เป็นต้น

นอกจากนี้ Facebook ยังออกแบบให้ปุ่มมีขนาดใหญ่เพื่อให้เห็นรายละเอียดและสัมผัสได้ง่าย

2. ออกแบบให้เรียบง่ายมากย่ิงขึ้น

การออกแบบ interface ให้ใช้งานง่าย ส่ิงที่สำคัญที่สุดคืออะไร? คำตอบง่ายนิดเดียว นั่นก็คือ ผู้ใช้ หรือ user นั่นเอง และส่ิงที่เราต้องรู้ก็คือ ‘อะไรคือส่ิงที่ผู้ใช้ต้องการ’ และ ‘เราจะนำเสนอส่ิงที่พวกเค้าต้องการได้อย่างไร ในเมื่อพวกเค้าไม่ได้แจ้งเราให้ทราบล่วงหน้าว่าเค้ามักจะบริโภคข้อมูลอะไรจาก App ของเรา’

ตัวอย่างในกรณีของ Flickr (Flickr เป็นเว็บไซต์ social network ที่รวบรวมรูปภาพจากทั่วทุกมุมโลก www.flickr.com)

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

3. ดูดีแบบฮาร์ดแวร์

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

Little Snapper

‘Little Snapper’ ล้อเลียนการเลือกโหมดถ่ายรูปแบบกล้อง DSLR

4. list รายการแบบดูดีมีชาติตระกูล

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

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

Delivery Status Touch

การเลือกใช้สีที่ลงตัวบนปุ่มขนาดใหญ่ของ ‘Delivery Status’ เพื่อแสดงเอกลักษณ์ของแต่ละปุ่มอย่างชัดเจน แถมยังมีการจัด layout ของตัวหนังสืออย่างลงตัว เน้นในส่วนที่เป็นข้อความสำคัญๆ

ที่มา : thaifreelanceagency.com

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

ตัวอย่างดีไซน์เว็บไซต์แบบแสดงผลบนคอมพิวเตอร์ทั่วไป เปรียบเทียบกับการแสดงผลบน iPhone

———————————————-

ตัวอย่างลูกเล่นที่สามารถทำให้เบอร์โทรศัพท์สามารถกดโทรออกได้เลยจากหน้าเว็บไซต์

เว็บไซต์ที่เราพูดถึงก็คือ www.checkmycolours.com ซึ่งการใช้งานเว็บนี้ก็ไม่ยากเลยค่ะ เพียงแค่กรอกชื่อโดเมนเว็บไซต์ลงไป ระบบก็จะประมวลผลออกมาให้เลยว่า โค้ดตรงส่วนไหนบ้างที่ใช้ไม่เหมาะสม พร้อมบอกรหัสสี ของ foreground / background และตัวอย่าง เพื่อให้เรานึกภาพได้ง่ายขึ้น

นอกจากนี้เรายังสามารถลองเทสปรับสี foreground / background ได้เลยและดูว่าสีแบบไหนถึงจะเหมาะสม พร้อมบอกโค้ดสีให้เราสามารถเอาไปใช้ได้เลยอีกด้วย

ภายในเว็บไซต์จะแบ่งการประมวลผลออกเป็น 3 หมวดหลักๆ คือ

- Luminosity Contrast Ratio

- Brightness difference

- Color difference

ซึ่งถ้าหากต้องการทราบว่าแต่ละตัวคืออะไร ใช้อะไรเป็นเกณฑ์ในการวัด ในเว็บไซต์ checkmycolours เองก็มีเขียนไว้คร่าวๆ หรือว่าถ้าต้องการความรู้แบบเจาะลึกก็สามารถเข้าไปอ่านได้ที่เว็บไซต์ของ W3C (www.w3.org)

นับว่าเป็นเว็บที่เป็นประโยชน์มากๆ นักออกแบบเว็บไซต์ทุกท่านลองเอาไปใช้ดูนะคะ

การที่เราตัดข้อความที่ไม่จำเป็นออกไปจะส่งผลดีดังนี้ :

1. ลดปริมาณส่ิงก่อกวน (noise) ในหน้าเว็บ
2. ทำให้เนื้อหาที่จำเป็นเด่นสะดุดตามากขึ้น
3. ทำให้หน้าเว็บเพจสั้นขึ้น ทำให้ผู้ใช้เห็นได้ครบทั้งหน้าโดยไม่ต้องสกรอล (scroll)

Happy talk must die

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

ถ้าหากคุณไม่แน่ใจว่าตรงไหนคือ happy talk มันมีวิธีทดสอบวิธีนึงที่ได้ผลเป็นอย่างดีคือ ถ้าระหว่างที่คุณอ่านแล้วคุณได้ยินเสียงเล็กๆ อยู่ใกล้ๆด้านหลังหัวคุณ พูดว่า “บลา บลา บลา บลา บลา…”  ข้อความที่คุณกำลังอ่านนั่นแหละ คือ Hapy talk

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

Happy talk บางครั้งเราจะพบเห็นได้บนหน้า home และมักจะขึ้นด้วยคำว่า “Welcome to …”

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

Instructions must die

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

คุณควรทำให้ทุกอย่างสามารถอธิบายตัวเอง (self-explanatory) ได้อยากชัดเจน หรือให้ได้มากที่สุดเท่าที่จะทำได้ จะได้ลดปริมาณของ instruction แต่ถ้าจำเป็นต้องใช้ instruction จริงๆ ก็ควรจะเขียนให้น้อยที่สุด

ตัวอย่างการตัดทอน instruction (เรายกตัวอย่างข้อความเกี่ยวกับการอธิบายวิธีใช้แบบสอบถามจากเว็บไซต์นึงขึ้นมาเพื่อศึกษา)

Before: 103 words

The following questionnaire is designed to provide us with information that will help us improve the site and make it more relevant to your needs.
ในประโยคแรกเป็นแค่ happy talk พวกเราทุกคนรู้อยู่แล้วว่า การทำแบบสำรวจทำเพื่ออะไร ส่ิงเดียวที่เราต้องการมีเพียงคำว่า “help us” เพื่อแสดงให้เราเห็นว่า เรากำลังจะช่วยคุณกรอกแบบสอบถาม

Please select your answers from the drop-down menus and radio buttons below.
ผู้ใช้ส่วนใหญ่ไม่ได้ต้องการให้คุณบอกว่าจะกรอกข้อมูลอย่างไร และสำหรับใครที่ต้องการ พวกเค้าก็จะไม่รู้อยู่ดีว่า “drop-down menu” และ “radio button”  คืออะไร

At the bottom of this form you can choose to leave your name, address, and telephone number. If you leave your name and number, you may be contacted in the future to participate in a survey to help us improve this site.
instruction ในส่วนนี้ไม่ได้มีประโยชน์อะไรเลย ส่ิงเดียวที่มันสื่อให้เราคือ ทำให้เรารู้สึกกลัว

If you have comments or concerns that require a response please contact Customer Service.
เมื่อมาถึงจุดนี้ก็ปรากฎความจริงข้อนึงว่า เจ้าของเว็บไซต์ไม่จำเป็นต้องใช้แบบสอบถามนี้เลยก็ได้ ถ้าต้องการได้ข้อมูลที่เป็นประโยชน์และสำคัญกว่า แต่โชคร้ายที่เค้าไม่ได้บอกผู้ใช้เว็บไซต์ว่า เราจะติดต่อกับ customer service ได้ที่ไหน หรือถ้าจให้ดีกว่านั้นเค้าควรให้ link ที่เราสามารถติดต่อได้จากตรงนี้เลย

After: 41 words

Please help us improve the site by answering these questions. It should only take you 2-3 minutes to complete this survey.
NOTE: If you have comments or concerns that require a response don’t use this form. Instead, please contact Customer Service.

คุณสามารถตัดทอนคำอธิบายวิธีใช้แบบสอบถามได้เหลือเพียงไม่กี่คำเท่านั้น

ที่มา: ศศิวิมล

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

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

2. มีตัวเลือก และ ทางเลือกที่ชัดเจนให้กับผู้ใช้
หลังจากที่ผู้ใช้เว็บไซต์ scan เนื้อหา และพบส่ิงที่คิดว่า “น่าจะใช่” ส่ิงที่ตนกำลังค้นหาอยู่ พวกเค้าจะคลิกมัน พวกเค้าจะไม่เสียเวลาในการพิจารณาว่ามันใช่ส่ิงที่ถูกต้องหรือไม่ ถ้าหากมันไม่ใช่ พวกเค้าก็แค่คลิก ‘back’ แต่ก็จะมีข้อแม้อยู่ว่าผู้ใช้ก็มักจะมีควาอดทนต่ำ ถ้าพวกเค้าคลิกไปใน direction ที่ผิดๆ 2-3 ครั้งเค้าก็อาจจะล้มเลิกความตั้งใจในการค้นได้เช่นกัน ดังนั้นถ้าหากเรามีการจัดการกับเนื้อหาที่ดีผู้ใช้ก็จะไม่หลงทางไปกับการคลิกไปดูในส่ิงที่เค้าไม่ได้สนใจอยู่

3. กำจัดความกำกวมเกี่ยวกับ “ผลของการกระทำ”
นักออกแบบไม่ควรให้ผู้ใช้เว็บไซต์ต้องคิดหรือตีความปุ่ม interactive ต่างๆ ว่าถ้ากดไปแล้วจะเป็นอย่างไร เช่น จะมีอะไรเกิดขึ้น หลังการคลิกปุ่ม delete/remove/purchase

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

ส่วนหลักการอื่นๆของ Website Usability จะมีอะไรบ้างคอยติดตามต่อไปนะคะ หรือจะ follow twitter ได้ที่ @sasiwimon ก็ได้นะคะ

]]> http://www.thaidesignwebsite.com/website-usability-%e0%b8%84%e0%b8%b7%e0%b8%ad%e0%b8%ad%e0%b8%b0%e0%b9%84%e0%b8%a3/feed/ 0