Lade Inhalt...

Die neue Simplizität im Interface Design

Skeuomorphismus versus Flat Design

Masterarbeit 2013 65 Seiten

Kunst - Computerkunst, Medienkunst

Leseprobe

Inhaltsverzeichnis

Kurzfassung

Abstract

1 Einleitung
1.1 Das Interface
1.2 Die Simplizität

2 Skeuomorphismus
2.1 Definition
2.2 Skeuomorphismus oder Realismus?
2.3 Realismus in User Interfaces
2.4 Die Vorteile von Realismus im UI Design
2.4.1 Metaphern
2.4.2 Emotionen
2.4.3 Technik
2.4.4 Hardware
2.5 Die Probleme von Realismus in UIs
2.5.1 Das Uncanny Valley des Interface Designs
2.5.2 Die Einschränkungen skeuomorphen Designs
2.5.3 Retina Displays
2.5.4 Realistische Icons

3 Flat Design
3.1 Die Modern UI Designprinzipien
3.1.1 Prinzip 1: Stolz auf gute Arbeit
3.1.2 Prinzip 2: Weniger ist oft mehr
3.1.3 Prinzip 3: Schnell und dynamisch
3.1.4 Prinzip 4: Authentisch digital
3.1.5 Prinzip 5: Gemeinsam gewinnen
3.2 Das Modern UI Design
3.2.1 Navigation
3.2.2 Icons
3.2.3 Typografie
3.2.4 Animation
3.2.5 Live Tiles
3.3 Ursprünge und Einflüsse
3.3.1 Swiss Style
3.3.2 Informationsdesign
3.3.3 John Maeda: Gesetze der Einfachheit
3.4 Das iOS Re-Design

4 Skeuominimalismus
4.1 Probleme des Flat Design
4.2 Definition
4.3 Design
4.4 Skeuominimalismus bei Google

5 Fazit: 2D funktioniert besser auf Touchscreens

A Inhalt der CD-ROM/DVD
A.1 Hauptdokument
A.2 Abbildungen
A.3 PDF Dateien
A.4 Online Quellen

Quellenverzeichnis

Literatur

Filme und audiovisuelle Medien

Online-Quellen

Kurzfassung

Mit dem iPhone beschritten die Designer von Apple erstmals erfolgreich neue Wege des mobilen Interface Designs. Mit Metaphern beziehungsweise soge- nannten Skeuomorphismen (Designrichtung, in der Materialien und Dinge aus der realen Welt digital imitiert werden) sollte dem User der Einstieg in das neue Medium Smartphone erleichtert werden, er sollte das Gerät intui- tiv bedienen können. In Folge dessen setzten viele User Interface Designer auf diese Effekte als Eye-Candy für ihre Applikationen, wobei die Usability leider oft in den Hintergrund trat.

Es scheint, als ob die Simplizität der Anfangstage des digitalen Zeitalters ins Interface Design zurückgekehrt ist. Microsoft hat mit dem Interface De- sign des Windows Phone 7 erstmals diese radikale neue Richtung eingeschla- gen. Das Flat Design (von Microsoft auf den Namen Modern UI getauft) kommt völlig ohne Objektschatten, Farbverläufe und dreidimensional wir- kende Grafiken aus. Authentically Digital ist das neue Motto des Konzerns und das genaue Gegenteil zum Skeuomorphismus. Dazwischen liegt der bei Android Geräten vorherrschende Stil des Skeuominimalismus, der Teile aus beiden Designrichtungen übernimmt.

In dieser Arbeit wird die neue authentisch digitale Designpolitik von Mi- crosoft bei der Gestaltung von mobilen Interfaces untersucht und mit dem bisher vorherrschenden Designstandard bei mobilen Apple Geräten vergli- chen.

Abstract

With the iPhone designers broke new ground in the area of mobile interface design. By creating metaphors (or so-called skeuomorphisms, a design type where materials and things from the real world are imitated), the designers tried to make the first steps into the new media smartphone easier for users. The idea was that users should be able to handle the new device intuitively. As a consequence, many designers used these effects as eye candy for their applications. Unfortunately, the usability often faded into the background.

It seems as if the simplicity of the early digital age has returned to inter- face design. Microsoft broke out in this radical new direction with the design of its Windows Phone 7 interface. The Flat Design (Microsoft calls it Mod- ern UI) does not need any shadows, gradients or 3D graphics. Authentically digital is the new slogan of the movement, which is the extreme opposite of skeuomorphism. Between these two styles lies skeuominimalism, which is prominently used on Android phones and inherits rules of both design types.

In this thesis, the new authentically digital policy of Microsofts mobile interface design will be examined and compared with the yet prevalent design standard of mobile Apple devices.

Einleitung

1.1 Das Interface

Das Interface stellt die Schnittstelle zwischen Mensch und Computer dar, so wie das Lenkrad eines PKWs die Schnittstelle zwischen Mensch und Au- to bildet. Das Lenkrad wurde so gestaltet, dass es angenehm in der Hand liegt und sich intuitiv und einfach bedienen lässt: Dreht man es nach links, fährt das Auto auch nach links. Die Form des Interfaces ergibt sich aus den physischen Eigenschaften der zwei Parteien, die miteinander interagieren. Um es für einen Menschen sinnvoll benutzbar zu machen, muss es auf sei- ne jeweiligen Bedürfnisse und Fähigkeiten angepasst sein. Ein Lenkrad im Heck des Autos beispielsweise wäre unpraktikabel. Die Benutzerschnittstel- le ermöglicht dem User oft über das Bedienen hinaus auch das Beobachten des Zustands der Maschine und das Eingreifen in deren Arbeitsvorgang. Bei einem PKW würde das Feedback der Maschine beispielsweise über den Ta- chometer, die Tankanzeige, die Blinkerlampe etc. funktionieren. Eingreifen kann der Benutzer zum Beispiel mit Befehlsgebern wie Gaspedal, Bremse und Lenkrad.

Der Erfolg eines Interfaces hängt stark von der User Experience, also von den Erfahrungen und Erlebnissen eines Benutzers in Zusammenhang mit einem Interface, ab. Bereits im 9. Jahrhundert definierte der römische Architekt Marcus Vitruvius Pollio drei Prinzipien des Benutzererlebnisses [54]:

- Firmitas (Festigkeit)
- Utilitas (Nützlichkeit)
- Venustas (Schönheit)

Dabei sollte allen drei Prinzipien gleichermaßen Aufmerksamkeit geschenkt werden. Vitruv bezog sich dabei auf die Architektur, jedoch können diese Kriterien auch in anderen Bereichen wie Software angewandt werden. Fir- mitas (die Festigkeit) kann bei einer Applikation bedeuten, dass sie stabil und sicher läuft. Utilitas (die Nützlichkeit) steht für die möglichst einfache Benutzbarkeit einer App, allerdings wird die User Experience auch durch Venustas (die Schönheit) und durch Emotionen geprägt, wobei sich hier die Maßstäbe je nach Produkt ändern können. Während die Schönheit bei einer Taschenrechnerapplikation eine kleinere Rolle spielt, wird bei einem Fotobearbeitungsprogramm wahrscheinlich mehr Aufmerksamkeit auf die Ästhetik des Interfaces gelegt. Idealerweise können Benutzer ein Interface von selbst intuitiv - also ohne Schulungsaufwand - bedienen.

Eine nicht unbedingt ideale Benutzerschnittstelle bietet der berührungsempfindliche Bildschirm, also auch die Touchscreen, da der Finger als Bedienelement jedes Icon, das gedrückt wird, bei der Eingabe verdeckt. Dies ist in der Regel glücklicherweise unproblematisch, das präzise Schreiben oder Zeichnen mit dem Finger ist allerdings schwer möglich.

Mittlerweile haben sich verschiedene Herangehensweisen an das mobile User Interface Design ergeben: Das skeuomorphe Interface Design, das in- tuitiv bedienbar sein soll indem es Dinge aus der realen Welt imitiert und das schlichte und puristisch digitale Flat Design. Dazwischen liegt ein Hybrid aus den beiden Richtungen, der Skeuominimalismus. Während skeuomorphes Design eine menschliche und oft etwas verspielte Herangehensweise wählt, um die Interaktion von Mensch mit Maschine zu ermöglichen, geht das neue Flat Design in die genau entgegengesetzte authentisch digitale Richtung. Der Skeuominimalismus übernimmt Prinzipien aus beiden Designrichtungen.

1.2 Die Simplizität

Einfachheit oder Simplizität ist ein Zustand, der aus so wenig wie möglichen verschiedenen Bestandteilen aufgebaut ist. Das Zusammenspiel dieser Be- standteile ist durch so wenig wie mögliche Regeln definiert. Man muss hier zwischen Simplizität des grafischen Interfaces und der Einfachheit der Be- dienbarkeit (der Usability) unterscheiden. Die voranschreitende Technik hat unser Leben bereichert, allerdings kommt es immer öfter vor, dass sich User damit überfordert fühlen. Eine Flut von detaillierten hyperrealistischen Gra- fiken und Funktionen verschmutzt die Informationslandschaft. Die Forderung nach Einfachheit wurde laut, da besonders Hersteller von Mobiltelefonen die immer gleichen Dinge mit immer mehr zusätzlichen Funktionen in vermeint- lich verbesserter Form auf den Markt brachten. Einfachheit verkauft sich heutzutage gut, wie man an der puristischen Eingabemaske der Suchmaschi- ne Google feststellen kann. „Googeln“ wurde zum Synonym für die Suche im World Wide Web und findet sich sogar im deutschen Duden[37].

Smartphones werden heute immer und überall verwendet, daher ist es wichtig, Interfaces zu kreieren, die in jeder Situation optimal bedienbar sind und nicht nur in einer ruhigen Testumgebung funktionieren. Es kann pas- sieren, dass jemand an einer überfüllten Straßenkreuzung auf seinem Phone nach dem richtigen Weg sucht und dabei vielleicht noch eine Tasche in der Hand hält. Auch Sonnenlicht kann die Screen schwer lesbar machen. In ei- ner Büroumgebung wird der User vielleicht durch Telefonate oder Kollegen abgelenkt, er muss also das Smartphone auch mittels Multitasking bedienen können.

Auch muss laut Giles Colborne, dem Autor des Buches Simple and Usea- ble, auf die Erfahrung beziehungsweise die Sachkenntnis der einzelnen User eingegangen werden [1, S. 24-30]. Experten haben beispielsweise Spaß dar- an, das Gerät zu erforschen und es an die Grenzen seiner Möglichkeiten zu treiben. Sie wenden viel Zeit auf um die Funktionen des Smartphones zu erlernen und auf ihre speziellen Bedürfnisse anzupassen. Jedoch existieren nur sehr wenige User, die in diese Kategorie fallen. Die nächste Gruppe sind laut Colborne die sogenannten „Willing Adopters“. Dies sind jene User, die sich bereits mit Smartphones befasst haben, aber bereit sind, ein komplexe- res Gerät zu erlernen, das sich aber nicht zu extrem vom bereits erlernten Phone unterscheiden sollte. Auch in diese Gruppe fallen nur sehr wenige User und ihre Toleranz der Menge des neu zu Erlernenden ist sehr niedrig. Der Hauptanteil der Smartphone User fällt in die Kategorie der Mainstre- amer. Sie verwenden das Gerät nicht um der Technologie Willen, sondern um damit Aufgaben und Tätigkeiten auszuführen. Sie erlernen meistens nur einige wenige Schlüsselfunktionen des Phones. Sie wollen nur, dass das Gerät funktioniert. Es ist verführend anzunehmen, dass die User von einer Gruppe in die nächste aufsteigen wenn sie das Gerät benutzen, doch das passiert laut Colborne fast nie. Da die Mehrheit der Benutzer in die letzte Kategorie fallen, sollten die Geräte auch für diese Gruppe gestaltet werden.

2 Skeuomorphismus

In den letzten Jahren hat das mobile User Interface Design vor allem bei Apple Geräten eine Richtung eingeschlagen, in der Dinge und Materialien aus der realen Welt im digitalen Raum imitiert werden. Anfangs dienten Metaphern dazu, dem User den Einstieg in das neue Medium Smartphone zu erleichtern, da diese oft ängstlich an neue Dinge herangehen. Sie haben Angst, Daten zu zerstören oder dem Gerät zu schaden. Oft fürchten sie auch, vor anderen Usern als dumm da zu stehen. Metaphern sollten dazu dienen, den Menschen diese Angst vor dem Neuen und Unbekannten zu nehmen und sie mit altbekannten Dingen aus der realen Welt an das neue Medium heran- zuführen. Mittlerweile hat sich aus diesem gut gemeinten Ansatz aber schon eine eigene und teilweise ausschließlich visuelle Stilrichtung im UI Design entwickelt. Geht man diesem Designtrend nach, stößt man schnell auf den Begriff Skeuomorphismus.

2.1 Definition

Das Wort Skeuomorphismus kommt aus dem Griechischen und setzt sich aus den Begriffen Skeuos (Utensilien) und morph (Gestalt) zusammen. Im deutschen Duden Wörterbuch findet man dazu keine Definition. Im Oxford Dictionary hingegen wird Skeuomorphism wie folgt definiert[50]:

An object or feature which imitates the design of a similar artefact made from another material.

Computing an element of a graphical user interface which mimics a physical object: Note-taking apps offer skeuomorphs of yellow legal pads, squared paper, ring binders, etc. When you first load up the app, you’ll be presented with a skeuomorph of a photo album.

Ursprünglich wurde der Begriff bei altertümlicher Keramik verwendet, bei der zum Beispiel silberne Becher, die aus preislichen Gründen der Ober- schicht vorbehalten waren, aus billigerer Keramik hergestellt wurden um dem einfachen Mann ein Gefühl eines elitären Status zu geben. In der Mo- derne sind sogenannte physische Skeuomorphismen noch immer auf vielen Produkten zu finden. Auf billigen Plastikspielzeugen findet man beispiels- weise in den Kunststoff gestanzte Schrauben, obwohl die eigentliche Funk- tion einer Schraube bereits durch die Verschweißung des Plastiks erreicht wurde, meist um das Spielzeug höherwertiger aussehen zu lassen. Auch bei Kleidungsstücken wird mit Skeuomorphismen gearbeitet: Viele Hosen oder Sakkos haben aufgenähte unbenutzbare Taschen als reine Dekoration. Sie werden auch angewandt um neue moderne Objekte mit Hilfe von alther- gebrachten Designs vertrauter erscheinen zu lassen und ihre Funktion klar darzustellen, wie zum Beispiel Glühbirnen die in Form von Kerzenflammen geblasen wurden und deren Licht sich auch wie eine Kerzenflamme verhält.

Der Begriff des digitalen Skeuomorphismus bezeichnet heute eine Art des Designs, welches bestimmte Eigenschaften von Materialien oder Dingen aus der physikalischen Welt imitiert, auch wenn der funktionelle Hintergrund dafür nicht vorhanden ist. Ein Beispiel ist die Nachbildung eines physikali- schen Buches mit animiertem Seitenblättern in Software. Ein Audio-Beispiel dafür ist das Geräusch eines fotografischen Verschlusses, das beim Drücken des Auslösers einer Digitalkamera wiedergegeben wird. Das akustische Feed- back eines erfolgreich geschossenen Fotos könnte beispielsweise auch durch ein rein digitales Geräusch wie einem Sinus-Ton erfolgen.

2.2 Skeuomorphismus oder Realismus?

Im Gegensatz zu Skeuomorphismus imitiert Realismus ausschließlich visuell den Stil von Materialien der realen Welt. Ein Beispiel dafür ist die Ledertex- tur in Apples Find My Friends App[16]. Realismus und Skeuomorphismus gehen jedoch oft Hand in Hand, skeuomorphe Designs tendieren oft dazu, realistisch auszusehen, um die Verbindung von digitaler und realer Welt klar hervorzuheben. Auf der anderen Seite sind auch die meisten realistischen Designs skeuomorph, da sonst der realistische Stil deplatziert wirken würde.

Während Realismus also ein lediglich visueller Stil ist, geht der Ein- fluss von Skeuomorphismus in einem Design viel tiefer. Am Beispiel von zwei verschiedenen digitalen Rechnern wird dies veranschaulicht (siehe Ab- bildung 2.1).

Ein früherer iPhone UI Designer meint auf die Frage nach seinen Gedan- ken über Skeuomorphismus in einem Interview des Magazins Fast Company folgendes[31]:

I think there are two parts of skeuomorphism. The first part is the way things look. Is it a certain texture, like glass or metal? For that kind of stuff, I think it just depends on the atmosphere you’re trying to create around your software. The other part of

Abbildung in dieser Leseprobe nicht enthalten.

Abbildung 2.1: Beide Rechner kopieren das Layout von Dingen aus der rea- len Welt, sie sind also beide skeuomorph. Der Rechner (a) imitiert zusätzlich noch durch Verläufe die Buttons und die Textur eines realen Taschenrech- ners[13], er ist skeuomorph und realistisch. Taschenrechner (b) wurde optisch im sogenannten Flat Design Stil erstellt[14], sein Aufbau ist aber dennoch skeuomorph.

skeuomorphism is the way things behave. When you flip something on screen, does it slide with momentum or decelerate, or does it behave in a very computer-like, unnatural way?

With the way things behave, I think skeuomorphism is an un- stoppable trend that seems to work really nicely on everything. But when it comes to the way things look, I think it’s more of a stylistic choice that really depends on the software that you’re creating.

2.3 Realismus in User Interfaces

In der Zeit vor dem iPhone war Realismus in User Interfaces nahezu aus- schließlich bei Computerspielen vertreten, wahrscheinlich um die Immersion (das geistige Abtauchen in die digitale Welt) der Spieler zu fördern. Das Interface des im Jahr 1996 in den USA von Blizzard Entertainment vorge- stellten PC Spiels Diablo zeigte zum Beispiel zwei steinerne Figuren zwischen

Abbildung in dieser Leseprobe nicht enthalten.

Abbildung 2.2: User Interface des Spiels Diablo, die rote Flüssigkeit steht für den Gesundheitsstatus des Spielers, die blaue für die Zauberkraft[21].

Abbildung in dieser Leseprobe nicht enthalten.

Abbildung 2.3: Das User Interface des Spiels Dead Space 3, die hellblau leuchtende „Wirbelsäule“ des Anzugs zeigt die Gesundheit, die halbkreisförmige Anzeige die „Stase“ Kapazität die zum Verlangsamen von Gegnern oder Gegenständen eingesetzt werden kann[15].

deren Flügeln jeweils ein Glas mit Flüssigkeit befestigt war, die dem Spie- ler den Status ihrer Gesundheit und Zauberkraft veranschaulichten (siehe Abbildung 2.2).

Auch das Inventar des Spielers wird in einem Regal mit realistisch wir- kender Steintextur stehend dargestellt. Diese Darstellung nennt man nicht- diegetisch, mittlerweile setzen die Spielentwickler jedoch vermehrt auf so- genannte diegetische User Interface Elemente. Diese werden mit Hilfe von Dingen in der Spielwelt dargestellt wie beispielsweise einem Anzug, der den Gesundheitszustand und andere Daten anzeigt wie in dem 2008 von Electro- nic Arts veröffentlichten Spiel Dead Space (siehe Abbildung 2.3).

Außerhalb des Spiele-Universums waren solche Texturen nahezu gar nicht anzutreffen.

Im Jahr 1995 stellte Microsoft sein innovatives Betriebssystem MS Bob vor, welches auf dem Prinzip des Realismus basierte[20]. Die Bezeichnung „Bob“ entstand aus dem Grund, da der Name Bob ein sehr geläufiger war und dem User von Anfang an vertraut vorkommen sollte. Es sollte intuitiv, einfach und lustig zu benutzen sein. Zu dieser Zeit war dies eine logische Schlussfolgerung, da der Durchschnittsbürger noch keinen Computer besaß. Microsoft stellte sich die Frage, was Ihren zukünftigen Usern am meisten vertraut war und womit sie gewohnt waren zu interagieren. Die Antwort lau- tete: mit ihrer natürlichen Umgebung in ihrem Zuhause. Daraus resultierte ein Betriebssystem in Form eines physischen Hauses. Um sich anzumelden musste der User auf einen goldenen Türklopfer klicken, eine Animation war zu sehen und ein Klopfgeräusch wurde abgespielt. Ein Assistent (Microsoft Office 97 noch als Hund oder Büroklammer mit Gesicht bekannt) fragte den User nach seinem Status: Gast oder Bewohner. Als Gast kam man in einen öffentlichen Raum, als Bewohner in die Umgebung, die man für sich erstellt hatte. Vom Spukschloss bis zur Raumstation war alles möglich. Alle instal- lierten Programme waren als Gegenstände im Raum angeordnet, mit der F1 Taste konnte der User sich die Programme anzeigen lassen. Um viele Programme unterzubringen, waren sie in einzelnen Räumen angeordnet die durch Türen miteinander verbunden waren. Der Assistent begleitet den User dabei ständig.

Der Industrie Newsletter Soft-Letter meinte zu Bob im Jahr 1995[44]: At first glance all this twitching and prancing looks like a bizar- re approach to interface design, but in fact the high-profile Bob characters have a purpose: They reinforce what Microsoft calls its new “social interface” between humans and PCs. In his CES keynote, Gates unveiled the intriguing new design principles be- hind Bob, principles that he predicts will become “the next major evolutionary step in interface design.” In essence, Gates suggests that the next generation of high-powered PCs will abandon tra- ditional graphical desktops in favor of “social” interaction with humanlike agents that can understand, learn, and interpret what the user wants.

Doch die meisten Kritiken klangen anders. Bob wies ernsthafte Usability Probleme auf. Die New York Times beispielsweise schrieb dazu folgendes[7]:

Bob is a poor neighbor. It stores its data in formats that better programs cannot easily import. It perversely reverses the positi- ons of “OK” and “Cancel” buttons that have become standard. But then, a foolish inconsistency is a hobgoblin of Bob. Pressing Control and L in the home area lets you adjust the sound volume; doing the same thing when using the address book brings up the mailing list. Again and again, Bob tells you to do something but will not let you do it until you click an “OK” button.

MS Bob wurde ein Flop für Microsoft. Doch Realismus in User Interfaces erwacht wieder zu neuem Leben, dieses Mal war Apple der Auslöser. Das ers- te Anzeichen des erneuten Übergreifens des Realismus waren wahrscheinlich die sogenannten „Web 2.0“ Glas Buttons der ersten Version des Betriebssys- tems Mac OS X. Man könnte dieses kitschig anmutende Layout als erstes Warnzeichen für Apple Gründer Steve Jobs Obsession mit realistischen De- signs sehen. Der Autor Austin Carr schrieb in einem online Artikel für das Magazin Fast Company, dass die Ledertextur in der Apple OS X Applikation iCal eine Kopie der Ledersitze in Steve Jobs’ Gulfstream Privatjet sei[32].

Ein früherer iPhone UI Designer sagt dazu im Interview mit dem Magazin Fast Company [31]:

At Apple, it ultimately comes down to the tastes of whoever is making decisions. At Apple, Steve Jobs and the management are from an older generation where that kind of stuff is more in people’s consciousness, and so that’s kind of the style that things went in. But I’m sure it will change over time.

Als diese Texturen, realistische Designs und animiertes Seitenblättern in der mobilen Software der Gegenwart auftauchten, waren die User begeistert, da es so eine visuelle Reichhaltigkeit in mobilen User Interfaces vorher noch nicht gegeben hatte.

2.4 Die Vorteile von Realismus im UI Design

Bis in die späten achtziger Jahre hatte man eine klare Vorstellung davon, wie die Zukunft aussehen wird: auf irgend eine Weise technisch und digital. Dies wirkte sich auch auf die Designs und die Typografie aus. Alles musste sauber, konstruiert und kühl sein. Eine warme, menschliche und verspielte Zukunft war undenkbar, denn digitale Technik ist erbarmungslos was ihre Kühle und Berechenbarkeit angeht. Schließlich hat man es mit Mathematik und Logik zu tun, mit Null und Eins. Skeuomorphes Design bedient sich heute einer völlig anderen Herangehensweise an das Problem der Mensch- Computer Schnittstelle.

2.4.1 Metaphern

Metaphern sind natürliche Bestandteile unserer Sprache, meist bemerken wir sie gar nicht. Gerät man zum Beispiel in einen Streit, spricht man von einem Wort gefecht, man vergleicht den Streit also mit einem militärischen Akt. Ein Streit hat Argumente, die verteidigt und attackiert werden können, Strate- gien werden entwickelt. Es gibt eine Menge konkrete militärische Begriffe um den sehr abstrakten Ablauf eines Streits zu beschreiben. Man spricht nicht nur in Form eines Krieges von Streit, man fühlt sich auch meistens so, als ob man in Selbigen geraten wäre. Dies ist nicht das einzige Beispiel von Sinnbildern, sie begegnen uns in verschiedenen Formen täglich. Allein der allbekannte Desktop ist nichts als eine Metapher. Verschieben wir ein Dokument von einem Ordner in den anderen, wird nicht etwa das ganze Dokument verschoben, es wird nur ein Zeiger auf die Datei geändert (wobei der Zeiger selbst wiederum nur eine Metapher darstellt).

Diese Metaphern sollen in Form von realistischem Design dabei helfen, althergebrachte Dinge aus der realen Welt mit der neuen digitalen Gegen- wart verbinden zu können. Der User soll, basierend auf seinen Erfahrungen mit dem Gerät in der realen Welt, welches die Software repräsentiert, sofort verstehen, wie das Interface funktioniert. Dies soll es ihm erleichtern, sich auf dem neuen Gerät Smartphone schnell zurecht zu finden.

Einige Funktionen verschiedener Apps können tatsächlich mit Hilfe von Metaphern für den User klarer verständlich dargestellt werden. Werkzeuge einer Bildbearbeitungs-App können beispielsweise in Form von Pinsel, Li- neal und Radiergummi abgebildete werden. Durch seine Erfahrung mit den Dingen aus der realen Welt weiß der User, wie sich das Tool in der Software wahrscheinlich verhalten wird und welche Funktion es besitzt.

Da der digitale Kalender am iPhone das Aussehen eines Papierkalenders besaß, war seine Funktion sofort offensichtlich (auch wenn sich später herausstellte, dass sich die virtuellen Seiten des Kalenders nicht durch Swipen umblättern ließen, dafür diente ein Button).

Um ein gutes UI zu kreieren ist es für den Designer essentiell zu ver- stehen, welche Voraussetzungen der Benutzer mitbringt, der es benutzt. Er muss verstehen, mit welchen Abläufen und Funktionen von Produkten und Services der User von vornherein vertraut ist. Ein gutes Beispiel dafür ist das Amazon Kindle Touch, ein E-Book Reader, der genau die richtigen Desi- gnkonventionen eines physikalischen Buches, die immerhin über ca. 400 Jahre hinweg entwickelt wurden, übernimmt, die für das komfortable Leseerlebnis der User wichtig sind. Das Design wird durch altbekannte Typografie- und Layoutkonventionen wie zum Beispiel die Position der Seitenzahlen oder Ka- pitelüberschriften gestützt. Trotzdem sind die Anspielungen auf Bücher aus Papier sehr subtil, gerade genug um die Immersion des Lesers nicht zu stören. Der am iPad und iPhone vorinstallierten iBooks App fehlt aber genau diese Raffinesse, die das Amazon Kindle so beliebt macht[57]. Die iPad App wirkt mit ihrer aufwändigen Papiertextur unter dem Text und der Seitenblätter- Animation viel verspielter und leider auch sehr überladen. Dies macht es dem Leser schwer, komplett in die Welt, die der Autor in seinem Werk erschaffen hat, zu versinken. Es scheint so, also ob die iBook App nur dazu gemacht wurde, um in seinem Aussehen einem analogen Buch möglichst nahe zu kom- men wohingegen das Kindle gestaltet wurde, um sich für den Leser nur wie ein Buch anzufühlen (siehe Abbildung 2.4).

Ein früherer iPhone UI Designer meint dazu im Interview mit dem Magazin Fast Company [31]:

In terms of bookshelf example, well, the alternative can be found in lots of other e-reader apps. They tend to just be like a white list

Abbildung in dieser Leseprobe nicht enthalten.

Abbildung 2.4: Eine Buchansicht auf dem Amazon Kindle (a)[29]. Zum Vergleich auf dem Apple iPad mit iBooks Applikation (b)[27].

with black text on it. And little icons for the covers. Personally I just find it less inspiring. It doesn’t get me in the mood to read a book, like Apple’s bookshelf does. You have all these images that surround reading a book, like curling up next to a fire with a cup of tea, and reading a book next to a wooden bookshelf. These things are important to the experience of reading.

2.4.2 Emotionen

Mit skeuomorphen Designs sollen beim User Emotionen ausgelöst werden, die er mit dem Produkt aus der realen Welt verbindet, beispielsweise der Geruch und das Gefühl von Leder. Er bewertet die App daher vielleicht anders als eine rein digital aussehende. Ein früherer iPhone UI Designer sagt dazu in einem Interview des Magazins Fast Company auf die Frage, ob skeuomorphes Design bei Apple seiner Ansicht nach etwas Gutes sei[31]:

I think it’s an important tool. The thing to remember is that UI design is like selling a restaurant, where you can’t just serve up good food in order to run a restaurant. You have to create an environment around the food that gets people in the mood to enjoy a really great meal: presenting the food really nicely, picking the right plates, the lighting on the table, the music that is playing. When you put all that together, it creates a much nicer experience than if you just were to serve up some good food.

Viele realistische Apps imitieren Produkte aus der Vergangenheit, wie zum Beispiel die Retro Camera Plus App, die die Funktionen und Eigenhei- ten von fünf verschiedenen alten Kameras zur Verfügung stellt[23]. Darüber hinaus bietet sie einen Cross-Processing Effekt (ein Verfahren aus der ana- logen Fotofilmentwicklung), Vignettenmasken und einen Filter, der das Bild zerkratzt und alt wirken lässt. Inspiriert wurden die Designer der App von Lomo, Holga, Polaroid, Diana und anderen Plastikkameras. Diese Designrich- tung ist wohl auch einem Modetrend zuzuschreiben, wonach alte (sogenannte „Vintage“) Produkte in der heutigen Zeit wieder modern geworden sind. Da es schwierig und kostspielig ist, so ein altes Gerät wirklich zu erwerben und sich die Fähigkeit anzueignen, es bedienen zu können, bietet die Software eine preiswerte und einfach zugängliche Alternative. Der User kauft einen trendigen alten Apparat in digitaler Form für die Hosentasche mit dem er üben kann, ohne dabei Gefahr zu laufen, ein teures und vielleicht schon selten gewordenes Gerät zu zerstören.

2.4.3 Technik

Design wird immer von den technischen Beschränkungen denen es unterliegt beeinflusst. So auch das Design des iPhones. Frühere Mobiltelefone waren geprägt von überfüllten Listen mit fast mikroskopisch klein anmutenden ein- farbigen Icons. Als die mobilen Geräte schneller wurden und aufwändigere Grafiken zuließen, konnten sich die UI Designer endlich entfalten. Mit den Touchscreens kam auch die Ära des neuen eher unpräzisen Bedienelements Finger. Die Designer bei Apple empfahlen daher von Beginn an eine Touch Target Größe von mindestens 44 Mal 44 Pixel. Wo früher einfach kein Platz für aufwändige Grafiken war, war nun Raum für mehr. Ein weiterer Grund für Apples Entscheidung für dieses Design war sicherlich auch, dass - an- ders als beim Web Design - sie nur für ein einheitliches Gerät (das iPhone) und eine fixe Displaygröße designen mussten. All das ebnete dem Realismus inklusive Skeuomorphismus wahrscheinlich den Weg ins Softwaredesign.

2.4.4 Hardware

Im Gegensatz zum opulenten Softwaredesign mutet das Design der mobilen Apple Hardware kühl, sauber und fast außerirdisch an. Im ausgeschalteten Zustand kann man nicht erkennen, welche Funktion das Ding besitzt. Es existieren keine Schrauben, keine Klappe zum Wechseln des Akkus, keine Symbole und sehr wenig Beschriftung. Es ist eine mysteriöse Zauberbox, der man alles oder nichts zutraut. Dieses neutrale Aussehen ist jedoch für die Verwandlung des Geräts durch die Software unabdinglich. Mit dem Tippen des Fingers wird der rätselhafte Apparat plötzlich zum Synthesizer, zum Piano oder zu einem Buch. Für den User läuft dann kein Programm, das ihn Musik erzeugen und verändern lässt sondern das iPhone verwandelt sich

[...]

Details

Seiten
65
Jahr
2013
ISBN (eBook)
9783656939139
ISBN (Buch)
9783656939146
Dateigröße
3.6 MB
Sprache
Deutsch
Katalognummer
v295979
Institution / Hochschule
Fachhochschule Oberösterreich Standort Hagenberg
Note
2,00
Schlagworte
Skeuomorphismus Flat Design Interface User Usability UI UX Experience mobile online webdesign application iphone windows phone android

Autor

Teilen

Zurück

Titel: Die neue Simplizität im Interface Design