CPE 374 Human Computer Interaction

What? (what did we learn? learn?)     สัปดาห์นี้เราได้เรียนรู้เกี่ยวกับ UX writer ว่ามีหน้าที่ช่วยให้ผู้ใช้งานสามารถเข้าใจและรู้ถึงการใช้งานในแต่ละขั้นตอนได้อย่างง่ายไม่ซับซ้อนโดย UX writer นั้นจะต้องมีความเข้าใจผู้ใช้งานและสามารถออกแบบ UX ได้โดยหลักการของการเขียน UX writing ที่ดีนั้นต้องมีการคิดถึงสิ่งที่ผู้ใช้งานจะคิดว่าเมื่อมาใช้งาน product แล้วจะต้องใช้งานยังไงต้องมีการออกแบบอย่างไรถึงจะคลอบคลุมทุกข้อสงสัยที่มีโอกาสจะเกิดขึ้นขณะที่ใช้งานอยู่และมีการพัฒนาในการวิเคราะห์อยู่เสมอเพื่อที่จะได้การนำมาใช้งานกับผู้ใช้งานที่ดีมากยิ่งขึ้นและเหมาะสมมากยิ่งขึ้นและนอกจากนี้ยังการมีการพูดถึง tagline ที่เป็นคำที่ไม่ได้อธิบายถึงตัว product แต่เป็นการทำให้คนหรือผู้ใช้นั้นเกิดความรู้สึกหรือช่วยให้มีแรงผลักดันจนทำให้เกิดเป็นภาพลักษณ์ภาพจำของคนที่เห็นไปตลอดได้ So what? (why is this important ??)     การทำ UX writing ทำให้ผู้ใช้งานสามารถเข้าใจในสิ่งที่ต้องการสื่อหรือต้องการบอกได้ง่ายมากยิ่งขึ้นและไม่ซับซ้อนบางครั้งก็ยังสามารถทำให้ผู้ใช้งานเกิดความรู้สึกดี ๆ ได้อีกด้วย...

What? (what did we learn? learn?)      สัปดาห์นี้เราได้เรียนรู้เกี่ยวกับ Prototype โดยมีการพูดถึง Design process เกี่ยวกับการทำ design ซึ่งจะต้องหาก่อนว่าปัญหาคืออะไรหรือต้องการอะไรจากนั้นก็บอกแบบและทำตัวต้นแบบและก็สรุปผลซึ่ง การทำ prototype นั้นช่วยให้สามารถที่จะสรุปหาวิธีที่จะทำงานหรือออกแบบได้เร็วมากยิ่งขึ้นและทำให้ได้รับ feedback จากผู้ใช้งานเพื่อให้รู้ถึงความรู้สึกจากผู้ใช้งานจริงว่าควรจะเป็นอย่างไรโดยจะแบ่งออกเป็น 3 ระดับ fidelity คือ 1. Low fidelity คือการทำแบบรวดเร็วเพื่อแสดงให้เห็นถึง interface หรือสิ่งที่เรานึกคิดออกมาให้เห็นภาพ 2.Medium fidelity คือการทำ prototype ที่สามารถทำ interaction ได้ที่มากกว่า low fidelity 3.คือ high fidelity คือ prototype ที่ดูเหมือนเป็น final product ที่เกือบจะสมบูรณ์ นอกจากนี้ยังมีการพูดถึง wizard of oz ที่เป็นการพูดถึงการนำข้อมูลหรือระบบเสมือนมาให้ผู้ใช้ใช้งานจริงแต่ความเป็นจริงระบบนั้นยังไม่ได้มีอยู่เป็นเพียงข้อความ So what? (why is this important ??)      การทำ prototype นั้นช่วยให้ได้ออกแบบและทำตัวต้นแบบออกมาเพื่อด...

 What? (what did we learn? learn?) สัปดาห์นี้เราได้เรียนรู้เกี่ยวกับทฤษฎีของ gestalt ที่เป็นการพูดถึงหารที่เรามองและมองภาพรวมเป็นกลุ่มก้อนหรือเป็นบางสิ่งบางอย่างโดยจะประกอบไปด้วย 6 อย่างคือ 1. Proximity คือองค์ประกอบบางอย่างหากอยู่ใกล้ ๆ กันจะโดนมองเป็นกลุ่ม 2.Similarity คือองค์ประกอบที่มีลักษณะคล้ายคลึงกันจะโดนมองเป็นกลุ่ม 3.Continuity คือการที่ตาจะมองเห็นรูปร่างจากวัตถุที่อยู่ติดกัน 4.Closure คือการที่ตาสามารถรับรู้ถึงรูปร่างหรือลักษณะถึงแม้เส้นจะขาดตอนหรือหายไป 5.Area คือเมื่อมี 2 องค์ประกอบซ้อนทับกันอันที่เล็งกว่าจะถูกมองว่าอยู่ด้านหน้าของอันที่ใหญ่กว่า 6.Symmetry คือการที่ตามองบางสิ่งบางอย่างเป็นสิ่งที่สมมาตรมากยิ่งกว่า นอกจากนี้ยังมีการพูดถึง Whitespace หรือว่าพื้นที่ว่างระหว่างองค์ประกอบเพื่อให้มองง่ายยิ่งขึ้นและ common fate ที่เป็นการพูดถึงองค์ประกอบที่วางไปในทิศทางเดียวกันจะถูกมองเหมือนเคลื่อนที่ไปในทิศทางเดียวกัน หัวข้อต่อมาคือ Color theory เป็นการพูดถึงสีที่สามารถช่วยให้เรียนรู้และความเข้าใจได้ดีมากยิ่งขึ้นโดยสีแบ่งออกเป็น 1.Complimentary คือการใช้สีที่ตัดกันเช่นสีแรกเ...

What ? (what did we learn? learn?)      สัปดาห์นี้เราได้เรียนรู้เกี่ยวกับ representation หรือการแสดงสิ่งที่ต้องการจะสื่อให้ผู้อื่นมีความเข้าใจและ information visualization หรือการเปลี่ยนแปลงและปรับข้อมูลให้สามารถอ่านและเข้าใจข้อมูลได้ง่ายมากยิ่งขึ้นโดยการ representations ที่ดีนั้นควรทำให้ผู้คนเข้าใจข้อมูลที่ต้องการจะสื่อได้ง่ายเช่นการเข้าโฟเดอร์ที่บ่งบอกได้ว่าตอนนี้อยู่ถึงที่ตรงใดและการ Representations นั้นมีหลากหลายรูปแบบขึ้นอยู่กับการใช้งานเช่นตารางเวลาปฏิทินที่บอกรายละเอียดของแต่ละวันทั้งหมดเพื่อให้ผู้ใช้สามารถรู้ตารางงานแต่ละวันแบบละเอียดได้หรือปฏิทินที่บอกแค่ว่าในแต่ละวันมีช่วงเวลาว่างตอนใดบ้างขึ้นอยู่กับความต้องการของผู้ใช้งานสำหรับ Information Visualization คือการแปลงข้อมูลที่มีอยู่ให้ออกมาเป็นรูปแบบที่สามารถอ่านหรือเข้าใจได้ง่ายกว่าข้อมูลดิบหรือสามารถดูแนวโน้มของข้อมูลที่ข้อมูลดิบสามารถดูได้ยากเช่นการนำข้อมูลที่เป็นจุด x y มาพลอตเป็นกราฟที่สามารถจะดูแนวโน้มได้นอกจากนี้ยังมีการพูดถึง Chart Junk ที่เป็นการพูดถึงภาพรวมของสิ่งที่ที่ต้องการจะแสดงก่อนและใส่อย่างอื่...

What ? (what did we learn? learn?)      สัปดาห์นี้เราได้เรียนรู้เกี่ยวกับ Storyboard ว่าคือสิ่งที่เป็น script ให้ข้อมูลหรือทำเป็นบันทึกเกี่ยวกับเหตุการณ์สำคัญ สามารถใช้ในการอธิบายบางอย่างเป็นรูปภาพให้เข้าใจได้ง่ายกว่าการอธิบายเป็นข้อความและยังเป็นสิ่งที่สามารถเติมเต็มในส่วนที่ขาดหายไปใน proposal ได้โดยองค์ประกอบของ storyboard ประกอบไปด้วย 5 ส่วนดังนี้ 1.detail หรือรายละเอียดที่ไม่ต้องลงจนเยอะเกินไปลงในระดับที่มีความเป็นสากลและเข้าใจได้ 2.use of text ข้อความที่จะช่วยให้เข้าใจได้มากขึ้นแต่ไม่ควรยาวเกินไป 3.Include People and Emotion ตัวคนที่จะสามารถบอกความรู้สึกหรืออารมณ์ในสิ่งที่ต้องการให้ผู้เห็นเข้าใจได้ว่าจะสื่อถึงอะไร 4.frames ควรจะมีที่ประมาณ 4-6 frames เพราะการที่มีมากเกินไปอาจจะทำให้หลุดจากสิ่งที่ต้องการสื่อ 5.Passage of Time เป็นการบอกเวลาเพื่อให้เกิดความเข้าใจที่มากยิ่งขึ้น So what ? (why is this important ??)      การทำ storyboard โดยมีองค์ประกอบที่ดีจะทำให้ผู้ที่มาเห็นเกิดความเข้าใจและมองเห็นภาพถึงสิ่งที่ต้องการสื่ออีกทั้งยังช่วยขยายความจ...

  What ? (what did we learn? learn?)      สัปดาห์นี้เราได้เรียนรู้เกี่ยวกับหลักการในการออกแบบสากลโดยประขอบไปด้วย 7 ข้อ 1.Equitable use หรือการออกแบบที่ทำให้สามารถใช้งานได้และขายให้กับผู้คนที่มีความหลากหลายได้ 2.Flexibility in use คือการออกแบบให้มีความยืดหยุ่นในการใช้งานแบบเฉพาะบุคคลเช่นกรรไกรที่สามารถใช้งานได้ทั้งมือซ้ายและมือขวา 3.Simple and Intuitive Use คือการออกแบบที่ทำให้สามารถเข้าใจได้ง่ายและทำให้ผู้ใช้สามารถใช้ความสามารถพื้นฐานในการใช้งานได้ 4.Perceptible Information คือการออกแบบเพื่อขยายความให้คนที่ต้องการใช้งานสามารถเข้าใจได้ง่ายขึ้นเช่นป้ายบอกสถานีญี่ปุ่นที่มีการทำเป็นสัญลักษณ์ของสิ่งที่อยู่ใกล้ของแต่ละสถานีบนป้าย 5.Tolerance for Error คือการออกแบบเพื่อป้องกันอันตรายที่อาจจะเกิดขึ้นหรือข้อผิดพลาดที่ไม่ได้ตั้งใจเช่นการออกแบบปุ่ม undo เพื่อย้อนกลับสิ่งที่ทำลงไปแล้ว 6.Low physical effort คือการออกแบบให้สำหรับผู้ที่พิการทางร่างหายให้สามารถใช้งานได้ง่ายและใช้งานได้อย่างมีประสิทธิภาพ 7.Size and Space for Approach and Use คือการออกขนาดและพื้นที่ให้เหมาะกับการ...

  What ? (what did we learn? learn?)      สัปดาห์นี้เราได้เรียนรู้เกี่ยวกับ error และการรับมือ error ที่เกิดขึ้นโดย error นั้นเกิดขึ้นจากมนุษย์ทำสิ่งที่ผิดพลาดโดย error นั้นแบ่งเป็น 3 แบบคือ 1. Mistakes หรือก็คือการขาดการไตร่ตรองจนนำไปสู่ข้อผิดพลาด 2. Slips หรือก็คือการทำผิดพลาดโดยขาดสติหรือทำผิดพลาดในสิ่งที่รู้อยู่แล้วว่าต้องทำอย่างไร 3.False Understanding หรือก็คือความผิดพลาดทั่วไปจากหนึ่งเหตุการณ์ โดย Slips นั้นแบ่งออกได้เป็นหลายประเภทดังนี้ 1. Capture error คือการทำผิดพลาดโดยทำตามความเคยชินแทนสิ่งที่ต้องการเช่นต้องการที่จะขับรถไปห้างแต่ขับรถไปที่ทำงานตามความเคยชินแทน 2.Description error คือการทำอะไรผิดพลาดอย่างหนึ่งกับสิ่งที่มีความคล้ายคลึงกันเช่นการย้ายไฟล์งานไปผิดโฟเดอร์โดยไม่ได้ย้ายไปโฟเดอร์ที่ต้องการ 3.Loss of activation การลืมเป้าหมายสิ่งที่ต้องการแต่ยังมีความเข้าใจถึงลำดับและขั้นตอนที่กำลังทำอยู่เช่น การเดินเข้าไปในห้องนอนตัวเองจากชั้นล่างแต่ลืมไปแล้วว่าตอนแรกจะเดินเข้ามาในห้องทำอะไร 4.Mode Errors คือการทำอะไรผิดพลาดโดยที่ทำอะไรเหมือนเดิมแต่ผิดอุปกรณ์เ...

What ? (what did we learn? learn?)      สัปดาห์นี้เราเรียนเกี่ยวกับกฎในการออกแบบก็คือการออกแบบที่ดีนั้นจะต้องสามารถใช้งานได้ดีและสามารถที่เรีนยรู้ที่จะใช้งานได้ง่ายและจะต้องมีแนวทางในการออกแบบว่าควรจะไปในทิศทางใดหรือสามารถทำตามแนวทางใดในการออกแบบได้บ้างและการนำรูปแบบที่ได้มีการออกแบบไว้แล้วนำกลับมา reuse เป็นการออกแบบรูปแบบใหม่นอกจากนี้ยังมีการพูดถึงประเภทของกฎในการออกแบบประกอบไปด้วย 1. หลักการที่ใช้ในการออกแบบเพื่อให้สามารถใช้งานได้จะประกอบไปด้วย Learnability คือสามารถที่จะเรียนรู้ที่จะใช้งานได้ง่าย Flexibility สามารถใช้งานได้หลายช่องทาง และ Robustness ไม่เกิดปัญหาในการใช้งานง่าย ๆ 2. มาตรฐาน คือการออกแบบเป็นสากลหรือสำหรับคนกลุ่มใหญ่ใช้งานที่ไม่ค่อยมีการเปลี่ยนแปลง 3. Guidelines คือแนวทางที่มีการคิดค้นขึ้นมาไว้อยู่แล้วนอกจากนี้ยังมีการพูดถึงหลักการออกแบบในระดับที่สูงมากยิ่งขึ้นซึ่งประกอบไปด้วย visibility หรือการมองเห็นที่จะให้ผู้ใช้งานเห็นถึงองค์ประกอบต่าง ๆ ที่มีอยู่ feedback การตอบรับกลับเพื่อบอกว่ากำลังเกิดอะไรขึ้นหรือมีอะไรเกิดขึ้นแล้วหรือได้ทำอะไรไปแล้ว constra...

What ? (what did we learn? learn?)      สัปดาห์นี้เราเรียนเกี่ยวกับการออกแบบ interaction ที่พูดถึงการออกแบบเพื่อสิ่งที่ user จะทำหรือต้องการเพื่อบรรลุเป้าหมายหรือสิ่งที่ต้องการโดยอยู่ในขอบเขตหรือข้อจำกัดที่มีอยู่นอกขากนี้ยังมีการพูดถึง interaction design process ขั้นตอนหรือ process ในการออกแบบเพื่อให้ user ใช้งานโดยในการจะออกแบบนั้นสามารถใช้ Persona เพื่อใช้เป็นแนวทางในการออกแบบโดย persona หมายถึงการที่บุคลลนั้นมี interact ที่จำเพาะแตกต่างกันในแต่ละบุคคลนอกจากนี้ยังมีการพูดถึง navigation design ที่เป็นการพูดถึงการออกแบบเพื่อให้นำให้กับ user รู้ว่าต้องไปที่ตรงไหนต่อ So what ? (why is this important ??)      ในการออกแบบการ interaction นั้นจะจะไม่ใช่แค่การ design ทั่วไปแต่เป็นการออกโดยมีการคำนึงถึงผู้ที่ใช้งานว่าจะใช้งานอย่างไรหรือในรูปแบบใดซึ่งนำไปสู่ UX หรือ User Experience  ที่ช่วยทำให้การออกแบบอะไรสักอย่างนั้นได้ถูกออกแบบมาตรงกับความต้องการมากที่สุดโดยที่ยังอยู่ในขอบเขตที่มีอยู่ Now what ? (implications/reflection sections)   ...

What ? (what did we learn? learn?)      สัปดาห์นี้เราเรียนเกี่ยวกับการ interact ในรูปแบบต่าง ๆ ดังนี้ 1. Interaction model โมเดลในการทำ interaction อย่าง Donald Norman’s model ที่เป็นการพูดถึง 7 ขั้นตอนในการทำ interact โดยใน 7 ขั้นก็จะแบ่งออกเป็น 3 ส่วนเริ่มด้วยการตั้งเป้าหมายหรือสิ่งที่เราต้องการต่อด้วยการลงมือปฏิบัติและก็สรุปผลว่าออกมาเป็นอย่างไรได้ตามที่เราต้องการหรือไม่ โมเดลต่อมาคือ Abowd & Beale’s model ที่เป็นการนำเอา Norman’s model มาต่อยอดที่พูดถึงการ interaction ที่จะมีความแตกต่างกันเพราะผู้ใช้แต่ละคนก็ไม่เหมือนกัน 2. Ergonomics ที่เป็นการพูดถึงลักษณะจำเพาะของการ interaction หรือปัจจัยต่าง ๆ ของมนุษย์ในการ interaction เช่นสีแต่ละสีที่บ่งบอกความหมายที่ไม่เหมือนกัน 3.interaction styles เป็นการพูดถึงสไตล์การ interaction ที่แตกต่างกันเช่น command line สำหรับการพิมพ์คำสั่ง, Three-dimensional interface การทำ icon ให้เป็น 3 มิติเพื่อให้ความรู้สึกเหมือนปุ่มกด, pointer ที่ใช้สำหรับชี้หรือเลือกสิ่งต่าง ๆ 4. Context เป็นการพูดถึง interaction ที่ได้รับผลมากิจกรรมที...

What ? (what did we learn? learn?)     ในคลาสนี้เราได้เรียนรู้เกี่ยวกับ Computer Interaction คือการมีปฏิสัมพันธ์กับคอมพิวเตอร์โดยจะมีการส่งข้อมูล 2 ทางคือข้อมูลที่มาจากผู้ใช้งานส่งเข้าไปที่คอมพิวเตอร์และข้อมูลจากคอมพิวเตอร์ที่ส่งมาให้ยังผู้ใช้งานโดยสิ่งเรานี้บางครั้งก็อยู่ในกับเราในทุก ๆ วันเช่น Smart phone หรือ Smart watch      การมีปฏิสัมพันธ์กับคอมพิวเตอร์นั้นจะมีอยู่ 2 แบบคือ Input และ Output โดยมีรายละเอียดดังนี้      Input ก็คือสิ่งที่ผู้ใช้งานทำการป้อนข้อมูลหรือให้ข้อมูลกับคอมพิวเตอร์เพื่อรอการตอบสนองกลับมาเช่น mouse keyboard touchpad ฯลฯ ที่ใช้ในการเลือกจุดหรือเลือกใน GUI บนหน้าจอหรือใช้ในการออกแบบวาดกราฟฟิกให้ออกมาบนหน้าจอซึ่งรูปแบบของ Input เหล่านี้ก็ได้มีการพัฒนาให้มีความทันสมัยที่มากยิ่งขึ้นและการใช้งานที่ง่ายสะดวกสบายมากยิ่งขึ้นตามยุคสมัย      Output ก็คือสิ่งที่คอมพิวเตอร์ตอบสนองข้อมูลหรือแสดงข้อมูลกลับมาให้กับผู้ใช้งานเช่น จอคอมพิวเตอร์ที่ใช้ในการดูผลลัพธ์ต่าง ๆ จาก input ที่เราให้เข้าไป หรือในบางครั้ง...

What ? (what did we learn? learn?)     ในคลาสเรียนนี้ได้มีการพูดถึงมนุษย์และข้อจำกัดและการรับรู้ของความเป็นมนุษย์โดยจะมีการแบ่งประเภทของข้อมูลที่หลากหลายโดยจะประกอบไปด้วย 1.ข้อมูลที่ได้รับรู้และมีการตอบสนองโดยประกอบไปด้วยการมองเห็นเช่นรูปร่างบางอย่างอาจจะมองได้หลากหลายความหมายหรือหลากหลายรูปทรงหรือของบางอย่างที่ดูเป็นเหมือนภาพลวงตาทำให้มองเห็นไม่ตรงกับความเป็นจริง การรับรู้ทางเสียงเพื่อเป็นการตอบสนองต่อมนุษย์ว่ามียางอย่างเกิดขึ้นเช่นเวลาเปิด-ปิดแอร์จะมีเสียงเพื่อให้เรารู้ว่าแอร์ได้ปิดหรือได้เปิดแล้ว การสัมผัสสิ่งต่าง ๆ เพื่อรับรู้ถึงสิ่งที่สัมผัสอยู่ การเคลื่อนที่เพื่อตอบสนองต่อมนุษย์โดยจะต้องมีการคำนวณความแม่นยำและความเร็วเพื่อให้ไปถึงจุดที่ต้องการเช่น Fitts’s Law ที่เป็นการพูดถึงเวลาที่ใช้ในการไปถึงเป้าหมายที่ต้องการอย่างการลาก cursor บนหน้าจอคอมจากจุดหนึ่งไปอีกจุดหนึ่ง 2.ข้อมูลที่เก็บในรูปแบบของความจำโดยจะมี 3 ช่วงคือ sensory memory ที่เป็นการรับจากสัมผัสต่าง ๆ ของมนุษย์เมื่อเราให้ความสนใจหรือเริ่มเรียนรู้นั้นจะกลายเป็น Short-term memory หรือความจำระยะสั้นและหากเราได้ท...