วันอังคารที่ 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 ทั่วโลก

ไม่มีความคิดเห็น: