concept of multimedia design by ratanapat

รตนพรรษ สุชาติ

คำนำ เอกสารประกอบการสอนวิชา แนวคิดการออกแบบมัลติมีเดีย เป็นเอกสารที่ได้จัดทาขึ้นเพื่อใช้ ประกอบการเรียนการสอนนิสิต ที่ลงทะเบียนเรียนรายวิชา 229221 แนวคิดการออกแบบมัลติมีเดีย ใน หลักสูตรศิลปกรรมศาสตรบัณฑิต สาขาวิชาคอมพิวเตอร์กราฟิกและมัลติมีเดีย ในระดับปริญญาตรี และ เป็นแนวทางสาหรับบุคลากรด้านการออกแบบมัลติมีเดียได้นาไปประยุกต์ใช้ในงานของตนเองต่อไป โดย ผู้เ ขีย นได้รวบรวมหลั ก การแนวคิด การออกแบบงานมัลติมีเ ดีย และความรู้เ บื้ องต้นด้านงานออกแบบ มัลติมีเดีย และถ่ายทอดลงในหนังสือเล่มนี้ เนือ้ หาภายในเล่มนี้แบ่งออกเป็น 10 บท ได้แก่ 1. ความรูเ้ บือ้ งต้นงานออกแบบมัลติมีเดีย 2. แนวคิดการออกแบบงานมัลติมเี ดีย 3. ปฏิสัมพันธ์ระหว่างมนุษย์กับคอมพิวเตอร์ 4. การออกแบบจากประสบการณ์ผู้ใช้งาน 5. หลักการออกแบบหน้าจอ 6. กระบวนออกแบบและสร้างงานมัลติมีเดีย 7. ระบบมัลติมีเดียและการออกแบบการกระทา/คาสั่ง 8. เทคโนโลยีมัลติมีเดีย 9. การประยุกต์ใช้งานมัลติมีเดียกับงานด้านอื่นๆ 10. ฮาร์ดแวร์และซอฟต์แวร์ที่นามาใช้กับงานมัลติมีเดีย โดยผู้เขียนหวังเป็นอย่างยิ่งว่า เอกสารประกอบการสอนเล่มนี้ คงมีส่วนช่วยให้ทุกท่านเกิดความรู้ ความเข้าใจในการออกแบบงานมัลติมีเดียและสามารถผลิตงานมัลติมีเดียที่มีคุณภาพเพื่อนาไปใช้ประโยชน์ ในงานของตนเองต่อไป

รตนพรรษ สุชาติ 14 กรกฎาคม 2560

สารบัญ บทที่ 1 ความรูเ้ บือ้ งต้นงานออกแบบมัลติมีเดีย 2 แนวคิดการออกแบบงานมัลติมเี ดีย 3 ปฏิสัมพันธ์ระหว่างมนุษย์กับคอมพิวเตอร์ 4 การออกแบบจากประสบการณ์ผู้ใช้งาน 5 หลักการออกแบบหน้าจอ 6 กระบวนออกแบบและสร้างงานมัลติมีเดีย 7 ระบบมัลติมเี ดียและการออกแบบการกระทา/คาสั่ง 8 เทคโนโลยีมัลติมีเดีย 9 การประยุกต์ใช้งานมัลติมีเดียกับงานด้านอื่นๆ 10 ฮาร์ดแวร์และซอฟต์แวร์ที่นามาใช้กับงานมัลติมีเดีย บรรณานุกรม ภาคผนวก ภาคผนวก ก แผนการบริหารการสอนและประมวลรายวิชา ภาคผนวก ข แบบประเมินการสอนโดยผูเ้ รียน

หน้า 1 13 29 45 62 86 96 106 129 139 154 155 156 166

บทที่ 1 ความรู้เบื้องต้นงานออกแบบมัลติมีเดีย หัวข้อเนื้อหาประจาบท 1. 2. 3. 4.

ความเป็นมาของมัลติมีเดีย รูปแบบของมัลติมีเดีย ส่วนประกอบของมัลติมีเดีย ประโยชน์ของมัลติมีเดีย

วัตถุประสงค์ 1. สามารถอธิบายความหมายและความเป็นมาของมัลติมีเดีย 2. สามารถอธิบายรูปแบบและส่วนประกอบของมัลติมีเดีย 3. สามารถแยกแยะประโยชน์ที่จะได้รับจากการนามัลติมเี ดียมาประยุกต์ใช้งาน เวลาเรียน สัปดาห์ที่ 1 กิจกรรมการเรียนการสอน 1. การบรรยาย 2. การอภิปรายและการซักถามเกี่ยวกับเนือ้ หาในบทเรียนร่วมกัน 3. กาหนดประเด็นปัญหาเพื่อศึกษาค้นคว้าเพิ่มเติม

1.1 ความเป็นมาของมัลติมีเดีย คาว่า “มีเดีย” หรือ “สื่อ” ในอดีตนั้น มักเป็นสื่อรูปแบบเดี่ยว (Single Form) ที่มกี ารถ่ายทอด เนื้อหาไปยังผู้รับสารเพียงช่องทางเดียว ไม่ว่าจะผ่านทางการมองเห็น ทางการฟัง หรือการสัมผัส ซึ่ง บ่อยครั้งไม่น่าสนใจ และอาจสร้างความน่าเบื่อหน่ายแก่ผู้ใช้ บางเนื้อหาก็ไม่สามารถถ่ายทอดให้ผู้ใช้ เกิดการรับรู้ที่ดีได้ ในปั จ จุ บั น ตามแนวคิ ด ของมั ล ติ มี เ ดี ย ค าว่ า “มั ล ติ มี เ ดี ย ” หรื อ ตามศั พ ท์ บั ญ ญั ติ ข อง ราชบัณฑิตยสถานว่า “สื่อประสม” หรือ “สื่อหลายแบบ” มีความหมายที่เปลี่ยนแปลงไปจากการใช้ วัสดุอุปกรณ์ร่วมกันหลายชิ้นในการนาเสนอ กลายเป็นการใช้ส่ืออิเล็กทรอนิกส์โดยเฉพาะคอมพิวเตอร์ ทั้งในส่วนของฮาร์ดแวร์และซอฟท์แวร์ เป็นเครื่องมือในการผลิตหรือเป็นเครื่องมือในการแสดงผล เพื่อ ถ่ายทอดข้อมูลข่าวสารที่ผสมผสานกันในหลายรูปแบบ เช่น ข้อความ เสียง ภาพนิ่ง ภาพเคลื่อนไหว วิดีโ อ ซึ่งก่ อให้เ กิ ดการรับรู้ที่หลากหลาย (Multisensory) ต่อกลุ่มเป้าหมาย ไม่ว่าจะเป็นการได้เห็น (Visual) การได้ยิน (Auditory) หรือแม้กระทั่งความสามารถในการปฏิสัมพันธ์โต้ตอบ (Interactive) กับ สื่อ แนวคิดเรื่องการผสมผสานสื่อจึงเกิดขึ้น โดยคาว่า Multimedia ถูกใช้ครั้งแรกในปี ค.ศ. 1966 ในรู ป แบบของการแสดงที่ ผ สมผสานระหว่ า งแสง สี ดนตรี และศิ ล ปะการแสดง ที่ เ รี ย กว่ า “The Exploding Plastic Inevitable” (ดังภาพ 1) โดยศิลปินชาวอเมริกันชื่อ แอนดี วอร์ฮอล (Andy Warhol) หากกล่าวถึงแอนดี วอร์ฮอล (Andy Warhol) เขาเป็นหนึ่งในผูน้ ากลุ่มศิลปะแนวป็อปอาร์ต (Pop Art) ที่ประสบความสาเร็จอย่างมากจนได้รับการยกย่องว่าเป็นหนึ่งในสัญลักษณ์ของงานแนวนี้ งานของ เขาสะท้อนให้เห็นถึงความสนใจในเรื่อง คนดัง วงการบันเทิง และการโฆษณาซึ่งกาลังเจริญรุ่งเรืองเป็น อย่างมากในช่วงยุค 60 หลังจากการประสบความสาเร็จในงานวาดภาพประกอบ แอนดีก็กลายเป็น บุคคลมีชื่อเสียงตามที่เขาหวังเอาไว้ งานของแอนดีมีหลายประเภทตั้งแต่งานมีเดียไปจนถึง ภาพเขียน ภาพจิตรกรรม ภาพพิมพ์ ภาพถ่าย ภาพพิมพ์สกรีน ประติมากรรม ภาพยนตร์ และดนตรี นอกจากนี้ เขายังเป็นศิลปินรุน่ แรกๆที่นาเอาคอมพิวเตอร์มาใช้ในงานศิลปะด้วย

ภาพ 1 ศิลปะการแสดง The Exploding Plastic Inevitable ที่มา http://www.see-this-sound.at/works/149

ประวั ติอย่างย่อๆ ของการใช้มัลติมีเ ดีย สาหรับ การสื่อสารเนื้อหาสาระ อาจจะเริ่มต้นด้วย หนังสือพิมพ์หรือสิ่งพิมพ์ ที่เรียกว่า เป็นตัวกลาง (Medium) สาหรับการสื่อสารมวลชนตัวแรกเลยก็ว่า ได้ โดยสื่อสิ่งพิมพ์จะใช้ตัวอักษรผสมกับภาพถ่ายหรือรูปภาพ ต่อมาในช่วงปี ค.ศ. 1970 นิยามของมัลติมีเดียได้ถูกนามาใช้ในลักษณะการนา “เครื่องฉาย หลายเครื่อง” (Multi-projector) มาใช้ร่วมกันกับเทปเสียง หรือการนาวัสดุ อุปกรณ์ประเภทต่างๆ เช่น เครื่องฉายสไลด์ เครื่องฉายภาพโปร่งใส เครื่องเล่นวีดีทัศน์ เทปเสียง มาใช้งานร่วมกันด้วยวิธีการต่างๆ อาจใช้ทีละอย่างเป็นขั้นตอนไป หรือใช้พร้อมกันทีเดียวก็ได้ ซึ่งในระยะแรก ยังใช้มนุษย์ในการควบคุม การทางาน ต่อมาจึงนาเอาระบบคอมพิวเตอร์มาเป็นตัวช่วยควบคุมการทางานของอุปกรณ์แต่ละชิ้น โดย วัตถุประสงค์ของมัลติมีเดียก็เพื่อให้เกิดความน่าสนใจมากขึน้ และช่วยให้ผชู้ มเกิดการรับรู้ที่หลากหลาย ทั้งการมองเห็น และได้ยิน ไปพร้อมๆ กัน แม้มัลติมีเดียในยุคแรกจะช่วยเพิ่ มศักยภาพในการสื่อสาร ได้มาก แต่ข้อจากัดก็คือกระบวนการผลิตและการใช้งานที่ยุ่งยากซับซ้อน เนื่องจากต้องทางานกั บ เครื่องมือที่หลากหลาย สาหรับภาพเคลื่อนไหวถูกคิดค้นในทศวรรษที่ 1980 โดยใช้เทคนิคการเปลี่ยนรูปภาพนิ่งอย่าง รวดเร็ว เพื่อลวงตาของมนุษย์ ในปีค.ศ. 1887 โทมัส อันวา เอดิสัน (Thomas Alva Edison) ได้ประดิษฐ์ กล้องถ่ายภาพเคลื่อนไหวขึน้ และเกิดภาพยนตร์ใบ้ข้นึ ระหว่างปี ค.ศ. 1910 ถึง 1927 ปี ค.ศ. 1895 กู ล เยลโม มาร์ โ กนี (Gugliemo Macroni) เป็ น วิ ศ วกรไฟฟ้ า ชาวอิ ต าลี ได้ ส่ ง สัญญาณวิทยุไร้สายเป็นครั้งแรกที่เมือง Pontecchio ประเทศอิตาลี หลังจากนั้นไม่นาน (ปี ค.ศ. 1901) เขาก็ค้นพบคลื่นวิทยุที่ถูกส่งข้ามทวีปแอตแลนติก นั่นเป็นที่มาของระบบการส่งโทรเลข (Telegraph) และวิทยุ จนกระทั่งมีนวัตกรรมโทรทัศน์ ซึ่งเป็นสื่อกลางใหม่ในศตวรรษที่ 20 เมื่อโทรทัศน์สามารถ สื่อสารด้วยวิดีโอได้ โทรทัศน์จงึ เป็นสื่อที่เปลี่ยนแปลงโลกแห่งการสื่อสารมวลชน สาหรับคอมพิวเตอร์และการเชื่อมโยงกันได้ของคอมพิวเตอร์หรือระบบอินเทอร์เน็ต เป็นสื่อที่ ทาให้ระบบมัลติมีเดียถูกเผยแพร่อย่างกว้างขวางทั่วโลกและเป็นที่นิยมของคนทั่วไป อันเนื่องจากใน ปัจจุบัน ที่ส ามารถนามาช่ว ยในการผลิต และเผยแพร่สื่ อได้ อย่ างสะดวก รวดเร็ว สวยงาม และมี ประสิทธิภาพ คอมพิวเตอร์เพียงเครื่องเดียวก็สามารถสร้างสื่อได้แทบทุกรูปแบบ เช่น การออกแบบ จัด หน้า ตกแต่งภาพสาหรับสื่อสิ่งพิมพ์ การตัดต่อ และแต่งเสียงหรือภาพสาหรับรายการวิทยุโทรทัศน์ รวมทั้งการสร้างชิ้นงานที่สามารถนาเสนอได้อย่างหลากหลายรูปแบบ ในตาราง1 จะแสดงวิวัฒนาการ ของคอมพิวเตอร์และระบบอินเทอร์เน็ตรวมถึงระบบมัลติมีเดีย ดังนี้

ปี ค.ศ.

วิวัฒนาการ

1945

ที่ MIT ภายหลังสงครามที่ทาให้นักวิทยาศาสตร์ต้องทุ่มเทกาลังความคิดไปกับการสร้างพลังของกองทัพ Vannevar Bush (1890-1974) เขียนบทความหนึ่งเพื่ออธิบายว่าอะไรคือระบบสื่อหลายมิติ (Hypermedia) ซึ่ ง ถู ก เรี ย กว่ า Memex ที่ มี ค วามหมายว่ า การใช้ ป ระโยชน์ อ ย่ า งเป็ น สากล (ทั่ ว ไป) และอุ ป กรณ์ หน่วยความจาส่วนตัวซึ่งรวมไปถึงแนวคิดเกี่ยวกับการเชื่อมโยง (Links) ด้วย มันเป็นจุดบุกเบิกของ www ใน ปัจจุบัน และภายหลังสงครามโลกครั้งที่ 2 นักวิทยาศาสตร์ 6,000 คน ได้เอาแนวคิดนี้มาพัฒนาต่อ ภายใต้ แนวคิดว่า อิสรภาพใหม่ (New freedom)

1960

Ted Nelson เริ่มต้นโครงการ Xanadu โดยเริ่มต้นมีความพยายามจะทาให้เป็นระบบ Hypertext ที่เนลสัน เรียกมันว่า “จุดวิเศษแห่งวรรณกรรม” (Magic Place for Literary Memory)

1967

Nicholas Negroponte ก่อตั้ง Architecture Machine Group ที่ MIT

1968

Douglas Engelbart ถูกชักจูงโดย Vannevar Bush เพื่อคิดค้นและสาธิตระบบ “On-Line System : NLS” เป็น อีกโปรแกรม hypertext หนึ่ง กลุ่มของ Douglas Engelbart ที่สถาบันวิจัยสแตนฟอร์ด ตั้งจุดประสงค์ “การ เพิ่มขึ้นแต่ไม่ใช่อัตโนมัติ ” เพื่อเพิ่มความสามารถของมนุษย์ต่อการใช้เทคโนโลยีคอมพิวเตอร์ NLS เป็น แนวคิดที่นามาใช้ในการพัฒนาการเชื่อมโยงข้อความ การสื่อสารทางไกลแบบสองทาง ซอฟท์แวร์ประมวล คา อีเมล เมาส์ ซอฟท์แวร์ลักษณะหน้าต่าง และระบบช่วยเหลือ

1969

Nicholas และ Van Dam ที่ Brown University สร้าง editor สาหรับ hypertext เรียกว่า FRESS

1976

Architecture Machine Group ที่ MIT ได้นาเสนอโครงการชื่อ “Multiple media” และได้ผลลัพธ์เป็นวิดีโอดิสก์ เป็นครั้งแรกชื่อ Aspen Movie Map ในปีค.ศ. 1978

1985

Negroponte และ Wiesner ได้ร่วมทุนกับ MIT Media Lab เพื่อวิจัยเกี่ยวกับดิจิทัลวิดีโอ (digital video) และ มัลติมีเดีย

1989

Tim Berners-Lee ได้นาเสนอระบบที่เรียกว่า World Wide Web ต่อ European Council for Nuclear Research (CERN)

1990

Kristina Hooper Woolsey หั ว หน้ า Apple Multimedia Lab ศึ ก ษาและพั ฒ นาระบบมั ล ติ มี เ ดี ย ส าหรั บ คอมพิวเตอร์ Macintosh

1991

MPEG - 1 ถู ก พั ฒ นาให้ เป็ น มาตรฐานสากลของดิ จิ ทัลวิดี โอ และมีก ารพั ฒ นาต่อ ในมาตรฐานใหม่เป็น MPEG-2 MPEG-4 และพัฒนาอย่างต่อเนือ่ งในทศวรรษ 1990

1991

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

5 1992

JPEG ถูกยอมรับให้เป็นมาตรฐานสากลของการบีบอัดรูปภาพดิจิทัล (digital image compression) และมีการ พัฒนามาตรฐานอย่างต่อเนื่องจนเป็น JPEG2000 ในปัจจุบัน

1993

Center for Supercomputing Application ของมหาวิทยาลัยแห่งอิลลินอยส์ ได้พัฒนา NSCA Mosaic ซึ่งเป็น เบราว์เซอร์ที่ดที ี่สุดตัวแรกสาหรับยุคอินเทอร์เน็ต

1994

Jim Clark และ Marc Andreessen ได้สร้างโปรแกรม Netscape

1995

ภาษาจาวา (Java) สร้างขึน้ มาเพื่อพัฒนาโปรแกรมประยุกต์ใช้กับคอมพิวเตอร์ทุกระบบ

1996

วิดีโอแบบ DVD ได้ถูกทาให้เป็นที่รู้จักในด้านคุณภาพสูง ภาพยนตร์จบในแผ่นรูปแบบDVDถูกนาไปใช้สาหรับ เพลงและเกมส์คอมพิวเตอร์ดว้ ย

1998

XML 1.0 ถูกประกาศให้ใช้ใน W3C

1998

เป็นปีแรกที่มีการฟังเพลงนามสกุล MP3 ด้วยอุปกรณ์มือถือ และมีหน่วยความจาแฟลชขนาด 32 MB เป็น ครัง้ แรก

2000

WWW มีการเผยแพร่ในอินเทอร์เน็ตมากกว่า 1 ล้านล้านหน้า

ตาราง 1 วิวัฒนาการของมัลติมเี ดีย 1.2 รูปแบบของมัลติมีเดีย จากแนวคิดของมัลติมีเดียข้างต้น สามารถสรุปได้ว่า มัลติมีเดียแบ่งออกได้เป็น 2 ประเภท ดังต่อไปนี้ 1.2.1 มัลติมีเดียเพื่อการนาเสนอ (Presentation Multimedia) มัลติมีเดียรูปแบบนี้มุ่งสร้างความตื่นตาตื่นใจ น่าสนใจ น่าติดตาม และถ่ายทอดผ่านประสาท สัมผัสที่หลากหลายผ่านตัวอักษร ภาพและเสียง ซึ่งในปัจจุบันพัฒนาถึงขัน้ ให้ผู้ชมสัมผัสได้ถึงความรู้สึก ต่างๆ เช่น ความร้อน ความเย็น การสั่นสะเทือน หรือสัมผัสผ่านจมูกด้วยการได้กลิ่น เป็นต้น เน้นการ นาไปใช้งานเพื่อเสนอข้อมูลข่าวสารที่ผู้ผลิตวางแผนการนาเสนอเป็นขั้นตอนไว้เรีย บร้อยแล้ว เช่น มัลติมีเดียแนะนาองค์กร การแสดงแสง สี เสียง โฆษณาเปิดตัวสินค้า หรือในลักษณะประกอบการ บรรยาย ส่วนใหญ่มักใช้ได้ทั้งการนาเสนอเป็นรายบุคคล และเสนอต่อกลุ่มใหญ่ ผู้ใช้จะทาหน้าที่เป็น เพียงผู้ชมสื่อ โดยที่ผู้ใช้และสื่อแทบจะไม่มีปฏิสัมพันธ์โต้ตอบกัน อาจจะมีบ้างก็ในลักษณะการกดปุ่ม Play หรือ Stop แต่ก็ ไ ม่ถือว่าเป็นการปฏิสัมพันธ์โ ต้ตอบ ซึ่งหากมองในรูปแบบของการสื่อสารแล้ว มัลติมีเดียลักษณะนีจ้ ัดเป็นการสื่อสารแบบทางเดียว (One way Communication)

1.2.2 มัลติมีเดียปฏิสัมพันธ์ (Interactive Multimedia) มัล ติมีเ ดีย เป็นรูป แบบนี้ เน้นให้ผู้ใ ช้สามารถโต้ตอบสื่อสารกั บ สื่อได้โ ดยตรงผ่านโปรแกรม มัลติมีเดียทีม่ ีลักษณะของสื่อหลายมิตหิ รือไฮเพอร์มีเดีย(Hypermedia) ที่เนื้อหาภายในสามารถเชื่อมโยง (Link) ถึงกัน มัลติมีเดียรูปแบบนี้ นอกจากผู้ใช้จะสามารถดูข้อมูลได้หลากหลายลักษณะเช่นเดียวกับ รูปแบบมัลติมีเดียเพื่อการนาเสนอแล้ว ผูใ้ ช้ยังสามารถสื่อสารโต้ตอบผ่านการคลิกเมาส์ แป้นพิมพ์ หรือ อุปกรณ์อื่นๆ เพื่อสื่อสารกับคอมพิวเตอร์ว่าผู้ใช้ต้องการอะไร เช่น หากต้องการทราบข้อมูลเพิ่มเติมก็ คลิกหัวข้อที่สนใจหรือสัญลักษณ์รูปที่ทาเป็นปุ่มในการเชื่อมโยง โปรแกรมก็จะแสดงภาพ เสียง หรือ คาอธิบาย เพื่อให้ศกึ ษารายละเอียดได้ หรือหากต้องการวัดความเข้าใจของตนเองเกี่ยวกับสิ่งที่ได้ศึกษา ก็สามารถทาการทดสอบผ่านแบบฝึกหัด เกม ข้อสอบ และให้โปรแกรมคานวณผลการทดสอบหรือให้ ข้ อ เสนอแนะเพิ่ ม เติ ม แก่ เ ราได้ มั ล ติ มี เ ดี ย รู ป แบบนี้ จึ ง จั ด เป็ น การสื่ อ สารแบบสองทาง ( Two way Communication) มัลติมีเดียปฏิสัมพันธ์ในระยะแรกมั กเป็นโปรแกรมคอมพิวเตอร์ที่บันทึกลงในแผ่นซีดีรอมและ นามาใช้งานบนเครื่องคอมพิวเตอร์เครื่องใดเครื่องหนึ่งเพียงลาพัง ซึ่งเรียกว่าแบบแสตนด์อะโลน (Stand Alone) ผู้ใช้งานจะศึกษาเนื้อหาจากข้อความ ภาพผ่านทางหน้าจอ และฟังเสียงจากลาโพง โดยโต้ตอบ ผ่านอุปกรณ์พื้นฐานคือ เมาส์และคีย์บอร์ด ปัจจุบันมัลติมีเดียปฏิสัมพันธ์ได้พัฒนาไปถึงลักษณะของ ความเป็นจริงเสมือน (Virtual Reality) ที่เสริมอุปกรณ์ต่างๆ เพื่อให้ผู้ใช้มองเห็นเสมือนหลุดเข้าไปอยู่ใน สภาพแวดล้อมนั้นจริงๆ เช่น เครื่องจาลองการขับเครื่องบิน เครื่องจาลองการฝึกผ่าตัด เครื่ องจาลอง การฝึกเล่นกีฬา เป็นต้น นอกจากนี้ มั ล ติ มี เ ดี ย ปฏิ สั ม พั น ธ์ ใ นปั จ จุ บั น ยั ง เพิ่ ม ความสามารถในการติ ด ต่ อ สื่ อ สารที่ นอกเหนือจากการโต้ตอบกับโปรแกรมแล้ว ผูใ้ ช้ยังสามารถโต้ตอบสื่อสารกับผูใ้ ช้คนอื่นๆ ที่ใช้โปรแกรม เดียวกันผ่านทางเทคโนโลยีระบบเครือข่ายคอมพิวเตอร์ทั้ งในระบบเครือข่ายขนาดเล็ก (LAN) หรือ แม้กระทั่งเครือข่ายอินเทอร์เ น็ต (Internet) ที่เชื่อมโยงโลกเข้าไว้ด้วยกั น ทาให้การใช้งานมัลติมี เ ดีย ปฏิสัมพันธ์ในปัจจุบันมีประสิทธิภาพสูงขึน้

1.3 ส่วนประกอบของมัลติมีเดีย โดยทั่วไปมัลติมีเดียประกอบด้วยสื่อการรับรู้ในรูปแบบต่างๆ ได้แก่ ตัวอักษร เสียง ภาพนิ่ง วิดีโอ ภาพเคลื่อนไหว และปฏิสัมพันธ์ ซึ่งมีรายละเอียดดังนี้ 1.3.1 ตัวอักษร (Text) รวมทั้งตัว เลข และสั ญ ลั ก ษณ์พิเศษต่างๆ นับ เป็นองค์ป ระกอบพื้นฐานของมัลติมีเดีย ซึ่งมี รูปแบบ ขนาด และสีที่มากมาย โดยที่มาของตัวอักษรอาจได้มาจากการพิมพ์ จากการสแกนหรือสร้าง เป็นภาพขึ้นมาด้วยโปรแกรมคอมพิวเตอร์ และลักษณะของตัวอักษรที่ใช้ในการเชื่อมโยงไปสู่ข้อมูลอื่นๆ ซึ่งเรียกว่า ไฮเปอร์เท็กซ์ (Hypertext) 1.3.2 เสียง (Sound) หมายถึง เสียงซึ่งบันทึกและเก็บไว้ในรูปแบบดิจิทัล ที่สามารถนามาเล่นซ้าได้ การใช้เสียงใน มัลติมีเดียเพื่อนาเสนอข้อมูล เช่น เสียงพูด เสียงบรรยาย ประกอบข้อความหรือภาพ หรือสร้างความ น่าสนใจให้มากขึ้น เช่น การใช้เสียงเพลงบรรยาย เสียงประกอบ (Sound Effect) ให้ต่นื เต้นเร้าใจ เป็นต้น 1.3.3 ภาพนิ่ง (Still Image) ได้แก่ ภาพที่ไม่มีการเคลื่อนไหว ซึ่งมีความสาคัญต่อมัลติมีเดียมาก เพราะสามารถถ่ายทอด ความหมายได้ดีกว่าข้อความหรือตัวอักษร ภาพนิ่งสามารถผลิตได้หลายวิธี เช่น ภาพที่ได้จากการ ถ่ายภาพ ภาพลายเส้นและกราฟิกที่ได้จากการวาดด้วยมือหรือโปรแกรมคอมพิวเตอร์ ภาพจากการ สแกน เป็นต้น 1.3.4 วิดีโอ (Video) เป็นสื่อรูปแบบหนึ่งที่นิยมใช้กับมัลติมีเดีย เนื่องจากสามารถแสดงผลได้ทั้งภาพเคลื่อนไหว และ เสียงไปพร้อมกัน ทาให้เกิดความน่าสนใจในการนาเสนอ แต่เดิมการนาวิดีโอเข้ามาใส่ในงานมัลติมีเดียมี ข้อจากัดหลายอย่าง เช่น ขนาดของไฟล์ที่มขี นาดใหญ่ซึ่งเปลืองพื้นที่ และอาจทาให้เกิดการกระตุกเวลา แสดงภาพ แต่ โ ดยเทคโนโลยี ใ นปั จ จุ บั น ท าให้ ส ามารถบี บ อั ด ไฟล์ ใ ห้ เ ล็ ก ลง โดยคงความคมชั ด เหมือนเดิม และประสิทธิภาพของเครื่องคอมพิวเตอร์ที่สูงขึ้นทาให้ลดอาการกระตุกลงได้ 1.3.5 ภาพเคลื่อนไหว (Animation) หมายถึ ง การนาภาพกราฟิก มาท าให้มีก ารเคลื่ อนไหว เช่น การเคลื่อนที่ของรถยนต์ การ ก่อกาเนิดของฝน การเปลี่ยนแปลงของเปลือกโลก เป็นต้น ซึ่งเหมาะกับการนาเสนอเนื้อหาข้อมูลที่ ต้องการให้เห็นขั้นตอน หรือการเปลี่ยนแปลง การสร้างภาพเคลื่อนไหว นั้นมีตั้งแต่การสร้างภาพอย่าง ง่ายโดยใช้ลายเส้นธรรมดา จนถึงการสร้างเป็นภาพ 3 มิติ เพื่อให้เห็นรายละเอียดได้อย่างชัดเจน

1.3.6 ปฏิสัมพันธ์ (Interactive) หมายถึง การที่ผู้ใช้สามารถโต้ตอบสื่อสารกับโปรแกรมมัลติมีเดียได้ ไม่ว่าจะเป็นการเลือกดู ข้อมูลที่สนใจ หรือการสั่งงานให้โปรแกรมแสดงผลในรูปแบบที่ต้องการ โดยผู้ใช้สื่อสารผ่านอุปกรณ์ พืน้ ฐาน เช่น การคลิกเมาส์ การกดแป้นพิมพ์ หรืออุปกรณ์ขั้นสูง เช่น การสัมผัสหน้าจอ การสั่งงานด้วย เสียง เป็นต้น ในขณะที่โปรแกรมสื่อสารกลับมาด้วยการแสดงผลทางหน้าจอ หรือเสียงผ่านลาโพง เป็น ต้น ซึ่งองค์ประกอบข้อนี้ นับเป็นคุณลักษณะสาคัญที่มอี ยู่เฉพาะในมัลติมเี ดียปฏิสัมพันธ์ มัลติมีเดียที่สมบูรณ์ควรมีส่วนประกอบดังกล่าวทั้งหมดเข้ามาผสมผสานกันอย่างครบถ้วนและ ลงตัว แต่ไม่ใช่ว่ามัลติมีเดียที่ดีจะต้องเป็นมัลติมีเดียที่เต็มรูปแบบเท่านั้น บางครั้งการมีแค่ข้อความกับ ภาพก็อาจเพียงพอแล้วต่อการเป็นมัลติมีเดียที่มีประสิทธิภาพได้ การพยายามยัดเยียดทุกสิ่งทุกอย่าง ลงไปเพื่อหวังว่าจะเป็นมัลติมีเดียที่น่าตื่นตา ตื่นใจ อาจส่งผลเสียมากกว่าผลดี หากสิ่งที่ใส่เข้าไปนั้นมัน เกินความจาเป็น จนทาให้รบกวนเนื้อหาหรือประเด็นที่ต้องการนาเสนอ เช่น การนาเสนอพร้อมกันทั้ง ข้อความและเสียงบรรยายที่เหมื อนกันในหน้าจอเดียวกัน หรือการใส่ทั้งวิดีโอ และภาพเคลื่อนไหว ลง ไปพร้อมกัน อาจทาให้ผู้ใช้แยกประสาทการรับรู้ไม่ได้ ว่าจะอ่าน จะฟัง หรือจะดูส่วนไหนก่อนดี ฉะนั้น มัล ติมีเ ดีย ที่ดีแ ละมี ป ระสิท ธิ ภ าพจึ งไม่ไ ด้ ขึ้น อยู่ กั บ ปริม าณของส่ วนประกอบต่ า งๆ แต่ตัดสิน กั น ที่ ส่วนประกอบที่นามาใช้นั้นต้องทาหน้าที่ของมันได้อย่างเหมาะสม ลงตัว และสนับสนุน ส่งเสริมซึ่งกัน และกัน 1.4 ประโยชน์ของมัลติมีเดีย สามารถแยกแยะประโยชน์ที่จะได้รับจากการนามัลติมเี ดียมาประยุกต์ใช้งานได้ดังนี้ 1.4.1 ง่ายต่อการใช้งาน โดยส่วนใหญ่เป็นการนามัลติมีเดียมาประยุ กต์ใช้งานร่วมกับโปรแกรมคอมพิวเตอร์เพื่อเพิ่ม ผลผลิต ดั งนั้นผู้พั ฒนาจึงจาเป็นต้องมีก ารจัดท าให้มีรูป ลัก ษณ์ที่เ หมาะสม และง่ายต่อการใช้งาน ตามแต่กลุ่มเป้าหมายเพื่อประโยชน์ในการเพิ่มประสิทธิภาพในการปฏิบัติงาน ตัวอย่างเช่น การใช้งาน สื่อมัลติมเี ดียโปรแกรมการบัญชี 1.4.2 สัมผัสได้ถึงความรูส้ ึก สิ่งสาคัญของการนามัลติมีเดียมาประยุกต์ใช้งานก็คือ เพื่อให้ผู้ใช้สามารถรับรู้ได้ถึงความรู้สึก จากการสัมผัสกับวัตถุที่ปรากฏอยู่บนจอภาพ ได้แก่ รูปภาพ ไอคอน ปุ่มและตัวอักษร เป็นต้น ทาให้ผู้ใช้ สามารถควบคุมและเข้าถึงข้อมูลต่างๆ ได้อย่ างทั่วถึงตามความต้องการ ตัวอย่างเช่น ผู้ใช้คลิกที่ปุ่ม Play เพื่อชมวิดโี อและฟังเสียงหรือแม้แต่ผู้ใช้คลิกเลือกที่รูปภาพหรือตัวอักษรเพื่อเข้าถึงข้อมูลที่ต้องการ เป็นต้น

1.4.3 สร้างเสริมประสบการณ์ การออกแบบและพัฒนาโปรแกรมคอมพิวเตอร์ดา้ นมัลติมีเดีย แม้ว่าจะมีคุณลักษณะที่แตกต่าง กันตามแต่ละวิธีการ แต่สิ่งหนึ่งที่ผู้ใช้จะได้รับก็คือ การสั่งสมประสบการณ์จากการใช้สื่อเหล่านีใ้ นแง่มุม ที่แตกต่างกันซึ่งจะทาให้สามารถเข้าถึงวิธีการใช้งานได้อย่างถูกต้องและแม่นยา ตัวอย่างเช่น ผูใ้ ช้ได้เคย เรียนรู้วธิ ีการใช้ปุ่มต่างๆ เพื่อเล่นเกมส์บนคอมพิวเตอร์มาก่อน และเมื่อได้มาสัมผัสเกมส์ออนไลน์ใหม่ๆ ก็สามารถเล่นเกมส์ออนไลน์ได้อย่างไม่ตดิ ขัด 1.4.4 เพิ่มขีดความสามารถในการเรียนรู้ สืบเนื่องจากระดับขีดความสามารถของผู้ใช้แต่ละคนมีความแตกต่างกัน ทั้งนี้ ขึ้นอยู่กับระดับ ความรู้และประสบการณ์ที่ไ ด้รับการสั่งสมมา ดังนั้น การนาสื่อมัลติมีเดียมาประยุกต์ใช้จะช่วยเพิ่มขีด ความสามารถในการเรียนรู้ด้วยตนเอง ตัวอย่างเช่น การเล่นเกมส์คอมพิวเตอร์ ผูใ้ ช้สามารถเรียนรู้และ พัฒนาทักษะในการเล่นจากระดับที่ง่ายไปยังระดับที่ยากยิ่งๆ ขึน้ ไป 1.4.5 เข้าใจเนื้อหามากยิ่งขึ้น ด้วยคุณลักษณะขององค์ประกอบของมัลติมีเดีย ไม่ว่าจะเป็นข้อความหรือตัวอักษร ภาพนิ่ง ภาพเคลื่อนไหว เสียงและวิดีโอ สามารถที่จะสื่อความหมายและเรื่องราวต่างๆ ได้แตกต่างกัน ทั้งนี้ ขึน้ อยู่กับวิธีการนาเสนอ กล่าวคือ หากเลือกใช้ภาพนิ่งหรือภาพเคลื่อนไหว การสื่อความหมายย่อมจะมี ประสิทธิภาพมากกว่าการเลือกใช้ข้อความหรือตัวอักษร ในทานองเดียวกัน หากเลือกใช้วิดีโอ การสื่อ ความหมายย่อมจะดีกว่าเลือกใช้ภาพนิ่งหรือภาพเคลื่อนไหว ดังนั้น ในการผลิตสื่อ ผู้พัฒนาจาเป็นต้อง พิจารณาคุณลักษณะให้เหมาะสมกับเนื้อหาที่จะนาเสนอ ตัวอย่างเช่น การผสมผสานองค์ประกอบของ มัลติมีเดียเพื่อบรรยายบทเรียน 1.4.6 คุ้มค่าในการลงทุน การใช้โปรแกรมด้านมัลติมีเดียจะช่วยลดระยะเวลา ไม่ว่าจะเป็นเรื่องการเดินทาง การจัดหา วิทยากร การจัดหาสถานที่ การบริหารตารางเวลาและการเผยแพร่ช่องทางเพื่อนาเสนอสื่อ เป็นต้น ทา ให้ประหยัดค่าใช้จ่าย ในกรณีที่ได้หักค่าใช้จ่ายที่เป็นต้นทุนไปแล้วก็จะส่งผลให้ได้รับผลตอบแทนความ คุ้มค่าในการลงทุนในระยะเวลาที่เหมาะสม 1.4.7 เพิ่มประสิทธิผลในการเรียนรู้ การสร้างสรรค์ชิ้นงานด้านมัลติมีเดียจาเป็นต้องถ่ายทอดจินตนาการจากสิ่งที่ยากให้เป็นสิ่งที่ ง่ายต่อการรับรู้และเข้าใจด้วยกรรมวิธีต่างๆ นอกจากจะช่วยอานวยความสะดวกในการทางานแล้ว ผูใ้ ช้ยังได้รับประโยชน์และเพลิดเพลินในการเรียนรู้อกี ด้วย

1.5 สรุป สรุปได้ว่า คาว่า “มัลติมีเดีย” มีความหมายที่ค่อนข้างกว้าง ทั้งนี้ขึ้นอยู่กับมุมมองของผู้ที่สนใจ อย่ า งไรก็ ต าม ส่ ว นใหญ่ แ ล้ ว งานด้ า นมั ล ติ มีเ ดีย มั ก จะน าคอมพิว เตอร์ม าประยุ ก ต์ ใ ช้ ง านร่วมด้วย เนื่องจากคอมพิวเตอร์เป็นอุปกรณ์ที่มีขีดความสามารถในการผลิตสื่อได้หลากหลายรูปแบบ รวมทั้งยัง สามารถน าเสนอและติ ด ต่ อ สื่ อ สารได้ อี ก ด้ ว ย ส าหรั บ ในที่ นี้ ค าว่ า “มั ล ติ มี เ ดี ย ” หมายถึ ง การน า องค์ประกอบของสื่อชนิดต่างๆ มาผสมผสานเข้าด้วยกัน ซึ่งประกอบด้วย ตัวอักษร(Text) ภาพนิ่ง (Still Image) ภาพเคลื่อนไหว (Animation) เสียง (Sound) และวิดีโอ (Video) โดยผ่านกระบวนการทางระบบ คอมพิวเตอร์เพื่อสื่อความหมายกับผูใ้ ช้อย่างมีปฏิสัมพันธ์ (Interactive Multimedia) และได้บรรลุผลตรง ตามวัตถุประสงค์การใช้งาน แต่ละองค์ประกอบของมัลติมีเดีย จะมีทั้งข้อดี-ข้อเสีย ที่แตกต่างกันไป ตามคุณลักษณะ และวิธีการใช้งาน สาหรับประโยชน์ที่จะได้รับจากมัลติมีเดียมีมากมาย ทั้งนี้ขึ้นอยู่กับ วิธีการนามาประยุกต์ใช้เพื่อให้เกิดประโยชน์สูงสุด

กิจกรรมภาคปฏิบัติ ใบงานที่ 1 1. วัตถุประสงค์ 1.1 เพื่อให้นิสติ ตระหนักถึงความสาคัญของการพัฒนาความคิดสร้างสรรค์ 1.2 เพื่อให้นิสิตฝึกการค้นหาตัวตน และพัฒนาอัตลักษณ์เฉพาะตนเองได้ (จากสีที่ชอบ / แบบ อักษร/ จุดแข็ง-จุดอ่อน / ความชอบส่วนบุคคล ฯลฯ) 1.3 เพื่อให้นิสิตรู้จักรับฟังความคิดเห็น และคาวิจารณ์ที่หลากหลาย และปรับปรุงงานให้ดีและ คงคอนเซ็ปต์ได้ทันเวลาที่กาหนด 2. สาระสาคัญ แนวคิดการออกแบบมัลติมีเดีย เป็นวิชาทางการออกแบบแขนงหนึ่งที่ศึกษาเรื่องราวเกี่ยวกับ แนวคิ ด และหลั ก การออกแบบสื่ อ รู ป แบบต่ า งๆ ซึ่ ง มี บ ทบาทส าคั ญ ต่ อ การพั ฒ นาสื่ อ นั้ น ๆ ให้ มี ประสิทธิภาพ ดังนั้น กิจกรรมใน ใบงานที่ 1 การพัฒนาเอกลักษณ์ (สวัสดี...เราชื่อ) จึงเป็นการปู พื้นฐานการพัฒนาความคิด โดยเริ่มจากตัวนิสิตเอง ด้วยการให้นิสิตทดลองออกแบบโลโก้หรือตรา สัญลักษณ์ และนามบัตรของตนเอง ซึ่งจะต้องบ่งบอกถึงความเป็นตัวตนให้ชัดเจน อีกทั้งนิสิตจะได้ฝึก รับมือและปรับปรุงงานตามความคิดเห็นของลูกค้าที่หลากหลายอีกด้วย 3. วิธีการ ให้นสิ ิต ใช้เวลา 10 นาที ตอบคาถามต่อไปนี้ 1. ฉันเป็นนักออกแบบที่มจี ุดแข็งอะไรบ้าง บอกมา 3 จุด 2. อะไรคือจุดอ่อน? 3. งานประเภทไหนที่ฉันอยากทาในอนาคต? 4. สีที่ฉันชอบ? 5. นักออกแบบในดวงใจฉันคือใคร?

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

(ดูสีหลักในงานออกแบบของคุณ) เราไม่เอาสีนนั้

คุณทาผิดแล้ว คิดไอเดียใหม่เถอะ !!

ฉันชอบสไตล์ตัวอักษรแบบตัวเขียนมากกว่านะ

อยากให้ใช้สมี ่วงเป็นสีหลักของแบบนะ

ขอให้ใส่สามเหลี่ยมเป็นภาพพืน้ หลัง

อยากให้มีรูปคนกระโดดร่มในงานด้วย

เปลี่ยนมาใช้เป็นสีขาวดาแล้วกัน

ขอให้ใส่วงกลมเป็นภาพพื้นหลัง

ฮาร์ดไดรฟ์เสีย ใช้คอมพิวเตอร์ออกแบบไม่ได้ !!

อยากให้มีเส้นลูกศรในงานด้วย

นี่ควรเป็นโปสเตอร์มากกว่า

ตาราง 2 แสดงโจทย์ให้ปรับแก้งานออกแบบ 4. การวัดและประเมินผล ผูส้ อนตรวจสอบผลงานของนิสิต และประเมินผลงานตามเกณฑ์ดังนี้ 4.1 ส่งงานตามกาหนดเวลา (1 คะแนน) 4.2 ความคิดสร้างสรรค์ (1 คะแนน) 4.3 ความครบถ้วนสมบูรณ์ (1 คะแนน) 4.4 ความปราณีตของงาน (1 คะแนน) 4.5 ทักษะทางศิลปะและการออกแบบ (1 คะแนน) คะแนนกิจกรรมภาคปฎิบัติ ใบงานที่ 1 รวมเป็น 5 คะแนน

บทที่ 2 แนวคิดการออกแบบงานมัลติมีเดีย หัวข้อเนื้อหาประจาบท 1. หลักการออกแบบของนอร์แมน 2. การประเมินการออกแบบของเนลสัน วัตถุประสงค์ 1. สามารถอธิบายหลักการออกแบบงานมัลติมีเดียตามแนวคิดของนอร์แมนและการประเมิน การออกแบบของเนลสันได้ 2. สามารถวิ เ คราะห์ ก ารออกแบบที่ ดี และที่ ไ ม่ ดี ไ ด้ โดยอาศั ย ความรู้ ห ลั ก การออกแบบ มัลติมีเดีย 3. สามารถประยุ ก ต์ใ ช้ค วามรู้กั บ การออกแบบมั ลติ มีเ ดีย ในชีวิ ตประจ าวัน และสามารถ เสนอแนะการออกแบบที่ดเี พื่อแก้ปัญหาการใช้งาน เวลาเรียน สัปดาห์ที่ 2 กิจกรรมการเรียนการสอน 1. การบรรยาย 2. การอภิปรายและการซักถามเกี่ยวกับเนือ้ หาในบทเรียนร่วมกัน 3. กาหนดประเด็นปัญหาเพื่อศึกษาค้นคว้าเพิ่มเติม

2.1 หลักการออกแบบของนอร์แมน ดร. โดนั ล ด์ เอ. นอร์ แ มน (Dr. Donald Arthur Norman) เป็ น นั ก วิ จั ย ด้ า น Human-centered design และเป็นผู้อานวยการศูนย์ปฏิบัติการการออกแบบที่ มหาวิทยาลัยแคลิฟอร์เนีย (University of California) เขาเป็ น ผู้ เ ขี ย นหนั ง สื อ “The Design of Everyday Things” เขาได้ รั บ การยกย่ อ งอย่ า ง กว้างขวางสาหรับความเชี่ยวชาญของเขาในด้านการออกแบบ โดนัลด์ เอ. นอร์แมน ตั้งข้อสังเกตใน พฤติกรรมของมนุษย์ด้วยพื้นฐานแนวคิดทางวิทยาศาสตร์ที่เชื่อมโยงไปกับแนวคิดของการออกแบบ เพื่อให้นักออกแบบหาทางรับมือ จัดการ ป้องกัน คิดแก้ปัญหาทางด้านการออกแบบได้ โดยหลักการ ออกแบบของนอร์แมน (Norman) สรุปเป็น 6 ข้อ ดังนี้ 2.1.1 Visibility มองเห็นได้ชัด หมายความว่า สิ่งที่เป็นอินเทอร์เฟส (Interface) ของความสามารถหลักของสิ่งของนั้นควรถูก ทาให้มองเห็นได้ง่าย ควรบอกถึงลักษณะการใช้งานเบื้องต้น และไม่ควรให้ใช้ความจามากในการเรียนรู้ วิธีการใช้งาน ตัวอย่างเช่น พวงมาลัยรถยนต์ และแผงควบคุม จะอยู่ในตาแหน่งที่ผู้ใช้มองเห็นได้ง่าย และคาดเดาได้ว่าจะใช้ส่ิงนี้ในการบังคับรถ (ดังภาพ 1), กูเกิลทาให้ผู้ใช้มองเห็นชัดว่าจะพิมพ์ข้อความได้ ตรงไหน เป็นต้น หากเราออกแบบผลิตภัณฑ์ที่มองเห็นการใช้งานได้ไม่ชัดเจน อาจทาให้เกิดปัญหาได้ ตัว อย่างเช่น ก็ อกน้าระบบเซ็น เซอร์ ซึ่ง เป็นตัวอย่า งที่ น่า สนใจ เกี่ย วกั บ Visibility เพราะแม้ว่ า การ ออกแบบเช่นนี้จะดูสวยหรู ทั้งยังช่วยเรื่องของสุขอนามัย และประหยัดน้า แต่มีข้อเสียตรงที่ผู้ใ ช้อาจ สับสนวิธีการเปิดก๊อก หรืออาจไม่รู้ว่าควรนามือไปที่ตาแหน่งใดที่ถูกจุด/ถูกจังหวะ เพื่อให้น้าไหล (ดัง ภาพ 2) และนาฬิก าข้อมือ ก็ เ ป็น อีก ตัวอย่างเกี่ย วกั บ Visibility ที่แม้ออกแบบให้ดูหรูหราด้วยการ ประดับด้วยเพชร แต่ความซับซ้อนของลวดลายบนหน้าปัดอาจทาให้ผู้ใช้มองเวลาได้ยาก (ดังภาพ 3)

ภาพ 1 แสดง Visibility ของพวงมาลัยรถยนต์ และแผงควบคุม ที่มา http://idyeah.com/blog/2011/03/visibility-principle-in-user-interfaces/

ภาพ 2 แสดง Visibility ของก็อกน้าระบบเซ็นเซอร์ ที่มา http://idyeah.com/blog/2011/03/visibility-principle-in-user-interfaces/

ภาพ 3 แสดง Visibility ของนาฬิกาข้อมือ ที่มา http://idyeah.com/blog/2011/03/visibility-principle-in-user-interfaces/

2.1.2 Feedback การตอบสนอง ระบบควรที่ ดี ควรจะมี ฟี ด แบ็ ก ที่ ดี ใ ห้ กั บ ผู้ ใ ช้ โดยที่ ฟี ด แบ็ ก ( Feedback)ที่ ดี หมายถึ ง ความสามารถในการตอบสนองอย่างทันเวลาหรือในทันที ระบบต้องทาให้ผู้ใช้เข้าใจเสมอว่าในขณะนั้น แล้วระบบกาลังทาอะไรอยู่ ทางานเสร็จแล้วหรือไม่ ถ้ายังจะต้องรออีกนานเท่าไร ตัวอย่างเช่น เมื่อผู้ใช้ กดปิด/เปิดสวิชต์ไฟ จะรู้สึกทันทีว่าปุ่มถูกกดลง จากนั้นไฟก็จะดับ/สว่าง ในทันที หรือ เมื่อผู้ใช้กดปุ่ม ตัวเลขชั้นที่ต้องการขึ้น/ลง ลิพต์ ก็จะมีฟีดแบ็ก (Feedback)เป็นความรู้สึกว่าปุ่ม ได้ถูกกดลง และมีไฟ สว่างขึ้นตรงปุ่มที่กดนั้น จากนั้นลิฟต์ก็จะขึ้น/ลงทันที พร้อมแสดงที่หน้าจอว่าลิฟต์กาลังขึ้น/ลงถึงชั้นที่ เท่าไร (ดังภาพ 4) เป็นต้น

ภาพ 4 แสดง Feedback ของลิฟต์ การเลือกวิธีการฟีดแบ็ก (Feedback)เป็นสิ่งที่จาเป็น เช่น จะใช้ภาพอย่างไร เสียงอย่างไร การ บรรยายข้อความให้ ผู้ใ ช้เ ข้ าใจอย่ า งไร ฟีดแบ็ก จาเป็นที่ จ ะต้ อ งแสดงข้ อ มูลให้ส อดคล้ อ งกั บ ความ ต้องการ ยกตัวอย่างเช่น ในการดาวน์โหลดไฟล์ จะต้องบอกได้ว่าดาวน์โหลดถึงไหนแล้ว อีกนานไหมถึง จะเสร็จ (ดังภาพ 5)

ภาพ 5 แสดง Feedback ของหน้าต่างดาวน์โหลด

2.1.3 Affordances ตัวบ่งบอกการใช้งาน เมื่อผู้ใช้มองเห็นสิ่งของนัน้ โดยธรรมชาติแล้ว ควรจะรู้ในทันทีวา่ สิ่งนั้นน่าจะถูกใช้งานยังไง เช่น ปุ่ม น่าจะมีไว้กด, ด้ามจับ น่าจะมีไว้ให้จับ, เก้าอี้ น่าจะมีไว้นั่ง, ลูกบิดประตูหรือที่เปิดเตาแก๊ส น่าจะไว้ หมุน เป็นต้น จะเห็นได้ว่าตัว บ่งบอกการใช้งานปรากฏอยู่บ นวัตถุ ต่างๆ รอบตัวเรา โดยเฉพาะ ส่วนการ ควบคุมการทางานของเครื่องจักร เช่น มือจับ สวิทช์ เป็นต้น ซึ่งอุปกรณ์เหล่านี้ สามารถมองได้ใ น รูปแบบของการกระทาที่แตกต่างกันออกไป เช่น มือจับ สาหรับรถยนต์สามารถที่ใช้งานด้วยการดึง, การบิด, การผลัก เป็นต้น มองดูเผินๆ ก็อาจจะเป็นเรื่องธรรมดาแต่ถ้าลองคิดถึงว่าถ้าเราขาดตัวบ่ง บอกการใช้งานจะเกิดอะไรขึ้น ตัวอย่างของการขาดตัวบ่งบอก เช่น อุปกรณ์ตู้เฟอร์นิเจอร์เก็บของที่ยากต่อการเปิด และไม่ สามารถหาส่วนที่บ่งบอกว่าส่วนไหนเป็นที่เปิด ผู้ใช้อาจจะต้องเดาด้านที่เปิดเอง(ดังภาพ 6) ในทาง ตรงกันข้ามถ้าเรามีตั วบ่งบอกมากเกินไปจะทาให้เกิดความสับสนต่อการใช้งาน เช่น กลอนประตูที่มี มากเกินความจาเป็น และตู้ลิ้นชักที่มีด้ามจับบริเวณที่จะทาให้ผู้ใช้เข้าใจผิดว่ามีไว้สาหรับดึงเพื่อเปิด ลิน้ ชัก (ดังภาพ 7) เป็นต้น

ภาพ 6 แสดง Affordance ของอุปกรณ์ตู้เฟอร์นเิ จอร์ ที่มา http://digital.lib.kmutt.ac.th/magazine/issue3/article3.html

ภาพ 7 แสดง Affordance ของตู้ล้นิ ชัก ที่มา http://www.baddesigns.com/file.html

บางครั้งแล้วเราอาจจะเห็นการแก้ปัญหาของกลอนประตูในที่ต่างๆ โดยการติดป้ายที่ประตูว่า ประตูนี้จะต้อง “ดึง” หรือ “ผลัก” ซึ่งอาจจะเป็นการแก้ปัญหาที่ปลายเหตุ เนื่องจากการสร้างมือจับ ประตูที่ดี จะสามารถบ่งบอกได้ว่าผลิตภัณฑ์นั้นควรจะถูกใช้งานอย่ างไร ด้วยความหมายของตัวมันเอง โดยไม่จาเป็นที่จะต้องสื่อความหมายด้วยคาพูดหรือประโยค ข้อแนะนาในการออกแบบคือ ต้องอาศัย หลักความสอดคล้องและอิงกับการรับรู้ ของผู้ใช้ว่าอะไรควรเป็นอะไร ซึ่งจะทาให้ผู้ใช้สามารถเข้าใจ วิธีการใช้งานจากประสบการณ์ที่มอี ยู่ก่อนแล้วได้ 2.1.4 Mapping ความสอดคล้อง คือ ความสอดคล้องกันในเชิงสัญลักษณ์ของส่วนควบคุมและสิ่งที่แสดงผล เช่น การออกแบบ ส่วนควบคุมพัดลม เบอร์ 1 = แรงพัดน้อยที่สุด , เบอร์ 2 = แรงพัดปานกลาง, เบอร์ 3 = แรงพัดมาก ที่สุด หรือ การออกแบบแผงควบคุมการปิด/เปิด หน้าต่างรถยนต์ (ตรงที่นั่งคนขับ) ก็จะมีตาแหน่งของ ปุ่มสัมพันธ์กับตาแหน่งหน้าต่างจริงๆ ของรถยนต์ ช่วยให้ผใู้ ช้เข้าใจ และสามารถเลือกได้ถูกต้อง ไม่ต้อง เสียเวลาลองผิดลองถูก (ดังภาพ 8) เป็นต้น

ภาพ 8 แสดง Mapping ของแผงควบคุมการปิด/เปิดหน้าต่างรถยนต์ การออกแบบที่มีความสอดคล้อง(Mapping) ที่ดีจะช่วยลดความสับสน และลดความผิดพลาด ในการใช้งานได้ ตัวอย่างเช่น การออกแบบสายเสียบกับเต้ารับที่มีสีหรือสัญลักษณ์ที่ส อดคล้องกัน (ดัง ภาพ 9)

ภาพ 9 แสดง Mapping ของสายเสียบกับเต้ารับของเครื่องคอมพิวเตอร์

2.1.5 Constraints ข้อจากัด คือ ข้อจากัดหรือเงื่อนไข ที่ใช้ในการออกแบบหรือพัฒนาระบบ เพื่อจากัดการกระทาที่อาจ เกิ ด ขึ้ น ลดโอกาสผิ ด พลาด และสามารถท าให้ ผู้ ใ ช้ เ พ่ ง ความคิ ด ไปยั ง งานที่ ต้ อ งการท า เช่ น ใน อินเทอร์เฟสของโทรศัพท์มือถือจะปิดการใช้งานปุ่มที่ไม่เกี่ยวข้อง (Disable) ไว้ชั่วคราว หากผู้ใช้กาลังใช้ งานโหมดที่ทาให้ไม่สามารถเลือกใช้งานสิ่งนั้นได้ (ดังภาพ 10)

ภาพ 10 แสดง Constraints ของอินเทอร์เฟสโทรศัพท์มือถือ ที่มา http://www.theatlantic.com/technology/archive/2013/11/what-could-replace-airplanemode/281685/ 2.1.6 Consistency ความสม่าเสมอ คือความความสม่าเสมอของงานออกแบบ ไม่ว่าจะเป็นเมนู ไอคอน สี รูปแบบ ตัวอักษรต่าง ๆ ควรจะเป็นแนวเดียวกัน ไม่ว่าจะเป็น สี ขนาด สัญลักษณ์ ฯลฯ (ดังภาพ 11)

ภาพ 11 เปรียบเทียบ Consistency ของปุ่มกด ที่ไม่ดี (ซ้าย) และดี (ขวา) ที่มา http://www.uxness.in/2015/02/10-heuristic-principles-jakob-nielsens.html

2.2 หลักการออกแบบของเนลสัน จาคอบ เนลสัน (Jakop Nielson) เป็นผู้สนับสนุนผู้ใช้และหัวหน้ากลุ่ม Nielsen Norman ซึ่งเขา ร่วมก่อตั้งกับดร. โดนัลด์ เอ. นอร์แมน (Dr. Donald A. Norman) เขาได้คิดค้นวิธีการประเมินพฤติกรรม การเรี ย นรู้ (Jakob Nielsen's Heuristic Evaluation) ซึ่ ง ท าให้ ก ารใช้ ง านของระบบคอมพิ ว เตอร์ ห รื อ เว็บไซต์ตา่ งๆ ง่ายขึ้น สาระสาคัญของการออกแบบระบบให้ใช้งานง่ายนั้นสรุปได้ 10 ข้อ ดังต่อไปนี้ 2.2.1 Visibility of system status ระบบต้องแสดงให้ผู้ใช้งานเห็นเสมอว่าตนกาลังทาอะไรอยู่ กาลังจะเกิดอะไรขึ้น และให้ผล ป้อนกลับในเวลาที่เหมาะสม ตัวอย่างเช่น Gmail แสดงให้ผู้ใช้เห็นว่ากาลังโหลดอยู่ และแจ้งสถานะ เพื่อให้ผู้ใช้รู้วา่ ต้องรออีกนานแค่ไหน (ดังภาพ 12)

ภาพ 12 แสดง Visibility of system status ของ Gmail ที่มา https://www.darklaunch.com/2012/12/14/gmail-s-loading-screen-in-html-css 2.2.2 Match between system and the real world ระบบต้องสามารถพูดภาษาเดียวกันกับผูใ้ ช้โดยมีตรรกะการใช้งานที่เป็นธรรมชาติ ไม่ใช้ภาษาที่ แปลกไปจากปกติ หรือภาษาของระบบคอมพิวเตอร์ ควรออกแบบให้สอดคล้องกับโลกความเป็นจริง ของผู้ใช้ ทาให้ผู้ใช้เกิดความคุ้นเคย ตัวอย่างเช่น แอปพลิเคชั่น iBooks ออกแบบเหมือนกับตู้แผงหนังสือ ไม้แบบเดียวกับในชีวิตจริง (ดังภาพ 13)

ภาพ 13 แสดง Match between system and the real world ของ iBooks ที่มา http://www.uxness.in/2015/02/10-heuristic-principles-jakob-nielsens.html

2.2.3 User control and freedom ผู้ใช้มักจะใช้งานผิดพลาดจึงจาเป็นต้องมีทางออกให้เสมอสาหรับสถานการณ์ที่ไม่พึงประสงค์ เมื่อผู้ใช้งานทาผิด สนับสนุนการ Undo และ Redo ตัวอย่างเช่น Photoshop มีหน้าต่าง History ที่เปิด โอกาสให้ผใู้ ช้กลับไปยังขั้นตอนก่อนหน้า (ดังภาพ 14)

ภาพ 14 แสดง User control and freedom ของ Photoshop ที่มา http://www.uxness.in/2015/02/10-heuristic-principles-jakob-nielsens.html 2.2.4 Consistency and standards มีความสม่าเสมอและเป็นมาตรฐานไปทุก ๆ หน้าจอของการออกแบบ ผู้ใช้งานต้องไม่สับสนใน เรื่องการจัดวางหรือขนาดของตัวหนังสือ ตัวระบบเองก็ควรจะมีชุดป้อนคาสั่งต่าง ๆ ที่เป็นมาตรฐาน ตัวอย่างเช่น โปรแกรม Microsoft Word ,Excel และ PowerPoint ใช้แถบเครื่องมือรูปแบบเดียวกัน ได้แก่ Home, Insert, Design ซึ่งความสม่าเสมอและเป็ นมาตรฐานนี้จ ะท าให้ผู้ใ ช้ไ ม่สับ สนและท างานได้ มี ประสิทธิภาพ (ดังภาพ 15)

ภาพ 15 แสดง Consistency and standards ของโปรแกรม Microsoft Word, Excel และ PowerPoint

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

ภาพ 16 แสดง Error prevention ของโปรแกรม Microsoft Word 2.2.6 Recognition rather than recall พยายามทาให้ผู้ใช้งานต้องใช้ความจา ในการจดจาคาสั่งต่างๆ ในระบบให้น้อยที่สุดโดยการทา ให้ส่วนประกอบหน้าจอ การออกคาสั่งปฏิบัติและส่วนตัวเลือกมีความชัดเจน วิธีการใช้งานต้องเข้าถึงได้ ง่ายและรับรู้ได้งา่ ย (ดังภาพ 17)

ภาพ 17 แสดง Recognition rather than recall ของโปรแกรม Microsoft Word

2.2.7 Flexibility and efficiency of use มีความยืดหยุ่นสาหรับผู้ใช้งานหลากหลายกลุ่ ม และมีประสิทธิผลในการทางาน เปิดโอกาสให้ ผูใ้ ช้ตงั้ ค่าเอง (ดังภาพ 18)

ภาพ 18 แสดง Flexibility and efficiency of use ของ Gmail 2.2.8 Aesthetic and minimalist design การนาเสนอเนื้อหาต้องไม่รวมเรื่องที่ไม่เกี่ยวข้องหรือใช้อย่างน้อยๆ เพื่อจะได้เน้นเนื้อหาที่เรา ต้องการสื่อสารอย่างเต็มที่ เช่น การออกแบบที่รวมรายการแอปพลิเคชั่นต่างๆ ของกูเกิลไว้ในที่เดียว และ ออกแบบไอคอนที่เรียบง่าย (ดังภาพ 19)

ภาพ 19 แสดง Aesthetic and minimalist design ของกูเกิล

2.2.9 Help users recognize, diagnose, and recover from errors ข้อความแสดงความผิดพลาดต้องปรากฏในแบบตัวอักษรธรรมดาไม่ใช่โค้ดโปรแกรมที่เข้าใจ ยาก ระบุปัญหาและบอกวิธีแก้ไข ให้ผู้ใช้งานสามารถแก้ไขได้เอง (ดังภาพ 20)

ภาพ 20 แสดง Help users recognize, diagnose, and recover from errors ของ Pinterest 2.2.10 Help and documentation ถึงแม้จะคาดหวังไว้วา่ ระบบที่ดตี ้องทางานได้โดยไม่ต้องอาศัยคู่มอื การใช้ แต่อย่างไรก็ตามคู่มือ ก็ ยั งมีค วามจาเป็น ในคู่มื อต้องมีก ารแบ่งสารบัญ ข้อมูลที่ หาง่าย เจาะจงไปยั งหน้าที่ต่าง ๆ มีก าร เรียงลาดับอย่างเป็นระบบ และไม่หนาจนเกินไป (ดังภาพ 21)

ภาพ 21 แสดง Help and documentation ของ Pinterest

2.3 สรุป ในการออกแบบงานทุ ก ชิ้น นัก ออกแบบไม่เ พีย งแต่ค านึ งถึ งความสวยงามเท่ า นั้น แต่ต้ อ ง ค านึงถึ ง ความมีป ระสิท ธิ ภาพ หรือ ความพึงพอใจของผู้ใ ช้ง านด้ว ย ในบทที้จะเป็นการอธิบ ายถึ ง แนวคิ ด การออกแบบที่ ค านึ ง ถึ ง การใช้ ง านของโดนั ล ด์ เอ. นอร์ แ มน (Norman’s Design Principle) นอกจากนี้ ยั ง อธิ บ ายถึ ง การประเมิ น การออกแบบของจาคอบ เนลสั น (Jakob Nielsen's Heuristic Evaluation) สรุป ได้ ว่า ในการออกแบบทุก ครั้ง ผู้ออกแบบมีสิ่งที่ต้องคานึ งหลายแง่ มุม เพื่อให้ผู้ใ ช้ สามารถใช้งานได้อย่างมีประสิ ทธิภาพ หลักการออกแบบของนอร์แมน (Norman’s Design Principle) เป็นหลักการพื้นฐานที่ช่วยให้เราเข้าใจพฤติกรรมการรับรู้ของมนุษย์ ที่ส่งผลให้เราออกแบบผลิตภัณฑ์ ต่ า งๆ อย่ า งเหมาะสม ท าให้ ใ ช้ ง านได้ อ ย่ า งมี ป ระสิ ท ธิ ภ าพ และลดข้ อ ผิ ด พลาดจากการใช้ ง าน นอกจากนี้ ในการออกแบบงานสื่อปฏิสัมพันธ์ เช่น โปรแกรม เว็บไซต์ แอปพลิเคชั่น และงานมัลติมีเดีย ต่างๆ เรายั งสามารถใช้ หลั ก การประเมิน ของเนลสัน (Jakob Nielsen's Heuristic Evaluation) มาเป็ น แนวทางในการทดสอบ เพื่อปรับปรุงระบบให้ผู้ใช้สามารถใช้งานง่ายขึ้น และมีประสิทธิภาพมากขึน้

กิจกรรมภาคปฏิบัติ ใบงานที่ 2 1. วัตถุประสงค์ 1.1 เพื่อให้นิสติ ตระหนักถึงความสาคัญของหลักการออกแบบมัลติมีเดียในแง่การใช้งาน 1.2 เพื่อให้นิสิตฝึกวิเคราะห์เว็บไซต์ที่มีปัญหาด้านการออกแบบ ฝึกการแบ่งปัญหาตามความ รุนแรง และฝึกประเมินความรุนแรงของปัญหา โดยอาศัยหลักการประเมินการออกแบบของเนลสัน (Jakob Nielsen's Heuristic Evaluation) 1.3 เพื่อให้นิสิตได้มีประสบการณ์ในการทางานร่วมกัน ทั้งการวางแผนงาน การแบ่งหน้าที่การ ทางาน การแก้ไขปัญหา และการปรับปรุงพัฒนา โดยผ่านการทากิจกรรมภาคปฏิบัติ 2. สาระสาคัญ เนื้อหาในบทที่ 2 เกี่ยวข้องกับหลักการออกแบบมัลติมีเดียที่คานึงการใช้งานของผู้ใช้ เพื่อให้ นิสิตตระหนักถึงความสาคัญของหลักการออกแบบดังกล่าว นิสิตจะต้องมีความเข้าใจเนื้อหาอย่างถ่อง แท้ ดังนั้น กิจกรรมใน ใบงานที่ 2: การประเมินปัญหาการออกแบบเว็บไซต์ (Website Heuristic Evaluation) จึงเป็นการเสริมความเข้าใจ และกระตุ้นให้นิสิตได้นาความรู้ในบทเรียนมาประยุกต์ใช้กับ ชีวติ ประจาวัน 3. วิธีการ ให้นิสิตกลุ่มละ 3 คน ช่วยกันเลือกเว็บไซต์ที่สนใจมา 1 เว็บไซต์ และทดสอบการใช้งาน โดยหา ข้ อ ผิ ด พลาด/บกพร่ อ งในการใช้ ง านของเว็ บ ไซต์ นั้ น ๆ ให้ ไ ด้ ม ากที่ สุ ด (อย่ า งน้ อ ย 5 ข้ อ ) เมื่ อ พบ ข้อผิดพลาดแล้วให้นามาวิเคราะห์อย่างเป็นขั้นตอน ดังนี้ ขั้ น ที่ 1 นิ สิ ต ช่ ว ยกั น วิ เ คราะห์ ข้ อ ผิ ด พลาดนั้ น ว่ า ตรงกั บ การออกแบบของเนลสั น (Jakob Nielsen's Heuristic Evaluation) ข้อใด ขั้นที่ 2 นิสติ ช่วยกันประเมินความรุนแรงของปัญหา ว่ามีความรุนแรงระดับใด - ระดับ 1 = ความรุนแรงระดับผิวเผิน เล็กๆน้อยๆ เช่น พิมพ์คาผิด จัดMenuไม่ตรง - ระดับ 2 = ความรุนแรงระดับปานกลาง เป็นที่น่าราคาญมักทาให้หงุดหงิด เช่น ไม่ มีShortcut Keyboard - ระดับ 3 = ความรุนแรงระดับมากขึ้น ต้องแก้ไขด่วน เช่น ผู้ใช้เข้า Login ไม่ได้ ระบบล่ม ข้อมูลหายหรือถูกทาลาย เกี่ยวข้องกับความเสี่ยง ความปลอดภัย

ตัวอย่าง: วิเคราะห์เว็บไซต์ http://www.holden.com.au/ 1

28 No. ปัญหา

คาอธิบาย

จุดทีพ ่ บ

Heuristics

ปัญหา 1

ไม่มEี rror

ในหน้า Book a Test

หน้า

Message

drive เมื่อเรากรอกข้อมูล Request

ระดับปัญหา ข้อเสนอแนะ

5) Error

2 

Prevention

3 เว็บไซต์ควรมีError Message แจ้งว่า

บางทีพมิ พ์สะกดผิดหรือ

a Test

กรอกข้อมูลไม่

บางคนใส่ขอ้ มูลเท็จ แต่

drive

ถูกต้อง

เว็บไซต์ยังคงปล่อยให้ ข้อมูลเหล่านั้นผ่านไปยัง ขั้นตอนถัดไป 2

ไม่มปี ุ่ม

ในหน้า Book a Holden

หน้า Book 1) Visibility of

Send

Service เมื่อกรอกข้อมูล

a Holden

system

ครบแล้ว ไม่มปี ุ่ม Send

Service

status

ปุ่มมี ลักษณะ แตกต่าง กัน

ในหน้าแรก ปุ่ม “Explore หน้า Complete Care” กับ ปุ่ม Home “View Offers” มีลักษณะ แตกต่างกัน อาจทาให้ ผู้ใช้สับสน

4)  Consistency and standard

4. การวัดและประเมินผล ผูส้ อนตรวจสอบผลงานของนิสิต และประเมินผลงานตามเกณฑ์ดังนี้ 4.1 ส่งงานตามกาหนดเวลา (1 คะแนน) 4.2 คุณภาพของรายงาน (1 คะแนน) 4.3 การนาเสนองานหน้าชั้นเรียน (1 คะแนน) 4.4 การนาความรูม้ าประยุกต์ใช้งาน (1 คะแนน) 4.5 รับผิดชอบ ทางานเป็นทีม (1 คะแนน) คะแนนกิจกรรมภาคปฎิบัติ ใบงานที่ 2 รวมเป็น 5 คะแนน

 เว็บไซต์ปรับปรุงให้ มีปุ่ม Send ควรทาให้ปุ่มมี ลักษณะเหมือนกัน เป็นมาตรฐาน เพื่อ ไม่ให้ผู้ใช้สับสน

บทที่ 3 ปฏิสัมพันธ์ระหว่างมนุษย์กับคอมพิวเตอร์ หัวข้อเนื้อหาประจาบท 1. ความหมายของปฏิสัมพันธ์ระหว่างมนุษย์และคอมพิวเตอร์ 2. เป้าหมายของการศึกษาปฏิสัมพันธ์ระหว่างมนุษย์และคอมพิวเตอร์ 3. ความหมายของมนุษย์ 4. พฤติกรรมมนุษย์ บุคลิกภาพ และการรับรู้ วัตถุประสงค์ 1. สามารถอธิบายความหมายของปฏิสัมพันธ์ระหว่างมนุษย์และคอมพิวเตอร์ 2. มีความเข้าใจความเป็นมนุษย์ และสามารถวิเคราะห์พฤติกรรมมนุษย์ บุคลิกภาพ และการ รับรู้ของมนุษย์ได้ ตามแนวคิดทางจิตวิทยาต่างๆ 3. สามารถประยุกต์ใช้ความรู้มาออกแบบงานมัลติมีเดียให้ใช้งานได้มากขึ้น และให้ตรงกับ ความต้องการของผูใ้ ช้ เวลาเรียน สัปดาห์ที่ 3 - 4 กิจกรรมการเรียนการสอน 1. การบรรยาย 2. การอภิปรายและการซักถามเกี่ยวกับเนือ้ หาในบทเรียนร่วมกัน 3. กาหนดประเด็นปัญหาเพื่อศึกษาค้นคว้าเพิ่มเติม

3.1 ความหมายของปฏิสัมพันธ์ระหว่างมนุษย์และคอมพิวเตอร์ ปฏิสัมพันธ์ระหว่างมนุษย์และคอมพิวเตอร์ (Human Computer Interaction: HCI) คือ การศึกษา ปฏิสัมพันธ์ระหว่างมนุษย์ซึ่งเป็นผู้ใช้กับคอมพิวเตอร์ โดยเป็นการศึกษาที่เชื่อมโยงเกี่ยวเนื่องกันของ หลายๆ ศาสตร์ เช่ น วิ ท ยาการคอมพิ ว เตอร์ (Computer Science) พฤติ ก รรมศาสตร์ (Behavioral Science) จิตวิทยา(Psychology) และการออกแบบ(Design) เป็นต้น การศึกษาด้าน HCI เกิดขึ้นเนื่องจากมนุษย์ และเครื่องจักรกลมีความแตกต่างกั นอย่างมาก ความรู้ด้าน HCI จึงเป็นสิ่งที่นาเข้ามาช่วย เพื่อให้ทั้งสองสามารถทางานด้วยกันให้เป็นระบบที่สามารถ ใช้งานได้อย่างสมบูรณ์ HCI ประกอบไปด้วย 3 องค์ประกอบหลัก ได้แก่ 3.1.1 Human ผูใ้ ช้ ผูใ้ ช้ คือ ผูใ้ ช้หรือกลุ่มผู้ใช้ที่ทางานด้วยกัน ซึ่งจะนาเอาการรับรู้ของผูใ้ ช้ เช่น การมอง การได้ยิน และการสัมผัส มาใช้ในควบคุมการส่งผ่านข่าวสารข้อมูลซึ่งจะมีความแตกต่างกัน ตามแต่ละความถนัด ของผู้ใช้ หรือตามหลักการข้อกาหนดของการใช้งานที่แตกต่างกัน หรือแตกต่างตามความสามารถใน การเรียนรูแ้ ละองค์ความรูท้ ี่มอี ยู่ รวมไปถึงความแตกต่างทางธรรมชาติและวัฒนธรรม 3.1.2 Computer คอมพิวเตอร์ คอมพิ ว เตอร์ ใ นที่ นี้ มี ค วามหมายถึ ง ระบบต่ า งๆ ที่ มี ข อบเขตอย่ า งกว้ า งขวาง รวมไปถึ ง เครื่องจักรกล โปรแกรม เว็บไซต์ และระบบอัตโนมัติตา่ งๆ 3.1.3 Interaction ปฏิสัมพันธ์ ปฏิสัมพันธ์ คือ การกระทาหรือการประกอบกิจกรรมระหว่างสิ่งสองสิ่งหรือสิ่งหลายสิ่งเพื่อให้ ได้มาซึ่งผลลัพธ์ ไม่ว่าผลลัพธ์นั้นจะออกมาในทางที่ดีมีประโยชน์หรือออกมาในทางที่ก่อให้เกิดผลเสีย ต่อสิ่งที่กาลังกระทาหรือตอบโต้อยู่นั้น เช่น การปฏิสัมพันธ์ของคอมพิวเตอร์ช่วยสอน การปฏิสัมพันธ์ ระหว่างระบบกับผู้ใช้ โดยปฏิสัมพันธ์ดังกล่าวหากประสงค์ให้ได้มาซึ่งประสิทธิภาพที่ดีต้องมีการศึกษา เกี่ยวกับความต้องการของผูใ้ ช้ที่มตี ่อระบบ หรือต่อโปรแกรมคอมพิวเตอร์นนั้ ๆ ก่อน

3.2 เป้าหมายของการศึกษาปฏิสัมพันธ์ระหว่างมนุษย์และคอมพิวเตอร์ เป้าหมายของการศึกษาด้าน HCI คือ การพัฒนาการปฏิสัมพันธ์ระหว่างผู้ใช้และคอมพิวเตอร์ โดยทาให้คอมพิวเตอร์ใช้งานได้มากขึ้น และตรงตามความต้องการของผู้ใช้ มากที่สุด เพื่อลดช่องว่าง ระหว่างมนุษย์และคอมพิวเตอร์ให้เหลือน้อยที่สุด สิ่ง ที่ HCI ยึดถือในการออกแบบ คือ ความเชื่อที่ว่า “มนุษย์ไม่ควรต้องเปลี่ยนตัวเองให้เข้ากับระบบ แต่ระบบควรถูกออกแบบให้ตรงกับความต้องการของ พวกเขา” 3.3 ความหมายของมนุษย์ มนุษย์ เป็นสิ่งมีชีวิตชนิดหนึ่งที่ประกอบด้วยส่วนที่เล็กที่ สุด ที่เรียกว่า “เซลล์” เป็นเซลล์ชนิด หนึ่งที่ท างานอัตโนมัติ พวกนี้รวมเข้าเป็น อวัย วะ สามารถตอบสนองต่อสิ่งกระตุ้นต่างๆ ได้ มีก าร ปรับตัว มีการแบ่งเซลล์ และเพิ่มจานวนได้ สิ่งเหล่านี้คือ พื้นฐานเดิมของอวัยวะมนุษย์ วิวัฒนาการเริ่ม จากเซลล์เดียว หลายเซลล์ จนมาเป็นพืช หรือ สัตว์ ชนิดต่างๆ ต่อมาเกิดคาถามว่า ทาไมจึงเกิดเป็น มนุษย์ข้นึ มาได้ ทฤษฎีของชาลส์ โรเบิร์ต ดาร์วิน (Charles Robert Darwin) กล่าวว่าธรรมชาติเป็นตัวตัดสินว่า อะไรเหมาะสม ในขณะที่ทฤษฎีของเกรเกอร์ เมนเดล (Gregor Mendel) กล่าวถึงการถ่ายทอดกรรมพันธุ์ จึงมีการนาเอา 2 ทฤษฎีรวมกัน โดยถือว่าการที่มนุษย์สืบพันธุ์ต่อๆ กันไปนั้น จะมีการแตกเผ่าพันธุ์ พ่อ แม่เดียวกันแต่ลูก 5 คนอาจจะไม่เหมือนกันก็ได้ เพราะว่าการที่ยีนส์ของทั้ง 2 ฝ่ายผสมกันนั้น มันจะไม่ มีทางเหมือนกันเลย อาจจะคล้ายคลึงกันบ้างในบางส่วน เพราะฉะนั้น ในขณะที่มีการสืบพันธุ์แต่ละรุ่น จะมีการแตกต่างกัน ตัวไหนที่พอจะอยู่ในสภาวะแวดล้อมนัน้ ได้ก็อยู่ ตัวไหนที่ไม่เหมาะสมก็สูญพันธุ์ไป ดั งนั้น ในขณะนี้เ ราจึงสรุป ได้ว่า มนุษ ย์นั้นคือสัตว์ชนิดหนึ่ง มีวิวัฒนาการต่อมาจนกระทั่ ง เหมาะสมกับสถานการณ์ในโลก มีร่างกายที่ประกอบด้วยโครงสร้างอัตโนมัติพืน้ ฐานทั้งหลาย แต่ว่าสิ่ง ที่ยังอธิบายไม่ได้ก็คือเซลล์ตา่ งๆ ที่ทางานร่วมกัน ทาไมจึงมีแนวความคิดเป็นของตัวเอง สิ่งที่มนุษย์เหนือคอมพิวเตอร์ คือ แนวคิด ซึ่งเกิดจากประสบการณ์ของเรา พฤติกรรมของ มนุษย์ที่แสดงออกก็เป็นส่วนซึ่งแสดงออกของแนวคิดตัวครึ่งหนึ่ง และอีกส่วนเป็นผลมาจากพันธุกรรม ที่ได้มาจากพ่อแม่ นอกจากผลจากพันธุกรรมแล้ว การเจริญเติบโตหรือแนวความคิดต่างๆ ขึ้นอยู่กับ สิ่งแวดล้อม พี่นอ้ งซึ่งอาจจะเกิดมาด้วยกันแต่ไปอยู่ในที่แตกต่างกัน มีความบีบคั้นหรือประสบการณ์ใน ชีวติ ที่แตกต่างกัน อาจจะทาให้มีพฤติกรรมหรือแนวความคิดแตกต่างกัน ดังนัน้ สภาพแวดล้อมไม่ว่าจะ เป็นครอบครัว สังคม หรือวัฒนธรรม จึงเป็นสิ่งที่มผี ลต่อพฤติกรรมของมนุษย์

3.4 พฤติกรรมมนุษย์ บุคลิกภาพ และการรับรู้ จิตวิทยา เป็นศาสตร์ที่ว่าด้วยการศึกษาถึงพฤติกรรมของมนุษย์ บุคลิกภาพ และการรั บรู้ มี กลุ่มความคิดที่สาคัญหลายกลุ่ม ซึ่งพยายามอธิบายถึงธรรมชาติ และความหมายของความเป็นมนุษย์ ดังนี้ -

แนวคิดจิตวิเคราะห์ แนวคิดพฤติกรรมนิยม แนวคิดการเรียนรู้การคิด ทฤษฎีกระบวนการทางสมองในการประมวลผลข้อมูล

3.4.1 แนวคิดจิตวิเคราะห์ ซิกมันด์ ฟรอยด์ (Sigmund Freud) จิตแพทย์ชาวออสเตรีย ซึ่งมีชีวิตอยู่ระหว่าง ปีค.ศ. 1856 1939 ผู้เป็นที่รู้จักในฐานะบิดาแห่งจิตวิเคราะห์ สร้างกรอบแนวคิดเกี่ยวกับธรรมชาติของมนุษย์ในเรื่อง เพศ เขามีความเชื่อว่าแรงผลักดันทาให้มนุษย์แสดงพฤติกรรม มีกาเนิดจากแรงผลักดัน 2 อย่างคือ แรง ขับทางเพศ และแรงขับความก้าวร้าว ทั้ง 2 แรงขับนี้ ดาเนินการในรูปของการทางานระหว่างโครงสร้าง บุคลิกภาพ - อิด (id) อิด (id) เป็นตัวแทนของความต้องการที่เป็นสัญชาตญาณดิบของมนุษย์ ซึ่งมักจะเก็บ ตัวอยู่ในส่วนของจิตไร้สานึกอันเป็นระดับจิตที่เราไม่รู้ตัว ถ้าความต้องการของอิด(id) ไม่ได้ รั บ การตอบสนองหรื อ ระบายออก บุ ค คลจะตกอยู่ ใ นภาวะตึ ง เครี ย ด ไม่ ส บาย การ ตอบสนองความต้องการ จะเป็นไปตามหลักของความพึงพอใจ ซึ่งกระทาในรูปของการไม่ ยั้ ง คิ ด ตอบสนองในขณะนั้ น อย่ า งทั น ที ทั น ควั น หรื อ กระท าในรู ป ของการสร้ า งภาพ จินตนาการ การทางานของอิด(id) จะเห็นเด่นชัดในเด็กเล็กๆ ที่ยังไม่รู้จักเรียนรู้ การยับยั้ง ชั่งใจ - อัตตา (ego) อัตตา(ego) เป็นส่วนของจิตใจที่โดยปกติสะท้อนโดยตรงในการแสดงออกของบุคคล มากที่สุด เมื่อเด็กมีพัฒนาการโตขึ้น จากการตอบสนองตามหลักของความพึงพอใจ ได้รับ การเรียนรู้ให้รู้จักตอบสนองสัญชาตญาณตามหลักของความเป็นจริง อัตตา(ego) เป็น ตัวแทนของบุคลิกภาพที่จะตอบสนองความต้องการของอิด(id) โดยคานึงถึงความถูกต้อง เหมาะสมกล่าวคือ อัตตา(ego) จะชะลอเวลาที่จะตอบสนองความต้องการ ถ้าสถานการณ์

ไม่เอื้ออานวย อัตตา(ego) จะใช้เหตุผลพิจารณาว่าควรทาอย่างไร ความต้องการจะได้รับ การตอบสนองโดยไม่ถูกตาหนิ เนื่องจากเด็กเติบโตในสังคมที่มีค่านิยมและวัฒนธรรมที่ เรียนรู้รว่ มกัน - อภิอัตตา (superego) อภิอัตตา(superego) ซึ่งเป็นตัวแทนของศี ลธรรมในจิตใจ ที่จะคอยปฏิเ สธ ต่อต้ า น ยับยั้ง ความต้องการของอิด(id) ดังนั้น อัตตา(ego) จึงเป็นตัวกลางระหว่าง 2 แรงผลักที่ยื้อยุ ด ปฏิเสธต่อกัน อัตตา (ego) จะพยายามรัก ษาสมดุลระหว่างการแสวงความพึงพอใจของอิด (id) และการเน้น ศีลธรรมของอภิอัตตา(superego)ซึ่งปฏิบัติไม่ได้จริง มโนทัศน์นี้โดยปกติแสดงภาพโดย "แบบจาลองภูเขาน้าแข็ง" (ดังภาพ 1) แบบจาลองนี้ แสดงบทบาทของอิด อัตตาและอภิอัตตาตามความคิดเกี่ยวกับภาวะรู้สานึกและไม่รู้สานึก ฟรอยด์เปรียบเทียบความสัมพันธ์ระหว่างอัตตากับอิดว่าเหมือนสารถีกับม้า โดยม้า เป็นพลังงานและแรงขับ ส่วนสารถีคอยชีน้ า

ภาพ 1 แสดงบทบาทของอิด อัตตาและอภิอัตตาตามความคิดเกี่ยวกับภาวะรู้สานึก และไม่รู้สานึก ที่มา https://allpsych.com/personalitysynopsis/drives/

3.4.2 แนวคิดพฤติกรรมนิยม นักทฤษฎีกลุ่มพฤติกรรมนิยมเกิดขึ้นในช่วงศตวรรษที่ 20 และได้รับการยอมรับอย่างกว้างขวาง ตั้งแต่อดีตจนถึงปัจจุบัน นักทฤษฎีกลุ่มนี้ให้ความสาคัญกับพฤติกรรมมาก และเชื่อว่าการเรียนรู้ของ มนุษย์ เป็นวิธีการทางวิทยาศาสตร์ซึ่งสามารถสังเกตและวัดได้จากพฤติกรรมภายนอก ซึ่งพฤติกรรม ดังกล่าวก็คือการตอบสนองของมนุษย์ที่มตี ่อสิ่งเร้า โดยประสบการณ์ดังกล่าว หากมีการกระทาซ้าแล้ว ซ้าอีกก็จะกลายเป็นพฤติกรรมโดยอัตโนมัติ ผู้นาแนวคิดนี้คือ พาฟลอฟ(Pavlov), วัตสัน(Watson), สกิน เนอร์(Skinner), แบนดูรา(Bandura) ตามแนวคิดนี้พฤติกรรมเป็นผลร่วมกันขององค์ประกอบต่อไปนี้ - ผลของการได้รับรางวัล (Reward) เมื่อได้แสดงพฤติกรรมนัน้ - ผลของการลงโทษ (Punishment) เมื่อแสดงพฤติกรรมไม่ตรงกับที่ผู้อ่นื ต้องการ - ผลของการเรียนรู้ในอดีต ของการได้รับรางวัลและการลงโทษ - ผลของการเรี ย นรู้ แ บบสรุ ป รวม และจ าแนกความแตกต่ า ง( Generalization and Discrimination Learning) - ผลของการสังเกตและการเลียนแบบพฤติกรรมของผูอ้ ื่น อีแวน พาโตรวิช พาฟลอฟ (Ivan Petrovich Pavlov) เป็นนักจิตวิทยาชาวรัสเซีย ซึ่งมีชีวิตอยู่ ระหว่างปีค.ศ. 1849 – 1936 เขาได้ทาการทดลองกับสุนัข โดยเริ่มจากการฝึกให้สุนัขยืนนิ่งตรึงอยู่ใน ห้องทดลอง ที่ข้างแก้มของสุนัขติดเครื่องมือวัดระดับการไหลของน้าลาย จากนั้นเข้าสู่กระบวนการวาง เงื่อนไขโดยการสั่นกระดิ่งและให้ผงเนื้อแก่สุนัข โดยทาซ้าควบคู่กันหลายครั้ง และในที่สุดหยุดให้อาหาร เพียงแต่สั่นกระดิ่งอย่างเดียว ก็ปรากฏว่าสุนัขยังคงมีน้าลายไหลได้ พาฟลอฟจึงสรุปออกมาเป็นทฤษฎี ได้ ว่ า 1) กฎแห่ ง การแผ่ ข ยาย (Law of Generalization) กล่ า วคื อ ความสามารถที่ จ ะตอบสนองใน ลักษณะเดิมต่อสิ่งเร้าที่มีความคล้ายคลึงกันได้ เมื่อหมาเกิดการเรียนรู้ว่าเมื่อได้ยินเสียงกระดิ่งจะได้ อาหาร หมามีแนวโน้มที่จะสนองตอบต่อเสียงใดๆ ก็ได้ที่คล้ายกับเสียงกระดิ่ง เช่น เสียงระฆัง ฉิ่ง ฆ้อง ฉาบ 2) กฎการจาแนกความแตกต่าง(Law of Discrimination) คือ ความสามารถในการที่จะจ าแนก ความแตกต่างของสิ่งเร้าได้ การสอนให้หมารู้จักแยกเสียงที่ต้องการให้เรียนรู้จากเสียงอื่นๆ ให้ใช้การ เสริมแรงภายหลังสิ่งที่ต้องการ 3) กฎการลดภาระ(Law of Extinction) หรือ การลบพฤติกรรมชั่วคราว กล่าวคือ การที่พฤติกรรมตอบสนองลดน้อยลงอันเป็นผลเนื่องจากการที่ไม่ได้รับสิ่งเร้าที่ไ ม่ได้ถูกวาง เงื่อนไข ซึ่งในที่นี้ก็คือรางวัลหรือสิ่งที่ต้องการนั่นเอง 4) กฎการฟื้นคืนสภาพเดิมตามธรรมชาติ( Law of Spontaneous recovery) หรือ การฟื้นตัวของการตอบสนองที่วางเงื่อนไขหลังจากการลบพฤติก รรม ชั่วคราวแล้วสักระยะหนึ่งพฤติกรรมที่ถูกลบเงื่อนไขแล้วอาจฟื้นตัวขึน้ มาอีกเมื่อได้การกระตุ้นโดยสิ่งเร้า ที่วางเงื่อนไข

จอห์ น บี วั ต สั น (John B. Watson) เป็ น นั ก จิ ต วิ ท ยาชาวอเมริ กั น เป็ น ผู้ น ากลุ่ ม จิ ต วิ ท ยา พฤติกรรมนิยม มีชีวติ อยู่ระหว่างปีค.ศ. 1878 - 1958 เขาได้ทาการศึกษาโดยร่วมมือกับผูห้ ญิงคนหนึ่ง ที่ อ นุ ญ าตให้ น าลู ก ชายวั ย 11 เดื อ นของเธอที่ ชื่ อ อั ล เบิ ร์ ต (Albert) เข้ า มาร่ ว มทดลอง โดยปกติ แล้วอัลเบิร์ตเป็นเด็กที่รักและชอบเล่นกับหนูขาว ดังนั้นวัตสันจึงทดลองทฤษฎีการเรียนรู้โดยการวาง เงื่อนไขเพื่อทาให้อัลเบิร์ตเปลี่ยนพฤติกรรมจากความรัก ชอบ และพอใจหนูขาวมาเป็นกลัวหนูขาว และ เมื่อเกิดความกลัวหนูขาวแล้ววัตสันจะเปลี่ยนกลับให้อัลเบิร์ตเลิกกลัวหนูขาวอีกครั้ง การทดลองเริ่ม ด้วยการนาหนูขาวส่งให้อัลเบิร์ต เมื่ออัลเบิร์ตยื่นมือรับและเล่นกับหนูขาว วัตสันจะรอให้อัลเบิร์ตเผลอ และตีแผ่นเหล็กเสียงดังสนั่นจนอัลเบิรต์ มีอาการตกใจกลัว หลังจากนั้นในครั้งต่อๆไป เมื่ออัลเบิร์ตกาลัง ยื่นมือมารับหนูขาว ผู้ช่วยได้ตีแผ่นเหล็กขึ้นดังสนั่น อัลเบิร์ตตกใจคลานหนีแล้วร้องไห้ ซึ่งวัตสันทาซ้าๆ หลายครั้งโดยในแต่ละครั้งพฤติกรรมการตอบสนองของอัลเบิร์ตต่อสิ่งเร้าทั้งสองจะเข้มข้นขึ้นเรื่อยๆ จนต่อมาเมื่อยื่นหนูขาวให้เพียงอย่างเดี ยวโดยไม่ต้องตีแผ่นเหล็ก ทันทีที่อัลเบิร์ตเห็นหนูขาวเขาก็ จะ ตกใจร้องไห้และคลานหนีไปรอบๆ ต่อมาวัตสันทาการทดลองให้อัลเบิร์ตหายกลัวหนูขาว โดยขณะที่นา หนูขาวมาให้ แม่จะคอยกอดอัลเบิร์ตไว้ ทาให้อัลเบิร์ตรู้สึกอบอุ่นปลอดภัย ทาเช่นนี้บ่อยๆ ครั้ง จน พฤติกรรมการกลัวหนูของอัลเบิร์ตลดลงและในที่สุดก็หายกลัวหนูและสามารถรับหนูมาเล่นเหมือนเดิม วัตสันจึงสรุปเป็นทฤษฎีการเรียนรู้ได้ว่า 1) พฤติกรรมเป็นสิ่งที่สามารถควบคุมได้ โดยการควบคุมสิ่งเร้า ที่วางเงื่อนไขให้สัมพันธ์กับธรรมชาติ และการเรียนรู้จะคงทนหากมีการให้สิ่งเร้าที่สัมพันธ์กั นนั้นควบคู่ กันไปอย่างสม่าเสมอ 2) เมื่อสามารถทาให้เกิดพฤติกรรมใดๆ ได้ ก็สามารถลดพฤติกรรมนั้นให้หายไป ได้ เบอร์ฮัส เอฟ สกินเนอร์ (Burhus F. Skinner) เป็นนักจิตวิทยาชาวอเมริกัน มีชีวิตอยู่ระหว่างปี ค.ศ. 1904 – 1990 เขาทาการทดลองกับหนู โดยนาหนูที่กาลังหิวจัด ใส่เข้าไปในกล่อง ซึ่งภายในกล่อง ประกอบด้วยคานไม้ยื่นออกมา เหนือคานขึ้นไปจะมีดวงไฟ เมื่อหนูแตะคาน จะมีอาหารหล่นลงมา 1 ชิน้ ปรากฏว่าหนูวิ่งไปทั่วกล่องด้วยความหิว จนกระทั่งมันบังเอิญวิ่งไปแตะคานจึงทาให้อาหารหล่นลงมา หนูจึงได้กินอาหาร พฤติกรรมเช่นนี้เกิดขึ้นหลายครั้งจนกระทั่งครั้งหลังๆ เมื่อหนูหวิ และต้องการอาหาร มันจะตรงไปกดคานทันทีแสดงว่าหนูเกิดพฤติกรรมการเรียนรู้แล้ว โดยมีคานเป็นสิ่งเร้า และอาหารเป็น ตัวเสริมแรง ต่อมาสกินเนอร์ทาการทดลองอีกครั้งกับนกพิราบโดยนานกพิราบที่กาลังหิวใส่ลงไปใน กล่อง ภายในกล่องเป็นแป้นสีต่ างๆ หลายสี แต่มีเพียงสีเดียวคือสีแดงที่เมื่อนกพิราบจิกเมื่อไรจะมี อาหารหล่นลงมาทันที และเช่นเดียวกับการทดลองกับหนู เมื่อนกพิราบเข้าไปในกล่องมันจะแสดง พฤติกรรมคือเดินไปเดินมาแล้วจิกไปทั่ว จนเมื่อมันบังเอิญจิกแป้นสีแดงแล้วอาหารจึงหล่นลงมาให้นก กิน สกินเนอร์สังเกตพฤติกรรม จนสุดท้ายเมื่อนกเข้าไปในกล่องมันจะตรงไปจิกแป้นสีแดงทันที แสดง ว่านกพิราบเกิดการเรียนรู้ข้ึนแล้วเช่นเดียวกับที่ทดลองกับหนู สกินเนอร์ได้สรุปกฏเกณฑ์ที่เกี่ยวกับการ เสริมแรงไว้ว่า 1) การเสริมแรงทางบวก (Positive Reinforcement) ได้แก่ การให้รางวัล การให้ของขวัญ

คาชมเชย ฯลฯ จะช่วยเพิ่มความถี่ให้บุคคลแสดงพฤติกรรมนั้นๆ มากขึ้น 2) การเสริมแรงทางลบโดย การลงโทษ (Punishment) จะช่วยลดความถี่ให้บุคคลแสดงพฤติกรรมนั้นๆ ลง 3) การไม่ใช้การเสริมแรง ทางลบ (Negative Reinforcement) จะช่วยเพิ่มความถี่ให้บุคคลแสดงพฤติกรรมนั้ นๆ มากขึ้นเช่นกันกับ การเสริมแรงทางบวก 4) พฤติกรรมที่เคยกระทาเพิ่มขึ้นเนื่องจากการเสริมแรง หากไม่มีการเสริมแรง อย่างต่อเนื่อง พฤติกรรมนัน้ ๆ จะมีความถี่ลดลง (Extinction) แนวคิดพฤติกรรมนิย ม ถูกโจมตีว่ามองมนุษย์เหมือนสัตว์ที่สามารถกาหนดให้ทาอะไรก็ ไ ด้ เพียงแต่ใช้รางวัลและการลงโทษปรับพฤติกรรมมนุษย์ อัลเบิร์ต แบนดูรา (Albert Bandura) จึงขยาย กรอบแนวคิดพฤติกรรม โดยเพิ่มขบวนการควบคุมตนเอง หรือรางวัลภายใน (Intrinsic Reward) ซึ่ง หมายถึง รางวัลที่บุคคลนั้นให้กับตนเอง มักจะเป็นมาตรฐานที่ตนกาหนดขึ้น เช่น ความสุขจากการ ช่ว ยเหลือผู้อื่น ความซื่อสั ตย์ ความยุ ติธ รรม เป็นต้น รางวัลภายในอาจขัดแย้งกั บ รางวัลภายนอก (Extrinsic Reward) ซึ่งหมายถึง รางวัลที่คาดหวังตามค่านิยมในสังคมนั้น ปกติมักเป็นเรื่องของรางวัลที่ ตอบสนองความต้องการเบือ้ งต้นทั้ง 4 ของมาสโลว์ (Maslow) เช่น เงิน ได้เกรดดีๆ คาชม ตาแหน่ง ฯลฯ อั ล เบิ ร์ ต แบนดู ร า (Albert Bandura) ยั ง ให้ ค วามส าคั ญ กั บ ตั ว แบบที่ เ ป็ น แบบอย่ า งในการแสดง พฤติกรรม บุคคลเรียนรู้ที่จะแสดงพฤติกรรม เพราะได้สังเกตและเลียนแบบพฤติกรรมของบุคคลที่ตน ชื่นชอบ หรือมีความคิดเห็นว่าควรเลียนแบบ 3.4.3 แนวคิดการเรียนรู้การคิด นักจิตวิทยากลุ่มนี้คัดค้านว่า มนุษย์มิได้เป็นเพียงหน่วยรับสิ่งเร้า ที่ถูกให้รางวัล ถูกลงโทษ แต่ มนุษย์จะมีการประมวลข้อสนเทศที่รับเข้ามา กล่าวคือ ข้อมูลที่รับเข้ามา อาจถูกลดจานวน เปลี่ยนรหัส และส่งไปเก็บไว้ที่กล่องความจา และรื้อฟื้นเรียกคืน เมื่อต้องการรับรู้ จินตนาการ แก้ปัญหา ผูน้ าแนวคิดนี้คือ นักจิตวิทยากลุ่มเกสตอลท์ (Gestalt) ซึ่งไม่เห็นด้วยกับการเข้าใจพฤติกรรมใน รูปของความสัมพันธ์ระหว่างสิ่งเร้ากับการตอบสนองโดยละเลยกระบวนการรูก้ ารคิด ข้อมูลที่รับเข้ามา จะมีการผสมผสานกับข้อมูลเดิม และตัดสินใจเลือกวิธี การที่เหมาะสม การตอบสนองของมนุษย์ขึ้นกับ การประมวลข้อมูลข่าวสาร ที่ไม่จากัดเฉพาะเรื่องรางวัลกับการลงโทษ แนวคิดนี้เรียกอีกอย่างหนึ่งว่า แนวคิด การประมวลข้อสนเทศ พยายามศึก ษากระบวนการทางจิ ต เช่น การจา การคิด การรับ รู้ อารมณ์ พลั งจูงใจ อย่างเป็นวิท ยาศาสตร์ เพราะฉะนั้นในปัจจุบั นจึ งกลายเป็น สาขาที่ สาคั ญ ของ จิตวิทยาการทดลอง

การเรียนรูข้ องกลุ่มเกสตัลท์ ที่เน้น "การรับรู้เป็นส่วนรวมมากกว่าส่วนย่อย" นั้น ได้สรุปเป็นกฎ การเรีย นรู้ เรีย กว่ากฎการจัด ระเบีย บเข้า ด้วยกั น (The Laws of Organization) ได้แก่ กฎแห่งความ แน่ น อนหรื อ ชั ด เจน (Law of Pragnanz), กฎแห่ ง ความคล้ า ยคลึ ง (Law of Similarity), กฎแห่ ง ความ ใกล้ ชิ ด (Law of Proximity), กฏแห่ ง การสิ้ น สุ ด (Law of Closure), กฎแห่ ง ความต่ อ เนื่ อ ง (Law of Continuity) เป็นต้น มีรายละเอียดดังนี้ - กฎแห่งความแน่นอนหรือชัดเจน (Law of Pragnanz) ภาพและพื้น หรือภาพสองนัย คือ ในภาพเดียวกัน คนบางคนอาจเห็นไม่เหมือ นกั น ทั้งนี้ ขึ้นอยู่กับประสบการณ์เดิมของแต่ละคน อิทธิพลของประสบการณ์ที่มีต่อการรับรู้ ภาพและพื้น การมองเห็นรูปภาพ (Figure) และพื้น (Ground) สลับกันนั้น ตามทฤษฎีของ กลุ่มเกสตัลท์ เชื่อว่า การรับรู้ในลักษณะเช่นนี้ขึ้นอยู่กับประสบการณ์ของบุคคลเป็นสาคัญ เพราะประสบการณ์เดิมของบุคคล มีผลต่อการรับรู้ ตัวอย่างเช่น ภาพ 2 ซึ่งบางคนอาจ เห็นว่าเป็นรูปพาน หรืออาจเห็นว่าเป็นรูปคน 2 คนหันหน้าเข้าหากัน โดยถ้าดูสขี าวเป็นภาพ สีดาเป็นพื้น ก็จะเห็นเป็นรูปคน 2 คน หันหน้าเข้าหากัน แต่ถ้าดูสีดาเป็นภาพ สีขาวเป็นพืน้ ก็อาจจะเห็นเป็นรูปพาน เป็นต้น

ภาพ 2 แสดง Law of Pragnanz (Figure / ground) ที่มา http://jamiewayne.com/2012/06/06/cv-graphic-design-is-it-an-art-or-a-science/

- กฎแห่งความคล้ายคลึง (Law of Similarity) กฎนี้เป็นกฎที่ แมกซ์ เวอร์เธเมอร์ (Max Wertheimer) ตั้งขึ้นในปี ค.ศ. 1923 โดยใช้ เป็นหลั ก การในการวางรูป กลุ่มของการรับ รู้ เช่น กลุ่มของเส้น หรือสี ที่คล้ายคลึงกั น หมายถึงสิ่งเร้าใด ๆ ก็ตาม ที่มีรูปร่าง ขนาด หรือสี ที่คล้ายกัน คนเราจะรับรู้ว่า เป็นสิ่ง เดียวกัน หรือพวกเดียวกัน ตัวอย่างเช่น ภาพ 3 เราจะเห็นว่า รูปสี่เหลี่ยมเล็ก ๆ แต่ละรูป ที่ มีสดี า เป็นพวกเดียวกัน

ภาพ 3 แสดง Law of Similarity ที่มา http://www.baanjomyut.com/library_2/extension-2/gestalt_theory/01.html - กฎแห่งความใกล้ชิด (Law of Proximity) สาระสาคัญของกฎนี้ มีอยู่ว่า ถ้าสิ่งใดหรือสถานการณ์ใดที่เกิดขึ้นในเวลาต่อเนื่องกัน หรือในเวลาเดียวกัน คนเราจะเรียนรู้ว่าเป็นเหตุและผลกัน หรือ สิ่งเร้าใดๆ ที่อยู่ใกล้ชิดกัน คนเราจะมีแนวโน้มที่จะรับรู้ สิ่งต่างๆ ที่อยู่ใกล้ชิดกันเป็นพวกเดียวกัน หมวดหมู่เดียวกั น ตัวอย่างเช่น ภาพที่ 4 เราจะเห็นว่ามีทหารเป็น 5 แถว

ภาพ 4 แสดง Law of Proximity ที่มา http://www.baanjomyut.com/library_2/extension-2/gestalt_theory/01.html

- กฏแห่งการสิ้นสุด(Law of Closure) สาระสาคัญของกฎนี้มีอยู่ว่า แม้ว่าสถานการณ์หรือปัญหายังไม่ สมบูรณ์ มนุษย์ก็ยังจะ เกิดการเรียนรู้ ได้จากประสบการณ์เดิมต่อสถานการณ์นั้น สิ่งเร้าที่ขาดหายไป คนเรา สามารถรับรู้ให้เป็นภาพสมบูรณ์ได้โดยอาศัยประสบการณ์เดิม ตัวอย่างเช่น ภาพที่ 5 จะ เห็นว่าถึงแม้เส้นต่าง ๆ ไม่จาเป็นต้องลากไปจนสุด หรือบรรจบกัน แต่เมื่อสายตามองก็ พอจะเดาได้ว่า น่าจะเป็นรูปอะไร

ภาพ 5 แสดง Law of Closure ที่มา https://speckyboy.com/designing-for-human-limitations-a-scientific-perspective-onminimal-design/ - กฎแห่งความต่อเนื่อง (Law of Continuity) สิ่งเร้าที่มีทิศทางในแนวเดียวกัน ซึ่งคนเราจะรับ รู้ว่าเป็นพวกเดียวกัน ตัวอย่งเช่น ภาพ ที่ 6 สายตาเราจะมองตามเส้นโค้งที่ตัดผ่านตัว H ซึ่งนาสายตาไปสู่ใบไม้ได้

ภาพ 6 แสดง Law of Continuity ที่มา http://graphicdesign.spokanefalls.edu/tutorials/process/gestaltprinciples/gestaltprinc.htm

3.4.4 ทฤษฎีการประมวลสารสนเทศ เฮอร์เ บิร์ท จอห์น คลาวส์มิเ อร์ (Herbert John Klausmeier) นัก จิตวิท ยากลุ่มปัญ ญานิย มได้ อธิบายการเรียนรู้ของมนุษย์โดยเปรียบเทียบกับการทางานของสมองกับการทางานของคอมพิวเตอร์ ซึ่งมีขั้นตอนคือ การรับข้อมูล (Input) การเข้ารหัส (Encoding) และการส่งออกข้อมูล (Output) ซึ่งหาก อธิ บ ายตามทฤษฎี ก ารประมวลสารสนเทศนั้น สามารถแบ่ ง กระบวนการประมวลผลสารสนเทศ ออกเป็น 3 ขั้นตอน ดังนี้ - การรับรู้ (Sensory memory) หมายถึง ความจาที่เกิดทันทีที่มีการรับรู้จากสิ่งเร้า โดยยังไม่มีการทบทวนหรือใส่ใจ ทาให้ลืมได้ง่ายภายในไม่กี่วินาที เมื่อ มนุษย์รับสิ่งเร้าเข้ามาทางประสาทสัมผัสทั้ง 5 คือ ตา หู จมูก ผิวหนัง และลิ้น สิ่งเร้าที่เข้ามาจะได้รับการบันทึกไว้ในความจาระยะสั้น ซึ่งการ บันทึกนี้จะขึ้นอยู่กับองค์ประกอบ 2 ประการ คือ การรู้จัก (Recognition) และความใส่ใจ (Attention) ของบุคคลที่รับสิ่งเร้า - ความจาระยะสั้น (Short-term memory) หมายถึง ความจาซึ่งเราตั้งใจจดจาไว้ชั่วคราวไม่กี่นาที และถ้าไม่มีการทบทวนความ ทรงจาก็จะลืมไปได้เช่นกัน กล่าวคือ หากการรับรู้มีความสาคัญหรือน่าสนใจ สิ่งเร้านั้นจะ ได้รับการลงบันทึกลงในความจาระยะสั้น (Short-term memory) ซึ่งจะอยู่ในระยะเวลาที่ จากัด ในการทางานที่จาเป็น ต้องเก็บข้อมูลไว้ใช้ชั่วคราว อาจจาเป็นต้องใช้เทคนิคต่างๆ ใน การช่วยจา เพื่อเพิ่มความจาให้ง่ายขึ้นหรือจาได้นานขึ้น เช่น การท่องเบอร์โทรศัพท์หลาย ครั้ง หรือ การจัดแบ่งกลุ่มเบอร์โทรศัพท์ออกเป็นชุดตัวเลข เป็นต้น - ความจาระยะยาว (Long-term memory) หมายถึ ง ความจาที่เ ราทบทวนอยู่เ สมอ ท าให้เ ปลี่ย นจากความจาระยะสั้นมาเป็น ความจ าระยะยาว ซึ่ ง อาจอยู่ ไ ด้ น านเป็ น ปี หรื อ ตลอดชี วิ ต ก็ ไ ด้ การเก็ บ ข้ อ มู ล ไว้ ใ ช้ใ น ภายหลัง ทาได้โดยข้อมูลนั้นต้องได้รับการประมวล และเปลี่ยนรูปโดยการเข้ ารหัส เพื่อ นาไปเก็บไว้ในความจาระยะยาว (long-term memory) หรือความจาถาวร ซึ่งอาจต้องใช้ เทคนิคต่างๆ เข้าช่วย ได้แก่ - การทาหรือท่องซ้าๆ (Rehearsal) ซึ่งแม้จะเป็นแนวทางของการสร้างความจา ระยะสั้น แต่ก็สามารถใช้กับการสร้างความจาระยะยาวได้ เช่น การท่องสูตร คูณ ซึ่งเป็นการท่องจาที่ไม่จาเป็นต้องใช้ความคิด - กระบวนการขยายความคิด (Elaborative Process) คือการสร้างความสัมพันธ์ หรือการเชื่อมโยงระหว่างสิ่งที่เรียนรู้ใหม่หรือข้อมูลใหม่ กับความรู้เดิมที่เคย เรียนรู้มาก่อน ทาให้ข้อมูลให้มีความหมายกับตนเอง

3.5 สรุป สรุปได้ว่า การปฏิสัมพันธ์ระหว่างมนุษย์และคอมพิวเตอร์ (Human computer interaction: HCI) คือ การศึกษาที่เชื่อมโยงเกี่ยวเนื่องกั นของหลายๆ ศาสตร์ เช่น วิทยาการคอมพิวเตอร์ พฤติกรรม ศาสตร์ จิตวิทยา และการออกแบบ เป็นต้น โดยมีเป้าหมายเพื่อช่วยให้เราเข้าใจ และสามารถพัฒนา คอมพิ ว เตอร์ ใ ห้ ป ฏิ สั ม พั นธ์ กั บ ผู้ ใ ช้ ไ ด้อ ย่ า งมี ป ระสิ ท ธิ ภ าพมากยิ่ ง ขึ้น คอมพิ ว เตอร์ ในที่ นี้ จึ ง ไม่ไ ด้ หมายถึงแค่เครื่องคอมพิวเตอร์เท่านั้น แต่ยังรวมไปถึงโปรแกรม เว็บไซต์ เครื่องจักรกล และระบบ อัตโนมัติต่างๆ ด้วย ในการออกแบบปฏิสัมพันธ์ต้องการคานึงถึงมนุษย์หรือผู้ใช้เป็ นศูนย์กลางนั้น จึง จาเป็นอย่างยิ่งที่จะต้องศึกษาความเป็นมนุษย์ก่อน ว่ามีความสามารถหรือข้อจากัดอย่างไร นอกจากนี้ ยังต้องศึกษาพฤติกรรมต่างๆ ตลอดจนบุคลิกภาพ และการรับรู้ของมนุษย์ตามแนวคิดทางจิตวิทยาอีก ด้วย จึงจะสามารถออกแบบ ประเมิน และพัฒนาระบบให้สอดรับกับความต้องการของมนุษย์ได้

กิจกรรมภาคปฏิบัติ ใบงานที่ 3 1. วัตถุประสงค์ 1.1 เพื่อให้นิสิตตระหนักถึงความสาคัญของการศึกษาพฤติกรรมของผู้ใช้งานเพื่อออกแบบงาน มัลติมีเดียให้มปี ระสิทธิภาพ 1.2 เพื่อให้นสิ ิตฝึกวิเคราะห์ผลิตภัณฑ์ในชีวิตประจาวันที่มีข้อบกพร่องด้านการออกแบบ (ในแง่ ของการใช้งาน) พร้อมเสนอแนะแนวทางการออกแบบที่คิดว่าดีกว่าเดิม ตามหลักการออกแบบของนอร์ แมน (Norman’s Design Principle) 1.3 เพื่อให้นิสิตได้มีประสบการณ์ในการทางานร่วมกัน ทั้งการวางแผนงาน การแบ่งหน้าที่การ ทางาน การแก้ไขปัญหา และการปรับปรุงพัฒนา โดยผ่านการทากิจกรรมภาคปฏิบัติ 2. สาระสาคัญ เนื้อหาในบทที่ 3 เกี่ยวข้องกับการศึกษาการปฏิสัมพันธ์ของมนุษย์กับคอมพิวเตอร์ (Human computer interaction: HCI) โดยเน้นหนักไปที่การศึกษาพฤติกรรม บุคลิกภาพและการรับรู้ของมนุษย์ ตามแนวคิดทางจิตวิทยา เพื่ อให้นิสิตตระหนักถึงความสาคัญของการศึกษาพฤติกรรมมนุษย์ นิสิต จะต้องมีความเข้าใจเนื้อหาอย่างถ่ องแท้ ดังนั้น กิจกรรมในใบงานที่ 3: การวิจารณ์ผ ลิต ภัณฑ์ท่ี ออกแบบไม่ดี (Bad Design) จึงเป็นการเสริมความเข้าใจ และกระตุ้นให้นิสิตได้นาความรู้ในบทเรียน มาประยุกต์ใช้กับชีวติ ประจาวัน 1. วิธีการ ให้นิสิตกลุ่มละ 3 คน ช่วยกันหาผลิตภัณฑ์ในชีวิตประจาวันที่ตนคิดว่า มีข้อบกพร่องด้านการ ออกแบบ(ในแง่ของการใช้งาน) กลุ่มละ 1 ผลิตภัณฑ์ พร้อมเสนอแนะแนวทางการออกแบบที่คิดว่าดี กว่าเดิม ตามหลักการออกแบบของนอร์แมน (Norman’s Design Principle) ในสัปดาห์หน้า ให้นิสิตส่งรายงาน พร้อมทั้งนาเสนอหน้าชั้นเรียน กลุ่มละไม่เกิน 10 นาที นิสิต ควรนาผลิตภัณฑ์นั้นมาสาธิ ตด้ว ยในห้องเรียน (หากผลิตภัณฑ์มีขนาดใหญ่อนุโลมให้นาเสนอด้วย ภาพถ่ายแทน)

ตัวอย่าง : Bad Design Bad Design

Better Design

(ออกแบบโดยNicole Pannuzzo จากคณะออกแบบภายในแห่ง Arizona State University)

ผลิตภัณฑ์:

หลอดยาสีฟัน

ข้อบกพร่อง: 1. หากผู้ใช้ลืมปิดฝาหลอดยาสีฟัน หรือปิดไม่สนิททาให้ฝาเผยอออก จะทาให้ยาสีฟันพอกบริเวณฝาปิด และขอบหลอด ดูไม่น่าใช้งาน และยังทาให้ยาสีฟันแข็งตัวจนบีบออกได้ยาก 2. เวลายาสีฟันใกล้หมดหลอด รีดออกได้ยาก ทาให้เจ็บมือและเสียเวลา ข้อควรปรับปรุง: 1. ควรใช้ฝาปิดที่มียางหรือวัสดุอื่นผนึก ทาให้ผู้ใช้มั่นใจว่าปิดฝาสนิท (Feedback) เพราะจะมีเสียง “กึก” เมื่อฝาลงล็อคสนิท 2. ออกแบบหลอดยาสีฟัน โดยเอาแรงดันจากภายในมาเข้าช่วย ด้วยดีไซน์แบบเดียวกับเครื่องดนตรีหีบ เพลงชักหรือ แอกคอร์เดียน (Accordion) ใช้การดันก้นหลอดให้ยาสีฟันไหลออกมา นอกจากจะใช้แรง บีบ เราน้อยลงแล้ว เวลาใช้จนยาสีฟั นข้ า งในพร่ อ งไปเรื่อยๆ หลอดก็ จะหดสั้น ลงตามไปด้ วย ช่วย ประหยัดพื้นที่ในการเก็บและตอนทิ้งด้วย

บทที่ 4 การออกแบบจากประสบการณ์ผู้ใช้งาน หัวข้อเนื้อหาประจาบท 1. ความหมายของประสบการณ์การใช้งานของผู้ใช้ 2. พืน้ ฐานเกี่ยวกับพฤติกรรมผู้ใช้งาน 3. รูปแบบพฤติกรรมของผูใ้ ช้งาน

วัตถุประสงค์ 1. มีความเข้าใจความหมายของประสบการณ์การใช้งานของผู้ใช้(User Experience: UX) 2. มี ค วามเข้ า ใจลั ก ษณะและพฤติ ก รรมของผู้ ใ ช้ และรู้ จั ก วิ ธี ก ารหรื อ เทคนิ ค ต่ า งๆ เพื่ อ รวบรวมข้อมูลจากผู้ใช้ 3. สามารถประยุกต์ใช้ความรู้มาออกแบบงานมัลติมีเดียให้ ตรงกับความพฤติกรรมการใช้งาน รูปแบบต่างๆ ของผู้ใช้ และสามารถหาวิธีการมารองรับการใช้งานตามรูปแบบพฤติกรรม นั้นได้ดยี ิ่งขึ้น เวลาเรียน สัปดาห์ที่ 5-6 กิจกรรมการเรียนการสอน 1. การบรรยาย 2. การอภิปรายและการซักถามเกี่ยวกับเนือ้ หาในบทเรียนร่วมกัน 3. กาหนดประเด็นปัญหาเพื่อศึกษาค้นคว้าเพิ่มเติม

4.1 ความหมายของประสบการณ์การใช้งานของผู้ใช้ ประสบการณ์การใช้งานของผู้ใช้(User Experience: UX) คือ การศึกษา และเก็บรวบรวมข้อมูล เกี่ยวกับอารมณ์ ความรู้สึก และความคาดหวังของผู้ใช้ ต่อผลิตภัณฑ์ ว่าผู้ใช้รู้สึกว่าใช้งานง่ายหรือไม่ พอใจหรือไม่ นั่นเอง หากเราต้องการสร้างงานสักชิ้นให้ได้รับการยอมรับจากผู้ใช้ เราจะต้องมีความ ความเข้าใจตัวตนของผู้ใช้อย่างลึกซึ้งเสียก่อน อย่างแรกต้องทราบก่อนว่าใครเป็นผู้ใช้ เป้าหมายของ ผู้ใช้คืออะไร สภาพแวดล้อมการใช้งาน ไปจนถึงการรับรู้และประสบการณ์ของผู้ใ ช้ จึงจะสามารถ ออกแบบงานให้ตรงตามความต้องการของผู้ใช้งานได้อย่างแท้จริง ซึ่งแต่ละคนแต่ละกลุ่มก็มีความ ต้องการไม่เหมือนกัน ดังนั้น นักออกแบบ นักพัฒนา หรือนักการตลาดเองต้องค้นคว้าวิจัย และทางาน ประสานกัน

ภาพ 1 แสดงรีโมทคอนโทรล 2 แบบ ที่มา http://logoscreative.co/snag-hunting/ ยกตั ว อย่ า งเช่ น หากเราน ารี โ มทคอนโทรลทั้ ง สองแบบ ดั ง ภาพ 1 ไปให้ คุ ณ ป้ า ของเราที่ ต่างจังหวัดเลือก ลองดูว่าป้าของเราจะเลือกรีโมทแบบไหนระหว่าง ซ้ายหรือขวา ในทางกลับกันเพื่อน ของเราบางคนอาจจะไม่เลือกเหมือนป้าของเรา ทั้งๆ ที่ทั้งสองอย่างมันเป็นรีโมทคอนโทรลเหมือนกัน ดังนั้น การออกแบบจากประสบการณ์ใช้งานที่ดีที่สุดนั้น นักออกแบบจะต้องออกแบบของออกมาให้ ผูใ้ ช้รู้สกึ ว่าสามารถควบคุมของชิน้ นั้นๆ ได้นั่นเอง

4.2 พืน้ ฐานเกี่ยวกับพฤติกรรมผู้ใช้งาน การออกแบบงานมัลติมีเดีย ระบบอัตโนมัติ เว็บไซต์ และโปรแกรม ที่ดีนั้น จาเป็นต้องเข้าใจถึง ความต้องการของผู้ใช้ โดยก่อนการออกแบบนั้นจาเป็นต้องศึกษาถึงลักษณะ และพฤติกรรมของผู้ใช้ ซึ่งจะทาให้ทราบว่าผู้ใช้มีความต้องการในการใช้งานอย่างไร และการตอบสนองแบบใดที่ผู้ใช้พึงพอใจ มากที่สุด ทาให้ได้ระบบที่มีประสิทธิภาพและใช้งานง่าย การศึกษาถึงพฤติกรรมของผู้ใช้จึงเป็นส่วน สาคัญอีกหนึ่งเรื่องที่ต้องใส่ใจไปพร้อมๆ กับรูปลักษณ์ของงาน การจาแนกลักษณะและพฤติกรรมของผูใ้ ช้ โดยพิจารณาจากสิ่งต่อไปนี้ - เป้าหมายหรือวัตถุประสงค์ในการใช้งานของผูใ้ ช้ - หน้าที่หรืองานที่ผใู้ ช้มีสว่ นรับผิดชอบตามเป้าหมายหรือวัตถุประสงค์ของตน - ภาษาและคาพูดของผู้ใช้ที่ใช้ในการอธิบายงานของตน - ทักษะ ความรูห้ รือประสบการณ์ในการใช้งานของผูใ้ ช้ - พฤติกรรมของผูใ้ ช้ที่มตี ่อชิน้ งานที่ออกแบบนั้นเป็นอย่างไร - ชิน้ งานที่แตกต่างกันมีผลกระทบต่อพฤติกรรมของผูใ้ ช้หรือไม่และอย่างไร อย่างไรก็ตาม สิ่งที่กล่าวมานั้น เป็นเพียงหลักการเบือ้ งต้นที่นักออกแบบจาเป็นต้องทราบ เพื่อ นามาใช้และจาแนกลักษณะหรือพฤติกรรมของผู้ใช้ ดังนั้นนักออกแบบจึงควรหาความรู้เพิ่มเติมจาก หนังสือหรือผลงานวิจัย ที่เ กี่ ย วข้องกั บ พฤติก รรมของผู้ใ ช้เ พื่อให้เ ข้าใจได้ดียิ่งขึ้น การที่จะเข้าใจถึง พฤติ ก รรมของผู้ ใ ช้ ไ ด้ อ ย่ า งชั ด เจนและสามารถออกแบบชิ้ น งานให้ ต อบสนองต่ อ ผู้ ใ ช้ ไ ด้ อ ย่ า งมี ประสิทธิภาพนั้น นักออกแบบจาเป็นต้องใช้วธิ ีการหรือเทคนิคต่างๆ เพื่อรวบรวมข้อมูลจากผูใ้ ช้ ซึ่งอาจ เลือกใช้วธิ ีการดังต่อไปนี้ - การสัมภาษณ์ (Interviewing) - การสนทนากลุ่ม (Focus group) - การสร้างตัวตนของผูใ้ ช้ (Persona)

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

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

- เตรียมพร้อม

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

- ตั้งข้อสังเกต

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

- เปิดกว้าง

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

- เงียบบ้างก็ได้

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

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

วางแผนตั้ ง ค าถามประมาณ 4-5 ข้ อ ในการสนทนา ระยะเวลา 2 ชั่วโมง โดยพยายามเป็นคาถามปลายเปิด และเป็นกลาง เช่น แทนที่จะถามว่า “คุณชอบงานชิ้นนี้ ไหม” ให้ถามว่า “คุณชอบอะไรในงานชิน้ นี”้ เป็นต้น

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

ขออนุญาตผู้เข้าร่วมในการจัดการสนทนากลุ่มและแจ้ง ให้พวกเขาทราบว่าคาตอบของพวกเขาจะถูกนาไปใช้ อย่างไร เตรียมอาหารว่างให้ผู้เข้าร่วม จัดให้ผู้เข้าร่วม นั่งเป็นวงกลม ใช้เ วลาไม่ควรเกิ น จากที่ ก าหนดไว้ 2 ชั่วโมง

- ยอมรับฟังความเห็นต่าง

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

- สร้างความมั่นใจให้กับผูเ้ ข้าร่วม

บอกว่าพวกเขาเป็นผู้เชี่ยวชาญ อธิบายว่าคุณมาอยู่ มา อยู่ ที่นั่นเพื่อเรีย นรู้ค วามคิด เห็น ประสบการณ์ และ ปฏิกิรยิ าของพวกเขา

- ให้ความสนับสนุนแต่เป็นกลาง

ถามคาถามเช่น “ช่วยเล่ารายละเอียดให้ฟังหน่อยได้ ไหม” “ช่ ว ยอธิ บ ายสิ่ ง ที่ คุ ณ บอกได้ ไ หม” หรื อ “ช่ ว ย ยกตัวอย่างให้ฟังหน่อยได้ไหม”

- ถามคาถามเดิมซ้าอีกครั้ง

ถามคาถามซ้าเพื่อให้การสนทนาไม่ออกนอกประเด็น อย่ า รี บ ให้ โ อกาสพวกเขาเงี ย บบ้ า ง เพื่ อ ประมวล ความคิด

4.2.3 การสร้างตัวตนของผูใ้ ช้ (Persona) การสร้างตัวตนของผู้ใช้ (Persona) คือการหยิบใครคนหนึ่งขึ้นมาเป็นตัวแทนของกลุ่มเป้าหมาย ซึ่งมีสว่ นช่วยอย่างมากให้นักออกแบบและคนทางานเห็นภาพตรงกันว่า กลุ่มเป้าหมายที่ว่านั้นคือใคร มี พฤติกรรมอย่างไร ทาให้สามารถวิเคราะห์ขอ้ มูลที่เกี่ยวกับผูใ้ ช้ ทาให้การออกแบบชิน้ งานสามารถทาได้ อย่างมีประสิทธิภาพมากขึ้นและตอบสนองตามพฤติกรรมของผู้ใช้ ได้ดียิ่งขึ้น กระบวนการการสร้าง ตัวตนของผู้ใช้ (Persona) มีรายละเอียดดังต่อไปนี้ - สร้างตัวตนของผูใ้ ช้

ไม่ใช่แค่บอกช่วงอายุหรือระดับการศึกษา แต่เป็นการ สร้ า งคนขึ้ น มาจริ ง ๆ มี อ ายุ แ น่ น อน มี ชื่ อ พฤติ ก รรม ความชอบ ลักษณะนิสัย เป้าหมายในชีวิต ความสนใจ ปัญหาของเค้า

- จินตนาการคนๆ นีต้ ลอดเวลา

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

เวลาที่สร้างตัวตนของลูกค้าขึน้ มา เราต้องการให้ตัวตนนั้นชัดเจนมากที่สุด ยิ่งถ้าทาให้คนในทีม สามารถจินตนาการออกมาได้เป็นคนเดียวกันยิ่งดีขึ้นไปอีกการให้ข้อมูลมาก บางทีทาให้ภาพที่ควรจะ ชัดกลายเป็นภาพเบลอๆ และหลายครั้งทาให้ไม่อยากอ่านเสียเปล่าๆ เทคนิคในการสร้างตัวตนของผู้ใช้ (Persona) จึงควรมีองค์ประกอบและลักษณะดังนี้ - รูปภาพ

ภาพที่ไ ม่เ ป็นทางการจะสามารถบอกได้ว่า คนนี้ดูเ ป็นคนช่างคิดนะ อายุ ประมาณไหน ชอบคิดอะไรทาไมคิดไปยิ้มไป จนบางครั้งอาจจะบอกได้ว่า ถ้า คนแบบนีม้ าใช้โปรแกรมของเราเค้าจะคิดอย่างไร

- ชื่อ

แม้ว่าในความเป็นจริง ชื่อจะไม่สามารถบอกได้ว่าคนๆ นั้นเป็นคนแบบไหน แต่ในความรู้สกึ ของคน ชื่อจะช่วยบอกลักษณะนิสัยใจคอได้ เช่น ถ้าชื่อตามั่น อาจจะคิดได้ว่าเค้าเป็นคุณลุงอยู่ต่างจั งหวัด หรือถ้าชื่อดาว อาจจะคิดว่า เป็นเด็กผูห้ ญิงน่ารักคนหนึ่ง เป็นต้น

- อายุ

การบอกช่วงอายุจะช่วยให้เราคาดการณ์ได้ว่าควรออกแบบมาในแนวไหน แต่สาหรับการทา UX เราจะไม่บอกเป็นช่วงแต่จะระบุไปเลยว่าอายุเท่าไหร เพื่อให้เ ราสามารถเดาความรู้สึก ของผู้ใ ช้ไ ด้ชั ดที่สุด เร็วที่สุด ลองนึก ถึ ง พฤติกรรมและความคิดของนักศึกษาวัย 21 ปี กับคุณแม่วัย 34 ปี เราจะนึก ถึงความแตกต่างได้ทันที

- ที่อยู่

คนในทีมเดียวกัน จะมีแนวโน้มที่จะมองคนที่อยู่ในที่ต่างๆ คล้ายๆ กัน เช่น ลองนึกถึงนิสัยของคนจังหวัดเชียงใหม่ กับนิสัยของคนจังหวัดนราธิวาสดู เราจะพอจินตนาการได้ว่าสองคนนีน้ ่าจะมีนิสัยใจคอต่างกันอย่างไร

- อาชีพ

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

- ประวัติย่อ

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

4.3 รูปแบบพฤติกรรมของผู้ใช้งาน การศึก ษาพฤติก รรมของผู้ใ ช้เ ป็นสิ่งที่ต้องให้ความสาคัญ เนื่องจากข้อมูลที่ไ ด้นั้นสามารถ นามาใช้ร่วมกับการออกแบบ เพื่อให้ได้ ชิ้นงานที่สามารถตอบสนองต่อความต้องการของผู้ใช้ได้อย่าง เต็มที่ แต่การศึกษาพฤติกรรมของผูใ้ ช้อาจต้องใช้เวลาทาความเข้าใจนานพอสมควร ในบางกรณีจะต้อง ใช้เวลาเป็นปี ดังนั้นนักออกแบบจะต้องศึกษาพฤติกรรมของผู้ใช้ในรูปแบบต่ างๆ จากข้อมูลที่ทาการ วิจัยไว้แล้ว เมื่อนักออกแบบได้ศึกษาพฤติกรรมของผู้ใช้ จากงานวิจัยหรือกรณีศึกษาต่างๆ จะช่วยให้ สามารถหาวิธีก ารมารองรับการใช้งานตามรูป แบบพฤติก รรมนั้นได้ดียิ่งขึ้น ทาให้ผู้ใช้งานสามารถ ปฏิบัติงานได้ง่าย สะดวก และบรรลุ เ ป้าหมายได้รวดเร็ว ยิ่งขึ้น สาหรับ หัวข้อนี้ จะกล่าวถึง ข้อมูลที่ เกี่ยวกับพฤติกรรมการใช้งานโปรแกรมคอมพิวเตอร์ หรือเว็บไซต์ ซึ่งเป็นพฤติกรรมบางส่วนที่อาจพบ เห็นอยู่บ่อยครั้ง โดยพฤติกรรมการใช้งานดังกล่าวสามารถนามาประยุกต์เทียบเคียงเพื่อเป็นประโยชน์ ต่อการออกแบบงานมัลติมีเดีย โดยเฉพาะมั ลติมีเดียแบบปฏิสัมพันธ์ได้เช่นเดียวกัน รูปแบบพฤติกรรม ของผู้ใช้งาน ได้แก่ 1) อยากรู้และอยากทดลอง 2) ต้องการความรวดเร็ว 3) ขอเพียงผลลัพธ์ที่น่าพอใจ 4) เปลี่ยนใจง่าย 5) เบื่อง่าย 6) ต้องปรับเปลี่ยนหรือแก้ไขงานอยู่เป็นประจา 7) เคยชินจนเป็นนิสัย 8) ลืมง่าย 9) ท าไว้กั นลืม 10) มีก ารท างานที่ซ้าๆ กั น 11) ท างานโดยใช้คีย บอร์ดเท่านั้น 12) ท าตาม คาแนะนาของผู้อ่นื มีรายละเอียดดังนี้ 4.3.1 อยากรู้และอยากทดลอง พฤติกรรมลักษณะนี้มักเกิดขึ้นเมื่อผู้ใช้มีโอกาสใช้ งานโปรแกรมรูปแบบใหม่ๆ หรือโปรแกรมที่ ตนไม่เคยใช้งานมาก่อน ผู้ใช้กลุ่มนี้มักอยากรู้อยากทดลองการทางาน เพื่อดูผลลัพธ์ที่ออกมาว่าเป็น อย่างไร ดังนั้น ควรออกแบบโปรแกรมให้ผู้ใช้สามารถทดลองทาในสิ่งที่อยากรู้ได้ โดยไม่ส่งผลกระทบ หรือไม่สร้างความลาบากในการใช้งานภายหลัง เช่น ในโปรแกรม Photoshop จะมี History Panel เพื่อ บั น ทึ ก การท างานผ่ า นมาของผู้ ใ ช้ ไ ว้ ท าให้ ส ามารถย้ อ นกลั บ ไปยั ง ขั้ น ตอนก่อ นหน้ า ได้ ซึ่ ง ถ้ า หาก โปรแกรมไม่สามารถย้อนกลับไปขั้นตอนก่อนหน้าได้ อาจจะทาให้ผู้ใช้รู้สึกถูกจากัดการใช้งาน และทา ให้เกิดความคิดด้านลบต่อโปรแกรมขึน้

4.3.2 ต้องการความรวดเร็ว ความรวดเร็วในการเริ่มต้น หรือการแสดงผลลัพธ์ อย่างทันท่วงที เป็นความต้องการพื้น ฐาน ทั่วไปของผู้ใช้ทุกคน การที่ โปรแกรมสามารถตอบสนองความต้องการของผู้ใช้ได้ในทันที จะทาให้ผู้ใช้ เกิ ด ความรู้สึก ดี และจะช่ว ยสร้างความเชื่อ มั่นต่ อผู้ ใ ช้อย่ างมาก การตอบสนองรวดเร็วนั้น ไม่ไ ด้ หมายถึงการประมวลผลที่รวดเร็วอย่างเดียว แต่หมายถึงการออกแบบให้ผู้ใช้สามารถเลือกเครื่องมือ ต่างๆ ในโปรแกรมได้อย่างสะดวกรวดเร็ว ดังนัน้ นักออกแบบจะต้องคาดการณ์ว่าสิ่งแรกที่ผใู้ ช้จะทาเมื่อ เข้าโปรแกรมคืออะไร แล้วจัดการวางสิ่งที่ผู้ใช้ตอ้ งการทาเป็นอันดับแรก ให้เขาสามารถนามาใช้ได้อย่าง สะดวก หรือแสดงให้เห็นทันทีที่ผู้ใช้เข้ามาในส่วนนั้ น นอกจากนี้การตัดส่วนการตั้งค่าต่างๆ ในขั้นแรก ของการใช้โปรแกรมออกให้เหลือน้อยที่สุด จะทาให้ผู้ใช้รู้สึกว่า โปรแกรมสามารถตอบสนองได้อย่าง รวดเร็ว โดยไม่ต้องรอและสร้างความยุ่งยากเมื่อเข้าใช้งาน 4.3.3 ขอเพียงผลลัพธ์ที่นา่ พอใจ เป็นพฤติกรรมของผู้ใช้ที่ต้องการผลลัพธ์ที่น่าพอใจเท่านั้น เมื่อ โปรแกรมตอบสนองหรื อให้ ผลลัพธ์ที่ตนต้องการแล้ว เขาจะยุติการทางานของโปรแกรมทันที โดยพฤติกรรมของผู้ใช้ประเภทนี้คือ จะค้นหาเครื่องมือหรือสิ่งที่ต้องการจากโปรแกรมทันที โดยไม่สนใจส่วนประกอบอื่นๆ ของโปรแกรม และจะใช้เครื่องมือดังกล่าวเพื่อให้ได้ผลลัพธ์ที่ต้องการโดยไม่สนใจว่าเป็นผลลัพธ์ที่ดีที่สุดหรือไม่ หาก การใช้โปรแกรมในครั้งแรกไม่ได้ผลลัพธ์ที่ต้องการ เขาอาจจะทดลองใช้งานใหม่อกี ครั้ง แต่ถ้าโปรแกรม ไม่สามารถให้ผลลัพธ์ที่ต้องการได้ก็จะเลิกใช้งาน ทาให้เกิดความรู้สึกในด้านลบ ดังนั้นควรพิจารณา พฤติกรรมของผูใ้ ช้ในกลุ่มนีอ้ ย่างรอบคอบ โดยคานึงถึงสิ่งต่อไปนี้ - สร้าง Label ที่มีคาอธิบายสั้นๆ สาหรับบอกหน้าที่การทางานกากับไว้ตามส่วนต่างๆ เช่น ปุ่มคาสั่ง, เมนู, ลิงค์ เป็นต้น เพื่อให้ผู้ใช้ทราบหน้าที่หรือการทางานในแต่ละส่วน แต่จะต้อง ใช้คาที่สามารถเข้าใจได้ตรงกันระหว่างนักออกแบบกับผูใ้ ช้ - เพิ่ ม ส่ ว นแสดงรายละเอี ย ดการใช้ ง าน ลงในการออกแบบ Layout เพื่ อ ให้ ผู้ ใ ช้ ท าตาม คาแนะนา - ออกแบบให้ผู้ใช้สามารถเข้า-ออก ส่วนต่างๆ ของโปรแกรมได้อย่างสะดวก ถ้าผู้ใช้เข้าไปยัง ส่วนที่ไม่ต้องการใช้งาน ก็สามารถย้อนกลับไปยังส่วนการทางานก่อนหน้าได้ โดยการสร้าง ปุ่มย้อนกลับหรือปุ่ม Escape เพือ่ ให้สามารถกลับมายังหน้าหลักได้ - ต้องเข้าใจว่าผูใ้ ช้ในกลุ่มนีจ้ ะมองหาสิ่งใดเป็นอันดับแรกเมื่อเข้ามาใช้งาน

4.3.4 เปลี่ยนใจง่าย การที่ ผู้ ใ ช้ เ ปลี่ ย นใจอย่ า งกะทั น หั น ในระหว่ า งการใช้ ง าน อาจเกิ ด จาก เขาพบส่ ว นอื่ น ของ โปรแกรมที่น่าสนใจกว่า หรืออาจเกิดปัญหากับส่วนที่ตนใช้งานอยู่ ทาให้ เขาต้องเปลี่ยนใจกะทันหัน ระหว่างการใช้งาน จึงต้องการหยุ ด การใช้งานในส่วนนั้น เพื่อเปลี่ย นไปใช้งานในส่วนอื่นแทน หาก โปรแกรมไม่ได้ออกแบบมาให้รองรับการเปลี่ยนแปลงการทางานอย่างกะทันหัน ก็จะทาให้ข้อมูลในส่วน นั้นสูญหายไป ซึ่งพฤติกรรมการใช้งานแบบนี้ ยากที่จะคาดการณ์ได้ว่าจะเกิดขึ้นเมื่อใด ดังนั้นจึงควร ออกแบบให้ผู้ใช้สามารถออกจากส่วนที่ใช้งานได้ทันที และกลับมาใช้งานได้อีกในภายหลัง โดยที่ข้อมูล เก่าไม่เกิดการสูญหาย เช่น โปรแกรมบางประเภทอาจออกแบบให้ผู้ใช้สามารถสร้างงานได้หลายโปร เจ็คพร้อมกัน และสามารถสลับการใช้งานไปยังโปรเจ็ค 4.3.5 เบื่อง่าย พฤติกรรมแบบนี้อาจมีผลมาจากผู้ใช้ที่ต้องการความรวดเร็ว โดยต้องการใช้งานโปรแกรม ดังกล่าว ต้องกาหนดค่าเริ่มต้นก่อนการใช้งาน นั่นคือ โปรแกรมได้กาหนดทิศทางการใช้งานของผู้ใช้ โดยให้ผู้ใช้ทาตามเงื่อนไข กรอกข้อมูล หรือกาหนดค่าต่างๆ ก่อนการใช้งาน ทาให้เสียเวลาในการทา ตามเงื่อนไขดังกล่าว ผู้ใช้จงึ เกิดความเบื่อหน่ายและเกิดความราคาญ ถ้าหากเป็นกลุ่มผู้ใช้ที่มพี ฤติกรรม เบื่อง่าย ก็อาจทาให้เกิดความรู้สึกด้านลบต่อ โปรแกรม หรืออาจล้มเลิกการใช้งานเลยก็ได้ ดังนั้นการ ออกแบบไม่ควรจะบังคับหรือกาหนดทิศทางการใช้งานของเขามากจนเกินไป เพื่อให้เกิดความอิสระใน การใช้งาน และไม่ตกอยู่ภายใต้ข้อบังคับของโปรแกรม เช่น การกรอกข้อมูลส่วนตัวเมื่อเข้าใช้บริการ โปรแกรมแบบออนไลน์ ซึ่งทาให้ผู้ใช้รู้สกึ ราคาญใจ แต่ไม่สามารถข้ามขั้นตอนได้ ดังนัน้ ควรออกแบบให้ ผู้ใช้สามารถข้ามขั้นตอนการกรอกข้อมูลบางส่วนที่ไม่จาเป็น แล้วจึงกลับมากรอกข้อมูลได้ภายหลัง หรืออาจให้กรอกเฉพาะข้อมูลที่สาคัญ เป็นต้น การออกแบบเพื่อรองรับพฤติกรรมดังกล่าวของผู้ใ ช้ ควรพิจารณาสิ่งต่อไปนี้ - รายการที่ต้องการให้กาหนดในครั้งแรกไม่ควรมีรายละเอียดมาก เพื่อลดขั้นตอนที่อาจ สร้างความราคาญแก่ผู้ใช้ - แสดงรายการที่มีรายละเอียดน้อยแก่ผใู้ ช้ และซ่อนรายการที่มีรายละเอียดมากไว้ เพื่อไม่ให้ ผูใ้ ช้รู้สกึ เบื่อก่อนที่จะกรอกข้อมูล - แสดงเหตุผลให้ผู้ใช้ทราบว่าเหตุใดต้องกรอกข้อมูลตามรายการดังกล่าว ใช้เหตุผลเป็น สิ่งจูงใจให้ผใู้ ช้ทาการกรอกข้อมูลโดยสมัครใจ - หากข้อมูลนั้นสามารถย้อนกลับมากรอกในภายหลังได้ ควรแจ้งให้ผู้ใช้ทราบ และให้เขา เลือกเองว่าจะกรอกในตอนนั้น หรือภายหลัง - โปรแกรมอาจอนุญาตให้ผใู้ ช้สามารถใช้งานได้ทันที แล้วค่อยกาหนดหรือกรอกข้อมูลต่างๆ ในการใช้ครั้งต่อไป

4.3.6 ต้องปรับเปลี่ยนหรือแก้ไขงานอยู่เป็นประจา ผลลัพธ์ที่สมบูรณ์นนั้ ไม่ได้มาจากการทางานเพียงครั้งเดียว ผลลัพธ์ที่ดตี ้องผ่านการปรับเปลี่ยน หรื อ แก้ ไ ขส่ ว นที่ บ กพร่ อ ง ซึ่ ง อาจจะต้ อ งปรั บ เปลี่ ย นหลายครั้ ง จนได้ ผ ลลั พ ธ์ ที่ น่าพอใจ หากผู้ ใ ช้ จาเป็นต้องเปลี่ยนแปลงหรือแก้ไขงานอยู่เสมอ หากงานมีขนาดใหญ่การตอบสนองก็จะทาได้ค่อนข้าง ช้า ทาให้ต้องเสียเวลานานเพื่อรอผลลัพธ์ การทางานก็จะไม่ต่อเนื่อง ทาให้เกิดความเบื่อหน่ายและเสีย สมาธิในการทางานได้ ดังนั้นควรออกแบบการทางานของโปรแกรมโดยแบ่งเป็นส่วนย่อย หรือให้แสดง ผลลัพธ์ของงานที่ผู้ใช้เปลี่ยนแปลงหรือแก้ไขรวดเร็ว ซึ่งจะช่วยเพิ่มความคล่องตัวในการปรับเปลี่ยน หรือแก้ไขงานได้ดีขนึ้ และทราบถึงผลลัพธ์วา่ มีความถูกต้องมากน้อยเพียงใด 4.3.7 เคยชินจนเป็นนิสัย พฤติกรรมของผูใ้ ช้แบบนีถ้ ือว่าเป็นไปตามธรรมชาติของมนุษย์ เมื่อมีการใช้งานหรือทากิจกรรม ใดๆ เป็นประจา จะท าให้เ กิ ด ความเคยชิน ซึ่งพฤติก รรมนี้มักเกิดกับการใช้งานโปรแกรมเดียวเป็น เวลานานๆ ทาให้ยึดติดกับ โปรแกรมเดิม เมื่อต้องเปลี่ยนมาใช้งานโปรแกรมอื่น ทาให้เกิดอุปสรรคใน การใช้งาน นักออกแบบจึงต้องคานึงถึงพฤติ กรรมของผู้ใช้ที่ยึดติดกับความเคยชินในการใช้งานด้วย ตัวอย่างเช่น คาสั่งในโปรแกรมMicrosoft word ที่ผู้ใช้ทั่วไปเคยชิน เช่น Ctrl+A ที่ใช้สาหรับเลือกข้อมูล ทั้งหมดในหน้าจอ (Select All), Ctrl+C ที่ใช้สาหรับคัดลอก (Copy), Ctrl+S ที่ใช้สาหรับการบันทึก (Save) เป็ น ต้ น จากตั ว อย่ า งที่ ก ล่ า วมา ผู้ ใ ช้ จ ะยึ ด ติ ด ค าสั่ ง ในโปรแกรมซึ่ ง ตนคุ้ น เคยเป็น อย่ า งดี เมื่ อ เขา เปลี่ยนไปใช้งานโปรแกรมอื่นที่มีก ารท างานที่คล้ายๆ กัน ก็มักจะตอบสนองกลับในแบบเดีย วกั บ ที่ ตนเองคุ้นเคย แต่ในบางโปรแกรมอาจตอบสนองแตกต่างจากเดิม ทาให้ผู้ใช้สับสนและทางานผิดพลาด บ่ อ ยครั้ ง ดั ง นั้ น ควรน าพฤติ ก รรมแบบนี้ ไ ปพิ จ ารณาประกอบการออกแบบด้ ว ย โดยสั ง เกตจาก โปรแกรมทั่วไปที่ผู้ใช้เลือกใช้งานว่ามีลักษณะการตอบสนองเป็นอย่างไร 4.3.8 ลืมง่าย เป็นพฤติกรรมที่ผู้ใช้ลืมข้อมูลหรือขั้นตอนบางอย่างที่เกี่ยวข้องกับการใช้งานโปรแกรม ซึ่งอาจ เกิดในระหว่างการใช้งานหรือเกิดขึ้นเมื่อกลับมาใช้งานในภายหลัง โดยอาจลืมวิธีการเรียกใช้ฟังก์ชั น หรือเครื่องมือบางอย่างที่เคยใช้มาก่อน ถ้าโปรแกรมมีความซับซ้อนมาก ย่อมมีฟังก์ชันหรือเครื่องมือใช้ งานจานวนมาก ทาให้ตอ้ งเสียเวลาในการค้นหาวิธีการใช้งานเครื่องมือดังกล่าว แต่ผทู้ ี่เคยใช้งานมาแล้ว อาจจดจาขั้นตอนการใช้งานได้บางส่วน ดังนั้นควรออกแบบให้มีข้อความช่วยเหลือเพื่อให้ผู้ใช้ทราบถึง ลาดับขั้นตอนการเรียกใช้งานฟังก์ชันหรือเครื่องมือในโปรแกรม ซึ่งวิธีการนี้เหมาะสาหรับ โปรแกรมที่มี ความซับซ้อน หรืออาจออกแบบให้สามารถกาหนดการจัดเรียงเครื่องมือในโปรแกรมได้เองตามความ ต้องการของผู้ใช้ วิธีการนี้จะช่วยให้ผใู้ ช้ระลึกถึงขั้นตอนในการเรียกใช้ฟังก์ชันหรือเครื่องมือได้เร็วขึน้

4.3.9 ทาไว้กันลืม เป็นพฤติกรรมที่ผู้ใช้วางแผนไว้ล่วงหน้า สาหรับการใช้งานโปรแกรมในครั้งต่อไป โดยกาหนด สัญลักษณ์เพื่อเตือนให้ทราบถึงสิ่งที่ต้องทา เมื่อกลับมาใช้งานมัลติมีเดียอีกครั้ง พฤติกรรมนี้พบเห็นได้ จากการใช้ชีวิตประจาวัน ตัวอย่างเช่น การเขียนโน้ตติดไว้ที่หน้าประตูหรือตู้เย็น เพื่อเตือนไม่ให้ลืมสิ่งที่ ต้ อ งท า หรื อ บั น ทึ ก ไว้ ใ นปฏิ ทิ น เพื่ อ เตื อ นถึ ง การนั ด หมายส าคั ญ ที่ จ ะมี ใ นอนาคต เป็ น ต้ น ซึ่ ง บาง โปรแกรมอาจมีความสามารถในการกาหนดข้อความเตือน เพื่อแสดงแก่ผู้ใช้เมื่อถึงเวลาที่กาหนดได้ อย่างไรก็ตาม พฤติกรรมแบบนี้เป็นสิ่งที่อยู่ในความคิดของผู้ใช้ ยากที่นักออกแบบจะสามารถนามา ประยุกต์ใช้ในการออกแบบได้ สิ่งที่นักออกแบบทาได้คือ ออกแบบให้โปรแกรมมีความยืดหยุ่นในการใช้ งาน ให้ผู้ใช้สามารถจดจาได้ดว้ ยตนเองว่าต้องการทาอะไร เมื่อกลับมาใช้งานโปรแกรมในครั้งต่อไป เช่น ในกรณีที่ผู้ใช้ทางานค้างไว้ในโปรแกรม เมื่อกลับมาใช้งานอาจลืมว่าได้ทาอะไรค้างไว้ ดั ง นั้ น ควรออกแบบให้ โ ปรแกรมนั้ น สามารถเก็ บ งานที่ ท าค้ า งหรื อ ที่ ผู้ ใ ช้ ยั ง ไม่ สั่ ง ยุ ติ และ โปรแกรมไม่ควรล้างข้อมูลต่างๆ ทิ้งทุกครั้งที่ปิดการใช้งาน เพื่อให้ผู้ใช้ทราบถึงงานที่ท าค้างไว้เ มื่อ กลั บ มาใช้งานเดิม ส าหรับ พฤติก รรมของผู้ใ ช้ใ นลัก ษณะนี้จะมีก ารแจ้งเตือนโดยอัตโนมัติไ ด้หลาย รูปแบบ ดังตัวอย่างต่อไปนี้ - การเขียนข้อความบันทึกไว้บนพื้นหลังของหน้าจอ Desktop - เขียนข้อความเตือนลงในไฟล์เอกสารของงานที่จะทาโดยตรง - บั น ทึ ก URL ของเว็ บ ไซต์ ที่ ต้ อ งการเรี ย กดู ใ นครั้ ง ต่ อ ไป ลงใน Browser โดยเรี ย กว่ า Bookmark - จัดเก็บเอกสารที่จะใช้ในคราวต่อไปไว้บน Desktop เพื่อให้เห็นได้ชัดเจนเมื่อเปิ ดเครื่องใช้ งาน 4.3.10 มีการทางานที่ซ้าๆ กัน ผู้ใช้บางกลุ่มจาเป็นต้องทางานเดิมๆ ซ้ากันอยู่เป็นประจา โดยจะเรียกใช้งานโปรแกรมด้วย ฟังก์ชันหรือเครื่องมือเดิม ซึ่งมีลาดับขั้นตอนการทางานเหมือนเดิมอยู่เสมอ ทาให้ผู้ใช้ต้องเสียเวลาใน การทางานเป็นอย่างมาก ดังนั้ นโปรแกรมควรออกแบบให้มีฟังก์ชันหรือส่วนช่วยเหลือให้กับผู้ใช้ที่มี พฤติกรรมการใช้งานรูปแบบนี้ด้วย โดยมีเ ครื่องมือที่สามารถรวบรวมฟังก์ชั นหรือขั้นตอนการทางาน ต่างๆ ไว้ด้วยกัน และกาหนดให้เป็นเพียงคาสั่งเดียวได้เพื่อลดเวลาในการท างานซ้าๆ กัน เช่น ผู้ใ ช้ ต้องการจัดการกับภาพจานวนมากในโปรแกรม Photoshop ซึ่งทุกๆ ภาพต้องผ่านการปรับให้มีขนาด เท่ากัน ปรับค่าแสงด้วยค่าเดียวกัน และจัดเก็บภาพให้มีนามสกุลเดียวกัน ในโปรแกรมจึงมีฟังก์ชันที่ให้ ผูใ้ ช้กาหนดปรับแต่งรูปหลายๆ ขั้นตอนไว้ในคาสั่งเดียวได้ เป็นต้น

4.3.11 ทางานโดยใช้คีย์บอร์ดเท่านัน้ ผู้ใ ช้ป ระเภทนี้จะปฏิเ สธการท างานที่ ต้องอาศัย เมาส์ โดยต้องการควบคุมการท างานด้ ว ย คีย์บอร์ดเพียงอย่างเดียว เนื่องจากผู้ใช้บางกลุ่มอาจมีรูปร่างที่เป็นอุปสรรคต่อการใช้เมาส์ หรือไม่ ต้องการสลับการใช้งานระหว่างเมาส์กับคีย์บอร์ด ทาให้มกี ารออกแบบโปรแกรมที่สามารถควบคุมและ ทางานโดยใช้คีย์บอร์ดหรือเมาส์อย่างใดอย่างหนึ่ง ตามที่ผู้ใช้ต้องการ เพื่อรองรับผู้ใช้ที่มีพฤติกรรมใน รูปแบบนี้ แต่โดยทั่วไปการทางานของโปรแกรมจาเป็นต้องใช้ทั้งคีย์บอร์ดและเมาส์ควบคู่กัน ตัวอย่าง การใช้งานคีย์บอร์ด ดังนี้ - การควบคุมคาสั่งต่างๆ ในเมนูหลักของโปรแกรมด้วยคีย์ลัด เช่น Ctrl + S ที่ใช้บันทึกข้อมูล - การเลือกค่าต่างๆ จากลาดับรายการด้วยการใช้ Arrow Key - การเลื่อนไปยังข้อต่างๆ บน Form สาหรับกรอกข้อมูลในมัลติมเี ดียด้วยปุ่ม Tab 4.3.12 ทาตามคาแนะนาของผู้อ่นื ผู้ ใ ช้ ป ระเภทนี้ จ ะมี พ ฤติ ก รรมการใช้ ง านตามค าแนะน าของผู้ อื่ น ที่ อ าจเคยผ่ า นการใช้ ง าน โปรแกรมนั้นมาก่ อน เมื่อเกิ ด ปัญ หาในการใช้ ง านหรือไม่เ ข้ าใจขั้ นตอนการใช้ง านที่ชั ดเจนก็ จ ะขอ คาแนะนาจากผู้อ่นื เพื่อแก้ปัญหาที่เกิดขึน้ กับตน การทาตามคาแนะนาของผูอ้ ื่นนั้นอาจไม่ได้มาจากการ ติดต่อสื่อสารกันโดยตรงระหว่า งผู้ใช้งานด้วยกัน แต่อาจได้คาแนะนามาจากแหล่งข้อมูลต่างๆ ที่ผู้อื่น รวบรวม และเสนอต่อสาธารณะ กล่าวคือ เป็นการแลกเปลี่ยนความรู้ระหว่างผู้ใช้ด้วยกัน เช่น การ แบ่งปันโค้ดระหว่างโปรแกรมเมอร์ , การแลกเปลี่ยนข้อมูลการใช้งานระหว่างกันผ่านเว็บบอร์ดตาม เว็บไซต์ต่างๆ เป็นต้น ดังนั้นการออกแบบโปรแกรมควรพิจารณาพฤติกรรมของผู้ใช้รูปแบบนี้ด้วย โดย โปรแกรมควรมีส่วนช่วยเหลือหรือส่วนแนะนาการใช้งาน (help) ทาให้ผู้ใช้ไม่ต้องไปขอคาแนะนาจาก ผูอ้ ื่น เช่น ข้อมูลแสดงขั้นตอนหรือวิธีการใช้งานฟังก์ชันต่างๆ เครื่องมือที่สนับสนุนให้ผู้ใช้สามารถใช้งาน ฟังก์ชันได้ง่ายขึ้น ส่วนเทคนิคการใช้งานแบบต่างๆ และลิงค์ติดต่อไปยังแหล่งข้อมูลแบบออนไลน์ เป็น ต้น ซึ่งบางโปรแกรมมีส่วนช่วยเหลือผู้ใช้อาจแนะนาเพียงการใช้งานเบื้องต้นเท่านั้น แต่บางโปรแกรม อาจมีส่วนช่วยเหลือที่สมบูรณ์แบบและอานวยความสะดวกแก่ผู้ใ ช้อย่างเต็ มที่ ทั้งนี้ขึ้นอยู่กับความ ซับ ซ้อนของโปรแกรมด้วย ส าหรับ โปรแกรมที่มีความซับซ้อนหรือมีเครื่องมือในการใช้งานอยู่เป็น จานวนมากจาเป็นต้องมีส่วนช่วยเหลือผู้ใช้ไว้โดยเฉพาะ

4.4 สรุป สรุปได้ว่า ในการออกแบบชิ้นงานต่างๆ นั้น นักออกแบบไม่ควรออกแบบโดยใช้ความชอบหรื อ รสนิยมส่วนตัวเท่านั้น แต่จะต้องทาการศึกษาผู้ใช้ที่เป็นกลุ่มเป้าหมายอย่างลึกซึ้งเสียก่อน ว่าผู้ใช้มี ความรู้สึก และคาดหวังต่อชิ้นงานนั้นอย่างไร เพื่อให้ได้ชิ้นงานที่ตรงตามความต้องการของผู้ใช้งาน อย่างแท้จริง ซึ่งสิ่งนั้น เรียกว่า การศึกษาประสบการณ์ผู้ใช้งาน (User Experience: UX) ซึ่งในการเก็บ ข้อมูลประสบการณ์การใช้งานของผูใ้ ช้นั้น ทาได้หลายวิธี เช่น การสัมภาษณ์ การสนทนากลุ่ม และการ สร้างตัวแทนผู้ใช้ เป็นต้น นอกจากนี้การศึกษาข้อมูลเชิงลึกและรายละเอียดที่เกี่ยวข้องกับพฤติกรรม การใช้งานของผู้ใช้ที่ได้จากงานวิจัยและกรณีศึกษาที่มีมาก่อนแล้ว สามารถนามาช่วยในการออกแบบ งานออกแบบมัลติมีเดียได้ เพราะจะช่วยให้นักออกแบบได้ทราบถึงความต้องการและพฤติกรรมของ ผู้ใช้ส่วนใหญ่ และสามารถออกแบบงานมัลติมีเดียให้ตอบสนองต่อพฤติกรรมต่างๆ เหล่านั้น ส่งผลให้ งานมัลติมีเดียใช้ได้รับการออกแบบให้ใช้งานง่าย และตรงกับความต้องการของผู้ใช้มากยิ่งขึน้

กิจกรรมภาคปฏิบัติ ใบงานที่ 4 1. วัตถุประสงค์ 1.1 เพื่อให้นิสิตตระหนักถึงความสาคัญของการศึกษาประสบการณ์ผู้ใช้งานเพื่อออกแบบงาน มัลติมีเดียให้มปี ระสิทธิภาพ 1.2 เพื่อให้นสิ ิตได้มปี ระสบการณ์ในการนาเสนอผลงาน และได้แลกเปลี่ยนความคิดเห็นร่วมกัน กันในชั้นเรียน 2. สาระสาคัญ เนื้อหาในบทที่ 4 เกี่ยวข้องกับการศึกษาประสบการณ์การใช้งานของผู้ใช้ (User Experience: UX) เพื่อให้นสิ ิตเข้าใจเนื้อหา และสามารถนาความรู้มาประยุกต์ใช้ได้จริง กิจกรรมใน ใบงานที่ 4: การ จัดหมวดหมู่การ์ด (Card Sorting) จึงเป็นการเสริมความเข้าใจ และกระตุ้นให้นิสิตได้นาความรู้ใน บทเรียนมาประยุกต์ใช้กับการออกแบบงานมัลติมีเดียให้มีประสิทธิภาพและตรงตามความต้องการของ ผูใ้ ช้ 3. วิธีการ ให้นิสิต 5 คนต่อกลุ่ม ช่วยกันออกแบบเว็บไซต์โดยการให้ผู้ใช้มีส่วนร่วมในการออกแบบ ด้วย วิธีการทา Card sorting ซึ่งเป็นวิธีการหนึ่งในการออกแบบเมนู ในส่วน Side Bar ซึ่งเป็นเสมือนสารบัญ ของเว็บไซต์ เพื่อให้ทราบว่าควรใช้คาใด เรียงลาดับอย่างไร โดยเน้นให้ผใู้ ช้เป็นศูนย์กลาง ในสัปดาห์หน้า ให้นิสิตนาเสนอร่างแบบเว็บไซต์ที่ออกแบบอย่างมีส่วนร่วมดังกล่าว ที่ หน้าชั้น เรียน กลุ่มละไม่เกิน 10 นาที เตรียมอุปกรณ์ 1. การ์ด คือ กระดาษโน๊ตเล็กๆ 2. ปากกา 2 สี

บทบาทและหน้าที่ 1. 2. 3. 4. 5.

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

ขั้นตอนการทา 1. ให้ผู้ใช้เขียนความต้องการที่อยากให้มีในเว็บไซต์ในการ์ด โดยเขียนใบละคา เช่น แกลอรี่, กระดานข่าว, ซือ้ -ขายของ เป็นต้น 2. ให้ผู้ใช้จัดเรียงการ์ด จากนั้นจับกลุ่ม แล้วเขียนหัวข้อแต่กลุ่ม 3. ให้ผู้ใช้จัดเรียงข้อมูลภายในกลุ่ม เช่น เรียงตามการใช้งาน, เรียงตามความสาคัญ ฯลฯ 4. เก็บข้อมูลผู้ใช้เพิ่มเติม เช่น ความถี่การใช้อินเตอร์เน็ต, ใช้เว็บไซต์ทางานอะไรบ้าง เป็นต้น อาจเก็บข้อมูลโดย ให้ตอบแบบสอบถาม 5. นาข้อมูลทั้งหมดนาไปวิเคราะห์ เพื่อพัฒนาเว็บไซต์ตอ่ ไป ตัวอย่าง : Card Sorting

ภาพ 2 แสดงการจัดหมวดหมูก่ าร์ด (Card Sorting) ที่มา : http://www.fostermilo.com/articles/card-sorting-with-creative-albuquerque

4. การวัดและประเมินผล ผูส้ อนตรวจสอบผลงานของนิสิต และประเมินผลงานตามเกณฑ์ดังนี้ 4.1 ส่งงานตามกาหนดเวลา (1 คะแนน) 4.2 การแสดงความคิดเห็นในชั้นเรียน (1 คะแนน) 4.3 ความครบถ้วนสมบูรณ์ของงาน (1 คะแนน) 4.4 การนาความรูม้ าประยุกต์ใช้งาน (1 คะแนน) 4.5 รับผิดชอบ ทางานเป็นทีม (1 คะแนน) คะแนนกิจกรรมภาคปฎิบัติ ใบงานที่ 4 รวมเป็น 5 คะแนน

บทที่ 5 หลักการออกแบบหน้าจอ หัวข้อเนื้อหาประจาบท 1. ความหมายของการออกแบบหน้าจอ 2. หลักการออกแบบทัศนศิลป์ 3. หลักการออกแบบพืน้ ฐาน 4. หลักการออกแบบส่วนประกอบของมัลติมีเดีย

วัตถุประสงค์ 1. สามารถอธิบายหลักการออกแบบทัศนศิลป์ หลักการออกแบบพืน้ ฐาน และหลักการ ออกแบบส่วนประกอบของมัลติมีเดียได้ 2. สามารถประยุกต์ใช้ความรู้มาสร้างสรรค์งานมัลติมเี ดียได้อย่างสวยงาม และสามารถนา ส่วนประกอบต่างๆ ของมัลติมีเดียมานาเสนอบนหน้าจอได้อย่างเหมาะสม เวลาเรียน สัปดาห์ที่ 7-8 กิจกรรมการเรียนการสอน 1. การบรรยาย 2. การอภิปรายและการซักถามเกี่ยวกับเนือ้ หาในบทเรียนร่วมกัน 3. กาหนดประเด็นปัญหาเพื่อศึกษาค้นคว้าเพิ่มเติม

5.1 ความหมายของการออกแบบหน้าจอ หน้าจอหรือยูสเซอร์อินเตอเฟส (User Interface: UI) คือ ส่วนที่ใช้ตดิ ต่อกับผูใ้ ช้งาน ไม่ว่าจะเป็น เมนู ปุ่ม ฟอร์มต่างๆ หรือการจัดวางภาพ ขนาดตัวอักษร ของแต่ละหน้า เป็นต้น ในการออกแบบ หน้าจอหากเป็นหน้าจอคอมพิวเตอร์ นักออกแบบจะต้องออกแบบโดยคานึงถึงการใช้งานเมาส์และ คีย์บอร์ด ซึ่งถือว่าเป็นอุปกรณ์ที่ใช้ในการเลือกและสั่งงาน ในขณะที่อุปกรณ์หน้าจอสัมผัส เช่น สมาร์ท โฟน (Smart Phones), แท็ บ เล็ ต (Tablets) จะมี ห ลายจุ ด ที่ แ ตกต่ า ง เพราะจะใช้ นิ้ ว มื อ เป็ น หลั ก แต่ โดยรวมแล้ว พื้นฐานที่ต้องใช้ในการออกแบบแทบไม่ได้ต่างกัน เช่น พื้นฐานเรื่องสี การจัดวางลาดับชั้น ของข้อมูล ความต่างของสีพื้นหลังกับองค์ประกอบหลัก เป็นต้น ดังนั้น ความรู้การออกแบบทัศนศิลป์ การออกแบบพื้นฐาน และการออกแบบส่วนประกอบของมัลติมีเดีย จึงล้วนสามารถนามาประยุกต์ใช้ ข้ามอุปกรณ์ได้อย่างไม่มขี ้อจากัด 5.2 หลักการออกแบบทัศนศิลป์ ทัศนศิลป์ คือ ศิลปะที่สามารถมองเห็นความงามจากรูปลักษณ์ การออกแบบทัศนศิลป์ (Visual Design) จึงหมายถึง การออกแบบและตกแต่ง ชิ้นงาน ให้มีรูปลักษณ์ที่สวยงาม เพื่อดึงดูดความสนใจ ของผู้ที่มาพบเห็น ในการออกแบบมัลติมีเดีย นอกจากจะเน้นเรื่องการจัด องค์ประกอบต่างๆ เพื่ออานวยความ สะดวกในการใช้งานแล้ว รูปลักษณ์ของหน้ าจอยังต้องดูสวยงาม และเหมาะสมกับรูปแบบการใช้งาน ของงานมัลติมีเดียด้วย เพราะรูปลักษณ์ของหน้าจอเป็นสิ่งแรกที่ผู้ใช้สามารถเห็นได้ทันที การออกแบบ ทัศนศิลป์จึงเป็นขั้นตอนหนึ่งที่จาเป็นอย่างยิ่งในการออกแบบหน้าจอ โดยสามารถอาศัยปัจจัยต่างๆ ได้ 7 ประการ ดังนี้ -

สี ตัวอักษร พืน้ ที่ องศาและความโค้ง พืน้ ผิว รูปภาพ วัฒนธรรมและสิ่งแวดล้อมของผูใ้ ช้

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

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

ข้อแนะนาในการออกแบบ - ควรเลือกสีหลักที่สามารถลดหรือเพิ่มค่าสีได้หลายค่า เพื่อให้ได้สีที่แตกต่างกันจานวนมาก ทา ให้มตี ัวเลือกมากขึน้ เมื่อนาไปใช้งาน - ความแตกต่างของสี ควรมองเห็นได้ด้วยตา ไม่ควรมีระดับสีที่ใกล้เคียงกันมากจนเกินไป เพราะ จะทาให้ผใู้ ช้มองไม่เห็นความแตกต่างของสี ซึ่งจะดูเหมือนใช้เพียงสีเดียว - หากใช้สหี ลักมากกว่าหนึ่งสี ไม่ควรเลือกใช้สหี ลักที่มสี ีใกล้เคียงกันมากเกินไป เพราะอาจทาให้ ไม่เกิดความโดดเด่น 5.2.2 ตัวอักษร รูปแบบของตัวอักษรสามารถแบ่งกว้างๆ ได้ 4 รูปแบบ ได้แก่ แบบมีเชิง(Serif), แบบไม่มีเชิง (San Serif), แบบโบราณ(Antique) และแบบลายมือเขียน(Script) ซึ่งแต่ละรูปแบบสามารถเลือกนาไปใช้ งานแตกต่างกันไป ดังตารางที่ 1 รูปแบบของตัวอักษร

การนาไปใช้ในงานออกแบบ

แบบมีเชิง (Serif)

จะดูเป็นระเบียบ เป็นทางการ เหมาะจะใช้ในงานที่เป็นทางการ และต้องการความน่าเชื่อถือมากๆ

แบบไม่มเี ชิง San Serif

จะอ่านง่าย ดูทันสมัยมากกว่าแบบอื่นๆ เหมาะจะใช้งานที่ตอ้ งการ ความทันสมัย ไม่เป็นทางการมากนัก

แบบโบราณ(Antique)

จะเหมาะกับงานที่ตอ้ งการแสดงความชัดเจนของยุคสมัย หรือ ต้องการอารมณ์ย้อนยุค

แบบลายมือเขียน(Script)

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

ตารางที่ 1 แสดงรูปแบบตัวอักษรและการนาไปใช้งาน

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

5.2.4 องศาและส่วนโค้ง เป็นการสร้างความน่าสนใจและความสวยงามให้กับองค์ประกอบต่างๆ ในหน้า จอ ด้วยการ ปรับแต่งองศา และส่วนโค้งขององค์ประกอบเหล่านั้น จะทาให้รูปลักษณ์ของงานมัลติมีเดียดูน่าสนใจ มาก และดูมีมิติเพิ่มมากขึ้น การใช้ส่วนโค้งจะช่วยลดความคมของมุมกรอบสี่เหลี่ย มลงได้ ทาให้มี ลักษณะเรียบ ไม่แข็งเกินไป การตกแต่ ง ด้ ว ยมุ ม แบบต่ า งๆ เป็ น รู ป แบบที่ จ ะท าการต กแต่ ง มุ ม กรอบสี่ เ หลี่ ย มของ องค์ประกอบต่างๆ เช่น ปุ่ม กล่องข้อความ และตาราง เป็นต้น โดยใช้ส่วนโค้ง ส่วนมน หรือตัดมุมของ กรอบสี่เหลี่ยมดังกล่าวให้มีความสวยงามและลดความคม ความแข็งกร้าว ทาให้ดูนุ่มนวลลงได้ ทาให้ ผู้ใช้เกิดความรู้สึกสบายๆ ไม่เป็นทางการหรือเคร่งครัด มากเกินไป นอกจากนี้ยังช่วยให้ดูทันสมัย และ ลดความน่าเบื่อลง ข้อแนะนาในการออกแบบ - การตกแต่งในรูป แบบนี้ค วรดู องค์ป ระกอบอื่นๆ ในงานมัลติมีเ ดีย ด้วยว่าจะสอดคล้องหรือ กลมกลืนกันหรือไม่ - การใช้มุมโค้งหรือมุมตัดอาจเลือกใช้เฉพาะมุมใดมุมหนึ่งก็ได้ ทาให้เกิดความแตกต่างขึ้ นและ สามารถนาไปใช้หลายรูปแบบ 5.2.5 พืน้ ผิว เป็นการเลือกใช้พื้นผิวที่เหมาะสมกับงานมัลติมีเดีย ในบางหน้าจอไม่จาเป็นต้องมีพื้นผิว แต่ใน บางแอปฯ การใช้พื้นผิวที่เหมาะสมกับรูปแบบของงานมัลติมีเดียจะช่วยให้ผู้ใช้เกิดความรู้สึกได้ตรงกับ ความหมายที่งานมัลติมีเดียต้องการสื่อ เช่น พืน้ ผิวแบบลายเส้นทาให้รสู้ ึกเป็นระเบียบเรียบร้อยขึน้ พืน้ ผิวแบบลายเส้น เป็นรูปแบบที่สร้างพื้นผิวให้กับพืน้ หลังหรือกรอบสี่เหลี่ยมขององค์ประกอบ ต่างๆ ที่อยู่ในหน้างานมัลติมีเดียโดยให้พื้นผิวแบบลายเส้น ทั้งแนวตั้ง แนวนอน แนวทะแยง สาหรับ รูปแบบนี้จะช่วยให้สามารถแบ่งแยกส่วนต่างๆ ของเนื้อหาออกจากกันโดยการใช้ลายเส้นที่แตกต่าง หรือสีของเส้นที่ต่างกันก็ได้ ข้อแนะนาในการออกแบบ - หากเป็นองค์ประกอบหรือเนื้อหาที่สัมพันธ์กันหรือสามารถจัดอยู่ในกลุ่มเดียวกันได้ ควรใช้ ลักษณะของลายเส้นแบบเดียวกันและใช้สีเหมือนกัน - หากความห่างระหว่างเส้นมีมากเกินไป จะทาให้กลายเป็นลวดลายที่ดูแล้วเกะกะ แต่ถ้าน้อย เกินไปผูใ้ ช้ก็จะไม่สามารถสังเกตเห็นได้ - สีของลายเส้นควรเลือกให้เหมาะสมกับองค์ประกอบอื่นๆ โดยเฉพาะตัวอักษร ไม่ควรใช้สีเข้ม หรือกลมกลืนกับตัวอักษรมากจนเกินไป เพราะจะทาให้ผู้ใช้มองเห็นตัวอักษรไม่ชัดเจน

5.2.6 รูปภาพ เป็นอีก ปัจจัย หนึ่ง ที่ส ามารถสื่อ ความหมายได้อย่ า งชัด เจนและง่ าย เนื่องจากรูป ภาพหนึ่ ง รูปภาพสามารถแทนคาอธิบายหลายร้อยคาได้ เมื่อผู้ใช้เห็นก็สามารถเข้าใจความหมายได้อย่างรวดเร็ว การเลือกรูปภาพมาตกแต่งในหน้าจอ ต้องคานึงถึงการสื่อความหมายและความรู้สึกของผู้ใช้เป็นหลัก ไม่ใช่แค่การนารูปที่สวยงามมาตกแต่งเพียงอย่างเดียว แต่งานมัลติมีเดียส่วนใหญ่เน้นเรื่องการใช้งาน เป็นอันดับแรก จึงมีการนารูปภาพมาประยุกต์ให้สามารถใช้งานได้ เพื่ออานวยความสะดวกแก่ผู้ใช้ เช่น ตัวเลือกแบบรูปภาพ เป็นต้น 5.2.7 วัฒนธรรมและสิ่งแวดล้อมของผูใ้ ช้ ในการตกแต่ ง หน้ า จอ บางครั้ ง อาจต้ อ งค านึ ง ถึ ง วั ฒ นธรรมและสภาพแวดล้ อ มของผู้ ใ ช้ เนื่องจากจะทาให้ทราบถึงความต้องการและสิ่งที่สามารถตอบสนองต่อผูใ้ ช้ได้อย่างดีที่สุด ซึ่งผูใ้ ช้ในแต่ ละพื้นที่ย่อมมีความเข้าใจความหมายที่แตกต่างกันภายใต้สื่อเดียวกัน เช่น สีตา่ งๆ ของแต่ละวัฒนธรรม จะมีความหมายแตกต่างกัน บางสีอาจไม่เป็นที่นิยมของผู้ใช้บางกลุ่มแต่กลับเป็นที่นิยมในกลุ่มอื่น ซึ่งมี ความแตกต่างกันของวัฒนธรรมหรือสภาพแวดล้อม เป็นต้น จึงจาเป็นต้องเข้าใจว่าผู้ใช้ในแต่ละกลุ่มมี วัฒนธรรมหรือสภาพแวดล้อมเป็นอย่างไร เพื่อให้สามารถเลือกปัจจัยต่างๆ ในการตกแต่งหน้างาน มัลติมีเดียได้อย่างเหมาะสม 5.3 หลักการออกแบบพื้นฐาน หลักพื้นฐานของการออกแบบ ประกอบด้วย ความเรียบง่าย ความสม่าเสมอ ความชัดเจนใน ประเด็นนาเสนอ และความสวยงามน่าดู ซึ่งมีรายละเอียดดังต่อไปนี้ 5.3.1 ความเรียบง่าย (Simplicity) ความเรียบง่าย ไม่ได้หมายความว่าให้ออกแบบง่ายๆ หรือธรรมดาจนเกินไป มิฉะนั้นก็คงไม่ต่าง อะไรไปจากการอ่านหนังสือ แต่ต้องออกแบบให้เหมาะสมกับคุณลักษณะของมัลติมีเดีย ซึ่งผสมผสาน ข้อความ ภาพ เสียงอย่างลงตัว สามารถเข้าใจได้ง่าย สิ่งสาคัญคื อต้องพยายามไม่ใส่สิ่งต่างๆ ให้มาก เกินไป เช่น รูปภาพที่มากเกินไป สีที่ฉูดฉาดเกินไป หรือการใช้รูปประโยคที่ยาวเกินไป ซึ่งอาจทาให้ผใู้ ช้ ไม่เข้าใจเนื้อหาหรือสื่อสารไม่ตรงกับความต้องการ ความเรียบง่ายเกี่ยวข้องกับปัจจัยหลายประการ ได้แก่ ปริมาณของข้อมูล จานวนของชิ้นงาน ขนาดของชิน้ งาน รูปแบบการปรากฎ และจานวนสี เป็นต้น มีรายละเอียดดังนี้

- ปริมาณของข้อมูล ไม่ควรมีปริมาณของข้อความ ภาพกราฟิก ภาพเคลื่อนไหว เสียง และองค์ประกอบอื่นๆ ที่ ปรากฎบนหน้าจอมากหรือน้อยจนเกินไป ควรจัดให้มีพื้นที่ว่าง (White Space) ที่พอเหมาะในหน้ าจอ เพื่อให้ผู้ใช้รู้สกึ สบายตา - จานวนของชิน้ งาน หากมีภาพ ข้อความ กราฟิก และเสียงมากไป จะทาให้การจัดเรียงการนาเสนอลาบากและ สับสน หากชิน้ งานมีมาก ก็ต้องมีการจัดวางให้ดูดี - ขนาดของชิน้ งาน ไม่ค วรมีค วามหลากหลายมากเกิ นไป เช่น ข้ อความ (Text) ไม่ ควรมีก ารเล่ นขนาดมากไป รูปแบบของตัวพิมพ์ไม่ควรเปลี่ยนไปเปลี่ยนมา ภาพไม่ควรใช้ภาพใหญ่เกินความจาเป็น เพราะนอกจาก จะเปลืองหน่วยความจาแล้ว ยังทาให้การแสดงภาพช้าอีกด้วย - รูปแบบการปรากฏ (Effect) การใช้รูปแบบการปรากฏหรือเอฟเฟ็กต์ (Effect) มากเกินไปจะทาให้ผู้ใช้สับสนได้ ควรพิจารณา ถึงความพอดีและความเหมาะสมในการนาเสนอภาพและข้อความ เช่น ไม่ใช้ เอฟเฟ็กต์ หลายๆรูปแบบ บนจอเดียวกัน หรือเปลี่ยนไปเปลี่ยนมาจนทาให้ผู้ใช้สนใจกับเอฟเฟ็กต์มากเกินไป - จานวนสี สี ที่ ป รากฏบนจอภาพไม่ ค วรจะเกิ น 3 สี ห ลั ก สี ห ลั ก ที่ ป รากฏบนจอภาพ คื อ สี พื้ น หลั ง (Background) พื้นหน้า (Foreground) ซึ่งหมายถึงสีของข้อความหรือกราฟิกประกอบหน้าจอ การเลือก พืน้ หลัง ผู้ออกแบบควรเลือกสีพ้ืนที่ไม่มลี วดลาย หรือความเข้มของสีที่แตกต่างกันจนมากเกินไป 5.3.2 ความสม่าเสมอ (Consistency) ความสม่าเสมอเป็นหลักการสาคัญในการออกแบบสื่อเกือบทุกประเภท มัลติมี เดียที่ใช้รูปแบบ และองค์ประกอบต่างๆ ไปในทิศทางเดียวกันตลอด จะทาให้เกิดความคุ้นเคยหรือสนองความคาดหวัง ของผู้ใช้ ความสม่าเสมอแบ่งออกได้เป็นหลายประเภท เช่น - ความสม่าเสมอด้านสีสัน หมายถึง การใช้สีเดียวกันขององค์ประกอบบนหน้าจอ เช่น การใช้ตัวอักษรสีเขียวเข้มสาหรั บ หัวข้อใหญ่ การขีดเส้นใต้คาสาคัญ หรือการกาหนดสีพื้นหลังเป็นสีเดียวกันทุกหน้า

- ความสม่าเสมอด้านขนาดและรูปทรง เช่น ทุกครั้งที่แสดงข้อมูล หัวข้อจะมีขนาดใหญ่กว่ารายละเอียด หรือการกาหนดให้ลูกศรสี เขียวปรากฎที่ตัวเลือกทุกครั้งเมื่อผู้ใช้เลือก เป็นต้น - ความสม่าเสมอของรูปแบบการนาเสนอ เช่น การนาเสนอลั ก ษณะปฏิสั มพันธ์ ถ้าคลิก เมาส์ที่ตัวเลือกจะมีข้อมูลแสดงรายละเอี ย ด เพิ่มเติมบริเวณด้านข้าง หรืออาจใช้วิธี Pop up รายละเอียดขึ้นมา - ความสม่าเสมอของเสียง เช่น เสียงสูงเมื่อตอบถูกและเสียงต่าเมื่ อตอบผิด หรือใช้เสียงเดียวตลอดเมื่อมีการคลิกที่ปุ่ม เดินหน้าหรือถอยหลังเฟรม เป็นต้น - ความสม่าเสมอของการชีแ้ นะ เช่น รูปแบบและตาแหน่งของ Cursor จากรูปแบบปกติเป็นรูปมือ ทุกครั้งที่ผู้ใช้เลื่อนเมาส์เข้าไป ในบริเวณที่กาหนด - ความสม่าเสมอของรูปแบบการใช้คา/ประโยค เช่น การใช้คาสรรพนาม (น้องๆ/คุณ) คาปิดท้ายประโยค(ค่ะ/ครับ) คากิริยา(คลิก/click) ตลอด - ความสม่าเสมอของตาแหน่งที่ปรากฏ เช่น ตาแหน่งข้อความ ตาแหน่งของปุ่ม หรือผลป้อนกลับที่เป็นข้อความจะอยู่ด้านล่างของ หน้าจอตลอด 5.3.3 ความชัดเจนในประเด็นนาเสนอ (Clarity) ความชัดเจนในประเด็นนาเสนอเกี่ยวข้องกับการใช้คา การเรียงร้อยคาและประโยค ไม่ว่าจะ เป็ น ข้ อ ความหรื อ เป็ น เสี ย งบรรยาย การเขี ย นบท (Script Writing) การใช้ ถ้ อ ยค าต่ า งๆ ต้ อ งใช้ ใ ห้ เหมาะสม หากเป็นเสียงบรรยาย ก็จะต้องเน้นการใช้เสียงให้น่าสนใจ น่าฟัง ใช้ประโยคที่สั้นกะทัดรัด และตรงประเด็น

5.3.4 ความสวยงามน่าดู (Aesthetic Considerations) การออกแบบหน้าจอให้สวยงามหน้าดูนั้นเป็นเรื่องของการออกแบบงานศิลป์ โดยมีพืน้ ฐานจาก ธรรมชาติการรับรู้ของมนุษย์ซึ่งเกี่ยวข้องกับหลักการดังต่อไปนี้ 5.3.4.1 ความสมดุล (Balance) หมายถึงความรู้สึก ที่เท่ากันในการมองเห็นภาพบนเฟรม หรื อหน้าจอคอมพิว เตอร์ ความรู้สึกเท่ากันดังกล่าวนี้จะมองในภาพรวมระหว่างซ้ายกับขวา บนกับล่าง และใกล้กับไกล ความสมดุลนี้อาจเป็นความรู้สึกที่เห็นสิ่งต่างๆในภาพไม่เลื่อนออกจากจอ หรือรู้สึกว่าน้าหนัก ซ้าย-ขวาของจอภาพเท่ากันนั่นเอง ความสมดุลในแง่การออกแบบจะมี 2 รูปแบบ คือ สมดุล แบบซ้ายขวาเท่ากัน และความสมดุลแบบความรูส้ ึกเท่ากัน - ความสมดุลแบบซ้ายขวาเท่ากัน (Formal Balance) หมายถึง ความเท่ากันทุกประการ ของการจัดวางสิ่งของนัน้ ๆ บนหน้าจอ (ดังภาพ 2) - ความสมดุลแบบความรู้สึกเท่ากัน (Informal Balance) ความสมดุลดังกล่าวนี้เกิดจาก ความรู้ สึ ก ว่ า ในภาพรวมแล้ ว มี ค วามเท่ า กั น ทั้ ง ๆที่ วั ต ถุ ห รื อ ชิ้ น งานต่ า งๆ บน จอคอมพิวเตอร์มีขนาด สีสัน ความลึก รูปแบบและตาแหน่งไม่เหมือนกัน แต่เมื่อมอง โดยรวมแล้วรูส้ ึกว่าเท่ากัน (ดังภาพ 3)

ภาพ 2 แสดงความสมดุลแบบซ้ายขวาเท่ากัน (Formal Balance)

ภาพ 3 ความสมดุลแบบความรูส้ ึกเท่ากัน (Informal Balance) 5.3.4.2 ความกลมกลืน (Harmony) มีการออกแบบจอภาพจานวนมากที่ให้ความรู้สึกขัดแย้ง ความรู้สึกดังกล่าวนี้เกิดขึ้น จากการใช้ตัวพิมพ์ ใช้ภาพและเสียงที่ขัดกัน อาทิ การใช้รูปแบบหรือตัวพิมพ์ที่ดูขัดตากับภาพที่ ไม่เกี่ยวข้องกับเนือ้ หา การใช้ภาพที่ไม่เกี่ยวข้องกับเนือ้ หา การใช้เสียงประกอบที่ขัดกับความรูส้ ึก การใช้คู่สีทีด่ ูแล้วไม่สบายตา ฉะนั้นการเลือกรูปแบบตัวพิมพ์ ภาพ เสียง จึงควรพิจารณาเลือกที่ สอดคล้องกับเนือ้ หาให้มากที่สุด 5.3.4.3 ความเป็นหนึ่งเดียว (Unity) ความเป็ น หนึ่ ง ด้ ว ยหรื อ ความเป็ น กลุ่ ม เดี ย วกั น เป็ น รู ป แบบที่ เ น้ น ให้ ผู้ ใ ช้ ม องเห็ น ความสัมพันธ์เกี่ยวข้องของข้อมูลที่ปรากฏบนจอภาพในเรื่องใดเรื่องหนึ่ง ความเป็นหนึ่งเดียวกัน อาจแสดงได้ หลายอย่ าง เช่น ประเด็นเนื้อ หาเดีย วกั น รูป ร่างเดีย วกั น คุณสมบัติคล้ า ยกั น ลักษณะการใช้งานคล้ายกัน สีโทนเดียวกัน จัดแบ่งเป็นหมวดหมู่เดียวกัน เป็นต้น 5.3.4.4 การเว้นช่องว่าง (White Spacing) โดยพื้นฐานและหลักการออกแบบนั้น การเว้นช่องว่างที่เหมาะสมจะช่วยให้เกิดความ ยืดหยุ่นในการับรู้ ช่วยให้เกิดการแบ่งกลุ่มของข้อมูล ช่วยเน้นความสาคัญของข้อมูล การเว้น ช่ อ งว่ า งอาจช่ ว ยเชื่ อ มโยงและแสดงล าดั บ ของข้ อ มู ล นอกจากนี้ ก ารเว้ น ช่ อ งว่ า งยั ง เป็ น องค์ประกอบร่วมของการออกแบบเพื่อความสมดุล ความกลมกลืน และความเป็นหนึ่งเดียว การออกแบบช่องว่างบนจอคอมพิวเตอร์นั้นไม่มีเกณฑ์ตายตัว แต่ที่สาคัญคืออย่าใช้การเว้น ช่องว่างมากเกินไปจนทาให้เกิดการกระจายของข้อมูลจนยากต่อการับรู้ หรือเว้นช่องว่างน้อย เกินไปจนดูอดึ อัด และไม่ทราบว่าจะเน้นความสาคัญไปที่จุดใดในหน้าจอ

5.3.4.5 เส้นทางต่อเนื่องของการมองภาพ (Visual Flow) โดยปกติตาแหน่งเริ่มต้นในการมองภาพหรืออ่านข้อความของคนเรา จะเริ่มจากมุมซ้าย บนของหน้าจอ ต่อจากนั้นจะขึ้นอยู่กับการชี้นาของภาพหรือข้อความ เราอาจมองต่อไปทาง ขวามือของจุดเริ่มคือ มองต่อไปในแนวนอน หรืออาจจะมองลงด้านล่างของจุดเริ่มต้น ลงใน แนวตั้ง ตาแหน่งที่ดีที่สุดก็คือพื้นที่ด้านซ้ายบนของหน้าจอ ส่วนตาแหน่งที่ไม่เหมาะสมในการ วางเนือ้ หาหรือข้อความสาคัญก็คือตาแหน่งขวาบนและซ้ายล่าง ซึ่งเป็นเป็นตาแหน่งที่วางเนื้อหา หรือข้อความที่ไม่สาคัญลงไปแทน 5.3.4.6 ตาแหน่งการแสดงภาพ (Display Visual) เพื่อให้เอือ้ ต่อการเรียนรู้และลดเวลาในการค้นหาเนื้อหา ตาแหน่งที่เหมาะสมในการวาง ภาพก็คือด้านข้างข้อความ โดยทั่วไปนิยมวางภาพไว้ทางซ้ายของข้อความเพราะว่าผู้อ่านส่วน ใหญ่เริ่มอ่านเนื้อหาในจอด้านซ้ายดังที่กล่าวมาในข้อที่แล้ว การวางตาแหน่งเช่ นนี้ ผู้อ่านจะ มองเห็ น และพิ จ ารณารายละเอี ย ดของรู ป ภาพก่ อนที่จ ะอ่ า นข้ อ ความเพื่ ออธิ บ ายเพิ่มเติม นอกจากนี้ยังช่วยลดการเคลื่อนที่ของสายตาผู้อ่าน ส่ว นการวางภาพไว้ในตาแหน่งอื่นไม่ว่าจะ เป็ น ทางด้ า นขวา ด้ า นบน หรื อ ด้ า นล่ า งข้ อ ความก็ ส ามารถจะกระท าได้ แต่ อ ย่ า งไรก็ ตาม ตาแหน่งที่ไม่แนะนาก็คือการวางภาพไว้ตรงกลางระหว่างข้อความ 5.4 การออกแบบส่วนประกอบของมัลติมีเดีย การนาส่วนประกอบต่างๆ ของมัลติมีเดียไม่ว่าจะเป็นข้อความ ภาพและกราฟิก ภาพเคลื่อนไหว เสียง และวิดีโอ มาใช้ในการนาเสนอบนหน้าจอ มีแนวทางการออกแบบดังนี้ 5.4.1 การใช้ข้อความ ข้อความนับ เป็นองค์ป ระกอบหลัก พื้ นฐานที่สาคัญ ที่สุดในการออกแบบงานมัล ติมีเ ดีย ซึ่ง ผู้ออกแบบต้องคานึงถึงองค์ประกอบย่อยหลายๆ ด้าน ไม่ว่าจะเป็น รูปแบบตัวอักษร ขนาดตัวอักษร ความหนาแน่ นของตัว อัก ษร สีของข้อความ รวมทั้งการจัดข้อความร่วมกั บ ภาพในหน้าจอ ในการ นาเสนอด้วยข้อความในงานมัลติมีเดีย มีหลักการดังนี้ 5.4.1.1 การเลือกแบบอักษร เมื่อเลือกใช้ตัวอักษรชนิดใด ควรแน่ใจว่าตัวอักษรที่เราระบุไว้ จะสามารถปรากฎต่อผู้ ใช้ได้ตามที่เราต้องการ เพราะว่า โปรแกรมจะเรียกใช้ตัวอักษรที่มีอยู่ในคอมพิวเตอร์ ดังนั้น หากเรากาหนดตัวอักษรไม่แพร่หลายนัก อาจทาให้โปรแกรมหาตัวอักษรนั้นไม่พบ จึงทาให้ผู้ใช้ ไม่สามารถอ่านข้อความได้ตามต้องการได้

5.4.1.2 ขนาดตัวอักษร ใช้ตัวอักษรที่มีขนาดเหมาะกับหน้าจอ โดยไม่ควรเล็กเกินไป ใหญ่เกินไป และใช้ตัวอักษร ที่มีขนาดใหญ่พอต่อการอ่านจอ เลี่ยงตัวหนังสือภาษาอังกฤษที่เขียนด้วยตัวพิมพ์ใหญ่ทั้งหมด นอกจากนี้ ในแต่ล ะบรรทัด ไม่ค วรให้มีคามากจนเกินไป และไม่ควรใช้ขนาดตัวพิมพ์ที่เ ล็ ก จนเกินไป เพราะจะทาให้ตัวอักษรเบียดกันและส่งผลให้ผใู้ ช้ไม่สนใจ 5.4.1.3 ความหนาแน่นของตัวอักษร ไม่ควรบรรจุข้อความเต็มหน้าจอ เพราะทาให้ยากต่อการอ่าน ทาให้รู้สึกน่าเบื่อและลด ประสิทธิภาพการเรียนรู้ลงได้ อาจใช้วิธีวางรูปประกอบไว้ด้านข้างของข้อความ หรือแบ่งเนื้อหา ออกเป็ น ส่ ว นย่ อ ย การใส่ ข้ อ ความในหนึ่ ง หน้ า จอนั้ น ควรค านึ ง ถึ ง ความหนาแน่ น ของ องค์ประกอบอื่นๆ บนจอภาพด้วย ส่วนใหญ่ผู้ใช้จะชอบจอภาพที่มีความหนาแน่นของข้อความ มาก หรือประมาณ 50 % ของหน้าจอ เนื่องจากจะมีข้อมูลที่ช่วยให้มีความเข้าใจเนื้อหา และ แนวคิดหลักๆ ชัดเจน และต่อเนื่องขึ้น 5.4.1.4 ความเหมาะสมของตัวอักษรกับเนือ้ หา เลื อ กลั ก ษณะของตั ว อั ก ษรให้ เ หมาะสม เพราะจะท าให้ มั ล ติ มี เ ดี ย ของเราดู ทันสมัย น่าเชื่อถือ หรือสนุก สนานยิ่งขึ่น โดยมีข้อควรพิจารณาดังนี้ คือความคงเส้นคงวาที่ไม่ควรใช้ ตัวอักษรเกินกว่า 2 รูปแบบในภาวะปกติ ไม่เจตนาเน้นคาจนเกินควร จัดข้อความให้อยู่ในรูปแบบ ที่อา่ นง่าย และกาหนดช่องว่าง หรือช่องไฟให้เหมาะสม 5.4.1.5 การเน้นข้อความ หัวเรื่อง หัวข้อย่อย รวมทั้งเนื้อหาที่มีความสาคัญควรเน้นให้เด่นชัดด้วยการทาให้มีขนาด ใหญ่ขึ้น เพราะตัว หนังสือที่มีขนาดแตกต่า งจากตัว หนังสื ออื่นย่อ มดึงดูดความสนใจ หรือใช้ ลักษณะที่แตกต่างออกไป เช่น ตัวหนา ตัวเอียง การใส่เงา การขีดเส้นใต้ การใช้สีที่ต่างออกไป การเว้นช่องว่างปุ่ม หรือใช้เครื่องหมาย ลูกศร สัญลักษณ์ เป็นต้น

5.4.1.6 การจัดตาแหน่งของตัวอักษร การจัดตาแหน่งของตัวอักษรในแต่ละส่วนมีผลต่อความรู้สึกของเอกสาร โดยที่การจัด ตาแหน่งแต่ละแบบให้ความรู้สกึ ที่ตา่ งกัน ดังนี้ - จัดชิดซ้าย (Align Left) ตัวอักษรที่จัดให้ชิดซ้ายจะมีปลายด้านขวาไม่สม่าเสมอ เนื่องจากตัวอักษรในแต่ละ บรรทัด มีความยาวไม่เท่ากัน แต่ผู้อ่านก็จะสามารถหาจุดเริ่มต้นของแต่ละบรรทัดได้ ง่าย - จัดชิดขวา (Align Right) แม้ว่าการจัดตัวอักษรให้ชิดขวา จะดูน่าสนใจแต่จุดเริ่มต้นในแต่ละบรรทัดไม่สม่าเสมอ ทาให้อ่านได้ยาก เนื่องจากผู้อา่ นต้องหยุดชะงักเพื่อหาจุดเริ่มต้นของแต่ละบรรทัด - จัดกึ่งกลาง (Center) การจัดตัวอักษรให้อยู่กึ่งกลาง ใช้ได้ผลดีกับข้อมูลที่มีปริมาณไม่มาก เหมาะกับรูปแบบ ที่เป็นทางการ เช่น คาประกาศ หรือคาเชิญ - จัดชิดขอบซ้ายและขอบขวา (Justify) เมื่อจัดคอลัมน์ของตัวอักษรแบบชิดขอบขวา จะมีพื้นที่ว่างเกิดขึ้นระหว่างคา สิ่งที่ควร ระวัง คือ การเกิดช่องว่างที่เป็นเหมือนทางของสายน้า ซึ่งจะรบกวนความสะดวกใน การอ่าน แต่เป็นเรื่องยากที่จะหลีกเลี่ยง ในคอลัมน์ที่มขี นาดแคบ

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

อักษร

ภาพ 4 แสดงการเลือกใช้สีตัวอักษรและพืน้ หลังทีเ่ หมาะสม

ควรหลีกเลี่ยงการจับคู่สีข้อความกับพื้นหลังที่ตัดกันหรื อกลืนกันจนมากเกินไป เช่น แดงกับเขียว น้าเงินกับแดง น้าเงินกับเขียว เพราะจะทาให้อ่านยากและปวดตา ดังภาพ 5

อักษร

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

5.4.2 การใช้เสียง การใช้เสียงไม่ว่าจะเป็นเสียงพูดบรรยาย เสียงดนตรี และเสียงประกอบ (Sound Effect) ช่วยใน การนาเสนอมัลติมีเดียให้น่าสนใจ เช่น เสียงพูดเพื่อเสริมการช่วยเหลือ หรือให้คาแนะนา เสียงดนตรี ช่วยเพิ่มความเร้าใจและบรรยากาศในการนาเสนอเนื้อหา เสียงประกอบฉากช่วยกระตุ้นให้ผู้ใช้เกิด จินตนาการ เป็นต้น การใช้เ สีย งก็ เ ช่นเดีย วกั บ การใช้ข้ อความและภาพ ที่จะต้ องมีก ารเลือกใช้ ใ ห้ เหมาะสมกับเวลาและโอกาส บางทีการไม่มเี สียงอาจมีความเหมาะสมกว่าการใช้เสียง การนาเสนองาน มัลติมีเดียด้วยเสียง มีหลักการดังนี้ 5.4.2.1 หลีกเลี่ยงการบรรยายตามข้อความที่ปรากฏบนจอภาพ นอกจากมีวัตถุประสงค์เฉพาะ เช่น การสอนการอ่านสาหรับเด็กเล็กด้วยข้อความสั้นๆ เพราะผู้ใช้แต่ละคนมีพฤติกรรมในการอ่านไม่เหมือนกัน ความเร็วในการอ่านแตกต่างกัน การ ปรับอัตราการอ่านของตนเองให้พอดีกับเสียงบรรยายจึงกลายเป็นตัวกวน (Noise) ในการรับรู้ 5.4.2.2 ควรกาหนดปุ่มควบคุมเสียง หากจาเป็นต้องมีข้อความเพื่ออธิบายบนจอภาพ ผู้ออกแบบควรกาหนดปุ่มควบคุม เสียง เพื่อให้ผู้ใช้สามารถควบคุมระดับความดังของเสียง รวมทั้งเลือกได้ว่าต้องการ ฟังซ้า หรือ ตามความสนใจและความถนัดของผูใ้ ช้ 5.4.2.3 การนาเสนอเสียงประกอบกับภาพ ความยาวของเสียงควรสอดคล้องกับระยะเวลาการแสดงภาพ 5.4.2.4 เสียงต้องมีคุณภาพ ถูกต้อง และเหมาะสม ไม่ว่าจะเป็นเสียงพูด เสียงบรรยาย หรือเสียงดนตรี ต้องชัดเจน มีคุณภาพ ถูกต้อง และ เหมาะสม โดยเฉพาะเสียงของผู้บรรยายควรมีน้าเสียงแจ่มใส มีโทนเสียงที่เหมาะสมกับเนื้อ เรื่ อ ง เช่ น เมื่ อ ถึ ง เรื่ อ งตื่ น เต้ น ก็ ใ ช้ เ สี ย งเร็ ว ขึ้ น หรื อ เมื่ อ เนื้ อ หาต้ อ งการสร้ า งอารมณ์ ค วร ทอดเสียงให้เข้ากับเนือ้ หานั้นด้วย 5.4.2.5 ไม่ควรใช้เสียงประกอบ หรือเสียงดนตรี มากจนเกินไป เพราะจะรบกวนการเรียนรู้เนื้อหาของผู้ใช้ โดยเฉพาะผูใ้ ช้ที่ตอ้ งอ่านเนือ้ หาจากหน้าจอ 5.4.2.6 ไม่ควรบันทึกเสียงบรรยาย และเสียงแบคกราวด์ซ้อนไว้ด้วยกัน เพราะหากการบันทึกมีความดังค่อย ไม่เหมาะสม การควบคุมความดังของเสียงหนึ่งจะ ส่งผลกระทบต่ออีกเสียงหนึ่ง

5.4.3 การใช้ภาพนิ่งและกราฟิก ภาพนิ่ ง และกราฟิ ก เป็ น องค์ ป ระกอบที่ ส าคั ญ อี ก ตั ว หนึ่ ง ของมั ล ติ มี เ ดี ย เพราะช่ ว ยสื่ อ ความหมายให้ผู้ใช้เข้าใจได้เป็นอย่างดี การใช้ภาพนิ่งและกราฟิกนั้น นอกจากจะใช้เพื่อสื่อความเข้าใจ เนื้อหาแล้ว ยังช่วยเพิ่มความสวยงามและสีสันให้มัลติมีเดียดูน่าสนใจยิ่งขึ้น การนาเสนองานมัลติมีเดีย ด้วยภาพนิ่งและกราฟิก มีหลักการดังนี้ 5.4.3.1 ภาพควรสอดคล้องกับจุดมุง่ หมายและเนื้อหา ภาพต้อง มีความชัดเจน สังเกตง่ายและสื่อความหมายได้ดี ควรหลีกเลี่ยงการใช้ภาพที่ ไม่เกี่ยวข้องแม้จะนามาเพื่อการตกแต่งให้สวยงาม หรือภาพที่สื่อความหมายผิดไปจนทาให้ สับสนได้ ควรใช้รูปภาพที่ไม่ซับซ้อนและมีข้อความกากับเพื่อให้ผู้ใช้รับรู้เฉพาะสิ่งที่ต้องการ ตีความ 5.4.3.2 ภาพๆ หนึ่ง ควรใช้เพื่อเสนอแนวคิดหลักเพียงแนวคิดเดียว ควรหลีกเลี่ยงการใช้ภาพจานวนมากๆ หรือภาพที่มรี ายละเอียดมากหรือน้อยเกินไป 5.4.3.3 ภาพต้องมีความน่าสนใจ ลักษณะของภาพต้อง ชวนมอง และมีขนาดพอเหมาะกับหน้าจอ หรือ สภาพแวดล้อม อื่นๆ และควรใช้ภาพที่เหมาะสมกับวัยผู้ใช้ เช่น ภาพการ์ตูนควรใช้ กับเด็กเล็กมากกว่าผู้ใหญ่ เด็กเล็กจะชอบภาพที่เรียบง่าย มีรายละเอียดน้อย สีสดใส แต่เด็กโตขึ้นจะต้องการรายละเอียด ของภาพมากขึน้ และชอบสีออ่ นลง 5.4.3.4 ระวังการใช้ภาพพื้นหลังลวดลาย ระวังการใช้ภาพพื้นหลัง หรือใช้กราฟิกที่เป็นลวดลาย เพราะอาจทาให้อ่านลาบาก ควรใช้ลาย หรือ สีพื้นเรียบเป็นพืน้ รองรับส่วนที่เป็นข้อความและกราฟิกนั้นอีกครั้ง 5.4.3.5 การออกแบบหน้าจอไม่ควรมีการเสริมแต่งมากเกินไป และควรพิจารณาความเหมาะสมในการตกแต่งภาพประกอบที่ต้องคานึงถึงความจริง มากกว่าความสวยงามเพียงอย่างเดียว เพราะอาจทาให้ส่อื ความหมายผิดไปจากที่ตงั้ ไว้

5.4.4 การใช้วิดีโอ วิดีโอถูกนามาใช้ในลักษณะที่ใกล้เคียงกับภาพเคลื่อนไหว แต่การนาเสนอด้วยวิดีโอจะได้เปรียบ ในแง่ของการถ่ายทอดความจริงได้อย่างชัดเจน การนาเสนองานมัลติมีเดียด้วยวิดีโอ มีหลักการดังนี้ 5.4.4.1 ควรมีให้นอ้ ยที่สุด เนื่องจากการใช้วิดีโออาจเกิดปัญหาเกี่ยวกับขนาดของไฟล์ข้อมูลที่มีขนาดใหญ่ จึงควร มีให้น้อยที่สุด ควรใช้เวลาในการแสดงผลให้สั้นและใช้พื้นที่น้อย เพื่อใช้เป็นส่วนเสริมข้อความ และภาพ มากกว่าการใช้ส่วนหลักของเนือ้ หา 5.4.4.2 ควรแบ่งวิดโี อเป็นตอนๆ หากมีค วามจาเป็นต้องนาเสนอเนื้อหาเป็น วิดีโอตลอดทั้งเรื่อง ควรแบ่งเนื้ อหาเป็น ตอนๆ เพื่อให้ไม่นา่ เบื่อเกินไป 5.4.4.3 ผูใ้ ช้ควรควบคุมวิดีโอได้ โดยการใช้แผงควบคุมการทางานเพื่อเล่น หยุด เดินหน้า ถอยหลัง เพิ่มลดเสียงของ วิดีโอได้ 5.5.5 การใช้ภาพเคลื่อนไหว เป็นการนาภาพนิ่งหรือภาพกราฟิกมาแสดงต่อเนื่องกันให้เกิดลักษณะการเคลื่อนไหว ซึ่งมีทั้ง แบบ 2 มิติ และ 3 มิติ การนาเสนองานมัลติมีเดียด้วยภาพเคลื่อนไหว มีหลักการดังนี้ 5.5.5.1 ควรใช้ภาพเคลื่อนไหวเมื่อไม่สามารถใส่ขอ้ มูลในภาพนิ่งภาพเดียวได้ แต่ก็ไม่ควรใช้ภาพเคลื่อนไหวมากจนเกินความจาเป็น ควรคานึงถึงเหตุผลและความ เหมาะสม 5.5.5.2 ภาพเคลื่อนไหวมีอิทธิพลต่อการมองสิ่งต่างๆ ที่อยู่ในหน้าจอ การที่ต้องอ่านอะไรในสภาพที่มีสิ่งเคลื่อนไหวไปมาโดยรอบจะทาให้รู้สึกราคาญ อาจ ทาให้เสียสมาธิในการอ่านข้อความ

5.5.5.3 ในบางครัง้ เราสามารถสร้างภาพเคลื่อนไหวด้วยเทคนิค Effect ง่ายๆ เช่ น การน าภาพนิ่ ง มาแสดงในลั ก ษณะ Pan Left / Pan Right / Tilt Up / Tilt Down / Zoom in / Zoom Out เป็นต้น ซึ่งจะทาให้การนาเสนอภาพมีความน่าสนใจขึ้น แต่ไม่ควรมีมาก เกินไป เพราะจะทาให้ลายตา 5.4 สรุป หากเปรียบเทียบกับบ้าน ขั้นตอนของการออกแบบหน้า จอก็คือการออกแบบตกแต่งบ้าน ซึ่ง บ้านที่ดีต้องมีความสวยงามและเหมาะสมต่อการพักอาศัย ไม่ใช่ดูดีแต่ไม่เหมาะกับการอยู่อาศัย หรือ พักอาศัยได้แต่ไม่ดึงดูดใจให้ใครเข้าพัก การออกแบบหน้าจอของงานมัลติมีเดีย เป็นการให้ความสาคัญ กั บ องค์ป ระกอบต่างๆ ที่เ ห็นในหน้าจอคอมพิวเตอร์ ซึ่งนอกจากจะต้องออกแบบให้ สวยงามตาม หลั ก การออกแบบทั ศ นศิ ล ป์ แ ละการออกแบบพื้ น ฐานแล้ ว ยั ง ต้ อ งตอบสนองเนื้ อ หาต่ า งๆในงาน มัลติมีเดีย ซึ่งนักออกแบบต้องผสมผสานกันทั้งศาสตร์และศิลป์ให้ได้อย่างลงตัว

กิจกรรมภาคปฏิบัติ ใบงานที่ 5 1. วัตถุประสงค์ 1.1 เพือ่ ให้นสิ ิตฝึกการสังเกตพฤติกรรม และวิเคราะห์เปรียบเทียบพฤติกรรมของผูใ้ ช้งานต่างๆ 1.2 เพื่อให้นิสติ ฝึกการสร้างแบบทดสอบเพื่อใช้วเิ คราะห์พฤติกรรมของผูใ้ ช้งาน 1.3 เพื่อให้นสิ ิตได้มปี ระสบการณ์ในการนาเสนอผลงาน และได้แลกเปลี่ยนความคิดเห็นร่วมกัน กันในชั้นเรียน 2. สาระสาคัญ กิจกรรมใน ใบงานที่ 5: ภารกิจใช้งานสิ่งที่ไม่คุ้นเคย (Task Analysis) เป็นการเสริมความ เข้าใจ และกระตุ้นให้นิสิตได้นาความรู้ในบทเรียนมาประยุกต์ใช้กับการออกแบบงานมัลติมีเดียให้มี ประสิทธิภาพ และตรงตามความต้องการของผู้ใช้ 3. วิธีการ ให้ นิ สิ ต กลุ่ ม ละ 5 คน ช่ ว ยกั น คิ ด ภารกิ จ จ านวน 3 ภารกิ จ ซึ่ ง จะต้ อ งเกี่ ย วกั บ การใช้ งาน โปรแกรมคอมพิวเตอร์ แอปพลิเคชัน เว็บไซต์ หรือรวมไปถึงเครื่องจักรกล และระบบอัตโนมัติต่างๆ โดยให้เพื่อน 2 คนทาให้ภารกิจให้สาเร็จภายในเวลาที่กาหนด (ทาทีละคน) ระหว่างที่เพื่อนทาภารกิจนั้น สมาชิกในกลุ่มจะต้องสังเกตพฤติกรรม แล้วจดบันทึก ถ่ายภาพ ฯลฯ และอาจสัมภาษณ์ เพิ่มเติม จากนั้นจึงนาข้อมูลมาวิเคราะห์ แล้ว สรุปทาเป็นเล่มรายงานส่ งใน สัปดาห์หน้า ในเล่มรายงานประกอบด้วยรายละเอียดดังต่อไปนี้ - แบบสอบถามก่อนการทาภารกิจ - สคริปต์ที่ใช้ในการทา Task Analysis - การ์ดภารกิจที่มอบหมายให้ผเู้ ข้าร่วมทา จานวน 3 ภารกิจ - รายงานการสังเกตพฤติกรรมการใช้งาน - ภาพถ่ายกิจกรรมการทาภารกิจต่างๆ ของเพื่อนทั้ง 2 คน - สรุปผล: เปรียบเทียบพฤติกรรมของเพื่อนทั้ง 2 คน - แบบสอบถามหลังการทาภารกิจ

1. แบบสอบถามก่อนการทาภารกิจ ตัวอย่าง: แบบสอบถามก่อนการทาภารกิจ

1. 2. 3. 4.

เพศ  ชาย  หญิง อายุ ........................................... การศึกษา ........................................ คุณใช้อนิ เตอร์เน็ตบ่อยแค่ไหน  น้อยกว่าสัปดาห์ละ 1 ครัง้

อาชีพ ............................................

 ทุกวัน

 หลายครั้งใน 1 วัน

 2-3 ครั้ง ต่อสัปดาห์

5. เว็บไซต์ที่คุณชอบคือ ………………………………………………………………………………………………... 6. คุณรูจ้ ักเว็บไซต์น้มี าก่อนหรือไม่  รู้จัก  ไม่รู้จัก

2. สคริปต์ที่ใช้ในการทา Task Analysis ตัวอย่าง: สคริปต์กรณีทดสอบการใช้เว็บไซต์ สวัสดีค่ะ/ครับ (แนะนำตัว และสมำชิกในทีม) ในวันนี้เราจะมีภารกิจมาให้ลองทา 3 ภารกิจ ซึ่ง เกี่ยวกับเว็บไซต์..(ชื่อเว็บไซต์).. โดยการทดสอบครั้งนี้ จะทาให้เราทราบว่าผู้ใช้เว็บไซต์น้ีจริงๆ แล้วรู้สึก อย่างไรเวลาที่ใช้งานมัน เราจึงอยากรับฟังความคิดเห็นของคุณจากใจจริงๆ เพื่ อปรับปรุงเว็บไซต์น้ี ถ้ามี คาถามสงสัย คุณถามมาได้เลยนะ แต่ในบางคาถามเราอาจจะไม่สามารถตอบคุณได้เพราะเราอยากจะรู้ ถึงปัญหาที่แท้จริงถ้าหากผู้ใช้ไม่มใี ครช่วย แต่เราจะตอบคุณหลังจากการทดสอบนี้จบลง คุณมีขอ้ ซักถาม อะไรก่อนที่เราจะเริ่มทดสอบกันมัย้ ?.. งั้นเรามาเริ่มกันเลย เว็บไซต์น้เี กี่ยวกับ....(อธิบำยเว็บไซต์คร่ำวๆ).... เราจะขอเริ่มจากถามคาถาม ทั่วๆไป เกี่ยวกับความประทับใจในเว็บไซต์น้ีก่อน คุณสามารถเลื่อนเมาส์ขึ้น -ลง เพื่อดูภาพรวมของ เว็บไซต์น้ี แต่ขออย่าคลิกอะไรทั้งสิ้น.. โอเค ขอเริ่มจากคาถามแรก - การออกแบบหน้าจอ มีหน้าตาอย่างไร? เลย์เอาท์? สี? กราฟิก? ธีม? .....(รอฟังค ำตอบ และบันทึก) - คุณคิดอย่างไร เมื่อเห็นOption ในหน้าเว็บไซต์น้ี? .....(รอฟังคำตอบ และบันทึก) - คุณคิดว่าเว็บไซต์น้มี ีวัตถุประสงค์เพื่ออะไร? .....(รอฟังคำตอบ และบันทึก) - คุณคิดว่าใครเป็นกลุ่มเป้าหมายหลักของเว็บไซต์น้ี .....(รอฟังคำตอบ และบันทึก)

83 ขอบคุณสาหรับการตอบคาถามนะคะ/ครับ ต่อไปเราจะให้เวลาคุณ .....นาที ที่จะทาภารกิจที่ 1 นั่นคือการ...(บอกภำรกิจที่1 และให้การ์ดภารกิจ)... อย่าลืมพูดให้เราฟังว่าคุณคิดอย่างไร ระหว่างที่คุณ ทาด้วยนะคะ/ครับ ถ้าหมดเวลาแล้วเราจะแจ้งนะคะ/ครับ (สังเกตพฤติกรรม และจดบันทึก)

ต่อไปเราจะให้เวลาคุณ ...นาที ที่จะทาภารกิจที่ 2 นั่นคือการ...(บอกภำรกิจที่2 และให้การ์ด ภารกิจ )... คุณแค่บอกเราว่าคุณรู้อะไรบ้างในการใช้งานเว็บนี้ หากคุณมีคาถามสงสัย สามารถถาม ออกมาได้เลย อย่าลืมพูดให้เราฟังว่าคุณคิดอย่างไร ถ้าหมดเวลาแล้วเราจะแจ้งนะคะ/ครับ (สังเกตพฤติกรรม และจดบันทึก)

และภารกิจสุดท้าย เราจะให้เวลาคุณ ...นาที ที่จะทาภารกิจที่ 3 นั่นคือการ...(บอกภำรกิจที่3 และให้การ์ดภารกิจ) เราอยากจะรูจ้ ากคุณว่าการใช้งานนี้งา่ ยหรือยากอย่างไร คุณรูส้ ึกอย่างไร คุณคิดว่า ฟังก์ชั่นนีม้ ไี ว้ใช้ทาอะไร อย่าลืมพูดให้เราฟังว่าคุณคิดอย่างไร ถ้าหมดเวลาแล้วเราจะแจ้งนะคะ/ครับ (สังเกตพฤติกรรม และจดบันทึก)

3. การ์ดภารกิจที่มอบหมายให้ผเู้ ข้าร่วมทา จานวน 3 ภารกิจ ตัวอย่าง: การ์ดภารกิจ 1 ภารกิจ

ให้สมัครสมาชิกและล็อคอินเข้าเว็บไซต์ https://www.pinterest.com

ระยะเวลาที่กาหนด 3 นาที

ตัวอย่าง: การ์ดภารกิจ 2 ภารกิจ

ให้คน้ หาภาพ “อาหารและเครื่องดื่ม” ในเว็บไซต์ https://www.pinterest.com

ระยะเวลาที่กาหนด 3 นาที

ตัวอย่าง: การ์ดภารกิจ 3 ภารกิจ

ให้สร้างบอร์ด ในเว็บไซต์ https://www.pinterest.com

ระยะเวลาที่กาหนด 3 นาที

4. รายงานการสังเกตพฤติกรรมการใช้งาน ตัวอย่าง: สังเกตพฤติกรรมเพื่อนคนที่ 1 ทาภารกิจที่ 1 เพื่อนคนที่ 1 สามารถสมัครสมาชิกและล็อคอินเข้าเว็บไซต์ https://www.pinterest.com ได้ภายใน เวลา 50 วินาที ด้วยความมั่นใจ เขาบอกว่าเขาเคยใช้งานเว็บไซต์ที่มีลักษณะคล้ายๆ กันนีม้ าก่อนจึง รู้สกึ ว่าภารกิจนีง้ ่าย

ตัวอย่าง: สังเกตพฤติกรรมเพื่อนคนที่ 2 ทาภารกิจที่ 1 เพื่อนคนที่ 2 ไม่สามารถสมัครสมาชิกและล็อคอินเข้าเว็บไซต์ https://www.pinterest.com ได้ภายใน เวลาที่กาหนด และแสดงอาการลังเล แต่ในที่สุดเขาก็คลิกที่ปุ่ม “ลงทะเบียน” แล้วเข้าสูข่ ั้นตอนการ ลงทะเบียนและล็อคอินได้ ในเวลาต่อมาโดยใช้เวลาไปทั้งหมด 3นาที 20 วินาที อย่างไรก็ตามเขายัง ชื่นชมว่าเว็บไซต์น้มี ีขอ้ ความแนะนาวิธีการสมัครอย่างเป็นขัน้ เป็นตอนดี แม้แต่เขาที่ไม่ค่อยใช้งานเว็บ ลักษณะนีเ้ ท่าไรก็ยังสามารถใช้งานได้

5. ภาพถ่ายกิจกรรมการทาภารกิจต่างๆ ของเพื่อนทั้ง 2 คน 6. สรุปผล: เปรียบเทียบพฤติกรรมของผูใ้ ช้ทั้ง 2 คน พร้อมเหตุผลที่แสดงให้เห็นว่ามีความ แตกต่างกันหรือเหมือนกันอย่างไร และเป็นเพราะสาเหตุใด 7. แบบสอบถามหลังการทาภารกิจ ตัวอย่าง: แบบสอบถามหลังการทาภารกิจ 1. คุณคิดว่าภารกิจที่ทาแล้วทั้งหมดนี้ สาเร็จด้วยดีใช่หรือไม่  ใช่

 ไม่ใช่

2. โปรดให้ระดับความยากของภารกิจที่ 1  ง่าย

 ปานกลาง

 ยาก

3. โปรดให้ระดับความยากของภารกิจที่ 2  ง่าย

 ปานกลาง

 ยาก

4. โปรดให้ระดับความยากของภารกิจที่ 3  ง่าย

 ปานกลาง

 ยาก

5. คุณพบการใช้งานที่ซับซ้อนในเว็บไซต์น้บี ้างหรือไม่ ……………………………………………………………………………………………………………………………………………………

6. คุณมีขอ้ เสนอแนะให้ปรับปรุงเว็บไซต์น้อี ย่างไร …………………………………………………………………………………………………………………………………………………… เห็นด้วยอย่าง เห็น

ไม่เห็น

ไม่เห็นด้วย

ยิ่ง

ด้วย

อย่างยิ่ง

ด้วย

1. ปุ่ม (Buttons) จัดเรียงได้ดี มองเห็นได้ชัด 2. ตัวอักษรเห็นได้ชัดเจน ใช้คาเข้าใจง่าย 3. สไตล์การออกแบบสวยงาม สอดคล้องกัน ทั้งเว็บไซต์ 4. เว็บไซต์น้นี ่าสนใจ

4. การวัดและประเมินผล ผูส้ อนตรวจสอบผลงานของนิสิต และประเมินผลงานตามเกณฑ์ดังนี้ 4.1 ส่งงานตามกาหนดเวลา (1 คะแนน) 4.2 คุณภาพของรายงาน (1 คะแนน) 4.3 การคิดวิเคราะห์ อภิปรายผล (1 คะแนน) 4.4 การนาความรูม้ าประยุกต์ใช้งาน (1 คะแนน) 4.5 รับผิดชอบ ทางานเป็นทีม (1 คะแนน) คะแนนกิจกรรมภาคปฎิบัติ ใบงานที่ 5 รวมเป็น 5 คะแนน

บทที่ 6 กระบวนการสร้างงานมัลติมีเดีย หัวข้อเนื้อหาประจาบท 1. ขั้นที่ 1 การวางแผน 2. ขั้นที่ 2 การออกแบบ 3. ขั้นที่ 3 การพัฒนา 4. ขั้นที่ 4 การประเมินและปรับปรุง

วัตถุประสงค์ 1. สามารถอธิบายกระบวนการสร้างงานมัลติมีเดียได้อย่างเป็นระบบ 2. สามารถนาความรู้มาเป็นแนวทางในการผลิตงานมัลติมเี ดียได้ เวลาเรียน สัปดาห์ที่ 9-10 กิจกรรมการเรียนการสอน 1. การบรรยาย 2. การอภิปรายและการซักถามเกี่ยวกับเนือ้ หาในบทเรียนร่วมกัน 3. กาหนดประเด็นปัญหาเพื่อศึกษาค้นคว้าเพิ่มเติม

6.1 ขั้นที่ 1 การวางแผน (Planning) ในการออกแบบมัลติมีเดีย ขั้นตอนในการวางแผนนับว่าเป็นขั้นตอนที่สาคัญมาก เพราะหาก วิเคราะห์ปัจจัยที่เกี่ยวข้องไม่สมบูรณ์ ไม่ชัดเจน ก็จะส่งผลให้งานมัลติมีเดียไม่มีประสิทธิภาพในการ นาไปงาน ขั้นตอนในการวางแผน ประกอบด้วย 6.1.1 กาหนดเป้าหมาย ต้องกาหนดให้ชัดเจนว่ากลุ่มเป้าหมายคือใคร ต้องการให้กลุ่มเป้าหมายเหล่านั้นรับรู้อะไร โดย นักออกแบบอาจใช้วิธีการสร้างตัวแทนผู้ใช้ (Persona) เพื่อใช้เป็นเครื่องมือในการตัดสินใจทางด้านการ ออกแบบ 6.1.2 วิเคราะห์ปัจจัยที่เกี่ยวข้อง ได้แก่ 6.1.2.1 วิเคราะห์กลุ่มเป้าหมายและความต้องการของผู้ใช้ ไม่ว่าจะเป็นอายุ เพศ การศึกษา ความรู้พื้นฐาน ฐานะ อาชีพ ศาสนา ค่านิยม ทัศนคติ ตลอดจนรูปแบบพฤติกรรมต่างๆ เพราะจะเป็นข้อมูลสาคัญในการออกแบบมัลติมีเดีย 6.1.2.2 วิเคราะห์เนือ้ หา เป็นการวิเคราะห์เพื่อกาหนดขอบข่ายของเนื้อหา ประกอบด้วยหัวข้อใดบ้าง จาเป็นต้อง นาเสนอหรือไม่จาเป็น จากนั้นนามาจัดลาดับ แบ่งหมวดหมู่ ให้มีความสัมพันธ์ที่ชัดเจน ซึ่งขั้น ตอนนี้ ต้ อ งใช้ ค วามรอบคอบและต้ อ งใช้ ข้ อ มู ล จากแหล่ ง ต่ า งๆ เข้ า ช่ ว ย รวมทั้ ง ต้ อ งอาศั ย ผูเ้ ชี่ยวชาญตรวจสอบความสมบูรณ์ของเนือ้ หาที่ได้จากการวิเคราะห์ด้วย 6.1.2.3 วิเคราะห์ทรัพยากรที่เกี่ยวข้อง เป็นการวิเคราะห์ทรัพยากรทั้งหมดที่จะต้องใช้ในการพัฒนางานมัลติมีเดีย ทั้งด้านข้อมูล บุคลากร ฮาร์ดแวร์ ซอฟท์แวร์ รวมทั้งงบประมาณ 6.2 ขั้นที่ 2 การออกแบบ (Design) ขั้นตอนการออกแบบนี้เปรียบเสมือนการร่างพิมพ์เขียวสาหรับสร้างบ้าน เพื่ อเป็นต้นแบบให้ ฝ่ายโปรแกรมนาไปผลิตตามแบบที่กาหนด ขั้นตอนการออกแบบประกอบด้วย การวางโครงสร้างของ งาน การเขียนผังการทางาน (Flow Chart) การร่างส่วนประกอบต่างๆ ในหน้าจอ (Interface Layout) การเขียนสตอรีบอร์ด (Storyboard) และการสร้างตัวต้นแบบ(Prototype)

6.2.1 วางโครงสร้างของงาน เป็นการกาหนดความสัมพันธ์ของส่วนประกอบต่างๆ คร่าวๆ เพื่อแสดงให้เห็นภาพรวมของ งาน และกาหนดเส้นทางการเข้าสู่หน้าเนือ้ หาต่างๆ ให้เหมาะสม

ภาพ 1 แสดงการวางโครงสร้างของงาน ที่มา http://www.shawmultimedia.com/multimedia/lesson_3.html 6.2.2 เขียนผังการทางาน (Flow Chart) ผังการทางาน หมายถึง แผนภูมิที่แสดงความสัมพันธ์ของเนื้อหาแต่ละส่วน ตั้งแต่ต้นจนจบ ซึ่ง ละเอียดขึ้นกว่าดูจากโครงสร้าง ซึ่งความละเอียดของการเขียนผังงาน ขึ้นอยู่กับความซับซ้อนของ เนื้อหาและการทางานของโปรแกรม ยิ่งผังงานมีความละเอียดมากเท่าไหร่ก็จะง่ายต่อผู้นาผังงานไปใช้ งานต่อ เช่น ผูเ้ ขียนสตอรีบอร์ด หรือโปรแกรมเมอร์

ภาพที่ 2 แสดงการเขียนผังการทางาน (Flow Chart) ที่มา http://www.conceptdraw.com/examples/website-design-flowchart-example

6.2.3 ร่างส่วนประกอบต่างๆ ในหน้าจอ (Interface Layout) เมื่ อ ด าเนิ น การมาถึ ง ขั้ น ตอนนี้ แ ล้ ว จะท าให้ เ กิ ด ภาพคร่ า วๆ ในใจ ว่ า งานมั ล ติ มี เ ดี ย จะ ประกอบด้ ว ยส่ ว นใดบ้ า ง มี เ นื้ อ หาอย่ า งไร มี หั ว ข้ อ ใหญ่ หั ว ข้ อ รองกี่ ร ะดั บ มี ปุ่ ม ควบคุ ม อย่ า งไร ผูอ้ อกแบบควรร่างส่วนประกอบต่างๆ เหล่านีอ้ อกมาให้เห็นตาแหน่งของส่วนประกอบต่างๆ เพื่อให้ผทู้ า หน้าที่ผลิตสตอรีบอร์ดในขั้นตอนต่อไปได้นาไปใช้เป็นแนวทาง

ภาพ 3 แสดงการร่างส่วนประกอบต่างๆ ในหน้าจอ (Interface Layout) ที่มา https://ocrunit4.wordpress.com/ao2/ 6.2.4 เขียนสตอรีบอร์ด (Storyboard) จากผังการทางานและร่างหน้าจอแล้ว ทีมพัฒนาจะนามาขยายรายละเอีย ดออกเป็นสตอรี บอร์ด ซึ่งมักจะเป็นกระดาษที่แสดงรายละเอียดหน้าจอ โดยแสดงภาพหน้าจอ พร้อมทั้งรายละเอียด ของข้อความและลักษณะภาพ และเงื่อนไขต่างๆในเฟรมนั้น เช่น ถ้านาเสนอด้วยข้อความและภาพนิ่ง ก็ จะบอกรายละเอียดว่าข้อความเขีย นอย่างไร ภาพประกอบคือภาพอะไร และอยู่ในตาแหน่งใดของ หน้าจอ หรือถ้านาเสนอด้วยภาพเคลื่อนไหว หรือปฏิสัมพันธ์ ก็จะนาเสนอว่าภาพนั้นมีการเคลื่อนไหว อย่างไร จากตาแหน่งไหนไปที่ใดของหน้าจอ ปฏิสัมพันธ์มกี ารแสดงและโต้ตอบอย่างไร ก็คลิกเมาส์แล้ว โปรแกรมจะตอบสนองอย่างไร เป็นต้น การสร้างสตอรีบอร์ดจึงต้องมี ความละเอียดรอบคอบ เพื่อให้ ฝ่ายโปรแกรมทาขัน้ ตอนต่อไปได้ง่ายและเป็นระบบ อีกทั้งยังสะดวกต่อการแก้ไขในภายหลังอีกด้วย

ภาพ 4 แสดงการเขียนสตอรีบอร์ด (Storyboard) ที่มา http://www.shawmultimedia.com/multimedia/lesson_3.html 6.2.5 สร้างตัวต้นแบบ(Prototype) การสร้างตัวต้นแบบ(Prototype) คือการสร้างแบบโปรเจ็กต์คร่าวๆ เพื่อให้เห็นภาพได้ชัดเจนว่า ชิน้ งานสุดท้ายจะออกมาเป็นอย่างไร สามารถเป็นได้ทั้งภาพกราฟิกบนคอมพิวเตอร์(ดังภาพ 5) รวมถึง ตัวต้นแบบกระดาษที่สามารถจับต้องได้(ดังภาพ 6) การสร้างตัวต้นแบบจะเป็นการรวมองค์ประกอบ ต่างๆ ไม่ว่าจะเป็นขนาด รูปทรง ผิวสัมผัส และวิธีการใช้งาน เพื่อทดสอบว่าองค์ประกอบเหล่า นั้น เหมาะสม และใช้งานได้จริงหรือไม่ การสร้างตัวต้นแบบไม่ว่าจะใช้มือ หรือคอมพิวเตอร์สร้างขึ้นมาจะมี ประโยชน์อย่างมาก เพราะจะทาให้ลูกค้าเข้าถึงแนวคิดในการออกแบบของเราได้อย่างชัดเจน

ภาพ 5 ตัวต้นแบบออนไลน์ (Online Prototype) ที่มา https://techcrunch.com/2015/07/14/invision-prototyping-tool-lands-45-million-in-series-cled-by-accel/

ภาพ 6 ตัวต้นแบบกระดาษ (Paper Prototype) ที่มา http://usabilitygeek.com/paper-prototyping-as-a-usability-testing-technique/ 6.3 ขั้นที่ 3 การพัฒนา (Development) 6.3.1 เตรียมสื่อในการนาเสนอ 6.3.1.1 ข้อความ ควรจัดการพิมพ์ข้อความและบันทึกในรูปแบบไฟล์ Word หรือ Text เพื่อให้โปรแกรมเมอร์ สะดวกในการใช้งาน 6.3.1.2 ภาพและกราฟิก ทั้งภาพนิ่งและภาพเคลื่อนไหว ผู้รับผิดชอบต้องระวังเรื่องลิขสิทธิ์ หากเป็นไปได้ควร ถ่ายภาพหรือวาดขึ้นมาใหม่ เพื่อป้องกันปัญหา 6.3.1.3 เสียง ต้องจัดหาเสียงประเภทต่างๆ ทั้งเสียงบรรยาย เสียงดนตรี และเสียงประกอบ โดยบันทึก ขึน้ มาใหม่หรือจัดหามาอย่างถูกต้องลิขสิทธิ์ 6.3.1.4 วิดีโอ หากต้องทาการถ่ายทาวิดีโอขึ้นมาใหม่ ผู้รับผิดชอบต้ องเตรียมสคริปต์ อุปกรณ์ สถานที่ นักแสดงให้พร้อม หลังจากบันทึกแล้วก็ต้องนามาตัดต่อให้พอดีกับเวลที่กาหนด แล้วแปลงเป็น ไฟล์ที่เหมาะสมกับการประกอบในโปรแกรมมัลติมีเดีย

6.3.2 เตรียมกราฟิกที่ใช้ตกแต่งหน้าจอ ในขั้นตอนนี้ นักออกแบบกราฟิกจะต้องทาการสร้างกราฟิกหลักที่จะนาไปใช้ในหน้าจอ เช่น พืน้ หลังของหน้าจอ หน้าต่าง ปุ่มต่างๆ เป็นต้น 6.3.3 การเขียนโปรแกรม เป็นหน้าที่ของบุคคลที่มีความเชี่ยวชาญในการใช้โปรแกรมสร้างงานมัลติมีเดีย ในขั้นตอนนี้ ผู้เขียนโปรแกรมต้องนากราฟิก หน้าจอ ภาพนิ่ง ภาพเคลื่อนไหว วิดีโอ และเสียงที่ได้จัดเตรียมไว้มา ประกอบลงในโปรแกรม จนสมบูรณ์สวยงาม 6.3.4 ทดสอบการใช้งานเบือ้ งต้น ในขั้นตอนนี้ทีมงานผลิตทั้งหมดต้องทาการทดสอบการใช้งาน โดยร่วมกันหาข้อผิดพลาด (Bug) และท าการปรั บ ปรุ ง แก้ ไ ข จากนั้ น ท าการทดสอบการใช้ ง านอี ก ครั้ ง จนมั่ น ใจว่ า โปรแกรมไม่ มี ข้อผิดพลาดใดๆ 6.4 ขั้นที่ 4 การประเมินและปรับปรุง (Evaluation and Revise) 6.4.1 การประเมินคุณภาพโดยผู้เชี่ยวชาญ ควรให้ผเู้ ชี่ยวชาญมากกว่า 1 คนเป็นผู้ตรวจสอบ จากนั้นนาคาแนะนาของผู้เชี่ยวชาญมา ปรับปรุงแก้ไข ซึ่งมีแนวทางประเมินดังนี้ 6.4.1.1 การประเมินด้านเนื้อหา เช่น ความถูกต้อง ความสมบูรณ์ ความทันสมัย ปริมาณเนือ้ หา โครงสร้างและการแบ่ง หมวดหมู่เนื้อหา การใช้ภาษา เป็นต้น 6.4.1.2 การประเมินด้านสื่อ เช่น การออกแบบข้อความ ภาพ กราฟิก เสียง วิดีโอ การ จัดวางองค์ประกอบในหน้าจอ การออกแบบปุ่มควบคุม 6.4.2 การปรับปรุงและแก้ไข ควรวิเคราะห์ผลที่ได้จากการประเมินทั้งหมด โดยพิจารณาให้สอดคล้องและแตกต่างจากความ คิดเห็นของผู้เชี่ยวชาญ และความคิดเห็นจากกลุ่มตัวอย่าง เมื่อพบข้อบกพร่องแล้ว ทีมพัฒนาต้องระดม สมองเพื่อหาสาเหตุของปัญหาว่ามาจากขั้นตอนใดในกระบวนการพัฒนาทั้งหมด และมีแนวทางการ ปรับปรุงแก้ไข อุดช่องโหว่จุดนั้นอย่างไร จากนั้นจึงปรับปรุงแก้ไขเพื่อให้งานมีคุณภาพพอที่จะนาไปใช้ งานจริง

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

กิจกรรมภาคปฏิบัติ ใบงานที่ 6 1. วัตถุประสงค์ 1.1 เพื่อให้นิสิตฝึกการสร้างตัวแทนผู้ใช้ (Persona) เพื่อใช้เป็นเครื่องมือในการตัดสินใจทางด้าน การออกแบบงานมัลติมีเดีย 1.2 เพื่อให้นสิ ิตได้มปี ระสบการณ์ในการนาเสนอผลงาน และได้แลกเปลี่ยนความคิดเห็นร่วมกัน กันในชั้นเรียน 2. สาระสาคัญ เนือ้ หาในบทที่ 6 เกี่ยวข้องกับกระบวนการสร้างงานมัลติมีเดีย ซึ่งจะต้องคานึงถึงปัจจัยต่างๆที่ เกี่ยวข้อง ไม่ว่าจะเป็นกลุ่มเป้าหมาย ซึ่งจะต้องผ่านการวิเคราะห์และวางแผนอย่างดี ดังนัน้ กิจกรรมใน ใบงานที่ 6: การสร้างตัวตนผู้ใช้ (Persona) จึงเป็นการเสริมความเข้าใจ และกระตุ้นให้นิสิตได้นา ความรู้ในบทเรียนมาประยุกต์ใช้กับการออกแบบงานมัลติมีเดียให้มีประสิทธิภาพและตรงตามความ ต้องการของผู้ใช้ 3. วิธีการ สร้างตัวแทนผู้ใช้ (Persona) คือการสมมุตบิ ุคคลขึ้นมา ว่าผูใ้ ช้เป็นใคร เป็นคนอย่างไร เพื่อให้นกั ออกแบบสามารถมองภาพได้ชัดเจนขึน้ ทาให้ตัดสินใจทางด้านการออกแบบเพื่อผู้ใช้ได้ดขี นึ้ ให้นสิ ิตสร้างตัวแทนผู้ใช้งาน (Persona) มีประกอบด้วยข้อมูลต่อไปนี้ แล้วนาเสนอหน้าชั้นเรียน - รูปภาพ - กลัวอะไรที่สุด - ชื่อ และ ชื่อเล่น - ช่วงเวลาที่มีความสุขที่สุด - เพศ - สิ่งที่เคยทาแล้วรูส้ ึกแย่ที่สุด - อายุ - กาลังอ่านหนังสืออะไร - ที่อยู่ - ชอบฟังเพลงอะไร - อาชีพ - หนังที่ดูเรื่องล่าสุด - ประวัติ - ถ้ามีเงิน 3000 บาทอยากจะซือ้ อะไรที่สุด - ยี่หอ้ โทรศัพท์ที่ใช้ - เว็บไซต์ที่เข้าบ่อยที่สุด

ตัวอย่างการสร้างสร้างตัวแทนผู้ใช้ (Persona)

ชื่อ อายุ ที่อยู่ อาชีพ

นายสมคิด สมบูรณ์ (ยุน่ ) 23 ปี จ.เชียงราย นักออกแบบกราฟิก

ประวัติ นาย ยุน่ อายุ 23 ปี อาชีพ ฟรีแลนซ์ นักออกแบบกราฟิก และยังเป็นครูสอนเทคคอนโด้ ที่โรงเรียนศิลปะการ ใช้ก าลั ง ในวั น เสาร์ - อาทิ ต ย์ ยุ่น ชอบอ่า นหนั งสือ ประเภทข่าว เช่น มติชนรายสั ปดาห์ เขาชอบฟั ง เพลงเพื่อชีวิต โดยเฉพาะเพลงของคาราบาว นอกจากนี้ยุ่นยังชอบโหลดเพลงที่ชอบมาเก็บไว้ฟัง ในโทรศัพท์มือถือยี่ห้อHuawei ของเขาด้วย นอกจากฟัง เพลงแล้ ว Huaweiก็ คื อ มื อ ถื อ ทั่ ว ไปที่ เ ขาใช้ รั บ เข้ า -โทรออก และเล่ น ไลน์ ส่ ว นเว็ บ ไซต์ ที่ เ ขาชอบมากที่ สุ ด คื อ www.facebook.com งานอดิเรกที่ยุ่นชอบคือการไปออกกาลัง และหากมีเงินสัก3000 เขาคงจะอยากซื้อรองเท้ากีฬา คู่ใหม่ ช่วงเวลาที่เขามีความสุขที่สุดคือได้รับถ้วยรางวัลที่ไปแข่งกีฬาระดับจังหวัด หนังเรื่องล่าสุดที่เขาดูเรื่อง Pirates of the Caribbean 5 (2017) เขาคิดว่ามันสนุกมาก แต่สิ่งที่ยุ่น กลัวที่สุดในชีวิตคือผื่น และเขาไม่ชอบมีเรื่องกับ ใคร เพราะตอนเด็กเขาเคยต่อยกับเพื่อน และถูกครูทาโทษให้ทาความสะอาดห้องน้าโรงเรียน ซึ่งมันเป็นสิ่งที่เขาเคยทา แล้วรู้สกึ แย่ที่สุด

4. การวัดและประเมินผล ผูส้ อนตรวจสอบผลงานของนิสิต และประเมินผลงานตามเกณฑ์ดังนี้ 4.1 ส่งงานตามกาหนดเวลา (1 คะแนน) 4.2 ความครบถ้วนสมบูรณ์ (1 คะแนน) 4.3 การนาเสนอหน้าชั้นเรียน (1 คะแนน) 4.4 การนาความรูม้ าประยุกต์ใช้งาน (1 คะแนน) 4.5 การแสดงความคิดเห็นในชั้นเรียน (1 คะแนน) คะแนนกิจกรรมภาคปฎิบัติ ใบงานที่ 6 รวมเป็น 5 คะแนน

บทที่ 7 ระบบมัลติมีเดียและการออกแบบการกระทา/คาสั่ง

หัวข้อเนื้อหาประจาบท 1. ระบบมัลติมีเดีย 2. การออกแบบการกระทาและคาสั่ง 3. ลักษณะของการกระทาและคาสั่ง 4. วิธีการออกแบบการจัดวางคาสั่งและการตอบสนอง

วัตถุประสงค์ 1. สามารถอธิบายระบบมัลติมีเดียและการออกแบบการกระทา/คาสั่งได้ 2. สามารถนาความรู้มาเป็นแนวทางในการออกแบบงานมัลติมีเดียได้ เวลาเรียน สัปดาห์ที่ 11 กิจกรรมการเรียนการสอน 1. การบรรยาย 2. การอภิปรายและการซักถามเกี่ยวกับเนือ้ หาในบทเรียนร่วมกัน 3. กาหนดประเด็นปัญหาเพื่อศึกษาค้นคว้าเพิ่มเติม

7.1 ระบบมัลติมีเดีย 7.1.1 การนาเข้า(Input) การนาเข้า (Input) หมายถึง การนาเข้าข้อมูลทั้งที่อยู่ในรูปแบบของข้อความหรือตัวอักษร (Text) ภาพนิ่ง (Still Image) ภาพเคลื่อนไหว (Animation) เสียง (Sound) และวิดีโอ (Video) ผ่านทางอุปกรณ์ต่อ พ่ว งที่ท าหน้าที่นาสั ญ ญาณเข้าแล้ว ส่งต่อไปยั งเครื่องคอมพิวเตอร์เ พื่อจัดการกั บ ข้อมูลในรูป แบบ สัญญาณดิจิทัลต่อไป (Digital Camera) ก็สามารถเข้าสู่การประมวลผลได้ในทันที ในขณะที่อุปกรณ์ นาเข้าแบบอนาล็อก เช่น กล้องวิดีโอ (Video Camera) และเครื่องเล่นออดิโอ (Audio Player) จะต้องมี อุปกรณ์ต่อพ่วงที่เรียกว่า วิดีโอแคปเชอร์ (Video Capture) และซาวนด์การ์ด (Sound Card) ตามลาดับ เพื่อทาการแปลงสัญญาณอนาล็อกให้ไปเป็นสัญญาณดิจิทัลก่อนที่จะเข้าสู่ขั้นตอนการประมวลผล เช่นเดียวกับเครื่องโมเด็ม (Modem) ซึ่งเป็นอุปกรณ์นาเข้าเหมือนกันแต่สามารถแปลงสัญญาณได้ทั้ง แบบสัญญาณอนาล็อกและสัญญาณดิจทิ ัลในเครื่องเดียวกัน 7.1.2 การประมวลผล(Processing) การประมวลผล (Processing) หมายถึง การที่เครื่องพีซีทาการจัดการกับข้อมูลที่ได้มาจากการ นาเข้าในรูปแบบต่างๆ ซึ่งข้อมูลที่นามาเข้านั้นจะต้องอยู่ในรูปดิจิทัล ด้วยเหตุผลนี้ทาให้อุปกรณ์นาเข้า ข้อมูล (Input Devices) ต้องทาการแปลงข้อมูลให้เป็นดิจิทัลก่อนแล้วจึงส่งผ่านข้อมูลเหล่านั้นไปยังส่วน ที่ทาการประมวลผล ในขณะเดียวกันการส่งข้อมูลออกของเครื่องพีซีนั้นก็ต้องอยู่ในรูปของดิจิทัลด้วย เช่นกัน 7.1.3 การแสดงผล(Output) การแสดงผล (Output) หมายถึ ง การแสดงผลลัพธ์ จ ากการแปลงสัญ ญาณต้ นแบบไปเป็ น สั ญ ญาณที่ ส ามารถปรากฏบนอุ ป กรณ์ ป ลายทางได้ โดยอุ ป กรณ์ ดั ง กล่ า วจะต้ อ งต่ อ พ่ ว งเข้ า กั บ เครื่องพีซีด้วยได้แก่ อุปกรณ์แสดงผลแบบดิจิทัล เช่น จอภาพดิจิทัล (Digital Monitor) และเครื่องพิมพ์ เลเซอร์ (Laser Printer) เป็นต้น อุปกรณ์แสดงผลแบบอนาล็อกจะต้องมี อุปกรณ์แปลงสัญญาณดิจิทัล ให้ไปเป็นสัญญาณอนาล็อกก่อน เช่น เครื่องฉายโปรเจคเตอร์ (Projection TV) สาหรับการแสดงผลทางเสียงจะต้องใช้อุปกรณ์ออดิโอ โดยทาการเชื่อมต่อกับแผงวงจรเสียง หรือที่เรียกว่าซาวด์การ์ด (Sound Card) ซึ่งทาหน้าที่แปลงสัญญาณดิจิทัลไปเป็นสัญญาณอนาล็อก (Digital to Analog Converter) ส่วนประกอบอุปกรณ์แสดงผลประเภทเสียง ได้แก่ หูฟัง (Headphone) และลาโพง (Speaker)

7.1.4 การจัดเก็บข้อมูล(Storage) การจัดเก็บข้อมูล (Storage) หมายถึง การนาข้อมูลที่ผ่านกระบวนการทางานทั้งการนาเข้า การ ประมวลผลและการแสดงผลเรี ย บร้ อ ยแล้ ว มาท าการบัน ทึ ก ลงในอุ ป กรณ์ จั ดเก็ บ ข้ อมู ล (Storage Device) เพื่อให้สามารถนากลับมาใช้ได้เมื่อต้องการ สาหรับการบันทึกลงบนสื่อจัดเก็บข้อมูลชนิดต่างๆ เช่น เทป (Tape) แผ่นซีดี (CD ROM) และแผ่นดีวีดี (DVD) จาเป็นต้องจัดท าผ่านอุป กรณ์ที่สามารถ จัดเก็บข้อมูลลงบนหน่วยจัดเก็บแต่ละชนิดได้ ตัวอย่างเช่น กรณีที่ผู้ใช้ต้องการจัดเก็บข้อมูลลงบนแผ่น ซีดี จาเป็นต้องมีอุปกรณ์ในการเรียน หรือที่เรียกว่า “CD WRITER” เพื่อใช้ในการจัดเก็บข้อมูลดังกล่าว ด้วย การเก็บไฟล์เสียงไว้ในหน่วยจัดเก็บข้อมูลสารอง โดยสัญญาณดิจิทัลจากไฟล์เสียงเหล่านี้จะ ส่งกลับไปยังซาวนด์การ์ด เพื่อแปลงสัญญาณให้เป็นแบบอนาล็อก ทาให้สามารถได้ยินเสียงจากไฟล์ที่ ท าการน าเข้ า หรื อ บั น ทึ ก นั้ น ได้ ด้ ว ยอุ ป กรณ์ แ สดงผลทางเสี ย ง เช่ น ล าโพง หู ฟั ง ล าโพงภายนอก (External Speaker) ล าโพงภายนอก (External Speaker) เป็ น ส่ ว นส าคั ญ ที่ ส นั บ สนุ น ให้ มั ล ติ มี เ ดี ย คอมพิ ว เตอร์ สามารถเล่นเสียงระดับไฮไฟที่มีคุณภาพได้ นอกจากความสามารถในการจัดการด้านเสียงของซาวนด์ การ์ด แล้ว ปัจจุบันได้มีผู้ผลิตล าโพงภายนอกที่มีขีดความสามารถที่หลากหลาย นอกจากนี้ยั งเพิ่ม คุณภาพในหลายระดับด้วยกัน เช่น ระดับธรรมดา ระดับคุณภาพสูงที่ประกอบด้วยทั้งลาโพงเสียงแหลม ลาโพงเสียงกลางและลาโพงเสียงทุ้ม เป็นต้น คล้ายกับระบบเครื่องเสียงชั้นดีทั่วไป ลาโพงภายนอกจึง จัดว่าเป็นส่วนประกอบพื้นฐานที่จาเป็นสาหรับมัลติมีเดียพีซีเนื่องจากการถ่ายทอดเสียงที่ชัดเจนและ ต้องครอบคลุมย่านความถี่เสียงได้หลากหลาย จนกลายเป็นส่วนประกอบสาคัญของระบบมัลติมีเดียใน ยุคปัจจุบันที่ขาดไม่ได้ 7.2 การออกแบบการกระทาและคาสั่ง ผู้ ใ ช้ ส ามาถสั่ ง งานแอปพลิ เ คชั น ได้ 2 วิ ธี คื อ สั่ ง งานด้ ว ยการกระท า ( Action) และค าสั่ ง (Command) เพื่อให้แอปพลิเคชันทางานตามคาสั่งและตอบสนองเป็นผลลัพธ์กลับมายังผู้ใ ช้ หน้าที่ของ นัก ออกแบบนอกจากการจั ด โครงสร้ า งเนื้ อหาและโครงร่ า งหน้ าแอปพลิเ คชั นแล้ว ยั งรวมถึง การ ออกแบบการกระทาและการกาหนดรูปแบบคาสั่ง ตลอดจนการจัดวางคาสั่งในตาแหน่งที่เหมาะสม ซึ่ง การกระทาและคาสั่งของแอปพลิเคชันมีหลายลักษณะ แบ่งได้ดังนี้ - การกระทา ได้แก่ Double Click, Drag and Drop, Key Action และ Type Command - คาสั่ง ได้แก่ Button, Menu Bar, Pop-up Menu, Toolbars, Link และ Action Panel

7.3 ลักษณะของการกระทาและคาสั่ง 7.3.1 ลักษณะของการกระทา - Double Click ส่วนใหญ่ใช้ในการเรียกใช้งานหรือเปิดแอปพลิเคชันขึน้ มา - Drag and Drop

เป็นการควบคุ มการเคลื่อ นที่ ขององค์ป ระกอบใดๆ โดยการกดเมาส์ ค้ า งที่ องค์ป ระกอบนั้นแล้วลากเคลื่อนย้ายไปในทิศทางที่ผู้ใช้ต้องการ และปล่อย เมาส์ เช่น การเคลื่อนย้ายไฟล์ที่ต้องการลบทิง้ ลงใน Recycle bin

- Keyboard Action เป็นการกาหนดคีย์ลัดต่างๆ ที่ใช้คีย์บอร์ดเป็นตัวดาเนินการสาหรับเรียกใช้งาน ฟังก์ชั่นหรือคาสั่งต่างๆ การกระทานี้จะช่วยให้ผู้ใช้ที่ถนัดการใช้งานคีย์บ อร์ด ทางานได้ง่ายและเร็วขึน้ โดยไม่ต้องสลับไปใช้งานเมาส์ - Type Command เป็ น การเรี ย กใช้ ฟั ง ก์ ชั่ น หรื อ ค าสั่ ง ด้ ว ยการพิ ม พ์ ข้ อ ความที่ ก าหนดไ ว้ ด้ ว ย คีย์บอร์ด 7.3.2 ลักษณะของคาสั่ง - Button โดยทั่วไปปุ่มคาสั่งจะมีขนาดที่สังเกตได้ง่าย และมีข้อความสั้นๆ แสดงถึง หน้ า ที่ ข องปุ่ ม ค าสั่ ง นั้ น ในหน้ า แอปพลิ เ คชั น อาจมี ปุ่ ม ค าสั่ ง ประเภทนี้อยู่ รวมกั นเป็นกลุ่มตามการใช้งาน ซึ่งจะช่วยให้ผู้เ ริ่มต้นใช้งานแอปพลิเคชั น สามารถใช้งานได้สะดวกขึ้น - Menu bar

เป็นคาสั่งบรรจุรายการตามกลุ่มคาสั่งการใช้งาน โดยแสดงแถบรายการใน แนวนอน แต่ละเมนูจะประกอบด้วยคาสั่งที่จัดให้อยู่ในกลุ่มเดียวกัน

- Pop-up Menu

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

- Drop-down Menu เป็นรายการที่แสดงข้อมูลคาสั่งทั้งหมดที่อยู่ในรายการเมื่อผู้ใช้กดที่ปุ่มลูกศร ด้านข้างรายการ ผูใ้ ช้สามารถคลิกเลือกข้อมูลหรือคาสั่งที่ตอ้ งการได้

100

- Toolbar

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

- Link

เป็นคาสั่งใช้เชื่อมโยงไปยังหน้าอื่นหรือส่วนอื่นของมัลติมเี ดีย

- Action Panel

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

7.4 วิธีการออกแบบการจัดวางคาสั่งและการตอบสนอง 7.4.1 จัดกลุ่มคาสั่ง เป็ น วิ ธี ก ารจั ด ให้ ค าสั่ งต่ า งๆ ที่ มี ก ารท างานคล้ า ยๆ กั น หรื อสอดคล้ อ งกั น รวมอยู่ ใ นกลุ่ม เดี ย วกั น เช่ น ปุ่ ม Ok, ปุ่ ม Cancel, ปุ่ ม Close สามารถจั ด อยู่ ใ นกลุ่ ม เดี ย วกั น ได้ วิ ธี ก ารนี้ จ ะช่ ว ยให้ สามารถจัดองค์ประกอบต่างๆได้ง่ายและดูเป็นระเบียบ อีกทั้งยังช่วยให้ผู้ใช้สามารถใช้งานได้ง่ายและ สะดวกมากขึน้

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

101

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

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

7.4.3 ปุ่มคาสั่งสิน้ สุดการใช้งาน ปุ่มคาสั่งสิ้นสุดการใช้งานที่พบเห็นได้บ่อย เช่น ปุ่ม Done หรือ Finish เพื่อแสดงการเสร็จสิ้น การทางาน / ปุ่ม Send เพื่อยืนยันการส่งข้อความ / ปุ่ม Buy เพื่อยืนยันการซื้อสินค้าที่อยู่ในรายการ สั่งซื้อ

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

102

7.4.4 คาสั่งที่ใช้ในบางโอกาส คาสั่งในรูปแบบนี้จะสามารถใช้งานได้ (Enable) ก็ต่อเมื่อผู้ใช้เลือกองค์ประกอบหรือคาสั่ง ที่ เกี่ยวข้องกันไว้ หากผู้ใช้มีการใช้งานหรือสร้างชิ้นงานขึ้น โดยไม่มีส่วนเกี่ยวข้องกับคาสั่งดังกล่าว คาสั่ง นั้นจะไม่สามารถเรียกใช้งานได้ (Disable) ข้อแนะนาในการออกแบบ - คาสั่งในรูปแบบนี้ควรตอบสนองและสามารถใช้งานได้ เฉพาะตอนที่ผู้ใช้ทาตามเงื่อนไขหรือ สร้างงานมาถึงจุดที่เกี่ยวข้องกับคาสั่งนี้เท่านัน้ - อาจนาคาสั่งในรูปแบบนี้มาประยุกต์ใช้ร่วมกัน โดยเรียกใช้งานได้ต่อเนื่องกันไปอย่างเป็นลาดับ และสามารถกาหนดทิศทางในการใช้งานได้ ทาให้ได้ผลลัพธ์ตามที่ผู้ใช้ต้องการหรือตามที่ผู้ใช้ เลือกจากคาสั่งดังกล่าว 7.4.5 คาสั่งที่แสดงตัวอย่างได้ เป็นคาสั่งที่สามารถแสดงตัวอย่างของงานที่ผู้ใช้สร้างขึ้นได้ เพื่อดูว่าผลลัพธ์ที่ได้ตรงตามผู้ใช้ ต้องการหรือไม่โดยอาจแสดงตัวอย่างเพียงบางส่วนหรือทั้งหมดของงานที่สร้างขึ้นได้ ช่วยให้ผู้ใช้ทราบ ถึงผลลัพธ์ได้ก่อนทางาน อีกทั้งยังช่วยให้ผู้ใช้สามารถตรวจสอบข้อผิดพลาดที่อาจเกิดขึ้นและสามารถ แก้ไขได้อย่างรวดเร็ว

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

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

103

7.5 สรุป ระบบมัลติมีเ ดีย หมายถึง การนาองค์ป ระกอบของสื่อชนิดต่างๆ มาผสมผสานเข้าด้วยกั น เพื่ อ ให้ ส ามารถท างานได้ อ ย่ า งมี ป ระสิ ท ธิ ภ าพ ประกอบด้ ว ย ตั ว อั ก ษร ( Text) ภาพนิ่ ง (Image) ภาพเคลื่อนไหวหรือแอนิเมชั่น (Animation) เสียง (Sound) และวิดีโอ (Video) โดยผ่านกระบวนการทาง ระบบคอมพิวเตอร์ ได้แก่ การนาเข้า (Input) การประมวล (Processing) การแสดงผลลัพธ์ (Output) และ การจัดเก็บข้อมูล(Storage) ตามลาดับซึ่งระบบทั้งหมดจะถูกควบคุมผ่านทางเครื่องพีซี ด้วยการบริหาร จัดการของซอฟต์แวร์ที่ติดตั้งไว้ ในการออกแบบระบบมัลติมี เดียนักออกแบบจะต้องมีความเข้าใจใน ลักษณะของกระทา และคาสั่ง เพื่อให้สามารถออกแบบงานได้อย่างมีประสิทธิภาพ

104

กิจกรรมภาคปฏิบัติ ใบงานที่ 7 1. วัตถุประสงค์ 1.1 เพื่อให้นสิ ิตฝึกออกแบบงานมัลติมีเดียด้วยการสร้างต้นแบบกระดาษ (Paper Prototype) 1.2 เพื่อให้นสิ ิตได้มปี ระสบการณ์ในการนาเสนอผลงาน และได้แลกเปลี่ยนความคิดเห็นร่วมกัน กันในชั้นเรียน 2. สาระสาคัญ เนื้อหาในบทที่ 7 เกี่ยวข้องกับระบบมัลติมีเดียและการออกแบบการกระทา/คาสั่ง โดยจะการ ออกแบบแอปพลิเ คชันเป็นหลั ก ดั งนั้น กิจกรรมใน ใบงานที่ 7: การสร้ างต้นแบบจากกระดาษ (Paper Prototype) จึ ง เป็ น การเสริ ม ความเข้ า ใจ และกระตุ้ น ให้ นิ สิ ต ได้ น าความรู้ ใ นบทเรี ย นมา ประยุกต์ใช้กับการออกแบบงานมัลติมีเดียให้มปี ระสิทธิภาพและตรงตามความต้องการของผู้ใช้ 3. วิธีการ ให้นสิ ิตกลุ่มละ 3 คน ออกแบบหน้าอินเตอร์เฟสของแอปพลิเคชัน โดยการใช้กระดาษ, กรรไกร , กาว และปากกาเน้นข้อความ ในการทา จากนั้นนาต้นแบบกระดาษ(Paper Prototype) ที่สร้างขึ้นให้ เพื่อนคนอื่นลองแสดงการใช้งาน โดยอธิบายถึงสิ่งที่ผู้ใช้จะได้พบขณะคลิกปุ่มและลิงค์ต่างๆ ในหน้านั้น จากนั้นนาข้อมูลจากการแสดงความคิดเห็นของเพื่อนคนนั้นมาปรับปรุงแนวคิดก่อนจะลงมือปฏิบัติการ จริงในคอมพิวเตอร์ ตัวอย่าง การทาต้นแบบกระดาษ (Paper Prototype)

ภาพ 1 แสดงการทาต้นแบบกระดาษ (Paper Prototype) ที่มา https://www.uxpin.com/studio/blog/what-is-a-prototype-a-guide-to-functional-ux/

105

ภาพ 2 แสดงการใช้งานต้นแบบกระดาษ (Paper Prototype) ที่มา https://www.youtube.com/watch?v=yafaGNFu8Eg 4. การวัดและประเมินผล ผูส้ อนตรวจสอบผลงานของนิสิต และประเมินผลงานตามเกณฑ์ดังนี้ 4.1 ส่งงานตามกาหนดเวลา (1 คะแนน) 4.2 การแสดงความคิดเห็นในชั้นเรียน (1 คะแนน) 4.3 ความครบถ้วนสมบูรณ์ของงาน (1 คะแนน) 4.4 การนาความรูม้ าประยุกต์ใช้งาน (1 คะแนน) 4.5 รับผิดชอบ ทางานเป็นทีม (1 คะแนน) คะแนนกิจกรรมภาคปฎิบัติ ใบงานที่ 7 รวมเป็น 5 คะแนน

106

บทที่ 8 เทคโนโลยีมัลติมีเดีย หัวข้อเนื้อหาประจาบท 1. เทคโนโลยีตัวอักษรและข้อความ (Typography and Text) 2. 3. 4. 5.

เทคโนโลยีภาพกราฟิก (Graphics) เทคโนโลยีเสียง (Sound) เทคโนโลยีวิดีโอ (Video) เทคโนโลยีแอนิเมชัน (Animation)

วัตถุประสงค์ 1. สามารถอธิบายเทคโนโลยีมัลติมีเดียได้ 2. สามารถนาความรู้มาเป็นแนวทางในการออกแบบงานมัลติมีเดียได้ เวลาเรียน สัปดาห์ที่ 12 -13 กิจกรรมการเรียนการสอน 1. การบรรยาย 2. การอภิปรายและการซักถามเกี่ยวกับเนือ้ หาในบทเรียนร่วมกัน 3. กาหนดประเด็นปัญหาเพื่อศึกษาค้นคว้าเพิ่มเติม

107

8.1 เทคโนโลยีตัวอักษรและข้อความ (Typography and Text) 8.1.1 อักขระ (Font) ปัจจุบันมีการประยุกต์ใช้ข้อความและตัวอักษรเป็นสื่อกลางในการสื่อสารโดยใช้คอมพิวเตอร์ ดาเนินการด้วยกระบวนการเรียบเรียง ประมวลผล จัดเก็บ นาเสนอ รวมทั้งนามาใช้งาน อย่างที่เห็น ชัดเจนคือสื่อสิ่งพิมพ์ ข้อความที่เป็นเท็กซ์ (Text messaging) ในอุปกรณ์สื่อสารต่างๆ รวมทั้งการนา ตัว อัก ษรมาใช้เ ผยแพร่ ผ่ านทางเว็ บ ไซต์นั้ น ปัญ หาที่เ กิดอย่ า งหนึ่ งคื อ การแสดงผลตัว อัก ษรหรื อ ข้อความไม่ได้ของคอมพิวเตอร์ปลายทาง เนื่องจากรูปแบบและคุณลักษณะของอักขระมีความแตกต่าง กันระหว่างระบบคอมพิวเตอร์ที่สร้างข้อความ และเครื่องที่เปิดอ่าน ปัญหานี้แก้ได้โดยการใช้มาตรฐาน อักขระแบบเดียวกัน ซึ่งปัจจุบันมาตรฐานของตัวอักขระที่ใช้กันแพร่หลายมี 2 ชนิด ได้แก่ แอสกี (ASCII) และยูนิโค้ด (Unicode) 8.1.1.1 แอสกี (ASCII) มาตรฐานอั ก ขระแอสกี ( ASCII ย่ อ มาจาก American Standard for Information Interchange) ได้ พั ฒ นาขึ้ น มาในช่ ว งปี ค .ศ. 1970 โดยเริ่ ม ต้ น แอสกี ใ ช้ ร หั ส ขนาด 7 บิ ต ซึ่ ง สามารถรองรับตัวอักษรภาษาอังกฤษทั้งตัวพิมพ์เล็ก -พิมพ์ใหญ่ ตัวเลข สัญลักษณ์พิเศษต่างๆ ได้จานวน 128 ตัว ตัวอักษรแอสกี 7 สามารถใช้ส่อื สารได้ในพืน้ ที่ของสหรัฐอเมริกา แต่ปัญหาที่ เกิดขึ้นคือ แสดงผลไม่ถูกต้องหากส่งไปยังประเทศอื่นๆ สาหรับการใช้มาตรฐานอักขระแอสกีใน ปัจจุบัน ให้สามารถรองรับตัวอักษรทุกๆ ภาษาทั่วโลก จึงมีการพัฒนาให้ใช้แอสกีขนาด 16 บิต 24 บิต และ 32 บิต 8.1.1.2 ยูนิโค้ด (Unicode) ยู นิโ ค้ด เป็นรหัส ที่พั ฒนาขึ้นมาให้ใ ช้ งานในระบบคอมพิวเตอร์ใ นหลายชนชาติ โดย องค์กรที่เป็นผู้พัฒนาคือ องค์กรกาหนดมาตรฐานสากล หรือ ISO (International Organization for Standard) รองรับอักขระและสัญลักษณ์พิเศษต่างๆในแต่ละภาษา โดยใช้ขนาด 16 บิต 8.1.2 รูปแบบตัวอักษร รูปแบบของตัวอักษร แบ่งได้หลายแบบ ดังนี้ 8.1.2.1 แบ่งตามแบบมีเชิง(Serif) และแบบไม่มเี ชิง(Sans Serif) ตัวอักษรที่มีรูปแบบมีเชิง(Serif) หมายถึง ตัวอักษรที่มีเส้นหรือขีดสั้นๆ ที่ปลายสุดของ ตัวอักษรตัวนั้นๆ แต่ในขณะที่แบบไม่มีเชิง (Sans Serif) จะไม่มีเส้นขีดที่ปลายของตัวอักษร (คา ว่า Sans หมายถึง ไม่ม)ี ดังภาพ 1

108

ภาพ 1 แสดงตัวอักษรที่มีรูปแบบSerif (ซ้าย) และแบบSans-Serif (ขวา) ที่มา http://shawnhatjes.com/know-serif-vs-sans-serif/ 8.1.2.2 แบ่งตามความความกว้าง (Set width) ความกว้างของตัวอักษร หมายถึง ตัวอักษรหนึ่งตัวที่แสดงออกทางหน้าจอ มีอยู่ 2 ลักษณะ ได้แก่ ตัวอักษรที่มีขนาดความกว้างของพื้ นที่แสดงผลของทุกตัวเท่ากัน (Monospace) และขนาดช่องว่างตามสัดส่วนของอักษร(Proportional) เช่น ตัว m มีความกว้างกว่า ตัว i ดัง ภาพ 2

ภาพ 2 แสดงตัวอักษรที่มรี ูปแบบ Monospace (บน) และแบบ Proportional (ล่าง) ที่มา https://creativepro.com/single-or-double-spaces-between-sentences/ 8.2 เทคโนโลยีภาพกราฟิก (Graphics) 8.2.1 ประเภทของภาพกราฟิก แบ่งได้หลายแบบ ดังนี้ 8.2.1.1 แบ่งตามลักษณะของเส้นและสี - ภาพลายเส้น (Line art) เป็นลักษณะของภาพวาด (Drawing) ประกอบด้วย ลายเส้นเรียบๆ ไม่มีการสร้างความแตกต่างของระดับสี - ภาพระดับสีต่อเนื่อง (Continuous – tone image) เป็นรูปภาพที่มีสีสันระดับ ต่างๆ เช่น ภาพถ่าย เป็นต้น หรือภาพ Gray scale ที่ไล่ระดับสีขาว-สีดา

109

8.2.1.2 แบ่งตามมิติของภาพ - ภาพ 2 มิติ (2 Dimensions Image) เป็นภาพที่สร้างด้วยโปรแกรมประยุกต์ใน คอมพิว เตอร์โ ดยสร้างภาพรูป ทรงเราขาคณิต เช่น เส้นวงกลม วงรี และรูป หลาย เหลี่ยม แล้วกาหนดสีลงไปในรูปภาพที่สร้างขึ้น - ภาพ 3 มิติ (3 Dimension Image) เป็นภาพที่เกิดจากการสร้างด้วยโปรแกรม ประยุกต์ในคอมพิวเตอร์เช่นเดียวกัน แต่การสร้างภาพชนิดนี้จะสร้างในแนวแกน X Y และ Z (แนวตั้ง แนวนอน และแนวลึก ตามลาดับ) ภาพที่สร้างเกิดเป็นมิติทาให้สมจริง เหมือนธรรมชาติมากกว่าภาพ 2 มิติ 8.2.1.3 แบ่งตามลักษณะการสร้างภาพ - ภาพเวกเตอร์ (Vector graphic) เป็นภาพที่ประกอบไปด้วยเส้นตรง เส้นโค้ง ที่เกิดจากการอ้างอิงความสัมพันธ์ทางคณิตศาสตร์ ซึ่งภาพที่สร้างขึ้นมาจะมีความเป็น อิสระต่อกัน เมื่อมีการขยายภาพความละเอียดของภาพจะไม่ลดลง และยังคงความ คมชัดไว้เหมือนเดิมไม่เปลี่ยนแปลง ภาพลักษณะนี้ เหมาะกับการสร้างภาพกราฟิกที่ เป็นสีพ้ืนๆ ไม่มีการไล่โทนสี และการออกแบบต่างๆ - ภาพบิตแมป (Bitmap) หรือภาพกราฟิกแบบราสเตอร์ (Raster) เป็นภาพที่ เกิดจากการเรียงตัวของจุดภาพ (Pixel) หลากหลายสี ในการสร้างภาพกราฟิกชนิดนี้ จะต้ อ งมี ก ารก าหนดจ านวนจุ ด ภาพให้ กั บ ภาพที่ต้ อ งการสร้ า ง ถ้ า ก าหนดจุ ด ภาพ จานวนน้อยเมื่อทาการขยายภาพให้มีขนาดใหญ่จะทาให้มองเห็นรายละเอียดภาพที่ หยาบ เกิดการแตกของภาพ มองเห็นจุดภาพที่มีลักษณะสี่เหลี่ยมชัดเจนมากขึ้น แต่ถ้า กาหนดจานวนจุดภาพมากขึน้ ก็จะทาให้ขนาดของภาพที่สร้างมีขนาดใหญ่มากขึน้ ภาพ ลักษณะนี้ เหมาะกับการตกแต่งและแก้ไขภาพ เพราะสามารถทาได้ง่ายและสวยงาม เช่น การ Retouching ภาพคนแก่ให้หนุม่ ขึน้ เป็นต้น

ภาพ3 แสดงลักษณะภาพแบบBitmap (ซ้าย) และแบบ Vector(ขวา) ที่มา http://www.lefang.info/mainpost/bitmap-vs-vector.html

110

8.2.2 คุณภาพของภาพและขนาดไฟล์ภาพ 8.2.2.1 คุณภาพของภาพ (Image Quality) ความละเอียดของภาพจะพิจารณาจาก 2 อย่าง คือ - ความละเอียดของสี (Color resolution) ที่จะแสดงได้ในแต่ละพิกเซล หมายถึงจานวนของบิตสีที่บรรจุอยู่ในแต่ละพิกเซล ภาพที่มีบิตสีมากขึ้นจะ สามารถแสดงสีในภาพได้มากขึ้นด้วย - ความละเอียดของภาพ (Image resolution) หมายถึง จานวนพิกเซล แต่ละภาพ โดยปกติแล้วจะวัดโดยจานวนพิกเซลต่อหนึ่งนิ้ว (pixel per inch: ppi) ภาพที่มีจานวน ppi สูง จะมีความชัดเจนกว่าภาพที่มีจานวน ppi ต่า แต่ ปกติแล้วจอภาพสาหรับแสดงผลทั่วไปจะแสดงเพียง 72 ppi เท่านั้น 8.2.2.2 ขนาดของไฟล์ภาพ (Image Size) เราจะสังสัยว่าทาไมไฟล์ภาพที่เราได้มามีขนาดกว้างและยาวเท่ากัน แต่ขนาดของไฟล์ ภาพไม่เท่ากัน ปัจจัยที่ส่งผลต่อขนาดของไฟล์รูปภาพประกอบด้วย ขนาด และความละเอียด ของสี เราสามารถคานวณหาขนาดของไฟล์ภาพเบือ้ งต้นได้โดยใช้สูตร ขนาดไฟล์ภาพ = กว้าง x ยาว x บิตสี 8 โดยที่ กว้างและยาว เป็นขนาดของรูปภาพมีหน่วยเป็น พิกเซล บิตสี หมายถึง ความละเอียดของสี มีหน่วยเป็น บิต ขนาดของไฟล์ ที่คานวณได้จะมีหน่วยเป็น ไบต์ (byte) นอกจากนี้ หากเราใช้โปรแกรม Adobe Photoshop เพื่อสร้างภาพใหม่ขึ้นมา โปรแกรม นี้จะคานวณขนาดของไฟล์เบือ้ งต้นให้เราทราบเพื่อตัดสินใจว่าจะกาหนดขนาดภาพและจานวน บิตสีตามที่เราต้องการหรือไม่ ดังภาพ 4

111

ภาพ 4 แสดงการคานวณขนาดของไฟล์ภาพด้วยโปรแกรมPhotoshop 8.2.3 สีในรูปภาพ (color) 8.2.3.1 HSB (Hue, Saturation, Brightness) เป็นแสงสีที่ตอบสนองการมองเห็นของสายตามนุษย์

ภาพ 5 แสดงระบบสี HSB ที่มา http://montfort-littleidea.blogspot.com/p/6.html Hue

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

112

Saturation คือ ความสดหรือความอิ่มตัวของสี หรือ คือสัดส่วนของสีเทาที่มีอยู่ใน สี นั้ น โดยค่ า ความสดของสี จ ะเริ่ ม ที่ 0% ถึ ง 100% ถ้ า ก าหนด Saturation ที่ 0% สีจะมีความสดน้อย แต่ถ้าก าหนดที่ 100% สีจะมี ความสดมาก (ไม่ มี สี เ ทาเลย หรื อ คื อ สี ที่ มี ค วามอิ่ ม ตั ว เต็ ม ที่ ) Saturation เป็ น การแสดงแบบสั ม พั ท ธ์ ข องแสงที่ ม องเห็ น จาก แหล่งกาเนิด การเพิ่ม Saturation สีจะมีความบริสุทธิ์มากขึ้น Brightness คือระดับความสว่างของสี โดยค่าความสว่างของสีจะเริ่มที่ 0% ถึง 100% ถ้ า ก าหนดที่ 0% ความสว่ า งจะน้ อ ยซึ่ ง จะเป็ น สี ด า แต่ ถ้ า กาหนดที่ 100% สีจะมีความสว่างมากที่สุด Brightness เป็นการแสดง ความสั ม พั น ธ์ ข องความหนาแน่ น จากพลั ง งานของแหล่ ง ก าเนิ ดที่ มองเห็นได้ และสามารถค่าเป็นพลังงานรวม หรือเป็นความสู ง ของ คลื่นที่มีความหนาแน่นสูงในสีแบบ RGB ความสูงของคลื่นของสีแดง เขียว และน้าเงิน มีช่วงจากร้อยละ 0 ถึง 100 ของความสดใสเต็มที่ ใน ระดับนี้สามารถนาเสนอโดยเลขฐาน 10 จาก 0 ถึง 255 หรือเลขฐาน 16 จาก 00 ถึง FF 8.2.3.2 RGB (Red, Green, Blue) เป็นแสงสีพื้นฐานที่ใช้งานกับจอภาพ ทั้งจอคอมพิวเตอร์ และLCD

ภาพ 6 แสดงระบบสี RGB ที่มา http://montfort-littleidea.blogspot.com/p/6.html

113

ตามหลักการมองเห็นสีของเครื่องคอมพิวเตอร์ RGB ย่อมาจาก Red (สีแดง), Green (สี เขีย ว) และ Blue (สีน้าเงิน) โดยการใช้สัดส่วนของสี 3 สีต่างกั น จะท าให้เ กิดสีต่างๆ ได้อีก มากมาย ผู้ใช้สีสามารถกาหนดสีได้ต่างๆ มากมาย โดยใช้ตัวอักษรปะปนกันไปมากกว่า 16 ล้านรูปแบบ ซึ่งชุดรหัสดังกล่าวจะถูกแปลงเป็นสีตา่ งๆ ด้วยกฎการใช้ กล่าวคือ จะใช้ตัวเลขใดๆ ก็ได้ 0-9 จานวนไม่เกิน 6 ตัว สามารถมีอักษรภาษาอังกฤษผสมด้วยได้ ซึ่งจะใช้ได้ตงั้ แต่ A-BC-D-E-F เท่านั้ น นับ ตั้งแต่ตัว G ขึ้นไปจะไม่สามารถประเมิ น ผลได้ สี ที่ใ ช้ ใ นเว็ บ ไซต์ ตาม มาตรฐานของสี มีหลักการอ้างอิงถึงในลักษณะสองแบบ คือ อ้างอิงตามชื่อสีมาตรฐานใน ภาษาอังกฤษ และรหัสสีในเลขฐานสิบหก 8.2.3.3 LAB เป็นมาตรฐานการรองรับแสงสีทุกมาตรฐาน

ภาพ 7 แสดงระบบสีLAB ที่มา http://montfort-littleidea.blogspot.com/p/6.html ตามมาตรฐานของ CIE (Commission Internationale d’Eclarirage) เป็นค่าสีที่ถูกกาหนด ขึ้นให้เป็นมาตรฐานการวัดสีทุกรูปแบบ ครอบคลุมทุกสีใน RGB และ CMYK (รูปที่ 32) และใช้ กับสีที่เกิดจากอุปกรณ์ทุกอย่าง ไม่ว่าจะเป็นจอคอมพิวเตอร์ , เครื่องพิมพ์, เครื่องสแกน และ อื่นๆ จึงเป็นระบบสีที่ไม่ขึ้นกับอุปกรณ์ใด ๆ (Device Independent) เป็นโหมดสีที่มีความเหมือน จริ ง ที่ สุ ด ส าหรั บ งานพิ ม พ์ ที่ เ ป็ น Photo CD หรื อ ภาพที่ ต้ อ งการใช้ ง านระหว่ า ง ระบบ คอมพิว เตอร์ที่แตกต่างกั น เช่น Windows ไปยั ง Mac โดยแบ่งออกเป็น 3 ส่วนคือ “L” หรือ Luminance เป็นการกาหนดความสว่างซึ่งมีค่าตั้งแต่ 0 ถึง 100 ถ้ากาหนดที่ 0 จะกลายเป็นสี ดา แต่ถ้ากาหนดที่ 100 จะกลายเป็นสีขาว, “A” เป็นค่าของสีที่ไล่จากสีเขียวไปสีแดง และ“B” เป็นค่าของสีที่ไล่จากสีนาเงิ ้ นไปสีเหลือง

114

8.2.3.4 CMYK (Cyan, Magenta, Yellow, black) เป็นแสงสีที่เหมาะสมกับงานสิ่งพิมพ์

ภาพ 8 แสดงระบบสีCMYK ที่มา http://montfort-littleidea.blogspot.com/p/6.html ตามหลักการแสดงสีของเครื่องพิมพ์ CMYK ย่อมาจาก Cyan (สีฟ้าอมเขียว), Magenta (สีม่วงแดง), Yellow (สีเหลือง)และ Key (สีดา) (รูปที่ 29) การผสมสีจะเกิดจากการผสมของ เม็ดสีเหล่านีใ้ นปริมาณต่างๆ คิดเป็น % ของปริมาณเม็ดสี ซึ่งกาหนดเป็น 10-20-30-40-5060-70-80-90 จนถึง 100 % นามาใช้ในการพิมพ์สีต่าง ๆ เป็นระบบสีที่ใช้กับเครื่องพิมพ์ที่ พิมพ์ออกทางกระดาษหรือวัสดุผิวเรียบอื่นๆ 8.2.4 ชนิดของไฟล์ภาพ (Image File Formats) 8.2.4.1 ไฟล์ภาพ JPEG มาจากค าว่ า Joint Photographic Experts Group นามสกุ ลของไฟล์ รูป แบบนี้คื อ .jpg หรือ .jpeg เป็นไฟล์ที่ถูกสร้างขึน้ มาเพื่อบีบอัดข้อมูลภาพเพื่อให้มีขนาดกะทัดรัด นิยมนาใช้งาน ในระบบอินเทอร์เน็ต เพราะไฟล์มีขนาดเล็ก สามารถดาวน์ โหลดได้รวดเร็ว โดยให้รายละเอียด ของภาพสูง เพราะ JPEG สามารถเก็บภาพสีได้สูงถึง 16.7 ล้านสี ภาพจึงมีความคมชัดสูงและมี สีสั นมาก เนื่องจากเป็นไฟล์ที่ไ ด้รับ ความนิย มมาก จึงสามารถเรีย กดูไ ฟล์ภาพสกุ ลนี้ไ ด้ใ น โปรแกรมแสดงภาพกราฟิกทุกตัว แต่ข้อด้อยของไฟล์ภาพชนิดนี้คือ ไม่ สามารถทาให้พื้นที่ของ ภาพเป็นแบบโปร่งใสได้ (Transparent/Opacity)

115

8.2.4.2 ไฟล์ภาพ TIFF มาจากคาว่า Tagged Image File Format ของไฟล์รูปแบบนี้คือ .tiff เป็นไฟล์กราฟิกที่ สร้างมาเพื่อโปรแกรมประเภทจัดหน้าหนังสือ มีรูปแบบที่ใช้เก็บภาพพร้อมรายละเอียดต่างๆ เช่น เลเยอร์ (Layer) และ โหมดภาพต่างๆ ตลอดจนข้อมูลประกอบอื่นๆ ตามต้นฉบับเดิมของ ภาพ เหมาะสมต่อการเก็บบันทึกภาพต้นฉบับ และภาพสาหรับใช้ประกอบการสร้างสื่อสิ่งพิมพ์ ข้อดีของไฟล์TIFF คือ สามารถใช้ได้กับโปรแกรมกราฟิกทุกประเภท และสามารถใช้ได้ในระบบ คอมพิวเตอร์หลายๆ ระบบ เช่น ระบบ PC และ Macintosh เป็นต้น อย่างไรก็ตาม ไฟล์ภาพชนิด นีจ้ ะมีขนาดใหญ่ เพราะต้องเก็บรายละเอียดความคมชัดไว้สูง 8.2.4.3 ไฟล์ภาพ GIF มาจากค าว่ า Graphics Interchange Format นามสกุ ล ไฟล์ คื อ .gif เป็ น ไฟล์ ก ราฟิ ก มาตรฐานสาหรับระบบอินเทอร์เน็ต เพราะไฟล์ที่มขี นาดเล็ก แต่จานวนสีและความละเอียดของ ภาพไม่สูงมากนักคือ แสดงผลสีได้เพียง 256 สี แต่จุดเด่นของไฟล์ชนิดนี้คือสามารถมีพื้นแบบ โปร่งใส (Transparent/Opacity) นอกจากนี้ยังสามารถนาเสนอภาพแบบภาพเคลื่อนไหว (GIF Animation) โดยนาเอาไฟล์ภาพหลายๆ ไฟล์มารวมกั นและนาเสนอภาพเหล่านั้นโดยอาศั ย หลักการหน่วงเวลา จนทาให้เกิดลักษณะภาพเคลื่อนไหว 8.2.4.4 ไฟล์ภาพ PNG มาจากค าว่ า Portable Network Graphics นามสุ ก ลของไฟล์ รู ป แบบนี้ คื อ .png เป็ น กราฟิกไฟล์รูปแบบล่าสุดในการนาเสนอภาพบนระบบอินเทอร์เน็ต มีความคมชัดสูง เป็นการ รวมเอาคุณสมบัติที่โดดเด่นของ JPEG กับ GIF มาใช้ คือสามารถเลือกระดับสีได้ถึง 16.7 ล้านสี และโปร่งใสได้(Transparent/Opacity) อย่างไรก็ตามไฟล์ภาพPNG ไม่สนับสนุนภาพเคลื่อนไหว เพราะไม่สามารถเก็บภาพหลายๆภาพไว้ด้วยกันได้ 8.2.4.5 ไฟล์ภาพ PDF มาจากคาว่า Portable Document Format นามสุกลของไฟล์รูปแบบนีค้ ือ .pdf ไฟล์ PDF เป็นไฟล์เอกสารของ Adobe Acrobat ใช้ในการแสดงเอกสารในรูปแบบของกราฟิก ซึ่งจะต้องใช้ โปรแกรม Adobe Acrobat Reader ในการอ่าน โดยผู้ใช้สามารถบันทึกไฟล์กราฟิกหรือเอกสาร ทุกประเภทให้เป็นไฟล์ PDF ได้ ซึ่งจะคงลักษณะเดิมของเอกสารไว้ ไม่ว่าจะเปิดที่ใด ปัจจุบันใน วงการสิ่งพิมพ์เริ่มหันมาสนใจรูปแบบไฟล์ PDF กันมากขึน้ เพราะสามารถแก้ไขตัวอักษรได้โดย การใช้โปรแกรม Adobe Acrobat Professional แต่ข้อเสียคือ ต้องอ่านไฟล์ชนิดนี้ด้วย โปรแกรม Adobe Acrobat Reader เท่านั้น

116

8.2.4.6 ไฟล์ภาพ PSD เป็นไฟล์กราฟิกของโปรแกรมตกแต่งรูปภาพของ Adobe Photoshop นามสุกลของไฟล์ รูปแบบนีค้ ือ .psd ไฟล์ PSD นีจ้ ะใช้กับโปรแกรม Adobe Photoshop เพื่อการแก้ไขรูปภาพ มีการ แบ่งเลเยอร์ (Layer) เพื่อง่ายแก่การแก้ไขในภายหลัง และสามารถบันทึกกราฟิกแบบเวคเตอร์ (Vector) ลงในไฟล์ได้ แต่มีขนาดไฟล์ที่ใหญ่เพราะต้องเก็บรายละเอียดคุณสมบัติต่าง ๆ อันเป็น คุณสมบัติพิเศษของโปรแกรม เช่น เลเยอร์ (Layer), แชนแนล(Channel), โหมดสี(Color Mode) และ สไตล์(Style) เป็นต้น 8.2.4.7 ไฟล์ภาพ AI เป็นไฟล์กราฟิกของโปรแกรมวาดรูปของ Adobe Illustrator นามสุกลของไฟล์รูปแบบนี้ คือ .ai เป็นไฟล์พื้นฐานของโปรแกรม Adobe Illustrator เช่น เลเยอร์ สี เอฟเฟ็กต์ ฯลฯ เพื่อเรา จะสามารถเปลี่ยนแปลงแก้ไขภาพได้แต่มีข้อเสียคือ ใช้กับโปรแกรม Adobe Illustrator ได้อย่าง เดียวเท่านั้น (ถ้าจะนาไปใช้ในโปรแกรมอื่นต้องต้องบันทึกเป็นฟอร์แมตอื่นก่อน) 8.2.4.8 ไฟล์ภาพ EPS มาจากคาว่า Encapsulated PostScript นามสกุลของไฟล์รูปแบบนีค้ ือ.eps เป็นไฟล์ที่ถูก สร้างขึ้นมาเพื่อใช้ในงานออกแบบสื่อสิ่งพิมพ์ (Desktop Publishing) เป็นไฟล์เวคเตอร์ (Vector) มาตรฐาน ใช้ ง านได้ กั บ โปรแกรมหลายโปรแกรม สามารถท าการแยกสี เ พื่ อ งานพิ ม พ์ ไ ด้ นอกจากนี้ยังใช้ในการบันทึกไฟล์เวคเตอร์ (Vector) จากโปรแกรมหนึ่งเพื่อนาไปโหลดใช้งานใน อีกโปรแกรมหนึ่งอีกด้วย ซึ่งไฟล์ชนิดนี้จะมีขนาดใหญ่กว่าไฟล์เวคเตอร์ (Vector) ชนิดอื่นๆ 8.2.4.9 ไฟล์ภาพ SVG มาจากค าว่า Scalable Vector Graphics นามสกุ ลของไฟล์รูป แบบนี้คือ.svg เป็นไฟล์ ภาพรูปแบบเวคเตอร์ ที่เก็บข้อมูลแบบ XML ภาพจะมีความละเอียดสูงและคมชัด สามารถ แสดงทั้งในรูปแบบของการไล่ระดับสี ภาพเคลื่อนไหว นอกจากนี้ยังสามารถนาไฟล์มาแก้ไขใน Adobe Illustrator ได้ภายหลัง แต่มีขอ้ เสียคือ จะมีไฟล์ขนาดใหญ่

117

8.3 เทคโนโลยีเสียง (Sound) 8.3.1 หลักการเบือ้ งต้นของเสียง เสียงที่เราได้ยินจะอยู่ในลักษณะของคลื่นเสียง (waveform) โดยประกอบด้วย 3 ส่วนประกอบ คือ ระดั บ ความดั งของเสีย ง (amplitude) ความถี่เ สีย ง (frequency) เนื้อหาความต่อเนื่อง (harmonic content) คลื่นเสียงที่เราได้ยินทุกวันคือ คลื่นเสียงชนิดอนาล็อค (analog sound) ซึ่งไม่สามารถนามาใช้ กับระบบคอมพิวเตอร์ได้ จึงจาเป็นต้องมีการปรับให้เป็นเสียงในรูปแบบของดิจทิ ัล (digital audio) นั่นคือ เปลี่ยนคลื่นอะนาล็อกเป็นเลข 0 และ 1 แทน แล้วบันทึกหรือจัดการด้วยคอมพิวเตอร์ 8.3.1.1 ระดับความดังของเสียง (amplitude) เป็นค่าที่วัดระยะจากจุดฐานไปถึงยอดของ คลื่นเสียง เช่น เสียงกระซิบจะมีระดับความดังประมาณ 30 เดซิเบล เสียงพูดคุยกันปกติมี ระดับความดังประมาณ 60 เดซิเบล เป็นต้น มีหน่วยวัดเป็น เดซิเบล (decibel)

ภาพ 9 แสดงระดับความดังของเสียง (amplitude) ที่มา http://www.mediacollege.com/audio/01/wave-properties.html 8.3.1.2 ความถี่เสียง (frequency) เป็นจานวนคลื่นเสียงที่เกิดขึ้นในแต่ละหนึ่งวินาที มี หน่วยเป็น เฮิรตซ์ (Hertz: Hz)

ภาพ 10 แสดงความถี่เสียง (frequency) ที่มา http://www.mediacollege.com/audio/01/wave-properties.html

118

8.3.2 คุณภาพของเสียง คุณภาพของเสียงจะส่งผลต่อความน่าเชื่อถือ และประสิทธิภาพของงานมัลติมีเดีย ดังนั้นการ บันทึกเสียง การตัดต่อและตกแต่ง รวมทั้งเครื่องมือ หรือโปรแกรมที่จะใช้แสดง (เล่น) เสียง ก็มีผลต่อ คุณภาพของเสียงนั้ นๆ ด้วย คาศัพท์ที่ได้ยินเกี่ยวกับคุณภาพของเสียงคือ เสียงแบบโมโน (mono) มี ลักษณะเสียงแบนๆ ไม่ค่อยเป็นธรรมชาติเมื่อเทียบกับเสียงแบบสเตอริโอ (stereo) ที่มีการเกิดเสียงที่มี ความเคลื่อนไหวเหมือนธรรมชาติมากกว่า นอกจากนี้แล้ว ยั งมีปัจจัย ที่เ กี่ย วกั บคุณภาพของเสีย ง โดยทั่วไปประกอบด้วย อัตรา (rate) และความละเอียด (resolution) ดังรายละเอียดต่อไปนี้ 8.3.2.1 อัตรา (rate) อัตราของคลื่นเสียง หรือความถี่เสียง หรือที่เราเรียกกันว่า อัตราสุ่ม (sample rate) หมายถึง จานวนคลื่นเสียงที่เกิดในหนึ่งวินาที ปกติจะวัดเป็นกิโลเฮิรตซ์ (kilohertz : kHz) เช่น 22.025 kHz และ 44.5 kHz เป็นความถี่เสียงปกติที่ใช้สาหรับการบันทึกและแสดงผล ยิ่งอัตรา ความถี่สูงจะทาให้ได้เสียงที่มีคุณภาพสูงกว่าอัตราความถี่ที่ต่ากว่า และไฟล์ที่บันทึกก็จะใช้ พืน้ ที่ในหน่วยความจามากกว่าด้วย 8.3.2.2 ความละเอียด (resolution) ความละเอียดในที่น้ีหมายถึง จานวนบิตที่ใช้สาหรับประมวลคลื่นเสียงด้วยระบบดิจทิ ัล หรือเรียกว่า sampling size เช่น บันทึกเสียง 8 บิต 16 บิต เป็นต้น หากดาเนินการกับความ ละเอียดบิตสูงจะทาให้ได้เสียงที่มีคุณภาพดี และไฟล์เสียงที่มีความละเอียดบิตสูงจะมีขนาด ใหญ่กว่าไฟล์เสียงความละเอียดบิตต่า จากที่กล่าวมาข้างต้น จะเห็นว่า อัตราสุ่มที่เพิ่มขึ้น หรือความละเอียดบิตที่เพิ่มขึ้น จะ ส่งผลต่อขนาดของไฟล์เสียงอย่างเห็นได้ชัดเจน

119

8.3.3 ชนิดของไฟล์เสียง ชนิดของไฟล์เสียงเป็นผลลัพธ์ของการสร้างจากซอฟท์แวร์และระบบปฏิบัติการที่แตกต่างกัน ชนิดของไฟล์ที่พบในเว็บไซต์ทั่วๆ ไป มีดังนี้ 8.3.3.1 ไฟล์เสียง AIFF or AIF (Apple’s Audio Interchange Format) เป็นไฟล์ของเสียงที่เกิดจากระบบปฏิบัติการแมคอินทอช (Macintosh) ใช้อัตราความถี่ สูงถึง 32 บิต สามารถแสดงผลเสียงได้ทั้งบนวินโดวส์ ยูนิกซ์ 8.3.3.2 ไฟล์เสียง WAV (waveform format) ไฟล์เสียง wave เป็นไฟล์เสียงที่เราคุ้นเคยกันมากที่สุด ไฟล์ประเภทนี้มีนามสกุล .wav จัดเป็นไฟล์เสียงมาตรฐานที่ใช้กับ Windows คุณสมบัติที่สาคัญคือครอบคลุมความถี่เสีย งได้ ทั้งหมด ทาให้คุณภาพเสียงดีมาก และยังให้เสียงในรูปแบบสเตอริโอได้อีก ด้วย ข้อเสียคือไฟล์ .wav มีขนาดใหญ่ทาให้ส้ินเปลืองพื้นที่ในการเก็บข้อมูลมาก 8.3.3.3 ไฟล์เสียง MIDI (Musical Instrument Digital Interface) ไฟล์เสียง MIDI ไฟล์ข้อมูลเสียงดนตรี โดยมีนามสกุล .midi ไฟล์ MIDI จะบรรจุข้อมูล ของอุป กรณ์ต่า งๆ ที่ใ ห้เ สีย งดนตรี เมื่อ เล่นไฟล์ MIDI ก็ จะเป็นการสั่ งให้ อุป กรณ์ นั้ น ๆให้ มี เสียงดนตรีออกมา เมื่อนามาเรียงกันก็จะกลายเป็นท่วงทานองดนตรีซึ่งก็คือเสียงเพลงนั่นเอง MIDI มีขนาดของไฟล์ที่เล็กมากทาให้นยิ มใช้ในการเก็บข้อมูลที่เป็นเสียงดนตรี 8.3.3.4 ไฟล์เสียง MP3 (Motion Picture Expert Group (MPEG) Audio Layer 3) ไฟล์เสียง MP3 เป็นไฟล์เสียงยอดนิยมในปัจุบัน มีนามสกุล .mp3 ไฟล์mp3 เป็นไฟล์ที่ ถูกบีบอัดข้อมูลทาให้ไฟล์ประเภทนี้มีขนาดเล็กลงมาก ลดลงประมาณ 10 เท่าเมื่อเทียบกับไฟล์ wave คุ ณ ภาพเสี ย ง mp3 ค่ อ นข้ า งดี จึ ง นิ ย มใช้ ไ ฟล์ ป ระเภทนี้ บั น ทึ ก ข้ อ มู ล เพ ลงลงบน สื่อคอมพิว เตอร์ หรือแผ่น CD การเล่นไฟล์ mp3 บนเครื่องคอมพิวเตอร์ ต้อ งใช้โ ปรแกรม โดยเฉพาะซึ่งในปัจจุบันมีให้เลือกมากมาย นอกจากนี้ยังสามารถเล่นได้กับเครื่องเล่น VCD ,DVD, CD ติ ด รถยนต์ , เครื่ อ งเล่ น MP3 แบบพกพา (ใช้ ห น่ ว ยความจ าเฉพาะ เช่ น Flash Memory หรือ memory Stick) รวมทั้งโทรศัพท์มือถือรุ่นใหม่ๆอีกด้วยปัจจุบันมีการพัฒนาไฟล์ MP3 เป็นไฟล์ MP4 ให้มขี นาดเล็กลงและมีคุณภาพเสียงดีขนึ้ แต่ยังไม่เป็นที่นิยมใช้มากนัก

120

8.3.3.5 ไฟล์เสียง OGG เป็นรูปแบบของไฟล์เสียงใหม่ล่าสุด มีชื่อเต็มคือ Ogg มีนามสกุล .ogg ไฟล์ Ogg Vorbis ใช้เทคโนโลยีการบีบอัดไฟล์แบบใหม่ ทาให้ไฟล์ที่ได้มีขนาดเล็กกว่า MP3 เสียอีก แต่ให้คุณภาพ เสียงที่ดกี ว่าและที่สาคัญคืออยู่ในกลุ่มของ Open Source Project ทาให้กลายเป็นฟรีแวร์ อีกทั้ง ยังมีความสามารถด้าน Streaming ด้วย ทาให้ได้รับความนิยมมากในหมู่ผเู้ ล่นอินเทอร์เน็ต ไฟล์ Ogg Vorbis สามารถเล่นได้โดยใช้โปรแกรมสาหรับเล่นไฟล์ MP3 โดยมีข้อแม้ว่าโปรแกรมนั้น จะต้องมี Plug-in สาหรับ Ogg ด้วย Ogg Vorbis นับเป็นคลื่นลูกใหม่ของวงการไฟล์เสียง เพราะ มี ข นาดที่ เ ล็ ก มาก สามารถเข้ า รหั ส เสี ย งได้ ห ลายแบบทั้ ง mono, stereo จนถึ ง ระบบ 5.1 Surround Sound 8.3.3.6 ไฟล์เสียง WMA ไฟล์ WMA เป็ น รู ป แบบไฟล์ แ บบหนึ่ ง ของบริ ษั ท ไมโครซอฟท์ ชื่ อ เต็ ม คื อ Windows Media Audio เป็นไฟล์ทีมนี ามสกุลเป็น .wma ไฟล์ WMA จัดได้ว่าเป็นคู่แข่งของ mp3 และ Real Audio เพราะมีคุณสมบัติด้านการ Streaming เช่นเดียวกัน แต่ให้คุณภาพเสียงที่ดีกว่าในขณะที่ ขนาดของไฟล์ เ ล็ ก กว่ า ประมาณครึ่ ง หนึ่ ง ท าให้ ใ ช้ เ วลาน้ อ ยกว่ า ในการดาวน์ โ หลดผ่ า น อินเทอร์เน็ต เมื่อก่อนการเล่นไฟล์ประเภทนี้ต้องเล่นผ่านโปรแกรม Windows Media Player เท่านั้น แต่ปัจจุบันมีโปรแกรมหลายโปรแกรมที่สามารถเล่นไฟล์นไี้ ด้ 8.3.3.7 ไฟล์เสียง Real Audio ไฟล์ Real Audio เป็นไฟล์ที่มนี ามสกุล .ra เป็นไฟล์ ประเภท Streaming ที่ใช้สาหรับการชมภาพและเสียง บนอินเทอร์เน็ต ไฟล์ประเภท Streaming จะใช้เทคโนโลยีในการบีดอัดข้อมูลที่ปรับเปลี่ย นได้ เพื่อให้ไ ด้ไ ฟล์ขนาดเล็ ก ที่มีขนาดเหมาะสมส าหรับ การส่ ง ผ่ านระบบอิน เทอร์เ น็ ตในระดั บ ความเร็วที่แตกต่างกัน ไฟล์ประเภทนีท้ าให้เราสามารถชมภาพและเสียงผ่านระบบอินเทอร์เน็ต ได้อย่างต่อเนื่อง ผ่านโปรแกรมประเภท Real ต่างๆ ได้โดยไม่ต้องรอให้การดาวน์โหลดข้อมูล เสร็จสิน้ โปรแกรม Real Player ก็เป็นโปรแกรมประเภทหนึ่งที่ใช้เล่นไฟล์ Real Audio ได้

121

8.4 เทคโนโลยีวิดีโอ (Video) 8.4.1 ประเภทของวิดีโอ 8.4.1.1 อะนาล็อกวิดีโอ (analog video) วิดีโอชนิดนี้ถูกบันทึกภาพและเสียงอยู่ในรูปสัญญาณประเภทอะนาล็อก ที่เห็นทั่วไปคือ VHS (Video Home System) เป็นม้วนวิดีโอที่ใช้สาหรับชมกัน ตามบ้าน หรือที่เรียกกันติดปากว่า วิดีโอเทป (video tape) ด้วยเทคโนโลยีปัจจุบัน ความนิยมวิดีดอประเภทนี้ลดน้อยลง เนื่องจาก ราคาในการผลิตที่สูง คุณภาพที่ได้ไม่ดีนัก จึงต้องนาวิดีโอเทปเก่าๆมาแก้ไข ตัดต่อใหม่ด้วย ระบบดิจทิ ัล โดยการแปลงสัญญาณภาพและเสียงชนิดอะนาล็อกให้เป็นดิจทิ ัลด้วยการใช้การ์ด video-capture แปลงเป็นไฟล์ในระบบคอมพิวเตอร์และนาไปใช้ในลักษณะของวิดีโอประเภท ดิจทิ ัล (digital video) 8.4.1.2 ดิจทิ ัลวิดีโอ (digital video) เป็นวิดีโอที่บันทึกข้อมูลภาพและเสียงอยู่ในรูปแบบของดิจิทัล เช่น กล้องบันทึกจะถูก ผลิตออกมาด้วยมาตรฐาน DV เราจะเรียกว่า กล้อง DV บันทึกภาพและเสียงอยู่ในรูป แบบ สัญญาณดิจทิ ัล คือรหัส 0 และ 1 ในสื่อบันทึกของกล้องชนิดนัน้ ๆ การถ่ายโอนข้อมูลจากกล้อง เข้าสู่ระบบคอมพิวเตอร์ทางหนึ่งเราจะใช้ช่องต่อเชื่อม FireWire หรือ IEEE 1934 การถ่ายโอน ข้อมูลวิดีโอผ่านระบบดิจิทัลนี้มีข้อดีคือ ไม่สูญเสียคุณภาพ และไม่ก่อให้เกิดสัญญานรบกวน ด้วย และกล้องวิดีโอสมัยใหม่จะใช้สื่อดิจิทัลในการบันทึกข้อมูล เช่น ซีดี และการ์ดความจา เป็นต้น 8.4.2 คุณภาพของดิจทิ ัลวิดีโอ 8.4.2.1 อัตราเฟรม (Frame rate) ถ้าเรากาลังยืนอยู่ข้างถนนเราคงจะเห็ นรถที่กาลังวิ่งไปมาบนท้องถนน ภาพที่เราเห็น นั้นจะคล้ายกับวิดีโอ เนื่องจากภาพรถวิ่งบนถนนท้องถนนมันมีความต่อเนื่อง แต่เราเคยคิด หรือไม่ว่า ณ เวลาหนึ่งขณะที่เราจ้องไปที่รถที่กาลังวิ่งบนท้องถนนนั้น ภาพที่เราจะเห็นในเวลา นั้นๆ จะเป็นอย่างไร คาตอบคือ ภาพนิ่งหนึ่งภาพนิ่ง นั่นหมายความว่า ภาพเคลื่อนไหว ที่เรา เห็นว่ามันเคลื่อนไหวอย่างสมจริงในวิดีโอ เป็นการเอาภาพนิ่งมาเรียงต่อกันแล้วฉายหรือแสดง ต่อเนื่องกันออกมาให้เราเห็นเป็นภาพเคลื่อนไหว ที่กล่าวมาข้างต้นเป็นหลักการเบื้องต้นของวิด๊ โอนั่นเอง แล้วเราจะฉายต่อเนื่องกันเท่าไหร่จึงจะเห็นเป็นภาพที่สมจริง มีหน่วยวัดเป็น อัตรา เฟรม หมายถึง ความเร็วในการบันทึกหรือการเล่นภาพหนึ่งภาพ (frame) เทียบกับเวลา ปกติ แล้วจะใช้หน่วยเป็น เฟรมต่อวินาที (frames per second: fps) โดยทั่วจะอยู่ระหว่าง 15 ถึง 30 เฟรมต่อวินาที

122

8.4.2.2 ความละเอียด (Resolution) ความละเอียดสาหรับวิดีโอมีอยู่ 3 ปัจจัยด้วยกัน ดังนี้ - สัดส่วนของมุมมอง (Aspect ratio) เป็นสัดส่วนระหว่างด้านกว้างและสูงที่จะใช้สาหรับแสดงภาพในแต่ละ เฟรม ตัวอย่างเช่น 4:3 สาหรับจอภาพธรรมดา หรือ 16:9 สาหรับการ แสดงแบบไวด์สกรีน (wide screen) - ขนาดเฟรม (Frame size) หมายถึง จานวนพิกเซลที่ใช้แสดงวิดีโอในแนวนอนและแนวตั้ง เช่น 800x600 พิกเซล - ความลึกบิต (Bit depth) หมายถึง จานวนบิตสี ที่จะแสดงได้ในแต่ละพิกเซล ยิ่งจานวนบิตสูงจะ สามารถแสดงสีได้มากกว่าบิตต่า ทาให้ภาพที่เกิดขึ้นมีคุณภาพดีไป ด้วย 8.4.2.3 คุณภาพของเสียงในวิดีโอ เนือ้ หาได้กล่าวในหัวข้อที่ผ่านมาแล้ว 8.4.3 ชนิดของไฟล์วิดโี อ 8.4.3.1 ไฟล์วิดโี อ AVI ( Audio Video Interleave) เป็ น รู ป แบบที่ ถู ก พั ฒ นาขึ้ น โดยบริ ษั ท ไมโครซอฟท์ สนั บ สนุ น การใช้ ง านภายใต้ ระบบปฏิบัติการวินโดวส์ และใช้ร่วมกับทุกเบราวเซอร์ได้ นามสกุลไฟล์ชนิดนี้คอื .avi 8.4.3.2 ไฟล์วิดโี อ WMV เป็นรูปแบบของไฟล์วิดีโอตระกูล Windows Media ถูกพัฒนาขึ้นโดยบริษัท ไมโครซอฟท์ เช่ น เดี ย วกั บ AVI ไฟล์ ช นิ ด นี้ ใ ช้ ง านกั น อย่ า งกว้ า งขวางบนอิ น เทอร์ เ น็ ต แต่ มี ข้ อ เสี ย คื อ ไม่ สามารถทางานร่วมกับระบบปฏิบัติการอื่น ยกเว้นระบบปฏิบัติการวินโดวส์ หรือต้องติดตั้งส่วน เสริม (component) ลงไป นามสกุลของไฟล์ชนิดนี้คอื .wmv

123

8.4.3.3 ไฟล์วิดโี อ MPEG (Moving Pictures Expert Group) เป็ น รู ป แบบของไฟล์ วิ ดี โ อที่ ไ ด้ รั บ ความนิ ย มบนอิ น เทอร์ เ น็ ต เนื่ อ งจากทุ ก ระบบปฏิบัติการใช้งานได้ และทุกเบราว์เซอร์ใช้งานได้ด้วย นามสกุลของไฟล์จะเป็น .mpg หรือ .mpeg 8.4.3.4 ไฟล์วิดโี อ RealVideo ถูกพัฒนาโดยทีมอินเทอร์เน็ตของ Real Media รูปแบบนี้จะใช้สาหรับการทาสตรีมมิ่ง ของวิดีโอได้เป็นอย่างดี (streaming video) ใช้สาหรับวิดีโอออนไลน์ และทีวีบนอินเทอร์เน็ต ที่ แบนด์วิดท์ต่า (bandwidth) นามสกุลของไฟล์ชนิดนี้คอื .rm หรือ .ram 8.4.3.5 ไฟล์วิดโี อ Shockwave รูปแบบนีเ้ กิดการสร้างโดย Macromedia Flash ซึ่งถูกพัฒนาขึ้นโดยบริษัท Macromedia เป็นไฟล์ที่จะต้องอาศัยส่วนเสริมเพื่อการแสดงภาพ และส่วนเสริมนี้จะมาพร้อมกับเบราว์เซอร์ เวอร์ชันใหม่ๆ นามสกุลของไฟล์ชนิดนี้คอื .swf 8.4.3.6 ไฟล์วิดโี อ QuickTime ถูกพัฒนาขึ้นมาโดยบริษัท แอปเปิล (Apple) เป็นไฟล์ที่ได้รับความนิยมบนอินเทอร์เน็ต สาหรับระบบปฏิบัติก ารอื่นๆ ยกเว้นแมคอินทอช จะต้องติดตั้งส่วนเสริมเพื่อเล่นไฟล์วิ ดีโ อ นามสกุลของไฟล์ชนิดนี้คอื .mov 8.5 เทคโนโลยีแอนิเมชัน (Animation) 8.5.1 ความหมายและหลักการของแอนิเมชัน แอนิเมชัน (Animation) หมายถึง การทาให้ภาพนิ่งหลายๆ ภาพ เคลื่อนไหวต่อเนื่องกั น ด้ ว ย ความเร็วสูง ซึ่งจะทาให้เกิดภาพติดตา(Persistence of Vision) หมายถึง เมื่อมนุษย์จะคงยังมองเห็นภาพ ค้างในดวงตาระยะหนึ่งหลังจากที่เห็นภาพนั้นๆ ไปแล้ว 8.5.2 ประเภทของแอนิเมชัน 8.5.2.1 การสร้างงานแอนิเมชันแบบดั้งเดิม (Traditional Animation / Drawn Animation) เป็นการสร้างชิ้นงานแอนิเมชันด้วยภาพวาดซึ่งจะมีการวาดภาพลงบนกระดาษก่อน เพื่อสร้างภาพลวงตาของการเคลื่อนไหว แต่ละรูปวาดจะแตกต่างกันเล็กน้อยหลายพันภาพ

124

และฉายภาพเหล่านั้นผ่านกล้องบันทึกภาพ หรือกล้องวิดีโอ เมื่อนาถูกเฟรมมาฉายต่อเนื่องกัน ทาให้เกิภาพเคลื่อนไหว ซึ่งแบ่งเป็น 2 รูปแบบ ดังนี้ 1) แอนิเมชันชนิดเต็มรูปแบบ (Full Animation) เป็นการวาดภาพที่ใส่รายละเอียดของตัวการ์ตูนและฉากอย่างปราณีต เน้น ความสมจริงของแอนิเมชัน 2) แอนิเมชันลดทอนรายละเอียด (Limited Animation) เป็นการวาดที่จะไม่เน้นความสมจริง เป็นการวาดที่มีการลดทอนรายละเอียด ทาให้ดูเป็นการ์ตูนมากขึ้น 8.5.2.2 การสร้างแอนิเมชันแบบสต๊อปโมชั่น (Stop Motion / Model Animation) สต็อปโมชัน (Stop Motion) มีพื้นฐานมาจาก Flip Book เป็นการใช้เทคนิคการถ่ายภาพ หรื อ วาด ที่ พ บมากได้ แ ก่ ภาพเคลื่ อ นไหวแบบหุ่ น เชิ ด ภาพเคลื่ อ นไหวดิ น น้ ามั น เป็ น ต้ น แอนิเมชันแบบนี้ต้องอาศัยเวลา ความอดทนและความสามารถมากต้องใช้ทักษะทางศิลปะ และการถ่ายภาพ ทั้งนี้ เพราะหุน่ จาลอง หรือสิ่งของประกอบฉากนั้น หลายๆสิ่งมีการขยับหรือ เคลื่อนไหวไปพร้อมๆ กัน ในหนึ่งภาพ สต็อปโมชันมีเทคนิคในการทาหลากหลายรูปแบบ ดังนี้ 1) เคลย์แอนิเมชัน (Clay Animation) เป็นการทาแอนิเมชันโดยใช้หุ่นที่ปั้นขึ้นจากดินเหนียว ดินน้ามัน ขี้ผ้ึง หรื อวัสดุ อื่นๆ โดยใช้โครงลวดไว้ขา้ งในเพื่อดัดท่าทางได้ตามต้องการ 2) คัตเอาท์แอนิเมชัน (Cutout Animation) เป็นเทคนิคเก่าในการทางานคือ สมัยก่อนแอนิเมชันจะทาโดยใช้กระดาษหรือ ผ้า ตัดเป็นรูปต่างๆ และนามาขยับเพื่อถ่ายเก็บไว้ทีละเฟรม แต่ปัจจุบันใช้วิธี วาดหรือสแกนภาพเข้าไปขยับในคอมพิวเตอร์ได้เลย 3) กราฟิกแอนิเมชัน (Graphic Animation) เป็นการนากล้องมาถ่ายภาพนิ่งต่างๆ ที่เราเลือกไว้ (จะเป็นภาพจากนิตยสาร หนังสือพิมพ์ ฯลฯ) ทีละภาพ ทีละเฟรม แล้วนามาตัดต่อเข้าด้วยกันเหมื อน เทคนิค คอลลาจ (Collage – ปะติด) โดยอาจใช้เ ทคนิคแอนิเ มชั นแบบอื่นมา ประกอบด้วยก็ได้

125

4) โมเดลแอนิเมชัน (Model Animation) คือการทาตัวละครโมเดลขึ้นมาขยับ แล้วซ้อนภาพเข้ากับฉากที่มีคนแสดงจริง และแบ็คกราวนด์เหมือนจริง 5) พิกซิลเลชัน (Pixilation) เป็ น สต็ อ ปโมชั น ที่ ใ ช้ ค นจริ ง ๆ มาขยั บ ท่ า ทางที ล ะนิ ด แล้ ว ถ่ า ยไว้ ที ล ะเฟรม เทคนิคนี้เหมาะมากถ้าเราทาแอนิเมชันที่มีหุ่นแสดงร่วมกับคน และอยากให้ทั้ง หุ่นทั้งคนดูเคลื่อนไหวคล้ายคลึงกัน หรือที่อยากได้อารมณ์ไม่ราบลื่น คล้าย การถ่ายทีละเฟรม 6) แอนิเมชันที่เล่นกับวัตถุอื่นๆ (Object Animation) ไม่ว่าจะเป็นของเล่น หุ่น ตุ๊ก ตา ตัวต่อเลโก้ ฯลฯ อะไรก็ ตามที่ไ ม่ใ ช่วัสดุซึ่ง ดัดแปลงรูปร่างหน้าตาได้แบบดินเหนียว 8.5.2.3 สร้างแอนิเมชันด้วยคอมพิวเตอร์ (Computer Animation) 1) ภาพเคลื่อนไหวแบบ 2 มิติ (2D Animation) คือแอนิเมชัน ที่สร้างส่วนประกอบต่างๆ ของงานภาพกราฟิก 2 มิติ และตัดต่อ บนคอมพิวเตอร์ สามารถมองเห็นได้ทั้งความสูงและความกว้าง 2) ภาพเคลื่อนไหวแบบ 3 มิติ (3D Animation) เป็นการทาแอนิเมชันด้วยคอมพิวเตอร์โดยใช้โปรแกรม 3 มิติ เช่น Autodesk 3D Max, Autodesk Maya เป็นต้น 8.5.3 ชนิดของไฟล์แอนิเมชันสาหรับเว็บ 8.5.3.1 ไฟล์แอนิเมชัน Gif Animation เป็นไฟล์ลักษณะพิเศษของไฟล์ภาพ GIF รู้จักกันในรูปแบบ GIF89a เป็นไฟล์ชนิดแรกที่ สามารถแสดงการเคลื่อนไหวของภาพได้บนเบราว์เซอร์ เทคนิคการสร้างไฟล์ชนิดนี้อย่างง่าย คือการวางภาพนิ่งหลายๆภาพต่อเนื่องกัน เมื่อบันทึกเป็นไฟล์ .gif แล้วจะแสดงภาพนิ่งจากภาพ แรกไปเรื่อยๆ จนหมดแล้ววนใหม่ จะทาให้เราเห็นภาพเคลื่อนไหวได้

126

8.5.3.2 ไฟล์แอนิเมชัน SWF ถูกออกแบบมาเพื่อนาเสนอภาพกราฟิกและแอนิเมชันบนเว็บไซต์ เป็นการบีบอัดไฟล์ จาก Macromedia Flash หรือ Shockwave Flash สกุลของไฟล์ชนิดนีค้ ือ .swf เป็นไฟล์ที่มีขนาด เล็ ก จึ ง สะดวกส าหรั บ การน าเสนอแอนิ เ มชั น ที่มี ทั้ ง ภาพและเสีย งอย่ า งมี ป ระสิ ท ธิภ าพบน เว็บไซต์ 8.5.3.3 ไฟล์แอนิเมชัน FLA เป็นไฟล์กราฟิกของโปรแกรมของ Adobe Flash นามสุกลของไฟล์รูปแบบนี้คือ .fla จะ ใช้ไฟล์นี้กับโปรแกรม Adobe Flash เพื่อแก้ไขงานภาพเวคเตอร์ที่สร้างด้วยโปรแกรมดังกล่าว ไม่ว่าจะเป็นแอนิเมชัน อินเตอร์แอกทีฟในเว็บเพจ และเกมส์ เป็นต้น 8.6 สรุป เทคโนโลยี มั ล ติ มี เ ดี ย เป็ น เทคโนโลยี ที่ ไ ด้ รั บ การพั ฒ นาให้ ก้ า วหน้ า อย่ า งรวดเร็ ว และใช้ คอมพิวเตอร์แสดงผลในลักษณะผสมสื่อหลายชนิดเข้าด้วยกัน โดยเน้นการโต้ตอบและมีปฏิสัมพันธ์กับ ผู้ใช้ ตั้งแต่เริ่มต้นที่มีการสื่อสารข้อมูลด้วยเนื้อหาในลักษณะดังกล่าว เทคโนโลยีข้อความ(Text) ยังคงมี ความสาคัญและปรากฏบนหน้าจอเสมอ เช่น ใช้เป็นหัวข้อ หัวข้อย่อย คาอธิบาย และเนื้อหาสาระ เมนู ที่ใ ช้ข้อความ รวมทั้งปุ่มต่างๆ เป็นต้น นอกจากนี้แล้วยั งช่วยสร้างลิงค์เ ชื่อมโยงไปยังหน้าเว็บอื่นๆ ส าหรั บ มุ ม มองด้ า นเทคโนโลยีรู ป ภาพ(Image) และกราฟิ ก (Graphics) ก็ มี ค วามจ าเป็ นมากสาหรับ โปรแกรมประยุกต์ด้านสื่อมัลติมีเดีย และเว็บไซต์ เพราะภาพหนึ่งภาพแทนคาพูดได้เป็นพันคา การ ประยุกต์ใช้ภาพในงานมัลติมีเดีย โดยมากจะใช้สาหรับเป็นภาพพื้นหลัง ปุ่ม ไอคอนสัญลักษณ์แสดง ทิศทาง แผนที่ หรือ โลโก้ เป็นต้น ส่วนเทคโนโลยีเสียง (Sound) เป็นสื่ออีกชนิดหนึ่งที่ถูกนามาประกอบ ในงานมัลติมีเดีย เพื่อสร้างความน่าสนใจและความบันเทิง เช่น ปุ่มคลิก การวางเมาส์ทับบนลิงค์แล้ว เกิดเสียง เป็นต้น นอกจากนีแ้ ล้วยังนาเสียงมาเป็นการถ่ายทอดเนื้อหาที่ต้องการสื่อสารกับผู้ชมอีกด้วย นอกจากนีย้ ังมีองค์ประกอบสื่ออื่นๆ เข้ามาประกอบเช่น วิดีโอ(Video) และ แอนิเมชัน(Animation)

127

กิจกรรมภาคปฏิบัติ ใบงานที่ 8 1. วัตถุประสงค์ 1.1 เพื่อให้นสิ ิตฝึกออกแบบงานมัลติมีเดียด้วยการสร้างต้นแบบออนไลน์ (Online Prototype) 1.2 เพื่อให้นิสติ ได้มีประสบการณ์ในการนาเสนอผลงาน และได้แลกเปลี่ยนความคิดเห็นร่วมกัน กันในชั้นเรียน 2. สาระสาคัญ กิจกรรมใน ใบงานที่ 8 : การสร้างต้นแบบด้วยคอมพิวเตอร์ (Online Prototype) เป็นการ เสริมความเข้าใจในบทเรียน และกระตุ้นให้นิสิตได้นาความรู้ในบทเรียนมาประยุกต์ ใช้กับการออกแบบ งานมัลติมีเดียให้มปี ระสิทธิภาพและตรงตามความต้องการของผูใ้ ช้ 3. วิธีการ ให้นสิ ิตกลุ่มละ 3 คน นาต้นแบบกระดาษ(Paper Prototype) ที่สร้างและทดลองใช้เมื่อสัปดาห์ที่ แล้ว มาปรับปรุงแนวคิด แล้วลงมือสร้างต้นแบบออนไลน์ในโปรแกรมคอมพิวเตอร์(Online Prototype) ด้วยโปรแกรมInVision (https://www.invisionapp.com/) ตัวอย่าง: การทาต้นแบบออนไลน์ (Online Prototype)

ภาพ 11 แสดงการทาต้นแบบออนไลน์ (Online Prototype) ที่มา http://wireframes.linowski.ca/2011/11/invision-prototyping-tool/

128

ภาพ 11 การแสดงการใช้งานต้นแบบออนไลน์ (Online Prototype) ที่มา https://techcrunch.com/2015/07/14/invision-prototyping-tool-lands-45-million-in-series-cled-by-accel/

129

บทที่ 9 การประยุกต์ใช้งานมัลติมีเดียกับงานด้านอื่นๆ หัวข้อเนื้อหาประจาบท 1. การโฆษณา ประชาสัมพันธ์ 2. การสื่อสารโทรคมนาคม 3. การแพทย์และสาธารณสุข 4. การค้าและพาณิชย์ 5. การบันเทิงและนันทนาการ 6. ภูมศิ าสตร์ 7. การพิมพ์ 8. การศึกษา

วัตถุประสงค์ 1. สามารถอธิบายประโยชน์ของมัลติมีเดียในชีวติ ประจาวันได้ 2. สามารถอธิบายการนามัลติมีเดียไปใช้ประโยชน์ตอ่ งานด้านต่างๆได้ เวลาเรียน สัปดาห์ที่ 14 กิจกรรมการเรียนการสอน 1. การบรรยาย 2. การอภิปรายและการซักถามเกี่ยวกับเนือ้ หาในบทเรียนร่วมกัน 3. กาหนดประเด็นปัญหาเพื่อศึกษาค้นคว้าเพิ่มเติม

130

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

ภาพ 1 แสดงการประยุกต์ใช้งานมัลติมีเดียกับงานด้านการโฆษณา ประชาสัมพันธ์ ที่มา https://www.pinterest.com/pin/409194316114007721/ 9.2 การสื่อสารโทรคมนาคม เทคโนโลยีมัลติมีเดียช่วยเพิ่มประสิทธิภาพของการติดต่อสื่อสารมากขึ้นกว่าในอดีต โทรศัพท์ใน ปัจจุบันไม่ได้มีแค่เสียง แต่สามารถส่งข้อมูลมัลติมีเดียได้สะดวกง่ายดาย โมบายเทคโนโลยี (Mobile Technology) ได้นามัลติมีเดียมาใช้งาน เพื่ออานวยความสะดวกผ่านทางการติดต่อสื่อสารชนิดไร้สาย ไม่เพียงแต่จะนามาประยุกต์ใช้ในชีวติ ประจาวัน เช่น การสั่งซือ้ สินค้า การชาระเงินค่าบริการ การพูดคุย กับเพื่อน เป็นต้น หรือแม้แต่ในเชิงธุรกิจ เช่น โมบายคอมเมิรซ์ และโมบายแบงค์กงิ้ เป็นต้น

131

ภาพ 2 แสดงการประยุกต์ใช้งานมัลติมีเดียกับงานด้านการสื่อสารโทรคมนาคม ที่มา http://www.sejuku.net/blog/9017 9.3 การแพทย์และสาธารณสุข ปัจจุบันมีการสร้างสื่อการเรียนรู้ด้านการแพทย์เพื่อการศึกษา เช่น นามาประยุกต์ใช้ในการ ฝึกหัดการผ่าตัดป่วยแบบจาลอง เป็นต้น นอกจากนี้ ยังช่วยเปิดโอกาสให้ประชาชนทั่วไปที่มคี วามสนใจ สามารถศึกษาเพื่อสร้างความเข้าใจที่ถูกต้องเกี่ยวกับการดูแลรักษาสุขภาพตนเอง

ภาพ 3 แสดงการประยุกต์ใช้งานมัลติมเี ดียกับงานด้านการแพทย์และสาธารณสุข ที่มา http://interactivemultimediatechnology.blogspot.com/2009/04/giving-healthcare-digitaltouch-via.html

132

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

ภาพ 4 แสดงการประยุกต์ใช้งานมัลติมเี ดียกับงานด้านการค้าและพาณิชย์ ที่มา http://syc-oh.com/looking-for-tips-about-online-shopping-youve-come-to-the-right-place/ 9.5 การบันเทิงและนันทนาการ ทุกวันนี้มีการนามัลติมีเดียมาพัฒนารูปแบบความบันเทิงมากมาย เพื่อตอบสนอง การสร้าง ประสบการณ์ที่แปลกใหม่ เพิ่มความตื่นเต้น เร้าใจ และเพิ่มสมจริง ให้แก่ผู้ชม เช่น ภาพยนตร์ เกมส์ เสมือนจริง เป็นต้น นอกจากนี้ ปัจจุบันประเทศไทยมีทีวีดิจิทัล ทาให้สิ่งบันเทิงในรูปแบบของมัลติมีเดีย ได้มีการนาเสนอผ่านช่องทางการสื่อสารมากยิ่งขึ้น ทาให้ผู้ใช้งานสามารถเข้าถึงแหล่งบันเทิงต่าง ๆ ได้ มากมาย

133

ภาพ 5 แสดงการประยุกต์ใช้งานมัลติมเี ดียกับงานด้านการบันเทิงและนันทนาการ ที่มา https://www.pinterest.com/pin/345229127670879550/ 9.6 ภูมิศาสตร์ ความสามารถในการแสดงผลแบบมัลติมีเดียทาให้การศึกษาสภาพพื้นที่ทางภูมิศาสตร์สะดวก ง่ายดายขึ้น ผู้ใช้สามารถมองเห็นสภาพพื้นที่ได้อย่างชัดเจน สามารถศึกษาสภาพการเปลี่ยนแปลงทาง ภูมิศาสตร์ได้จากแบบจาลองที่สร้างจากโปรแกรมคอมพิวเตอร์ นอกจากนี้มัลติมีเดียทางภูมิศาสตร์ยัง นามาใช้ใ นชีวิตประจาวั นของคนทั่ว ไปมากขึ้น ตัวอย่างเช่น การใช้ Google Earth แสดงแผนที่ GPS (Global Positioning System) ในการศึกษาและวางแผนเส้นทางการเดินทาง เป็นต้น

ภาพ 6 แสดงการประยุกต์ใช้งานมัลติมีเดียกับงานด้านภูมศิ าสตร์ ที่มา https://www.youtube.com/watch?v=U5W5jmm97N0

134

9.7 การพิมพ์ มัลติมีเดียช่วยเพิ่มช่องทางรูปแบบใหม่ให้แก่แวดวงการพิมพ์ จากกระดาษมาสู่ยุคของ E-Book และ E-Magazine ที่ปัจจุบันมีออกมาอย่างแพร่หลาย ทั้งในรูปแบบ CD/DVD –ROM หรือ การเผยแพร่ ผ่านอินเทอร์เน็ต อันจะส่งผลให้สิ่งพิมพ์ต่างๆ มีความน่าสนใจมากขึ้น

ภาพ 7 แสดงการประยุกต์ใช้งานมัลติมเี ดียกับงานด้านการพิมพ์ ที่มา https://www.pinterest.com/pin/167055467403635661/ 9.8 การศึกษา นอกจากจะใช้เป็นสื่อประกอบการสอนของครูแล้ว มัลติมีเดียยังช่วยลดข้อจากัดทางการศึกษา ด้ว ย ไม่ว่าจะเป็นการเปิด โลกกว้างในการศึก ษาค้นคว้ าความรู้ ด้วยแหล่งข้อ มูลรูป แบบใหม่ๆ เช่น ห้องสมุดแบบดิจทิ ัล (Digital Library) พิพิธภัณฑ์เสมือนจริง (Virtual Museum) หรือช่วยในการเรียนการ สอนที่ตอ้ งการความปลอดภัย เช่น ห้องปฏิบัติการเสมือนจริง (Virtual Lab) เป็นต้น

135

ภาพ 8 แสดงการประยุกต์ใช้งานมัลติมเี ดียกับงานด้านการศึกษา ที่มา http://www.borismicka.com/museum-of-underwater-arcaheology/

9.9 สรุป มัลติมีเดียถูกนาไปใช้ประโยชน์อย่างแพร่หลายในวงการธุรกิจและอุตสาหกรรม โดยเฉพาะได้ นามาใช้ใ นการฝึก อบรมและให้ข้อมูล ข่าวสาร ความบันเทิง ส่วนในวงการการศึก ษามัลติมีเ ดีย ถูก นามาใช้เพื่อการเรียนการสอนทั้งในและนอกระบบโรงเรียน ฉะนั้นจึงกล่าวได้ว่ามัลติมีเดียได้เข้ามามี บทบาทในชีวิตประจาวันนของคนเรามากยิ่งขึ้น โดยมีตัวอย่างการนาไปใช้ประโยชน์ต่องานด้านต่างๆ มากมาย ความก้าวหน้าของเทคโนโลยีคอมพิวเตอร์ ในปัจจุบัน ทาให้มัลติมีเดียจะถูกนาไปใช้ประโยชน์ ในงานด้านต่างๆ ในแทบจะทุกแขนง ไม่ว่าจะเป็นด้านวิทยาศาสตร์ ด้านการแพทย์และสาธารณสุข ด้าน วิศวกรรม สถาปัตยกรรม ด้านธุรกิจการค้า ด้านสื่อสารมวลชน และโดยเฉพาะอย่างยิ่งด้านการศึกษา ที่มกี ารพัฒนานาไปใช้ในการเรียนการสอนอย่างต่อเนื่อง

136

กิจกรรมภาคปฏิบัติ ใบงานที่ 9 1. วัตถุประสงค์ 1.1 เพื่อให้นสิ ิตฝึกออกแบบสื่อเชิงโต้ตอบ (Interactive Multimedia Design) 1.2 เพื่อให้นสิ ิตได้มปี ระสบการณ์ในการนาเสนอผลงาน และได้แลกเปลี่ยนความคิดเห็นร่วมกัน กันในชั้นเรียน 2. สาระสาคัญ กิจกรรมใน ใบงานที่ 9 : การออกแบบสื่อเชิงโต้ตอบ (Interactive Multimedia Design) เป็ น การเสริ ม ความเข้ า ใจในบทเรี ย น และกระตุ้ น ให้ นิ สิ ต ได้ ต ะหนั ก ถึ ง บทบาทของงานออกแบบ มัลติมีเดียที่ถูกนาไปใช้ประโยชน์ในงานด้านต่างๆ 3. วิธีการ ผู้สอนอธิบายและแลกเปลี่ยนความคิดเห็นกับนิสิตในประเด็นที่เกี่ยวข้องกับเนื้อหาของบทที่ 9 จากนั้ น ให้ นิ สิ ต กลุ่ ม ละ 3 คน ช่ ว ยกั น ค้ น คว้ า และ ออกแบบสื่ อ เชิ ง โต้ ต อบ (Interactive Multimedia Design) ที่กลุ่มตนคิดว่าจะสามารถนาไปใช้ประโยชน์ในงานด้านต่างๆ ได้ในชีวิตประจาวัน เมื่อออกแบบ เสร็จแล้วให้นิสติ นาเสนอผลงาน และแลกเปลี่ยนความคิดเห็นร่วมกันกันในชั้นเรียน ตัวอย่าง: การออกแบบสื่อเชิงโต้ตอบ (Interactive Multimedia) กรณีศกึ ษา: การสร้างแอพลิเคชันสมาร์ทโฟนที่มคี วามสามารถดังนี้ 1. ผู้ใช้สามารถกดชงกาแฟเอสเปรสโซ่ผ่านWi-Fi โดยสามารถเลือกปริมาณโฟมนม หรืออาจ เปลีย่ นจากเอสเปรสโซ่เป็นลาเต้ คาปูชโิ น่ หรือเครื่องดื่มชนิดอื่นๆ ได้ดังใจ 2. ผูใ้ ช้สามารถประเมินการชงของตัวเองได้ 3. การเชิญเข้าประชุมจะถูกเชื่อมต่อเข้าไปในปฏิทินโทรศัพท์ซึ่งผู้เข้าประชุมจะสามารถเห็นเมนู กาแฟ และจะสามารถเลือกกาแฟที่ตนชอบได้ก่อนเวลาเข้าประชุม

137

ภาพ 9 แสดงการออกแบบแอพลิเคชันเครื่องชงกาแฟด้วยร่างแบบกระดาษ ที่มา https://chetmhcid.wordpress.com/2014/01/

138

ภาพ 10 แสดงการออกแบบแอพลิเคชันเครื่องชงกาแฟ ที่มา http://www.decidyn.com/ultra-modern-kitchens-smartphone-coffee-maker-alarm-clockwifi-operated-coffee-machine-coffee-machine/

139

บทที่ 10 ฮาร์ดแวร์และซอฟต์แวร์ที่นามาใช้กับงานมัลติมีเดีย หัวข้อเนื้อหาประจาบท 1. หน่วยประมวลผลกลาง (Central Processing Unit : CPU) 2. ฮาร์ดดิสก์ (Hard Disk) 3. จอภาพ (Monitor) 4. เครื่องอ่านซีดรี อม (CD-ROM) ดีวีดี (DVD) บลูเรย์ (Blu-ray) 5. ซาวนด์การ์ด (Sound Card) 6. อุปกรณ์รับข้อมูล (Input Device) 7. ลาโพงภายนอก (External Speaker) 8. ซอฟต์แวร์ (Software) 9. เว็บบราวเซอร์ (Web Browser) 10. เครื่องมือและเทคโนโลยี (Tools and Technology) วัตถุประสงค์ 1. รู้จักและมีความเข้าใจเบือ้ งต้นเกี่ยวกับทางานของฮาร์ดแวร์และซอฟต์แวร์ที่นามาใช้กับงาน มัลติมีเดียได้ 2. สามารถเลือกใช้ซอฟต์แวร์และเครื่องมือออกแบบกราฟิกและมัลติมีเดียได้อย่างเหมาะสม และมีประสิทธิภาพ เวลาเรียน สัปดาห์ที่ 15 กิจกรรมการเรียนการสอน 1. การบรรยาย 2. การอภิปรายและการซักถามเกี่ยวกับเนือ้ หาในบทเรียนร่วมกัน 3. กาหนดประเด็นปัญหาเพื่อศึกษาค้นคว้าเพิ่มเติม

140

10.1 หน่วยประมวลผลกลาง (Central Processing Unit: CPU) หน่วยประมวลผลกลาง(CPU) ที่ทางานเร็วจะทาให้การตอบสนองคาสั่งเป็นไปอย่างรวดเร็ว โดย CPU จะทาหน้าที่เก็บข้อมูลคาสั่งและผลลัพธ์ ตลอดจนควบคุมและประสานงานทั้งระบบ ส่วนสาคัญ ของ CPU คื อ หน่ ว ยควบคุ ม (Control Unit) มี ห น้ า ที่ แ ปลความหมายของค าสั่ ง ที่ รั บ ไปเก็ บ ไว้ ใ น หน่ว ยความจา จัด ล าดั บ การท างานให้หน่วยต่างๆ และควบคุมการปฏิบัติ งานของหน่วยอื่นๆ เช่น ควบคุมการรับและการส่งข้อมูลไปยังอุปกรณ์อื่นๆ ควบคุมการบันทึกข้อมูล ควบคุมการนาข้อมูลเข้า ออก จากหน่วยความจาหลัก เป็นต้น

ภาพ 1 แสดงหน่วยประมวลผลกลาง (Central Processing Unit: CPU) ที่มา https://www.amazon.com/Intel-Extreme-i7-5960X-Octa-core-Processor/dp/B00N1O4RRY 10.2 ฮาร์ดดิสก์ (Hard Disk) สาหรับจัดเก็บข้อมูลที่มีขนาดใหญ่ เนื่องจากการผลิตสื่อมัลติมีเดียจาเป็นต้องใช้พื้นที่ขนาด ใหญ่ในการจัดเก็บไฟล์ หน่วยเก็บข้อมูลหรือหน่วยความจา(Memory Unit) ทาหน้าที่เก็บข้อมูลและคาสั่ง ที่ ห น่ ว ยรั บ ข้ อ มู ล เข้ า มา หน่ ว ยความจ ามี 2 ประเภทคื อ หน่ ว ยความจ าหลั ก ซึ่ ง เชื่ อ มอยู่ กั บ หน่ วย ประมวลผลกลางโดยตรง หน่ ว ยความจ าหลั ก นี้ ใ ช้ เ ป็ น ที่ เ ก็ บ ข้ อ มู ล และค าสั่ ง ต่ า งๆ ในการสั่ ง คอมพิ ว เตอร์ ป ระมวลผล ส่ ว นหน่ ว ยความจ าส ารองเป็ น หน่ ว ยความจ าที่ มี ลั ก ษณะถาวรกว่ า หน่ ว ยความจ าหลั ก คื อ เมื่ อ บั น ทึ ก แล้ ว จะไม่ สู ญ เสี ย หรื อ ลบเลื อ นไป นอกจากจะใช้ ค าสั่ ง แก้ ไ ข เปลี่ยนแปลงหน่วยความจาสารองนั้น สามารถบันทึกเก็บข้อมูลได้ในปริมาณที่มากกว่าหน่วยความจา หลายสิบเท่า

141

ภาพ 2 แสดงฮาร์ดดิสก์ (Hard Disk) ที่มา https://www.dailygizmo.tv/2017/06/15/how-to-fix-hard-disk-cant-open-file/ 10.3 จอภาพ (Monitor) จอภาพสีและแผงวงจรควบคุมการแสดงผลจอภาพ ที่สามารถแสดงภาพที่มีความคมชัดและ ความละเอีย ดสู ง แผงวงจรแสดงผลท าหน้ าที่ส าหรับ แปลงข้ อมูล จากเครื่ องคอมพิ วเตอร์ เพื่อน า สัญญาณที่ได้ไปแสดงผลที่จอภาพ ดังนั้นการที่แผงวงจรแสดงผลที่ มีประสิทธิภาพและมีหน่วยความจา บนแผงวงจรจานวนมากจะทาให้แสดงภาพได้ด้วยความละเอียดสูงและมีจานวนสีมาก

ภาพ 3 แสดงจอภาพ (Monitor) ที่มา http://www.bestbuy.ca/en-ca/product/asus-asus-31-5-wqhd-60hz-5ms-ips-led-monitorva32aq-va32aq/10460629.aspx

142

10.4 เครื่องอ่านซีดรี อม (CD-ROM) ดีวีดี (DVD) บลูเรย์ (Blu-ray) เครื่องอ่านซีดรี อมนับว่าเป็นส่วนประกอบที่สาคัญในการจัดเก็บข้อมูลและการนาเสนองานด้าน มัลติมีเดีย คุณสมบัติพื้นฐานของเครื่องซีดีรอมก็คือ ความเร็วในการเข้าถึงข้อมูล รวมทั้งอัตราการส่ง ถ่ ายข้อมูล เพื่ออ านวยความสะดวกในการจัดการเกี่ย วกั บ ภาพโดยเฉพาะอย่ างยิ่ง ในการน าเสนอ ภาพเคลื่อนไหวที่ต้องแสดงผลของแต่ละภาพอย่างต่อเนื่อง

ภาพ 4 แสดงเครื่องอ่านซีดีรอม (CD-ROM) ดีวีดี (DVD) บลูเรย์ (Blu-ray) ที่มา https://www.amazon.com/Samsung-BD-P1600-1080p-Blu-ray-Player/dp/B001TK3D4A 10.5 ซาวนด์การ์ด (Sound Card) ซาวนด์ ก าร์ ด (Sound Card หรื อ Sound Board) หรื อ แผงวงจรเสี ย งมี ห น้า ที่ หลั ก ในการเก็ บ บันทึกเสียง และแสดงผลเสียงจากโปรแกรมสาหรับงานด้านมัลติมีเดีย สามารถทาการบันทึกเสียงจาก แหล่งกาเนิดเสียงต่างๆ เช่นไมโครโฟน เครื่องดนตรี หรือแหล่งกาเนิดเสียงอื่นๆ จากนั้นจะทาการแปลง สัญญาณให้อยู่ในรูปแบบของดิจทิ ัล ซึ่งสามารถเก็บไฟล์เสียงไว้ในหน่วยจัดเก็บข้อมูลสารอง

ภาพ 5 แสดงซาวนด์การ์ด (Sound Card) ที่มา https://www.newegg.com/Sound-Cards/SubCategory/ID-57

143

10.6 อุปกรณ์รับข้อมูล (Input Device) ประกอบด้วยคีย์บอร์ด (Keyboard) สาหรับป้อนข้ อความหรือตัวอักษรและเมาส์( Mouse) ทา หน้าที่ค วบคุ มการใช้ ง านผ่ า นทางหน้ า จอ โดยสามารถเพิ่ม อุป กรณ์รั บ ข้อ มูล ในรูป แบบอื่น ได้ เช่น สแกนเนอร์ (Scanner) จะแปลงรูป ภาพบนกระดาษให้อยู่ใ นรูปแบบอิเล็กทรอนิก ส์ และการ์ดวิดี โอ (Video Capture Card) ท าหน้ า ที่ แ ปลงสั ญ ญาณจากอนาล็ อ ก (Analog) ให้ เ ป็ น ดิ จิ ทั ล (Digital) เพื่ อ จัดเก็บข้อมูลบนเครื่องคอมพิวเตอร์ได้

ภาพ 6 แสดงอุปกรณ์รับข้อมูล (Input Device) ที่มา http://www.computershopper.com/ces-2017/first-look-the-radically-restyled-dell-xps-27all-in-one/dell-xps-27-all-in-one-2017-input-devices 10.7 ลาโพงภายนอก (External Speaker) ล าโพงภายนอก (External Speaker) เป็ น ส่ ว นส าคั ญ ที่ ส นั บ สนุ น ให้ มั ล ติ มี เ ดี ย คอมพิ ว เตอร์ สามารถเล่นเสียงเพลง และเพิ่มคุณภาพในหลายระดับด้วยกัน เช่น ระดับธรรมดา ระดับคุณภาพสูงที่ ประกอบด้วยทั้งลาโพงเสียงแหลม ลาโพงเสียงกลางและลาโพงเสียงทุ้ม

ภาพ 7 แสดงลาโพงภายนอก (External Speaker) ที่มา https://www.amazon.com/AmazonBasics-Powered-Computer-SpeakersA100/dp/B00GHY5F3K

144

10.8 ซอฟต์แวร์ (Software) สาหรับผลิตสื่อมัลติมีเดีย ได้แก่ “Editing Software” ใช้สาหรับแก้ไข และจัดการองค์ประกอบ ของสื่ อ เช่ น โปรแกรมส าหรั บ แก้ ไ ขรู ป ภาพ ได้ แ ก่ โปรแกรม Adobe Photoshop และ CorelDraw โปรแกรมสาหรับแก้ไขไฟล์เสียง ได้แก่ โปรแกรม Cool Edit และ Sound Forge โปรแกรมสาหรับแก้ไข ไฟล์วิดีโอได้แก่ โปรแกรม Adobe Premiere และ Adobe After Effect และโปรแกรมสาหรับสร้างหนัง แอนิเมชัน ได้แก่ โปรแกรม Adobe Flash และ 3D Studio Max 10.8.1 ซอฟต์แวร์สาหรับสร้างสื่อมัลติมีเดีย (Multimedia Authoring) เป็นซอฟต์แวร์ที่ผนวกเอาสื่อหลาย ๆ ชนิด (multimedia) เช่น ข้อความ เสียง รูปภาพ รวมถึงเทคนิคการเคลื่อนไหวต่าง ๆ มาประกอบกันเพื่อให้การนาเสนอมีความน่าสนใจมาก ยิ่งขึ้น รวมถึงความสามารถในการสร้างชิ้นงานประเภทสื่อปฏิสัมพันธ์กับผู้ใช้ (interactive) ซึ่ง ท าให้ ผ ลงานที่ ผ ลิ ต ได้ มี ค วามน่ า สนใจและใช้ ง านง่ า ยมากยิ่ ง ขึ้ น เหมาะส าหรั บ การน าไป ประยุกต์ใช้กับสื่อบทเรียนคอมพิวเตอร์ช่วยสอน การนาเสนองานขั้นสูง รวมถึงการจัดทา CDTraining ต่าง ๆ ด้วย 10.8.2 ซอฟต์แวร์สาหรับการตัดต่อวิดีโอและเสียง (Video and audio editing) เป็ น ซอฟต์ แ วร์ ที่ มี คุ ณ สมบั ติ ห ลั ก ๆ คื อ การจั ด การเสี ย งและรู ป แบบไฟล์ ที่ เ ป็ น ภาพเคลื่อนไหว เช่น การตัดต่อวิดีโอ การผสมเสียง การสร้างเอฟเฟ็คต์สาหรับภาพเคลื่อนไหว เหมาะสาหรับใช้กับงานวงการตัดต่อภาพยนตร์ โทรทัศน์และสตูดิโอบันทึกเสียงต่าง ๆ

10.9 เว็บบราวเซอร์ (Web Browser) เช่น Internet Explorer เป็นต้น จะเชื่อมต่อกั บ โปรแกรม Media Player เช่น QuickTime Movie Player หรื อ Real Media Player เป็ น ต้ น เพื่ อ แสดงผลมั ล ติ มี เ ดี ย บนเครื อ ข่ า ยอิ น เทอร์ เ น็ ต รวมทั้ ง โปรแกรมส าหรั บ อ่ า นเอกสารต่ า งๆ เช่ น Power Point Viewer หรื อ Adobe Reader การสร้ า งเว็ บ มั ล ติ มี เ ดี ย สามารถสร้ า งได้ จ ากโปรแกรมต่ า งๆ เช่ น Microsoft Front Page และ Dreamweaver ซึ่ ง สามารถสร้างการเชื่อมโยงกับมัลติมีเดียด้วยภาษา HTML และ JavaScript เป็นต้น

145

10.10 เครื่องมือและเทคโนโลยี (Tools and Technology) 10.10.1 Photoshop โปรแกรม Photoshop เป็นโปรแกรมมาตรฐานสาหรับการจัดการรูปภาพแบบ Raster นิยมใช้โปรแกรมนี้ในการตัดต่อ (Montage) และตกแต่งภาพ (Retouch) บางครัง้ อาจมีการใช้ขอ้ ความมา ประกอบรูปภาพ และแปลงทั้งข้อความและรูปภาพให้อยู่บนพื้นฐานดิจิทัลเดียวกัน โปรแกรมนี้ยังมี เครื่องมือที่นา่ สนใจหลายอย่าง เช่น - Marquee Tool (M)

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

- Magic Wand Tool (W)

เป็นเครื่องมือเลือกพื้นที่ที่มีสีเดียวกันหรือใกล้เคียงกัน สามารถ กาหนดความใกล้เคียงกันของสีเพื่อเลือกพืน้ ที่ได้จาก Tolerance ยิ่ง ค่าน้อยหรือเท่ากับ 1 แสดงว่าพืน้ ที่สีนั้นมีความใกล้เคียงกันสู งหรือ เป็นสีเ ดีย วกั นทั้ง หมด และหากไม่ไ ด้ค ลิ ก เลือ กกล่ อ งเครื่ อ งมื อ Contiguous โปรแกรมจะเลือกทุกพื้นที่ของแผ่นงานที่มีสีเดียวกับที่ เลือกไว้ โดยไม่สนใจว่าจะเชื่อมถึงกันหรือไม่ หากต้องการเลือก พื้นที่เพิ่มให้กดปุ่ม Shift ค้างไว้ก่อนคลิก และหากต้องการตัดพืน้ ที่ อืน่ ออกให้กดปุ่ม Alt ค้างไว้ก่อนคลิก

- Pen Tool (P)

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

146

- Lasso Tool (L)

เครื่องมือที่ใช้ลากเพื่อเลือกพื้นที่อย่างอิสระ โดยเราอาจจะกดปุ่ม Shift ค้างไว้และลากพื้นที่อื่นๆ เพิ่มเติม หรือกดปุ่ม Alt ค้างไว้เพื่อ ลบพื้ น ที่ ที่ ไ ม่ ต้ อ งการเลื อ กออกไป ส่ ว น Polygonal Lasso คื อ เครื่องมือแบบเดียวกันแต่จะใช้สร้างเส้นตรงเพื่อปิดล้อมพื้นที่ ได้ อย่างรวดเร็ว โดยโปรแกรมจะพิจารณาจากความแตกต่างกันของ สีนั่นเอง เครื่องมือเลือกพื้นที่นี้เ ป็นวิธีสาคัญ ในการก๊อปปี้รูปใน พื้นที่นั้นๆ ไปวางไว้อีกเลเยอร์หนึ่ง หรือใช้ในการตัดพื้นหลังของรูป นั้นออกไป

- Brush Tool (B)

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

10.10.2 Illustrator โปรแกรม Illustrator เป็นโปรแกรมที่มีพื้นฐานการทางานแบบเวคเตอร์ มักนิยมใช้ในการสร้าง ภาพกราฟิก, โลโก้ และใช้ในการออกแบบเลย์เอาต์หน้ากระดาษ เนื่องจากโปรแกรมรองรับการทางาน แบบไม่สู ญ เสีย รายละเอีย ดและการจัด การเนื้อความ ซึ่งมีจุดประสงค์ที่แตกต่า งไปจากโปรแกรม Photoshop แต่อย่างไรก็ตามนักออกแบบควรที่จะเรียนรู้ที่จะใช้ทั้งสองโปรแกรม มีหลายเครื่องมือในโปรแกรม Illustrator ที่เหมือนกันกับในโปรแกรมในเครือ Adobe อื่นๆ เช่น Selection Tools, Lassos และ Pen Tools ตั ว อย่ า งด้ า นล่ า งแสดง 5 เครื่ อ งมื อ ที่ นิ ย มใช้ ใ นโปรแกรม Illustrator ปุ่มลัดเพื่อเรียกใช้งานแต่ละเครื่องมือแสดงอยู่ในวงเล็บ

147

- Pen Tool (P)

สร้างเส้นเวคเตอร์ ที่สามารถปรับแต่งหรือแก้ไขได้อย่างอิสระ

- Type Tool (T)

เครื่องมือจัดการกับตัวอักษรที่มีประโยชน์ต่อการสร้างโลโก้หรือ จัดการกับย่อหน้าต่างๆ

- Rectangle Tool (M)

สร้างวัตถุเป็นรูปทรงต่างๆ

- Warp Tools (Shift + R)

เครื่ อ งมื อ เปลี่ ย นรู ป ทรงของวั ต ถุ เช่ น Warp Tool ใช้ ใ นการลาก พื้นที่ให้กับวัตถุ, Twirl Tool ใช้ในการบิดเกลียวรูปทรงหรือสี ส่วน Crystallize Tool ใช้ในการแกะขอบของรูปทรงหรือสี

- Mesh Tool (U)

ไล่สีใ ห้กั บ วัตถุ 2 มิติ ยกตัวอย่างเช่น เราอาจสร้างรูป ดาวจาก เครื่องมือ Star Tool จากนั้นคลิกที่วัตถุและเลือกใช้ Mesh Tool ให้ การเติ ม สี แ บบไล่ ร ะดั บ ซึ่ ง สามารถกลั บ มาแก้ ไ ขได้ ใ หม่ ต าม ต้องการ

10.10.3 Flash และ After Effects โปรแกรม Flash และ After Effects เป็นโปรแกรมหลักที่ใช้กับงานที่เกี่ยวข้องกับลาดับ เวลา ในการสร้าง “ภาพเคลื่อนไหว” แสดงบนหน้าจอหรือเว็บไซต์ การทางานต้องอาศัยเส้นเวลา Timeline และ Keyframe สามารถท างานร่ ว มกั น ได้ ทั้ ง ภาพแบบพิ ก เซลและเวคเตอร์ ก ราฟิ ก โดย โปรแกรมทั้งสองนั้นต่างที่การประมวลผล และการนาเสนอไปยังผูช้ ม Flash นิยมใช้ในการสร้างแอพลิเคชันหรือแอนิเมชันบนเว็บไซต์ ซึ่งมีคุณสมบัติต่างๆ ดังนี้ - ภาพกราฟิกสามารถนามาเปิดในโปรแกรม Flash เพื่อทาเป็นภาพเคลื่อนไหว หรือ สามารถออกแบบได้ดว้ ยตัวโปรแกรมเลย

148

- แอนิเมชันที่มีความซับซ้อน เช่น ผลของต้นโอ๊คที่กาลังเติบโตเป็นต้นอ่อน ต้องมีการ วาดแต่ละช่วงของการเติบโตไว้ใน Keyframe ก่อนจะใช้คาสั่ง Tween เพื่อให้ค่อยๆ เปลี่ยนจากรูปใน Keyframe หนึ่งไปยัง Keyframe ถัดไป หากเรากาหนดจานวนเฟรมต่อนาที (Frame Rate) ให้มากขึ้น ภาพจะมีการเปลี่ยนแปลงอย่างราบรื่นมากขึ้น - แต่ละวัตถุอาจถูกกาหนดการเคลื่อนไหวเป็นของตนเอง เช่น การหมุนของใบไม้แต่ละ ใบที่กาลังตกลงสู่พืน้ ดิน - โปรแกรม Flash รองรับ Action Script ซึ่งเป็นเหมือนภาษาคอมพิวเตอร์ที่ใช้กาหนดค่า ต่างๆ และกาหนดเวลาในแอนิเมชันที่ซับซ้อน - มีเครือข่ายผู้ใช้งานที่ร่วมกันแบ่งปัน Script ของโปรแกรมเพื่อการใช้งานที่หลากหลาย มากขึ้ น ผลมาจาก Flash อย่ า งแอนิ เ มชั น , ปุ่ ม ด าเนิ น การ, หรื อ วิ ดี โ อนั้ น สามารถพบได้ บ่ อ ยๆบน อินเตอร์เน็ต After Effects มักใช้กับรูปภาพแบบ Raster โดยสามารถดึงรูปหรือวิดีโอคลิปมาจาก Photoshop, กล้องวิดีโอ หรือ แอนิเมชันต่างๆ รวมถึงการใส่เอฟเฟ็กต์หลังจากที่ถ่ายวิดีโอมาแล้ว ไฟล์ที่ได้มักเป็น ไฟล์ที่คอมพิวเตอร์ส่วนใหญ่สามารถเปิดได้โดยไม่ต้องติดตั้งโปรแกรมเพื่อเปิดเฉพาะ (เช่น .mpeg หรือ .qt [Quicktime]) คลิป วิดีโ อและรูปนิ่งจะถู กนามาเรียงกั นในแถบเวลาและสามารถใส่ เสียงประกอบ เพิ่มเติมได้ ส่ว นการเปลี่ย นวิดีโ อหรือ Transition และ Fade สามารถลากมาใส่ระหว่างวิดีโ อได้เลย นอกจากนั้นยังมีฟิลเตอร์และเอฟเฟ็กต์ให้เลือกใช้มากมาย หน้าต่างการทางานของโปรแกรม Flash มีความคล้ายคลึงกับโปรแกรมอื่นๆในเครือ Adobe และแตกต่างจาก After Effect ที่มีหน้าตาคล้ายกับโปรแกรมตัดต่อวิดีโออื่นๆมากกว่า ตัวอย่างด้านล่าง แสดงเครื่องมือและหล่งข้อมูลที่เป็นประโยชน์ - Flash: Bone Tool

เป็นเครื่องมือสร้างข้อต่อกระดูกให้กับชิ้นงาน และใช้ ควบคุ ม ส่ ว นต่ า งๆ ของชิ้ น งาน (Inverse Kinematics, IK) หรือใช้ใ นการเชื่ อ มชิ้ นงานแต่ ละส่วนเข้า ด้ ว ยกั น และมีความสัมพันธ์ระหว่างกัน เช่น หากชิ้นงานส่วน หนึ่งมีการเคลื่อนไหว ย่อมส่งผลต่อเนื่องไปยังชิ้นงานที่ ยึดติดกันด้วยข้อต่อกระดูกนี้

149

- Flash: เครื่องมือและแอพลิเคชันออนไลน์ เว็บไซต์ www.swftools.com มีเครื่องมือในการแปลง PowerPoint ไปเป็น Flash, เครื่องมือสร้างผลงานสาม มิติ และเครื่องมือเกี่ยวกับแอนิเมชัน อื่นๆ ส่วนเว็บไซต์ www.actionscript.org นั้ น มี เ นื้ อ หาการสอนการใช้ ActionScript และมี Script ให้ ไ ด้ เ ลื อ กใช้ แ ละมี บ อร์ ด สนทนาระหว่างผู้ใช้งานด้วย

- After Effect: เอฟเฟ็กต์การ์ตูน

เป็นเอฟเฟ็กต์ที่แปลงภาพให้เป็นการ์ตูน แบบเดียวกับ หนั ง เรื่ อ ง A Scanner Darkly หรื อ หนั ง ที่ มี ก ารตั ด ตั ว ละครหรื อ สิ่ ง ของออกจากพื้ น หลั ง ( Rotoscope) สามารถเลือกใช้เอฟเฟ็กต์การ์ตูนได้โดยการเลือกเมนู Preset และเลือก Cartoon อาจปรับแต่งค่าความเบลอ เพื่อให้สีของภาพดูแ บน รวมถึงลดรายละเอีย ดของ ภาพลงเพื่อให้ดูเหมือนภาพการ์ตูนมากขึ้น

- After Effect: Mocha

เป็นเครื่องมือที่ใช้ในการติดตามวัตถุที่เคลื่อนไหวใน วิ ดี โ อ และก าหนดให้ ข้ อ ความ รู ป หรื อ สั ญ ลั ก ษณ์ เคลื่อนไหวไปตามวัตถุนั้นๆ เช่น ใช้ในการแทนที่ภาพ บางส่วน เช่น เปลี่ยนภาพโฆษณาที่ตดิ อยู่ที่ข้างรถยนต์ ที่กาลังเคลื่อนที่ เป็นต้น

150

10.11 สรุป การพั ฒนาฮาร์ด แวร์และซอฟต์แวร์สาหรับมัลติมีเ ดีย ถูก กาหนดมาตรฐานโดย Multimedia Marketing Council (MMC) ซึ่งเป็นคณะกรรมการที่ทาหน้าที่กาหนดมาตรฐานให้กับเทคโนโลยีมัลติมีเดีย บนเครื่องคอมพิวเตอร์ (Multimedia Personal Computer : MPC) ทาให้การพัฒนามัลติมีเดียของผู้ผลิต ต่ า งๆ มี ค วามเป็ น มาตรฐานสากล นอกจากนี้ ค ณะกรรมการยั ง ประกอบด้ วยองค์ ก รต่ า งๆ ได้แก่ Creative Labs Inc, Fujitsu, Media Vision, Microsoft Corporation, NEC Technology, Olivetti, Consumer Electronic Co. และ Zenith Data System ร่ ว มกั น ท าหน้ า ที่ ระบุ ร ายละเอี ย ดเกี่ ย วกั บ ฮาร์ ด แวร์ แ ละ ซอฟต์แวร์ที่ใช้สาหรับพัฒนา และแสดงผลมัลติมีเดียบนเครื่องคอมพิวเตอร์ ฮาร์ดแวร์และซอฟต์แวร์ที่ นามาใช้ในการแสดงผลมัลติมีเดีย ประกอบด้วย หน่วยประมวลผลกลาง (Central Processing Unit : CPU), ฮาร์ดดิสก์ (Hard Disk), จอภาพ (Monitor), เครื่องอ่านซีดีรอม (CD-ROM) ดีวีดี (DVD) บลูเรย์ (Blu-ray), ซาวนด์การ์ด (Sound Card), อุปกรณ์รับข้อมูล (Input Device), ลาโพงภายนอก (External Speaker), ซอฟต์แวร์ (Software) และเว็บบราวเซอร์ (Web Browser) นอกจากนี้ ในบทนีไ้ ด้แนะนาซอฟต์แวร์และเครื่องมือที่นยิ มใช้ในอุตสาหกรรมการออกแบบกรา ฟิก โดยทุกโปรแกรมย่อมมีการพัฒนาอย่างต่อเนื่องเพื่อให้สะดวกต่อการสร้างสรรค์งานกราฟิก หนึ่ง ในวิธีฝึกตัวเองให้เกิดการเรียนรู้อย่างต่อเนื่อง คือ พยายามสร้างความคุ้ นเคยกับฟังก์ชันต่างๆ และ สะสมประสบการณ์การฝึกฝน

151

กิจกรรมภาคปฏิบัติ ใบงานที่ 10 1. วัตถุประสงค์ 1.1 เพื่อให้นิสิตได้ฝึกหัดการใช้ซอฟต์แวร์และเครื่องมือที่นิยมใช้ในอุตสาหกรรมการออกแบบ กราฟิกและมัลติมเี ดีย 1.2 เพื่อให้นสิ ิตได้มปี ระสบการณ์ในการนาเสนอผลงาน และได้แลกเปลี่ยนความคิดเห็นร่วมกัน กันในชั้นเรียน 2. สาระสาคัญ กิจกรรมใน ใบงานที่ 10 : แบบฝึกหัดการใช้ซอฟต์แวร์ (Software Practice) เป็นการเสริม ความเข้าใจในบทเรีย น และกระตุ้นให้นิสิต ได้ฝึกฝนการใช้งานซอฟต์แวร์และเครื่องมือที่นิยมใช้ใน อุตสาหกรรมการออกแบบกราฟิกและมัลติมเี ดีย 3. วิธีการ 3.1 แบบฝึกหัดที่ 1 : การสร้างภาพตัดต่อด้วยโปรแกรม Photoshop 1. เลือกภาพวัตถุมาราว 3 ถึง 5 ภาพจากโฟลเดอร์ที่เก็บรูปก่อนหน้า จากนั้นเลือกพื้นหลังราว 3 ถึง 5 แบบ มาด้วยเช่นกัน 2. เปิดหน้าโปรแกรม Photoshop ขึ้นมาใหม่ จากแท็บ File สร้างแผ่นงานขนาด 8½ x 11 นิ้ว (21.5 x 28 เซนติเมตร) กาหนดความละเอียดของงานที่ 300 dpi ตัง้ ชื่อแผ่นงานว่า “Photomontage 1 ” 3. ใต้แท็บ Layer เลือกเลเยอร์ Background และนารูปพื้นหลังมาวางไว้ในเลเยอร์นี้ 4. ตั ด รู ปวั ต ถุ จ ากนั้น คัด ลอกมาวางไว้บนรู ปใหม่ โดยให้ ส ร้ า งเลเยอร์ ใหม่ต ามวั ต ถุแ ต่ล ะรู ป จากนั้นใช้ เครื่องมือ Move Tool ในการจัดตาแหน่งให้กับวัตถุนนั้ หรือแก้ไขขนาดของวัตถุใหม่ หากกดปุ่ม Shift ค้างไว้จะเป็น การรักษาอัตราส่วนเดิมระหว่างการย่อหรือลดขนาดรูป 5. สร้างรูปตัดต่อจานวน 3 รูปโดยจัดวางวัตถุบนพื้นหลั งในรูปแบบที่แตกต่างกัน ทดลองใช้ฟิลเตอร์ (filter) ในการปรับแก้สี อีกทัง้ ยังช่วยให้ภาพตัดต่อนัน้ ดูสมจริงมากขึ้น ให้ความสาคัญกับการปรับแต่ง สีระหว่างวัตถุและ พื้นหลังให้สัมพันธ์กัน 6. หลังจากตัดต่อรูปจนพอใจแล้ว ให้เซฟไฟล์แบบที่สามารถแก้ไขได้ไว้ก่อน จากนั้นผสานรูปทุกเลเยอร์เข้า ด้วยกัน และครอปตัดรูปให้ได้ขนาดหรืออัตราส่วนที่ต้องการ เซฟใหม่อกี ครัง้ โดยเลือก Save as ตัง้ ชื่อไฟล์ใหม่ให้ ต่างจากเดิม และเลือกเซฟไฟล์แบบบีบอัด ซึ่งจะทาให้ไฟล์มีขนาดเล็กกว่า และสะดวกต่อการนาไปใช้งานต่อ มากกว่า ระวังอย่าลืมเซฟต้นฉบับบเก็บไว้เผื่อมีการแก้ไขต่อไปในอนาคต

152 3.2 แบบฝึกหัดที่ 2 : การสร้างรูปใบไม้ในโปรแกรม Illustrator 1. เลือกเครื่องมือ Arc Tool และวาดเส้น 4 เส้น ดังแสดงในตัวอย่าง โดยให้สองเส้นที่อยู่ตรงกลางประกบกัน เป็น “ก้านของใบไม้” และปลายของทุกเส้นเชื่อมต่อกัน คุณอาจต้องใช้เครื่องมือลูกศร Selection สีขาวในการขยับ จุด Anchor ไปวางในตาแหน่งที่ต้องการ ทาเช่นนีก้ ับทุกๆ เส้น 2. กดปุ่ม Shift ค้างไว้ และคลิกสองเส้นที่อยู่ตรงกลางด้วยเครื่องมือลูกศร Selection สีดา และเปลี่ยนสีเส้น เป็นสีเขียว มีค่าเป็น C80 M15 Y100 K5 จากนั้นเลือกเส้นบนสุดกาหนดเป็นสีเหลืองมีค่าสีเป็น C5 M0 Y100 K0 และเลือกเส้นล่างสุดเป็นสีสนิม มีคา่ สีเป็น C40 M70 Y85 K35 3. เลือกสองเส้นล่างด้วยเครื่องมืลูกศร Selection สีดา ไปคลิกเมนู Object > Blend > Blend Options และ เลือก Smooth Color กดปุ่ม OK จากนั้นกดปุ่ม Alt + B และปุ่ม (สาหรับเครื่อง Mac) หรือ Ctrl (สาหรับเครื่อง PC) 4. คราวนี้เลือกสองเส้นบนและทาแบบเดียวกับขั้นตอนที่ 3 จะได้รูปใบไม้ที่ลงสีครบถ้วน จากนั้นเลือกทั้ง ส่วนบนและล่างของใบไม้ และใช้คาสั่ง Object > Group เพื่อจัดกลุ่มใบไม้เป็นวัตถุช้นิ เดียว

ภาพ 8 แสดงการสร้างรูปใบไม้ในโปรแกรม Illustrator

153 3.3 แบบฝึกหัดที่ 3 : การฝึกใช้โปรแกรม Flash 1. เปิดไฟล์ใหม่ขึ้นมา จากนั้นคุณจะเห็นเลเยอร์แรกชื่อ “Layer 1” ปรากฏอยู่ด้านบนสุดของเส้นเวลา หรือ Timeline 2. เลือกเฟรมแรก จากนั้นนารูปใบไม้ที่สร้างขึ้นมาก่อนหน้านี้ม าวางในผ่นงาน โดยใช้เมนู File > Import > Import to Stage หากคุณยังวาดรูปใบไม้ด้วยโปรแกรม Illustrator ไม่สาเร็จ ให้เลือกรูปอื่นแทนก็ได้ โดยรูปที่นามา แทนจะต้องเป็นรูปที่วาดด้วยลายเส้นเวคเตอร์ 3. เลือกวัตถุบนแผ่นงานและคลิก Modify > Convert to Symbol (หรือกดปุ่ม F8) เพื่อเปลี่ยนจากรู ป เป็ น Symbol จะปรากฏหน้าต่างใหม่ขนึ้ มาตัง้ ชื่อ Symbol ตามต้องการ เลือก Type เป็น Graphic และกดปุม่ OK 4. Symbol ที่สร้างขึน้ จะวางอยูใ่ นเฟรมที่ 1 ของเลเยอร์ที่ 1 เลือกเฟรมที่ 30 และคลิกแท็บ Insert > Timeline> Keyframe (หรือกดปุม่ F6) เพื่อใส่ Keyframe ใหม่ 5. สังเกตว่าแถบเส้นตั้งสีแดง หรือ Playhead ยังอยู่ที่เฟรมที่ 30 หรือไม่ หากยังอยู่ให้ลองขยับรูปใบไม้ไปยัง ตาแหน่งใดก็ได้ในแผ่นงานให้ตา่ งออกไปจากตาแหน่งเดิม 6. เลือกเฟรมใดๆ ก็ได้ตั้งแต่เฟรมที่ 2 ถึง 29 จากนั้นเลือกในช่อง Tween ให้เลือกเป็น Motion ด้านล่างของ หน้าต่างโปรแกรม (หากไม่มีหน้าต่างเครื่องมือ Property Inspector ด้านล่าง ให้ไปที่เมนู Window > Properties > Properties) 7. ไปที่เมนู File > Publish Preview เพื่อแสดงตัวอย่างงาน และปรับแต่งความเฉื่อยในการเคลื่อนที่ของวัตถุ (Easing) หรือการหมุน (Rotation) หรือใส่เสียงประกอบให้กับวัตถุได้จากหน้าต่างเครื่องมือ Property Inspector ด้านล่าง

4. การวัดและประเมินผล ผูส้ อนตรวจสอบผลงานของนิสิต และประเมินผลงานตามเกณฑ์ดังนี้ 4.1 ส่งงานตามกาหนดเวลา (1 คะแนน) 4.2 ความคิดสร้างสรรค์ (1 คะแนน) 4.3 ความครบถ้วนสมบูรณ์ (1 คะแนน) 4.4 ความปราณีตของงาน (1 คะแนน) 4.5 ทักษะการใช้โปรแกรมกราฟิก (1 คะแนน) คะแนนกิจกรรมภาคปฎิบัติ ใบงานที่ 10 รวมเป็น 5 คะแนน

154

บรรณานุกรม ณัฐกร สงคราม. 2557. การออกแบบและพัฒนามัลติมีเดียเพื่อการเรียนรู้. กรุงเทพฯ : สานักพิมพ์ แห่งจุฬาลงกรณ์มหาวิทยาลัย. ณรงค์ ล่าดี. 2550. การออกแบบอินเตอร์เฟส (Interface Design).กรุงเทพฯ : เคทีพี คอมพ์ แอนด์ คอนซัลท์. ทวีศักดิ์ กาญจนสุวรรณ. 2546. Multimedia ฉบับพื้นฐาน. กรุงเทพฯ : เคทีพี คอมพ์ แอนด์ คอน ซัลท์ จากัด. นรินทร์ นาเจริญ , อรชร เรือนค า. 2547. ศิลปะแห่งการเป็นมนุษ ย์ที่มีคุณค่า. คณะมนุษ ยศาสตร์ มหาวิทยาลัยเชียงใหม่ วรลักษณ์ วงศ์โดยหวัง ศิริเจริญ. 2557. ปฏิสัมพันธ์ระหว่างคอมพิวเตอร์กับมนุษย์ สุวิช ถิระโคตร. 2554. เว็บไซต์:ทฤษฎีและหลักการ. มหาสารคาม : มหาวิทยาลัยมหาสารคาม. Ben Shneiderman and Catherine Plaisant, Designing the User Interface. Pearson Education, 2005. David Dabner. Graphic Design School. นนทบุรี : ไอดีซีฯ, 2558. David Sherwin. Creative Workshop. 2557. นนทบุรี: ไอดีซีฯ. Dix, A.J., Finlay, J.E., Abowd, G.D., Beale, R. Human-Computer Interaction. 3 rd ed. Prentice Hall Europe, 2004. Ellen Lupton. Graphic design thinking: beyond brainstorming. นนทบุรี: ไอดีซีฯ, 2557. Nielsen Jacob. Designing Web Usability. Indianapolis: Newriders Publishing, 2000

155

ภาคผนวก

156

ภาคผนวก ก แผนการบริหารการสอนและประมวลรายวิชา แผนการบริหารการสอน รหัสรายวิชา (Course Code) จานวนหน่วยกิต (Course Credit) ชื่อวิชา (Course Title) เงื่อนไขรายวิชา (Course Condition) สถานภาพของวิชา (Course Status) เปิดสอนให้หลักสูตร (Curriculum) ระดับ (Degree) จานวนชั่วโมงที่สอน (Hours)

229221 3 (2-2-5) แนวคิดการออกแบบมัลติมีเดีย (Concepts of Multimedia Design) วิชาแกน ศิลปกรรมศาสตรบัณฑิต สาขาวิชาคอมพิวเตอร์ กราฟิกและมัลติมเี ดีย ปริญญาตรี (Bachelor) ภาคบรรยาย 30 ชั่วโมง ภาคทดลอง/ภาคปฏิบัติ 30 ชั่วโมง รวม 60 ชั่วโมง

รายชื่ออาจารย์ผู้สอน นางสาวรตนพรรษ สุชาติ คาอธิบายรายวิชา (Course Description) ความรู้เบื้องต้นงานออกแบบมัลติมีเดีย องค์ประกอบของมัลติมีเดีย แนวคิดการออกแบบ งานมัลติมีเดีย เทคนิคและกระบวนการสร้างงานมัลติมีเดีย เทคโนโลยีที่เกี่ยวข้องกับงานมัลติมเี ดีย การ ออกแบบจากประสบการณ์ผู้ใช้งาน การใช้ซอฟต์แวร์สาเร็จรูปออกแบบงานมัลติมีเดียเบื้องต้น การ นาเสนอผลงานมัลติมีเดีย การประยุกต์ใช้งานออกแบบมัลติมีเดียกับงานด้านอื่นๆ Introduction to multimedia design, component of multimedia, concepts of multimedia design, technique and process of creating multimedia, related multimedia technology, user experience design, basic using industrial multimedia software tools, multimedia presentation, applying multimedia design to other fields

157

วัตถุประสงค์ (Objectives) 1. เพื่อให้ผู้เรียนมีความรู้เบื้องต้นด้านงานออกแบบมัลติมีเดีย และแนวคิดการออกแบบงาน มัลติมีเดีย 2. เพื่อให้ผู้เรียนเข้าใจองค์ประกอบของมัลติมีเดีย เรียนรู้เทคนิคและกระบวนการสร้างงาน มัลติมีเดีย และสามารถนาเสนอผลงานมัลติมีเดียได้ 3. เพื่ อ ให้ ผู้ เ รี ย นมี ค วามรู้ เ กี่ ย วกั บ การออกแบบจากประสบการณ์ ผู้ ใ ช้ ง าน และสามารถ ประยุกต์ใช้งานออกแบบมัลติมีเดียกับงานด้านอื่นๆได้ 4. เพื่อให้ผเู้ รียนรู้จักเทคโนโลยีที่เกี่ยวข้องกับงานมัลติมีเดีย และสามารถใช้ซอฟต์แวร์สาเร็จรูป ออกแบบงานมัลติมีเดียเบือ้ งต้นได้ ประมวลการเรียนรายวิชา (Course Outline) 1. ภาคเนื้อหา บทที่ 1 ความรู้เบื้องต้นงานออกแบบมัลติมีเดีย 1.1 ความเป็นมาของมัลติมีเดีย 1.2 รูปแบบของมัลติมีเดีย 1.3 ส่วนประกอบของมัลติมีเดีย 1.4 ประโยชน์ของมัลติมีเดีย 1.5 สรุป บทที่ 2 แนวคิดการออกแบบงานมัลติมีเดีย 2.1 หลักการออกแบบของนอร์แมน 2.2 การประเมินการออกแบบของเนลสัน 2.3 สรุป บทที่ 3 ปฏิสัมพันธ์ระหว่างมนุษย์กับคอมพิวเตอร์ 3.1 ความหมายของการปฏิสัมพันธ์ระหว่างมนุษย์และคอมพิวเตอร์ 3.2 เป้าหมายของการศึกษาการปฏิสัมพันธ์ระหว่างมนุษย์และคอมพิวเตอร์ 3.3 ความหมายของมนุษย์ 3.4 พฤติกรรมมนุษย์ บุคลิกภาพ และการรับรู้ 3.5 สรุป

158

บทที่ 4 การออกแบบจากประสบการณ์ผู้ใช้งาน 4.1 ความหมายของประสบการณ์การใช้งานของผูใ้ ช้ 4.2 พืน้ ฐานเกี่ยวกับพฤติกรรมผู้ใช้งาน 4.3 รูปแบบพฤติกรรมของผูใ้ ช้งาน 4.4 สรุป บทที่ 5 หลักการออกแบบหน้าจอ 5.1 ความหมายของการออกแบบหน้าจอ 5.2 หลักการออกแบบทัศนศิลป์ 5.3 หลักการออกแบบพืน้ ฐาน 5.4 หลักการออกแบบส่วนประกอบของมัลติมีเดีย 5.5 สรุป บทที่ 6 กระบวนออกแบบและสร้างงานมัลติมีเดีย 6.1 ขั้นที่ 1 การวางแผน 6.2 ขั้นที่ 2 การออกแบบ 6.3 ขั้นที่ 3 การพัฒนา 6.4 ขั้นที่ 4 การประเมินและปรับปรุง 6.5 สรุป บทที่ 7 ระบบมัลติมีเดียและการออกแบบการกระทา/คาสั่ง 7.1 ระบบมัลติมีเดีย 7.2 การออกแบบการกระทาและคาสั่ง 7.3 ลักษณะของการกระทาและคาสั่ง 7.4 วิธีการออกแบบการจัดวางคาสั่งและการตอบสนอง 7.5 สรุป

159

บทที่ 8 เทคโนโลยีมัลติมีเดีย 8.1 เทคโนโลยีตัวอักษรและข้อความ (Typography and Text) 8.2 เทคโนโลยีภาพกราฟิก (Graphics) 8.3 เทคโนโลยีเสียง (Sound) 8.4 เทคโนโลยีวิดีโอ (Video) 8.5 เทคโนโลยีแอนิเมชั่น (Animation) 8.6 สรุป บทที่ 9 การประยุกต์ใช้งานมัลติมีเดียกับงานด้านอื่นๆ 9.1 การโฆษณา ประชาสัมพันธ์ 9.2 การสื่อสารโทรคมนาคม 9.3 การแพทย์และสาธารณสุข 9.4 การค้าและพาณิชย์ 9.5 การบันเทิงและนันทนาการ 9.6 ภูมศิ าสตร์ 9.8 การพิมพ์ 9.8 การศึกษา 9.9 สรุป บทที่ 10 ฮาร์ดแวร์และซอฟต์แวร์ท่นี ามาใช้กับงานมัลติมีเดีย 10.1 หน่วยประมวลผลกลาง (Central Processing Unit : CPU) 10.2 ฮาร์ดดิสก์ (Hard Disk) 10.3 จอภาพ (Monitor) 10.4 เครื่องอ่านซีดรี อม (CD-ROM) ดีวีดี (DVD) บลูเรย์ (Blu-ray) 10.5 ซาวนด์การ์ด (Sound Card) 10.6 อุปกรณ์รับข้อมูล (Input Device) 10.7 ลาโพงภายนอก (External Speaker) 10.8 ซอฟท์แวร์ (Software) 10.9 เว็บบราวเซอร์ (Web Browser) 10.10 เครื่องมือและเทคโนโลยี (Tools and Technology) 10.11 สรุป

160

2. ภาคปฎิบัติ กิจกรรมภาคปฎิบัติ ใบงาน 1: การพัฒนาเอกลักษณ์ (สวัสดี...เราชื่อ...) กิจกรรมภาคปฏิบัติ ใบงาน 2: การประเมินปัญหาการออกแบบเว็บไซต์ (Website Heuristic Evaluation) กิจกรรมภาคปฎิบัติ ใบงาน 3: การวิจารณ์ผลิตภัณฑ์ที่ออกแบบไม่ดี (Bad Design) กิจกรรมภาคปฎิบัติ ใบงาน 4: การจัดหมวดหมูก่ าร์ด (Card Sorting) กิจกรรมภาคปฎิบัติ ใบงาน 5: ภารกิจใช้งานสิ่งที่ไม่คุ้นเคย (Task Analysis) กิจกรรมภาคปฎิบัติ ใบงาน 6: การสร้างตัวตนผูใ้ ช้ (Persona) กิจกรรมภาคปฎิบัติ ใบงาน 7: การสร้างต้นแบบจากกระดาษ (Paper Prototype) กิจกรรมภาคปฎิบัติ ใบงาน 8: การสร้างต้นแบบด้วยคอมพิวเตอร์ (Online Prototype) กิจกรรมภาคปฎิบัติ ใบงาน 9: การออกแบบสื่อเชิงโต้ตอบ (Interactive Multimedia Design) กิจกรรมภาคปฎิบัติ ใบงาน 10: แบบฝึกหัดการใช้ซอฟต์แวร์ (Software Practice) เนื้อหารายวิชา (Subject Detail) ภาคบรรยาย วันเวลา เนื้อหาวิชา (Date/Time) (Contents)

จานวน ชั่วโมง (Hours) 2

กิจกรรม (Activities)

สื่อการสอน (Materials)

อาจารย์ผู้สอน

ก. บรรยาย ข. แสดง ความคิดเห็น

ก. Computer presentation ข. เอกสาร ประกอบการสอน ก. Computer presentation ข. เอกสาร ประกอบการสอน ก. Computer presentation ข. เอกสาร ประกอบการสอน ก. Computer presentation ข. เอกสาร ประกอบการสอน

อ.รตนพรรษ สุชาติ

สัปดาห์ที่ 1

แนะนารายวิชา ความรู้เบือ้ งต้นงานออกแบบ มัลติมีเดีย

สัปดาห์ที่ 2

แนวคิดการออกแบบงาน มัลติมีเดีย

ก. บรรยาย ข. แสดง ความคิดเห็น

สัปดาห์ที่ 3

การปฏิสัมพันธ์ระหว่างมนุษย์กับ คอมพิวเตอร์

ก. บรรยาย ข. แสดง ความคิดเห็น

สัปดาห์ที่ 4

ปฏิสัมพันธ์ระหว่างมนุษย์กับ คอมพิวเตอร์ (ต่อ)

ก. บรรยาย ข. แสดง ความคิดเห็น

อ.รตนพรรษ สุชาติ

161 วันเวลา เนื้อหาวิชา (Date/Time) (Contents)

จานวน ชั่วโมง (Hours) 2

กิจกรรม (Activities)

สื่อการสอน (Materials)

อาจารย์ผู้สอน

ก. บรรยาย ข. แสดง ความคิดเห็น

ก. Computer presentation ข. เอกสาร ประกอบการสอน ก. Computer presentation ข. เอกสาร ประกอบการสอน ก. Computer presentation ข. เอกสาร ประกอบการสอน

อ.รตนพรรษ สุชาติ

สัปดาห์ที่ 5

การออกแบบจากประสบการณ์ ผู้ใช้งาน

สัปดาห์ที่ 6

การออกแบบจากประสบการณ์ ผู้ใช้งาน (ต่อ)

ก. บรรยาย ข. แสดง ความคิดเห็น

สัปดาห์ที่ 7

การออกแบบหน้าจอ

ก. บรรยาย ข. แสดง ความคิดเห็น

สอบวัดผลกลางภาค 2 ก. บรรยาย ข. แสดง ความคิดเห็น

สัปดาห์ที่ 8

การออกแบบหน้าจอ (ต่อ)

สัปดาห์ที่ 9

กระบวนการสร้างงานมัลติมีเดีย

ก. บรรยาย ข. แสดง ความคิดเห็น

สัปดาห์ที่ 10

กระบวนการสร้างงานมัลติมีเดีย (ต่อ)

ก. บรรยาย ข. แสดง ความคิดเห็น

สัปดาห์ที่ 11

ระบบมัลติมีเดียและการออกแบบ 2 การกระทา/คาสั่ง

ก. บรรยาย ข. แสดง ความคิดเห็น

สัปดาห์ที่ 12

เทคโนโลยีมัลติมีเดีย

ก. บรรยาย ข. แสดง ความคิดเห็น

อ.รตนพรรษ สุชาติ

162 วันเวลา เนื้อหาวิชา (Date/Time) (Contents)

จานวน ชั่วโมง (Hours) 2

กิจกรรม (Activities)

สื่อการสอน (Materials)

อาจารย์ผู้สอน

ก. บรรยาย ข. แสดง ความคิดเห็น

อ.รตนพรรษ สุชาติ

สัปดาห์ที่ 13

เทคโนโลยีมัลติมีเดีย(ต่อ)

สัปดาห์ที่ 14

การประยุกต์ใช้งานมัลติมีเดียกับ งานด้านอื่นๆ

ก. บรรยาย ข. แสดง ความคิดเห็น

สัปดาห์ที่ 15

ฮาร์ดแวร์และซอร์ฟแวร์ที่นามาใช้ 2 กับงานมัลติมเี ดีย

ก. บรรยาย ข. แสดง ความคิดเห็น

สอบวัดผลปลายภาค

อ.รตนพรรษ สุชาติ

163

ภาคทดลอง/ภาคปฏิบัติการ วันเวลา (Date/Time)

เนื้อหาวิชา (Contents)

สัปดาห์ที่ 1

กิจกรรมภาคปฎิบัติ ใบงาน 1 การพัฒนาเอกลักษณ์ (สวัสดี...เราชื่อ)

สัปดาห์ที่ 2 สัปดาห์ที่ 3 สัปดาห์ที่ 4 สัปดาห์ที่ 5 สัปดาห์ที่ 6 สัปดาห์ที่ 7

สัปดาห์ที่ 8 สัปดาห์ที่ 9 สัปดาห์ที่ 10 สัปดาห์ที่ 11 สัปดาห์ที่ 12 สัปดาห์ที่ 13 สัปดาห์ที่ 14 สัปดาห์ที่ 15

จานวน ชั่วโมง (Hours) 2

อาจารย์ผู้สอน

กิจกรรมภาคปฎิบัติ ใบงาน 2 การประเมินปัญหาการออกแบบ เว็บไซต์ (Website Heuristic Evaluation) กิจกรรมภาคปฎิบัติ ใบงาน 3 การวิจารณ์ผลิตภัณฑ์ที่ออกแบบไม่ดี (Bad Design) กิจกรรมภาคปฎิบัติ ใบงาน 3 การวิจารณ์ผลิตภัณฑ์ที่ออกแบบไม่ดี (Bad Design) (ต่อ) กิจกรรมภาคปฎิบัติ ใบงาน 4 การจัดหมวดหมูก่ าร์ด (Card Sorting)

อ.รตนพรรษ สุชาติ

กิจกรรมภาคปฎิบัติ ใบงาน 4 การจัดหมวดหมูก่ าร์ด (Card Sorting) (ต่อ) กิจกรรมภาคปฎิบัติ ใบงาน 5 ภารกิจใช้งานสิ่งทีไ่ ม่คุ้นเคย (Task Analysis) สอบวัดผลกลางภาค

อ.รตนพรรษ สุชาติ

กิจกรรมภาคปฎิบัติ ใบงาน 5 ภารกิจใช้งานสิ่งทีไ่ ม่คุ้นเคย (Task Analysis) (ต่อ) กิจกรรมภาคปฎิบัติ ใบงาน 6 การสร้างตัวตนผู้ใช้ (Persona) กิจกรรมภาคปฎิบัติ ใบงาน 6 การสร้างตัวตนผู้ใช้ (Persona) (ต่อ)

อ.รตนพรรษ สุชาติ

2 2

อ.รตนพรรษ สุชาติ อ.รตนพรรษ สุชาติ

กิจกรรมภาคปฎิบัติ ใบงาน 7 การสร้างต้นแบบจากกระดาษ (Paper Prototype) กิจกรรมภาคปฎิบัติ ใบงาน 8 การสร้างต้นแบบด้วยคอมพิวเตอร์ (Online Prototype) กิจกรรมภาคปฎิบัติ ใบงาน 8 การสร้างต้นแบบด้วยคอมพิวเตอร์ (Online Prototype) (ต่อ) กิจกรรมภาคปฎิบัติ ใบงาน 9 การออกแบบสื่อเชิงโต้ตอบ (Interactive Multimedia Design) กิจกรรมภาคปฎิบัติ ใบงาน 10 แบบฝึกหัดการใช้ซอฟต์แวร์ (Software Practice) สอบวัดผลปลายภาค

อ.รตนพรรษ สุชาติ

164

1. เกณฑ์การวัดผลและประเมินผล (Evaluation criteria) 1.1 ภาคบรรยาย ก. การสอบกลางภาค ข. การสอบปลายภาค 1.2 ภาคทดลอง /ภาคปฏิบัติ ก. กิจกรรมภาคปฎิบัติ รวมทั้งหมด

รวม

50 % 25 % 25 % 50 % 50 % 100 %

2. เกณฑ์การตัดเกรด ใช้สัญลักษณ์ ความหมายและระดับคะแนนของการวัดและประเมินผลรายวิชา ต่างๆ ดังนี้ สัญลักษณ์ ความหมาย A ดีเยี่ยม (Excellent) B+ ดีมาก (Very Good) B ดี (Good) C+ ดีพอใช้ (Fairly Good) C พอใช้ (Fair) D+ อ่อน (Poor) D อ่อนมาก (Very Poor) F ตก (Failed) หมายเหตุ: การตัดเกรด จะพิจารณาจากช่วงคะแนนที่เหมาะสม โดยใช้ทั้งระบบอิงเกณฑ์และ อิงกลุ่มประกอบกัน

165

หนังสืออ้างอิงและเอกสารอ่านประกอบการบรรยาย (Teaching Materials / References) 1. ณัฐกร สงคราม. 2557. การออกแบบและพัฒนามัลติมีเดียเพื่อการเรียนรู้. กรุงเทพฯ : สานักพิมพ์แห่งจุฬาลงกรณ์มหาวิทยาลัย. 2. ณรงค์ ล่าดี. 2550. การออกแบบอินเตอร์เฟส (Interface Design).กรุงเทพฯ : เคทีพี คอมพ์ แอนด์คอนซัลท์. 3. ทวีศักดิ์ กาญจนสุวรรณ. 2546. Multimedia ฉบับพื้นฐาน. กรุงเทพฯ : เคทีพี คอมพ์ แอนด์ คอนซัลท์ จากัด. 4. นริ น ทร์ น าเจริ ญ , อรชร เรื อ นค า. 2547. ศิ ล ปะแห่ ง การเป็ น มนุ ษ ย์ ที่ มี คุ ณ ค่ า . คณะ มนุษยศาสตร์ มหาวิทยาลัยเชียงใหม่ 5. วรลักษณ์ วงศ์โดยหวัง ศิริเจริญ. 2557. ปฏิสัมพันธ์ระหว่างคอมพิวเตอร์กับมนุษย์ 6. สุ วิ ช ถิ ร ะโคตร. 2554. เว็ บ ไซต์ : ทฤษฎี แ ละหลั ก การ. มหาสารคาม : มหาวิ ท ยาลั ย มหาสารคาม. 7. Ben Shneiderman and Catherine Plaisant, Designing the User Interface. Pearson Education, 2005. 8. David Dabner. Graphic Design School. นนทบุรี : ไอดีซีฯ, 2558. 9. David Sherwin. Creative Workshop. 2557. นนทบุรี: ไอดีซีฯ. 10. Dix, A.J., Finlay, J.E., Abowd, G.D., Beale, R. Human-Computer Interaction. 3rd ed. Prentice Hall Europe, 2004. 11. Ellen Lupton. Graphic design thinking: beyond brainstorming. นนทบุ รี : ไอดี ซี ฯ , 2557. 12. Nielsen Jacob. Designing Web Usability. Indianapolis: Newriders Publishing, 2000

166

ภาคผนวก ข แบบประเมินการสอนโดยผู้เรียน