Webmonster Lab สอนทำเว็บไซต์ WordPress SEO เพื่อธุรกิจยุคใหม่ - LogoWebmonster Lab สอนทำเว็บไซต์ WordPress SEO เพื่อธุรกิจยุคใหม่ - LogoWebmonster Lab สอนทำเว็บไซต์ WordPress SEO เพื่อธุรกิจยุคใหม่ - LogoWebmonster Lab สอนทำเว็บไซต์ WordPress SEO เพื่อธุรกิจยุคใหม่ - Logo
  • บทความ/ฮาวทู
    • Videos – How to
    • WordPress
    • Design
    • Marketing
    • Tips & Trick
    • Free Tools
    • Inspiration
  • คอร์สเรียน
  • เกี่ยวกับ
    • Portfolios
    • ประวัติการทำงาน
    • ติดต่อ
  • Follow me
    • Facebook
    • YouTube
✕

การออกแบบเว็บไซต์ “ที่ดี” ไม่ใช่ “แค่มี”

Published by Yui Kanchita
Categories
  • Marketing
Tags
  • Branding
  • design
  • Digital Marketing
  • UX/UI
  • website
การออกแบบเว็บไซต์ที่ดี ไม่ใช่แค่มี
  • Facebook iconFacebook
  • Twitter iconTwitter
  • LINE iconLine

“เว็บไซต์” เป็นเครื่องมือการตลาดออนไลน์ที่ยั่งยืน

และมีประสิทธิผลสูงมาก โดยตัวเราเป็นเจ้าของ 100% ซึ่งส่วนใหญ่เว็บไซต์มักจะถูกพูดถึงในทาง “ดีไซน์สวยงาม และการทำอันดับใน Google”

ความจริงแล้ว …

สิ่งที่นำเสนอในการออกแบบเว็บไซต์ที่มีประสิทธิภาพ เป็นงานที่ซับซ้อนกว่าคำว่า “การออกแบบเว็บไซต์”

web-design-strategy-wireframe

กระบวนการสร้างเว็บไซต์ที่ดี

เป็นกลยุทธ์ที่เริ่มต้นจาก “มุมมองของธุรกิจ” ท้าทายด้วยการเขียนคำโฆษณา การปรับแต่งรูปภาพ การจัดวางองค์ประกอบทางศิลป์ การศึกษาพฤติกรรมผู้ใช้งานเว็บไซต์ ทั้งหมดนี้ผ่าน การคิดเชิงออกแบบ (Design Thinking) อย่างลึกซึ้งในหลากหลายมิติ

เพื่อการสร้างสรรค์ทั้ง “ภาพลักษณ์และความรู้สึก”

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

web-design-strategy-human-centered-design

การทำเว็บไซต์แบบ “แค่ให้มี”

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

web-design-strategy-good-vs-badขอบคุณรูปภาพ blog.xola.com

หากคุณลองจินตนาการตาม หรือ คุณอาจจะเคยเห็นเว็บไซต์ประเภทนี้อยู่บ้างแล้ว เช่น

  • ข้อความในเว็บไซต์ อ่านแล้วงงๆ เหมือนไม่ได้ถูกเขียนมาเพื่อให้ “คน” อ่าน (เหมือนสแปมมากว่า)
  • ใช้รูปภาพคุณภาพต่ำ และผิดสัดส่วน เบี้ยวไป เบี้ยวมา
  • สีสันของเว็บ ฉูดฉาดแสบตา (ไม่ได้ทดสอบ Color Contrast ให้อยู่ในช่วงที่มนุษย์อ่านแล้วสบายตา)
  • ใช้จำนวนสีมากเกินไป ข้อความ 7 บรรทัด จัดไปเลย 7 สี อะไรแบบนี้
  • ตัวหนังสือจำนวนมาก และสิ่งอันที่อัดแน่น โดยไม่มีการจัดวางองค์ประกอบเว็บไซต์อย่างเหมาะสม
  • ไม่มีข้อความโฆษณา กระตุ้นให้คนอยากซื้อสินค้า หรือปุ่มติดต่อกลับ (Call-to-Action)
  • ไม่มีพระเอก เพื่อนพระเอก ตัวประกอบ (โดดเด่นเน้นทุกอย่าง ก็จะแย่งซีนกันเอง กลายเป็นไม่มีอะไรเด่น)
  • ภาพรวมเว็บไซต์ไม่สามารถทำให้มั่นใจได้ว่า “ธุรกิจหรือร้านค้านี้ เชื่อถือได้ ไว้ใจได้”

ในทางกลับกัน …

การทำเว็บไซต์แบบมีกลยุทธ์ ออกแบบอย่างดี

ไม่ใช่เพียงแค่ดึงดูดลูกค้าได้ แต่จะดึงดูดบริษัทคู่ค้า partner, supplier และคนทำงานเก่งๆ โดยเฉพาะคนรุ่นใหม่ก็อยากร่วมงานกับบริษัทที่มีภาพลักษณ์ดี ที่ช่วยส่งเสริมโอกาสให้กับพวกเค้าได้

เคยคุยเล่นๆ กับนักศึกษาที่ยุ้ยสอนวิชา Branding ค่ะว่า มีความคิดเห็นหรือรู้สึกยังไงระหว่าง

“เว็บไซต์ที่ดูตั้งใจทำ กับ เว็บไซต์ที่ดูแค่ให้มี”

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

เฉียบเนอะ : )

และนี่คือสิ่งยุ้ยอยากแนะนำสำหรับเว็บไซต์ของคุณค่ะ

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

เช่น การวางรูปภาพ สลับกับข้อความ
ก็เพื่อให้มีจุดพักสายตา ใช้รูปภาพช่วยในการอธิบาย และรูปภาพเรียกร้องความสนใจได้ดีกว่าตัวอักษร … ฉะนั้น เราก็อย่าหยุดสวยค่ะ!

เช่น การใช้สีพื้นหลัง สีเทาจางๆ (จะเรียกสีขาวเข้มๆ ก็ได้นะ กันเอง)
ก็เพื่อให้ข้อความและรูปภาพโดดเด่นขึ้นมา และดูละมุนสายตาขึ้นด้วย

web-design-strategy-bad-good-webmonsterlab

Tips

  • ปกติคนเราทำความเข้าใจกับรูปภาพได้ดีกว่าตัวอักษร
  • และเราก็ไม่ชอบอ่านข้อความยาวๆ พิมพ์ติดๆ กันทั้งหน้า
  • ข้อความจำนวนมาก ให้จัดกลุ่มข้อความ แล้วแบ่งย่อหน้า + ใส่หัวข้อของย่อหน้า
  • เพราะพฤติกรรมของ user จะอ่านแบบพรีวิว สแกนเร็วๆ ไม่ได้อ่านทุกตัวอักษร
  • เมื่อเค้าเจอจุดที่สนใจ จึงจะไปโฟกัสส่วนนั้น “หัวข้อ (heading)” จึงสำคัญ แบบว่า “ต้องถึงกับหยุดดู”
  • หรือใส่ bullet point ก็จะทำให้อ่านสบายตาขึ้นค่ะ
  • ตอนที่เราออกแบบ ให้เราคิดตามไปด้วยว่า …
    “จะทำยังไงนะ ให้ user สะดวกสบายที่สุดในการใช้งานเว็บไซต์ และรู้สึกดีกับแบรนด์ของเรา”

ทั้งหมดนี้อาจจะดูเหมือนเยอะสิ่ง มันเป็นรายละเอียดเล็กๆ น้อยๆ ที่เกิดขึ้นจากการเรียนรู้ การฝึกฝน ผ่านประสบการณ์ลงมือทำ พอเราทำจนชำนาญ อะไรพวกนี้เราจะคิดและออกแบบได้ auto เลย

สำหรับมือใหม่ ไม่เป็นไร ค่อยๆ เรียนรู้ไปทีละเรื่อง นอกจาก UX/UI แล้ว … ถ้าให้พี่ยุ้ยแนะนำตอนนี้ อยากให้พวกเราลองศึกษาเกี่ยวกับ Design Thinking และ Service Design นะคะ สนุกค่ะ 2 ตัวนี้ที่จริงแทบจะเป็นเรื่องเดียวกัน หากเราเข้าใจ จะช่วยให้เราตั้งทรงได้เร็วขึ้นเยอะเลยล่ะ


บทความ : Webmonster Lab | Yui Kanchita
Featured Image: unsplash.com

  • Facebook iconFacebook
  • Twitter iconTwitter
  • LINE iconLine
Yui Kanchita
Yui Kanchita
เรียนจบนิเทศ + MBA รักการออกแบบเว็บไซต์ ux/ui ก็เลยเทรนตัวเองเพื่อทำเป็นอาชีพมาตลอด 20 ปี และยังคงทำต่อไปจ้า : ) About me

Related posts

Customer Journey – Touchpoint ลูกค้าอยู่ตรงไหน
September 12, 2022

Customer Journey – Touchpoint ลูกค้าอยู่ตรงไหน?


Read more
เริ่มต้นธุรกิจด้วย Design Thinking แบบที่ Startup ใช้
September 11, 2022

เริ่มต้นธุรกิจด้วย Design Thinking แบบที่ Startup ใช้


Read more
content-is-king-bill-gates
April 6, 2015

“Content is King” นี่จริงไหมนะ


Read more

ค้นหาบทความ

✕
Ads banner - คอร์สเรียน สร้างเว็บไซต์ธุรกิจด้วย WordPress สำหรับมือใหม่

Webmonster Lab

บล็อกฮาวทู แชร์ความรู้การออกแบบ
เว็บไซต์ สำหรับมือใหม่!
วิธีทำเว็บไซต์ธุรกิจ แบบไม่เขียนโค้ด
WordPress, Elementor, UX/UI
ยุ้ย กัญญ์ชิตา
Web Design Expert

บทความล่าสุด

  • free-background-generator-gradients-color
    ฟรี! background พื้นหลังเท่ๆ gradients สวยๆ
    August 24, 2023
  • สอนวิธีใช้ WordPress Elementor ออกแบบ Features รูปตรงกลาง - ตัวฟรี
    [วิดีโอ] วิธีใช้ Elementor ตัวฟรี ออกแบบ Features แบบมีรูปตรงกลาง
    July 28, 2023
  • การออกแบบเว็บไซต์ที่ดี ไม่ใช่แค่มี
    การออกแบบเว็บไซต์ “ที่ดี” ไม่ใช่ “แค่มี”
    July 1, 2023
  • ลงคอร์สเรียนมาเยอะ ทำไม ทำไม่ได้สักที
    ลงคอร์สเรียนมาเยอะ ทำไม “ทำไม่ได้สักที”
    June 24, 2023
  • วิดีโอ สอนวิธีใช้ Elementor ตัวฟรี ออกแบบเว็บไซต์ได้อิสระ
    [วิดีโอ] วิธีใช้ Elementor ตัวฟรี ออกแบบเว็บไซต์ได้อิสระ
    June 24, 2023

บทความแนะนำ

  • ทำไมธุรกิจจำเป็นต้องมี Website ในเมื่อใช้ Social ฟรีๆ ได้นี่นะ
    ทำไมธุรกิจจำเป็นต้องมี Website ในเมื่อใช้ Social ฟรีๆ ได้นี่นะ
    January 13, 2020
  • วิธีการติดตั้ง WordPress บน localhost (XAMPP)
    วิธีการติดตั้ง WordPress บน localhost (XAMPP) สอนละเอียดยิบ
    June 27, 2014
  • wordpress-updates
    คุณก็อัพเดท WordPress ได้ด้วยตัวเอง
    April 2, 2014

Tags

add-ons Branding browser code color content CSS design Digital Marketing elementor font Google How To HTML image install WordPress life localhost MS-Office plugins SEO social theme tool tools twitter update UX/UI Webmaster website wireframe WooCommerce WordPress work-life xampp การตลาด ของฟรี ความรู้ คอร์สเรียน ทำเองได้ ธุรกิจ พัฒนาตนเอง รูปภาพ แก้ปัญหา

© Webmonster Lab. All rights reserved.
บทความในบล็อกนี้ ยุ้ยเขียนและจัดทำขึ้นเองทั้งหมดค่ะ อนุญาตให้เผยแพร่เนื้อหาบทความและนำไฟล์ที่แจกไปใช้ได้ฟรี เพื่อการแบ่งปันสิ่งดีๆ :)
โดยขอให้คุณอ้างอิงแหล่งที่มา
link กลับมาหน้าเว็บที่นำไปใช้ด้วยทุกครั้งนะคะ
❤︎
พี่ยุ้ย กัญญ์ชิตา

093-649-5544


ห้องเรียนคอร์สตัวต่อตัว อยู่ที่แอมพาร์ค จุฬา
รับสอนเพียงเดือนละ 4 คิว

ข้อตกลงการใช้งานเว็บไซต์ | นโยบายข้อมูลส่วนบุคคล
ตั้งค่าคุกกี้

© 2023 Webmonster Lab. All Rights Reserved.
Created with ❤︎ Kanchita Varitthinanon
การยอมรับคุกกี้
เว็บไซต์นี้ใช้ระบบคุกกี้เพื่อให้คุณได้รับประสบการณ์ที่เกี่ยวข้องกับคุณ คุณสามารถเลือกให้ความยินยอมทั้งหมดหรือเฉพาะบางส่วนได้โดยเข้าไปที่ "Cookie Settings"
ตั้งค่าคุกกี้ ปฏิเสธ ยอมรับทั้งหมด
Manage consent

Privacy Overview

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

Necessary cookies are absolutely essential for the website to function properly. These cookies ensure basic functionalities and security features of the website, anonymously.
CookieDurationDescription
cookielawinfo-checkbox-analytics11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".
cookielawinfo-checkbox-functional11 monthsThe cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".
cookielawinfo-checkbox-necessary11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".
cookielawinfo-checkbox-others11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.
cookielawinfo-checkbox-performance11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".
viewed_cookie_policy11 monthsThe cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.
คุกกี้ที่ใช้งานฟังก์ชัน
คุกกี้ที่ใช้งานได้ช่วยดำเนินการฟังก์ชันบางอย่าง เช่น การแบ่งปันเนื้อหาของเว็บไซต์บนแพลตฟอร์มโซเชียลมีเดีย รวบรวมคำติชม และคุณสมบัติอื่นๆ ของบุคคลที่สาม

Functional cookies help to perform certain functionalities like sharing the content of the website on social media platforms, collect feedbacks, and other third-party features.
คุกกี้เพื่อประสิทธิภาพ
คุกกี้เพื่อประสิทธิภาพ ใช้เพื่อทำความเข้าใจและวิเคราะห์ดัชนีประสิทธิภาพหลักของเว็บไซต์ซึ่งช่วยในการมอบประสบการณ์ผู้ใช้ที่ดีขึ้นสำหรับผู้เยี่ยมชม

Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.
คุกกี้เพื่อการวิเคราะห์
คุกกี้เพื่อการวิเคราะห์ ใช้เพื่อทำความเข้าใจว่าผู้เยี่ยมชมโต้ตอบกับเว็บไซต์อย่างไร คุกกี้เหล่านี้ช่วยให้ข้อมูลเกี่ยวกับตัวชี้วัดจำนวนผู้เข้าชม อัตราตีกลับ แหล่งที่มาของการเข้าชม ฯลฯ

Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics the number of visitors, bounce rate, traffic source, etc.
คุกกี้เพื่อการโฆษณา
คุกกี้เพื่อการโฆษณา ใช้เพื่อจัดเตรียมโฆษณาและแคมเปญการตลาดที่เกี่ยวข้องให้แก่ผู้เยี่ยมชม คุกกี้เหล่านี้ติดตามผู้เยี่ยมชมเว็บไซต์และรวบรวมข้อมูลเพื่อจัดหาโฆษณาที่ปรับแต่งเอง

Advertisement cookies are used to provide visitors with relevant ads and marketing campaigns. These cookies track visitors across websites and collect information to provide customized ads.
คุกกี้ที่ไม่ได้จัดประเภทอื่นๆ
คุกกี้ที่ไม่ได้จัดประเภทอื่นๆ คือคุกกี้ที่กำลังวิเคราะห์และยังไม่ได้จัดประเภทเป็นหมวดหมู่

Other uncategorized cookies are those that are being analyzed and have not been classified into a category as yet.
SAVE & ACCEPT