이 페이지에서는 느린 네트워크와 오프라인에서 우수한 사용자 환경을 만드는 방법에 관한 디자인 가이드라인을 제공합니다.
네트워크 연결 품질은 다음과 같은 여러 요인의 영향을 받을 수 있습니다.
- 네트워크 제공업체의 서비스 범위가 좁습니다.
- 악천후
- 정전
- 네트워크 연결을 차단하는 벽이 있는 건물과 같이 영구적인 '데드존'에 진입
- 기차를 타고 터널을 통과할 때와 같이 일시적인 '데드존'에 진입합니다.
- 공항이나 호텔과 같이 시간 제한이 있는 인터넷 연결
- 특정 시간 또는 특정 날짜에 인터넷 액세스가 제한되거나 불가능한 문화적 관행
개발자의 목표는 연결 변경의 영향을 줄이는 우수한 환경을 제공하는 것입니다.
네트워크 연결 상태가 좋지 않을 때 사용자에게 표시할 내용 결정
가장 먼저 물어봐야 할 질문은 앱에서 네트워크 연결의 성공과 실패가 어떻게 표시되는지입니다. 연결에 성공하면 앱의 정상적인 온라인 환경이 제공됩니다. 연결 실패에는 앱이 오프라인 상태일 때와 지연이 발생한 네트워크에서의 동작이 모두 포함됩니다.
연결 실패를 처리하는 방법을 결정하려면 다음과 같은 중요한 UX 질문을 자문해 보세요.
- 연결의 성공 또는 실패를 확인하기 위해 얼마나 기다리시나요?
- 성공 또는 실패가 결정되는 동안 무엇을 할 수 있나요?
- 연결에 실패하면 어떻게 해야 하나요?
- 사용자에게 어떤 상황인지 어떻게 알릴 수 있나요?
사용자에게 현재 상태 및 상태 변경사항 알림
사용자에게 애플리케이션 상태와 네트워크 장애가 발생할 때 취할 수 있는 작업을 모두 안내합니다. 예를 들어 알림에는 다음과 같은 내용이 표시될 수 있습니다.
네트워크 연결 상태가 좋지 않은 것 같습니다. 걱정하지 마세요. 네트워크가 복원되면 메일이 전송됩니다.
네트워크 연결이 개선되거나 복원되면 사용자에게 알림
사용자에게 네트워크 연결이 개선되었다고 알리는 방법은 애플리케이션에 따라 다릅니다. 날씨 또는 주식 시장 추적기와 같이 현재 정보에 우선순위를 두는 앱은 최대한 빨리 자동 업데이트되어 사용자에게 알려야 합니다.
머티리얼 디자인 토스트 요소와 같은 시각적 신호를 사용하여 웹 앱이 '백그라운드에서' 업데이트되었음을 사용자에게 알리는 것이 좋습니다. 여기에는 서비스 워커의 존재와 관리 콘텐츠의 업데이트를 모두 감지하는 것이 포함됩니다. 이 함수가 작동하는 코드 예는 여기에서 확인할 수 있습니다.
앱이 업데이트될 때 사용자에게 메모를 게시하는 Chrome 플랫폼 상태가 그 예입니다.
일부 앱은 항상 마지막으로 업데이트된 시간을 표시할 수 있습니다. 예를 들어 통화 변환기 앱에 특히 유용합니다.
뉴스 앱은 사용자에게 새 콘텐츠를 알리는 간단한 탭하여 업데이트 알림을 표시할 수 있습니다. 도움말을 자동 업데이트하면 사용자가 현재 위치를 잃게 됩니다.
현재 문맥 상태를 반영하도록 UI 업데이트
각 UI 요소에는 연결이 성공적으로 이루어져야 하는지에 따라 달라지는 자체 컨텍스트와 동작이 있을 수 있습니다. 오프라인에서 탐색할 수 있지만 연결이 다시 설정될 때까지 가격 및 구매 버튼이 사용 중지되는 전자상거래 사이트를 예로 들 수 있습니다.
다른 형식의 컨텍스트 상태에는 데이터가 포함될 수 있습니다. 예를 들어 금융 앱인 Robinhood는 색상과 그래픽을 사용하여 사용자에게 주식 시장이 열렸음을 알립니다. 시장이 닫히면 전체 인터페이스가 흰색으로 바뀌었다가 비활성화됩니다. 주식 값이 오르거나 내릴 때 각 개별 주식 위젯은 상태에 따라 녹색 또는 빨간색으로 바뀝니다.
오프라인 모델에 관해 사용자에게 안내합니다.
대부분의 사용자는 항상 네트워크에 연결되어 있는 데 익숙합니다. 연결이 끊겼을 때 앱에 어떤 변경사항이 적용되는지 사용자에게 알려야 합니다. 대용량 데이터가 저장되는 위치를 안내하고 기본 동작을 변경하는 설정을 제공합니다. 아이콘만으로 전체 스토리를 전달하는 단일 디자인 선택에 의존하는 대신 여러 UI 디자인 구성요소 (예: 정보 제공 언어, 아이콘, 알림, 색상, 이미지)를 함께 사용하여 이러한 아이디어를 전달합니다.
기본적으로 오프라인 환경 제공
앱에 데이터가 많이 필요하지 않다면 기본적으로 해당 데이터를 캐시합니다. 네트워크 연결이 되어 있어야 데이터에 액세스할 수 있는 경우 사용자의 불만이 점점 커질 수 있습니다.
환경을 최대한 안정적으로 만드세요. 연결이 불안정하면 앱이 신뢰할 수 없는 것처럼 느껴집니다. 네트워크 장애의 영향을 줄이는 앱은 사용자에게 만족을 줍니다.
뉴스 사이트는 최신 뉴스를 자동으로 다운로드하고 자동으로 저장하여 이점을 얻을 수 있습니다. 텍스트만 다운로드하여 데이터를 저장할 수도 있으므로 사용자가 연결 없이 오늘의 뉴스를 읽을 수 있습니다. 사용자가 가장 많이 보는 뉴스 카테고리의 다운로드를 우선하여 이 동작을 사용자의 동작에 맞게 조정할 수 있습니다.
앱을 오프라인에서 사용할 준비가 되면 사용자에게 알림
웹 앱이 처음 로드될 때는 오프라인 사용 준비가 되었는지 사용자에게 표시해야 합니다. 섹션이 동기화되었거나 파일이 다운로드된 경우와 같이 화면 하단의 메시지를 통해 작업에 대한 간단한 의견을 제공하는 위젯을 사용합니다.
사용하는 언어가 잠재고객에게 적합한지 확인하고 적용되는 모든 경우에 동일한 문구를 사용하세요. 기술에 익숙하지 않은 잠재고객은 '오프라인'이라는 단어를 오해하는 경우가 많으므로 대신 잠재고객이 공감할 수 있는 액션 기반 언어를 사용하세요.
인터페이스에서 '오프라인 저장'을 명확하게 표시합니다.
애플리케이션에서 많은 데이터를 사용하는 경우 오프라인 사용을 위해 항목을 추가하는 스위치나 고정이 있는지 확인합니다. 사용자가 설정 메뉴를 통해 이 동작을 구체적으로 요청한 경우에만 파일을 자동으로 다운로드합니다. 고정 또는 다운로드 UI가 사용자에게 명확하게 표시되고 다른 UI 요소에 의해 숨겨지지 않아야 합니다.
대용량 파일이 필요한 음악 플레이어가 그 예입니다. 사용자는 관련 데이터 비용을 알고 있지만 플레이어를 오프라인에서 사용하고 싶을 수도 있습니다. 나중에 사용할 음악을 오프라인 저장하려면 사용자가 미리 계획해야 하므로 온보딩 중에 사용자에게 이 기능을 안내하는 것이 좋습니다.
오프라인에서 사용할 수 있는 항목을 명확히 설명합니다.
제공하는 옵션을 명확하게 설명하세요. 사용자가 기기에 저장된 항목과 저장해야 할 항목을 확인할 수 있도록 '오프라인 보관함' 또는 콘텐츠 색인의 탭 또는 설정을 표시해야 할 수 있습니다. 설정이 간결해야 하며 데이터가 저장되는 위치와 액세스 권한이 있는 사용자를 명확하게 명시해야 합니다.
액션의 실제 비용 표시
많은 사용자가 오프라인 기능을 '다운로드'와 동일시합니다. 네트워크 연결이 자주 끊기거나 사용할 수 없는 국가의 사용자는 다른 사용자와 콘텐츠를 공유하거나 연결이 있을 때 오프라인 사용을 위해 콘텐츠를 저장하는 경우가 많습니다.
데이터 요금제를 사용하는 사용자는 비용 부담 때문에 대용량 파일을 다운로드하지 않는 경우가 있으므로 사용자가 특정 파일이나 작업을 직접 비교할 수 있도록 관련 비용도 표시하는 것이 좋습니다. 예를 들어 앞서 언급한 음악 앱은 사용자가 데이터 요금제를 사용 중인지 감지하고 파일 크기를 표시하여 사용자가 파일 비용을 확인할 수 있도록 할 수 있습니다.
해킹된 환경 방지
사용자는 자신이 의도하지 않게 환경을 해킹하는 경우가 많습니다. 예를 들어 클라우드 기반 파일 공유 웹 앱이 등장하기 전에는 사용자가 대용량 파일을 저장하고 이메일에 첨부하여 다른 기기에서 계속 수정할 수 있도록 하는 것이 일반적이었습니다. 우수한 UI는 해킹된 환경으로 유도하지 않고 사용자가 해결하려는 문제를 해결합니다. 예를 들어 대용량 파일을 이메일에 더 사용자 친화적으로 첨부하는 대신 여러 기기에서 대용량 파일을 공유하는 방법을 제공합니다.
한 기기에서 다른 기기로 환경을 이전할 수 있도록 만들기
불안정한 네트워크용으로 빌드할 때는 환경을 전송할 수 있도록 연결이 개선되는 즉시 동기화해 보세요. 예를 들어 여행 앱에서 예약 중간에 네트워크 연결이 끊겼다고 가정해 보겠습니다. 연결이 다시 설정되면 앱이 사용자의 계정과 동기화되어 데스크톱 기기에서 예약을 계속할 수 있고 환경이 원활하게 느껴집니다.
사용자에게 데이터의 상태를 알려줍니다. 예를 들어 앱이 동기화되었는지 여부를 표시할 수 있습니다. 가능한 경우 정보를 제공하되 너무 많은 메시지로 고객을 압도하지 마세요.
포용적인 디자인 환경 만들기
UX를 설계할 때는 의미 있는 디자인 기기, 간단한 언어, 표준 아이콘, 의미 있는 이미지를 제공하여 사용자가 방해받지 않고 작업을 완료하도록 안내하는 포용적인 디자인을 추구하세요.
간단하고 명확한 표현 사용
좋은 UX는 인터페이스를 디자인하는 것만이 아닙니다. 여기에는 사용자가 앱을 통해 이동하는 경로와 그 여정을 설명하는 데 앱에서 사용하는 언어를 비롯하여 그 과정에서 마주치는 모든 것이 포함됩니다. UI 구성요소나 앱 상태를 설명할 때는 기술 전문 용어를 사용하지 마세요. '오프라인'이라는 단어는 앱이 어떤 작업을 하고 있는지 사용자에게 알리기에 충분히 명확하지 않은 경우가 많습니다.
여러 디자인 기기를 사용하여 접근 가능한 사용자 환경 만들기
언어, 색상, 시각적 구성요소를 사용하여 상태 또는 상태 변경사항을 표시합니다. 색상만 사용하여 상태를 표시하면 사용자가 알아보기 어렵거나 시각 장애가 있는 사용자는 아예 액세스할 수 없을 수도 있습니다. 또한 웹 디자인에서는 사용 중지된 요소에 회색을 사용하는 경향이 있으므로 회색 UI를 사용하여 앱이 오프라인 상태임을 표시하면 특히 색상만 사용하여 상태를 표시하는 경우 오프라인 상태에서 앱이 할 수 있는 작업에 관해 혼란이 야기될 수 있습니다.
오해를 방지하려면 색상, 라벨, UI 구성요소와 같은 다양한 방법으로 사용자에게 앱 상태를 표현하세요.
의미를 전달하는 아이콘 사용
아이콘과 함께 의미 있는 텍스트 라벨을 사용해야 합니다. 아이콘만으로는 혼란스러울 수 있습니다. 특히 웹의 '오프라인' 개념은 비교적 새롭기 때문입니다. 혼동을 야기하는 다른 아이콘으로는 플로피 디스크를 사용하여 '저장'을 나타내는 경우가 있습니다. 플로피 디스크를 본 적이 없는 어린 사용자에게는 의미가 없을 수 있습니다. '햄버거' 메뉴 아이콘도 혼동을 야기합니다.
오프라인 아이콘을 도입할 때는 업계 표준 시각 자료가 있는 경우 이를 따르고 텍스트 라벨과 설명을 제공합니다. 예를 들어 오프라인 저장을 의미하는 다운로드 아이콘과 동기화와 관련된 작업의 동기화 아이콘을 사용할 수 있습니다. 저장 또는 다운로드 작업으로 해석될 수 있는 상태를 나타내는 아이콘을 사용할 때는 주의해야 합니다.
아이디어를 얻으려면 Material Design 아이콘 세트를 참고하세요.
스켈레톤 레이아웃 및 기타 피드백 메커니즘 사용
앱에서 콘텐츠를 로드하는 동안 사용자가 앱이 손상되었다고 생각하지 않도록 로드 중임을 사용자에게 표시합니다. 이를 위한 한 가지 방법은 콘텐츠가 로드되는 동안 표시되는 앱의 와이어프레임 버전인 스켈레톤 레이아웃을 사용하는 것입니다. 사용자에게 앱이 로드되고 있다고 알리는 텍스트 라벨이 있는 로더 UI를 사용하거나, 와이어프레임에 부드럽게 맥동하는 애니메이션을 사용하여 앱이 실행되고 로드되고 있는 것처럼 느끼게 하는 것도 고려해 보세요. 이렇게 하면 사용자에게 무언가 진행 중이라는 확신을 주고 재제출이나 불필요한 새로고침을 방지할 수 있습니다.
의견을 제공하여 작업 상태를 표시합니다. 예를 들어 사용자가 오프라인 상태에서 문서를 수정하는 경우 의견 디자인을 변경하여 온라인 상태와 눈에 띄게 다르게 표시하면서도 파일이 '저장'되었음을 보여주고 네트워크에 연결되면 동기화된다는 점을 보여주는 것이 좋습니다. 이렇게 하면 사용자에게 앱의 작동 방식을 알리고 할 일 또는 작업이 저장되었음을 안심시켜 애플리케이션을 더 자신 있게 사용할 수 있도록 할 수 있습니다.
콘텐츠 차단 안함
일부 앱에서는 사용자가 새 문서 만들기와 같은 작업을 트리거할 수 있습니다. 일부 앱은 서버에 연결하여 새 문서를 동기화하려고 시도하며 이를 보여주기 위해 전체 화면을 가리는 방해가 되는 로드 모달 대화상자를 표시합니다. 이는 사용자가 안정적인 네트워크 연결을 사용하는 경우 작동할 수 있지만 네트워크가 불안정하면 이 작업에서 벗어날 수 없으므로 UI가 다른 작업을 할 수 없도록 차단합니다.
콘텐츠를 차단하는 네트워크 요청을 피하세요. 사용자가 앱을 계속 탐색하고 연결이 개선될 때 실행되고 동기화될 작업을 현재 재생목록에 추가할 수 있도록 합니다.
10억 명의 신규 사용자 유치를 위한 디자인
많은 지역에서 저가형 기기가 일반적이고 연결이 불안정하며 많은 사용자에게 데이터가 매우 비쌉니다. 데이터를 투명하고 검소하게 사용하여 사용자의 신뢰를 얻으세요. 연결 상태가 좋지 않은 사용자를 지원하고 작업 속도를 높이기 위해 인터페이스를 간소화하는 방법을 생각해 보세요. 데이터가 많은 콘텐츠를 다운로드하기 전에 항상 사용자에게 문의하세요.
지연이 발생하는 연결의 사용자에게 대역폭이 낮은 옵션을 제공합니다. 느린 네트워크 연결에는 더 작은 애셋을 제공하거나 품질이 높거나 낮은 애셋을 선택할 수 있는 옵션을 제공합니다.
결론
오프라인 UX의 핵심은 교육입니다. 사용자는 오프라인 UX에 익숙하지 않기 때문입니다. 학습에 도움이 되도록 나중에 사용할 수 있도록 다운로드하는 것이 데이터를 오프라인 저장하는 것과 같다고 설명하는 등 친숙한 개념과 연결을 시도해 보세요.
불안정한 네트워크 연결을 고려하여 설계할 때는 다음 가이드라인을 참고하세요.
- 네트워크 연결의 성공, 실패, 불안정성을 고려하여 설계합니다.
- 데이터는 비용이 많이 들 수 있으므로 사용자를 배려하세요.
- 전 세계 대부분의 사용자에게 기술 환경은 거의 전적으로 모바일입니다.
- 저가형 기기는 저장용량, 메모리, 처리 능력이 제한되어 있고 디스플레이가 작으며 터치 스크린 품질이 낮습니다. 디자인 프로세스의 일부로 성능을 고려하세요.
- 사용자가 오프라인 상태에서 애플리케이션을 탐색할 수 있도록 허용합니다.
- 사용자에게 현재 상태와 상태 변경사항을 알립니다.
- 앱에 데이터가 많이 필요하지 않은 경우 기본적으로 오프라인을 제공해 보세요.
- 앱의 데이터 사용량이 많은 경우 오프라인 사용을 위해 다운로드하는 방법을 사용자에게 안내합니다.
- 기기 간에 환경을 전송할 수 있도록 합니다.
- 언어, 아이콘, 이미지, 서체, 색상을 함께 사용하여 사용자에게 아이디어를 표현합니다.
- 사용자를 안심시키고 도움이 되는 의견을 제공합니다.