좋은 UI, 안 좋은 UI 사례

Question

안녕하세요. 도서 사이트 예스24와 리디북스의 UI를 비교해봤습니다. BAD : YES24 먼저 안 좋은 UI의 예로 예스24 사이트를 들 수 있는데요. 상세 페이지 하나에 너무 많은 정보가 나타나는 걸 볼 수 있습니다. 같은 정보가 중복되는 건 물론 4개가 넘는 광고 배너와 이벤트 창, 네비게이션 바의 웹진, 추천도서 등 불필요한 요소가 시각적인 피로를 줍니다. 또 구매 정보와 구매 시 참고사항 (책 정보) 이 함께 있고 각각의 간격도 너무 멀어 산만한 느낌을 줍니다. 가장 혼란스러운 점은 네 개의 CTA 버튼입니다. 색상만 다른 네 개의 버튼이 함께 있어서 어떤 버튼이 메인인지 알기 힘들고 '바로 구매' 와 '원클릭 구매'는 버튼명도 비슷해서 두 개의 기능에 어떤 차이가 있는지 가늠하기 어렵습니다.  GOOD : RIDIBOOKS 예스24와 비교했을 때 비교적 정돈된 환경을 보여줍니다. 구매 정보와 책 정보를 뚜렷이 구분해서 묶어놓은 부분이 눈에 띄고 키 컬러를 사용한 메인 버튼이 한 눈에 들어와 사용자가 다음 행동을 이어가는 데 혼란을 주지 않습니다. 과도한 정보없이 인기 책 정도를 네비게이션으로 보여주는 점이 예스24와 다르고, 또 '좋아요' 버튼을 눌렀을 때 바로 피드백이 나타나는 점도 예스24 ('좋아요' 버튼 클릭시 블로그 생성으로 넘어감), 네이버 책 ('좋아요' 버튼의 기능은 하트 색깔 바꾸기 정도, 위시리스트 기능은 사라지고 버튼만 남음) 등의 서비스와 차이를 보이는 부분입니다.

에릭 · Answer

안녕하세요, kspark님, 인사이트 넘치는 분석내용 공유해주셔서 감사합니다. 네, yes24는 강약에 따른 시각적인 고려가 약하다는 느낌이 많이 드네요. 말씀하신대로 많은 정보들이 강약 조절 없이 모두 강조되어 제공이 된다면 사용자의 입장에서는 피로감을 느끼게 되는 것 같습니다. 분석글 올려주신 것을 보고 저도 yes24 제품 상세페이지를 한번 확인해봤는데 광고가 좌측과 우측에 빼곡히 보여지고 있어서 제일 중요한 해당 책에 대한 정보를 집중하는데 어려움을 느꼈어요. 아마 만드는 입장에서는 광고 수익이라든지, 여러가지 고려사항이 있었겠지만, 사용자 입장에서는 가장 중요한 게 무엇인지 화면 내에서 빠르게 캐치하는게 어려운 것 같아요. 관련해서 제 개인적인 경험을 공유드려요. 일을 하다보면 UX디자이너가 혼자 일을 하는게 아니고 유관 부서와 함께 의사결정을 해야 될 일이 많을 수 있는데, 이런 저런 요청들을 모두 수용하다보면 어느새 욕심이 과해진 앱, 웹사이트가 되기 쉬운 것 같아요. 그래서 UX디자이너 입장에서는 사용자들이 겪을 불편함을 대변해서 더 편하게 사용하도록 하는 것이 중요한 것 같습니다. 이런 사용자가 겪는 불편함은 결국 사업에도 악영향을 미칠 수 있습니다. 사용자는 어떤 웹 페이지를 방문했을 때 3초 이상 머물지 않는다고 해요. 즉, 3초 안에 자신이 원하는 정보를 쉽게 찾지 못할 경우 이 웹사이트를 떠나 다른 경쟁 웹사이트로 갈 수 있다는 것이지요. 관련해서는 "랜딩 페이지를 디자인할 때에 내가 고려하는 것들" 이라는 글에 정리해놓은 것이 있으니 참고 바랍니다. 다시 한번 좋은 분석내용 감사합니다.