Code meets Design – Ewald Natter über die Arbeit am neuen FastBill Interface

Christian Häfner 20. Juli 2012 5
Code meets Design – Ewald Natter über die Arbeit am neuen FastBill Interface

Jedes Produktdesign ist nur so gut, wie der programmierte Code, der es darstellt. Da wir beim neuen FastBill keine Kompromisse eingehen wollen, haben wir uns für die Umsetzung der Designs von Zeughaus den Experten Ewald „Magic“ Natter von Freelenz.at ins Boot geholt. Ewald ist maßgeblich an der Umsetzung der Designs beteiligt. In einem spannenden Interview hat er uns verraten, was ihn am neuen FastBill begeistert und wo die größten Herausforderungen liegen.FastBill Interface

Hallo Ewald, stell dich doch kurz vor. Welchen fachlichen Schwerpunkt bringst du mit?

Ja hallo, mein Name ist Ewald Natter, bin aus Österreich und arbeite seit gut 5 Jahren als freiberuflicher Webentwickler für Agenturpartner in der Umgebung sowie auch für direkte Kundschaft im In- und Ausland.

Was den fachlichen Schwerpunkt betrifft, so würde ich mich irgendwo an der Schnittstelle zwischen Grafiker und Programmierer verorten. Mein Herz schlägt für Design und Ästhetik, mein Hirn schreibt gerne Source-Code. So hab ich in letzter Zeit hauptsächlich Frontend-Entwicklung gemacht und unter anderem zwischen Kreativ- und Technikabteilungen von Agenturen vermittelt. Oft mangelt es da eben in der Kommunikation und am gegenseitigen Verständnis – und in der Folge auch an der Qualität des Outputs.

Du bist an der Umsetzung des neuen FastBill-Frontends maßgeblich beteiligt. Was sind die Besonderheiten und welche modernen Ansätze werden verfolgt?

Die Besonderheit ergab sich für mich zunächst aus dem erfrischend neuen Ansatz, den Zeughaus in punkto Benutzerführung und Interface-Design gewählt hat. Das ist großes Kino und fühlt sich bereits bei der Umsetzung grandios an: Großzügige Formularelemente, tolle Farben und viel Liebe zum Detail. Einfach dieses Look&Feel, das man zwar irgendwie aus der Topliga im App Store kennt, bei Webanwendungen aber leider eher selten antrifft.

Umsetzungstechnisch hat die Moderne insofern Einzug gehalten, als dass auf den Support veralteter Browser (IE <8 ) bewusst verzichtet wurde. Etwa beim WYSIWYG-Editor, der Browser History API oder beim Upload setzen wir ganz auf HTML5. Teilweise stehen jedoch auch Fallbacklösungen bereit.

Kannst du uns ein paar Beispiele für interessante neue Interaktionselemente nennen und wie diese gelöst wurden?

FastBill Interface

Eingabefeld mit Autovervollständigung

Nur wenige der Interaktionselemente sind für sich wirklich neu, es ist vermutlich die Kombination sowie der behutsame und gekonnte Einsatz derselben, die das Ganze interessant und im täglichen Einsatz hoffentlich auch effizient machen werden.

FastBill Interface

Interaktive Empfängerauswahl

So wurde beispielsweise eine Selectbox mit einem herkömmlichen Eingabefeld mit Autovervollständigung zu einem Element verschmolzen.

Ein Highlight ist sicher auch das Dashboard, dessen Konfiguration auf ziemlich elegante Weise gelöst wurde. Auch eine interaktive Empfängerauswahl für Nachrichten (ähnlich der von Facebook) kommt zum Einsatz sowie kontextsensitive Formularelemente. Insgesamt haben wir eben so ziemlich den gesamten Baukasten, den etwa jQuery UI und diverse Plugins zur Verfügung stellen, genützt und teilweise auch adaptiert.

Wo lagen die größten Herausforderungen bei der Umsetzung des Interface-Konzepts und der Designvorlagen von Zeughaus?

Die größte Herausforderung besteht bei Projekten wie diesen eigentlich stets darin, sowohl Markup als auch Stylesheets und Javascript-Code auf maximale Wiederverwendbarkeit und Modularität bei minimaler Redundanz zu trimmen. Mindestens eine Person sollte dabei immer den Gesamtüberblick haben und auch behalten können, sonst wird mit zunehmendem Fortschritt und steigender Komplexität irgendwann nur noch blindlings mit „!important“ und üblen Hacks herumgeworfen. Oder es entstehen Mehrfachbindings und Inkonsistenzen. Oder es gehen beim Bugfixing Dinge an anderer Stelle kaputt.

Läuft die Eleganz und Schlichtheit der Code-Basis erst mal aus dem Ruder, wird die Weiterentwicklung schwierig und mühsam. Da gilt es, die Dinge über den gesamten Projektverlauf zusammenzuhalten. Und immer wieder Refactoring zu betreiben.

Stichwort „Responsive Design“ – Was ist schon enthalten, was ist künftig noch geplant?

Mit Ausnahme weniger Bereiche haben wir es geschafft, das Layout fluid und flexibel umzusetzen. Das heißt, User mit großen Bildschirmen und entsprechend viel Platz werden diesen beim neuen FastBill auch nützen können.

In die andere Richtung werden wir zwar zunächst keine sehr effiziente Bedienbarkeit über ein Smartphone gewährleisten können. Aber etwa für Tablets verschiedener Größen und Auflösungen ist eine entsprechende Responsiveness bereits jetzt gegeben. Hier ist in Zukunft geplant, auch noch Touchgesten zu verarbeiten und gezielt einzusetzen.

Wir danken für das Interview! Nächste Woche gehen wir auf einige konkrete Wünsche unserer Kunden aus den letzten Monaten ein und verraten, was davon schon sehr bald in Erfüllung gehen wird. Bis dahin gilt weiterhin: Geduldig bleiben und hier eintragen um beim Beta-Test mit dabei zu sein.

Buchhaltung automatisieren und Zeit sparen

Lerne in 4 einfachen Schritten, wie deine Finanzen automatisierst und nie mehr Kopfschmerzen wegen der Buchhaltung haben musst.

5 Kommentare

  • […] Antwort: Das Suchen wird einfacher! Über eine Mischung aus Dropdown und Autovervollständigung wird die Suche nach Artikeln künftig schneller und einfacher (Beispiel). […]
  • Äusserst interessantes Interview. Vielen Dank dafür ...
  • Hallo Herr Häfner,

    besten Dank für Ihre Antwort und viel Erfolg für die weitere Umsetzung.

    Schöne Grüße
    Wolfgang Schneider
  • Hallo Herr Schneider,
    vielen Dank für das Feedback. Gerne gehe ich auf ihre Punkte ein:

    1. Die neue Version wird für Tablets optimiert sein (dauert noch ein paar Wochen).
    2. Das Thema Textbausteine ist sicher sinnvoll, wird aber nicht Teil des nächsten Release sein. Wir prüfen das genauer und werden es in der weiteren Entwicklung berücksichtigen. So viel sei aber schon gesagt: Es wird einen neuen Vorlageneditor geben, der deutlich flexibler in der Gestaltung ist.
    3. Eine Seitennummerierung ist überhalb der Postentabelle auf jeder Seite zu finden.
    4. Bei größerer Textmenge ist das Layout tatsächlich nicht immer optimal. Für den Freitext ist der Bereich oberhalb der Postentabelle gedacht. Aber auch hier wird sich mit dem neuen FastBill einiges ändern. Bis dahin hoffe ich auf Ihre Geduld.

    Freundliche Grüße
    Christian Häfner
  • Liebes Entwickler-Team,

    ich finde die Layoutausschnitte sehr ansprechend und die meisten Nutzer werden sicher begeistert sein. Allerding frage ich mich die ganze Zeit, ob denn auch wichtige Überarbeitungen in der Funktionalität und Benutzerfreundlichkeit berücksichtigt werden. Auch kann ich eine entsprechende Responsiveness auf Tablets (Android 4.0) nicht bestätigen. Dies wäre für viele Anwender im Außendienst sicher sehr wichtig.

    Auf meine Frage ob es denn die selektive Möglichkeit gibt, betriebswirtschaftliche Auswertungen der Umsätze nach Kunden und/oder Dienleistung und/oder Fremdleistung zusammen/getrennt aufzulisten Monat/Jahr erhielt ich die Antwort, dass ich der Erste sei, der danach fragt. ... ??... so unterstelle ich mal das dem so ist, könnte mir aber vorstellen, dass viele Nutzer dankbar für diese Auswertungsfunktion wären. Auch, wenn sie diese Funktion komischer Weise noch garnicht vermisst haben.

    Außerdem wünsche ich mir die Erstellung und Auswahlmöglichkeit von Textbausteinen für Angebote, Aufträge/Auftragsbestätigungen und Rechnungen. Auch, dass diese logisch in das Folgedokument mit übernommen werden.
    Dies müsste sich dann im Bezug auch in dem Fenster "Dokument per E-Mail versenden" wiederfinden. Im Moment ist es ja noch so, dass wenn ich z.B. ein Angebot geschrieben habe und versenden möchte den Text vorfinde:
    ...........................................................................
    Betreff: Ihre Rechnung vom 25.07.2012 für ,
    Text: Sehr geehrte Damen und Herren,
    hiermit erhalten Sie die aktuelle Rechnung 00000 über Euro0.000,00.
    ...........................................................................
    Die Vorgangsnummer und der Betrag stimmt aber statt vom Angebot, ist von einer Rechnung die Rede..
    So etwas muss geändert werden. Aber vielleicht habe ich ja auch etwas übersehen oder noch nicht richtig verstanden.

    Zu besseren Orientierung für meine Kunden wünsche ich mir eine durchgängige Seitennummerierung und Erscheinung der Vorgangsnummer und Kundennummer bei mehrseitigen Rechnungen.

    Da wir keine Einzelartikel (1Kilo Tomaten, 20 CD hüllen usw.) verkaufen sondern vorrangig Dienstleistungen, müssen diese eindeutig und Jobbezogen beschrieben werden. Hier habe ich manchmal den Eindruck, dass Fastbill mit größeren Textmengen Probleme hat und etwas holprig läuft. Manchmal erhalten wir bei einem mehrseitigen Dokument auf der ersten Seite ab der Bezeichnung "Angebots-, Auftrag,- oder Rechnungsposten" eine leere weiße Fläche und die eigentliche Aufführung beginnt ab Seite zwei. Hatte mal Text entfernt und dann funktionierte es mit der ersten Seite.

    So, nun möchte ich aber nicht zuviel....
    aber das ist mir nach 3 Monaten Fastbill aufgefallen
    bzw. sind Verbesserungen die ich mir wünsche.

    Mit besten Grüßen

    Wolfgang Schneider

Was denkst du?

Buchhaltung automatisieren
und Zeit sparen

Lerne in 4 einfachen Schritten, wie deine Finanzen automatisierst und nie mehr Kopfschmerzen wegen der Buchhaltung haben musst.

Überzeuge dich selbst

Automatischer Beleg-AssistentBankingBusiness Apps synchronisierenBelege erfassenRechnungen schreiben

Kostenlose Tools

Mehrwertsteuer RechnerKostenlose RechnungsvorlageFinanz-Lexikon

Beliebte Beiträge

So funktioniert die EÜRNebenberuflich Selbständig machenSo kommst du zum Gewerbeschein

Mehr als 70.000 Kunden nutzen schon FastBill

Jetzt kostenlos testen!