16.03.2009: Usability gone wrong: DB-Website

Die neue Website der Bahn: Kurz mal ein paar Navigationswege, wie man bei der neuen, so superduper WebZwoNulligen (oder auch nur NULLigen) Website der Deutschen Bahn a) zum "Verkaufsstellenfinder", b) zur "Bahnhofssuche" und c) zur Auskunft darüber, wieviel es kostet, wenn man seine Karte im Zug lösen muss, weil kein Automat in der Nähe ist, der Fahrkarten für ICs und ICEs auch mit Barzahlung ausgibt (und das "Reisezentrum" um die Uhrzeit noch zu hat):

a) Wo finde ich die Öffnungszeiten des "Reisezentrums" in Karlsruhe-Durlach Bahnhof - also im Klartext: Wann macht die Schalterhalle frühmorgens auf?

  1. bahn.de: Menüpunkt "Services"
  2. Services: Untermenü "Während der Reise" > Menüpunkt "Deutschlands Bahnhöfe"
  3. Deutschlands Bahnhöfe: Button "Zum Bahnhofsportal" (öffnet sich in einem neuen Fenster - warum auch immer)
  4. Subsite "Bahnhöfe in Deutschland" (bahnhof.de): Menüpunkt "Bahnhofssuche Deutschland"
  5. Bahnhofssuche Deutschland: Menüpunkt "Verkaufsstellenfinder"
  6. Verkaufsstellenfinder: Am Ende der Seite, Link "Anwendung öffnen" (öffnet natürlich wieder in einem neuen Fenster .. wirklich sehr überzeugend ;->)
  7. Subsite "DB Verkaufsstellensuche": Eingabefeld ohne Namen (das einzige Eingabefeld auf der ganzen Seite) => Karlsruhe-Durlach Bahnhof
  8. Fehlermeldung: Ihre Eingabe ist nicht eindeutig (Wie bitte?!? Eindeutiger gehts kaum noch!) => Durlach Bahnhof, Karlsruhe
  9. Ergebnis: Reisezentrum Karlsruhe-Durlach (komisch, jetzt heißts auf einmal wieder Karlsruhe-Durlach???) - macht erst um 7 Uhr morgens auf, auch gut.

Insgesamt also 8 Schritte, um bis ans Ziel zu kommen, auf 3 verschiedenen Websites. Und ich habe nur durchgehalten, weil ich a) diese Info wirklich dringend brauche (morgen früh geht's Richtung NRW) und b) weiß, dass die DB-Website auch schon vorher wichtige Informationen an den unmöglichsten Stellen vergraben hat. Allerdings habe ich vor der Umstellung Ende 2008 nur 5 Schritte (inklusive Ergebnis) gebraucht, um an mein Ziel zu kommen. Wenn es dann 2009 oder 2010 noch nen Relaunch gibt, werde ich die Info dann erst nach 12 Einzelschritten finden - wenn überhaupt?

Aber auf zum nächsten Stück Information:

b) also muss ich meine Karte wohl am Automaten ziehen - schauen wir also mal, wie man zur Bahnhofssuche findet. Wir wiederholen dazu entweder Schritt 1 bis 4 von gerade eben, oder wechseln gleich auf die nun bekannte Subsite bahnhof.de:

  1. bahnhof.de: Menüpunkt "Bahnhofssuche Deutschland"
  2. Bahnhofssuche Deutschland: Menüpunkt "Bahnhofssuche"
  3. Bahnhofssuche: Eingabefeld "Bahnhofsname" => Karlsruhe-Durlach
  4. Liste: Karlsruhe-Durlach (oh, wow - diesmal keine Fehlermeldung?)
  5. Ergebnis: Bringt mich nicht weiter (Fahrkartenverkauf: siehe Verkaufsstellenfinder - da könnte man doch einfach einen dümmlichen kleinen, aber direkten Hyperlink darauf setzen!), außerdem stimmen die gelieferten Infos zur Hälfte nicht, z.B. ÖPNV: Nein - falsch! In 2 Gehminuten Entfernung kommt man zur Staßenbahn, Linie 1 und 2!

Immerhin: nur noch 4 Schritte - allerdings kannte ich bahnhof.de vorher gar nicht, ergo würde Otto-Normal-Verbraucher wohl auch die anderen 4 Schritte vorher durcharbeiten müssen - insgesamt also ebenfalls 8 Schritte.

c) Nun muss ich die doofe Karte wohl oder übel in der Bahn ziehen; also im IC oder ICE. Nur das zu finden, war nicht wirklich einfach. Nach fünf Versuchen ging es dann mit dem sehr generischen Schlüsselwort "Fahrkarte" => "7 Wege zur Fahrkarte". Und tatsächlich: Die gewünschte Info ist - wie üblich - ganz am Ende zu finden:

7. Fahrkarten im Zug

Wenn Sie es besonders eilig haben, können Sie in den Fernzügen der Bahn ihre Fahrkarten zum Bordpreis kaufen, der etwas höher ist als der reguläre Preis beim Kauf vor Fahrtantritt. Bezahlen können Sie entweder bar oder per Kreditkarte. Einige Sonderangebote sind dort allerdings nicht erhältlich. Wichtig: Bei Zahlungsbeträgen ab 50,- Euro ist neben der Kreditkarte ein amtlicher Lichtbildausweis (Personalausweis oder Reisepass) oder alternativ die BahnCard vorzulegen.

Zu guter Letzt: In Nahverkehrszügen und in der S-Bahn müssen Sie Ihre Fahrkarte auf jeden Fall vor der Abfahrt gelöst haben.

Ach ja .. letzteres habe ich schon länger rausgefunden. Diese Info hat mich allerdings 50 Euro gekostet, weil es zu diesem Zeitpunkt nirgendswo fein plakatiert worden ist (heute auch noch nicht der Fall, aber naja .. der Fahrgast muss das doch selber wissen ;->).

13.03.2009: Analyse: GNOME Web Photographer

Kurze Analyse des GNOME Web Photographer (wird u.a. in Shutter verwendet, um Screenshots von Webseiten zu erstellen):

Aus den Debian-Paketen geht nicht hervor, wie die Webfunktionalität bewerkstelligt wird - allerdings aus den Original-Quelldateien. Gefunden in der Datei README:

GNOME Web Photographer is a tool to generate full-size image
files and thumbnails from HTML files and web pages.

Requirements:
* gtk+
* libpng
* mozilla or firefox trunk build from 2005-07-19 or later

Also mittels des Gecko-Engines.

09.03.2009: Notiz: UI 1.5 und Habari

Hm .. womöglich bekomme ich es hin, NUR mittels Habari meine neue Website aufzuziehen. Immerhin gibt es da diese Sache mit den Page-spezifischen Templates - da läge es doch noch nahe, folgendes zu versuchen:

- Portfolio, Leistungen und Kontakt sind allesamt einzelne Pages, die mittels Page Template ihre verschiedenen Funktionen erfüllen
- Weblog ist diese Seite hier

Mal grübeln, vielleicht bekomme ich das ja irgendwie hin - wär ne tolle Sache ;)

11.02.2009: Meine Arbeitsmittel

Da mir in letzter Zeit des Öfteren die Frage gestellt worden ist, mit was ich denn so arbeite, folgend mal eine ausführliche Aufschlüsselung meiner Werkzeuge :-)

Entwicklungsumgebungen:

  • Workstation: AMD DualCore-System mit 2 GB RAM, 500 GB HDD, Ubuntu 8.04.2 LTS (XFCE), Firefox 3.0, Opera 10, Midori, Konqueror, w3m, links2, VirtualBox 2.1x
    1. Windows Vista Business, IE 7, DebugBar, IETester, SRWare Iron, Firefox 3.1b
    2. Windows 7 Beta Build 7000, IE 8
  • Netbook: Asus EeePC 1000H, Intel Atom-CPU (1,6 GHz), 1 GB RAM, 160 GB HDD, Eeebuntu 2.0 mit Array-Kernel/Windows UMPC-Dualboot (noch), Firefox 3.0, Opera 10, Epiphany (Webkit), w3m, links2, VirtualBox 2.1x
    1. Windows XP SP3, IE 7, SRWare Iron
  • Firefox-Erweiterungen:
    • Firebug - mit den zusätzlichen Erweiterungen Firecookie, FireRainbow, YSlow (nur auf dem Netbook und unter Windows)
    • Web Developer Toolbar
    • Scuttle - zur zentralen Ablage und Zugriff auf meine Bookmarks

    Editoren/IDEs:

    • Linux: Kate, gedit, PDT, mcedit
    • Windows: Notepad++, PDT

    Frameworks:

    • JavaScript: jQuery, mootools
    • CSS: blueprintcss, bluetrip, YAML
    • PHP: eigene Frameworks, CakePHP, Kohana

    Server:

    • Workstation: XAMPP 1.68a (PHP 5.2.6, PHP 4.4.9, MySQL 5.0)
    • Netbook: XAMP 1.7 (PHP 5.2.8, MySQL 5.1)
    • Hoster #1: PHP 5.2.6 (Hardened PHP), MySQL 5.0, Linux/SuSE (Kernel 2.6.22.19)
    • Hoster #2: PHP 5.2.8 (Hardened PHP), MySQL 5.0, Gentoo Linux (Kernel 2.6.26.2)

30.01.2009: Umgestaltungsideen

Mal folgend meine Umgestaltungsideen, frisch aus meinem sog. struct file:

usability idealist 1.5 - struct:

- portfolio (startseite)
	- wird via habari verwaltet
	- tag: portfolio
	- sorting options
		- active, work in progress, offline => using tags
		- sort by date or alphabet (ascending, descending)
	- integration von ScrollTo / LocalScroll
	- bilddateien
		- fullsize: images/portfolio/[slug]/[##].jpg
		- midsize: images/portfolio/[slug]/[##].mid.jpg
		- thumb: images/portfolio/[slug]/[##].small.jpg
		
- leistungen
	- intern mittels IDs versehen, um navigation einblenden zu können
	- unterteilung (ggf. weniger):
		- design
		- programmierung
		- beratung - inhalt ließe sich womöglich in den anderen drei punkten unterbringen
		- webhosting
		
- journal -> habari
	- startseite
		- excerpt des aktuellsten eintrags
		- letzte 5 einträge
		- suche
		- scuttle-pullouts
		- empfehlungen / auszug aus blogroll
	- einzelansicht
		- zentriert, z.b. 80% der seite oder 950 px breite
		- links 2/3 bis 3/4 für inhalt, rechts seitenleiste
		- inhalt:
			- headline
			- post
			- tags
		- seitenleiste
			- evtl. sitewide navigation
			- suche
			- monatsarchiv (mit accordeon-pulldowns, wie auf bisheriger startseite)
			- tag cloud
			- blogroll
	- tag-ansicht
		- wie einzelansicht, evtl. ohne oder reduzierte seitenleiste
	- archivansicht
		- wie tag-ansicht
		
- kontakt
	- mit spam-protection
	- ohne tollen button-effekt beim submit-button
	- annäherung an kontaktformular von fwolf.info
	- ansonsten wie gehabt

--- global site changes:
- rss-/atom-feed in header
- jquery 1.3.1 zum ausprobieren, was noch alles läuft
- unobtrusive javascript, d.h. navigation wird rein technisch an den anfang der seite gelegt, und wenn JS aktiviert ist, ans ende der seite (position: fixed) gesetzt
- seitenaufbau:
	- header
		- enthält logo (annäherung an den header vom blog, damit später nur noch das blog-logo eingeblendet wird, man den übergang aber nicht so radikal mitbekommt => momentan sind die größen der logos unterschiedlich!)
		- link zur startseite
	- navigation
		- ohne JS: top-down
		- mit JS: bottom-up, footer folgt
		- visuell
			- tabauswahl mit leichtem button-effekt oder sonstiger hervorhebung (schatten, umrandung, whatever)
			- unterstrichene links, hover = text-decoration / border: none
			- ausgewähltes tab hat dieselbe farbe wie die subnavigations-leiste
			- ausgewählter menüpunkt ist fett formatiert
	- content / main
		- 80% / 950px breite
	- footer
		- gesamte seitenbreite, links anliegend, höhe z.b. 60px;
		- enthält copyright-daten + "powered by"-informationen - andere farbe als rest, z.b. fast schwarzer / grauschwarzer grünton, evtl. kleiner verlaufseffekt
		- ohne JS: ganz am seitenende
		- mit JS: position: fixed; bottom: 0; left: 0; => navigation wird darüber gesetzt, z.b. bottom: 60px, left: 0;

28.12.2008: Überarbeitung dieses Weblogs

Ich grüble grade, wie ich dieses Weblog sinnvoller benutzbar mache. Folgende Dinge stören mich ganz speziell:

  • Keine Quickbutton-Bar im Habari-Admin-Bereich
  • Die Links sind fast nicht vom restlichen Text unterscheidbar - Lösung: andere Farbe / Hervorhebung
  • keine durchgehende Logik für Links (mal unterstrichen, mal fett, mal andersfarbig) - stammt noch vom ursprünglichen Theme (Blossom-port für Habari)
  • Irgendwo hätte ich gern die neuesten 5 Links aus meinem Scuttle-Bookmark-Server ausgegeben - bei der jetzigen Struktur der Blog-Startseite würde es aber etwas überfüllt aussehen
  • Die Archiv-Funktion dieses Themes ist broken bzw. zeigt nicht alle Einträge des jeweiligen Monats an
  • Listen werden visuell schlecht erkennbar dargestellt (keine Aufzählungszeichen, grau statt schwarz / andere Farbe, etc.)
  • Quotes könnten auch besser visuell dargestellt werden (z.B. "speech bubble" mit Anführungsstricherl-Grafik) und anderer (Text)Farbe

27.12.2008: Bug with content_excerpt in Habari 0.5.2

There seems to be still a bug in Habari 0.5.2, related with Format::summary and $post->content_excerpt. More information about this can be found in the following mailing list thread: http://groups.google.com/group/habari-users/browse_thread/thread/d2565ef99c5b7d51

Basically the characters > and < are not handled properly by this function, thus outputting the error message "Notice: Undefined offset: 1 in system/classes/format.php line XYZ" and as a result of this, not being able to display the rest of the site properly.

I'm currently temporarely using an own function implemented into the custom theme class for compiling an excerpt of the content of the specific post till the next stable version is coming out, hopefully including a fix for this.

22.12.2008: WebKit-Bugs korrigieren mittels CSS-Hacks

Aufgrund eines augenscheinlichen Fehlers in den aktuellen Versionen von Google Chrome und Safari 3.2 (basierend auf WebKit 5.27) bin ich auf der Suche nach möglichen Lösungen über einen entspr. Eintrag auf diese Seite gestoßen:

http://centricle.com/ref/css/filters/ - "Will the browser apply the rule(s)?"

Very very praktisch ;)

Bin zwar kein großer Freund von CSS-Hacks, aber in diesem Fall würde ich mich freuen, nicht unbedingt server-seitig auf Basis des User Agent-Strings filtern zu müssen - speziell wenn der auch mal anders ausfällt (bis dato war zwar der Part "AppleWebKit/(versionsnummer)" immer gleich, aber man weiß ja nie).

Nachtrag:

Hat mich auch nicht viel weiter gebracht - ergo musste ich nun wohl oder übel zum serverseitigen Hack greifen :-/

20.12.2008: Projekte in Planung

Mal eine kleine Liste geplanter oder in Arbeit befindlicher Projekte (somit Lebenszeichen ;)):

  • MailMe 2.0 - Modularer Mail-Sender für unterwegs, d.h. auch auf Handys und PDAs nutzbar; nach Bedarf auch als richtiger Webmail-Client benutztbar (POP3/IMAP)
  • HTML-Mail-Generator - PHP-Script zur Generierung von HTML-Mail-Vorlagen mit Inline Styles, Vorschau-, Test-, Archivfunktionen und was sonst noch alles dazu gehört
  • WHN 2.5 - Endlich mal Weblog-Hosting.Net wieder voll verfügbar, inkl. Bestellsystem, mit eigenem Template-System und mehr
  • Kreuz:Unter 2.0 - To do: Neuer Admin-Bereich, Weblog- und Magazin-Teil, Umkreissuche
  • UI 1.5 - mir gefällt dieser schon etwas ausgelutschte Web 2.0-Touch nimmer so. Außerdem ist beim Portfolio momentan nur Platz für maximal 10 Einträge, danach wirds unübersichtlich. Das will ich seitenweise aufteilen und statt des bisherigen Coda-Sliders vielleicht mal mit LocalScroll oder ScrollTo rumhantieren - natürlich immer noch alles im "Unobtrusive JavaScript"-Stil ;)

13.12.2008: Accessibility gone wrong

Die Bahn hat ihre Website erneuert - und gleichzeitig natürlich auch ihre Bahnauskunft.

Leider hat die ein paar gewaltige Riesnhornochsereien in Sachen "Barrierefreiheit". So spuckt das System völlig falsche Daten aus, sobald man JS deaktiviert. Nur wer sämtliche nicht-relevanten Felder entleert, bekommt ein korrektes Ergebnis.

Da hat jemand wohl den Begriff "unobtrusive Javascript" völlig falsch verstanden, deshalb wiederhole ichs hier kurz noch mal: Unobtrusive Javascript bedeutet, dass man die Anwendung erstmal problemlos OHNE JS benutzen kann, danach werden verschiedene schnicke Zusatzfunktionen mittels JS ergänzt.

Und im Textbrowser sieht die Sache noch viel schlimmer aus - eine "skip-navigation" ist zwar eingebaut, funktioniert aber nicht, da die Sprungmarken falsch gesetzt sind. Getestet mit w3m und links2.

Letzter Punkt: Die "Details einblenden"-Buttons funktionieren teilweise nicht bzw. nur erst dann, wenn man sich sowieso bereits in der Detailansicht befindet und weitere Verbindungen mittels des "Später"- oder "Früher"-Links heraufbeschwört. WTF?!?

Natürlich alles schön im debilen Web ZwoTot-Style mit viel Blingbling, aber wenig SinnSinn gehalten. Argh! X-(

Ich glaub, ich bau mir jetzt meine eigene Bahnauskunft .. genug des Trauerspiels - ist ja total lächerlich geworden ...