디자인카타
나의의견
B
사용자가 텍스트보다 가장 먼저 인식하는 상품 이미지에 사은품 증정을 직관적으로 표시하여 B가 더 잘보임.
A같은 경우 어떤 사용자의 경우 증정품이 있는지도 모를정도로 밋밋고 심플하다.
또한 B같은 경우에도 언제까지 증정품을 주는지 사용자가 원하는 정보를 추가적으로 제시하면
조금 더 만족스러운 구매를 유도가 가능할 것이다.
튜텨님 의견
A의 경우, 가독성과 인지적 부하가 최소화된 측면에서 정확한 정보를 전달할 수 있는 장점이 있어요.
반면 시각적 강조가 부족하기 때문에 사용자가 텍스트를 읽지 않는 이상, 사은품 혜택을 놓칠 가능성이 있습니다.
B의 경우, 시각적 위계와 즉각적인 인식으로 사용자에게 즉각적인 정보 제공이 가능하죠.
대신 이런 썸네일이 많이 배치된 경우 시각적 정보가 많아져서 사용자가 혼란을 느낄 수 있습니다.
여기에서 질문은 사은품 증정 어느 방식이 더 눈에 잘 들어오시나요? 였죠.
이 관점에서 직관적으로 눈에 바로 들어오는 UI는 썸네일에 시각적요소를 더한 B입니다.
하지만 어떤 UI가 더 좋은 가에 대해선 중요도에 따라 달라져요.
즉각적으로 인지를 시켜야할 때는 B가 가장 좋겠죠. 하지만 정보를 간결하게 전달해야 하고, 이미 사용자들이 해당 UI에 익숙하거나, UI디자인의 톤앤매너를 유지하는게 중요한 서비스의 경우 A가 적합합니다.
정리
A : 간결하고 사용자에게 익숙한 UI, UI디자인의 톤앤 매너 유지
B : 직관적인 썸네일 단, 많은 썸네일은 오히려 정보의 혼란을 줌
사실 직관적으로 들어오는 것만 중요하다고 생각을 하였는데,
사용자의 흐름을 생각하며 자연스럽게 눈에 익숙해지는 방식은 A가 맞는거같다.
생각에 매몰되지않고 좀 더 넓은 관점으로 생각해야된다고 생각하기.
UI 디자인의 모든것
가장 먼저, 사용자 이해하기
UI 디자인에 앞서 가장 먼저 고려해야 하는 것은 우리 서비스를 사용하는 사용자를 이해하는 것
- 디자인의 목적은 사용자 경험을 향상시키고 참여 유도.
- 참여를 유도하기 위해서는 지속적으로 제품에 대한 긍정적인 인상과 신뢰감을 줘야함.
- 사용자가 원하는 정보를 쉽게 탐색할 수 있어야 하고 제품이나 서비스를 사용할 떄 어려움이 없어야 함.
- 이러한 긍정적인 경험들이 쌓여야 비로소 사용자는 우리 서비스가 좋은 디자인이라고 느끼기 시작해요.
- 모든 의사결정은 사용자의 니즈와 기대를 중심으로 이루어져야해요.
나의 생각
사실상 UI의 핵심적인 요소 다른 타 디자인과 사용자의 관점이 더욱 더 중요한거같다.
이렇게 생각하는 이유는 아마 바로 반응이 오는 라이브 서비스.
사용자가 느끼는 불편함이 바로바로 전달이되고 이탈률 등 바로 직관적으로 느껴지지않나라고 생각이됨.
그래서 더욱더 이런 사용자의 니즈를 높이는 요소를 학습해보자.
사용자의 니즈를 높이는 방법
직관적인 디자인
- 사용자의 행동 유도할 수 있는 버튼,링크,픽토그램,아이콘 등이 있음.
직관적인 디자인이 중요한 점은 국내 뿐 아니라 국외 사용자에게도 친숙하게 적용 되어 범용성이 넓음.- 대비 높은 색상 조합, 간단한 레이아웃, 유연한 인터페이스, 이미지 사용 시 사용자에게 도움이 됨.
일관된 디자인
- 사용자가 환경이나 상황에 구애받지 않고 동일한 서비스 경험을 느낄 수 있게 하는 것은 중요해요.
- 신뢰성 향상, 업무효율 증가 (일괄된 디자인을 할 시 커뮤니케이션 시간 하락 및 빠른 작업 효율)
- 컬러, 타이포그래피, 아이콘, 버튼 등 시각적인 요소와 레이아웃, 그리드,
UX 라이팅, 인터랙션, 브랜드 메세지 등 요소의 기준을 명확히 하여 일관된 디자인
가독성을 고려한 디자인
- 텍스트는 쉽게 읽을 수 있어야 하며, 정보는 명확하고 간결하게 전달되어야 함.
- 여백, 콘텐츠 그룹화, 요소의 중요도에 따른 크기와 비율, 계층 구조 등을 활용이 가능함.
명확한 피드백 제공
- 즉각적인 반응 제공
사용자의 행동에 따라 시각적 또는 청각적 반응을 피드백으로 제공하여 사용자가 다음 행동을 쉽게 결정할 수 있도록 도움.
( EX. 파일 업로드 시 업로드 진행중 및 완료, 탭이나 드래그 시 변하는 컴포넌트 등)- 시각적 변화
입력 필드에 정보를 모두 입력했거나 필요한 조건이 충족되었을 때 시각적으로 변화를 주어 사용자가 인지
( EX. 회원가입 동의서 - 동의가 완료했을때 버튼 활성화 및 시각적인 컬러 변경 등)
접근성을 고려한 디자인
- 모든 사용자가 신체적, 환경적 조건에 관계없이 동등하게 웹에 접근하여 사용할 수 있도록 보장하는 것을 의미
- 다양한 사용자층이 제품을 이용할 수 있게 되므로 비즈니스 기회가 확장
- 텍스트와 아이콘, 입력필드, 텍스트 콘텐츠, 라인
- 명도 대비
저시력자, 고령자도 쉽게 인식할 수 있도록 텍스트와 배경의 명도 대비는 4.5:1 이상이어야해요.
-> UI 디자인 핵심 원리를 기반으로 사용자 경험을 향상 시키는 방법
- 직관적인 네비게이션
예상 가능한 카테고리 - 사용자가 모든 페이지를 방문하지 않아도 어디에 어떤 정보가 있는지 예측할 수 있게 하는 것
일관된 메뉴 구조일관된 메뉴 구조 - 일관된 메뉴 구조
모든 페이지에 동일한 메뉴 구조를 유지해야 사용자가 방향을 잃지 않고 쉽게 찾을 수 있어요. - 메뉴 depth 최소화
사용자가 3번 이상 클릭하지 않고도 원하는 페이지에 도달할 수 있어야 해요. - 비주얼 요소 활용
픽토그램, 아이콘 , 사용중인 메뉴 강조. - 다양한 브라우저 및 디바이스에 최적화된 디자인 제공
- 사용자 피드백 반영
사용자 VOC, 사용자 인터뷰,사용자 설문조사 등 사용자 피드백을 발견하고 수집하여 데이터를 분석 및 해결책 제시
공부하며 참고한 아티틀 - UI/UI 가이드라인에 대한 아티클
https://brunch.co.kr/@chulhochoiucj0/8
https://brunch.co.kr/@chulhochoiucj0/9
오늘 TIL 후기
사실 UX/UI의 기본중에 기본인거같다.
사실상 공부하면서 가장 많이 듣던 내용이기도 하고, 가장 핵심적인 내용이지만 정리하면서
생각해보면 이렇게 어림짐작으로 생각하던 부분이 메뉴얼 시켜 학습을 하니 조금 더 디자인 할 때신경써야되는 부분이 되게많다고 생각이 든다.
또한 학습한 내용으로 앱의 디자인에 대하여 사례를 찾아보려고했지만, 아직 미숙함.
사실 좋은 부분은 계속보이지만 안좋은 부분을 아직 잘모르겠다.
아마 계속 반복숙달로 인하여 자연스럽게 나올때까지 계속 보며 늘려야되겠다 생각함.
