- 넛지효과
- 유저페르소나
- UXUI부트캠프
- 제이콥의 법칙
- 모달의 개념
- IKEA Effect
- UXUI개선
- 피그마 프로토타이핑
- 밀러의 법칙
- Fitts’s law
- DataDriven
- Goal-Gradient Effect
- 근접성의 법칙
- Zeigarnik Effect
- UX Psychology
- 5whys
- process flow
- UXUI리뷰
- Mental model discordance
- Jakob’s Law
- 스파르타코팅 UXUI
- UX개선사례
- 프레임 이해
- mental model
- 공통영역의 법칙
- 피그마 플러그인
- 피그마단축키
- Doherty threshold
- 모바일 버튼 크기
- 고객여정지도
목록Design Contents (28)
Happiness!
![](http://img.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bQ8FCy/btsDAvBxzM0/9LiEOtDXnwIka0DQB1t2iK/img.png)
AARRR 지표: 미국의 사업가이자 투자자인 데이브 맥클루어가 스타트업의 성장을 위해 개발한 분석 프레임워크이며, 그로스 해킹의 근간이 되고 있다. Acquisition(고객유치) : 사용자들이 다양한 채널을 통해 우리 서비스를 처음 접하게 됨 Activation(활성화) : 긍정적인 경험으로 우리 서비스를 활발하게 이용하게 됨 Revenue(수힉화) : 사용자들의 서비스 이용이 매출로 연결됨 Retention(유지) : 사용자들이 지속적으로 우리 서비스를 이용함 Referral(추천) : 사용자들이 우리 서비스를 주변에 공유하고, 추천함 2. Activation(활성화) AARRR의 두번째 '활성화는'는 사용자가 서비스를 계속해서 사용하게 되는 단계이다. 활성화 단계에서는 사용자가 지속적으로 서비스를 ..
![](http://img.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/50fUi/btsDxzC9xjs/uguCxpPWwwZmkIVqHxKLg0/img.png)
AARRR 지표: 미국의 사업가이자 투자자인 데이브 맥클루어가 스타트업의 성장을 위해 개발한 분석 프레임워크이며, 그로스 해킹의 근간이 되고 있다. Acquisition(고객유치) : 사용자들이 다양한 채널을 통해 우리 서비스를 처음 접하게 됨 Activation(활성화) : 긍정적인 경험으로 우리 서비스를 활발하게 이용하게 됨 Revenue(수힉화) : 사용자들의 서비스 이용이 매출로 연결됨 Retention(유지) : 사용자들이 지속적으로 우리 서비스를 이용함 Referral(추천) : 사용자들이 우리 서비스를 주변에 공유하고, 추천함 1. Acquisition (고객 유치) AARRR의 첫번째 '고객 유치'는 사용자가 우리 서비스를 처음 접하게 되는 단계이다. 고객 유치 단계에서는 페이스북, 구글,..
![](http://img.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/M3l6Q/btsDp9yiDuo/NkYJzZEMEGL2gIXukCgoKk/img.png)
팝업: 화면 위에 새로운 화면을 띄우는 것 1. 기존 브라우저 위에 독립적인 브라우저를 갖는 것 (새로운 레이어가 올라가는 것) 2. 브라우저 옵션에서 컨트롤 할 수 있는 것 모달: 사용자가 행동을 취하기 전까지 뒤에 가려진 화면을 조작할 수 없는 것 1. 브라우저 위에 브라우저를 띄울 수 있는 것 (대부분 부모-자식 관계) 2. 브라우저 옵션과 관계 없이 띄울 수 있는 것 3. Dim처리가 있어 부모 페이지는 사용할 수 없는 것 ❗️주의. 모달(Modal)은 UI의 이름이 아니라, UI를 분류하는 기준 중 하나 모달에는 시작(모달을 진입하게 하는 컴포넌트)과 끝(Cancel, Send, Save, OK, X etc.)이 존재한다. 따라서, 모달(자식)에 진입한 사용자는 서비스 흐름에서 벗어나, 모달 내..
![](http://img.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/35Fb2/btsDlCga1Ec/SA2JGcJhB2N73LZQDBfK31/img.png)
모달의 정의 - 모달은 사용자가 행동을 취하기 전까지 뒤에 가려진 화면을 조작할 수 없는 것을 뜻함 - 즉, 사용자가 원래 쓰고 있던 화면을 잠가버리고, 사용자가 모달 UI 내부의 어떤 액션을 하기 전까진 풀어주지 않음 - 모달(Modal)이라는 건 UI의 이름이 아니라, UI를 분류하는 기준 중 하나 라이트 박스의 정의 - 모달 UI에서 반투명한 층을 라이트박스(Lightbox)라고 함 - 모달 UI를 사용할 때는 일반적으로 ‘뒤에 가려진 화면은 사용할 수 없다’는 걸 보여주기 위해 반투명한 층을 만들어 줌 - 스크림(Scrim; 천 또는 장막), 딤드(Dimmed; 흐려진), 딤레이어(Dim Layer), 오버레이(Overlay) 등으로도 불림 레이어 팝업의 정의 - 레이어 팝업은 새로운 창을 띄우는..
![](http://img.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bpEByX/btsDhVN72TF/feYZKSwyKKDkecCfftxYXk/img.png)
💡 디자인씽킹 사용자에 대한 이해를 기반으로 문제를 찾고 제품을 만들어 검증하는 프로세스 논리적으로 제품을 만들 수 있도록 도와주는 프레임워크 중 하나 디자인씽킹은 5단계로 구성 1. 공감하기 Empathy 인터뷰나 관찰 등의 다양한 방법으로 사용자와 공감대를 맞추고, 그들의 경험을 완전히 이해하기 위한 노력을 하는 단계 공감지도 (Empathy Map) : 6개의 도표를 채우며 사용자의 숨겨진 어려움과 욕구를 유추할 수 있도록 도와주는 시각화 도구 (참고) https://www.toolo.org/sub/tool_detail.php?idx=15 2. 문제 정의하기 Define 공감으로 얻은 정보를 해석해 사용자가 불편함을 느끼는 지점을 발견하는 단계 공감으로 얻은 정보를 해석해 사용자가 불편함을 느끼는 ..
![](http://img.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/5N8FS/btsC0XYD6bG/RLkughIqnkJNYKUeGzy2fk/img.png)
1. 플러그인 플러그인이란 피그마 자체 기능으로 지원하지 않는 기능을 실행하게 해주는 일종의 확장 프로그램 1-1. Material Design Icons 머터리얼 디자인 아이콘 플러그인을 활용해서 원하는 아이콘을 사용 https://www.figma.com/community/plugin/740272380439725040/Material-Design-Icons Material Design Icons | Figma Community Instant easy access to the entire Material Design Icons library: 35,000+ icons in PNG and SVG at your fingertips. Search icons by name or scroll through th..
![](http://img.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/vtxWq/btsB7fNTuc3/JpHXbLpZKP8TDcvNXqiuB0/img.png)
피그마 프로토타입이란? 화면의 순서 또는 플로우 간의 연결을 시켜, 특정 버튼이나 영역을 눌렀을 때 어떤 화면으로 어떤 인터랙션(클릭, 드래그, 스크롤 등) 스타일로 이동할 것인지 목업으로 보여주는 것이다. 1번. 핫스팟(Hot Spot): 인터랙션이 시작하는 위치다. 2번.커넥션(connection) 라인: 핫스팟과 이어지는 두개의 요소 사이의 연결 선. 이 선을 클릭하면 프로토타입의 세부적 설정이 가능하다. 3번. 데스티네이션(Destination): 핫스팟에서 커넥션으로 연결한 도착점이 되는 요소를 의미한다. 인터렉션 디테일창이란? 핫스팟에서 데스테이션 요소를 클릭하면 뜨는 창이다. 1번. 트리거(Trigger): 이벤트라고 볼 수 있는 인터렉션의 시발점으로 On click, hover 등을 선택할..
![](http://img.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/4GWwH/btsB7iKx6aT/XItvDDrmjQClNMoNJWhJ60/img.png)
1. Doherty threshold (도허티 임계) 도허티의 임계는 사용자와 컴퓨터 사이의 상호작용에서 가장 적절한 시간 범위를 지칭한다. 이는 사용자가 인터페이스에 반응하고 결과를 인지하는 데 걸리는 시간을 의미한다. 일반적으로, 사용자 경험을 향상시키기 위해서는 0.4초 이내로 인터랙션에 대한 응답이 이루어져야 한다. 1.1. 활용 사례 - 사용자의 주의 분산을 막고 생산성을 높이려면, 0.4초 이내로 피드백을 제공한다. - 애니메이션으로 로딩 중 사용자의 시선을 끌어 지루하게 느껴지지 않도록 한다. (스켈레톤, 블러업 등) - 정확하지 않아도 진행 표시줄을 보여주면, 사용자는 대기 시간에 좀 더 관대해진다. - 실제 작업이 빨리 완료되어도, 의도적으로 늦게 알리면 체감 가치를 높이고 신뢰를 형성하..