1 / 25

Icon Design

Icon Design. Overview. What icons are How icons are used in interface design Meaning and icons Icons in Applications Developing Icons Icon Tools and Resources. Definition. An icon is “a small picture which provides a pictorial representation of a selectable object”. Icons.

wilmer
Download Presentation

Icon Design

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Icon Design

  2. Overview • What icons are • How icons are used in interface design • Meaning and icons • Icons in Applications • Developing Icons • Icon Tools and Resources

  3. Definition An icon is “a small picture which provides a pictorial representation of a selectable object”

  4. Icons • Used in graphical user interfaces • principal item within WIMPs and direct manipulation interfaces • complementary interface design style • Should not be confused with graphical symbols used to enhance the appeal of the interface

  5. How icons are used • Active part of the interface • Selection results in a specific action or event. • Used for aesthetic appeal in already partially designed interfaces. • If used appropriately and effectively, icons can greatly enhance the comprehensibility of an interface.

  6. How icons are used • “Pictorial Menu” of currently available items • Representation of various aspects of an interface metaphor • desktop metaphor • objects: files, folders • tools: calculator, notepad • editing environment • functions: cut, paste • tools: spellcheck, help

  7. Meaning and Icons • Pictorial representation needs to convey meaning • Need to be unambiguous • Meaning aided by use of context • Problem of understanding: “relates to pictorial communication, which whilst having the potential to be universally understood, does not have the semantic and syntactic rules which are inherent in written communication.”

  8. Examples of Icon Use • State information • Minimized window • Closed or dormant application • Objects within applications including: • Tools available in applications • Actions related to Data • System functionality • wastebasket • different drives

  9. Advantages of Icon Use • Reduce complexity of the application • Impression of ease of use • Serve as permanent reminder whilst only occupying a small space • Effective classification of system objects which utilises human visual memory • Form of visual shorthand • Flexible interface widget

  10. Disadvantages of Icon Use • Related to design poverty • if user cannot understand what the icons represent then it is likely that another interface technique should be used • Difficult to use for some concepts • highly abstract • freedom • too much similarity between different concepts • different types of similar peripherals • Can be time consuming (very!!!)

  11. Including Icons in a Design • Determine functionalities to be represented as Icons • Determine Icon Location • Determine Icon Size • Validate the Screen Design

  12. Types of Icons • Objects • Actions • Conceptual Items

  13. Icons in PowerPoint • Context: • Objects: • Actions: • Conceptual Items:

  14. Developing conceptual icons • Application: Project Information for Management • Concepts to be represented: • actions taken in relation to a project • cost of a project • progress of a project

  15. Developing conceptual icons • actions taken in relation to a project Icon: Clacker board Underlying Design Ideas:- concept of action, as on a film set. • cost of a project Icon: Money Underlying Design Ideas:- money as a tangible way of paying costs.

  16. Developing conceptual icons 2 • Progress of a project Icon: Overtaking car Underlying Design Ideas:- concept of movement, of something progressing, idea of cars used as they progress, arrow helps to suggest the movement is forwards. • Navigation / Acceptance / Exit • see next slide

  17. Icon Selection Which icon is preferable and why?

  18. Validating the Concept • Does it elicit the correct response? • USER TESTING (what else????) • Ask users to relate functions to icons • place user in context • provide names of functions and pictures of icons • ask user to map functions to icons

  19. Icon Development • Use shortcuts in icon design • If an icon already exists, use it • If you need a new icon, use a frame and template to determine size • Design on-screen not on paper (doesn’t look the same) • Keep colours to a minimum. • If doing many icons make design decisions relating to colour use first.

  20. Icon Development 2 • Adding Movement to Icons • use arrows / lines • Lines and shapes within Icons • square is easier • use anti-aliasing • careful with curves and angular lines • Adding 3D and highlights • vital to make icons look professional • If user not sure what icons mean, add labels

  21. Developing Icons 3 • Working at the icon level is confusing (see next slide) • Placing a pixel of colour in a certain place can make a significant difference (notably the yellow on the following slide) • Can be difficult to produce convincing and / or understandable icons if complex concepts are being represented.

  22. Icon Editing Tools • General • http://www.cnet.com/Resources/Swcentral/PC/Result/TitleList/0,159,0-d-167-b-1,00.html NT / ‘95 • AX Icons: http://www.axialis.com/axicons/ • Win 3.x (also ‘95) • IconForge: http://www.cursorarts.com/ca_if.html

  23. Icons on the Web • General Icon Downloads • http://www.softseek.com/Desktop_Enhancements/Icons/Miscellaneous_Collections/dindex.html • Icons - many sites • http://www-personal.monash.edu.au/~steve/icolib.html • http://www.cli.di.unipi.it/iconbrowser/ • http://www.yahoo.com/Computers_and_Internet/Internet/World_Wide_Web/Programming/Icons/ • http://www.webcrawler.com/Computers/comput.icon.html • http://www.yoink.com/iconcity/

  24. Summary • Icons key part of WIMPs interface • Useful if used in correct context • If your user doesn’t understand what the icon means, there is something wrong. • Lots of shortcuts in icon design, notably already existing icons... • Use appropriate editors and where possible “borrow” other people’s designs

More Related