Usability on the street
Let's take a moment to consider the lowly street sign.
Traffic signs are deceivingly simple devices that lead users (or drivers) to the places they need to go. But what makes them so effective for the tasks.
When i was learning to drive in the United States they give you a little booklet with pictures of about 20 standard signs. As part of the written test you needed to have an understanding of what these signs illustrated to get on to the driving part.
But there are many more signs that we encounter on a daily basis than a simple 20. All these signs are categorized by color, shape and placement. Based on the combination of these three items the user first gets a basic understanding of what to do, and in some cases based on the iconography is conveyed a very specific message.
Consistency
Consistency is the key to making the whole enterprise work. Consistency is one of the more mundane principles of the user experience when dealing with websites or applications. Especially in today’s web 2.0 world where consistency is masked by the task you are completing. Consistency however allows the user to define their space and the boundaries within that space. If done correctly, a consistent nature in any design will disappear into the background because the lack of consistency is what is noticed in task completion.
When a user encounters a combination of shapes and symbols they immediately understand the context, and even if they cannot work out the iconography the context is often enough to alert the user. It is the consistency however that helps simplify the problem and increase reaction time.
Color + Location + Shape + Iconography
The traffic signage system has a limited color palate. Each of the colors used has a specific meaning, and are designed for readability and not specifically visual appeal. You won’t find and array of pastel colors for street signs, although it would probably dress up your standard cul-de-sac.
There are seven general colors used including green, red, blue, orange, yellow white and black. Of these we will concern ourselves with red, yellow and green, leaving the orange (construction), Blue (services), White, and Black (regulatory) for another conversation.
Red, most often associated in the United States with blood, war and danger, is at the top of the list. Stop, Yield and Wrong Way signs are all red. Yellow signs indicate a general warning. Green signs are directional, such as street signs and highway signs.
This same color orientation is carried through to traffic lights, indicating red for stop, yellow for warning, (or prepare to stop) and green for go. Color however is not enough. As in a traffic light, positioning is everything.
Color alone can be problematic. People can be color blind (10% of the male population is color blind), and signage can fade. Similar reasons have been used in application and web design against relying on color alone to denote changes. On the screen items may change by color but it is should be accompanied by thickness changes (bold) or underlined areas for links.
Color + Location + Shape + Iconography
Location has dual aspects - readability and consistency.
Street signs are positioned at the same height and location as you cross each intersection, their placement is strategic, and intended to be higher than obstacles that might obstruct them and be seen from a reasonable distance. The objective of any sign is to require a minimal amount of time to identify and understand their meaning. The color and placement act as the label to their function.
In fact, in the now cash strapped New York City the city spent over twenty-seven million dollars to rebrand all their street signs in lower case to improve the clarity of the message by making all the signs upper and lower case. Given the speed of traffic in the city (not to mention Manhattan streets are set in a grid) one wonders if this is truly the win intended.
Research has show that lower case letters are quicker to read. Some people save up to 16% of reading time. The justification for the change was that quicker reading can save lives, and avoid the danger of accidents if confused.
Color + Location + Shape + Iconography
Shape is the third category of the sign tripod. Shape combined with placement and color allows the user to classify the needed interaction, matching category to intended results.
There are 5 basic shapes for signs in use including octagonal, diamond, circular, pennant and triangular.
The octagon is a regulatory sign, informing motorists to do, or not do, something. This shape is exclusively used for stop signs. Because of it's importance and frequency of use, stop signs that are normally shown with white lettered "STOP" frequently can be seen in traffic symbols and popular culture without the lettering and is still instantly identifiable by shape.
Had this important symbol used for a multitude of purposes reaction time between identification and compliance would naturally be higher. This can be equated to the starburst symbol used in print advertisements. Use of a single starburst in an ad directly the user’s attention to the intended area. The starburst shape is unusual. It is uneven and generally does not blend into a page design. However, if multiple starburst appear on a page, the uniqueness is lost and the user’s focus in not as easily drawn to a single area.
The diamond is a warning sign. This alerts drivers to potentially hazardous road conditions. This is one signal that does not have the luxury of being identified by color (yellow) and its shape. This combination must also include appropriate iconography.
A rectangular white sign with green letters indicates that parking is permitted with restrictions but a rectangular white sign with red letters indicates that parking is restricted or prohibited. Parking signs, those that are attempting to convey messages that are day specific and time specific are particularly problematic to users. These signs combine the presented information with an outside factor such as time of day. As such these signs do not adhere to the usability principle of simplicity, every time you add something to a design, you reduce the visual clarity of everything else on it.
The textual and reading problem is seen with High Occupancy Vehicle (HOV) lanes on the highway that indicate when HOV lanes are in use. But what these signs fail to do is indicate what the normal use is outside of these day/time restrictions. Can you use an HOV lane outside of the core hours if you do not have two occupants in the car? To muddy the waters even more, energy efficient vehicles (regardless of the passenger count) can use HOV lanes in some areas. According to the California Department of Motor Vehicles anyone can use the HOV lanes outside of the stated hours.
Red, used to indicate danger is used in combination with circular signs and a slash are used to indicate the ‘do-nots’ such as do not enter, no u-turns, and no parking.
The pentagon, similar to the octagonal sign is used for warning specifically alerting drivers to watch for schoolchildren or pedestrians nearby. These signs are a fluorescent yellow-green for easier visibility in low light and foggy and rainy weather.
The triangle is a different type of regulatory sign that alerts drivers to slow down because another direction of traffic has the right of way. This shape is reserved exclusively for the yield sign. The yield sign has a white background with a wide red border and letters.
The success of the highway system lies in its consistency. In all 50 states, highway road signs look the same. Drivers don’t have to guess or interpret. They just use.
Color + Location + Shape + Iconography
What we understand about road signs and their meaning is localized however. The comprehension of which reduced significantly once we leave the confines of or area (in this case the United States).
Cross cultural studies on comprehensibility of traffic signs evaluated the comprehensibility of regulatory, warning, and traffic signs used in the United States with Mexican business and tourist drivers coming from Mexico. The results demonstrated that seven signs including Yield, Fasten Safety Belts, Right lane Ends, Load Zoned Bridge a response rate lower than 75%
The comprehension levels of locally used signs (78%) were much higher than that of non-local signs (32%).
This is where the iconography becomes important. Simple images for merging lanes and turning are easy, but it is much more difficult to convey STOP or YIELD when you cannot relay on the language to get across your message. Images unfortunately can have very personal meanings, which makes iconography difficult.
In web design you will often see buttons with icons on them a few of which will make perfect sense but the majority do not, forcing the use of a combination icon and words to get the appropriate message across.
In the example above, a standard stop sign is replaced with a stop sign with random letters. Users familiar with the stop sign will understand the meaning without the English phrase “STOP”. In the third graphic the word is replaced with an icon. Does the icon read as well as the text? It is difficult to determine without testing with users unfamiliar with a stop sign because users in the United States are bringing a level of domain knowledge (their past experiences with a product, or task) to the testing process.
Bibliography:
Traffic and websites, David Hamill
http://www.goodusability.co.uk/2011/02/traffic-and-websites/
The road sign metaphor, MICHAEL HISTEN
http://michaelhisten.blogspot.com/2009/04/road-sign-metaphor.html
Exit or Way out? - Road and other signs, Fanni Vig
http://bit.ly/dGwOWL
Usability and Internationalization: HCI and culture, Nuray Aykin
http://bit.ly/hAyfhm
Shapes of Traffic Signs & Their Meanings, eHow.com http://www.ehow.com/about_5435894_shapes-traffic-signs-meanings.html
Traffic signs are deceivingly simple devices that lead users (or drivers) to the places they need to go. But what makes them so effective for the tasks.
When i was learning to drive in the United States they give you a little booklet with pictures of about 20 standard signs. As part of the written test you needed to have an understanding of what these signs illustrated to get on to the driving part.
But there are many more signs that we encounter on a daily basis than a simple 20. All these signs are categorized by color, shape and placement. Based on the combination of these three items the user first gets a basic understanding of what to do, and in some cases based on the iconography is conveyed a very specific message.
Consistency
Consistency is the key to making the whole enterprise work. Consistency is one of the more mundane principles of the user experience when dealing with websites or applications. Especially in today’s web 2.0 world where consistency is masked by the task you are completing. Consistency however allows the user to define their space and the boundaries within that space. If done correctly, a consistent nature in any design will disappear into the background because the lack of consistency is what is noticed in task completion.
When a user encounters a combination of shapes and symbols they immediately understand the context, and even if they cannot work out the iconography the context is often enough to alert the user. It is the consistency however that helps simplify the problem and increase reaction time.
Color + Location + Shape + Iconography
The traffic signage system has a limited color palate. Each of the colors used has a specific meaning, and are designed for readability and not specifically visual appeal. You won’t find and array of pastel colors for street signs, although it would probably dress up your standard cul-de-sac.
There are seven general colors used including green, red, blue, orange, yellow white and black. Of these we will concern ourselves with red, yellow and green, leaving the orange (construction), Blue (services), White, and Black (regulatory) for another conversation.
Red, most often associated in the United States with blood, war and danger, is at the top of the list. Stop, Yield and Wrong Way signs are all red. Yellow signs indicate a general warning. Green signs are directional, such as street signs and highway signs.
This same color orientation is carried through to traffic lights, indicating red for stop, yellow for warning, (or prepare to stop) and green for go. Color however is not enough. As in a traffic light, positioning is everything.
Color alone can be problematic. People can be color blind (10% of the male population is color blind), and signage can fade. Similar reasons have been used in application and web design against relying on color alone to denote changes. On the screen items may change by color but it is should be accompanied by thickness changes (bold) or underlined areas for links.
Color + Location + Shape + Iconography
Location has dual aspects - readability and consistency.
Street signs are positioned at the same height and location as you cross each intersection, their placement is strategic, and intended to be higher than obstacles that might obstruct them and be seen from a reasonable distance. The objective of any sign is to require a minimal amount of time to identify and understand their meaning. The color and placement act as the label to their function.
In fact, in the now cash strapped New York City the city spent over twenty-seven million dollars to rebrand all their street signs in lower case to improve the clarity of the message by making all the signs upper and lower case. Given the speed of traffic in the city (not to mention Manhattan streets are set in a grid) one wonders if this is truly the win intended.
Research has show that lower case letters are quicker to read. Some people save up to 16% of reading time. The justification for the change was that quicker reading can save lives, and avoid the danger of accidents if confused.
Color + Location + Shape + Iconography
Shape is the third category of the sign tripod. Shape combined with placement and color allows the user to classify the needed interaction, matching category to intended results.
There are 5 basic shapes for signs in use including octagonal, diamond, circular, pennant and triangular.
The octagon is a regulatory sign, informing motorists to do, or not do, something. This shape is exclusively used for stop signs. Because of it's importance and frequency of use, stop signs that are normally shown with white lettered "STOP" frequently can be seen in traffic symbols and popular culture without the lettering and is still instantly identifiable by shape.
Had this important symbol used for a multitude of purposes reaction time between identification and compliance would naturally be higher. This can be equated to the starburst symbol used in print advertisements. Use of a single starburst in an ad directly the user’s attention to the intended area. The starburst shape is unusual. It is uneven and generally does not blend into a page design. However, if multiple starburst appear on a page, the uniqueness is lost and the user’s focus in not as easily drawn to a single area.
The diamond is a warning sign. This alerts drivers to potentially hazardous road conditions. This is one signal that does not have the luxury of being identified by color (yellow) and its shape. This combination must also include appropriate iconography.
A rectangular white sign with green letters indicates that parking is permitted with restrictions but a rectangular white sign with red letters indicates that parking is restricted or prohibited. Parking signs, those that are attempting to convey messages that are day specific and time specific are particularly problematic to users. These signs combine the presented information with an outside factor such as time of day. As such these signs do not adhere to the usability principle of simplicity, every time you add something to a design, you reduce the visual clarity of everything else on it.
The textual and reading problem is seen with High Occupancy Vehicle (HOV) lanes on the highway that indicate when HOV lanes are in use. But what these signs fail to do is indicate what the normal use is outside of these day/time restrictions. Can you use an HOV lane outside of the core hours if you do not have two occupants in the car? To muddy the waters even more, energy efficient vehicles (regardless of the passenger count) can use HOV lanes in some areas. According to the California Department of Motor Vehicles anyone can use the HOV lanes outside of the stated hours.
Red, used to indicate danger is used in combination with circular signs and a slash are used to indicate the ‘do-nots’ such as do not enter, no u-turns, and no parking.
The pentagon, similar to the octagonal sign is used for warning specifically alerting drivers to watch for schoolchildren or pedestrians nearby. These signs are a fluorescent yellow-green for easier visibility in low light and foggy and rainy weather.
The triangle is a different type of regulatory sign that alerts drivers to slow down because another direction of traffic has the right of way. This shape is reserved exclusively for the yield sign. The yield sign has a white background with a wide red border and letters.
The success of the highway system lies in its consistency. In all 50 states, highway road signs look the same. Drivers don’t have to guess or interpret. They just use.
Color + Location + Shape + Iconography
What we understand about road signs and their meaning is localized however. The comprehension of which reduced significantly once we leave the confines of or area (in this case the United States).
Cross cultural studies on comprehensibility of traffic signs evaluated the comprehensibility of regulatory, warning, and traffic signs used in the United States with Mexican business and tourist drivers coming from Mexico. The results demonstrated that seven signs including Yield, Fasten Safety Belts, Right lane Ends, Load Zoned Bridge a response rate lower than 75%
The comprehension levels of locally used signs (78%) were much higher than that of non-local signs (32%).
This is where the iconography becomes important. Simple images for merging lanes and turning are easy, but it is much more difficult to convey STOP or YIELD when you cannot relay on the language to get across your message. Images unfortunately can have very personal meanings, which makes iconography difficult.
In web design you will often see buttons with icons on them a few of which will make perfect sense but the majority do not, forcing the use of a combination icon and words to get the appropriate message across.
In the example above, a standard stop sign is replaced with a stop sign with random letters. Users familiar with the stop sign will understand the meaning without the English phrase “STOP”. In the third graphic the word is replaced with an icon. Does the icon read as well as the text? It is difficult to determine without testing with users unfamiliar with a stop sign because users in the United States are bringing a level of domain knowledge (their past experiences with a product, or task) to the testing process.
Bibliography:
Traffic and websites, David Hamill
http://www.goodusability.co.uk/2011/02/traffic-and-websites/
The road sign metaphor, MICHAEL HISTEN
http://michaelhisten.blogspot.com/2009/04/road-sign-metaphor.html
Exit or Way out? - Road and other signs, Fanni Vig
http://bit.ly/dGwOWL
Usability and Internationalization: HCI and culture, Nuray Aykin
http://bit.ly/hAyfhm
Shapes of Traffic Signs & Their Meanings, eHow.com http://www.ehow.com/about_5435894_shapes-traffic-signs-meanings.html
posted by David at
8:48 AM
1 Comments:
Interesting article!
An article in the NY Post about the federal government requiring streets sign into proper case seems to be related to usability (readability).
http://www.nypost.com/p/news/local/bronx/million_kuj8X4Z2VolVhXnCymfkvM
Post a Comment
Subscribe to Post Comments [Atom]
<< Home