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