각 서비스가 실패를 다루는 방식
삼쩜삼 디자이너들이 찾은 각 서비스 사례
스터디 다섯 번째 주제는 ‘실패’입니다. 서비스를 사용하다 보면 네트워크 오류 등 다양한 실패를 경험하게 되는데요. 이때 유저의 실망감을 줄이기 위해서는 유저가 본래 의도했던 것과 최대한 비슷한 결과를 보여주는 등의 노력이 필요합니다. 이번에는 삼쩜삼을 포함하여 각 서비스가 어떻게 실패 경험을 다루고 있는지 조사해봤습니다.
삼쩜삼 (발표: HE)
HE: 삼쩜삼 사업자 탭의 ‘사업용 카드 등록하기’에 들어가봤어요. 본인인증을 거친 뒤에 ‘카드 등록 가능한 사업장이 없어요’라는 empty 화면을 맞닥뜨렸어요. 물론 저는 사업자가 아니기 때문에 이 플로우가 잘못된 것은 아니지만, 애당초 대상자가 아닌 유저에게 관련 항목을 보여주는 것이 맞나, 하는 생각이 들었어요. 아니면 진입 전이나 인증 전에 해당 사실을 미리 알려주면 어떨까요?
HE: ‘내 포인트’도 empty 상태가 있는데, 단순히 ‘내역 없음’을 알리는 텍스트만 두는 것이 아니라, ‘포인트 받으러 가기’라는 버튼을 함께 둬서 next step을 제안하고 있어요. 예전에 제가 서비스별 empty 화면을 모아놓은 아티클을 본 적이 있는데, 이런 식으로 버튼을 두어 다음으로 유도하는 방법이 유저와 서비스 모두에게 좋아 보였던 기억이 나요.
HE: 네트워크 오류의 경우 화면별로 대응하는 방식이 달랐어요. ‘다시 시도하기’라는 버튼과 함께 오류 상황을 알리는 경우, 별도의 안내 없이 요소가 로딩되지 않는 경우, 토스트나 모달로 오류 상황을 알리는 경우, 화면이 아예 하얗게 보이는 경우…. 각 화면은 통일성 있게 수정되어야 할 것 같아요. 또, 모달의 ‘관리자에게 문의해 주세요'라는 문구도 아쉬웠어요. 유저 입장에서 '관리자가 누구인지도 모르는데 어떻게 문의하지?'라는 생각이 들 것 같더라고요. 그래서 ‘닫기’보다는 ‘문의하기’ 버튼이면 더 좋겠다고 생각했어요.
토스 (발표: WA)
WA: 토스의 내 보험 서비스에 들어가봤어요. 스크래핑 중에 '기관 오류로 보험 목록을 가져오지 못했어요'라는 모달이 떴어요. 그런데 실은 제가 가지고 있는 보험이 없어서 가져올 목록도 없는 거거든요. 제 상황에 맞지 않은 메시지가 나오니까 신뢰도가 조금 떨어졌어요.
WA: 다음은 네트워크 오류인데요, 좌측 화면에서 ‘다시 불러오기’ 버튼을 클릭해도 아무 반응이 없더라고요. 아마 로딩이 빠르게 돼서 그런 것 같은데, 1초라도 로딩 인디케이터를 보여주면 어떨까요?
WA: 우측은 이미지와 아이콘이 불러와지지 않은 모습이에요. 인터넷 연결이 안되는 상황에, 연결이 되어야만 보이는 아이콘을 사용한다는 점이 의아하게 느껴졌어요.
HS: 디자인 시스템에 정의가 되어 있어서 그런가…. 이럴 때는 아예 아이콘을 넣지 않아도 될 것 같네요.
WA: 마지막은 저희 서비스에도 적용하면 좋을 것 같다는 생각이 들어서 가져와봤어요. 삼쩜삼에서는 서비스 대상자가 아니라는 사실을 플로우 마지막 단계에 가서야 알게 되잖아요. 그런데 토스는 진입 전에 토스트로 ‘외국인은 쓸 수 없는 서비스예요.’라고 알려주니까 편리했어요.
NS: 유저가 서비스 대상자가 아니라는 사실을 이미 인지하고 있다면 해당 메뉴를 아예 안보여주는 게 더 좋지 않을까요?
WA: 어쩌면 외국인 유저가 적어서 굳이 대응할 필요를 못 느낀 것일 수도 있죠. 그런데 토스뱅크 자체도 제가 쓸 수 없는 서비스였다가 몇 년 전쯤 가능하게 바뀌었더라고요. 그래서 미리 서비스에 대해 어느정도 인지를 시켜주는 점은 좋다고 생각해요.
NS: WA 덕분에 보기 힘든 화면을 봤네요.
HE: 혹시 삼쩜삼은 외국인이 사용 가능한가요?
WA: 대부분은 가능하고, 불가능한 것도 간혹 있어요. 불가능한 것 중 하나가 간편인증인데요, 인증 시 이름을 자동 조회해서 수정 불가능한 상태로 input에 집어넣는데, 저는 이상하게 성과 이름이 합쳐져서 들어가더라고요. 이 부분은 담당자분께 제보하긴 했어요.
지그재그(발표:GJ)
GJ: 저는 검색 위주로 살펴봤어요. 지그재그에 없을 법한 단어를 찾아 '빱'을 검색해봤는데, 유사한 단어 기준으로 스토어를 추천해주더라고요.
GJ: 검색어에 해당하는 스토어를 요청할 수도 있어요. 요청 이후에는 ‘지그재그에 전달되었어요’라는 버튼으로 바뀌어요. 지그재그의 주요 지표 중 하나가 입점 스토어 수가 아닐까 싶은데, 이렇게 유저가 아직 입점 안된 스토어를 요청할 수 있게 하면 서로에게 도움이 될 듯해요.
GJ: 지그재그 커뮤니티인 ‘톡라운지’에도 검색이 있어요. 만약 검색 결과가 없으면 상단 ‘구독’ 버튼을 통해 검색어를 포함하는 글이 올라왔을 때 알림을 받을 수 있어요. 하나 아쉬운 점은 검색어 입력 화면과 검색 완료 화면의 회색 손전등 이미지가 똑같아서 지금 어떤 화면에 있는지 헷갈린다는 점이었어요. 이미지 자체도 회색톤이라 비활성화된 느낌이 들기도 하고요.
HE: 검색은 다른 서비스와 기능면에서 꽤 비슷한 점이 많네요. 검색어와 유사한 스토어를 추천해주는 건 네이버랑 비슷하고, 검색어에 해당하는 결과가 없을 때 키워드 알림을 주는 건 당근이랑 비슷하고요.
당근 (발표: NS)
NS: 당근은 '홈' 탭에서 네트워크 오류 시 ‘인터넷 연결이 불안정해요’라는 텍스트와 함께 같은 내용의 토스트를 보여주고 있어요. 토스트 노출 시 ‘글쓰기’ 버튼이 위로 올라간다는 점이 인상 깊었고요.
NS: ‘동네생활’ 탭은 미리 요소를 로딩해놓기 때문인지 오류 화면이 노출되지는 않았어요. 그런데 게시물을 클릭하면 ‘웹페이지를 사용할 수 없음’이라는 이상한 페이지가 나와요. 이 탭이 특히 오류 상황에 대한 피드백이 부족하다는 생각이 들었어요.
NS: ‘내 근처’ 탭은 새로고침 시에 ‘스토리’, ‘인기쿠폰’ 등의 섹션이 랜덤하게 나타났다가 사라져요. 제 생각에 이 부분은 버그인 것 같아요. 또, 카테고리에서 ‘더보기’ 버튼을 누르면 미리 로딩하지 않은 다른 아이콘이 엑박으로 떠요. 이런 아이콘은 앱 내에 저장해놨다가 보여주는 편이 좋지 않을까 하는 생각이 들었어요.
여기어때 (발표: HS)
HS: 여기어때는 네트워크 오류 상황에서 게시물 클릭 시 empty 페이지를 보여주는 게 아니라, 모달을 띄운 뒤에 이전 화면으로 돌려보내고 있어요. 삼쩜삼은 대부분 empty 페이지로 구성되어 있는데, 여기어때처럼 구성하는 것도 깔끔하고 괜찮은 방식인 것 같아요.
HS: 이미지 로딩이 되기 전에는 placeholder로 여기어때 로고가 노출돼요. 이미지 사이즈 대응이 되어 있지 않아서 로고의 좌우가 잘린 채로 보여지는 영역이 있는 점은 아쉬웠어요. 아까 동영상에서 보여드린 것과 같이, 호텔 이미지는 로고가 아니라 느낌표 아이콘을 placeholder로 쓰고 있어서 통일성이 떨어진다는 점도 아쉽고요.
HS: 통일성이 떨어지는 건 empty 화면도 마찬가지였어요. 서체와 사이즈, 컬러, 배경 유무, 어투 등 많은 요소가 달라서 통일해주면 좋겠다고 생각했어요. 물론 실제 유저가 이렇게 오류 화면을 모아놓고 보진 않겠지만요.
뱅크샐러드 (발표: JH)
JH: 뱅크샐러드는 자산 연결이 끊어진 경우 ‘홈'과 ‘알림’ 화면에서 재연결할 수 있는 진입점을 노출해요. 진입하면 ‘연결 관리’라는 화면으로 이동하는데요. 아래 금융사 목록 중 원하는 것이 없으면 상단 ‘추가' 버튼으로 추가할 수 있고, 이후 아래의 ‘연결하기’ 버튼을 통해 재연결할 수 있어요. 그런데 연결하기 버튼이 너무 작고 눈에 잘 띄지 않아서 '차라리 CTA였다면 어땠을까?’하는 생각이 들었어요.
GJ: ‘알림’ 화면도 그래요. 자산 재연결 알림이 다른 알림보다 더 중요할 텐데, 알림 아이콘 색상이 다른 것과 똑같아서 뭐가 더 중요한 알림인지 알 수가 없어서 아쉬워요.
HE: 그러고 보니 '홈'의 자산 재연결 영역도 더 강조가 필요해 보이네요. 타 서비스의 경우는 홈 최상단에 큰 card UI와 애니메이션을 넣어서 시선이 확 꽂히게 하는데, 그런 방식도 좋을 것 같아요.
JH: 전체적으로 유저가 해야 할 행동에 대한 메시지가 화면상에서 명확하게 전달되지 않고 있는 것 같네요.
HS: ‘홈’ 화면에서 ‘연결이 끊어졌어요'라는 워딩보다는 연결함으로써 유저가 얻을 수 있는 베네핏을 알려줬으면 하는 생각도 드네요.
JH: 의아한 점은, ‘홈'과 ‘알림’이 아닌 '자산’ 탭에서 연결 관리 화면으로 이동할 경우 플로우가 달라진다는 거예요. 굳이 플로우를 나눌 필요가 있나 싶었어요.
JH: ‘자산’ 탭의 경우 미연결된 자산을 ‘?원’으로 보여주고 있는데요, ‘?원’을 넣지 않고 연결이 필요하다는 내용과 버튼만 두면 어떨까 싶어요.
HS: 아니면 특정 금액을 블러 처리해서 좀 더 연결할 마음이 생기도록 하는 것도 좋겠네요.
NS: 단순하게 물음표만 있으니까 굳이 연결할 마음이 안 생기기는 해요.
JH: ‘자산' 탭에 너무 많은 색상이 사용되고 있는 점은 아쉬워요. ‘자산’이나 ‘가계부’처럼 주요 피쳐들은 각각 다른 색상을 사용하는 것으로 기억하는데, 그래서인지 이렇게 한 화면에 합쳐졌을 때 형형색색이 되어서요.
GJ: 저는 피쳐마다 다른 색상을 사용하는지 몰랐어요. 그래서 처음 이 화면을 봤을 때 ‘왜 다 다른 색상을 썼지?’하는 의문이 들었어요.
삼쩜삼에서는 스터디를 비롯해 업무적으로 발전할 수 있는 다양한 서포팅 프로그램을 운영하고 있습니다.
더나은 '나'를 향한 발걸음, 삼쩜삼과 함께 해요!
☞ 삼쩜삼 채용 (모든 공고를 한 눈에 볼 수 있어요!)
