bls.buu.ac.thbls.buu.ac.th/~athitha/321480/gui_ok/thai/%c3%c7%c1.doc · web viewหน าต...

GUI Design Essentials Internet and Intranet -1

Interaction

ปฏสมพนธ(Interaction)ปฏสมพนธหมายถงการสอสารของผใชกบคอมพวเตอร ผใชและ

คอมพวเตอร สอสารโดยใชตวควบคมตางๆ การเลอกใชตวควบคมไมไดเปน


เพยงเรองของสตร การเลอกใชตวควบคมทเหมาะสมหมายถง ผออกแบบจำาเปนตองเขาใจถงมาตรฐานอตสาหกรรม, มาตรฐานของบรษท และความตองการของผใชงาน

ปมคำ�สง(Command Buttons)ปมคำาสงเปนขนตอนหลกทผใชจะดำาเนนการในกลองโตตอบ(dialog

boxes) ปมคำาสงทำาใหผใชสามารถดำาเนนการทสำาคญกบกลองรายการ ผใชควรจะสามารถเหนกลองโตตอบ(dialog boxes) และรวาควรตองทำาอะไรและจะตองทำาอะไรในขนตอนตอไป ตามชอและตำาแหนงของปมคำาสง

ใชปมคำ�สง สำ�หรบก�รใชง�นทบอยหรอก�รใชง�นทสำ�คญ ใชปมคำาสงทผใชจะดำาเนนการบอยหรอสำาคญ (ดรป 9.1) ปมคำาสงทำาหนาทเตอนวา ผใชสามารถทำาไดและควรจะทำาอะไรตอไป ปมคำาสงจะมไดสงสดไมเกนหกปมบนหนาตาง (Window) คำาสงการทำางานของปมยงสามารถแสดงเปนรายการเมน ถาไมไดใชงานบอยและไมคอยสำาคญ ใหจดวางไวในรปแบบเมนแบบเลอนลง (drop-down menu)

รปท 9.1 ปมคำาสงสำาหรบการใชงานทบอยครงหรอการใชงานทสำาคญ


ละเอยดถถวนกบป�ยชอปม ใหแนใจวาปายชอทคณใชบนปมคำาสงมความชดเจนและรดกม ตวอยางเชนใชตงคาพมพ ปายชอทใชกบคำาหลายๆคำา เมอพวกเขาตองการการสอความหมายของปมทถกตองชดเจน เชนใชพมพการสงซอประจำาวน , ไมประจำาวน จะอยางไรกตามตองรดกมและละเวนคำาทไมจำาเปน ปฏบตตามกฎการใชอกษรตวพมพใหญ --- ใชตวอกษรตวพพมใหญเปนอกษรตวแรกของคำาหลกทงหมด

คว�มสมำ�เสมอของป�ยชอปม(Label buttons) เลอกปายชอเฉพาะสำาหรบการทำางานบางอยาง และใชปายขอความเหลานตลอด และจากการใชงานอน เชน ใชในการแสดงตารางทตองเลอกบอยๆ และบางครงใชในการคนหา

ม�ตรฐ�นอตส�หกรรมทใชสำ�หรบป�ยชอ (Labels)บางปายชอมเปนมาตรฐานในสวนตดตอผใชแบบกราฟก หากมการ

ดำาเนนการตามตารางควรใชปายชอมาตรฐานเหลาน ตารางท 9.1

ปายแสดง

การดำาเนนการ มคาเทากบ

สรางการเปลยนและปดหนาตาง ปม Enterไมตองการเปลยนและปดหนาตาง ปม Escapeปดหนาตางเมอไมสามารถเปลยนหรอยกเลก

C

รเซทเพอกลบสคาเรมตน Rทำาใหเกดการเปลยนแปลง แตยงไมปดหนาตาง

A

เปดสวนชวยเหลอออนไลน Hต�ร�ง 9.1 ปายมาตรฐานสำาหรบการดำาเนนการทใชบอย


ก�รพจ�รณ�แทนทปม OK กบคำ�เฉพ�ะ หากปมคำาสง OK แสดงผลลพธในหนาทเฉพาะ เชน การพมพหรอการลบ ควรพจารณาใชคำาเฉพาะแทน ปมคำาสง OK ดงแสดงในรป 9.2

รปท 9.2 ใช Print แทน OK

ขน�ดปมสมพนธกน ถาความยาวของขอความสำาหรบชดของปมคำาสงในกลองโตตอบใกล

เคยงกน , ใหทำาปมทงหมดใน กลองโตตอบ มขนาดเทากบปมทขนาดใหญสด ดงแสดงในรป 9.3

รปท 9.3 ปมทมความยาวใกลเคยงกบขอความ เปนปมทมขนาดใหญสด

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


แสดงในรปท 9.4 น ชวยใหคณไดขนาดปมทคณตองการ หลกเลยงการใชปมทมขนาดตางกนมากเกนไป ไมควรใชปมเกนสองขนาดทแตกตางกนในกลองโตตอบ

รปท 9.4 การสงซอประจำาวน มขนาดยาวกวาขอความอนๆในอกสองปม ควรใชปมขนาดแตกตางกน

แยกปมจ�กสวนทเหลอของกลองโตตอบ(Dialog box) จดวางปมใหมระยะหางจากกลองโตตอบ ดงแสดงในรปท 9.5 ไมควรจดวางปมควบคม ชดกบกลองโตตอบมากเกนไป ดงแสดงในรปท 9.6

รปท 9.5 มชองวางเพอใชในการกำาหนดปมเพอปดกลองโตตอบ

รปท 9.6 ไมควรมปมควบคมตดกบกลองโตตอบ


กลมปมทอยรวมกนถาคณมปมมากกวาสามปม ใชพนทวางสำาหรบ กลมของปมทอยรวมกน

(ดรป 9.7) แตละกลม เพอระบ- ปมสวนของการทำางานทคลายกน- ปมออกจากหนาตาง (OK, Cancel)- ดำาเนนการทำาลาย (Delete)

รปท 9.7 ปมกบการทำางานทคลายกน จดกลมโดยใชพนทวาง

ตำ�แหนงปม สำาหรบการจดวางปม ควรใชหนงในตำาแหนงเหลาน

- ดานขวาบนของหนาตาง (รป9.8, 9.9, 9.10, และ 9.11)- ดานขวาลางของหนาตางสำาหรบ Windows 95 (รป 9.12)- ตรงกลางดานลาง สำาหรบ Windows 3.1 และ Motif (รป

9.13และ9.14)- ดานลางซาย สำาหรบ OS/2 (รป 9.15)

ไมควรวางปมตำาแหนงดานลาง และ ดานขวาในหนาตางเดยวกน


รปท 9.8 Windows 95 ปมคำาสงดานขวาบน

รปท 9.9 Windows 3.1 ปมคำาสงดานขวาบน

รปท 9.10 OS/2 ปมคำาสงดานขวาบน


รปท 9.11 Motif ปมคำาสงดานขวาบน

รปท 9.12 Windows 95 ปมคำาสงดานลางขวา


รปท 9.13 Windows 3.1 ปมคำาสงดานลางตรงกลาง

รปท 9.14 Motif ปมคำาสงดานลางตรงกลาง

รปท 9.15 OS / 2 ปมคำาสงดานลางซาย

ตรงกบตำ�แหนงปมใชง�นของหน�ต�ง


เลอกไดทงแนวตงหรอแนวนอนสำาหรบหนาตางทออกแบบเฉพาะและตำาแหนงปมใหตรงกบการออกแบบ การออกแบบแนวนอนควรจะมปมทมมขวาบนดงแสดงในรปท 9.16 ออกแบบตามแนวตงควรมปมดานลางดงแสดงในรปท 9.17

รปท 9.16 การวางปมคำาสงในตำาแหนงแนวนอนปมสำาหรบ Windows 95

รปท 9.17 การวางปมคำาสงในคำาสงตำาแหนงแนวตงปมสำาหรบ Windows 95


รปแบบการจดกลมขอมลในหนาตางบทบาทในการกำาหนดทออกแบบใหใช ความยาวและจำานวนของปมนยงมปจจยอน ถาคณมชอปมทยาวหรอมาก ปมคำาสงอาจตองการใชการออกแบบในแนวนอนมปมคำาสงดานขวาบน เราสามารถตดสนใจเหลานในหนาตางโดยหนาตางหรอกลองโดยกลองพนฐาน หนาตางลายไหลไมจำาเปนตองเหมอนกนในหนาตางทงหมดหรอกลอง

ก�รจำ�กดก�รว�งตำ�แหนงปมคำ�สงทจำ�เปนถาเกยวของกบปมคำาสงเพยงสวนหนงของกลองโตตอบทปมทมความ

จำาเปน 9.18 รปทปมในกลองทจะใช

รปท 9.18 ปมคนหาอยในกลองกลมทมการใชปมสงซออยางสมำาเสมอเมอทำาไดปมอยในลำาดบตอไปน

1. ปมยนยนเพอออกจากหนาตาง (OK)2. การดำาเนนการยกเลกออกจากหนาตาง (ยกเลก)3. ปมไมซำากนสำาหรบหนาตาง

เพอจะเหมอนกนสำาหรบตำาแหนงดานลางหรอดานขวาบน (ดรปท 9.19)


รปท 9.19 ปมยนยน (OK) เปนปมแรก แลวตามดวยปมยกเลกการกระทำา (ยกเลก) และปมทไมซำากนสำาหรบในหนาตางน (Orders ปจจบน)

ใชเครองหม�ยจด (... ) เพอแสดงว�เปนสงจำ�เปนถามรายละเอยดหรอชอปมทยาวมาก จะตองเครองหมายจด (... ) หลง

ชอปม (ดรป 9.20)

รปท 9.20 แสดงกลองโตตอบเมอผใชเลอกรายละเอยดจงจะแสดงเครองหมายจดหลงชอปม

สเท�บงบอกถงปมทใชง�นไมไดการใชสเทาเพอแสดงใหเหนวามการกระทำาทผใชสามารถใชเพอทำาใหปม

ใชได หากในความเปนจรงมการกระทำาทผใชสามารถเปลยนสถานะของปม (ปมจะไมใชงาน) ไมรวมปม

รปท 9.21 การคนหาสามารถใชได


รปท 9.22 การคนหาไมได

กำ�หนดปมเรมตนทำ�ล�ยเลอกปมบนหนาตางเปนคาเรมตน หากผใชกดปม Enter, ปมทเรยก

ทำาใหการพบมากทสดหรอสำาคญในหนาตางเรมตนทเชนพมพทพมพ

กำ�หนดค�ปมทง�นปกต ทไมส�ม�รถทำ�ล�ยได การเลอกปมหนงปมบนหนาจอใหเปนคาเรมตน ถาผใช Enter บนคยบอรด ปมนนกจะถกเรยกใช โดยพบมากทสดหรอเปนสวนทสำาคญทสดและตงใหเปนปมคาเรมตน (Default) เชน การสงพมพในปมพมพบนหนาจอ

ปมตวเลอก ปมตวเลอก เราจะรจกกนในชอปม Radio button ใชสำาหรบเปลยนขอมลการดำาเนนการหลายรายการ สลบไปสลบมา

ปมตวเลอกนเลอกไดเพยง 1 ท�งเลอก ใชปมตวเลอก เมอผใชเลอกคำาสงเพยงหนงทางเลอกจากรายการตวเลอก เชน ใหเลอกชวงเวลาทมกจะใชในการจายเงน

ป�ยอธบ�ยปมท�งเลอก ระบปายใหชดเจนและแสดงคำาอธบายแตละปม เชน การสงรายละเอยดหลกสตร มากกวาหลกสตรเฉยๆ เพราะเพมรายละเอยด

กลมปมตวเลอกและป�ยอธบ�ย การจดปมตวเลอกเขาในกลมเดยวกน โดยใชกรอบในการแสดงกลมและใชปายคำาอธบายสำาหรบแสดงรายละเอยด (ดรป 9.23)


รปท 9.23 กลมปมตวเลอกและคำาอธบายจดปมตวเลอกในแนวตง จดปมตวเลอกในแนวตง (รป 9.24) ถาคณมพนทงานมากกวาในแนวนอน (รปท 9.25) เพอใหงายตอการใช

.รปท 9.24 จดรปปมตวเลอกในแนวตง

รปท 9.25 ไมจดปมตวเลอกในแนวนอน

จำ�กด ปมตวเลอกจำ�นวนหกปมหรอนอยกว�นน จำากด ปมตวเลอกจำานวนหกปมหรอนอยกวานน หากคณมทางเลอกมากขน ลองใชรายการกลองแทน (List Boxes) และจะขอกลาวในบทตอไปในบทน

วธก�รทำ� CHECK BOXESเปนการตดสนใจในการจดเรยงปมทตองการ - โดยความบอย ตวเลอกทใชบอยมกจะอยบนสด–- โดนลำาดบขน เปนการเรยงลำาดบขนตอนการทำางาน อนอนควรทำา–

กอน อนไหนทำาหลง- โดยตรรกะ ถามคำาสงตรรกะ เชน รายการ วนท–


- โดยเรยงตวอกษร- เรยงลำาดบตามตวอกษรเปนหลก โดยใชคำาอธบายใหเขากบ Check box นน

หลกเลยงก�รทำ� 2 ปมตวเลอก หากผใชจำาเปนตองมตวเลอก เชน ใช / ไมใช หรอ เปด / ปด ควรเลอกใชปมเงอนไข (Check Box) ในการทำาแทน (ภาพท 9.26) มากกวาปมตวเลอก (Option Buttons) (รปท 9.27) แตจำาเปนตองใชปมตวเลอกสำาหรบขอความทแตกตางกนกน เชนเพศชาย / หญง

รปท 9.26 ใชกลองกาเครองหมายสำาหรบตวเลอก yes / no

รปท 9.27 อยาใชสองปมตวเลอกสำาหรบเลอก yes / no

ปมเงอนไข (Check Boxes) ปมเงอนไข (Check Boxes) จะสามารถเลอกไดในชองวางและเปนวธทรวดเรวในการทำาตวเลอกหลายตวเลอก

ปมเงอนไข (Check boxes) ใชเลอกตวเลอกไดม�กกว� 1 ตวเลอก ปมเงอนไข (Check boxes) สามารถใชในการเลอกตวเลอก 1 ตวเลอกหรอมากวา 1 ตวเลอก

ปมเงอนไข (Check boxes) สำ�หรบท�งเลอกใชปมเงอนไข (Check boxes) เมอ ผใชเลอกใชคณสมบตเปดหรอ

ปด ดงในรปท 9.28 มนเหมาะสำาหรบ 1 เงอนไข

รปท 9.28 ใชชอง Check box สำาหรบเลอกคณสมบตเปดหรอปด


คำ�บรรย�ยสำ�หรบชอง Check Boxes ระบคำาบรรยายใหชดเจนเพอผใชจะไดเขาใจในแตละชอง Check box ตวอยาง เชน การปรน แบบกลบดานและไมกลบดาน

ก�รจดกลมและคำ�อธบ�ย Check Box รวม Check box ทมคำาสงเหมอนกนไวในกลมเดยวกน โดยการใชกรอบในการแบงกลม และมคำาธบายดวยวากลมนนกลมอะไร (ดตวเลข 9.29 ถง 9.32)

รปท 9.29 Check box ของ Windows 95

รปท 9.30 Check box ของ Windows 3.1

รปท 9.31 Check box ของ OS / 2


รปท 9.32 ลายของ Check boxes

จด Check boxes ใหอยในแนวตง จด Check boxes ในแนวตง (รป 9.33) เหมาะมากกวา แนวนอน (รปท 9.34) เพอใหงายตอการใชงาน

รปท 9.33 จด Check boxes ในแนวตง

รปท 9.34 ไมควรจด Check boxes ในแนวนอน

จำ�กดจำ�นวน Check boxes ประม�ณ 10 ท�งเลอก หรอ นอยกว� จำานวนทเหมาะสมสำาหรบการทำา Check boxes ควรมจำานวน 10 ทางเลอก หรอนอยกวา ถาหากคณมทางเลอกมากวากวานน ควรใช List box ในการทำา Check boxes

วธก�รทำ� CHECK BOXESเปนการตดสนใจในการจดเรยงปมทตองการ - โดยความบอย ตวเลอกทใชบอยมกจะอยบนสด–- โดนลำาดบขน เปนการเรยงลำาดบขนตอนการทำางาน อนอนควรทำา–

กอน อนไหนทำาหลง


- โดยตรรกะ ถามคำาสงตรรกะ เชน รายการ วนท–- โดยเรยงตวอกษร - เรยงลำาดบตามตวอกษรเปนหลก โดยใชคำาอธบาย

ใหเขากบ Check box นน

ไมควรใช ตวเลอกทงหมด (Select All) หรอ ก�รยกเลก (Deselect All) ตวเลอกทงหมด ใน Check Boxes หากคณคาดวาผใชตองการเลอกชดของ Check boxes หรอเลอก Check boxes ทงหมด ควรใชตวเลอกแบบ list box ในการเลอกทงหมด หรอ ยกเลกเลอกทงหมด (รป 9.35) แทน Checkbox (รป 9.36) ตวหลายตวเลอกแบบ List Boxes จะอธบายในหวขอถดไป

รปท 9.35 การเลอกตวเลอกหลายตวเลอก (List boxes) ในการเลอกทงหมด และยกเลกทงหมด

รปท 9.36 อยาใชตวเลอกทงหมดและยกเลก ใน Check Boxes

กลองขอคว�ม กลองขอความชองหลกสำาหรบผใชกรอกขอมล

ใชกรอบในก�รเพมขอมล ใชกลองขอความ (Text box) กบขอบเพอแสดงวาผใชสามารถปอนหรอแกไขขอมลดงแสดงใน รปท 9.37


รปท 9.37 ใสเสนขอบรอบชองวาง

แสดงขอมลบนหน�จอโดยไมมกลอง สำาหรบขอมลทมการแสดงผลเทานนและไมสามารถเปลยนแปลงหรอเพมเตม จะทำาโดยการไมตองแสดงกรอบในขอมลนน (ดรป 9.38)

รปท 9.37 ไมใสกรอบรอบขอมล

รปท 9.38 ไมใสเสนขอบลอมรอบขอมล แสดงผลเฉพาะขอมลเอยางเดยวเทานน

พนทสเท� ใชเพอก�รปองกนก�รใชชวคร�วถากลองขอความนนถกปองกนชวคราวดวยพนทสเทา ซงกลอง

ขอความทมสเทาปายขอความนน อยมความหมายวาไมสามารถจะเปลยนแปลงขอมล แกไข หรอ ปอนขอมลนนไดในขณะน รปท 9.39 แสดงใหเหนฟลดนนสามารถทจะแกไขเปลยนแปลงขอมลนนได รปท 9.40 ฟลดนนไมสามารถแกไขหรอเปลยนแปลงได

รปท 9.39 ขอมลสามารถแกไขเปลยนแปลงได

รปท 9.40 ขอมลไมสามารถแกไขเปลยนแปลงไดชวคราว นอกจากสเทาทปายขอมลนนหายไป

ขน�ดคว�มย�วของกลองขอคว�ม ใชบอกใหทร�บถงคว�มย�วของขอมลโดยประม�ณ


ขนาดของกลองขอความใชบอกถงความยาวโดยประมาณของขอมลทอยในฟลดนน ดงแสดงในรปท 9.41. ถาคณมกลองขอความทมความยาวใกลเคยงกน สามารถทำาใหมความยาวเดยวกนได ถาตองการแสดงขนาดจรงของขอมล ซงความยาวของขอมลอาจแตกตางกน, การใชกลองขอความทมความยาวใกลเคยงกนเพอเปนการลดขอบเขตการแสดงขอมลบนหนาจอภาพ (ดงรปท 9.42).

รปท 9.41 ความยาวของแตละกลองขอความใชเพอแสดงใหเหนถงขนาดจรงของขอมล

รปท 9.42 กลองขอความทมขนาดเดยวกน ถงแมวาขนาดของฟลดขอมลจะแตกตางกน

ก�รจดกลองขอคว�มการจดชดซายของกลองขอความทแสดงบนหนาจอ เปนการลดจำานวน

ความตางของขอบเขต(ดงรปท 9.43) ถากลองขอความทมความยาวตางกน ความตางของขอบเขตกลองขอความ ใชเพอเปนการจำากดจำานวนของขอบเขตทงสองใหไมซำากน


รปท 9.43 กลองขอความทมการจดชดซาย

กลมของกลองขอคว�มถาคณมกลองขอความทเกยวของกบขอมลทคลายกน, ใหรวมกลม

เหลานนไปดวยกรอบ และ ปายทงกลม

ป�ยของกลองขอคว�ม ทงหมดการกำาหนดปายชอของกลองขอความทกกลอง. เปนการหลกเลยงคำา

ยอหรอตวอกษรยอ นอกจากวาคณจะมความมนใจวาผใชทกคนจะเขาใจสงเหลานน.ซงสามารถถกใชใหพมพคำาไดหลายคำาในกลอง โดยจดใหมตวอกษรตวใหญเปนตวแรกเขยนเปนตวอกษรใหญของคาเรมตนของปายชอ

ก�รว�งป�ยชอชดซ�ยการวางปายชอสำาหรบกลองขอความ ทอยทางดานซายของกลอง.หลก

เลยงการวางปายชอดานบนของกลองขอความ

ก�รจดว�งป�ยชอของกลองขอคว�มใหอยท�งด�นซ�ยการจดวางปายชอของกลองขอความทางดานซาย (ดงรปท 9.44) การ

จดวางปายชอของกลองขอความทางดานขวามอนนไมสามารถทำาได.ซงหากวางทางขวามอแลว จะทำาใหปายชอของกลองขอความทางดานซายมอเกดความไมเปนระเบยบ, ซงจะทำาใหยากในการดและตรวจสอบ (ดงรปท 9.45)


รปท 9.44 จดปายชอใหชดซายมอ.

รปท 9.45 ไมไดจดปายชอใหชดซายมอทงหมด ทำาใหดไมเปนระเบยบ.

ก�รจดว�งเครองหม�ยจดมหพภ�คกอนจะมก�รจดว�งป�ยชอในการใชเครองหมายมหพภาค หลงปายชอกลองขอความ โดยท

สงเกตไดจากปายชอและ ขอมลนนจะอยตดกน

รปท 9.46 การใชเครองหมายมหพภาค กอนกลองขอความ . โดยทเราไมสามารถใชเครองหมายมหพภาค กอนการจดกลมปายชอได.

กลองร�ยก�ร


กลองรายการ (List Boxes) คอ ทางเลอกหนงทมการแสดงขอมลใหเลอกไดหลายทางเลอก (ดดงรปท 9.47 จนกระทงถง รปท 9.50) ซงสงเหลานนเปนทางเลอกทางเลอกหนง เพอทจะปอนขอมลและทำาใหขอมลเหลานนมความถกตองและสมบรณ

ก�รใชกลองร�ยก�ร (List boxes) สำ�หรบร�ยก�รทมขน�ดย�วการใชกลองรายการจะเนนทปมตวเลอก ถาคณมตวเลอกหลายตว

สามารถใชกลองรายการกลองเดยว เพอใชในการเลอกรายการ

ก�รใชกลองร�ยก�รสำ�หรบขอมลแบบไดน�มกหากขอมลมโอกาสทจะเปลยนแปลง, มการใชชองรายการมากกวาปม

ตวเลอก, ซงจะงายกวามากทจะเปลยนแปลงตวเลอกทปรากฏอยในชองกลองรายการ

แสดง 3-8 ร�ยก�รในเวล�เดยวกนสามารถแสดงอยางนอยได 3 รายการ , แตไมสามารถแสดงไดเกน 8

รายการ ในชองรายการในเวลาเดยวกนได. หากคณมรายการมากกวานนสามารถใช แถบเลอน เพอเลอนดรายการเหลานนได. สามารถดชองแบบรายการเลอนลงได ตอไปในบทน

รปท 9.47 ชองรายการแบบเลอนของ ระบบปฏบตการ Window 95


รปท 9.48 ชองรายการของ ระบบปฏบตการ Window 3.1

รปท 9.49 ชองรายการ ระบบปฏบตการ OS/2

รปท 9.50 ชองรายการ แบบ Motif

ป�ยชอแตละชองร�ยก�รการเลอกปายชอสำาหรบชองรายการ สามารถอธบายขอมลสงนนทอย

ภายในกลอง, ตวอยางเชน เครองพมพ มการวางปายชอๆไวทางดานบนของรายการ, จดดานซาย, และตามมาดวยเครองหมายมหพภาค

ก�รใชตวหรองขอมลสำ�หรบร�ยก�รทมขน�ดใหญ


ถาหากคณมรายการมากกวา 40 ขอมลในชองรายการ, มทางเลอกสำาหรบผใชรายการ โดยใชตวกรองขอมลสำาหรบรายการโดยทำาใหชองรายการแคบลงเพอลดจำานวนตวเลอก, ตวอยางเชนในรปท 9.5

รปท 9.51 ใชสำาหรบรายการทมขนาดยาวมาก

ใช กลองร�ยก�รแบบ Drop-down เพอเปนก�รประหยดพนทชองแบบเลอนลง แบบ drop-down ชวยใหคณประหยดพนทของ

หนาตาง การใชชองรายการแบบ drop-down ผใชสวนใหญจะเลอกรายการแรก รายการทอยในกลอง จะซอน ผใชจะตองผานขนตอนเพมเตมเพอไปดสวนทเหลอของรายการ จะไมใช ชองรายการแบบ drop-down เพอสามารถดตวเลอกทงหมดไดตลอดเวลา

ใช Combination list box เพอใหผใชส�ม�รถพมพไดCombination list box ชวยใหผใชสามารถเลอกไดจากรายการน

combination list box ใชเมอผใชสวนใหญทราบสงทพวกเขาตองการและตองการเพยงแคพมพเขา combination list box มประโยชนเมอรายการนนมขนาดยาวและผใชสามารถขามการไลรายการลงสจดตำาในชอง


ขอความ โดยการพมพมากกวาหนงตวอกษร ไมใหผใชสามารถเพมรายการในรายการโดยใช combination list box

กลองเลอกหล�ยร�ยก�รการเลอกหลายรายการในกลองรายการ เปนทางเลอกเพอใหทราบวาม

การใหเลอกหลากหลาย แตจะยากสำาหรบผใช คณอาจตองแกปญหาการใชงานไดโดยทำาตามคำาแนะนำาดานลาง

ใช Multiple selection list box แทนก�ร check boxesพจารณาใช Multiple selection list box แทนการ check

boxes ถาคณมตวเลอกมากวาสบรายการหรอรายการของคณมโอกาสทจะเปลยนแปลงตลอดเวลา

คำ�แนะนำ�ก�รเลอกใชง�น กลองร�ยก�รหล�ยชอง (List boxes)ผใชจำานวนมากไมคนเคยกบการใชงาน List boxes ผใชไมอาจรวา

สามารถเลอกไดมากกวาหนงรายการหรออาจไมทราบวธการเลอกใชงาน ควรมการสอนหรอแจงใหผใชทราบวาเขาสามารถเลอกใชงานไดมากกวาหนงรายการ (ดงรป 9.52) คำาแนะนำาเปนสงสำาคญโดยเฉพาะอยางยงเมอหนาตางประกอบดวยการเลอกรายการเลอกไดหนงเดยว และเลอกๆไดหลายรายการ

รปท 9.52 คำาแนะนำารวมอยในประเภทเดยวกน

พจ�รณ�ก�รใชง�น Summary box


ถาผใชเลอนกลองเลอกรายการไดหลายกลอง และแสดงผลสงทผใชเลอกไดอยางรวดเรว (ดงรป 9.53) วธน ผใชไมตองเลอนขนลงเพอดรายการทผใชไดเลอก

รปท 9.53 การเลอกใชงาน Summary box เพอแสดงสงทผใชไดเลอกไว

พจ�รณ�ก�รเลอกใช Checklistsแสดงการใชงานอกวธหนงคอผใชสามารถเลอกรายการตรวจสอบ

(Checklist) ไดหลายรายการ รวมถงการเลอกกลองรายการหลายกลอง โดยตรวจสอบวาผใชสามารถเลอกได

พจ�รณ�ก�รเลอกใชง�นทงหมด หรอปม (Buttons) ยกเลกก�ร เลอกทงหมด

หากคณกำาหนดตวเลอกและคาดวาผใชจะเลอกรายการทงหมด หรอยกเลกรายการทงหมดออก ควรคำานงถงการเลอกใชกลองรายการ (List box) ทงหมด และยกเลกปม (Buttons) รายการทเลอกทงหมด มากกวาการเลอกกลองเครองหมาย (Check boxes)

ต�ร�งและกรดตารางและกรดผใชสามารถปอนหรอดจำานวนขอมลไดในแตละครง


ก�รใชต�ร�งเปรยบเทยบระหว�งขอมลแสดงการใชตารางหากผใชตองการเปรยบเทยบขอมลสองหรอสามและ

พวกเขาไมสามารถคากการลวงหนาไป (ดงรป 9.54)

รปท 9.54 การใชตารางการเปรยบเทยบขอมล

ก�รใชกรดปอนขอมลหล�ย ๆ ขอมลการใชกรดผใชสามารถปอนขอมลไดหลายครง

อธบ�ยคอลมน (Label columns)เลอก Label แสดงขอมลจากคอลมนไดถกตอง

คว�มจำ�เปนก�รใชแถวต�ร�ง ถาในแถวมขอมลทแตกตางกน ใน Label แตละแถว

ก�รปรบ Labels ท�งซ�ยการปรบคอลมนและแถวทางซาย ไมใชเครองหมายหลง Label

Spin BoxesSpin Boxes ยอมใหผใชสามารถปอนขอมล

ใช Spin boxes จำ�กดก�รหมนรอบใช Spin boxes เพอหมนเวยนทางเลอกเมอมรายการเลอกนอยกวา

สบรายการ ดงแสดงในรป 9.55 และสามารถคาดเดาได

รปท 9.55 Spin box.

จดกลม Spin boxes ดวยกลองขอคว�ม


ถาคณใช Spin boxes นกถงการรวมกนของกลองขอความเพอใหผใชสามารถพมพคาทตองการนอกจากการหมนรอบทางเลอก

ก�รเลอน (Sliders)Sliders เปนวธทมประสทธภาพสำาหรบผใชอยางรวดเรวปรบคาทไมจำาเปนไดอยางแนนอน

ก�รใช Sliders สำ�หรบก�รเลอกค�อย�งเหนเดนชดพจารณาการควบคม Slider เพมขนหรอการลดคาลง การใชงานจะม

ประสทธภาพโดยเฉพาะอยางยงหากคณแสดงผล (ดงรป 9.56 ถง 9.59)

รปท 9.57 หนาตาง 3.1 การเลอน (Sliders)

รปท 9.58 การเลอน OS/2

รปท 9.59 การเลอน Motif


ก�รใช Sliders สำ�หรบชวงขอมลขน�ดใหญไมสามารถเลอกใชงานกบขอมลทนอยกวาสบ สำาหรบชวงขอมลทม

ขนาดเลกการควบคมจะแตกตางกน เชน การปอนขอมลใน Spin box หรอ Text box. Spin box และ Text box ไดอธบายกอนหนานและในบทน

ก�รแสดงผล (Display results)แสดงคาขอมลในการแสดงถงการเลอนตำาแหนง

ก�รปอนขอมลหากผใชทราบคาทแนนอน ใหปอนคาไดโดยไมตองเลอนแถบเลอน

ก�รใชง�นลกศรเพมขนทละนอย ใชปลายลกศรเลอนขนเมอผใชปรบคาทใกลเคยงกบขอมลทตองการ

มมมองตนไม (Tree Views)Tree Views แสดงความสมพนธระหวางรายการในรายการ

ใชมมมองตนไม (Tree views) เมอตองก�รลำ�ดบคว�มสำ�คญTree views แสดงลำาดบชนความสมพนธระหวางองค

ประกอบ (ดงรป 9.60) ซงจะเปนประโยชนเมอผใชตองเลอกจากรายการและตำาแหนงของรายการขนอยกบลำาดบชน เชน ระบบในแฟม หรอ ไดเรกทอร Tree views มประโยชนเมอความสมพนธของรายการในลำาดบชนชวยใหผใชหารายการทเขากำาลงมองหาได ผใชสามารถ ขยาย และยบ แกไขจำานวนรายละเอยดในขณะคนหาได


รปท 9.60 แสดงลำาดบชนมมมองตนไม (Tree views)

ก�รใชมมมองตนไม (Tree views) ขนสง สำ�หรบผใชผใชหลายคนไมคนเคยกบการใช tree views เนองจากเปนการใชงาน

แบบใหม และไมไดใชทกทกบการเขยนโปรแกรม การใช tree view ไมไดยากสำาหรบผใช หากแตพวกเขาไมเขาใจความสมพนธระหวางรายการและไมเขาใจถงการใชงานเพมหรอลด

ไมใชมมมองตน (Tree views) แทนเมน, หน�หลก, หรอเปดแผน Tree views ไมควรใชแทนระบบเมน หนาหลกหรอเปดแผน มประโยชนในการคนหาและการควบคมในการเลอกเทานน


Presentation

ง�นนำ�เสนอ หมายถง วธการนำาเสนอขอมลจะปรากฏบนหนาจอและหนาตาง โดยพจารณาสงทผใชตองการจะทำากบขอมล ผใชไมจำาเปนตองเปรยบเทยบบตขอมล ผใชไมจำาเปนตองเลอกตามเกณฑ การแสดงขอมลทเหมาะสมสามารถสรางความแตกตางทสำาคญในการทผใชจะเหนถงประโยชน ของพนทรวมของสองสง


รปแบบหน�จอ หนาจอหลก องคประกอบทสำาคญมอยกบเราเปนเวลาหลายป แทนทมนจะลาสมย แตกลบกลายเปนองคประกอบภาพทสำาคญมากขน ควรปฏบตตามพนฐานของรปแบบหนาจอทดในการออกแบบของคณผใชอาจตดสนใจวาโปรแกรมทงหมดไมดได หากวาหนาจอมขนาดใหญ รกและยากทจะปฏบตตาม

หน�ต�งและกลองโตตอบเพอใหสอดคลองกบกระบวนก�รทำ�ง�น หนาตางการทำางานของคณจะมมากนอย ขนอยวามนทำางานอยางไรบาง และลำาดบการทำางานควรจะตรงกบการใชงานทกำาลงทำา

ใชขอมลในปรม�ณทเหม�ะสม แตละหนาตางหรอกลองโตตอบจะแสดงหนงงานหรอ subtask ในการทำางานของผใช หากงานมความซบซอนจะใชมากกวาหนงหนาตางสำาหรบแตละ subtask

ห�หน�แรก หนาแรกเปนหนาจอทผเรยกหนาตางใชเพอกลบมาอกครงในขณะททำางาน การตดสนใจในหนาตางทจะเปนฐานของผใช หนาแรกอาจจะมหนาจอของขอมลรายชอ โดยไมจำาเปนตองมองเหนเมอปอนโปรแกรมหรอเมอเปนงานเฉพาะ ผใชสามารถกลบไปยงชดของการเลอกกอนหนาหรอกลบไปยงหนาแรกได


รปท 10.2 ไมใชฟอรมทมชอเปนหนาแรก

รปท 10.3 รายการทสามารถเปนหนาแรก


รปท 10.4 ฟอรมพรอมทจะกรอกไดหนาแรก

ขอมลก�รจดระเบยบภ�ยในหน�ต�งขอมลควรอยในหนาตางหรอกลองโตตอบเพอใหการทำางานของผใช

คลองตวขอมลทพบมากทสดหรอขอมลทสำาคญควรวางไวทดานบนซายของหนาตางจากนนจะยายจากบนลงลางหรอซายไปขวาจะเลอกตามแนวนอนหรอตามแนวตงกทำาไดขนอยกบตดสนใจวาคณจะใชการไหลตามแนวนอนหรอแนวตงสำาหรบแตละหนาตางหรอกลองโตตอบโดยไมใชทกหนาตางหรอกลองโตตอบจะเลอกใชแบบเดยวกนตองมการหมนเวยนและตดสนใจเลอก โดยจะตองไมเลอกทงแนวนอนและแนวตงบนหนาตางหรอกลองโตตอบเดยวกน

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


รปท 10.5 Windows 95 การ ไหลตามแนวนอน

การไหลในแนวตงจะเรมในดานบนซายและยายลง ดงแสดงในรปท 10.6 และ 10.7 ขอมลทพบมากทสดหรอขอมลทสำาคญ จะปรากฏในคอลมนซาย ขอมลทวไปหรอทมความสำาคญนอยจะปรากฏในคอลมนทสอง ปมควบคมหนาตางหรอกลองโตตอบเปนศนยกลางดานลาง ใชชองวางระหวางคอลมนเพอแสดงการไหลตามแนวตง

รปท 10.6 Windows 95 การไหลตามแนวตง


รปท 10.7 Windows 3.1 การไหลตามแนวตง

กลมขอมลทคล�ยกน กลมขอมลทคลายกน (ดรป 10.8) กรอบและการใชชองวางเพอแสดงการจดกลม ของกลม Label

รปท 10.8 การจดกลมขอมลเดยวกน

ลดชองว�งใหเหลอนอยทสดจดแถวองคประกอบขอมลและกลมขอมลเพอลดชองวางบนหนาจอ


ตวอกษรการตดตอกบผใชงาน ตวอกษรบนหนาเปนสวนหนงททำาใหผใชงาน

เลอกทจะใชงานใชตวอกษรแบบไมมเชง (Sans Serif font)

ใชตวอกษรแบบไมมเชง (serif sans font) เปนตวอกษรทมรปแบบทเรยบงาย ดเปนทางการ ไมมเชง หมายถงไมมเสนยนออกมาจากฐานและปลายของตวอกษรในทางราบ ดรปท 10.9 ตวอกษรแบบไมมเชง (Sans serif font) แบบ Times New Roman เปนตวอกษรทงายในการอาน ดรปท 10.10 เปนตวอยางของตวอกษรแบบมเชง (serif font) เปนตวอกษรทมเสนยนของฐานและปลายของตวอกษรในทางราบ และตวอกษรแบบ Arial เปนตวอยางของตวอกษรแบบไมมเชง (sans serif font)

รปท 10.9 ใชตวอกษรแบบไมมเชง (serif sans font)


รปท 10.10 อยาใช ตวอกษรแบบมเชง (serif font)ไมใชตวเอยงหรอขดเสนใต

ตวเอยงและขดเสนใตจะทำาใหยากทจะอานขอความบนหนาจอ

หลกเลยงก�รใชอกษรสตวอกษรสดำาบนพนสขาวเปนตวอกษรทอานงายทสด ถาใชตวอกษรทม

สอนๆ จะทำาใหอานยากกวาตวอกษรสดำา แตถาใชตวอกษรทมสควรเปนตวหนาเพอใหงายตอการอาน

ใชตวหน�เพอก�รเนนใชเปนตวหนาเพอเนนขอความเนอหาบางอยาง ไมใชสสำาหรบเนน

เนองจากผใชมกจะคดวาสเปนขอความทมจดประสงคทแตกตางกนหรอเฉพาะ เชน ปายชอหรอไฮเปอรลงค

หลกเลยงก�รใชตวอกษรทมขน�ดแตกต�งกนหลกเลยงการใชขนาดตวอกษรทแตกตางกน จะทำาใหเสยสมาธในการ

อาน ดงในรปท 10.11


รปท 10.11 อยาใชตวอกษรทมขนาดแตกตางกนมากเกนไป

ใชขน�ดตวอกษรอย�งนอย 8 พอยตหลายคนมปญหาในการมองเหนตวอกษรทมขนาดนอยกวา 8 พอยต

ตวอกษรขนาด 8 พอยตแบบไมมเชง (sans serif font) เปนขนตำาทำาใหมความสวยบนหนาจอสมมตวาผใชนงดทระยะหางปกต เปรยบเทยบทงสามขนาดตวอกษรทใชในตวเลข ดงรปท 10.12,10.13 และรปท 10.14

รปท 10.12 ตวอกษรขนาด 8 พอยตแบบไมมเชง (sans serif font)


รปท 10.13 ตวอกษรขนาด 10 พอยตแบบไมมเชง (sans serif font)

รปท 10.14 ไมใช ตวอกษรขนาด 12 พอยตแบบไมมเชง (sans serif font)

ลดจำ�นวนของแบบอกษรทแตกต�งกนควรจะจำากดจำานวนประเภทตวอกษร และลองใช Font หลายๆ รปแบบ

รปท 10.15 จะแสดงใหเหนวาเกดอะไรขนเมอคณใชรปแบบตวอกษรมากเกนไป


รปท 10.15 ไมควรใช font หลายๆแบบ

ก�รเลอกสและก�รผสมสขณะนคณมความสามารถในการใชสในการเชอมตอของคณ บอย แต

การตดสนใจใชสสลอใจผใชจะดมากกวาการเพมการใชงานใหมากขน

ใชสใหเกดคว�มสนใจ การใสอะไรสทแตกตางกนในหนาจอจะเพมความหนาใสใจ การใชสเมอเปนสงทผใชจะมความสนใจหนาจอของเรามากกวาเดม

สใชเพอวตถประสงค สเปนเทคนคทไดรบความสนใจและมประสทธภาพในการมองเหน จะชวยใหเพมหรอลดความนาสนใจ ไมใชเพยงความสวยงามเทานน บางครงเวลาทคณใชสควรจะมเหตผลในการใชเพอความนาสนใจมากขน

ก�รรวมสดวยก�รเนนส คณไมสามารถใหผใชตระหนกถงการรบรส โดยเฉพาะคนพการทางสายตาหรอผทตาบอดส รถงสนนได ดงนนคณควรรวมสโดยการเนนส ตวอยางเชนทำาใหสวนหนงของหนาจอเปนสนำาเงนและกลอง


ต�บอดส เกาเปอรเซนตของผชายและรอยละสองของผหญงมรปแบบของตาบอดสหรอสบสนสบางส ไมสามารถจำาสเดยวไดระวงก�รปรบแตงส ผคนบอยครงจะเปลยนสของตวเอง ไมไดหมายถงสวนของหนาจอ โดยสเฉพาะ เชน"ปอนขอมลทจำาเปนลงในชองสเขยว คณไมสามารถตรวจสอบวากลองจะเปนสเขยว

สทใชอย�งสมำ�เสมอ ตดสนใจในความหมายเฉพาะของส และใชสนนและการเนนสใหเกดความสมำาเสมอ

สใชง�นในแถบเครองมอเท�ทจำ�เปน เนองจ�กขน�ดทเลกมกใชสในแถบเครองมอบอย มกจะแยกจ�กก�รใชง�น ก�รใชสในง�นกร�ฟกจะใชแถบเครองมอเฉพ�ะเพอแยกลกษณะบ�งอย�งของบ�รกร�ฟก (แตกต�งกนในไอคอนกร�ฟแทง) หรอเพอสร�งคว�มหม�ยโดยเฉพ�ะ (สแดงในเครองหม�ยหยด)

ยดคว�มหม�ยของสต�มวฒนธรรมตระหนกถงความหมายของสตามวฒนธรรมสำาหรบผใชบางรายของ

คณ ในประเทศสหรฐอเมรกาเชน สบางสวนมความหมายโดยเฉพาะดงแสดงในตารางท 10.1


ส คว�มหม�ยแดง อนตราย การหยด ความ

รอน และการสญเสยการเงน

เหลอ

คำาเตอนตางๆ

เขยน

ไป หรอ ตกลง

นำาเงน

ความหนาวเหนบ

ดำา กำาไรทางการเงนต�ร�งท 10.1 ส และความหมายของสในประเทศสหรฐอเมรกา

ไมละเมดความหมายเหลาน และใหแนใจวาคณยดตามความหมายใด ๆ ของผใชของคณ ตระหนกถงความสมพนธของสระหวางประเทศ จากวฒนธรรมหนงไปวฒนธรรมหนง

ใชหน�หลกควรใชพนหลงทสว�ง สทดทสดทจะใชสำาหรบหนาจอและพนหลงหนาตาง คอสขาวและสเทา ถาคณตองการใชสอนนอกจากนใหใชสเหลองออนหรอฟาออน

หลกเลยงก�รผสมสแดงและสนำ�เงน การผสมสแดงและนำาเงนเขาดวยกน ทงเปนพนหลงฉากหนา หรอในพนททตดกน จะทำาใหยากมากในการอาน การรวมกนของสแดงและสฟาควรหลกเลยง


หลกเลยงตวอกษรสนำ�เงน แสดงการวจยลาสดแสดงวาขอความสนำาเงนยากทจะอาน ใชขอความสดำาบนหนาจอทสวาง

ใชคมชดพอ เลอกสสำาหรบพนหลงและดานหนา ทมความคมชดพอระหวางกนของคณ เชนไมใชพนหลงสฟา และมขอความสฟากลาง

หลกเลยงขอคว�มทสว�งในทมด หลกเลยงการใชตวอกษรสออนบนพนหลงสดำา ชดนดเหมอนจะเบลอ จะดกวาการใชพนหลงสออนกบ หนาจอมด เชนใชพนหลงสเทาออนมและขอความสดำา

ใหอนแรกเปน gray ware ออกแบบใน gray ware แรก เพมสตามตองการ ใชสสวางสำาหรบพนหลงและสดำาสำาหรบขอความ แมวานกพฒนามกจะพจารณาวานาเบอวาวธนนเปนวธทดทสดสำาหรบผใชมากกวา เหมอนกบเมอคณตองการใหคนมาสนใจ เฉดสตางๆของสเทาไดอยางมประสทธภาพพนทบนหนาจอ

ใหผใชส�ม�รถปรบสต�มคว�มตองก�รได เปนสงทด เพอใหผใชปรบแตงสของโปรแกรมไดเอง แตไมใชเหตผลนสำาหรบการไมเลอกสผสมทด ผใชไมควรจะมการปรบแตงสของหนาจอเพราะเราใหสทไมเหมาะสม

ใชจ�นส ใหเลอกใชไดบางสจากจานสสำาหรบผใช เพราะจะทำาใหพวกเขาเปลยนสไดเรวขน และมนใจไดวาผใชเขาใจหลกการและไมละเมดการใชส


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

พจ�รณ�ผลลพธกอนก�รตงค� ในบางกรณอาจเปนประโยชนตอผใชทสามารถแสดงผลลพธของการตดสนใจของสกอน วาใชสทพวกเขาตองการหรอไม คณสามารถทำาไดโดยการใหฟงกชน การแสดงตวอยางทเมนและพวกเขาสามารถดการเปลยนแปลงสบนหนาจอตวอยางขนาดเลกกอน

ก�รออกแบบหรอก�รเลอกกร�ฟก ภาพหนงภาพแสดงใหเหนดกวาขอความ 1000 คำาหรอไม ถาการออกแบบและการใชมประสทธภาพ ดานลางเปนวธททำาใหกราฟกใหมประสทธภาพและมประสทธผล

ใชภ�พกร�ฟกต�มวตถประสงค ตดสนใจวากราฟกจะใชกอนการออกแบบหรอการเลอกกราฟกดวยตวเอง ม 3 วธการใชงาน

- ไอคอน Application :: ไอคอนเหลานมกจะปรากฏบนเดสกทอป สามารถคลกไดเปดตวโปรแกรม

- ปมภาพ : ปม เหลานเปนรปภาพทวางอยบนปม จะจดกลมกนในแถบเครองมอ คลกทปมนนได เชน ปมการพมพ

- คำาอธบายกราฟก :: กราฟกเหลานอธบายและรองรบคำาสงผใช ตวอยาเชน รปของบานในโปรแกรมงานอสงหารมทรพย

ใชภ�พเปนปมลด กราฟกทใชบนปมคำาสง เมอคณตองการใหผใชพบทสำาคญ หรอใชวตถบอยหรอการกระทำาโดยการคนหาผานเมน


กร�ฟกใชเมอภ�พทมค� ... ความคดบางอยางดทสดและเรวทสด จะมองเหนดวยภาพมากกวาคำา ตวอยางเชนเ ครองมอวาดหรอคำาสงขอความ

กร�ฟกใชสำ�หรบก�รใชง�นระหว�งประเทศ ถาคณออกแบบใหสำาหรบผชมระหวางประเทศทมหลายภาษาจะตองพจารณาใชกราฟกทเขาใจงายและเหมาะสมกบภาษานนใหเขาใจงาย:

- ตรวจสอบใหแนใจกราฟกตวนมการใชอยางกวางขวาง โดยทดสอบใหกบกลมตาง

- ไมควรใชทาทางทไมเหมาะสม เชน นวกลางถอวาไมเหมาะสมในบางวฒนธรรม

- แทนการใชแพรหลาย เชน เครองชงแสดงสมดลไมใชการแสดงสากล

ตดสนใจเลอกวธก�ร เมอออกแบบชดของกราฟกทคณสามารถใชหนงในวธการตางๆ เหลานจะอธบายในตารางท 10.2


วธก�ร ตวอย�งของวธก�ร ตวอย�ง Graphics

วตถ ภาพของดสกเพอแสดงดสกจรง

การกระทำา ภาพของคนเพอแสดงถงความเรว

เครองมอแสดงการกระทำา

ไมบรรทดเพอแสดงการวด

ผลทได แสดงขอความตวเอยง ผลลพธคลายคลงทางกายภาพ

แวนขยายแสดงการขยายหรอซมเขา

สญลกษณทนยมใช

สญลกษณสากล แปลวา "หามทำา"

หนงสอ หนงสอ “i” สำาหรบขอมล iต�ร�ง 10.2 ตวอยางของวธการ icon ตางๆ รป ภาพทงหมดในตวอยางนจาก หนงสอ Icon และ Disk : Visual สญลกษณสำาหรบระบบคอมพวเตอรและเอกสารโดย William Horton (John Wiley & Sons, 1994)

พฒน�ชดก�รตดตอกน ชดพฒนาหรอครอบครวกราฟกโดยใชวธการเดยวกนอธบายไวในตารางขางตน กราฟกสำาหรบโปรแกรมทงหมดอาจเกยวของกบหลายชดหรอครอบครว เกบจำานวนยอยทแตกตางกนใหนอยทสด เชน สำาหรบการแกไขเอกสาร คณสามารถใชเครองมอเพอแสดงการกระทำา เชนกรรไกรเพอตดหรอแวนขยายเพอใชขยาย


มร�ยละเอยดเพยงพอสำ�หรบก�รรบร ถาคณออกแบบกราฟกของคณเอง ใชรายละเอยดใหพอเพยงเพอใหผใชกราฟกสามารถร หลกเลยงการใชรายละเอยดทมากเกนไปหรอทำาใหดภาพเหมอนรปถาย

ระวงขน�ดภ�พ บอยครงทภาพสามารถระบตวไดงาย เมอมขนาดใหญเปนเขาใจยาก เมอพวกเขาไดกลายเปนตราประทบไปรษณยขนาดเลกกวาภาพบนแถบเครองมอ การทำางาน

ใชกร�ฟกม�ตรฐ�น ถาเปนไปได ใชกราฟกมาตรฐานทยงไมไดทดสอบ ตรวจสอบแนวทางแพลตฟอรมของหนงสอและเครองมอสำาหรบการเขยนโปรแกรมกราฟกมาตรฐาน

พจ�รณ�เปลยนสถ�นะของภ�พพจารณาปมทมรป เปลยนแทนความคดใหม เชน โฟลเดอรแฟมปด

แสดงไฟล, ซงจากนนการเปลยนแปลงไปยงโฟลเดอรแฟมเปดแสดงแฟมทเปด

คงเสนคงว� เมอคณเลอกหรอออกแบบกราฟกใชมนอยางสมำาเสมอ เชนไมใชการ

รบรองทตางกนของโทรศพทในทตางๆในโปรแกรมของคณ

คำ�หลกเลยง ออกแบบปมภาพทดไมควรตองมปายกำากบ หากผใชไมสามารถถอดรหสภาพ คณอาจตองแกไขภาพทมากกวาแคการเพมคำา ถาคณใชปายชอ นคอตวเลอกตำาแหนงของคณ :


- เคลดลบการใชงาน ถาเปนไปไดมคำาแนะนำาเครองมอจะปรากฏเมอเคอรเซอรผานไปทไอคอนดงแสดงในรปท 10.16

- ใชปายกำากบใตภาพ- ใชปายชอใน microhelp (บรรทดดานลางของหนาจอ) ใชตวเลอกน

เฉพาะเมอคณไมสามารถใชทงสองตวเลอกขางตน

รปท 10.16 เครองมอ.

ไดรบคว�มชวยเหลอต�มคว�มเหม�ะสม พจารณาในการนำาภาพศลปนทมประสบการณในการออกแบบสำาหรบหนาจอคอมพวเตอรและประเภทของภาพทคณตองการจะสรางผทจะใชในการออกแบบโบชวร บรษท อาจไมมความสามารถตงคาประสบการณและการสรางภาพขนาดเลกสำาหรบแถบเครองมอทดสอบกร�ฟกของคณ

ใหแนใจวาคณทดสอบกราฟกทคณออกแบบหรอเลอก มสองวธพนฐานในการทดสอบ :

- ใหผใชงานโดยเฉพาะและขอใหเลอกภาพทพวกเขาเชอมาดำาเนนงาน- ใหผใชกราฟกในบรบทและขอใหการดำาเนนการแสดงกราฟก

แผนภมและกร�ฟ สวนตดตอผใชแบบกราฟกชวยใหคณสามารถแสดงขอมลเหนโดยใชแผนภมและกราฟ

ใชกร�ฟแสดงคว�มสมพนธ ใชกราฟแสดงความสมพนธในประเภทตางๆหรอในชวงเวลา ใชกราฟมากกวาการใชตารางทมคาเฉพาะ ดงแสดงในรป 10.17 คนสามารถเขาใจแนวโนมเรวขนจากกราฟกวาจากการตความขอมลในตาราง


รปท 10.17 กราฟแสดงแนวโนม

ใชกร�ฟแทงสำ�หรบแยกประเภท หากคณมประเภทไมตอเนองและพยายามแสดงความสมพนธใหใชกราฟแทง บารกราฟยงสามารถแสดงความสมพนธระหวางประเภท (ดรป 10.18)

รปท 10.18 กราฟสามารถแสดงความสมพนธระหวางประเภท


ก�รใชเทคนคพเศษอย�งรอบคอบควรใชหลก 3D ขามาชวยในการสอสารขอมล หลกเลยงการจดรปแบบ

ถาไมชวยใหผใชเขาใจขอมล

ใชแผนภมวงกลมสำ�หรบคว�มสมพนธแบบทงหมด-สวนประกอบ (Part-to-whole)

ถาคณตองการแสดงความสมพนธแบบทงหมด-สวนประกอบ (Part-to-whole) ใหใชกราฟวงกลมดงแสดงในรปท 10.19

รปท 10.19 แผนภมรปวงกลมแสดงความสมพนธ Part-to-whole

ก�รใชแผนภมเสนสำ�หรบแสดงขอมลแบบตอเนองหากคณมขอมลแบบตอเนอง ใชแผนภมเสนแทนทจะใชแผนภมวงกลม

หรอแผนภมแทง แผนภมแทงดกวาแสดงผลกระทบทสะสมไดดกวา (ดงรปท 10.20)


รปท 10.20 แผนภมแสดงการลากเสนผลกระทบทสะสม

ก�รเลอกขน�ดทเหม�ะสมเลอกขนาดทกราฟทเหมาะสมสำาหรบแกน X และแกน Y ซงขนาดจะ

ขยายตวมากเกนไป คณอาจจะเจอผลกระทบทใหญเกนจรง ถาขนาดเลกเกนไป คณอาจจะตดตามการรายงานผลกระทบได

พจ�รณ�ก�รแสดงค�โดยเฉพ�ะตองดคาเฉพาะตลอดจนแนวโนมโดยทวไป หรอความสมพนธ แสดง

คาทแนนอนในกราฟ

ใชก�รเข�รหสในภ�พกร�ฟใชส ,เนน,การแรเงา หรอรปแบบการแบงสวนของกราฟ

ใชคำ�อธบ�ยสำ�หรบกร�ฟทซบซอนถากราฟมขอมลจำานวนมากและการเขารหสทแสดงตวตนจำานวนมาก

ควรใชการอธบาย ดงแสดงบนรปท 10.21


รปท 10.21 อธบายการใชงานเพอชวยใหผใชเขาใจ

นย�มกร�ฟและขอมลกร�ฟควรมคำ�ศพทใหผใชเข�ใจ โดยพจ�ณ�ดงตอไปน

- ชอกราฟ- เสน,แถบ,หรอบางสวนของพาย- แกน X- แกน Y

ใชสเปนหลกเพอแสดงคว�มแตกต�งใชแมสเชนสเขยว,สนำาเงน,และสเหลองในแผนภมและกราฟเพอใหเกด

ความแตกตาง เชน ใชสทแตกตางสำาหรบแตละแถบในกราฟแทงหรอ แบงแตละสวนในวงกลม

ก�รใชสแดงอย�งระมดระวงหลกเลยงการใชสแดงในแผนภม หรอกราฟ นอกจากคณจะระบถง

ปญหา,อนตราย,หยด หรอการสญเสย

ใชสใกลเคยงเมอแสดงก�รเปลยนแปลง


ใชสทใกลเคยงกน เชน ใชสระดบปานกลางและสฟาออน เพอแสดงการเปลยนแปลง เชน การขายทเพมขนทละขนตอนจากเดอนหนงถงเดอนหนง

ก�รใชแสงพนหลงต�ร�งใชสขาวหรอแสงสเทาเปนพนหลงขอมลในตาราง ใชขอความสดำาเพอ

เปนจดเดน ใชสทตองการเพอเนนเซลล แถว หรอคอลมน

ใชสพนหลงเพยงสเดยวสำ�หรบกร�ฟหากสทใชในกราฟ พนหลงสขาว สนำาเทาหรอสดำา


Structure


โครงสร�งโครงสรางของสวนแสดงผล หมายถง หนาตาง กลองโตตอบ และเมนท

คณสามารถใชเพอสรางการแสดงผลของคณ

หน�ต�งหลกและหน�ต�งรองหนาตาง คอ พนหลงเปนทสำาหรบวางสวนควบคมหนาจอแสดงผลของ

คณ

ใชหน�ต�งเปนชนหนาตางแบบเปนชน (ดรป 8.1) สำาหรบการใชงานทเนนงานหนงครง

อยางไรกตาม ถาชนคณปกปดขอมลทตองการดไปพรอมๆกบใชแบบการปกระเบองใชดงทแสดงใน รปท 8.2

รปท 8.1 หนาตางแบบเปนชน

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


รปท 8.2 หนาตางแบบปกระเบอง

หลกเลยงก�รเลอนแนวนอน หลกเลยงการเลอนแนวนอนเพอดขอมลในหนาตางหรอกลองโตตอบ

แทนทจะเลอนแนวนอนลองพจารณาตอไปน :- หนาตางขนาดใหญ - แบงขอมลออกเปนหลายๆหนาตางโดยการใชแทบ- ใหขยาย ซมเขา และ ยบ เพอแสดงเฉพาะขอมลทตองการ

ขน�ดของหน�ต�งรองควรพอดกบขอมลขนาดของหนาตางรองตองเหมาะสมทสดกบขอมล ไมพงพาผใชเพอ

ปรบขนาดหนาตางเอง แมวา มนสามารถทำาไดกตาม ทกหนาตาง ตองไมเปนขนาดเดยวกน

ตำ�แหนงของหน�ต�ง Pop-up อยกล�งก�รดำ�เนนก�รตำาแหนงของหนาตาง Pop – up และกลองโตตอบ อยตรงกลาง

สมพนธกบหนา application กลองโตตอบ

กลองโตตอบใหผใชกรอกชดของการกระทำาสำาหรบงานเฉพาะ

ใชกลองโตตอบแบบชวยเหลอสำ�หรบก�รปด


ทำาหนาทใหความชวยเหลอเกยวกบ คำาแนะนำา คำาชวยเหลอ หรอ คำาอธบายตาง ๆใชกลองโตตอบแบบชวยเหลอสำาหรบการกรอกแบบฟอรมและงานเลกๆ งานไมตอเนอง เมอเหนวาผใชจะกระทำาการสำาคญ ๆ ทอาจสงผลตอโปรแกรม หรอ ระบบ หรอ ทไมอาจยอนกลบมาแกไขได ดงนน กอนจะ ดำาเนนการอะไรตอไป โปรแกรมจำาเปนตองเตอนใหผใชงานทราบกอน และเพอใหแนใจวา คณไดอานมนแลว คณจำาเปนจะตองปดกลองสนทนานกอนทกครง กอนทจะทำาอยางอนได ใชกลองโตตอบตวอย�ง สำ�หรบง�นอย�งตอเนอง กลองโตตอบแบบตวอยาง เปนกลองโตตอบทสามารถเปดอยไดในขณะทผใชปฏบตงานในหนาตางหรอกลองโตตอบอน ใชกลองแบบตวอยาง สำาหรบงานทตองทำาซำาหรอตรวจสอบชวงเวลา สำาหรบการแสดงวตถทแตกตางกนในเวลาเดยวกนหรอเมอผใชตองมการเขาถงเมนหรอแถบเครองมอในขณะทกลองโตตอบเปด

Tabs แถบ เปนรปแบบความคดทนยมในสวนตดตอผใชแบบกราฟกลาสด แถบจะมประโยชนแตกยงมขอบกพรอง

คำ�นงถงแถบสำ�หรบขอมลประเภทไมตอเนอง แถบ มประโยชนตราบเทาทผใชสามารถบอกไดโดยชอสน ๆ ทแถบจะรวมถงชนสวนของขอมล (ดรปท 8.3) หลกเลยงการใชแถบเมอของมลของคณมจำานวนมาก อาจจบลงดวยบตรยงเหยงหรอบตรหลายหวขอเชนบคคลและบคคลอนๆ ชอเหลานไมเพยงพอตอการทผใชดเขาใจ


รปท 8.3 ไมแบงขอมลไมตอเนองระหวางสองแทบ "ทอย และเบอรโทรศพท1 และ ทอยและเบอรโทรศพท2” ไมตอเนอง

ชดแทบก�รดจะเกยวของกบวตถ ชดของแทบการดจะเกยวของกบวตถเฉพาะดงแสดงในรป 8.4

ตวอยางเชนชดของแทบการดอาจมขอมลสมาชกและรวมทงเรองทอย, งานอดเรกและการอบรม ชดนจะมคนเปนวตถ คณจะตองไมมการดในนทตงชอวา Printer Setup หรอ Default (ดรปท 8.5) การดเหลานอาจปรากฏเปนชดวตถสำาหรบ Printer

รปท 8.4 บตรทกแทบเกยวของกบวตถ Member


รปท 8.5 ไมผสมวตถภายในบตรแทบตง บตรแทบ"Printer Setup"ไมเกยวของกบวตถ Member

เมอพจ�รณ�บตรแทบคำ�สงของขอมลทแตกต�งกนไปถาลำาดบทขอมลมการดแตกตางกนโดยผใชงานหรอบตรแทบเปนวธทด

ทจะจดระเบยบขอมล อยางไรกตามหากผใชทงหมดจะดหรอใชขอมลในลำาดบเดยวกนบตรแทบอาจจะชากวาวธ

ใหแนใจว�ขอมลทเปนอสระหลกเลยงบตรแทบเมอขอมลในบตรเดยวเปนหนกขนอยกบขอมลใน

บตรอน (ดรปท 8.6) ผใดจะตองให flipping ไปมาหรอคณจะมการเปลยนแปลงขอมลในบตรโดยไมใชไมรมการเปลยนแปลง


รปท 8.6 ขอมลในบตรแตละแทบจะเปนอสระ

ใชเพยง 1-2 แถวของแทบหลกเลยงบตรแทบถาคณมสองแถวของแทบหากคณมขอมลมากทคณ

ตองพจารณาวธการตางๆเชนเมนไปทรปแบบหรอ หนาตางไปทกลองโตตอบ

ใชหน�ต�งหลกหรอกลองโตตอบชดบตรแทบควรอยในหนาตางหรอกลองโตตอบ ทยงมปมใด ๆ ทมผล

ตอการตงคาทงหมดของบตร ตาราง 8.1 แสดงปมทพบทวไปในหนาตางหลก

Button

Action

Saves changes to any tab card in the set, closes the windowClears changes on any tab card in the set that were not invoked using ApplyInvokes changes made to any tab card in the set

ต�ร�งท 8.1 ปมสำาหรบหนาตางหลก


ปมสถ�นทเหม�ะสมถาเกยวของกบการกระทำาปมเฉพาะบตรแทบเฉพาะทปมบนบตรแทบ

เฉพาะ หากมการใชปมเพอตงแทบทงทปมในหนาตางหลก

คงเสนคงว�ตวควบคมแทบจะสอดคลองภายในและผานการใชงาน ถาคณใชหนา

ตางแทบตนแบบและรวม OK, Cancel และปมใชในตวอยางเชนคณควรใชการตงคาเดยวกนในกรณตอไป

เลอกไหลต�มแนวนอนหรอแนวตงตดสนใจวาคณจะใชการไหลตามแนวนอนหรอแนวตงของขอมลสำาหรบ

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

เมนเมนเลนสองบทบาททสำาคญในสวนตดตอกบผใชแบบกราฟก เมนจะ

เปนรปแบบหลกของการนำาผานอนเตอรเฟสและจะนำารปแบบจตใหกบผใชใน Snapshot ใหความสนใจกบการออกแบบเมนใชงานเปนเวลาดทใช


Word ร�ยก�รเมนอย�งรอบคอบชอเลอกและทดสอบเพอใหแนใจวาพวกเขาเหมาะสมกบผใช มนไมงายท

จะเลอกปายทผใชจะเขาใจ

เมนเปลยนต�มทคณตองก�รมน Ok สำาหรบแถบเมนและวางพวกเขาลงเมนเปลยนเปนยายผใชผาน

ทางโปรแกรม

ใชตวอกษรตวใหญเปนตวแรกเมนรายการบารควรมอกษรตวใหญเรมตนแลวตามดวยอกษรตวเลก

สำาหรบเลอนลงรายการเมนตามหนงสอชอใหญกฎ ประโยชนตวอกษรตว–แรกของคำาหลกทงหมด

เมนต�มม�ตรฐ�นอตส�หกรรมมาตรฐานของเมนจะม แถบเมนและเมนแบบเลอกเลอนลง คณจะไม

สามารถใชเมนเหลานนไดถาคณไมทำาการเลอกหรอคลกเมนนนๆ ถาคณใชเมนคณจะเหนดงรป 8.7 ถง รป 8.15 ในแตละระบบปฏบตการ

รปท 8.7 เมนไฟล ของระบบปฏบตการ 95


รปท 8.8 เมนแกไข ของระบบปฏบตการ 95

รปท 8.9 เมนตวชวย ของระบบปฏบตการ 95

รปท 8.10 เมนตวไฟล ของระบบปฏบตการ 3.1


รปท 8.11 เมนแกไข ของระบบปฏบตการ 3.1

รปท 8.12 เมนชวยเหลอ ของระบบปฏบตการ 3.1

รปท 8.13 เมนไฟล ของระบบปฏบตการ OS/2

รป 8.14 เมนแกไข ของระบบปฏบตการ OS/2


รป 8.15 เมนชวยเหลอ ของระบบปฏบตก�ร OS/2

แถบเมน เมนบารทำาหนาทเปนสวนททำางานหลกของโปรแกรม คอเลอก จดระเบยบ และแถบเมนชอ ควรใชรายการอยางระมดระวง

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

ใหง�นทสำ�คญหรอก�รใชง�นบอยเปนสวนสำ�คญ ใหงานทสำาคญหรอการใชงานบอยเปนสวนสำาคญให หลกเลยงการจดกลมรายการทสำาคญหรอเปนใชเปนประจำาทกประเภทภายใตหมวดหม ทเหลอหาหรอหกรายการในแถบเมนใหมการทำางานแตกตางกน

จดร�ยก�รเมนต�มก�รทำ�ง�น จดเรยงเมนตามลำาดบการทำางาน ตวอยางเชน เมนงาน เมนแหลงอางอง กอนเมนชวยเหลอ

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


(รป 8.16)

รปท 8.16 อยาใชสองคำาสำาหรบรายการแถบเมน

ควรใชแคหนงแถวบนแถบเมนเท�นนแถบเมนจะตองมเพยงหนงแถว หากคณมรายการมากเกนไปในแถบ

เมนของบรรทดเดยวแลวควรยบบางรายการของคณเปนหนง ดงแถบเมนในรปท 8.17 ยาวเกนไป

รปท 8.17 อยาใชมากกวาหนงบรรทดในแถบเมน

ไมควรใชสเท�เปนแถบเมนไมควรใชสเทาเปนแถบเมนรายการชวคราว และไมควรแสดงรายการ

โดยทรายการในเมนแบบเลอนลงทใชสวนใหญจะเปนสเทา

แถบเมนสงทควรมคอ เมนแบบเลอนลงไดสงทอยบนแถบเมนบารนน เมอเรมตนไมควรดำาเนนการไดเลยโดยตรง

สงทอยบนแถบเมนนนสามารถเลอนลงมาเปนเมนทสามารถดำาเนนการสงงานได

แถบเมนแบบเลอนลงแถบเมนแบบเลอนลงสามารถแสดงใหเหนรายละเอยดของขอมล

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

วธก�รใชสงทม�กกว�หนงสงบนแถบเมนแบบเลอนลง


แถบเมนแบบเลอนลง เมอมแลวควรมการใสสงนนมากกวาหนงสงในแถบเมนแบบเลอนลง หากมรายการแถบเมนทมหนงหรอไมมรายการแบบเลอนลงเลย กไมควรจะเปนเมนแยกประเภทรวมกบรายการเมนอน

ร�ยก�รเมนก�รใชง�นทไมซำ�แบบเลอนลงไมควรเรมตนรายการเมนแบบเลอนลงแตละรายการกบคำาเดยวกนทอย

บนแถบเมนทแสดง ดงในรปท 8.18 แถบทเลอนลงมานน แตละรายการตองไมซำากน

รปท 8.18 ไมควรเรมรายการแตละเมนแบบเลอนลง ขนตนดวยคำาเดยวกนในแถบเมน

ขอจำ�กดเกยวกบคว�มย�วของแถบเมนแบบเลอนลงเมนแบบเลอนลง สามารถไปไดจากดานบนของหนาจอ จนถงดานลาง

ของหนาจอ ซงเราไมสามารถใชสกอลบารในการเลอนได ซงคณมรายการเกนกวาความพอดของหนาจอ คณตองรวมบางรายการไวดวยกน และแยกยอยออกเปนเมนแบบเลอนลงอกขน หรอบางรายการอาจแยกเปนเมนรายการเพมเตม

ร�ยก�รทสำ�คญและใชบอยๆควรใสไวทด�นบนรายการทใชบอยๆหรอสำาคญทสดควรจะอยดานบนของเมนแบบเลอน

ลง

ก�รใชแถบคนการใชแถบคนสองทาง เพอจดกลมรายการกบสงทเกยวของกน – (ดง

รปท 8.19)


รปท 8.19 การคนบารแตละกลมเฉพาะรายการทเกยวของกน

ก�รใชก�รตอเรยง ก�รจดเรยงวนโดวสเลกๆไมควรเกนสองชนมนสามารถใชไดสำาหรบการตอเรยงหนาตางเลกๆ บนเมนแบบเลอนลง

ได แตวาไมสามารถใหมนมมากเกนกวาสองชนขนไปได ดงรปท 8.20 ซงเปนการแสดงการใชระดบมากเกนไปของการตอเรยงหนาตางเลกๆ บนเมนแบบเลอนลง การใชสญลกษณลกศรเลอนไปทางขวานนแสดงใหเหนวามเมนแบบเลอนลงรายการซงรายการนนจะมหนาตางเลกๆซงตอจากเมนแบบเลอนลง

รปท 8.20 ไมควรมหนาตางเลกๆ ตอเรยงกนหลายชนมากเกนไป

ก�รใชเครองหม�ยจด (....) เพอแสดงไดอะลอกถาชนรายการของเมนทตองการดำาเนนการมขอความนนยาวเกนไป ,

การใชเครองหมายจด (.....)หลงรายการใสทอยในเมนเลอน ลง (ดงรปท 8.21)


รปท 8.21 การใสเครองหมายจดหลงรายการแสดงวาตองมรายการเพม

ก�รใชแปนพมพเทยบเท�ม�ตรฐ�นอตส�หกรรมคยบอรดมคาเทากบชวยใหผใชเลอกรายการเมนไดโดยไมตองใชเมาส

แปนพมพสามารถกำาหนดใหเมนแบบเลอนลงจะเปดขนเมอมการใชงานดงแสดงในรปท 8.22 ทกรายการทงหมดแบบเลอนลงสามารถเลอกเมนได ซงจะมรายการเทยบเทากบแปนพมพคยบอรด

รปท 8.22 แปนพมพคยบอรดจะเทยบเทากบขอความทแสดงซงไดขดเสนใตไว

ก�รเรงใชเท�ทจำ�เปนการใชคยลดเมอกดแปนพมพคยบอรดนน ผใชสามารถเลอกรายการ

เมนได เมอเมนแบบเลอนลงไมสามารถเปดใชงานได ดงรปท 8.23 การใชคยลดนนผใชสามารถใชไดเลยโดยไมตองเลอกรายการเมนเลอนลงมา ตวอยาง


เชน Ctrl+V เปนการวางสงนนไวทคลปบอรด ดงรปท 8.24 แสดงใหเหนมาตรฐานของ Windows95 ในการใชแถบเมนคยลด Edit

ดงรปท 8.23 แสดงใหเหนคยลดทอยทางดานขวามอของรายการ

รปท 8.24 เมนมาตรฐานของ Window95 แสดงใหเหนการใชคยลดของเมน Edit

คว�มเหม�ะสมของก�รใชคยลดความเหมาะสมในการใชคยลดตองใชใหเหมาะสมกบภายในองคกรของ

คณ การวางคยลดในเมนแบบเลอนลงมานน สวนของคยลดตองอยทางขวามอของเมนแบบเลอนลง

เมน Pop-Upเมน Pop-up ซงเปนทางเมนทางลดโดยเฉพาะสำาหรบผใช

ในก�รใชเมน Pop-UP เพอเลอกใชโดยเฉพ�ะ


เมน Pop-Up จะปรากฏขนเมอผใชคลกเมาสปมขวา ดงรปท 8.25 สงเหลานนจะเปนสวนยอยของการดำาเนนการโดยเฉพาะสถานทหรอการกระทำา ตวอยางเชน เมอผใชคลกเมาสปมขวาบนขอความ ทเรากำาลงทำางานอย บนแอพพลเคชน เมน Pop-up จะมการกระทำาทเกดขนกบขอความนน เชนคำาสง ตด คดลอก วาง และจดรปแบบ

รปท 8.25 Pop-up เมน

ใชก�รโตตอบแบบซบซอนเมน Pop-up ไมไดมการใชตำาแหนงเดยวทปรากฏเทานน ยงมเมน, ปม

คำาสง, หรอปมเครองมอเพอเลอกใชงาน

เมน Roll-Upเมน Roll-up ประหยดพนทการใชงาน และมประโยชนสำาหรบผใชทม

ความเชยวชาญ เมน Roll-up ทลอย, หรอการเคลอนยายเมน ซงมลกษณะคลายกบแถบเครองมอ ผใชสามารถใชงานจากเมนทเลอนลง และวางไดทกทในพนทททำางานโดยคลกทมมขวาบนของเมน roll – up ผใชสามารถเลอนขน (ขยาย) หรอลง (ยอ) ได

ใช เมน Roll-up สำ�หรบก�รใชง�นทบอยครงใช เมน Roll-up สำาหรบกลมทตองการใชงาน ผใชมความจำาเปนท

ตองการใชงานบอยครงซงแนนอนเปนสงทผใชตองการ เชน การใชเทคนคพเศษในโปรแกรมกราฟก (ดงรปท 8.26 และ รปท 8.27)


รปท 8.26 การยอเมน Roll-up

รปท 8.27 การขยายเมน Roll-up

แถบเครองมอ(Toolbars)แถบเครองมอ เปนแถบเมนทางลด หรอ เปนวธการควบคมนำาเสนอท

ยากในการสอความหมายออกมาเปนคำาพด ,เครองมอวาดภาพ

ก�รสร�งแถบเครองมอ(Toolbars) อย�งเหม�ะสมถาคณใชแถบเครองมอทงหมดในการใชงานโปรแกรม หรอระหวางการ

ใชงานใหแนใจวาคณใชปมเดยวกนและฟงชนการใชงานเดยวกนตลอด

ใชง�นร�ยก�รทส�ม�รถใชง�นอยเท�นนจะแสดงเฉพาะรายการทแถบเครองมอสามารถใชได มนใชสำาหรบ

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

อนญ�ตใหผใชย�ยแถบเครองมออนญาตใหผใชยายแถบเครองมอ ไปยงสถานทตาง ๆบนหนาจอเพอให

มนใจวาผใชออกจากการใชงานเพอประสทธภาพของผใชงาน

อนญ�ตใหผใชสลบก�รเปด ปด แถบเครองมอ


ใหผใชเปดแถบเครองมอและปดกลองโตตอบหรอตวเลอกเมนเลอนลงโดยเฉพาะอยางยงถาคณใชมากกวาหนงแถบเครองมอ

กำ�หนดพจารณาใหผใชสามารถปรบแตงแถบเครองมอโดยการตดสนใจวาจะใส

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

ปมใชง�น Purposeเอาใจใสจำานวนปมบนแถบเครองมอการสรางปมหลาย ๆ ปม และม

ความรความเขาใจ ผใชจะไมเหนปมบางปมถามมากเกนไป

เคลดลบก�รใชง�นหากคณมความสามารถและคำาแนะนำาในการใชเครองมอ (จะปรากฏท

เมาสซงจะชากวาการใชแถบเครองมอ) รวมถงเครองมออน ๆ (ดงรปท 8.28) ซงไมเหมาะสำาหรบใชแทนคำาแนะนำาเครองมอทด

รปท 8.28 คำาแนะนำาเครองมอบนแถบเครองมอ

กลมร�ยก�รหากคณมคำาแนะนำาเครองมอบนแถบเครองมอโดยพจารณาจากการ

แบงกลม ตำาแหนงสามารถแกไขเขาดวยกนไดใชชงวางเปนสขาวเปนกลม ๆคว�มสมพนธระหว�งแถบเครองมอ,ปมคำ�สงและเมน

คณจะตองตดสนใจซงดำาเนนการในระบบเมน ไปทแถบเครองมอ และ/หรอ ซงการดำาเนนการควรเปนปมบนหนาตาง (ดงตารางท 8.2)

ใชแถบเครองมอเมอใชง�นบอยครงผ�นหน�จอ


แถบเครองมอควรใชงานบอยครง ผใชตองใชงานผานหนาจอไมใชแถบเครองมอแทนปมคำาสง

รปแบบก�รกระทำ� ตำ�แหนงทเหม�ะสมบอยทสดและสำาคญ ปมคำาสงบอยครงและผานหนาจอหลายหนาจอ

แถบเครองมอ

การใชงาน:บอย,สำาคญ และไมบอยครง

Menu bar และ drop-down menus

ต�ร�งท 8.2 พจารณาตำาแหนงทเหมาะสมกบการใชงาน

ใชแถบเครองมอเพอเสรมเมนบางรายการบนแถบเครองมอควรใชรวมกบแถบเมน เมอผใชตองการ

ความรวดเรวในการดำาเนนงานในกรณนรายการแถบเครองมอจะปรากฏบนแถบเมน

ใชแถบเครองมอในพนทของเมนบ�งร�ยก�รบางรายการบนแถบเมนสามารถใชในพนทของเมนบางรายการได เชน

เครองมอวาดภาพไมสามารถอธบายดวยคำาพดและยากทจะวางบนเมน Drop-down


Internet and Intranet


อนเตอรเนตและอนทร�เนต ในบทความน ไดรวมหลกการการออกแบบการสอสาร ทประยกตโดย

เฉพาะการตออนเตอรเนตและอนทราเนต ผออกแบบ ควรทจะรถงหลกการของการวางรปแบบโครงสรางและหลกการออกแบบ และทำาอยางไรทจะประยกตการใชงานใหเขากบความตองการของผใช.

ก�รออกแบบโครงสร�งเวบไซตกอนทจะเรมสรางหนาเวบ มบางภาพรวมทควรจะตดสนใจกอน ในสวน

นครอบคลมหลกการกวางๆ เกยวกบการออกแบบโครงรางของอนเตอรเนตและอนทราเนต.

ก�รตระเตรยมเนอห�ส�ระถามทกๆ คนวาพวกเขาตองการอะไรบนหนาเวบ คำาตอบคอเนอหาสาระ

ขอใหแนใจวาคณไดจดเตรยมเนอหาสาระทเทยงตรง ขอมลลาสด คณคาของเนอหาสาระ ขนอยกบวาผชมตองการทจะรอะไร? ไมใชวาคณตองการพดอะไร วเคราะหความสนใจของผชมของคณ กอนทจะสรางหนาเวบ

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

กลบมาทหนาเวบของคณอก

ตระหนกถงก�รใชง�น อยาใหการออกแบบของคณ มาควบคมเวบไซตของคณ จงยดมนบน

วถทดงเดมและสรางสรรค แตอยาลมถงความสามารถในการใชงาน


สร�งก�รออกแบบใหเปนหนงเดยวกนใชออกแบบหน�ภ�พทซำ�กนและสไปรวมกนในหน�เวบไซตของคณ

ทงหมด

โครงสร�งลำ�ดบชนผใชคำานงถงเรอง ลำาดบชนของเวบไซต ทมโครงสรางทแนนอนชดเจน

สามารถใชงานงายและเขาใจงายตอการทมผมายยมชม

พจ�รณ�หน�แนะนำ�หน�เวบเบองตนบางเวบไซต เรมตนดวยการแนะนำาหนาเวบเบองตน เพอนำาทางแกผ

เยยมชมเขาสหนาเวบ และทำาใหเกดความนาสนใจกอน เขาสหนาแรก.

ใชหน�แรกเปนเมนแนะนำ�หวขอประเดนต�งๆ ของหน�เวบไซททเหลอทงหมด

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

เตรยมขอมลใหหล�กหล�ยในหน�โฮมเพจเมนตองแนใจวา หนาโอมเพจ จะสามารถเขาถงไดโดยผเยยมชมในทกระดบ

จากคนทใชเวบบราวเซอรทอานขอความอยางเดยว จนถงบราวเซอรทพฒนา โดยอยาคดวาผเยยมชมจะเขาใจการใชภาพ หรอภาพทไมมขอความกำากบ

ใชเมนยอย สำ�หรบเวบไซตขน�ดใหญหนาโฮมเพจ จะมลงคทเชอมไปยงหนาทมหวขอประเดนหลก ของ

เวบไซต ถาเวบไซตมหมวดหมแยกประเภทของขอมลขาวสารจำานวนมากและ


แตละหมวดหม มขอมลจำานวนมาก ใหพจารณาใชเมนยอย เพอชวยนำาทางผเขาเยยมชมไปยงขอมลขาวสารทพวกเขาตองการ

เข�ใจในชองท�งก�รรบสงขอมลของผเยยมชมของคณถาคณสรางหนาอนทราเนต พรองชองสงรบขอมลทมความจสง คณ

สามารถใชสอประเภทรปภาพจำานวนมากไดคอนขางอสสระ, แตอยางไรกตาม ถาผเขาเยยมชม ใชโมเดมในการเชอมตอ คณกตองเผอเอาไวสำาหรบการคำานวณความเรว ในการดาวนโหลดขอมลดวย

ทำ�ไฟลของคณใหเลกลงคำาแนะนำาสวนใหญคอใหไฟลคณมขนาด ทตำากวา 50 กโลไบต หรออาจ

จะใหอยท 30 กโลไบต ถาตงโจทกวาใชเวลา หนงวนาทตอกโลไบตกเทากบ 50 วนาทตอกโลไบตในการดาวนโหลดขอมล

จดเตรยมเผอท�งเลอกสำ�หรบก�รพมพหน�ทย�วเกนถาคณเชอวา ผทเขาเยยมชมของคณ จะตองการพมพเอกสารเพออาน

ในยามทไมไดเขาอนเตอรเนต คณควรออกแบบเวบไซตของคณใหเรยบเรยงจดขอมลเพยงพอสำาหรบการกดคลกเพยงแคหนงครง

จดเตรยมแผนทจดเตรยม แผนทของเวบไซต เฟรม หรอ แผนทในสวนหวบนสดของ

หนาเวบเพจ ในกรณท ผเยยมชม เกดหลงทางภายในในเวบไซตของคณ.ใชแผนทเวบไซต เพอแสดงคว�มเกยวโยงเชอมสมพนธของขอมลข�วส�ร

แผนทเวบไซต เปนตวบงบอกของขนาดความใหญของเวบไซตและความสมพนธของขอมลขาวสารภายในเวบไซตตามภาพทแสดง 11.1 ซงเปนไดทงกราฟกรปภาพ และขอความตวอกษร ผเยยมชมสามาถมองเหนพนทขอมลทเปนประเดนหลก และสามารถเขาใจวามการเชอมโยงเปนเครอขายระหวางพนทนนๆ


รปท 11.1 แผนผงเวบไซตจาก http://circus.compuware.com ใชเปนแผนทภาพ บรษท Compuware Corporation.

ใหแตละร�ยก�รในแผนทเวบไซต-เชอมโยงไปยงหวขอต�งๆ ภาพท 11.2 แสดงใหเหนวา แตละหวขอเชอมโยงกนอยางไร ใน

ขอความตวอกษร ถาแผนทเวบไซตเปนขอความแลว มนจะโอนถายขอมลไดรวดเรวมากขน การเปลยนสของขอความทเชอมแลว เพอทวาผเยยมชมจะสามารถเหนไดงายวาตวเขาเคยไปมาทไหนกอนหนานแลว

ก�รแสดงโชวทยงใหญ▀ต�ร�งกจกรรมประจำ�วน ▀วนเส�รเปนวนพเศษ▀พระร�ชวงหลวงแฮนเนฟอรด ▀ ประวตศ�ตรของพระร�ชวงหลวงแฮนเนฟอรด▀ละครสตว ▀ม� ▀ช�ง และ ก�รนงหลงอฐ ▀ก�รเข�ชมสตวเลยง▀ก�รแสดงไฟ▀สม�คม UWM สำ�หรบเดก ▀ประวตศ�สตร

รปท 11.2 สวนของ sitemap แบบขอความจาก http://circus.compuware.com ใชเปนแผนทภาพ © บรษท Compuwareใชแผนทแบบขอคว�มลำ�ดบชน


ไมวาคณจะใชกราฟกของเวบไซตหรอไม ใหผเขาชมแผนทขอความทคนเคย จะเหมอนกบตารางเนอหาหรอสามารถคลายตนไมหรอรปแบบอน ๆ . อยาพยายามซำาขอมลเชอมโยงภายใตหลายหวเพยงแคครงเดยวรวมในจดสงสดของตรรกะ

คำ�นงถงก�รนำ�ภ�พกร�ฟกเข�ม�ใช แผนทรปภาพเปนกราฟกสำาหรบใชนำาทางใหกบผชมเขาไปสเวบไซต

สำาหรบผเขาชมเขาถงเวบไซตของคณผานทางโมเดมแผนทภาพ (ภาพเดยว) มกจะเรวกวาการโหลดเปนสองเทาของภาพบคคล อยางไรกตามนอาจไมจรงสำาหรบเครอขายอนทราเนตรวดเรว นอกจากนถากลมของแผนทภาพทใชในเวบไซตอนจะดกวาทจะใชเปนภาพบคคลเนองจากแคชเบราเซอรของพวกเขาถกดงมาจากแคช

แผนทรปภาพอาจจะทำาใหผเขาชมสบสนบางเลกนอย เนองจากแผนทภาพมกจะเปนภาพทสมบรณในตวเองกมกจะไมชดเจน ซงอาจทำาใหผเขาชมในเวบไซตของคณดไปซกพกพวกเขาอาจจะไมเชอมโยงภาพไดตรงกบเนอหา นอกจากนอาจตความภาพและคำาเปรยบเทยบไปเปนความหมายอนทไมใช แตแผนภาพทออกแบบสรางสรรคสำาหรบกลมเปาหมายทจะมประสทธภาพมาก 11.3 รปทอยบนหนาแรกของเวบไซตของบรษท ทใหขอมลกบพนกงานในอาคารใหมและละแวกใกลเคยง.

รป 11.3 1,996 ตวอยางภาพของแผนททสรางขนโดย Ron Sova © Compuware Corporation

เตรยมหน�เวบสำ�หรบเครองมอคนห�ภ�ยนอก


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

เพมเครองมอคนห�ในเวบไซตของคณ ทนททเวบไซตของคณมมากกวา 100 หนา คณจะตองเรมคดเกยวกบการเพมเครองมอคนหาสำาหรบเวบไซตของคณ โดยทวธนผเขาชมสามารถพมพคยเวดแลวดรายการทงหมดทมในเวบไซตได

ออกแบบสำ�หรบก�รเรยกดจ�กสภ�พแวดลอมภ�ยนอก หมายถง การวเคราะหกลมเปาหมายของคณกอนทจะมการนำา

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

ก�รนำ�ท�ง การนำาทาง มความสำาคญเนองจากหากผเขาชมไมสามารถหาขอมลของพวกเขาทไดเขามาใชงานได ถาเปนเชนนนผเขาชมอาจจะไมอยากกลบเขามาใชงานเวบไซตอก จง ตองทำาใหผเขาชมรวาพวกเขาอยในเวบไซตของคณและบอกใหพวกเคารวาพวกเขากำาลงทำาอะไรอยในเวบไซต .

ต�มกฎส�มคลก การออกแบบเวบไซตของคณเพอใหผเขาชมไมตองคลกมากกวาสามครงเพอไปยงหนาขอมลทตองการ โดยถาเปนสวนรายละเอยดเกยวกบขอมล


อาจจะตองคลกเขาไปมากกวานน แตขอมลเบองตนควรจะสามารถเขาถงไดอยางรวดเรว

ใชเปดเผยคว�มก�วหน� ใชระดบหวเพอแสดงขอมลลำาดบชน โดยปกตชอหนาของคณเปน

ประเภทหนง ประเภทเนอหาหลกเปนประเภทสอง และประเภทสาม คอ สวนหว ใชในกรณทจำาเปน หากทานตองการมากกวาสามหวคณควรพจารณาเชอมโยงไปยงหนาใหมสำาหรบรายละเอยดปลกยอยกวานน . บรรดาผสนใจสามารถเจาะลกลงไป กระบวนการนเรยกวาการเปดเผยความกาวหนา

จดองคประกอบใหมคว�มสอดคลองกน ใหทกองคประกอบทเปนเนอหาเดยวกน ทกหนาทมรายละเอยดอกษรและภาพใหกบไวในทเดยวกน เพอใหเนอหานนสอดคลองกน

ในเวบไซตขน�ดใหญใหมก�รนำ�ท�งเปนสองระดบ ในเวบไซตทมขนาดใหญ การใชงานเวบไซตจากลงคทกหนานอกจากท

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

ไมผกตดเนอห�กร�ฟกคนเดยว หากผทไมเลอกทจะใชกราฟก อาจจะพลาดเนอหาสำาคญหรอไมสามารถใชเวบไซตของคณได

ใหเชอมโยงขอคว�มในหน�เวบของคณ ผเขาชมไดเหนรปภาพในเวบไซตของคณ สงทผใชตองการคอการไดรบขอมลโดยตรง หลกเลยงสาเหตททำาใหพวกเขาตองรอโหลดภาพของคณ


กอน จงจะสามารถใชเวบไซตของคณ โดยจดใหมขอความเชอมโยงเกดขนกอนหนา โดยผเขาชมสามารถคลกขอมลทพวกเขาตองการโดยไมตองรอใหโหลดเสรจทงหนา

ใชก�รเชอมโยงอย�งรอบคอบ เนนการทำางานหลกของหนาเวบ ดวยการเชอมโยงทหลากหลาย (ยกเวนในหนาเมน) ลงคในขอความทแทรกขนมาขณะใชงาน อาจทำาใหเกดการรบกวนและทำาใหผเขาชมเกดความสบสน นอกซะจากวาลงคทแทรกขนมานนจะเปนฟงกชนเมน ใหพจารณาการวางเชอมโยงทกยอหนาในรายการสวนทายของหวขอนน

เชอม โยงใหเนอห�สำ�คญไมเชอมโยงไปยงหนาเวบทไมสมบรณ ใสขอความในเพจทมา แตไมได

สรางการเชอมโยงหลายมตจนหนาเปาหมายเสรจสมบรณ หากคณเชอมโยง ไปยงเวบไซตภายนอกใหแนใจวาการเชอมโยงเปนสำาคญใหผชมของคณ

ตองแนใจว�ขอคว�มลงคชดเจนลงคเปนคย เอกสาร Internet พวกเขาใหเขาชมการตดสนใจทพวกเขา

ตองการจะไปและสงท พวกเขาตองการอาน พวกเขาชวยใหคณสามารถเกบไฟลขนาดเลกจงทำาใหพวกเขารวด เรวในการโหลด ขอความลงคทเขยนเพอใหชดเจนและถกตองแสดงเนอหาเปา หมายของ

ให เพยงคำ�ไมกคำ�ทลงคทใชง�นขอความทเชอม โยงจะตองอานอยางรวดเรว ทำาเพยงไมกคำาสำาคญทใช

งานอย

ตวอย�งไมด :วางลงคในยอหนาสามารถทำาใหงายตอการเสนอเนอหาท แทจรงของ

การเชอมโยงและบรบททคณแนะนำาลงคทจะไป


ตวอย�งทด :วางลงคใน ยอหนาสามารถทำาใหงายตอการเสนอเนอหาทแทจรงของ

การเชอมโยงและ บรบททคณแนะนำาลงคทจะไป

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

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

นอกจากนถาคณใชคำาเหลานแทนการเคลอน ไหวเชงเสนผานเวบไซตของคณจำาไววาถาคณเพมหรอลบสวนทคณตองบนทก ลงคเหลานบนหนาเวบกอนหนาและตอไปนหนาเวบไซตมการเปลยนแปลง

หลกเลยงก�รใชคำ� คลก"ทน"พยายามเชอมโยงของสวนทวไปของประโยค นอกจากนอยาลมวา

"คลก" แสดงถงการใชเมาส บางคนอาจใชแปน พมพแทนทจะเมาสเพอเชอมโยงลงคไมกล�วว� :

คลกทนเพอ เรยนรเกยวกบการเชอมโยงควรกล�วว� :

ลงคใหควบคม ผเขาชมกวาสงทพวกเขาเรยนร

หลกเลยง ก�ร "กลบไปท ... "ไมใชถอยคำาทแสดงลำาดบหนาบางหรอไหล คณไมทราบวาผ เขาชมมา

ถงหนาจงไมควรใชทมความหมายวา "กลบ"

ใหแนใจว�ผ เข�ชมส�ม�รถแยกแยะระหว�ง เยยมชม และลงคใหม


ถาคณไมใชสการ เชอมโยงมาตรฐาน (มวงแดงและสนำาเงน) ใหแนใจวาสทคณเลอกใชสำาหรบขอความปกตและลงค - Visited และ unvisited - จะแตกตางจากกนพอทผเขาชมไมสบสน

อธบ�ยก�รเชอมโยงทกไฟลขน�ดใหญสองรปแบบของการบนทกยอเปนประโยชน กอนเตอนผเขา ชมเกยวกบ

ขนาดของไฟลขนาดใหญใดๆ สองอธบายสงทพวกเขาจะหาทเชอมโยง (ดรปท 11.4)

รปท 11.4 ตวอยางบนทกยอขนาดของไฟลจาก http://circus.compuware.com/ © 1996, Compuware Corporation

ใชลงคภ�ยใน สำ�หรบหน�ย�วบนหนาเวบทยาวเปนสถานท, รายการของการเชอมโยงไปยงเนอหา

หลายอน ทดานบนของหนาเวบไซต ผเขาชมอาจไม ทราบวามการเชอมโยงภายในเอกสาร พวกเขากรวาการเชอมโยงเหลานอยางรวด เรว

รกษ�คว�มถกตองก�รเชอมโยงภ�ยในเมอคณเพมและลบจากไซตของคณการเชอมโยงของคณ อาจตองม

การปรบปรง ตองระวงโดยเฉพาะเกยวกบการเพมและการลบหนาถาคณใช ตอไปและกอนหนาปม

ซอนลงคภ�ยนอกคณอาจไมตองการ ใหคนออกจากเวบไซตของคณไปตามลงคภายนอก

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


ตรวจสอบและแกไขลงคภ�ยนอกบอยสถานทเปลยน Sites, เลกอยหรอเปลยนแปลงเนอหา ตรวจสอบการ

เชอมโยงของคณอยางสมำาเสมอและ update ไดตามตองการ

เค�โครงหน�การออกแบบรปแบบ ของอนเทอรเนตและอนทราเนตหนาจอจะแตก

ตางจากการออกแบบรปแบบ Hardcopy และจากการประยกตใชคอมพวเตอรอนๆ สวนนจะครอบคลมหลกการรปแบบหนาเฉพาะสำาหรบการใชงานอนเตอรเนตและอนทราเนต

เนอห�ทสำ�คญทสดใหอยด�นบนมากบางคนเลอนดขอมลดานลาง ทแสดงบนหนาจอเรมตนของหนาเวบ

คณตองวางสงทคณตองการใหดทดานบนของหนา ลงคสำาคญควรอยทดานบนของหนาเวบ

รวมถงองคประกอบของหน�ม�ตรฐ�นรปท 11.5 แสดงองคประกอบมาตรฐานททกเวบเพจควรม องค

ประกอบเหลา น

- ชอหนาในแถบชอเบราวเซอร

- ชอของหนา

- เชอมโยงไปยงพนทหวขอหลกในเวบไซต

- เชอมโยงไปยง ตวบรษท

- เชอมโยงไปยงหนาคนหาและแผนผงเวบไซต

- เชอมโยงไปยง หนาลขสทธ

- อเมลเวบมาสเตอร


รปท 11.5 หนากบองคประกอบมาตรฐานจาก http://circus.compuware.com/ © 1996, Compuware Corporation

ไวหน�แรกเพอเข�หน�จอแสดงสวนสำาคญของหนาแรกของคณบนหนาจอเบราวเซอรหนงโดย

ไมตองเลอนท 640 x 480 ความละเอยดดงแสดงในรปท 11.6

รปท 11.6 เกบโฮมเพจหนงหนาจอ http://www.ywcaogm.org/ © 1996, YWCA of Greater Milwaukee

ขอมลเพมเตมอาจรวมในหนาแรกทดานลาง เสนแบงหนาตางถาไมไดสำาคญกบการใชเวบไซตดงแสดงในรปท 11.7


รปท 11.7 สถานทขอมลเพมเตมดานลางเสนแบงหนาตาง http://www.ywcaogm.org/ © 1996, YWCA of Greater Milwaukee

เอ�ใจใสเพอแบงหน� แมวาคณจะไมสามารถควบคมมากการจดหนาคณตองไปสนใจกบ ท

หนาเวบของคณอาจจะแบงในคำาอน ๆ ทดานลางของหนาตางหากหนาของคณจะปรากฏใหพอดทงหมดในพนททมองเหน แตจรงๆ

ขยายลงมโอกาสทผเขาชมจะไมเหนสวนทเหลอของหนา พวกเขาจะคดวาสงทพวกเขาเหนคอทงหนาเวบ จดบลอกขอความหรอกราฟกทจะขยายดานลางผเขาควรทราบวาจำาเปนตองเลอนไป

ตดสนใจบนหน� เวบย�วกบหน�สนดวาผเขาชมจะใชแตละหนา เมอคณตดสนใจวาควรจะใชหนายาวโหลดชา

กวาหนาสน แตถาผเขาชมจะตองมขอมลและม โมเดมชาหนายาวอาจจะโหลดเรวกวาหนาขนาดเลก (ดตาราง 11.1)

หากผเขาชมของคณ ... คณควร ...ตองการหาขอมลเฉพาะอยางรวดเรว

สรางการเชอมโยงหลายหนาสน

ตอง เขาใจแนวคดทงหมดโดยไมหยดชะงก

ปจจบนแนวคดทงหมดในหนาเดยวกบการ เชอมโยงภายในเพอ subtopics

ตองการพมพทงหมดหรอสวนของเนอหาท อานครบ

ใชหนงหนายาวหรอเตรยมรนทใชหนา เดยว


จะโหลด ชากวาโมเดม แตไมจำาเปนตองทกหนาของขอมล

สราง หนาเนอหาครอบคลมกบลงคไปยงหนาสนมาก

ต�ร�ง 11.1 การกำาหนดความยาวหนา

พกหน�ย�วขน เปนหนวยเลกปองกนการเขยนเทคนคการแบงหนาออกเปนหนวยเลก ทำาเชนนไมวา

คณจะออกจากหนายาวหนงหรอเชอมโยงไปใหเปนหนาแยก

ใชต�ร�งใชตารางในการออกแบบแตละประเภทหนาในเวบไซตของคณเพอให

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

พจ�รณ� ใชต�ร�งตารางเปนวธทดทสดใน HTML เพอควบคมการแสดงผลหนาเวบของ

คณ คณสามารถจดวตถและขอความสรางพนท แนวตงและแนวนอนและการควบคมตำาแหนงของภาพ เบราวเซอรสวน ใหญตอนนสนบสนนตาราง แตคณกยงอาจมการสรางรนไมใชตาราง ของหนาเวบสำาหรบผใชเบราวเซอรขอความเทานน

เกบคว�มย�วส�ยสนเปนสงสำาคญ เพอใหความยาวสายไมเกนประมาณสองตวอกษร ซง

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

ใชต�ร�งเพอแสดงล�ยเสน


ตาราง ในปจจบนเปนทรจกกนมากในหนาเวบกราฟก เปนสงหนงทงายในการควบคมขนาดเสน ใชสำาหรบจำากดตารางใหมขนาดทพอด เมอเราไปดในหนาจอทมขนาดใหญ คณสามารถใชคอลมนวางไวเพอสรางพนทสขาวหรอกราฟก

อปสรรคทตารางเปนขอความทเบราวเซอรไมสามารถแปลได สำาหรบผทใช Lynx หรอเบราวเซอรทมคณสมบตอน ๆ nontable คำาและประโยคในตารางเปน jumbled ผเขาชมเหลานไมสามารถเขาใจขอมลของคณได

พจ�รณ�ใชต�ร�งเพอใหขอมลสนลงตอนนเบราวเซอรจะแสดงผลเปนแบบกราฟกมากทสด การใชตารางก

จะเปนวธทงายวธหนงในการควบคมจำานวนขอความโดยกำาหนดคาของตารางใหพอดกบหนาจอ และคณสามารถใชคอลมนทวางในการสรางพนเวนวรรคในงานกราฟก

ขอเปรยบเทยบของตารางเปนขอความ เบราวเซอรไมสามารถแปลได สำาหรบผทใช Lynx หรอเบราวเซอรทมคณสมบตอน ๆ คำาและประโยคในตารางจะมลกษณะเปน jumbled ผเขาชมเหลานไมสามารถเขาใจขอมลของคณได

ใชแมแบบหากเบราวเซอรของคณสนบสนนแมแบบ คณจะไดมการควบคมมากขน

ในแตละหนา แตจำาไวเมอคณใชแมแบบทคณออกแบบคอวาคณกำาลงทำางานในโหมดออนไลนไมไดทำาในกระดาษ

ใหเหลอพนทว�งพอเหม�ะสมประมาณ 30 เปอรเซนตในหนาเพจนนๆมขอความ สวนทเหลอของ

พนททควรจะมพนทสขาวและกราฟก แมวาคณจะใชกราฟกจำานวนมากกยงคงใหหนาเวบนนๆมความสะดวกในการมองเหนของผทเขามาใช


ใหระยะห�งแนวนอนเม�ะสมโปรดใชพนทแนวนอนใหพอเหมาะกบหนาจอเพอใหผชมสามารถงายตอ

การเปด

ใชภ�พและขอคว�มทมคว�มหม�ยใกลเคยงกนในหลกการของการออกแบบ ผเขาชม จะถอวาการเชอมตอระหวางวตถ

รวมถงการบลอกขอความทใกลกน คอองคประกอบทสำาคญของหนาเวบ ดงนนภาพทใกลเคยงกบขอความใชใหผใชจำาไดงาย

ใชแนวนอนเท�ทจำ�เปนกฎระเบยบของหนาควรใชพวกเขาเมอสงทคณตองการจะทำา เชนแยก

สวนหวและทายในขนาดมาตรฐาน ขอมลจากเนอหาของหนาเวบหรอเครองหมายเรมตนและสนสดของฟอรม

จดกลมร�ยก�รในฟอรมจดกลมชองรายการทเกยวของในฟอรมและวางแบบฟอรมเพอใหมการ

จดลำาดบใหถกตอง

จดกลมของลทททมคว�มย�วม�กๆแบงรายการยาวของการลงคใหเปนกลมตรรกะ ทจำาวา "เจดบวกหรอ

ลบสอง" มนษยสามารถจำาระหวางหาและเการายการในแตละครง เวลาลองจำากไมเกนเจดรายการในแตละกลม (ดรป 11.8)


รปท 11.8 กลมของลททเมน. © 1996, YWCA of Greater Milwaukee.www.ywcaogm.org.

ใชก�รเยองการเยองในการแขวนเปนเครองมอสำาคญสำาหรบนกออกแบบเวบไซต

พวกเขาใหความชดเจนในการแยกรายการเปนรายการซอนใหขอมลและชวยสรางพนทสขาวเพมเตม มหลายวธในการสรางตาราง เชน Block quotes แทกรายชอแทกรายการไมมรายการแทกรายการ GIFs ชดเจน space holders, และความละเอยดรายการ เชนดรายชอการจดกลมในรปท 11.8

พจ�รณ�ก�รออกแบบสญลกษณแสดงหวขอยอยถาคณใชกราฟกสำาหรบสญลกษณแสดงหวขอยอยใหใชเครองหมาย

ดอกจนแทนขอความ ทางเลอกคอเพอใหภาพทปรากฏเปน Bullet สำาหรบเบราวเซอร ในตารางการใชเพอใหแนใจวาคณเกบเยองหนา

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

จะเสยการสนใจหนาเวบของคณไดถาคณมหนาเวบเพจทยาวเกน 3 หนาถาพวกเขาสนใจแลว เขากจะทำาการปรนอานเอง


ไมควรใหมก�รเลอนในแนวนอนหากผเขาชมเวบไมชอบเลอนแนวตงคณสามารถตรวจสอบวาพวกเขาจะ

ไมชอบเลอนแนวนอนเหมอนกน การออกแบบสำาหรบการแสดงผล 640 x 480 และทดสอบ ตรวจสอบวาตารางและกราฟกเหมาะสมในบรเวณน

ชอหน�และหวหน�เวบในทกหนาเวบ การจะทำาใหคนสนใจไดนนขนอยกบชอหนาเวบและสวนหว

จะชวยใหคนเขาชมสนใจและอยากจะกลบมาหนาเวบของเราอก

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

เนอหาหนา ชอความหมายชวยปองกนความรสกของการสญเสยในเวบไซตของคณ

กำ�หนดแตละหน�มหวชอหนาแตละความตองการชอทชดเจนอธบายถงเนอหาของหนานน ชอ

เหลานมกจะเขยนใน HTML เปน <h1> (ประเภทหนง)

ใชชอทหวขอนนใหเหม�ะสมกบเวบไซตและเพจทเฉพ�ะเจ�ะจงใน HTML code การออกแบบขอความจะแสดงผลในหวของหนาจอ

หลายการคนหาใน Search engines เมอพวกเขาตองการกลบการสบคน ชวยหากผเขาชมเหนชอเวบไซตในรายการนแทนทจะตองไปทหนาของคณอานหวเรอง นอกจากนเนองจากผเขาชมอาจมาจากทกหนาเวบของคณกตองรวาเวบไซตหนานเปนเวบเฉพาะ (ดรป 11.9)

รปท 11.9 แถบชอเรองมชอเวบไซตและชอหนาจาก http://circus.compuware.com © บรษท Compuware


ใชหวขอใหชวยผเข�ชมคนห�ขอมลข�วส�รเพอผเขาชมตองการไดอยางรวดเรวสแกนหนาสำาหรบขอมลเฉพาะทเขา

ตองการ ชวยใหพวกเขาโดยเขยนในสวนเลก ๆ และใสปายชอหรอหวเรองของขอความ ใหแนใจวาหวขอเหลานอยางถกตองสะทอนใหเหนเนอหาของขอความตอไปน

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

ใหญสดในหนานนๆ

เฟรม และ หน�จอเฟรมมวธการแบงหนาจอเปนสวนๆ กรอบแตละพนทดำาเนนการแยก

ตางหาก ดงนนในขณะทเลอนเขาหนาตางอนสามารถยงคงมองเหนและคณสามารถสรางหมายเลขใด ๆ ของเฟรมเกอบ Windowing สามารถให JavaScript ในเฟรมเพอใหมการโตตอบ ถาคณใชพวกเขาตองแนใจวาเรองการทดสอบการใชงานใหกวางขวาง

ใชเฟรมดวยคว�มระมดระวงผใชเวบหลายคนสบสนในเฟรม วธการทำางานของเฟรมขนอยกบรนเวบ

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

ไมควรใชหน�ต�งหล�ยอน เวนแตจะเพมฟงกชนก�รทำ�ง�นใช Windows รองเพมฟงกชนการทำางานในเวบไซตของคณ รปท

11.10 แสดงวธการใชสำาหรบขอมลเพมเตม, ภาพ, หรอเมน


รปท 11.10 ในใบสมครนคลกอานในสวนของเสนทางรถไฟและหนาตาง JavaScript รองเปดใหขอมลในสวนของเสนทางท Corporation © 1996, Compuware http://circus.compuware.com/

จำ�กด จำ�นวนหน�ต�งหรอ 2 เฟรมประม�ณในหนาจอขนาด 640 x 480 ขอมพนทจำากดในงานอสงหารมทรพย

หากคณแบงพนทการแสดงผลออกเปนมากกวาสองหนาตางหรอเฟรม คณลดพนทแสดงเนอหามากเกนไป ทำาใหผเขาชมรสกเหมอนพวกเขากำาลงมองผานร

พจ�รณ�เฟรมสำ�หรบองคประกอบองคประกอบทงหมด เชน เปาหมายการเดนทางและการรวมเมองและ

การทำา Link เมล สามารถวางบนเฟรมทแสดงบนหนาจอ โดยทเนอหาจากการแสดงขอมลน แตคณควรมบางขอมลมาตรฐานในทกหนา (ดรป 11.11)


รปท 11.11 รปเมนในกรอบดานซายเปนเมนยอย สวน เนอหาจะอยในกรอบขวาดวยการเลอกทำาในดานซาย

พจ�รณ�กรอบสำ�หรบ Pop - up ขอคว�มคณ สามารถออกแบบเฟรมของคณเพอใหเชอมโยงจากหนาเนอหาหลก

จะแสดงจำานวนเลกนอย ขอความ pop - up ในกรอบขนาดเลกดงแสดงในรปท 11.12

รปท 11.12 การเปลยนแปลงลางขวาหนาตางเปนคลกอานในตวเลอกในหนาตางหลก

ใชเฟรมเพอเกบขน�ดของขอมลหากคณออกแบบเวบไซตดวยเฟรมคณสามารถใชพวกเขาเพอใหเสน

ขอความสนในหนาตางหลกของเวบไซต

ระวงขน�ดหน�ต�ง นกทองเทยวหลายคนบนวาเฟรมลดขนาดหนาตางเนอหามากเกนไป

โดยเฉพาะอยางยงเมอออกแบบไดใชพนทเกนสองเฟรม

ภ�พกร�ฟกก�รใชภ�พกร�ฟกนนตองใชใหถกตองและเหม�ะสมกบขอคว�มดวย

ใหคลองจองกนเพร�ะจะชวยใหง�ยตอก�รจำ�


กร�ฟกทใชเพอวตถประสงคการใชกราฟกควรใชใหถกตองตามวตถประสงคของงานนนๆ ดวย

ขอคว�มทใชกบกร�ฟกกราฟกสวนใหญจะไมชดเจนทนททผใช ไมใชวาออกแบบไมด แตควร

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

มผใชหลายคนทเจอกบเวบไซตทภาพกราฟกไมทำางานหรอไมแสดงผล และยงมผใชอยางนอยทยงคงจะใชบราวเซอรกบขอความเทานน การใชขอความเปนทางเลอก ทางเลอกหนงทสำาคญทปองกนขอผดพลาดทจะเกดขนกบหนาเพจของคณเมอภาพกราฟกไมทำางานหรอไมแสดงผล ดงรปท 11.13 และ 11.14

รปท 11.13 หนาเพจแสดงรปภาพจากเวบไซต http:// circus.compuware.com/ในป 1996 ขององคกร Compuware Corporation

รปท 11.14 แสดงหนาเพจทไมทำางาน ในป 1996, ขององคกร Compuware Corporation


เบราวเซอรทแตกตางกนจะรกษาขอความทางเลอกทแตกตางกน Internet explorer จะแสดงใหผเขาชมภาพและขอความอนๆ ขอความจะปรากฏเชนเดยวกบ ขอความวธใชทแสดงเมอเคอรเซอรอยเหนอไอคอนในผลตภณฑ Microsoft คณสามารถใชเพอเพมมลคาใหกบภาพตราบเทาทคณไมใสขอมลสำาคญในนน

Netscape ไมแสดงขอความทคณเลอกหากภาพมการแสดง คณจะเหนวาถาคณมภาพกราฟกไมทำางานหรอไมแสดงผล

เบราวเซอร Nongraphical แสดงขอความอนในบรรทดเดยวกบขอความอนๆ หากคณกำาลงเขาหนาเวบของคณขอความทเลอกจะแสดงไดดกบขอความปกตของคณ

ภ�พซำ�เมอเวบบราวเซอรทำาการโหลดภาพนน จะทำาการเกบขอมลไวใน

ฮารดดสกในแคช เมอคณมความตองการมนอกครงจะทำาการเรยกขอมลมาจากแคช ซงจะชวยลดภาวะอน

ก�รใชภ�พเปนตวชวยในก�รนำ�ท�งภาพกราฟก จะชวยใหผเยยมชมสรางกรอบความคดเกยวกบขนาดงาน

ขององคกรนน

ก�รใชภ�พกร�ฟกเปนพนทแสดงเนอห�คณสามารถใชรปภาพเพอแสดงพนทเนอหาหลกของเวบไซตของคณได

หนงทผเขาชมทวไปตองการคลายๆกนคอ ความรวดเรวในการแสดงผลของรปภาพทรวดเรวกวาขอความ และความสอดคลองและใชภาพเดยวกนสำาหรบพนทเนอหาเดยวกบตลอดทงเวบไซต


รปท 11.15 ภาพทใชในหนาแรกเปนรายการเมนและบนหนาเนอหาเปนไอคอน. http://www.ywcaogm.org/ ในป 1996 , YWCA of Greater Milwaukee.

ก�รใชภ�พกร�ฟกสำ�หรบแบบอกษรพเศษพ�ดหวถาคณตองการใชตวอกษรศลปะหรอพเศษคณสามารถสรางใน

โปรแกรมกราฟกแลววางไวในไฟลของคณเปนรปมตแมป เทคนคนชวยใหคณสามารถใชอกษรทคณตองการไมวาเปนในระบบของผใชหรอไม

ก�รใชกร�ฟกสำ�หรบร�ยก�รใชกราฟกทจะทระบแตละกลม กราฟกทเกยวของอยางชดเจนกบเนอหา

ของรายการจะชวยใหผเขาชมไดอยางรวดเรวเขาใจในโครงการขององคกร

ขอจำ�กดม�กม�ยเกยวกบภ�พขอจำากดเชน จอภาพ 16 ส หนวยความจำาตำาแบรนดวช เครอขายจำากด

คนทตาบอดสและยากจนมผลตอการมองเหนผลกระทบของภาพและพนหลงมตอผชมของคณ

ก�รใชรปขน�ดยอสรางรปภาพขนาดเลก (ไมเพยง rescale ภาพขนาดใหญในรหส

html) เพอใหมขนาดไฟลเลกใชคณภาพตำาสดนนคอภาพกฟ ถาเมอมการโหลดภาพกฟซงมขนาดเลกจะโหลดอยางรวดเรวเพราะขนาดไฟลทเลก ผเขาชมสามารถเลอกวาจะไปทภาพขนาดใหญคณภาพสง หรอภาพขนาดเลก สามารถทำาใหผเขาชมสามารถเลอกขนาดไฟลทเชอมโยงได (ดงรปท 11.16)

http://www.ywcaogm.org/


รปท 11.16 การใชรปขนาดเลกเพอลงคไปยงรปภาพขนาดใหญ ทมา มาจาก http://ywcaogm.org./ © 1996, YWCA of Greater Milwaukee.

ขน�ดของภ�พทฟกจำ�กดบนหน�จอควรจำาไววามผเขาชมสวนมากใชความละเอยด 640*480 เพอใหแนใจ

วาคนเหลานสามารถดภาพของคณโดยไมตองเลอนแนวนอน การจำากดภาพของคณขนาด 600 พกเซลหรอนอยกวานน

บราวเซอรมสวนชวยใหคณสามารถกำาหนดขนาดของรปภาพเปนรอยละของหนาตางเบราวเซอรตวอยางเชน คณสามารถพดไดวาคณตองการรอยละ 80 ของความกวางของหนาตาง (จากความสงไมระบ) และทดสอบในบราวเซอรอนๆ กอนการดำาเนนการนน

คว�มเปนไปไดในก�รใชรปภ�พขน�ดเลกการทำาพนหลง สำาหรบการใชรปภาพ Gif หรอ รปภาพ Jpeg ซงสง

เหลานนจะทำาใหความสามารถในการโหลดรปภาพชาหรอเรวนน แนนอนวาความเปนไดทวารปภาพขนาดเลกนนจะสามารถโหลดไดอยางรวดเรวกวา

ก�รว�ดภ�พอย�งง�ยรปภาพหรอภาพวาดจะทมรายละเอยดทนอยกวาการดภาพออนไลนนน

มนจะโหลดไดเรวกวา หากผเขาชมบางรายตองการรายละเอยดเพมเตมทมรายละเอยดมากกวาใหพวกเขาเชอมโยงไปยงรายละเอยดของภาพทดกวาน

ก�รใชภ�พขน�ดตำ�


Netscape สนบสนนแทกภาพทชวยใหคณสามารถโหลดภาพขนาดเลก เชน ขนาดภาพสดำาและสขาวของภาพแรกของคณ กโหลดรนส แทกนเปนวธการใหผเขาชมเหนผลอยางรวดเรวในขณะทโหลดหนาเวบอน เบราวเซอรทไมเขาใจแทกทไมเพยงแคนน สำาหรบภาพ jpeg คณสามารถใชรปแบบความละเอยดตำาของภาพทเปนแหลงตำาแลวมรนความละเอยดสงกวานนมาได

ก�รสร�งอนเตอรเฟซจ�กภ�พกฟเทคนคนจะชวยใหภาพทเรมปรากฏในหนงในสของเวลาปกต ภาพจะถก

สงไปยงเบราวเซอรไมกบรรทดในเวลาเพอผเขาชมเรมเหนภาพเบลอมากทคอยๆลาง นจะสรางหนาเวบทรสกเหมอนจะโหลดไดเรวกวาหากพวกเขารอภาพทงหมดกอนทจะเหนอะไรทตองการ

ไมควรใสเสนขอบบนภ�พในโปรแกรมแตงภ�พคณสามารถใหภาพของคณมเสนขอบไดโดยเขยนโคดดวย HTML ซง

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

ก�รใชภ�พทโปรงใสบนพนหลงล�ยหากคณมรปภาพขนมาโดดๆลอยมนหนาเพจของคณ คณตองทำาพน

หลงใหมลกษณะโปรงใสกวารปภาพ อยางเชนวา รอบรปภาพจะมพนทวางๆ ตรงพนหลงเปนกรอบสเหลยม ซงทแสดงใหเหนเปนอยางนนเพราะวา ภาพ Bitmap เปนตาราง ทำาใหภาพโปรงใสเชนนจะลอยบนพนหลง ทดสอบบนแพลตฟอรมทแตกตางกนและจอภาพ

ก�รระบขน�ดภ�พใน HTML


ระบบบราวเซอรจะทำาการคำานวณตำาแหนงของภาพดวยสวนสงและขนาดความกวางในโคดแลวอยางรวดเรวแลวแสดงขอความบนหนาเพจ ภาพนนจะเพมการรอดวย หากมการเขาชมนอกจากขอความ

โปรดจำ�ไวว�ก�รคนห�นนจะไมสนใจภ�พเครองมอคนหาไมสามารถพบขอความทเปนสวนหนงของภาพใดๆได

การใชขอความทเปนทางเลอกและคำาทสำาคญจากขอความภาพในคำาหลก HTML Meta Tag เพอใหเปนเครองมอคนหาสามารถพบหนาทตองการได

พนหลงประสทธภาพของภาพพนหลงนนจะเพมคณคาใหแกผทเขามาเยยมชม

เวบไซตได โดยไมรบกวนผเขาชม ควรมองหารปแบบพนหลงทสนบสนนขอความของเนอหา

ก�รใชสพนหลงออนจะลดคว�มเขมขนลงสทมความเขมสง เชน สแดง สเขยวนำาเงน สมวงแดงเขม และสเขยว

สวาง ซงสเหลานจะกอใหเกดความเมอยลาในการมองตอตาอยางมาก เมอผเขาชมไดเขาไปดในระยะเวลาทยาวนาน ขอความสดำาบนพนหลงสดำา เปนอะไรทอานไดยาก สำาหรบสเหลานเหมาะกบเทคนคพเศษหรอเวบทเนนทางดานกราฟก

ควรหลกเลยงพนหลงทมลกษณะเปนลวดล�ยพนหลงทมลกษณะเปนลวดลาย จะทำาใหผเขาชมไมสบายตา หรอรสก

ทำาใหเสยสมาธ หรอนารำาคาญ และจะทำาใหรบกวนความสามารถของผเขาชมเพออานขอความอกดวย ควรจดใหมพนหลงหลายๆพนหลงหลายๆแสงสวางและควรดำาเนนการทดสอบการใชงานเพอใหมนใจวาไมทำาใหหนาเพจของคณ เปนเรองทยงยากตอการเขาชมเวบไซต


ก�รเลอกรปแบบพนหลงแบบสมการสมเลอกพนหลงนน ควรจะแสดงอยางราบลน รปแบบหนาจอท

ไมมการสมเลอกนนมกจะไมเปนอะไรทลอใจแกผเขาชมเพจของคณ

ควรหลกเลยงขอคว�มทใสล�ยนำ�ดจตอลการใชขอความตามรปแบบลายนำาหลงเนอหาของคณอาจสงผลกระทบ

ตอการอานของหนาเวบของคณ คณสามารถลดโดยระยะหางลายนำาออกและวางไวทมม แตการใชลายนำาหลงเนอหานนจะหลกเลยงความสนใจตอขอความในเพจของคณ (ดงรปท 11.17)

รปท 11.17 การใชพนหลงเปนลายนำาดจตอลซงมนจะแขงขนกบข อ ค ว า ม ต ว อ ย า ง น ม า ก จ า กhttp://ywcaogm.org./ © 1996, YWCA of Greater Milwaukee.

ควรใชสพนหลงเมอคณใชภ�พเปนพนหลงในขณะทผเขาชมรอภาพพนหลงทกำาลงโหลด, สพนหลงจะเตมหนาจอ

ใหผเขาชมทราบวาสงทกำาลงจะเกดขน ใชสทไปดวยภาพของคณเพอใหผเขาชมจะทำาไมประหลาดใจภาพเมอปรากฏ ไมมสพนหลงการแกไขคาเรมตนตวอกษรและสลงคไมทำางาน

จดจำ�ไวว�ผเข�ชมส�ม�รถตงค�สพนหลงเปนค�เรมตนได


ผใชสามารถเปลยนสพนหลงเรมตนกบเบราวเซอรกบสหรอพนหลงภาพทพวกเขาตองการ พวกเขาอาจจะเลอกใหพนหลงของพวกเขาแทนทการตงคาเอกสารของคณ ไมถอวาผทเขาชมมการดสทคณเลอก

ก�รทดสอบพนหลงจอภาพและแพลตฟอรมทแตกตางกนใชเทคนคทตางกนแสดงสเพอให

ภมหลงทแตกตางกนปรากฏบนจอภาพทแตกตางกนและแพลตฟอรม คณตองทดสอบพนหลงของคณในหลากหลายแสดงผล

สสำาหรบการประยกตใชอนเตอรเนตและอนทราเนตนนทำาให การใชสนน

เกดอสระ แนนอนวาจะทำาใหเกดประสทธภาพการใชสและไมเกดการเหยยดหยามกน

รกษ�คว�มคมชดสง

ขอความสดำาบนพนสขาวมความคมชดมากทสดและงายในการอาน ทคณเลอกสความคมชดนอยขอความของคณจะอานยาก

ใชพนทสขน�ดใหญสมำ�เสมอ

พนทขนาดใหญสเดยวกนเปนสงทดและใชประโยชนจากรปแบบ GIF ในภาพพนแขงทสแกนใหมสสมำาเสมอและสะอาดขน

คว�มลกของสลด ลดจำานวนสในภาพ GIF ทจำานวนตำาสดได แตยงคงคณภาพทยอมรบได ในหลายกรณ 50 สใหผลทยอมรบได ในภาพ JPEG ไมสามารถลดความลกของส แตคณสามารถลองคณภาพรนตำาของภาพและดวาทเปนทยอมรบได


ใชสจ�ก 216 สนบสนนเบร�วเซอรสวนใหญ

เบราวเซอรปจจบนสนบสนนเพยง 256 สและผเขาชมสวนใหญใชจอตง 256 ส Windows เองใชบางสเหลอเพยง 216 จรงสำาหรบภาพ Web Load ลกบาศกส (เรยกวา CLUT หรอตารางการคนหาส) จากเวบและใชเปนโปรแกรมกราฟกของคณในจานส

ใชจ�นสเดยวกนเพอภ�พทงหมดบนหน�เวบ เบราเซอรโหลดภาพไดเรวขนและขนาดหนาเลกลงหากคณใชจานสเดยวกนสำาหรบภาพทงหมดบนหนาเวบ ถาจำานวนรวมของสบนหนาของคณเกน 216 คณอาจจะเหนสแปลกตาในบางภาพเนองจากเบราวเซอรมเพยง 216 สทจะใชสำาหรบหนาทงหมด

หลกเลยง ก�รรวมจดส ยกเวนในภ�พถ�ย Dithering เปนกระบวนการสในคอมพวเตอรทลดสจากสอน ๆ รวมถงตวอยางใหม เพราะสนผสมตดของ, dithering สรางเบลอขอความและภาพวาดเสนและมนทำาใหยากสำาหรบกระบวนการ GIF เพอบบอดภาพ การใชงานสำารองสำาหรบภาพถายและภาพโทนตอเนอง ส ทดลอง

แพลตฟอรมทแตกตางกนและตรวจสอบการใชเทคนคทตางกนแสดงสเพอใหสแตกตางกนปรากฏบนจอภาพทแตกตางกนในแตละแพลตฟอรม เลอกทดสอบสทหลากหลายของคณ ยงจำาไดวาผเขาชมบางบางสวนหรอสมบรณบอดส Take ตาบอดสเขาบญชเมอคณเลอกส

แบบอกษร


โอกาสในการออกแบบแบบอกษรในอนเตอรเนตแตกตางกน ควรทำาตามแบบอกษรเหลานเพอใหแนใจวาหนาเวบของคณสามารถอานและเปนทนาสนใจได

ใชแบบอกษร Sans serif สำ�หรบอ�นออนไลน (ก�รเชอมตอผ�นเครอข�ยอนเตอรเนต)

ใช "Little feet" ในแบบอกษร เสรมแตงอน ๆ เชน บนหนาจอมกจะหายไปเพราะความละเอยดหนาจอทคอนขางตำา เกบไวเพอการใชแบบอกษรจนตนาการ, ออกแบบสำาหรบการพมพกระดาษความละเอยดสง สำาหรบหวขอ

ใชตวอกษรหน�เพอเนนโดยเฉพ�ะการใชตวหนาเปนเปนสงทสำาคญมากอกทางหนงโดยสำาคญกวาสงทอย

รอบ ๆ ขอความ ถาขอความตวหนาทมคาของคณเกดความเสยหาย, ถาคณรสกวาคณตองการตวหนาเพอใหโดดเดนบนพนหลง,คณควนพจารณาเปลยนพนหลง

ใชตวเอยงดวยคว�มระมดระวงตามมาตรฐานการพมพตวเอยงปกตใชงานไดสำาหรบชอหนงสอและคำาท

ใชเปนคำา หลกเลยงการใชตวเอยงบลอกขอความเพราะยากมากทจะอานออนไลน

ไมใชก�รขดเสนใตเบราวเซอรสวนใหญจะตงคาอตโนมตในการขดเสนใตลงค นเปน

ลกษณะขอความทสำาคญเพราะมคำาแนะนำาใหผเขาชมทอาจจะบอดส ถาคณใชการขดเสนใตมขอความทไมเชอมโยงผเขาชมอาจจะสบสนได นอกจากน มนยากทจะอานขอความไดอยางเขาใจ

ออกแบบสำ�หรบก�รเปลยนแปลงขน�ดแบบอกษรผเขาชมเวบสามารถเปลยนแบบอกษรและขนาดในการแสดง คณ

สามารถปดการรบเขาของเขตขอมลและคำาแนะนำาทกอใหเกดความลาชาของ


การแบงเขตขอมลในแตละแบบพจารณาการใชตารางมความกวางแบบ pixel จดตำาแหนงของฟอรมเพอไมสามารถเปลยนแปลงโดยการแสดงแบบอกษรตางๆคณยงสามารถนำาชอขางตนเขาไปในกลองได

ใชแทกตวอกษรเพอควบคมขน�ดตวอกษรใชแทกขนาดแบบอกษรในการควบคมขนาดสมพทธของแบบอกษรบน

หนาเวบอยาใชหวขอระดบการควบคมขนาดตวอกษรเพราะจะถกนำาเสนอทแตกตางจากเบราวเซอรทแตกตางกนสำาหรบบางกรณหวเรองขนาด 6 จะมขนาดเลกใน Netscape แตมขนาดใหญมากใน Mosaic เปนลกษณะเปนแผนไดรบการสนบสนนอยางกวางขวางโดยเบราวเซอร เรยนรวธการควบคมแบบอกษรทใช cascading รหสสไตลชต

ใชแบบอกษรเพอแสดงเอกลกษณองคกรแบบอกษรสามารถแสดงตวตนขององคกรของคณ แบบอกษรบาง

อยางสรางความทนสมย, ภาพไฮเทค, ขณะทคนอนมความหมายวาคลาสสคมาก, วธแบบดงเดม แบบอกษรมผลสำาหรบผเขาชมซงอาจจะวดไดยากและออนเกนไปแบบอกษรสามารถชวยใหคณสรางภาพทคณตองการวาดภาพแตอกษรเขากนกบเนอหาจำาไววาตวตนของคณจะไมเจอหากผใชไมได (หรอจะไม) อานเวบของคณ

อ�นง�ยแสดงผลการใชงานทคนไมชอบอานหนงสอออนไลนดงนนคณตอง

ทำาใหมนงายสำาหรบพวกเขา การอานออนไลนยากกวาการอานจากกระดาษเนองจากไดรบแสงสะทอนจากหนาจอความละเอยดของแบบอกษรตำา

ก�รเขยนเพอควบคมผเข�ชม


เขาใจวาผเขาชมเวบตองการควบคมการอาน คณตองทำาใหงายสำาหรบพวกเขาในการอานเฉพาะสงทตองการโดยการเขยนของคณจะตองกระชบและทสำาคญคองายตอการคนหาใหพวกเขาเชอมโยงไปยงหนาทมรายละเอยดและไมบงคบพวกเขา

กล�วครงเดยว,อย�งรวดเรวคนไมชอบอานหนงสอออนไลน ใหแนใจวาประโยคของคณจะตรงและสนขจดความซำาซอนและเปลยนวรรคขจดทกคำาและวลทไมจำาเปนใชสญลกษณเพอระบรายการ เขยนเพอความเขาใจอยางรวดเรว

ก�รพจ�รณ�สำ�หรบก�รออกแบบผเขาชม Online หาขอมลทตองการไมวาจะเปน หวเรอง กราฟก และ

สหรอขอความตวหนาทพวกเขาตอการ

ก�รเขยนในรปแบบทสนการเขยนในรปแบบทสนทไมเหน 4 หรอ 5 ประโยคควร (ยอหนา) เพอ

การมองทไมยาวมากนกและตรงประเดนมเพยงหนงหวขอในแตละอน และแนใจวาในประโยคไมนอกประเดนมากเกนไป

สร�ง เครองหม�ยทรดกมสำ�หรบขอคว�มในแตละอนใหแนใจวาแตละหวขอหรอเครองหมาย สำาหรบแตละประโยคสนและ

ชดเจน ถกตองตองแสดงเนอหาของแตละชน

ใชสไตลก�รเขยนใชง�นเขยนโดยตรงไปยงผเขาชมโดยใชคนทสองใชปจจบนกาลสนและตรง

มากขน หลกเลยงคำากำากวม เสยงทใชงานสรางประโยคสน งายตอการเขาใจไดอยางรวดเรว และชอทผกพน


เขยนขอคว�มเชงบวกเขยนขอความทงหมดของคณในการยนยนในการดวนตดสนและตรวจ

สอบขอความทมขอมลทสรางสรรคสงทผเขาชมตองทำา

ใชกระบวนก�รเขยนปกตสำ�หรบร�ยก�รเขยนไปตามธรรมเนยมปฏบตตามปกตเมอใชรายการใหถอยคำา

สอดคลอง - มรายการทงหมดในประโยครายการหรอวลแตจะไมรวมพวกเขาสอดคลองในวรรคตอนและใหญ

ม�รย�ทในก�รใชเครอข�ยอนเทอรเนตมหลกการบางอยางของการออกแบบ และเปนมารยาททควรปฏบตตาม

เมอทำางานบนเวบ

เกบขอมลปจจบนเกบเนอหาปจจบนและใหผเขาชมรบทราบวาจะปรบปรง วธการทวไปใน

การทำาเชนนคอการม"อะไรทใหมๆ "หนาหรอวางไอคอนถดไป ขอมลใหมบนหนาเวบทมอย

ว�ง"วนท"ปรบในสวนท�ยของคณสกลเงนของขอมลบนเวบเปนสงสำาคญ เพราะความสามารถในการเกบ

รกษาขอมลใหทนสมยเปนหนงในสถานททองเทยวหลกของเวบ ซงเปนทคาดหวงของผเขาชมใหพวกเขารเมอคณปรบปรงขอมลลาสด

ใหบ�งสงกบผเข�ชมทำ�ในขณะทพวกเข�รอถาคณใหขอความในเวบไซตของคณจะถอประโยชนของผเขาชมจะมผ

เขามามากขนในขณะทโหลดภาพของคณมการเชอมโยงขอความทปรากฏขนอยางรวดเรวสำาหรบผใชเวบไซตของคณ


วธสำ�หรบผทจะพดคยใหทงรปแบบการตอบสนองหรอวธการสงอเมลถงคณเพอใหผใชท

ตองการบอกสงทเกยวกบเวบไซตของคณใหแนใจวาไดประโยชนจากขอเสนอแนะทมคานความคดเหนของผเขาชมสามารถใหเบาะแสเกยวกบสงทดและสงทเปนปญหาเพอใหเกดความเปลยนแปลง หนาเวบโหลดชา, และเนอหาทไมถกตองหรออายเพยงไมกของสวนประกอบคนสอสารกบคณ

คำ�ตอบจดหม�ย (E-mail) ของคณถาคนสงจดหมาย (E-mail) คำาตอบนนถาเปนไปไดทกท

ห�มใชวสดอน ๆ หรอรหสไมไดรบอนญ�ตและสนเชอแมวากฎหมายลขสทธสำาหรบอนเทอรเนตยงอยภายใตการพฒนา เรา

ควรจำาในการใชมารยาททวไปจรยธรรมขนพนฐานและการจดตงลขสทธในการคดลอก หากคณสามารถดไดในเวบเปนลขสทธเวนแตผสรางวตถทมเฉพาะกลาววาจะไมใชทกคน ถาคณใชคนอนทำางานควรขออนญาตและใหเครดต

ขออนญ�ตกอนทจะเชอมโยงไปยงเวบไซตของบคคลอนเปนเรองปกตและเปนมารยาทตองขออนญาตกอนทจะเชอมโยงไปยง

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

รบอนญ�ตใหใชเครองหม�ยก�รค�และโลโกระมดระวงเกยวกบการใชเครองหมายการคา โลโก และประเภทภาพ

เครองหมายการคา บรษทบางบรษททใกลเปนเจาของอาจดำาเนนคดหากคณใชไมถกตอง ควรขออนญาตกอน

แสดงว�ขอมลของคณมลขสทธสงทดทสดคอเตอนผเขาชมวาขอมลของคณ รปภาพ และรหสของคณ

ไมควรนำาไปสรางหนาลขสทธและเชอมโยงไปจากหนาอน ๆ ของคณ


ระมดระวงเกยวกบเรองตลกระมดระวงในการใชอารมณขน ซงบางวฒนธรรมอาจจะไมชอบ โกรธ

เคองหรออาจไมเขาใจ

พจ�รณ�คว�มตองก�รของผพก�รหลายคนทมความทาทายทางใชจายมากเวลาบนอนเทอรเนตถงแมพวก

เขาอาจฟอรมสวนเลก ๆ ของผชมทมศกยภาพของคณคณอาจตองการพจารณาความตองการในการออกแบบเวบไซตของคณ ไปทเวบไซตทดำาเนนการโดยศนยประยกตเทคโนโลยพเศษ (http://www.cast.org)สำาหรบขอมลเพมเตม

มลตมเดยมลตมเดยมการกำาหนดความปกตในการสอสารรวมกนของสองคนหรอ

มากกวาสอพมพคำาวาคำาพด, เพลงหรอเสยงอน ๆ ภาพภาพเคลอนไหว VRML, และการโตตอบ พนทของการสอสารนมการเปลยนแปลงอยางรวดเรววาแนวทางเฉพาะเทคโนโลยใหมอาจลาสมยไดอยางรวดเรวใชออกแบบขนพนฐานและความรในการสรางสวนตดตอผใชหนาเวบทมมลตมเดย

พจ�รณ�มลตมเดยมลตมเดยใชดทสดจะตอบสนองความตองการของผเขาชมของคณเชน

- เมอกลางกรยาเปนวธธรรมชาตในการแสดงแนวคด- ในการเขาถงผชมทไมไดอานหรอผอานไมเปนทางหลกของการ

เรยนร- สำาหรบผชมระหวางประเทศ- การเสรมสรางการเรยนรและการจดจำาใหความชวยเหลอผาน

มากกวาหนงชอง


- ในการดงดดความสนใจไปยงองคประกอบบนหนาเวบ- แสดงความคดเหน- เพอแสดงวธการสงงาน

ใหคว�มสำ�คญกบหน�เวบเพจผเขาชมจะตองรวาจะดบนหนาของคณตรวจสอบวาคณไมสบสนไดโดย

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

พจ�รณ�สไลดโชวง�ยๆโดยใชเมตาแทก "รเฟรช" คณสามารถสรางสไลดโชวงายในเวบไซต

ของคณหรอแนะนำาเวบไซต สรางลำาดบสน ๆ งายๆบนไฟลทโหลดอยางรวดเรวแลวกำาหนดระยะเวลาในแทก แสดงโหลดแตละไฟล แลวถกแทนทดวยไฟลตอไป

พจ�รณ�ภ�พเคลอนไหวอย�งง�ยโดยใช GIFsภาพเคลอนไหวแบบ GIFs เปนเพยงชดของภาพรวมเปนไฟลเดยว

เหมอนภาพเคลอนไหวงายของเดกพลกหนงสอภาพเหลานโหลดไดเรวกวา Java และใหเคลอนไหวงายมประสทธภาพ

หลกเลยงก�รเคลอนไหวซำ�หลกเลยงการใชภาพเคลอนไหวขนาดเลกทมการเคลอนไหวอยางตอ

เนองในสวนของหนาจอ เวนแตจะมจดมงหมายในเวบไซตของคณสายตาของคนทดงการเคลอนไหว เพอใหผเขาชมเกดปญหา เพอมงเนนเนอหาในขณะทอานสายตาของพวกเขาจะวาดอยางตอเนองบางภาพซำา


ปญหาเกยวกบภาพเคลอนไหวเหลานจะรบกวนพวกเขาเพอใหผเขาชมคลกทลงค ผเขาชมจะมเวลาคลกในระหวางการทำางานของภาพเคลอนไหวซงอาจทำาใหเกดความขนมวมาก

วธปดเสยง Background sound ถาคณใช Background sound ซำา, ใหเปลยนวธการออก

ทรพยสนท�งปญญ�ระหว�งประเทศเอาใจใสกบเนอหาและการออกแบบของคณกบผเขาชมระหวางประเทศ

ก�รคดทวโลกคณควรทราบขณะนคณกำาลงสอสารระหวางประเทศ รปแบบการ

ออกแบบสำาหรบผชมระหวางประเทศ พจารณาประเทศอน ๆเมอตงเปาหมายและขอบเขตขอมลทอยและโทรศพท

ตงเวล�เมอระบเวลาของวนใด แสดงโซนเวลาทคณหมายถงเพราะทกคนไม

เขาใจคำายอโซนเวลาในประเทศอนๆ ซงเปาหมายทสำาคญของคณคอเวบไซตทวโลก (นวยอรก,ลอนดอน,ซดนย,หองกง และประเทศอน ๆ ) ยงระบการใชงานของระบบไดตลอด 24 ชวโมง ทงชวงเชาและชวงบาย

รวมรฐและประเทศทระบสถ�นทไมเพยงแคพดชอเมองเมอใหตำาแหนง ตวอยางเชน Portland ใน

Maine Oregon หรอประเทศองกฤษ

หลกเลยงก�รใชมอแทนกร�ฟฟดตำาแหนงมอหรอนว คอสงท เปนลบในบางวฒนธรรม สงทดทสดคอ

หลกเลยงการใชมอแทนไอคอนหรอปมกราฟก

ใชภ�ษ�องกฤษระหว�งผชมต�งประเทศ


ถาคณเขยนภาษาองกฤษและคณเขยน Consciously สำาหรบผชมระหวางประเทศ ใหคณใชภาษาองกฤษทงายและชดเจน หลกเลยงคำาทผดปกต, ศพทแสลงและคำาซำา ๆ ใหคำาจำากดความและตวอยางใชกราฟก เหลกเลยงอารมณขน ซงอาจจะแลวแตบางวฒนธรรม รวมถงหลกเลยง– ...... ระมดระวงเกยวกบการใชคำาเปรยบเทยบในแตละวฒนธรรม เชนฟตบอล (USA) หรอรกบ (England) เวบไซตทมคาเปน"คำาวาอาจจะสบสนและนาอายในสหราชอาณาจกรและสหรฐอเมรกา" ท http:/www.dur.ac.uk/~dgl3djb/ukus.html

bls.buu.ac.thbls.buu.ac.th/~athitha/321480/gui_ok/thai/%c3%c7%c1.doc · web viewหน าต...

Documents