느린 네트워크 및 오프라인을 위한 웹 환경 설계 가이드입니다.
이 문서에서는 느린 네트워크와 오프라인에서 훌륭한 환경을 만드는 방법에 관한 디자인 가이드라인을 제공합니다.
네트워크 연결의 품질은 다음과 같은 여러 요인의 영향을 받을 수 있습니다.
- 제공업체 커버리지가 낮습니다.
- 악천후
- 정전
- 네트워크 연결을 차단하는 벽이 있는 건물과 같이 영구적인 '사각지대'에 진입하는 경우
- 기차를 타고 터널을 지나갈 때와 같이 일시적인 '사각지대'에 진입하는 경우
- 공항이나 호텔 등 정해진 시간에 정해진 인터넷 연결
- 특정 시간 또는 요일에 인터넷 액세스가 제한되거나 배제되는 문화적 관행.
연결 상태 변화로 인한 영향을 완화하는 우수한 환경을 제공하는 것이 목표입니다.
네트워크 연결 상태가 좋지 않을 때 사용자에게 표시할 항목 결정
먼저 해야 할 첫 번째 질문은 네트워크 연결의 성공과 실패의 형태입니다. 연결에 성공하면 앱의 정상적인 온라인 환경을 경험할 수 있습니다. 그러나 연결에 실패한 경우 앱의 오프라인 상태가 될 수도 있고 네트워크 지연이 있을 때 앱이 어떻게 동작할 수도 있습니다.
네트워크 연결의 성공 또는 실패를 고려할 때 다음과 같은 중요한 UX 질문을 자문해야 합니다.
- 연결 성공 또는 실패를 판단할 때까지 얼마나 기다려야 할까요?
- 성공 또는 실패가 확인되는 동안 무엇을 할 수 있나요?
- 실패 시 어떻게 해야 하나요?
- 사용자에게 위 내용을 어떻게 알리나요?
사용자에게 현재 상태 및 상태 변경 알림
사용자에게 네트워크 장애 발생 시 취할 수 있는 조치와 애플리케이션의 현재 상태를 모두 알립니다. 예를 들어 다음과 같은 알림이 표시될 수 있습니다.
네트워크 연결 상태가 좋지 않은 것 같습니다. 걱정하지 마세요. 네트워크가 복원되면 메시지가 전송됩니다.
네트워크 연결이 개선되거나 복원될 때 사용자에게 알림
네트워크 연결이 개선되었음을 사용자에게 알리는 방법은 애플리케이션에 따라 다릅니다. 최신 정보에 우선순위를 두는 주식 시장 앱과 같이 앱은 자동으로 업데이트되어 최대한 빨리 사용자에게 알려야 합니다.
머티리얼 디자인 토스트 메시지 같은 시각적 신호를 사용하여 웹 앱이 '백그라운드에서' 업데이트되었음을 사용자에게 알리는 것이 좋습니다. 여기에는 서비스 워커의 존재와 서비스 워커의 관리형 콘텐츠 업데이트를 감지하는 작업이 모두 포함됩니다. 이 함수의 코드 예는 여기에서 확인할 수 있습니다.
한 가지 예로 앱이 업데이트되면 사용자에게 메모를 게시하는 Chrome 플랫폼 상태를 들 수 있습니다.
눈에 잘 띄는 공간에 항상 앱이 마지막으로 업데이트된 시간을 표시할 수도 있습니다. 이 기능은 통화 변환기 앱 등에 유용합니다.
뉴스 앱과 같은 애플리케이션에서는 사용자에게 새로운 콘텐츠를 알리는 간단한 탭하여 업데이트 알림을 표시할 수 있습니다. 자동 업데이트로 인해 사용자가 위치를 잃을 수 있습니다.
현재 상황별 상태를 반영하도록 UI 업데이트
각 UI에는 성공적인 연결이 필요한지에 따라 변경되는 자체 컨텍스트와 기능이 있을 수 있습니다. 오프라인에서 찾아볼 수 있는 전자상거래 사이트를 예로 들 수 있습니다. 다시 연결할 때까지 구매 버튼과 가격이 사용 중지됩니다.
상황별 상태의 다른 형태로 데이터가 포함될 수 있습니다. 예를 들어 금융 애플리케이션인 Robinhood에서는 사용자가 주식을 구매할 수 있고 색상과 그래픽을 사용하여 개장 시간을 사용자에게 알릴 수 있습니다. 폐장하면 전체 인터페이스가 흰색으로 변했다가 회색으로 표시됩니다. 주가가 상승하거나 하락하면 각 개별 주식 위젯은 상태에 따라 녹색 또는 빨간색으로 바뀝니다.
오프라인 모델을 이해할 수 있도록 사용자에게 안내
오프라인은 모든 사람을 위한 새로운 멘탈 모델입니다. 사용자에게 인터넷에 연결되지 않은 경우 변경되는 사항에 대해 안내해야 합니다. 대규모 데이터가 저장되는 위치를 알리고 기본 동작을 변경하도록 설정합니다. 아이콘만의 단일 디자인 선택에 의존하기보다는 정보를 제공하는 언어, 아이콘, 알림, 색상, 이미지와 같은 여러 UI 디자인 구성요소를 사용하여 이러한 아이디어를 전체적으로 전달해야 합니다.
기본적으로 오프라인 환경 제공
앱에 많은 데이터가 필요하지 않은 경우 기본적으로 해당 데이터를 캐시합니다. 네트워크 연결을 통해서만 데이터에 액세스할 수 있는 경우 사용자는 점점 더 불만을 느낄 수 있습니다. 최대한 안정적인 환경을 만드세요. 연결이 불안정하면 앱을 신뢰할 수 없게 됩니다. 네트워크 장애의 영향을 줄이는 앱은 사용자가 마법처럼 느낄 수 있습니다.
뉴스 사이트는 최신 뉴스를 자동으로 다운로드하고 자동으로 저장하여 사용자가 기사 이미지가 없는 텍스트를 다운로드하는 등 인터넷에 연결하지 않고도 오늘의 뉴스를 읽을 수 있도록 하는 이점을 제공합니다. 또한 사용자의 행동에 맞춰 조정하세요. 예를 들어 일반적으로 스포츠 섹션을 보는 경우 이 섹션을 우선적으로 다운로드합니다.
앱을 오프라인에서 사용할 준비가 되면 사용자에게 알림
웹 앱이 처음 로드될 때 오프라인으로 사용할 준비가 되었는지 사용자에게 표시해야 합니다. 예를 들어 섹션이 동기화되었거나 데이터 파일이 다운로드된 경우 등 화면 하단의 메시지를 통해 작업에 관한 간단한 의견을 제공하는 위젯을 사용하여 이 작업을 실행합니다.
사용하는 언어가 시청자에게 적합한지 다시 생각해 보세요. 메시지가 사용되는 모든 인스턴스에서 동일한지 확인합니다. 오프라인이라는 용어는 일반적으로 기술 지식이 없는 사람들이 잘못 이해하므로 대상 사용자가 공감할 수 있는 행동 기반 언어를 사용하세요.
데이터를 많이 사용하는 앱의 경우 '오프라인용으로 저장'을 인터페이스에 명확히 표시
애플리케이션에서 많은 양의 데이터를 사용하는 경우 사용자가 설정 메뉴를 통해 구체적으로 이 동작을 요청하지 않는 한 자동 다운로드가 아닌 오프라인 사용을 위한 항목을 추가하는 스위치나 핀이 있어야 합니다. 핀 또는 다운로드 UI는 다른 UI 요소로 가려지지 않으며 기능이 사용자에게 명확하게 표시되는지 확인합니다.
한 가지 예로 대용량 데이터 파일이 필요한 음악 플레이어를 들 수 있습니다. 사용자는 관련 데이터 비용을 알고 있지만 플레이어를 오프라인으로 사용하고 싶을 수도 있습니다. 나중에 사용하기 위해 음악을 다운로드하려면 사용자가 미리 계획을 세워야 하므로 온보딩 시 이에 관한 교육이 필요할 수 있습니다.
오프라인에서 사용할 수 있는 기능 설명
제공하는 옵션에 대해 명확히 해야 합니다. 사용자가 휴대전화에 저장한 항목과 저장해야 할 항목을 쉽게 확인할 수 있도록 '오프라인 라이브러리' 또는 콘텐츠 색인을 표시하는 탭이나 설정을 표시해야 할 수도 있습니다. 설정이 간결해야 하며 데이터가 저장되는 위치와 데이터 액세스 권한이 있는 사람을 명확히 합니다.
실제 액션 비용 표시
많은 사용자가 오프라인 기능을 '다운로드'와 동일시합니다. 네트워크 연결이 정기적으로 실패하거나 사용할 수 없는 국가의 사용자는 다른 사용자와 콘텐츠를 공유하거나 인터넷에 연결되어 있을 때 오프라인에서 사용할 수 있도록 콘텐츠를 저장합니다.
데이터 요금제 사용자는 비용을 염려하여 대용량 파일을 다운로드하지 않을 수 있으므로 사용자가 특정 파일이나 작업을 적극적으로 비교할 수 있도록 관련 비용을 표시할 수도 있습니다. 예를 들어 위의 음악 앱에서 사용자의 데이터 요금제 사용 여부를 감지하고 사용자가 파일 비용을 볼 수 있도록 파일 크기를 표시할 수 있습니다.
해킹 경험 방지하기
사용자는 자신도 모르게 해킹하는 경우가 많습니다. 예를 들어 클라우드 기반의 파일 공유 웹 앱이 도입되기 전에는 사용자가 대용량 파일을 저장하고 이메일에 첨부하여 다른 기기에서 계속 수정할 수 있었습니다. 사용자가 해킹을 겪게 하지 말고 목표로 하고 있는 목표를 살피는 것이 중요합니다. 즉, 대용량 파일을 더 사용자 친화적으로 첨부할 수 있는 방법을 생각하는 대신 여러 기기에서 대용량 파일을 공유하는 문제를 해결하세요.
한 기기에서 다른 기기로 이전 가능한 환경 만들기
불안정한 네트워크용으로 빌드할 때는 연결이 개선되는 즉시 동기화하여 환경을 전송할 수 있도록 하세요. 예를 들어 여행 앱이 예약 도중에 네트워크 연결이 끊어졌다고 가정해 보겠습니다. 다시 연결되면 앱이 사용자 계정과 동기화되어 사용자가 데스크톱 기기에서 예약을 계속 진행할 수 있습니다. 환경을 전송할 수 없으면 사용자가 상당히 불만을 느낄 수 있습니다.
사용자에게 데이터의 현재 상태를 알립니다. 예를 들어 앱이 동기화되었는지 여부를 표시할 수 있습니다. 가능하다면 메시지를 전달하되 고객에게 지나친 부담을 주지 않도록 합니다.
포용적인 디자인 환경 조성
디자인할 때는 사용자가 진행을 방해하지 않고 동작이나 작업을 완료하도록 안내하는 의미 있는 디자인 기기, 간단한 언어, 표준 아이콘 체계, 의미 있는 이미지를 제공하여 포용적이어야 합니다.
단순하고 간결한 언어 사용
좋은 UX는 잘 디자인된 인터페이스에만 국한되는 것이 아닙니다. 여기에는 사용자의 경로와 앱에서 사용되는 단어가 포함됩니다. 앱 또는 개별 UI 구성요소의 상태를 설명할 때는 기술 전문 용어를 사용하지 않습니다. '앱 오프라인'이라는 문구는 사용자에게 앱의 현재 상태를 전달하지 못할 수도 있습니다.
다양한 디자인 기기를 사용하여 접근성 높은 사용자 환경 조성
언어, 색상, 시각적 구성요소를 사용하여 상태 변경 또는 현재 상태를 보여줍니다. 상태를 보여주기 위해 색상만 사용하면 사용자가 인식하지 못할 수 있으며 시각 장애가 있는 사용자가 액세스하지 못할 수 있습니다. 또한 디자이너의 본능은 회색으로 표시된 UI를 사용하여 오프라인으로 표현하는 것이지만, 웹에서는 로드 의미가 있을 수 있습니다. 양식의 입력 요소와 같이 비활성화된 UI도 요소가 사용 중지되었음을 의미합니다. 따라서 색상만 상태를 나타내는 데 사용하면 혼란을 일으킬 수 있습니다.
오해를 방지하려면 색상, 라벨, UI 구성요소 등 다양한 방법으로 사용자에게 서로 다른 상태를 표현하세요.
의미를 전달하는 아이콘 사용
의미 있는 텍스트 라벨과 아이콘을 사용하여 정보가 올바르게 전달되는지 확인하세요. 웹상의 오프라인은 비교적 새로운 개념이므로 아이콘만 사용하는 경우에는 문제가 될 수 있습니다. 사용자가 스스로 사용되는 아이콘을 잘못 이해할 수 있습니다. 예를 들어, 노년층에게는 플로피 디스크를 저장하는 것이 합리적이지만 플로피 디스크를 본 적이 없는 젊은 사용자는 이 의미에 대해 혼동할 수 있습니다. 마찬가지로 '햄버거' 메뉴 아이콘이 라벨 없이 표시되면 사용자를 혼란스럽게 하는 것으로 알려져 있습니다.
오프라인 아이콘을 도입할 때는 업계 표준 시각적 요소가 존재하는 경우 이와 일관되도록 유지하고 텍스트 라벨과 설명을 제공하세요. 예를 들어 오프라인 저장은 일반적인 다운로드 아이콘이거나 동기화와 관련된 작업인 경우 동기화 아이콘일 수 있습니다. 일부 작업은 네트워크 상태를 보여주기보다는 오프라인용으로 저장하는 것으로 해석될 수 있습니다. 사용자에게 추상적인 개념을 제시하기보다는 전달하려는 액션을 생각해 보세요. 예를 들어 데이터 저장 또는 다운로드는 작업을 기반으로 합니다.
오프라인은 컨텍스트에 따라 다운로드, 내보내기, 고정 등 여러 가지를 의미할 수 있습니다. 더 많은 아이디어를 얻으려면 머티리얼 디자인 아이콘 모음을 확인하세요.
다른 피드백 메커니즘과 함께 스켈레톤 레이아웃 사용
스켈레톤 레이아웃은 기본적으로 콘텐츠가 로드되는 동안 표시되는 앱의 와이어프레임 버전입니다. 이렇게 하면 콘텐츠가 곧 로드됨을 사용자에게 보여줄 수 있습니다. 사용자에게 앱이 로드 중임을 알리는 텍스트 라벨이 있는 프리로더 UI도 사용해 보세요. 한 가지 예는 와이어프레임 콘텐츠를 진동시켜 앱이 작동 중이고 로드 중인 듯한 느낌을 주는 것입니다. 이렇게 하면 사용자가 무언가 진행되고 있다는 사실을 알 수 있으므로 앱을 다시 제출하거나 새로고침하는 것을 방지할 수 있습니다.
콘텐츠 차단 안함
일부 애플리케이션에서는 사용자가 새 문서 만들기와 같은 작업을 트리거할 수 있습니다. 일부 앱은 새 문서를 동기화하기 위해 서버에 연결하려고 하며, 이를 보여주기 위해 전체 화면을 덮는 방해가 되는 로드 모달 대화상자를 표시합니다. 사용자의 네트워크 연결이 안정적인 경우에는 제대로 작동할 수 있지만, 네트워크가 불안정한 경우 사용자가 이 작업에서 벗어날 수 없으며 UI가 효과적으로 다른 작업을 하지 못하도록 차단합니다. 콘텐츠를 차단하는 네트워크 요청은 피해야 합니다. 연결이 개선되면 사용자가 계속 앱을 탐색하고, 실행 및 동기화될 작업을 대기열에 추가할 수 있도록 허용합니다.
사용자에게 피드백을 제공하여 작업 상태를 보여줍니다. 예를 들어 사용자가 문서를 수정하는 경우 온라인 상태일 때와는 시각적으로 다르면서도 파일이 '저장'된 것으로 표시되고 네트워크 연결 시 동기화되도록 피드백 디자인을 변경할 수 있습니다. 이렇게 하면 사용자에게 사용 가능한 다양한 상태를 알려주고 작업이나 작업이 저장되었음을 확인할 수 있습니다. 이렇게 하면 사용자가 애플리케이션을 더 확신을 가지고 사용할 수 있다는 추가적인 이점이 있습니다.
10억 명의 신규 사용자를 위한 디자인
많은 지역에서 저사양 기기가 일반적이고 연결이 불안정하며 많은 사용자의 경우 데이터 비용을 감당할 수 없습니다. 데이터를 투명하고 간결하게 사용하여 사용자 신뢰를 얻어야 합니다. 연결 상태가 좋지 않은 사용자를 돕고 인터페이스를 단순화하여 작업 속도를 높일 수 있는 방법을 생각해 봅니다. 데이터를 많이 사용하는 콘텐츠를 다운로드하기 전에 항상 사용자에게 물어보세요.
연결이 지연되는 사용자를 위해 낮은 대역폭 옵션을 제공합니다. 따라서 네트워크 연결이 느리면 소규모 자산을 제공하세요. 고품질 또는 저품질 확장 소재를 선택할 수 있는 옵션을 제공하세요.
결론
오프라인 UX에서는 이러한 개념에 익숙하지 않은 사용자이므로 교육이 중요합니다. 익숙한 것을 연결해 보세요.예를 들어 나중에 사용하기 위해 다운로드하는 것은 데이터를 오프라인 처리하는 것과 같습니다.
불안정한 네트워크 연결용으로 설계할 때는 다음 가이드라인을 기억하세요.
- 네트워크 연결의 성공, 실패, 불안정에 대해 설계합니다.
- 데이터는 비용이 많이 들 수 있으므로 사용자를 배려하세요.
- 전 세계 대부분의 사용자에게 기술 환경은 대부분 모바일로만 이루어져 있습니다.
- 제한된 저장용량, 메모리, 처리 성능, 작은 디스플레이, 낮은 터치스크린 품질을 갖춘 저사양 기기가 널리 사용되고 있습니다. 성능이 디자인 프로세스의 일부인지 확인합니다.
- 사용자가 오프라인일 때 애플리케이션을 탐색할 수 있도록 허용합니다.
- 사용자에게 현재 상태 및 상태 변경사항을 알립니다.
- 앱에 많은 데이터가 필요하지 않다면 기본적으로 오프라인 제공을 시도합니다.
- 앱에 데이터가 많은 경우 오프라인용으로 다운로드하는 방법을 사용자에게 안내합니다.
- 기기 간에 이전 가능한 환경을 만듭니다.
- 언어, 아이콘, 이미지, 서체, 색상을 함께 사용하여 사용자에게 아이디어를 표현합니다.
- 사용자에게 도움이 되도록 안심시키고 피드백을 제공합니다.