• Apps
• A1 Apps
• News

Mehr Nutzen mit durchdachtem Design – Teil 2

Willkommen zu Teil 2 des Gastbeitrags von David zum Thema Design. Viel Spaß beim Lesen!

Das letzte Mal ging’s darum, welche Anliegen ihr – die A1 Mobilkunden haben und wie wir euch dabei bestmöglich zur Seite stehen können. Heute beschreibe ich, wie wir daraus Designs für iOS und Android entwickelt haben.

Wir erinnern uns – das waren die brennensten Anliegen der A1 Kunden:

1.  „Meine Handyrechnung scheint mir hoch, ich will wissen, warum – also die entstandenen Kosten nachvollziehen können.“
2. „Ich möchte meinen aktuellen Verbrauch im Auge behalten, um bei der nächsten Rechnung keine böse Überraschung zu erleben.“
3. „Ich will wissen, was ich gegen zu hohe Kosten tun kann, und dazu brauche ich verständliche Informationen.“
4. „Ich will wissen, was A1 mir bietet, damit ich meinen Tarif optimieren kann.“

Schritt 3: Einfach nützlich, einfach informativ.

Die nächste Aufgabe des Designers ist: Entwerfen, dann vereinfachen. Und dann wieder von vorn. Und dann wieder. Und noch einmal.

Denn Einfachheit ist eines der wichtigsten Ziele von gutem Design. Die Benutzer sollen schließlich alles, was sie suchen, möglichst schnell finden. Und das geht am besten, wenn der Überblick nicht durch unnötige Elemente auf dem Schirm verlorengeht.

 In der Handskizze vom letzten Mal hatten wir bereits festgelegt, wie die Kosten nach Bereichen aufgegliedert werden sollen. Jeder der Kostenbereiche kann mit dem Finger angetippt werden und führt so zu einem Schirm detaillierteren Infos. Nun folgt der Schritt, indem diese Designidee für die Zielpattform konkret umgesetzt wird.

Wir begannen das Design beispielhaft für das iPhone 4. Warum gerade das iPhone 4? Weil Apple genaue Empfehlungen liefert, wie bestimmte Dinge umzusetzen sind. So sieht der Kostenüberblick also auf dem iPhone aus:

Jedem iPhone-Benutzer wird unsere Gliederung der Kosten vertraut sein, einfach weil es auf den ersten Blick nach „iPhone“ aussieht. Für die Kostenbereiche haben wir Apples „Standardelemente“ verwendet und für die Mein A1 App erweitert.

Ganz anders gingen wir im oberen Bildschirmbereich vor: der „Header“, der neben dem A1 Logo die Gesamtsumme und Infos über den Rechnungszeitraum zeigt, folgt keiner Apple-Konvention. Der Grund dafür: die Design-Herausforderungen hier waren deutlich komplexer.

• Um welche Kosten geht es auf diesem Schirm?  Wir entschieden uns für eine großzügige Überschrift („Aktuelle Verbindungsentgelte“), die auf einen Blick klar macht, welche Infos auf diesem Schirm zu finden sind.
• Sofortiger Überblick über die Gesamtsumme: Die Gesamtsumme ist die wichtigste Zahl auf diesem Schirm, deshalb stellen wir sie entsprechend prominent dar.
• Egal, welches Detail des Schirms der Benutzer ansieht, egal wie weit er hinunter scrollt: Die Gesamtsumme soll immer sichtbar bleiben, damit man die Zahlen vergleichen kann.
• Trotzdem soll der Header nicht unnötig groß werden. Handydisplays sind klein, und wir wollten möglichst viel Platz für die Anzeige der Details weiter unten nutzen.

Kurz: gefragt war ein Header, der beim Scrollen nicht verschwindet, aber sich auch nicht „wichtiger nimmt“ als die Information, die der Benutzer gerade sehen will.

Die Lösung: Ein „smarter“ Header! Beim Scrollen bleibt er sichtbar, wird aber niedriger und macht damit Platz für die gewünschten Details. Unwichtige Informationen im Header und „dekorative Elemente“ (z.B. das A1 Logo) blenden wir automatisch aus – übrig bleiben die wichtigsten Infos: Titel und Gesamtsumme.

Der Header wurde also gänzlich „neu erfunden“ und ist somit auch „neu“ für erfahrene iPhone-User. Die Mischung aus Bekanntem und Neuem macht’s also aus. Das Bekannte sorgt dafür, dass man sich auch in einer neuen App gleich daheim fühlt und sofort loslegen kann. Und das Neue (wenn es richtig dosiert ist) schafft Interesse und Abwechslung.

Schritt 4: “Mein A1” soll gut aussehen und Spaß machen

Wir meinen: Was gut aussieht, macht auch mehr Spaß – selbst bei einer App, bei der es eher um „trockene“ Themen wie Minuten, Megabytes und Euros geht.

Spannend dabei war vor allem: wie sieht „Mein A1“ auf Android-Phones aus? Apple sorgt wie erwähnt dafür, dass alle Apps bestimmten Regeln folgen – und dabei auch eine ästhetischen Mindeststandard haben. Android hingegen ist eher für eine Menge, sagen wir mal, optisch seltsamer Apps bekannt.

Aus dieser „Tradition“ wollten – im Positiven – ausbrechen. Unser Anspruch an das „Mein A1“ Design auf Android war nicht weniger als:

• Es soll mindestens so modern aussehen wie auf iPhone
• Es soll zu den neuesten Android-Versionen (Honeycomb, Ice Cream Sandwich) passen – optisch und in der User Experience
• Es soll hochwertig sein und zu A1 passen

Unser Design seht ihr hier – rechts die Android Verion und links zum Vergleich die iPhone Version:

Welche Version gefällt euch besser? Wir sind auf eure Kommentare gespannt!

David