인프런 커뮤니티 질문&답변
작성한 질문수
UI 디자인 원리-좋은 사례, 아닌 사례
작성
·
14
0
UI 원리가 적용된 좋은 사례- 유아이볼
유사성 원리, 근접성 원리
유아이볼은 국내 ux,ui 패턴을 모아놓은 서비스이다. MAU/ UI 패턴/ 실시간 인기 프로덕트/ 서비스 화면을 그룹핑 한 것을 한눈에 볼 수 있으며 서비스 화면의 경우에는 컴포넌트별로 분류하여 사용자가 많은 정보를 빠르게 인지할 수 있도록 했음을 확인할 수 있다. (컨트롤/아코디언/상태/오버레이/뷰)휴리스틱 평가: 상태 안내
카테고리 유형 ”금융”과 UI 패턴 “계좌”를 선택했을때 필터의 진행상태를 바로 확인할 수 있어서 상태 안내가 명확하다고 느껴졌다.CTA
유아이볼을 탐색하다보면, 무료 플랜은 탐색 횟수가 제한됨을 확인할 수 있다. 멤버십 구독 CTA가 백그라운드 컬러와 대비되며, 타원형으로 강조되어있어서 사용자가 유료 플랜을 확인하도록 유도한다.디자인 시스템
상단탭을 이동했을 때 모바일-웹사이트, 아티클-포폴전자책-워크샵의 콘텐츠가 일관된 레이아웃으로 구성되어있음을 확인할 수 있다.
ㄱ. 서비스 이미지/브랜드 로고/서비스 명/ 산업군
ㄴ. 콘텐츠 이미지/콘텐츠명/가격 또는 부가정보
UI 원리가 적용되지 않은 사례- 유아이볼
1. 유사성 원리
마이리얼트립은 항공권과 숙소, 투어, 액티비티를 모두 갖고 있는 여행 플랫폼이다. 유사성의 원리에 따르면 홈화면의 서비스 카테고리가 연관된 것끼리 묶여있지 않아서 정보의 기준을 잡기 어렵고 복잡하게 느껴진다. 전체 카테고리를 눌렀을때 분류되는 정보(항공/숙소/투어/교통/여행편의/할인,특가)로 상단탭을 구성하고 하위 메뉴로 서비스 카테고리를 분류한다면 정보를 쉽게 찾을 수 있을 것이다.CTA의 중요성
더보기 CTA와 툴팁의 컬러와 위치가 겹쳐 사용자의 다음 행동을 유도하지 못한다고 느꼈다. 또한 더보기 CTA를 눌렀을때 할인% 탭으로 진입한다고 예상했지만, 홈하단 콘텐츠로 스크롤 되어 버튼의 역할을 예상하기 어려웠기 때문에 안좋은 사례로 판단했다.
답변 1
0
안녕하세요, 인프런 AI 인턴입니다, 어진님.
UI 디자인 원리가 적용된 좋은 사례 및 그렇지 않은 사례에 대한 분석을 잘 해주셨습니다. UI 원리를 설명하는 예시로 든 사례들을 통해 다양한 디자인 요소를 명확하게 이해할 수 있었을 것이라 생각됩니다.
유아이볼의 경우, 유사성 원리와 근접성 원리를 잘 활용하여 사용자들이 정보를 빠르게 인식하고, 휴리스틱 평가 및 상태 안내를 통해 직관적인 정보를 제공합니다. CTA의 경우도 명확하게 사용자를 유료 플랜으로 유도하는 점에서 좋은 디자인 사례로 볼 수 있습니다.
반면에, 유사성 원리가 잘 적용되지 않은 사례로 마이리얼트립을 들으셨는데, 홈 화면에서 카테고리의 그룹화가 부족하여 정보가 복잡하게 느껴진다는 점을 지적하셨습니다. 이는 사용자가 원하는 정보를 찾는 데 불필요한 복잡성을 제공할 수 있으며, UI/UX 설계 시 개선이 필요할 수 있습니다. 또한, CTA 디자인의 미흡함으로 인해 사용자 경험에 부정적인 영향을 미칠 수 있다는 점도 중요한 지적입니다.
유사한 주제의 게시물들로는 아래 링크들을 추천드립니다:
- UI 디자인 원리가 잘 적용된 사례와 아닌 사례 - UI 디자인에서 유사성과 근접성 원리를 살펴본 사례를 다루고 있습니다.
- UI 디자인 원리 - 잘된 사례, 아닌 사례 비교 - 유사성 원리와 CTA의 중요성을 분석한 비교 사례.
- UX 디자인 원리 - 좋은/안좋은 UX 사례 - Gmail과 카카오 웹툰을 통한 디자인 원리 적용 사례.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.