Innhold
- Se denne videoen for å følge opplæringen ...
- 01. Er det nødvendig?
- 02. Miljø
- 03. Er det irriterende?
- 04. Ytelse
- 05. Kontekst og identitet
- Coda
Lyd på nettet. Jeg vet. Historisk sett har disse to tingene ikke gått veldig bra sammen. De fleste av oss har blitt brent når vi besøker et nettsted hvis skaper har antatt, sannsynligvis som en ettertanke, at en bakgrunnsseng av forferdelig elektro-jazz ville være en utmerket måte å forbedre stemningen på. Heldigvis trenger det ikke å være slik. Vi kan gjøre ting annerledes.
Når folk snakker om native versus web-apper, blir lyd aldri nevnt. Likevel er det dette elementet som hjelper brukergrensesnittet til mange innfødte apper å utmerke seg over sine kolleger på nettet. Ta for eksempel kameraappen på en telefon. Hvordan vet vi når et bilde er tatt? Du vil mest sannsynlig se en slags blits på skjermen for å indikere at et bilde er tatt, men det er vanligvis sikkerhetskopiert med lyden av et emulert mekanisk klikk på kameraets lukker. Hva med Twitters berømte "pull to refresh" -kontroll? Ville det være like tilfredsstillende hvis det ikke hadde den lille 'popen' når du slapp taket?
Se denne videoen for å følge opplæringen ...
Så hvorfor tenke på dette nå? Hva er endret? Vel, for det første trenger vi ikke stole på Flash lenger. Med ankomsten av lyd> med flere og flere nettlesere som implementerer Web Audio API, kan vi produsere lyd naturlig i nettleseren uten forsinkelse og med mer kontroll enn vi noen gang har hatt før. Vi trenger ikke engang å bruke lydfiler hvis vi ikke vil. Web Audio API lar oss lage lyd på klienten, akkurat som vi gjør når vi lager bilder fra bunnen av ved å male til lerret element, men mer om det senere.
Si at vi vil varsle en bruker når opplastingen av deres bilde til nettstedet vårt er fullført. Det kan være lurt å gi tilbakemelding på lyden ved å spille av en lyd. Selv om dette er teknisk greit å implementere, kan det være skadelig for brukeropplevelsen hvis det ikke er riktig gjennomtenkt. For å gi deg noen veiledning, har jeg laget en liste over fem viktige ting du bør vurdere når du tar med lyd til nettappen din.
01. Er det nødvendig?
Det er ikke nødvendig å poppe og bløste for hver svevde lenke eller for hver CSS-overgang. En handling eller et resultat skal bare ledsages av en lyd hvis det i stor grad forsterker eller avklarer en viktig melding til brukeren. Varsle brukeren om noe som krever oppmerksomhet? Sannsynligvis. Klikk på lenker? Definitivt ikke.
02. Miljø
Kanskje en av grunnene til at innfødte mobilapper har en tendens til å omfavne lyd mye mer, er at det blir nødvendig å gi ytterligere tilbakemeldinger i et miljø som er mer sannsynlig å være støyende og fylt med visuelle distraksjoner. Er det mer sannsynlig at nettappen din blir brukt på farten, eller på et stille kontor der slike lyder kan være distraherende for andre? Hvis du vurderer å legge til lyd for å forbedre en mobilopplevelse, bør du vurdere tonehøyde på lyden din. Basslyder kutter for eksempel ikke gjennom bakgrunnsstøy, noe som gjør det vanskelig å høre.
03. Er det irriterende?
Lyd kommer med den ekstra byrden å være potensielt ekstremt irriterende. Noen ganger er det selve lyden, andre ganger er det nede på at den blir gjentatt. Noen ganger er det begge deler (hør på Samsungs nylige varslingsfløyte) Heldigvis kan vi redusere sjansen for at dette skjer ved å gjøre noen få ting:
- Gjør lyden kort. Mindre enn et sekund er å foretrekke, et halvt sekund er enda bedre.
- Forsikre deg om at tonene som utgjør lyden din er harmoniske, og at klangen er behagelig.
- Gjenta bare lyden hvis det er absolutt nødvendig.
Når det gjelder repetisjon, bruker chatapplikasjoner som de som er en del av Facebook og Google+ lyd for å varsle brukeren om at noen har sendt dem en melding. Dette er fornuftig hvis en bruker har Facebook åpent i en annen fane enn den de for tiden jobber med, da det er en klar indikator på at noe som krever oppmerksomhet venter. Men hvis de svarer på nettpraten, hvilken fordel gir meldingen?
04. Ytelse
Avhengig av hvor lenge det er, kan et lydutdrag ha en filstørrelse større enn de fleste bilder på siden din. Heldigvis vil dette ikke påvirke noe visuelt eller blokkere noen funksjonalitet. Så, i stedet for å laste ned lydfiler ved siden av HTML og bilder, bør du vurdere å laste den i bakgrunnen etter at siden er lastet inn, mens brukeren lykkelig samhandler med siden din.
Enda bedre, vurder å bruke Web Audio API der du kan. Web Audio API er en måte å manipulere lyd i nettleseren ved hjelp av JavaScript på høyt nivå. Selv om det for øyeblikket ikke er implementert i alle større nettlesere, er det absolutt verdt å tenke på å bruke det sammen med lydelementet som en reserve. API-et lar deg lage lyd i nettleseren fra bunnen av uten å bruke eksisterende lydfiler. Selv om dens inn og ut er utenfor omfanget av denne artikkelen, kan du se hvordan jeg opprettet suksess-demo.html varslingslyd (tilgjengelig for nedlasting i opplæringsfilene) i JavaScript hvis du bruker Chrome, Safari eller Firefox.
05. Kontekst og identitet
Lyd opprettet for å forbedre brukeropplevelsen til et morsomt nettsted rettet mot barn, vil ikke være passende for en finansnettapp. Se for deg stemningen til personen som bruker appen din, og sørg for at du velger tonen riktig.
Lyd kan også bli en like integrert del av et merke som den visuelle identiteten. Mac-oppstartslyden, Nokia-ringetonen og Intels Inside-klokkespill er eksempler på at hvis vi skulle høre disse lydene utenfor sammenheng, ville vi fortsatt kjenne selskapene som var involvert. Selv om det ikke er nødvendig å skyve det unike motivet nedover brukerens ørekanaler ved enhver anledning, bør du vurdere å lage en pakke med lyder som gjenspeiler den visuelle identiteten til nettstedet ditt. Facebook tok nylig denne ideen et skritt videre; den innkommende samtalelyden består av fire noter: F, A, C og E.
Coda
Hvis det gjøres bra, kan lyd forbedre og berike selv de kjedeligste nettappene. Glem bakgrunnsmusikken for automatisk avspilling, fokuser på hvordan den kan forbedre den generelle opplevelsen og gleden av nettstedet ditt. Riktignok kommer det ikke alltid til å være hensiktsmessig. I tillegg til å irritere brukerne dine, må du passe på å irritere dem som er fysisk nær brukeren din. IPhone-brukeren som ikke har slått av lyden fra skjermtastaturet, kommer til å tenke på. Legge til lyd bør gjøres forsiktig med en lett berøring.
Nå som Web Audio API støttes i Chrome, Safari, Firefox og Opera, har vi nå full kontroll over lyd uten nedlasting av viktige eiendeler. Kraften til API-et skal heller ikke ignoreres. Dynamisk bruk av lydeffekter som reverb eller kryssfading av to separate musikkstykker forvandler de nåværende funksjonene til HTML5-spill, noe som gjør hele opplevelsen mye mer oppslukende. Du kan til og med lage musikkinstrumenter i nettlesere som utfordrer deres opprinnelige rivaler. Men jeg vil si det. Se trommemaskinen min laget med Web Audio API.
Lyder kan være like effektive når det gjelder å gi tilbakemelding til brukerne som enhver visuell indikasjon. Det er på tide at vi nærmer oss det på nytt med den forsiktighetsopplevelsen som har innprentet oss.
Ord: Stuart Memo
Denne artikkelen dukket opprinnelig opp i nettmagasinutgave 250.
