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