การออกแบบเว็ปไซต์� อย่�างมี�ประสิ�ทธิ�ภาพ

ด้�ว็ย่การจั�ด้ว็าง เพ !อสิ !อสิารอย่�างกระจ่�างชั�ด้

การสิ !อสิารท�!ชั�ด้เจันในการออกแบบเว็บ

• เป%นองค์�ประกอบสิ'าค์�ญของเว็บท�!จัะประสิบค์ว็ามีสิ'าเรจั

• สิ !อสิาร ต์�ด้ต์�อ แจั�งให้�ทราบถึ,ง สิ�!งท�!อย่ากจัะบอกให้�ก�บ User ให้�เข�าใจัต์รงก�น

• อ'านว็ย่ค์ว็ามีสิะด้ว็กในการใชั�งาน

Website Methods of Communication

วิธี�การสื่ �อสื่าร สื่�าหร�บการพั�ฒนาเวิ�บ

1

11. . ข�อค์ว็ามี

12. . ร-ปภาพห้น�าเว็บไซต์� Andrew Gransde มี�พ .นท�!ห้น�าจัอสิ�ว็นให้ญ� เห้น อห้น�าโฮมีเพจัน�.มี�การสิ1�มีภาพในห้น�าโห้ลด้ .ใชั�ภาพการสิ !อสิารแทนท�!จัะอาศั�ย่ห้ล�กในข�อค์ว็ามีเพ !อด้,งด้-ด้ว็�าท�!ล-กค์�า.

13. . Titles and Headers ชั !อและห้�ว็เร !อง (ท'าให้�ทราบได้�อย่�างรว็ด้เรว็ เห้มี อนข�าว็พาด้ห้�ว็ นสิพ.)

14. . icon

15. . Design Styles (ท'าให้�ทราบว็�าเว็บน�. เป%นเว็บเก�!ย่ว็ก�บอะไร)

Craig Wickersham Inc.

16. . Color (ใชั�จั�ต์ว็�ทย่าเก�!ย่ว็ก�บสิ� เข�ามีาเล�น)

17. . Audio and Video ภาพและเสิ�ย่ง (ผู้-�ใชั�อ�นเทอร�เนต์อย่-�ในการเชั !อมีต์�อค์ว็ามีเรว็สิ-ง )

Challenges of Creating a Website with Clear Communication

ควิามท้�าท้ายของ Web designer ในการสื่ �อสื่ารให�ชั�ดเจ่นการสื่ �อสื่าร

2

2. ควิามท้�าท้ายของ Web designer ในการสื่ �อสื่ารให�ชั�ดเจ่น

21. . เน .อห้าท�!มีากเก�นไป (ค์ว็รค์ว็บค์1มีให้�ไมี�เย่อะจันเก�นไปต์�อ 1 ห้น�า ไมี�ให้�สิ�บสินก'ากว็มี)

2.2. ค์ว็ามีแต์กต์�างของ User

2.3. ค์ว็ามีชั�ด้เจัน จัะต์�องเป%นว็�ต์ถึ1ประสิงค์�ท�!ชั�ด้เจัน และเป%นค์ว็ามีสิ'าค์�ญของเว็บไซต์�

ท�!ให้� User เข�าใจั

Macalicious

2.4. สิ�.นและกระชั�บ ห้น,!งในเห้ต์1ผู้ล taglines จัะมี�ประสิ�ทธิ�ภาพค์ อสิ�!งท�!พว็กเขา

สิามีารถึสิ !อสิารสิ�!งท�!สิ'าค์�ญเก�!ย่ว็ก�บเว็บไซต์�ในระย่ะเว็ลาสิ�.น

Shuteye

2.5. มี�บ1ค์ล�กภาพ (เห้มี อนก�บ ค์นค์1ย่ก�บค์น)

26. . ไมี�เอาชันะการสิ !อสิารก�บการออกแบบ การ Design ห้น�าเว็บไมี�ค์ว็รแย่�งก�นเด้�นมีากกว็�าเน .อห้า สิาระสิ'าค์�ญ ท�!ต์�องการให้� User ทราบ

Pixelhaven’

2.7. สิร�างค์ว็ามีน�าเชั !อถึ อ ไว็�ใจัให้�ก�บ User

28. . ร�กษาค์ว็ามีน�าสินใจั ค์ว็รชั�ด้เจันและกระชั�บสิ !อสิารให้�ผู้-�เข�าชัมีก�อนท�!จัะได้�ร�บสิ�บสินห้ร อ

เบ !อก�บเว็บไซต์� . แล�ว็จั,งไปเข�าเว็บอ !นแทน

What Should Be Communicated

สื่�งท้��ควิรม�สื่�งท้��ควิรบอก

3

3. สื่�งท้��ควิรม� สื่�งท้��ควิรบอก

3.1. ว็�ต์ถึ1ประสิงค์�ของเว็บ ว็�าค์ ออะไร เขาค์ว็รจัะสิามีารถึต์รว็จัสิอบว็�าเป%นสิ�!งท�!พว็กเขาสินใจั

32. . สิ�!งท�!มี�ให้� ค์ อ อะไร ค์ว็รสิ !อสิารให้�ชั�ด้เจันก�บ บร�การท�!มี�ให้�สิ'าห้ร�บ User ว็�าเค์�าได้�อะไร

บ�าง มี�อะไรให้�เล�น

33. . User ได้�ประโย่ชัน� อย่�างไร บอกถึ,งเห้ต์1ผู้ลท�!ด้� ห้ร อขอเปร�ย่บเท�ย่บ ชั�ว็ย่เพ�!มีแรงจั-งใจั

3.4. User สิามีารถึท'าอะไรได้�บ�าง ต์�องด้'าเน�นการอย่�างไร ต์�องสิมี�ค์รสิมีาชั�กก�อนไห้มี จัะเล อกท'าอะไร

Only Human

Tips for Effective Communication

เคล็�ดล็�บในการสื่ �อสื่าร สื่�าหร�บพั�ฒนาเวิ�บ

4

4.1. จั�ด้ล'าด้�บค์ว็ามีสิ'าค์�ญ ว็�าค์ ออะไรขาค์ว็รจัะสิามีารถึต์รว็จัสิอบว็�าเป%นสิ�!งท�!พว็กเขาสินใจั

42. . บอกสิ�!งท�!ค์ว็รทราบ ให้�ก�บ User

Checkout

4.3. เร�ย่บง�าย่ สิบาย่ๆ ใชั�ค์'าเร�ย่บง�าย่ เด้�นๆ กระชั�บ ไมี�รกจันเก�นไป

Umbrella Today?

4.4. พ�จัารณา User ว็�าเป%นก1ล�มีไห้นค์ว็รจัะได้�ร�บการออกแบบและพ�ฒนาเพ !อให้�สิามีารถึสิ !อสิารเฉพาะก�บผู้-�เย่�!ย่มีชัมีเห้ล�าน�..

FreeAgent

4.5. แน�ใจัว็�า User ได้�ร�บข�อค์ว็ามีท�!สิ'าค์�ญสิ1ด้ใชั�ข�อควิามใหญ่� ข�อควิามสื่�ห้ร ออ !นๆเทค์น�ค์การออกแบบเพ !อให้�โด้ด้เด้�นเป%นข�อค์ว็ามีท�!ว็ไป.

Treemo Labs

4.6. สิไต์ล�ข�อค์ว็ามี

Auditude.

4.6. Use Headers and Sub-Headersระบ1จั1ด้เย่�!ย่มีชัมีท�!สิ'าค์�ญ ก�บสิ�ว็นห้�ว็ห้ล�ก และห้�ว็ย่�อย่ เพ !อเป%นโค์รงสิร�างของเน .อห้า ให้� User สิามีารถึสิร1ปห้ล�กข�อค์ว็ามีเน .อห้าได้�

4.7. แสิด้งข�อมี-ลท�!จั'าเป%น ต์�ด้ข�อค์ว็ามีท�!ไมี�จั'าเป%นออก แต์�จัะต์�องมี�ห้น�าแสิด้งราย่ละเอ�ย่ด้เพ�!มีเต์�มี เป%นท�!รว็มีไว็�อ�กท�!

Goals for Communication When Developing a Website

เป้&าหมายการสื่ �อสื่าร สื่�าหร�บการพั�ฒนาเวิ�บ

5

5.1. เพ !อค์ว็ามีชั�ด้เจัน

52. . เพ !อสิ !อสิารเพ !อสิ�งเสิร�มีก�นและก�น

LongTermClients

5.3. การสิ !อสิารเพ !อต์อบสินองกล1�มีเป:าห้มีาย่ การใชั�ค์'าเพ !อให้�สิอด้ค์ล�องเข�าใจัง�าย่ ก�บ User ในแต์�ละกล1�มีเป:าห้มีาย่ ท'าให้�มี�ประสิ�ทธิ�ภาพเพ�!มีมีากข,.น

Last.fm

5.4. เพ !อสิ !อสิารระบบ Navigation สิามีารถึชั�ว็ย่ปร�บปร1งการสิ !อสิารโด้ย่ท'าให้�ชั�ด้เจันต์�อ User เพ !อท�!พว็กเขาจัะได้�ไปพบสิ�!งท�!พว็กเขาก'าล�งมีองห้า .

Blue print

Results of Good Communication

ผล็ล็�พัธี(ของการสื่ �อสื่ารท้��ด�

6

6.1. User เข�าใจัว็�ต์ถึ1ประสิงค์�ของเว็บไซต์�

6.2. สิร�าง Brand ให้�เป%นท�!จัด้จั'าได้�ง�าย่

63. . ลด้อ�ต์ราต์�กล�บ Reduced Bounce Ratesลด้ User เข�าและออกจัากเว็บไซต์�อย่�างรว็ด้เรว็

64. . User มี�ท�ศันค์ต์�ท�!ด้�ต์�อเว็ป

65. . ลด้ป;ญห้า ท�!ต์�องต์อบโด้ย่ไมี�จั'าเป%น

66. . บรรล1เป:าห้มีาย่ของเว็ปสิ�งเสิร�มีการใชั�งาน สิ�งเสิร�มีการขาย่ ให้�เพ�!มีข,.น

Thanks.Clear And Effective Communication In Web Design