How does the user think visually? That understanding can tell us about how to design visual images.

Slides:



Advertisements
Similar presentations
Recuperação de Informação B Cap. 10: User Interfaces and Visualization , , , November 29, 1999.
Advertisements

Design, prototyping and construction
Chapter 11 Designing the User Interface
User Interface Structure Design
Activity Design Goal: work from problems and opportunities of problem domain to envision new activities.
Certificate in Digital Applications – Level 02 Website Design and Creation.
1 CS 501 Spring 2002 CS 501: Software Engineering Lecture 11 Designing for Usability I.
Project Proposal.
Dobrin / Keller / Weisser : Technical Communication in the Twenty-First Century. © 2008 Pearson Education. Upper Saddle River, NJ, All Rights Reserved.
The Tools You Need to Break It Down.  I can analyze a text using elements of the rhetorical web.
User Interface Design Notes p7 T120B pavasario sem.
From requirements to design
Design Activities in Usability Engineering laura leventhal and julie barnes.
Lecture 7 Date: 23rd February
New Library Catalogue Interface Proposal 3. Introduction This presentation will outline the design decisions for the new interface of the on-line library.
Week 8 Implementation Design Alex Baker. Implementation Design System Design – Describes what the system should do Implementation Design – Describes what.
User Interface Design: Methods of Interaction. Accepted design principles Interface design needs to consider the following issues: 1. Visual clarity 2.
Understanding and Conceptualizing Interaction Chapter 2.
PowerPoint Presentation for Dennis, Wixom & Tegarden Systems Analysis and Design Copyright 2001 © John Wiley & Sons, Inc. All rights reserved. Slide 1.
Creating Architectural Descriptions. Outline Standardizing architectural descriptions: The IEEE has published, “Recommended Practice for Architectural.
4. Interaction Design Overview 4.1. Ergonomics 4.2. Designing complex interactive systems Situated design Collaborative design: a multidisciplinary.
1 THE USER INTERFACE Interface Design. 2 Requirements for a good HCI appropriate for the level and domain of expertise good interface mechanics –menus,
Maximizing Teaching & Learning For the Short Course.
Chapter 13: Designing the User Interface
©Ian Sommerville 2004Software Engineering, 7th edition. Chapter 16 Slide 1 User interface design.
Understanding Task Orientation Guidelines for a Successful Manual & Help System.
Planning and Designing a Website Session 8. Designing a Website Like all technical artefacts a website needs to be carefully planned and designed to be.
Design, goal of design, design process in SE context, Process of design – Quality guidelines and attributes Evolution of software design process – Procedural,
Website Design. Designing and creating different elements involved in developing a website for e- commerce can help you identify and describe the components.
Technology and Motivation
PowerPoint Presentation for Dennis, Wixom & Tegarden Systems Analysis and Design Copyright 2001 © John Wiley & Sons, Inc. All rights reserved. Slide 1.
Web Design, 4 th Edition 4 Planning a Successful Web Site: Part 2.
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.
CSC 480 Software Engineering Lecture 19 Nov 11, 2002.
The ID process Identifying needs and establishing requirements Developing alternative designs that meet those requirements Building interactive versions.
Object-Oriented Software Engineering Practical Software Development using UML and Java Chapter 7: Focusing on Users and Their Tasks.
Heuristic evaluation Functionality: Visual Design: Efficiency:
COMP106 Assignment 2 Proposal 1. Interface Tasks My new interface design for the University library catalogue will incorporate all of the existing features,
©2001 Southern Illinois University, Edwardsville All rights reserved. Today Fun with Icons Thursday Presentation Lottery Q & A on Final Exam Course Evaluations.
Design Rules-Part B Standards and Guidelines
User Interface Structure Design Chapter 11. Key Definitions The user interface defines how the system will interact with external entities The system.
Slide 1 Chapter 11 User Interface Structure Design Chapter 11 Alan Dennis, Barbara Wixom, and David Tegarden John Wiley & Sons, Inc. Slides by Fred Niederman.
AVI/Psych 358/IE 340: Human Factors Interfaces and Interaction September 22, 2008.
GRASP: Designing Objects with Responsibilities
Living Systems Model Overview Why a new ID Model? Living Systems Model Phases Examples.
Metaphors in Computing  Metaphors are the fundamental concepts, terms, and images by which and through which information is easily recognized, understood,
Close Reading Intermediate 2. Time The Close Reading exam paper lasts for one hour. (Date and time for 2011: Friday 13 May, 1.00pm to 2.00pm.) NAB: Friday.
C OMPUTING E SSENTIALS Timothy J. O’Leary Linda I. O’Leary Presentations by: Fred Bounds.
Embedded Assessment 1 Creating and Presenting a Monologue.
Human Computer Interaction
Pad++: A Zooming Graphical Interface for Exploring Alternate Interface Physics Presented By: Daniel Loewus-Deitch.
1 Technical & Business Writing (ENG-715) Muhammad Bilal Bashir UIIT, Rawalpindi.
Yonglei Tao School of Computing & Info Systems GVSU Ch 7 Design Guidelines.
Conceptual Model Design Informing the user what to do Lecture # 10 (a) Gabriel Spitz.
Lesson 8: Navigation. Overview  The manner in which you display your web site’s navigation is crucial to its overall usability.  Users need a clear.
Basic Elements.  Design is the process of collecting ideas, and aesthetically arranging and implementing them, guided by certain principles for a specific.
Oman College of Management and Technology Course – MM Topic 7 Production and Distribution of Multimedia Titles CS/MIS Department.
COURSE AND SYLLABUS DESIGN
HTML5 SEMANTICS TO OR NOT TO THAT IS THE QUESTION BY WILLIAM MURRAY.
 The same story, information, etc can be represented in different media  Text, images, sound, moving pictures  All media can be represented digitally.
Conceptual Model Design Informing the user what to do Lecture 10a Gabriel Spitz 1.
Design Evaluation Overview Introduction Model for Interface Design Evaluation Types of Evaluation –Conceptual Design –Usability –Learning Outcome.
Copyright 2006 John Wiley & Sons, Inc Chapter 5 – Cognitive Engineering HCI: Developing Effective Organizational Information Systems Dov Te’eni Jane Carey.
ICAD3218A Create User Documentation.  Before starting to create any user documentation ask ‘What is the documentation going to be used for?’.  When.
6. (supplemental) User Interface Design. User Interface Design System users often judge a system by its interface rather than its functionality A poorly.
Design for usability E6: Human Factors Design IB Technology.
IB Assessments CRITERION!!!.
Designing Information Systems Notes
Enhancing Student Learning and Retention with Community Partnerships
Planning and Storyboarding a Web Site
Presentation transcript:

How does the user think visually? That understanding can tell us about how to design visual images

When text and images are related they should be placed in close proximity

 Understanding of Human perception  Graphic designs are cognitive tools ◦ Enhancing ◦ Extending

Diagrams, maps, web pages, information graphics, visual instructions, and technical illustration all help us to solve problems To see a pattern is to understand the solution to a problem.

 A figure of speech which should not be taken literally,  Metaphors facilitate a mapping of knowledge from a source domain (familiar area of knowledge) to a target domain (unfamiliar area or situation)  Metaphors functions as a basis for interaction

 Appears to be a surface on which people can keep tools and documents (folders and trashcans)  Menus on desktop equate to restaurant menus - people can makes choices  Elements on the desktop go together; folders go with documents that go with typewriters that go with desktops.

 Explaining a more abstract concept  Conveying concepts and features to the audience  Suggesting a use for something  Relating ideas  Easing navigation  Easing information access  Making it easier to interact with the environment  Defining a meaning between searching, hierarchical structure and contents of the space.  Visually communicating a use (clear affordances)

1. Increase the familiarity with Interface 2. Motivates the user to explore 3. Maintain Consistency in Interface 4. Contain a naturalness and pervasiveness of metaphor in human thought and language 5. Coherence: all elements of the metaphor naturally belong together 6. Help novices to quickly learn how to use a computer system through the application of a source domain to the target domain

 1. Restrictive for design decisions  2. A mismatch between source and target domains can mislead users  3. Can be expensive and time consuming  4. Slight mismatches between the real- world and the representation on the computer are inevitable

User expectations (know your audience)  The system's functionality and which aspects the user may find difficult to understand  Overall consistency - the same icon should cause the same thing to happen irrespective of the application.  Extend the user's memory through menus/forms  Reduce semantic distance (between form of expression and its function)  Syntactic considerations (delete file or file delete)

1. Identification of candidate metaphors  Emotional tone of the metaphor must match the human's desired attitude  A similar theme should form the basis for all applied metaphors  Make the interface dynamic- actively involve audience in the scenario  Spatial nature  Metaphors depend on the main purpose of the application program 2. Detailing of the metaphor/software matches with respect to representative user scenarios 3. Identification of inevitable mismatches and their implications  Mismatch should be isolated and an alternative course of action should be available  There must be something to learn- it must be possible for the intended audience to actually learn it, on their own or with help from the designer. For example, whenever an action on some object fails, an alternative for directly manipulating the object this way should be available through a pull-down menu. 4. The identification of design strategies to help users manage mismatches.  Users should explore without penalty  On-line Help aids users to solve problems arising from mismatches  Users should be able to escape for any function performed (escape key)  Handling errors is an essential responsibility of the human-computer interface.  Error messages should be informative and give the user insight into what caused the error

1. Where standard metaphors exist - use them 2. When a metaphor is used in several applications implement it in a standard way 3. Use the full extent of a metaphor 4. Avoid similar metaphors when using multiple metaphors 5. Do not dismiss metaphors; they can be a crucial aspect of iconic interface design 6. Overuse can be a dangerous thing 7. Metaphors have limitations

 As yet standard metaphors have not been formally identified although some 'de facto' standards are emerging. For example: desktops, electronic books, office metaphors, and so on. Because of their widespread appeal and acceptance such metaphors should, if they are acceptable, be used in situations where they are appropriate - thereby building on established knowledge.

 We need sets of off-the-shelf, tried and tested icons' which relate to particular interface metaphors. When implementing an application based upon a particular metaphor, a new interface can then incorporate these standard icons - thus allowing skills, knowledge and experience developed in one domain to be directly transferred to other application domains.

The extent of implementation of a metaphor can vary considerably. An incomplete implementation can sometimes lead to confusion, frustration and the development of poorly formed cognitive structures for an application. Metaphors should therefore be implemented to the full extent whenever this is appropriate. For example, electronic books should use the book metaphor to its fullest extent. Many so-called electronic books fail to provide even such basic aspects of the book metaphor as page numbers, headers and footers, indexes, and so on.

 As we have mentioned previously, it is often convenient to employ two or more metaphors simultaneously within a given application. Of course, when using this approach it is important to ensure that the different metaphors that are used are clear and distinct from each other. Obviously, similar metaphors are likely to cause confusion in situations where they produce icons which might be equally applicable under either metaphor -especially when the functionality of the icons is different.

 We believe that metaphors are important in the context of both iconic interface design and in enduser interaction.  Unfortunately, when discussing the idea of interface metaphors, people sometimes make comments such as: 'As they are implicit in interfaces anyway, there is no need to be aware of them when designing iconic interfaces.  We have already illustrated some of the kinds of problem that such an attitude can produce. We would suggest that this is a shortsighted point of view which can lead to a variety of complications and inconsistencies within the enduser interface.  The use of appropriate metaphors during iconic interface design can ensure that these problems are effectively circumvented.

 Metaphors are tools to facilitate interface design and end-user interaction with an application.  Despite their usefulness it is possible to overuse them.  Overuse can lead to complicated interfaces as a result of introducing too much conceptual and cognitive complexity.  It is therefore important not to use a metaphor(s) to such an extreme that it detracts from the interface usability.

 Because metaphors are a 'likeness' and not 'the real thing' they are bound to have limitations.  Therefore, a metaphor will often 'break down'. It is thus imperative that a metaphor is not used or 'pushed' beyond its limitations.

 A Virtual Digital Library Interface with a Spatial Metaphor  Abstract from Site:  From the icons in our user interface to the database schemas we use to represent the digital library, we have utilized the existing physical library terminology and appearance in the hopes of being able to capture a more complete essence of library, both in function and aesthetics.

But metaphor alone is not enough for effective interface design. There has been much written and taught about choosing and designing the best metaphor for a given job, but for maximized ease of use, no metaphor is sufficient. We need to go beyond metaphor, sometimes even abandoning it, to make our computer systems truly easy to use.

Various reports from speakers at a workshop on spatial user interface metaphors in hypermedia systems. Spatial user interface metaphors essentially try to make use of humans abilities to use space to organize objects or human skills in navigating structures like houses or cities.

 You can take advantage of people's knowledge of the world around them by using metaphors to convey concepts and features of your application.  Use metaphors involving concrete, familiar ideas and make the metaphors plain, so users have a set of expectations to apply to computer environments.