0225 오늘의 디자인 카타 [ A ]- 슬라이더의 방향성을 짐작할 수 있음- 슬라이더 컴포넌트에서 현재 위치를 쉽게 파악할 수 있음- 많은 이미지가 있다면 표기하기 어렵고, 정보량 가늠이 어려움. [ B ]- 현재 위치와 총 이미지 개수 직관적으로 파악 가능- 많은 이미지가 있어도 표기하기 쉬움 5~6개 정도의 이미지 : A7~ 의 이미지 : B 0224 오늘의 디자인카타 [ A 슬라이더 ]빠르게 연속적인 시간대를 확인하고 선택할 수 있음1. 시간대 별로 사용 가능한 시간을 직관적으로 확인 해야하는 경우2. 공유 킥보드/자전거 대여나 스튜디오 촬영 같이 유동적으로 시간을 추가해 이용하는 예약 방식이 필요한 경우 [ B 타임 피커 ]특정 시간 선택이 직관적이고 사용자의 실수가 적다.1. 영화 예매, 식당 예약 등 이미 고정된 시간 내에서 선택해야 하는 경우 시간을 탐색할 필요없이 원하는 시간만 클릭하여 예매2. 시간 선택이 비교적 간단하고 명료해야 할 때 유동적인 시간 선택이 필요한 서비스 → 슬라이더정해진 시간이 있는 서비스 → 타임피커 0221 오늘의 디자인카타 [ A 다른 고객이 함께 본 상품 ]- 사용자가 현재 장바구니에 담은 제품과 비슷한 카테고리의 옷을 추천 해 주고 있음- 단순한 탐색 데이터만 제공하고 있어 의류 커머스에서는 고객이 구매할 필요성을 느끼기 어려움 [ B 같이 구매하면 좋은 상품 ]- 사용자가 장바구니에 담은 제품과 조합하며 구매할 가능성이 있는 제품을 제안- 실제 구매에 도움이 되는 정보를 제공하여 평균 주문 금액을 높이는데 효과적임 📌결론, A 와 B 어떤 것이 전환율이 더 높을까?✅B 선택개인적으로 옷을 쇼핑할 때, 원하는 코디 조합을 대강 생각 해 놓고 옷을 하나 고른 후 같은 제품 라인보다는 다른 제품군을 찾아보는 경우가 많다. (상의를 골랐으면 하의를 고르거나 악세서리를 고르거나..)경험으로는 장바구니에 옷을 담았을 때 모델이.. 0220 오늘의 디자인카타 [A 대표 계좌만 노출]- 사용자가 주거래 계좌를 가장 많이 이용한다는 점을 고려하여, 하나의 대표 계좌를 보여주고 추가적으로 이용자들이 많이 찾는 빠른 기능(인증서, 이벤트, 카드내역, 환율 등)을 하단에 추가하여 한 눈에 볼 수 있고 빠른 접근이 가능하도록 설계한 것 같다.- 추가적인 계좌 확인이 필요할 경우 하단의 별도 버튼으로 이동할 수 있게 설계되어있는데, 간결하고 깔끔해보인다.➡️ 큰 금융서비스 같은 경우가 보통 A 방식을 사용하는데, 주 거래 통장이 메인으로 존재하고 기존에 제공하던 은행 업무 서비스(펀드, 인증서 등)이 많기 때문에, 계좌 정보만 제공하는 것 보다 다양한 선택지의 윛치를 한 눈에 볼 수 있는 방식을 선택한 것 같다. [B 내 모든 계좌 노출]- 사용자가 보유한 모든 계좌 정.. 0219 오늘의 디자인 카타 [ A 레이어 팝업 ]1. 사용자의 행동을 멈추는 모달 형태를 사용하여 쿠폰이 마감되었다는 인지를 확실하게 시킬 수 있음2. 화면 중앙에 등장하여 직관성과 전달력이 빠름3. 중요한 정보 전달에 주로 사용 [ B 토스트 팝업 ]1. 사용자의 현재 행동을 방해하지 않고 정보를 전달 할 수 있음2. 화면 상단 혹은 하단에 잠깐 등장했다가 사라져, 사용자가 인지하지 못하고 사라지는 경우가 발생할 수 있음3. 가벼운 정보 전달에 주로 사용 📌결론 : A vs B, 어떤 것이 더 좋을까?✅ A선택팝업이 뜨는 경우는 사용자가 선착순 쿠폰을 받기 위해 클릭했을 가능성이 크기에, 쿠폰이 마감 되었다는 정보가 중요 하다고 생각된다. 토스트 팝업은 일정 시간이 지나면 자동으로 사라지기 때문에 사용자가 놓칠 위험이 존재해 .. 0217 오늘의 디자인카타 A 텍스트 필드 하단1. 사용자 시선의 흐름이 위에서 아래로 흐르기 때문에 입력 필드에서 오류가 발생한 경우 사용자가 바로 아래를 봤을 때 오류 메세지를 확인할 수 있도록 배치하는 것이 효과적임.2. 사용자가 무엇을 잘 못 입력했는지 직관적으로 빠른 파악이 가능함 B1. 사용자가 어떤 텍스트 필드에서 잘 못 입력했는지 오류 위치를 찾기 어렵고, 다시 위로 이동하여 문제를 찾아야하는 추가적인 탐색 부담이 발생2. 모든 폼을 작성하고 버튼을 눌렀을 때 에러 메세지가 발생하면 사용자의 입력 흐름을 방해할 수 있음 📌결론 : A vs B, 어떤 것이 더 좋을까?✅ A 선택텍스트 필드 하단에 배치하는 것이 사용자 시선 흐름, 오류 수정의 용이성, 접근성을 모두 고려했을 때 UX/UI적으로 효과적일 것 같다. B.. 0214 오늘의 디자인 카타 [A]1. 사용자가 무엇을 입력해야 하는지 쉽게 이해 가능2. 직접적인 지시로 행동 유도가 뚜렷함3. 이미 필드 레이블이 존재하기 때문에 불필요한 문구가 반복되어 효율성이 떨어짐 [B]1. 입력 형식을 제공하여 사용자가 정확한 입력값을 이해하고 오류 상황을 줄일 수 있음2. 설명 문구 없이도 직관적으로 전달 가능 📌결론 : A vs B, 어떤 것이 더 좋을까?✅ B선택회원가입 플랫폼마다 요구하는 입력 값이 조금씩 다르다. (예 : 생년월일을 입력할 때 0000. 00. 00 을 요구하는 경우와 00. 00. 00을 요구하는 경우 등) 따라서, 앱에 맞는 힌트 텍스트를 예시 형태로 보여주는 방식이 사용자의 혼란을 줄이고 오류를 방지하는 방법이라고 생각하여 B 방안을 선택했다.만약, 제시해 준 회원가입의 .. 0213 오늘의 디자인카타 [A]1. 알림 받기 토글을 버튼을 직접적으로 배치하여 직관적임 → 스큐어모피즘 멘탈모델2. 닫기 버튼이 눈에 잘 띄지 않고, 사이즈가 너무 작아 사용자가 조작하는데 어려울 수 있음3. 라이트박스 처리가 없어 사용자가 기존 콘텐츠를 계속 소비할 수 있음 [B]1. 모달 뒤 쪽의 라이트박스로 처리하여 메세지에 집중시킴.2. 가운데에 모달 팝업을 띄워, 알림 설정이 중요한 경우 사용자가 놓치지 않을 수 있음3. 추가적인 설명 문구, 시각적 요소(아이콘, 버튼)등을 활용해 알림을 명확하게 전달 할 수 있음4. 명확한 CTA 버튼으로 사용자의 행동을 유도하고 있고 터치영역이 충분히 크다.5. 30일간 보지 않기 옵션을 제공해 사용자로 하여금 피로도를 줄일 수 있음 📌 결론: A vs B, 어떤 것이 더 좋을까.. 0212 오늘의 디자인카타 [A]- 진행 상태를 대략적으로만 전달.- 다운로드 완료까지 남은 시간을 유추만 가능 → 사용자의 불안감을 유발할 가능성 존재 [B]- 구글에서 조사한 지연시간이 길어질 수록 이탈률이 증가한다는 결과가 존재한다.- 현재 다운로드 중인 파일 개수를 명확히 전달- 사용자가 남은 진행 상황을 한 눈에 파악 가능 → 인내심 증가, 그로인한 심리적 안정감과 UX만족도 향상- 마이크로소프트 UX 가이드를 살펴보면 예상 완료 시간 또는 진행 단계를 표시하는 것이 사용자의 만족도를 높인다고 강조함!https://learn.microsoft.com/en-us/windows/apps/design/controls/progress-controls Guidelines for progress controls - Windows a.. 0211 오늘의 디자인카타 [A] 텍스트로 할인율 노출- 가독성이 높아 정보 전달이 명확하고, 할인율이 숫자로 강조되어 인식이 빠르다.- Jakob Nielsen의 F-패턴(F-pattern) 읽기 행동 연구에 따르면, 사용자는 웹페이지에서 정보를 빠르게 스캔하며, 숫자와 키워드가 포함된 텍스트는 눈에 더 잘 띄어 클릭률(CTR)을 높이는 효과가 있다.https://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/-접근성이 높다. 이미지 기반 할인율을 뒤의 배경의 사진에 따라 가독성이 달라질 수 있고 시각 장애인이나 색약 사용자에게 가독성이 떨어질 가능성이 존재한다. 0210 오늘의 디자인카타 [A]1. 이메일, 비밀번호, 기타 정보를 일일이 입력하지 않아도 되기 때문에 가입 프로세스를 단축할 수 있다.2. 복잡한 회원 가입 양식을 완성하지 않아도 되어, 가입 도중 이탈하는 사용자의 비율을 낮출 수 있다.3.. 통계 결과 주로 사용하는 로그인 방법으로 '소셜 로그인'이 64%, '웹 회원가입'이 26%로 나타났고 연령대가 낮을 수록 소셜 로그인 이용 경험이 많았으며 학생의 경우 응답자의 100% 이용 경험이 존재했다.4. 네이버 로그인 개발 가이드에서는 네이버 아이디를 통한 간편한 로그인과 사용자 정보 조회의 이점을 강조하고 있었다. [B]1. 일부 사용자들은 소셜 로그인을 사용할 경우 개인 정보가 공유될 것을 우려해 가입을 꺼릴 수 있다.소셜로그인 이용자의 친구 정보를 제3자 앱에 넘기도록 .. 0207 오늘의 디자인 카타 [A]장점1. 사용자가 각 카테고리의 하위 항목을 잘 파악하고 있다면, 선택지의 양과 상관없이 원하는 항목을 빠르게 선택 가능하다.2. 모든 카테고리를 한 번에 노출하지 않고 접힘 구조를 사용하여 화면 공간을 절약할 수 있다.3. 사용자가 필요한 카테고리만 선택할 수 있어 시각적으로 단순화가 잘 되어있다.단점1. 세부 카테고리를 보기 위해 추가적인 액션이 필요하다.2. 사용자가 세부 카테고리를 발견하기 어려울 수 있다. [B]장점1. 많은 단계를 거칠 필요 없이 최종 카테고리에 도달할 수 있어 비교적 직관적이고 단순하게 느껴진다.2. 사용자가 어떤 항목을 선택했는지 쉽게 파악이 가능하다.3. 디자인 요소를 (브랜드 컬러, 이미지 등)활용하여 브랜드 아이덴티티를 강조할 수 있다.단점1. 카테고리의 수가 많.. 이전 1 2 다음
