CH 8 | UX 디자이너 되기 | UIUX 디자인 스쿨 주 3일반 학습일지
🎯학습 내용
Chpater . 8
- 8-1 UX 디자이너에게 필요한 기본 개념 - PART 1
- 8-2 UX 디자이너에게 필요한 기본 개념 - PART 2
- 8-3 UX 디자이너 포트폴리오
Memo
랜딩페이지: 광고나 검색을 통해 홈페이지를 방문한 유저가 처음으로 착륙(landing)하는 것. 즉, 방문유저가 처음 보게되는 페이지.
버튼 레이블 : 버튼에 표시되는텍스트 나 표시문구
프라이머리액션: 사용자 인터페이스에서 가장 중요한 작업을 실행하는 버튼이나 동작으로, 보통 가장 눈에 띄게 강조된다.
8-1 UX 디자이너에게 필요한 기본 개념 - PART 1
🔹 A/B test
: 두 가지 버전의 요소를 비교하여 어떤 것이 더 나은 성과를 내는지 실험하는 방법
- A와 B
- As is / To be
| 예시
넷플릭스
| 과정
가설 -> 변수 설정 > 시안 설정 > 조사 설계(실행 전 조사 상세 설정)
| 유의사항
1. 명확한 목표 - 피드백 할 수 있도록
2. 변수 통제 중요
시간대, 지역 ...,
x -연령대(회원이 아닌 유저- 성립 불가)
x- a는 1월, b는 2월.. (ex-패션 트렌드)
🔹GOMS
곰스를 알지만 다들 쉽사리 하기가 어려운 것.
곰스란?
인간-컴퓨터 상호작용(HCI)에서 사용자의 행동을 분석하는 기법 중 하나
사용자가 어떤 작업을 수행하는 데 걸리는 시간을 예측하는 데 활용됨
| GOMS는 4가지 요소의 약자
|
준비
실험데이터. 비교데이터
테스크 수행 신체반응 : 아이트래커, 심장박동수
| Lili-Second 분석 4가지 요소
- 비주얼 무브 투 (Visual Move To) → 시선 이동 시간
- 사용자가 화면에서 특정 요소를 찾기 위해 시선을 이동하는 시간
- 예: "로그인 버튼"을 찾으려고 화면을 스캔하는 시간
- 레코그나이즈 (Recognize) → 인지(이해) 시간
- 사용자가 요소를 보고 그것이 무엇인지 이해하는 데 걸리는 시간
- 예: "이 버튼이 로그인 버튼이구나" 하고 인식하는 시간
- 탭 (Tap) → 클릭/터치하는 시간
- 사용자가 요소를 보고 손가락을 움직여 클릭(터치)하는 데 걸리는 시간
- 예: "로그인 버튼"을 보고 실제로 누를 때까지의 시간
- 리콜 (Recall) → 클릭 후 다음 행동을 고민하는 시간
- 사용자가 클릭한 후, 다음에 뭘 해야 할지 고민하는 시간
- 예: "설정" 버튼을 누르고 "언어 변경은 어디 있지?" 하고 멈칫하는 시간
💡 쉽게 정리하면?
👉 비주얼 무브 투 = 시선 이동
👉 레코그나이즈 = 보고 이해하기
👉 탭 = 클릭/터치
👉 리콜 = 클릭 후 다음 행동 고민
🔹Affordance 어포던스
행동유도
텍스트가 없이도 전달 될 수 있는 직관력
| 약한 어포던스 예시
🔹Metaphor 메타포
다른 개념이나 사물을 비유를 통해 설명하는 방법
|잘못 가져온 메타포
실재하는 책장 디자인을 가져오는 것은 나쁘게 볼 수 없지만, 사용자에게 보여줄 저 책의 이미지를 잘 볼 수 없는 환경은 적합하지 않다.
/오버레이 가려짐
캐릭터 연관성...?
📌 어포던스와 메타포의 차이
| 구분 | 어포던스 (Affordance) - 직관적 | 메타포 (Metaphor) - 비유 |
| 정의 | 객체가 사용자가 어떻게 사용할지에 대한 힌트를 제공 | 비유적인 표현을 통해 새로운 것을 이해하기 쉽게 함 |
| 목적 | 사용자가 직관적으로 어떤 행동을 할 수 있음을 알게 함 | 복잡한 개념을 친숙한 개념으로 이해하기 쉽게 만듦 |
| 주요 기능 | 사용자가 어떤 행동을 할 수 있다는 것을 명확히 알려줌 | 기존 개념을 빗대어 새로운 것을 직관적으로 이해시키는 것 |
| 예시 | 버튼을 누르면 클릭할 수 있다는 느낌 (누르기 가능한 버튼) | 휴지통 아이콘 (삭제를 뜻하는 비유) |
💡 쉽게 말하면?
- 어포던스는 사용자가 무엇을 할 수 있는지 알려주는 디자인의 기능적 특성!
- 메타포는 새로운 개념을 기존에 아는 것에 빗대어 이해하도록 돕는 디자인 기법이야.
🔹Heuristic evaluation
2. 일상의 언어
3. 여러 상황 컨트롤
6. 읽어서 아는 게 아니라 직관
7. 가능한 에러 발생 시키지 않도록 + 쉽게 복구해줄 수 있도록
버튼 음영 x -> 눌러졌나?
평가표는 구글링으로 쉽게 볼 수 있음
5-2 PART 2
1. Design Constraint
|
🔹Design Constraint 제약사항
- 제약조건 분류: 디자인 / 사용자
| 예시 : 자동 주차
차량 근처 대기: 돌발 상황을 대비 하기 위해.
| 대용량 파일 전송
퍼포먼스가 없으면 많이 보낸 것을 잠시 망각하고 왜 느리지? 라고 불쾌한 경험을 느낄 수 있음.
| 손잡이 가위
🔹Cognitive Workload
인지부화가 오는 예시
- 너무 많은 정보량
- 알 수 없는 아이콘
치명적인 결과 - 걱정
직관적인 정보 제공 못할 경우 힌트를 제공해야 함.
🔹Fitt's Law (피츠의 법칙)
목표에 도달하는 시간은 목표까지의 거리와 목표의 크기에 의해 결정된다는 법칙.
- 목표가 크면 빠르게 클릭할 수 있음
- 목표가 멀거나 작으면 클릭하는 데 시간이 더 걸림
상단 터치 거리 멀어서 느려짐
🔹Hick's Law (힉의 법칙)
:사용자가 선택할 옵션이 많을수록 의사 결정 시간이 길어진다는 법칙
- 선택지가 많으면 고민이 길어짐
//예외. 전문가. 전문가의 경우엔 데이터가 친숙하고 하위 데이터의 소속을 알고 있음
8-3 UX디자이너의 포트폴리오
🔹 UX 포트폴리오
|특징
1. 화면 구성 레이아웃
2. 콘텐츠 배치 능력
3. 어떤 콘텐츠 뷰어 순서 - 정보 구조 능력
| ux 디자이너
- 배경
- 서비스
- 목적, 문제해결
- 프로세스
- 고민
= 어떤 주제로 어떻게 접근하고자 했는지가 중요하다.
| Case study
| 포트폴리오 섹션 3가지
1. 포트폴리오
- design works
2. writing
-아티클
3. about
- 나는 어떤 사람인지
- 디자인 철학
| color
design work가 돋보이기 위해 차분한 톤 무드
|상세페이지
이후 나오는 디자인에 공감할 수 있도록 배경명시
| 실제
Roles and Responsibilities (역할 책임)
approach (접근방식)
디자인의 문제를 해결하기 위해 어떤 접근하고자 했는지
그 이유는 무엇인지.
'문제해결능력'
해석 - 해결최적 방법, 프로세스
인지하지 못한 부분은 무엇이 있었는지
인사이트 키펙터
디자인 해석 능력
인사이트 도출 능력
문제 해결하기 위한 문제 재정립
: 해결하기 위해 우리는 이렇게 봐야한다.
- 유저 저니맵
가장 스트레스 받아하는 부분, 사용성 저하시키는 부분 저니맵에서 파악 가능.
문서 보는 사람: 실제로 프로젝트에 사용할 줄 아는 사람인가?
아웃풋 : 디자인 데모 비디오
.
.
.
기능 자체 평가 어려움
의외로 포폴 보는 분들은 기능을 잘 안 보시는 분들이 많음
프로젝트의 이해도를 바로 파악하기 어렵기에
얼마나 핫한 기능인가 (x)
-> 얼마나 논리적으로 도출된 아이디어를 우리에게 이해하기 쉬운 형태로 보여주는 구나!(o)
| 정보구조
| 프로젝트 마무리
문제해결 프로세스, 고민경험
예상치 못한 이런 문제,
이런 고민해서 이런 경험을 얻었다.
|흐름
기능<<<<< 과정
컨셉 자체보다 컨셉 도출 과정이 중요.
Appendix
흐름을 끊기게 하는 요소들(고민, 현장, 어려웠던 점)을 부가적으로 보여주기
- 프로젝트 개요 : 현실 + 솔직(어떤 역할 맡았는지)
- 프로세스 왜 이렇게 정했는지
- 리서치 과정 : 리서치 목표 -> 리서치 방법 정함
주된 목적: 나라는 사람 얼마나 실력이 있나 - 어떻게 표현할지 고민하는 것이 포인트
🔹 포트폴리오 Tips
유대 친밀감++
디자인 철학
포트폴리오는
능력과 자세를 보여주는 것!
💡 강의 들으면서 느낀점
이번 강의를 통해 UX 디자이너로서 한 걸음 더 가까워진 느낌을 받았다. 처음에는 컨셉과 기능에 대한 아이디어가 부족할까 걱정했지만, 실제로 중요한 것은 아이디어의 양보다는 문제를 해결하려는 접근 방식과 그 과정에서 어떤 고민을 했는지에 대한 흔적임을 깨달았다. 이를 통해 문제 해결에 대한 관점과 방식을 넓히고, 보다 깊이 있는 사고를 할 수 있는 기회를 가질 수 있었다.
이 글은 제로베이스 UXUI 디자인 스쿨 주 3일반 강의 자료 일부를 발췌하여 작성되었습니다.