좋은 UX와 안좋은 UX 사례

23.01.31 22:06 작성 23.01.31 22:08 수정 조회수 10.7k

2

안녕하세요! 제가 자주 사용하는 컬리와, 오늘의집 두가지 앱으로 과제 제출합니다. 이전 검색 결과에 따라 상품추천 해주던 것이 생각나 선택하게되었어요. 식품, 인테리어 각 다른 분야의 서비스지만, 두 앱 모두 맞춤형 콘텐츠를 추천하는 개인화 서비스를 제공하고 있었는데요. 이외에도 두 앱을 비교하며 여러 공통점으로 찾아 볼 수 있었습니다. 배웠던 UX입문 원리들에 따라 분류해보았습니다.


1.낮은의도와 높은 의도를 가진 사용자를 고려한 콘텐츠 구성
공통적으로 검색데이터를 활용한 추천상품(이 상품 어때요?/최근관심있게본#00)과 사용자의도를 고려한 메뉴구성이 눈에 띄었는데요. 추천상품(컬리추천/취향의발견), 혜택상품(알뜰쇼핑, 특가혜택/오늘의 딜)이 공통적인 특징이라 생각했습니다.

또 하나 공통적으로 컬리는 ‘컬리로그’의 요리•뷰티와 관련한 일상사진으로 오늘의 집은 ‘커뮤니티’의 집들이 소개 콘텐츠로 상품을 간접노출 하고 있습니다. 다만 오늘의 집 경우 이벤트 영역 아래 사용자가 자주 찾을 법한 메뉴를 아이콘으로 구성해 보여주어 한눈에 필요한 메뉴를 찾을 수 있다고 생각했습니다.

컬리오늘의집.png

 

다음은 안좋은 UX사례로

1.모바일앱과 PC웹의 다른 메뉴명 - 오늘의 집
어떤 이유가 있는 걸까요? 오늘의 집의 경우 PC웹에서 확인해보니 하위 콘텐츠는 동일한데 메뉴명이 다른 것을 발견했습니다. PC웹에서는 ‘커뮤니티’, ‘스토어’, ‘이사/시공/수리’로 최상위 메뉴구조를 앱의 경우는 커뮤니티를 ‘둘러보기’, 스토어를 ‘쇼핑’으로 보여주고 있었습니다. (사례를 찾을 당시는 스토어 였는데 글을 올리는 시점엔 쇼핑으로 변경되었네요 ?)

앱 최상단에 검색바의 경우도 앱은 오늘의 집 통합검색, 쇼핑검색이고 PC는 통합검색과 스토어검색입니다. 이부분이 수업에서 배운 일관성의 원리에 어긋나는 것은 아닌지 해서 UX의 안좋은 사례로 선정하였습니다.

오늘의집pc.png

 

2.컬리의 마켓 or 뷰티 탭 전환 시 어딘가 불편한 UX
마켓컬리와 뷰티컬리의 탭전환은 네비게이션 바 가운데 토글 스위치 형태의 UI로 이루어집니다. 여기서 마켓과 뷰티의 전환 시 하단탭바의 가운데 아이콘 ‘메뉴’를 누르면 하위 메뉴들도 바뀌어있는 것을 알 수 있습니다. 두번째 메뉴인 컬리로그도 탭 전환에 따라 전체 페이지 내 요리와 뷰티 중 해당하는 콘텐츠가 상위에 노출 되는 것 같습니다. (여러번 마켓과 뷰티를 전환해봄)

최상위 메인기능 전환이 이루어지는 하단탭바에 컬리의 탭 (마켓or뷰티)을 붙이다보니 UX적으로 아쉽다고 생각했습니다. 여기서 탭바의 메뉴구조를 조금 손보면 사용자의 혼선을 줄일 순 있지않을까.. 생각해보기도 했습니다. (홈을 가운데 정렬하고 좌우로 기타 메뉴를 배치한 후 컬리탭을 홈으로 전환한다면..) 현재 앱에서 상단과 우측 하단 두 곳에 전환 탭을 중복 제공하고 있는데 어쩌면 엄지영역을 고려해 한 화면에 두곳이나 중복으로 배치한 것이 아닌지 추측해보았습니다.


컬리.png

읽어주셔서 감사합니다.

답변 1

답변을 작성해보세요.

1

nsu님 안녕하세요. 자세히 사례들 분석해주신 글 공유해주셔서 감사합니다.

전반적으로 원리에 입각해서 너무 잘 분석해주셨고 그래서 이해가 잘 되었어요.

몇가지 첨언드려요.

  1. 메뉴의 문구가 PC와 모바일이 다른 부분은 말씀하신대로 일관성의 측면에서 아쉬움이 남는 부분인 것 같아요. 물론 아예 기능적인 차이가 있어 의도적으로 문구를 다르게 하는 경우도 있겠지만, 이 경우는 비슷한 기능들인데 조금 일관성의 측면에서 관리가 되지 않았다는 생각을 저도 받았습니다.

  2. 컬리앱에서 탭 전환에 따라 다른 메뉴들에서 제공되는 컨텐츠들도 그에 맞추어 변경이 된다고 하셨는데요. 저는 이 부분이 메뉴의 위계를 쉽게 이해할 수 있게 개선할 여지가 있는 부분이라고 느꼈어요. nsu님이 여러번 토글을 해보고 확인을 해보면서 알게 되었다고 하셨는데, '여러번' 확인을 했다는 것은 그만큼 한번에 빠르게 인지하도록 설계가 되지 못했다라는게 될 수 있는 것 같습니다. 예를 들어서 뷰티 컬리로 토글한 후, 컬리 로그에 들어가면 상단 바에 타이틀이 "컬리 로그"라고만 적혀있습니다. 이 경우 문구를 "뷰티 컬리 로그"와 같이 해당 로그가 뷰티 컬리에 대한 것이다라는 것을 인지시켜주면 어땠을까 하는 생각이 들었습니다. 또는 메뉴에 대한 시각적인 배치 자체를 변경해서 애초에 혼돈이 갈 일이 없게끔 할 수도 있지 않았을까 생각해봅니다. 다만, 한편으로는 컬리 측에서도 많은 고민 끝에 현재 상황에 있을 수 있는데요. 회사에서 일을 하다보면 단순히 사용자의 편의성 뿐 아니라 비즈니스적인 면이라든지, 수익적인 측면, 기술/개발적인 측면을 모두 고려하다보면 사용자의 입장에서는 조금 이해가 안되는 결과가 나올 때도 있습니다.

  3. nsu님께서 "상단과 우측 하단 두 곳에 전환 탭을 중복 제공하고 있는데" 라고 말씀을 해주셨는데, 캡쳐하신 이미지에서 어떤 것을 말씀하신 것인지 잘 이해가 되지 않았어요. 그래서 컬리 앱을 확인해보니 아래와 같이 되어 있더라구요. 상단에 마켓컬리 <-> 뷰티 컬리 토글 방식의 탭과 하단의 뷰티컬리> 중복 제공되는 것을 말씀하신게 맞는지요? 그게 맞다면 저도 왜 중복으로 제공을 했을까 의아해진 부분이 있었어요. 말씀하신대로 엄지 터치 영역때문에 그럴 수도 있을 것 같은데 화면의 복잡도가 올라가기 때문에 다른 이유도 생각해봤는데 회사의 비즈니스 측면에서 뷰티 컬리에 대한 접근성을 최대한 높이려고 그런가 아닐까 추측을 해봤습니다. 화면의 간결성을 희생해서라도 사용자들이 더 많이 사용하도록 하고자 했던게 있었을것 같아요. 물론 사용자의 입장에서는 납득이 어려운 부분이 있네요.

  4. image

    다시 한번 분석글 감사드리고 좋은 하루 되세요!

     

     

nsu님의 프로필

nsu

질문자

2023.02.06

답변 감사합니다. 말씀주신 것처럼 비즈니스적인 면이나 기술/개발 측면을 고려하다보면 단순히 사용자의 편의성에 따라 디자인을 하는 것이 어려울 수 있을 것 같아요.
앞 강의에서 말씀주신 것처럼 사용자의 지속적인 피드백을 받고 개선하는 것. 이것이 중요하다 생각이 들었습니다. 앞으로 개선될 컬리를 지켜보아야겠습니다.
답글 3번에 문의주신 '상단에 마켓 <-> 뷰티 컬리 토글 방식의 탭과 하단의 뷰티컬리> 중복 제공되는 것을 말씀하신게 맞는지요?' 네 맞습니다 :)
이 부분도 위에 내용처럼 아쉬운 부분중 하나이나, 사용자들이 더 많이 사용할 수 있도록 디자인한 UI이겠지요? 이부분도 앞으로 어떻게 개선될지 궁금하네요. 항상 친절한 답변 감사합니다. 좋은하루되세요!