Animaties en overgangen

Strategisch gebruik van animaties en overgangen maakt uw programma gemakkelijker te begrijpen, soepeler, natuurlijker en van hogere kwaliteit te voelen en aantrekkelijker te zijn. Maar het gratis gebruik van animaties en overgangen kan uw programma afleidend en zelfs vervelend maken.

Animaties geven het uiterlijk van beweging of verandering in de loop van de tijd. Gebruik animatie om feedback te geven, een voorbeeld van het effect van een actie te bekijken, de relatie tussen objecten weer te geven, de aandacht te vestigen op wijzigingen of een taak visueel uit te leggen.

Microsoft Windows gebruikt een achtergrondflitsanimatie om feedback te geven waarop het object is geklikt.

Overgangen zijn animaties die worden gebruikt om gebruikers georiënteerd te houden tijdens wijzigingen in gebruikersinterfacestatussen en objectmanipulaties, en om deze wijzigingen soepel te laten voelen in plaats van jarring. Goede overgangen voelen zich natuurlijk en geven vaak de illusie dat gebruikers interactie hebben met echte objecten.

Windows Desktop Gadgets maken gebruik van vloeiende overgangen tussen hun beknopte en gedetailleerde statussen.

Over het algemeen worden de beste animaties en overgangen gebruikt om niet-verbaal te communiceren met gebruikers en om statuswijzigingen natuurlijker en minder merkbaar te maken. Het minst effectief is daarentegen dat ze niets communiceren of onnodige aandacht trekken. Animaties worden het beste gebruikt als een secundaire vorm van communicatie. Ze moeten informatie doorgeven die nuttig, maar niet kritiek is en toegankelijk zijn, gebruikers moeten gelijkwaardige informatie op andere manieren kunnen bepalen.

Opmerking: richtlijnen met betrekking tot huisstijl van software, geluiden toegankelijkheids- worden in afzonderlijke artikelen gepresenteerd.

Is dit de juiste gebruikersinterface?

Houd rekening met de volgende vragen om te beslissen.

Animaties

Zijn de volgende voorwaarden van toepassing?

• De animatie communiceert visueel iets nuttigs, zoals feedback geven, relaties, oorzaken en effecten weergeven of de aandacht vestigen op belangrijke veranderingen.
• Het is niet essentieel om de animatie te zien. Gelijkwaardige informatie kan op een andere manier worden verkregen. Gebruikers profiteren mogelijk niet van de animatie als:
  • Ze hebben animaties uitgeschakeld.
  • Hun aandacht is elders.
  • Ze zijn slechtziend.
  • De animatie wordt verborgen door een ander venster.
  • De animatie wordt niet afgespeeld vanwege onvoldoende systeemprestaties.
• De animatie heeft geen invloed op de productiviteit van de gebruiker. Hetzij:
  • Dit gebeurt snel (200 milliseconden of minder).
  • Het interfereert niet met interactie of kan worden onderbroken.
  • De gebruiker moet toch wachten.
• De animatie heeft geen invloed op de stroom van de gebruiker.
  • Het bevindt zich in het middelpunt van de aandacht van de gebruiker of trekt de aandacht naar iets buiten het middelpunt van de aandacht dat belangrijk of nuttig is bij het voltooien van een taak.
  • Het is gemakkelijk te negeren, niet afleidend of vervelend.
  • Het wordt niet vermoeiend. Gebruikers vinden het nog steeds geschikt en aangenaam, zelfs na herhaalde weergave.

Zo ja, overweeg dan een animatie te gebruiken.

Overgangen

Is een wijzigingsstatus van een object of scène en zijn alle bovenstaande voorwaarden voor het gebruik van animaties en een van de volgende voorwaarden van toepassing?

• De statuswijziging is conceptueel ontkoppeld, verwarrend of anderszins moeilijk te begrijpen.
• De statuswijziging is visueel jarrerend, ontbreekt continuïteit of vloeiendheid, of knippert; of lijkt onnatuurlijk, ongepoleerd of van slechte kwaliteit, vooral als het een groot schermgebied omvat.
• Als u een overgang gebruikt, wordt de statuswijziging sneller weergegeven.
• De statuswijziging verdient speciale aandacht van de gebruiker.

Zo ja, overweeg dan om een overgang te gebruiken.

Ontwerpconcepten

Animaties en overgangen zijn een effectieve manier om informatie visueel te communiceren waarvoor anders tekst moet worden uitgelegd of gemist door gebruikers.

Onjuist:

juist:

Het gebruik van een animatie communiceert dezelfde informatie, maar op een natuurlijke, onopvallende manier. Wat zou je liever duizend keer zien?

Animaties en overgangen hoeven geen aandacht te vragen om succesvol te zijn. In feite worden ze vaak gebruikt om te voorkomen dat aandacht wordt besteed aan programmamechanica waarvan gebruikers zich niet bewust hoeven te zijn. Veel succesvolle animaties zijn zo natuurlijk dat gebruikers zich er niet eens van bewust zijn; in plaats van dat gebruikers alleen hun afwezigheid zouden merken. Frequentie van voorkomen verhoogt de behoefte aan subtiliteit, dus bespaar effecten die aandacht vragen voor onregelmatige gebeurtenissen die echt de aandacht verdienen.

Een overgang van het startmenu waarmee u geen aandacht hoeft te trekken.

Naast het gemakkelijker te begrijpen en soepeler te voelen, zijn goed ontworpen animaties en overgangen een uitstekende manier om persoonlijkheid, karakter en stijl toe te voegen aan uw programma. Ze kunnen de gebruikerservaring meeslepender en aantrekkelijker maken door het een natuurlijk, echt gevoel te geven.

In Windows 7 worden taakbalkknoppen gemarkeerd op basis van de huidige muispositie en programmapictogramkleur. Deze benadering is visueel aantrekkelijk, maar subtiel en brengt een bescheiden persoonlijkheid over.

Animaties en overgangen zijn echter het meest effectief en welkom wanneer ze een duidelijk doel dienen. Ze moeten worden gebruikt om de bruikbaarheid, soepelheid en stroom te verbeteren, en de perceptie van kwaliteit, zonder de prestaties aanzienlijk te schaden.

Hoewel sommige typen animaties worden gebruikt om de aandacht van de gebruiker te trekken, moet u ervoor zorgen dat de aandacht goed verdient en waardig is om de trein van de gebruiker van gedachten te onderbreken. Het menselijke oog is gevoelig voor beweging, vooral randapparatuur. Het kan lastig zijn voor gebruikers om zich te concentreren wanneer er een knipperende taakbalkknop of een pictogram voor het draaiende systeemvak is. Vermijd het gebruik van animaties om gebruikers te onderbreken of af te leiden, of trek de aandacht naar dingen die de aandacht van de gebruiker niet rechtvaardigen.

Onjuist:

Programma's moeten hun taakbalkknop niet knipperen, tenzij gebruikers onmiddellijk iets belangrijks moeten doen. In dit geval hoeft de gebruiker alleen het programma te activeren.

Gebruik animaties en overgangen omdat uw programma ze nodig heeft, niet alleen omdat u dat kunt. En voor toegankelijkheid gebruikt u geen animatie als enige manier om essentiële informatie over te brengen. Zorg ervoor dat gebruikers op een andere manier gelijkwaardige informatie kunnen verkrijgen.

Kenmerken van goede animaties en overgangen

Goede animaties en overgangen vinden de juiste balans tussen deze kenmerken:

• Zijn duidelijk doelgericht. Er zijn goede animaties omdat ze moeten zijn, of ze informatie moeten communiceren, een interactie echt moeten maken of aandacht moeten vestigen op iets opmerkelijks. En doelgerichte animaties zijn nauwkeurig; als een animatie laat zien dat een taak wordt uitgevoerd, komt dit doordat de taak in feite wordt uitgevoerd.

Onjuist:

In dit voorbeeld ziet u in de animatie dat een volledig opgeladen batterij wordt geladen.

• Kijk soepel en continu. Goede animaties verwijderen probleemloos naden tussen scène- of elementstatuswijzigingen door relaties weer te geven en een gevoel van plaats en context te bieden. Continuïteit helpt gebruikers te begrijpen hoe ze hun locatie hebben en hoe ze kunnen terugkeren naar waar ze vandaan komen.

De preview-versie van het windows 7-taakbalkvenster voor continuïteit naarmate de gebruiker van het ene programma naar het andere gaat.

• Zijn realistisch. Goede animaties simuleren de werkelijke fysieke eigenschappen en het gedrag van een object. Hierdoor kunnen gebruikers de resultaten van hun interacties voorspellen en begrijpen. U hoeft de echte wereld niet precies te modelleren, maar als u realistische animaties gebruikt, moet u ze consistent houden met de echte wereld. Gebruikers mogen nooit worden verrast of verward door de resultaten, met name met animaties die worden gebruikt voor directe manipulatie.

In dit voorbeeld voelt de animatie die wordt gebruikt door de taakbalk van Windows 7 realistischer dan een statische invoegpositie.

• Zijn authentiek. Zelfs objecten die niet in de echte wereld worden gevonden, kunnen natuurlijk worden weergegeven door te zijn gebaseerd op het werkelijke gedrag van een ander, maar gerelateerd object. Deze metafoor werkt alleen als de relatie duidelijk het beoogde doel en gedrag communiceert.

In dit voorbeeld voelt de vensteranimatie 'squeegee' die door Windows 7 wordt gebruikt, authentiek omdat het consistent is met de werking van glazen vensters in de echte wereld.

• Gebruik natuurlijke toewijzing. Natuurlijke toewijzingen zijn fysiek of cultureel. Een op cultuur gebaseerde natuurlijke toewijzing kan bijvoorbeeld beginnen met het feit dat mensen in westerse culturen van links naar rechts lezen. Om een tijdreeks van objecten uit te drukken, is het middelste object dus actueel, objecten aan de linkerkant uit het verleden en zijn objecten aan de rechterkant in de toekomst. Vooruit in de tijd wordt aangegeven door beweging van links naar rechts.

In dit voorbeeld heeft het besturingselement Windows Media Player een natuurlijke toewijzing omdat het afspelen de positie van links naar rechts verplaatst.

• Heb persoonlijkheid. Goed gekozen animaties zijn geweldige manieren om persoonlijkheid, karakter en stijl aan uw programma toe te voegen. Ze kunnen de gebruikerservaring meeslepender en aantrekkelijker maken. Hoewel het type animatie bepaalt wat er communiceert, toont de specifieke manier waarop de animatie wordt uitgevoerd de persoonlijkheid van het programma. Goede animaties projecteert de juiste persoonlijkheid voor uw programma, of het nu serieus of whimsisch is, of ergens ertussen.

In dit voorbeeld helpt het gebruik van geanimeerde tekst en dynamisch perspectief de persoonlijkheid ervan vorm te vormen.

• Kijk en voel responsief. Goede animaties kunnen de productiviteit van de gebruiker niet schaden door gebruikers te blokkeren tegen andere interacties of door gebruikers af te dwingen om te kijken. Hoe natuurlijk en aantrekkelijk de animaties van uw programma ook zijn, niemand wil alleen op hen wachten. Goede animaties zien er ook responsief uit zonder jarlen te zijn door snel aan de slag te gaan met een zachte landing. Responsieve animaties profiteren ook van het snel communiceren van hun doel. Gebruikers moeten lange tijd geen animatie bekijken om erachter te komen wat het doet of wanneer het klaar is. Voor directe manipulatie zijn responsieve animaties essentieel om een direct en aantrekkelijk gevoel in de echte wereld te behouden. Als u zich direct wilt voelen, moeten de contactpunten van een object soepel onder de aanwijzer blijven tijdens de manipulatie. Elke vertraging, hakkende reactie of verlies van contact vernietigt de perceptie van directe manipulatie.

In dit voorbeeld voelt de aanraakpanning-overgang responsief door het contactpunt onder de vinger van de gebruiker te houden tijdens de manipulatie.

• Trek het juiste aandachtsniveau aan. Goede animaties zijn meestal subtiel en trekken alleen de aandacht die nodig is om hun doel te bereiken. Als gevolg hiervan leiden ze niet af, vervelend, te complex, te lang of herhalend. Ze worden niet vermoeiend na herhaalde bezichtigingen.

In dit voorbeeld trekt Windows Search tijdelijk de aandacht op overeenkomende zoekwoorden en vervaagt deze.

• Kijk alleen speciaal als echt speciaal. Frequentie verhoogt de noodzaak van subtiliteit, dus algemene interacties hebben eenvoudige animaties nodig die een eenvoudig idee op een eenvoudige manier communiceren. Reserveer speciale, complexe animaties voor speciale, onregelmatige ervaringen.

In dit voorbeeld gebruikt Windows een animatie die aandacht krijgt bij het opstarten om de ervaring speciaal te maken, maar een dergelijke animatie zou elders ongepast zijn.

U weet dat u het juiste evenwicht hebt bereikt wanneer de algehele ervaring wordt beschadigd als een van deze kenmerken is verwijderd.

Een animatiewoordenlijst maken

Goede animaties gaan over effectieve visuele communicatie en consistentie is van cruciaal belang voor hun effectiviteit. Als u een specifieke overgang gebruikt, zoals het pushen van een scène van rechts naar de volgende scène, moet dit de enige overgang zijn die voor dat doel wordt gebruikt en die overgang mag niet worden gebruikt voor enig ander doel. Als u verschillende betekenissen toewijst aan dezelfde animatie, kan deze de mogelijkheid om te communiceren schaden. Door specifieke animaties en overgangen toe te wijzen aan specifieke betekenissen, maakt u een woordenlijst voor animaties.

Dit probleem is van toepassing op animaties en overgangen met betekenis, niet op algemene animaties en overgangen waaraan gebruikers waarschijnlijk geen betekenis toewijzen of aan degenen waarvan het doel onopmerkbaar is. Animaties zoals vervaagden en speciale effecten, zoals opgeloste effecten, hebben bijvoorbeeld geen specifieke betekenis, zodat ze vrij kunnen worden gebruikt.

Een goede woordenlijst wijst animaties toe die het echte, fysieke gedrag van een object modelleren. Als u een animatie wilt toewijzen aan een object of actie die geen tegenhanger in de echte wereld heeft, kiest u een animatie die laat zien hoe het object zich zou kunnen gedragen als het echt was.

Hoewel het Startmenu geen echt object is, wordt het aanwijseffect ervan verlicht als een echt object dat kan worden geactiveerd.

Elke animatie in een vocabulaire moet duidelijk uniek zijn. De animaties moeten alleen vergelijkbaar gedrag hebben als de bijbehorende acties vergelijkbaar zijn. Verplaatsingsovergangen suggereren bijvoorbeeld navigatie, zodat u verplaatsingsovergangen uit verschillende richtingen kunt gebruiken om verschillende typen navigatie aan te geven.

U weet dat uw animaties en overgangen niet goed communiceren wanneer gebruikers de resultaten verwarrend, verrassend of onverwacht vinden. Over het algemeen is het beter om één doel goed te bereiken dan meerdere doeleinden niet zo goed.

In het ideale geval moet uw vocabulaire animatie uitgebreid zijn in alle gebieden van uw programma die ze nodig hebben. Als er maar een paar interacties natuurlijke animaties hebben, zal dat de aandacht vestigen op diegene die dat niet doen.

Zie de sectie Gebruikspatronen van dit artikel voor meer informatie over de Woordenlijst voor Windows-animaties.

De juiste persoonlijkheid ontwerpen

Hoewel het type animatie bepaalt wat er communiceert, spreekt de specifieke manier waarop de animatie wordt uitgevoerd, tot de persoonlijkheid van het programma en versterkt het merk ervan.

De persoonlijkheid van uw programma moet de aard van de taken en de persoonlijkheid van de gebruikers weerspiegelen, dus het is geen willekeurige keuze. Een goed ontworpen persoonlijkheid moet zich eerder authentiek voelen; probeer het nooit te forceren. De persoonlijkheid moet een emotionele verbinding maken met de gebruiker. Enkele factoren die u moet overwegen:

• Taken: Serieus of leuk; optioneel of vereist.
• Gevolgen: ernstig of minderjarig.
• kosten: gratis of gekocht; indien gekocht, matig geprijsd of duur.
• gebruikersfocus: relatief smalle groep doelgebruikers of een brede, algemene doelgroep.
• Gebruikersomgeving: Professional, casual of thuis.
• leeftijd van gebruiker: jonger of ouder.
• gebruiksfrequentie: frequent of onregelmatig.

De combinatie van deze factoren helpt bij het bepalen van een geschikte persoonlijkheid voor uw programma. Hier volgen enkele geschikte combinaties voor veelvoorkomende typen programma's:

Productiviteitstoepassingen

Productiviteitstoepassingen moeten zich natuurlijk richten op productiviteit. Hoewel een paar speciale ervaringen opvallen, moeten de meeste andere animaties de volgende kenmerken hebben:

• Klein
• Natuurlijk, realistisch
• Subtiel, onderbroken
• Snel, efficiënt
• Ontspannen

hulpprogramma's

Hulpprogramma's worden meestal kort gebruikt, zodat het gebruik van animaties agressiever kan zijn:

• Realistisch, illustratief, verklarend
• Veilig
• Innemend

Entertainment, games

Omdat het doel van deze programma's is om gebruikers te betrekken en te verrukken, kunnen de animaties en overgangen veel agressiever zijn door deze kenmerken te hebben:

• Groot (mogelijk integraal onderdeel van de ervaring)
• Kunstmatig, onwerkelijk
• Impactvol, levendig
• Emotioneel, speels, whimsisch
• Energiek

Het maken van een emotionele verbinding is zo belangrijk voor entertainmentprogramma's dat het acceptabel is om bepaalde regels te buigen als dit helpt gebruikers verliefd te maken op het programma. Het is bijvoorbeeld acceptabel als een animatie of overgang na de honderdste keer vermoeiend wordt als de meeste gebruikers het programma dat vaak niet gebruiken.

Over het algemeen zijn animaties en overgangen die klein, natuurlijk, verdubbeld, efficiënt en toch ontspannen zijn de veiligste inzet. Overgangen met deze kenmerken nemen doorgaans het kortste pad van begin tot eind, snel beginnen, zacht eindigen en niet overschieten. Bovendien zijn goed ontworpen overgangen ontworpen om goed te werken over het hele bereik van afstanden waarin ze worden gebruikt.

Animatieprestaties

Zorg er bij het ontwerpen van animaties voor dat ze niet van invloed zijn op de mogelijkheid van gebruikers om uw programma efficiënt te gebruiken. Over het algemeen zorgt u ervoor dat uw animaties langzaam genoeg zijn om aan hun doel te voldoen, maar snel genoeg dat ze de reactiesnelheid niet verstoren, te veel aandacht vragen of vermoeiend worden.

Onjuist:

Hoewel deze pagina van animatie een aantrekkelijke, echte uitstraling heeft, vermindert het de productiviteit van gebruikers door pagina's langer te draaien.

Korte overgangen (200 milliseconden of minder) zijn een speciaal geval (vooral wanneer ze vaak uit een vertraging werken) omdat gebruikers zich ervan bewust zijn dat ze een splits seconde voor hen moeten wachten. Gebruikers zijn bereid te wachten op dergelijke animaties als:

• De waargenomen wachttijd is extreem kort (200 milliseconden of minder).
• De overgang maakt de interactie soepeler en natuurlijker.
• De overgang zorgt ervoor dat de interactie sneller reageert.
• Elke vertraging helpt de gebruiker de controle te houden over de interactie.

Gebruikers accepteren een korte vertraging voor het opnieuw ordenen van de animatie op de taakbalk, omdat deze erg kort is en de interactie een natuurlijker gevoel geeft.

Er zijn drie manieren waarop animaties de prestaties nadelig kunnen beïnvloeden: snelheid, reactiesnelheid en perceptie.

Voor snelheid zijn sommige animaties visuele veneers ten opzichte van CPU-intensieve taken, dus het laatste wat u moet doen, is deze taken langzamer maken met CPU-intensieve animaties. De meeste CPU-intensieve animaties ('zware' animaties) hebben de neiging om:

• Betrek veel elementen die onafhankelijk van elkaar worden verplaatst.
• Speel voor een lange duur of afstand.
• Betrek een grote hoeveelheid schermruimte.
• Wiskundig intensief.

Animaties met minder invloed op prestaties:

• Betrek één object.
• Speel voor een korte duur of afstand.
• Betrek een kleine hoeveelheid schermruimte.
• Zijn niet wiskundig intensief.

Om goede prestaties te garanderen, moeten zware animaties alleen worden gebruikt voor taken die niet CPU-intensief zijn, terwijl lichte animaties overal kunnen worden gebruikt.

Voor reactietijd moeten de meeste animaties en overgangen zo worden ontworpen dat gebruikers kunnen communiceren terwijl de animatie wordt uitgevoerd. Tenzij een animatie deel uitmaakt van een proces, moet u deze onafhankelijk maken van de primaire interactie van de gebruiker en gebruikers toestaan deze te onderbreken.

Een animatie heeft mogelijk geen negatieve invloed op de prestaties van een taak in werkelijkheid, maar gebruikers hebben mogelijk de indruk dat deze wel doet. Gebruik bijvoorbeeld geen animatie die zwaar wordt weergegeven voor een trage, CPU-intensieve taak, zelfs niet als deze de prestaties niet beschadigt, omdat gebruikers kunnen concluderen dat de animatie de reden is dat de taak traag is. Als iets traag lijkt, voelt het langzaam, dus het is beter om animaties te gebruiken die zich eenvoudig, licht en snel voelen. Het gebruik van animaties met vastgemaakte beginpunten voor CPU-intensieve taken helpt.

Riskant:

Hoewel de animatie in het dialoogvenster Voor het kopiëren van Windows-bestanden de prestaties van het kopiëren van bestanden niet beschadigt, loopt het risico dat gebruikers denken dat dit wel het geval is.

Ook riskant:

In dit voorbeeld ziet de traag uitziende voortgangsanimatie in de adresbalk van Windows Verkenner er pijnlijk traag uit.

Animaties en overgangen hebben geen waarde als hun kwaliteit zo slecht is dat ze de ervaring minder soepel en minder aantrekkelijk maken. Om de kwaliteit ervan te behouden, moeten animaties worden ontworpen om probleemloos te verslechteren wanneer er onvoldoende systeembronnen beschikbaar zijn. Animaties kunnen afnemen door variaties te hebben waarvoor minder resources nodig zijn (zoals kortere lengtes of lagere framesnelheden), of zelfs niet helemaal worden uitgevoerd. Ongeacht de beschikbare resources, zorg ervoor dat de animaties van hoge kwaliteit zijn en eruitzien als animaties in plaats van softwarefouten.

Ten slotte, als gebruikers geloven dat de animaties en overgangen van uw programma aftrekken van hun productiviteit, is er een goede kans dat sommige gebruikers ze willen uitschakelen. Om deze mogelijkheid te ondersteunen, respecteert u de optie om alle overbodige animaties uit te schakelen gevonden in het Windows Toegankelijkheidscentrum.

Het juiste aandachtsniveau aantrekken

Hoewel slechts enkele typen animaties en overgangen specifiek zijn ontworpen om de aandacht van de gebruiker aan te trekken, moeten ze worden ontworpen om het juiste niveau van aandacht te trekken om hun doel goed te vervullen. Wat zijn de verschillende manieren om aandacht te trekken en hoe kies je de juiste?

animatie-effecten

Verschillende animatie-effecten trekken verschillende aandachtsniveaus aan. De volgende lijst bevat een overzicht van de meest voorkomende methoden, te beginnen met de meeste aandacht:

• Snel knipperen. Vraagt onmiddellijke aandacht. Kan de concentratie van gebruikers verbreken, ongeacht waar het knipperen plaatsvindt.
• Matig knipperend. Hetzelfde, maar vereist minder aandacht met een lagere frequentie.
• Stuiteren. Merkbaar in randapparatuur gezichtsvermogen en relatief veeleisende aard. Gebruikers merken het waarschijnlijk op, maar kunnen zich alleen elders blijven concentreren als de duur kort is.
• Beweging. Merkbaar in randapparatuurvisie, maar niet veeleisende. Complexe of 3D-bewegingen trekken echter meer aandacht dan eenvoudige of 2D-bewegingen. Gebruikers merken het waarschijnlijk op, maar kunnen zich elders blijven concentreren.
• Gematigde pulsing. Merkbaar maar niet afleidend in randapparatuurvisie. Gebruikers kunnen zich elders blijven concentreren. Kan pulshelderheid, kleuren en maten pulsen.
• Langzaam pulseren/gloeien. Merkbaar maar subtiel. Trekt meer aandacht dan een statisch effect, maar gebruikers merken de animatie mogelijk niet, tenzij ze al op zoek zijn.
• Vervagen. Nog minder merkbaar. Trekt meer aandacht dan een statisch effect, maar gebruikers merken de animatie mogelijk niet, tenzij ze al op zoek zijn.
• Statische markering/gleam. Merkbaar als gebruikers ervoor kiezen om te kijken, maar geen aandacht vraagt als het ergens anders is.
• Omgevings-/natuurlijke omgeving. Doelbewust niet merkbaar door een natuurlijke, echte uitstraling te hebben.

Als u de juiste benadering voor uw programma of functie wilt bepalen, moet u overwegen hoe deze factoren betrekking hebben op de scenario's van uw functie.

Stel dat u een chatprogramma ontwerpt en iemand de gebruiker zojuist een bericht heeft verzonden. Voor dit scenario is de aandacht van de gebruiker vereist, deze moet overal merkbaar zijn en meestal wil de gebruiker snel reageren. In dit scenario wordt voorgesteld dat een gematigde knipperende animatie een goede keuze is. Stel dat u gebruikers wilt informeren dat een afdruktaak is voltooid. Gebruikers moeten zich elders kunnen blijven concentreren en productief kunnen blijven werken, en het is acceptabel als gebruikers het niet merken. In dit scenario wordt voorgesteld dat matig tot traag pulsen of gloeien een goede keuze zou zijn.

duur

De juiste duur voor een aandacht voor het krijgen van animatie is afhankelijk van het scenario en het specifieke type animatie dat wordt gebruikt. Hoe meer aandacht een animatie-effect vereist, hoe korter de duur moet zijn. Hoewel zeer subtiele effecten die weinig aandacht vereisen (zoals langzaam pulsen) voor onbepaalde tijd kunnen worden gespeeld, moet aandacht veeleisende effecten slechts tussen 1 en 3 seconden worden afgespeeld. Alle langere risico's die de animatie overweldigend en vervelend maken.

In Windows 7 knippert de taakbalk voor de aandacht voor slechts een seconde. Het zou niet langer vervelend zijn.

effectverval

U moet aandacht trekkende animaties ontwerpen op basis van de veronderstelling dat als gebruikers niet meteen reageren, het is omdat ze bezig zijn iets anders te doen en niet willen worden onderbroken. Daarom moet uw doel zijn om aandacht te trekken zonder het te eisen.

Om de juiste balans te krijgen van het aantrekken van aandacht zonder het te eisen, vervalt u de intensiteit van een effect in de loop van de tijd. Als u bijvoorbeeld de aandacht wilt trekken, kunt u het effect aanvankelijk sterk maken, maar vervolgens het effect snel vertragen. Hierdoor wordt de aantrekkelijke kracht voornamelijk bepaald door het oorspronkelijke effect, maar de algehele indruk van de gebruiker wordt meestal bepaald door de voltooiing ervan.

In Windows 7 vertraagt het flasheffect van de taakbalk aan het einde.

Hoe zit het met PowerPoint?

Microsoft PowerPoint-overgangen schenden deze richtlijnen vaak opzettelijk omdat ze zijn ontworpen om de aandacht te vestigen op diaovergangen en gebruikers moeten wachten. Bovendien hebben ze geen specifieke betekenis, zodat ze niets meer communiceren dan het feit dat een dia verandert.

Overgangen in PowerPoint-stijl, wanneer deze correct worden gebruikt, hebben deze doeleinden:

• Ze splitsen lange presentaties in kleinere segmenten door de presentator te dwingen te onderbreken.
• Ze trekken de aandacht van het publiek naar wijzigingen in de presentatie, waardoor mensen zich opnieuw concentreren als ze zich afgevraagd hebben.
• Ze geven de presentatie een ritme zodat het niet monotonisch of overweldigend voelt.
• Hun stijl weerspiegelt de persoonlijkheid van de presentator of van het materiaal.

Hoewel dit belangrijke doelen zijn voor een presentatie, zouden dergelijke overgangen onnodige aandacht trekken in de gebruikersinterface van de meeste soorten programma's en zouden ze snel vermoeiend worden.

Bottom line: Gebruik geen overgangen in PowerPoint-stijl als model voor uw programma.

Als u maar zes dingen doet...

1. Gebruik animaties en overgangen om uw programma gemakkelijker te begrijpen en voelt u soepeler en aantrekkelijker. Ze zouden een duidelijk doel moeten hebben. Gebruik geen animaties omdat u dat wel kunt of om onnodige aandacht te vestigen op uw programma.
2. Definieer een woordenlijst voor animaties en gebruik deze consistent in uw programma. Gebruik de woordenlijst voor windows 7-animaties indien van toepassing.
3. Gebruik de kenmerken van uw animaties om uw programmapersoonlijkheid te geven en het merk ervan te versterken.
4. Maak de meeste animaties eenvoudig, kort en subtiel. Houd er rekening mee dat animaties geen aandacht hoeven te vragen om succesvol te zijn. Als een animatie geschikt en natuurlijk is, merken gebruikers alleen dat ze afwezig zijn.
5. Maak uw animaties snel en responsief en geef ze een lichtgewicht gevoel. Hoe aantrekkelijk uw animaties ook zijn, niemand wil zich voelen alsof ze op hen wachten. Ontwerp zwaardere animaties om sierlijke degradatie te hebben.
6. Ontwerp voor de lange termijn. Als een animatie vervelend, afleidend of vermoeiend is, ontwerpt u deze opnieuw of verwijdert u deze.

Gebruikspatronen

Animaties hebben verschillende gebruikspatronen:

Gebruik	Beschrijving
Feedback aanwijzen om weer te geven waar het interactiepunt zich bevindt.	Geeft aan dat het interactiepunt actief is. de muisaanwijzer kan ook worden weergegeven via een statisch effect. windows vocabulaire: weergave zwevend effect (begrenzing rechthoek, markering, uitbreiding) met een vervagen in/vervagen effect voor vloeiendheid. In de digitale mediaspeler van Opgegeven markeert albumhoezen en voegt u besturingselementen voor afspelen toe bij de muisaanwijzer.
klik op feedback om weer te geven dat een klikbaar object reageert en een klik heeft ontvangen.	Geeft aan dat er op een object is geklikt. Windows-woordenlijst: flash objectachtergrond bij klik-omlaaggebeurtenis. om contact met aanraking weer te geven, gebruikt u een rimpeleffect. Aanraken geeft een rimpelanimatie weer, zodat de gebruiker weet dat de interactie is herkend.
feedback over selectie om weer te geven dat een object is geselecteerd.	Geeft aan dat een object is geselecteerd. de selectie kan ook worden weergegeven via een statisch effect. windows vocabulaire: teken selectierechthoek met een vervagen/vervagend effect voor vloeiendheid. In Binnenkomend knipperen albumhoezen op klikken en krijgen vervolgens een selectierechthoek bij de selectie.
voortgangsfeedback om aan te geven dat een taak wordt uitgevoerd.	Feedback over voortgang geeft aan dat een taak voortgang maakt, meestal met activiteitsindicatoren, voortgangsbalken of animaties die de taak illustreren. Het bepalen van de voortgangsfeedback laat ongeveer zien hoeveel van de taak is gedaan en hoeveel er nog resteert, terwijl onbepaalde voortgang alleen aangeeft dat de taak wordt uitgevoerd. Windows-woordenlijst: draaiende activiteitsindicatoren, voortgangsbalken, achtergronden van voortgang, illustratieanimaties. In dit voorbeeld wordt in Windows Live Messenger onbepaalde voortgangsfeedback weergegeven tijdens het aanmelden.
Attractor om aan te geven dat iets de aandacht van de gebruiker nodig heeft.	Trek het juiste aandachtsniveau aan wanneer belangrijke objecten worden gemaakt of aandacht nodig hebben (vaak als gevolg van verandering), of belangrijke of dringende gebeurtenissen plaatsvinden. zie het juiste niveau van aandacht trekken voor ontwerptechnieken. woordenlijst van vensters: knipperen, bewegen, pulsen, gloeien, gleam. De Windows Live-werkbalk krijgt een animatie op het eerste uiterlijk om het duidelijk te maken waar het zich bevindt.
relatie om de relatie tussen objecten of causaliteit in effecten weer te geven.	Relaties weergeven, met name wanneer de relatie mogelijk niet wordt begrepen of verwacht, op een manier die niet afleidend of verwarrend is. Windows-vocabulaire: morphing, transport, fysieke verandering, zoals spiegelen, groeien van een puntbron, verkleinen tot een puntbestemming. In dit voorbeeld toont de animatie de relatie tussen de gamma-instelling en de invloed ervan op de weergave.
illustratie/voorbeeld van om visueel een concept, taak of het effect van een opdracht uit te leggen.	Een animatie of video waarin een concept wordt uitgelegd of hoe iets visueel werkt, om een tekstuele uitleg aan te vullen of te vervangen. Hierdoor kunnen gebruikers taken uitvoeren of opdrachten efficiënt en betrouwbaar kiezen. In dit voorbeeld gebruiken de invoeropdrachten voor tablet-pc's 'toon mij' illustraties om te laten zien hoe u kunt corrigeren, verwijderen, splitsen en samenvoegen.

Overgangen hebben verschillende gebruikspatronen:

Gebruik	Beschrijving
object vergroten/verkleinen/weergeven om de grootte of status van een object soepel te wijzigen.	Objectwijzigingen tussen statussen, mogelijk tijdens het verplaatsen. de overgang houdt gebruikers georiënteerd tijdens wijzigingen. Windows-woordenlijst: morphing, grootte wijzigen, objectdia's in of uit. In dit voorbeeld morpht het weergagadget van de beknopte status om het dialoogvenster Opties weer te geven.
inhoud weergeven/verbergen/wijzigen om inhoud soepel weer te geven, te verbergen of te wijzigen, meestal voor progressieve openbaarmaking.	Venster interieur hervormt om meer, minder of andere inhoud weer te geven. de overgang houdt gebruikers georiënteerd tijdens wijzigingen. Windows-woordenlijst: deelvenster dia's in of uit. flyoutvensters vervagen in en uit. verschillende inhoud vervaagt of rolt in. De Windows-calculator heeft een soepele overgang tussen weergavemodi.
Controle of betaalbaarheid weergeven/verbergen om besturingselementen of hun betaalbaarheid bij het aanwijzen of verplaatsen van de muis soepel weer te geven of te verbergen om het normale uiterlijk van de visual te vereenvoudigen.	Besturingselementen weergeven wanneer gebruikers de muisaanwijzer over een opdrachtgebied bewegen of de betaalbaarheid weergeven wanneer gebruikers de muisaanwijzer over een besturingselement bewegen. Als u de muisaanwijzer boven deze gebieden beweegt, geeft u aan dat de gebruiker van plan is te communiceren. de betaalbaarheid kan zich verbergen als de aanwijzer stationair wordt. In dit voorbeeld worden de besturingselementen voor Windows Media Player in de muisaanwijzer weergegeven wanneer deze zich in de modus Volledig scherm bevindt.
scèneovergangen om een scèneovergang soepel en naadloos te maken om aandacht te voorkomen.	Plotselinge scènewijzigingen kunnen jarring zijn, met name voor grote schermgebieden, dus gebruik scèneovergangen om vloeiendheid en continuïteit te creëren en context te bieden. scèneovergangen zijn ontworpen om natuurlijk en laag te zijn, om te voorkomen dat aandacht wordt besteed aan het overgangsproces zelf. windows vocabulaire: vervagen in/uit; kruis vervagen; schuift in/links, uit/rechts, omhoog, omlaag; duwt en bedekt. vervaagt In dit voorbeeld vervaagt de Windows-bureaubladachtergrond zachtjes tussen afbeeldingen om de overgang soepel en gecontroleerd te laten voelen.
speciale scèneovergangen om de aandacht te vestigen op een scène om deze speciaal te maken of de aandacht van de gebruiker opnieuw te richten.	Hoewel de meeste scèneovergangen geen aandacht moeten vestigen op het overgangsproces, zijn sommige ontworpen om de stroom te verbreken en aandacht te trekken om te benadrukken dat er iets anders gaat gebeuren. om de aandacht te vestigen, zijn speciale scèneovergangen ontworpen om onnatuurlijk te zijn en een hoge visuele impact te hebben. In dit voorbeeld maakt PowerPoint gebruik van overgangen waarbij aandacht wordt besteed aan het trekken van de doelgroep in de wijziging.
Directe manipulaties om het effect van directe manipulaties weer te geven (zoals verplaatsen, schuiven/pannen, draaien en zoomen).	De overgang toont het effect van de manipulatie in realtime. het effect moet soepel, doorlopend en consistent zijn met de echte wereld. verplaatsen en draaien kan op sommige plaatsen niet continu zijn om beperkingen of waarschijnlijk voorkeurskeuzen aan te geven. zoomen maakt inhoud groter of kleiner, waardoor het detailniveau mogelijk wordt gewijzigd. In dit voorbeeld zoomt Vergrootglas soepel tussen niveaus in.
Onjuiste directe manipulaties om aan te geven dat een directe manipulatie (zoals verplaatsen, schuiven/pannen) is geprobeerd, maar niet kan worden uitgevoerd.	De overgang toont de manipulatie die wordt geprobeerd, maar wordt teruggezet naar de oorspronkelijke staat. vaak lijkt het effect erop dat de manipulatie niet kan worden uitgevoerd vanwege een fysieke beperking in de echte wereld. deze animaties worden gebruikt in plaats van op tekst gebaseerde foutberichten, waardoor het echte gevoel van de manipulatie wordt verstoord. Windows-woordenlijst: stuiteren In dit voorbeeld wordt het document niet bezorgd om aan te geven dat de gebruiker het einde heeft bereikt.
overgangen sorteren, filteren, opnieuw ordenen om aan te geven dat de presentatie of inhoud van een verzameling items is gewijzigd.	De overgang geeft het effect van de wijziging aan (of voor complexe wijzigingen). in dit voorbeeld maakt Bing Visual Search gebruik van een filterovergang. In dit voorbeeld maakt Windows Media Center gebruik van een overgang voor opnieuw ordenen als een speciale ervaring terwijl een nummer wordt afgespeeld.
Prestatieovergangen om een actie sneller te laten gebeuren.	Hoewel elke overgang het potentieel heeft om een actie sneller te laten plaatsvinden, is het primaire doel van deze overgangen om de perceptie van prestaties en reactiesnelheid te verbeteren. een goede techniek is het weergeven van de taak die wordt uitgevoerd in opzettelijke stappen. als u daarentegen de actie uitstellen, de resultaten op een onhandige manier weergeeft of als u een activiteitsindicator gebruikt, is dit traag. Windows-woordenlijst: actie uitvoeren in fasen, met vloeiende overgangen tussen de fasen. In dit voorbeeld worden in een snelmenu van de taakbalk onmiddellijk de standaarditems weergegeven en worden de bestemmingen weergegeven zodra de lijst gereed is. Als u dit doet, vermomt u de tijd die nodig is om de lijst te maken. Het vertragen van de eerste weergave zou daarentegen niet reageren en het weergeven van een onvolledige lijst of voortgangsfeedback zou veel trager zijn.
Speciale ervaringen om gebruikers te betrekken en te verrukken tijdens onregelmatige, speciale ervaringen die belangrijk zijn voor uw programma en de volledige aandacht van de gebruiker hebben.	Hoewel elke overgang het potentieel heeft om een speciale ervaring te zijn, zijn deze overgangen het beste gereserveerd voor onregelmatige ervaringen die echt speciaal zijn voor uw programma. aangepaste overgangen worden gebruikt om een speciaal gevoel te geven. huisstijl en persoonlijkheid zijn vaak belangrijke ontwerpelementen. in tegenstelling tot andere patronen kunnen speciale ervaringen aandacht vragen, zwaar zijn en vereisen dat gebruikers even wachten. daarom dragen deze overgangen snel af als ze te veel worden gebruikt omdat de ervaring niet meer speciaal is. In dit voorbeeld wordt in Windows Media Center een animatie weergegeven tijdens het laden om gebruikers onmiddellijk te betrekken.

Richtsnoeren

Effectieve communicatie

• Een woordenlijst voor animatie definiëren en gebruiken om ervoor te zorgen dat uw animaties en overgangen een consistente betekenis hebben en deze consistent in uw programma gebruiken. De meeste vocabulaires moeten vermeldingen bevatten voor scènes en objectweergave en verdwijning, navigatie, basisinteractie (aanwijzen, selecteren, klikken), objectmanipulatie en interactie (verplaatsen, neerzetten, verkleinen, schuiven, pannen, zoomen, draaien, filteren) en aandacht trekken. Consistente betekenis is van cruciaal belang voor effectieve communicatie.

• Gebruik de Woordenlijst voor Windows-animaties wanneer dit praktisch is. Hoewel uw programma mogelijk een andere doelgroep en verschillende behoeften heeft, wegen vaak de voordelen van consistentie en bekendheid op tegen de voordelen van het verschillend zijn. Als de woordenlijst van uw programma anders moet zijn, gebruikt u dezelfde basisanimatietypen als Windows, maar geeft u ze de juiste persoonlijkheid voor uw programma.

• Wijs geen specifieke betekenissen toe aan algemene animaties en overgangen in een animatiewoordenlijst. Algemene overgangen zoals vervaagden en speciale effecten zoals opgeloste effecten hebben geen specifieke betekenis (voorbij verschijnen of verdwijnen), zodat ze vrij kunnen worden gebruikt.

  Onjuist:

  

  In dit voorbeeld wordt een kruisvervaaging onjuist gebruikt om naar het volgende item te navigeren. Omdat kruisvervaagingen geen specifieke betekenis hebben, biedt deze overgang geen context.

• Maak woordenlijsten duidelijk verschillend. Gerelateerde acties kunnen vergelijkbare effecten hebben (bijvoorbeeld in- en uitzoomen moeten inverse overgangen hebben), maar niet-gerelateerde acties moeten duidelijk verschillende effecten hebben (zoomen moet bijvoorbeeld nooit worden verward met draaien).

• Houd echte effecten realistisch en consistent. Als u realistische animaties en overgangen gebruikt, houdt u de ervaring consistent met de echte wereld. Gebruikers mogen nooit worden verrast, verward of misleid door de resultaten. En meng voor consistentie geen metaforen.

• Inverse acties inverse animaties geven. Dit voldoet aan de verwachtingen van gebruikers en vereenvoudigt het vocabulaire. Als een deelvenster bijvoorbeeld wordt weergegeven door in te glijden, verwijdert u het door er niet met een ander effect uit te glijden.

• Maak animaties begrijpelijk. Gebruikers moeten snel inzicht kunnen hebben in het doel van een animatie. Het is mogelijk om een animatie te klein te maken, te kort (minder dan 50 milliseconden), of zo subtiel dat gebruikers hun doel niet kunnen begrijpen. In dergelijke gevallen moet u de betekenis duidelijk maken of verwijderen.

  Onjuist:

  

  In dit voorbeeld is het effect zo klein en subtiel dat weinig gebruikers het doel ervan kunnen begrijpen. Beter om opnieuw te ontwerpen of te verwijderen.

Patronen

Feedback aanwijzen

• Als u responsief wilt weergeven, probeert u animatie af te spelen binnen 50 milliseconden van het invoeren of verlaten van de muisaanwijzerstatus.
• Als u snel wilt weergeven, maakt u de duur van de aanwijsanimaties minder dan 50 milliseconden.
• Gebruik een vervagen/vervagend effect bij aanwijzen. Als u dit doet, zijn de muisaanwijzereffecten duidelijk anders dan klik- en selectiefeedback.

klik op feedback

• Als u responsief wilt weergeven, probeert u animatie af te spelen binnen 50 milliseconden van een klik-omlaaggebeurtenis. Klik op gebeurtenissen die niet op feedback hoeven te klikken.
• Als u snel wilt weergeven, maakt u de duur van klikanimaties kleiner dan 50 milliseconden.
• Gebruik een achtergrondflits- of knippereffect. Als u dit doet, zijn klikeffecten duidelijk anders dan de muisaanwijzer en selectiefeedback. Omdat klikken vereist dat u de muisaanwijzer plaatst, zorgt u ervoor dat klikfeedback een vloeiende toevoeging is om feedback aan te brengen.

feedback over selectie

• Als u responsief wilt weergeven, probeert u animatie af te spelen binnen 50 milliseconden van selectie of deselectie.
• Als u snel wilt weergeven, maakt u de duur van selectieanimaties kleiner dan 50 milliseconden.
• Gebruik een in-/uitfade out selectierechthoekeffect. Als u dit doet, is de selectie duidelijk anders dan de muisaanwijzer en klikt u op feedback.

voortgangsfeedback

• Gebruik een activiteitsindicator wanneer een actie niet binnen een seconde kan worden uitgevoerd. Dit geeft aan dat de opdracht is ontvangen.
• Gebruik een voortgangsbalk wanneer een taak langer dan vijf seconden duurt. Zie Voortgangsbalkenvoor meer richtlijnen.
• Gebruik voortgangsfeedbackanimaties waarmee gebruikers het effect van langlopende taken kunnen visualiseren. Vermijd onnodige voortgangsfeedbackanimaties als een animatie niets nuttigs communiceert, gebruik in plaats daarvan een voortgangsbalk.
• Duidelijk identificeerbare voltooiings- en foutstatussen hebben. Gebruikers moeten deze definitieve statussen snel kunnen bepalen.
• Stop met het weergeven van de voortgang wanneer de onderliggende taak geen voortgang maakt. Gebruikers moeten kunnen bepalen of er geen voortgang wordt gemaakt en dienovereenkomstig reageren.

Attractors

• Gebruik attractors met beperking. Tenzij de informatie urgent, kritiek of anderszins waarschijnlijk van invloed is op het onmiddellijke gedrag van de gebruiker, is het meestal beter om de status onopvallend te wijzigen en gebruikers de wijziging zelf te laten detecteren. Afleidingen oplossen, geen vindbaarheid.

  

  In dit voorbeeld maakt het systeemvakpictogram voor draadloze netwerken gebruik van een animatie voor kritieke problemen, maar kunnen gebruikers zwakke signalen zelf detecteren.

• Kies een animatie die het juiste niveau van aandacht trekt. Attractor-animaties moeten slechts genoeg aandacht trekken om hun doel te vervullen, maar niet meer. Als de gebruiker onmiddellijk actie moet ondernemen, kiest u een effect dat aandacht vraagt, ongeacht waar de gebruiker op zoek is. Voor andere situaties raadpleegt u de Het juiste niveau van aandacht trekken sectie om de juiste combinatie van aandacht, merkbaarheid en urgentie te krijgen.

  Onjuist:

  

  De Microsoft Office-assistenten hebben onnodige aandacht voor zichzelf getrokken.

• Als de gebruiker niet reageert, herhaalt u de animatie niet of gebruikt u doorlopende animaties. In plaats daarvan wordt ervan uitgegaan dat de gebruiker ervoor heeft gekozen om nu niet te handelen, maar later kan handelen. Continue animaties maken het moeilijk voor gebruikers om zich te concentreren op iets anders.

relatieanimaties

• Relatieanimaties gebruiken om weer te geven waar objecten vandaan komen of waar ze naartoe zijn gegaan.
• Relatieanimaties moeten beginnen of eindigen met het geselecteerde object. Geef geen relaties weer tussen objecten waarmee de gebruiker momenteel geen interactie heeft. Als gebruikers helemaal merken, wat ze zullen merken, is de afleiding.

illustraties/previews

• Gebruik previews om het effect van een opdracht weer te geven zonder dat gebruikers deze eerst hoeven uit te voeren. Door gebruik te maken van handige previews kunt u de efficiëntie en het leergemak van uw programma verbeteren en de noodzaak van proefversies en fouten verminderen.
• Gebruik illustraties en previews met een duidelijke interpretatie. Ze hebben weinig waarde als verwarrend.
• slechts één illustratie tegelijk afspelen om overweldigende gebruikers te voorkomen. Als er meerdere gelijktijdige illustraties mogelijk zijn, gebruikt u de muisaanwijzer of een afspeelknop om gebruikers hun interesse te laten aangeven.
• Een afbeelding automatisch afspelen als dit het belangrijkste doel van het venster of de pagina is. Als dit niet optioneel is, kunnen gebruikers deze afspelen wanneer ze klaar zijn.
• Animaties afspelen met de optimale snelheid: ze zijn niet zo snel te begrijpen, maar niet zo traag dat ze te zien zijn.

object vergroten/verkleinen

• Maak geen clip van inhoud tijdens het wijzigen van het formaat. Vouw containers uit voordat u inhoud toevoegt. Inhoud verwijderen voordat u containers vermindert.

  Onjuist:

  

  In dit voorbeeld wordt inhoud tijdens het wijzigen van het formaat geknipt.

inhoud weergeven/verbergen/wijzigen

• Belangrijke informatie statisch weergeven. Gebruikers moeten geen toegang hebben tot belangrijke informatie via progressieve openbaarmaking.

Controle of betaalbaarheid weergeven/verbergen

• Geef belangrijke besturingselementen weer wanneer de gebruiker de aanwijzer ergens in het venster of deelvenster plaatst, of, indien volledig scherm, terwijl de muis beweegt. Gebruikers moeten niet naar deze controles zoeken, dus zorg ervoor dat hun detectie zeker is.

  

  In dit voorbeeld worden de besturingselementen van Windows Media Center weergegeven wanneer de aanwijzer zich boven het venster bevindt.

• Secundaire besturingselementen of besturingselementen weergeven wanneer de gebruiker de aanwijzer op of in de buurt van de opdrachten plaatst. Voor eenvoudige vindbaarheid maakt u de locatie duidelijk en het doel groot.

  

  In dit voorbeeld wordt in Windows Live Messenger een secundaire opdracht weergegeven wanneer de aanwijzer zich in de rechterbovenhoek bevindt.

scèneovergangen

• Fysieke scèneovergangen consistent maken met natuurlijke toewijzing. Mensen lezen van links naar rechts in Westerse culturen en hiërarchische diagrammen stromen van boven naar beneden. Als gevolg hiervan wordt in de toekomst aangegeven door beweging van links naar rechts. De volgende fysieke scèneovergangen hebben natuurlijke toewijzing:

  Overgang	Betekenis
  Van links	Teruggaan in taakstroom
  Van rechts	Vooruitgaan in taakstroom
  Vanaf boven	Taakhiërarchie omhoog verplaatsen
  Van beneden	Taakhiërarchie omlaag verplaatsen

• Als uw programma geluid afspeelt, ontwerpt u scèneovergangen en audioovergangen samen. Als een scène bijvoorbeeld geleidelijk uitvalt, moet elk geluid ook geleidelijk vervagen. Verpest naadloze visuele overgangen niet door plotselinge geluidsovergangen te hebben. Zie Soundvoor meer geluidsrichtlijnen.

Directe manipulaties

• Wanneer u fysieke bewegingen gebruikt in de interactie (zoals tossing), ontwerpt u de animatie zodat deze zich voelt als een natuurlijke reactie op het gebaar. Koppel de interactieoorzaak aan het overgangseffect. Geef de animatie fysieke kenmerken zoals versnelling, vertraging, momentum, weerstand, gewicht, stuiteren en draaien.
• Als u een direct gevoel wilt behouden, houdt u de contactpunten van een object soepel onder de aanwijzer tijdens de interactie. Elke vertraging, hakkende reactie of verlies van contact vernietigt de perceptie van directe manipulatie. Objecten mogen nooit verdwijnen terwijl ze worden gemanipuleerd.

overgangen sorteren, filteren of opnieuw ordenen

• Voor eenvoudige wijzigingen wordt de hele overgang weergegeven. Gebruikers kunnen de volledige overgang eenvoudig volgen. Eenvoudige wijzigingen hebben betrekking op vier items of minder.
• Voor complexe wijzigingen benadrukt u het einde van de beweging terwijl deze vertraagt en laat het oog de rest invullen. Hierdoor voelt de beweging zich veel responsiever en ordelijker.

Prestatieovergangen

• Overweeg om trage overgangen in twee of drie fasen uit te voeren, zodat ze sneller en onmiddellijk interactief worden weergegeven. Gebruik indien van toepassing de volgende samenstellingsvolgorde:
  • Extern frame
  • Achtergrond
  • Initiële inhoud (indien nodig met behulp van een tijdelijke weergave)
  • Primaire besturingselementen (zodat gebruikers onmiddellijk kunnen communiceren)
  • Secundaire besturingselementen en eventuele overige UI-elementen
  • Uiteindelijke inhoud (als er een tijdelijke weergave is gebruikt) Gebruik overgangen zoals vervaagden en dia's om de samenstelling soepel, ordelijk en verfijnd te maken.

Wanneer u in de weergave Vogeloog schuift, wordt in Bing-kaarten een tijdelijke rasterachtergrond weergegeven. Hierdoor kunnen gebruikers direct blijven schuiven, voordat de uiteindelijke inhoud wordt weergegeven.

animaties speciale ervaring

• Bekijk de welkomstschermen met animatie (evenals statische welkomstschermen). Vaak trekken welkomstschermen gewoon de aandacht op hoe lang een programma duurt om te laden en ze dragen hun welkom snel. Hoewel welkomstschermen acceptabel zijn als ze alleen worden weergegeven wanneer gebruikersinteractie niet mogelijk is, is wanneer praktisch een beter alternatief is om uw programma te ontwerpen, zodat gebruikers er onmiddellijk mee kunnen communiceren, zelfs als het nog steeds wordt geladen.
• Geef de opdracht Inleiding overslaan op als een welkomstscherm met animatie langer dan drie seconden duurt. Als u ergens op het welkomstscherm klikt, moet u deze ook sluiten. U kunt ook een korte versie van de animatie gebruiken na een initiële periode.

Voorstelling

• Zorg ervoor dat gebruikers niet wachten op de animaties en overgangen van uw programma. Gebruik korte animaties en overgangen (minder dan 200 milliseconden) wanneer dit praktisch is. Gebruik snellere animaties (100 milliseconden) voor frequentere bewerkingen. Ontwerp langere animaties (meer dan één seconde meestal de voortgangsfeedback, illustratie en speciale ervaringspatronen), zodat gebruikers kunnen blijven werken terwijl ze worden uitgevoerd.

• Ontwerp langlopende animaties om gebruikers duidelijk te maken dat ze kunnen communiceren terwijl de animatie wordt uitgevoerd. Gebruikers proberen niet verder te werken als de visuele aanwijzingen suggereren dat ze dat niet kunnen.

  

  In dit voorbeeld van Windows Internet Explorer stelt de voortgangsbalk met weinig sleutel in de statusbalk voor dat gebruikers niet hoeven te wachten op voltooiing voordat ze kunnen communiceren.

• Gebruik lichtgewicht animaties voor CPU-intensieve taken. Hierdoor beschikt u over volledige verwerkingskracht voor de taak. Bovendien zien gebruikers niet dat de lichtgewicht animatie de reden is waarom de taak CPU-intensief is.

• Een activiteitsindicator niet weergeven tijdens een animatie of overgang. Als u dit doet, vernietigt u het effect. Ontwerp animaties en overgangen zodat ze meteen kunnen beginnen.

• Ontwerp animaties om probleemloos te verslechteren wanneer er onvoldoende systeembronnen zijn. Animaties kunnen afnemen door variaties te hebben waarvoor minder resources nodig zijn (zoals kortere lengtes of lagere framesnelheden), of zelfs niet helemaal worden uitgevoerd. Ongeacht de beschikbare resources, zorg ervoor dat de animaties van hoge kwaliteit zijn en eruitzien als animaties in plaats van softwarefouten.

  Onjuist:

  

  In dit voorbeeld wordt de overgang voor het herstellen van vensters gebruikt, ook al zijn er onvoldoende systeembronnen om deze goed af te spelen. Daarom lijkt het bevroren frame een bug te zijn. Als de resources niet beschikbaar zijn, is het beter om alleen het venster weer te geven zonder een overgang.

Animatiekenmerken

Goed ontworpen animaties en overgangen hebben over het algemeen de volgende kenmerken:

• Korte duur. De meeste animaties moeten tussen 100 en 300 milliseconden zijn, bij voorkeur 1/6 seconde (167 milliseconden) of 1/4 seconde (250 milliseconden). (Speciale ervaringen en feedback over voortgang kan langer zijn.) Gebruik snellere animatietijden voor frequentere bewerkingen. Over het algemeen duurt het langer om animaties te voltooien, meer tijd om te begrijpen en langzaam te voelen.

• Reactievermogen. Animaties moeten binnen 50 milliseconden van de initiërende gebeurtenis of gebruikersactie beginnen. Langere begintijden reageren niet.

• Versnelling/vertraging. Om er natuurlijk uit te zien, moeten de meeste animatie-effecten versnellen bij het starten en vertragen bij het stoppen. Als u responsief wilt uitzien, ontwerpt u animaties om snel aan de slag te gaan. Ontwerp animaties die aan het einde vloeiende landingen hebben om te worden weergegeven, zodat deze worden gecontroleerd. Hoewel dit van toepassing is op bewegingseffecten, is het ook van toepassing op elk effect dat beweging voorstelt, zoals zooms en zelfs vervaagt.

  

  De meeste animaties moeten snel starten en zachte einden hebben om een responsief, maar gecontroleerd gevoel te hebben.

• Beweging. Animaties die beweging weergeven, moeten in het bijzonder versnellen en vertragen, dus gebruik geen lineaire beweging, tenzij de duur van de animatie erg kort is. Bewegingen moeten het korte pad van begin tot eind nemen, zonder overgeschoten te worden. Het volledige animatiepad is niet altijd vereist. Benadruk indien nodig het einde van de beweging terwijl deze vertraagt en laat het oog de rest invullen. Hierdoor voelt de beweging zich veel responsiever en ordelijker. Wanneer u de beweging van meerdere objecten tegelijk aangeeft, geeft u ze iets verschillende paden met iets verschillende tijdsinstellingen om zich natuurlijker te voelen.

• Framesnelheid. De meeste animaties moeten een framesnelheid van 20 frames per seconde gebruiken. Als de animatie voor een speciale ervaring is of gerelateerd is aan het belangrijkste doel van het programma, kunt u overwegen om een hogere snelheid van 24 30 frames per seconde te gebruiken om de soepelheid en het realisme te verbeteren.

• Schub. Ontwerp animaties om goed te werken voor het hele bereik van het beoogde gebruik. Paginaovergangen moeten bijvoorbeeld worden ontworpen om te werken voor alle paginaformaten.

• Persoonlijkheid. Ontwerp animaties om zich natuurlijk, gedempt en efficiënt te voelen in plaats van kunstmatig, whimsisch of traag.

Tekst met animatie

• Hoewel u mogelijk tekst met een overgang weergeeft, niet continu animaties aan tekst toevoegen. tekst met animatie leidt vaak af en is moeilijker te lezen dan statische tekst. Uitzonderingen:
  • U kunt tekst animeren in situaties waarin deze traditioneel wordt geanimeerd en u een toegankelijk alternatief biedt.
  • U kunt tekst animeren als het doel van de tekst voornamelijk decoratief is.

In dit voorbeeld wordt tekst van animaties gemaakt, maar het doel ervan is voornamelijk decoratief. Er is geen probleem als gebruikers de tekst niet zorgvuldig lezen.

Energieverbruik verminderen

• Ontwerp uw animaties om het energieverbruik te verminderen. Wanneer animaties correct zijn ontworpen, mag het energieverbruik niet aanzienlijk toenemen. Om het energieverbruik te verminderen:
  • Stop met animaties wanneer het beeldscherm is uitgeschakeld. Het beeldscherm is mogelijk uitgeschakeld om energie te besparen.
  • Gebruik geen langlopende animaties die niet door de gebruiker zijn geïnitieerd. Animaties die periodieke timers met een hoge resolutie gebruiken, verminderen de efficiëntie van processorkrachtbeheer. Zorg er ook voor dat u periodieke timers met een hoge resolutie uitschakelt wanneer de animaties zijn voltooid.
  • Alle animaties onderbreken wanneer het systeem inactief wordt. De periode van inactiviteit van de gebruiker wordt bepaald door Energieopties in het Configuratiescherm.

Toegankelijkheid

• Gebruik animatie niet als enige manier om essentiële informatie over te brengen. Animaties moeten informatie doorgeven die nuttig, maar niet kritiek is, omdat ze niet toegankelijk zijn voor gebruikers met visuele beperkingen.

• Zorg ervoor dat gelijkwaardige informatie beschikbaar is via andere middelen, zoals:

  • Door inspectie. Gebruikers kunnen gelijkwaardige informatie bepalen door te kijken naar het scherm of de objecten die betrokken zijn bij de animatie.
  • Door eenvoudige interactie. Gebruikers kunnen gelijkwaardige informatie bepalen door de muisaanwijzer te bewegen, te klikken of erop te dubbelklikken.

  

  De startpagina van Bing heeft een eerste animatie die verschillende hotspots weergeeft. Gebruikers kunnen ook de hotspots weergeven door de cursor ernaast te verplaatsen.

  Houd er rekening mee dat 'equivalente informatie' geen identieke informatie betekent. De informatie kan een andere indeling hebben of een eenvoudige aftrek vereisen.

• Stel, indien van toepassing, de invoerfocus in op het object dat tijdens een overgang is gewijzigd. Hierdoor kunnen ondersteunende technologieën detecteren waar de wijziging is opgetreden. Maar wijzig de invoerfocus niet wanneer de gebruiker het toetsenbord gebruikt.

• Gebruik geen animaties of overgangen die snel knipperen of het formaat van objecten wijzigen. Knipperende en snelle schermveranderingen kunnen problemen veroorzaken voor mensen met een aanvalsbeperking en andere neurologische aandoeningen.

• Gebruikers toestaan de animaties en overgangen van uw programma uit te schakelen. Als u deze mogelijkheid wilt ondersteunen, respecteert u de optie Alle overbodige animaties uitschakelen in het Toegankelijkheidscentrum in Windows.

  ontwikkelaars: U kunt bepalen of animaties zijn ingeschakeld met behulp van de SystemParametersInfo-API.

• Ontwerptaken ervan uitgaande dat gebruikers de animaties van uw programma uitschakelen. Zorg ervoor dat de taakstroom hierdoor niet aanzienlijk wordt verstoord.

Zie Accessibilityvoor meer richtlijnen voor toegankelijkheid.

Documentatie

• Vermijd indien mogelijk verwijzingen naar animaties. In plaats daarvan verwijst u naar het object dat wordt geanimeerd en, indien nodig, het type animatie.
• Raadpleeg geen overgangen, behalve in technische documentatie. Raadpleeg in plaats daarvan het object in de uiteindelijke of initiële status.
• Als de gebruiker expliciet een animatie initieert, gebruikt u het werkwoord afspelen; gebruik anders het werkwoordgebruik voor technische documentatie.

Voorbeelden:

• U weet dat een item uw aandacht nodig heeft wanneer het pictogram begint te stuiteren.
• Selecteer eerst de foto's die u wilt afdrukken (houd er rekening mee dat de foto's bij selectie worden vergroot).
• Gebruik een overgang voor kruisvervaaging om de status van een object naadloos te wijzigen.