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.