Chapter 6 Interaction Style

Chapter 6Interaction Style CP2202 Human Computer Interaction

Interaction Styles • command line interface • menus • natural language • question/answer and query dialogue • form-fills and spreadsheets • WIMP (Windows Icons Menus Pointers) • point and click • three–dimensional interfaces

Command line interface • Way of expressing instructions to the computer directly • function keys, single characters, short abbreviations, whole words, or a combination • suitable for repetitive tasks • better for expert users than novices • offers direct access to system functionality • command names/abbreviations should be meaningful Typical example : the Unix system

Menus • Set of options displayed on the screen • Options visible • less recall - easier to use • rely on recognition so names should be meaningful • Selection by: • numbers, letters, arrow keys, mouse • combination (e.g. mouse plus accelerators) • Often options hierarchically grouped • sensible grouping is needed • Restricted form of full WIMP system

Natural language • Familiar to user • speech recognition or typed natural language • Problems • vague • ambiguous • hard to do well! • Solutions • try to understand a subset • pick on key words

Query interfaces • Question/answer interfaces • user led through interaction via series of questions • suitable for novice users but restricted functionality • often used in information systems • Query languages (e.g. SQL) • used to retrieve information from database • requires understanding of database structure and language syntax, hence requires some expertise

Form-fills Primarily for data entry or data retrieval • Screen like paper form. • Data put in relevant place • Requires • good design • obvious correction facilities

Spreadsheets First spreadsheet VISICALC, followed by Lotus 1-2-3, MS Excel most common today • sophisticated variation of form-filling • grid of cells contain a value or a formula • formula can involve values of other cells e.g. sum of all cells in this column • user can enter and alter data spreadsheet maintains consistency

WIMP Interface • Windows • Icons • Menus • Pointers • … or windows, icons, mice, and pull-down menus! • default style for majority of interactive computer systems, especially PCs and desktop machines

Point and click interfaces • used in .. • multimedia • web browsers • hypertext • just click something! • icons, text links or location on map • minimal typing

Three dimensional interfaces • virtual reality • ‘ordinary’ window systems • highlighting • visual affordance • indiscriminate use just confusing! • 5D workspaces • use for extra virtual space • light and occlusion give depth • distance effects flat buttons sculptured

Elements of the WIMP interface • ส่วนประกอบหลัก • Window • Icon • Menu • Pointer • ส่วนประกอบอื่นเช่น • Button • Toolbars • Palettes • Dialog boxes

Elements of the WIMP interface Windows • พื้นที่ทำงานที่มีส่วนการโต้ตอบแยกกัน • แต่ละอันสามารถซ้อนทับกันได้ • Tile, Cascading • ส่วนอื่นๆเพื่อช่วยเสริมการทำงานเช่น Scrollbar ส่วนของ Title Bar ปุ่มย่อ-ขยาย-ปิด • สามารถมีหน้าต่างขนาดย่อยซ้อนกันอยู่ภายใน

Elements of the WIMP interface Icons • ซ่อนหน้าต่างให้เหลือเพียงขนาดเล็กได้ • แสดงการทำงานอื่นๆของระบบได้เช่น recycle bin • แสดงถึงฟังก์ชันหรือโปรแกรมภายในระบบ

Elements of the WIMP interface Menus • จะแสดงให้เห็นถึงรายการฟังก์ชันที่สามารถใช้งานได้ • จำเป็นต้องมีความหมายและสื่อถึงการทำงาน • ปัญหาหลัก • การเลือกรายการ • การจัดกลุ่มรายการ • การทำงานที่ตรงข้ำมควรจัดให้อยู่ไกลกันเช่น save และ delete

Elements of the WIMP interface Pointers • การชี้ตำแหน่งและการเลือกวัตถุ บนหน้าต่าง • รูปร่างที่แตกต่างกันไปของ cursor แสดงให้เห็นถึงสถานะการทำงานที่ไม่เหมือนกัน • สามารถแสดงถึงการทำงานได้ เช่น รูปนาฬิกาทราย • มีส่วนที่เรียกว่า hot-spot ซึ่งแสดงถึงตำแหน่งที่มันชี้ไป

Elements of the WIMP interface Buttons • พื้นที่ใช้งานเฉพาะภายในหน้าต่างที่สามารถถูกเลือก • ใช้แสดงถึง 2 สถานะการใช้งาน • เช่นการกดปุ่มปรับตัวอักษรหนาในโปรแกรม Word • ปุ่มทางเลือก radio button • ปุ่มแสดงสถานะการเลือก check boxes

Elements of the WIMP interface Toolbars • การจัดเรียงปุ่มที่แสดงเป็น icon ไว้ด้วยกันที่ด้านบนหรือด้านข้างของหน้าต่าง • มีฟังก์ชันการทำงานคล้ายกับที่มีในเมนู • ลักษณะ icon ทำให้ผู้ใช้งานสามารถเลือกฟังก์ชันเหล่านี้ได้สะดวก • สามารถ customize ได้

Elements of the WIMP interface Palettes • ใช้ช่วยในการแสดงฟังก์ชันเสริม ณ เวลาใดเวลาหนึ่ง • เช่น ในโปรแกรมตกแต่งรูปภาพ Palette สีจะเป็นตัวช่วยเสริมให้ผู้ใช้สามารถเลือกสีที่ต้องการได้

Elements of the WIMP interface Dialog Boxes • หน้าต่างข้อความใช้สำหรับการเรียกความสนใจจากผู้ใช้ • ใช้เป็นส่วนร่วมกับขั้นตอนการทำงานของโปรแกรมเพื่อรับข้อมูลบางอย่างจากผู้ใช้ • เช่น เมื่อเราสร้างไฟล์เอกสารใหม่และกดปุ่มบันทึก

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

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

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

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

Interface by Touch and Movement • การสั่งงานคอมพิวเตอร์ หรือ SmartPhone ด้วยการสัมผัสและการเคลื่อนไหวของอวัยวะ เป็นที่นิยมในปัจจุบัน • สั่งงานโดยการสัมผัส • สั่งงานโดยการเคลื่อนไหวของมือ • สั่งงานด้วยเสียง

คำถามท้ายบท จงยกตัวอย่างการสั่งงานด้วยการสัมผัสในรูปแบบต่าง ๆ ของ Smart Phone Samsung Galaxy S IV จงยกตัวอย่างการสั่งงานด้วยการเคลื่อนไหว ในรูปแบบต่าง ๆ ของ Smart Phone Samsung Galaxy S IV จงยกตัวอย่างการสั่งงานด้วยเสียง ของ SIRI ของ iPhone

Chapter 6 Interaction Style