Animationen und Übergänge

Die strategische Verwendung von Animationen und Übergängen kann Ihr Programm leichter verstehen, reibungsloser, natürlicher und qualitativ hochwertiger gestalten und ansprechender sein. Aber die unnötige Verwendung von Animationen und Übergängen kann Ihr Programm ablenken und sogar störend machen.

Animationen geben das Erscheinungsbild von Bewegung oder Ändern im Laufe der Zeit. Verwenden Sie Animationen, um Feedback zu geben, eine Vorschau des Effekts einer Aktion anzuzeigen, die Beziehung zwischen Objekten anzuzeigen, die Aufmerksamkeit auf Änderungen zu lenken oder eine Aufgabe visuell zu erklären.

Microsoft Windows verwendet eine Hintergrundblitzanimation, um Feedback zu geben, dass auf das Objekt geklickt wurde.

Bei Übergängen handelt es sich um Animationen, mit denen Benutzer während Änderungen des Benutzeroberflächenzustands und Objektmanipulationen ausgerichtet bleiben und diese Änderungen reibungslos wirken, anstatt zu stören. Gute Übergänge fühlen sich natürlich und geben oft die Illusion, dass Benutzer mit realen Objekten interagieren.

Windows-Desktopgadgets verwenden reibungslose Übergänge zwischen ihren präzisen und detailierten Zuständen.

Im Allgemeinen werden die besten Animationen und Übergänge verwendet, um benutzern nicht verbal zu kommunizieren und Zustandsänderungen natürlicher und weniger spürbar zu machen. Im Gegensatz dazu sind die am wenigsten effektiven, dass sie nichts kommunizieren oder unnötige Aufmerksamkeit wecken. Animationen werden am besten als sekundäre Kommunikationsform verwendet. Sie sollten Informationen vermitteln, die nützlich, aber nicht kritisch sind und zugänglich sein sollten, die Benutzer in der Lage sein, gleichwertige Informationen auf andere Weise zu ermitteln.

Hinweis: Richtlinien für Softwarebranding, Sound-und Barrierefreiheit werden in separaten Artikeln vorgestellt.

Ist dies die richtige Benutzeroberfläche?

Berücksichtigen Sie die folgenden Fragen, um sich zu entscheiden.

Animationen

Gelten die folgenden Bedingungen?

• Die Animation kommuniziert visuell etwas Nützliches, z. B. Feedback geben, Beziehungen, Ursachen und Effekte anzeigen oder die Aufmerksamkeit auf wichtige Änderungen lenken.
• Die Anzeige der Animation ist nicht unerlässlich. Gleichwertige Informationen können auf andere Weise abgerufen werden. Benutzer profitieren möglicherweise nicht von der Animation, wenn:
  • Sie haben Animationen deaktiviert.
  • Ihre Aufmerksamkeit ist an anderer Stelle.
  • Sie sind sehbehindert.
  • Die Animation wird von einem anderen Fenster verdeckt.
  • Die Animation wird aufgrund unzureichender Systemleistung nicht wiedergegeben.
• Die Animation wirkt sich nicht auf die Produktivität des Benutzers aus. Entweder:
  • Dies geschieht schnell (200 Millisekunden oder weniger).
  • Es stört nicht die Interaktion oder kann unterbrochen werden.
  • Der Benutzer muss trotzdem warten.
• Die Animation wirkt sich nicht auf den Fluss des Benutzers aus.
  • Sie befindet sich entweder im Mittelpunkt der Aufmerksamkeit des Benutzers oder lenkt die Aufmerksamkeit auf etwas außerhalb der Aufmerksamkeitsmitte, die wichtig oder nützlich ist, um eine Aufgabe abzuschließen.
  • Es ist leicht ignorierbar, nicht ablenkend oder lästig.
  • Es wird nicht mühsam. Benutzer finden es auch nach wiederholter Anzeige immer noch angemessen und angenehm.

Wenn ja, erwägen Sie die Verwendung einer Animation.

Übergänge

Ändert sich ein Objekt oder eine Szene den Zustand, und gelten alle oben genannten Bedingungen für die Verwendung von Animationen sowie eine der folgenden Bedingungen?

• Die Zustandsänderung ist konzeptionell verärgert, verwirrend oder anderweitig schwer zu verstehen.
• Die Zustandsänderung ist visuell störend, mangelt es an Kontinuität oder Glättung oder Blitz; oder erscheint unnatürlich, unpolitiert oder von schlechter Qualität, insbesondere wenn sie einen großen Bildschirmbereich umfasst.
• Wenn Sie einen Übergang verwenden, wird die Zustandsänderung schneller angezeigt.
• Die Zustandsänderung ist besondere Aufmerksamkeit der Nutzer wert.

Wenn ja, erwägen Sie die Verwendung eines Übergangs.

Designkonzepte

Animationen und Übergänge sind eine effektive Möglichkeit, Informationen visuell zu kommunizieren, die andernfalls textweise erklären oder von Benutzern verpasst werden müssen.

Falsch:

Richtig:

Die Verwendung einer Animation kommuniziert dieselben Informationen, aber auf natürliche, unaufdringliche Weise. Was würden Sie lieber tausendmal sehen?

Animationen und Übergänge müssen keine Aufmerksamkeit erfordern, um erfolgreich zu sein. Tatsächlich werden sie häufig verwendet, um die Aufmerksamkeit auf Programmmechaniken zu vermeiden, die Benutzer nicht kennen müssen. Viele erfolgreiche Animationen sind so natürlich, dass Benutzer sie nicht einmal kennen; stattdessen würden die Benutzer nur ihre Abwesenheit bemerken. Die Häufigkeit des Auftretens erhöht den Bedarf an Subtilität, also sparen Sie Effekte, die Aufmerksamkeit für seltene Ereignisse verlangen, die wirklich die Aufmerksamkeit verdienen.

Ein Startmenüübergang, mit dem die Aufmerksamkeit vermieden wird.

Darüber hinaus ist es eine hervorragende Möglichkeit, Ihrem Programm Persönlichkeit, Charakter und Stil zu verleihen, gut gestaltete Animationen und Übergänge. Sie können die Benutzererfahrung immersiver und ansprechender machen, indem sie ihm ein natürliches, reales Gefühl geben.

Windows 7 hebt Taskleistenschaltflächen beim Daraufzeigen basierend auf der aktuellen Mausposition und der Programmsymbolfarbe hervor. Dieser Ansatz ist visuell attraktiv, aber dezent und vermittelt eine bescheidene Persönlichkeit.

Animationen und Übergänge sind jedoch am effektivsten und willkommen, wenn sie einem klaren Zweck dienen. Sie sollten verwendet werden, um die Benutzerfreundlichkeit, die Gleichmäßigkeit und den Fluss zu verbessern und die Wahrnehmung der Qualität zu verbessern, ohne die Leistung erheblich zu beeinträchtigen.

Während einige Arten von Animationen verwendet werden, um die Aufmerksamkeit des Benutzers zu lenken, stellen Sie sicher, dass die Aufmerksamkeit verdient und würdig ist, den Gedankenzug des Benutzers zu unterbrechen. Das menschliche Auge ist empfindlich für Bewegung, insbesondere periphere Bewegung. Es kann für Benutzer schwierig sein, sich zu konzentrieren, wenn eine blinkende Taskleistenschaltfläche oder ein sich drehendes Infobereichssymbol vorhanden ist. Vermeiden Sie die Verwendung von Animationen, um Benutzer zu unterbrechen oder abzulenken, oder lenken Sie die Aufmerksamkeit auf Dinge, die die Aufmerksamkeit des Benutzers nicht garantieren.

Falsch:

Programme sollten ihre Taskleistenschaltfläche nicht blinken, es sei denn, Benutzer müssen sofort etwas Wichtiges tun. In diesem Fall muss der Benutzer nur das Programm aktivieren.

Verwenden Sie Animationen und Übergänge, da Ihr Programm sie benötigt, nicht nur weil Sie können. Verwenden Sie für die Barrierefreiheit keine Animation als einzige Möglichkeit, wichtige Informationen zu vermitteln. Stellen Sie sicher, dass Benutzer äquivalente Informationen auf andere Weise abrufen können.

Attribute guter Animationen und Übergänge

Gute Animationen und Übergänge treffen das richtige Gleichgewicht zwischen diesen Attributen:

• Sind klar gezielt. Gute Animationen sind da, weil sie sein müssen, ob Sie Informationen kommunizieren, ein Interaktionsgefühl real machen oder die Aufmerksamkeit auf etwas beachtenswertes lenken müssen. Und zielgerichtete Animationen sind genau; Wenn eine Animation zeigt, dass eine Aufgabe ausgeführt wird, liegt dies daran, dass die Aufgabe tatsächlich ausgeführt wird.

Falsch:

In diesem Beispiel zeigt die Animation, dass ein vollständig geladener Akku geladen wird.

• Sehen Sie glatt und kontinuierlich aus. Gute Animationen entfernen problemlos Nahtlinien zwischen Szenen- oder Elementzustandsänderungen, indem Beziehungen angezeigt und ein Gefühl von Ort und Kontext bereitgestellt werden. Die Kontinuität hilft Benutzern zu verstehen, wie sie sich dort befinden und woher sie kommen.

Die Windows 7-Taskleistenfenster-Vorschau morpht zur Kontinuität, während der Benutzer von einem Programm zu einem anderen wechselt.

• Sind realistisch. Gute Animationen simulieren die realen physischen Eigenschaften und Verhaltensweisen eines Objekts. Dies hilft Benutzern, die Ergebnisse ihrer Interaktionen vorherzusagen und zu verstehen. Sie müssen die reale Welt nicht genau modellieren, aber wenn Sie realistische Animationen verwenden, müssen Sie sie mit der realen Welt konsistent halten. Benutzer sollten niemals von den Ergebnissen überrascht oder verwechselt werden, insbesondere bei Animationen, die für die direkte Manipulation verwendet werden.

In diesem Beispiel fühlt sich die von der Windows 7-Taskleiste verwendete Animation "aus dem Weg" realistischer als eine statische Einfügemarke.

• Sind authentisch. Selbst Objekte, die nicht in der realen Welt gefunden werden, können natürlich erscheinen, indem sie auf dem realen Verhalten eines anderen, aber verwandten Objekts basieren. Diese Metapher funktioniert nur, wenn die Beziehung eindeutig den beabsichtigten Zweck und das beabsichtigte Verhalten kommuniziert.

In diesem Beispiel fühlt sich die von Windows 7 verwendete Fensteranimation "Queegee" authentifiziert, da sie mit dem Verhalten von Glasfenstern in der realen Welt konsistent ist.

• Verwenden Sie natürliche Zuordnung. Natürliche Zuordnungen sind entweder physisch oder kulturell. Eine kulturell basierte natürliche Zuordnung könnte z. B. damit beginnen, dass die Menschen in westlichen Kulturen von links nach rechts lesen. Um eine Zeitabfolge von Objekten auszudrücken, ist das mittlere Objekt aktuell, Objekte links von der Vergangenheit und Objekte rechts sind in der Zukunft. In Zukunft wird die Zeit durch links-nach-rechts-Bewegung gekennzeichnet.

In diesem Beispiel verfügt das Windows Media Player-Steuerelement über eine natürliche Zuordnung, da die Wiedergabe die Position von links nach rechts verschiebt.

• Persönlichkeit haben. Gut ausgewählte Animationen sind großartige Möglichkeiten, Ihrem Programm Persönlichkeit, Charakter und Stil hinzuzufügen. Sie können die Benutzerfreundlichkeit immersiver und ansprechender gestalten. Während die Art der Animation bestimmt, was sie kommuniziert, zeigt die spezifische Art und Weise, in der die Animation ausgeführt wird, die Persönlichkeit des Programms. Gute Animationen projizieren die richtige Persönlichkeit für Ihr Programm, ob ernst oder komisch, oder irgendwo dazwischen.

In diesem Beispiel trägt die Verwendung von animiertem Text und dynamischer Perspektive dazu bei, seine Persönlichkeit zu gestalten.

• Aussehen und Verhalten reaktionsfähig. Gute Animationen schaden nicht der Produktivität des Benutzers, indem Benutzer von anderen Interaktionen blockiert werden oder benutzer zur Überwachung gezwungen werden. Unabhängig davon, wie natürlich und ansprechend die Animationen Ihres Programms sind, möchte niemand auf sie ausschließlich warten. Gute Animationen wirken auch reaktionsfähig, ohne zu stören, indem sie schnell mit einer weichen Landung beginnen. Reaktionsfähige Animationen profitieren auch von der schnellen Kommunikation ihres Zwecks. Benutzer sollten eine Animation nicht lange ansehen müssen, um herauszufinden, was sie tut oder wann sie erledigt ist. Für direkte Manipulationen sind reaktionsfähige Animationen unerlässlich, um ein direktes und ansprechendes Gefühl der Realen zu gewährleisten. Um sich direkt zu fühlen, müssen die Kontaktpunkte eines Objekts während der Gesamten Manipulation reibungslos unter dem Zeiger bleiben. Jede Verzögerung, gehackte Reaktion oder der Verlust des Kontakts zerstört die Wahrnehmung der direkten Manipulation.

In diesem Beispiel fühlt sich der Übergang zur Touchverschiebung reaktionsfähig, indem der Kontaktpunkt während der Manipulation unter dem Finger des Benutzers bleibt.

• Ziehen Sie das richtige Maß an Aufmerksamkeit an. Gute Animationen sind in der Regel subtil und lenken nur die Aufmerksamkeit, die erforderlich ist, um ihren Zweck zu erfüllen. Daher sind sie nicht ablenkend, lästig, übermäßig komplex, überlang oder sich wiederholend. Sie werden nach wiederholten Betrachtungen nicht mühsam.

In diesem Beispiel lenkt die Windows-Suche vorübergehend die Aufmerksamkeit auf übereinstimmende Suchbegriffe und blendet dann ein.

• Sehen Sie nur dann sonderlich aus, wenn sie wirklich besonders sind. Die Häufigkeit erhöht die Notwendigkeit von Subtilität, sodass häufige Interaktionen einfache Animationen benötigen, die eine einfache Idee auf einfache Weise kommunizieren. Reservieren Sie spezielle, komplexe Animationen für spezielle, seltene Erfahrungen.

In diesem Beispiel verwendet Windows beim Start eine Aufmerksamkeitsanimation, um die Erfahrung besonders zu gestalten, aber eine solche Animation wäre an anderer Stelle ungeeignet.

Sie wissen, dass Sie das richtige Gleichgewicht erreicht haben, wenn die Gesamterfahrung beschädigt würde, wenn eines dieser Attribute entfernt wurde.

Erstellen eines Animationsvokabulars

Gute Animationen beziehen sich auf eine effektive visuelle Kommunikation, und Konsistenz ist entscheidend für ihre Effektivität. Wenn Sie einen bestimmten Übergang verwenden, z. B. eine Szene von rechts nach rechts, um zur nächsten Szene zu wechseln, sollte dies der einzige Übergang sein, der für diesen Zweck verwendet wird, und dieser Übergang sollte nicht für einen anderen Zweck verwendet werden. Das Zuweisen verschiedener Bedeutungen zu derselben Animation beeinträchtigt seine Fähigkeit zur Kommunikation. Durch Zuweisen bestimmter Animationen und Übergänge zu bestimmten Bedeutungen erstellen Sie ein Animationsvokabular.

Dieses Problem gilt für Animationen und Übergänge, die Bedeutung haben, nicht für generische, denen Benutzer wahrscheinlich keine Bedeutung zuweisen oder denen, deren Zweck unmerklich sein soll. Animationen wie Einblendungen und Spezialeffekte wie Auflösungen haben beispielsweise keine besondere Bedeutung, sodass sie frei verwendet werden können.

Ein gutes Vokabular weist Animationen zu, die das reale Verhalten eines Objekts modellieren. Wenn Sie einem Objekt oder einer Aktion eine Animation zuweisen müssen, die nicht über ein echtes Gegenstück verfügt, wählen Sie eine Animation aus, die zeigt, wie sich das Objekt verhalten könnte.

Obwohl das Startmenü kein echtes Objekt ist, leuchtet der Daraufzeigereffekt wie ein reales Objekt möglicherweise beim Aktivieren auf.

Jede Animation in einem Vokabular muss eindeutig voneinander unterschieden werden. Die Animationen sollten nur ähnliche Verhaltensweisen aufweisen, wenn die zugehörigen Aktionen in ähnlicher Beziehung stehen. So können Sie beispielsweise Bewegungsübergänge die Navigation vorschlagen, sodass Sie Bewegungsübergänge aus verschiedenen Richtungen verwenden können, um verschiedene Navigationstypen anzugeben.

Sie werden wissen, dass Ihre Animationen und Übergänge nicht gut kommunizieren, wenn Benutzer die Ergebnisse verwirrend, überraschend oder unerwartet finden. Im Allgemeinen ist es besser, einen einzigen Zweck gut zu erreichen als mehrere Zwecke nicht so gut.

Im Idealfall sollte Ihr Animationsvokabular in allen Bereichen Ihres Programms umfassend sein, die sie benötigen. Wenn nur wenige Interaktionen natürliche Animationen aufweisen, wird die Aufmerksamkeit auf diejenigen lenken, die nicht.

Weitere Informationen zum Windows-Animationsvokabular finden Sie im Abschnitt Verwendungsmuster in diesem Artikel.

Entwerfen der richtigen Persönlichkeit

Während die Art der Animation bestimmt, was sie kommuniziert, spricht die spezifische Art und Weise, in der die Animation durchgeführt wird, mit der Persönlichkeit des Programms und stärkt seine Marke.

Die Persönlichkeit Ihres Programms sollte die Art ihrer Aufgaben und die Persönlichkeit ihrer Benutzer widerspiegeln, sodass es keine willkürliche Wahl ist. Vielmehr sollte sich eine gut gestaltete Persönlichkeit authentisch fühlen; versuchen Sie niemals, sie zu erzwingen. Die Persönlichkeit sollte eine emotionale Verbindung mit dem Benutzer herstellen. Einige Faktoren, die Sie berücksichtigen sollten:

• Aufgaben: Ernst oder Spaß; optional oder erforderlich.
• Folgen: Ernst oder Klein.
• Kosten: Kostenlos oder gekauft; wenn gekauft, moderat zu preislich oder teuer.
• Benutzerfokus: Relativ schmale Gruppe von Zielbenutzern oder breiten, allgemeinen Zielgruppen.
• Benutzerumgebung: Professional, casual oder home.
• Alter des Benutzers: Jünger oder älter.
• Nutzungshäufigkeit: häufig oder selten.

Die Kombination dieser Faktoren hilft dabei, eine geeignete Persönlichkeit für Ihr Programm zu bestimmen. Hier sind einige geeignete Kombinationen für gängige Arten von Programmen:

Produktivitätsanwendungen

Produktivitätsanwendungen müssen sich natürlich auf die Produktivität konzentrieren. Während ein paar spezielle Umgebungen hervorstechen können, sollten die meisten anderen Animationen die folgenden Merkmale aufweisen:

• Klein
• Natürlich, realistisch
• Subtil, subduziert
• Schnell, effizient
• Entspannt

Hilfsprogramme

Hilfsprogramme werden in der Regel kurz verwendet, sodass ihre Verwendung von Animationen aggressiver sein kann:

• Realistisch, illustrativ, selbsterklärend
• Sicher
• Ansprechend

Unterhaltung, Spiele

Da das Ziel dieser Programme darin besteht, Benutzer zu begeistern und zu begeistern, können die Animationen und Übergänge wesentlich aggressiver sein, indem sie diese Merkmale aufweisen:

• Groß (möglicherweise ein integraler Bestandteil der Erfahrung)
• Künstliche, surreale
• Wirkungsvoll, lebendig
• Emotional, verspielt, skurrisch
• Energisch

Eine emotionale Verbindung zu machen ist für Unterhaltungsprogramme so wichtig, dass es akzeptabel ist, einige Regeln zu verbiegen, wenn dies hilft, die Benutzer in die Liebe zu dem Programm zu fallen. Beispielsweise ist es akzeptabel, wenn eine Animation oder ein Übergang nach dem hundertsten Mal mühsam wird, wenn die meisten Benutzer das Programm wahrscheinlich nicht verwenden, das häufig verwendet wird.

Im Allgemeinen sind Animationen und Übergänge, die klein, natürlich, subduziert, effizient und dennoch entspannt sind, die sicherste Wette. Übergänge mit diesen Merkmalen nehmen in der Regel den kürzesten Weg von Anfang bis Ende, beginnen schnell, enden weich und überschießen nicht. Außerdem sind gut gestaltete Übergänge so konzipiert, dass sie über den gesamten Bereich der Entfernungen gut funktionieren, in denen sie verwendet werden.

Animationsleistung

Stellen Sie beim Entwerfen von Animationen sicher, dass sie sich nicht auf die Fähigkeit der Benutzer auswirken, Ihr Programm effizient zu verwenden. Machen Sie Ihre Animationen im Allgemeinen langsam genug, um ihren Zweck zu erfüllen, aber schnell genug, damit sie nicht die Reaktionsfähigkeit beeinträchtigen, zu viel Aufmerksamkeit verlangen oder müde werden.

Falsch:

Während diese Seitendrehanimation ein ansprechendes, reales Gefühl hat, verringert sie die Produktivität der Benutzer, indem sie länger dauert, um Seiten zu drehen.

Kurze Übergänge (200 Millisekunden oder weniger) sind ein Sonderfall (insbesondere, wenn sie häufig von einer Verzögerung abarbeiten), da Benutzer wissen, dass sie eine geteilte Sekunde warten müssen. Benutzer sind bereit, auf solche Animationen zu warten, wenn:

• Die wahrgenommene Wartezeit ist extrem kurz (200 Millisekunden oder weniger).
• Der Übergang sorgt dafür, dass die Interaktion reibungsloser und natürlicher wirkt.
• Der Übergang macht die Interaktion reaktionsfähiger.
• Jede Verzögerung hilft dem Benutzer dabei, die Kontrolle über die Interaktion zu behalten.

Benutzer akzeptieren eine kurze Verzögerung für die Neuanordnung der Taskleistenschaltfläche, da sie sehr kurz ist und die Interaktion natürlicher wirkt.

Es gibt drei Möglichkeiten, wie Animationen die Leistung beeinträchtigen können: Geschwindigkeit, Reaktionsfähigkeit und Wahrnehmung.

Für Geschwindigkeit sind einige Animationen visuelle Vener über CPU-intensive Aufgaben, daher ist das letzte, was Sie tun sollten, diese Aufgaben mit CPU-intensiven Animationen langsamer zu machen. Die meisten CPU-intensiven Animationen ("schwere" Animationen) neigen dazu:

• Beziehen Sie viele Elemente ein, die unabhängig voneinander verschoben werden.
• Spielen Sie für eine lange Dauer oder Entfernung.
• Beziehen Sie einen großen Bildschirmbereich ein.
• Sind mathematisch intensiv.

Animationen mit weniger Auswirkungen auf die Leistung:

• Beziehen Sie ein einzelnes Objekt ein.
• Spielen Sie für eine kurze Dauer oder Distanz.
• Beziehen Sie einen kleinen Bildschirmbereich ein.
• Sind nicht mathematisch intensiv.

Um eine gute Leistung sicherzustellen, sollten schwere Animationen nur für Aufgaben verwendet werden, die nicht CPU-intensiv sind, während leichte Animationen überall verwendet werden können.

Für Reaktionsfähigkeit sollten die meisten Animationen und Übergänge so konzipiert werden, dass Benutzer interagieren können, während die Animation ausgeführt wird. Es sei denn, eine Animation ist Teil eines Prozesses, machen Sie sie unabhängig von der primären Interaktion des Benutzers und ermöglichen es Benutzern, sie zu unterbrechen.

Eine Animation wirkt sich möglicherweise nicht negativ auf die Leistung einer Aufgabe in der Realität aus, aber Benutzer haben möglicherweise die Wahrnehmung, dass sie ausgeführt wird. Verwenden Sie z. B. keine Animation, die für einen langsamen, CPU-intensiven Vorgang schwer erscheint, auch wenn die Leistung nicht beeinträchtigt wird, da Benutzer feststellen können, dass die Animation der Grund ist, warum die Aufgabe langsam ist. Wenn etwas langsam aussieht, fühlt es sich langsam an, daher ist es besser, Animationen zu verwenden, die sich einfach, leicht und schnell fühlen. Die Verwendung von Animationen mit andockigen Anfangsvorgängen für CPU-intensive Aufgaben hilft.

Riskant:

Während die Animation im Dialogfeld "Kopieren von Windows-Dateien" die Leistung der Dateikopie nicht beeinträchtigt, besteht das Risiko, dass Benutzer der Meinung sind, dass dies der Fall ist.

Auch riskant:

In diesem Beispiel wird die langsam aussehende Statusanimation in der Adressleiste von Windows Explorer einige Aufgaben schmerzhaft langsam aussehen.

Animationen und Übergänge haben keinen Wert, wenn ihre Qualität so schlecht ist, dass sie die Erfahrung weniger reibungslos und weniger ansprechend machen. Um ihre Qualität aufrechtzuerhalten, sollten Animationen so konzipiert werden, dass sie ordnungsgemäß beeinträchtigt werden, wenn ausreichende Systemressourcen nicht verfügbar sind. Animationen können durch Variationen beeinträchtigt werden, die weniger Ressourcen erfordern (z. B. kürzere Längen oder niedrigere Frameraten), oder sogar nicht überhaupt ausgeführt werden. Stellen Sie unabhängig von den verfügbaren Ressourcen sicher, dass die Animationen eine hohe Qualität aufweisen und wie Animationen anstelle von Softwarefehlern aussehen.

Wenn Benutzer schließlich glauben, dass die Animationen und Übergänge Ihres Programms ihre Produktivität beeinträchtigen, besteht eine gute Chance, dass einige Benutzer sie deaktivieren möchten. Um diese Möglichkeit zu unterstützen, beachten Sie die Option, alle unnötigen Animationen deaktivieren, im Windows-Center für erleichterte Bedienung zu finden.

Gewinnung des richtigen Aufmerksamkeitsgrads

Obwohl nur einige Arten von Animationen und Übergängen speziell darauf ausgelegt sind, die Aufmerksamkeit des Benutzers zu wecken, sollten sie darauf ausgelegt sein, das richtige Maß an Aufmerksamkeit zu gewinnen, um ihren Zweck gut zu erfüllen. Was sind die unterschiedlichen Möglichkeiten, die Aufmerksamkeit zu wecken, und wie wählen Sie die richtige aus?

Animationseffekte

Verschiedene Animationseffekte ziehen unterschiedliche Aufmerksamkeitsebenen an. In der folgenden Liste werden die am häufigsten verwendeten Methoden zusammengefasst, beginnend mit der aufmerksamkeitsreichsten Vorgehensweise:

• Schnell blinkend. Fordert sofortige Aufmerksamkeit. Kann die Konzentration der Benutzer unterbrechen, unabhängig davon, wo das Blinken auftritt.
• Mäßig blinkend. Gleiches, erfordert aber weniger Aufmerksamkeit mit geringerer Häufigkeit.
• Prellen. Spürbar im peripheren Sehvermögen und relativ anspruchsvoll in der Natur. Die Benutzer werden wahrscheinlich feststellen, können sich aber auch weiterhin an anderer Stelle konzentrieren, wenn die Dauer kurz ist.
• Bewegung. Spürbar in peripherer Sicht, aber nicht anspruchsvoll. Komplexe oder 3D-Bewegungen wecken jedoch mehr Aufmerksamkeit als einfache oder 2D-Bewegungen. Die Benutzer werden wahrscheinlich bemerken, können sich aber weiterhin an anderer Stelle konzentrieren.
• Moderates Pulsing. Spürbar, aber nicht ablenkend in peripherer Sicht. Die Nutzer können sich weiterhin an anderer Stelle konzentrieren. Kann Helligkeit, Farben und Größen pulsen.
• Langsam pulsierend/leuchtend. Spürbar, aber subtil. Zieht mehr Aufmerksamkeit als einen statischen Effekt an, aber Benutzer bemerken die Animation möglicherweise nicht, es sei denn, sie suchen bereits.
• Verblassen. Noch weniger spürbar. Zieht mehr Aufmerksamkeit als einen statischen Effekt an, aber Benutzer bemerken die Animation möglicherweise nicht, es sei denn, sie suchen bereits.
• Statische Hervorhebung/Gleam. Merklich, wenn Benutzer suchen, aber keine Aufmerksamkeit verlangen, wenn sie an anderer Stelle ist.
• Umgebung/Natur. Absichtlich nicht erkennbar durch ein natürliches, reales Aussehen.

Um den richtigen Ansatz für Ihr Programm oder Feature zu ermitteln, überlegen Sie, wie sich diese Faktoren auf die Szenarien Ihres Features beziehen.

Angenommen, Sie entwerfen ein Chatprogramm, und jemand hat dem Benutzer gerade eine Nachricht gesendet. Dieses Szenario erfordert die Aufmerksamkeit des Benutzers, es sollte überall spürbar sein, und normalerweise möchte der Benutzer schnell reagieren. Dieses Szenario schlägt vor, dass eine moderate Blinkanimation eine gute Wahl wäre. Angenommen, Sie möchten Benutzer darüber informieren, dass ein Druckauftrag abgeschlossen ist. Benutzer sollten sich weiterhin konzentrieren und produktiv arbeiten können, und es ist akzeptabel, wenn benutzer nicht bemerken. Dieses Szenario deutet darauf hin, dass moderat bis langsam pulsierend oder leuchtet eine gute Wahl wäre.

Dauer

Die geeignete Dauer für eine Animation zum Abrufen von Aufmerksamkeit hängt vom Szenario und vom jeweiligen Typ der verwendeten Animation ab. Je mehr Aufmerksamkeit ein Animationseffekt erfordert, desto kürzer sollte die Dauer sein. Während sehr subtile Effekte, die wenig Aufmerksamkeit erfordern (z. B. langsames Pulsieren) unbegrenzt gespielt werden können, sollten anspruchsvolle Effekte nur zwischen 1 und 3 Sekunden gespielt werden. Alle längeren Risiken machen die Animation überwältigend und lästig.

In Windows 7 blinkt die Taskleiste nur für eine Sekunde. Je länger lästig wäre.

Effektzerfall

Sie sollten Animationen für das Abrufen von Aufmerksamkeit basierend auf der Annahme entwerfen, dass Benutzer, wenn sie nicht sofort reagieren, daran arbeiten, etwas anderes zu tun und nicht unterbrochen werden möchten. Daher sollte Ihr Ziel sein, aufmerksamkeitslos zu gewinnen, ohne sie zu fordern.

Um das richtige Gleichgewicht der Aufmerksamkeit zu erhalten, ohne sie zu fordern, verfallen Sie die Intensität eines Effekts im Laufe der Zeit. Um beispielsweise die Aufmerksamkeit zu wecken, können Sie den Effekt anfangs stark machen, aber dann den Effekt schnell verlangsamen. Dabei wird die Attraktivität meist durch den anfänglichen Effekt bestimmt, aber der Gesamteindruck des Benutzers wird meist von seinem Ende bestimmt.

In Windows 7 verlangsamt sich der Taskleistenblitzeffekt am Ende.

Was ist mit PowerPoint?

Microsoft PowerPoint-Übergänge verstoßen häufig absichtlich gegen diese Richtlinien, da sie darauf ausgelegt sind, die Aufmerksamkeit auf Folienübergänge zu lenken und benutzer darauf zu warten. Darüber hinaus haben sie keine besondere Bedeutung, damit sie nichts darüber hinaus kommunizieren, dass sich eine Folie ändert.

PowerPoint-Stilübergänge, wenn sie ordnungsgemäß verwendet werden, haben folgende Zwecke:

• Sie unterteilen lange Präsentationen in kleinere Blöcke, indem sie den Referenten zwingen, anzuhalten.
• Sie lenken die Aufmerksamkeit des Publikums auf Veränderungen in der Präsentation und helfen den Menschen, sich neu zu konzentrieren, wenn sich ihre Gedanken gefragt haben.
• Sie geben der Präsentation einen Rhythmus, damit es sich nicht monoton oder überwältigend fühlt.
• Ihr Stil spiegelt die Persönlichkeit des Referenten oder des Materials wider.

Obwohl dies wichtige Ziele für eine Präsentation sind, würden solche Übergänge unnötige Aufmerksamkeit in der Benutzeroberfläche der meisten Arten von Programmen wecken und würden schnell mühsam werden.

Unterlinie: Verwenden Sie keine PowerPoint-Stilübergänge als Modell für Ihr Programm.

Wenn Sie nur sechs Dinge tun...

1. Verwenden Sie Animationen und Übergänge, damit Ihr Programm leichter zu verstehen ist und sich reibungsloser und ansprechender anfühlt. Sie sollten einen klaren Zweck haben. Verwenden Sie Animationen nicht nur, weil Sie es können, oder um unnötige Aufmerksamkeit auf Ihr Programm zu lenken.
2. Definieren Sie ein Animationsvokabular, und verwenden Sie es konsistent im gesamten Programm. Verwenden Sie bei Bedarf das Vokabular für Windows 7-Animationen.
3. Verwenden Sie die Eigenschaften Ihrer Animationen, um Ihrer Programmpersönlichkeit zu verleihen und ihre Marke zu stärken.
4. Machen Sie die meisten Animationen einfach, kurz und subtil. Denken Sie daran, dass Animationen keine Aufmerksamkeit erfordern müssen, um erfolgreich zu sein. Wenn eine Animation angemessen und natürlich ist, werden Die Benutzer nur ihre Abwesenheit bemerken.
5. Sorgen Sie dafür, dass Ihre Animationen schnell und reaktionsfähig sind, und sorgen Sie für ein leichtes Gefühl. Unabhängig davon, wie ansprechend Ihre Animationen sind, wird niemand das Gefühl haben, auf sie zu warten. Entwerfen Sie schwerere Animationen, um einen ordnungsgemäßen Abbau zu haben.
6. Entwerfen Sie langfristig. Wenn eine Animation lästig, ablenkt oder mühsam ist, entwerfen Sie sie neu, oder entfernen Sie sie.

Verwendungsmuster

Animationen weisen mehrere Verwendungsmuster auf:

Verwendung	Beschreibung
Hover-Feedback um anzuzeigen, wo sich der Interaktionspunkt befindet.	Gibt an, dass der Interaktionspunkt aktiv ist. Der Mauszeiger kann auch durch einen statischen Effekt angezeigt werden. Fenstervokabular: Zeigen Sie den Hovereffekt (umgebendes Rechteck, Hervorhebung, Vergrößerung) mit einem Ein-/Ausblendungseffekt zur Glättung an. Im Zune Digital Media Player werden die Hervorhebungs- und Wiedergabesteuerelemente des Albums beim Daraufzeigen hervorgehoben und hinzugefügt.
Klicken Sie auf Feedback um anzuzeigen, dass ein klickbares Objekt reaktionsfähig ist und einen Klick erhalten hat.	Gibt an, dass auf ein Objekt geklickt wurde. Windows-Vokabular: Hintergrund des Flashobjekts beim Klicken auf ein Ereignis. verwenden Sie zum Anzeigen des Touchkontakts einen Welleneffekt. Touch zeigt eine Wellenanimation an, sodass der Benutzer weiß, dass die Interaktion erkannt wurde.
Auswahlfeedback um anzuzeigen, dass ein Objekt ausgewählt ist.	Gibt an, dass ein Objekt ausgewählt ist. Die Auswahl kann auch über einen statischen Effekt dargestellt werden. Fenstervokabular: Zeichnen Sie das Auswahlrechteck mit einem Ein-/Ausblendungseffekt zur Gleichmäßigkeit. In Zune blinkt album cover on click, and then get a selection rectangle on selection.
Statusfeedback um anzuzeigen, dass eine Aufgabe ausgeführt wird.	Statusfeedback gibt an, dass eine Aufgabe Fortschritte macht, in der Regel mit Aktivitätsindikatoren, Statusindikatoren oder Animationen, die den Vorgang veranschaulichen. Determinate Statusfeedback zeigt ungefähr an, wie viel der Vorgang geleistet wurde und wie viel bleibt, während der unbestimmte Fortschritt nur darauf hinweist, dass der Vorgang ausgeführt wird. Fenstervokabular: sich drehende Aktivitätsindikatoren, Statusanzeigen, Statushintergründe, Illustrationsanimationen. In diesem Beispiel zeigt Windows Live Messenger während der Anmeldung unbestimmte Statusfeedback an.
Attractor- um zu zeigen, dass etwas die Aufmerksamkeit des Benutzers benötigt.	Ziehen Sie die richtige Aufmerksamkeit an, wenn wichtige Objekte erstellt werden oder Aufmerksamkeit benötigen (oft aufgrund von Änderungen), oder wichtige oder dringende Ereignisse geschehen. die richtige Aufmerksamkeit für Designtechniken gewinnen. Fenstervokabular: blinkend, bewegend, pulsieren, leuchtend, glänzend. Die Windows Live-Symbolleiste wird bei der ersten Darstellung animiert, damit sie offensichtlich ist.
Beziehung um die Beziehung zwischen Objekten oder Kausalität in Effekten anzuzeigen.	Zeigen Sie Beziehungen an, insbesondere, wenn die Beziehung möglicherweise nicht verstanden oder erwartet wird, auf eine Weise, die nicht ablenkt oder verwirrend ist. Fenstervokabular: Morphen, Transport, physische Veränderungen wie Das Kippen, Wachsen von einer Punktquelle, Verkleinern auf ein Punktziel. In diesem Beispiel zeigt die Animation die Beziehung zwischen der Gammaeinstellung und deren Auswirkungen auf die Anzeige.
Abbildung/Vorschau um visuell ein Konzept, eine Aufgabe oder den Effekt eines Befehls zu erläutern.	Eine Animation oder ein Video, das ein Konzept erklärt oder wie etwas visuell funktioniert, entweder um eine textbezogene Erklärung zu ergänzen oder zu ersetzen. Auf diese Weise können Benutzer Aufgaben ausführen oder Befehle effizient und sicher auswählen. In diesem Beispiel verwenden die Befehle "Anzeigen von Tablet PC" Abbildungen, um zu zeigen, wie Sie korrigieren, löschen, teilen und beitreten können.

Übergänge weisen mehrere Verwendungsmuster auf:

Verwendung	Beschreibung
Objekt vergrößern/verkleinern/ um die Größe oder den Zustand eines Objekts reibungslos zu ändern.	Objektänderungen zwischen Zuständen, möglicherweise während des Verschiebens. Der Übergang hält die Benutzer während änderungen an der Orientierung. Fenstervokabular: Morphen, Ändern der Größe, Objektfolien ein- oder aus. In diesem Beispiel morpht das Wetter-Gadget aus seinem präzisen Zustand, um das Dialogfeld "Optionen" anzuzeigen.
Inhaltseinblenden/Ausblenden/Ändern um Inhalte reibungslos anzuzeigen, auszublenden oder zu ändern, in der Regel für die progressive Offenlegung.	Fenster-Innen-Umformen, um mehr, weniger oder unterschiedliche Inhalte anzuzeigen. Der Übergang hält die Benutzer während änderungen an der Orientierung. Fenstervokabular: Fensterfolien ein- oder aus. Flyoutfenster werden eingeblendet und ausgeblendet. Andere Inhalte werden eingeblendet oder gerollt. Der Windows-Rechner verfügt über einen reibungslosen Übergang zwischen Ansichtsmodi.
Steuerelement oder Angebot ein-/ausblenden um Steuerelemente oder deren Angebote beim Darauf- oder Mauszeiger reibungslos ein- oder auszublenden, um die normale visuelle Darstellung zu vereinfachen.	Zeigen Sie Steuerelemente an, wenn Benutzer mit dem Mauszeiger auf einen Befehlsbereich zeigen oder Angebote anzeigen, wenn Benutzer auf ein Steuerelement zeigen. Wenn Sie auf diese Bereiche zeigen, wird angegeben, dass der Benutzer interagieren möchte. Angebote können ausgeblendet werden, wenn der Zeiger stationärer wird. In diesem Beispiel blenden die Windows Media Player-Steuerelemente beim Daraufzeigen im Vollbildmodus ein.
Szenenübergänge um einen Szenenübergang reibungslos und nahtlos zu gestalten, um die Aufmerksamkeit zu vermeiden.	Abrupte Szenenänderungen können störend sein, insbesondere für große Bildschirmbereiche, daher verwenden Sie Szenenübergänge, um Glattheit und Kontinuität zu erzeugen und Kontext bereitzustellen. Szenenübergänge sind so konzipiert, dass sie natürlich und niedrig sind, um die Aufmerksamkeit auf den Übergangsprozess selbst zu vermeiden. Fenstervokabular: ein-/ausblenden; Kreuz einblenden; Ziehen sie in/links, außen/rechts, nach oben, unten; Schieben und Decken. In diesem Beispiel blendet das Windows-Desktop-Hintergrundbild sanft zwischen Bildern aus, damit der Übergang reibungslos und gesteuert wird.
Sonderszeneübergänge um die Aufmerksamkeit auf eine Szenenänderung zu lenken, um sie speziell zu gestalten oder die Aufmerksamkeit des Benutzers neu zu konzentrieren.	Während die meisten Szenenübergänge nicht auf den Übergangsprozess aufmerksam machen sollten, sind einige darauf ausgelegt, den Fluss zu unterbrechen und die Aufmerksamkeit zu lenken, um hervorzuheben, dass etwas anderes passiert. um Aufmerksamkeit zu wecken, sind spezielle Szenenübergänge so konzipiert, dass sie unnatürlich sind und eine hohe visuelle Wirkung haben. In diesem Beispiel verwendet PowerPoint Aufmerksamkeitsübergänge, um die Zielgruppe in die Änderung zu lenken.
direkte Manipulationen um den Effekt direkter Manipulationen anzuzeigen (z. B. Verschieben, Scrollen/Schwenken, Drehen und Zoomen).	Der Übergang zeigt die Auswirkung der Manipulation in Echtzeit. der Effekt sollte reibungslos, kontinuierlich und mit der realen Welt übereinstimmen. Das Verschieben und Drehen kann an einigen Stellen nicht fortlaufend sein, um Einschränkungen oder wahrscheinlich bevorzugte Auswahlmöglichkeiten anzugeben. Durch das Zoomen wird der Inhalt größer oder kleiner, möglicherweise wird die Detailebene entsprechend geändert. In diesem Beispiel zoomt die Bildschirmlupe gleichmäßig zwischen Ebenen.
Falsche direkte Manipulationen um anzugeben, dass eine direkte Manipulation (z. B. Verschieben, Scrollen/Verschieben) versucht wurde, aber nicht durchgeführt werden konnte.	Der Übergang zeigt die Manipulation, die versucht wird, wird aber wieder in den ursprünglichen Zustand zurückgesetzt. oft sieht der Effekt aus, als kann die Manipulation aufgrund einer realen physischen Einschränkung nicht durchgeführt werden. Diese Animationen werden anstelle von textbasierten Fehlermeldungen verwendet, was das Gefühl der Manipulation in der realen Welt stören würde. Fenstervokabular: Unzustellbarkeit In diesem Beispiel springt das Dokument zurück, um anzuzeigen, dass der Benutzer das Ende erreicht hat.
Sortieren, Filtern, Neuanordnen von Übergängen um anzugeben, dass sich die Präsentation oder der Inhalt einer Sammlung von Elementen geändert hat.	Der Übergang zeigt (oder für komplexe Änderungen, schlägt vor), welche Auswirkungen die Änderung hat. In diesem Beispiel verwendet die visuelle Bing-Suche einen Filterübergang. In diesem Beispiel verwendet Windows Media Center einen Neuanordnungsübergang als besondere Erfahrung, während ein Song wiedergegeben wird.
Leistungsübergänge um zu bewirken, dass eine Aktion schneller auftritt.	Während jeder Übergang das Potenzial hat, eine Aktion schneller zu machen, besteht der Hauptzweck dieser Übergänge darin, die Wahrnehmung von Leistung und Reaktionsfähigkeit zu verbessern. Eine gute Technik ist die Veranschaulichung der Aufgabe, die in absichtlichen Schritten ausgeführt wird. Im Gegensatz dazu wirkt sich die Verzögerung der Aktion, das Rendern der Ergebnisse auf haphazarte Weise oder die Verwendung eines Aktivitätsindikators langsam aus. Fenstervokabular: Ausführen von Aktionen in Phasen mit reibungslosen Übergängen zwischen den Phasen. In diesem Beispiel zeigt eine Taskleisten-Sprungliste sofort die Standardelemente an und gleitet dann aus, um die Ziele anzuzeigen, sobald die Liste fertig ist. Dadurch wird die zum Erstellen der Liste erforderliche Zeit verschleiert. Im Gegensatz dazu würde sich die Verzögerung der anfänglichen Anzeige nicht reagieren lassen, und das Anzeigen einer unvollständigen Liste oder eines Statusfeedbacks würde viel langsamer wirken.
Besondere Erlebnisse um Benutzer selten zu begeistern, spezielle Erfahrungen, die für Ihr Programm wichtig sind und die volle Aufmerksamkeit des Benutzers haben.	Während jeder Übergang das Potenzial hat, eine besondere Erfahrung zu sein, sind diese Übergänge am besten für seltene Erfahrungen reserviert, die wirklich speziell für Ihr Programm sind. Benutzerdefinierte Übergänge werden verwendet, um ein besonderes Gefühl zu verleihen. Branding und Persönlichkeit sind häufig wichtige Designelemente. im Gegensatz zu anderen Mustern können spezielle Erfahrungen Aufmerksamkeit erfordern, schwer sein und erfordern, dass Benutzer einen Moment warten. folglich tragen diese Übergänge schnell ab, wenn sie überlastet sind, da die Erfahrung nicht mehr besonders ist. In diesem Beispiel zeigt Windows Media Center eine Animation an, während sie geladen wird, um benutzer sofort einzubinden.

Leitlinien

Effektive Kommunikation

• Definieren und Verwenden eines Animationsvokabulars, um sicherzustellen, dass Ihre Animationen und Übergänge eine konsistente Bedeutung haben, und verwenden Sie es konsistent im gesamten Programm. Die meisten Vokabular sollten Einträge für Szenen- und Objektdarstellung und Verschwinden, Navigation, grundlegende Interaktion (Hovern, Auswählen, Klicken), Objektmanipulation und Interaktion (Verschieben, Ablegen, Ändern der Größe, Bildlauf, Schwenken, Zoomen, Drehen, Filtern) enthalten und Aufmerksamkeit wecken. Eine konsistente Bedeutung ist entscheidend für eine effektive Kommunikation.

• Verwenden Sie, wann immer praktisch, das Windows-Animationsvokabular. Während Ihr Programm möglicherweise ein anderes Publikum und unterschiedliche Anforderungen hat, überwiegen häufig die Vorteile von Konsistenz und Vertrautheit die Vorteile der Unterschiedlichkeit. Wenn das Vokabular Ihres Programms unterschiedlich sein muss, verwenden Sie dieselben grundlegenden Animationstypen wie Windows, geben Sie ihnen jedoch die richtige Persönlichkeit für Ihr Programm.

• Weisen Sie generischen Animationen und Übergängen in einem Animationsvokabular keine spezifische Bedeutung zu. Generische Übergänge wie Einblendungen und Spezialeffekte wie Auflösungen haben keine besondere Bedeutung (über das Erscheinen oder Verschwinden hinaus), sodass sie frei verwendet werden können.

  Falsch:

  

  In diesem Beispiel wird ein Querblenden fälschlicherweise verwendet, um zum nächsten Element zu navigieren. Da Querblendungen keine besondere Bedeutung haben, stellt dieser Übergang keinen Kontext bereit.

• Machen Sie Vokabulareinträge eindeutig. Verwandte Aktionen können ähnliche Effekte haben (z. B. das Vergrößern und Verkleinern sollte umgekehrte Übergänge aufweisen), aber nicht verwandte Aktionen sollten eindeutige Effekte haben (z. B. sollte das Zoomen nie mit dem Drehen verwechselt werden).

• Halten Sie reale Effekte realistisch und konsistent. Wenn Sie realistische Animationen und Übergänge verwenden, halten Sie die Erfahrung konsistent mit der realen Welt. Benutzer sollten niemals überrascht, verwirrt oder durch die Ergebnisse irreführen. Und für Konsistenz mischen Sie keine Metaphern.

• Weisen Sie umgekehrte Aktionen inverse Animationen zu. Dies erfüllt die Erwartungen der Benutzer und vereinfacht das Vokabular. Wenn beispielsweise ein Bereich durch Ziehen angezeigt wird, entfernen Sie ihn, indem Sie ihn nicht mit einem anderen Effekt herausschieben.

• Machen Sie Animationen verständlich. Benutzer sollten schnell den Zweck einer Animation verstehen können. Es ist möglich, eine Animation zu klein, zu kurz zu machen (weniger als 50 Millisekunden), oder so subtil, dass Benutzer ihren Zweck nicht verstehen können. In solchen Fällen wird entweder neu gestaltet, um die Bedeutung klar zu machen oder zu entfernen.

  Falsch:

  

  In diesem Beispiel ist der Effekt so klein und subtil, dass nur wenige Benutzer ihren Zweck verstehen können. Besser umgestalten oder entfernen.

Muster

Hover-Feedback

• Um reaktionsfähig zu sein, versuchen Sie, Animationen innerhalb von 50 Millisekunden nach dem Betreten oder Verlassen des Hoverzustands wiederzugeben.
• Damit sie schnell angezeigt werden können, nehmen Sie die Dauer von Hoveranimationen unter 50 Millisekunden vor.
• Verwenden Sie einen Ein-/Ausblendungseffekt. Dadurch unterscheiden sich Hovereffekte deutlich von Klick- und Auswahlfeedback.

Klicken Sie auf Feedback

• Um reaktionsfähig zu sein, versuchen Sie, Animationen innerhalb von 50 Millisekunden nach dem Klicken nach unten-Ereignis wiederzugeben. Klicken Sie auf Ereignisse, die kein Klickfeedback benötigen.
• Wenn sie schnell angezeigt werden sollen, nehmen Sie die Dauer von Klickanimationen unter 50 Millisekunden vor.
• Verwenden Sie einen Hintergrundblitz oder einen Blinkeffekt. Dadurch unterscheiden sich Klickeffekte deutlich von Hover- und Auswahlfeedback. Da das Klicken das Daraufzeigen erfordert, sorgen Sie für ein reibungsloses Feedback zum Daraufzeigen von Feedback.

Auswahlfeedback

• Um reaktionsfähig zu sein, versuchen Sie, Animationen innerhalb von 50 Millisekunden der Auswahl oder Deselection wiederzugeben.
• Um schnell zu erscheinen, legen Sie die Dauer von Auswahlanimationen unter 50 Millisekunden fest.
• Verwenden Sie einen Ein-/Ausblendungs-Auswahlrechteckeffekt. Dadurch unterscheidet sich die Auswahl deutlich vom Daraufzeigen und Klicken auf Feedback.

Statusfeedback

• Verwenden Sie einen Aktivitätsindikator, wenn eine Aktion innerhalb einer Sekunde nicht ausgeführt werden kann. Dadurch wird angegeben, dass der Befehl empfangen wurde.
• Verwenden Sie eine Statusanzeige, wenn ein Vorgang mehr als fünf Sekunden dauert. Weitere Richtlinien finden Sie unter Statusindikatoren.
• Verwenden Sie Statusfeedbackanimationen, mit denen Benutzer den Effekt langer Aufgaben visualisieren können. Vermeiden Sie unnötige Statusfeedbackanimationen, wenn eine Animation nichts hilfreich kommuniziert, verwenden Sie stattdessen eine Statusanzeige.
• Weisen Sie eindeutig identifizierbare Vervollständigungs- und Fehlerzustände auf. Benutzer müssen diese endgültigen Zustände schnell ermitteln können.
• Beenden Sie die Anzeige des Fortschritts, wenn die zugrunde liegende Aufgabe keinen Fortschritt macht. Benutzer müssen feststellen können, ob der Fortschritt nicht erfolgt, und entsprechend reagieren.

Attractors

• Verwenden Sie Locken mit Zurückhaltung. Es sei denn, die Informationen sind dringend, kritisch oder anderweitig wirken sich wahrscheinlich auf das unmittelbare Verhalten des Benutzers aus, ist es in der Regel besser, den Zustand unauffällig zu ändern und benutzern die Möglichkeit zu geben, die Änderung selbst zu entdecken. Lösen von Ablenkungen, nicht auffindbar.

  

  In diesem Beispiel verwendet das Symbol für den Drahtlosnetzwerkbenachrichtigungsbereich eine Animation für kritische Probleme, ermöglicht benutzern jedoch, schwache Signale selbst zu erkennen.

• Wählen Sie eine Animation aus, die die richtige Aufmerksamkeitsebene zeichnet. Anziehungsreizanimationen sollten nur genug Aufmerksamkeit auf sich selbst lenken, um ihren Zweck zu erfüllen, aber nicht mehr. Wenn der Benutzer sofort handeln muss, wählen Sie einen Effekt aus, der Aufmerksamkeit erfordert, unabhängig davon, wo der Benutzer sucht. In anderen Situationen finden Sie unter Die richtige Aufmerksamkeitsstufe Abschnitt anzuziehen, um die richtige Kombination aus Aufmerksamkeit, Bemerkbarkeit und Dringlichkeit zu erhalten.

  Falsch:

  

  Die Microsoft Office-Assistenten haben unnötige Aufmerksamkeit auf sich gezogen.

• Wenn der Benutzer nicht reagiert, wiederholen Sie die Animation nicht, oder verwenden Sie fortlaufende Animationen. Gehen Sie stattdessen davon aus, dass der Benutzer sich entschieden hat, jetzt nicht zu handeln, sondern später zu handeln. Kontinuierliche Animationen erschweren benutzern, sich auf alles andere zu konzentrieren.

Beziehungsanimationen

• Verwenden Sie Beziehungsanimationen, um zu zeigen, wo Objekte stammen oder wo sie gelaufen sind.
• Beziehungsanimationen müssen mit dem ausgewählten Objekt beginnen oder enden. Zeigen Sie keine Beziehungen zwischen Objekten an, mit der der Benutzer derzeit nicht interagiert. Wenn Benutzer überhaupt bemerken, ist das, was sie bemerken, die Ablenkung.

Illustrationen/Vorschauen

• Verwenden Sie Vorschauen, um den Effekt eines Befehls anzuzeigen, ohne dass Benutzer sie zuerst ausführen müssen. Indem Sie hilfreiche Vorschauen verwenden, können Sie die Effizienz und Die Lernfreundlichkeit Ihres Programms verbessern und den Bedarf an Test- und Fehlerversuchen verringern.
• Verwenden Sie Illustrationen und Vorschauen, die eine klare Interpretation aufweisen. Sie haben wenig Wert, wenn sie verwirrend sind.
• gleichzeitig nur eine Abbildung wiedergeben, um zu vermeiden, dass benutzer überwältigend sind. Wenn mehrere gleichzeitige Illustrationen möglich sind, verwenden Sie den Mauszeiger oder eine Wiedergabeschaltfläche, damit Benutzer ihr Interesse angeben können.
• Automatisches Wiedergeben einer Illustration, wenn es sich um den Hauptzweck des Fensters oder der Seite handelt. Andernfalls können Benutzer, wenn sie optional sind, diese spielen, wenn sie bereit sind.
• Animationen mit optimaler Geschwindigkeitwiedergeben: Nicht so schnell sind sie schwer zu verstehen, aber nicht so langsam, sie sind mühsam zu beobachten.

Objekt vergrößern/verkleinern

• Schneiden Sie Inhalte während einer Größenänderung nicht ab. Erweitern Sie Container, bevor Sie Inhalte hinzufügen. Entfernen Sie Inhalte, bevor Sie Container reduzieren.

  Falsch:

  

  In diesem Beispiel wird der Inhalt während einer Größenänderung abgeschnitten.

Inhaltseinblenden/Ausblenden/Ändern

• Wichtige Informationen statisch anzeigen. Benutzer sollten nicht durch progressive Offenlegung auf wichtige Informationen zugreifen müssen.

Steuerelement oder Angebot ein-/ausblenden

• Zeigen Sie wichtige Steuerelemente an, wenn der Benutzer den Mauszeiger an einer beliebigen Stelle innerhalb des Fensters oder Bereichs positioniert, oder wenn der Vollbildmodus aktiviert ist, mit der Maus bewegen. Benutzer sollten nicht nach diesen Steuerelementen suchen müssen, stellen Sie daher sicher, dass sie ermittelt werden.

  

  In diesem Beispiel zeigt Windows Media Center seine Steuerelemente an, wenn sich der Mauszeiger über dem Fenster befindet.

• Anzeigen von sekundären Steuerelementen oder Steuerelementangeboten, wenn der Benutzer den Zeiger an oder in der Nähe der Befehle positioniert. Zur einfachen Auffindbarkeit machen Sie die Position offensichtlich und das Ziel groß.

  

  In diesem Beispiel zeigt Windows Live Messenger einen sekundären Befehl an, wenn sich der Zeiger in der nähe der oberen rechten Ecke befindet.

Szenenübergänge

• Gestalten Sie physische Szenenübergänge, die mit der natürlichen Zuordnung konsistent sind. Personen lesen von links nach rechts in westlichen Kulturen, und hierarchische Diagramme fließen von oben nach unten. Folglich wird die Zeit in Zukunft durch die Bewegung von links nach rechts gekennzeichnet. Die folgenden physischen Szenenübergänge weisen eine natürliche Zuordnung auf:

  Übergang	Bedeutung
  Von links	Zurück im Aufgabenfluss
  Von rechts	Vorwärts im Aufgabenfluss
  Von oben	Vorgangshierarchie nach oben verschieben
  Von unten	Vorgangshierarchie nach unten verschieben

• Wenn Ihr Programm Sound wiederspielt, werden Designszeneübergänge und Audioübergänge zusammen wiedergegeben. Wenn z. B. eine Szene schrittweise ausblendt, sollte auch jeder Sound schrittweise ausgeblendet werden. Ruinieren Sie keine nahtlosen visuellen Übergänge, indem Sie abrupte Klangübergänge haben. Weitere Soundrichtlinien finden Sie unter Sound.

direkte Manipulationen

• Wenn Sie physische Gesten in der Interaktion verwenden (z. B. Tossing), entwerfen Sie die Animation so, dass sie sich wie eine natürliche Reaktion auf die Geste anfühlt. Verknüpfen Sie die Interaktionsursache mit dem Übergangseffekt. Verleihen Sie der Animation reale physische Eigenschaften wie Beschleunigung, Verlangsamung, Dynamik, Widerstand, Gewicht, Unzustellbarkeit und Drehung.
• Um ein direktes Verhalten aufrechtzuerhalten, halten Sie die Kontaktpunkte eines Objekts während der Interaktion reibungslos unter dem Zeiger. Jede Verzögerung, gehackte Reaktion oder der Verlust des Kontakts zerstört die Wahrnehmung der direkten Manipulation. Objekte sollten beim Bearbeiten niemals verschwinden.

Übergänge sortieren, filtern oder neu anordnen

• Zeigen Sie für einfache Änderungen den gesamten Übergang an. Benutzer können den gesamten Übergang problemlos verfolgen. Einfache Änderungen umfassen vier Elemente oder weniger.
• Bei komplexen Veränderungen betonen Sie das Ende der Bewegung, während sie verlangsamt wird, und lassen Sie das Auge in den Rest ausfüllen. Dadurch wird die Bewegung viel reaktionsfähiger und geordneter.

Leistungsübergänge

• Erwägen Sie, langsame Übergänge in zwei oder drei Phasen auszuführen, damit sie schneller und sofort interaktiv erscheinen. Verwenden Sie bei Bedarf die folgende Kompositionsreihenfolge:
  • Externer Frame
  • Hintergrund
  • Anfänglicher Inhalt (bei Bedarf mithilfe einer temporären Darstellung)
  • Primäre Steuerelemente (sodass Benutzer sofort interagieren können)
  • Sekundäre Steuerelemente und alle verbleibenden UI-Elemente
  • Abschließender Inhalt (wenn eine temporäre Darstellung verwendet wurde) Verwenden Sie Übergänge wie Einblendungen und Folien, um die Komposition reibungslos, geordnet und verfeinert zu gestalten.

Wenn Sie in der Ansicht "Vogelperspektive" scrollen, zeigen Bing-Karten einen temporären Rasterhintergrund an. Auf diese Weise können Benutzer den Bildlauf sofort fortsetzen, bevor der endgültige Inhalt gerendert wird.

Animationen für besondere Oberflächen

• Überdenken Sie animierte Begrüßungsbildschirme (sowie statische Begrüßungsbildschirme). Oft lenken Begrüßungsbildschirme nur darauf, wie lange ein Programm geladen werden muss, und sie tragen ihre Begrüßung schnell ab. Begrüßungsbildschirme sind zwar akzeptabel, wenn sie nur angezeigt werden, wenn eine Benutzerinteraktion nicht möglich ist, wenn eine praktische bessere Alternative darin besteht, Ihr Programm so zu entwerfen, dass Benutzer sofort damit interagieren können, auch wenn sie noch geladen werden.
• Stellen Sie einen Befehl "Einführung überspringen" bereit, wenn ein animierter Begrüßungsbildschirm mehr als drei Sekunden dauert. Wenn Sie auf eine beliebige Stelle auf dem Begrüßungsbildschirm klicken, sollte sie auch geschlossen werden. Alternativ können Sie nach einem anfänglichen Zeitraum eine kurze Version der Animation verwenden.

Leistung

• Warten Sie nicht auf die Animationen und Übergänge Ihres Programms. Verwenden Sie kurze Animationen und Übergänge (weniger als 200 Millisekunden), wenn sie praktisch sind. Verwenden Sie schnellere Animationen (100 Millisekunden) für häufigere Vorgänge. Entwerfen Sie längere Animationen (in der Regel das Statusfeedback, die Illustration und spezielle Erfahrungsmuster), damit Benutzer während der Ausführung weiterhin arbeiten können.

• Entwerfen Sie lang laufende Animationen, um Benutzern klar zu machen, dass sie interagieren können, während die Animation ausgeführt wird. Benutzer versuchen nicht, weiterhin zu arbeiten, wenn die visuellen Hinweise vorschlagen, dass sie nicht.

  

  In diesem Beispiel aus Windows Internet Explorer schlägt die Statusleiste mit niedriger Taste in der Statusleiste vor, dass Benutzer nicht auf den Abschluss warten müssen, bevor sie interagieren können.

• Verwenden Sie einfache Animationen für CPU-intensive Aufgaben. Dies ermöglicht dem Vorgang volle Verarbeitungsleistung. Darüber hinaus wird der Benutzer nicht wahrnehmen, dass die einfache Animation der Grund dafür ist, dass die Aufgabe CPU-intensiv ist.

• Zeigen Sie während einer Animation oder eines Übergangs keine Aktivitätsanzeige an. Dadurch wird der Effekt zerstört. Entwerfen Sie Animationen und Übergänge, damit sie sofort beginnen können.

• Entwerfen Sie Animationen, die ordnungsgemäß beeinträchtigt werden, wenn nicht genügend Systemressourcen vorhanden sind. Animationen können durch Variationen beeinträchtigt werden, die weniger Ressourcen erfordern (z. B. kürzere Längen oder niedrigere Frameraten), oder sogar nicht überhaupt ausgeführt werden. Stellen Sie unabhängig von den verfügbaren Ressourcen sicher, dass die Animationen eine hohe Qualität aufweisen und wie Animationen anstelle von Softwarefehlern aussehen.

  Falsch:

  

  In diesem Beispiel wird der Übergang zur Fensterwiederherstellung verwendet, obwohl es nicht genügend Systemressourcen gibt, um ihn gut wiederzugeben. Folglich scheint der fixierte Frame ein Fehler zu sein. Wenn die Ressourcen nicht verfügbar sind, ist es besser, das Fenster einfach ohne Übergang anzuzeigen.

Animationsmerkmale

Gut gestaltete Animationen und Übergänge weisen im Allgemeinen die folgenden Merkmale auf:

• Kurze Dauer. Die meisten Animationen sollten zwischen 100 und 300 Millisekunden betragen, vorzugsweise 1/6 Sekunden (167 Millisekunden) oder 1/4 Sekunden (250 Millisekunden). (Spezielle Erfahrungen und Fortschrittsfeedback können länger sein.) Verwenden Sie schnellere Animationszeiten für häufigere Vorgänge. Im Allgemeinen nehmen längere Animationen mehr Zeit in Anspruch, nehmen mehr Zeit, um zu verstehen und sich langsam zu fühlen.

• Ansprechbarkeit. Animationen sollten innerhalb von 50 Millisekunden des initiierenden Ereignisses oder der Benutzeraktion beginnen. Längere Startzeiten reagieren nicht mehr.

• Beschleunigung/Verlangsamung. Um natürlich zu aussehen, müssen die meisten Animationseffekte beim Starten und Verzögern beim Beenden beschleunigt werden. Um reaktionsschnell zu aussehen, entwerfen Sie Animationen, um schnelle Starts zu erhalten. Um kontrolliert zu erscheinen, entwerfen Sie Animationen, um weiche Landungen am Ende zu haben. Dies gilt zwar für Bewegungseffekte, gilt aber auch für alle Effekte, die Bewegungen vorschlagen, z. B. Zooms und sogar Einblendungen.

  

  Die meisten Animationen sollten schnelle Starts und weiche Enden haben, um ein reaktionsfähiges, aber kontrolliertes Verhalten zu haben.

• Bewegung. Animationen, die Bewegung darstellen, müssen insbesondere beschleunigt und verzögert werden. Verwenden Sie also keine lineare Bewegung, es sei denn, die Animationsdauer ist sehr kurz. Bewegungen sollten den Shorts-Pfad von Anfang bis Ende nehmen, ohne zu überschießen. Der Vollständige Animationspfad ist nicht immer erforderlich. Heben Sie bei Bedarf das Ende der Bewegung hervor, während sie verlangsamt wird, und lassen Sie das Auge in den Rest ausfüllen. Dadurch wird die Bewegung viel reaktionsfähiger und geordneter. Wenn Sie die Bewegung mehrerer Objekte gleichzeitig animieren, geben Sie ihnen leicht unterschiedliche Pfade mit etwas unterschiedlichen Timings, um natürlicher zu wirken.

• Bildrate. Die meisten Animationen sollten eine Framerate von 20 Frames pro Sekunde verwenden. Wenn die Animation für eine besondere Erfahrung vorgesehen ist oder mit dem Hauptzweck des Programms zusammenhängt, sollten Sie eine höhere Rate von 24 30 Frames pro Sekunde verwenden, um die Gleichmäßigkeit und Realität zu verbessern.

• Maßstab. Entwerfen Sie Animationen so, dass sie im gesamten Bereich der beabsichtigten Verwendung gut funktionieren. Beispielsweise sollten Seitenübergänge so konzipiert sein, dass sie für alle Seitengrößen geeignet sind.

• Persönlichkeit. Entwerfen Sie Animationen, um sich natürlich, subduziert und effizient zu fühlen, anstatt künstlich, skurrisch oder langsam zu sein.

Animierter Text

• Während Sie Text mit einem Übergang anzeigen können, nicht kontinuierlich Text animieren. Animierter Text ist oft ablenkend und schwieriger zu lesen als statischer Text. Ausnahmen:
  • Sie können Text in Situationen animieren, in denen sie traditionell animiert wird, und Sie bieten eine barrierefreie Alternative.
  • Sie können Text animieren, wenn der Zweck des Texts in erster Linie dekorativ ist.

In diesem Beispiel animiert Zune Text, aber sein Zweck ist in erster Linie dekorativ. Es gibt kein Problem, wenn Benutzer den Text nicht sorgfältig lesen.

Reduzieren des Stromverbrauchs

• Entwerfen Sie Ihre Animationen, um den Stromverbrauch zu reduzieren. Bei der ordnungsgemäßen Gestaltung sollten Animationen den Stromverbrauch nicht erheblich erhöhen. So reduzieren Sie den Stromverbrauch:
  • Beenden Sie das Animieren, wenn die Anzeige deaktiviert ist. Die Anzeige kann zum Zwecke des Stromsparens deaktiviert sein.
  • Verwenden Sie keine lang ausgeführten Animationen, die nicht vom Benutzer initiiert werden. Animationen, die regelmäßige Zeitgeber mit hoher Auflösung verwenden, reduzieren die Effizienz der Prozessorleistungsverwaltung. Deaktivieren Sie außerdem alle periodischen Zeitgeber mit hoher Auflösung, wenn die Animationen abgeschlossen sind.
  • Alle Animationen anhalten, wenn das System im Leerlauf ist. Der Zeitraum der Benutzerinaktivität, um im Leerlauf zu werden, wird durch Die Power-Optionen in der Systemsteuerung bestimmt.

Zugänglichkeit

• Verwenden Sie Animation nicht als einzige Möglichkeit, wichtige Informationen zu vermitteln. Animationen sollten Informationen vermitteln, die nützlich, aber nicht kritisch sind, da sie benutzern mit Sehbehinderungen nicht zugänglich sind.

• Stellen Sie sicher, dass gleichwertige Informationen auf anderen Mitteln verfügbar sind, z. B.:

  • Durch Inspektion. Benutzer können gleichwertige Informationen ermitteln, indem Sie den Bildschirm oder die Objekte betrachten, die an der Animation beteiligt sind.
  • Durch einfache Interaktion. Benutzer können entsprechende Informationen ermitteln, indem Sie darauf zeigen, klicken oder doppelklicken.

  

  Die Bing-Startseite verfügt über eine anfängliche Animation, die mehrere Hotspots anzeigt. Benutzer können auch die Hotspots anzeigen, indem Sie den Cursor in die Nähe bewegen.

  Beachten Sie, dass "gleichwertige Informationen" keine identischen Informationen bedeuten. Die Informationen können in einem anderen Format vorliegen oder einen einfachen Abzug erfordern.

• Legen Sie bei Bedarf den Eingabefokus auf das Objekt fest, das während eines Übergangs geändert wurde. Auf diese Weise können Hilfstechnologien erkennen, wo die Änderung stattgefunden hat. Ändern Sie den Eingabefokus jedoch nicht, wenn der Benutzer die Tastatur verwendet.

• Verwenden Sie keine Animationen oder Übergänge, die schnell blinken oder die Größe von Objekten ändern. Blinkende und schnelle Bildschirmänderungen können Probleme für Menschen mit Beeinträchtigungen bei Anfällen und anderen neurologischen Störungen verursachen.

• Ermöglichen Sie Benutzern, die Animationen und Übergänge Ihres Programms zu deaktivieren. Um diese Fähigkeit zu unterstützen, beachten Sie die Option "Alle unnötigen Animationen deaktivieren" im Center für erleichterte Bedienung in Windows.

  Entwickler: Sie können ermitteln, ob Animationen mithilfe der SystemParametersInfo-API aktiviert sind.

• Entwerfen Sie Aufgaben, wobei davon ausgegangen wird, dass Benutzer die Animationen Ihres Programms deaktivieren. Stellen Sie sicher, dass dies den Vorgangsfluss nicht erheblich stört.

Weitere Richtlinien für die Barrierefreiheit finden Sie unter Barrierefreiheit.

Dokumentation

• Vermeiden Sie, nach Möglichkeit auf Animationen zu verweisen. Verweisen Sie stattdessen auf das objekt, das animiert wird und ggf. den Animationstyp.
• Verweisen Sie nicht auf Übergänge, außer in der technischen Dokumentation. Verweisen Sie stattdessen im endgültigen oder anfänglichen Zustand auf das Objekt.
• Wenn der Benutzer explizit eine Animation initiiert, verwenden Sie die Verbwiedergabe; verwenden Sie andernfalls das Verb für die technische Dokumentation.

Beispiele:

• Sie wissen, dass ein Element Ihre Aufmerksamkeit benötigt, wenn sein Symbol mit dem Springen beginnt.
• Wählen Sie zunächst die Fotos aus, die Sie drucken möchten (beachten Sie, dass die Fotos bei auswahl vergrößert werden).
• Verwenden Sie einen Überblendungsübergang, um den Zustand eines Objekts nahtlos zu ändern.