Låt videon visa det orden inte räcker till för.
Visa bordet som dras ut, spärren som öppnas och produkten i användning. Vi gör videon enklare att starta och följa och håller sidan användbar redan innan någon trycker på uppspelning.
Ge besökaren en anledning att starta videon.
Tänk dig en möbelbutik som säljer ett utdragbart bord. Ett foto visar träet och formen. En användbar video svarar på en annan fråga: hur öppnas bordet, och vad behöver köparen göra?
Välj en förhandsbild som visar själva produkten och förklara vad demonstrationen tar upp. Låt mått, pris och andra köpuppgifter finnas som text. Besökaren ska inte behöva titta på en video för att veta om bordet får plats.
Illustration: förhandsbilden visar bordet, demonstrationen visar hur det dras ut.
Läs förklaringen från videon
Visa det orden inte får fram. En bild visar formen. Rörelse kan visa funktionen.
Visa förändringen. Låt handlingen förklara. Dra isär bordet. Lägg i skivan. Visa resultatet. Samma bord. Mer plats.
Gå nära. En liten detalj kan göra allt tydligt. Spärren går i lås. Led blicken till det som förklarar.
Ge ett skäl att titta. Visa från början vad tittaren får. Ett tydligt resultat ger handlingen en riktning. Så får du mer plats.
Förklara även utan ljud. Poängen ska synas. Dra isär bordet. Lägg i skivan. Lås före användning.
Välj video när den förklarar. Visa förändringen. Visa detaljen. Gör poängen tydlig.
Ta reda på när väntan börjar.
En långsam sida och en video som startar sent kräver olika kontroller. Testa båda på samma telefon och anslutning med resten av sidan synlig.
Innan tittaren startar videon
För en valfri demonstration bör ni visa en lagom stor förhandsbild och undvika att hämta hela videon innan den behövs. En förhandsbild som laddar spelaren vid klick kan också skjuta upp en tung tredjepartsspelare. Kontrollera nätverkstrafiken: instruktioner om förladdning garanterar inte vad webbläsaren hämtar. Se web.dev:s vägledning om videoladdning.
När tittaren har startat videon
Kontrollera väntan tills bilden börjar röra sig och leta sedan efter avbrott, suddiga detaljer och svåranvända kontroller. Minska onödiga data utan att förlora rörelsen eller produktdetaljerna som videon ska visa. Reservera utrymme för videon så att uppspelningen inte flyttar informationen runt omkring.
Visa steget som annars går förlorat.
I vårt tänkta bordsexempel sitter spärren under kanten. En bild på avstånd kan dölja just det kunden behöver se. Klipp till en närbild, visa rörelsen tydligt och låt bilden ligga kvar tillräckligt länge för att tittaren ska hinna följa den.
Texta talade instruktioner korrekt och i takt med handlingen. Förklara också viktiga visuella steg: ”Skjut spärren under kanten” säger mer än ”Flytta den här”. Beroende på innehållet kan förklaringen även behöva höras. Kontrollera tangentbordsstyrning, paus och undertexter. Använd W3C:s vägledning om tillgängliga medier för att avgöra vad videon behöver.
Illustration: närbilden visar spärren och hur den rör sig.
Välj lösning efter vad videon ska göra.
Bör vi själva vara värd för videofilen?
En videotjänst kan sköta leveransen och ge användbara uppspelningsfunktioner, men en inbäddad spelare kan lägga till nedladdningar och skript. Om ni levererar filen direkt styr ni presentationen på sidan och ansvarar för lämpliga filer, undertexter och kontroller. Jämför de funktioner ni behöver och hur alternativen faktiskt fungerar.
Löser en mindre fil problemet?
Det kan hjälpa om för mycket videodata är orsaken. Det rättar inte en otydlig förhandsbild, saknade undertexter eller en krånglig spelare. En stor förhandsbild kan försena sidans första vy, och en inbäddning kan lägga till skript eller flytta innehållet. Hitta orsaken innan ni byter spelare eller komprimerar filen igen.
Hur vet vi att ändringen hjälpte?
Upprepa samma uppgift före och efter ändringen. Jämför sidladdning, väntan efter klicket, avbrott och de detaljer som syns på en telefon. Be sedan någon som inte känner produkten att förklara steget som visades. Snabb uppspelning är användbar först när tittaren förstår den.
Ge kunderna en video de förstår.
Skicka sidan och videokällan. Berätta vad tittaren behöver lära sig, var väntan eller förvirringen uppstår och vilken enhet det gäller. Då kan vi hitta delen som behöver förbättras.