Disenyo ng empty state sa UI: gabayan ang susunod na hakbang kapag walang nilalaman

1. I-diagnose kung bakit walang laman ang espasyo

Tratuhin ang isang walang laman na estado bilang isang ulat tungkol sa produkto, hindi bilang isang pagkakataon sa dekorasyon. Itanong kung ano ang nangyari kaagad bago lumitaw ang screen, kung ano ang alam ng system, at kung mababago ng tao ang sitwasyon. Inilalarawan ng NN/g ang mga walang laman na estado bilang mga pagkakataon upang makipag-usap sa katayuan, suportahan ang pag-aaral, at magbigay ng mga landas sa mga pangunahing gawain. Ang mga pagkakataong iyon ay nakasalalay sa wastong pagtukoy sa estado muna.

Sa partikular, huwag ipakita ang "Walang mga item" habang tumatakbo pa rin ang isang kahilingan. Panatilihing nakikita ang indicator ng pag-load o balangkas hanggang sa malaman ang resulta. Kung nabigo ang kahilingan, ipaliwanag ang opsyon sa pagkabigo at pagbawi. Kung magtagumpay ito sa zero na mga item, sabihin na walang katugmang nilalaman na umiiral. Pinipigilan ng pagkakaibang ito ang mga tao na magkamali sa isang pansamantalang pagkaantala o problema sa system para sa isang tunay na resulta.

2. Sumulat ng kopya na tumutugma sa dahilan

Gumamit ng isang heading upang pangalanan ang estado at sumusuporta sa teksto upang ipaliwanag kung ano ang ibig sabihin nito o kung paano magpatuloy. Panatilihing na-scan ang heading. Magdagdag lamang ng isang pangungusap kapag ito ay sumasagot sa isang tunay na tanong. Inirerekomenda ng gabay sa pagsulat ng Apple ang mga malinaw na susunod na hakbang sa mga blangkong screen, mga label na nakatuon sa pagkilos, at mga direktang mensahe ng error na nagpapaliwanag kung paano ayusin ang problema. Iwasan ang katalinuhan na nakakubli sa kahulugan, hindi malinaw na mga pamagat gaya ng "Wala rito," o kopya na sinisisi ang tao.

Halimbawa, ang isang hypothetical na screen ng mga naka-save na item sa unang paggamit ay maaaring magsabi na "Ang iyong mga naka-save na gabay ay lalabas dito" na sinusundan ng "Mag-save ng isang gabay upang bumalik dito sa ibang pagkakataon," na may button na "Mag-browse ng mga gabay." Ang isang nakumpletong checklist ay maaaring magsabi ng "Nahuli kayong lahat" at nag-aalok ng "Tingnan ang mga natapos na gawain." Ang mga halimbawang ito ay naglalarawan ng iba't ibang katotohanan: ang isa ay nagtuturo kung paano i-populate ang isang tampok; ang iba ay nagpapatunay ng isang matagumpay na kinalabasan.

Para sa matagumpay na paghahanap na walang tugma, maaaring basahin ng isang hypothetical na mensahe ang "Walang mga proyektong tumutugma sa 'orchid'" at magmungkahi ng "Sumubok ng mas malawak na termino o malinaw na mga filter." Panatilihin ang query at gawing reversible ang mga pagbabago sa filter kung posible. Para sa isang pagkabigo sa network, isulat ang "Hindi ma-load ang mga proyekto" ng "Subukan muli." Iwasang mag-claim na walang mga proyekto kapag hindi pa nasusuri ng system.

• Pangalanan ang nauugnay na bagay o pamantayan upang magkaroon ng kahulugan ang mensahe na wala sa konteksto.
• Gumamit ng pandiwa sa button, gaya ng "Gumawa ng proyekto," "I-clear ang mga filter," o "Subukan muli."
• Panatilihin ang mga tagubilin sa tabi ng apektadong nilalaman at gumamit ng teksto pati na rin ang kulay o imahe.
• Iwasan ang "Oops," sisihin, at mga teknikal na code maliban kung kailangan ng mga tao ang mga ito upang malutas ang isyu.

3. Gawing kapaki-pakinabang ang susunod na hakbang, hindi awtomatiko

Magbigay ng aksyon kapag ang isang tao ay maaaring makatwirang baguhin ang sitwasyon o ipagpatuloy ang kanilang gawain. Ang unang paggamit ay kadalasang nakikinabang mula sa isang gumawa o magdagdag ng pagkilos; walang mga resulta ang maaaring makinabang mula sa pag-alis ng hadlang; ang isang error ay maaaring mag-alok ng muling pagsubok. Ang isang na-clear na inbox o natapos na pag-eehersisyo ay maaaring hindi nangangailangan ng anumang aksyon. Huwag pilitin ang isang button sa bawat estado para lang gawing interactive ang panel.

Panatilihing proporsyonal ang pagbawi. Ang isang nabigong pag-refresh ay karaniwang nangangailangan ng isang inline na paliwanag at subukang muli, hindi isang alerto sa pagharang. Inirerekomenda ng Apple ang pagtutugma ng feedback sa kahalagahan ng impormasyon at pagreserba ng mga alerto para sa mga kritikal at naaaksyunan na sitwasyon. Para sa paghahanap, panatilihin ang trabaho ng tao at mag-alok ng mga makabuluhang pagsasaayos sa halip na tahimik na baguhin ang query. Ang Disenyong Materyal ay nagmumungkahi din ng panimulang nilalaman, maikling nilalamang pang-edukasyon, o malinaw na may label na pinakamahusay na mga tugma bilang mga alternatibo kapag sila ay tunay na nakakatulong.

Gumamit lamang ng ilustrasyon kung nagdaragdag ito ng konteksto, init, o pagkilala. Hindi ito dapat makipagkumpitensya sa mensahe o ipalagay sa mga tao na ang isang pandekorasyon na imahe ay interactive. Ang isang simpleng icon ay maaaring sapat para sa isang compact na resulta ng filter; maaaring makinabang ang isang first-use workspace mula sa isang maliit na halimbawa ng uri ng content na hahawakan nito. Kung may kasamang panimulang content, gawing madali ang pagtukoy at pag-alis.

• Pumili ng isang pangunahing aksyon na direktang tumutugon sa dahilan.
• Magdagdag lamang ng pangalawang landas ng tulong kapag sinasagot nito ang isang malamang na follow-up na tanong.
• Gumamit ng isang tahimik na mensahe ng pagkumpleto kapag ang walang laman na resulta ay magandang balita.
• Tiyaking nananatiling naiintindihan ng mga user ng keyboard at screen-reader ang isang pagkilos.

4. Repasuhin ang buong estado, hindi lamang ang paglalarawan

Siyasatin ang estado sa aktwal na lalagyan: ang isang full-screen na unang paggamit na view, isang maliit na sidebar, at isang naka-filter na talahanayan ay may iba't ibang espasyo at hierarchy na pangangailangan. Panatilihin ang mensahe malapit sa lugar na inilalarawan nito. Tiyaking nananatiling nababasa ito kapag lumaki o bumabalot ang text, at gawing madaling mahanap ang pangunahing aksyon nang hindi nangangailangan ng pagkilala sa kulay. Subukan din ang mga transition: naglo-load sa walang laman, naglo-load sa error, subukang muli sa tagumpay, at isang pagbabago sa filter pabalik sa mga resulta.

Ang isang praktikal na pagsusuri sa library ay nagsisimula sa isang trigger at isang inaasahang pagbawi. Para sa bawat pattern, itala ang estado, heading, opsyonal na paliwanag, pangunahing aksyon, pangalawang ruta, at kung ano ang mangyayari pagkatapos ng pagpili. Ihambing ang mga screenshot para sa kapaki-pakinabang na istraktura at visual na hierarchy, pagkatapos ay suriin ang gawi ng produkto sa konteksto; hindi maaaring sabihin sa iyo ng isang static na imahe kung ang isang error ay mababawi o kung ang isang resulta ay talagang walang laman. I-browse ang library ng ScreenKits UI para sa mga visual na sanggunian at galugarin ang lahat ng kategorya upang makahanap ng mga katabing pattern.

• Masasabi ba ng isang tao kung wala ang content, naglo-load pa rin, o hindi available dahil sa isang error?
• Sinasalamin ba ng mensahe ang kasalukuyang query, mga filter, account, o natapos na gawain?
• Ang aksyon ba ay nagpapanatili ng kapaki-pakinabang na input at humahantong sa isang nakikitang resulta?
• Gumagana ba ang estado sa maliliit na sukat, na may mas mahabang lokal na kopya, at may pantulong na teknolohiya?
• Maaari bang makabawi ang isang tao mula sa isang error o makahanap ng isang paraan upang ayusin ang isang hindi matagumpay na paghahanap?