[iOS][HIG] Loading (ํ•œ๊ธ€ ver.)
๐ŸŽ iOS/HIG

[iOS][HIG] Loading (ํ•œ๊ธ€ ver.)

Loading

 

When content is loading, a blank or static screen can make it seem like your app is frozen, resulting in confusion and frustration, and potentially causing people to leave your app.

 

์ฝ˜ํ…์ธ ๊ฐ€ ๋กœ๋”ฉ ์ค‘์ผ ๋•Œ ๋นˆ ํ™”๋ฉด์ด๋‚˜ ์ •์ ์ธ ํ™”๋ฉด์€ ์—ฌ๋Ÿฌ๋ถ„์˜ ์•ฑ์ด ๋ฉˆ์ถฐ์žˆ๋Š” ๊ฒƒ์ฒ˜๋Ÿผ ๋ณด์ด๊ฒŒ ํ•˜์—ฌ ํ˜ผ๋ž€์„ ์ดˆ๋ž˜ํ•˜๊ณ  ์‚ฌ์šฉ์ž๊ฐ€ ๋‹น์‹ ์˜ ์•ฑ์—์„œ ๋‚˜๊ฐ€๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.

 

 

Make it clear when loading is occurring. At minimum, show an activity spinner that communicates something is happening. Even better, display explicit progress so people can gauge how long they’ll be waiting.

 

๋กœ๋”ฉ ์ค‘์ผ ๋•Œ์˜ ์ƒํ™ฉ์„ ๋ช…ํ™•ํ•˜๊ฒŒ ํ•˜์„ธ์š”. ์ตœ์†Œํ•œ ์–ด๋–ค ์ผ์ด ์ง„ํ–‰ ์ค‘์ด๋ผ๋Š” ๊ฒƒ์„ ์•Œ๋ฆฌ๋Š” activity spinner๋ฅผ ๋ณด์—ฌ์ฃผ์„ธ์š”. ์‚ฌ๋žŒ๋“ค์ด ์–ผ๋งˆ๋‚˜ ์˜ค๋ž˜ ๊ธฐ๋‹ค๋ ค์•ผ ํ•˜๋Š”์ง€๋ฅผ ๊ฐ€๋Š ํ•  ์ˆ˜ ์žˆ๋„๋ก ๋ช…ํ™•ํ•œ ์ง„ํ–‰ ์ƒํ™ฉ์„ ๋ณด์—ฌ์ฃผ๋Š” ๊ฒƒ์ด ๊ฐ€์žฅ ์ข‹์Šต๋‹ˆ๋‹ค.

 

Show content as soon as possible. Don’t make people wait for content to load before seeing the screen they're expecting. Show the screen immediately, and use placeholder text, graphics, or animations to identify where content isn't available yet. Replace these placeholder elements as the content loads. Whenever possible, preload upcoming content in the background, such as while an animation is playing or the user is navigating a level or menu.

 

์ตœ๋Œ€ํ•œ ๋น ๋ฅด๊ฒŒ ์ฝ˜ํ…์ธ ๋ฅผ ํ‘œ์‹œํ•˜์„ธ์š”. ์‚ฌ์šฉ์ž๊ฐ€ ์›ํ•˜๋Š” ํ™”๋ฉด์„ ๋ณด๊ธฐ ์ „์— ์ปจํ…์ธ ๊ฐ€ ๋กœ๋”ฉ๋˜๊ธฐ๋ฅผ ๊ธฐ๋‹ค๋ฆฌ๊ฒŒ ํ•˜์ง€ ๋งˆ์„ธ์š”. ํ™”๋ฉด์„ ์ฆ‰์‹œ ๋ณด์—ฌ์ฃผ๊ณ  placeholder ํ…์ŠคํŠธ, ๊ทธ๋ž˜ํ”ฝ, ๊ทธ๋ฆฌ๊ณ  ์• ๋‹ˆ๋ฉ”์ด์…˜์„ ์‚ฌ์šฉํ•˜์—ฌ ์•„์ง ์ฝ˜ํ…์ธ ๊ฐ€ ๋‚˜ํƒ€๋‚˜์ง€ ์•Š์€ ์œ„์น˜๋ฅผ ์•Œ ์ˆ˜ ์žˆ๊ฒŒ ํ•ด ์ฃผ์„ธ์š”. ์ด๋Ÿฌํ•œ placeholder ์š”์†Œ๋“ค์€ ์ฝ˜ํ…์ธ ๊ฐ€ ๋กœ๋“œ๋˜๋ฉด ์ฆ‰์‹œ ๋ฐ”๊ฟ”์ฃผ์„ธ์š”. ๊ฐ€๋Šฅํ•˜๋ฉด ์• ๋‹ˆ๋ฉ”์ด์…˜์ด ์žฌ์ƒ๋˜๊ฑฐ๋‚˜ ์‚ฌ์šฉ์ž๊ฐ€ ๋ฉ”๋‰ด๋ฅผ ํƒ์ƒ‰ํ•˜๋Š” ๋™์•ˆ ์ฝ˜ํ…์ธ ๋ฅผ ๋ฐฑ๊ทธ๋ผ์šด๋“œ์—์„œ ๋ฏธ๋ฆฌ ๋กœ๋“œํ•˜์„ธ์š”.

 

Educate or entertain people to mask loading time. Consider showing hints about gameplay, entertaining video sequences, or interesting placeholder graphics.

 

๋กœ๋”ฉ ์‹œ๊ฐ„์„ ์ˆจ๊ธธ ์ˆ˜ ์žˆ๋„๋ก ์‚ฌ๋žŒ๋“ค์—๊ฒŒ ๋ฌด์–ธ๊ฐ€๋ฅผ ๊ฐ€๋ฅด์น˜๊ฑฐ๋‚˜ ๊ทธ๋“ค์„ ์ฆ๊ฒ๊ฒŒ ํ•ด์ฃผ์„ธ์š”. ๊ฒŒ์ž„์„ ํ•  ๋•Œ ๋„์›€์„ ์ฃผ๋Š” ํžŒํŠธ๋ฅผ ๋ณด์—ฌ์ฃผ๊ฑฐ๋‚˜ ์œ ์พŒํ•œ ๋น„๋””์˜ค, ๋˜๋Š” ํฅ๋ฏธ๋กœ์šด placeholder ๊ทธ๋ž˜ํ”ฝ์„ ์‚ฌ์šฉํ•ด๋ณด์„ธ์š”. 

 

Customize loading screens. Although standard progress indicators are usually OK, they can sometimes feel out of context. Consider designing a more immersive experience through custom animations and elements that match the style of your app or game.

 

๋กœ๋”ฉ ํ™”๋ฉด์„ ์ปค์Šคํ…€ํ•˜์„ธ์š”. ๊ธฐ๋ณธ์ ์ธ progress indicator๋Š” ๋ณดํ†ต ์–‘ํ˜ธํ•˜์ง€๋งŒ, ๊ฐ€๋”์€ ์ƒํ™ฉ์— ๋งž์ง€ ์•Š๋Š” ๋Š๋‚Œ์„ ์ค„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์—ฌ๋Ÿฌ๋ถ„์˜ ์•ฑ์ด๋‚˜ ๊ฒŒ์ž„ ์Šคํƒ€์ผ์— ๋งž๋Š” ์• ๋‹ˆ๋ฉ”์ด์…˜๊ณผ ์š”์†Œ๋ฅผ ํ†ตํ•ด ๋”์šฑ๋” ๋ชฐ์ž…๊ฐ ์žˆ๋Š” ํ™˜๊ฒฝ์„ ์„ค๊ณ„ํ•ด๋ณด์„ธ์š”.

 

For additional guidance, see Progress Indicators.

 

 

'๐ŸŽ iOS > HIG' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

[iOS][HIG] Onboarding (ํ•œ๊ธ€ ver.)  (0) 2021.07.26
[iOS][HIG] Launching (ํ•œ๊ธ€ ver.)  (0) 2021.07.19
[iOS][HIG] Interface Essentials (ํ•œ๊ธ€ ver.)  (0) 2021.07.11
[iOS][HIG] iOS Themes (ํ•œ๊ธ€ ver.)  (0) 2021.07.06