Web Design กว่าจะเป็น 1 เว็บไซต์ต้องทำอะไรบ้างจ้ะ

WEB DESIGN888 | รับออกแบบและเขียนเว็บไซต์ WordPress, WooCommerce, ทำ SEO
“สืบเนื่องมาจากการเรียนในห้องเรียนแล้วเกิดคำถามต่างๆมากมายเลยมาหาคำตอบด้วยตัวเอง”

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

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

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — –

จากที่ผมศึกษามาผมพอจะสรุปได้ดังนี้นะครับ (มันมีหลายตำรามากโขแต่เนื้อหาก็ไม่หนีกันมาก)

| 8 ขั้นตอนการออกแบบเว็บไซต์ |

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

1.การกำหนดเป้าหมาย (Goal identification)

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

2.การกำหนดขอบเขตของเว็บไซต์ (Scope identification)

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

3.การจัดกลุ่มข้อมูลและเรียบเรียงแผนผังเว็บไซต์ (Information Architecture and Sitemap )

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

4.การจัดวางองค์ประกอบภาพ (Wireframe and Visual elements)

เมื่อเราได้โครงสร้างเว็บและเนื้อหาแล้วเราก็จะมาสร้างภาพลักษณ์ ภาพจำให้เว็บไซต์ของเรากัน ซึ่งมันก็จะสอดคล้องกับ Brief และ ความต้องการของลูกค้าหรือตัวเราเองอะไรก็แล้วแต่ มันก็จะล้อกับเป้าหมายที่เราตั้งอ่ะ ซึ่งการจัดวางองค์ประกอบภาพจำเป็นที่จะต้องมีความรู้ด้าน visual hierarchy บ้าง (ไม่รู้ไปเสิร์ชกูเกิ้ลเลยเด้อ) แต่โลกก็ไม่ได้โหดร้ายเสมอไปเพราะมีตัวช่วยมือดีที่ทำให้เราไม่หลุดสีหลุดตรีมนั่นก็คือ Moodboards นั่นเอง

5.การพัฒนาเว็บไซต์ (Site Development)

ถึงเวลาที่ทุกคนรอคอยลอยคอนั่นก็คือเขียนโค้ดจ้า เมื่อ Design ที่ทำทั้งหมดข้างต้นเป็นการทำงานแบบเห็นภาพอยู่กับรูปภาพรูปทรงแต่ในขั้นนี้จะได้เห็นแต่โค้ดหยึ๋ยๆกันเลยทีเดียว มันคือเวลาที่จะปลดปล่อยงานออกแบบของเราทำให้ใช้งานได้จริงนั่นเอง ซึ่งภาษาที่่ใช้ก็มีหลักๆคือ HTML CSS Javascript และอีกมากมายแล้วแต่คนจะตรัสรู้

6.การทดสอบผล (Testing)

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

7. การเผยแพร่เว็บไซต์ (Launch)

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

8.การปรับปรุงและพัฒนา (Site Maintenance and Development)

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

🙂

อ่ะมาถึงตรงนี้ใครที่ขี้เกียจอ่านแล้วจบออกไปได้ เห้ยไม่ใช่!! อย่าเพิ่งออกเค้าล้อเล่น อ่านต่อน้าาาาา เราไปทำความรู้จักว่าเจ้า 8 ขั้นตอนเนี่ยมีรายละเอียดวิธีการยังไง อ่านแค่นี้ไม่หนำใจเลยอยากอ่านอีกไปดูเลยจ้าาาา …..

1.การกำหนดเป้าหมาย (Goal identification)

อย่างที่บอกไปตอนแรกเนี่ย ว่าเราจะทำอะไรให้สำเร็จเราต้องมีเป้าหมาย ว่าเราจะทำเว็บอะไร แต่เรายังไม่รู้เลยว่าเว็บไซต์ที่เราจะทำออกมาเนี่ยจะเป็นเว็บแบบไหน เราไปลองรู้จักกับประเภทของเว็บไซต์กันก่อนเลยดีกว่า

เว็บไซต์ประเภทต่างๆ

เท่าที่ผมเห็นๆมาเนี่ยก็เอามารวมๆได้ประมาณนึง คือ

  1. Corporate Website หรือเว็บไซต์ขององค์กร ที่เป็นหน้าเป็นตาของบริษัท บอกข้อมูลเกี่ยวกับองค์กร ข้อมูลการสมัครงาน ติดต่อ

2. Social Media แน่นอนเมื่อพูดถึง Social media website ที่ใหญ่ที่สุดคงหนีไม่พ้น Website Facebook แน่นอนใช่มั้ยครับ 555+

 

3.E-commerce หรือเว็บขายของออนไลน์ ซึ่งปัจจุบันมีมากมายก่ายกอง ทั้งเว็บที่ขายของรวมๆเป็นตลาดขนาดใหญ่ หรือเป็นเว็บไซต์ที่ขายเฉพาะผลิตภัณฑ์ของตัวเอง ก็เป็น E-comerce รูปแบบหนึ่ง

4.Single page เว็บที่มีเพียงหน้า Landing ใหญ่ๆเพียงเว็บหน้าเดียวหรือมีหน้าอื่นๆไม่เกิน 10 หน้า เว็บไซต์ประเภทนี้เป็นเว็บไซต์ที่เหมาะกับการทำ Portfolio หรืออะไรที่นำเสนอเนื้อหายแบบกระชับๆแต่เริ่ดและปังนั่นเอง ซึ่งเว็บไซต์ประเภทนี้สโคปจะไม่ใหญ่มาก

 

5.Online Academy เว็บสถาบันการเรียนการสอนในรูปแบบออนไลน์ที่มีทั้งแบบเรียนฟรี เรียนเสียตัง มีเนื้อหาให้เลือกเรียนตามที่ชอบ เรียนได้ทุกที่ทุกเวลานั่นเอง

 

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

7.Inspiration เว็บไซต์ที่สายนักออกแบบสายศิลปินไม่ควรพลาดเพราะเป็นแหล่งหา Ref. ชั้นดีเมื่อขาดแรงบันดาลใจแต่เดดไลน์ก็เผามาทุกที ตัวช่วยที่ดีที่สุดลำดับต้นๆก็คือ

 

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

2.การกำหนดขอบเขตของเว็บไซต์ (Scope identification)

ในขั้นตอนการกำหนดขอบเขตของเว็บไซต์เมื่อเราได้รู้แล้วว่าใครจะมาใช้เว็บไซต์ที่เราทำ เราทำเว็บไซต์เพื่ออะไร ถ้าทำคนเดียวก็อาจจะกำหนดได้เองเลยแต่ถ้าทำเป็นทีมก็ต้องช่วยกันกำหนดขอบเขตของเว็บไซต์กับคนในทีมไม่ว่าจะเป็น Project manager Marketing Ux designer Ui designer Developer และที่ขาดไม่ได้คือ User เพื่อมองในทุกๆมุมมองของผู้ที่จะมาเกี่ยวข้องกับเว็บไซต์ที่เราจะทำในอนาคต ซึ่งเครื่องมือในการสร้างสโคปเว็บเนี่ยก็มีให้เลือกมากมายก่ายกอง

ขอยกตัวอย่างซักเล็กน้อยละกัน

  1. Brain Storm : การทำ Brain Storm เนี่ยมันก็คือการออกความเห็นแบบบ้าคลั่งที่ต้องการให้คิดออกนอกกรอบมากที่สุดไม่มีกรอบอะไรใดๆมาขวางกันและห้ามดิสกันตอน Brain Storm แต่การ Brain ก็ต้อง Brain ในพื้นฐานของปัญหาหรือ Goal ที่เราจะทำไม่ใช่การ Brain แบบไม่สนอะไรใดๆ เช่น หาไอเดียการทอดไข่ให้สุกเร็ว แต่เขียนไอเดียเรื่องซักผ้ายังไงให้ผ้าแห้งเร็ว ฮัลโหล ไม่ใช่เด้อ
 

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

2. Hypothesis Statement : การตั้งสมมติฐานของปัญหาและการแก้ไข โดยตั้งว่าเว็บไซต์หรือ Feature ที่เราจะทำจะเข้าไปช่วยทำให้เกิดผลอะไร ซึ่งจะมีส่วนประกอบก็คือ

เราจะทำอะไร >> มีอะไรออกมาจากที่เราทำ >> และผลตอบรับออกอย่างไร (ตรงนี้อาจจะเป็น KPI ของบริษัทก็ได้ )

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

3. Value VS Feasibility map หรือแผนผังมูลค่ากับความเป็นไปได้ (อ่ะแปลตรงตัวสุด 555+) เป็นแผนผังที่จะช่วยสโคปงานของเราให้ชัดมากขึ้นมันทำให้เราเห็นว่าอะไรสำคัญอะไรไม่สำคัญ รวมสิ่งที่จะทำให้เห็นภาพรวมๆและหลีกเลี่ยงการทำงานที่ไม่คุ้มค่ากับความเสี่ยง วิธีการทำไปหาอ่านเพิ่มเอง 5555+

3.การจัดกลุ่มข้อมูลและเรียบเรียงแผนผังเว็บไซต์ (Information Architecture and Sitemap )

เมื่อเราทำอะไรทั้งหลายแหล่มากมายไอเดียชัดขึ้นเริ่มเห็นภาพเว็บไซต์มาแล้ว มาแล้วเว้ยยย มาแล้วววววววว กรี๊ดดดดดด!!! พอ.

ในขั้นตอนนี้การจะทำได้ก็ควรมีพื้นฐานของการทำ IA หรือ Information Architecture เพื่อช่วยในการสร้างกลุ่มข้อมูลให้สอดคล้องกับผู้ใช้ของเรา ซึ่งมันจะนำไปสู่การทำ Sitemap ต่อไป

Information Architecture หรือการส้รางสถาปัตยกรรมข้อมูล(ฟังดูยากเออมันยากจริงๆ 555+ ) มีอยู่ 8 ข้ออ่ะตรงนี้ผมไม่ขยายความมากนะครับเพราะว่ายังไม่เชี่ยวชาญจริงๆเพื่อนๆลองหาอ่านแล้วถ้ามีลิ้งค์ดีๆแนะนำได้นะครับ แต่ผมขอเอาหัวข้อหลักๆมาให้ดูก่อนก็คือ

  1. Principle of object การจัดลำดับข้อมูล
  2. Principle of choice การทำให้ user เลือกและตัดสินใจได้เร็ว
  3. Principle of Disclosures แสดงข้อมูลให้ User เท่าที่ต้องเห็น
  4. Principle of Exemplars ใช้สัญลักษณ์ที่ user เข้าใจแทนการใช้คำพูดยาวๆ เช่น หน้าหลักใช้รูปบ้าน
  5. Principle of Front Doors ทำให้ user รู้ว่าอยู่ในส่วนไหนของเว็บไซต์แล้วจะไปทำอะไรต่อที่ไหน
  6. Principle of Multiple Classification การจัดกลุ่มข้อมูลตามความหมายที่ user นิยาม
  7. Principle of Focused Navigation ทำให้ user Focus การใช้ Navigation ระบบเดียว ณ เวลาที่ user ใช้ระบบนั้นอยู่
  8. Principle of Growth การวางเนื้อหาเพื่อนำไปสู่การเข้าถึงที่มากขึ้นของ Product จัดลำดับความลึกการเข้าถึงของ user

เหนื่อย 5555+ ยาวแท้ ไม่เป็นไรสู้ต่อ …

เมื่อเราทำ IA มาแล้วเราก็จะมาทำ Sitemap กันต่อ แต่ก่อนเข้าเรื่อง Sitemap ขอออกตัวก่อนว่า IA ไม่ใช่ Sitemap นะ

 

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

4.การจัดวางองค์ประกอบภาพ (Wireframes and Visual elements)

 

ในการทำ wirefram และการจัดวางองค์ประกอบเว็บดีไซน์เนอร์ควรจะรู้เรื่องVisual hierarchy มาเป็นอย่างดี เพื่อจัดวางลำดับการเห็นของ user ได้ถูกต้องและเหมาะสมกับ Goal ที่เราตั้งไว้

ซึ่งเรื่อง Visual hierarchy ก็มีสิ่งที่ต้องคำนึงอยู่ประมาณนึง

  1. Size ขนาด มีผลต่อการมองเห็นของ User เพื่อให้ User เห็นเป็นกลุ่มๆ
  2. color สีมีผลต่อการมองเห็น รับรู้ ความรู้สึกและภาพจำ
  3. Texture พื้นผิวที่สัมผัสได้จากการมอง เช่น มันวาว หยาบกร้าน แหลมคม
  4. Unity การเป็นเอกภาพหนึ่งเดียวกัน ความกลมกลืนทำให้จุดประสงค์ของเว็บไซต์ชัด
  5. Rhythm การจัดวางมีจังหวะ มีทิศทาง การจัดวางที่เหมาะสมมีผลต่อการรับรู้
  6. Balance การจัดวางที่เท่ากันทั้งสองข้างทำให้รู้สึก เท่าเทียม มั่นคง ทางการ
  7. White space พื้นที่ว่างมีผลในการพักสายตา ทำให้ user ไม่เบื่อไปกับเนื้อหาที่มากมาย
  8. Contrast ความต่าง ทำให้น่าจดจำและเด่นชัด

จริงๆ Visual hierarchy มีตำราแตกต่างกันมากมายขึ้นอยู่กับการประยุกต์ใช้งานของเรามากกว่านะครับ

Wireframes คือการนำศาสตร์ของ Visual Design มาใช้เพื่อสร้างหน้าตาเว็บไซตือย่างง่ายๆให้ทีมเห็นภาพร่วมกันซึ่งการทำ wireframes แบ่งได้เป็น 3 แบบ

  1. Low fidelity wireframes เป็นการทำไวเฟรมอย่างง่ายโดยใช้แค่รูปร่างรูปทรงมาอธิบายแบบหยาบๆเพื่อนำเสนอทีมในเบื้องต้น
  • ข้อดี คือประหยัดเวลา ราคาถูก เห็นภาพรวมๆได้เร็วๆ เหมาะกับการทำกับ Product ที่ต้อง lunch เร็วๆ
  • ข้อเสีย หยาบไปหน่อย คนที่จินตนาการไม่ออกจะไม่ค่อยเข้าใจ ถ้าทำ low มากๆจะทำให้งงว่าอะไรเป็นอะไร

2. Medium fidelity wireframes เป็นการทำไวเฟรมแบบที่ดูดีขึ้นมานิดนึงมีการใช้ ไอคอนแสดงถึงรูปภาพ ปุ่ม เสียง วิดีโอ ใส่สีได้ในส่วนที่สำคัญๆต้องใช้สี แต่ยังใช้รูปร่างรูปทรงง่ายๆในการนำเสนอ เหมาะสำหรับพรีเซนต์ PO PM เพื่อให้เห็นภาพร่วมกัน

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

  • ข้อดี เห็นภาพชัดมากขึ้น ราคาถูก เห็นภาพรวมๆได้เร็ว
  • ข้อเสีย ยังไม่ได้ใกล้เคียงของจริงขนาดที่ Developer นำไปพัฒนาได้

3. High fidelity wireframes เป็นการทำไวเฟรมที่เหมือนกับ Product จริงๆมากที่สุด โดยการใส่ภาพ สี ปุ่ม ไอคอน เนื้อหาที่ใกล้เคียงมากที่สุด

  • ข้อดี เห็นภาพชัดเป๊ะ สวย เหมือนสิ่งที่จะทำจริงๆ ใช้พัฒนาต่อไปได้เลย
  • ข้อเสีย เสียเวลา เสียเงิน มาก
 

5.การพัฒนาเว็บไซต์ (Site Development)

มาถึงตรงนี้ก็คือการพัฒนาเว็บไซต์ถามว่าในส่วนนี้ Web designer ไม่เห็นจะเกี่ยวแล้วปล่อยให้เป็นเรื่องของทีม Programmer ไปละกัน โน้วววววว ไม่ได้น้าาา เพราะ Programmer ไม่ได้มีหัวด้านการออกแบบศาสตร์และศิลป์เหมือนคุณ และอย่าลืมว่าคุณก็คือทีมพัฒนาเว็บไซต์เช่นกัน เพราะฉะนั้นถึงขั้นนี้ Web designer ก็ต้องทำงานควบคู่ไปกับ Developer เพื่อให้ Website ที่ออกมาตรงตามความต้องการของ user มากที่สุด ตรงนี้ผมขออนุญาติไม่เจาะลึกว่ามีเครื่องมือมีภาษาอะไรบ้างเพราะว่าผมไม่ได้เชี่ยวชาญเรื่องภาษาหรือเครื่องมือด้านนี้นะครับ ถ้าใครมีบทความเกี่ยวกับเครื่องมือการพัฒนาเว็บไซต์ดีมาแชร์กันได้นะค้าบบบ ^^

6.การทดสอบผล (Testing)

อย่างที่บอกไปว่าอ่ะเขียนเสร็จเดปเสร็จปล่อยเลยจ้า โบ้งงงงน้ะจ้าาาโบ้งทั้งเว็บ การที่เราจะ Launch Products ใดๆก็ตามล้วนต้องทดสอบก่อนทั้งสิ้นไม่ว่าจะเป็นอะไรในโลกแม้แต่คนยังต้องโดนทดสอบประเมินผลแล้วเว็บจะมีอภิสิทธิ์ได้เช่นไร จริงมั้ยครับ การทดสอบเนี่ยเกิดขึ้นเพื่อทำให้มั่นใจว่าเว็บไซต์ของเราจะสามารถใช้ได้ตาม Goal ที่เราตั้งไว้ เป็นไปตามสมมติฐานและอะไรก็หลายแหล่ที่ทำมาอย่างยาวนาน เพราะการทำเว็บไซต์ทุกขั้นตอนมี Cost มีค่าใช้จ่าย เวลา กำลังคน สมอง ค่าขนม น้ำตอนทำเว็บ เพื่อไม่ให้การทำทุกอย่างสูญสิ้นไปกับความสะเพร่าของขั้นตอนใดขั้นตอนหนึ่งควรจะต้อง ทดสอบก่อนเสมอ นะครับ เพราะถ้าเว็บไซต์ของเราโบ้งขึ้นมาจะเข้ากับสุภาษิตที่ว่า วัวหายล้อมคอกกันเลยทีเดียว เสียอารมณ์ เสียแรง เสียเวลาเพิ่ม ยอมเสียเวลา Test ก่อนดีก่านะครับ ซึ่งวิธีการ Testing ก็มีหลายวิธีให้เลือกอีกตามเคย

  1. Guerrilla Testing (ไม่ได้จับลิงกอลิล่าไหนมาทดสอบนะครับ 5555+)ทดสอบการใช้งานของเว็บไซต์จากคน 5–10 คน ใช้เวลา 5–15 นาทีเพื่อดูการใช้งานว่าผู้ใช้สามารถใช้ได้ตรงตาม Goal ที่เราตั้งไว้หรือไม่ โดยคนที่ทำไม่ควรเป็นคนที่อยู่ในโปรเจคเดียวกันรู้เรื่องโปรเจคเป็นอย่างดี ไม่ควรๆ
  2. Usability Testing มีวิธีการมากมายไปหาอ่านเอาได้เลย
  3. Remote Testing มีโจทย์ให้ User ทำในแต่ละ Task ซึ่งการทดสอบนี้เหมาะกับการทดสอบเป็น Feature แต่ละ Feature ไป
  4. Technical Testing ทดสอบการใช้งานด้านระบบเช่น ทดสอบกับเซิร์ฟเวอร์ เป็นต้น
  5. A/B Testing การทำเว็บไซต์เดียวกันแต่ออกแบบต่างกันเล็กน้อยในส่วนที่จะทดสอบเพื่อดูว่าอะไรคือตัวเลือกที่ดีที่สุด

****************************************************************** ซึ่งการ Test แต่ละครั้งมี Cost เช่นกันทั้ง เงิน แรง คน เวลา อามณ์ เพราะฉะนั้นควรตั้งคำถาม ตั้ง Task ที่จะนำไปทดสอบให้ดีว่าต้องการทดสอบอะไรและจะได้อะไรจากนี้ *******************************************************************

7. การเผยแพร่เว็บไซต์ (Launch)

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

8.การปรับปรุงและพัฒนา (Site Maintenance and Development )

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

  1. Google Analytic หนึ่งในตัวช่วยมือดีที่เว็บไซต์ส่วนใหญ่จะใช้กันคงหนีไม่พ้นเจ้าตัวนี้เพราะว่าฟรีและมีการเก็บ Insight ได้ดีในระดับหนึ่งเลยทีเดียว

2. Facebook Analytic ตัวนี้เหมาะสำหรับเว็บไซต์ที่มีการเปิดเพจใน Facebook ด้วยเพราะจะช่วยวิเคราะห์ Traffic ใน Facebook ได้เป็นอย่างดี รวมถึงเครื่องมือตัวนี้ยังสามารถ Tracking เพื่อวิเคระห์พฤติกรรมภายในแอปพลิเคชั่นได้อีกด้วย

 

3. SimilarWeb เว็บไซต์ที่เป็นตัวเปรียบเทียบเว็บไซต์ของเรากับเว็บไซต์คู่แข่งว่ามีการเข้าถึงได้มากน้อยอย่างไรและนอกจากนี้ถ้าเสียเงินเพื่อเปิดฟี๊ตเจอร์เพิ่มก็จะสามารถดูข้อมูลพฤติกรรมการเข้าเว็บไซต์ของ user เราได้อีกด้วย

 

และนี่ก็คือการบวนการในการทำเว็บไซต์ 1 เว็บไซต์ขึ้นมาซึ่งแน่นอนการสร้างเว็บไซต์นั้นไม่ใช่การทำงานที่ทำรอบเดียวแล้วจบแต่เป็นการทำงานที่ต้องวนไปเรื่อยๆ พูดแบบดูมีความรู้ก็ถ้าเป็นการทำงานแบบเก่าก็คือการทำแบบ Waterfall สายน้ำไม่ไหลย้อนกลับแต่การทำเว็บไซต์ในปัจจุบันควรจะเป็นแบบ Agile Process เพราะเทคโนโลยี การดีไซน์ เทรนด์และพฤติกรรมของผู้บริโภคเปลี่ยนเร็วพอๆกับคนที่ทิ้งเราไป (T^T) เห้ยได้อออ… อย่างที่ว่าทุกอย่างมีการปรับตัวเรียนรู้ ในยุคปัจจุบันความรู้ไม่มีอะไรตายตัว การเรียนรู้ไม่หยุดนิ่ง ก็ใครที่อ่านมาถึงตรงนี้ก็สามารถนำ Process ที่ผมเขียนไปปรับใช้กับตัวเองก็ได้นะครับ 555+

และสุดท้ายจริงๆผมหวังว่าบทความนี้จะได้ประโยชน์กับผู้อ่านทุกๆคนไม่มากก็น้อยได้ร้ัอยก็เอา 555+ รอติดตามผมในบทความหน้า จะเป็นบทความอะไรนั้น กด Follow ไว้เลยน้ะคร้าบ สวัสดี…..

W.Worawut

CMM KMUTT 3rd years

ขอขอบคุณข้อมูลจาก

Leave a Reply

Your email address will not be published. Required fields are marked *