Kako da dizajnirate ‘push’ obaveštenja za više platformi i uređaja u 2022

Push obaveštenja postoje već više od 10 godina. Prvi put predstavlјena 2009. za iOS, brzo su se pojavila na svim glavnim mobilnim operativnim sistemima. Zatim se 2014. pojavio web push.

Od danas, push obaveštenja su podržana na Apple iOS, Google Android, Huawei Android, Amazon Echo, macOS, Windows, Chrome, Safari, Firefox, Edge … lista se nastavlјa.

Nažalost, svaka platforma je malo drugačija. Može da bude zastrašujuće i komplikovano da se shvati šta tačno ulazi u push obaveštenje. Koliko redova teksta vam treba? Koliko slika ? Koja su ograničenja karaktera ? Kako to izgleda na drugim operativnim sistemima kojima nemate pristup?

Ovde ćemo da podelimo neke uvide koji će vam pomoći da se krećete u dizajnu obaveštenja seciranjem anatomije.

Najnoviji operativni sistemi 2022

Počećemo sa najnovijim verzijama ovih operativnih sistema (macOS Monterey, Windows 11, iOS 15, Android 12), a zatim ćemo pogledati neke prethodne verzije za istorijsku referencu.

Web Push, Chrome za macOS Monterey

Chrome push obaveštenje za macOS Monterey

1. Ikona browzera
Chrome ikona. Ovo ne može da se promeni.

2. Naslov
je ograničen na 60-80 znakova.

3. Domen
na koji je korisnik web sajta pretplaćen. Ne može da se promeni.

4.Ikona
192×192 ili veća. PNG, JPG, GIF (ne animirani). Uvećava se kada se proširi.

5. Sadržaj
je ograničen na 120-150 znakova.

6. Akciona dugmad
Podržava do 2 dugmeta.

Imajte na umu da ograničenja karaktera variraju u zavisnosti od toga da li je ikona prisutna i znakova koji se koriste.

Web Push, Firefox za macOS Monterey

Firefox push obaveštenje za macOS Monterey

1. Ikona browzera Ikona
   Firefox-a. Ovo ne može da se promeni.
2. Naslov
   je ograničen na 60-80 znakova.
3. Domen
   na koji je korisnik web sajta pretplaćen. Ne može da se promeni.
4. Ikona
   192×192 ili veća. PNG, JPG, GIF (ne animirani). Uvećava se kada se proširi.
5. Sadržaj
   je ograničen na 120-150 znakova.
6. Akciona dugmad
   Podržava do 2 dugmeta.

Imajte na umu da ograničenja karaktera variraju u zavisnosti od toga da li je ikona prisutna i znakova koji se koriste.

Safari push obaveštenje za macOS Monterey

1. Ikona
   Ovo se postavlјa jednom i ne može da se promeni za pojedinačnu poruku. Mora da bude 256×256. PNG, JPG, GIF (ne animirani).
2. Naslov
   je ograničen na 60-80 znakova.
3. Sadržaj
   je ograničen na 120-150 znakova.

Web Push, Chrome za Windows 11

Chrome push obaveštenje za Windows 11

1. Slika
   banera 360×180 ili odnos širina/visina 2:1. PNG, JPG, GIF (ne animirani).
2. Browzer + ikona browzera
   Ne može da se promeni.
3. Ikona
   192×192 ili veća. PNG, JPG, GIF (ne animirani).
4. Akciona dugmad
   Podržava do 2 dugmeta.
5. Više opcija
   Uklјučuje podešavanja obaveštenja i pomoć pri fokusiranju.
6. Odbaci
   Zatvara obaveštenje.
7. Naslov
   je ograničen na 60 znakova.
8. Sadržaj
   je ograničen na 120 znakova.
9. Domen
   na koji je korisnik web sajta pretplaćen. Ne može da se promeni.

Windows nudi najviše ekrana za slike, sa prikazanom slikom banera i ikonom.

Web Push, Microsoft Edge za Windows 11

Microsoft Edge push obaveštenje za Windows 11

1. Slika
   banera 360×180 ili odnos širina/visina 2:1. PNG, JPG, GIF (ne animirani).
2. Browzer + ikona browzera
   Ne može da se promeni.
3. Ikona
   192k192 ili veća. PNG, JPG, GIF (ne animirani).
4. Akciona dugmad
   Podržava do 2 dugmeta.
5. Više opcija
   Uklјučuje podešavanja obaveštenja i pomoć pri fokusiranju.
6. Odbaci
   Zatvara obaveštenje.
7. Naslov
   je ograničen na 60 znakova.
8. Sadržaj
   je ograničen na 120 znakova.
9. Domen
   na koji je korisnik web sajta pretplaćen. Ne može da se promeni.

Web Push, Firefox za Windows 11

Firefox push obaveštenje za Windows 11

1. Browzer + ikona browzera
   Ne može da se promeni.
2. Ikona
   192×192 ili veća. PNG, JPG, GIF (ne animirani).
3. Više opcija
   Uklјučuje podešavanja obaveštenja i pomoć pri fokusiranju.
4. Odbaci
   Zatvara obaveštenje.
5. Naslov
   je ograničen na 60 znakova.
6. Sadržaj
   je ograničen na 120 znakova.
7. Domen
   na koji je korisnik web sajta pretplaćen. Ne može da se promeni.

Imajte na umu da Firefox u operativnom sistemu Windows 11 nema sliku banera ili dugmad za radnju kao što su Chrome i Edge.

Mobile Push, iOS 15 Native

Izvorno push obaveštenje za iOS 15

1. Ikona aplikacije
   Koristi podrazumevanu ikonu aplikacije i ne može da se promeni.
2. Rich Media
   1024×1024 ili odnos širina/visina 1:1. PNG, JPG, GIF, MP4, MP3, WAV.
3. Naslov
   je ograničen na 25-50 znakova.
4. Vremenska oznaka
   Kada je poruka primlјena.
5. Poruka
   ograničena na 150 znakova.
6. Akciona dugmad
   Podržava do 4 dugmeta.

iOS takođe ima podršku za titl. Imajte na umu da za razliku od Android-a, iOS trenutno nema podršku za Web Push, ali sumnjamo da će podrška za iOS Web Push možda uskoro da se pojavi.

Web Push, Chrome za Android 12

Chrome Web Push obaveštenje za Android 12

1. Značka
   72×72 ili veća. Mora da bude belo sa providnom pozadinom. PNG.
2. Naslov
   je ograničen na 50 znakova.
3. Telo
   Ograničeno na 150 znakova.
4. Velika slika
   1024×512 ili odnos širina/visina 2:1. PNG, JPG, GIF (ne animirani).
5. Browzer
   ne može da se promeni.
6. Domen
   na koji je korisnik web sajta pretplaćen. Ne može da se promeni.
7. Vremenska oznaka
   Kada je poruka primlјena.
8. Ikona
   192×192 ili veća. PNG, JPG, GIF (ne animirani).
9. Akciona dugmad
   Podržava do 2 dugmeta.

Izvorno push obaveštenje za Android 12

1. Mala ikona
   24×24 – 96×96 za sve veličine uređaja. Mora da bude belo sa providnom pozadinom. PNG.
2. Naslov
   je ograničen na 50 znakova.
3. Telo
   Ograničeno na 150 znakova.
4. Velika slika
   1440×720 ili odnos širina/visina 2:1. PNG, JPG, GIF (ne animirani).
5. Naziv aplikacije
   ne može da se promeni.
6. Vremenska oznaka
   Vreme kada je primlјeno.
7. Ikona
   192×192 ili veća. PNG, JPG, GIF (ne animirani).
8. Akciona dugmad
   Podržava do 3 dugmeta.

Stariji operativni sistemi

Sada ćemo pogledati prethodne verzije ovih operativnih sistema (macOS Big Sur, iOS 14, Android 11) za referencu.

Web Push, Chrome za macOS Big Sur

Chrome push obaveštenje za macOS Big Sur

1. Ikona browzera
   Chrome ikona. Ovo ne može da se promeni.
2. Naslov
   je ograničen na 60-80 znakova.
3. Domen
   na koji je korisnik web sajta pretplaćen. Ne može da se promeni.
4. Sadržaj
   je ograničen na 120-150 znakova.
5. Browzer
   ne može da se promeni.
6. Vremenska oznaka
   Kada je poruka primlјena.
7. Ikona
   192×192 ili veća. PNG, JPG, GIF (ne animirani). Uvećava se kada se proširi.
8. Akciona dugmad
   Podržava do 2 dugmeta.

Imajte na umu da ograničenja karaktera variraju u zavisnosti od toga da li je ikona prisutna i znakova koji se koriste. Glavna razlika između macOS Big Sur-a i njegovih prethodnika je u tome što poruke mogu da se prošire većom ikonom, a ikona browzera je manja, što omogućava više prostora za sadržaj.

Web Push, Firefox za macOS Big Sur

Firefox push obaveštenje za macOS Big Sur

1. Ikona browzera
   Firefox ikona. Ovo ne može da se promeni.
2. Naslov
   je ograničen na 60-80 znakova.
3. Domen
   na koji je korisnik web sajta pretplaćen. Ne može da se promeni.
4. Sadržaj
   je ograničen na 120-150 znakova.
5. Browzer
   ne može da se promeni.
6. Vremenska oznaka
   Kada je poruka primlјena.
7. Ikona
   192×192 ili veća. PNG, JPG, GIF (ne animirani). Uvećava se kada se proširi.
8. Akciona dugmad
   Ona ne mogu da se prilagode za Firefox.

Imajte na umu da ograničenja karaktera variraju u zavisnosti od toga da li je ikona prisutna i znakova koji se koriste. Glavna razlika između macOS Big Sur-a i njegovih prethodnika je u tome što poruke mogu da se prošire većom ikonom, a ikona browzera je manja, što omogućava više prostora za sadržaj.

Web Push, Safari za macOS Big Sur

Safari push obaveštenje za macOS Big Sur

1. Ikona
   Ovo se postavlјa jednom i ne može da se promeni za pojedinačnu poruku. Mora da bude 256×256. PNG, JPG, GIF (ne animirani).
2. Naslov
   je ograničen na 60-80 znakova.
3. Sadržaj
   je ograničen na 120-150 znakova.
4. Ime veb
   lokacije ne može da se promeni.
5. Vremenska oznaka
   Kada je poruka primlјena.

Web Push, Chrome za macOS Catalina

Chrome push obaveštenje za macOS Catalina

1. Ikona browzera
   Chrome ikona. Ovo ne može da se promeni.
2. Naslov
   je ograničen na 20-40 znakova.
3. Domen
   na koji je korisnik web sajta pretplaćen. Ne može da se promeni.
4. Sadržaj
   je ograničen na 20-80 znakova.
5. Ikona
   192×192 ili veća. PNG, JPG, GIF (ne animirani).

Imajte na umu da ograničenja karaktera variraju u zavisnosti od toga da li je ikona prisutna i znakova koji se koriste. Chrome za macOS takođe ima podršku za 2 akciona dugmeta.

Web Push, Firefox za macOS Catalina

Firefox push obaveštenje za macOS

1. Ikona browzera
   Firefox ikona. Ovo ne može da se promeni.
2. Naslov
   je ograničen na 60-80 znakova.
3. Domen
   na koji je korisnik web sajta pretplaćen. Ne može da se promeni.
4. Sadržaj
   je ograničen na 20-80 znakova.
5. Ikona
   192×192 ili veća. PNG, JPG, GIF (ne animirani).

Imajte na umu da ograničenja karaktera variraju u zavisnosti od toga da li je ikona prisutna i znakova koji se koriste.

Web Push, Safari za macOS Catalina

Safari push obaveštenje za macOS

1. Ikona
   Ovo se postavlјa jednom i ne može da se promeni za pojedinačnu poruku. Mora da bude 256×256. PNG, JPG, GIF (ne animirani).
2. Naslov
   je ograničen na 40 znakova.
3. Sadržaj
   je ograničen na 90 znakova.

Obratite pažnju kako Safari nema ikonu browzera. Niti prikazuje domen.

Web Push, Chrome za Windows 10

Chrome push obaveštenje za Windows

1. Slika
   banera 360×180 ili odnos širina/visina 2:1. PNG, JPG, GIF (ne animirani).
2. Ikona
   192×192 ili veća. PNG, JPG, GIF (ne animirani).
3. Browzer
   ne može da se promeni.
4. Akciona dugmad
   Podržava do 2 dugmeta.
5. Naslov
   je ograničen na 60 znakova.
6. Sadržaj
   je ograničen na 120 znakova.
7. Domen
   na koji je korisnik web sajta pretplaćen. Ne može da se promeni.

Windows nudi najviše ekrana za slike, sa prikazanom slikom banera i ikonom.

Web Push, Firefox za Windows 10

Firefox push obaveštenje za Windows

1. Naslov
   je ograničen na 40 znakova.
2. Ikona
   192×192 ili veća. PNG, JPG, GIF (ne animirani).
3. Domen
   na koji je korisnik web sajta pretplaćen. Ne može da se promeni.
4. Sadržaj
   je ograničen na 140-190 znakova.
5. Podešavanja
   ne mogu da se promene.

Web Push, Microsoft Edge za Windows 10

Edge push obaveštenje za Windows

1. Naslov
   je ograničen na 40 znakova.
2. Ikona
   192×192 ili veća. PNG, JPG, GIF (ne animirani).
3. Browzer
   ne može da se promeni.
4. Sadržaj
   je ograničen na 140-190 znakova.
5. Domen
   na koji je korisnik web sajta pretplaćen. Ne može da se promeni.

Web Push, Chrome za Android 11

Chrome push obaveštenje za Android

1. Značka
   72×72 ili veća. Mora da bude belo sa providnom pozadinom. PNG.
2. Naslov
   je ograničen na 50 znakova.
3. Telo
   Ograničeno na 150 znakova.
4. Velika slika
   1024×512 ili odnos širina/visina 2:1. PNG, JPG, GIF (ne animirani).
5. Browzer
   ne može da se promeni.
6. Domen
   na koji je korisnik web sajta pretplaćen. Ne može da se promeni.
7. Vremenska oznaka
   Kada je poruka primlјena.
8. Ikona
   192×192 ili veća. PNG, JPG, GIF (ne animirani).

Mobile Push, Android 11 Native

Izvorno push obaveštenje za Android

1. Mala ikona
   24×24 – 96×96 za sve veličine uređaja. Mora da bude belo sa providnom pozadinom. PNG.
2. Naslov
   je ograničen na 50 znakova.
3. Telo
   Ograničeno na 150 znakova.
4. Velika slika
   1440×720 ili odnos širina/visina 2:1. PNG, JPG, GIF (ne animirani).
5. Akciona dugmad
   Podržava do 3 dugmeta.
6. Naziv aplikacije
   ne može da se promeni.
7. Vremenska oznaka
   Vreme kada je primlјeno.
8. Ikona
   192×192 ili veća. PNG, JPG, GIF (ne animirani).

Mobile Push, iOS 14 Native

Izvorno push obaveštenje za iOS

1. Ikona aplikacije
   Koristi podrazumevanu ikonu aplikacije i ne može da se promeni.
2. Rich Media
   1024×1024 ili odnos širina/visina 1:1. PNG, JPG, GIF, MP4, MP3, VAV.
3. Naslov
   je ograničen na 25-50 znakova.
4. Poruka
   ograničena na 150 znakova.
5. Naziv aplikacije
   ne može da se promeniti.
6. Opcije
   ne mogu da se promene.
7. Akciona dugmad
   Podržava do 4 dugmeta.

iOS takođe ima podršku za titl. Imajte na umu da za razliku od Androida, iOS trenutno nema podršku za Web Push.