วันพุธที่ 24 กันยายน พ.ศ. 2551

Persuasive Technologies

Outline:
  • Definition
  • Captology
  • Captology Framework

Definition

  • มากกว่า ศรัทธา แต่คือการ โน้มน้าว ให้เปลี่ยน ทัศนคติ และ พฤติกรรม
  • เช่นทำงานหนักขึ้น ให้ข้อมูลมากขึ้น ซื้อของมากขึ้น เลิกสูบบุหรี่

Captology (Computer As Persuasive Technology)

เป็นตัวกลางประสานระหว่าง Computer กับ Pesuation (ด้านการโน้มน้าว) คอมพิวเตอร์ถูกนำมาใช้ดังนี้

Advantages over human persuaders (6)

1. Computers are persistent

  • เป็นนักตื้อ
  • คอมพิวเตอร์ถามได้โดยที่คนไม่รู้สึกว่าถูกตื้อเท่ากับคน

2. Computers are anonymity

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

3. Computers can handle huge volume of data

  • การโน้มน้าวให้เปลี่ยนพฤติกรรม จำเป็นต้องใช้ข้อมูลเก่าในอดีตนำมาอ้างอิง และนำมาประมวลผลในรูปแบบที่เหมาะสม
  • ตัวอย่าง การนำเสนอโปรโมชั่นตามพฤติกรรมการใช้งาน

4. Computers can exploit the richness of information

  • ใช้กับการให้ข้อมูลที่หลากหลายรูปแบบได้
  • ตัวอย่าง Banner ใช้เสียง เสียงผู้ชาย ผู้หญิง เสียงไหนโน้มน้าวใจได้มากกว่ากัน
  • ขายสินค้าอับอาย ใช้ interaction แบบใด

5. Computers are Scalable

  • ออกแบบให้เหมาะสมกับกลุ่มขนาดต่างๆ ได้

6. Computers are ubiquitous

  • คอมพิวเตอร์มีอยู่ทุกหนทุกแห่ง
  • ทำให้ทลายข้อจำกัดทางวัฒนธรรม ภูมิศาสตร์ เวลา เป็นต้น

ข้อตกลงในการโน้มน้าว

  • การโน้มน้าวต้องเป็นไปด้วยความสมัครใจ ไม่ใช้กำลัง และไม่ใช่การหลอกลวง

Captology Framwork

  • Tools ให้ซื้อของมากขึ้น เพราะไม่ยุ่งยาก
  • Media นร.อ้างว่าไปเล่นเกมส์เพราะติดเกมส์
  • Actor ทามาก็อตจิ

Computer As Tools

  • บางครั้งผู้ใช้ไม่แน่ใจว่าควรจะทำหรือไม่ควรทำ
  • สามารถเปลี่ยนพฤติกรรมผู้ใช้ได้ง่าย เพราะเสมือนเพื่อน และง่ายต่อการใช้งาน
  • Reduction Technology : ทำให้งานยากๆ กลายเป็นงานง่าย และรู้สึกคุ้มค่า
  • Tunneling Technology : คอยนำทางหรือช่วยเหลือ สร้างความเชื่อมั่น ทำให้กล้าเปิดเผยข้อมูล
  • Tailoring Technology: ติดตามการใช้งาน และนำเสนอข้อมูลที่เหมาะสมกับพฤติกรรม เช่น amazon นำเสนอหนังสือที่เกี่ยวข้องที่คิดว่าผู้ใช้น่าจะสนใจ โดยไม่ต้องค้นหา ชักจูงให้มีส่วนร่วม และมองเป็นเรื่องใกล้ตัว
  • Suggestion Technology: นำเสนอในจังหวะที่เหมาะสม ทำให้ปรับเปลี่ยนหรือเชื่อแล้วทำตาม
  • Surveillance Technology: คล้าย Suggestion แต่ว่าใช้การสังเกตพฤติกรรม เช่นกล้องวงจรปิด ทำให้เกิดความรู้สึกกลัวว่าถูกสังเกต และเปลี่ยนพฤติกรรม
  • Conditioning Technology: ออกแบบให้มีแรงจูงใจ หรือมีแรงกระตุ้น แล้วเปลี่ยนพฤติกรรมไปเป็นอุปนิสัย

Computer as Media

  • Symbolic พวก icon รูป แผนผัง
  • Sensories หรือ สัมผัสทั้ง 5 รูป รส สัมผัส กลิ่น เสียง

ตัวอย่าง

  • Cause-Effect Simulating Technology
    - จำลองเหตุการณ์ให้เข้าไปทดลองเล่น
    - มนุษย์ไม่ใครตระหนักถึง Effect เพราะไม่ทราบถึงสาเหตุ
    - อ.ยกตัวอย่าง เกมส์ลงทุน จะสะท้อนให้เห็นถึงพฤติกรรมของแต่ละคน และได้เรียนรู้ว่า Information เป็นสิ่งสำคัญหากมีการ Share ข้อมูลกัน
  • Environmental Simulation Technology
    - จำลองสภาพแวดล้อม
    - เพื่อเปลี่ยนความเชื่อ โดยการให้รางวัล
    - ตัวอย่าง สร้างหุ่นยนต์เด็กให้ทดลองเลี้ยงลูก เพื่ให้ทราบถึงปัญหา และตระหนักถึงการตั้งครรภ์

Computer As Actors

  • ทำให้คอมพิวเตอร์เสมือนบุคคลหนึ่ง
  • เป็นเพื่อนคู่คิด แล้วโน้มน้าวให้เปลี่ยนพฤติกรรม

การโน้มน้าวแบ่งได้ 5 ประเภท

  • Physical: มีหน้าตา รูปร่าง เคลื่อนไหว
  • Psychological: มีอารมณ์ มีความรู้สึก
  • Language: พูดได้ โต้ตอบได้

    3 ส่วนข้างบน มีส่วนสร้าง computer ให้แสดงเพศ ชาย หญิงได้
  • Social Dynamic: ทำให้อยากพูด หรือมีส่วนร่วมมากขึ้น
  • Social Roles: แสดงบทบาท teamates

Persuasion via Physical cues

  • ผ่านทางกายภาพ เช่น sexy robot
  • ทำให้คอมพิวเตอร์เสมือนเป็นเพื่อน
  • ตัวอย่าง หุ่นยนต์สวย ได้รับความสนใจมากกว่าหุ่นขี้เหร่

Persuasion via Pyschological cues

  • ทางจิตวิยา ทำให้หุ่นมีบุคลิกแสดงอารมณ์ได้
  • อ.มีประเด็นเรื่องเสียง
  • Dominant Computer; tone แข็งกร้าว เด็ดขาด ฟันธง
  • Submissive Computer; คล้อยตาม นิ่มนวล แต่ว่าเยิ่นเย้อ
  • งานวิจัยกล่าวว่า ผู้ใช้ มักจะชอบ Computer ที่มีบุคลิกลักษณะคล้ายตนเอง เพราะมองว่าเป็นส่วนหนึ่งของตนเอง

Persuation via Language

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

Interface Design for E-Commerce

Outline:
  • Critical Features
  • Guidelines for an e-commerce website

Critical Features of E-Commerce

  • Ubiquity
    - เข้าถึงได้ทุกที่ ทุกเวลา
    - ไม่มีข้อจำกัดทางวัฒนธรรม เวลา สภาพภูมิศาสตร์ สามารถทำ transaction ข้ามไปมาได้
  • Richness
    - มีความหลากหลาย หรือความร่ำรวยของ Internet คือความหลากหลายของข้อมูล
    - การสร้าง interface สามารถรวมความหลากหลายของรูปแบบข้อมูลไว้ได้เป็นหนึ่งเดียวกัน
    - เช่น วีดีโอ บน internet ถึงแม้ว่าจะไม่คมชัด แต่ก็มีต้นทุนต่ำ สมราคา เช่น ดูข่าวได้เลย ไม่ใช่อ่านได้อย่างเดียว
  • Interactivity
    - อนุญาตให้มีปฏิสัมพันธ์
    - มันเป็น 2-ways communication มากขึ้นเมื่อเทียบกับการสื่อการแบบเดิม เช่น แบบสอบถาม แสดงผลโหวต มี scale ที่แปลกใหม่ มี progress report ว่าทำไปถึงไหนแล้ว เป็นต้น
  • Information Density
    - มีข้อมูลจำนวนมากมายบนอินเตอร์เน็ต (ต่างกับความหลากหลายที่ มองรูปแบบ)
    - ต้นทุนต่ำ และกระจายได้รวดเร็ว
    - สามารถติดตามพฤติกรรมลูกค้าได้ แต่เป็นเรื่องที่ต้องระวัง
  • Personalize
    - นำเสนอ message ที่ทำให้ผู้ใช้รู้สึกว่าได้รับบริการที่เป็น exclusive
    - นำเสนอข้อมูล บริการที่สอดคล้องตรงใจผู้บริโภค (CRM)
    - ตัวอย่าง เว็บ amazon

Guidelines for Designing a Web Site's Storefront

ประเด็นสำคัญคือ "การสร้างศรัทธา" ให้เกิดขึ้นได้อย่างไร มีแนวทาง 7 ข้อ

  • 1. Context (Look and Feel)
    - Functional
    * เชิง Structure เช่น sitemap, shortcuts, navigator, search tools
    * เชิง Capability เช่น download ทำอย่างไรไม่ให้รู้สึกต้องรอ, Platform แสดงผลได้ทุก platform
    -Aesthetical (ความสวยงาม ความสุนทรียะ)
    * Site Layout การใช้สี ต้องให้กลมกลืนสอดคล้อง
    * Emotional Effect เช่น เว็บโป้ใช้สีดำ การพัฒนาใช้สีฟ้า
  • 2. Content (สิ่งที่นำไปใส่ไว้ในกรอบ context)
    - Data Type ความแตกต่างในมุมมองของผู้ใช้แต่ละกลุ่ม
    ยกตัวอย่าง Diclaimer ในส่วนของผู้ใช้ ก็ต้องเขียนให้มีความชัดเจน
    - Content Format
    * Attractive and Appropriate ทำให้รู้สึกดึงดูดและประทับใจ เช่น รูปการ์ตูน, seach mechanism
    * Various Degree of richness การเลือกใช้ text, image, sound, clips
  • 3. Community (สร้างความสัมพันธ์ก่อให้เกิดชุมชน การแลกเปลี่ยน)
    - ทำให้เว็บมีลักษณะเฉพาะตัว
    - สนใจในเรื่องเดียวกัน มารวมตัวกัน
    - มีเนื้อหาที่ตอบสนองพฤติกรรม ตัวอย่างเว็บเฉพาะผู้หญิง อาจจะมีเรื่องดวง
  • 4. Customization (ความสามารถในการแต่งหน้าร้านให้สอดคล้องกับผู้ใช้)
    - Personalization ; ผู้ใช้เปลี่ยนแปลงเอง แจ้งมาว่าอยากได้อะไร --> My Content, My Page
    - Tailoring; สะกดรอยพฤติกรรม นำมารวบรวม วิเคราะห์ และนำเสนอให้โดยไม่ต้องบอก เช่น amazon
  • 5. Communication (ใช้เป็นช่องทางในการติดต่อสื่อการระหว่างลูกค้า กับ องค์กร)
    - ได้รับข้อมูล feedback จากลูกค้า
    - สร้าง Trust **
    - เรียนรู้ลูกค้ากลุ่มเป้าหมายจาก Feedback

    Point=> การมีตัวตนบนอินเตอร์เน็ต ก็ใช่ว่าจะประสบความสำเร็จเสมอไป แต่ก็ก็ต้องมีเพราะผู้ใช้อินเตอร์เน็ตชอบอะไรที่มีตัวตน ซึ่งนำมาซึ่งความน่าเชื่อถือ
  • 6. Connection (แนะนำให้มี inbound link มากกว่า external link)
    - Link 2 Partner's Site
    - Outsourced Content เช่นพวกข้อมูลเว็บอากาศ สำหรับเว็บท่องเที่ยว
    - Cross Platform Connection แสดงผลได้กับอุปกรณ์หลากหลาย เช่น มือถือ เว็บ PDA email
  • 7. Commerce (Don't Forget to SALE)
    - ทุกอย่างที่เกี่ยวข้องกับการทำธุรกรรม เช่น การรับชำระเงิน, การค้นหาสินค้า, ตาม order ได้เป็นต้น

วันอังคารที่ 23 กันยายน พ.ศ. 2551

User Interface Design

เนื้อหาครอบคลุม
  • Introduction
  • Manifest Model
  • Mental Model
  • 3 Paradigms of the interface
  • Design of the Interface

1. Introduction:

Point=> เป็นการเลือการแทนรุปภาพต่างๆ เพื่อทำให้

  • ผู้ใช้เกิดปัญหาน้อยที่สุด
  • มี productivity
  • ไม่รู้สึกเครียด หรือกดดัน สนุกที่จะใช้ (enjoyable)

อ.ยกตัวอย่าง คำสั่งบน UNIX ที่ต้องจำ Case ในห้อง ออกแบบ Template เขียนจดหมาย

2. Manifest Model

  • เป็นตัวประสานระหว่าง Implementation Model (ความเข้าใจของ developer) กับ Mental Model (ความเข้าใจของผู้ใช้)
  • ซอฟต์แวร์ที่ดี ภาพของ Implementation Model กับ Mental Model จะต้องเป็นภาพเดียวกัน แต่ในทางปฏิบัติทำได้ยาก
  • การทำให้ Implementation Model มีความใกล้เคียงกับ Mental Model นั้น จะต้องอาศัยการทำและปรับปรุงหลายๆ รอบ

3. Mental Models (ในภาพกว้าง คนละมุมกับหัวข้อที่ 2)
ของสิ่งเดียวกัน แต่ Mental Model จะแตกต่างกัน เพราะ

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

Expression of Mental Models (3)

  • Analogical Representation (ใช้รูปในการอธิบาย)
  • Propositional Representation (ใช้การพรรณาเป็นข้อความ)
  • Metaphor :
    - มนุษย์มีความถนัดแตกต่างกัน
    - บางครั้งเรื่องที่ยากๆ ก็ต้องใช้กระบวนการที่ตนเองคุ้นเคย อาจจะทั้ง Analogical และ Propositional มาอธิบาย
    - ปัจจุบันมีบทบาทสำคัญเป็นแนวคิดในการสร้าง Interface

Point=> Mental Model ความเข้าใจ ความคิด จินตนาการ ในประเด็นต่างๆ จุดมุ่งหมายเพื่อน อธิบายให้เข้าใจตรงกันบางทีมันจะ overlap กัน

Mental Models : Components (2)

  • Structural Component
    - บอกว่าระบบนี้ทำงานอย่างไร (what) แล้วให้ผลลัพธ์ (Output) อะไร
    - แต่ผู้ใช้จะไม่ทราบกลไกการทำงาน (how)
    - เป็นภาพกว่าง ๆ ของระบบ
    - ไม่ขึ้นกับ Context

    เช่น รถไฟใต้ดิน ก็เข้าใจตรงกัน ว่า subway, underground คือรถไฟใต้ดิน มีรูปลักษณะอย่างไร เป็นการคมนาคมรูปแบบหนึ่ง
  • Fuctional Component ;
    - ตอบคำถามว่าทำอย่างไร (How) ถึงจะได้ผลลัพธ์ มาแก้ไข Limitation ของ Structual
    - มนุษย์จะเรียนรู้ว่าจะใช้งานมันได้อย่างไร เพื่อให้ระบบทำงานได้ตามที่ต้องการ

    เช่น รถไฟใต้ดิน จะเป็นมุมที่ว่า จะซื้อตั๋วอย่างไร จะต้องทำอย่างไรถึงจะไปสู่จุดหมายได้

Point=> เราเชื่อว่าผู้ใช้บางทีไม่สามารถบอกความต้องการของตนเองได้ชัดเจน การใช้งาน Prototype ก็จะเป็นวิธีหนึ่งที่จะทำให้เข้าใจตรงกัน ถ้าตรวจสอบแล้ว Mental Model ตรงกัน ถึงจะค่อยลงมือทำซอฟต์แวร์

4. Three Interface Paradigms
"จะเข้าใจ interface ได้ดีก็เต่อเมื่อทราบกระบวนการ" เรียงจากเก่าไปใหม่สุด

  • Technology Paradigm
  • Metaphor Paradigm
  • Idiomatic Paradigm

Technology Paradigm

  • มอง interface จากความรู้ที่ว่าระบบทำงานอย่างไร และพัฒนาอย่างไร
  • ได้รับความนิยมในระยะแรก โดยเฉพาะวิศวกร ที่ชอบรื้อ ค้น จนคุ้นเคย และเข้าใจว่าระบบทำงานอย่างไร
  • ข้อเสียคือ ถ้าจะขยายระบบไปยังผู้ใช้ทั่วไป ก็ไม่ตอบสนองต่อผู้ใช้
  • การใช้งานต้องลองผิด ลองถูก

Metaphor Paradigm

  • มอง interface จากสภาพแวดล้อมความเป็นจริงของการใช้งาน
  • พยายามจำลองสภาพแวดล้อมจริงนั้น ไปไว้ในคอมพิวเตอร์ (actual environment + computer interface)
  • ทำให้ผู้ใช้คุ้นเคยกับการใช้งาน เพราะใกล้เคียงกับสภาพความเป็นจริง ตัวอย่างเช่น desktop บนวินโดว์ เสมือนโต๊ะทำงาน และมีถังขยะ
  • ผู้ใช้เรียนรู้แค่การใช้งาน interface โดยที่ไม่จำเป็นที่ต้องรู้ กลไกลของ technology

Point=> ข้อจำกัดของ Metaphor ?

  • เราไม่ได้ใช้ความสามารถของคอมพิวเตอร์เลย
  • ทำให้ผู้ใช้ขาดจินตนาการ
  • ยากที่จะตรวจสอบ (test) ได้ว่า interface นั้นตรงตามความต้องการในโลกปัจจุบันแค่ไหน

Idiomatic Paradigm

  • ให้ความหมายเป็นเชิงนัยยะ คือ ไม่สื่อตรงๆ เช่น go on ไม่ใช่ไปบน แต่หมายถึง ดำเนินงานต่อ
  • mouse เป็นเพียงตัวอย่างเดียวที่ Idiomatic ใช้อ้าง ว่า metaphor ประสบความสำเร็จได้ เพราะ idiomatic คือ ง่ายต่อการเรียนรู้
  • เพราะ metaphor อธิบายไม่ได้ว่า mouse จำลองพฤติกรรมอะไรในชีวิตจริง

5. Design of the Interface

  • Design Principle
  • User-System Interaction
  • User Guidance

Desing Principle
(ให้ผู้ใช้มีส่วนรวมในการออกแบบ, พยายามหา Feed back จากผู้ใช้, เน้นที่ผู้ใช้เป็นหลัก, เข้าใจผู้ใช้ทั้งเชิง limitation physical และ mental)

Design Concerns on Human Capability

  • User Familiar - เลือกภาษาเดียวกับผู้ใช้
  • Consistency - สอดคล้องกลมกลืน (แต่ถ้าต้องการกระตุกความสนใจก็อาจจะยกเว้น)
  • Minimal Surprise - นำเสนอเฉพาะข้อมูลที่ผุ้ใช้ต้องการ
  • Recoverability - ป้องกันความผิดพลาด หรือแนะนำทางแก้ไขถ้าทำผิด
  • User Guidance - มี help

User System Interaction
(How can feed information to computer and present information from computer to users)

  • Batch
    - Interact ที่จุดเดียว มีแต่ submit
    - ไม่ต้องมีคนคุม แต่ควรให้ monitor ได้
  • Line Oriented
    - ใช้ command line
    - เคลี่อนย้ายตำแหน่งการใช้งานไม่ได้
    - แก้ไขคำตอบเดิมที่ตอบไปแล้วไม่ได้
    - บังคับตอบ ถ้าไม่ทราบผู้ใช้ต้องเดา
  • Full Screen
    - ตัวอย่างเช่น Windows สามารถเคลื่อนไหวได้ 2 มิติ แนวตั้ง แนวนอน
    - Form Filling, เมนูตัวเลือก
  • GUI
    - เริ่มมีความลึก เข้ามาเกี่ยว เช่น windows สามารถเลือกเปิดซ้อนกันได้หลายวินโดว์ ทำงานพร้อมกันได้
    - Limitation คือ ทำให้ผู้ใช้เข้าใจผิด และสร้างความคาดหวัง ว่าทุก application ทำงานได้เหมือนกันหมด และ อาจจะไม่เหมาะกับผู้พิการ
  • Next Generation (อ. ให้ดู VDO โฆษณา AIS)
    - virtual reality แบบ embeded
    - Portable
    - Personal เช่น มี transalator ส่วนตัว
    - Sensitive กับ สิ่งแวดล้อม ปรับสภาพได้เองตามสิ่งแวดล้อม เช่น อยู่ในที่ประชุม โทรศัพท์อาจจะปรับเป็นระบบสั่นอัตโนมัติ หรือในที่เสียงดัง เสียงโทรศัพท์ก็จะดังมากขึ้น

User Guidance
(ผูใช้ มีข้อผิดพลาดเสมอ ในการใช้งาน ต้องยอมรับ และหาทางช่วยเหลือ)

Help Reference

  • Paper Ref. (ดีตอนที่ไฟดับ)
  • Electronic Ref. (ค้นหาได้หลากหลาย, สะดวกต่อการพกพา, ง่ายต่อการปรับปรุง)

Design Concern in Wording

  • Context ต้องให้ทราบบริบท ด้วยว่ามาจากอะไร เช่น ฟ้อง Error No. แต่ข้อความแจ้งความผิดพลาดข้อมูล ID ผู้ใช้
  • Skill Level of Users ต้องระวังการตีความอาจจะต่างกันในแต่ละกลุ่มผู้ใช้
  • Style สั้นกระชับ และสื่อความ
  • Culture วัฒนธรรม โดยเฉพาะเว็บไซต์ที่ implement ทั่วโลก

วันอาทิตย์ที่ 21 กันยายน พ.ศ. 2551

Interaction Style

แบ่งได้เป็น 5 แบบ

  • Command-driven
  • Menu-driven
  • Form-filling
  • Natural Language Processing
  • Direct Manipulation

1 Command-Driven

เป็น interaction ที่เก่าทีสุด เช่นพวก command line, assembly และเป็นคำสั่งที่ทำงานกับคอมพิวเตอร์โดยตรง

  • เน้นที่การสร้างชุดคำสั่ง (Organizing a command)
  • A simple list เช่น คำสั่งบน UNIX การใช้คำสั่งใน vi editor 1 คำสั่ง ทำงาน 1 task
  • A command with arguments เช่น COPY FILEA FILEB
  • A command plus options and arguments เช่น คำสั่งในการเช็คเที่ยวบินของระบสมัยก่อน A0821DCALGA0300P, สั่งพิมพ์ 3 ชุด Print FILEA -3, HQ

Point=> ในมุมมอง HCI ถือว่า command-driven เป็นข้อด้อยของ interface


2 Menu-Driven

Advantages (over command interface):

  • ผู้ใช้ไม่ต้องจำคำสั่ง
  • สามารถใช้งานร่วมได้กับ interface อื่นๆได้

Disadvantage:

  • ผู้ใช้ต้อง recognize ว่ามี option อะไรบ้าง
  • บางทีมันอาจจะไปบดบัง content อื่นๆ

ประเภทของ Menu-Driven (4 แบบ)

  • Single Menu
    -
    Binary เช่น คำถามให้ตอบ Y/N
    - Multiple-item เช่น radio button มีได้มากกว่า 2 ทางเลือก แต่เลือกได้ทางเลือกเดียว
    - Extended เช่น ให้คลิกเลือกลักษณะ Font เส้น รูปแบบต่างๆ
    - Pull down เช่น menu bar ของวินโดว์ & Pop-Up มักจะปรากฎบริเวณที่กำลังทำงานขณะนั้น เช่นการคลิกเม้าส์ขวา เพื่อเรียก short-cut menu บนหน้าจอ
    Point=> User แต่ละคนคลิกในที่ต่างกัน Pop up แสดงไม่เหมือนกัน เป็นเหตุให้ MAC ไม่มีการ
    คลิกขวา ดังนั้น User ที่ไม่มีประสบการณ์ Pop up จึงไม่เหมาะสม
    - Multiple-Check Boxes Point=>
    ** ต้องระวังการเลือกที่ตัวเลือกจะ Conflict กันเอง ต้องมีการ enable ทางเลือกที่ไม่สามารถเลือกได้ด้วย เช่นเลือกได้ไม่เกิน 3 ถ้าเลือกครบ 3 แล้ว ตัวเลือกที่เหลือจะต้อง enable ไว้
    - Multiple-Check Menus เช่นหน้าจอการใช้งาน photoshop สามารถเลือกได้หลายอย่าง
  • Linear Sequence ตัวอย่าง หน้าจอการกำหนด properties ของ Font มีลำดับเช่น เลือก Font ถึงจะมีขนาด Font ที่เลือกได้ และ Style ของ font เป็นลำดับ
  • Tree Structure
    เช่น การออกแบบเมนูบนของวินโดว์
    Breadth = จำนวนเมนูหลัก, Depth จำนวนเมนูย่อยของแต่ละเมนูหลัก
    Point=> มีงานวิจัยกล่าวว่า Interface ที่ดี ควรมีจำนวน Breadth > Depth แต่ทำไม Microsoft ถึง มีจำนวน Breadth

    Interesting!!
    *การหาเกณฑ์วัดว่าเมื่อไหร่ถึงจะแยกเมนูย่อยเป็น pull down หรือ เป็น Pair-Menu*
    *เกณฑ์ในการกำหนด Breadth และ Depth*

    ข้อแนะนำ:
    - ควรมีการจัดกลุ่มอย่างสมเหตุผล เช่น Level 1 = ประเทศ, Level 2 = จังหวัด
    - ควรให้เห็นทุกเมนู แม้ว่าจะไม่ใช้
    - ใช้ภาษาที่ผู้ใช้เข้าใจ
    - เมนูย่อย ต้องขึ้นกับเมนูหลักใดๆ เพียงเมนูเดียว (ไม่ซ้ำซ้อน)
    - ไม่เปลี่ยนตำแหน่ง
    - ไม่บังเมนูอื่นๆ
    (ดู 10 usability เพิ่มเติม)
  • Acyclic & Cyclic menu network
    - Acyclic เป็นเมนูแบบไม่ย้อนกลับ แสดงตามลำดับ
    ได้แก่ Single Menu, Linear Sequence และ Tree Structure

    - Cyclic เป็นเมนูที่มีการเรียกย้อนกลับได้ โดยเฉพาะบนเว็บ ที่มีปุ่ม Home กลับหน้าแรกได้จากทุกหน้า และลิงค์กลับไปกลับมาได้
    Point=> เพื่อป้องการสับสนควรมี Short-Cut หรือ Cleary Mark Exit

3. Form-Filling

ใช้เมื่อต้องการได้ข้อมูลจากผู้ใช้ มีคำแนะนำในการออกแบบดังนี้

  • ควรมี title ของฟอร์มที่สื่อสารได้ชัดเจน
  • ควรการจัดกลุ่มข้อมูล และการเรียงลำดับของฟอร์ม
  • ควรแก้ไขได้เฉพาะในส่วนที่ผิด ไม่ใช่ reset แล้วกรอกใหม่หมด
  • ควรมีการแจ้งข้อผิดพลาดเฉพาะแต่ละ ฟิลด์ เช่น ป้อนไม่ถูก Format
  • ควรมีคำแนะนำในการป้อนข้อมูล เช่น รูปแบบวันที่ dd-mm-yy หรือ MM-DD-YYYY
  • ควรมีปุ่ม submit เมื่อป้อนข้อมูลเสร็จแล้ว หรือ preview ดูผลลัพธ์ก่อนได้

** มีงานวิจัยว่า ถ้าตอบสถานภาพสมรส แล้ว ต้องมี สัญลักษณ์ >> เพื่อให้ป้อนข้อมูลในฟิล์ด์ถัดไปเช่น จำนวนบุตร **

4. Natural Language Processing (NLP)

(ส่วนใหญ่คือ speech recognition)

มี 2 mode คือ

- Written mode

- Audio mode


Application : Text Retrival, Text Searching, Game

NLP น่าจะทำให้การเลือก information ตรงกับความต้องการของผู้ใช้มากที่สุด
อ.ยกตัวอย่าง การหาหนังสือรัชกาลที่ 5 สำหรับ เด็ก ป.2 กับหนังสือ ของนักกฎหมาย ซึ่งจะต้องได้ information ต่างกัน

5. Direct Manipulation

- Item หรือ icon บนจอภาพ ที่อนุญาตให้ผู้ใช้ไปทำงาน เช่น เปลี่ยนแปลง object นั้นได้โดยตรง


ระบบที่พัฒนาด้วย Direct Manipulation จะต้องเป็นดังนี้

  • ต้องกระทำได้โดยตรง
  • ต้องชัดเจน (Visible) ** การที่มัน visible คือ มันส่งผลให้เกิดการ direct แล้วมันจะมีผลต่อเนื่องไปเรื่อยๆ
  • ตอบสนองอย่างรวดเร็ว (Rapid)
  • ย้อนกลับการแก้ไขได้ เช่น undo/cancel
  • มีผลต่อเนื่องไปเรื่อยๆ (incremental actions) เช่น กำหนด Font 1.ตัวเข้ม + 2. ตัวเอียง = อักษรที่มีลักษณะตัวเข้มผสมเอียง

ตัวอย่าง

  • การขับรถยนต์ (เป็นตัวอย่างที่เจ๋งมาก) สามารถเอื้อมถึงอุปกรณ์ต่างๆ ที่อยู่โดยรอบได้ หรือมี remote ควบคุม
  • Visual Reality ปัจจุบันจะรวมอยู่ในสรีระ เช่น ทำเป็นแว่นให้สวม
  • WYSIWYG สำเร็จเพราะ มันใกล้เคียงกับสิ่งที่จะได้ เช่น เห็นงานบนจอได้เหมือนที่พิม์ออกมาทางเครื่องพิมพ์, ตอบสนอง และแสดงผลลัพธ์ได้ทันที, ย้อนกลับไปแก้ไขได้

Advantages

  • เรียนรุ้ได้เร็ว, รู้สึกควบคุมได้ทำให้ผู้ใช้ไม่กลัว เช่นพวก undo, ตอบสนองได้รวดเร็ว, ปรับแก้ได้ทันท่วงที

Problems:

  • ผู้ใช้ต้องเข้าใจความหมายของ Visual ที่มี ซึ่งมันไม่ง่ายที่จะทำให้เกิด Visual
  • ใช้เนื้อที่ค่อนข้างมากบนจอภาพ ทำให้เบียดบังพื้นที่การใช้งานที่จำกัด

วันพุธที่ 23 กรกฎาคม พ.ศ. 2551

Usability

Usability ความสามารถใช้งานได้

- ความสามารถที่ผู้ใช้ สามารถใช้ feature ใดๆ ของระบบสารสนเทศได้ และได้งานด้วย
- ใช้ระบบดำเนินการตามงานที่ต้องการได้
- รองรับการทำงานร่วมกันได้

System Acceptability

1. ยอมรับโดยสังคม (Social)
2. ยอมรับเพราะสามารถทำให้ได้ เห็น ประโยชน์ (Practical)

Usefulness = Utility + Usability
==> Point การยอมรับระบบ เราวัดจากปริมาณการใช้ ถ้าผู้ใช้ไม่สามารถใช้งานได้แสดงว่าผู้ใช้มีแนวโน้มที่จะไม่ยอมรับระบบ

Utility vs Usabiltiy

-Utility คือ ความสามารถที่มีในตัวระบบสารสนเทศ โดยนักพัฒนาระบบ
-Usability คือ ความสามารถในการใช้งาน (Utility) ได้ โดย ผู้ใช้

User Friendly ??? ==> Usable :)


5 Dimensions of Usability - มิติ
five sub-concept that promote:

1. Learnabilty - ง่ายต่อการเรียนรู้ โดยเฉพาะสำหรับผู้ใช้ที่ไม่มีประสบการณ์ หรือ มีประสบการณ์น้อย (novice) จะต้องให้เกิดการเรียนรู้ได้อย่างรวดเร็ว
2. Efficiency - สำหรับผู้ใช้ที่มีประสบการณ์แล้ว
3. Memorability -user can retain a skill on how to work with a system ต้องทำให้จดจำและยังคงทำงานได้
Ex. แขนหักไปสามเดือน ยังจำเมนูได้ เป็นตัวอย่างที่ดีของ HCI แต่อาจจะจำ command line ไม่ได้ แสดงว่าไม่ retain
4. Few Errors - HCI เชื่อว่ามนุษย์ย่อมมี error ระบบจะต้องทำการแนะนำผูใช้ได้ว่า ควรจะทำอย่างไรกับ error นั้น
Ex. ปุ่ม Cancel, Reset, Undo เป็นต้น
5. Satisfaction- ความพึงพอใจ

10 Principles of Usability

ส่วนเสริมที่ทำให้เกิด 5 มิติของ usability

Simple and natural diaglogue, Speak the users' language, Minimize the users' memory load
Consistency, Feedback, Clearly marked exits, Shortcuts, Good Error Message, Prevent Errors, Help and Documentation


1. Simple and natural dialogue

+การออกแบบ interface จะต้อง minimlly simple คือง่ายต่อการเข้าใจ
+การออกแบบ interface จะต้อง visible to user คือ นำเสนอข้อมูลในจังหวะที่ผู้ใช้อยากได้

Ex. เมนูสีเทาบนวินโดว์ ถามว่าทำไมไม่ให้หายไป
เพราะ usability ในแง่ ของ memorability คือ ต้องการ retain การใช้งานของผู้ใช้ไว้
+การออกแบบ ควรจะ จัดกลุ่ม;grouping, บอกตำแหน่ง; navigational, ระวงคนตาบอดสี; be ware of blinded people, อย่าใส่อะไรมากเกินไปจนรก (inundate) supply only absolutely needed ให้ข้อมูลเท่าที่จำเป็น

2. Speak the Users' Language

สื่อสารให้ชัดเจนในภาษาที่ผู้ใช้คุ้นเคย หรือนิยม หรือ ไม่ขัดกับความรู้สึกของผู้ใช้ เช่น ใช้ภาษาสากล (English) ใช้ภาษาในมุมมองของผู้ใช้
Ex. เช่นการออกแบบฟอร์มให้กรอกข้อมูลต่าง ๆ คำอธิบายควรเป็นภาษาที่นิยม และคุ้นเคย เช่น การทำเว็บหลายภาษา เป็นต้น
==> Point สื่อสารให้ผู้ใช้เข้าใจง่าย และชัดเจน

3. Minimize User memory load
+ ผู้ใช้ส่วนใหญ่จะระลึกได้ (cognizing) มากกว่า จำได้ (remembering)
+ Visibility คือการนำเสนอที่ชัดเจน จะช่วยลด memory load เช่น การบอก format วันที่ที่ต้องการกรอกเป็น DD-MM-YYYY
+ Use of generic concept of interaction ใช้สิ่งที่ผู้ใช้ส่วนใหญ่คุ้นเคย เช่น การ implement cut-paste เป็นต้น
==> Point พยายามอย่าให้ผู้ใช้ต้องใช้ความคิดในการใช้งานมาก

4. Consistency ความสอดคล้องกัน
ออกแบบให้ Same Ways, Same Results and Same Location with Interface Standard
Ex. เช่นเว็บที่มี navigation bar บอก ตำแหน่งที่ใช้งานอยู่ปัจจุบัน
Ex. command consistency การ cut-paste ก็กระทำได้ทั้งรูปภาพ หรือ ข้อความ ก็มีการทำงานไม่แต่กต่างกัน Same way Same Results
Ex. เว็บที่เอาเมนูมาไว้ทางขวามือมันผิดปกติวิสัย (Standard)
==> Point กรณีที่ต้องการออกแบบให้ผิดแผก อาจจะไม่จำเป็นต้อง consistency เพื่อกระตุกความสนใจ แต่ต้องระวังเรื่อง Think load ด้วย

5. Feedback
+มีเพื่อ inform ผู้ใช้ a) กำลังทำอะไร b) translate users' input into the output
+มีไว้เพื่อ inform ผู้ใช้ให้ระวัง และป้องกันความผิดพลาด (few error dimension) โดยให้ feedback เป็นการแจ้งเตือนก่อนที่ข้อผิดพลาดจะเกิดขึ้น หรือเป็นการ inform ว่าระบบทำงานได้ตามปกติ
+มีไว้เพือ่ inform ผู้ใช้ เมือระบบไม่สามารถให้บริการได้ ที่สำคัญคือ เป็น feedback ที่ suggest ได้เช่น ปุ่ม cancel / stop เป็นต้น
+ข้อความควรที่จะมีความชัดเจนเท่าที่จะเป็นไปได้

+feedback presistence (การปรากฎอยู่)
Low จะหายไปเองเมื่อปัญหาถูกแก้ไข หรือได้รับ solution แล้ว เช่น download progress
Medium ต้องรอให้ผู้ใช้มีปฏิสัมพันธ์ด้วย เช่น ต้องกดปุ่มใดๆ เพื่อยืนยันการทำงานต่อ
High ปรากฎอยู่ตลอดเวลา เช่นปุ่มสถานะต่างๆ เช่น TH EN
==>Point ถ้าเป็นระดับ Critical มาก จะเลือกใช้ระดับ Feedback ระดับ Medium เพื่อกระตุ้นความสนใจ


Feedback & Response time
0.1 sec ไม่ต้องการ Feedback
1 sec ผู้ใช้เริ่มรู้สึกว่า delay แต่ยังไม่ต้องการ Feedback
> 10 sec ผู้ใช้จะยังคงรอได้ แต่ จะต้องมี Feedback

==> Point การแก้ไขปัญหาคือ "ทำให้ผู้ใช้รู้สึกว่า ไม่ต้องรอ" (มิติ Satisfaction)
เช่น เบนความสนใจด้วยเสียง, ให้ feedback ที่ทำให้ผู้ใช้มีความคาดหวังความเร็วน้อยลง
Ex. ยกตัวอย่าง MobileLife MBaking ที่ไม่ให้ Feedback

6. Clearly Marked Exits
ทุกระบบต้องมีทางออกที่ชัดเจน
* User prefer to be in control ดังนั้นต้องมี suggestion ทางออกให้เลือกเช่น Cencel / Undo
* เป็นการกระตุ้นให้ผู้ใช้เรียนรู้ที่จะใช้ระบบ เช่น undo สามารถย้อนกลับได้เมื่อไม่แน่ใจ หรือทำผิด
* >10 sec ผู้ใช้อาจจะไม่ต้องการรอ จะต้องมีทางออกให้ interrupt การทำงาน
* หรือในระหว่างรอประมวลผล ระบบจะต้องอนุญาตให้ผู้ใช้ออกไปกระทำงานอื่นๆ ต่อได้

7. Short-Cuts
ทางลัดการใช้งาน
* Short-cuts จะช่วยตอบสนองพฤติกรรมการใช้งานระบบของ expert user
* Short-cuts อาจจะอยู่ในรูป คำย่อ , ปุ่มฟังก์ชั่น, เม้าส์ขวา, ดับเบิ้ลคลิก
* ควรมี short-cuts ให้กลับไปจุดเริ่มต้นการทำงานได้ เช่น ปุ่ม home
* ควรมี short-cuts ในลักษณะ history เพื่อให้ผู้ใช้สามารถยกเลิก หรือย้อนกลับ process ได้
* Default value ถือเป็น short-cuts ที่ช่วยในการใช้งานของระบบสำหรับ ผู้ใช้ที่ไม่มีประสบการณ์
* Image อาจจะเป็น short-cuts ได้เช่นกัน เช่นพวก icon ใน MS-Office

8. Good Error Messages
เมื่อผู้ใช้เจอปัญหาการใช้งาน นับเป็นสิ่งที่ดีที่ทำให้ developer สามารถเข้าใจผู้ใช้ได้ดีมากยิ่งขึ้น
It raises 2 usability issues:
- It represents the condition where a user is in trouble with the system
- It gives user an opportunity to understand the system better

ภาษาที่ควรใช้ใน error message
* ภาษาที่ user เข้าใจ * สุภาพ สร้างสรรค์ * ควรมีการจัดกลุ่มของ error เพื่อง่ายต่อการค้นหา ได้หลายรูปแบบ เช่น keyword, command line

9. Prevent Errors (HOW?)
- ทดสอบบ่อยๆ ใส่ใจปัญหา หาสาเหตุ และแก้ไข ใส่ใจและถามผู้ใช้ให้แน่ชัด
Ex. เมนูในเว็บกิจการวิจัย คลิกแล้วใช้ไม่ได้

10. Help and Documentation
- ผู้ใช้มักไม่ชอบอ่านคู่มือ
- ถ้าต้องอ่านคู่มือแสดงว่า ต้องการแก้ไขปัญหาจริงๆ ดังนั้นต้อง provide การแก้ไขให้เร็ว
- การให้คำปรึกษาที่ดี searching for help หรือ แนะนำวิธีการใช้งานด้วย (How to apply) ก็จะดี
- developers ควรสร้างคู่มือของระบบให้เป็นนิสัย เช่น โปรแกรม เอกสารออกแบบ
- คู่มือควรมีความชัดเจน และอ่านเข้าใจง่าย และควรมีมาตรฐาน

วันอังคารที่ 22 กรกฎาคม พ.ศ. 2551

Introduction to HCI

Human-Computer Interaction

[ทำอย่างไรให้ผู้ใช้ รู้สึกว่าไม่ต้องรอ และไม่จำเป็นต้องทำระบบให้เร็วก็ได้]

HCI?
1) การออกแบบ การประเมิน การนำไปใช้ (implement) เพื่อให้มนุษย์สามารถใช้งานได้
2) ส่วนที่อยู่รอบๆ แวดล้อมของการใช้งานระบบสารสนเทศทั้งหมด

Goals of HCI?
เพื่อเป็นการนำไปสู่ การใช้งานได้ (usable) รู้สึกปลอดภัย (safe) และ ตอบสนองการทำงาน (functional system) โดยมีแนวทาง (criteria) การพัฒนาดังนี้

1) มีคุณสมบัติตามที่ผู้ใช้พึงประสงค์ (Proper Functionality)
2) ทำให้ผู้ใช้เกิดความเชื่อมั่น (trust) ต่อระบบ (Reliability, security and data integrity)
3) มีความเป็นมาตรฐานหรือเป็นสิ่งที่ผู้ใช้คุ้นเคย "common features among application, systems or platform" (Standardization, Integration, Consistency and Portability)
4) มีความเหมาะสมกับเวลาและงบประมาณ "making an effort in delivering the system on time and within budget"

[มนุษย์เราถูก spoile มาก ถ้าได้รับ service มากเกินไป]

Motivation for Human Factors in Software Design
แรงจูงใจสำคัญในการออกแบบซอฟต์แวร์ เพื่อตอบสนอง Human Factors
1) Life-Critical S/W System ; ระบบชี้เป็นชี้ตายได้ ความผิดพลาดของระบบต้องไม่มี เช่นระบบ CTSCAN
2) Industrial and Commercial Uses ; ต้องออกแบบให้ขายได้
3) Collaborative Systems; ตอบสนองความหลากหลาย เช่น การทำงานร่วมกัน (MSN, Lotusnotes etc.) ตอบสนองการทำงานหลากหลายวัฒนธรรม (สิ่งเหล่านี้ก่อให้เกิด community)

"การออกแบบ HCI จุดประกายมาจากความผิดพลาด"

Challenge of HCI-สิ่งที่ท้าทายความสำเร็จของ HCI
@ To keep up with Technology Change
- เพื่อก้าวทันการเปลี่ยนแปลงของเทคโนโลยี
@ To ensure users can use a system productively and enjoyably
- เพื่อมั่นใจได้ว่าผู้ใช้สามารถใช้ระบบได้จริง และไม่ทุกทนทรมานกับการใช้งาน
@ To accomdate human diversity
- เพื่อตอบสนองความหลากหลายของมนุษย์ (ผู้ใช้)

ตัวอย่าง: การใช้ command-driven กับ menu-driven
menu-driven เหมาะสำหรับ ผู้ใช้ที่เพิ่งเริ่มต้น
command-driven เหมาะกับ ผู้ใช้ที่คุ้นเคยกับระบบมาแล้ว
เช่น คำสั่งบนUNIX, คำสั่ง DOS

Point=> เป็นความท้าทายของ HCI ที่ต้องออกแบบให้รองรับกับความหลากหลายของผู้ใช้ อย่าง Windows จะมีทั้งที่เป็น Menu-Driven กับ Command-Driven


Accomandation of Human Divesity ความหลากหลายของมนุษย์ (ผู้ใช้)

#Physical ability and workspace; ทางกายภาพ ยกตัวอย่างการจัดวางตู้ ATM สูงไปต่ำไป
#Cognitive and perceptual ability; การจดจำและการเข้าใจรับรู้ เป็นเรื่องเกี่ยวกับ Short-term and Long-term memory ยกตัวอย่าง งานวิจัยปุ่ม Home (ปุ่มที่มี icon และ caption ช่วยให้เกิดการจดจำและเข้าใจได้ง่ายกว่าแบบอื่น)
# Personality Differences; บุคลิกภาพ ทำให้เกิดความต้องการแตกต่างกัน ตัวอย่างงานวิจัย e-commerce ผู้ชายซื้อของเพราะต้องการประหยัดเวลา ผู้หญิงมองเป็นกิจกรรมทางสังคม ชอบต่อรองราคา
# Cultural and international issues; ความแตกต่างทางวัฒนธรรม เช่น รูปแบบการเขียนวันที่ การอ่านหนังสือของคนญี่ปุ่น จากหลังมาหน้า เป็นต้น
# Users with Disabilities; คนพิการ
# Elderly Users; คนแก่

Point=> ความหลากหลายของมนุษย์ในด้านต่างๆ ก่อให้เกิดความต้องการที่แตกต่างกันออกไป เป็นสิ่งที่ต้องคำนึงถึงในการออกแบบระบบด้วย

How to make a "Good HCI Design"?
หลักการออกแบบระบบให้มีปฏิสัมพันธ์กับผู้ใช้ที่ดีนั้นต้องคำนึงถึง
+ Visiblility ; ระบบ และ Feature ต้องมีความชัดเจนต่อผู้ใช้
+ Affordance; ค่าความสามารถของระบบที่สามารถตอบสนองต่อความคาดหวังของผู้ใช้
+ Feedback; การให้ information ของระบบต่อผู้ใช้

+Visibility: Clear to a User
เน้นเรื่องการสื่อการให้เห้นชัดเจน เมื่อออกแบบมาแล้วสามารถที่จะสื่อสารกับผู้ใช้ได้ทันที
Ex. ตัวอย่างบานประตู IBM ที่ซ่อนตัวสลักประตูไว้ด้านใน ทำให้ผู้ใช้ไม่รู้วิธีว่าจะเปิดประตูอย่างไร
ถือเป็นการออกแบบที่ไม่คำนึงถึง Visibility

+Affordance: The Degree of matching between actual fuctionality and percieved property of software component ; เปรียบเทียบกับสิ่งที่ทำได้ กับ สิ่งที่อยากได้

==>Point
ถ้าสิ่งที่ทำได้(A) = สิ่งที่อยาก (B)
=>ตอบสนองความต้องการได้มากเท่าไหร่ก็ จะมีค่า Affordance สูง
ถ้าสิ่งที่ทำได้(A) > สิ่งที่อยากได้ (B)
=>ถือว่าดี แต่ต้องทำให้สิ่งที่ทำได้ (A) มี Visibility ด้วย

+Feedback: The Degree in which information is given to a user about "what action is done and what result is met"
Ex. โทรศัพท์ เป็นการให้ Feedback ที่เจ๋งมาก, ไฟแดงที่บอกว่าต้องรอกี่นาที, Calling Melody & Ringtone ของโทรศัพท์เคลื่อนที่ ยกตัวอย่าง Ringtone ของ อ.เน๊ะ ว่าเป็นเสียงกรี๊งดังมาก สอบถามได้ความว่า เสียงดังทำให้ตกใจและจะรีบรับสาย แต่ถ้าเป็นเสียงอื่นอาจจะไม่สนใจ

=> Point การให้ Feedback ต้องดูความเหมาะสมของการให้ด้วย ไม่ใช่ให้ตลอดเวลา

Approach to Understand Information System
- Technical Approach เน้นที่ความสามารถของระบบ
- Behavioral Approach มองจากประเด็นพฤติกรรมที่เกิดขึ้น
- Socio Technical Approach มองทั้สอง Approach ร่วมกัน

==> Point ไม่มี Approach ใดดีกว่ากัน จำเป็นที่จะต้องใช้ร่วมกัน Socio-Technial Approach
1 นำ technical มา lead 2. นำไปทดสอบ Test กับผู้ใช้ 3. ปรับปรุงแก้ไข Customise


HCI as Interdisciplinary Practice - HCI เป็นศาสตร์ผสมจากศาสตร์หลายๆ แขนง ได้แก่
- Computer Science / Engineering วิทยาการ/ วิศวกรรม คอมพิวเตอร์
- Psychology จิตวิทยา เช่น Cognitive-ความคิดและความจำของมนุษย์คนนั้นๆ (สถาปัตย์ วิศว ใช้บ่อย)
Social and Organizational Psycology ความรู้สึกนึกคิดของคนต่อองค์กรเดียวกัน และต่างองค์กร
- Ergonomics การยศาสตร์ ความสอดคล้องกับกายภาพของมนุษย์
- Linguistics ภาษาศาสตร์ การสือสารทางภาษาของมนุษย์ เช่นภาษาในแชท ท้องถิ่น เป็นต้น
- Sociology & Anthropology ชุมชน และสังคมวิทยา

==> Point เป็นข้อจำกัดของศาสตร์ผสม ทำให้การพัฒนา HCI ทำได้ช้า

Research in HCI
- Interaction between a human and a computer
- Interaction among humans thru computers
- Impact of computer on individual, groups, organization and society

==> Point วิจัย และศึกษาการปฏิสัมพันธ์ระหว่างคนกับคอมพิวเตอร์ และผลกระทบที่มีต่อบุคคล และหน่วยองค์กรต่างๆ

จบบทนี้ต้องรู้จัก และเข้าใจ Affordance กับ Visibility ว่าคืออะไร และมีส่วนเกี่ยวพันกันอย่างไร

วันเสาร์ที่ 19 กรกฎาคม พ.ศ. 2551

Fitt's Law

Fitt's Law from MSDN
28 August, 2006 - 23:25 in


บล็อกคราวก่อนคุณหมอไรเดอร์มาเปิดประเด็นเรื่องเมนูขอบบนของ OS X (เพิ่งรู้ว่ามันเรียก "mile-high menus") ผมเลยขุดเอา Fitt's Law มาอ้างอิงเป็นคำตอบ
ทีนี้รู้สึกว่าบทความ Fitt's Law ของ Wikipedia มันดูเหมาะกับชีวิตรักนักคณิตศาสตร์มากไปหน่อย แต่ยังไม่ทันหาบทความของที่อื่น ก็มาเจอกับบล็อกของทีม Office 2007 ใน MSDN ซึ่งคิดว่าเขียนเรื่อง Fitt's Law ได้ดีมาก มีตัวอย่างและภาพประกอบชัดเจน
เลยเอามาแปะฝากคุณหมอ (และคนอื่นๆ) ไว้ที่นี่ล่ะกัน
ป.ล. อ่านจบแล้วควรเล่นเกมนี้ด้วย จะเห็นภาพของ Fitt's Law แบบกระจ่างป.ล.2 บล็อกของ MSDN อันนี้จุดประเด็นเรื่องจอภาพใหญ่ และ resolution เยอะขึ้นเรื่อยๆ ผมเลยคิดว่าเราน่าจะเห็น Scalable UI ในอีกไม่กี่ปีนี้ (หรือจะเป็น Leopard?)

ข้อมูลจาก
http://www.isriya.com/node/1121