Experiment 6

Name : ​Yash Deshpande

UID : ​2016330065

Aim:​ Design appropriate icons pertaining to a given domain (Eg. Greeting cards)

Theory:

Icons
A small picture or symbol on a computer screen that you point to and click on (= press) with
a mouse to give the computer an instruction

Types of Icons:
1. Document Icons
Do not display a piece of paper behind a document icon unless the document type has a use
correspondence with physical paper (or a suitable object was not found and you are using the
application icon). For example, the final state of most word processing documents is a piece of
paper, so it is appropriate to use a piece of paper in the icon. On the other hand, a movie on the
computer has little association with a piece of paper, so a piece of paper behind the movie reel
primarily introduces visual noise. The use of a piece of paper in most or all document types creates
an additional problem: it is harder to scan large numbers of icons because they do not possess
distinct outlines. A useful technique for creating a subtle difference between document types with
similar roles (for example, between "JPEG", "PNG", "GIF", etc) is to use different colours. Expert
users who need to make this distinction frequently will become accustomed to these differences.
2. ​Application Icons
Application's that handle documents should reflect the kind of document they handle in the icon. If
an application's predominant purpose is to edit a particular kind of document, it should use this
document's icon as its icon.
3. ​Toolbar​ ​Icons
The idea of a toolbar as a shelf filled with tools should be reflected in toolbar icons. Toolbar icons
should have the perspective of being viewed head on, as if they were actually sitting on a shelf at
eye-level. Some design guides refer to this perspective as "flush".
Ensure that toolbar icons which will be used together are easy to visually distinguish. Try to make
the icons' silhouettes distinct from one another.
While most user's will view toolbar icons at 24x24 pixels, it is important to include a "large print"
set of icons at 48x48 pixels for accessibility reasons.
Often, you will not have to design any toolbar icons yourself as GTK provides a wide variety of
stock icons. You should use these whenever representing one of their intended items. This
establishes consistent language across applications, and makes it easier for users to search for items
on the toolbar. Do not use stock toolbar icons for anything other than their intended purpose,
however, as this will make your application inconsistent with others, and could easily confuse your
users.
To browse the available stock icons, install the development packages for GTK version 2.x and run
gtk-demo. Double click on Stock Item and Icon Browser to activate the stock icon browser. Note
that icons vary in available resolution, so the images presented in the icon browser should not be
taken as indicative of the maximum quality of an image. To view the images in PNG format, look in
the GTK 2 source code under gtk/stock-icons.

4. ​Menu Icons
Principles of toolbar icon design should be followed with menu icons, just at a smaller size. Where
a corresponding toolbar icon exists, a menu icon should mirror its design.

Some rules or principles to follow while designing icons are as follows:

● Approach Icon Design holistically​: Icons can be appreciated for their aesthetic solutions
individually, but they don't function alone.
● Consider Your Audience​: You will have different considerations if you're designing an
intranet for a small company, rather. Evaluate your icon designs relative to the graphic
system you're using them in. than for a product that may be sold internationally. When
creating icons, cultural considerations are important. Symbols may differ for common
elements you may use for your designs. E.g.: For designing sports icons, the meaning of the
icons should be universally known to all sports personalities – like an icon for archery
should have a bow and an arrow to convey its meaning.
● Design for the Size the Icon will be used​: The approach taken for small icons and large icon
design is immensely different. Large icons have a greater pixel capacity than the smaller
ones. Photoshop is an important tool that can be used to design large and small icons.
● Keep Icons Simple and Iconic​: Try not to overcomplicate icon designs. Be wary of placing
too many items into an icon design, or overly illustrating an icon.
● Cast Consistent Lighting, Reflections, and Shadows​: Following is a specific rule to see an
example, "Use shadows to lift objects visually from the or overly illustrating an icon
background, and to make 3D objects appear grounded, rather than awkwardly floating in
space."
● Utilize a Limited Perspective​: The range of perspective within your icon design set should
work together. If you have icons being all looked at from straight ahead then stick with that.
If you place one at a specific angle, then make sure the icons function that way.
● Create Consistent Icon Set Styles​: Keep the style and design of all icons in an application
similar. Do not confuse the user by using different icon styles in the same website.
Implementation: Music Player Icons

App Icon

Playlist Icon

Common icons

Play, Pause, Stop

Repeat one, Repeat Playlist

Previous and Next

Share
HMI Principles:
1. Perceived Affordances: The icons selected are highly common and the general population is
assumed to understand the function of the icon looking at it.
2. Simple Design: A simple design with color consistency among all the icons ensures a
pleasant experience and keeps the design classy.

Suggested Improvements:
The icons can be given some color according to the theme but the theme should not be too vibrant.

Conclusion:
We created some simple but perceivable icons for a music player app in this experiment by using
the simplest and common design to ensure an easy and pleasant experience.