Mobile-Dashboard neu gedacht: Wie TimeTac Designs in performante iOS-Erlebnisse übersetzt – Recap zu „Challenges in mobile application development“ von Ludwig Blaikner

Kontext: Ein Produkt, das Zeit in den Mittelpunkt stellt

„Challenges in mobile application development“ von Ludwig Blaikner (TimeTac) führt mitten hinein in die Praxis: Wie verwandelt man ein ambitioniertes Redesign in ein stabiles, schnelles, wartbares Stück Software – ohne die bestehende Codebasis aufzugeben? TimeTac ist ein führender Software-as-a-Service-Anbieter für Zeiterfassung und Arbeitszeitanwesenheit. Die mobilen nativen Clients werden von Tausenden von Beschäftigten in unterschiedlichsten Branchen eingesetzt. Genau deshalb ist die Einstiegserfahrung – das Dashboard – entscheidend.

Die Vorgabe: Ein frischer, moderner Look mit spürbaren UI-Verbesserungen, aber ohne Risiken für Performance, Wartbarkeit und Kompatibilität, insbesondere in Hinblick auf ein iPad-Layout. Blaikners Vortrag macht deutlich, wie Design, UX und Engineering bei TimeTac zusammenwirken – und welche technischen Entscheidungen aus einer reinen UI-Idee ein robustes Produkt machen.

Der Problemraum: Dichte Information, kleiner Bildschirm, große Erwartungen

Das Dashboard ist die meistgesehene Ansicht der mobilen TimeTac-Apps und die erste Berührung beim Login. Sie enthält viel geschäftsrelevante Information und Interaktionen (etwa das Starten oder Stoppen von Tasks). Umso wichtiger ist es, die Nutzer nicht zu überfordern. Blaikner betont: Einfachheit und Klarheit stehen ganz oben. Gleichzeitig müssen mobile Eigenheiten – begrenzter Screen, variable Hardware – berücksichtigt werden. Zwei Ziele prallen damit aufeinander:

• Informationsdichte sinnvoll strukturieren
• Performance und Scrolling-Flüssigkeit sicherstellen

Aus Editorial-Sicht besonders interessant: TimeTac hat Gestaltung und UX nicht als einmalige Maßnahme verstanden, sondern als kontinuierlichen Prozess. Design- und UX-Expertinnen und -Experten recherchieren Trends, entwickeln neue Konzepte und prüfen, wie sie in der App nutzbar werden. Die Engineering-Teams übersetzen diese Entwürfe in funktionierenden Code. Genau an dieser Schnittstelle entfaltet sich die eigentliche „Challenge“.

Architektur des Dashboards: Drei Schlüsselelemente pro Abschnitt

Blaikner beschreibt das Dashboard als Sammlung von Abschnitten, die auf einem bewährten Muster aufbauen:

• Header: Stellt Kontext her – was zeigt dieser Abschnitt?
• Content: Vermittelt die Kerninformation und erlaubt direkte Interaktionen (z. B. Start/Stop eines Tasks).
• Footer: Bietet den Sprung zu tiefergehenden, thematisch verbundenen Daten.

Dieses dreiteilige Prinzip ist für Lesbarkeit und Orientierung zentral. Gleichzeitig hat TimeTac die Personalisierung ausgebaut: Nutzerinnen und Nutzer können Informationen ein- oder ausblenden und die Reihenfolge der Items selbst bestimmen. Das verringert kognitive Last – wer Kontrolle über die Sichtbarkeit und Priorität hat, empfindet komplexe Daten als zugänglicher.

iPad-Layout: Mehr Platz, mehr Spalten

Für iPads hat TimeTac einen eigenen Layoutansatz mit mehreren Spalten entwickelt, um den deutlich größeren Screen besser auszunutzen. Das ist kein reines „Stretching“ der iPhone-Oberfläche, sondern ein bewusstes Layout-Upgrade. Gerade hier werden UI-Änderungen schnell herausfordernd: Visual-Design-Anpassungen müssen auf beiden Formfaktoren sauber greifen und dürfen nicht zu Artefakten, Layout-Sprüngen oder Performance-Einbußen führen.

Das Redesign-Zielbild: Padding, Rundungen, Schatten

Im direkten Vergleich von „vorher“ und „nachher“ nennt Blaikner drei konkrete Designziele:

1. Mehr Padding rund um die Inhaltszellen
2. Abgerundete Ecken an Ober- und Unterseite jeder Zelle
3. Eine subtile Drop-Shadow

Klingt zunächst simpel – ist in einer echten Produktcodebasis jedoch erstaunlich komplex. Denn die drei visuellen Elemente müssen stimmig zusammenspielen, in allen Kontexten funktionieren und dürfen keine Layout- oder Performance-Probleme erzeugen.

Vier zentrale Herausforderungen

Blaikner bündelt die technische Aufgabe in vier handfeste Anforderungen:

• Den Designentwurf originalgetreu umsetzen
• Die bestehende Codebasis weiterverwenden
• Kompatibilität mit dem iPad-Layout sicherstellen
• Performance unverändert hoch halten

Der vielleicht wichtigste Punkt: Der Umbau sollte nicht das Fundament des Dashboards sprengen. Klarheit und Stabilität hatten Priorität vor „Greenfield“-Neuschreibungen oder experimentellen Rendering-Tricks.

Das Kernproblem: Überschneidungen von Schatten und Rundungen

In der ursprünglichen Struktur bestand jeder Abschnitt aus drei eigenständigen Items (Header, Content, Footer). Genau hier traten visuelle Fehler auf: Schatten und abgerundete Ecken der einzelnen Teile „bluteten“ ineinander, führten zu optischen Bruchkanten und verhinderte eine überzeugende Umsetzung des Designvorschlags. Mit drei voneinander getrennten Bausteinen ließ sich der neue Look nicht sauber auftragen.

Kurz: Das Layoutmodell war zu fragmentiert, um den visuellen Zusammenhalt zu gewährleisten. Es brauchte eine neue Kapselungsebene.

Die Lösung: Eine Template-Cell als Kompositionsrahmen

Der Durchbruch kam mit der Idee einer Template-Zelle. Statt Header, Content und Footer separat zu rendern, fasste das Team alles innerhalb einer einzelnen, übergeordneten Zelle zusammen. Diese Template-Cell enthält ihre eigene Collection View, in die die bestehende Logik eingebettet wurde. Vorteile:

• Reduzierte Komplexität: Aus drei Items wird eines – pro Abschnitt.
• Visuelle Konsistenz: Schatten und Rundungen werden einmalig auf die Template-Cell angewendet und „umschließen“ den gesamten Abschnitt.
• Wiederverwendung statt Neuschreiben: Die vorhandene Dashboard-Logik bleibt erhalten und arbeitet innerhalb der Template-Cell weiter.
• Saubere Trennung: Die Template-Cell übernimmt das visuelle „Framing“, die innere Collection View liefert die inhaltliche Struktur.

Dieser Schritt löst das größte Design-Integrationsthema elegant: Die Problemstellen (Schatten, Rundungen, Padding) werden an einer Stelle zentral kontrolliert – nicht mehr auf drei getrennte Sub-Items verteilt.

Content-Höhen dynamisch bestimmen: Eine spezialisierte Methode

Ein weiterer technischer Knackpunkt im mobilen UI-Bau ist die präzise Berechnung von Zellenhöhen. TimeTac implementierte dafür eine Methode, die die Inhaltsgröße pro Abschnitt steuert. Diese Methode erhält drei Eingaben:

• Einen Identifier, um zu erkennen, welche Art von Abschnitt gerendert wird
• Eine Datenquelle mit der Liste der darzustellenden Items
• Einen Standard-Parameter, um mehr über den Aufrufer zu erfahren

Mit diesen Parametern berechnet die Methode die notwendige Höhe für den konkreten Fall. Dafür nutzt sie mehrere Schritte, die Blaikner skizziert:

• Basiswerte hinzufügen: Header und Footer bekommen Standardhöhen.
• Edge Case abdecken: Wenn es etwa keine „recent tasks“ gibt, greift eine alternative Logik.
• Inhaltshöhe bestimmen: Sind „recent tasks“ vorhanden, wird die eigentliche Content-Höhe berechnet.
• Produktspezifische Besonderheiten berücksichtigen: Spezielle Konfigurationen, die mit dem TimeTac-Backend zusammenhängen, fließen in die Berechnung ein.

Der Effekt für die Umsetzung ist enorm: Die Visuallogik (Schatten, Rundungen, Padding) konnte an die Template-Cell gehängt werden, während die Content-Höhenberechnung zuverlässig den verfügbaren Raum bestimmt – flüssiges Scrolling inklusive.

Nur Apple-Bordmittel: Kein Drittanbieter, kein unnötiger Sonderweg

Blaikner betont, dass das Team die Lösung ausschließlich mit Werkzeugen von Apple umgesetzt hat – ohne Drittanbieter-Bibliotheken oder komplexen Custom-Rendercode. Das zahlt auf mehrere Ziele ein:

• Performance: Plattformnative Komponenten sind optimiert und gut integriert.
• Wartbarkeit: Weniger externe Abhängigkeiten, klarere Update-Pfade.
• Zukunftssicherheit: Wenn das System sich weiterentwickelt, bleibt die Lösung nah an den Standards.

Gerade bei einem Produkt, das tausendfach täglich genutzt wird, sind diese Eigenschaften schwer zu überschätzen.

Ergebnis: Ein frisches Design, das die Codebasis respektiert

Die neuen Layouts für iPhone und iPad zeigen klar umrissene Zellen mit mehr Luft (Padding), weichen Kanten (abgerundete Ecken) und einer dezenten Schattenebene, die Informationen zusammenfasst, ohne zu prädominant zu sein. Dank Template-Cell konnte das Team die visuelle Hülle auf einer Ebene realisieren und gleichzeitig die bestehende Funktionalität nahezu unverändert weiterverwenden.

Das zahlt auf Benutzerfreundlichkeit und Entwicklungseffizienz gleichermaßen ein: Nutzer erhalten ein modernisiertes Interface, Entwicklerinnen und Entwickler eine übersichtliche Architekturlinie, die zukünftige Anpassungen erleichtert.

Was wir als Engineering-Publikum mitnehmen

Aus unserer DevJobs.at-Perspektive lassen sich aus Blaikners Vortrag mehrere übertragbare Prinzipien extrahieren:

• Kapselung vor Streuung: Visuelle Querschnittsthemen (Schatten, Rundungen, Abstände) gehören in eine klar definierte, übergeordnete Komponente. Das verringert Überschneidungsfehler und erleichtert Testing und Wartung.
• Bewährtes nicht wegwerfen: Ein Redesign muss keine Neuentwicklung sein. Der Weg über eine Template-Cell erlaubt, Legacy weiterzuverwenden und gezielt nur die „Schicht“ zu modernisieren, die es braucht.
• Datengetriebene UI-Höhenberechnung: Eine zentrale Methode, die Inhaltstyp, Datenlage und Kontextparameter berücksichtigt, verhindert UI-Sprünge und konserviert Scrolling-Performance.
• Gerätebewusstsein von Anfang an: Ein iPad-Layout mit Multi-Column verlangt, dass jede UI-Änderung über beide Formfaktoren konsistent gedacht wird.
• Nutzersteuerung reduziert Komplexität: Show/Hide und freies Anordnen geben Anwendern Kontrolle – und geben dem Team ein klares Raster, worauf in der Architektur zu achten ist.
• Plattformtreue zahlt sich aus: Native Tools reichen weit, wenn man die Komponenten sauber kombiniert. Das senkt Risiko und erhöht Zukunftsfähigkeit.

Leitplanken für ähnliche Projekte

Wer ein vergleichbares Redesign plant, kann Blaikners Ansatz als Checkliste verstehen:

1. Sichtbare Hülle identifizieren: Welche visuellen Eigenschaften müssen konsistent über ganze Abschnitte gelten (Padding, Corner Radius, Shadow)?
2. Kapselungsobjekt definieren: Eine übergeordnete Zelle/Komponente, die genau diese Eigenschaften verantwortet.
3. Bestehende Logik einbetten: Das, was bereits funktioniert (Header/Content/Footer), innerhalb der Kapselung weiterverwenden.
4. Höhenermittlung zentralisieren: Eine Methode, die anhand von Identifier, Datenquelle und Kontextparameter die Größe bestimmt – inklusive Edge Cases.
5. Cross-Device-Validierung: Früh auf iPhone und iPad prüfen – insbesondere Multi-Column-Layouts – und Performance unter realen Daten messen.
6. Nativ bleiben, wo möglich: Erst wenn wirklich nötig, auf externe Bibliotheken zurückgreifen.

Benutzererlebnis: Klarheit, Tempo, Orientierung

Das Dashboard trägt viel Verantwortung: Es muss unterschiedliche Informationstypen unterscheidbar machen, direkte Aktionen ermöglichen und zugleich flüssiges Scrollen sicherstellen. Die von Blaikner geschilderten Maßnahmen zahlen genau darauf ein:

• Klarheit durch Struktur: Header als Kontext, Content für Kerninformationen und Interaktionen, Footer für weiterführende Tiefe.
• Visuelle Zusammenfassung durch Template-Cell: Ein Shadow und abgerundete Ecken, die den ganzen Abschnitt umfassen, statt uneinheitlich auf Teilkomponenten.
• Reibungslosigkeit durch stabile Content-Höhen: Keine Sprünge, keine Jitter – die App bleibt „smooth“ beim Navigieren.

Teamleistung als Erfolgsfaktor

Blaikner verortet den Erfolg ausdrücklich im Zusammenspiel aus Design, UX und Engineering. Der iterative Austausch – von Ideen über Entwürfe bis zur Implementierung – führt zu Lösungen, die ästhetisch und praktikabel sind. Sein Fazit erinnert an den Kern moderner Produktentwicklung:

Praktische Tipps für die Umsetzung im eigenen Code

• Beginne dort, wo die größte Reibung entsteht: Wenn visuelle Artefakte aus mehreren Sub-Items resultieren, suche nach einer Kapselung, die den Abschnitt als Ganzes begreift.
• Berechne Höhen deterministisch: Lege eine Methode an, die für Standardfälle feste Zuschläge (z. B. Header/Footer) setzt und für Content dynamisch nach Typ und Datenlage arbeitet.
• Prüfe Edge Cases bewusst: „Keine Daten vorhanden“ ist nicht einfach „Null Items“, sondern ein eigener UI-Zustand, der eigene Höhen- und Layoutregeln benötigt.
• Denke iPad-spezifisch: Ein Multi-Column-Layout verstärkt Inkonsistenzen. Teste Schatten, Eckenradien und Abstände systematisch in beiden Formfaktoren.
• Halte die Renderkette kurz: Einfache, native Bausteine bevorzugen; externe Abhängigkeiten nur dann, wenn sie echten Mehrwert stiften.

Fazit: Redesign als Architekturgewinn

„Challenges in mobile application development“ zeigt, dass visuelle Modernisierung ein Architekturproblem ist – und eine Chance. TimeTac hat mit einer Template-Cell die Komplexität gezähmt, visuelle Anforderungen zentralisiert und eine robuste Grundlage für zukünftige Anpassungen geschaffen. Das Ergebnis ist ein Dashboard, das frischer aussieht, sich schneller anfühlt und in der Codebasis besser beherrschbar ist.

Für Engineering-Teams ist die Botschaft klar: Gute UI ist kein „Pixel-Tuning“ am Rand, sondern eine Frage der richtigen Komposition. Wer die Hülle dort ansetzt, wo sie hingehört – an einer übergeordneten, wiederverwendbaren Komponente – gewinnt in Designqualität, Performance und Wartbarkeit gleichermaßen. Genau das macht Blaikners Ansatz so lehrreich für alle, die mobile Oberflächen bauen, die täglich im Einsatz sind.

• 

  

  Are you using debugger and why not?

  Borislav Lazendic von TimeTac zeigt in seinem devjobs.at TechTalk die Vorteile von Xdebug und überprüft, ob an den üblichen Vorurteilen zu diesem Thema auch etwas dran ist.

  Jetzt ansehen
• 

  

  How to pick the next Front End Framework

  Tomi Močnik von TimeTac zeigt in seinem devjobs.at TechTalk wie die Entscheidung für ein neues Front End Framework im Unternehmen gefallen ist und welche Erfahrungen dabei gemacht wurden.

  Jetzt ansehen
• 

  

  TimeTac Connect, How we handle Integrations

  Anna Kastner von TimeTac erzählt in ihrem devjobs.at TechTalk darüber, wie das Devteam an die Challenges von Integrations herangegangen ist.

  Jetzt ansehen