การออกแบบเว็บไซต์

บทความนี้สรุปจาก การบรรยายของ คุณอภิศิลป์ ตรุงกานนท์ รองเลขาธิการสมาคมผู้ดูแลเว็บไทย จากโครงการสัมมนาและฝึกอบรมเพื่อการพัฒนาเว็บไซต์มหาวิทยาลัยมหิดล ประจำปี พ.ศ. 2552 เมื่อวันที่ 31 มีนาคม 2552

ประเภทของการออกแบบ

  1. Organization-centered : ออกแบบเพื่อตอบสนองความต้องการของตัวองค์กรเอง (ข้อเสียคืออาจไม่ตรงความต้องการของผู้ใช้)
  2. Technology-centered : ออกแบบโดยเน้นลูกเล่นและเทคโนโลยีที่ทันสมัย (แต่อาจใช้ประโยชน์จริงไม่ได้)
  3. Designer-centered : ออกแบบโดยเน้นการนำเสนอความคิดสร้างสรรค์ด้านการออกแบบ
  4. User-Centered : ออกแบบให้ง่ายต่อการใช้งาน โดยตอบสนองผู้ใช้เป็นหลัก (และเลือกใช้จุดเด่นของทั้ง 3 ประเภทมาผสมผสานกัน)

Web Usability

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

ตัวชี้วัด Usability

  1. Learnability : ผู้ใช้สามารถเรียนรู้วิธีการใช้งานในคราวแรกได้เร็วเพียงใด
  2. Efficiency : ผู้ใช้สามารถใช้งานได้เร็วและคล่องเพียงใด
  3. Memorability : เมื่อผู้ใช้ไม่ใช้งานเป็นระยะเวลาหนึ่ง จะกลับมาใช้งานอีกครั้ง ได้ง่ายและเร็วเพียงใด
  4. Error : ผู้ใช้งานทำผิดพลาดมากเพียงใด และกลับออกมาจากความผิดพลาดนั้นได้ง่ายเพียงใด
  5. Satisfaction : ผู้ใช้เกิดความพึงพอใจในการใช้งานเพียงใด

หนังสือแนะนำ Don't make me think ! คลิกไม่ต้องคิด ! ของ Steve Krug

การสร้างประสบการณ์ของผู้ใช้ (User Experience (UX) Design)

ระดับ Strategy Plane

การสร้างเว็บไซต์ขึ้นมาตามความต้องการของผู้ใช้และของเรา จำเป็นต้องทำอะไรบ้าง

  • ผู้ใช้ ต้องการอะไรจากเว็บไซต์ของเรา
  • เรา (ผู้บริหารองค์กร) ต้องการอะไรจากเว็บไซต์ของเรา
  • อะไรคือความต้องการของผู้ใช้ ที่สอดคล้องกับความต้องการของเรา
  • อะไรคือความต้องการของผู้ใช้ ที่ขัดแย้งกับความต้องการของเรา

ระดับ Scope Plane

  • เว็บไซต์ต้องมีเนื้อหาอะไรบ้าง
  • เว็บไซต์ต้องมีความสามารถอะไรบ้าง มีหน้าที่หรือการทำงาน (Function) อะไรบ้าง
  • ทราบว่าเราจะต้องสร้างอะไร และไม่ควรสร้างอะไร โดยการเขียน Requirement ให้รัดกุม และชัดเจน สามารถวัดได้

ระดับ Structure Plane

  • ออกแบบโครงสร้างหลักของเว็บไซต์ วาดแผนผังโครงสร้าง
  • ออกแบบระบบโต้ตอบกับผู้ใช้ (Interaction Design)
  • การสถาปัตย์โครงสร้างของข้อมูล จัดองค์ประกอบของข้อมูลเนื้อหา(Information Architect)

แนะนำโปรแกรม Balsamiq เพื่อการออกแบบโครงสร้าง และสร้าง User Interface สำหรับเว็บไซต์

ระดับ Skeleton Plane

  • การออกแบบข้อมูลที่ใช้สื่อสารไปถึงผู้ใช้ (Information Design)
  • การออกแบบส่วนโต้ตอบระหว่างเว็บและผู้ใช้ (Interactive Design)
  • การออกแบบทิศทางของการเคลื่อนที่ไปมาภายในเว็บไซต์ หรือการนำร่อง เพื่อไม่ให้หลงทาง(Navigation Design)

ระดับ Surface Plane

Visual Design

  • การจัดวาง (Grid Layout) : แบ่งพื้นที่หน้าจอออกเป็น Header, Footer, Content (อยู่กลางหน้าจอ) Left Sidebar, Right Sidebar
  • การจัดกลุ่มเนื้อหา : จัดกลุ่มตามหมวดหมู่ (Category) หรือแบ่งกลุ่มใหญ่-กลุ่มย่อย (Hierarchy) จัดเรียงตามตัวอักษร (Alphabetical) เรียงตามช่วงเวลา (Chorological) หรืออาจจัดเรียงตามความนิยม (Popularity) ตามแนวของ web 2.0 เช่น วัดจากความนิยมของผู้ใช้ หรือเนื้อหาน่าสนใจ
  • ตัวหนังสือ : ควรใช้ขนาดที่อ่านง่าย 9-12 point สำหรับภาษาอังกฤษ มีความห่างระหว่างบรรทัด 1-4 point มีหัวข้อใหญ่ หัวข้อย่อย (Headings)ให้ชัดเจน ตัวอย่างที่ดีของการใช้ตัวหนังสือและสีที่อ่านง่ายสบายตา คือเว็บไซต์ของ Google
  • รูปภาพ
  • สี : อย่าใช้เกิน 5 สี ใช้สีโทนอุ่นกับ Foreground (พื้นที่ส่วนน้อย ตัวอักษร) ใช้สีโทนเย็นกับ Background (สบายตา ไม่เปล่งแสง เช่นสีดำ สีม่วงเย็นๆ) ใช้สีที่มีความจัดสูงเมื่อต้องการดึงดูดความสนใจ ใช้สีเพื่อสร้างความแตกต่างระหว่างลิ้งก์ที่สามารถคลิกได้ กับเนื้อหาทั่วไป

การใช้ Heatmap หรือแผนที่วัดความร้อน เพื่อวัดพฤติกรรมของผู้ใช้ ว่าในหน้าเว็บไซต์ส่วนไหนของหน้าเว็บที่คนนิยมคลิก ตัวอย่างการบริการ Heat Map ได้แก่ Click map ของ TrueHits และ Fusestats และการใช้ Eyetracking เพื่อตรวจสอบว่าตำแหน่งไหนในหน้าเว็บไซต์มีคนดูมากที่สุด (รูปแบบการแสดงผลจะคล้ายๆ Heat Maps) ตัวอย่างเช่น useit.com และ Google Eye-tracking

Search Engine Optimization (SEO)

ช่องทางที่คนเข้าเว็บไซต์

มี 3 ทาง คือ

  1. ค้นด้วย Search Engine โดยเฉพาะ Google (มากถึง 71%)
  2. Link ต่อมาจาก web อื่น (18%)
  3. พิมพ์ URL หรือ Bookmark หน้าเว็บเอาไว้โดยตรง (11%)

ผู้ที่มีส่วนในการทำ SEO

  • นักการตลาด (Web Marketer)
  • ผู้จัดทำเนื้อหาบนเว็บไซต์ (Web Content Manager)
  • นักพัฒนาและออกแบบเว็บ (Web Developer = Web Programmer + Web Designer)

การทำให้เว็บไซต์ติดอันดับที่ดีใน Search Engine

ประกอบด้วย 2 ปัจจัยหลัก

  1. On-Page Factors : องค์ประกอบที่เราสามารถกำหนดและปรับเปลี่ยนได้ เช่น การเลือกใช้ keywords ใช้ metatags ที่เหมาะสม การจัดวางโครงสร้างของหน้าเว็บ และการจัดการลิงก์ภายในเว็บไซต์
  2. Off-Page Factors : องค์ประกอบที่อยู่ภายนอก ที่ไม่สามารถกำหนดหรือปรับเปลี่ยนได้ง่ายๆ เช่น PageRank ของเว็บไซต์เรา และ Authority Site ที่ลิงก์มาหาเรา

การปรับปรุง On-Page Factors

ตั้งชื่อ URL ที่เหมาะสม

  • ตั้งชื่อ domain และ sub domain ที่สามารถใช้เป็น keyword ได้ด้วย เช่น thai.tourismthailand.org (thai คือชื่อของ subdomain ส่วน tourismthailand.org คือชื่อของ domain)
  • ตั้งชื่อ Directory หรือ File ให้มี keyword ที่เหมาะสม มีความหมาย และมีความสัมพันธ์กับเนื้อหาภายในเว็บหน้านั้น อาจตั้งชื่อ File เป็นภาษาไทยก็ได้ ทำให้ค้นหาได้ง่ายขึ้น แต่อาจมีปัญหากับ Browser รุ่นต่ำๆ บางตัว เช่น IE 6, Firefox 3
  • เนื้อหาแต่ละหน้า ควรกำหนดชื่อ URL เพียงหนึ่งเดียวเท่านั้น และควรกำหนดชื่อแบบถาวร ไม่เปลี่ยนแปลง (Permalink หรือ Permanent Link)
  • ชื่อ URL ควรใช้ตัวอักษรตัวเล็กทั้งหมด
  • หลีกเลี่ยงการมีหลาย URL สำหรับเนื้อหาเดียวกัน แต่ถ้าหากต้องการเปลี่ยนลิงก์ เช่น จาก myweb.com เป็น www.myweb.com ให้ใส่โค้ด rewrite ลงในไฟล์ .htaccess และใส่ไฟล์ .htaccess ไว้ใน root directory ของเว็บ

ตั้งชื่อ Title ที่เหมาะสม

  • Title จะต้องสัมพันธ์กับเนื้อหาภายในเว็บไซต์ ความยาวไม่ควรเกิน 64 ตัวอักษร และควรใส่ keyword ที่สำคัญในตำแหน่งเริ่มต้นของ Title
  • นำชื่อบทความขึ้นก่อนชื่อเว็บไซต์ เช่น Introduction to Search Engine Optimization (SEO) - myweb.com

การใช้ Meta Description

  • <meta name=“descritpion” content =“คำบรรยายสั้นๆ เพื่ออธิบายเว็บเพจ (ไม่ควรเกิน 250 ตัวอักษร)”
  • Google จะใช้ข้อความใน Meta Description แสดงไว้ในหน้าผลลัพธ์การค้นหา
  • หลีกเลี่ยงการใช้ Meta Description ที่เหมือนกันหมดทุกหน้าในเว็บ

การใช้ Tags ต่างๆ

  • ควรใช้ Headings ในการกำหนดชื่อหัวข้อตามลำดับต่างๆ เช่น <H1>, <H2>, … <H6>
  • ควรใช้ตัวหนา <strong> ตัวเอียง <em>
  • ควรใช้ Listing เช่น <ul><li> … </li>
  • รูปภาพ ควรมีข้อความอธิบายด้วย โดยเฉพาะถ้ามีการลิงก์จากภาพไปยังเว็บหน้าอื่นๆ <img src=“ชื่อไฟล์” alt=“ข้อความอธิบายภาพ” />
  • การลิงก์ต่อไปยังเว็บอื่น <a href=“URL”>ชื่อลิงก์</a> ควรใช้ชื่อลิงก์ที่มีความหมาย หรือมี keyword อยู่ในชื่อลิงก์ด้วย และไม่ยาวจนเกินไป

การวางโครงสร้างเว็บ

  • ควรมี sitemap ให้เข้าดูได้
  • ทุกหน้าภายในเว็บไซต์ จะต้องถูกลิงก์ถึงได้
  • อย่าวางโครงสร้างเว็บแบบซอยย่อยเกินไป ต้องคลิกหลายครั้ง
  • ควรใช้ Breadcrumb (navigation) เพื่อไม่ให้หลงทาง ตัวอย่างเช่น myweb > บทความน่าสนใจ > วิธีการทำ SEO
  • หลีกเลี่ยงการใช้ลิงก์แบบ รูปภาพ Javascript หรือ flash
  • อย่าให้มีลิงก์ไปยังหน้าเว็บที่ไม่มีอยู่จริง
  • ปรับแต่งหน้า 404NotFound ให้ผู้ใช้มีข้อมูลว่าควรจะไปไหนต่อ

การสร้าง Sitemap XML

  • สร้างไฟล์ sitemap.xml สำหรับ Google Sitemap เพื่อทำให้เว็บถูก index ใน Google ได้บ่อยขึ้น
  • ดูรายละเอียดเพิ่มเติมเกี่ยวกับ Sitemaps ได้ที่ http://en.wikipedia.org/wiki/Sitemaps
  • สร้างไฟล์ sitemap XML ได้จากเว็บไซต์ http://www.xml-sitemaps.com

การทำให้ Search Engine รู้จัก

ตรวจสอบจำนวนหน้าเว็บ (Site Explorer)

คำสำคัญ (Keywords)

  • Keywords ที่สำคัญควรเกาะกลุ่มอยู่ด้วยกัน (อยู่ใกล้ๆกัน)
  • Keywords ที่สำคัญ ควรอยู่ในตำแหน่งเริ่มต้นของหน้าเว็บ ไม่ควรอยู่ในตำแหน่งท้ายๆ
  • ความหนาแน่น (Keywords Density) ควรอยู่ระหว่าง 2-10% ของจำนวนคำทั้งหมด ในหน้าเว็บ

เครื่องมือวิเคราะห์ Keywords ได้แก่

การอ้างอิงเว็บ (Link Popularity)

  • PageRank ทุกเว็บเพจมีคะแนน PageRank ซึ่งมีค่าตั้งแต่ 0-10 ถ้าเว็บเพจที่มีค่า PageRank สูง ทำการลิงก์ไปยังเว็บเพจใด จะมีส่วนช่วยทำให้เว็บเพจนั้นมีค่า PageRank สูงตามไปด้วย สามารถตรวจสอบค่า PageRank โดยใช้ Google Toolbar
  • TrustRank เป็นวิธีการวิเคราะห์ Link โดยพนักงานของ Google จะทำการคัดเลือกและให้คะแนนเว็บไซต์ที่มีความน่าเชื่อถือ (Authority Sites / Seed Sites) เป็นตัวตั้งต้น ประมาณ 200-300 เว็บไซต์ ถ้าเว็บไซต์เหล่านั้นลิงก์ไปยังเว็บใด เว็บนั้นจะได้รับคะแนน Trust Score จาก Google สูง แต่ถ้าเว็บนั้นทำการลิงก์ต่อไปหาเว็บที่มีคะแนน TrustRank ต่ำ เว็บนั้นก็จะได้รับคะแนนต่ำไปด้วย เว็บไซต์ที่มี PageRank สูง แต่ TrustRank ต่ำ อาจได้อันดับแพ้เว็บไซต์ที่มี PageRank ต่ำ แต่มี TrustRank สูง
  • Hilltop เป็นวิธีการวิเคราะห์ Link โดยให้ความสำคัญกับ Title และ Header ถ้าเว็บเพจถูกลิงก์มาจากเว็บเพจอื่น ที่มีเนื้อหาเกี่ยวข้องกัน จะได้คะแนนสูงกว่าถูกลิงก์มาจากเว็บเพจที่ไม่เกี่ยวข้อง
เทคนิคในการทำลิงก์ภายในเว็บไซต์
  1. พยายามใช้ลิงก์ที่เป็นตัวอักษร หลีกเลี่ยงการใช้ลิงก์รูปภาพ Flash หรือ Javascript
  2. ทุกหน้าในเว็บ จะต้องมีลิงก์ไปหา อย่างน้อย 1 ลิงก์
  3. เว็บหน้าไหน ที่มีความสำคัญสูง ให้ทำลิงก์จากเว็บหน้าอื่นไปหามากๆ
  4. พยายามทำลิงก์ไปยังเว็บไซต์อื่นให้น้อยที่สุด หรือใส่ parameter rel=nofollow ด้งนี้ <a href=“URL” rel=“nofollow”>
  5. อย่าลิงก์ไปหาเว็บไซต์ที่ไม่ดี
เทคนิคการดูผลลัพธ์การค้นหา Google ในประเทศอื่น

Web Content Accessibility Guidelines

แนวทางในการพัฒนาเว็บไซต์ที่ทุกคน (รวมทั้งคนพิการ) สามารถเข้าถึงได้ ปัจจุบันเราใช้ TWCAG 2008 (Thai Web Content Accessibility Guide 2008) เป็นมาตรฐานในการกำหนดแนวทาง โดยอ้างอิงจากมาตรฐานสากล WCAG 2.0 ของ W3C โดยมีหลักการดังนี้

  1. ผู้ใช้ต้องสามารถรับรู้เนื้อหาได้
  2. ผู้ใช้จะต้องสามารถใช้งานได้ (องค์ประกอบต่างๆ ของการ Interface กับเนื้อหา จะต้องใช้งานได้)
  3. ผู้ใช้สามารถเข้าใจเนื้อหาและส่วนควบคุมการทำงานต่างๆ ได้
  4. รองรับกับเทคโนโลยีทั่วไป และเทคโนโลยีสิ่งอำนวยความสะดวกสำหรับคนพิการ ทั้งในปัจจุบันและอนาคต

10 วิธี ทำเว็บไซต์ให้ทุกคนเข้าถึง

  1. ควรใช้ alt อธิบายความหมายของภาพและแอนนิเมชั่นเสมอ
  2. Image maps : ใช้ client-side map และข้อความอธิบายสำหรับแต่ละจุดที่เชื่อมโยง
  3. ใส่คำบรรยายใต้ภาพและมีข้อความทดแทนส่วนที่เป็นไฟล์เสียง หรือมัลติมีเดีย - custom research papers
  4. Hyperlink : ใช้ข้อความลิงก์ที่สื่อความหมาย (ไม่ควรใช้ข้อความว่า “คลิกที่นี่” หรือ “อ่านต่อ” )
  5. ควรใช้ Headings, listing ในการจัดทำโครงสร้างเอกสาร และใช้ css ในการตกแต่งเอกสาร
  6. ควรอธิบายกราฟหรือแผนผัง โดยการใช้ longdesc สำหรับภาพ เช่น <img src=orgchart.jpg” longdesc=” http://www.mysite.com/desc.html ” />
  7. พวก Scripts, Applets, Plug-ins : ให้ใส่เนื้อหาทดแทน หาก browser ไม่รองรับการทำงาน
  8. Frames : ให้ใช้ tag noframe เพื่อทดแทนในกรณีที่ไม่สามารถแสดงผลแบบ frame ได้ และต้องใช้ title attribute ที่เหมาะสมด้วย
  9. ไม่ใช้ตาราง (table) ในการวาง layout ควรใช้ตารางกับข้อมูลเชิงตารางเท่านั้น
  10. ตรวจสอบความถูกต้องของงาน (validation) ได้ที่ http://validator.w3.org

Web Traffic Analysis

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

  • เพื่อให้ทราบว่าคนเข้าเว็บจากทางใดบ้าง
  • คนที่เข้ามาทาง Search Engine ใช้ keyword อะไรในการค้น
  • เข้ามาแล้ว ใช้เวลาอยู่บนหน้าเว็บนานแค่ไหน
  • ดูเว็บหน้าอื่นต่อหรือเปล่า หรือดูแค่หน้าเดียวแล้วออกไป
  • จำนวนคนที่กลับเข้ามาอีก เป็นขาประจำ (Visitor Loyalty)

เครื่องมือที่ใช้วิเคราะห์ ที่สำคัญได้แก่ Google Analytics


รุจเรขา วิทยาวุฑฒิกุล 2009/04/11 11:11


Personal Tools