User Interfaces Wie sich das iPhone auf die Gestaltung von Benutzeroberflächen auswirkt

Redakteur: Dipl.-Ing. (FH) Hendrik Härter

Dynamische Effekte bei der Navigation moderner User Interfaces sind weit verbreitet. Nicht zuletzt durch iPad oder iPhone. So finden dynamische Oberflächen auch im industriellen Umfeld ihren Einsatz.

Anbieter zum Thema

Erfolgreiche (Software-)Produkte im Consumer-Bereich prägen die Entwicklung von Anwender-Software in der Industrie. Insbesondere bei der Gestaltung von Bedienoberflächen, den so genannten User Interfaces, hat Apple mit seinem iPhone und iPad großen Einfluss auf die Neu-Priorisierung von Qualitätskriterien genommen.

Ein hohes Maß an Benutzerfreundlichkeit und der "Spaß an der Bedienung", dem Joy of Use, werden heute über alle Anwendungsbereiche hinweg als wichtige Qualitäts- und auch Akzeptanzfaktoren einer erfolgreichen Software angesehen.

Drei wesentliche Dinge einer guten Usability

Ergänzendes zum Thema
6 wichtige grafische Basiselemente

Wir zeigen Ihnen sechs grafische Basiselemente, die ein Visualisierungswerkzeug beherrschen sollte:

  • Animationen: unterstützt werden Visualisierungen von Element-Zusammenhängen bei Zustandsänderungen oder Bildübergängen (Genie Effect)
  • Transparenzen: Bildschirminhalte lassen sich überlagern, ohne den ursprünglichen Inhalt komplett zu überdecken
  • Freie Überlagerung von Elementen (Overlay): Freie Platzierung von "Inspektoren" oder "Toolbars" auf der Arbeitsfläche
  • 3-D-Unterstützung: Erleichtern dem Benutzer die mentale Übertragung der dargestellten Situation auf die reale Maschine. Durch Drehung und Animation des 3-D-Modells können schwer einsehbare Maschinenbereiche im Fehlerfall komfortabel beobachtet werden. ("Showcase zur Veranschaulichung von Error Handling")
  • Unterstützung zur Statusabfrage von Eingabegeräten: Reaktion auf verschiedene Zustandsebenen bei Interaktionen, beispielsweise Mouse Over, gehört zum Standard
  • Farbverläufe, abgerundete Ecken oder Schatten: Diese rein grafischen Effekte tragen maßgeblich zur allgemeinen Attraktivität des User Interface bei

Apple gilt im Consumer-Bereich als ein Vorreiter für anwendergerechte Benutzeroberflächen. Der Kontakt mit iPhone und Co. im privaten Umfeld weckt bei vielen Benutzern häufig den Wunsch, diese Art der Software auch im beruflichen Umfeld vorzufinden.

Viele Projekte bei Ergosign beginnen mit dem Kundenwunsch: "Können wir das wie beim iPhone machen?". Die Formulierung zeigt, dass diese Aussage eher ein wahrgenommenes Nutzungserlebnis, die so genannte User Experience ist, als eine konkrete Anforderung beschreibt.

Zu einer guten Usabiltiy gehören drei Dinge:

  • eine intuitive und an die zielgruppenspezifischen Anforderungen angepasste Benutzerführung (Navigation),
  • ein übersichtliches und effizientes Layout sowie
  • eine moderne visuelle Gestaltung.

Zur Realisierung dieser Aspekte bedienen sich moderne Visualisierungen einer Reihe dynamischer Effekte, wie beispielsweise Animationen und Transparenzen, einem flexiblen Layoutsystem oder den Einsatz von 3-D-Objekten. Die Zustandsänderung von Buttons zum Beispiel bei "Click" oder "Touch" zählt hierbei zum absoluten Standard.

Haben Sie schon einmal beobachtet wie sich eine Registerkarte auf dem iPhone hin- und wieder zurück dreht, um die Inhalte beider Seiten zu offenbaren? Die Animation des Übergangs ist hierbei der entscheidende Moment, um dem Benutzer durch die simulierte Drehung zu signalisieren, wie beide Screens zusammenhängen.

Das Systemfeedback und eine lebendige Visualisierung

Auch wenn das Systemfeedback als ein Kernkriterium für gute Usability sicherlich noch mehr umfasst, lässt sich die Anwendung des beschriebenen Effekts am ehesten hierunter einordnen.

Im Wesentlichen geht es darum, die erlebte Interaktion durch eine angereicherte Visualisierung "lebendig" erscheinen zu lassen und dem Benutzer hierdurch das intuitive Verständnis des gesamten User Interface zu erleichtern. Folglich könnte man es auch "Liebe zum Detail" nennen, die für das anfangs zitierte "Apple-Gefühl" mitverantwortlich ist.

Die grafische Bedienoberfläche als Alleinstellungsmerkmal

Viele Kunden suchen nach Differenzierungsmerkmalen, die ihre Produkte über die technische Finesse hinaus vom restlichen Markt abheben. Ansatzpunkte werden häufig in der Optimierung der Bedienoberfläche identifiziert. Der in diesem Fall starke Innovationsanspruch des Kunden erlaubt den Griff in den Effektbaukasten, der das Interface von seiner Konkurrenz abheben soll. Der Geschäftsführer von Ergosign sieht das ähnlich wenn er sagt, dass in den letzten ein bis zwei Jahren ein deutlicher Anstieg von Projekten dieser Art zu spüren war.

Worin genau das Potential liegt, das diese starke Resonanz rechtfertigt, sollen die folgenden Beispiele veranschaulichen.

Reizüberflutung bei der Interaktion vermeiden

Der wichtigste Grundsatz vorweg: Weniger ist mehr. Wir alle erinnern uns an die ersten Versuche im Webdesign der neunziger Jahre. Der Einsatz von animierten Flaggen und blinkenden Schriftzügen gehörte sozusagen zum guten Ton. Das Ergebnis der unverhofften Gestaltungsmöglichkeiten und deren freie Kombination war im besten Fall irritierend, in der Regel jedoch wenig zielführend.

Der Einsatz eines Effektes sollte daher immer durch einen zu erwartenden Benutzungseffekt motiviert sein. Dies stellt insbesondere bei Monitoring-Systemen sicher, dass die relevanten Informationen keiner Reizüberflutung zum Opfer fallen.

Visualisierungen erleichtern die Kommunikation mit Laien

Ein konkreter Anwendungsfall ist die Prozessvisualisierung im technischen Umfeld. Diese ist häufig komplex und insbesondere für den Laien auf den ersten Blick schwer zu verstehen. Design-Konzepte wie das schrittweise Einblenden von Informationen, dem Progressive Disclosure, oder Prozessanimationen technischer Vorgänge können komplexe Zusammenhänge vereinfachen und die Zugänglichkeit für alle Benutzergruppen deutlich erhöhen.

Ein weiterer wichtiger Aspekt ist, dass die Navigationsstrukturen verdeutlicht werden, um die Orientierung in einem System zu erhöhen. Die Idee davon, welche Inhalte "links und rechts" von dem aktuell angezeigten Bildschirmausschnitt liegen, ergibt für den Benutzer einen klaren Orientierungsvorteil.

Das gilt insbesondere für Systeme mit kleinen Bildschirmen die gezwungen sind, ihre Informationen auf viele Bildschirme zu verteilen, wodurch Bildschirmzusammenhänge an Bedeutung gewinnen.

Lesen Sie weiter: Einfache Animationen erleichtern die Benutzerführung

Einfache Animationen erleichtern die Benutzerführung

Das iPhone löst dieses Problem beispielsweise durch eine Seitwärts-Animation des aktuellen und folgenden Bildschirminhalts und verzichtet somit auf die eher technisch geprägte Baum-Darstellung oder Tree Navigation. Auf größeren Bildschirmen hingegen werden Animationen genutzt, um Elementzusammenhänge zu verdeutlichen.

Minimiert man bei Windows beispielsweise ein Dokument oder Ordner, kann dessen Weg in die Task Bar in der unteren Bildschirmzeile durch eine kurze Animation direkt nachvollzogen werden. Fragen wie "Wo ist das Dokument?" oder "Wie bekomme ich es wieder?" werden hierbei elegant durch eine simple Animation beantwortet. Die "Genie Effects" sind ebenfalls in Apples Betriebssystem OS X vorhanden.

Potenziell kann fast jede vom Benutzer ausgeführte Interaktion durch den Einsatz solcher Effekte visuell unterstützt werden. Abschließend wird die visuelle Attraktivität des User Interface im Allgemeinen gesteigert.

Der Einsatz von Fadings, also dem langsamen Ein- und Ausblenden von Inhalten, und Animationen beispielsweise beim Öffnen und Schließen eines Informations-Containers, lässt ein Interface "weicher" und damit angenehmer erscheinen.

Wir sprechen beim Design dieser Interaktionsübergänge allgemein von "User Experience", die wiederum den Kreis zum "Apple-Gefühl" schließt.

Der Technolgiewechsel sollte gut überlegt sein

Erfahrugnsgemäß geht einem möglichen Technologiewechsel ein längerer Entscheidungsprozess voraus. In vielen Fällen erlaubt die tiefe Verankerung der aktuellen Technik ohnehin keinen spontanen Wechsel. Das Ergebnis sind moderne Konzepte für bereits etablierte Technologien.

Vor allem Effekte wie flüssige Animationen und 3-D-Darstellungen stellen teilweise neue Anforderungen an moderne Visualisierungssysteme und haben je nach eingesetzter Technologie starken Einfluss auf die System-Performanz und Aufwände in der Implementierung. Die Entscheidung bei einem anstehenden Wechsel sollte demnach gründlich abgewogen werden. Es ist empfehlenswerte, den Punkt "dynamische Effekte" direkt mit in die Anforderungsliste aufzunehmen.

Technik- und Designfachleute rechtzeitig zusammen bringen

Der Einfluss der Technologie auf das Design verdeutlicht die Vorteile einer interdisziplinären Zusammenarbeit von Technik- und Designabteilungen. Ergosign empfiehlt, technisch Verantwortliche und Designer frühzeitiger an einen Tisch zu bringen. Die enge Partnerschaft mit einem ausgewählten Technik-Dienstleister stellt sicher, dass bei der Konzeption und Implementierung alle die gleiche Programmier-Sprache sprechen.

Bei der Technologiefrage bietet WPF (Silverlight) von Microsoft nach heutigem Stand eine gute Ausgangslage und sollte bei der Evaluation in die nähere Auswahl aufgenommen werden. Die Hersteller diverser Visualisierungs-Plattformen versuchen bereits die Microsoft-Technik nativer in ihre aktuellen Werkzeuge zu integrieren, um alle Gestaltungsvorteile nutzbar zu machen.

User Experience auf technische Anwendungen übertragen

Positive Nutzungseffekte von Consumer-Produkten und die damit verbundene Chancen für technische Software sind in den letzten Jahren verstärkt in das Bewusstsein der Projektverantwortlichen vorgerückt. So wird zunehmend versucht, die positive User Experience klassischer Anwender-Software wie das iPhone auf die eigenen technischen Anwendungen zu übertragen.

Aufwand und Kosten sowie ein eventueller Technologiewechsel zahlen sich in der Regel in vielerlei Hinsicht aus. Neben reduzierten Supportkosten und Schulungsaufwänden kann die Kundenbindung und Zufriedenheit nachhaltig gesteigert werden.

* * Jan Groenefeld ist Senior User Interface Designer bei Ergosign.

Jetzt Newsletter abonnieren

Verpassen Sie nicht unsere besten Inhalte

Mit Klick auf „Newsletter abonnieren“ erkläre ich mich mit der Verarbeitung und Nutzung meiner Daten gemäß Einwilligungserklärung (bitte aufklappen für Details) einverstanden und akzeptiere die Nutzungsbedingungen. Weitere Informationen finde ich in unserer Datenschutzerklärung.

Aufklappen für Details zu Ihrer Einwilligung

(ID:28568570)