ทบทวน - Suan Sunandha Rajabhat University · 2. กำรออกแบบสำรสนเทศที่จะถ่ำยทอด และกำรท ำอนุกรมวิธำน

ทบทวน

• ผใหก ำเนดเวบ คอ ใคร? • Internet ก ำเนดอยำงไร? ก ำเนดพรอมเวบหรอไม? • Passive White Space (Gutter) คอ อะไร? • Active White Space (Gutter) คอ อะไร? • Grid แปลวำอะไร ตำงจำก Table อยำงไร? • Breakpoint บนหนำเวบไซต คออะไร? มประโยชนตอกำรออกแบบเวบไซต

อยำงไร? • กำรออกแบบเวบไซตทผใชทวไปและผพกำรเขำถงเนอหำได (Web Content

Accessibility Guidelines: WCAG) คออะไร? • มำตรฐำน ISO 9241-210:2010 Ergonomics of Human-System Interaction ;

Part 210: Human-Centred Design for Interactive Systems มประโยชนอยำงไร?

ท ำควำมเขำใจเกยวกบกระบวนกำรพฒนำเวบไซต (Understand the web site development process)

“What are your objectives for building a web site?”

“อะไร คอ วตถประสงคของกำรสรำงเวบไซตของนกศกษำ?”

วงจรชวตของโครงกำร (Project Lifecycle)

วตถประสงคของกำรสรำงเวบไซต ตองมกำรเตรยมกำรหลำยอยำง เชน

• กำรสรำงมมมองใหแกผใชเวบ เชน กำรคดลวงหนำวำผใชเวบไซตจะมมมมองตอเวบไซตเรำอยำงไร?

• กำรเตรยมบรกำรตำงๆ เชน กำรแปลงคำเงน กำรน ำเสนอสนคำและบรกำร

• กำรสรำงแหลงชมชนออนไลนภำยในเวบไซต เชน Web board (กระทออนไลน)

• กำรดงดดผใชใหมและกำรจดกำรกบผใชใหม

• กำรดแลหรอเยยวยำผใชเกำ

ดงนน จงจ ำเปนตองเรยนรขนตอนในกำรวำงแผนงำนเวบไซต เพอทจะพฒนำและออกแบบเวบไซตใหตรงกบเปำประสงคขององคกรหรอผจดท ำเวบนนเอง



วงจรชวตของโครงกำร (Project Lifecycle) 1. กำรศกษำควำมตองกำรและระบขอบเขตของเวบไซต

(Requirements and Specifications) 2. กำรออกแบบสำรสนเทศทจะถำยทอด และกำรท ำอนกรมวธำน (กำรจ ำแนกทเหมำะสม)

(Information Design and Taxonomy Creation) 3. กำรออกแบบกรำฟกและกำรสรำงแบบของเวบไซต

(Graphic Design and Page Template Creation) 4. ลงมอสรำงเวบไซตและลงเนอหำ

(Construction and Content Development) 5. ทดสอบคณภำพของเวบไซตและวดควำมพงพอใจของผใชเบองตนกอนกำรเผยแพรจรง

(Quality Assurance and User Testing) 6. กำรเผยแพรเวบไซตหรอเรยกวำออนไลน

(Publishing and Promotion) 7. กำรบ ำรงรกษำเวบไซตใหสำมำรถท ำงำนไดอยำงถกตองและเหมำะสมตำมสภำวกำรณตอไป

(Ongoing Maintenance)

1.กำรศกษำควำมตองกำรและระบขอบเขตของเวบไซต (Requirements and Specifications)

วงจรชวตของโครงกำร (Project Lifecycle) 1. กำรศกษำควำมตองกำรและระบขอบเขตของเวบไซต

(Requirements and Specifications) เปนขนตอนแรกของวงจรชวตในกำรพฒนำเวบไซต โดยผพฒนำจะตองมกำรเกบควำมตองกำรหรอศกษำผใชเวบไซต และท ำกำรจดบนทก (List of Requirement) เพอน ำไปใชในกำรออกแบบ เชน กำรออกแบบสวนของกำรคนหำ กำรออกแบบเมน กำรออกแบบแทบกำรน ำทำ กำรจดวำงตรำสนคำ กำรจดกำรเนอหำและระบบอนๆ


เครองมอส ำหรบกำรกำรศกษำควำมตองกำรและระบขอบเขตของเวบไซต เชน

แบบสอบถำม (Questionnaire)

แบบส ำรวจ (Survey)

กำรศกษำจำกหนงสอ วทยำนพนธ หรอ แหลงคนควำตำงๆ ทนำเชอถอ (Literature Review)


แบบสอบถำม (Questionnaire) แบบส ำรวจ (Survey) จะมกำรสอบถำมหลำยลกษณะ เชน

ถำมลกคำทจำงออกแบบเวบไซต

ถำมผใชจรง (บคคลทวไป)


2. กำรออกแบบสำรสนเทศทจะถำยทอด และกำรท ำอนกรมวธำน (Information Design and Taxonomy Creation)

ขนตอนนเปนกำรวเครำะหเนอหำเพอน ำทำงใหผออกแบบเวบไซตเขำใจและสำมำรถจดวำงรวมถงกำรก ำหนดจด Breakpoint ตำงๆ บนหนำเวบไดตรงตำมเปำประสงคของกำรพฒนำเวบไซต

นอกจำกน ขนตอนนรวมถงกำรจ ำแนกเนอหำ (Taxonomy) เพอใชในกำรล ำดบขอมลและสำรสนเทศ และกำรจดระดบหนำเวบเพจ

ประโยชนทได เชน กำรออกแบบเมนและกำรน ำทำง กำรจดวำงเนอหำไดเหมำะสม เปนตน


I. กำรออกแบบทเนนปฏสมพนธ(Design for Interaction)

Page designed for scanning Page designed for reading

II. กำรออกแบบทเนนต ำแหนงของเนอหำ (Design for Location)

Paper-based reading pattern Landscape-based viewing pattern F-based viewing pattern User expectations of web page element locations

III. กำรออกแบบทเนนกำรจ ำแนกล ำดบชดเจน (Keep a Flat Hierarchy)

Taxonomy and site map

IV. กำรออกแบบกำรเชอมโยง (Use Hypertext Linking Effectively)

Abundant textual links Vast array of choices

V. กำรออกแบบทเนนกำรน ำเสนอทแตกตำงกน (Reformat Content for Online Presentation)

Content formatted for print Content formatted for the web


I. กำรออกแบบทเนนปฏสมพนธ(Design for Interaction)

Page designed for scanning

Page designed for reading



Paper-based reading pattern Landscape-based viewing pattern



F-based viewing pattern










IV. กำรออกแบบกำรเชอมโยง (Use Hypertext Linking Effectively)

จดเชอมโยงทเปนขอควำมจ ำนวนมำก Abundant textual links

ตวเลอกทเปนจดเชอมโยง ทมลกษณะเปนแถว

Vast array of choices


V. กำรออกแบบทเนนกำรน ำเสนอทแตกตำงกน (Reformat Content for Online Presentation)

Content formatted for print Content formatted for the web

3. กำรออกแบบกรำฟกและกำรสรำงแบบของเวบไซต (Graphic Design and Page Template Creation)

ขนตอนนอยในชวงเวลำเดยวกนกบขนตอนท 2 เนองจำกเปนกำรสรำงแบบของเวบไซตขน (Page Template Creation) เพอเปนตนแบบทจะใชในกำรประชมเพอพจำรณำควำมเหมำะสม

รำงตนแบบน อำจเปน รปจ ำลอง (Mockup) หรอ โครงรำง (Wireframe) กได


รปจ ำลอง (Mockup)


โครงรำง (Wireframe)









INITIAL แปลวำ แรกเรม

4. ลงมอสรำงเวบไซตและลงเนอหำ (Construction and Content Development)

เปนขนตอนทน ำเอำเคำรำงทออกแบบไว มำสรำงจรง โดยจะเปนกำรลงมอปฏบต ซงจะเปนตองใชผทมควำมรควำมสำมำรถในกำรเขยนโปรแกรม เชน

ภำษำHTML

ภำษำJAVASCRIPT

ภำษำPHP

ภำษำASP.NET

สไตลชท (CSS) เปนตน

5. ทดสอบคณภำพของเวบไซตและวดควำมพงพอใจของผใชเบองตนกอนกำรเผยแพรจรง (Quality Assurance and User Testing)

เปนขนตอนทใชในกำรทดสอบคณภำพของเวบไซต โดยมหลกกำรทดสอบ ดงน กำรทดสอบบนเวบเบรำเซอรทหลำกหลำย (various tests for cross-browser) กำรทดสอบบนอปกรณ เชน สมำรทโฟน คอมพวเตอรพซ แทบเบลต (device

compatibility) กำรทดสอบวำผใชสำมำรถเขำถงเวบไซตไดหรอไม เกดปญหำเกยวกบเครอขำย

อนเทอรเนตหรอไม (connectivity at different bandwidths) เชน กำรใช Wifi กำรใช Cellular กำรใชสำย LAN เปนตน

กำรทดสอบกำรเชอมโยงวำสำมำรถเชอมโยงไดถกตองหรอไม กำรทดสอบกำรปอนขอมลและกำรแสดงผลขอมล รวมถงกำรค ำนวนตำงๆ วำม

ควำมถกตองเหมำะสมหรอไม กำรทดสอบควำมเขำใจของผใชจรง เกยวกบ กำรจ ำแนกเมน ควำมสบสนของ

เมน ภำพและขอควำมสอดรบกนหรอไม

6. กำรเผยแพรเวบไซตหรอเรยกวำออนไลน (Publishing and Promotion)

เปนขนตอนในกำรน ำเวบไซตออนไลนจรง โดยในขนตอนนจะตองมกำรเฝำระวงและตดตำมเวบไซตอยำงสม ำเสมอ นอกจำกนจะตองใสใจเกยวกบหวขอดงตอไปน

กำรเลอกใชค ำ ชอ และทอยเวบไซต (Web Site Address: URL)

กำรโฆษณำเวบไซต

กำรลงทะเบยนกบจกกลคนหำ (Search Engine) เพอท ำใหเปนทรจก

กำรกระจำยเวบไซตใหเปนทรจก (distributing press releases)

7. กำรบ ำรงรกษำเวบไซตใหสำมำรถท ำงำนไดอยำงถกตองและเหมำะสมตำมสภำวกำรณตอไป (Ongoing Maintenance)

เปนขนตอนทเฝำระวงและตดตำมเวบไซตใหสำมำรถท ำงำนไดอยำงถกตองและเหมำะสม หำกเวบไซตมขอผดพลำดจะตองท ำกำรแกไข หรอทเรยกวำ กำรบ ำรงรกษำใหเวบไซตท ำงำนไดอยำงมประสทธภำพ

นอกจำกนหำกจะมกำรรอ ปรบปรงใหญ (Reengineering) หรอ มควำมตองกำรทมำกขน (Needs) จะตองเรมวงจรโครงกำรเวบไซตใหม เพอท ำกำรวเครำะหและพฒนำไดอยำงตรงเปำประสงคมำกทสด

7. กำรบ ำรงรกษำเวบไซตใหสำมำรถท ำงำนไดอยำงถกตองและเหมำะสมตำมสภำวกำรณตอไป (Ongoing Maintenance)

รอ ปรบปรงใหญ (Reengineering) หรอ มควำมตองกำรทมำกขน (Needs)

เอกสำรอำงอง References

1. Cailliau, Robert (1995). "A Little History of the World Wide Web". World Wide Web Consortium. Retrieved 5 January 2015. URL: https://www.w3.org/History.html

2. Clark Wimberly. (2015) Reimagining the Web Design Process. Retrieved 1 July 2015. URL: http://sixrevisions.com/web_design/reimagine-web-design-process/

3. Daniel Schwabe, Gustavo Rossi, Luiselena Esmeraldo, Fernando Lyardet. (2001). Web Design Frameworks: An Approach to Improve Reuse in Web Applications Web Engineering: Managing Diversity and Complexity of Web Application Development. Springer Berlin Heidelberg Berlin, Heidelberg 978-3-540-45144-0 335-352 http://link.springer.com/chapter/10.1007%2F3-540-45144-7_32

4. International Organization for Standardization (2010). Ergonomics of human system interaction - Part 210: Human-centered design for interactive systems (formerly known as 13407). ISO9241-210:2010.

5. Palmer, Sean B.; Berners-Lee, Tim (February–March 2001). "Enquire Manual — In HyperText". Retrieved 5 January 2015. URL: https://www.w3.org/People/Berners-Lee/EnquireManual.htm

6. Thomas A. Powell.(2003) Web Design: The Complete Reference. ISBN 0-07-058252-1. McGraw-Hill Publishing Company Limited 914 p.

7. Sareh Aghaei, Mohammad Ali Nematbakhsh and Hadi Khosravi Farsani. (2012) EVOLUTION OF THE WORLD WIDE WEB: FROM WEB 1.0 TO WEB 4.0. International Journal of Web & Semantic Technology (IJWesT) Vol.3, No.1, January 2012 http://airccse.org/journal/ijwest/papers/3112ijwest01.pdf

Web Development Questionnaire

From: [Web Design Business (ABC Web Design)] To: [Company ABC]

Please fill out the provided questionnaire so that we may better understand the type of website that you are looking for.

The more information you are able to provide about your services and the services that your website will offer, the

smoother the development process will be. Please answer all questions as completely as possible then submit the

completed form to us directly.

1. Company Name

2. Contact information for in the event of questions or issues regarding your website.

Name Job Title

Phone Fax Email

Address

3. Name and web address of your company.

4. Is the website intended for business or personal use? Business Personal (Please go to question 7)

5. Does your company operate a brick and mortar location or is it solely on the internet?

Brick and mortar Internet only

6. Does your business have a logo or a motto that you wish to have displayed on the website? Yes No

If yes, please provide the logo and motto as an attachment to this questionnaire.

7. Will you need website content in the form of a blog post? Yes No

8. How often will you post to your blog?

1-3 times per week 3-5 times per week 6+ times per week

9. Will you be posting the blogs or will you hire out your blog post? I will post myself I will hire a writer

10. If you are hiring a writer for blog posts, would you prefer to create a website log-in specifically

for the writer to add posts? Yes No

11. Do you need a storefront or a regular web page of information for your home page?

Storefront Homepage of information

12. Would you like photographs to be placed on your website? Yes No

13. Will you provide the photographs or would you like us to find images?

We provide photographs You provide photographs

14. If you will be providing photographs, please send them to the contact email address that we have provided and we

will be happy to add them to your website.

Online Shopping Questionnaire

[XYZ Survey Company]

Please check all that apply

1. Are you 2. Age group

Male 18 – 30

Female 31 – 39

Prefer not to say 40 – 49

50 or over

3. Marital Status 4. Ages of children living at home

Married No children at home

Single Under 5

Divorced 5 – 12

Separated 13 – 19

Widowed

Living with partner

Other

5. What is your annual income? 6. Where do you mainly utilize the Internet?

Less than $30,000 Home

$30,000 – $50,000 Work

$51,000 – $60,000 School

More than $60,000 Library

Other

7. What is your main reason for using the Internet? 8. What is the average amount spent on monthly online

shopping?

Shopping $0 – $50

Work $51 – $99

Education $100 – $150

Fun Over $150

9. What is your Internet connection like? 10. What kind of connection do you use for the Internet?

Terrible Broadband

Good Dial-up

Very good Other

Exceptional

11. How often do you shop online? 12. Which of these marketing approaches that are

commonly used by websites do you think is best?

Daily Billboards

Weekly Magazines

Monthly Newspapers

Yearly Search engines

Never Other

13. If you have never shopped online, why is that?

14. What is your usual method of payment when shopping

online?

15. What do you think is the most important aspect of an

online shopping site?

PayPal Security

Check Trust

Debit Card Privacy

Credit Card

Money order

16. What method of shopping do you prefer? 17. When you shop online, what do you mostly shop for?

Online Books

Brick and mortar Music

Movies

Electronics

Computers

Musical instruments

Concert tickets

Clothing and accessories

Footwear

Cell phone / accessories

Flowers

Travel (airline tickets, hotels, car rentals)

Other

18. Which of the following websites have you used for online shopping?

Amazon

eBay

Hautelook

Sneakpeeq

Sole Dazzle

Birchbox

Other

I have never used these websites.

19. Below are some statements that have been used to describe how people feel about online shopping. Please indicate

yes or no to reflect how the statement describes you.

Yes No I believe shopping online is a fun way to shop.

Yes No I enjoy the assistance I get at my local stores.

Yes No In my opinion, online shopping is much easier than local store shopping.

Yes No I think local stores have better pricing and sales than online shops.

Yes No I think it is difficult to find what I need when shopping online.

Yes No I don't believe that online stores have everything I need compared to local shopping.

Yes No I believe the hassles of shipping and returns in the world of online shopping are just not worth it.

Yes No I do not like having to provide my credit card number when shopping online.

Online Survey Questionnaire

From: ABC Survey Company To: Applicant

This survey contains general interest questions, and will be used by ABC Survey Company to find more in depth surveys

that will suit your interests.

Personal Information

1. Name

2. Are you at least 18 years of age? Yes No 3. Birthday: Month Day Year

4. Gender Male Female Prefer not to say

5. Race 6. What is your current marital status?

Caucasian Single

African American Married

Native American Divorced

Asian Separated

Hispanic Widowed

Other Living with partner

Prefer not to say Prefer not to say

7. Highest level of education 8. Household yearly gross income

Middle school Less than $20,000

High school $21,000 - $40,000

Some college $41,000 - $60,000

Graduate school Over $60,000

2-year college Prefer not to say

4- year college

Prefer not to say

9. Do you smoke cigarettes Yes No

10. If you answered yes to question 9, how much do you smoke?

A few cigarettes a day

Half of a pack a week

A pack a week

A pack a day

More than a pack a day

11. Do you drink alcohol? Yes No

12. If you answered yes to question 11, how often do you drink alcohol?

Once a day

Two to three times a week

Once a month

Twice a month

Once a year

13. Please check the activities that you have participated in at least once in the past month.

Hiking

Swimming

Hanging out with friends

Working out

Going to the movies

Playing sports

Going to concerts

Going to church

Shopping

Traveling

Playing video games

Other

I certify that the answers provided in this survey are true and accurate. I certify that I have answered these questions to the

best of my abilities and I understand that ABC Survey may use my answers to offer more surveys that I may enjoy. I

agree to allow ABC Survey to send me more in depth surveys. If at any time I choose to no longer participate in these

more in depth surveys, I may opt out at any time by emailing [email protected].

Signature Date

14. Please provide contact information in the event of questions or issues regarding your website

Name Job Title

Phone Fax Email

Address

15. Provide the name and web address of your company

16. Is the website intended for business or personal use? Business Personal (Please move to question 7)

17. Does your company operate a brick and mortar location or is it solely on the internet?

Brick and mortar Internet only

18. Does your business have a logo or a motto that you wish to have displayed on the website? Yes No

If yes, please provide the logo and motto as an attachment to this questionnaire.

19. Will you need website content in the form of a blog post? Yes No

20. How often will you post to your blog?

1-3 times per week 3-5 times per week 6+ times per week

21. Will you be posting the blogs or will you hire out your blog post? I will post myself I will hire a writer

mailto:[email protected]

22. If you are hiring a writer for blog posts, would you prefer to create a website log in specifically

for the writer to add posts? Yes No

23. Do you need a storefront or a regular web page of information for your home page?

Storefront Homepage of information

24. Would you like photographs to be placed on your website? Yes No

25. Will you provide the photographs or would you like us to find images?

We provide photographs You provide photographs

26. If you will be providing photographs, please send them to the contact email address that we have provided and we

will be happy to add them to your web page.

Web Design Client Questionnaire

From: [ABC design company] To: [ABC web design client]

This survey allows us to obtain information that will help build and service your website. Please answer the questions to

the best of your knowledge. If you have any questions or need help with the survey, please contact us and we will guide

you through any of the questions as needed.

1. Company Name

Name of contact person

Phone Fax Email

Address

2. Do you wish to have your contact information listed on

the website?

3. If the answer is yes some of it, please check the

information that you want on your web page.

Yes, all of it Physical address

Yes, some of it Email address

Phone number

Fax number

4. When is the desired date for your website to go live?

5. What is your budget for your website?

6. Please describe your business in detail.

7. What is the intended purpose of your website? Please give as much information as possible.

8. Information on your target audience

Age Range Gender

Income Bracket Needs

9. Do you have current content that you would like placed on your new website? Yes No

10. If yes, please be sure to provide the content to us prior to the development of your website.

11. What would your dream website look like? Please describe in detail.

12. What is the projected outcome for your website (for example, attract 100 new customers per month, sell $10,000 of

merchandise per month, bring 25 new people to your brick and mortar location monthly)?

Web Design Questionnaire

From: [ABC web design company] To: [ABC customer company]

In order to provide you with the website that you are looking for, we need to collect information about your business and

your business's needs. Please answer all the questions as accurately as possible so that we may help you design a website

that you and your customers will look forward to using.

1. Full name of company:

2. Contact Information:

Name Job Title

Phone Fax Email

Address

3. What services and/or products does your business provide?

4. Please provide the full address of your website (for example, http://www.mywebsitename.com)

5. What names do you wish to appear on the website? Please provide accurate spelling and punctuation.

6. Do you already have a business logo? Yes No If so, please provide a copy of it as an attachment.

7. Where would you like the logo to be displayed on your website?

8. What is the purpose of your website? Check all that apply

To sell items To interact with customers

To inform customers about your business Other

9. If other, please explain.

10. Do you have any particular colors that you wish displayed on your web site? If so, which ones?

11. Which pages do you wish included on your website? Please check all that apply.

About Us page Press releases/current events page

Services page Form to submit for services or purchases

Contact Us page Other

Blog for articles

12. If other, please provide the name of the pages and the reason or premise for the pages.

13. Do you want the web page to be designed with search engine optimization in mind? Yes No

14. Do you wish to have links that drop down, or should all links be clickable from the main menu bar of the website?

Drop down Menu bar and clickable

15. Do you wish to include a sitemap? Yes No

16. What is the ultimate goal of your website?

Documents

ทบทวน - Suan Sunandha Rajabhat University · 2. กำรออกแบบสำรสนเทศที่จะถ่ำยทอด และกำรท ำอนุกรมวิธำน