Originaltittel: 'Designing Web Usability: The Practice of Simplicity', New Riders Publishing, 2000. Animation.
Viser sammenheng ved overganger
Hvis et eller annet har to eller flere tilstander, vil det være mye lettere for brukerne å forstå tilstandsendringene hvis overgangene animeres i stedet for at de kommer momentant. Gjennom en animert overgang vil en bruker via sanseapparatet kunne registrere ulike trinn, i stedet for å måtte koble inn kunnskap og erfaring for å trekke slutninger om overgangene. (sml. Jakob Nielsen (1), s. 145)Eksempel: En animasjon som illustrerer Pytagoras setning ved å animere flyttingen av ulike kvadrater og trekanter for å vise at to areal har samme størrelse.
Viser dimensjonalitet ved overganger
En brukers bevegelse langs ulike navigasjonsakser, f.eks. fram og tilbake mellom en rekke objekter eller opp og ned mellom flere nivåer, kan bli illustrert ved animasjon. (sml. Jakob Nielsen (1), s. 145)Eksempel: Å bla fram til neste eller tilbake til forrige objekt kan f.eks. vises ved et animert sveip fra henholdsvis høyre til venstre og venstre til høyre (hvis lesing starter fra venstre i gjeldende språk). Hvis brukeren beveger seg til et annet nivå i et hypermedium, kan en animasjon som viser en "ned-animasjon" f.eks. fra hyperkobling til fotnote at en går til et underliggende nivå og en animasjon av en "åpen iris" at en suges opp og inn til en annen samling objekter. Zooming ut av et lite objekt til en forstørrelse eller zooming inn slik at det større objektet forminskes eller lukkes, viser at et nytt objekt har "vokst ut" av et tidligere objekt eller at et objekt minimeres eller lukkes.
Illustrere endringer over tid
Fordi en animasjon er noe som vises over tid, gir den et en-til-en-bilde av fenomener som endres over tid. (sml. Jakob Nielsen (1), s. 145)Eksempel: Avskoging av regnskogene kan vises på et kart med en animasjon som viser endringene i området over tid. Et prosjektils bane kan animeres gjennom en sekvens av ulikes posisjoner (i 2D eller 3D) til bestemte tidspunkter.
Sammensatte visninger
Animasjon kan også brukes til å vise flere informasjonsobjekter på samme sted. (sml. Jakob Nielsen (1), s. 146)Eksempel: Et brukerskjermbilde kan være forsynt med forklaringer som popper opp når brukeren beveger markøren over de ulike hyperkoblingene. Noen deler av bildet kan være aktive områder, evt. merket med en vandrede eller flimrende streklinje, som viser alternative bilder ved mouse-over eller -down. Menneskekroppens kan være f.eks. skrelles av for ulike kroppsdeler: muskler, nervesystem eller skjelett.
Berike grafiske framstillinger
En del informasjon er lettere å visualisere med bevegelse enn med stillbilder. Animasjon er den beste måten å illustrere alle slags endringer på. (sml. Jakob Nielsen (1), s. 146)Eksempel: Ved design av ikoner er det alltid lettere å illustrere objekter enn operasjoner. Det innarbeidede ikonet for viskelær er det i noen programmer til å ta feil av. En kan i stedet bruke et animert ikon der viskelæret beveges over bakgrunnen og punkter blir borte. På den måten kommer verktøyets funksjon klart fram. Selvsagt bør grafikken på ikonet bare bevege seg hvis brukeren viser spesiell interesse for det f.eks. ved å plassere musepekeren over det.
Visualisere tredimensjonale strukturer
Siden en dataskjerm er todimensjonal, vil brukere aldri kunne få full forståelse av en tredimensjonal struktur bare ved hjelp av én enkelt illustrasjon, samme hvor godt den er laget. Med animasjon kan en få fram de tredimensjonale egenskapene hos objekter og gjøre det lettere for brukere å visualisere objektenes romlige natur. En behøver nødvendigvis ikke la objektet spinne helt rundt. Det kan være nok at det svinger sakte fram og tilbake. Det bør beveges langsomt, slik at brukeren greier å fange opp hvordan objektet ser ut. En kan la brukeren bevege tredimensjonale objekter, men ofte er det bedre at designeren avgjør hvilken animasjon som skaper best forståelse av objektet. (sml. Jakob Nielsen (1), s. 146)Eksempel: En geometrisk figur som en oktoeder eller en konstruksjonstegning av en bil kan tilrettelegges slik at brukeren beveger objektet med en styreenhet. En slik brukerstyrt animasjon krever derimot at brukeren forstår hvordan han kan bevege objektet. Med en todimensjonal styreenhet er ikke dette uten videre enkelt.
Påkalle oppmerksomhet
I første omgang kan det synes som om enhver animasjon kan regnes som fornuftig ut fra målet om å "påkalle oppmerksomhet". Forskjellen mellom en god og dårlig måte å påkalle oppmerksomhet på, ligger i om animasjonen er av verdi for brukeren. Ofte blir ikke brukeren hjulpet ved å få noe framhevet. Til slutt skal noen få tilfeller nevnes, der animasjonenes evne til å dominere brukerens visuelle oppmerksomhet med fordel kan anvendes. (sml. Jakob Nielsen (1), s. 147)Eksempel: En animert overskrift har god virkning, hvis målet er å gjøre brukeren oppmerksom på ett bestemt element eller ny informasjon. Animert tekst bør lages som en engangsanimasjon, f.eks. tekst som glir inn fra høyre, som vokser ut av den første bokstaven eller som gradvis blir større. Den bør aldri være en kontinuerlig animasjon, for bevegelig tekst er mye vanskeligere å lese enn tekst som står i ro. Brukerens oppmerksomhet skal fanges av animasjonen når den begynner. Deretter bør teksten kunne leses i fred og ro. Et annet eksempel på en animasjon som har brukerverdi ville være et privat nettsted med et klassebilde som hadde en kobling til noe sånt som "Se klassebildet mitt." Hvis brukeren fulgte lenken, ville det være greit med en animert sirkel eller pil som viste hvor forfatteren sto på bildet. Et annen eksempel kunne være en side med mye stoff, der ett punkt på siden er nytt eller spesielt viktig. Det ville da være greit å la en engangsanimasjon påkalle brukerens oppmerksomhet.
M
re...
Mre...
Mre...
Tilbake til .... Hvorfor animasjoner?
(1)
Tilbake til .... Hvorfor animasjoner? (2)
Animation is good for:
- Showing continuity in transitions
- Indicating dimensionality in transitions
- Illustration change over time
- Multiplexing the display
- Enriching graphical representations
- Visualizing 3D-structures
- Attracting attention