๐ซฅ ๊ณต๋ฐฑ ์ํ(Empty States) ๋ฌธ๊ตฌ 10๊ฐ์ง ์์
๐ ํ ์ค ์์ฝ - ๊ณต๋ฐฑ ์ํ ๋ฌธ๊ตฌ๋ ์ฌ์ฉ์์ ์ถ๊ฐ ํ๋์ ์ ๋ํ๊ฑฐ๋, ๋ง์กฑ๊ฐ, ์ดํ๋ฅ ์ ์ค์ผ ์ ์์ผ๋ฉฐ, ๋ธ๋๋ ๋ณด์ด์ค๋ฅผ ๋๋ฌ๋ด๋ ํจ๊ณผ์ ์ธ ๋๊ตฌ๋ก ํ์ฉํ ์ ์์ต๋๋ค. โ๏ธ UI ์ปดํฌ๋ํธ ์ค, Empty States๋ฅผ ์ด๋ป๊ฒ ๋ฒ์ญํ๊ณ ์๋์? ์ฌ๋ฌ ์ฌ์ ๊ณผ ๋จ์ด๋ฅผ ์ฐพ์๋ดค์ ๋, ๋น ๊ณต๊ฐ, ๋น ์ํ, ๊ณต๋ฐฑ ์ํ ๋ฑ์ผ๋ก ๋ฒ์ญํ ์ ์๋๋ฐ์. ์ฒ์์ ๋น ์ํ๋ก ๋ถ๋ ์ ๋๋ '๋น์ฌ ์ํ'๊ฐ ๋ ์ฌ๋ผ ๋ฐ๊ฟ์ผ๊ฒ ๋ค๊ณ ์๊ฐํ์ด์. โ๏ธ ๋น์ฌ ์ํ๋ผ๋, ์ ์ข์ ์ด๋ฏธ์ง๊ฐ ๋ ์ค๋ฅด์์์? ๐ซฃ ๊ทธ ๋ค์์ด '๋น ๊ณต๊ฐ'์ด์์ด์. ๋ญ๊ฐ ๋น ๊ณต๊ฐ์ด๋ผ๊ณ ํ๋๊น 'Empty'๋ฅผ ๊ทธ๋๋ก ๋ค์ฌ๋์ ๊ฒ์ฒ๋ผ '์๋ฌด๊ฒ๋ ์๊ณ , ์๋ฌด์๋ฏธ ์๋ค'๋ผ๊ณ ๋ฐ์๋ค์ด๊ฒ ๋๋๋ผ๊ณ ์. โ๏ธ ๋ค์์ผ๋ก ์๊ฐํ๊ฒ '๊ณต๋ฐฑ ์ํ'์ธ๋ฐ์. ๊ณต๋ฐฑ ์ํ๋ฅผ ์ ๋ฐ์ผ๋ก ๋ด๋ฑ์ด๋ณด๋, ์๊ฐ๋ณด๋ค ์ ์ ์ ๋ถ์ด์ '๊ณต๋ฐฑ ์ํ'๋ก ๊ฒฐ์ ํ์ด์.(?) ๊ทธ๋ฆฌ๊ณ ์๋ฏธ๋ฅผ ์ข ๋ถ์ฌ๋ดค๋๋ฐ์. ํ์์ด๋ก ํ๋ฉด '๋น๊ณต' = '0'์ด๋ผ๋ ์๋ฏธ๋ฅผ ๋ํ๊ณ , 'ํฐ๋ฐฑ' = '๋ฐฑ์ง ์ํ'๋ผ๋ ์๋ฏธ๋ฅผ ๋ํด, ๋ฌด์์ด๋ ์ฑ์๋ฃ์ ์ ์๋ ํฐ ๊ณต๊ฐ์ด๋ค๋ผ๊ณ ๋ง์ด์ฃ . โ๏ธ ์ด๊ฒ ๋ญ ์๋ฆฌ๋๊ณ ์? ๐ถ(๊ฐ)์๋ฆฌ์ด๊ณ ์. ์์ ๋งํ๋ฏ ์ ์ ์ ๋ถ์ด์ '๊ณต๋ฐฑ ์ํ'๋ก ์ด๋ฆ ๋ถ์ด๋๊ฒ ์ข์ ๊ฑฐ ๊ฐ์, ๊ทธ๋ ๊ฒ ํ์ด์.๐ ํ์ฌ ๋ด์์ ์ปค๋ฎค๋์ผ์ด์ ํ ๋, ์ ์ ์ดฅ! ๋ฌ๋ผ ๋ถ์ด ์ฝ๊ฒ์ฝ๊ฒ ๋ถ๋ฌ์ผ ํธํ์์์? ๊ทธ๋์ ๊ฒฐ์ ํ ๊ฑฐ์ฃ . โ๏ธ ์ฌํผ, ๊ณต๋ฐฑ ์ํ๋ ์ํฉ์ ๋ฐ๋ผ ๋ค๋ฅธ๋ฐ์. ์ฒ์ ์์ํ๋ ์ฌ์ฉ์์๊ฒ ์ด๊ฑฐ์ด๊ฑฐ ํด๋ด๋ผ ํ๊ณ ๋ณด์ฌ์ค ์ ์๊ณ , ์ค๋ฅ๊ฐ ๋ฌ์ ๋ ์ค๋ฅ๋ฅผ ์ค๋ช ํ๊ธฐ๋ ํ์ฃ . ์ด ๊ณต๋ฐฑ ์ํ๋ '๋ฐฐ๋ฏผ์ ์ฐ' ๊ธฐ๋ฅ์ด ๋น์ด์์ ๋, ์๊ฐ์ ์ดํฌ๋์ค์ ๋ค์ ํ๋์ ์ ๋ํ๋ ์ธก๋ฉด์์ ๊ฐ์๊ธฐ ๋จ์ง ์์์๊น ์๊ฐํด์. โ๏ธ ํนํ, ๋ฐฐ๋ฏผ์ด ์ง๋๋ B๊ธ ๊ฐ์ฑ์ด ์ด๋ฏธ์ง์ ๋ฌธ๊ตฌ๋ก ๋๋ฌ๋๋ฉฐ, ๋ธ๋๋ ์์ด๋ดํฐํฐ๋ฅผ ๋๋ฌ๋ผ ์ ์๋ ์ ์ฉํ ๊ณต๊ฐ์ผ๋ก ๋ ์ค๋ฅธ ๊ฑฐ ๊ฐ์์. ์ด๋์? ํ๊ตญ์์์. ๊ทธ ์ ๊น์ง๋ ์๋ ๊ทธ๋๋ก๋ง ๋ณด์ฌ์ฃผ๋ ๊ณต๊ฐ์ด์์ง ์๋ ์ถ๋ค์. โ๏ธ ์ด์ ๊ฐ์ ๊ณต๋ฐฑ ์ํ๋ฅผ ์ ์ฉํ๊ฒ ์ฌ์ฉํ ์ ์๋ 10๊ฐ์ง ์์๊ฐ ์์ด์, ์ ๊ฐ ๋ค๊ณ ์์ด์. ๋น์ฐ ๊ตญ๋ด ์ฌ๋ก๊ฐ ์๋๊ณ ํด์ธ ์ฌ๋ก์ด๋ ๊ตญ๋ดํํด์ ์ ์ฉํ ํ์๊ฐ ์๊ฒ ์ฃ ? 1. Fitst use โ๏ธ ์ผ๋ฐ์ ์ผ๋ก ๊ณต๋ฐฑ ์ํ๋ ์ฌ์ฉ์๊ฐ ์ ํ์ด๋ ์๋น์ค์ ๊ฐ์ ํ๊ณ ์๋ฌด๊ฒ๋ ํ์๋์ง ์์ ๋, ์ฆ ์ฒ์ ์ฌ์ฉํ ๋ ๋ํ๋์. Dropbox Paper๋ฅผ ์ข์ ์์๋ก ๋ค๊ณ ์๋ค์. ํ์ดํ์ ์๋น์ค์ ํต์ฌ ๊ฐ์น๋ฅผ ์์ถํด ์ค๋ช ํ๊ณ , ์ฌ์ฉ์๊ฐ ํ๋์ ์ทจํ๋๋ก ์ ๋ํ๊ณ ์์ด์. โข ํ์ดํ: Dropbox Paper: Your Team's collaborative workspace โข ๋์คํฌ๋ฆฝ์ : Paper is mor than a doc-it's a workspace that brings creation and coordination together in one place. Write and edit. brainstorm, review designs, manage tasks, or run meetings. โข ๋ฒํผ: Get started 2. User cleared โ๏ธ ๋ ๋ฒ์งธ ์ฌ๋ก๋ ์ฌ์ฉ์๊ฐ ๋ฐ์ ํธ์งํจ์ด๋ ์์ ๋ชฉ๋ก์ ์ง์์ ํ์ํ ๋ด์ฉ์ด ์์ ๋์ ๋๋ค. Feedly ์๋น์ค๋ฅผ ์๋ก ๋ค๊ณ ์๊ณ , ๋ธ๋๋ ์ผ๋ฌ์คํธ๋ ์ด์ ์ ํ์ฉํด ์ฌ์ฉ์๋ฅผ ์์ฌ์ํค๊ณ , ๋ค์ ํ๋์ ์ ๋ํ๊ณ ์์ด์. โข ํ์ดํ: All Done! โข ๋์คํฌ๋ฆฝ์ : You're all caught up. โข ๋ฒํผ: SHOW READ ARTICLES 3. Errors โ๏ธ ์ ๋ช ํ UX Writing ์ปค๋ฎค๋ํฐ์์๋ ์ผ๋ถ ์ค๋ฅ ์์๋ฅผ ๊ณต๋ฐฑ ์ํ๋ก ํ์ํ๋ ๊ฒ์ด ๋ง๋์ ๋ํด ๋ ผ์์ด ๋ฒ์ด์ก์๋ค๊ณ ํ๋ค์. ์ผ๋ถ ์ค๋ฅ๋ ํ์ํ ๋ฐ์ดํฐ๊ฐ ์๋ ์ํ์ด๊ธฐ ๋๋ฌธ์ด์ฃ . ์ ๋ ์ค๋ฅ ์ํ ์ค ํ๋๋ก, ๊ณต๋ฐฑ ์ํ๊ฐ ์๋ค๊ณ ๋ณด๊ธฐ ๋๋ฌธ์, ์ด๋ฅผ ์ ์ ํ ํ์ฉํ ๋ฐฉ์์ด ํ์ํ๋ค ์๊ฐํด์. ์ฌ๊ธฐ์๋ ๋ํ์ ์ธ ์์๋ก Android์ฉ Skype๋ฅผ ๋ค๊ณ ์์ด์. โข ํ์ดํ: Oh no! โข ๋์คํฌ๋ฆฝ์ : No internet found. Check your connection or try again. โข ๋ฒํผ: RETRY 4. No data to show โ๏ธ ๊ณต๋ฐฑ ์ํ๋ฅผ ํ์ํ๋ ๋ํ์ ์ธ ์ ์ค ํ๋๊ฐ, ๊ฒ์ํ๋๋ฐ ์ผ์นํ๋ ์กฐ๊ฑด์ ๋ฐ๊ฒฌํ์ง ๋ชปํ์ ๋์์. ์ด๊ฒ ์ค๋ฅ์ผ ์ ์๊ณ , ๋จ์ ๋ฐ์ดํฐ๊ฐ ์์ ์๋ ์์ฃ . ์ ๋ ์ด๋๋ ์ถ๊ฐ ์กฐ์น๋ฅผ ์ทจํด ์ฌ์ฉ์์๊ฒ ํ๋์ ์ ๋ํ ์ ์๋ ์ข์ ๊ธฐํ๋ก ๋ด์. โ๏ธ ์ฌ๊ธฐ์๋ ๋ํ์ ์ธ ์์๋ก Instacart๋ผ๋ ์ฑ์ ๋ค์์ด์. 3๋จ๊ณ๋ก ์งํ๋๋ ๊ณผ์ ์ ๋ด์ผํ๋๋ฐ์. 1. ์ฌ์ฉ์์๊ฒ ๋ฌด์จ ์ผ์ด ์ผ์ด๋ฌ๋์ง ์๋ ค์ฃผ๊ณ , 2. ์ฌ์ฉ์๊ฐ ํ ์ ์๋ ์ผ์ ์ ์ํ๊ณ , 3. ๋์์ด ๋์ง ์์ ์๋ ์๋ค๊ณ ์ค๋ช ํ๋ฉฐ, ํฅํ ๋ฌธ์ ํด๊ฒฐ์ ์ํ ๋ฐฉ๋ฒ์ ์๋ ค์ฃผ๊ณ ์์ฃ . ๋ํ์ ์ธ ์ค๋ฅ ๋ฉ์์ง์ ํํ์ ๋์ผํด์. โข ํ์ดํ: No stores available for pickup within 50 miles โข ๋์คํฌ๋ฆฝ์ : Try changing your location to show stores that offer pickup. We're always adding new storesใ กcheck again soon. 5. Helpful whenever possible โ๏ธ ์ด๋ฒ ์์๋ ๊ณตํญ์ ์๋ฅผ ๋ค์๋๋ฐ์. ๊ณตํญ ์ด์ฉ์๊ฐ ๊ฒช์ ์ ์๋ ์ด๋ ค์์ ๋์์ผ๋ก ํ์ฌ, ๋์์ ์ค ์ ์๋ ๋ด์ฉ์ผ๋ก ๊ตฌ์ฑํ์ด์. ๋นํ ์ ์ ๊ธฐ๊ธฐ๋ฅผ ์ถฉ์ ํ ์ฝ์ผํธ๊ฐ ์ถฉ๋ถํ์ง ์๋ค๋ ์ ์ ํ์ ํด, ์บ์ฃผ์ผํ๊ณ ์ธ๊ฐ์ ์ธ ๋ชฉ์๋ฆฌ๋ก ์ฌ์ฉ์์๊ฒ ์ ๋ณด๋ฅผ ์ฃผ๊ณ ์์ฃ . โข ๋์คํฌ๋ฆฝ์ : This gate's empyty. Sooo many open plugs. 6. 404 page โ๏ธ ๋ํ์ ์ธ ์๋ฌ ํ์ด์ง 404 page์ ๋ํ ๋ด์ฉ์ด์์. ์์ ์์ฃผ ์ ํ๋ 404 page๋ ๋ธ๋ผ์ธ๋์ 404 page์ธ๋ฐ์. ๊ฒ์๋ฌผ์ด ์ญ์ ๋์ ๋, ํ์๋๋๋ผ๊ณ ์. ์์ฌ์ด ์ ์ ๊ทธ๋ฅ 404 page ๋ฌธ๊ตฌ๋ฅผ ๋ ธ์ถํ๊ณ ์๋ค๋ ์ ์ธ๋ฐ์. ์ด๋ฅผ ์ฌ์น์๊ฒ ํ์ฉํ๋ฉด ์ด๋จ๊น ํ๋ ์๊ฐ์ด ๋ง์ด ๋ค๋๋ผ๊ณ ์. โ๏ธ ๊ทธ๋ฌ๋ฉด 404 page๋ฅผ ์ด๋ป๊ฒ ํํํ๋ฉด ์ข์๊น? ๊ธฐ๋ฅ์ ์ด๋ฉฐ, ์ฌ๋ฏธ์๊ณ , ๋ชฉํ ์งํฅ์ ์ด๋ฉด ์ข๋ค๋ผ๊ณ ๋ณด๊ณ ์์ด์. ๋ํ์ ์ธ ์์๋ก Medium์ ๋ค๊ณ ์๋๋ฐ์. Medium์ ๋ค๋ฅธ ๋ด์ฉ์ ๊ฒ์ํ ์ ์๊ฒ ์ ๊ณตํ๊ณ , ์ฌ์ฉ์์ ์ทจํฅ์ ๊ณ ๋ คํด ์ถ๊ฐ ์ฝํ ์ธ ๋ฅผ ์ถ์ฒํ๋๋ผ๊ณ ์. โข ํ์ดํ: 404 We couldn't find this page. โข ์์น ๋ฐ: Search Medium โข ํ๋จ ๋ง์ถคํ ํญ: Still feeling lost? You're not alone. 7. Showing a tutorial at the start โ๏ธ ์ฒ์ ์ฌ์ฉํ๋ ์ฌ์ฉ์์๊ฒ ์ ๊ณตํ๋ ๊ณต๋ฐฑ ์ํ์ ์์์์. ์ฌ์ฉ์๊ฐ ์ ํ์ด๋ ์๋น์ค๋ฅผ ์ฒ์ ์ ํ์ ๋, ์ ํ์ ๋๋ฌ๋ณด๊ฑฐ๋ ์ผ๋ถ ๊ธฐ๋ฅ์ ์๊ฐํ๋ ๋ฐฉ์์ธ๋ฐ์. ํ๊ณ Saas ํ๋ซํผ์ธ Xero์ Tutorial ์์คํ ์ ์ ๊ณตํด, ์ฌ์ฉ์๊ฐ ์ ์ฝ๊ฒ ์ฒซ ์ฌ์ฉ์ ์ด์ฉํ๋๋ก ๋๊ณ ์์ด์. 8. Dashboard filled with default data โ๏ธ ์ฌ์ฉ์๊ฐ ์ฒ์ ์๋น์ค๋ฅผ ์ด์ฉํ ๋, ๋ด์ฉ์ ์๋์ผ๋ก ์ฑ์์ฃผ๋ ๊ฑฐ์์. ์์๋ฅผ ํตํด ๋ณด๋ฉด ๋ ์ดํด๊ฐ ์ ๋ ํ ๋ฐ์. ์ฐ๋ฆฌ๊ฐ ๊ตฌ๊ธ ์บ๋ฆฐ๋๋ฅผ ์ด์ฉํ ๋, ์๋์ผ๋ก ์ ๋ฌด ์์คํ ๊ณผ ์ฐ๋๋์ด ์บ๋ฆฐ๋์ ์ค์ผ์ฅด์ด ์กํ๋ ๊ฒ์ด๋ผ๊ณ ๋ณด๋ฉด ๋์ฃ . ์์๋ ์ํฐํด์์ ํ์ธํด ์ฃผ์ธ์. 9. Dashboard filled with sample data โ๏ธ ์ฒ์ ์์ํ ๋, ์ฌ์ฉ ๋ฐฉ๋ฒ์ ํ์ํ ๋ด์ฉ๋ค๋ก ์ํ ๋ฐ์ดํฐ๋ฅผ ๊ตฌ์ฑํ๋ ๊ฑฐ์ฃ . ์ฆ, '์ด๋ ๊ฒ ๋ฐ๋ผํด๋ผ'๋ผ๋ ์์๋ผ ๋ณด๋ฉด ์ข์์. ๋ํ์ ์ธ ์์๋ก Trello๋ฅผ ๋ค๊ณ ์๋๋ฐ์. ์ ๋ figma๋ Notion๋ ์ฒ์ ์์ํ๋ฉด ์ํ ๋ฐ์ดํฐ๊ฐ ์ฐจ ์์ฃ . ๋๋ ํ ํ๋ฆฟ์ ์ด์ฉํ ์ ์๊ฒ ์๋ดํ๋ฉด ์ข๊ฒ ๋ค์. 10. Including a gamification element โ๏ธ 404 ์ค๋ฅ๊ฐ ๋ฐ์ํ์ ๋, ์๊ฐ์ ์ฑ์ธ ์ ์๋ ๊ฒ์์ ์ ๊ณตํ๋ ๊ฑด๋ฐ์. ๊ตฌ๊ธ์์๋ ์ด๋ฌํ ์์๋ฅผ ์ง์ด๋ฃ์์ฃ . ์ง๊ธ์ ์ด๋ป๊ฒ ๊ตฌ์ฑ๋ผ ์๋์ง ๋ชจ๋ฅด๊ฒ ๋ค์. ์ํฐํด์์ Carwow๋ฅผ ์์๋ก ๋ค๊ณ ์๋๋ฐ์. โ๏ธ ์๋์ฐจ ๊ตฌ๋งค ๋น๊ต ์ฌ์ดํธ์ธ Carwow๋ 404 ์ค๋ฅ๊ฐ ๋ฐ์ํ์ ๋, 8๋นํธ ๊ฒ์์ ์ ๊ณตํ์ฌ, '๊ธธ์ ์ฐพ๋ ๋ฒ'์ ์์ ์ ์ผ๋ก ํํํ๊ณ ์์ด์. ์ด๋ฌํ ๋ฐฉ๋ฒ์ ์ฌ์ฉ์์๊ฒ ์ ํ ์ฑ ์์ ๋ฌป์ง ์๊ณ , ์๋น์ค์ ๊ด๋ จ๋ ๊ฒ์ ์์๋ฅผ ์ ๊ณตํ๊ณ ์์ด์. โข ํ์ดํ: Sorry, looks like we sent you the wrong way. Let us guide you back! โข ๋์คํฌ๋ฆฝ์ : Head to the Car Cooser to find your perfect car, or go back to the homepage.