https://infovis-wiki.net/w/api.php?action=feedcontributions&user=UE-InfoVis05060126487&feedformat=atomInfoVis:Wiki - User contributions [en]2024-03-29T13:56:47ZUser contributionsMediaWiki 1.40.1https://infovis-wiki.net/w/index.php?title=Teaching:TUW_-_UE_InfoVis_WS_2005/06_-_Gruppe_G8_-_Aufgabe_1&diff=7128Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G8 - Aufgabe 12005-10-28T12:36:01Z<p>UE-InfoVis05060126487: /* Auszuarbeitende Designprinzipien */</p>
<hr />
<div>== Aufgabenstellung ==<br />
[http://www.asgaard.tuwien.ac.at/~aigner/teaching/infovis_ue/infovis_ue_aufgabe1.html Beschreibung der Aufgabe 1]<br />
=== Auszuarbeitende Designprinzipien ===<br />
*'''[[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G8 - Aufgabe 1 - Chart Junk|Chart Junk]]'''<br />
*'''[[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G8 - Aufgabe 1 - Consistency|Consistency]]''' (The usability of a system is improved when similar parts are expressed in similar ways.)</div>UE-InfoVis05060126487https://infovis-wiki.net/w/index.php?title=Teaching:TUW_-_UE_InfoVis_WS_2005/06_-_Gruppe_G8_-_Aufgabe_2&diff=7127Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G8 - Aufgabe 22005-10-28T12:30:18Z<p>UE-InfoVis05060126487: /* Informational Content Comparison */</p>
<hr />
<div>== Poor Graphic ==<br />
[[Image:Few05snowfall.gif|none|thumb|400px|Idaho Ski Resort Annual Snowfall (click on image for larger version)]]<br />
<br />
----<br />
== Corrected Graphic ==<br />
<br />
[[Image:SnowfallIdaho.jpg]]<br />
<br />
== Informational Content Comparison ==<br />
<br />
{|border=0px cellpadding=3px cellspacing=3px|<br />
!Element<br />
!Poor Graphic<br />
!Worked Graphic<br />
|-<br />
|valign="top" bgcolor="#eeeeee"|legend<br />
|valign="top" bgcolor="#eeeeee"|The legend is inconsistent<li> in its symbols<br><li>in its ranges (not continuous)<br />
|valign="top" bgcolor="#eeeeee"|The symbols are continuous and follow the rules for representing non-metric but ordinary classes of ranges [1][Miksch, 2005]<br> Moreover all 4 symbols have evaluated out of the same basic symbol (snowflake), and are thus consistent.<br> Moreover the ranges which are represented by the symbols were made to descend into one another.<br />
|-<br />
|valign="top"|background (radial gradient)<br />
|valign="top"|Is distracting the viewer, keeps no additional information.<br />
|valign="top"|Was omitted from the worked version.<br />
|-<br />
|valign="top" bgcolor="#eeeeee"|background (map, the image)<br />
|valign="top" bgcolor="#eeeeee"|Keeps no information (for the data of snowfall)<br />
|valign="top" bgcolor="#eeeeee"|Was exchanged by a satellite view of Idaho, giving an idea about the ladscape around the single spots. Since the graphic is probably for touristic use, this information is useful for the potential clients (viewers).<br />
|-<br />
|valign="top"|spot indicators (form)<br />
|valign="top"|Are inconsistent and the fourth one does not give a good idea where the center actually is (asymetric).<br />
|valign="top"|The new symbol has a clear center point, representing the spot on the map where the viewer can expect the place named.<br />
|-<br />
|valign="top" bgcolor="#eeeeee"|spot indicators (color)<br />
|valign="top" bgcolor="#eeeeee"|The spot indicators are all of a different color, which can not at all be related to the amount of snow it should represent.<br />
|valign="top" bgcolor="#eeeeee"|The color keeps no informations, so the attribute is dumped.<br />
|-<br />
|valign="top"|spot description (text)<br />
|valign="top"|The text is in white, which has a too low contrast most of the time due to the irregular color of the background image.<br />
|valign="top"|The text is written in simple black color.<br />
|-<br />
|valign="top" bgcolor="#eeeeee"|spot description (background)<br />
|valign="top" bgcolor="#eeeeee"|Contrast is not too good with the background of the boxes.<br />
|valign="top" bgcolor="#eeeeee"|Whitening the background beneath the text for raising the contrast value for extra clear reading. On the other hand this is keeping the context (background) reasonable recognizeable. [2]<br />
|}<br />
<br />
== Suggestion 2 ==<br />
<br />
[[Image:Idaho04.gif]]<br />
<br />
== Suggestion 3 ==<br />
<br />
[[Image:Idaho_Snowfall.png]]<br />
<br />
<br />
<br />
[1] [Miksch, 2005] Basic Understanding of Information Visualisation, Course Transparencies, p.29, Retrieved at: October 2005.<br><br />
http://www.ifs.tuwien.ac.at/~silvia/wien/vu-infovis/PDF-Files/InfoVis-0-Defs.pdf<br />
<br />
[2] [Miksch, 2005] Focus + Kontext, Course Transparencies, p.5 ff, Retrieved at: October 2005.<br><br />
http://www.ifs.tuwien.ac.at/~silvia/wien/vu-infovis/PDF-Files/InfoVis-1.pdf<br />
<br />
----<br />
< [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G8|G8]]<br><br />
<< [[Teaching:TUW_-_UE_InfoVis_WS_2005/06|overview]]</div>UE-InfoVis05060126487https://infovis-wiki.net/w/index.php?title=Teaching:TUW_-_UE_InfoVis_WS_2005/06_-_Gruppe_G8_-_Aufgabe_2&diff=7126Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G8 - Aufgabe 22005-10-28T12:30:08Z<p>UE-InfoVis05060126487: /* Informational Content Comparison */</p>
<hr />
<div>== Poor Graphic ==<br />
[[Image:Few05snowfall.gif|none|thumb|400px|Idaho Ski Resort Annual Snowfall (click on image for larger version)]]<br />
<br />
----<br />
== Corrected Graphic ==<br />
<br />
[[Image:SnowfallIdaho.jpg]]<br />
<br />
== Informational Content Comparison ==<br />
<br />
{|border=0px cellpadding=3px cellspacing=3px|<br />
!Element<br />
!Poor Graphic<br />
!Worked Graphic<br />
|-<br />
|valign="top" bgcolor="#eeeeee"|legend<br />
|valign="top" bgcolor="#eeeeee"|The legend is inconsistent<li> in its symbols<br><li>in its ranges (not continous)<br />
|valign="top" bgcolor="#eeeeee"|The symbols are continuous and follow the rules for representing non-metric but ordinary classes of ranges [1][Miksch, 2005]<br> Moreover all 4 symbols have evaluated out of the same basic symbol (snowflake), and are thus consistent.<br> Moreover the ranges which are represented by the symbols were made to descend into one another.<br />
|-<br />
|valign="top"|background (radial gradient)<br />
|valign="top"|Is distracting the viewer, keeps no additional information.<br />
|valign="top"|Was omitted from the worked version.<br />
|-<br />
|valign="top" bgcolor="#eeeeee"|background (map, the image)<br />
|valign="top" bgcolor="#eeeeee"|Keeps no information (for the data of snowfall)<br />
|valign="top" bgcolor="#eeeeee"|Was exchanged by a satellite view of Idaho, giving an idea about the ladscape around the single spots. Since the graphic is probably for touristic use, this information is useful for the potential clients (viewers).<br />
|-<br />
|valign="top"|spot indicators (form)<br />
|valign="top"|Are inconsistent and the fourth one does not give a good idea where the center actually is (asymetric).<br />
|valign="top"|The new symbol has a clear center point, representing the spot on the map where the viewer can expect the place named.<br />
|-<br />
|valign="top" bgcolor="#eeeeee"|spot indicators (color)<br />
|valign="top" bgcolor="#eeeeee"|The spot indicators are all of a different color, which can not at all be related to the amount of snow it should represent.<br />
|valign="top" bgcolor="#eeeeee"|The color keeps no informations, so the attribute is dumped.<br />
|-<br />
|valign="top"|spot description (text)<br />
|valign="top"|The text is in white, which has a too low contrast most of the time due to the irregular color of the background image.<br />
|valign="top"|The text is written in simple black color.<br />
|-<br />
|valign="top" bgcolor="#eeeeee"|spot description (background)<br />
|valign="top" bgcolor="#eeeeee"|Contrast is not too good with the background of the boxes.<br />
|valign="top" bgcolor="#eeeeee"|Whitening the background beneath the text for raising the contrast value for extra clear reading. On the other hand this is keeping the context (background) reasonable recognizeable. [2]<br />
|}<br />
<br />
== Suggestion 2 ==<br />
<br />
[[Image:Idaho04.gif]]<br />
<br />
== Suggestion 3 ==<br />
<br />
[[Image:Idaho_Snowfall.png]]<br />
<br />
<br />
<br />
[1] [Miksch, 2005] Basic Understanding of Information Visualisation, Course Transparencies, p.29, Retrieved at: October 2005.<br><br />
http://www.ifs.tuwien.ac.at/~silvia/wien/vu-infovis/PDF-Files/InfoVis-0-Defs.pdf<br />
<br />
[2] [Miksch, 2005] Focus + Kontext, Course Transparencies, p.5 ff, Retrieved at: October 2005.<br><br />
http://www.ifs.tuwien.ac.at/~silvia/wien/vu-infovis/PDF-Files/InfoVis-1.pdf<br />
<br />
----<br />
< [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G8|G8]]<br><br />
<< [[Teaching:TUW_-_UE_InfoVis_WS_2005/06|overview]]</div>UE-InfoVis05060126487https://infovis-wiki.net/w/index.php?title=Teaching:TUW_-_UE_InfoVis_WS_2005/06_-_Gruppe_G8_-_Aufgabe_1_-_Consistency&diff=6576Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G8 - Aufgabe 1 - Consistency2005-10-25T08:34:15Z<p>UE-InfoVis05060126487: /* Conclusion */</p>
<hr />
<div>==Definition(s)==<br />
<br />
''Consistency describes a harmonious uniformity or agreement among things or parts.''<br>[Hyperdictionary.com, 2005]<br />
<br />
''Agreement or harmony of all parts of a complex thing among themselves, or of the same thing with itself at different times.''<br><br />
[Whatdowordsmean.com, 2005]<br />
<br />
==Key Words==<br />
<br />
Consistency, design, information visualization<br />
<br />
==Abstract==<br />
''"Consistency (in Design)" is often referred to as the central criteria for successful user interaction. Any interface wants to keep its user focused, and additionally guide him to a procedure or structure. All this needs a clear and consistent framework of elements within the design of the interface. Consistency can create a distinct sense of "place" and makes parts and functions in a system memorable [Lynch and Horton, 2002].<br><br />
Therefor I want to give a brief overview on the important issues of consistency.''<br />
<br />
==Consistency and its Context==<br />
<br />
===Important Issues===<br />
<br />
The following list tries to give a ranking that indicates which elements of an interface require consistency the most [Bruce Tognazzini, 2003].<br />
<br />
# Interpretation of user behavior, e. g., shortcut keys maintain their meanings.<br />
# Invisible structures. <br />
# Small visible structures. <br />
# The overall "look" of a single application or service--splash screens, design elements. <br />
# A suite of products. <br />
# In-house consistency. <br />
# Platform-consistency. <br />
<br><br />
<br />
It is a common error to assume that the list should be in reverse order, providing interfaces which look similar on the outside, but have a completely different behaviour on the inside. This would lead to major difficulties in usage, and thus endanger the success of the system. [Bruce Tognazzini, 2003]<br />
<br />
===Example: Shortcut Rule===<br />
<br />
To give an example for the points mentioned in the list above, I want to refer to Microsoft Windows and its applications as a suite of products (list element 5).<br />
<br />
In the Microsoft Windows software and in most of Microsoft's products shortcuts are of the same nature: <b>STRG+[underlined letter of command]</b>.<br><br />
[[Image:Shortcuts.jpg]]<br><br><br />
<br />
As you can see this gives the impression that the way of treating commands always swings that way. Unfortunatly this is not the case. The next screenshot shows that there are parts of the software where the shortcut rule is violated. This contradicts rule number 5 of the list above.<br><br />
[[Image:inconsistency.jpg]]<br />
<br />
This inconsistency leads to a big gap between what the system provides and what the user expects.<br />
<br />
===Example: Webdesign===<br />
<br />
In the context of invisible structures I would like to come up with an example from the field of webdesign. This field is highly dependent on the principles of design, especially ''consistency'', because it has so much freedom in the lookalike of its products. If you consider programming Visual C++, you have a predefined suite of products, which follow a number of design principles already. Engaging in webdesign you will face a tremendous freedom, which also comes along with a great amount of responsibility.<br />
<br />
[[Image:Structure.gif]]<br />
<br />
The structural concept above gives an idea how consistency is practically applied. Providing a graphical and logical concept helps the user to remember and assume where he finds the desired information or service inside the system or website. [Lynch and Horton, 2002]<br />
<br />
[[Image:Header.gif]]<br />
<br />
An example for a good concept is the header shown above. It was part of the website http://www.bridgeman.co.uk . One can easily recognize that the design of the is consistent in its typography and lookalike throughout the buttons and page banners [Lynch and Horton, 2002]<br />
<br />
==Conclusion==<br />
<br />
To sum up it is to say that ''consistency'' is a very important topic in design as a whole, and information design in particular.Knowing your users and providing them with a well structured, logically correct and predictable system is the major aim related to the principle of consistency.<br />
<br />
==Bibliography==<br />
[Bruce Tognazzini, 2003]<br />
First Principles of Interaction Design, Nielsen Norman Group<br><br />
http://www.asktog.com/basics/firstPrinciples.html<br />
<br />
[Hyperdictionary.com, 2005]<br />
Consistency<br><br />
http://www.hyperdictionary.com/dictionary/consistency<br />
<br />
[Whatdowordsmean.com, 2005]<br />
Consistency<br><br />
http://www.whatdowordsmean.com/definition/consistency/<br />
<br />
[Lynch and Horton, 2002]<br />
Webstyleguide 2nd edition<br><br />
http://www.webstyleguide.com/page/consistent.html<br />
----<br />
< [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G8 - Aufgabe 1|Aufgabe 1]]<br><br />
<< [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G8|G8]]<br><br />
<<< [[Teaching:TUW_-_UE_InfoVis_WS_2005/06|overview]]</div>UE-InfoVis05060126487https://infovis-wiki.net/w/index.php?title=Teaching:TUW_-_UE_InfoVis_WS_2005/06_-_Gruppe_G8_-_Aufgabe_1_-_Consistency&diff=6575Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G8 - Aufgabe 1 - Consistency2005-10-25T08:33:42Z<p>UE-InfoVis05060126487: /* Example: Webdesign */</p>
<hr />
<div>==Definition(s)==<br />
<br />
''Consistency describes a harmonious uniformity or agreement among things or parts.''<br>[Hyperdictionary.com, 2005]<br />
<br />
''Agreement or harmony of all parts of a complex thing among themselves, or of the same thing with itself at different times.''<br><br />
[Whatdowordsmean.com, 2005]<br />
<br />
==Key Words==<br />
<br />
Consistency, design, information visualization<br />
<br />
==Abstract==<br />
''"Consistency (in Design)" is often referred to as the central criteria for successful user interaction. Any interface wants to keep its user focused, and additionally guide him to a procedure or structure. All this needs a clear and consistent framework of elements within the design of the interface. Consistency can create a distinct sense of "place" and makes parts and functions in a system memorable [Lynch and Horton, 2002].<br><br />
Therefor I want to give a brief overview on the important issues of consistency.''<br />
<br />
==Consistency and its Context==<br />
<br />
===Important Issues===<br />
<br />
The following list tries to give a ranking that indicates which elements of an interface require consistency the most [Bruce Tognazzini, 2003].<br />
<br />
# Interpretation of user behavior, e. g., shortcut keys maintain their meanings.<br />
# Invisible structures. <br />
# Small visible structures. <br />
# The overall "look" of a single application or service--splash screens, design elements. <br />
# A suite of products. <br />
# In-house consistency. <br />
# Platform-consistency. <br />
<br><br />
<br />
It is a common error to assume that the list should be in reverse order, providing interfaces which look similar on the outside, but have a completely different behaviour on the inside. This would lead to major difficulties in usage, and thus endanger the success of the system. [Bruce Tognazzini, 2003]<br />
<br />
===Example: Shortcut Rule===<br />
<br />
To give an example for the points mentioned in the list above, I want to refer to Microsoft Windows and its applications as a suite of products (list element 5).<br />
<br />
In the Microsoft Windows software and in most of Microsoft's products shortcuts are of the same nature: <b>STRG+[underlined letter of command]</b>.<br><br />
[[Image:Shortcuts.jpg]]<br><br><br />
<br />
As you can see this gives the impression that the way of treating commands always swings that way. Unfortunatly this is not the case. The next screenshot shows that there are parts of the software where the shortcut rule is violated. This contradicts rule number 5 of the list above.<br><br />
[[Image:inconsistency.jpg]]<br />
<br />
This inconsistency leads to a big gap between what the system provides and what the user expects.<br />
<br />
===Example: Webdesign===<br />
<br />
In the context of invisible structures I would like to come up with an example from the field of webdesign. This field is highly dependent on the principles of design, especially ''consistency'', because it has so much freedom in the lookalike of its products. If you consider programming Visual C++, you have a predefined suite of products, which follow a number of design principles already. Engaging in webdesign you will face a tremendous freedom, which also comes along with a great amount of responsibility.<br />
<br />
[[Image:Structure.gif]]<br />
<br />
The structural concept above gives an idea how consistency is practically applied. Providing a graphical and logical concept helps the user to remember and assume where he finds the desired information or service inside the system or website. [Lynch and Horton, 2002]<br />
<br />
[[Image:Header.gif]]<br />
<br />
An example for a good concept is the header shown above. It was part of the website http://www.bridgeman.co.uk . One can easily recognize that the design of the is consistent in its typography and lookalike throughout the buttons and page banners [Lynch and Horton, 2002]<br />
<br />
==Conclusion==<br />
<br />
To sum up it is to say that ''consistency'' is a very important topic in design as a whole, and information design in particular.Knowing your users and providing them with a well structured, logical correct and non surprising system is what is the major aim related to the principle of consistency.<br />
<br />
==Bibliography==<br />
[Bruce Tognazzini, 2003]<br />
First Principles of Interaction Design, Nielsen Norman Group<br><br />
http://www.asktog.com/basics/firstPrinciples.html<br />
<br />
[Hyperdictionary.com, 2005]<br />
Consistency<br><br />
http://www.hyperdictionary.com/dictionary/consistency<br />
<br />
[Whatdowordsmean.com, 2005]<br />
Consistency<br><br />
http://www.whatdowordsmean.com/definition/consistency/<br />
<br />
[Lynch and Horton, 2002]<br />
Webstyleguide 2nd edition<br><br />
http://www.webstyleguide.com/page/consistent.html<br />
----<br />
< [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G8 - Aufgabe 1|Aufgabe 1]]<br><br />
<< [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G8|G8]]<br><br />
<<< [[Teaching:TUW_-_UE_InfoVis_WS_2005/06|overview]]</div>UE-InfoVis05060126487https://infovis-wiki.net/w/index.php?title=Teaching:TUW_-_UE_InfoVis_WS_2005/06_-_Gruppe_G8_-_Aufgabe_1_-_Consistency&diff=6568Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G8 - Aufgabe 1 - Consistency2005-10-25T07:58:32Z<p>UE-InfoVis05060126487: /* Example: Shortcut Rule */</p>
<hr />
<div>==Definition(s)==<br />
<br />
''Consistency describes a harmonious uniformity or agreement among things or parts.''<br>[Hyperdictionary.com, 2005]<br />
<br />
''Agreement or harmony of all parts of a complex thing among themselves, or of the same thing with itself at different times.''<br><br />
[Whatdowordsmean.com, 2005]<br />
<br />
==Key Words==<br />
<br />
Consistency, design, information visualization<br />
<br />
==Abstract==<br />
''"Consistency (in Design)" is often referred to as the central criteria for successful user interaction. Any interface wants to keep its user focused, and additionally guide him to a procedure or structure. All this needs a clear and consistent framework of elements within the design of the interface. Consistency can create a distinct sense of "place" and makes parts and functions in a system memorable [Lynch and Horton, 2002].<br><br />
Therefor I want to give a brief overview on the important issues of consistency.''<br />
<br />
==Consistency and its Context==<br />
<br />
===Important Issues===<br />
<br />
The following list tries to give a ranking that indicates which elements of an interface require consistency the most [Bruce Tognazzini, 2003].<br />
<br />
# Interpretation of user behavior, e. g., shortcut keys maintain their meanings.<br />
# Invisible structures. <br />
# Small visible structures. <br />
# The overall "look" of a single application or service--splash screens, design elements. <br />
# A suite of products. <br />
# In-house consistency. <br />
# Platform-consistency. <br />
<br><br />
<br />
It is a common error to assume that the list should be in reverse order, providing interfaces which look similar on the outside, but have a completely different behaviour on the inside. This would lead to major difficulties in usage, and thus endanger the success of the system. [Bruce Tognazzini, 2003]<br />
<br />
===Example: Shortcut Rule===<br />
<br />
To give an example for the points mentioned in the list above, I want to refer to Microsoft Windows and its applications as a suite of products (list element 5).<br />
<br />
In the Microsoft Windows software and in most of Microsoft's products shortcuts are of the same nature: <b>STRG+[underlined letter of command]</b>.<br><br />
[[Image:Shortcuts.jpg]]<br><br><br />
<br />
As you can see this gives the impression that the way of treating commands always swings that way. Unfortunatly this is not the case. The next screenshot shows that there are parts of the software where the shortcut rule is violated. This contradicts rule number 5 of the list above.<br><br />
[[Image:inconsistency.jpg]]<br />
<br />
This inconsistency leads to a big gap between what the system provides and what the user expects.<br />
<br />
===Example: Webdesign===<br />
<br />
In the context of invisible structures I would like to come up with an example from the field of webdesign. This field is highly dependent on the principles of design, especially ''consistency'', because it has so much freedom in the lookalike of its products. If you consider prgramming Visual C++, you have a predefined suite of products, which follow a number of design principles already. Engaging yourself in webdesign you will face a tremendous freedom, which also comes along with a great amount of responsibility.<br />
<br />
[[Image:Structure.gif]]<br />
<br />
The structural concept above gives an idea how consistency is practically applied. Providing a graphical and logical concept helps the user to remember and assume where he finds the desired information or service inside the system or website. [Lynch and Horton, 2002]<br />
<br />
[[Image:Header.gif]]<br />
<br />
An example for a good concept is the header shown above. It was part of the website http://www.bridgeman.co.uk . One can easily recognize that the design of the is consistent in its typography and lookalike throughout the buttons and page banners [Lynch and Horton, 2002]<br />
<br />
==Conclusion==<br />
<br />
To sum up it is to say that ''consistency'' is a very important topic in design as a whole, and information design in particular.Knowing your users and providing them with a well structured, logical correct and non surprising system is what is the major aim related to the principle of consistency.<br />
<br />
==Bibliography==<br />
[Bruce Tognazzini, 2003]<br />
First Principles of Interaction Design, Nielsen Norman Group<br><br />
http://www.asktog.com/basics/firstPrinciples.html<br />
<br />
[Hyperdictionary.com, 2005]<br />
Consistency<br><br />
http://www.hyperdictionary.com/dictionary/consistency<br />
<br />
[Whatdowordsmean.com, 2005]<br />
Consistency<br><br />
http://www.whatdowordsmean.com/definition/consistency/<br />
<br />
[Lynch and Horton, 2002]<br />
Webstyleguide 2nd edition<br><br />
http://www.webstyleguide.com/page/consistent.html<br />
----<br />
< [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G8 - Aufgabe 1|Aufgabe 1]]<br><br />
<< [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G8|G8]]<br><br />
<<< [[Teaching:TUW_-_UE_InfoVis_WS_2005/06|overview]]</div>UE-InfoVis05060126487https://infovis-wiki.net/w/index.php?title=Teaching:TUW_-_UE_InfoVis_WS_2005/06_-_Gruppe_G8_-_Aufgabe_1_-_Consistency&diff=6566Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G8 - Aufgabe 1 - Consistency2005-10-25T07:57:07Z<p>UE-InfoVis05060126487: /* Important Issues */</p>
<hr />
<div>==Definition(s)==<br />
<br />
''Consistency describes a harmonious uniformity or agreement among things or parts.''<br>[Hyperdictionary.com, 2005]<br />
<br />
''Agreement or harmony of all parts of a complex thing among themselves, or of the same thing with itself at different times.''<br><br />
[Whatdowordsmean.com, 2005]<br />
<br />
==Key Words==<br />
<br />
Consistency, design, information visualization<br />
<br />
==Abstract==<br />
''"Consistency (in Design)" is often referred to as the central criteria for successful user interaction. Any interface wants to keep its user focused, and additionally guide him to a procedure or structure. All this needs a clear and consistent framework of elements within the design of the interface. Consistency can create a distinct sense of "place" and makes parts and functions in a system memorable [Lynch and Horton, 2002].<br><br />
Therefor I want to give a brief overview on the important issues of consistency.''<br />
<br />
==Consistency and its Context==<br />
<br />
===Important Issues===<br />
<br />
The following list tries to give a ranking that indicates which elements of an interface require consistency the most [Bruce Tognazzini, 2003].<br />
<br />
# Interpretation of user behavior, e. g., shortcut keys maintain their meanings.<br />
# Invisible structures. <br />
# Small visible structures. <br />
# The overall "look" of a single application or service--splash screens, design elements. <br />
# A suite of products. <br />
# In-house consistency. <br />
# Platform-consistency. <br />
<br><br />
<br />
It is a common error to assume that the list should be in reverse order, providing interfaces which look similar on the outside, but have a completely different behaviour on the inside. This would lead to major difficulties in usage, and thus endanger the success of the system. [Bruce Tognazzini, 2003]<br />
<br />
===Example: Shortcut Rule===<br />
<br />
To give an example for the points mentioned in the list above, I want to refer to Microsoft Windows and its applications as a suite of products (list element 5).<br />
<br />
In the Microsoft Windows software and in most of Microsofts products shortcut are of the same nature: <b>STRG+[underlined letter of command]</b>.<br><br />
[[Image:Shortcuts.jpg]]<br><br><br />
<br />
As you can see this gives the impression that the way of treating commands always swings that way. Unfortunatly it does not. The next screenshot shows that there are parts of the software where the shortcut rule is violated. This stands in contradiction with number 5 of the list above.<br><br />
[[Image:inconsistency.jpg]]<br />
<br />
This inconsistency leads to a big gap between what the system provides and what the user expects. <br />
<br />
===Example: Webdesign===<br />
<br />
In the context of invisible structures I would like to come up with an example from the field of webdesign. This field is highly dependent on the principles of design, especially ''consistency'', because it has so much freedom in the lookalike of its products. If you consider prgramming Visual C++, you have a predefined suite of products, which follow a number of design principles already. Engaging yourself in webdesign you will face a tremendous freedom, which also comes along with a great amount of responsibility.<br />
<br />
[[Image:Structure.gif]]<br />
<br />
The structural concept above gives an idea how consistency is practically applied. Providing a graphical and logical concept helps the user to remember and assume where he finds the desired information or service inside the system or website. [Lynch and Horton, 2002]<br />
<br />
[[Image:Header.gif]]<br />
<br />
An example for a good concept is the header shown above. It was part of the website http://www.bridgeman.co.uk . One can easily recognize that the design of the is consistent in its typography and lookalike throughout the buttons and page banners [Lynch and Horton, 2002]<br />
<br />
==Conclusion==<br />
<br />
To sum up it is to say that ''consistency'' is a very important topic in design as a whole, and information design in particular.Knowing your users and providing them with a well structured, logical correct and non surprising system is what is the major aim related to the principle of consistency.<br />
<br />
==Bibliography==<br />
[Bruce Tognazzini, 2003]<br />
First Principles of Interaction Design, Nielsen Norman Group<br><br />
http://www.asktog.com/basics/firstPrinciples.html<br />
<br />
[Hyperdictionary.com, 2005]<br />
Consistency<br><br />
http://www.hyperdictionary.com/dictionary/consistency<br />
<br />
[Whatdowordsmean.com, 2005]<br />
Consistency<br><br />
http://www.whatdowordsmean.com/definition/consistency/<br />
<br />
[Lynch and Horton, 2002]<br />
Webstyleguide 2nd edition<br><br />
http://www.webstyleguide.com/page/consistent.html<br />
----<br />
< [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G8 - Aufgabe 1|Aufgabe 1]]<br><br />
<< [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G8|G8]]<br><br />
<<< [[Teaching:TUW_-_UE_InfoVis_WS_2005/06|overview]]</div>UE-InfoVis05060126487https://infovis-wiki.net/w/index.php?title=Chart_Junk&diff=6563Chart Junk2005-10-25T07:54:02Z<p>UE-InfoVis05060126487: /* 3D Pie Chart */</p>
<hr />
<div>==Definition(s)==<br />
<br />
* ''Chartjunk is a term for unnecessary or confusing visual elements in charts and graphs. Markings and visual elements can be called chartjunk if they are not part of the minimum set of visuals necessary to communicate the information understandably. Examples of unnecessary elements which might be called chartjunk include heavy or dark grid lines, ornamented chart axes and display frames, pictures or icons within data graphs, and ornamental shading.<br>Another kind of chartjunk skews the depiction and makes it difficult to understand the real data being displayed. Examples of this type include items depicted out of scale to one another and noisy backgrounds making comparison between elements difficult in a chart or graph.'' [wikipedia.org]<br />
<br />
<br />
<br />
<br />
<br />
* ''"The interior decoration of graphics generates a lot of ink which does not tell the viewer anything new. The purpose of the decoration varies - to make the graphic appear more scientific, to enliven the display, to give the designer an opportunity to exercise artistic skill. Regardless of the cause, it is all non-data-ink or redundant data-ink, and it is often chartjunk."'' [Tufte, 1983]<br />
<br />
==Key Words==<br />
Chart Junk, Bar Chart, Pie Chart<br />
<br />
<br />
<br />
==Examples==<br />
<br />
===3D Bar Chart===<br />
* The Icon of the Microsoft&reg; Office Excel "Diagramm-Assistent" shows exactly what it mostly produces namely ''Chart Junk''.<br />
<center><br />
[[Image:Icon3.jpg|MS-Icon]]<br />
<br />
Microsoft&reg; Excel "Diagramm-Assistent"<br />
</center><br />
<br />
* <center><br />
[[Image:3Dbars02.jpg|250px|3D-bars]]<br />
</center><br />
<br />
* In addition, if you look at it in this way: [[Image:3Dbars03.jpg|30px|3D-bars]] the proportions of the areas are not correct!<br />
<br />
===3D Pie Chart===<br />
The most common Chart Junk might be the ''3D Pie chart''. It distorts the message since neither the angles nor the areas are in proportion to the data. Additionaly, the different colours emphasize some of the pieces more than the others. <br />
<br />
For example, compare "Andere" with "Dienstleistung" in the following chart!<br />
<center><br />
[[Image:mercosur.gif]]<br />
<br />
[AHK]<br />
</center><br />
<br />
==Conclusion==<br />
Again, Edward R. Tufte:<br />
<center><br />
''"Kill the frills and get to the point!"'' [Tufte, 1997] <br />
</center><br />
<br />
==Bibliography==<br />
[wikipedia.org]<br />
Wikipedia, the free encyclopedia, <br />
http://en.wikipedia.org/wiki/Chartjunk<br />
<br />
[Tufte, 1983] <br />
Edward R. Tufte, <br />
''The Visual Display of Quantitative Information'',<br />
1983. <br />
http://www.edwardtufte.com/tufte/<br />
<br />
[Tufte, 1997] <br />
Edward R. Tufte, <br />
''Visual Explanations'',<br />
Graphics Press,<br />
1997. <br />
http://www.edwardtufte.com/tufte/<br />
<br />
[AHK]<br />
AHK Die deutschen Auslandshandelskammern in Mercosur<br />
http://www.mercosur-info.com/al/handelsstatistiken.shtml<br />
<br />
----<br />
<br />
< [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G8 - Aufgabe 1|Aufgabe 1]]<br />
<br />
<< [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G8|G8]]<br />
<br />
<<< [[Teaching:TUW_-_UE_InfoVis_WS_2005/06|overview]]</div>UE-InfoVis05060126487https://infovis-wiki.net/w/index.php?title=User:UE-InfoVis0506_0126487&diff=6239User:UE-InfoVis0506 01264872005-10-19T09:44:16Z<p>UE-InfoVis05060126487: </p>
<hr />
<div>'''Gioia Baldass (0126487)'''<br> <br />
<br />
'''Studies:'''<br><br />
Wirtschaftsinformatik (066 926)<br />
<br />
'''e-Mail:'''<br><br />
e0126487@student.tuwien.ac.at<br><br />
gioiki@gmx.net<br />
<br />
'''Group:'''<br><br />
[[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G8|G8]]</div>UE-InfoVis05060126487https://infovis-wiki.net/w/index.php?title=User:UE-InfoVis0506_0126487&diff=6238User:UE-InfoVis0506 01264872005-10-19T09:44:02Z<p>UE-InfoVis05060126487: </p>
<hr />
<div>'''Gioia Baldass (0126487)'''<br> <br />
<br />
'''Studies:'''<br><br />
Wirtschaftsinformatik (066 926)<br />
<br />
'''e-Mail:'''<br><br />
e0126487@student.tuwien.ac.at,<br />
gioiki@gmx.net<br />
<br />
'''Group:'''<br><br />
[[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G8|G8]]</div>UE-InfoVis05060126487https://infovis-wiki.net/w/index.php?title=User:UE-InfoVis0506_0126487&diff=6237User:UE-InfoVis0506 01264872005-10-19T09:43:51Z<p>UE-InfoVis05060126487: </p>
<hr />
<div>'''Gioia Baldass (0126487)'''<br> <br />
<br />
'''Studies:'''<br><br />
Wirtschaftsinformatik (066 926)<br />
<br />
'''e-Mail:'''<br><br />
e0126487@student.tuwien.ac.at,<br />
e0126487@student.tuwien.ac.at<br />
gioiki@gmx.net<br />
<br />
'''Group:'''<br><br />
[[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G8|G8]]</div>UE-InfoVis05060126487https://infovis-wiki.net/w/index.php?title=User:UE-InfoVis05060126487&diff=6235User:UE-InfoVis050601264872005-10-19T09:37:30Z<p>UE-InfoVis05060126487: </p>
<hr />
<div>'''Gioia Baldass (0126487)'''<br> <br />
<br />
'''Studies:'''<br><br />
Wirtschaftsinformatik (066 926)<br />
<br />
'''e-Mail:'''<br><br />
gioiki@gmx.net<br />
<br />
'''Group:'''<br><br />
[[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G8|G8]]</div>UE-InfoVis05060126487https://infovis-wiki.net/w/index.php?title=User:UE-InfoVis05060126487&diff=6208User:UE-InfoVis050601264872005-10-18T17:03:15Z<p>UE-InfoVis05060126487: </p>
<hr />
<div>'''Gioia Baldass (0126487)'''<br> <br />
<br />
'''Studies:'''<br><br />
Wirtschaftsinformatik (033 926)<br />
<br />
'''e-Mail:'''<br><br />
gioiki@gmx.net<br />
<br />
'''Group:'''<br><br />
[[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G8|G8]]</div>UE-InfoVis05060126487