who ruled the royal colonies economics wants the shining baseball bat how to write a essay perfectly writing narrative essay outline how to write compare essay my hometown coimbatore essay what are jerry beads the cycle of socialization bobbie harro how to write an academic review of an article how to write cover letters for resumes essay on martin luther king jr letter from birmingham jail russian revolution animal farm essay on my dream school for class 4 jrotc history essay how to write essay fluently incentives for charitable acts electro stimulation therapy for weight loss what was one success of reconstruction after the civil war what is conformity sample clerical resume cover letter essay on science in peace and war yeast and temperature enron code of ethics simile in poetry how to write a review of article journal what is truly important in life harrison bergeron full text how to write a directed autobiography essay for high school application examples writing comparison contrast essay ppt the three witches in macbeth examples of enculturation cover letter format for teaching job glory character analysis how to write a novel in an essay richard iii act 2 why pe should not be required how to write cover letter for marketing job what does nature symbolize how to write a process essay steps how to write a resume for security job down syndrome cosmetic surgery how to write a research paper on cervical cancer writing an essay canberra platos theory of human nature the retrieved reformation how to write a analytical essay introduction martin luther king jr thesis statement first african american psychologist harvard child bereavement study six perspectives of modern psychology 2pac changes meaning home depot return to retail strategy warrior ethos book anatomical location of pancreas 2005 ap us history dbq how to make a mba fresher resume resume writer mn irony in harrison bergeron what is compartmentalization in biology essay word changer the four voyages how to write an essay in ten steps meaning of true friend metaphysics schools of thought dodge city marshal write an essay of at least 100 words a argumentative essay accounting theory and practice example of research proposal memo the existence of aliens frederick douglass greatest accomplishment 3 weird sisters wilson lumber company fce writing essay phrases asalamalakim not in touch with reality guide to write thesis proposal unto this last ruskin into the wild summary sparknotes slavery and economy the diamond water paradox what to write on resume if self employed sample teacher resume format india those who choose security over freedom sample resume relief teacher sample resume nurses experience how to write an essay in 50 minutes how to write a cover letter for best buy moral issue examples essay mass media advantages emirates airlines business strategy communication analysis paper how do you write thesis statement military governments description of a best friend what does vaulting ambition mean examples of rhetorical situations sample resume format on microsoft word how to write an article review critique zen and the art of archery examples to use for gre issue essay how to write an essay yale how to write a great article essay about air pollution in kannada hamlet revenge gmos in food pros and cons effects of poor communication in healthcare how to write a dbq essay global essay on school bag for class 2 william lynch speech 6 to 8 black man how do you write outline for essay why is financial aid important cover letter sample for article writing comparing and contrasting mitosis and meiosis apocalypse now song circle of conflict office clerical resume samples the discus thrower richard selzer analysis how to write my biography pdf why is protecting the environment important college is so stressful the laws of manu short essay about career goals how to write up dissertation results esa format generator colonization of uganda federalist party platform moscovici minority influence never let me go movie summary nt1230 final exam format to a good resume how to draw v for vendetta 1984 chestnut tree how to write a phd thesis chapter difference between sex and gender essay on food security ordinance tobias wolff mother how to write a high school resume examples what makes someone a good friend sample cover letter for resume firefighter define elizabethan era compare contrast essay how to write ordinary people chapter summary essay on food habits of animals scarlet ibis audio sales promotion methods cornelius vanderbilt robber baron ideo product development case how to write years in essay wh auden funeral poem wilson treaty of versailles negatives of plastic surgery examples of social inequality in america essay about life on another planet quentin tarantino directing style proposing a solution topics desertion clifford simak creationism vs big bang theory old age people a description of new england summary how to start a personal narrative essay examples i need someone to write my biography death of a salesman theme valid ranges of protocol numbers resume for entry level civil engineer pride and prejudice sense and sensibility how to write my biography controversy over death penalty black thunder arna bontemps sample resume for first job application crime causation definition four learning patterns resume format in marketing and sales essay format outline examples west point cheating scandal 1976 president when great depression began how to write a good criminal law essay sample resume format for college how to write an authoritative essay empress wu chao what overturned plessy vs ferguson a rumor of war chapter summaries the roots of education are bitter to build a fire themes the effects of eating fast food how to write a cover letter for health care assistant to kill a mockingbird ch 11 anglo saxon and beowulf ways to write literature review the body ritual of the nacirema how to start your essay writing the cycles of american history how to write biography about yourself essay on impact of media on culture education and career goals essay writing format for sbi po exam my future profession free essay how do slime molds reproduce random short stories essay on computer disadvantages mandrake falls new hampshire how to write an article after an interview tips for essay writing toefl how to write a resume ending how to write an short article lantern footman snopes writing academic resume writing a college essay worksheet sun dolls when you are old poem analysis english essay writing format spm interesting american history research paper topics cover letter format in doc cover letter for freshers cv evolution cell phone ethan frome characters cover letter for resume examples for students how to write a curriculum vitae in english example physical changes in young adulthood caesar and brutus relationship how to write an acting resume with little experience banksy was here plot summary death of a salesman how to write cover letter with example writing portfolio cover letter example should you write a cover letter for google conglomerate diversification definition caraga state university how to write rrl thesis cover letter entry level banking sample finance graduate resume my ideal partner would be example of a good research proposal pdf the giant pool of money summary essay writing esl lesson takt time definition bbc shakespeare retold what is volp how to write an argumentative essay for dummies functionalist vs conflict theory how to write the articles mass tourism definition melian dialogue summary how to write an introduction for an exam essay italian contributions to american culture lord of the flies roger throwing stones moral courage in healthcare grand ole opry history walt disney company marketing strategy characteristics of tragic hero how to write argumentative essays samples canterbury tales characters descriptions essay on my favourite teacher for class 3 symbolism in to kill a mockingbird essay psychosocial theory of development how to write a satire essay on obesity anatomy of cow eye compare and contrast george wilson and tom buchanan types of encryptions product line extension examples symbolism in everyday life what is politics mean commonwealth worldwide chauffeured transportation rene descartes psychology oedipus the king online how to write a random autobiography poem prom essay nonviolent resistance examples 12 jurors movie define self schema how to write a cover letter for a job search poem if you forget me essay writing on types of pollution political cause of the american revolution teen pregnancy speech the rise of the papacy which battle did general braddock lose write cover letter for resume first they killed my father summary how to write a cover letter business analyst how to write an art critique essays on same sex marriage how to write a context essay introduction importance of operations management sample book review for primary school michael ondaatje biography how to write a resume for kitchen good topic for informative speech lilliput gullivers travels how the earth was formed video social disorganization examples psychological effects of infidelity essay about computer boon or bane absolute monarchy french revolution a beautiful mind online example essay on process analysis art in different cultures essay on india according to my dream return demonstration in nursing writing a great objective for resume what describes a hero how to write a argument essay step by step famous argumentative essays hobbes view of human nature curriculum vitae format teaching profession what is price mechanism the american and french revolutions how to write a 12 paragraph essay slow movement in music authoritarian parenting pros and cons how to write in essay format book review how to write a the raven edgar allan poe analysis beethoven essay conflict in huckleberry finn holy sonnet 10 how to write a scientific abstract for a presentation schizophrenia beautiful mind essay on ancient indian culture and education system resume cover letter samples leasing agent how to write a simple cover letter for job application cirrhosis hesi case study answers how to write a thesis rhetorical analysis jack london accomplishments pathway evaluation program radical republicans plan for reconstruction marxism simple definition how to write a research paper diana hacker how does learning occur australian essay writing service reviews essay on education for free examples of green marketing shrek defends his swamp how to write a cover letter resume sample the host canterbury tales description spanish essay checker sample business plan to bank how to do an essay outline mla format micro level analysis definition how to write a biography myself should criminals be allowed to vote nikes vision statement gender gap politics definition pros and cons of going to mars how to make a good njhs essay resume format for a job narrative essay template pdf sample curriculum vitae engineer how to write essay on psychology primary vs secondary data traits of epic hero symbols in candide the outsiders dally death voyages of columbus is chlorophyll a polar cat in the rain theme a letter from birmingham jail summary define physically fit west side story movie free brave orchid essay summer vacation spent location allocation arcgis best friend speeches music of the 1600s a dust of snow how to write about my biography format of resume for accounting job how to write a medical case study assignment what is the pillow method free download essay writing for english tests guidelines on how to write a persuasive essay the story of an hour analysis the harlem dancer by claude mckay peak by roland smith characters learn how to write argumentative essay final reflection paper sample how to write a magazine article how to write the perfect feature article native son shmoop how to write act and scene number in essay rubric for essay writing in high schools masque of red death rooms autumn rhythm sample resume biotechnology professional how to write a mediated argument essay 4.07 module four exam the gun paul langan men and loneliness e coli emb test home baked bread sally croft america by mckay labor unions in america today make an apa citation the era of the new south mind body relationship psychology ballet dancers and eating disorders laura esquivel author is a virus a pathogen flowers in to kill a mockingbird calcium nitrate and sodium carbonate gcse essay writing tips rip van winkle text how to write your computer skills in a resume fish and chips history functional areas of a business write an essay about your college what caused the american revolution essay miss stephanie crawford quotes which issue was a cause of the french revolution analysis of pulp fiction is nonverbal communication universal death penalty debate essay women then and now essay on education system in india how to change persuasive essay writing checklist the enzyme amylase digests essay on indian economy in hindi how to write an essay bankers adda benefits of ecotourism resume objective sample for applying job website citation maker how to write a biological research proposal dark imagery in macbeth al capone sons in what ways was ww1 a total war bridge to terabithia characters around the world in six glasses themes of much ado about nothing a sentimental journey sparknotes cover letter for resume accounting manager battle for the beginning characters of gilgamesh oligopolistic market examples essay on my hobby football color of water summary dead poet society character analysis populist party goals how to write a good essay 9gag rocking horse winner symbols how to write my degree on a resume cover letter job agency the real miss jane pittman hester prynne character development story of an hour character analysis race in colonial america people of montserrat wikipedia great gatsby guide to write research proposal what does mccarthyism mean compare and contrast jay gatsby and tom buchanan how to write a research paper with a thesis statement china sleeping giant the seventh seal summary how to write resume for nanny how write a resume sample business analyst resume writing services why are monopolies inefficient resume builder software for mac how to write a biography proposal how to write a job resume for first job essay on school uniform in hindi different brands of popcorn bloods gang rules how to write a resume for auto mechanic literary devices in crime and punishment impact of slavery define paratenic host write a note on scannable resume shakespeare sonnet 18 paraphrase on tidy endings how to write resume achievements is ocd genetic fahrenheit 451 parlor intermediate accounting chapter 17 investments solutions lesson plan for writing a 5 paragraph essay essay for university admission sample if you were mine poems essay on sports day in arabic everyday use alice walker summary how to write a cover letter for school admission how to write covering letter with resume aspergers intimacy issues summary of rules of the game pope zephyrinus tim obrien ambush who is laertes in hamlet tissue structure and function general review roger b taney definition sample essay about my mom sample resume for australia preschool teacher self evaluation form humoral immunity example how to write a persuasive essay on obesity what rhymes with essay zeus greek symbol facts on writing a resume how to write a good thesis for a character analysis Visualisieren von Informationen auf zweidimensionaler Ebene | be in-credible
22 April, 2012 von Thomas Noschka · 1 Kommentare

Das Visualisieren von Informationen auf der Ebene

Visualisierung auf der zweidimensionalen Ebene (Bertin)

Richtiges Visualisieren auf der Ebene

Um Informationen wie Zahlen, Daten und Fakten auf einer Ebene zu visualisieren, spielt die Auseinandersetzung mit den richten visuellen Variablen und der Einsatz der exakten Imposition eine wichtige Rolle. Der Nutzer muss sofort erkennen können, worum es geht. Aber was bedeutet das alles genau und worauf ist bei der Visualisierung zu achten?

In diesem Artikel möchte ich das Basis-Wissen im Themengebiet »Interface Design« etwas näher beleuchten und erklären. Dabei stütze ich mich an den Aufschrieben von Jacques Bertin, ein bedeutender französischer Kartograph, der sich unter anderem mit der grafischen Theorie befasste. Beginnen möchte ich an dieser Stelle mit der Abgrenzung des grafischen Systems. Hier wird wirklich an der Wurzel gepackt und erklärt. Im folgenden werdet ihr euch sicherlich fragen, wieso ich eine solche kinderleichte Sache erkläre. Jedoch werdet ihr schnell merken, dass dieses Basis-Wissen ein guter Stützpunkt ist, um sich die nachfolgenden Erklärungen besser einzuprägen und zu verstehen.
Wenn wir Daten visualisieren wollen, verwenden wir verschiedene Arten von Impositionen wie zum Beispiel ein normal Balkendiagramm oder eine Karte. Hier verstehen wir oftmals anhand weniger Parameter, wie eine Grafik zu lesen ist und können anhand der Informationen zu neuen Erkenntnissen kommen, ganz egal aus welchem Themengebiet es sich dabei handelt. Aber um etwas zu visualisieren, benötigen wir erst eine Fläche wie Papier, also eine so genannte Ebene. Stellen wir uns mal vor, diese Ebene ist ein Blatt Papier in der Größe Din A4. Dieses Papier ist unsere Ebene, auf der Informationen visualisiert werden, außerdem ist es eine Abgrenzung zum grafischen System. Warum? Ganz einfach, weil ich nicht über das Blatt hinaus zeichnen bzw. gestalten kann. Jede Informationen wird auf einer Ebene festgehalten, dabei ist es wichtig, die Grenze zu beachten und sie richtig zu nutzen. Was es damit genau auf sich hat, erfahren wir dann etwas später.

Was genau verstehen wir unter einer Ebene? Als Ebene verstehen wir das,

  • was in irgendeiner Form dargestellt oder gedruckt werden kann.
  • was mit einem Blick erfassbar ist.
  • was eine normale Entfernung beim Lesen gewährleistet (Lesegröße).
  • was unter normalen und gleichmäßigen Lichtverhältnissen erfassbar ist.
  • was keine Bewegbilder wie Vexierbilder oder plastische Bilder beinhaltet

Super, jetzt ist klar, was eine Ebene ist und das diese auch Grenzen besitzt. Gehen wir also direkt weiter und kommen zum nächsten Schritt: Flecken! Als Flecken bezeichnen wir Elemente, die auf der Ebene innerhalb der Grenze gesetzt wird. Zeichnet ihr beispielsweise einen schwarzen Kreis auf euer Blatt Papier, so ist das ein Fleck! Euch stehen zur Visualisierung von Informationen exakt 6 verschiedene Arten zu Auswahl, die so genannten visuellen Variablen:

Die visuellen Variablen in Interface Design

Visuelle Variablen

Diese acht Komponenten kann der Gestalter verwenden, um die Visualisierung von Informationen zu verdeutlichen. Dabei ist es wichtig zu wissen, dass jede visuelle Variable ihre eigene bedeutungstragende Eigenschaften und eine besondere Aussagekraft besitzt. Möchtet ihr etwas mit »Richtung« darstellen, könnt ihr diese Komponente nicht mit der Farbe ersetzen. Schauen wir uns doch als Beispiel mal das Logo der Deutschen Bank an. Es besitzt einen blauen Rahmen sowie eine Diagonale, die von links unten nach rechts oben verläuft. Was soll diese Schräge überhaupt suggerieren? Es bezeichnet eine aufsteigende Gerade, die für einen Aufschwung, für Steigung und Erfolg sorgt. Könnte man die aufsteigende Gerade, also die »Richtung« durch Farbe ändern? Einfach die blaue Schräge entfernen und den blauen Rahmen stattdessen mit roter Farbe füllen? Immerhin steht Rot doch für Dynamik, Schnelligkeit… aber auch für Wut, Liebe, Aggressionen… vielleicht doch nicht passend?! Versteht ihr was ich meine – es kommt ganz auf den Effekt und die Bedeutung der visuellen Variable an! Verkünstelt euch nicht und haltet euch lieber an der Norm!

Woraus bestehen visuelle Variablen denn überhaupt? Im Grunde genommen sind es Implantationen, aus denen die 6 Variablen mehr oder weniger hervorgehen. Als Implantation bezeichnen wir drei Bedeutungen, die einen Fleck auf einer Ebene sichtbar machen: Punkt, Linie, Fläche. An dieser Stelle möchte ich euch den Artikel »Die Grundlagen der Gestaltung« ans Herz legen. Hier findet ihr viele interessante Informationen zu diesen drei Implantationen! Einen kurzen Exkurs möchte ich zu diesem Punkt dennoch geben und zitiere Bertin an dieser Stelle:

»Auf einer Linie kann man einen Punkt oder einen Linienabschnitt, in der Ebene einen Punkt, eine Linie oder eine Fläche betrachten«

Wer diesen Satz nicht verstanden hat, wird alles Weitere auch nicht verstehen können. Wenn ihr eine Linie zeichnet, habt ihr auf dieser Linie jederzeit Platz, einen Punkt hinzuzufügen, dabei spielt der Durchmesser keine Rolle. Eine Fläche würde kein Platz finden, da eure Ebene in diesem Fall lediglich die Linie ist. In der Fläche dagegen habt ihr Platz für jede Implantation, weil es die Ebene aufgrund ihrer Größe zulässt.  Das ist ein allgemeiner, aber dennoch wichtiger Punkt zur Wahrnehmung der visuellen Variablen und somit zur Information.
Beispiele für einzelne Bereiche würden so aussehen: Werden Punkte zur Visualisierung verwendet, zum Beispiel gezeichnete Flußeinmündungen, Straßenkreuzungen oder Waldecken, so sprechen wir von punkthafter Implantation. Eine linienhafte Implantation erreichen wir bei Uferlinien, Hausbegrenzungen, Staatsgrenzen, … und eine flächenhafte Implantation bei Seen, Inseln, Erdteilen und mehr! Wie ihr sehen könnt, sind die drei Faktoren (Punkt, Linie, Fläche), ein Teil, der zu den sechs visuellen Variablen gehören und Informationen besser beschreiben und darlegen.

Die homogene Ebene

Kommen wir nun zurück zur Ebene und halten folgendes fest: Die Ebene ist homogen und stets stetig. Jegliche Veränderungen irritieren den Betrachter ungemein und lassen die Visualisierung von Informationen verblassen. Dazu folgendes Beispiel:

Das Visualisieren von homogenen Flächen

Auf dem ersten Bild erkennen wir, dass ein Ausschnitt der Karte fehlt, dafür aber rechts vergrößert angezeigt wird. Klar verständlich, aber die Ebene ist nicht mehr homogen, da wir trotzdem erwarten, an dieser Stelle etwas zu sehen. Wäre die Karte nun interaktiv und wir könnten das weiße Quadrat bewegen, um gewisse Stellen vergrößert abzubilden, so würde uns die Information auf der Karte immer fehlen. Das Problem wird mit einem Kontrast bzw. Muster nicht gelöst. Zwar wird hier besser verdeutlicht, wo wir uns gerade befinden, aber dennoch ist die Abbildung nicht vorhanden und wird stattdessen ignoriert. Die dritte und letzte Abbildung ist dagegen das perfekte Beispiel, wie es sich eigentlich gehört und aussehen sollte: Der Betrachter sieht sofort, wo er sich gerade aufhält und kann außerdem die Menge auf der Karte sehen sowie abschätzen – prima!

Gehen wir einen Schritt weiter: Die Gliederungsstufen der Ebene. Die Gliederungsstufen werden durch visuelle Variablen, die sich auf der Ebene befinden, erst wahrnehmbar und besitzen verschiedene Bedeutungen. Fangen wir auch hier mit einem einfachen Beispiel an:

Die Gliederungsstufen bei der Visualisierung von Informationen

Auf dem Bild seht ihr in der ersten Zeile Kreise in fünf verschiedenen Helligkeitswerten. Darunter eine völlig freie Aneinanderreihung verschiedenster Formen. Das was ihr hier gerade seht sind geordnete Variablen. Warum? Ganz einfach, ihr als Betrachter würdet jetzt assoziativ die Kreise in der ersten Zeile ordnen, zum Beispiel in »12345« oder in »ABCDE« oder auch umgekehrt. Wie genau spielt keine Rolle, aber ihr würdet es spontan tun! Anders kann es bei den Formen sein, hier werdet ihr nicht sofort von links nach rechts zählen. Die Formen der zweiten Reihe würden eher assoziativ sein (dazu gleich mehr) und nicht geordnet, da ein Quadrat für jeden Menschen eine andere Bedeutung und eventuell sogar eine andere Rangordnung besitzt. Insgesamt existieren vier verschiedene Arten der Gliederungsstufe für visuelle Variablen:

Variable ist Selektiv:
Variablen gehören in diesem Bereich zu einer Art »Familie« und isolieren jegliche Beziehungen, zum Beispiel rote mit grüne Zeichen, helle mit dunkle Zeichen, …

Variable ist Geordnet:
Die variablen besitzen eine  Mittelwert, der zwischen zwei anderen visuellen Variablen eingeordnet werden kann. Beispiele wäre das Mittelglied zwischen Schwarz und Weiß oder Klein und Groß.

Variable ist Assoziativ:
Das sind Variablen, dessen Beziehungen erfassbar sind und dem Betrachter spontan einfallen. Beispielsweise Quadrate, Dreiecke und Kreise, die den gleichen Flächeninhalt haben.

Variable ist Quantitativ:
Das sind Variablen, die Verhältnisse verdeutlichen, dabei hat die visuelle Wahrnehmung nichts mit der genauen Messung der Länge zu tun! So kann zum Beispiel eine Länge das Dreifache einer anderen Länge sein – einzig als persönliche Wahrnehmung.

Die Impositionen

Kommen wir nun zum letzten entscheidenden Punkt zu diesem Thema: Die Impositionen (nicht zu verwechseln mit den Implantationen). Als eine Imposition bezeichnen wir visuelle Mittel wie Diagramme, Netze, Karten und Symbole, die die Informationen visualisieren. Der bekannteste und am häufigsten verwendete Vertreter ist dabei das gute alte Diagramm. Alles was wir dazu benötigen sind zwei Komponente, die wir zum einen für die X- sowie für die Y-Achse benötigen. Oftmals sieht man solche Diagramme an der Börse.
Eine weitere Imposition sind Netze, die oftmals in einem Kreis ausgelegt sind. Der Clou an dieser Sache ist, dass die Verhältnisse zwischen einzelnen Punkten sehr einfach zu visualisieren ist, da in einem Kreis von jedem Punkt aus eine Linie zum Nächsten gezeichnet werden kann. Hier sollte man lediglich darauf achten, so wenig Überschneidungen wie möglich zu bekommen, andernfalls könnte es etwas unlesbar und undeutlich werden. Tipp: Lieber die Positionen einzelner Punkte wechseln, um Verwirrung zu vermeiden.
Karten haben eine ähnliche Funktion wie Netze, entsprechen aber häufig der Lage auf der Erdoberfläche und sind fast ausschließlich auf Karten zu sehen (daher auch der Name). Durch einfache Implantationen wie der Linie, können Verhältnisse sehr einfach und eindeutig gekennzeichnet werden. Beispielsweise ein Busfahrplan, der die Route visualisiert!
Die letzte Imposition ist das Symbol! Banales Beispiel: Ihr seid im Starßenverkehrt unterwegs und seht plötzlich ein großes Schild, auf dem ein Diagramm abgebildet ist. Anhand des Diagramms sollt ihr auf dem ersten Blick erkennen, die schnell auf dieser Straße gefahren wird. Absurde Vorstellung oder? Für solche Zwecke werden Symbole, auch als Piktogramme bekannt, verwendet. Wenn Informationen schnell und eindeutig mit Symbolen erklärt werden können, muss kein Diagramm oder eine andere Imposition verwendet werden. »Keep it simple« heißt das Stichwort!

Zum Schluss noch eine interessante Grafik zu Impositions-Typen in Verhältnis zu Impositions-Gruppen. Hier seht ihr, welche Möglichkeiten und Wege euch zur Visualisierung von Informationen offen stehen.

Die Impositions-Typen und Gruppen beim Visualisieren von Informationen

Autor Thomas Noschka
Wer schreibt hier?

Notice: the_author_description ist seit Version 2.8 veraltet! Benutze stattdessen the_author_meta('description'). in /www/htdocs/w00cc41b/wp-includes/functions.php on line 3658
Hallo, ich bin Thomas – Blogger, Grafik- und Interface Designer. Ich skate gerne, trinke Tee, reise oft und sehe das Internet als große Spielwiese an. Wenn du mehr über mich wissen möchtest, dann besuche mich auf Twitter, Facebook, Google+ und YouTube

Hinterlasse ein Kommentar!

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *