Transcript รู้จักการออกแบบเว็บไซท์ Intr

การออกแบบเว็บไซต ์
Introduction to web design
วิชา การออกแบบทางเว็บ สอนโดย อ.นุ จรี บุรรี ัตน
จุดประสงค ์การเรียนรู ้
1.
2.
3.
4.
5.
6.
บอกลักษณะของความสาคัญของการออกแบบเว็บไซต ์ได้
่
บอกลักษณะของการออกแบบเว็บไซต ์ทีดี
บอกลักษณะของการสร ้างความได้เปรียบเหนื อคู แ
่ ข่ง
่
มีความรู ้เกียวก
ับองค ์ประกอบของการออกแบบเว็บไซต ์
่
มีความรู ้เกียวก
ับทีมงานพัฒนาเว็บไซต ์
่
่ ในการสร ้างเว็บไซต ์
มีความรู ้เกียวก
ับโปรแกรมทีใช้
ยุคอินเทอร ์เน็ ต
่
่ าลังได้ร ับความนิ ยมไปทัวโลก
่
อินเทอร ์เน็ ตเป็ นระบบสือสารที
ก
่
แม้กระทังประเทศไทยในปั
จจุบน
ั ก็มก
ี ารใช้อน
ิ เตอร ์เน็ ตกน
ั แพร่หลาย
ในหน่ วยงานราชการ และองค ์กรธุรกิจต่างๆ โดยได้ร ับความสนใจ
้
่
จากกลุ่ ม ผู ใ้ ช้ทุ ก ระดับ เพิ่มมาขึนเรื
อยๆโดยเฉพาะนั
ก เรีย นและ
่ มมากขึ
่
้
นักศึกษา จากความนิ ยมใช้อน
ิ เตอร ์เน็ ตทีเพิ
นอย่
างรวดเร็ว
้
่
นี ้ทาให้หน่ วยงานจาเป็ นต้องพัฒนาเว็บไซต ์ขึนมาอย่
างหลีกเลียง
้
่ มี
่
ไม่ได้ เราจึงเห็นเว็บไซต ์ต่างๆในทุกวงการเกิดขึนมากมาย
ทังที
คุ ณ ภาพและไม่ ม ี คุ ณ ภาพ ตามความรู แ
้ ละความสามารถของ
ผู อ
้ อกแบบ แต่อย่างน้อยก็เป็ นการแสดงตัวบนอินเตอร ์เน็ ตได้สาเร็จ
้
่ งแล้ว
ขันหนึ
่
้
้
การทีจะสร
้างเว็บไซต ์ขึนมาสั
กแห่งหนึ่ งนันจะต้
องมีเป้ าหมายที่
้
่
แน่ นนอน หรือ อาจจ าเป็ นต้อ งสรา้ งเว็บไซต ์ขึนมาตามค
าสังของ
่ ด
่
ผู บ
้ งั คับบัญชา โดยไม่ มเี ป้ าหมายทีช
ั เจน ซึงจะท
าให้เ ว็บนั่นไม่ ม ี
ประโยชน์อะไรกับผู ใ้ ช้และไม่มใี ครเข้ามา ใช้บริการ นอกจากนั้น
้
ถ้าคุณสร ้างเว็บขึนมาส
าเร็จแล้วแต่ไม่สนใจคอยมาดู แลปร ับปรุ งให้
้ จะยิงมี
่ ความหมายลดน้อยลงไปเรือยๆ
่
ดีขนอยู
ึ้
่เสมอ เว็บนันก็
การยึด
้
้ั
หลักในการออกแบบเว็ บไซต ท
์ ี่ถู ก ต้อ งตังแต่
ข นตอนแรกในการ
กาหนดเป้ าหมายของเว็บไซต ์ ไปจนถึงการใส่ใจในรายละเอียดต่างๆ
สถิตผ
ิ ู ใ้ ช้อน
ิ เทอร ์เน็ ต
่
ปั จจุบน
ั จานวนผู ใ้ ช้อน
ิ เทอร ์เน็ ตทัวโลกโดยประมาณ
1.733 พันล้านคน หรือ 25.6 %
่
่
ของประชากรทัวโลก
(ข้อมู ล ณ เดือน กันยายน 2552) โดยเมือเปรี
ยบเทียบในทวีปต่าง
่ ผูใ้ ช้อน
่ ดคือ เอเชีย โดยคิดเป็ น 42.6 % ของผู ใ้ ช้อน
ว่าทวีปทีมี
ิ เทอร ์เน็ ตมากทีสุ
ิ เทอร ์เน็ ต
่ ประชากรผู ใ้ ช้อน
่ ดคือประเทศจีน คิดเป็ นจานวน 360 ล้าน
และประเทศทีมี
ิ เทอร ์เน็ ตมากทีสุ
หากเปรียบเทียบจานวนผู ใ้ ช้อน
ิ เทอร ์เน็ ตกับจานวนประชากรรวม พบว่าทวีปอเมริกาเห
่ ดคือ 74.2 % รองลงมาได้แก่ ทวีปออสเตรเลีย 60.4 %
มีสด
ั ส่วนผู ใ้ ช้ตอ
่ ประชากรสู งทีสุ
และ ทวีปยุโรป คิดเป็ น 52.0 % ตามลาดับ
(ข้อมู ลจากวิกพ
ิ เี ดีย)
ความสาค ัญของการออกแบบเว็บไซต ์
้
ในปั จจุบน
ั นี ้นอกจากจะมีเว็บไซต ์อยู ่มากมายแล้วก็ยงั มาเว็บไซต ์เกิดขึนใหม่
้ จะเข้
่
่ ามา
ทุกว ัน ผู ใ้ ช้จงึ มีทางเลือกมากขึนที
าไปทดลองใช้บริการในเว็บต่างๆ เพือน
่ กใจมากทีสุ
่ ดแทนทีจะทนอยู
่
่ แล้วสับสน ไม่น่าพอใจ
เปรียบเทียบหาเว็บทีถู
่ในเว็บทีดู
่ านมาของคุณ ความรู ้สึกทีได้
่ ร ับจากแต่ละเว็บไซต ์
จากประสบการณ์การท่องเว็บทีผ่
่
่
คงแตกต่ า งก น
ั ออกไป ซึงแน่
นนอนว่า ทุ ก คนคงชอบเว็บไซต ์ทีออกแบบมาอย่
าง
่
่
สวยงามและมีการใช้งานทีสะดวกมากกว่า เว็บทีดู สบ
ั สนวุ่นวาย มีขอ
้ มู ลมากมาย
เต็มหน้าจอแต่หาอะไรไม่เจอ แถมยังใช้เวลาแสดงผลแต่ละหน้านานจดไม่อยากรอ
่
้ วนเป็ นผลมาจากความแตกต่างในการออกแบบเว็บไซต ์นันเอง
้
สิงเหล่
านี ล้
การออกแบบเว็ บไซต จ
์ ึ ง มี ส่ ว นส าคัญในการสร า้ งความประทับใจให้ก บ
ั
ผู ใ้ ช้บ ริก าร และท าให้อ ยากกลับ เข้า มาใช้อ ีกในอนาคต และนอกจากจะต้อ ง
่ ให้
่ บ ริก าร
พัฒ นาเว็บให้ด แ
ี ละมีป ระโยชน์แ ล้วคุ ณ ยังต้อ งแข่ งขัน กับ เว็บไซต ์อืนที
เช่นเดียวกับเว็บของคุณในปั จ จุบน
ั และยังต้องสรา้ งความได้เปรีย บเหนื อเว็ บไซต ์
้
ใหม่ทก
ี่ าลังจะเกิดขึนในอนาคตอี
กด้วย ดังนั้นไม่ว่าเว็บของคุณจะมีคู่แข่งอยู ่แล้ว
่ งดู ดผู ใ้ ช้ให้อยู ่กบ
หรือไม่ในวน
ั นี ้ คุณก็ควรจะออกแบบเว็บอย่างมีคุณภาพ เพือดึ
ั
เว็บของคุณตลอดไป
่
การออกแบบเว็บไซต ์ทีดี
การออกแบบเว็บไซต ์นั้นไม่ไ ด้หมายถึงลักษณะหน้ า ตาของเว็บไซต ์
่
้
่ น ก าหนดเป้ าหมายของ
เพีย งอย่ า งเดีย ว แต่ เ กียวข้
อ งตังแต่
ก ารเริมต้
เว็บไซต ์, ระบุกลุ่มผู ใ้ ช้, การจัดระบบข้อมู ล, การสร ้างระบบเนวิเกชน
ั , การ
ออกแบบหน้ า เว็บ , รวมไปถึง การใช้ก ารกราฟิ ก, การเลือ กใช้ส ี และการ
้ งต้องคานึ งถึงความแตกต่างของสือกลาง
่
จัดรู ปแบบตัวอ ักษร นอกจากนันยั
่
ในการแสดงผลเว็บไซต ์ด้วย สิงเหล่
านี ้ได้แก่ ชนิ ดและรุ น
่ ของบราวเซอร ์
ขนาดของหน้าจอมอนิ เตอร ์ ความละเอียดของสีในระบบ รวมไปถึง plug-in
่
ชนิ ด ต่ า งๆที่ผู ใ้ ช้ม ีอ ยู ่ เพือให้
ผู ใ้ ช้ส ะดวกและความพอใจที่จะท่ อ งไปใน
่ กอย่ า งในเว็บไซต ์ทังที
้ คุ
่ ณมองเห็นและมองไม่
เว็บไซต ์นั้น ดังนั้นทุ ก สิงทุ
้ น
้
เห็น ล้วนเป็ นผลมาจากกระบวนการออกแบบเว็บไซต ์ทังสิ
่
การออกแบบเว็บไซต ์ทีดี
่ สวยงามหรือมีลูกเล่นมากมายนั้นอาจจะไม่นับเป็ น
เว็บไซต ์ทีดู
การอกแบบที่ ดี ก็ ไ ด้ ถ้า ความสวยงามและลู กเล่ น เหล่ า นั้ นไม่
่
่
เหมาะสมกบ
ั ลักษณะของเว็บไซต ์ ด้วยเหตุนี้จึงเรืองยากที
จะระบุ
ว่ า
่
้
่
การออกแบบเว็บไซต ์ทีดีนันเป็ นอย่างไร เนื องจากไม่มห
ี ลักเกณฑ ์
่
แน่ นนอนทีจะใช้
ได้กบ
ั ทุกเว็บไซต ์ แนวทางการออกแบบของแต่ละ
้
้
เว็บไซต ์นันแตกต่
างกน
ั ไป ตามเป้ าหมายและลักษณะของเว็บไซต ์นัน
่ บ
เว็บไซต ์บางแห่งอาจต้องการความสนุ กสนาน บันเทิง ขณะทีเว็
่
่ อเป็ นหลักดังนั
้ ้นอาจสรุ ปได้
อืนกลั
บต้องการความถู กต้อง น่ าเชือถื
่ ก็ค อ
ว่าการออกแบบทีดี
ื การออกแบบให้เหมาะสมกับเป้ าหมาย
และลักษณะของเว็บไซต ์ โดยคานึ งถึงความสะดวกในการใช้
งานของผู ใ้ ช้เป็ นหลัก
ออกแบบให้ตรงกับเป้ าหมายและ
ลักษณะของเว็บไซต ์
เว็ บไซต แ
์ ต่ ล ะประเภทต่ า งมี เ ป้ าหมายและลัก ษณะที่แตกต่ า งกัน
่ น Search engine ซึงเป็
่ นแหล่งรวบรวมทีอยู
่ ่ของ
ตัวอย่างเช่น เว็บไซต ์ทีเป็
่
เว็ บไซต ต
์ ่ า งๆ ท าหน้ า ที่เป็ นประตูไปสู ่ เ ว็ บไซต อ
์ ืนๆ
เว็ บไซต ป
์ ระเภทนี ้ มี
่
่ ใ้ ช้ตอ
เป้ าหมายทีจะให้
ขอ
้ มู ลทีผู
้ งการอย่างรวดเร็ว และจะมีผูเ้ ข้ามาใช้
่ ส
่ าคัญในการ
บริการค้นหาข้อมู ลเป็ นจานวนมากในแต่ละวัน ดังนั้นสิงที
้ คอ
่ ใ้ ช้
ออกแบบเว็บไซต ์ประเภทนี ก็
ื สามารถแสดงหน้าเว็บอย่างรวดเร็วเมือผู
่ ประสิทธิภาพ เพือให้
่
เปิ ดเข้ามา และมีระบบสืบค้นข้อมู ลทีมี
ได้ผลลัพธ ์ที่
รวดเร็ว
ส าหร บ
ั เว็ บ เพื่อความบัน เทิง หรือ เกี่ยวข้อ งกับ ศิล ปะนั้ น ผู ใ้ ช้ม ก
ั
่
่ น่
่ าตืนเต้
่
่
่ ก เพลิดเพลินหรืออาจ
คาดหวังทีจะได้
พบกับสิงที
น, เรืองราวที
สนุ
้ ง
ได้เรียนรู ้สาระบางอย่างบ้าง ความสาคัญในการออกแบบ เว็บไซต ์เหล่านี จึ
่
่ บริการข้อมู ลอย่าง
มีมากพอๆกับเนื ้อหา ภายในเว็บไซต ์ส่วนเว็บทัวไปที
ให้
เป็ นระบบและมีรู ปแบบที่เข้า ใจง่ าย เพื่อท าให้ส ามารถเข้า ถึง ข้อ มู ล ที่
ต้องการได้อย่างรวดเร็ว
ส่ ว นเว็ บไซต ข
์ ององค ก
์ รธุ ร กิจ ที่มีเ ป้ าหมาย เพื่อขายสิน ค้า หรือ
่ าเป็ นต้องให้ความสาคัญกับการออกแบบเว็บไซต ์เป็ นอย่าง
บริการนั้น ยิงจ
่
่
มาก เพราะผู ใ้ ช้บริการหรือบริการโดยดู จากสิงของที
พบเห็
นในเว็บไซต ์ก็
้
จะสะท้อ นถึง ภาพลัก ษณ์ข องธุ ร กิจ นั น จึง ท าให้เ ว็ บไซต ท
์ ี่ได้ร บ
ั การ
่
ออกแบบมาอย่างดีสามารถสร ้างความน่ าเชือถือและดึงดู ดความสนใจของ
่
ผู ใ้ ช้ได้มากกว่าเว็บไซต ์อืน
สร ้างความได้เปรียบเหนื อคู แ
่ ข่ง
่ าเป็ นต้องให้ความสาคัญกับการออกแบบมาก
สาหร ับทางธุ รกิจ ยิงจ
้ เนื่ องจากพฤติกรรมการใช้จ่ายบนเว็บนั้นมีลก
ขึน
ั ษณะไม่เหมือนกับการ
้
่
่
ซือขายทัวไปทีเราคุ น
้ เคย ลู กค้า สามารถเข้า ไปในเว็บไซต ์หลายๆ แห่ง
่
่ ทสุ
่
พร ้อมกัน เพือเปรี
ยบเทียบหาสินค้าและบริการทีดี
ี่ ดเท่าทีจะหาได้
โดย
ไม่ตอ
้ งเกรงใจผู ข
้ ายเหมือนกับในร ้านจริง และยังไม่มข
ี อ
้ ได้เปรียบเสียเปรียบ
่
่ ง้ ทุกรา้ นค้าบนเว็บจึงถือว่าอยู ่ในทีเดี
่ ยวกันโดยไม่ม ี
ในเรืองของท
าเลทีตั
ความแตกต่ า งของระยะทาง ไม่ ว่า เว็บ นั้นจะอยู ่ ภ ายในหรือ นอกประเทศ
้ ดว้ ยการกรอกชือของเว็
่
ผู ใ้ ช้ก็สามารถไปซือได้
บไซต ์ลงไปเท่านั้น คงห้าม
กันไม่ได้ถา้ ผู ใ้ ช้จะประเมินค่าของหน่ วยงาน หรือบริษท
ั ตามลักษณะของ
่ สม
่ เกิ
่ ดขึนบ่
้ อยเสียด้วย จึงเป็ นช่องทาง
เว็บไซต ์ทีได้
ั ผัส และมักจะเป็ นสิงที
ที่ร า้ นค้า ขนาดเล็ ก สามารถออกแบบให้เ ว็ บไซต ์ มี ค วามยิ่งใหญ่ แ ละ
่ อมากกว่าร ้านค้าขนาดใหญ่ก็เป็ นได้ ถ้ามีความรู ้และความเข้าใจ
น่ าเชือถื
่ กต้องเนื่ องจากต้นทุนในการสร ้างเว็บไซต ์นั้นต่ามาก เมือเที
่
ทีถู
ยบกับการ
เปิ ดรา้ นตามศู นย ์การค้าต่างๆ และยังสามารถรองร ับลู กค้าได้จากทุก แห่ง
่
่
ทัวโลก
โดยทีผลประโยชน์
ทได้
ี่ ร ับจากเว็บไซต ์นั้นอาจมีค่ามาหาศาล เกิน
่ ณคาดคิด ดังนันเว็
้
่
กว่าทีคุ
บไซต ์ของคุณจึงไม่ควรยอมให้มก
ี ารออกแบบทีดู
่ อน้อยกว่าคู ่แข่ง ซึงจะท
่
น่ าเชือถื
าให้คุณพลาดโอกาสทางธุรกิจไปอย่างน่ า
เสียดาย
องค ์ประกอบของการออกแบบ
เว็บไซต ์
• ความเรียบง่ าย (Simplicity)
่ ยบง่ าย ไม่ซ ับซ ้อนและใช้งานได้อย่างสะดวก
– มีรูปแบบทีเรี
่
้
– สือสารเนื
อหาถึ
งผู ใ้ ช้โดยมีเฉพาะองค ์ประกอบเสริมที่
้
จาเป็ นเท่านัน
• ความสม่าเสมอ (Consistency)
– สร ้างความสม่าเสมอให้ก ับเว็บไซต ์โดยใช้รูปแบบเดียวกัน
้ บไซต ์ ทังในส่
้
ตลอดทังเว็
วนของรู ปแบบหน้า สไตล ์ของ
กราฟิ ก ระบบเนวิเกช ัน และโทนสี
– ถ้าลักษณะของแต่ละหน้าในเว็บไซต ์เดียวกัน แตกต่างกัน
อาจทาให้ผูใ้ ช้เกิดความสับสนได้
องค ์ประกอบของการออกแบบ
เว็บไซต ์
• ความเป็ นเอกลักษณ์ (Identity)
– การออกแบบต้องคานึ งถึงลักษณะขององค ์กร
– รู ปแบบของเว็บไซต ์สามารถสะท้อนถึงเอกลักษณ์
ขององค ์กร
้
่ ประโยชน์ (Useful Content)
• เนื อหาที
มี
่ ใ้ ช้ตอ
้
้ งการให้
อมู ลทีผู
– ควรจัดเตรียมเนื อหาและข้
ถูกต้องและสมบู รณ์
่
– ควรมีการปร ับปรุงและเพิมเติ
มให้ทน
ั ต่อเหตุการณ์
อยู ่เสมอ
องค ์ประกอบของการออกแบบ
เว็บไซต ์
่ งานง่ าย (User-Friendly
• ระบบเนวิเกช ันทีใช้
Naviagtion)
– ระบบเนวิเกชันจะต ้องออกแบบให ้ผูใ้ ช ้เข ้าใจง่ายและใช ้งานสะดวก
่ อความหมายร่
่
โดยใช ้กราฟิ กทีสื
วมกับคาอธิบายอย่างชัดเจน
– มีรป
ู แบบและลาดับของรายการอย่างสม่าเสมอ
่ าสนใจ (Visual Appeal)
• มีลก
ั ษณะทีน่
– ความน่ าในใจของเว็บไซต ์จะมีความสัมพันธ ์กับคุณภาพของ
องค ์ประกอบต่าง ๆ เช่น คุณภาพของกราฟิ ก การใช ้ชนิ ดตัวอักษร
การใช ้โทนสี เป็ นต ้น
องค ์ประกอบของการออกแบบ
เว็บไซต ์
• การใช้งานอย่างไม่จากัด (Compatibility)
– ควรออกแบบเว็บไซต ์ให้ครอบคลุมกับผู ใ้ ช้ส่วนใหญ่มาก
่ ด
ทีสุ
้ั
่
– ไม่ควรมีการติดตงโปรแกรมเพิ
มเติ
ม หรือเลือกใช้
บราวเซอร ์ชนิ ดใดชนิ ดหนึ่ ง
่
– สามารถแสดงผลได้ทุกระบบปฏิบต
ั ก
ิ ารและทีความละเอี
ยด
หน้าจอต่าง ๆ กันได้อย่างไม่มป
ี ั ญหา
• คุณภาพในการออกแบบ (Design Stability)
– ควรให้ความสาคัญกับการออกแบบเว็บไซต ์
– ควรมีมาตรฐานการออกแบบและการจัดระบบข้อมู ล
องค ์ประกอบของการออกแบบ
เว็บไซต ์
่ กต้อง (Functional Stability)
• ระบบการใช้งานทีถู
– ระบบการทางานต่าง ๆ ในเว็บไซต ์จะต้องมีความแน่ นอน
่ อย่างถู กต้อง เช่น การกรอกข้อมู ล การ
และทาหน้าทีได้
่
เชือมโยง
เป็ นต้น
– ควรมีการตรวจสอบการทางานอยู ่เสมอ
่
ออกแบบเพือความส
าเร็จของเว็บ
่ ผูใ้ ช้หน้ า
ความส าเร็จ ของเว็บไซต ์ไม่ไ ด้เ กิด จากการทีมี
้
ใหม่เข้ามาในเว็บไซต ์จานวนมาก ถ้าผู ใ้ ช้เหล่านันเพี
ยงเข้า
่ า โฮมเพจแล้ว ก็ จ ากไปโดยไม่ ย อ
มาทีหน้
้ นกลับ มาอีก แม้ว่ า
คุณจะสามารถดึงผู ค
้ น จานวนมากให้เข้ามาในเว็บได้ด ว้ ยการ
ทุ่มทุนโฆษณาอย่างหนัก แต่ถา้ เว็บไซต ์ของคุณไม่ม ีคุณภาพ
่ เ พือสร
่
และการออกแบบทีดี
า้ งความประทับใจให้ก บ
ั ผู ใ้ ช้แ ล้ว
้ ก ยอดขายสินค้าจึงมีไม่
พวกเขาก็จะไม่ยอ
้ นกลับเข้ามาดู ซาอี
มากและการโฆษณาก็ได้ผลน้อย ส่งผลให้เว็บไซต ์ห่างไกลจาก
ความส าเร็ จ เพราะผู ้ใ ช้ข าประจ าเท่ า นั้ นที่ จะช่ ว ยสร า้ ง
ความสาเร็จให้เข้ากับเว็บไซต ์ได้
่ ใ้ ช้ส่ ว นใหญ่ ช อบเข้า ใช้บ ริก ารในบางเว็ บ อยู ่
เหตุ ผ ลทีผู
่
เป็ นประจา(และไม่ยอมไปใช้เว็บอืนๆ)
อาจแบ่งได้เป็ น 4 ข้อ
่ นพืนฐานในการออกแบบเว็
้
่ เพราะเป็ น
ใหญ่ ๆ ซึงเป็
บไซต ์ทีดี
่ ใ้ ช้ทุกคนต้องการจากเว็บไซต ์
ปั จจย
ั สาคญ
ั ทีผู
่ ใ้ ช้ตอ
ปั จจัยสาคัญทีผู
้ งการจาก
เว็บไซต ์
้
่ ใ้ ช้ตอ
• มีเนื อหาเป็
นประโยชน์ ตรงก ับทีผู
้ งการ
่
้
• มีการปร ับปรุงเพิมเติ
มเนื อหา
และพัฒนาเว็บไซต ์อยู ่
เสมอ
• ใช้เวลาในการดาวน์โหลดน้อย แสดงผลเร็ว
่
• การใช้งานทีสะดวก
เข้าใจง่ าย
่ นออกแบบเว็บไซต ์
เริมต้
้
่
คุณอาจคิดว่า การจะสรา้ งเว็บไซต ์ขึนใหม่
สก
ั แห่ง หนึ่ งคงไม่ ใ ช่เ รือง
ยากอะไร เพราะในปั จ จุบน
ั คุ ณสามารถใช้โ ปรแกรมสาเร็จ รู ปช่วยสรา้ ง
เว็บไซต ์ได้อย่างง่ ายดาย จึงไม่จาเป็ นต้องใช้ความรู ้ทางภาษา HTML เลย
่ น้ันต้อ งอาศ ย
แต่ใ นความเป็ นจริงแล้วการพัฒ นาเว็บไซต ์ทีดี
ั ความรู แ้ ละ
้
่
ทัก ษะหลาย ๆ ด้า นร่ว มกัน เช่น พืนฐานเกี
ยวกั
บ ภาษา HTML
,
ความสามารถในการสร ้างและออกแบบกราฟิ กได้อย่างเหมาะสม , การจัด
ระเบี ย บตัว อัก ษรและองค ป
์ ระกอบต่ า ง ๆ หรือ การเลื อ กใช้ชุ ด สีอ ย่ า ง
เหมาะสม เป็ นต้น นอกจากนั้นผู อ
้ อกแบบยังต้องติดตามศึกษาหาความรู ้
้
และเทคนิ คใหม่ ๆ มาใช้ในการปร ับปรุ งเว็บไซต ์ให้มป
ี ระสิทธิภาพดียงขึ
ิ่ น
อยู ่เสมอ
่ ณ จะลงมือ สรา้ งเว็บไซต ์ก็ค วรศึกษาถึง ขันตอน
้
ด้วยเหตุ นี้ ก่อนทีคุ
และหลัก การออกแบบเว็ บไซต ท
์ ี่ดีเ สีย ก่ อ น เพื่อที่จะป้ องกันไม่ ใ ห้เ กิด
้ ซึงนอกจากจะท
่
ข้อผิดพลาดในการออกแบบขึน
าให้ผูใ้ ช้เกิดความสับสน
ไม่ พ อใจแล้ว คุ ณ ยัง ต้อ งกลับ มาแก้ไ ขเว็ บ เหล่ า นั้ นใหม่ อ ีก และที่แย่
่
้ อ เมือผู
่ ใ้ ช้มค
่ ดต
้ั
ยิงกว่
านันคื
ี วามรู ้สึกทีไม่
ี อ
่ เว็บไซต ์ในครงแรกแล้
ว ก็เป็ น
่
่
้ั
เรืองยากที
พวกเขาจะย้
อนกลับมาอีกครงในภายหลั
งแม้ว่าเว็บคุณจะได้ร ับ
่ คุณควรจะออกแบบเว็บไซต ์
การปร ับปรุ งให้ดข
ี นแล้
ึ้
วก็ตาม ดังนั้นทางทีดี
้ั
้ั
่
้ั
่ น
ให้ดต
ี งแต่
ครงแรกเพื
อจะได้
สร ้างความประทับใจให้ก ับผู ใ้ ช้ตงแต่
เริมต้
ทีมงานพัฒนาเว็บไซต ์
่
่
่มีค วามหลากหลายมาก
เรืองของผู
พ
้ ฒ
ั นาเว็ บไซต น
์ ้ั นเป็ นเรืองที
แตกต่างกันไปตามขนาดและกาลังคนของหน่ วยงาน แม้วา
่ การสร ้างเว็บให้
ดีน้ั นจะต้อ งอาศ ย
ั ทัก ษะและความช านาญหลายๆ ด้า น แต่ ห น่ วยงาน
ขนาดเล็ ก อาจมีผู ร้ บ
ั ผิด ชอบเพีย งคนเดีย วคอยท าหน้ า ที่ทุ ก อย่ า งด้ว ย
้
่
่ ยงพอก็คงไม่เป็ นปั ญหาอะไร
ตัวเองทังหมด
ซึงหากมี
ความรู ้และทักษะทีเพี
้ั
แต่ถา้ ผู น
้ นไม่
รู ้หลักในการออกแบบเว็บไซต ์เลย คุณก็คงคาดหวังอะไรจาก
้
่ ค วามซ บ
เว็บไซต ์นันได้ไ ม่ ม ากนัก ส่ ว นเว็บไซต ์ขนาดใหญ่ ท ีมี
ั ซอ
้ นและ
่
้
่
ปริมาณงานมากย่อมต้องการผู ร้ ว
่ มงานทีมากขึ
น
ซึงจะได้
ประโยชน์ใน
่
้ ท าให้ม ีแ นวโน้ ม ที่จะ
เรืองของความคิ
ด และทัก ษะต่ า ง ๆ ที่มีม ากขึน
พัฒนาเว็บไซต ์ได้อย่างมีประสิทธิภาพมากกว่าการทางานคนเดียว
่ ับพัฒ นาเว็บไซต ์นั้นอาจมี
สาหร บ
ั เว็บไซต ์ขนาดใหญ่ห รือ บริษ ท
ั ทีร
่
ความจาเป็ นต้องใช้ทม
ี งานทีสมบู
รณ์ครบทุกตาแหน่ ง รายละเอียดต่อไปนี ้
จะช่ว ยให้คุ ณ ทราบถึง ต าแหน่ ง, หน้ า ที่ และความสามารถของทีม งาน
่
เพือใช้
ในการเลือกสรรทีมงานพัฒนาเว็บไซต ์ได้อย่างเหมาะสม
ทีมงานพัฒนาเว็บไซต ์
• Webmaster
่
้
– เป็ นผู ค
้ วบคุมในเรืองการออกแบบ
เนื อหา
และรายละเอียด
ทางเทคนิ ค
• Information Architect
่ ัดระเบียบข้อมู ลและทดสอบประสิทธิภาพในการ
– ทาหน้าทีจ
ใช้งาน
• Designer
– เป็ นผู อ
้ อกแบบลักษณะหน้าตาของเว็บไซต ์ และ
องค ์ประกอบต่าง ๆ
• HTML and JavaScript Coder
่
– ร ับผิดชอบการสร ้างเว็บเพจโดยอาศ ัยเครืองมื
อต่าง ๆ
่
– ปร ับปรุง เปลียนแปลงข้
อมู ล รวมถึงการอ ัพโหลดไฟล ์
ทีมงานพัฒนาเว็บไซต ์
• Developer/Programmer
– เป็ นผู เ้ ขียนสคริปต ์และโปรแกรมต่าง ๆ
่
– อาจต้องเกียวข้
องก ับระบบฐานข้อมู ล
• System Administrator
่
– ทาหน้าทีควบคุ
ม ดู แลเว็บเซิร ์ฟเวอร ์ รวมถึงฮาร ์ดแวร ์และซอฟต ์แวร ์
่ เกี
่ ยวข้
่
อืนที
อง
้
่
่ ประสิทธิภาพ
– สามารถวิเคราะห ์และปร ับตังระบบเพื
อการท
างานทีมี
• Content Editor/Writer
้
– เป็ นบรรณาธิการ โดยร ับผิดชอบในการจด
ั เตรียมเนื อหา
ตรวจสอบความถู กต้อง
วิธก
ี ารสร ้างเว็บเพจ
• สร ้างด้วยภาษา HTML
่
โดยการใช้โปรแกรมสร ้างเอกสาร (Text Editor) โดยทัวไป
เช่น โปรแกรม
NotePad โดยการใส่คาสัง่ (Tag) ของภาษา HTML เข้าไปโดยตรง วิธน
ี ี้
ผู ส
้ ร ้างต้องมีประสบการณ์และการเรียนรู ้ภาษา HTML มาก่อน
• สร ้างด้วยโปรแกรมประยุกต ์
่ ยกว่า WYSIWYG (What-You-See-Isเป็ นการสร ้างแบบทีเรี
What-You-Get) เช่น Dreamweaver, FrontPage เป็ นต้น
โปรแกรมช่วยในการสร ้างเว็บ
•
•
•
•
•
•
•
•
Macromedia Dreamweaver
Microsoft FrontPage
Allaire HomeSite
CoffeeCup
GoLive
HotDog Pro
HotMetaPro
NetObjects Fusion
Macromedia Dreamweaver
่
• สามารถออกแบบหน้าเว็บได้อย่างสะดวกโดยอาศ ัยเครืองมื
อ
่
ต่าง ๆ โดยไม่จาเป็ นต้องรู ้เกียวกั
บภาษา HTML
• มีหน้าจอในการแสดงหน้าจอการออกแบบและหน้าจอคาสัง่
่
• มีระบบเทมเพลตทีจะท
าให้ผูอ
้ อกแบบสามารถใช้โครงสร ้าง
้ บไซต ์
เดียวก ันทังเว็
่
่ วยในการดาวน์โหลดและอ ัพโหลดไฟล ์
• มีเครืองมื
อเพือช่
่
่
่ พฒ
ระหว่างเครืองเซิ
ร ์ฟเวอร ์กับเครืองที
ใช้
ั นาเว็บเพจ
ความผิดพลาดในการออกแบบเว็บไซต ์ 10
อ ันดับแรก
1. ใช้โครงสร ้างหน้าเว็บเป็ นระบบเฟรม
การใช ้ระบบเฟรมในเว็บไซต ์สร ้างความสับสนใหก้ บ
ั ผูใ้ ช ้อย่ างมาก
่
ทาใหผ
้ ูใ้ ช ้ไม่สามารถทา bookmark หน้าเว็บเพจทีสนใจจะกลั
บเขา้
่
มาอีกได ้ , การแสดงชือไฟล
์ของ URL ไม่ถูกตอ้ ง , การสั่งพิมพใ์ ห ้
ผลลัพธ ์ไม่แน่ นอน นอกจากนั้นยังทาใหผ้ ูใ้ ช ้ไม่สามารถคาดการณ์ได ้
่
้ เฟรมไหน
่
่ งค ์แล ้ว
ว่าจะเกิดความเปลียนแปลงขึ
นที
หลังจากคลิกทีลิ
ความผิดพลาดในการออกแบบเว็บไซต ์ 10
อ ันดับแรก
้ั งโดยไม่จาเป็ น
2. ใช้เทคโนโลยีขนสู
้ั งเพือแสดงฝี
่
คุณไม่จ าเป็ นต้องใช้เ ทคโนโลยีขนสู
มือหรือ
ดึงดู ดความสนใจจากผู ใ้ ช้ เพราะจะได้ผลเฉพาะกับกลุ่มผู ใ้ ช้
่ ประสบการณ์สูงเท่านั้น เนื่ องจากผู ใ้ ช้ส่วนใหญ่ให้ความ
ทีมี
สนใจก บ
ั เนื ้ อหาและการใช้ง านที่ดีม ากกว่ า และไม่ ม ีค วาม
่
้ั ง ทีเพิ
่ งออกมาล่
่
พร อ
้ มทีจะใช้
เ ทคโนโลยีช นสู
า สุ ด เช่น ถ้า
ข้อมู ลของคุณไม่จาเป็ นต้องแสดงผลในรู ปแบบ 3 มิต ิ คุณ ก็
ไม่ควรใช้ระบบ VRML (Virtual Reality Modeling Language)
ให้ยุ่งยากโดยเปล่าประโยชน์
ความผิดพลาดในการออกแบบเว็บไซต ์ 10
อ ันดับแรก
3 . ใ ช้ ต ั ว ห นั ง สื อ ห รื อ ภ า พ ที่ เ ค ลื่ อ นไ ห ว
ตลอดเวลา
ใ น ห น้ า เ ว็ บ ข อ ง คุ ณไ ม่ ค ว ร มี อ ง ค ป
์ ร ะ ก อ บ ที่
่
เคลือนไหวอยู
่ ต ลอดเวลาโดยไม่ ม ห
ี ยุ ด ไม่ ว่า จะเป็ น
Scrolling text , BLINK text , Marquees เพราะสิง่
เหล่านี ้จะสร ้างความราคาญและรบกวนสายตาผู อ
้ า
่ น
่ ณ มีส งเคลื
่
ยิงคุ
ิ่
อนไหวเหล่
า นี ้อยู ่ ม ากเท่ า ใด ก็จ ะยิง่
้
้
สร ้างความสับสนให้ก ับผู ใ้ ช้มากขึนเท่
านัน
ความผิดพลาดในการออกแบบเว็บไซต ์ 10
อ ันดับแรก
่ ับซ ้อน (URL)
4. มีทอยู
ี่ ่เว็บไซต ์ทีซ
จดจาและพิมพ ์
ยากต่อการ
่ ่เว็บไซต ์ทีซ
่ ับซ ้อนนันอาจจะอยู
้
่
ทีอยู
่ในรู ปของชือ
่ ค วามยาวมาก , สะกดล าบาก , การใช้ต วั อ ก
ทีมี
ั ษร
พิ ม พ เ์ ล็ ก ผ ส ม กับ ตัว พิ ม พ ใ์ ห ญ่ ร ว ม ถึ ง ก า รใ ช้
ตัวอ ักษรพิเศษ เช่น เส้นใต้ ( _ ) , ยัตภ
ิ งั ค ์ ( - ), และ
่
่ กจะทาให้สบ
เครืองหมาย
tilde ( ~ ) ทีมั
ั สน
นอกจากนั้ นที่อยู ่ เ ว็ บไซต ค
์ วรสื่อถึงโครงสร า้ งของ
่
ข้อ มู ล ภายในเว็บไซต ์อีก ด้ว ย โดยการก าหนดชือได
่
่ อความหมายเข้
่
เร็กทอรีและชือไฟล
์ทีสื
าใจได้
ความผิดพลาดในการออกแบบเว็บไซต ์ 10
อ ันดับแรก
่
่ ่ของเว็บไซต ์ใน
5. ไม่มก
ี ารแสดงชือและที
อยู
หน้าเว็บเพจ
่ น
เนื่ องจากผู ใ้ ช้บางคนอาจจะเข้ามาสู ห
่ น้าทีเป็
ข้อมู ลผ่านระบบค้นหาหรือ search engine โดย
ไม่ได้ผ่านหน้าโฮมเพจมาก่อน ทาให้ผูใ้ ช้ไม่
สามารถรู ้ได้วา
่ กาลังอยู ่ในเว็บไหน และจะกลับเข้ามา
้
่ ่ของ
อีกได้อย่างไร เพราะในหน้านันไม่
มช
ี อหรื
ื่
อทีอยู
เว็บไซต ์ให้เห็น
ความผิดพลาดในการออกแบบเว็บไซต ์ 10
อ ันดับแรก
6. มีความยาวของหน้ามากเกินไป
เว็บไซต ์จานวนมากของไทยเรามักจะมีหน้าแรกที่
่
ยาวมาก เพราะต้อ งการทีจะบรรจุ
ขอ
้ มู ลไว้ใ นหน้ า
่
่ ด ซึงกลั
บจะทาให้ผูใ้ ช้
แรกให้ผูใ้ ช้ม องเห็ นมากทีสุ
เกิ ด ความสับ สนก บ
ั ข้อ มู ลที่ มี จ านวนมากเกิ นไป
้ หน้าเว็บทีมี
่ ความยาวมากจะทาให้เสียเวลา
เหล่านัน
ในการดาวน์โหลดมาก และยังสรา้ งความเหนื่ อยล้า
้ั ดอาการตาลาย
ในการอ่านให้จบหน้า แถมบางครงเกิ
่ ต้
่ องการไม่เจออีก แต่ในทางตรงข้ามการ
มองหาสิงที
้ั
แบ่งหน้าย่อย ๆ หลายชนเกิ
นไปก็ทาให้เรียกดูได้ชา้
่
โดยเฉพาะสาหร ับผู ท
้ ต่
ี่ ออินเทอร ์เน็ ตด้วยความเร็วตา
ความผิดพลาดในการออกแบบเว็บไซต ์ 10
อ ันดับแรก
่ ประสิทธิภาพ
7. ขาดระบบเนวิเกช ันทีมี
อย่ า คิด ว่ า ผู ใ้ ช้จ ะเข้า ใจโครงสร า้ งเว็ บไซต ไ์ ด้ด ี
เ ท่ า ก ับ คุ ณ ผู ้ ใ ช้จ ะ ไ ม่ ส า ม า ร ถ เ ข้ า ถึ ง ข้ อ มู ล ที่
่ ด
่
ต้องการได้ถา้ ปราศจากระบบเนวิเกชน
ั ทีช
ั เจน เมือ
่ ต้
่ องการไม่พบ เว็บไซต ์นันก็
้ ไม่มโี อกาสที่
ผู ใ้ ช้หาสิงที
จะประสบความส าเร็จได้ ดัง นั้นในเว็ บไซต ์หนึ่ งอาจ
จ าเป็ นต้อ งใช้ร ะบบเนวิเ กช น
ั หลายรู ปแบบร่ว มก น
ั
่ านวยความสะดวกให้กบ
่ ด
เพืออ
ั ผู ใ้ ช้มากทีสุ
ความผิดพลาดในการออกแบบเว็บไซต ์ 10
อ ันดับแรก
8. ใช้สข
ี องลิงค ์ไม่เหมาะสม
่ าไปสู ่หน้าทียั
่ งไม่ได้เข้าไป
โดยปกติแล้ว ลิงค ์ทีน
่
่ เข้า ไป
นั้นจะเป็ นสีน้ าเงิ น ส่วนลิงค ์ทีไปยั
งหน้ าทีได้
แล้ว นั้ นจะเป็ นสีม่ ว ง การเปลี่ยนแปลงหรือ สลับ สี
ดัง กล่ า วอย่ า งไม่ ร อบคอบ จะท าให้ผู ใ้ ช้ไ ม่ แ น่ ใจว่า
่ ค ลิก เข้า ไปแล้ว
ส่ ว นไหนคือ ลิง ค ์ และลิง ค ์ไหนทีได้
บ้าง
ความผิดพลาดในการออกแบบเว็บไซต ์ 10
อ ันดับแรก
9. ข้อมู ลเก่าไม่มก
ี ารปร ับปรุงให้ทน
ั สมัย
่ ใ้ ช้พบว่าข้อมู ลในเว็บไซต ์นันเก่
้
เมือผู
าหรือไม่ทน
ั
่ อและ
ต่อสถานการณ์ปัจจุบน
ั ก็จะเกิดความไม่เชือถื
ไม่ อ ยากกลับ มาใช้บ ริก ารอีก ดัง นั้นหลัง จากสร า้ ง
้
เว็ บไซต ข
์ ึ นมาแล้
ว คุ ณ จะต้อ งคอยดู แ ลปร บ
ั ปรุ ง
เนื ้ อหาให้ท น
ั สมัย อยู ่ เ สมอ ส่ ว นข้อ มู ลเก่ า ที่ ไม่
่
จาเป็ นแล้ว อาจจัดเก็บรวบรวมไว้ในทีเฉพาะส
าหร ับ
ผู ท
้ สนใจหรื
ี่
อลบออกไปตามความเหมาะสม
ความผิดพลาดในการออกแบบเว็บไซต ์ 10
อ ันดับแรก
10. เว็บเพจแสดงผลช้า
กราฟิ กและไฟล ์ขนาดใหญ่จะมีผลทาให้เว็บเพจนั้น
่ าใช้เวลานาน
ต้องใช้เวลาในการดาวน์โหลดมาก ซึงถ้
กว่า 15 วินาทีขนไปก็
ึ้
อาจจะทาให้ผูใ้ ช้ขาดความสนใจ
ได้ เนื่ องจากผู ใ้ ช้มค
ี วามอดทนรอการแสดงผลของเว็บ
เพจได้จากัด มีรายงานวิจย
ั ว่า ถ้าเกิน 8 วินาที ผู ใ้ ช้
่
่
กว่า 90% จะเปลียนไปดู
เว็บอืนแทน
(“The Economic
Impacts of Unacceptable Web Site Download Speed”
จาก www.zonaresearch.com) ส่วนของไทยยังไม่มใี คร
ศึกษาว่าผู ช
้ มมีความอดทนรอแค่ไหน
้
คาศ ัพท ์พืนฐาน
• เว็บไซต ์ (Web site)
่
แหล่งข้อมู ลทีบรรจุ
อยู ่บนเครือข่ายอินเตอร ์เน็ ต 
หนังสือหนึ่ งเล่ม
• เว็บเพจ (Web page)
่
้
หน้าทีแสดงเอกสาร
เนื อหาของเว็
บไซต ์  เอกสารแต่ละ
หน้า
• โฮมเพจ (Home page)
หน้าแรกของเว็บไชต ์  ปกของหนังสือ
้
คาศ ัพท ์พืนฐาน
• Bookmark
วิธก
ี ารของบราวเซอร ์ในการจดจาเว็บเพจที่
่ั
ต้องการจะกลับมาในภายหลัง เหมือนกับการใส่ทค
ี่ นหนั
งสือ
่ องการกลับมาอ่านอีกในครงต่
้ั อไป
ไว้ตรงหน้าทีต้
่ ในการแสดงเว็บเพจหรือเอกสาร
• Browser
โปรแกรมทีใช้
ประเภท HTML เช่น Microsoft Internet Explorer , Netscape
Navigator และ Opera
• Cache หน่ วยความจาของคอมพิวเตอร ์สาหร ับรวบรวมข้อมู ล
่ ดดู แล้ว เมือมี
่ ก ารเรีย กดู ห น้ าเดิม ขึนมาอี
้
ของเว็บเพจทีเปิ
ก
บราวเซอร ์จะเปรียบเทียบความแตกต่างระหว่างไฟล ์บนเชิร ์ฟ
่
เวอร ์ก บ
ั ในหน่ วยความจ า ถ้า ไม่ ม ีอ ะไรเปลียนแปลงก็
จ ะน า
่ บอยู ่ในหน่ วยความจานี มาแสดง
้
่
ข้อมู ลเว็บเพจทีเก็
ซึงจะช่
วย
ประหยัดเวลาในการดาวน์โหลดและแสดงผล
้
คาศ ัพท ์พืนฐาน
่ กาหนดลักษณะ
• Cascading Style Sheet (CSS) ข้อมู ลทีใช้
ขององค ์ประกอบต่าง ๆ ในหน้าเว็บ เช่น ตัวอก
ั ษร , สี ,
้
พืนหลั
ง , หรือ ต าแหน่ งของกราฟิ ก ท าให้ผู อ
้ อกแบบ
สามารถก าหนดรู ปแบบและสไตล ข
์ ององค ป
์ ระกอบทุ ก
่ ยวกันได้
หน้าไว้ในทีเดี
• Common Gateway Interface (CGI) มาตรฐานในการ
ติด ต่ อ สื่อสารระหว่ า งบราวเซอร ์กับโปรแกรมบนเชิร ์ฟ
่ างานในเว็บไซต ์ เช่น Counter
เวอร ์ โปรแกรมต่าง ๆ ทีท
, Web Board , Form Submission และ Chat Room
่
้ งสิ
้ น
้
ล้วนอาศ ัยมาตรฐานในการสือสารแบบนี
ทั
้
คาศ ัพท ์พืนฐาน
่ บเชิร ์ฟเวอร ์เก็บไวใ้ นฮาร ์ดดิสก ์ของผูใ้ ช ้
• Cookie ข ้อมูลบางอย่างทีเว็
่
เพือประโยชน์
ในการติดตามผูท
้ เข
ี่ า้ มาใช ้บริการในเว็บไซต ์ ทาใหผ
้ ูใ้ ช ้
้ั อเข
่ า้ ไปยังหน้าอืน
่ หรือ
ไม่จาเป็ นต ้องกรอกข ้อมูลส่วนตัวใหม่ทุกครงเมื
่
เมือกลั
บเข ้ามาในเว็บไซต ์เดินนั้นอีกครง้ั
่
่
่ง
• Download กระบวนการเคลือนย
้ายข ้อมูลจากคอมพิวเตอร ์เครืองหนึ
่
่ ง ในทีนี
่ หมายถึ
้
่
ไปยังอีกเครืองหนึ
งการร ับข ้อมูลจากเว็บเชิร ์ฟเวอร ์เพือ
มาแสดงผลเป็ นเว็บเพจในบราวเซอร ์
• FTP (File Transfer Protocol) มาตรฐานในการส่งผ่านข ้อมูลระหว่าง
่ อ้ อกแบบได ้สร ้างเว็บเสร็จแล ้ว จะต ้องใช ้ระบบ FTP
คอมพิวเตอร ์ เมือผู
้
้
นี ในการอั
พโหลดไฟล ์ทังหมดไปเก็
บบนเว็บเชิร ์ฟเวอร ์
้
คาศ ัพท ์พืนฐาน
้ ๆ ว่า ลิงค ์
• Hyperlink / Hypertext Link / Link หรือเรียกกันสัน
่
่ น
คือระบบการเชือมโยงข
อ้ มูล ในเว็ บเพจ โดยที่เมื่อคลิกในส่วนทีเป็
่ กอา้ งถึงนั้ นขึนมา
้
ลิงค ์แลว้ บราวเซอร ์จะทาการเปิ ดไฟล ์หรือเว็บเพจทีถู
ใหม่
่ ้ใน
• Hypertext Markup Language (HTML) ภาษามาตรฐานทีใช
การสร า้ งเว็ บเพจเพื่ อน าไปแสดงผลในบราวเซอร ์ ซึ่งอาจจะ
ประกอบด ว้ ยตัว อัก ษร , กราฟิ ก , ลิง ค ์ และองค ป์ ระกอบอื่น ๆ เช่น
เสียงและวิดโี อ
่ คอ
• Navigation System ระบบการนาทางในเว็บไซต ์ ซึงก็
ื กลุ่มของ
่ าหน้าทีพาผู
่
ลิงค ์ทีจะท
ใ้ ช ้ไปยังส่วนต่าง ๆ ภายในเว็บไซต ์
THE END
Question & Anser