พอดีจำได้ว่าเคยอ่านบทความเกี่ยวกับการออกแบบตามหลักของ 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 http://www.thaidesignwebsite.com/website-usability-%e0%b8%a0%e0%b8%b2%e0%b8%84-4/ http://www.thaidesignwebsite.com/website-usability-%e0%b8%a0%e0%b8%b2%e0%b8%84-4/#comments Thu, 26 Aug 2010 08:22:27 +0000 Thai Design Website http://www.thaidesignwebsite.com/?p=658

7. พื้นที่สีขาว (White Space) ช่วยให้ทำความเข้าใจเนื้อหาได้ง่ายขึ้น

ดีไซน์เนอร์ส่วนใหญ่รู้คุณค่าของพื้นที่สีขาวเป็นอย่างดี (พื้นที่ว่างระหว่าง paragraph, รูปภาพ, ปุ่ม และ ไอเท็มอื่นๆบนหน้าเว็บ

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

8. ทดสอบประสิทธิภาพด้วยคนจำนวนน้อยๆก็พอ

ผลการศึกษาของ Jakob Nielsen พบว่าจำนวนของ tester ในการ test usability แค่ 5 คน จะเปิดเผย 85% ของปัญหาในเว็บไซต์ของคุณ และถ้า tester 15 คน จะเจอปัญหาในเว็บไซต์คุณทั้งหมด

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

9. หน้าแสดงข้อมูลสินค้าที่ดีจะช่วยให้คุณโดดเด่น

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

เตรียมข้อมูลเกี่ยวกับผลิตภัณฑ์แต่อย่าให้เนื้อหาเยอะเกินไป จงทำให้ข้อมูลง่ายต่อการเข้าใจ สร้างหน้าเพจให้สามารถอ่านอย่างผ่านๆตาได้โดยการแบ่งเนื้อหาเป็นส่วนเล็กๆ (smaller segment) และใช้หัวข้อย่อย ใส่รูปภาพของผลิตภัณฑ์ และใช้ภาษาที่ถูกต้อง ห้ามใช้ภาษาเฉพาะกลุ่มที่จะทำให้ผู้ใช้ไม่เข้าใจ

10. ผู้ใช้ส่วนใหญ่จะไม่ดูโฆษณา

รายงานของ Jakob Nielsen เปิดเผยว่าโดยพื้นฐานของผู้ใช้ส่วนใหญ่จะไม่มอง ad banner ถ้าพวกเค้ากำลังมองหาข้อมูลเล็กๆน้อยๆบนหน้าเพจ หรือ ก้อนเนื้อหา พวกเค้าจะไม่ฟุ้งซ่านไปกับโฆษณาด้านข้าง ส่ิงที่เราต้องการจะบอกไม่ใช่เพียงแค่คนจะหลีกหนีโฆษณา แต่พวกเค้ายังหลีกหนีส่ิงที่ดูเหมือนโฆษณาถึงแม้ว่ามันจะไม่ใช่โฆษณาก็ตาม

การดีไซน์ให้ navigation ดูใหญ่ๆ อาจจะทำให้ดูคล้ายกับ banner ดังนั้นขอให้ระมัดระวังการใช้องค์ประกอบเหล่านี้

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

5. สีที่ดีที่สุดสำหรับแสดงความเป็นลิงค์ (link) คือสีน้ำเงิน

การออกแบบให้เว็บไซต์ของคุณมีเอกลักษณ์นั้นเป็นส่ิงที่ดี แต่ทว่า ถ้าพูดถึงเรื่อง ‘usability’ การทำในส่ิงที่ทุกๆคนเค้าทำกันนั่นแหละดีที่สุด

เพราะเหตุใดจึงเป็นเช่นนั้น?
เพราะว่าเวลาคนเข้าชมเว็บไซต์ใหม่ การมองหาสิ่งต่างๆในเว็บไซต์ พวกเค้ามักจะเร่ิมจากตำแหน่งที่พวกเค้าพบในเว็บไซต์ส่วนใหญ่ หรือที่เรียกว่า usage patterns คนจะคาดหวังในสิ่งที่เหมืิอนเดิม เช่น สีของ link, ตำแหน่งของโลโก้เว็บไซต์, พฤติกรรมของ tab เมนู เป็นต้น

สีของ link ควรเป็นสีอะไร?
สิ่งแรกที่คุณควรคำนึงถึงคือ “contrast” (สีของ link ควรเข้ม หรือ อ่อน เพียงพอที่จะตัดกับสีของ background ได้อย่างชัดเจน) อย่างที่สองคือ link ควรโดดเด่นจาก text อื่นๆ (เช่น ไม่ควรใช้ link สีดำ กับเนื้อหาที่เป็นสีดำ) และอย่างสุดท้ายผลการวิจัยแสดงให้เห็นว่าสีน้ำเงินเป็นสีที่ดีที่สุดสำหรับ link โดยสี link มาตรฐานของ browser  เป็นสีน้ำเงิน ดังนั้นคนจึงคาดหวังว่า link จะต้องเป็นสีน้ำเงิน แต่การเลือกใช้สีที่แตกต่างก็ไม่ใช่ปัญหา แต่มันจะมีผลกระทบต่อความเร็วของผู้ใช้เว็บไซต์ที่จะหา link

6. ช่องเสิร์ช (Search Box) ที่ดีควรมีความกว้าง 27 ตัวอักษร

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

จากการศึกษาพบว่าโดยเฉลี่ย search box จะมีความกว้างอยู่ที่ 18 ตัวอักษร ซึ่ง 27% ของคำที่คนใช้ค้นหายาวเกินไปที่จะพอดีในช่องเสิร์ชที่มีความยาวขนาดนี้ ดังนั้นคุณจึงควรขยายช่องเสิร์ชเป็น 27 ตัวอักษร ซึ่งจะทำให้เหมาะสมกับคำค้นหาถึง 90% และจำไว้ว่าคุณควรวัดขนาดความกว้างด้วย “em” (หน่วยวัดความกว้างของตัวพิมพ์) ไม่ใช่ point หรือ pixel โดย 1 em คือความกว้างและความสูงของ “m” 1 ตัว (ใช้ฟ้อนขนาดใดก็ได้ที่เว็บของคุณเซตไว้) และใช้มันเป็น scale ในการวัดความกว้างให้ได้เท่ากับ 27 ตัวอักษร

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