Struktur der Startseite und Navigation

[MZ per X]

Hallo zusammen,

Hi JoJo, schön, dass Du wieder mit von der Partie bist.

ich habe bei Dropbox mal einen ersten Wurf für die Struktur und das Design der Startseite hochgeladen (Oregami Startseite MockUp.jpg). Ist weit davon entfernt perfekt zu sein, taugt aber als Diskussionsgrundlage.

Großartig! Wenn man das dann mal so visuell vor sich hat, gibt das ein ganz warmes Gefühl. Wir werden dieses Ding online kriegen, irgendwann.

Ich hatte zwar oben geschrieben, ich würde mich aus Designsachen raushalten, aber was soll's...

Beim Logo ist das E anders eingefärbt, um Verwechslungen mit Origami zu vermeiden

Eine wirklich gute Idee!

- Unter dem Logo gibt es nur (habe es erstmal auf englisch gemacht, weiß nicht mehr, ob es zur Sprache schon eine Diskussion/Entscheidung gab): "About" (für FAQ, Historie, Kontakt etc.) und "Login" (für registrierte Mitglieder/Admins). Nach dem Login gibt es dann an selber Stelle auch zusätzlich noch einen Button um Spiele hinzuzufügen/zu bearbeiten

Statt dem Login-Button gleich die beiden Eingabefelder platzieren? Das erspart dem User einen Klick. Nach dem Login sollte dort noch der Link zum persönlichen Bereich zu finden sein.

Dadrunter wird ein Spiel "groß" präsentiert Welche Kriterien zur Anzeige des Spiels herangezogen werden (Popularität, Zufall, Auswahl durch Admin...) müsste man noch entscheiden. Genaus könnte man hier natürlich verschiedene Spiele "Durchscrollen" lassen (z.B. ähnlich zu steampowered.com) -> Generell benötigt man dafür natürlich hochauflösend Bilder in guter Qualität, fraglich, ob man das bei jedem Titel sicherstellen kann und wie hoch hierbei u.U. der Aufwand ist

Auch das gefällt mir. Wir können ja für bestimmte User, die grafisch begabt sind oder so, eine Sonderrolle vergeben. Diese Leute dürfen dann solche Grafiken in die Datenbank einstellen, die nach Moderation auf der Startseite erscheinen.

Unter dem "großen" Spiel gibt es dann verschiedene Reiter mit bspw. den "10 meistaufgerufenen Spielen" oder "10 am wenigsten aufgerufenen Spielen"...

Das ist natürlich Geschmackssache. Mir wäre es lieber, wenn dort die 10 neuesten Spiele in der Datenbank stünden, die neuesten Screenshots o.Ä.. Aber die Reiter an sich gefallen mir auch.

Über "Mehr..." kommt man dann jeweils auf eine neue Seite auf der jeweils eine bestimmte Anzahl Spiele auf mehreren Seiten zum jeweiligen Thema aufgelistet sind.

Ich würde auch noch einen "Random Game"-Button favorisieren, und/oder einen Link zu Datenbank-Statistiken.

Was meint ihr? Bin gespannt auf Rückmeldungen

So, das waren ein paar schnelle, leicht unqualifizierte Bemerkungen von mir. An Deinem Entwurf gefällt mir vor allem die relative Klarheit / Schlichtheit, in meinen Augen etwas sehr Wichtiges, wenn man an unsere Zielgruppe denkt. Das drückt sich vor allem in der Farbwahl aus, da neben dem bunten Bild nur die Farbe Orange noch auftaucht. Also für einen ersten Mockup gefällt mir das schon richtig gut.

[gene]

Ich war eher!

[MZ per X]

Das wird nicht immer so bleiben, mein Freund!

[jojoschi]

gene hat geschrieben
Die Breite deines Entwurfs ist 800 Pixel - das mag früher mal "Mode" gewesen sein, aber heute finde ich das "Platzverschwendung"! Wir könnten die Breite besser ausnutzen.

Es gibt generell zwei Arten von Layouts:
- flexible Breite, siehe z.B. amazon, die Seite passt sich an die jeweilige Auflösung an. Man kann den Effekt nachstellen indem man das Browserfenster in der Breite verkleinert. Der Inhalt wird dann weiter zusammengeschoben. Irgendwann erscheint dann auch eine horizontale Scroll-Leiste. Vorteil: Passt sich an verschiedene Bildschirmauflösungen an (auch Tablets). Wirkt dann allerdings bei sehr hohen Auflösungen (z.B. ab 27 Zoll) etwas merkwürdig, da über den ganzen Bildschirm verteilt.
- feste Breite, siehe z.B. spiegel.de, der Inhalt ist in der linksbündig. Eine Verkleinerung verändert nicht den Inhalt. Vorteil: Sieht immer gleich aus, egal mit welcher Auflösung. Dafür nutzt man natürlich auch bei höheren Auflösungen den Platz nicht aus.

Amazon ist jetzt tatsächlich eine der einzigen "großen" Seiten, die noch ein variables Layout nutzen (oder?). Ansonsten nutzen die meisten Seiten ein fixes, entweder linksbündig oder häufig auch zentriert.

Mir persönlich wäre auch eine nutzbare Darstellung auf Tablets wichtig. Daher sollten wir also nicht zu sehr in die Breite gehen. Das iPad hat - glaube ich - 1024x768. Bei anderen Tablets weiß ich es nicht.

gene hat geschrieben
Link zum "Game Browser", in dem man nach verschiedensten Kriterien die Datenbank "durchstöbern" kann

Wie soll der GameBrowser denn aussehen: habe ich verschiedene Drop-Downs und kann mir dann meine Auswahl zusammenstellen?
z.B. "Jahr" "Plattform" "Genre"?

gene hat geschrieben
letzte Updates

Würde ich mit auf einen Reiter nehmen.

gene hat geschrieben
Link zum "Spiel hinzufügen"

Wird unter dem Logo eingeblendet wenn man sich eingeloggt hat.

gene hat geschrieben
Link zu einer News-Seite, Blog o.Ä.

Ist sicher nochmal ein Thema für einen separaten Thread, aber ich wäre dafür eine Facebook-Seite zu erstellen und diese zur Kommunikation etc. zu nutzen. Dort könnte man entweder direkt "Blog"-Einträge posten oder auf ein separates Blog verlinken. Die Leute können dort auch einfach kommentieren und Einträge "liken". Diese Einträge auf der FB-Seite könnte man dann auch (wie weiß ich nicht, habe es aber schonmal gesehen) auf unserer Startseite einbinden. Vielleicht kann man dazu die "große" Spielegrafik in der Breite kleiner machen und rechts einen Bereich mit den letzten FB-Updates einfügen.

gene hat geschrieben
Impressum / Kontakt

Hätte ich unter "About" gepackt. Sonst in die Fußzeile.

gene hat geschrieben
Link zu einem Forum

s.o.: Ist das nicht doppelt-gemoppelt ? Auf FB hat man schon eine funktionierende Infrastruktur. Braucht man zusätzliche noch ein Forum? Schließlich muss sich jemand um die Foren-Software kümmern, Beiträge moderieren, User freigeben, sperren etc. Außerdem sind viele Foren auch nicht sooo gut besucht. Wenn dann der letzte Beitrag von 2008 ist, macht das auch keinen guten Eindruck. Als Beispiel: GEE. Im Forum ist aktuell auch nicht mehr besonders viel los. Auf der FB-Seite (auf der auch Links zu neuen Blog-Einträgen gepostet werden), dafür eine ganze Menge mehr.
Was bringt uns ein Forum?

gene hat geschrieben
Sprachauswahl

Stimmt. Aber nur wenn auch klingonisch dabei ist

[jojoschi]

MZ per X hat geschriebenStatt dem Login-Button gleich die beiden Eingabefelder platzieren? Das erspart dem User einen Klick. Nach dem Login sollte dort noch der Link zum persönlichen Bereich zu finden sein.

Auch gut. Nach Möglichkeit sollte man auch eine Möglichkeit haben, angemeldet zu bleiben. Dann kann der "LOGIN"-Link durch den Link zum persönlichen Bereich ersetzt werden.

MZ per X hat geschriebenDas ist natürlich Geschmackssache. Mir wäre es lieber, wenn dort die 10 neuesten Spiele in der Datenbank stünden, die neuesten Screenshots o.Ä.. Aber die Reiter an sich gefallen mir auch.

Das könnte man sicherlich auch machen. Vielleicht kann man auch zwei "Reiterreihen" mit jeweils 5 Einträgen übereinander machen. Eine "Reiterreihe" mit den genannten "Updates" und eine mit "Best-Of" (oder so ähnlich).

MZ per X hat geschriebenIch würde auch noch einen "Random Game"-Button favorisieren, und/oder einen Link zu Datenbank-Statistiken.

Die Datenbankstatistiken klingen auch gut, allerdings würde ich den nicht unbedingt auf die Startseite nehmen.Eher unter "About" oder "FAQ".

MZ per X hat geschriebenDas drückt sich vor allem in der Farbwahl aus, da neben dem bunten Bild nur die Farbe Orange noch auftaucht.

Finde ich auch wichtig, es sollte nicht zu bunt werden. Schwarz, weiß, Grautöne und sonst eine Hauptfarbe. Ob das jetzt orange oder eine andere ist, müsste man noch entscheiden, sie sollte auf jeden Fall im Logo auftauchen. Diesbezüglich finde ich auch www.gog.com sehr schön. Die haben zwar zwei Hauptfarben (orange und grün) aber sonst nur grau/schwarz etc.

[gene]

Ich antworte mal ohne "Zitier-Orgie" und versuche, Nichts zu vergessen.

Beim GameBrowser dachte ich (wie der Name es schon vermuten lässt) an so etwas wie das hier bei Mobygames. Sieht schon ganz intelligent aus, ich denke so etwas könnten wir auch gebrauchen! Da kann sich aber jemand mal separat Gedanken drüber machen. Es geht also um einen alternativen Zugang zur Datenbank wenn man nicht gerade einen Suchbegriff parat hat und wenn die angebotenen "Top-Listen" (welches Kriterium auch immer).
Neben der Suche halte ich diesen "GameBrowser" für eine der wichtigsten Funktionen auf unserer Webseite! Wir sollten den also gut durchdenken und offensiv verlinken, auch von der Startseite aus. Und wir sollten einen tollen Namen dafür finden, der anders ist als der Name "Game Browser" bei Mobygames

Zum Gesamt-Layout:
Ich bin auch für eine feste Breite, ja. Eine komplett flexible Breite wie bei Amazon hat schong gewisse Anforderungen an den Inhalt, es muss dan möglichst viel Text sein, der sich auf die komplette Breite verteilen kann. Aber: bei einer festen Breite muss man sich ja für eine (maximale) Pixel-Breite der Seit entscheiden. Und da finde ich 800 Pixel eindeutig zu wenig.
Bei der Umsetzung plädiere ich für ein CSS-Grid-System. Hier mal ein paar allgemeine Links:
http://www.elmastudio.de/tipps-und-tool ... neratoren/
http://matthiasschuetz.com/css-framewor ... hreibungen
http://devsnippets.com/article/complete ... works.html (sehr umfangreich)
Weit verbreitetes Grid-System "906 gs": http://960.gs/
Der Download enthält Templates für Photoshop. Gimp usw. !!

Gris-System mit Anpassung für mobile Geräte:
http://www.elmastudio.de/tipps-und-tool ... optimiert/
Flexibles Grid mit maximaler Breite: http://www.spry-soft.com/grids/grid/?co ... r_width=20

Interessante große Webseiten:
http://www.apache.org/ (komplette Browser-Fenster-Breite, flexible Größe der Textblöcke!)
http://www.ibm.com/us/en/ (auch mal mit großem Browser-Fenster ansehen, also 1600er Breite oder so)

Zum Thema Forum/Diskussion/Facebook:
Ich bin mir nicht sicher, ob wir von unseren Usern verlangen wollen, einen FB-Account zu haben, um mitdiskutieren zu können. Da die Leute sich auf jeden Fall bei uns registrieren müssen, um mitzuarbeiten oder um ihre Spielesammlung einzugeben sollten wir nicht auch noch einen Facebook-Account verlangen. Jede Beteiligung auf unserer Webseite sollte mit unserem eigenen Webseiten-Account funktionieren.

Meiner Meinung nach sollten wir parallel versuchen, die Struktur der "Einzel-Spiel-Anzigeseite" zu entwerfen, denn ich finde, dass sowohl die Startseite als auch die Einzel-Spiel-Seiten einen gemeinsamen "Header" o.Ä. haben sollten, von denen aus man immer die gleiche Navigationsmöglichkeiten hat. Man sollte von einer Einzel-Spiel-Seite z.B. nicht immer zur Startseite wechseln müssen, um die Suche zu erreichen oder andere wichtige Seiten.

[MZ per X]

Ich antworte mal ohne "Zitier-Orgie"...

Ich nicht. Harharhar.

Neben der Suche halte ich diesen "GameBrowser" für eine der wichtigsten Funktionen auf unserer Webseite!

Ich auch! Ich bin ja mit dem GameBrowser von Moby ziemlich vertraut und würde es gut finden, wenn wir unseren anders gestalten könnten. Der MobyBrowser hat nämlich einen entscheidenden Nachteil: Man kann immer nur einmal! Also zB nur alle Spiele des Jahres 1991, und eben nicht des Zeitraums 1990-1992. Oder alle Spiele mit dem Grundgenre Action, und eben nicht mit den Grundgenres Action + Adventure. Ich fände es supertoll, wenn der User unseren Browser mit sovielen Bedingungen füttern könnte, wie er will. Also, um beim obigen Beispiel zu bleiben "Erst-VÖ --> 1990 bis 1992" und "Grundgenre Action UND Adventure". Nur dann wäre er wirklich nutzbar.

Jede Beteiligung auf unserer Webseite sollte mit unserem eigenen Webseiten-Account funktionieren.

Auch hier stimme ich voll zu. Ich würde sogar soweit gehen, dass wir ein eigenes Forensystem programmieren sollten, wie das bei Moby getan wurde. Das wird niemals so gut sein wie professionelle Forensysteme, aber es wäre vollständig integriert und wir könnten alles damit machen, was wir wollen.

[jojoschi]

Beim GameBrowser dachte ich (wie der Name es schon vermuten lässt) an so etwas wie das hier bei Mobygames.

Finde ich gut, würde ich allerdings mit der erweiterten Suche kombinieren. Den Namen finde ich auch nicht so brillant, dass es um "Games" geht, ist eigentlich logisch. Aber nur "Browser" kann auch zu Verwirrung führen...

Bei der Umsetzung plädiere ich für ein CSS-Grid-System. Hier mal ein paar allgemeine Links:

Da merkt man, dass ich schon länger aus dem Thema raus bin: von CSS-Grids habe ich noch nie was gehört
Werde ich mir mal genauer angucken.

Jede Beteiligung auf unserer Webseite sollte mit unserem eigenen Webseiten-Account funktionieren.

Für die Kommentare direkt zu einzelnen Spielen gebe ich Dir da Recht. Die sollten meiner Meinung nach sowieso direkt unter dem jeweiligen Spiel angezeigt werden (also wie aktuell auch bei kultpower).
Wer tatsächlich mitarbeiten will für den ist dann dieses Forum hier gedacht.
Ich würde kein "Extra"-Forum ins Leben rufen.

Man sollte von einer Einzel-Spiel-Seite z.B. nicht immer zur Startseite wechseln müssen, um die Suche zu erreichen oder andere wichtige Seiten.

Ja, der "Header" sollte immer derselbe sein.

Ich würde sogar soweit gehen, dass wir ein eigenes Forensystem programmieren sollten

Das ist aber nochmal sehr großer zusätzlicher Aufwand. Irgendwer muss sowas dann auch pflegen/updaten etc.

Ich würde dann (hoffentlich) in den nächsten Tagen nochmal ein aktualisiertes Mock-Up erstellen.

[jojoschi]

Hi zusammen,

aus den "nächsten Tagen" sind dann doch "die nächsten Wochen" geworden

In der Dropbox findet ihr das aktualisierte Mock-Up.
Neuerungen sind u.A.:
- die Breite des Hauptbereichs ist 960px
- kleineres Spiele-Teaser-Bild (dafür zwei Spiele nebeneinander)
- Den Login-Link habe ich größer gestaltet
- Link zum "Browser" und zum Hinzufügen von Spielen hinzugefügt
- Links zu News, Blog, Forum etc.
- Impressum/Kontakt hinzugefügt
- Sprachauswahl hinzugefügt
- Link zu Statistiken hinzugefügt

Zum About-Button:
- die Informationen könnte man auch auf der Facebook-Page unterbringen.
Zum Login-Felder direkt auf der Oberfläche platzieren:
- Pro: Weniger Klicks für den User
- Contra: Nimmt Platz weg und die meisten User bleiben (per Cookies) wahrscheinlich sowieso immer angemeldet

Freue mich natürlich wieder über Feedback.

Ansonsten schonmal schöne Feiertage
Gruß,
Johannes

[gene]

Hallo Johannes,
schön, dass du am Ball bleibst

Hier meine ersten Eindrücke:

• die neue Breite von 960 Pixeln gefällt mir besser!
• die Verwendung von "Tabs" zur Anzeige unterschiedlicher Listen an gleicher Stelle finde ich nach wie vor sinnvoll
• die "Tabs" sollten optisch mehr sein als einfach gefärbte Kästchen - meistens sind die so wie "Karteikarten" gestaltet, das macht einen besseren optischen Eindruck finde ich. Kann man natürlich auch irgendwann später gestalten, aber fürs Gesamtbild finde ich es jetzt schon wichtig
• wir sollten die Verwendung der Tabs aber auch nicht übertreiben - auf der Startseite sollten wir sehr wohl bestimmte Inhalte fest/komplett sichtbar machen.
• der Link zu "Advanced Search" ist leider verschwunden
• wofür ist der große weiße Bereich oben? Verschenkter Platz!
• die grafische, große und auffällige Darstellung von zwei ausgewählten Spielen finde ich gut - aber ich finde jeweils den verdeckten Platz durch die weiße Text-Box zu groß. Bei buch.de gibt es auch so einen grafischen Bereich auf der Startseite, aber der Link zum Draufklicken ist immer rechts unten in der Ecke - sieht nett aus! Siehe Bild:
  buch_de.png

  (294.85 KiB) Downloaded 1016 times
• Sprach-Wahl und Twitter/Facebook sind gut so
• Die Menüzeile/Hauptnavigation oben könnten wir auch zweizeilig gestalten - wenn man einen Punkt ausgewählt hat, kommt in der zweiten Zeile dann die "Unter-Auswahl" für diesen Bereich.
• Der "About"-Bereich sollte nicht auf Facebook "verschwinden". Ich finde den bei uns sehr wichtig, da bei uns ja ein paar Dinge anders laufen als beim Rest der Welt (Verein, Offen Lizenzen usw.). Könnte ich mir als eigenen Punkt in der Haupt-Navigation vorstellen mit entsprechenden Unterbereichen.
• mir fehlt so etwas wie "letzte Updates" oder "neueste Spiele" oder "aktivste Mitglieder". Der Community-Faktor sollte nicht unterschätzt werden.

Generell fände ich ein Design mit "weißem" Hintergrund fände ich persönlich eine tolle Sache. Seiten wie Amazon oder ebay schaffen es trotz viel weißer Farbe sehr gut, durch unscheinbare "Boxen" und Trennlinien den Inhalt klar zu strukturieren. Und mit dem Weiß wirkt es dann meiner Meinung nach sehr elegant!

Ich würde es außerdem gut finden, wenn wir nochmal einen Schritt zurückgehen und diese Fragen ausführlich beantworten:

• Welche Inhalte müssen auf der Startseite zu sehen sein?
• Welche Struktur / Sitemap hat unsere Seite generell? Bereiche und Unterbereiche?

Nur durch Antworten darauf können wir vernünftig die Startseite strukturieren.

Soweit erstmal, ist jetzt spät genug