Thomas Herrmann Software - Ergonomie bei interaktiven Medien 07.06.1999 1 Create Meaningful Icons.

Slides:

Advertisements

Similar presentations

Thomas Herrmann Software - Ergonomie bei interaktiven Medien Arten von Messages System messages Status messages Notification/ Informational.

Advertisements

Step 7: Proper Screen-Based Control

Thomas Herrmann Software - Ergonomie bei interaktiven Medien Color.

Design, prototyping and construction

Database Systems: Design, Implementation, and Management Tenth Edition

1 Official Interface Guidelines by David Catmull User interface documentation published by Apple and Microsoft.

Displays Chapter 8. Key Components in Display Design.

Designing Visual Information

Professional Communication: The Corporate Insider’s Approach Chapter Four Arrangement: Ordering and Visualizing Business Information.

Logo Design. In order for a logo to "work" it must do the following things: symbolize forward thinking, contemporary qualities From this To This.

User Interface Design Notes p7 T120B pavasario sem.

Principles of Graphic Design with some background on Web 2.0 styles.

Presenting your paper with PowerPoint: Module 8. Why write with PowerPoint? To supplement an oral presentation To incorporate visual and audio media into.

Graphic Design 2 More on the “look & feel”. Fall 2002CS/PSY Agenda Typography Color Icon.

CMPUT 301: Lecture 25 Graphic Design Lecturer: Martin Jagersand Department of Computing Science University of Alberta Notes based on previous courses by.

© Lethbridge/Laganière 2001 Chapter 7: Focusing on Users and Their Tasks1 7.1 User Centred Design (UCD) Software development should focus on the needs.

Principles of Graphics Design

© De Montfort University, Principles of Graphics Design Howell Istance School of Computing Technology De Montfort University.

What is a prototype? A prototype is a small scale model of your larger product. Can be a physical object, or a simple software program. Many physical.

Web Page Layout Design Techniques From Moodboard to Mock-up.

Level > Next Level > …. > Crumb Trail (Hansel & Grettel) Bread Crumb Trail.

Expression Web 2 Concepts and Techniques Expression Web Design Feature Web Design Basics.

Design. Hard design - increase control. - Displays are more virtual / artificial. Marketplace pressure: - Adding operations cheaper. Adding controls expensive.

Psychology of usability 1 User interfaces Jaana Holvikivi Metropolia.

The Map Design Process and the Elements of Map Composition SP 240 Cartography Alex Chaucer.

Copyright © 2002 by Pearson Education, Inc., publishing as Longman Publishers. All rights reserved. Chapter 9 Illustrations Professional Communication:

Objective Understand concepts used to create digital graphics. Course Weight : 15% Part Three : Concepts of Digital Graphics.

Database Systems: Design, Implementation, and Management Ninth Edition

Principles of Good Screen Design

Slide 1 Graphics Slide 2 Graphics A graphics package is a general purpose package used to draw pictures (graphics). Once produced, these can be saved.

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

1. What is an Icon? icon (def), n., pl. icons, icones 1. A picture, image, or other representation 2. (Eastern Ch.) a representation in painting, enamel,

© Prentice Hall, 2008 Excellence in Business Communication, 8eChapter Writing Business Reports and Proposals.

McGraw-Hill/Irwin © 2009 The McGraw-Hill Companies, All Rights Reserved Copyright © 2010 by The McGraw-Hill Companies, Inc. All rights reserved. McGraw-Hill/Irwin.

Dr Dat Tran - Week 1 Lecture Notes 1 User Interface Design Programming Graphical User Interfaces PG (7110) University of Canberra School of Information.

1 More about Graphical User Interfaces CIS*2450 Advanced Computing Techniques.

Design Elements of Graphical Representation, (Factors supporting appearance and functionality of solutions). P0CCUAA.

Introduction to Processing. 2 What is processing? A simple programming environment that was created to make it easier to develop visually oriented applications.

Adobe Photoshop CS3 Revealed – Chapter 16 FOR THE WEB CREATING IMAGES.

Sketching Vocabulary Chapter 3.4 in Sketching User Experiences: The Workbook Drawing objects, people, and their activities.

Guess The Logo. LOGOS Objective Given a computer, lecture & notes, and project guidelines, understand & design logos. Score a 70 or better on the project.

Writing with PowerPoint: A Workshop Brought to You by the Purdue Writing Lab.

WHAT IS AN INFOGRAPHIC Data visualizations that present complex information quickly and clearly. Visual representation of data, information, and/or.

Color and Blending 03/22/06. RGB  Why?  Monitor  Human vision system  Scale: 0-1, 0-n.

Chapter 5 Working with Tables Principles of Web Design, 4 th Edition.

“A picture is worth a thousand words…” Visual Displays of Data People have used pictures for thousands of years (long before language) to communicate.

©2001 Southern Illinois University, Edwardsville All rights reserved. CS 321 Human-Computer Interaction Today Fun with Icons Wednesday Project Milestone:

Chapter 2 Object-Oriented Paradigm Overview. Getting Acquainted with the Class Project Read the requirements specification carefully Make note of any.

Choosing Icons. Icon design is an important process. Meaningful icons will speed learning and recall much more effective system. Poor design will lead.

Introduction design title page, with several images Introduce area of interest and any common theme or concepts that underpin the comparison. Why did you.

The Structure of the User Interface Lecture # 8 1 Gabriel Spitz.

Internationalization and Accessibility. Internationalization International Considerations To create a product for use internationally may involve two.

Copyright © 2011 Pearson Education, Inc. publishing as Prentice HallChapter Writing Reports and Proposals.

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.

Microsoft Expression Web 3 Expression Web Design Feature Web Design Basics.

1 Presentation Methodology Summary B. Golden. 2 Introduction Why use visualizations?  To facilitate user comprehension  To convey complexity and intricacy.

 Emphasize Ideas .Display abstract ideas in concrete, geometric shapes .Condense .Dramatize .Compare large amount of data .Indicate trend .Convey.

Copyright © 2015 McGraw-Hill Education. All rights reserved. No reproduction or distribution without the prior written consent of McGraw-Hill Education.

Bell Ringer: Draw yourself if you were a superhero.

Designing Effective Input. Design input forms for users of business systems Design engaging input displays for users of information systems Design useful.

Agenda Collect Color Meaning Artist PowerPoint Introduction to Adobe Illustrator ◦ Guided Notes ◦ Step-by-Step Illustrator Activity Alphabet Letters Project-

Chapter 9 Planning. 222 Learning Objectives  clearly defining the project objective  developing a work breakdown structure  developing a network diagram.

Chapter 2 Object-Oriented Paradigm Overview

HUMAN COMPUTER INTERACTION

Sketching Vocabulary Chapter 3.4 in Sketching User Experiences: The Workbook Drawing objects, people, and their activities.

Provide Effective Internationalization and Accessibility

Technological Design Sketching.

Introduction design your title page with several images

Creating Visuals and Data Displays

Create Meaningful Graphics, Icons, and Images Lecture-14

Presentation transcript:

Thomas Herrmann Software - Ergonomie bei interaktiven Medien Create Meaningful Icons

Thomas Herrmann Software - Ergonomie bei interaktiven Medien The following factors influence an icons usability: Familiarity Clarity Simplicity Consistency Directness of link Context in which used Complexity of task Expectancies of users Efficiency Discriminability

Thomas Herrmann Software - Ergonomie bei interaktiven Medien A Successful Icon Looks different from all other icons. Is obvious what it does or represents. Is recognizable when no larger than 16 pixels square. Looks as good in black and white as in color

Thomas Herrmann Software - Ergonomie bei interaktiven Medien Choosing Images Use existing icons when available. Use images for nouns, not verbs. Use traditional images.

Thomas Herrmann Software - Ergonomie bei interaktiven Medien Creating Images Create familiar and concrete shapes. Create visually and conceptually distinct shapes. –Incorporate unique features of an object. –Do not display within a border. Clearly reflect objects represented. Simply reflect objects represented, avoiding excessive detail. Create as a set, communicating relationships to one another through common shapes. Provide consistency in icon type. Create shapes of the proper emotional tone.

Thomas Herrmann Software - Ergonomie bei interaktiven Medien Drawing Images Provide consistency in shape over varying sizes. Do not use triangular arrows in design to avoid confusion with other system symbols. When icons are used to reflect varying attributes, express these attributes as meaningfully as possible. Provide proper scale and orientation. Use perspective and dimension whenever possible. Accompany icon with a label to assure intended meaning.

Thomas Herrmann Software - Ergonomie bei interaktiven Medien Animation and Audition Animation Use: –To provide feedback. –For visual interest. Make interruptible or independent of users primary interaction. Do not use for decoration. Permit it to be turned off by the user. For fluid animation, present images at 16 or more frames per second. Audition Consider auditory icons.

Thomas Herrmann Software - Ergonomie bei interaktiven Medien The Design Process Define the icons purpose and use. Collect, evaluate, and sketch ideas. Draw in black and white. Draw using an icon-editing utility or drawing package. Test for user: –Expectations. –Recognition. –Learning. Test for legibility. Register new icons in the systems registry.