Arbeitsproben

Erst durch gute User Experience
wird ein Service sexy!

Jonas Zielke

Ich bin 25 Jahre alt, arbeite in einem Softwareunternehmen im Saarland und bin leidenschaftlicher Pixelschubser. Zuvor studierte ich Medieninformatik im Bachelorstudiengang.
Neben meiner Arbeit programmiere ich in Java, PHP and schubse Pixel in CSS (Experte in SASS) und Sketch. Mich fasziniert die Gestaltung von Oberflächen für Desktop, mobile Geräte und Webseiten.

Project: prjct.work

Prjct - Showroom im Web

Dies ist nicht mein erster Ansatz für die Vorstellung von Projektarbeiten im Web, doch der erste mit einem gut durchdachten Konzept, um die Seite auf längere Zeit pflegen zu können: Orderbasierende Projektstruktur.

Anstatt seine Projekte über ein Adminpanel in einer Datenbank zu sichern, werden Ordner und Dateien auf dem Server via FTP hoch geladen. Die Struktur ist schnell verstanden und lässt sich einfach erweitern.

Zudem ist das Projekt Open Source und steht unter der MIT Lizenz.

Project: Spacebox

Mac App - Spacebox

In Zusammenarbeit mit dem Kommilitonen Stefan Gerard entstand in Form eines Projekts im Fach Projekt zum thematischen Schwerpunkt die Mac App spacebox - eine Fotoverwaltungsapplikation auf der Grundlage von Ordnerstrukturen.
Ziel des Fachs war die Entwicklung eines eigenen Projekts im Team von Studierenden. Das dazugehörige Konzept wurde vorab mit dem zuständigen Betreuer besprochen und bei regelmäßigen Treffen über den Fortschritt berichtet.
Einen wissenschaftlichen Aspekt bekam das Projekt durch die Verknüpfung mit dem Fach Wissenschaftliche Kommunikation. In einer zehnseitigen Arbeit gingen wir auf die „Bewertung der Usability von iPhoto und Spacebox“ ein.
Der Professor bat zur Bewertung des Projekts zu einem Treffen, um vertraut mit der Materie zu werden und um eine Vorstellung der Entwicklung zu erhalten. Die Resultate aus beiden Fächern erhielten sehr gute Noten.

Entwicklung

Diese Applikation entstand mittels Apples neuer Programmiersprache namens Swift. Da dies für uns die erste App unter Mac OS X war und die Sprache noch sehr jung ist, musste viel Zeit für Recherche und Testen investiert werden.

Icon

Das Icon ist getreu aktueller Gestaltungstrens unter Mac OS X um -3 Grad gedreht und soll abstrakt einen luftleeren Raum darstellen. Dieser ist eingerahmt und unterstreicht damit die Funktionalität des Programms.

Project: Hexativity

Android Applikation mit Mi Band

Die nun entwickelte Applikation, welche auch Grundlage der Bewertung war, entscheidet sich grundlegend von der ursprünglichen Idee.

Entwicklung

Da das Unternehmen aus (verständlichen) Gründen die Schnittstelle zu ihrem Band nicht veröffentlicht, musste auf aufwändig reengineerten Code zurück gegriffen werden, welcher nicht den Umfang der offiziellen Applikation widerspiegelt. Zudem waren diese Ansätze für eine ältere Android Betriebssystem Version entwickelt worden und verfolgten einen veralteten Verbindungsaufbauansatz, der erst umgeschrieben werden musste.
Auf dem ersten Screen wird die Verbindung mit dem Band aufgenommen. Mögliche Fehler und benötige Berechtigungen werden hier angefragt. Auf dem zweiten Screen erhält der Nutzer eine Übersicht über die zurückgelegten Schritte, sowie einen Motivationsspruch, welcher sich als Bild in diversen Programmen teilen lässt.
Durch persönlichen Reiz entstand die passende Webseite, welche die Ziele der App erklärt.

Project: Timeplanr

Timeplanr, Version 2

Diese Version ist derzeit in der Entwicklung und verbessert Version 1. Neben grafischen Verbesserungen, hat sich der Aufbau einer Aufgabe verändert. Überschrift und Beschreibung sind nun zu einem Feld zusammen gefasst. Mit einem Klick auf die Aufgabe lässt sich diese nun direkt arbeiten. Zudem wird es möglich sein mehrere Listen anzulegen.

Project: trackr

Android App trckr - Zeitmanagement mit digitalen Karten

Als Projektarbeit im Fach Mobile Anwendungen mit Android im Studium Informatik im Master an der Hochschule Kaiserslautern entstand diese App namens trckr.

Idee

Die Aufgaben des Nutzers werden einzeln auf Karten notiert. Je Karte wird die bearbeitete Zeit erfasst und grafisch dargestellt. Zudem lassen sich Aufgaben als erledigt markieren.
Mit dem Teilen-Button wird ein Bild der Karte erstellt und kann direkt per E-Mail versendet oder in sozialen Medien geteilt werden.

Design

Um auf dem (potenziellen) Markt der GTD Applikationen sich behaupten zu können, setzte ich auf kräftige lila Töne. Der Zähler in der Mitte ist grafisch animiert und lässt sich über Wischgesten manipulieren. Die Karten sind horizontal angeordnet, beinhalten drei Buttons: Einstellungen zum Löschen der Karte, starten und stoppen der Zeit und einen Erledigt-Button in Form eines Harkens.
Um den Titel der Aufgabe direkt ablesen zu können, wird dieser als Laufband am oberen Bildschirm rand in großen Buchstaben eingeblendet.

Umsetzung

Diese Android Applikation wurde mittels Java in Googles Android Studio entwickelt. Zur Umsetzung der grafischen Benutzeroberfläche kam Sketch zum Einsatz und reduzierte dadurch mögliche nachträgliche Änderungen der Bedienung und des Aussehens.

Project: flipp

Flipp app

Im Fach Frameworkbasierte GUI-Entwicklung entstand zusammen mit dem Kommilitonen Kommilitone Stefan Gerard die erste iOS App.
Aufgabe war es mit Hilfe eines beliebigen Frameworks eine grafische Oberfläche zu gestalten. Wir entscheiden uns für Swift unter iOS.

Idee

In der App lässt sich ein Counter stellen. Dieser wird wie eine analoge Flipp-Uhr dargestellt. Die Zeit lässt sich direkt über vertikale Wischbewegungen anpassen. Mit dem Switch kann der Nutzer den Countdown starten und stoppen.

Auf dem Einstellungsbildschirm gibt es drei Anpassungsmöglichkeiten. Zudem ist ein kleiner Gag eingebaut. Ist die oberste Checkbox aktiviert, lässt sich über einen Touch auf die Beschreibung dieser Option die Hintergrundfarbe der Countdownseite ändern ;)

Design

Die App ist sehr schlicht und fällt durch ihre markante Hintergrundfarbe auf. Die Animation der fallenden Ziffern verbindet sich die analoge mit der digitalen Welt. Hier kann die digitale Welt ihren Vorteil ausspielen, da sich die Zeit direkt über die Ziffern verändern lässt.
Der Switch ist einen Knopf breiter als üblich, da der Nutzer das Gefühl erhalten soll etwas Großes zu starken (oder zu beenden).

Umsetzung

Die Ziffern, wie auch der Switch sind komplett costum controlls. Die Bedienung orientiert sich aber an bestehenden Elementen. So lässt sich der Switch durch Swipe Bewegungen und Touch steuern.
Die Ziffern waren aufwendig umzusetzen, da zum einen hochauflösende Bildschirme und schnelle Animationsabläufe berücksichtigt werden mussten. Jede Ziffer besteht nur aus drei Flächen.

Project: Inklusion

Inklusion

Ziel der Projektarbeit im Fach Bewegtbild im Kontext verschiedener Anwendungen und Plattformen war es ein interaktives Video zu entwickeln, bei dem der Zuschauer die Möglichkeit hat durch Interaktion den Verlauf der Handlung des Videos zu beeinflussen. Dabei sollte das Video die Thematik Inklusion behandeln und junge Menschen beim Interagieren mit dem Video für dieses Thema sensibilisieren.
Dem der Videosequenzen entstand eine interaktive Webseite, die komplett responsive, mit der Tastatur steuerbar, in zwei Sprachen und mit Untertitel bestückt ist.

Das Team der Realisierung bestand aus Kevin Keßler, Stefan Gerard und mir. Außerdem konnten wir auf Freunde und Bekannte zurückgreifen, die uns tatkräftig unterstützten. Ein Dank geht dabei an Markus Tretter.

Project: Pulserun

Android App Pulserun

Mit der Grundlage eines zufällig, zugeteilten Papers im Fach Advanced Interactive Systems sollte eine Android Applikation realisiert werden. Zusammen mit dem Kommilitonen Stefan Gerard entstand im Sommersemester 2014 diese Applikation.

Idee

Der Nutzer trägt zu erst seine Daten, wie Profilbild, Name, Alter, Größe und Gewicht ein. Diese Daten werden für Berechnungen während des Laufs sowie zur Darstellung des Highscores benötigt. Zudem lässt sich ein Ziel des Laufs auswählen.
Abhängig von der gewählten Art des Laufs muss der Nutzer einen bestimmten Puls halten. Zur Berechnung des Optimalpulses wurden Formeln aus dem Paper herangezogen. Ist der Wert zu hoch, färbt sich der Screen rot, die Different wird ausgeben und ein akustisches Signal in einer höheren Tonlage informiert den Läufer. Bei einem zu niedrigen Wert wird bis auf eine Ausnahme gleich verfahren: Der Ton hat eine tiefere Lage, sodass der Nutzer ohne ablesen sein Laufverhalten anpassen kann.
Um während des Laufs etwas Unterhaltung anzubieten, wird Musik aus dem Musikordner geladen und abgespielt.
Nach dem Lauf werden die Werte des Laufs mit dem Server abgeglichen und der Highscore berechnet.

Design

Die App wurde im flat Design gestaltet. Die Bedienung und die Interaktion zwischen den Screens erinnert eher an eine Applikation unter iOS.
Die Umsetzung des dynamisch entwickelnden Graphens war durch den weiß roten Verlauf aufwendiger als geplant.

Produktbilder

Um der Abschlusspräsentation ein gewisses Extra zu geben, entstanden diese Produktbilder.

Dummy Daten

Da für die Entwicklung kein passender Pulsmesser zu Verfügung stand, sind die angezeigten Daten fiktiv und werden während des Laufs generiert.

CampusTV

In der CampusTV Sendung vom Oktober 2014 wurde unter anderem zu dieses Projekt berichtet. Im Anschluss durfte ich (ohne Brille und keine Kontaktlinsen, was mich etwas aus der Fassung warf ;-)) ein Interview halten.

Project: online-protoptyping

Digitale Protoypen

Diese private Seite entstand kurfristig während der Leitung von Übungsgruppen im Fach Usability Engineering an der Hochschule Kaiserslautern.

Den Studierenden fehlte in der Entwicklung der Gestaltung ihrer Protoypen die nötige Sicht auf Proportionen von Schriften und Bedienelementen.
Aus diesem Anlass war es auf dieser Seite möglich Screenshots hochzuladen und auf verschiednen Bildschirmgrößen zu testen. Neben diversen Gerätetypen, konnten Farbe und Ausrichtung des zu testenden Geräts gewählt werden.

Project: sayjones

Neuste Überarbeitung von sayjones.de

Web sayjones.de

Mit dieser Ansicht wurde Rücksicht auf die aktuelle Designtrends gelegt und Abschnitte neu gegliedert.
Zur einfacheren Wiedererkennung ist der Header der Seite in dem von mir oft verwendeten Grün eingefärbt. Die Dribble Shots sind nicht mehr horizontal angeordnet, sondern als Paar untereinander. Zudem erhielten sie einen harten Schlagschatten.

Project: SU-Shop

Logo Generator für die Schüler Union

Für das mir nahestehende Unternehmen Dekoba entwickelte ich diesen Logo Generator. Er dient zur Erstellung eines individuellen Logos der Schüler Union.

Mittels des oberen Textfeldes kann dem Logo ein Schriftzug hinzugefügt werden. Während des Tippens wird das Bilder fortlaufend aktualisiert. Mit einem Rechtsklick auf die Vorschau oder mit Auswahl von .jpg bzw. .png wird die generierte Datei heruntergeladen.

Project: ToDo

ToDo Web Applikation

Wer hat nicht schon an eine eigene Aufgabenverwaltung nach gedacht. Diese Idee orientiert sehr an dem klassischen Notizblock. Links lassen sich Bereiche erstellen und Listen eingliedern. Mit der Suche lassen sich alle Aufgaben durchsuchen.

Project: mezenger

Mezenger

Dieses Projekt geistert schon Jahre durch meine Gedanken. Die Entwicklung einer Kommunikationsplattform, die schlicht gestaltet ist und dazu einfach zu bedienen, ist sehr komplex.
Der Nutzer erwartet viele gewohnte Funktionalitäten, die berücksichtig werden müssen.

Design

Dieser Screen zeigt einer der ersten Versionen des Chats. Im Laufe der Entwicklung wurden Anforderungen wichtiger, die hier nicht berücksichtig wurden. Aus diesem Grund musste eine neue Idee der Gestaltung weiterentwickelt werden.

Wie geht es weiter?

Ich machte mir schon sehr viele Gedanken über dieses Projekt und kann noch vieles drüber erzählen. Vieles davon macht diesen Chat außergewöhnlich zu den bestehenden.

Project: fndrr

fndrr, Version 3

Mit Version 3 der Seite wurden viele Funktionen in ihrer Bedienung verbessert und Abläufe klarer dargestellt. So erscheint die Suche neben dem Suchbutton in der oberen fixen Bar und Ladestadien werden als diese ausgegeben. Die Darstellung der Albumliste ist nun deutlich reduziert und legt stärker den Focus auf die Lieder. Durch die verringerte Breite der Albumansicht können diese Zeilen auch besser gelesen werden.
Das Backend greift, wenn vorhanden, auf schon erstellte Bilder zurück, wenn ein Album in sozialen Medien geteilt wird. Damit reduziert sich die Ladezeit erheblich.

Project: Online Musik Player

(Lokaler) Online Musikplayer

Die Projektarbeit zum Fach Advanced Topics in HCI war Auslöser für diese Seite. Ziel war es, die auf dem Rechner des Nutzer lokal vorhandene Musik im Browser abzuspielen und die Funktionen eines einfachen Musikplayers zu Verfügung zu stellen.
Hierzu zieht der Nutzer die gewünschten mp3-Dateien in den Browser, welche dann von der Seite ausgewertet und in eine Wiedergabeliste sortiert werden. Mit einem Doppelklick auf ein Lied wird dieses abgespielt und mittig der Seite eingeblendet.

Design

Das Layout wurde dem, unter Designern sehr bekannten Schneewittchensarg der Firma Braun, welche von Dieter Rams gestaltet wurde, nachempfunden.
Wählt der Nutzer ein Lied aus einem anderen Album als dem gerade zu hörenden, welches ebenfalls ein Cover besitzt, so wird der Wechsel vom vorherigen Titel, wie bei einem Plattenspieler, animiert.
Auffallend ist hierbei insbesondere die Zeitleiste: Diese ist hier, nicht wie üblich horizontal, sondern vertikal dargestellt.

Umsetzung

Basierend auf der experimentellen Verfügbarkeit wichtiger Funktionen, ist die Seite nur mit Google Chrome Browsern kompatibel. Größtes Problem bei der Realisierung: Die Ausgabe einer URL eines lokalen Musiktitels, sodass nicht der gesamte Titel im Browser Cache gespeichert werden muss.

Project: Pictuream

Android App Pictuream

Diese Seite wurde ergänzend zur Android App Pictuream in Zusammenarbeit mit Stefan Gerard für das Fach Graphical apps - the android view an der Hochschule Kaiserslautern erstellt.
Mit der App lassen sich acht Bilder in vorgefertigte Rahmen laden und beliebig tauschen. Die Collage lässt sich dann als Bild speichern und z.B. als Hintergrund verwenden.

Umsetzung

Um die Funktionen der Applikation auch im Web einfach darzustellen, werden verschiedene Collagen angezeigt.
Mit einem Klick auf dem verdeckten QR-Code (oder über den Download-Now-Button) erscheint der QR-Code animiert im Vordergrund und kann problemlos genutzt werden.

Project: Lab

Lab, Apple Keyboard

Tastaturen sind für die diversen Einsatzmöglichkeiten und Gewohnheiten unterschiedlich gestaltet.
Die Reihenfolge der Belegung ist meistens die Gleiche, doch das Format der Tasten unterscheidet sich. So variieren Breite, Abstand und Anordnung der einzelnen Tasten und haben entscheidende Auswirkungen auf die damit verbundene User Experience.
Selbst Apples eigene Bluetooth- und kabelgebundene Tastatur unterscheiden sich in einigen Details.
Wie lassen sich Doppelbelegungen pro Taste für den Nutzer einfach darstellen und wie wechselt man zwischen diesen Stadien? Daraus ergab sich für mich die Herausforderung: Wie lässt sich eine solch komplexe Tastatur im Web realisieren?

Idee

Mit dem virtuellen Nachbau der Bluetooth-Tastatur von Apple setze ich meine Ideen zur Umsetzung einer einfach zu bedienenden Web-Tastatur, sowie deren realistischen Darstellung ausschließlich mit HTML und CSS um.

Project: jonaszielke.de

Visitenkarte, Version 2

Diese Version der Karte ist au den ersten Blick reduziert auf das eigene Logo und einen Pfeil am unteren Bildschirmrand. Klickt man auf diesen, werden weitere Möglichkeiten der Kontaktaufnahme dargestellt. Alternativ lässt sich diese tabellarische Darstellung auch über die Pfeiltasten einblenden.

Idee

Die Online-Visitenkarte soll schnell geladen werden, für Smartphones optimiert sein und nur die wichtigsten Daten enthalten.

Project: Login

Login

Web panel.sayjones.de

Anmeldeformulare sind ein nötiger aber für Nutzer oft abschreckender Schritt, um nicht öffentliche Inhalte einzusehen.

Hier stellte sich mir die Frage, wie man diese Ablauf vereinfachen und dem Nutzer schon auf dieser Seite persönliche Inhalte zeigen könnte.
Als Ergebnis wird das Logo der Seite durch das Profilbild des Nutzers ersetzt, wenn dieser seinen Benutzernamen in das obere Textfeld eingegeben hat.
Sollte der Nutzer fehlerhafte Daten eingeben haben, werden Links zu weiterführenden Seiten (Benutzername oder Passwort vergessen) unterhalb des Formulars eingeblendet.
Die Elemente des Formulars sind schlicht gestaltet und sollen zum schnellen Anmelden animieren.

Auf der Testseite kann dieser Vorgang mit den Namen „Jones“ oder „Daniel“ ausprobiert werden.

Project: Dribbble invite

Dribbble Invite Giveaway

Basierend auf der erhöhten Nachfrage an Dribbble Einladungen erstellte ich kurzfristig diese Seite.
Mein Ziel war es, die Entscheidung für einen Bewerber offen und transparent zu führen. Auf 2 Einladungen bewarben sich 42 potenzielle Nutzer.

Project: Inflight Entertainment System

Inflight Entertainment System

Web os.jdesigns.de

Im Sommersemester 2012 entstand in Zusammenarbeit mit dem Kommilitonen Daniel Walter dieses Projekt im Rahmen des Fachs Human Computer Interaction an der Hochschule Kaiserslautern.

Aufgabe war die Erstellung eines webbasierten Prototyps auf Grundlage eines eigens geschriebenen Szenarios.
Der Prototyp wurde jedoch über die ursprünglichen Anforderungen des Projektes umfangreicher ausgebaut und bildet nun viele weitere geplante Funktionen ab. So ist es nun auch möglich die Sprache zu wechseln, ohne die Seite neuladen zu müssen.

Design

Die Oberfläche orientiert sich am Layout der ersten Apple TV Betriebssysteme und ist stark an der Idee von Skeuomorphismus angelehnt.

Umsetzung

Das IFE kommt ohne Javascript Bibliotheken zurecht. Zudem wurde bei der Entwicklung der Seite auf Touch Screen Kompatibilität geachtet und diese auf einem iPad der ersten Generation erfolgreich getestet.
Die meisten Verläufe und Animationen wurden mit CSS 3 umgesetzt.