U wie User Inter­face Design - App Entwick­lung A bis Z

24.9.2019 - Michael Burgdorfer

Das User Inter­face (UI) beschreibt die Schnitt­stelle zwischen Mensch und Maschine und wird bereits in der ersten Phase der Appent­wick­lung möglichst detail­liert entwi­ckelt. Das nur eine einfache, intui­tive und visuell ästhe­ti­sche App Spass macht zum Bedienen muss an dieser Stelle nicht gesagt werden. Doch was macht gutes UI aus? Wie entsteht ein Screen­de­sign? Ist "gutes" Design nicht subjektiv? Als Desi­gner in der smoca AG möchte ich euch hier einen kleinen Einblick in unser Vorgehen zeigen

U wie User Interface Design - App Entwicklung A bis Z teaser

Die Heraus­for­de­rung

Das Aussehen und die Bedie­nung einer App wird von drei Faktoren been­flusst:

  • Die Gewohn­heiten der Benutzer

  • Guide­lines der Entwickler

  • Marketing-​ und Brand­re­le­vante Vorgaben

Die Posi­tion des UI/Screen­de­si­gners tangiert mit dem des UX-​Designer (1), dem des Program­mierer (2) und dem des Kunden (3). Alle drei Parteien haben eine eigene Vorstel­lung wie die App aussehen soll. Für den Desi­gner ist es eine grosse Heraus­for­de­rung alle Bedürf­nisse abzu­de­cken. Ausserdem haben die meisten Desi­gner auch eigene Ansprüche. Man will Inno­va­tionen wagen, neue Farb­kom­bi­na­tionen verwenden und neue Interaktions-​ und Navi­ga­ti­ons­kon­zepte entwi­ckeln!

UI Designers Position

Posi­tionBedürfnisBeispiel
UX-​DesignerIntui­ti­vitätDieser Buttton ist viel zu klein
Program­mierereinfache Imple­men­ta­tionKompo­nente XYZ werden von iOS nicht unter­stützt
Kunde/POBran­dingDiese Checkbox muss der Farbe Pantone 228-D entspre­chen

Der Work­flow

Nach der Erar­bei­tung des Grob­kon­zepts und (im besten Fall) mit einem klick­baren Wire­frame Prototyp als Vorlage kann das Inter­face designt werden. Jeder einzelne Screen muss sorg­fältig gelay­outet werden, Typo­grafie und Farben werden defi­niert und sämt­liche Bedien­ele­mente werden pixel­genau plat­ziert.

Sketch

Sketch

Wir setzten dabei auf Sketch. Mit Hilfe von Style-​Vorlagen und sich wieder­ho­lenden Elemente (sog. Symbole oder Kompo­nenten) wird ein stati­sches Abbild der App (Mockups) mit möglichst allen Screens und Subs­creens, erstellt. Dabei verwenden wir gerne auch fertige Kompo­nenten aus Symbol-​Bibliotheken von Google und Apple welche wir dann entspre­chend anpassen. Dies verrin­gert den Aufwand bei der Program­mie­rung der App und kann entspre­chend güns­tiger umge­setzt werden.

Mockups

Bei Mobile-​Apps entstehen oft zwei Screen­de­signs: jeweils eine iOS und eine Android-​Spezifische Version. Dafür gibt es zwei Gründe:Ein iPhone User benutzt eine App anders als jemand der an Android gewöhnt ist. Ein gutes Beispiel ist das aufklapp­bare Menu (Menu­drawer) mit einem Hamburger-​Button in der oberen linken Ecke. Während Android Benutzer mit diesem Navi­ga­ti­ons­ele­ment bestens vertraut sind, werden iOS User viel­leicht im zweiten oder dritten Anlauf die gesuchte Funk­tion finden.Apple und Android unter­stützen nicht dieselben nativen Funk­tionen. Für den Menu-​Button muss unter iOS eine eigene Lösung imple­men­tiert werden oder man verwendet eine externe Biblio­thek was zu weiteren Abhän­gig­keiten führt.

Bei Websites und Webapps müssen die verschie­denen Grössen des Brow­ser­fens­ters berück­sich­tigt werden. Dabei wird vor allem auf die mobile Grösse Wert gelegt. Viele Desi­gner beginnen mit der mobilen Ansicht (Mobile-​First), da man hier wirk­lich nur das Essen­ti­ellste anzeigen kann und muss. Somit über­legt man sich schon in der Design-​Phase, welche Infor­ma­tionen wie wichtig sind. Daraus entwi­ckelt man die Tablet-​Grösse und am Schluss die Desktop-​Version.

Es ist von grossem Vorteil, wenn der Desi­gner auch program­miert. In der Design-​Phase können Hinder­nisse und Gefahren für den Entwickler früh­zeitig erkannt und besei­tigt werden. Eine kleine, aber schlaue Entschei­dung kann unter Umständen mehrere Tage Arbeit eines Program­mie­rers einsparen. Ich empfehle allen Desi­gner Weiter­bil­dungs­an­ge­bote im Bereich HTML/CSS zu nutzen.

Marvel

Prototyp

Das Design steht und die einzelnen Screens sind zu einer ersten Abnahme bereit. Zum klick­baren Prototyp ist es an dieser Stelle nicht mehr weit. Sketch in Verbin­dung mit Marvel erlaubt es mit einfachsten Mitteln und ohne Progrm­mier­kent­nisse ein Prototyp zu erstellen, welche der Kunde auf seinem Ziel­gerät einfach testen kann. Dafür verwenden wir Marvel. Hier entsteht nicht nur das Look sondern auch das Feel der App.

Zeplin

Zeplin

Erst wenn dieser Prototyp vom Kunden abge­nommen wurde, kann mit der Program­mie­rung begonnen werden. Das Handoff zwischen Desi­gner und Soft­ware­ent­wickler passiert über Zeplin. Wenn das Sketch-​Projekt korrekt erstellt und gepflegt wurde, kann mit nur wenigen Klicks ein Living-​Styleguide inklu­sive Code-​Snippets gene­riert werden. Zeplin unter­stützt die wich­tigsten nativen Syntaxe (ios: swift, android: XML) wie auch css. Grafikas­sets wie Icons und Logos werden auto­ma­tisch in verschie­dene Auflö­sungen und Datei­for­mate aus Zeplin expor­tiert und steht für den Program­mierer als Down­load zur Verfü­gung.

Falls Sie eine Appidee haben und bereits ein kleines Konzept auf skiz­ziert haben, können wir Ihnen gerne auch das Design als Service anbieten. Nehmen Sie einfach mit uns Kontakt auf.

Newsletter abonnieren

Kontakt

Smoca AG
Tech­no­park­strasse 2
Gebäude A, 3. Stock
8406 Winter­thur

Letzter Blogein­trag

U wie User Inter­face Design - App Entwick­lung A bis ZMichael Burgdorfer - 24.9.2019

Das User Inter­face (UI) beschreibt die Schnitt­stelle zwischen Mensch und Maschine und wird bereits in der ersten Phase der Appent­wick­lung möglichst detail­liert entwi­ckelt. Das nur eine einfache, intui­tive und visuell ästhe­ti­sche App Spass macht zum Bedienen mehr ...

  • Smoca Facebook
  • Smoca Twitter
  • Smoca LinkedIn
  • Smoca RSS Feed