Tech Talk: "UI/UX" mit Philipp Baldauf von Ahoi Kapptn!

Tech Talk: "UI/UX" mit Philipp Baldauf von Ahoi Kapptn!

Hallo und willkommen hier beim TechTalk! Heute geht es um das Thema User Interface (UI) und User Experience (UX).

Ganz kurz zu mir, mein Name ist Philipp Baldauf, ich bin Co-Founder bei der Digitalagentur Ahoi Kapptn! Habe sehr viel Startup Erfahrung über unser Startup Butleroy, bin seit mittlerweile über zehn Jahren in der mobilen Entwicklung tätig und ein absoluter Tech Enthusiast – das heißt alles was tech-related ist, interessiert mich sehr! Ich unterrichte auch an verschiedenen Universitäten unter anderem Entrepreneurship und Marketing, aber auch tech-related Themen. Und ich bin sehr aktiv auf Twitter! Das heißt wenn du mit uns oder mit mir irgendwie in Kontakt treten willst: gerne auf Twitter!

Ganz kurz noch zum Hintergrund Hintergrund unserer Firma, unserer Agentur Ahoi Kapptn! Wir unterstützen, oder wir begleiten digitale Projekte in allen Phasen. Das beginnt in der Konzeptphase mit UI/UX Design und auch der Konzeption einer App. Hier legen wir sehr viel Wert auf schöne einfache und verständliche Benutzeroberflächen. Dann begleiten wir auch in der Umsetzung von Apps oder Webseiten, wir implementieren und kreieren das digitale Produkt und zu guter Letzt helfen wir auch beim Launch, das heißt zum Beispiel eine App in den Appstore geben, oder eine Webseite für den Markt bereit machen.

Heute fokussieren wir uns allerdings ein wenig auf das Thema UI und UX Design. Dabei vorweg, es gibt oft Verwirrung zwischen UI und UX und diese zwei Abkürzungen werden oft vermischt miteinander. Dazu ganz kurz: UI, das User Interface ist alles was einem Nutzer oder einer Nutzerin zur Verfügung steht, um beispielsweise mit einer App interagieren zum können. UX, die User Experience ist dabei, wie sich die App verhält oder wie sich eine Website verhält und die Experience – also die Erfahrung, die eine Nutzerin während der Nutzung der App zum Beispiel hat. Und auf das fokussieren wir uns, nämlich es ist sehr wichtig das UI und UX von Beginn an in einer App mit anzudenken.

Bei uns bei Ahoi Kapptn! passiert das über einen sogenannten User Story Mapping Workshop. Das heißt wenn ein Kunde oder eine Kundin zu uns kommt, mit einer Idee, starten wir eine Konzeptphase und so einem User Story Mapping.

Dabei geht es genau darum was soll die App am Ende des Tages können, wie sollen Nutzerinnen und Nutzer am Ende des Tages interagieren können, das heißt welche User Stories also welche User Flows, welche Interaktionsmöglichkeiten sieht man. Dann kommt immer ein sehr großer Umfang an Features in dieser Phase. Hier ist es dann immer sehr wichtig, in verschiedenen Releases zu unterteilen.

Das heißt der MVP – klassisch – ist die erste Version mit der mal man rausgehen möchte, dann eine Version 2, dann eine Version 3.

Hier schließt sich dann auch der Kreis warum wir eine gute gesamte Experience abbilden können, denn dieser Part ist auch essenziell später, damit die Entwicklerinnen und Entwickler bei uns einen großartigen Job machen können.

Sehr viele Kundinnen und Kunden fragen sich immer wie beginnt es dann, dass man quasi mit einem App oder Web Projekt startet. Und bei uns beginnt das immer damit, dass eine UI- und UX-Design Komponente zuerst geliefert wird. Das muss man sich vorstellen wie bei einem Haus, wo zuerst der Bauplan gezeichnet wird, bevor man die ersten Ziegelsteine verlegt.

Wir setzten hier auf state-of-the-art tools wie zum Beispiel Sketch oder Figma und das erlaubt uns, Fehler sehr früh in der Entwicklung zu erkennen.

Es ermöglicht auch einfach nochmal Änderungen vorzunehmen – wenn der Kunde oder die Kundinnen in dieser Phase zum Beispiel sagt „ich habe es mir doch ein bisschen anders vorgestellt", ist es sehr leicht wieder zu korrigieren. Und es gibt auch den Kundinnen und den Kunden sowie unseren Entwicklerinnen und Entwicklern einen ersten Touchpoint in der App, wo man die App schon mal anfühlen kann und schon sehen kann, wie es sich verhält. Es ist auch ein ganz wichtiges Kommunikations-Tool zwischen unseren Designerinnen und unseren Entwicklern. Warum? Weil ein Designer in dieser Phase schon sehr gut kommunizieren kann, wie er zum Beispiel verschiedene Animationen haben möchte und die Entwicklerin das dann dementsprechend umsetzt. Und es spart sehr viel Zeit hinten raus in der Entwicklung.

Die Implementierung selbst verläuft dann bei uns immer im Scrum Prozess, das ist ein zweiwöchentlicher Sprint, bei dem gewisse Themen oder gewisse Tickets – gewisse "Aufgaben", nennen wir es mal so – für zwei Wochen mal vorgenommen werden und diese dann von den Entwicklerinnen und von den Designern und von den ganzen Departements umgesetzt werden.

Für den Kunden ist hier immer volle Transparenz, die sind bei uns bei diesen Prozess miteingebunden.

Und es gibt auch den Entwicklern hier in dieser Phase eine Möglichkeit, direkt mit dem Kunden immer zu kommunizieren – bei diesen Sprint Meetings zum Beispiel oder über dieses Planungstools.

Dann lassen wir es ein bisschen technischer werden. Wie sieht es dann tatsächlich aus, wenn man – was ist das Resultat dieser Planungs- und Konzeptphase und Designphase.

Es ist ein UI-Mockup. Hier sieht man beispielsweise eine Anfangsversion der Rotax MAX Dome App, die wir umgesetzt haben und es gibt dem sowohl Kunden, als auch den Entwicklern einen sehr guten Einblick und eine sehr genaue Vorstellung, wie die App am Ende des Tages aussehen muss.

Diese Tools können dann noch sehr viel mehr, dass man auch wirklich genau sehen kann, wo Elemente platziert werden müssen und so weiter und so fort.

Was auch ganz wichtig ist, ist im UI und im UX Design, dass man sich an die Human Interface Guidelines von Apple sowohl als auch Google hält.

Hier der Einfachheit halber ich nur ganz kurz über die Interface Guidelines von Apple. Dabei geht es zum einen um die ästhetische Integrität das bedeutet, dass die Funktionalität, welche die App abbildet auch sinnvoll in der App widergespiegelt wird.

  • Man soll immer Konsistenz bewahren, nicht nur über die eigene App hinweg – das ist schon sehr sehr wichtig – aber auch über das gesamte Ökosystem hinweg und über das gesamte Betriebssystem.
  • Man soll Personen oder Nutzern die Möglichkeit geben, direkt den Content manipulieren zu können.
  • Man kennt das von Foto Apps, wo man das quasi dreht und das ist einfach eine schöne gelernte Geste.
  • Direktes Feedback für die Nutzerinnen ist wünschenswert.
  • Man kann immer wieder auf Metaphern zurückgreifen, sei es aus dem echten oder dem digitalen Leben.
  • Und die Nutzerin und der Nutzer muss immer zu jedem Zeitpunkt die Kontrolle behalten und sich auch in Kontrolle fühlen – also das ist auch sehr wichtig das es transparent transportiert wird.

Weil es mir selber auch sehr wichtig ist, ganz kurz noch das Thema Accessibility das kommt im UI und im UX Prozess oft zu kurz.

Hier ist es ganz wichtig, dass man nicht nur die fancy Screenreader zum Beispiel von den Betriebssystemen unterstützt – das ist auch natürlich sehr wichtig – aber es geht auch schon darum zum Beispiel unterschiedliche Skalierungsfaktoren der Schriftarten zuzulassen. Sehr viele Personen haben bisschen eine größere Schriftart teilweise eingestellt und wir legen hier im Design sehr viel Wert drauf. Wir verwenden unter anderem das Stark Plugin, das es ermöglicht zum Beispiel einen Kontrast Score zu errechnen, wo man schon in dieser Phase erkennt: ist das vielleicht eine gewagte Farbvariante, weil etwa Personen mit einer Rot-Grün-Schwäche zum Beispiel hier Probleme haben könnten, die Farben auseinander zu kennen.

Das sind einfach Dinge die bedenken wir von Anfang an mit und unsere Farb-Schemen sind immer auf zum Beispiel Rot-Grün-Schwäche abgestimmt.

Dann wieder aus der Technikerbrille: was bringt es dann tatsächlich dieses Mockup zu haben? Die ganzen Vorteile die ich Eingangs erwähnt habe, natürlich. Aber dann auch tatsächlich in der Umsetzung. Es ermöglicht einfach eine pixelperfekte UI zu gestalten und zu designen. Warum? Zum Beispiel weil in diesen Tools – beispielsweise hier Figma – kann man pixelgenau ablesen: Die Designerin der Designer wollte hier vier Pixel Abstand beispielsweise und das Element sollte so und so groß sein. Das heißt es kommt am Ende des Tages auch wirklich das heraus, was sich die Designerin und der Designer gewünscht hat. Und aus Entwicklungssicht ist es sehr einfach, dass man sich daran hält.

Man weiß ja, oft haben Entwicklerinnen und Entwickler nicht das größte Designer Auge und durch solche Tools wird es ermöglicht hier eine Brücke zu schlagen.

Es gibt sehr coole Features, beispielsweise hier in Figma auch wieder, dass man Code exportieren kann direkt aus dem Tool. Das heißt, man muss dann nicht oftmals langwierigen UI Code schreiben, sondern kann den direkt aus dem Tool exportieren und ins gewünschte Projekt einfügen.

Auch immer wieder ein großes Thema, wo bekommt man die Assets her? Unsere Entwicklerinnen und Entwickler schwören darauf, dass man in den Tools ganz einfach diese Assets downloaden kann. Das vermeidet einfach unnötige Schleifen mit dem Designteam – und es spart Zeit und Energie, wie es so schön auf den Folien heißt.

Ganz zum Schluss möchte ich nochmal den UX Prototypen erwähnen, der wie gesagt sehr wichtig ist aus zweierlei Hinsicht: zum einem ein Touchpoint für die Kundin und den Kunden vorweg, aber dann auch, dass transportiert werden kann vom Designteam wie man sich hier die Umsetzung wünscht.

Ja und damit komme ich auch schon zum Ende von unserem heutigen TechTalk. Freut mich sehr, dass du zugeschaut hast und mir solange zugehört hast!

Was haben wir uns alles angesehen? Wir haben uns angesehen UI-, UX Design warum ist das so wichtig? Es ist der erste Schritt im Designprozess, es ist die Brücke zwischen Kunde und Kundin, dem Projektmanagement Team dem Design Team und den Entwicklerinnen und Entwicklern.

Wir bei Ahoi Kapptn! halten den Prozess sehr transparent, der Kunde und die Kundin – also Stakeholder eigentlich – sind zu jedem Zeitpunkt immer in den Prozess eingebunden.

Unsere Entwicklerinnen und Entwickler lieben diesen Prozess, weil es einfach ermöglicht die richtige UI pixelperfekt zu gestalten. Ja und unsere Kundinnen und Kunden lieben es natürlich auch, weil sie natürlich vorab wissen – oder sehr früh in der Projektphase wissen – was sie am Ende des Tages bekommen werden.

Es hat mich sehr gefreut, wenn du mit mir oder mit uns in Kontakt treten willst, hier nochmal die Kontaktdaten eingeblendet, einfach philipp@ahoikapptn.com oder direkt auf ahoikapptn.com, einfach einen Beratungstermin buchen.

Ich hoffe der Talk hat gefallen und bis zum nächsten mal!

 

 

Erfahre mehr zum DevTeam von Ahoi Kapptn!

Technologien in diesem Artikel