©2001 Southern Illinois University, Edwardsville All rights reserved. Today Fun with Icons Thursday Presentation Lottery Q & A on Final Exam Course Evaluations.

Slides:



Advertisements
Similar presentations
Thomas Herrmann Software - Ergonomie bei interaktiven Medien Create Meaningful Icons.
Advertisements

Design, prototyping and construction
COMPUTER INTERFACES.
Graphical User Interface Design
The Therac-25: A Software Fatal Failure
SM2222: Information Design and Visualization Public Information Symbols 4 November 2005.
SM2222 Information Design and Visualization Product Instruction Design 21 October 2005.
Background Increasing use of automated systems Hardware and software technology are improving rapidly User interface technology is lagging Critical bottleneck.
©2001 Southern Illinois University, Edwardsville All rights reserved. Today Tuesday Consolidation Reading: CD Ch.s 8, 9, & 10 Modeling & Interpretation.
Windows XP Basics OVERVIEW Next.
SIMS 213: User Interface Design & Development
Class 6 LBSC 690 Information Technology Human Computer Interaction and Usability.
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.
Ch 7 & 8 Interaction Styles page 1 CS 368 Designing the Interaction Interaction Design The look and feel (appearance and behavior) of interaction objects.
©Ian Sommerville 2000 Software Engineering, 6th edition. Chapter 15Slide 1 User interface design l Designing effective interfaces for software systems.
Knowledge Representation: Images and Propositions Chapter 7.
Chapter 5 Attention and Memory Constraints Presentation By: Sybil Calvillo.
User Interface Design Users should not have to adapt to a piece of software; the software should be designed to fit the user.
User interface design Designing effective interfaces for software systems Objectives To suggest some general design principles for user interface design.
Other Interaction Styles: Direct Manipulation, Haptic, Multimedia, Multimodal, Virtual Reality, Video Games Dr.s Barnes and Leventhal.
Making Meaning Visual Literacy AAD4002
Level > Next Level > …. > Crumb Trail (Hansel & Grettel) Bread Crumb Trail.
Review an existing website Usability in Design. to begin with.. Meeting Organization’s objectives and your Usability goals Meeting User’s Needs Complying.
Understanding Task Orientation Guidelines for a Successful Manual & Help System.
Design, goal of design, design process in SE context, Process of design – Quality guidelines and attributes Evolution of software design process – Procedural,
Week 5: Business Processes and Process Modeling MIS 2101: Management Information Systems.
Copyright © 2002 by Pearson Education, Inc., publishing as Longman Publishers. All rights reserved. Chapter 9 Illustrations Professional Communication:
1 Can We Trust the Computer? What Can Go Wrong? Case Study: The Therac-25 Increasing Reliability and Safety Perspectives on Failures, Dependence, Risk,
CS 235: User Interface Design August 25 Class Meeting Department of Computer Science San Jose State University Fall 2014 Instructor: Ron Mak
Area Of Study 2 Information And Communications Technology(ICT)
Principles of Good Screen Design
Usability Evaluation/LP Usability: how to judge it.
©2001 Southern Illinois University, Edwardsville All rights reserved. Today Interview Techniques (Hand-in partner preferences) Thursday In-class Interviewing.
Extended Cognitive Walkthrough Judy Kay CHAI: Computer human adapted interaction research group School of Information Technologies.
Chapter 2.2 Game Design. CS Overview This introduction covers: –Terms –Concepts –Approach All from a workaday viewpoint.
Software Architecture
School of something FACULTY OF OTHER Facing Complexity Using AAC in Human User Interface Design Lisa-Dionne Morris School of Mechanical Engineering
Understanding Users Cognition & Cognitive Frameworks
©2001 Southern Illinois University, Edwardsville All rights reserved. Today Group Discussion Design Elements Continued Readings in HCI, pp Monday.
©2001 Southern Illinois University, Edwardsville All rights reserved. CS 321 Human-Computer Interaction Today Fun with Icons Wednesday Project Milestone:
©2001 Southern Illinois University, Edwardsville All rights reserved. CS 321 Human-Computer Interaction Today Course Introduction Wednesday Introduction.
Different Types of HCI CLI Menu Driven GUI NLI
Topic 4 - Database Design Unit 1 – Database Analysis and Design Advanced Higher Information Systems St Kentigern’s Academy.
Chapter 5:User Interface Design Concepts Of UI Interface Model Internal an External Design Evaluation Interaction Information Display Software.
Conceptual Model Design Informing the user what to do Lecture # 10 (a) Gabriel Spitz.
Software Requirements Specification (SRS)
User Interface Design Lecture #4 Part-A. 30 January, 2008Human Computer Interaction Spring 2008, Lecture #4A 2 Agenda Principles on User Interface Design.
Cs413_design02.ppt GUI Design The User Controls Navigation Traditional GUI design the designer can control where the user can go gray out menu options.
©2001 Southern Illinois University, Edwardsville All rights reserved. Today Finish Ethics Next Week Research Topics in HCI CS 321 Human-Computer Interaction.
The single most important skill for a computer programmer is problem solving Problem solving means the ability to formulate problems, think creatively.
Oman College of Management and Technology Course – MM Topic 7 Production and Distribution of Multimedia Titles CS/MIS Department.
TYPE OF READINGS.
Computer Aided Design 3D CAD Modelling. What is C.A.D? C.A.D stands for Computer Aided Design. C.A.D uses computer technology to enable designers, engineers.
©2001 Southern Illinois University, Edwardsville All rights reserved. Today Putting it in Practice: CD Ch. 20 Monday Fun with Icons CS 321 Human-Computer.
©2001 Southern Illinois University, Edwardsville All rights reserved. CS 321 Human-Computer Interaction Today Design from Data Reading: CD Ch. 11, 12,
©2001 Southern Illinois University, Edwardsville All rights reserved. Today Tuesday Contextual Inquiry & Intro to Ethnography Introduction to HCI & Contextual.
IT323 - Software Engineering 2 1 Tutorial 3.  Suggest ways in which the user interface to an e-commerce system such as an online stores might be adapted.
©2001 Southern Illinois University, Edwardsville All rights reserved. Today System Design: Reading: CD Ch.s 14, 15, &16 Monday Midterm CS 321 Human-Computer.
A disciplined approach to analyzing malfunctions –Provides feedback into the redesign process 1.Play protocol, searching for malfunctions 2.Answer four.
©2001 Southern Illinois University, Edwardsville All rights reserved. Today Tuesday CS 321 Human-Computer Interaction Paper Prototyping Video: Paper Prototyping.
Systems and User Interface Software. Types of Operating System  Single User  Multi User  Multi-tasking  Batch Processing  Interactive  Real Time.
Interaction Frameworks COMPSCI 345 S1 C and SoftEng 350 S1 C Lecture 3 Chapter (Heim)
What is a Computer An electronic, digital device that stores and processes information. A machine that accepts input, processes it according to specified.
DOCUMENTATION REF: Essentials of IT (Hamilton et al) Chapter 1.
6. (supplemental) User Interface Design. User Interface Design System users often judge a system by its interface rather than its functionality A poorly.
1 INTRODUCTION TO COMPUTER GRAPHICS. Computer Graphics The computer is an information processing machine. It is a tool for storing, manipulating and correlating.
CIS 524 Possible Is Everything/tutorialrank.com
CIS 524 Education for Service/tutorialrank.com
10 Design Principles.
Presentation transcript:

©2001 Southern Illinois University, Edwardsville All rights reserved. Today Fun with Icons Thursday Presentation Lottery Q & A on Final Exam Course Evaluations CS 321 Human-Computer Interaction

©2001 Southern Illinois University, Edwardsville All rights reserved. Ethics Epilog: Therac – 25 Linear accelerator to deliver x-rays and electron beams for the treatment of cancer Released in 1985 Third generation machine (Therac-6, Therac-20)

©2001 Southern Illinois University, Edwardsville All rights reserved. Therac-25 : What happened? Normal radiation treatments: 6,000 rads over a 3 week period. Under certain conditions Therac-25 was delivering 60,000 rads during a single session!

©2001 Southern Illinois University, Edwardsville All rights reserved. Therac-25: What went wrong? Paradigm Shift Therac-25 replaced expensive hardware safety interlocks and constraints on prevsious models with software controls Real-time software Design Race condition caused focusing element to be incorrectly set No interface indication of actual hardware settings – must be checked by going into the radiation area Error messages appeared the same regardless of how important Error messages were difficult to understand; needed to consult a manual or call the company for technical help All errors messages could be manually overridden

©2001 Southern Illinois University, Edwardsville All rights reserved. Therac-25: What went wrong? Lack of experience and overconfidence in software controls No user involvement in design or testing Insufficient testing Poor error messages Lack of visibility of hardware settings Lack of constraints Affordance of overrides Poor documentation

©2001 Southern Illinois University, Edwardsville All rights reserved. Final Words Student ACM Membership CACM: Communications of the ACM Online journals and conference papers Free tutorials Job listings Supports your professional organization

©2001 Southern Illinois University, Edwardsville All rights reserved. What Do These Mean? An icons is a small pictographic symbol Intended to quickly convey their essential meaning to the users Icons designed as warning symbols

©2001 Southern Illinois University, Edwardsville All rights reserved. Why Use Icons? Provide imagery for immediate recognition. Recognition over recall To speed search for actions Pictures can be quicker to scan than text Help improve recall. Reduces the need for interpreting text. To save space Valuable screen real-estate To make interfaces less dependent language Universality

©2001 Southern Illinois University, Edwardsville All rights reserved. Disadvantages of Icons Ambiguity Poorly designed symbol can carry multiple meanings Dependence on the user, task, and context Interpretation depends on the association the user makes between the symbol and her background knowledge The symbols must carry meaning with respect to the task The symbols are interpreted differently in different contexts. Some concepts, particularly actions, can be difficult to display pictorially

©2001 Southern Illinois University, Edwardsville All rights reserved. What Do These Mean? Icons from an application Interface Hall of Shame

©2001 Southern Illinois University, Edwardsville All rights reserved. Icons & Information Processing Imagery of an icon must be meaningful to be effective in providing quick recognition Symbols must have a strong, direct association with the desired meaning

©2001 Southern Illinois University, Edwardsville All rights reserved. Icons & Information Processing Shallow & Deep Analysis Shallow analysis is the processing of surface features, such as lines in pictures. Deep analysis is the processing of semantic features, such as meaning and relationship to other concepts Meaningfulness depends on the icon’s ability to provide for a deep analysis.

©2001 Southern Illinois University, Edwardsville All rights reserved. Attributes of Meaningfulness Familiarity – frequency of which something occurs in everyday activities More familiar images/words are easier to recognize Highly familiar images/words may cause confusion –Users must disassociate the common meaning and associate the intended meaning Imagery – the ability of something to elicit an image in one’s mind

©2001 Southern Illinois University, Edwardsville All rights reserved. Imagery: Icons from the DOT

©2001 Southern Illinois University, Edwardsville All rights reserved. Factors that Effect Meaningfulness Context – the overall setting in which an icon is being used. Temperature warning or weather report?

©2001 Southern Illinois University, Edwardsville All rights reserved. Factors that Effect Meaningfulness Function, Task, or Underlying Concept – what is being represented Nouns are generally easier to represent than verbs  Concrete objects are generally easier to represent than actions  Actions must be conveyed through some indirect representation Highly visual tasks are easier to represent

©2001 Southern Illinois University, Edwardsville All rights reserved. Factors that Effect Meaningfulness What about animated icons?

©2001 Southern Illinois University, Edwardsville All rights reserved. Factors that Effect Meaningfulness Representational Forms – representing the underlying concept Concrete representations: direct representation Abstract representations: expression of a quality apart from the object Combination

©2001 Southern Illinois University, Edwardsville All rights reserved. Factors that Effect Meaningfulness Combining text can aid the interpretation of icons Too many icons with text defeats the advantages

©2001 Southern Illinois University, Edwardsville All rights reserved. Factors that Effect Meaningfulness Types of Representational Forms Resemblance icons: direct depiction of underlying concept Exemplar icon: depicts a typical example of concept Symbolic icon: refers to a higher level abstraction than the image itself Arbitrary icon: no relation to the underlying concept

©2001 Southern Illinois University, Edwardsville All rights reserved. Factors that Effect Meaningfulness Which are: Resemblance? Exemplar? Symbolic? Arbitrary?

©2001 Southern Illinois University, Edwardsville All rights reserved. Factors that Effect Meaningfulness Amount of Detail Determining the appropriate amount of detail is important As little as possible but still get the message across More detail requires more mental processing

©2001 Southern Illinois University, Edwardsville All rights reserved. How Do I Draw an Icon? Find an icon editor Icons are a standard 32 X 32 pixels

©2001 Southern Illinois University, Edwardsville All rights reserved. Icon Exercise Get into your Discussion Groups Design Icons for the concepts on the hand-out Do not use any words Draw them each on a separate piece of paper but DO NOT label them. Be sure everyone’s name is on them. Tape them on the board when you are done.