Kuinka suunnitella tyhjät tilasivut verkkosivuille ja mobiilisovelluksille

Tyhjät tilasivut ovat vähemmän tunnettuja muotoiluelementtejä, joilla on merkittävä rooli käyttäjäkokemuksessa. Yksinkertaisimmassa muodossaan tyhjät tilat ovat sivun asettelut, jotka näkyvät, kun käyttäjä vierailee ensin sivulla, jossa ei ole sisältöä.

Tämä voi sisältää mobiilisovelluksia, sosiaalisia verkostoja tai jopa tyhjiä blogikategorioita. Tarkoituksena on toimittaa tyhjä sivu näyttää ei-tyhjä sivu. Kävijöiden pitäisi tunnistaa sisällön puute tulevan sisällön välineenä.

Haluaisin kattaa, kuinka tyhjät tilasivut toimivat ja miksi he ovat niin tärkeitä. Käyttöliittymien suunnittelijoiden tulisi harkita näitä kohtia ja yrittää soveltaa niitä tyhjiin tiloihin aina, kun se on tarpeen. Mutta aloittaaksemme tutkitaan, miten tyhjä tila toimii ja miten se antaa arvoa rajapinnalle.

Tyhjien valtioiden arvo

Suuren tyhjän valtion muotoilun kauneus on yksinkertaisuus. Tyhjät sivut selittävät mitä pitäisi olla sivulla kun siellä on jonkin verran sisältöä. Se voi olla passiivinen kuin tyhjä postilaatikko, tai se voi odottaa aktiivisesti käyttäjää kuin tyhjä Twitter-syöte.

Tyhjät sivut ovat tylsiä, tylsiä ja jopa hämmentäviä. Tyhjät tilat tarjoaa opastusta auttaa käyttäjiä ymmärtämään, mitä he katsovat. Vaikka se on tyhjä sivu, ylimääräinen konteksti auttaa.

Tyhjät tilat antavat myös tunteen “tuoreus” uusilla tileillä, joilla ei ole olemassa olevia tietoja.

Tämä Redditor Bambo_Ochan tekemä testi tarkisti 20 erilaista sovellusta tyhjiä tilamalleja varten. CTA-painikkeilla, näytetiedoilla ja jopa lyhyillä opetuskäynneillä tapahtui erilaisia muotoilutapoja.

Käyttäjän tietokannassa menestyvien sovellusten pitäisi suunnitella tyhjiä tiloja kannustaa käyttäjän toimintaa. Tämä toiminto voisi olla sisällön julkaiseminen, ystävien lisääminen, valokuvien lataaminen tai mitä sovellus on tehty. Tookapicin alla oleva näyttö on hyvä esimerkki.

Mutta tyhjillä tilasivuilla on vielä arvoa, vaikka mitään toimia ei tarvita. Nämä mallit on tehty ensisijaisesti tietojen antamiseksi.

Staattinen tieto on aivan yhtä arvokasta eikä tyhjä tila ole luontaisesti huonoa. Esimerkiksi tämä sivun muotoilu ei sisällä nykyisiä mittareita seurantaohjelman hallintapaneelista. Käyttäjä saattaa haluta lisätä joitakin tietoja, mutta ei ole huono jättää viiva tyhjäksi.

Samanlaiset staattiset mallit saattavat toimia hyvin tyhjiä blogiarkistoja tai tyhjiä viestikansioita varten. On täysin hyväksyttävää, että mitään viestejä ei näytetä. Mutta sivun ei pitäisi olla täysin tyhjä ilman kontekstia.

Vital Page Elements

Tyhjän tilan sivun tärkein elementti on konteksti. Tämä voi olla grafiikkaa, tekstiä tai molempia. Haluat ilmoittaa käyttäjille, miksi sivu on tyhjä ja millaisia tietoja siellä voisi olla (sähköpostit, tweetit, ystäväprofiilit jne.).

Ja vaikka teksti on ensisijainen viestintäväline verkossa, et voi unohtaa grafiikan ja kuvakkeiden arvoa.

DigitalOceanilla on loistava kojelauta, jossa on tyhjä tilakuva, joka havainnollistaa niiden pistettä selvästi. Heidän yrityksensä käyttää luovaa brändiä ja puhdasta typografiaa, joten ei ole yllätys, että niiden tyhjät tilasivut ovat niin havainnollisia.

Toinen tärkeä tyhjän tilan muotoilu on toimintopainike. Tämä on tyypillisesti suunniteltu kuin painike, vaikka hyperlinkit toimivat myös hyvin.

Tavoitteena on auttaa käyttäjiä toimimaan ja tyhjentämään tyhjän tilan. Riippumatta siitä, tarvitaanko tietoja tai toimitaan sivustolla, CTA: t ohjaavat käyttäjiä seuraavaan vaiheeseen, joka tarvitaan tyhjän tilan selvittämiseen.

Dropboxilla on loistava muotoilu kahdella CTA-painikkeella. Aina kun Dropbox-käyttäjällä ei ole kansioita, ne voivat luoda uuden kansion tai lisätä sivun näytekansion.

Käyttäjätoiminnan kannustaminen

Toimintopainikkeet ovat aktiivisia elementtejä, mutta muista, että sivun kopiointi selittää mitä käyttäjä tekee. Kukaan ei vain napsauta painikkeita tietämättä miksi.

Paras tapa rohkaista toimintaa on kirjoittaa suuri kopio tyhjälle tilasivulle. Ohjaa käyttäjiä sisällönkulun kautta, joka kannustaa käyttäjän toimintaa koko sovelluksessa.

ModSpotin tyhjä tila on loistava esimerkki laadukkaasta suunnittelusta ja rohkaisevasta sisällöstä.

Kuvakkeita käytetään osoittamaan, mitä käyttäjän pitäisi lisätä sivustoon. Nuoli osoittaa painikkeen käyttäjille napsauttamalla tekstin rohkaisevaa käyttäytymistä. Tämä on loistava tyhjä valtion muotoilu, jossa on kaikki odotettavissa olevat elementit.

Samoin Gumroadin tyhjä tila tarjoaa kaksi vaihtoehtoa, jotka kohdistuvat eri mahdollisiin toimiin. Käyttäjät voivat lisätä digitaalisen tuotteen tai fyysisen tuotteen aloittamaan myynnin.

Muut sivun linkit johtavat ohjeisiin ja yhteystietoihin. Kaikki on uskomattoman virtaviivainen ja sidottu yhteen hienosti.

Web vs. mobiilisovellukset

Kaikkien tallennusvälineiden tyhjien tilasivujen tulisi noudattaa samanlaisia suunnittelusuunnitelmia. Mutta on olemassa pieniä eroja, jotka liittyvät työpöydän käyttökokemukseen älypuhelimeen verrattuna.

Web-sivustot suuremmilla näytöillä sinulla on enemmän tilaa ylimääräisiä painikkeita varten. Verkkosivuilla voi olla myös suurempia navigointielementtejä jotka voivat vetää ihmisiä muualle sivustoon.

Tämä voidaan ratkaista samalla tavalla kuin Nusii tekee ehdotusten sivulla. Jos ehdotuksia ei ole, käyttäjää ohjataan “lisää ehdotuksia” -painike ylimmässä navigointipalkissa.

Mobiilisovelluksilla voi olla samanlaisia ongelmia, mutta näytöt ovat paljon pienempiä. Tämä tekee sen paljon helpompi vetää käyttäjiä suoraan toimintaan.

Mielestäni on parasta säilyttää mobiilisovellukset yksinkertaisemmin ja vähemmän vaihtoehtoja. Käytä visuaalisia aineita silmämukana rohkaisemalla toimintaa ja osoittamaan hyvin erityistä käyttäjävirtaa.

Tyhjät valtion mallin esimerkit

Ehkä paras tapa oppia tyhjästä valtion suunnittelusta on tutkia joitakin esimerkkejä. Loistava web-galleria emptystat.es hallitsee tyhjiä tilasivuja eri sivustoista mobiilisovelluksiin.

Olen valinnut käsin joitakin esimerkkejä, jotka ansaitsevat huomionne, joka parhaiten havainnollistaa tyhjää valtion suunnittelua. Jos sinulla on muita ehdotuksia, ota meihin yhteyttä.

DigitalOcean kelluvat IP: t