디자인카타
🙌🏻 내가 선택한 디자인 : 단계별 정보 입력
👉🏻 단계별 정보 입력은 단계별로 입력하기 때문에 사용자의 피로를 줄여줄 수 있다. 위 예시처럼 단계별 진행 상황을 보여주면 사용자가 바로 진행도를 알 수 있어 좋다.
전체 정보 입력은 어떤 정보를 입력해야하는지 한 번에 확인이 가능하다. 굳이 단계를 넘기지 않고도 입력을 할 수 있어 좋다.
하지만 통계적으로 27%의 사람들이 양식 길이 때문에 이탈한다고 하는 점에서 보면 단계별로 짧게 보여주는게 사용자 이탈률을 줄일 수 있는 장점이 있다고 생각한다.
https://formstory.io/learn/form-abandonment-statistics/
Form Abandonment Statistics: Reasons, Industries, Key Facts
Explore key form abandonment statistics including reasons and affected industries. Learn actionable tips to improve form completion.
formstory.io
아티클 스터디
오늘의 아티클 : 도파민 디자인, 금융 경험을 변화시키다(출처: https://mag.surfit.io/how-dopamine-design-changes-banking/)
도파민 디자인이란 ? 사용자에게 즉각적인 보상과 쾌감을 유도하는 방식으로 제품이나 서비스를 설계하는 개념
금융 UX의 한계를 개선하기 위해 등장한 개념이 도파민 디자인이다.
- 신경과학적 원리와 보상 매커니즘
- 감각적 자극과 몰입 유도
- 목표 기반 행동 설계
- 개인화된 경험과 맥락 기반 인터랙션
기존 금융 UX의 한계
- 지루한 인터페이스
- 복잡한 금융 용어
- 일방적인 정보 제공
- 낮은 감성적 연결
도파민 디자인이 적용된 사례
- 감각적인 인터페이스와 보상형 UX
- 목표 기반 금융 관리
- 일상과 연계된 금융 서비스
- 지속적인 참여 유도와 리워드 제공
기존 금융어플의 경우 은행 업무의 어려움이 고스란히 나타난다. 디자인이 딱딱하고 원하는 원하는 서비스를 찾아가는데도 시간이 꽤 걸린다. 도파민 디자인이 사용된 토스, 카카오뱅크 등을 사용하게 된다.
👉🏻UI 디자인의모든 것(1-2)👈🏻
컬러
- 사람이 어떤 사물이나 물체를 볼 때 가장 먼저 인지하는 요소이자 가장 오래 기억에 남는 요소.
- 브랜드 컬러는 사용자에게 브랜드의 이미지를 지속적으로 전달해서 기억하고 인지시킬 수 있는 중요한 역할을 한다.
컬러의 역할
▪️중요한 정보 강조
- 계층 구조
- 강조
▪️ 사용자의 행동 유도
- 컬러를 넣어 의미를 전달한다.
▪️ 상태(State) : 사용자와 상호작용하며 즉각적인 피드백(상태)을 전달
- 택스트 필드 입력
- 버튼의 활성화와 비활성화
- 토글
- 탭
▪️ 브랜드 아이덴티
- 브랜드 이미지를 떠오르게 하는 강력한 시각적 전달 요소
- 브랜드 컬러는 브랜드가 가지고 있는 이미지, 가치관, 성향을 담을 수 있는 대표 컬러로 선정
실습 - 브랜드를 대표하는 컬러
빨강 - 쿠팡
주황 - 당근
노랑 - 카카오
초록 - 네이버
파랑 - 토스
보라 - 인스타그램(?)
컬러 비율
5:25:70
5% 주색(브랜드컬러), 25% 보조색, 70% 배경색
반드시 비율을 맞춰야 하는것은 아니다.
디자인의 목적, 레이아웃, 범위에 따라 주색, 보조색, 배경색의 배색 비율을 정할 수 있다.
ex. 스타벅스, 이마트
UI 컬러 구성
▪️Primary color(주색)
- UI에서 가장 강조해야 하는 영역. 사용자의 행동을 유도할 때 사용.
- 브랜드를 대표하는 컬러. 인지도 향상과 각인시키는데 도움을 준다.
▪️Secondary color(보조색)
- 보색
- 유사색
- 브랜드 로고
▪️Neutral color(중립 컬러)
- UI디자인에서 지원 역할. 보통 텍스트와 배경에 사용.
- 회색에서 검정색까지 회색의 음영을 포함.
- UI 디자인에서 70%의 영역을 차지. 가장 많은 영역에 사용
▪️Semantic color(시스템 컬러)
- UNESCO 도로 표지판 기준으로 표준화된 컬러를 도입하여 사용
- 빨강, 노랑, 녹색은 세계적으로 일관된 의미로 사용하고 있다.
- 공공시설, 교통 관련 신호등에 동일하게 적용하여 사용
- UI 디자인에도 동일하게 활용하여 다음의 시스템 상태를 알려준다.
배경과 컬러
컬러는 상대적이라 주변 환경(배경색)에 영향을 받는다.
형태와 컬러
컬러는 상대적이라 형태에 따라 영향을 받는다.
- 면적이 넓은 배경과 면적이 좁은 텍스트와 같이 형태에 따라 컬러는 영향을 받는다.
- 배경에 사용된 경우 면적이 넓기 때문에 가독성이 높다. 반면 텍스트는 상대적으로 면적이 좁아 가독성이 낮다.
- 형태에 따라 색상 코드값을 알맞게 적용하여 가독성을 높여야한다.
한 화면에서 너무 많은 컬러를 사용하면 사용자에게 혼란을 줄 수 있어 피하는게 좋다.
타이포그래피
사용자의 경험을 향상시키는 중요한 요소
OS별 시스템 폰트
장점
- 국문, 영문, 일문, 한자 등 다국어를 지원
- 다양한 사이즈와 굵기를 제공
- 폰트 경량화로 용량이 라이트하다.
- 무료로 사용 가능하고 상업용으로 사용 가능
웹 폰트
웹 페이지에서 사용 가능한 폰트를 온라인에서 다운로드하여 쓸 수 있는 폰트
- 사용자가 해당 폰트를 시스템에 설치하지 않아도 사용 가능
- 모든 플랫폼과 브라우저에서 일관된 디자인 경험을 할 수 있다.
폰트 사이즈
- 사용자를 고려한 폰트 사이즈
- 디바이스 화면으로 보이는 실제 사이즈 고려
- 용도별 사이즈
10 이하의 폰트는 사용하지 않는 것을 권장
시각적 계층 구조
텍스트의 사이즈, 두꼐, 컬러, 위치, 여백 등 요소를 활용하여 더 나은 사용자 경험을 할 수 있도록 도와준다.
▪️타이포그래피 활용 방법
- 텍스트 사이즈의 변화 : 중요한 정보는 더 큰 텍스트를 사용
- 텍스트 두께 변화 : 헤딩, 제목, 주요 핵심 정보에는 더 굵은 텍스트를 사용
- 텍스트의 컬러 변화 : 대비되는 컬러를 활용하여 텍스트의 가독성을 높일 수 있다.
- 자간과 행간 조정 : 텍스트 위치와 용도에 맞는 자간과 행간을 사용하여 가독성을 높일 수 있다.
▪️명확한 계층
- 계층 구조를 명확히 하여 텍스트의 가독성을 높이고 시선의 흐름을 위에서 아래로 자연스럽게 만든다.
일관된 폰트 스타일
하나의 제품과 서비스에는 일관된 폰트 스타일을 적용하는 것이 좋다.
▪️폰트 종류
- 브랜드 이미지와 의미를 전달할 수 있는 폰트를 선택
- 하나의 제품과 서비스에는 동일한 폰트로 통일해서 사용
- 폰트 종류가 적을수록 일관된 디자인을 할 수 있고 유지 보수가 용이
- 폰트에 차이를 두고 싶다면 같은 폰트의 사이즈와 두께를 활용하는 방법이 있다.
▪️폰트 사이즈
- 사용자가 읽기 편하도록 적절하게 크기를 설정
- 하나의 화면 디자인에서 폰트 크기는 목적에 맞게 최소화로 사용
* 본문 텍스트는 14-18 사이즈 권장
▪️폰트 컬러
- 제품 UI 디자인 가이드 기준과 동일한 폰트 컬러를 적용하여 일관성 유지
여백과 정렬
▪️ 자간과 행간
자간
- 글자와 글자 사이의 간격
- 자간은 꼭 필요한 경우에만 설정
행간
- 글줄과 글줄 사이의 간격
- 보통 타이틀, 서브 타이틀에는 1.2~1.5배를 설정, 본문에는 1.6~2.0배를 설정
오늘 강의 1-3까지 듣고싶었지만 1-2까지가 최대,, 오늘 개인시간은 강의 듣고 강의에 딸린 과제를 하다가 다 썼다.
중간에 리디자인 실습도 해야하지만 너무 오래 걸릴 것 같아서 일단 넘겼는데 넘기길 잘했다. 아니였으면 오늘 과제는 손도 못 댔을 거 같은 느낌이,, 과제도 제대로 했는지 모르겠지만 일단 한다는거에 의미를 둬야지⭐
남은 강의도 내일부터 다시 열심히 들어야겠다 @
'UXUI' 카테고리의 다른 글
| 첫 개인 과제 끝 🤦🏻♀️ (0) | 2025.04.30 |
|---|---|
| [내일배움캠프] 뛰어간 이번 주 🏃🏻♀️ (0) | 2025.04.26 |
| [내일배움캠프] 디자인 입문 시작 (6) | 2025.04.22 |
| [내일배움캠프] 2주차 시작 🙉 (11) | 2025.04.21 |
| [내일배움캠프] 피그마 한 발짝 가까워지기 🚶🏻♀️ (9) | 2025.04.17 |