-
카테고리
-
세부 분야
UX/UI
-
해결 여부
해결됨
좋은 UX와 안좋은 UX 사례
23.01.31 22:06 작성 23.01.31 22:08 수정 조회수 10.7k
2
안녕하세요! 제가 자주 사용하는 컬리와, 오늘의집 두가지 앱으로 과제 제출합니다. 이전 검색 결과에 따라 상품추천 해주던 것이 생각나 선택하게되었어요. 식품, 인테리어 각 다른 분야의 서비스지만, 두 앱 모두 맞춤형 콘텐츠를 추천하는 개인화 서비스를 제공하고 있었는데요. 이외에도 두 앱을 비교하며 여러 공통점으로 찾아 볼 수 있었습니다. 배웠던 UX입문 원리들에 따라 분류해보았습니다.
1.낮은의도와 높은 의도를 가진 사용자를 고려한 콘텐츠 구성
공통적으로 검색데이터를 활용한 추천상품(이 상품 어때요?/최근관심있게본#00)과 사용자의도를 고려한 메뉴구성이 눈에 띄었는데요. 추천상품(컬리추천/취향의발견), 혜택상품(알뜰쇼핑, 특가혜택/오늘의 딜)이 공통적인 특징이라 생각했습니다.
또 하나 공통적으로 컬리는 ‘컬리로그’의 요리•뷰티와 관련한 일상사진으로 오늘의 집은 ‘커뮤니티’의 집들이 소개 콘텐츠로 상품을 간접노출 하고 있습니다. 다만 오늘의 집 경우 이벤트 영역 아래 사용자가 자주 찾을 법한 메뉴를 아이콘으로 구성해 보여주어 한눈에 필요한 메뉴를 찾을 수 있다고 생각했습니다.
다음은 안좋은 UX사례로
1.모바일앱과 PC웹의 다른 메뉴명 - 오늘의 집
어떤 이유가 있는 걸까요? 오늘의 집의 경우 PC웹에서 확인해보니 하위 콘텐츠는 동일한데 메뉴명이 다른 것을 발견했습니다. PC웹에서는 ‘커뮤니티’, ‘스토어’, ‘이사/시공/수리’로 최상위 메뉴구조를 앱의 경우는 커뮤니티를 ‘둘러보기’, 스토어를 ‘쇼핑’으로 보여주고 있었습니다. (사례를 찾을 당시는 스토어 였는데 글을 올리는 시점엔 쇼핑으로 변경되었네요 ?)
앱 최상단에 검색바의 경우도 앱은 오늘의 집 통합검색, 쇼핑검색이고 PC는 통합검색과 스토어검색입니다. 이부분이 수업에서 배운 일관성의 원리에 어긋나는 것은 아닌지 해서 UX의 안좋은 사례로 선정하였습니다.
2.컬리의 마켓 or 뷰티 탭 전환 시 어딘가 불편한 UX
마켓컬리와 뷰티컬리의 탭전환은 네비게이션 바 가운데 토글 스위치 형태의 UI로 이루어집니다. 여기서 마켓과 뷰티의 전환 시 하단탭바의 가운데 아이콘 ‘메뉴’를 누르면 하위 메뉴들도 바뀌어있는 것을 알 수 있습니다. 두번째 메뉴인 컬리로그도 탭 전환에 따라 전체 페이지 내 요리와 뷰티 중 해당하는 콘텐츠가 상위에 노출 되는 것 같습니다. (여러번 마켓과 뷰티를 전환해봄)
최상위 메인기능 전환이 이루어지는 하단탭바에 컬리의 탭 (마켓or뷰티)을 붙이다보니 UX적으로 아쉽다고 생각했습니다. 여기서 탭바의 메뉴구조를 조금 손보면 사용자의 혼선을 줄일 순 있지않을까.. 생각해보기도 했습니다. (홈을 가운데 정렬하고 좌우로 기타 메뉴를 배치한 후 컬리탭을 홈으로 전환한다면..) 현재 앱에서 상단과 우측 하단 두 곳에 전환 탭을 중복 제공하고 있는데 어쩌면 엄지영역을 고려해 한 화면에 두곳이나 중복으로 배치한 것이 아닌지 추측해보았습니다.
읽어주셔서 감사합니다.
답변을 작성해보세요.
1
에릭
지식공유자2023.02.04
nsu님 안녕하세요. 자세히 사례들 분석해주신 글 공유해주셔서 감사합니다.
전반적으로 원리에 입각해서 너무 잘 분석해주셨고 그래서 이해가 잘 되었어요.
몇가지 첨언드려요.
메뉴의 문구가 PC와 모바일이 다른 부분은 말씀하신대로 일관성의 측면에서 아쉬움이 남는 부분인 것 같아요. 물론 아예 기능적인 차이가 있어 의도적으로 문구를 다르게 하는 경우도 있겠지만, 이 경우는 비슷한 기능들인데 조금 일관성의 측면에서 관리가 되지 않았다는 생각을 저도 받았습니다.
컬리앱에서 탭 전환에 따라 다른 메뉴들에서 제공되는 컨텐츠들도 그에 맞추어 변경이 된다고 하셨는데요. 저는 이 부분이 메뉴의 위계를 쉽게 이해할 수 있게 개선할 여지가 있는 부분이라고 느꼈어요. nsu님이 여러번 토글을 해보고 확인을 해보면서 알게 되었다고 하셨는데, '여러번' 확인을 했다는 것은 그만큼 한번에 빠르게 인지하도록 설계가 되지 못했다라는게 될 수 있는 것 같습니다. 예를 들어서 뷰티 컬리로 토글한 후, 컬리 로그에 들어가면 상단 바에 타이틀이 "컬리 로그"라고만 적혀있습니다. 이 경우 문구를 "뷰티 컬리 로그"와 같이 해당 로그가 뷰티 컬리에 대한 것이다라는 것을 인지시켜주면 어땠을까 하는 생각이 들었습니다. 또는 메뉴에 대한 시각적인 배치 자체를 변경해서 애초에 혼돈이 갈 일이 없게끔 할 수도 있지 않았을까 생각해봅니다. 다만, 한편으로는 컬리 측에서도 많은 고민 끝에 현재 상황에 있을 수 있는데요. 회사에서 일을 하다보면 단순히 사용자의 편의성 뿐 아니라 비즈니스적인 면이라든지, 수익적인 측면, 기술/개발적인 측면을 모두 고려하다보면 사용자의 입장에서는 조금 이해가 안되는 결과가 나올 때도 있습니다.
nsu님께서 "상단과 우측 하단 두 곳에 전환 탭을 중복 제공하고 있는데" 라고 말씀을 해주셨는데, 캡쳐하신 이미지에서 어떤 것을 말씀하신 것인지 잘 이해가 되지 않았어요. 그래서 컬리 앱을 확인해보니 아래와 같이 되어 있더라구요. 상단에 마켓컬리 <-> 뷰티 컬리 토글 방식의 탭과 하단의 뷰티컬리> 중복 제공되는 것을 말씀하신게 맞는지요? 그게 맞다면 저도 왜 중복으로 제공을 했을까 의아해진 부분이 있었어요. 말씀하신대로 엄지 터치 영역때문에 그럴 수도 있을 것 같은데 화면의 복잡도가 올라가기 때문에 다른 이유도 생각해봤는데 회사의 비즈니스 측면에서 뷰티 컬리에 대한 접근성을 최대한 높이려고 그런가 아닐까 추측을 해봤습니다. 화면의 간결성을 희생해서라도 사용자들이 더 많이 사용하도록 하고자 했던게 있었을것 같아요. 물론 사용자의 입장에서는 납득이 어려운 부분이 있네요.
다시 한번 분석글 감사드리고 좋은 하루 되세요!
nsu
질문자2023.02.06
답변 감사합니다. 말씀주신 것처럼 비즈니스적인 면이나 기술/개발 측면을 고려하다보면 단순히 사용자의 편의성에 따라 디자인을 하는 것이 어려울 수 있을 것 같아요.
앞 강의에서 말씀주신 것처럼 사용자의 지속적인 피드백을 받고 개선하는 것. 이것이 중요하다 생각이 들었습니다. 앞으로 개선될 컬리를 지켜보아야겠습니다.
답글 3번에 문의주신 '상단에 마켓 <-> 뷰티 컬리 토글 방식의 탭과 하단의 뷰티컬리> 중복 제공되는 것을 말씀하신게 맞는지요?' 네 맞습니다 :)
이 부분도 위에 내용처럼 아쉬운 부분중 하나이나, 사용자들이 더 많이 사용할 수 있도록 디자인한 UI이겠지요? 이부분도 앞으로 어떻게 개선될지 궁금하네요. 항상 친절한 답변 감사합니다. 좋은하루되세요!
답변 1