# Digitaalinen menunäyttö: myyvä ruokalista kahvilaan ja baariin

[Canonical HTML page](https://gradiently.design/fi/guide/menu-board-design)

Menunäyttö luetaan jonon perältä muutamassa sekunnissa ostopäätöstä tehdessä. Se muuttaa lähes jokaista valintaa. Näin teet luettavan, myyvän ja paikkasi näköisen näytön.

## The short version

- Useimmat menunäytöt ovat tavallisia televisioita. Suunnittele vaakaan 1920×1080 tai kyljelleen asennetulle näytölle 1080×1920.
- Arvioi teksti asiakkaiden oikeasta paikasta, yleensä jonon perältä, älä editorista.
- Tumma tausta ja vaalea teksti sopivat menunäyttöön, koska häikäisy vähenee ja sanat ovat näkymän kirkkaimpia asioita.
- Menunäytön liikkeen tulee pysyä taustalla. Hintojen ja nimien pitää olla paikoillaan.
- Pitkän menun jakaminen usealle näytölle tai hidas vuorottelu toimii paremmin kuin kaiken pienentäminen yhteen.

**Digitaalinen menunäyttö** on näytölle suunniteltu ruokalista, yleensä tavalliselle 1920×1080-televisiolle. Sitä luetaan usean metrin päästä nopeasti päätettäessä. Suunnittele se kyltin, älä painetun menun tavoin: vähemmän tuotteita, isompi teksti, tumma rauhallinen tausta, hinnat samassa sarakkeessa ja liike vain sanojen takana. Näyttö myy parhaiten, kun asiakas löytää juoman ja hinnan ennen kassalle pääsyä.

Kahvilan vaakasuuntainen menunäyttö otsikolla Kahvi ja lyhyellä juoma- ja hintalistalla

Yksi tuoteryhmä 1920×1080-näyttöä kohti. Otsikko on suurin asia, hinnat tasattu.

## Digitaalisen menunäytön koot

Lähes jokainen menunäyttö on TV tai kaupallinen näyttö samalla 16:9-paneelilla. Suunnittele sen omalla tarkkuudella ilman skaalausta, jotta pieni teksti pysyy terävänä. 4K-näyttö näyttää 1920×1080-suunnitelman siististi kaksinkertaisena. Koko 3840×2160 antaa tarkempaa typografiaa, jos näyttö ja soitin tukevat sitä.

- Vaakanäyttö 1920×1080: 1920 × 1080
- Pystynäyttö 1080×1920: 1080 × 1920
- Kolme näyttöä rivissä 5760×1080: 5760 × 1080

Vaaka sopii tiskin yläpuolelle, pysty pilariin tai ikkunaan. Kolmen rivi suunnitellaan yhtenä leveänä pintana ja jaetaan kolmeen tiedostoon.

Kyljelleen asennettaessa tarkista, osaako näyttö tai soitin kääntää kuvan. Jos ei, vie pystysuunnitelma ja käännä tiedostoa neljänneskierros ennen lataamista.

## Menunäytön luettavuus jonon perältä

Yleistä vähimmäiskokoa ei ole, sillä näytön koko ja etäisyys vaikuttavat. Luotettava testi on fyysinen: näytä suunnitelma oikealla näytöllä ja lue jonon perältä. Jos siristelet, teksti on liian pientä tai ahdasta. Tyypillisen tiskinäytön 1920×1080-suunnitelman lähtökohdat:

| Elementti | Lähtökoko 1080 px korkeudella | Huomiot |
| --- | --- | --- |
| Ryhmän otsikko | 96-140 px | Yksi näyttöä kohti, enintään kaksi |
| Tuotteen nimi | 56-72 px | Virkekirjainkoko luetaan suuraakkosia nopeammin |
| Hinta | Sama kuin tuotteen nimi | Oikealle tasattu yhteen sarakkeeseen, valuuttamerkki pois jos selvä |
| Kuvaus | 32-40 px | Yksi lyhyt rivi tai ei lainkaan |
| Allergeeni- tai ruokavaliomerkintä | 28-32 px | Kirjaimet kuten V tai GF, selitetty kerran näytöllä |

Omalla näytöllä kokeiltavat lähtökohdat, eivät säännöt. Iso näyttö ja lyhyt jono sallivat pienemmän tekstin.

- **Kahdeksasta kahteentoista tuotetta näytöllä** riittää. Enemmällä kukaan ei löydä mitään.
- **Valitse selkeänumeroinen fontti.** Hintoja luetaan nimiä enemmän. [Somefontit](https://gradiently.design/fi/guide/fonts-for-social-media) luettelee etäältä selkeitä vaihtoehtoja.
- **Jätä leveä marginaali.** Osa televisioista rajaa reunoja. Pidä teksti vähintään 60 px päässä joka sivusta.
- **Ryhmittele, älä laatikoi.** Tyhjä tila ryhmien välissä tekee enemmän kuin viivat ja kehykset.

## Menunäytön värit ja taustat

Näyttö on valonlähde. Täyskirkas valkoinen tausta loistaa huoneeseen, huuhtoo sanat ja väsyttää silmiä. Syvä hillitty tausta vaalealla tekstillä tekee menusta seinän kirkkaimman asian ja kohdistaa huomion oikein. [Tumman tilan design](https://gradiently.design/fi/guide/dark-mode-design) käsittelee samaa sovelluksissa.

- Paahtimo: espressoruskea, lämmin kulma: `radial-gradient(circle at 85% 15%, #7a3b1d 0%, #2a140b 45%, #120906 85%)`
- Baari: pullonvihreä, niukka valo: `radial-gradient(circle at 15% 85%, #1f5f55 0%, #0e2b27 45%, #071311 85%)`
- Yö: musteesta luumuun: `linear-gradient(160deg, #1b1830 0%, #2d2350 55%, #4a2a52 100%)`

Tummat pohjat yhdellä lämpimällä alueella hintojen ulkopuolella. Kopioi näyttösuunnitelmaan tai verkkomenuksi.

- Espressopohja: #120906
- Paahto: #7a3b1d
- Maitoteksti: #f3e7d8
- Crema-korostus: #e9a23b
- Salviamerkintä: #a7b8a0

Koko menupaletti: pohja, yksi keskisävy, lämmin luonnonvalkoinen tekstille, korostus erikoisille ja hillitty ruokavalioväri.

Käytä korostusta vain yhteen, yleensä päivän erikoiseen tai eniten myytäväksi haluamaasi tuotteeseen. Kaiken korostaminen ei korosta mitään. Tarkista kontrasti tummimmassa ja vaaleimmassa kohdassa, ei vain keskellä. [Värikontrasti ja saavutettavuus](https://gradiently.design/fi/guide/color-contrast-accessibility) neuvoo.

## Liike digitaalisessa menunäytössä

Näyttö voi liikkua, painotuote ei. Liike saa ihmiset nostamaan katseen puhelimesta. Pidä se taustalla: hitaasti lipuva väri, pinnalla liikkuva valo tai kerran kierroksessa nouseva erikoistarjous. Tuotenimet ja hinnat eivät saa liikkua, koska niitä luetaan usean sekunnin ajan.

### Vältä

- Vieriviä tai liukuvia hintoja
- Nopeita leikkauksia näyttöjen välillä muutaman sekunnin välein
- Vilkkuvia ”Erikoisannos”-merkkejä
- Niin levotonta videota, että teksti tarvitsee laatikon

### Tee näin

- Hidas taustasilmukka paikoillaan pysyvien sanojen alla
- Vuorottelevat näkymät vähintään 15 sekunniksi
- Yksi sisään animoituva erikoinen, sitten lepo
- Silmukka ilman näkyvää hyppyä

Lempeällä taustaliikkeellä on käytännön etukin: täysin staattinen kuva kaksitoista tuntia päivässä voi jättää haamujäljen joihinkin näyttöihin, erityisesti OLED-paneeleihin. Vie MP4-silmukka, jonka lähes kaikki televisiot ja opastesoittimet hyväksyvät USB-tikulta tai sovelluksesta. [Saumaton videosilmukka](https://gradiently.design/fi/guide/seamless-loop-video) näyttää näkymättömän liitoksen ja [animoidut liukuväritaustat](https://gradiently.design/fi/guide/animated-gradient-background) tarjoaa liikeideoita.

## Menun rakentaminen alusta näytölle

1. **Kirjoita menu ensin** Rajaa myyviin tuotteisiin. Jaa 8-12 tuotteen ryhmiin, yksi ryhmä näytölle.
2. **Valitse sommittelu kerran** Otsikko vasemmalle ylös, tuotteet sarakkeeseen ja hinnat oikealle tasattuina. Toista kaikilla näytöillä, jotta ihmiset oppivat rakenteen.
3. **Suunnittele näytön koossa** 1920×1080 tai 1080×1920, 60 px marginaali ja tumma tausta.
4. **Testaa jonosta** Laita oikealle näytölle oikealla kirkkaudella ja lue asiakkaan paikalta.
5. **Vie ja lataa** PNG paikallaan oleville, MP4 liikkuville. Nimeä näyttöjen ja päivien mukaan, jotta oikea tiedosto näytetään.

## Hintojen ja erikoisten pitäminen ajan tasalla

Näyttöä voi muuttaa. Pidä pääsuunnitelma jokaiselle näytölle ja vaihda vain sanat, jolloin hinnankorotus tai kausijuoma vie minuutteja ja ilme säilyy. Aamu- ja iltamenut voivat olla saman suunnitelman versioita, joita vaihdetaan ajastimella jos soitin tukee sitä. Painetut menut, pöytäkortit ja ikkuna käyttävät samoja fontteja sekä taustaa. [Ravintolan ruokalistan suunnittelu](https://gradiently.design/fi/guide/restaurant-menu-design) neuvoo painopuolen.

Vaakasuuntainen Aamiainen-menunäyttö 11,30 asti kahdella annoksella ja hinnoilla

Menun aamuversion näyttö.

Vaakasuuntainen Spritz-tunti-menunäyttö 17.00 alkaen kolmella juomalla ja hinnoilla

Sama sommittelu illalla eri taustalla.

Gradientlyn Studiossa on menupohjia omalle Markillesi. Tausta on siis paikkasi oma ja tekee itse tilaa sanoille. Prolla voit viedä liikkuvat menut MP4:nä jopa 4K-tarkkuudella ja pitää hinnat taulukossa: [joukkoluonti](https://gradiently.design/fi/guide/bulk-create-from-spreadsheet) täyttää siitä näyttöjen tekstit ja taulukot. Se sopii samaa menua useassa toimipisteessä käyttävälle ryhmälle.

## FAQ

### Minkä kokoinen digitaalinen menunäyttö on?

Vaakatelevisiolle 1920×1080, kyljelleen asennetulle näytölle 1080×1920. Käytä 3840×2160 vain, jos näyttö ja soitin tukevat 4K-tiedostoja.

### Kuinka isoa tekstin pitää olla menunäytöllä?

Koko ja etäisyys määräävät, joten testaa jonon perältä. 1080 pikseliä korkeassa suunnitelmassa tuotenimien 56-72 pikseliä on järkevä lähtökohta.

### Tumma vai vaalea menunäytön tausta?

Tumma toimii yleensä paremmin. Se vähentää huoneen häikäisyä ja tekee vaaleasta tekstistä näytön kirkkaimman asian.

### Mitä tiedostomuotoja menunäytöt käyttävät?

PNG tai JPG paikallaan oleviin ja MP4 liikkuviin. Lähes kaikki älytelevisiot ja opastesoittimet toistavat MP4:n USB-tikulta tai sovelluksesta.

### Kannattaako menunäyttö animoida?

Lempeä taustaliike kiinnittää huomion, mutta pidä nimet ja hinnat paikoillaan luettavina.