Month: March 2016

Form and Composition

For this blog post we found 5 interface compositions and identified the 3 most important compositional principles being used in each of them.

—

TI-83 Calculator – http://i.imgur.com/4Gz8DNG.jpg

Color is used to group together similar keys and also to connect “option” keys to their associated annotations. One can see all the digits are colored white and the operators are blue. The “2nd” key is yellow, which links it up with annotations above other keys like “quit” and “insert.” The Alpha key does the same with green annotations.

Proximity is used both to group together similar keys and to associate certain keys with other interface components. For example the blue keys at the top are used to configure the visualization on the screen directly above them. The digit and operator keys are close to one another and suggest they have similar functions.

Shape is used to show significance of certain keys. Most keys are rectangles with curved edges and are symmetrical in two directions. The arrow navigation keys however are only symmetrical in one direction. This allows the keys to be reoriented and point in a direction which is linked with the key’s function.

—

Microsoft Paint – http://i.imgur.com/zFGpvFc.png

Proximity is used to group together similar tools. Similar colors are close to one another, as are the shape tools and cut/copy/paste.

Scale is used to emphasize the commonly used tools and items of focus. For example the select marquee tool and the paint brush are frequently used so they are bigger. Likewise, the selected color, which is more important than the color options is larger.

Figure and ground is used to separate tool palettes and the working space. The drawing area has the biggest drop shadow to put that in the fore ground. The home tab has a drop shadow around it to suggest there are more tools behind it in the “view” tab

—

Vo2 Advertisement – http://i.imgur.com/GGFfRTr.png

Continuation: the athlete’s body, the letters and the triangle all appear continuous despite interruptions.

Space: The main actions of the composition all take place at the center of the canvas, creating tension and excitement.

Figure and ground: It is not easy to determine if the letters, the athlete or the triangle is the figure or the ground. The uncertainty makes a catchy ad composition.

—

Dashboard – http://i.imgur.com/QzLdb6I.png

Similarity: Similarities in color, shape and rhythm help to group functionalities.

Rhythm: The top and bottom panels have different rhythms, and as a result differentiate their content.

Scale: The top panels are smaller than the ones on the bottom, signifying their different functionalities.

—

Google Maps Directions – http://i.imgur.com/apzOt3Q.png

Hierarchy is implemented in this interface through the use of planes to encapsulate key information required for navigating which are then positioned to follow the typical web page scanning F-pattern. Color is also an indication of hierarchy where the selected path stands out among the other possible paths on the map.

Emphasis is used to highlight important information in this busy interface which is packed with details. The distinct blue coloring highlights the path selected for directions (on both the navigation pane and on the map), while white is used in the blue panel to identify the mode of transportation (in this case, walking). Other colors such as red and yellow are used to highlight select locations on the map, which contrast with the dull grey and brown coloring of city blocks and streets.

Grouping and Rhythm are used on the navigation pane to identify the various paths the user can take, which are further broken down into steps (which use the same principles) if the user selects a particular path.

Color 1 — Ineffective / Effective Alert Messages

Effective

Slippery floor sign —Yellow is an efficient color in alerting people because it can catch people’s attention easily. Why? Because it’s the color nearest to the light. It’s the color of fire and gold. “Gold will always shine.” Similarly, ”Yellow will always be seen.” In its highest purity it always carries with it the nature of brightness. That’s why it’s efficient in alerting people of dangerous situation. Also, it seems to have the power to compete other colors. From my experience of painting, I know white cannot cover other colors, but yellow can. Maybe that can help yellow stands out when there are many colors.

Biohazardous waste bags — and by extension, the receptacles in which they’re in — are successful examples of efficient alert design. Red is a salient color, associated with the idea of “danger” internationally (and mostly in Western cultures). Biohazardous waste furthermore can contain blood specimens, which is red when outside of the body. The combination of emotional, cultural, and semantic associations with the color red make this an effective alert message.

Ambulance — although not a typical case when considering design, the ambulance serves as a good metaphor for alerting users effectively. Within the context of a crowded space, the ambulance has the hard task of alerting other drivers of its presence and intentions. Other automobiles, sounds from honking and people, etc all serve as elements which take away emphasis from the overall scene. In design, one has to be cautious of using extreme hue, saturation, value, size in conjunction. The ambulance is an extreme case in which it is necessary to have many elements used together in high contrast.

OS X Alert Messages –
Apple encourages developers to employ guidelines when using alert messages. The alert message provides a short, simple summary of the error or condition that summoned the alert. The informative text provides a fuller description of the situation. Buttons for addressing the alert appear at the bottom of the dialog. The app icon appears to the left of the text and shows users which app is displaying the alert. The rightmost button in the dialog, the action button, confirms the alert message text. This button stands out with the use of blue on a gray background.

Ineffective

Please Keep Off the Grass — Green is always used in the sign of reminding people not getting in the grass. I think people choose this because they don’t want to break the beauty of grass. Also, they may not think red is the color should be used here because red seems to mean things that really need to be prohibited seriously. However, it actually didn’t support delivering the message. A sign with the description of the history of the grassland can be green, too. In terms of green itself, it’s not an alerting color. On the opposite, as the color of trees and mountains, green is the color the eyes are comfortable with. Another critical problem here is that there’s no contrast between the sign and grass. How can people see a dark green from a light one at once, or tell a light green from a dark one? Here, green seems not to be the color of alerting people, but the color to maintain the beauty of grass. Only the words itself function as alerting.

Darwinator — This is a site which allows users to pitch project ideas. The main action during the initial stage is to complete a submission. The snapshot I have provided shows the page after a user has completed a submission. The ineffective qualities have to do with the inability to draw attention to important events. There is no hierarchy of text and there are two competing color schemes—i.e., orange versus green which are both high value objects as compared to the grey scale background. The completion page ought to alert the user that they have completed the submission. However, the user is left unaware of these changes.

Safety Signs — There are two subjects represented within the content of this sign: (1) safety, and (2) flammable materials. The color green is commonly associated with safety, lack of alarm, and calm. Yet, flammable materials are not. Flammable materials are often associated with danger, caution, colors of red and (sometimes) yellow. Having these two bits of content presented on the same sign allows for a false sense of security when maneuvering around these flammable materials.

Windows Alert Messages – Windows alerts lack consistency. The same dialog boxes used for alerts are also used for error messages and updates. The use of color for the alert icon is meant to stand out, but the action button does not. The alert may imply there is a problem, but the solution is not readily apparent. Messages are often ambiguous or absent.

Effective/ Ineffective Alert Messages

Effective

Slippery floor sign —Yellow is an efficient color in alerting people because it can catch people’s attention easily. Why? Because it’s the color nearest to the light. It’s the color of fire and gold. “Gold will always shine.” Similarly, ”Yellow will always be seen.” In its highest purity it always carries with it the nature of brightness. That’s why it’s efficient in alerting people of dangerous situation. Also, it seems to have the power to compete other colors. From my experience of painting, I know white cannot cover other colors, but yellow can. Maybe that can help yellow stands out when there are many colors.

Biohazardous waste bags — and by extension, the receptacles in which they’re in — are successful examples of efficient alert design. Red is a salient color, associated with the idea of “danger” internationally (and mostly in Western cultures). Biohazardous waste furthermore can contain blood specimens, which is red when outside of the body. The combination of emotional, cultural, and semantic associations with the color red make this an effective alert message.

Ambulance — although not a typical case when considering design, the ambulance serves as a good metaphor for alerting users effectively. Within the context of a crowded space, the ambulance has the hard task of alerting other drivers of its presence and intentions. Other automobiles, sounds from honking and people, etc all serve as elements which take away emphasis from the overall scene. In design, one has to be cautious of using extreme hue, saturation, value, size in conjunction. The ambulance is an extreme case in which it is necessary to have many elements used together in high contrast.

OS X Alert Messages –
Apple encourages developers to employ guidelines when using alert messages. The alert message provides a short, simple summary of the error or condition that summoned the alert. The informative text provides a fuller description of the situation. Buttons for addressing the alert appear at the bottom of the dialog. The app icon appears to the left of the text and shows users which app is displaying the alert. The rightmost button in the dialog, the action button, confirms the alert message text. This button stands out with the use of blue on a gray background.

Ineffective

Please Keep Off the Grass — Green is always used in the sign of reminding people not getting in the grass. I think people choose this because they don’t want to break the beauty of grass. Also, they may not think red is the color should be used here because red seems to mean things that really need to be prohibited seriously. However, it actually didn’t support delivering the message. A sign with the description of the history of the grassland can be green, too. In terms of green itself, it’s not an alerting color. On the opposite, as the color of trees and mountains, green is the color the eyes are comfortable with. Another critical problem here is that there’s no contrast between the sign and grass. How can people see a dark green from a light one at once, or tell a light green from a dark one? Here, green seems not to be the color of alerting people, but the color to maintain the beauty of grass. Only the words itself function as alerting.

Darwinator — This is a site which allows users to pitch project ideas. The main action during the initial stage is to complete a submission. The snapshot I have provided shows the page after a user has completed a submission. The ineffective qualities have to do with the inability to draw attention to important events. There is no hierarchy of text and there are two competing color schemes—i.e., orange versus green which are both high value objects as compared to the grey scale background. The completion page ought to alert the user that they have completed the submission. However, the user is left unaware of these changes.

Safety Signs — There are two subjects represented within the content of this sign: (1) safety, and (2) flammable materials. The color green is commonly associated with safety, lack of alarm, and calm. Yet, flammable materials are not. Flammable materials are often associated with danger, caution, colors of red and (sometimes) yellow. Having these two bits of content presented on the same sign allows for a false sense of security when maneuvering around these flammable materials.

Windows Alert Messages – Windows alerts lack consistency. The same dialog boxes used for alerts are also used for error messages and updates. The use of color for the alert icon is meant to stand out, but the action button does not. The alert may imply there is a problem, but the solution is not readily apparent. Messages are often ambiguous or absent.