# Tuotedemovideo: näytä toiminta alle minuutissa

[Canonical HTML page](https://gradiently.design/fi/guide/product-demo-video)

Parhaat demot näyttävät yhden ihmisen hoitamassa yhden tehtävän nopeasti. Tässä minuutin rakenne, muokattava käsikirjoitus ja viimeistelyn yksityiskohdat.

## The short version

- Tuotedemovideo toimii parhaiten, kun se näyttää yhden aidon tehtävän ongelmasta lopputulokseen.
- Alle minuutti riittää laskeutumissivun tai somesyötteen demoon. Pidemmät ohjeet kuuluvat ohjeartikkeleihin.
- Näytä tulos ensimmäisissä sekunneissa, jotta katsoja tietää hyödyn ennen toteutuksen näkemistä.
- Tekstitys on välttämätön, sillä tuotedemoja katsotaan usein ilman ääntä laskeutumissivuilla ja syötteissä.
- Tee someen erillinen pystyversio laajakuvan rajaamisen sijaan.

Hyvä **tuotedemovideo** näyttää yhden ihmisen tekemässä yhden aidon tehtävän tuotteellasi ongelmasta valmiiseen tulokseen alle minuutissa. Aloita lopputuloksesta, näytä siihen vievät kolme tai neljä vaihetta ja päätä yhteen seuraavaan toimintoon. Käytä selkeää ruutukuvaa, luettavaa tekstiä, tekstitystä ilman ääntä katsoville sekä lyhyttä brändättyä alku- ja loppuruutua. Vältä kaikkien ominaisuuksien kierrosta: katsoja muistaa tuloksen.

## Valitse yksi tehtävä

Kirjoita ennen tallennustyökalun avaamista yksi lause: ”[henkilö] käyttää [tuotetta] saavuttaakseen [tuloksen] [lyhyessä ajassa].” Esimerkiksi kahvilan omistaja täyttää peruutetun pöydän varausohjelmalla kahdessa minuutissa. Tämä lause on koko video. Kaikki sitä palvelematon kuuluu toiseen videoon.

### Ominaisuuskierros

- Alkaa kirjautumisruudusta
- Käy kaikki välilehdet järjestyksessä
- Selittää asetukset, joista kukaan ei kysynyt
- Päättyy sanoihin ”ja paljon muuta”
- Kolme minuuttia ja lisää tulee

### Tehtävädemo

- Alkaa valmiista tuloksesta
- Seuraa yhtä aitoa tehtävää alusta loppuun
- Näyttää vain olennaiset klikkaukset
- Päättyy yhteen selkeään seuraavaan askeleeseen
- Neljästäkymmenestä kuuteenkymmeneen sekuntiin

## 60 sekunnin tuotedemon rakenne

Tämä rakenne sopii laskeutumissivulle, lanseerausjulkaisuun tai myyntisähköpostiin. Ajoitus on suuntaa antava, järjestys tärkein.

| Sekunnit | Vaihe | Mitä ruudulla näkyy |
| --- | --- | --- |
| 0:sta 5:een | Lopputulos | Valmis asia: täysi kalenteri, lähetetty lasku tai julkaistu sivu |
| 5:stä 12:een | Ongelma | Sekava lähtötilanne yhdessä otoksessa, yksi puhe- tai tekstitysrivi |
| 12:sta 45:een | Kolme tai neljä vaihetta | Vain tehtävää edistävät klikkaukset, tauot leikattu |
| 45:stä 55:een | Takaisin tulokseen | Tulos uudelleen nyt, kun katsoja tietää toteutuksen |
| 55:stä 60:een | Yksi seuraava askel | Loppuruutu, jossa on yksi toiminto ja osoitteesi |

Tulos, ongelma, vaiheet, tulos, toiminta. Tuloksen näyttäminen ensin antaa syyn katsoa vaiheet.

## Ruutuun sopiva demokäsikirjoitus

Kirjoita käsikirjoitus kahteen palstaan: mitä sanotaan ja mitä näytetään. Jokaisen puherivin tulee kuvailla jotakin sillä hetkellä näkyvää. Jos selität asiaa, jota ruudulla ei ole, poista rivi tai vaihda otosta.

```text
SANO                                   NÄYTÄ
Perjantai, 7pm. Kuuden pöytä perutaan.  Kalenteri, punainen aukko kohdassa 7:30
Ennen se tarkoitti tyhjää pöytää.       Sama aukko, kuva hiljaisesta salista
Avaa jonotuslista.                     Klikkaa jonotuslistaa
Valitse aukko. Napauta Tarjoa.         Valitse 7:30, tarjoa jonotuslistalle
Ensimmäinen hyväksyjä saa pöydän.      Puhelinilmoitus, Hyväksy napautettuna
Pöytä taas täynnä. Kaksi minuuttia.    Kalenteri täynnä, ajastin 1:52
Kokeile omiin varauksiisi.             Loppuruutu: tablefull.app
```

Kaksipalstainen käsikirjoitus 45 sekunnin demolle. Jokainen rivi on riittävän lyhyt sanottavaksi toiminnon aikana.

Lue se ääneen ajastimen kanssa ennen tallentamista. Jos se on liian pitkä, poista kokonaisia vaiheita puheen nopeuttamisen sijaan.

## Selkeän demon tallentaminen

1. **Valmistele realistiset esimerkkitiedot** Täytä tuote uskottavilla nimillä, numeroilla ja kuvilla. Tyhjät tilat ja ”Testi testi 123” saavat tuotteen näyttämään käyttämättömältä.
2. **Siivoa ja suurenna ruutu** Piilota kirjanmerkit ja ilmoitukset, sulje muut välilehdet ja suurenna käyttöliittymä vähintään 125 %:iin, jotta teksti erottuu puhelimella.
3. **Tallenna yksi vaihe otosta kohti** Lyhyet otokset on helppo tehdä uudelleen ja leikata. Liikuta osoitinta hitaasti ja pidä lyhyt tauko jokaisen klikkauksen jälkeen.
4. **Tallenna puhe erikseen, jos voit** Valmiin kuvamateriaalin päälle luettu käsikirjoitus ajoittuu sujuvammin kuin klikkaamisen aikana puhuttu.
5. **Lähennä olennaiseen** Rajaa tai suurenna käytettävä painike tai kenttä, jotta katsojan ei tarvitse etsiä koko työpöydältä.

[Näytön tallennus](https://gradiently.design/fi/guide/screen-recording-tips) käsittelee oikeudet, äänen ja jaettavan sisällön tarkemmin.

## Tekstitys, alkuruutu ja loppuruutu

Laskeutumissivun demot toistuvat yleensä automaattisesti ilman ääntä, ja syötteetkin alkavat mykistettyinä. Siksi tekstitys kantaa tarinan. Pidä tekstitys lyhyinä puhetta vastaavina riveinä paikassa, jossa se ei peitä näytettävää käyttöliittymää. [Videotekstitykset](https://gradiently.design/fi/guide/video-captions-design) käsittelee tyyliä ja sijoittelua.

Kehystä demo kahdella brändisi mukaisella ruudulla: tuloksen nimeävä alkuruutu ja yhden toiminnon loppuruutu. Ne tekevät ruututallenteesta tuotevideon ja näkyvät esikatselukuvana ennen toistopainikkeen painamista.

16:9-tuotedemon alkuruutu, jossa lukee Täytä peruutettu pöytä 2 minuutissa brändin liukuvärin päällä

Alkuruutu nimeää tuloksen. Se toimii myös videon esikatselukuvana laskeutumissivulla.

16:9-loppuruutu Kokeile omiin varauksiisi, tuotteen osoite alla samalla liukuvärillä

Loppuruutu pyytää yhtä asiaa. Kaksi painiketta ja sometunnus jakaisivat huomion kolmeen suuntaan.

## Yksi demo kaikkiin paikkoihin

Demo tulee yleensä useaan paikkaan: laskeutumissivulle, lanseerausjulkaisuun, myyntisähköpostiin ja lyhyeen somevideoon. Tee laajakuvaversio ensin ja rakenna sitten pystyversio, jossa ruututallenne on keskellä taustaasi, otsikko sen yllä ja tekstitys alla. Laajakuvan rajaaminen pystyyn leikkaa puolet käyttöliittymästä.

- Laskeutumissivu 1920×1080: 1920 × 1080
- Syöte 1080×1350: 1080 × 1350
- Reels ja Shorts 1080×1920: 1080 × 1920
- LinkedIn 1200×1200: 1200 × 1200

Neljä paikkaa samalle demolle. Laajakuvatallenne sijoitetaan kuhunkin kehykseen taustasi päälle rajaamisen sijaan.

Pakkaa verkkosivun tiedosto, anna videolle esikatselukuva ja anna kävijän käynnistää se itse, jos siinä on ääntä. [Verkkosivun videotausta](https://gradiently.design/fi/guide/video-background-website) selittää tiedostokoot ja muodot, ja [laskeutumissivun suunnittelu](https://gradiently.design/fi/guide/landing-page-design) demon paikan sivulla. Julkaisuun auttaa [tuotelanseerauksen grafiikka](https://gradiently.design/fi/guide/launch-day-graphics).

## Demon tekeminen Gradientlyssä

Prolla voit tallentaa näytön ja puheesi selaimessa, tarkistaa klipit, leikata ne Gradientlyn aikajanalla sekä lisätä tekstityksen ja musiikin. Suunnittele alku- ja loppuruudut samalle Markille, jotta jokainen ruutu sopii yhteen. Tee pysty- ja neliöversiot samasta suunnitelmasta yhdellä kertaa. Designer voi luonnostella tekstitysrivit ja julkaisun tekstin brändipakettisi äänellä.

## FAQ

### Kuinka pitkä tuotedemovideon tulisi olla?

Alle minuutti laskeutumissivuille ja someen. Kahdesta viiteen minuuttia kestävät esittelyt sopivat ohjekeskuksiin ja myyntipuheluihin, joissa katsoja haluaa jo oppia tuotteen.

### Mitä tuotedemovideon tulee sisältää?

Tulos ensin, ongelma yhdessä otoksessa, yhden aidon tehtävän kolme tai neljä vaihetta, tulos uudelleen ja yksi seuraava toiminto. Tekstitys kulkee mukana koko ajan.

### Tarvitseeko demovideo puheen?

Puhe auttaa, mutta lisää myös tekstitys, sillä laskeutumissivujen ja syötteiden demot toistuvat yleensä mykistettyinä. Videon tulee olla ymmärrettävä ilman ääntä.

### Minkä kokoinen tuotedemovideon tulisi olla?

1920×1080 verkkosivuille ja YouTubeen sekä 1080×1920-pystyversio ja 1080×1350-syöteversio, joissa tallenne on brändätyllä taustalla.