Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem Human Computer Interaction - 1 Dr. Mohammed Alabdulkareem

Slides:

Advertisements

Similar presentations

Chapter 11 Designing the User Interface

Advertisements

The New User Interface MEDITECH Training & Education.

Designing a Graphical User Interface (GUI) 10 IST – Topic 6.

User Interfaces 4 BTECH: IT WIKI PAGE:

Copyright 1999 all rights reserved The HCI Design Process n User Interfaces are not just built by sitting down and drawing up designs for them n Just like.

GUI Testing. High level System Testing Test only those scenarios and outputs that are observable by the user Event-driven Interactive Two parts to test.

User Testing & Experiments. Objectives Explain the process of running a user testing or experiment session. Describe evaluation scripts and pilot tests.

Interaction Styles Course 6, CMC, 07/10/03 Direct Manipulation

1 / 31 CS 425/625 Software Engineering User Interface Design Based on Chapter 15 of the textbook [SE-6] Ian Sommerville, Software Engineering, 6 th Ed.,

User Interface Design: Methods of Interaction. Accepted design principles Interface design needs to consider the following issues: 1. Visual clarity 2.

Exploring the Basics of Windows XP. Objectives Start Windows XP and tour the desktop Explore the Start menu Run software programs, switch between them,

PowerPoint Presentation for Dennis, Wixom & Tegarden Systems Analysis and Design Copyright 2001 © John Wiley & Sons, Inc. All rights reserved. Slide 1.

Interaction Styles Interface Widgets. What are Interaction Styles?  A Collection of interface objects and associated techniques from which an interaction.

Part 3: Design Chapter 8: Work Reengineering and Conceptual Design Chapter 9: Design Guidance and Design Rationale Chapter 10: Interaction Design Chapter.

User Interface Design Users should not have to adapt to a piece of software; the software should be designed to fit the user.

Technology Education and Information Design Copyright 2009 MediTech NUI: New User Interface Online Training.

Chapter 13: Designing the User Interface

Object-Oriented Analysis and Design LECTURE 8: USER INTERFACE DESIGN.

Exploring the Basics of Windows XP

User Interface Design Chapter 11. Objectives  Understand several fundamental user interface (UI) design principles.  Understand the process of UI design.

Human Interface Engineering1 Main Title, 60 pt., U/L case LS=.8 lines Introduction to Human Interface Engineering NTU Seminar Amy Ma HIE Global Director.

Microsoft Visual Basic 2012 CHAPTER TWO Program and Graphical User Interface Design.

Computer for Health Sciences

Systems Analysis and Design in a Changing World, 6th Edition

User Interface Theory & Design

Systems Analysis and Design in a Changing World, 6th Edition

Chapter 11: Interaction Styles. Interaction Styles Introduction: Interaction styles are primarily different ways in which a user and computer system can.

Systems Analysis and Design in a Changing World, 6th Edition

Ch 6 - Menu-Based and Form Fill-In Interactions Yonglei Tao School of Computing & Info Systems GVSU.

Evaluation of Products for Accessibility: The CUDA Lab at CSULB and Technical Evaluation at the Campus Level Fred Garcia and Shawn Bates.

1 SWE 513: Software Engineering Usability II. 2 Usability and Cost Good usability may be expensive in hardware or special software development User interface.

User interface design. Recap OOD is an approach to design so that design components have their own private state and operations Objects should have constructor.

Unit 1_9 Human Computer Interface. Why have an Interface? The user needs to issue instructions Problem diagnosis The Computer needs to tell the user what.

CSC 480 Software Engineering Lecture 19 Nov 11, 2002.

Lecture 6 User Interface Design

Visual Basic 2005 CHAPTER 2 Program and Graphical User Interface Design.

Object-Oriented Software Engineering Practical Software Development using UML and Java Chapter 7: Focusing on Users and Their Tasks.

Designing Interface Components. Components Navigation components - the user uses these components to give instructions. Input – Components that are used.

1 Microsoft Windows 2000 Robert H. Smith School of Business University of Maryland – College Park Essentials of Windows.

Productivity Programs Common Features and Commands.

Copyright © 2010 Wolters Kluwer Health | Lippincott Williams & Wilkins Introduction to Windows Chapter 2.

Design Rules-Part B Standards and Guidelines

PowerPoint Presentation for Dennis, Wixom, & Tegarden Systems Analysis and Design with UML, 3rd Edition Copyright © 2009 John Wiley & Sons, Inc. All rights.

INFS 6225 Object-Oriented Systems Analysis & Design Chapter 10: Human Computer Interaction Layer.

INFORMATION X INFO425: Systems Design Chapter 14 Designing the user interface.

Evaluation of User Interface Design 4. Predictive Evaluation continued Different kinds of predictive evaluation: 1.Inspection methods 2.Usage simulations.

INFO 355Week #71 Systems Analysis II User and system interface design INFO 355 Glenn Booker.

12.1 CSC 123 Systems Analysis & Design Part IV: The Essentials of Design Chapter 12 Designing Effective Input.

Exploring Windows and Essential Computing Concepts 1 Windows Desktop u Windows Basics u Icon u Start Button u My Computer u Network Neighborhood u Recycle.

User Interface Theory & Design Lecture 6a 1.  User interface is everything the end user comes into contact with while using the system  To the user,

Creating Graphical User Interfaces (GUI’s) with MATLAB By Jeffrey A. Webb OSU Gateway Coalition Member.

Visual Basic 2005 CHAPTER 2 Program and Graphical User Interface Design.

Microsoft Office XP Illustrated Introductory, Enhanced Started with Windows 2000 Getting.

1 User Interface Design Components Chapter Key Definitions The navigation mechanism provides the way for users to tell the system what to do The.

Microsoft Visual Basic 2010 CHAPTER TWO Program and Graphical User Interface Design.

Chapter 7 Jay Babb Andrew Bates Steve Haroz. Display limitation  Long, functionally grouped menus are preferred over deep menus.  Resolution problem.

 2002 Prentice Hall. All rights reserved. 1 Chapter 2 – Introduction to the Visual Studio.NET IDE Outline 2.1Introduction 2.2Visual Studio.NET Integrated.

Design Phase intro & User Interface Design (Ch 8)

Printed Reports Analysis questions –Who will use the report? –What is the purpose of the report? –When or how often is the report needed? –Where does the.

Design Evaluation Overview Introduction Model for Interface Design Evaluation Types of Evaluation –Conceptual Design –Usability –Learning Outcome.

Decision Support System by Simulation Model (Ajarn Chat Chuchuen) 1 Chapter 6 User Interface Management.

Dr. Fakhri Alam Khan CIS 344-Z: User Interface Design.

Pasewark & Pasewark 1 Windows Vista Lesson 1 Windows Vista Basics Microsoft Office 2007: Introductory.

SIE 515 Design Evaluation Lecture 7.

Unit 2 User Interface Design.

Program and Graphical User Interface Design

Vocabulary I Vocabulary II Vocabulary III Vocabulary IV Vocabulary

User Interface Design Notes are from: Wilson, Software Design and Development The Preliminary Course. Cambridge Press. pp and Fowler,

Chapter 2 – Introduction to the Visual Studio .NET IDE

Exploring the Basics of Windows XP

Presentation transcript:

Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem Human Computer Interaction - 1 Dr. Mohammed Alabdulkareem

Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem Human Computer Interaction Why HCI? Human Information Processing. Technology Supporting User Interface. Window system design. Screen Layout and Design.

Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem Human Computer Interaction Dialog Styles. Evaluation of User Interface. Error Handling. Documentation.

Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem Why HCI?

Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem Why HCI?

Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem Why HCI?

Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem Why HCI?

Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem Why HCI?

Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem Human Computer Interaction Why HCI? Human Information Processing. Technology Supporting User Interface. Window system design. Screen Layout and Design Dialog Styles. Evaluation of User Interface. Error Handling. Documentation.

Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem Human Information Processing EncodingComparison Response selection Response execution Input Response

Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem Human Information Processing EncodingComparison Response selection Response execution Input Response Attention Memory

Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem Human Information Processing Visual Perception What we see is not what we recognize. Constructivist (stored knowledge). Ecological (no stored knowledge).

Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem Human Information Processing What we see is not what we recognize.

Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem Human Information Processing Constructivist (stored knowledge).

Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem Human Information Processing Constructivist (stored knowledge).

Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem Human Information Processing Ecological (no stored knowledge). Affordance

Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem

Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem Human Computer Interaction Why HCI? Human Information Processing. Technology Supporting User Interface. Window system design. Screen Layout and Design Dialog Styles. Evaluation of User Interface. Error Handling. Documentation.

Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem Technology Supporting User Interface. Input Devices. Output Devices. High-speed Processing. Networking.

Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem Technology Supporting User Interface. Input Devices. Keyboard. Pointing devices. 3D Input. Recognized Input.

Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem Technology Supporting User Interface. Input Devices. Keyboards. QWERTY DVORAK Split

Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem Technology Supporting User Interface. Input Devices. POINTING DEVICES Mouse Trackball Touch-screen

Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem Technology Supporting User Interface. Input Devices. 3D Input. Data Glove 3D-Mouse

Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem Technology Supporting User Interface. Input Devices. Recognized Input. OCR Eye-Gaze Barcode Scan

Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem Technology Supporting User Interface. Output Devices. CRT. LCD. Sound. Printers 3D display

Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem Technology Supporting User Interface. High-Speed Processing GUI (Windows). VR. 3D Graphics. Networking Sharing resources. Web & Internet

Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem Technology Supporting User Interface. Matching Devices with Work Accuracy level. Task requirements. Direct mapping.

Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem

Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem Human Computer Interaction Why HCI? Human Information Processing. Technology Supporting User Interface. Window system design. Screen Layout and Design Dialog Styles. Evaluation of User Interface. Error Handling. Documentation.

Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem Windows System Design Windows was designed to support more than one output on the same physical screen. Windows supports multitasking. Working with windows takes more time! Many lessons learned from the users. Each window system has its flavor of control.

Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem Windows System Design Windows Basic Components Windows: Title bar. Close Box. Zoom Box. Size Box. Scroll Control. Menu. Dialogue Boxes. Cursor. Control & Control Panels.

Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem Windows System Design Windows Basic Components Windows: Title bar. Close Box. Zoom Box. Size Box. Scroll Control.

Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem Windows System Design

Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem Windows System Design Menus Pop-UP Pull Down Submenu

Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem Windows System Design Dialog box

Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem Windows System Design Cursor Change cursor with context. Lost Cursor. The pointing edge. Cursor-on help text.

Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem Windows System Design Controls Buttons. Sliders. Check box. Radio buttons.

Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem Human Computer Interaction Why HCI? Human Information Processing. Technology Supporting User Interface. Window system design. Screen Layout and Design Dialog Styles. Evaluation of User Interface. Error Handling. Documentation.

Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem Screen Layout and Design Screen is our Real Estate. The space should be utilized with goals in mind. Think of the user (User Centered Design). Think of the task (Task Analysis).

Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem Screen Layout and Design Screen space is limited. Use windows. Use more than one screen. Arrange information.

Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem Screen Layout and Design Set measurable usability goals early. Usability and user needs should drive the design. Define types of users (Expert/Novice). Consider the personal differences. Use the matching dialog style. Testing throughout the design process.

Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem Screen Layout and Design Guide lines Include only essential information. Include all essential information. Start at the upper left corner. Design : follow formatting standard. Apply logical grouping of items.

Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem Screen Layout and Design Guide lines Symmetry & balance of white spaces. Avoid heavy use of uppercase. Distinguish caption & fields. The level of Detail is the same as user knowledge. Avoid color pollution.

Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem

Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem Human Computer Interaction Why HCI? Human Information Processing. Technology Supporting User Interface. Window system design. Screen Layout and Design Dialog Styles. Evaluation of User Interface. Error Handling. Documentation.

Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem Dialog Styles

Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem Dialog Styles Command Good for experts. Exact spelling. Hard to remember (GREP).

Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem Dialog Styles Menus Options & Enhancements are visible. Grouping: Access Time (Sec) Errors.

Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem Dialog Styles Q & A Old style. Used with setup. Answer selected (menu).

Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem Dialog Styles Forms: Different categories of data. Helps the users to place data correctly. It should help the user about what type of data is expected. Allows going back. Allow Validation.

Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem Dialog Styles Direct Manipulation: Visibility of the objects. Rapid, reversible, incremental actions. Simulate real life. Allow Validation.

Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem

Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem Human Computer Interaction Why HCI? Human Information Processing. Technology Supporting User Interface. Window system design. Screen Layout and Design Dialog Styles. Evaluation of User Interface. Error Handling. Documentation.

Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem Evaluation of User Interface The Keyword is the user. The User  The Programmer. Never forget the TASK.

Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem Evaluation of User Interface The Keyword is the user. The user is the final evaluator of your product. User Profile: Psychological Characteristics. Knowledge and experience. Job and Task Characteristics. Physical Characteristics.

Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem Evaluation of User Interface The User  The Programmer. The mental Model is different. Experiences are different. Background.

Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem Evaluation of User Interface The User  The Programmer.

Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem Evaluation of User Interface Never forget the TASK.

Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem Evaluation of User Interface How to evaluate? User Observation. Verbal Protocol (Think aloud). Software Logging. Users ’ Opinion (Interview, Questionnaire). Experiments & Benchmark.

Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem Evaluation of User Interface Predictive Evaluation: Inspection methods (experts in technology & the intended users). Usage simulation (experts simulate less experienced users). Structured reviewing. Heuristic evaluation (only key issues). Discount usability evaluation (Scenarios). Cognitive walkthrough.

Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem Evaluation of User Interface Key Issues: Validity: Evaluation Purpose & Method. Reliability: Experiments yield the same results. Biases: Avoid selective data gathering.

Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem

Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem Human Computer Interaction Why HCI? Human Information Processing. Technology Supporting User Interface. Window system design. Screen Layout and Design Dialog Styles. Evaluation of User Interface. Error Handling. Documentation.

Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem Error Handling What types of errors: Perceptual Errors (B8, Z2, I1). Cognitive Errors (Memory, Link, Inconsistent). Motor Errors (Hand, Eye).

Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem Error Handling Perceptual Errors (B8, Z2, I1). B8 B8 B8

Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem Error Handling Cognitive Errors (Memory, Link, Inconsistent).

Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem Error Handling Motor Errors (Hand, Eye). Options very close to each other. The selection is very sensitive.

Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem Human Computer Interaction Why HCI? Human Information Processing. Technology Supporting User Interface. Window system design. Screen Layout and Design Dialog Styles. Evaluation of User Interface. Error Handling. Documentation.

Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem Documentation User manual vs. Technical guide. User manual guidelines. Online Help.

Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem Documentation User manual vs. Technical guide. User manual intended for non technical users. (Part of the user interface) Technical guide is intended for technical people.(How to develop)

Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem Documentation User manual guidelines. Easy to navigate. Organize chapters according to users goal. TOC should present high level overview. Provide an index. Use consistent cues for different type of information.

Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem Documentation User manual guidelines. Ease of learning Provide a foundation and build on it. Use examples. Use illustrations. Make consistent use of spatial and visual cues.

Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem Documentation User manual guidelines. Ease of reading Use the white space wisely. Write using low grade level. Avoid expert jargons.

Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem Documentation Online Help. Make help visible (but not annoying). Complete & accurate. Multiple Access Method. Make it easy to return to problem context. Make it fast. Provide different levels of details.