zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > Site- und Layoutcheck
Seite neu laden Konzeptidee: "Optische Führung"

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 07.11.2010, 14:31
Benutzerbild von ArcVieh
//
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 19.12.2006
Ort: Gütersloh
Beiträge: 1.844
ArcVieh sorgt für eine eindrucksvolle AtmosphäreArcVieh sorgt für eine eindrucksvolle Atmosphäre
Standard Konzeptidee: "Optische Führung"

Hallo,
ich hab für eine Internet-Community zu einem ziemlich bekannten und verrufenem MMORPG eine Seite designt & erstellt auf Wordpress-Basis.

Diese Community hat natürlich auch einen "Bewerbungs-Bereich" und dazu galt es eine Info-Page zu erstellen. Im Grunde ist das reiner Fließtext.


Meine Idee war nun, die Information in Kästen darzustellen und das jeder Kasten auf den nachfolgenden "zeigt". Da viele Leute sich ja vor größeren Fließtexten scheuen und ungern durch die Gegend scrollen um nach den Inhalt zu suchen, der sie wirklich interessiert.

Es scheint mir nur nicht wirklich gelungen zu sein.
Ich habe kaum Resonanzen bekommen - im Grunde nur eine negative. Da ich das ganze wirklich nur noch auf Hobby-Basis fahre und ich diese Informationsdarstellung zum ersten mal probiert habe, dachte ich mir, ich lass da mal ein paar Profis drüber schauen.

join us bereich.png

Das wäre besagter Bereich.

Mein Problem ist eben auch, dass das Bild oben links (die eigentliche Überschrift h2) keine Information beherbergt und somit rechts die erste Information kommt, daher muss der nächste Info-Kasten auch direkt unter dem rechten Kasten sein, ansonsten sieht es verwirrend aus (welches ist nun die erste Info?).

Allerdings sind die meisten Menschen es ja gewöhnt von links nach rechts zu lesen, d.h. man wird nach dem ersten Kasten automatisch auf den linken unter dem Bild stoßen anstatt auf den rechts, oder sehe ich das falsch?

Wäre es also logischer, mit der Information nach dem ersten Info-Kasten unten links zu starten, also alle nachfolgenden Kästen spiegelverkehrt darzustellen?

Das Markup dazu sähe btw so aus:
HTML-Code:
<div class="box round fright right">
	<h3 class="icon_star"><span></span>Überschrift</h3>
	<p>Test</p>
</div>
.round ist eine Klasse, die ich überall auf der Webseite benutze, für runde Rahmen. fright lässt die Box rechts floaten oder fleft links. "right", "bottom" & "left" geben jeweils die Position des Pfeils an.

Für die Pfeile benutze ich das leere span-Tag in der Überschrift und positioniere es absolut in der relativ positionierten Überschrift.

Der leere Tag ist nicht wirklich schön, ich werde das demnächst vermutlich direkt dem H3 geben - bin mir nur nicht ganz sicher, wie ich dann die Formatierung beibehalten kann, da dem H3 dann eine Höhe zugewiesen werden muss und ich die p-Tags wohl hochziehen müsste. Wenn da also wer noch n Tipp hat, bin ich dankbar.


Bin für Kritik, Anregungen, etc offen.



Grüße,
Florian
__________________
CSS-FAQ beantwortet die meisten Fragen | Retro coding gegen Divitis | Code validieren & posten für Hilfe
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 07.11.2010, 19:11
Benutzerbild von Thielo
Web Ninja
XHTMLforum-Kenner
 
Registriert seit: 17.09.2009
Ort: Stuttgart oder so
Beiträge: 3.372
Thielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein Lichtblick
Standard

muss es überhaupt mit so kleinen kästen sein? würde es nicht gehen die kästen über die gesamte Breite zu legen?

Weil so wie es aktuell ist, ist es zu verwirrend.
__________________
Hier ein immer gültiges Statement: Überarbeite deine Code, lerne die Grundlagen, widersprich mir nicht, wehre dich nicht, ich habe Recht, wir sind Lolgion, wir sind viele.. potato...
All meine Angaben sind ohne Gewähr, es könnte also trotz meiner Unfehlbarkeit dazu kommen dass ich falsch liege

www.richard-thiel.de | Müssen Websiten überall gleich ausschauen?
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 07.11.2010, 22:46
Benutzerbild von LUEK!
... muss IE zerstören ...
XHTMLforum-Mitglied
 
Registriert seit: 23.01.2008
Ort: NRW
Beiträge: 200
LUEK! befindet sich auf einem aufstrebenden Ast
Standard

Hallo,

ich weiß gerade nicht, ob ich das überhaupt richtig verstanden habe. Falls es um die Pfeile geht, die in den Kästen drin sind: das sieht aus wie Dellen im Blech.
__________________
Manchmal fühle ich mich von WordPress ja schon verarscht.
Mit Zitat antworten
  #4 (permalink)  
Alt 07.11.2010, 23:59
Benutzerbild von ArcVieh
//
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 19.12.2006
Ort: Gütersloh
Beiträge: 1.844
ArcVieh sorgt für eine eindrucksvolle AtmosphäreArcVieh sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von Thielo Beitrag anzeigen
muss es überhaupt mit so kleinen kästen sein? würde es nicht gehen die kästen über die gesamte Breite zu legen?

Weil so wie es aktuell ist, ist es zu verwirrend.
Hm, nein. Finde ich auch nicht wirklich optimal, dann könnte ich es bei dem normal formatierten Fließtext lassen.
Es sollen schon einzelne kompakte Texte sein, wo das Auge nicht weit *wandern* muss.

Zitat:
Zitat von LUEK! Beitrag anzeigen
Hallo,

ich weiß gerade nicht, ob ich das überhaupt richtig verstanden habe. Falls es um die Pfeile geht, die in den Kästen drin sind: das sieht aus wie Dellen im Blech.
Die Idee ist, den Benutzer Schritt für Schritt durch die Seite durchzulotzen. Die Pfeile sollen die Richtung weisen. Meine neuste Veränderung ist, dass ich das ganze Spiegelverkehrt mache.

join us spiegelverkehrt.png

Es ist so etwas angenehmer. Aber wie Thielo schon andeutete, sind einige Kästchen zu klein. Werde mal die mittigen beiden kleinen versuchen zusammenzufassen bzw. eines wegzulassen.
Denn es wird erst bei den beiden "verwirrend", meiner Meinung nach.


Aber: Dellen im Blech? Sind die Pfeile so unsauber gearbeitet? Dellen haben für mich immer etwas ungerades...
Ich grübel über die Pfeile noch mal..
__________________
CSS-FAQ beantwortet die meisten Fragen | Retro coding gegen Divitis | Code validieren & posten für Hilfe
Mit Zitat antworten
  #5 (permalink)  
Alt 08.11.2010, 00:05
Benutzerbild von LUEK!
... muss IE zerstören ...
XHTMLforum-Mitglied
 
Registriert seit: 23.01.2008
Ort: NRW
Beiträge: 200
LUEK! befindet sich auf einem aufstrebenden Ast
Standard

Für mich sind das keine Pfeile. Mal ohne Mist jetzt, das mag sich bescheuert anhören, aber das sieht aus wie Dellen. Entweder ist mein Blick brutal schief, aber du hast Dellen designt. Ich bin ja für die zweite Möglichkeit.

Ich würde es evtl. besser finden, wenn der "alte" Kasten jeweils einen Pfeil hat, der in den "neuen" Kasten übergreift. Also eine deutliche Hervorherbung der Pfeile.
__________________
Manchmal fühle ich mich von WordPress ja schon verarscht.
Mit Zitat antworten
  #6 (permalink)  
Alt 08.11.2010, 16:42
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 29.07.2005
Beiträge: 1.073
xm22 befindet sich auf einem aufstrebenden Ast
Standard

Versuch doch mal, die umsandeten Kästen wegzulassen und stattdessen mit richtigen Pfeilen von einem Text zum nächsten zu zeigen. Ich dachte (ohne Deinen Text gelesen zu haben), man kann vielleicht die Kästen dahin ziehen, wo die Dellen hinzeigen - Wozu auch immer
__________________
... Meine Meinung
Mit Zitat antworten
  #7 (permalink)  
Alt 08.11.2010, 17:22
Benutzerbild von derHund
durstiges Tier
XHTMLforum-Mitglied
 
Registriert seit: 16.09.2004
Beiträge: 869
derHund befindet sich auf einem aufstrebenden Ast
Standard

Durch die natürliche Leserichtung (oben > unten, link > rechts) hast du doch schon deine "optische Führung", dabei würd ich es belassen - sollte für deine Zielgruppe ausreichend einfach erfassbar sein. Außerdem bist du dann nicht gezwungen, sämtliche Informationen hierarchisch zu ordnen.

Ich würde die Container noch jeweils auf der selben Höhe anfangen lassen (sieht schicker aus) und die Spalten der zweiten Zeile vertauschen, erscheint mir sinniger, eure Erwartungen vor Infos zur Orga zu platzieren.
__________________
Die Zeit hat ihre Kinder längst gefressen: hund (back in black) | ??? | ??? | ...
Mit Zitat antworten
  #8 (permalink)  
Alt 08.11.2010, 18:09
Benutzerbild von ArcVieh
//
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 19.12.2006
Ort: Gütersloh
Beiträge: 1.844
ArcVieh sorgt für eine eindrucksvolle AtmosphäreArcVieh sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von derHund Beitrag anzeigen
Durch die natürliche Leserichtung (oben > unten, link > rechts) hast du doch schon deine "optische Führung", dabei würd ich es belassen - sollte für deine Zielgruppe ausreichend einfach erfassbar sein. Außerdem bist du dann nicht gezwungen, sämtliche Informationen hierarchisch zu ordnen.
Genau, wie in meinem Eingangspost erwähnt, habe ich versucht diese natürliche Leserichtung aufzugreifen.

Zitat:
Ich würde die Container noch jeweils auf der selben Höhe anfangen lassen (sieht schicker aus) und die Spalten der zweiten Zeile vertauschen, erscheint mir sinniger, eure Erwartungen vor Infos zur Orga zu platzieren.
Na, das Problem ist, dass einige "länger" sind.
Aber ich denke, ich werde das folgendermaßen lösen: links => rechts mit herausstechenden Pfeil vom linken auf den rechten Kasten und schauen, wie es dann ausschaut.
__________________
CSS-FAQ beantwortet die meisten Fragen | Retro coding gegen Divitis | Code validieren & posten für Hilfe
Mit Zitat antworten
  #9 (permalink)  
Alt 08.11.2010, 23:34
{ display: random;}
XHTMLforum-Kenner
 
Registriert seit: 08.09.2004
Ort: Stuttgart
Beiträge: 5.034
andir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblick
Standard

Davon abgesehen ist die Seite zu clean.
Sieht so WoW aus?? Nie. Der WoW-Style, wenigstens das Feeling, der mood, fehlt, muss aber rein für eine Anwerbeseite - zwingend!
Vielleicht sieht es so im Hinterzimmer eines Aktbosses aus, der dort von fähigen Ärzten wieder für den nächsten RAID aufgemöbelt wird...

Die Idee an sich finde ich gut, nur fürs Thema unangemessen.
__________________
Grüsse Andreas- auch mal wieder da...

Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams)
Wiedergelesen: > hier und hier

[Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 09.11.2010, 00:35
Benutzerbild von emti
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 03.06.2008
Ort: 23816 Groß Niendorf
Beiträge: 700
emti sorgt für eine eindrucksvolle Atmosphäreemti sorgt für eine eindrucksvolle Atmosphäre
Standard

@andir
Spielt da wer WoW?
__________________
Gruß Michael
SketchAtomTransmit
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus



Alle Zeitangaben in WEZ +2. Es ist jetzt 07:26 Uhr.