UIUX 학습일지 2일차 [UX디자인, 사용자 조사 방법, 피그마]

1일차를 오늘 올려서 좀 머쓱하긴 하지만...^___^ 2일차!

오늘로 2일차를 시작합니다~~~(짝짝) 그리고 각종 TMI와 내 개인적인 일상도 공유하게 될 것..,,,,,

어제는 첫 날이라 혼선이 있던 관계로 봐주지만 앞으로는 제때 올리도록!

예압!!! (자문자답) 그럼 시작합니다~

 

2일차 UXUI 학습일지

 

1. 과제

1-1. 나의 UX 디자인에 대한 정의

1-2. 생활 속 UX 개선 사례 찾아보기

1-3. 모바일 카카오톡 앱의 '선물 보내기'에 대한 사용자 여정 지도 User journey map 만들기

 

2.  과제 (프리스쿨 UI 실습디자인 25종 만들기)

💯Chapter2. Element 완강!

우왕ㅎㅎㅎ 사실 개강 전부터 하라고 열어 두셨는데 Chapter 1인 파운데이션이랑 Chapter 2인 엘리먼트 조금하고 안하고 있었당.... 히히 나란 게으름뱅이....^____^

이제부터 각성 예정이기 때문에 내일은 Chapter 3. 모듈을 다 들을 것이야... 나랑 약속해★ 찡긋

 

 

3.  강의

3-1.  강의 계획

1)UX 이론 / 기초

Chapter 1. UX 디자인의 기본 개념

Chapter 2. 사용자 조사

 

2)UIUX 디자인 툴(Figma)

Chapter 1. Figma소개와 설치

Chapter 2. Figma 인터페이스

 

 

3)프리스쿨

 

3-2.  학습 내용 요약 및 느낀 점

▶UX 이론 / 기초

 

Chapter 1. UX 디자인의 기본 개념

 

1-1. UX 디자인이란

강사님 : 김성현 UX 디자이너님

 

✏️UX 디자인이란 무엇일까?

✅비즈니스에서의 UX디자인의 목표는 유용성과 동시에 만족스러운 사용경험을 제공하여 고객의 만족과 충성도를 높이는 것이다.

✅닐슨 노먼 그룹 : 사용자 경험은 사용자와 회사, 서비스, 제품과의 모든 상호작용이 포함된다.

ex. 엘리베이터 버튼 UI : 취소 기능, 불필요하게 기다려야하는 패인 포인트를 개선

 

✏️UX 입문서

✅정신병원에서 뛰쳐나온 디자인

최초로 UX디자인에 대한 개념 설명,

디자이너와 개발자가 어떻게 함께 협업해서 좋은 인터랙션 디자인을 만들 수 있을지에 대한 고민을 담음

 

✏️UX디자인이란 말이 왜 유명해지고, 중요해졌을까?

1.경쟁의 심화 : 사용자들의 디자인에 대한 기대수준이 높아짐에 따라 경쟁이 심화되었고 이는 UX디자인에 대한 수요로 이어졌다.

2.복잡도의 증가 : 사용자의 기술 적응 속도보다 빠르게 새로운 기술을 바탕으로 한 새로운 형태의 제품과 서비스가 출시되고 있다.

Ex. 전문성을 갖춘 카메라지만 일반 사용자(초보자)도 쉽게 사용 가능

3.지속가능한 서비스 룹Loop

에코시스템은 사용자 충성도를 높이고 학습도를 낮추어 점차 Lock-In 시키는 효과가 있다.

*경험이 플랫폼을 뛰어넘어 이어져야 한다.

Ex. 애플 : 아이폰과 아이패드, 아이맥 등의 연동 기능/ 이제까지 쌓아둔 게 있기 때문에 안써야 할 이유가 없어짐/대체 불가능한 브랜드/ 일관성

 

1-2. UX 디자인 시작하기

✏️UX(User eXperience)

✅HCI에 기반을 둠

*HCI : 다학적인 학문 (융합되고 발전되어 있는 학문)

 

✴️Usefulness = Utility + Usability (이 제품을 사용함으로서 내 삶이 얼마나 나아질 수 있는가, 내가 필요한 제품이 제공되는 동시에 사용할 수 있는가)

1.USABILITY(사용성)

- 네비게이션 Navigation

- 친숙도 Familiarity

- 일관성 Consistency

- 에러 예방 Error Preventation

- 피드백 Feedback

- 시각적 명료성 Visual Clarity

- 유연성 Fiexibility : 업데이트의 필요성에 유연하게 대처할 수 있어야 함

- 효용성 Effeciency : 얼마나 쓸모있는가

✅Human Factors : 사람의 특징을 연구하는 것

✅Accessibility (접근성) : 색맹을 위한 기능  → 소리로 들려주거나, 화면에 대비를 주거나 사용자가 시스템을 잘 사용할 수 있게끔 하는 것

✅User

✅HCI

✅Marketing

✅Interaction (상호작용) : 적절한 때에 적절한 피드백을 준다.

✅Prototyping : 목업

✅Experience

✅Utility 

 

 

✏️UX디자인과 UI디자인은 어떻게 다를까?

UI → UX → CX(Customer eXperience)

UI(시스템 중심)는 UX(사용자 중심)로 발전되었다. 최근에는 CX라는 조직도 꽤 발전됨.

UI를 바탕으로 UX가 만들어짐.

UX와 UI의 구분에 너무 많은 시간을 소모할 필요는 없을 것 같다.

중요한건 본질을 이해하는 것.

 

1-3. UX 디자인 프로세스

✏️전형적인 디자인 프로세스 Typical design process

Listen > Analyze > Design > Test (반복)

 

✏️더블다이아몬드 디자인 프로세스 Double Diamon desin process

https://www.emotion.co.kr/magazine/24/ 참고

✅가장 유명한 프로세스

✅큰 기업에서 많이 사용

✅1 Discover 확산 > 2 Define 수렴 > 3 Develop 확산 > 4 Deliver 수렴

 

1. Discover 확산

- 내가 무엇을 모르는지를 모른다!는 상태에서 시작

- 현재 사용자 행태/제품의 특성/트렌드에 대한 이해

- 현존하는 문제점 및 기회요인의 파악

- 제한을 두지 않고 가능한 한 넓은 범위의 리서치를 진행

✴️ 가능한 많은 데이터 수집!

 

2. Define 수렴 - 분석 단계 Synthesis Phase

- Raw데이트를 분석하여 인사이트 Insight / 키팩터 Key factor 도출

- 리서치 결과 시각화(모델링)

- 팀 리뷰를 통해 기회요인 Opportunity과 문제점 Pain point 정의

- HMW (How might we...) 질문

- 디자인 컨셉 및 전략 수립

✴️ 모델링 도구 예시 : 어피니티 다이어그램 (Affinity diagram), 사용자 여정맵(User journey map)

 

3. Develop 확산 - Ideation Pase

- 아이데이션 idation을 통해 문제 해결에 대한 솔루션 도출

- 아이디어 평가를 통한 구체화

- 가설 수립 및 평가를 통한 다양한 가능성 탐구

✴️ 사용 도구 예시 : 아이디어 평가 매트릭스 Idea evaluation matrix

 

4. Deliver 수렴

- 프로토타입을 이용한 가설 및 구현 안정성 검증

- 테스트와 개선의 반복 iteration 프로세스

- 개발 및 출시

✴️ 사용 도구 예시 : Test scenario

✴️ 반복적인 업데이트를 위해 이제까지의 단계들을 반복

 

✏️린 UX 디자인 프로세스 Lean UX design process

https://art-atm.com/bbs/board.php?bo_table=info_04&wr_id=34 참고

Concept > Validate Internally > Prototype > Test Externally > Learn form user behavior > Iterate

✴️ 빠르게 빠르게 업데이트(속도감이 강점). 트렌디한 서비스를 할 수 있음

✴️ 작은 서비스들을 그때 그때 업데이트 함

✴️ 고민을 덜한 만큼 실패할 확률도 높음.

✴️ 사람들의 제안을 적극적이고 관대하게 받아들이고 거기서 개선 및 해결해나감

✴️ 의사결정이 빠른 스타트업에서 많이 활용하는 프로세스

✴️ 닌자가 되지 말자!!! (마이웨이 ❌❌) 팀워크 매우 중요. 항상 팀원들과 상의해서 고쳐나가야 함

✴️ 애자일 프로세스에서 시작 (작은 개념부터 쪼개서 개발)

 

 

1-4. 사용자 중심 디자인 (UCD)

✏️누가 우리의 '사용자'알까?

우리 제품을 사용'하는' 사람 (직접 사용자) + 우리 제품을 사용'할' 사람 (간접 사용자)

ex. 아버지가 집에 티비를 구매. 다른 가족이 간접 사용자가 됨

✴️ 간접 사용자를 잠재적 사용자로 봄

 

✏️서비스 디자인에서의 정의

누군가가 무언가를 하고 싶어할 때 도움을 주는 어떤 것

 

✏️UCD : User Centered Design 사용자 중심 디자인

✅사용자 중심 프로세스

Analysis > Design > Evaluation > Impalementation (반복)

✅사용자 중심 디자인 책 : User-Centered Design

✴️ 사용자 중심 디자인 캔버스 User Centered Design Canvas 사용

1)맵 작성 후 반드시 사용자와 함께 검증해야 함

2)작성하면서 추가로 궁금하거나 조사가 필요한 부분은 추가하기

3)사용자 팩터와 비즈니스 팩터 연결 (문제점 > 해결책 연결, 연결되는 해결책이 없을 경우 추가)

https://uxplanet.org/user-centered-design-canvas-deconstructed-cf7e9c6252e8 참고

 

Chapter 2. 사용자 조사

 

2-1. 사용자 조사 방법

✏️UX 디자인에서 실시하는 사용자 조사란?

목적과 환경에 따라 다양한 사용자 조사방법론을 활용하여 사용자의 드러나는 사용 행태와 비언어적인 요구사항을 도출해내는 조사

 

✏️사용자 조사의 정의

1) 언어적 정보 : Ex)인터뷰, 설문 등

2) 행동(비언어적) 정보 : Ex) 관찰을 통해 얻는 정보

 

✏️사용자 조사의 방법의 종류

https://friendbahn.tistory.com/2642244 참고

 

✏️컨텍스쳐 인쿼리 Contextual inquiry

1) in Context 사용자가 있는 곳에서

2) do Inquiry 사용자를 연구

✴️ 아무것도 모르면 사용자의 행동을 해석할 수 없음. 알지만, 모르는 척 하기.

 

✏️컨텍스쳐 인쿼리 실행 프로세스

1) 조사 목적 및 범위 정의

Ex) '의사들이 병원에서 어떤 의료장비를 어떻게 사용하는지 알아보자'

2) 조사 대상 및 규모

Ex) 외래진료를 보는 의사를 대상으로 하되 수술실은 제외한다.

3) User Screening 가이드 작성

Ex) 5년차 이상/ 응급의학과 제외/ 종합병원 대상/ 외래 진료 의사/ 방사능 장비 제외

4) 사용자 모집

5) 파일럿테스트

실제 사용자를 대상으로 1~2명 현장 조사 실시

✴️테스트 시간, 우리의 조사 설계가 잘되었는지, 질문 타이밍은 적절한지 등을 확인

✴️파일럿 테스트없이 모든 사용자를 조사했는데 중요한 질문을 빠뜨리는 경우가 있을 수 있으니 미리 파일럿 테스트를 실시하는 것

6) 보완/개선

파일럿 테스트에서의 발견점을 바탕으로 수정/보완

7) 본 조사 실시

전체 사용자를 대상으로 조사 실시

 

✏️컨텍스쳐 인쿼리 유의사항

1) 사용자가 있는 곳으로 가서 인터뷰하기

2) 정해진 질문은 최소화, 대신 사용자가 직접 말하도록 유도하기

3) 전문가는 사용자이며, 우리를 가르쳐 달라고 부탁하기

4) 사용자에게 가이드를 주지 않기 (주작 X)

5) 목적 Goal을 먼저, 그리고 나서 왜Why, 어떻게 하는지를 task process 조사하기

6) 사용자에게 직접적으로 불만이나 아이디어를 묻는 것을 자제하기 → 사후 인터뷰에서 물어보는 게 좋음

7) 중립적인 자세를 유지할 것

8) 그 공간에서 사용자가 누구와 인터랙션 하는지 관찰하기

✴️ 사용자의 모습을 관찰하는거지, 개입하는 건 좋지 않음

 

 

2-2. 사용자 조사 준비

✏️사용자 조사 설계 프로세스

1) 조사 목적 정의     2) 조사 범위 정의 : 집중해야 할 범위가 어디까지인가

↓ 

3) 조사 방법 정의     4) 조사 대상자 기준 정의     5) 조사 대상자 모집

↓ ↑조사 설계 수정

6) 파일럿 테스트

↓ 

7) 조사 실행

↓ ↑후속 조사 실행

8) 결과분석

 

✏️사용자 조사 설계 프로세스 예시

1) 조사 목적

스마트폰으로 어떻게 쇼핑하는지 알아보자

2) 조사 범위

제품검색부터 결제까지의 과정

3) 조사 방법

✅(정량적 조사방법) 인터넷 설문

- 주요 사용하는 앱

- 사용 빈도

- 구매(결재)빈도

- 주로 구매하는 제품군

✅(정성적 조사방법) CI (contextual inquiry)

- 제품 검색

- 유사한 제품의 비교

- 페이서비스 가입

- 주문 취소

4) 조사 대상

- 모바일 쇼핑앱 사용자

- 최근 1개월 이내 구매경험이 있는 사용자

- 페이 서비스 경험이 없는 사용자

5) 조사 대상자 모집

6) 파일럿 테스트

- 대상 : 내부 사용자

- 테스트 범위 : 조사 전체 과정

- 테스트 제외 범위 : 사전 설문

7) 조사 실행

- 로케이션 (위치) : UT room

- 모더레이터 (진행자) : AAA, BBB

- 노트 테이커 (기록자) : CCC, DDD

- 옵져버 (관찰자)

- 촬영 : 사용자의 화면만 촬영

- 녹음 : YES

8) 결과 분석

- Affinity diagram : 키 팩터 도출

- Primary user scenario 정의

 

✏️원격 사용자 조사

✅시대 흐름이 변화하면서 원격 사용자 조사 방법이 중요해지고 있음

✴️1) ~ 8) 3 제외한 방법 동일

3) 조사 방법 (원격 사용자 조사시)

- 1 on 1 조사 (필요에 따라서는 일대다수도)

- 화면 녹화

- 테스트 환경 URL 사용자에게 공유 후 사용자에게 화면 공유 요청

- 테스트 완료 후 온라인 설문 링크 공유

 

✏️사용자 조사는 언제 하는걸까?

프로젝트를 진행하는 초반에도 진행하지만 '이건 어떻게 하지? 사용자는 이 부분에 대해서는 어떻게 행동하는지는 데이터가 없네? 그런데 이건 너무 중요해!'라는 판단이 들 때도 실행

 

✏️사용자 조사의 큰 틀 정하기

1) 조사의 배경 및 목적

2) 구체적으로 파악하고자 하는 내용

3) 일정 (리크루팅하는 시간부터 모든 조사 실행이 끝나는 시간까지 고려)

4) 적용할 조사 방법 (Method)

5) 대상 및 구성

6) 비용 (리크루팅, 사례비 등)

 

✏️조사 계획서

왜? (배경)

무엇을? (어떤 조사방법) 

어떻게? (어떻게 조사할지)

얼마나? (조사 범위, 집중해야 할 거)

누구랑? (우리 사용자는 누구인지)

✴️빠트린 부분이 없는지 더블 체크하는 용도

✴️이해관계자와 커뮤니케이션할 때 도움됨

 

✏️사용자 모집하기 : User screening guide

사용자를 선별할 때 사용

 

✏️사용자 모집 방법 : In house or out sourcing

1) in House 내부적으로 직접

2) ask Agency 전문 업체에 의뢰

 

✏️파일럿 테스트는 왜 필요할까?

✅드레스 리허설 Final chance to tune

실제처럼 하는 거, 점검하고 다듬는 마지막 기회

✅시간 확인 Operation time check

✅변수 확인 Variable Check

✅기술적 점검 Technical Check

데이터들이 미리 준비가 잘 되어 있는가

 

✏️파일럿 테스트 프로세스

1) 조사 계획서 작성

2) 파일럿 테스트 범위 설정

3) 질문지 작성 > 4) 테스터 모집 > 5) Lo-fi 프로토타입 제작

6) 테스트 실행

✅체크리스트

- 계획된 시간안에 완료되는가?

- 확인 필요한 항목을 모두 커버하는가?

- 표현이 모호한 질문은 없는가?

- 질문은 사용자 수준과 매칭되는가?

- 프로토타입은 알맞게 동작하는가?

- 서버/네트워크 연결 등 테스트 환경은 이상없는가?

7)결과 분석

✴️결과 분석 후 조사 계획 및 프로토타입 수정

 

 

2-3. 사용자 조사결과 분석 및 모델링

 

✏️사용자 조사 결과를 통해 얻을 수 있는 것

✅결과는 사용자 조사가 끝난 후 즉시 분석하기!

1) 대상 도메인에 대한 더욱 깊은 이해

2) 사용자의 내제된 요구사항과 존재하는 불만 요인 파악

3) 시퀀스(행동의 순서)에 따른 사용자의 감정 변화 파악

4) 사용자의 심성 모델(Mental model) 파악

5) 전반적인 사용 경험 및 학습 수준에 대한 파악

6) 사용 동기(motivation)와 작업 과정(task flow, Jobs to be done) 파악

↓

✅이를 바탕으로

1) 사용자 행태와 니즈에 대한 명확한 이해 : 사용자에 대한 공감

2) 시장의 수준과 서비스의 진입 장벽 (huddle)

3) 디자인 컨셉/가설 평가

4) Shed light on users : 모르는지 몰랐던 부분에 대한 이해

✴️사용자 조사 결과 분석은 UX 디자인을 하기 위해 필요한 실제적인 정보를 얻는 과정이므로 '여유가 되면 합시다'가 아니라 반드시 필요한 과정이다.

 

✏️분석하기 Step 1

✅Raw 데이터 정형화

Raw데이터란 단어 의미 그대로 조사 진행 당시 수집된 날 것의 형태인 데이터를 말한다.

- 오디오 녹음 파일

- 비디오 파일 : 화면 녹화 또는 조사 장면 녹화

- 노트 테이커(Note taker)와 관찰자(Observer)의 노트

- 설문조사 결과

- 정량적 측정 데이터 : Click-stream, PV(Page view), Activation count.Etc.

 

✏️분석하기 Step 1 : 녹취록 만들기

✅녹음 파일 또는 녹화 영상을 보고 모데레이터 moderactor와 조사 참가자 participant 사이의 모든 대화를 텍스트 형태로 변환한다.

 

✏️분석하기 Step 1 : 녹취록을 만드는 이유

녹취록을 작성하는 것은 많은 시간과 에너지가 동시에 요구되는 일이다. 그럼에도 불구하고 녹취록을 작성하는 이유는

✅모든 사람이 Raw 데이터를 사용할 수 없다.

정보 사용성이 떨어져서 (너무 많고, 일관된 형태로 제작되어 있지도 않다.) 사용하기 불편할 뿐만 아니라 경우에 따라 보안의 이유로 모든 이해관계자에게 raw공유가 허락되지 않을 수 있다.

✅기억은 편향적이다.

의도하지 않더라도 내가 원하는 방향으로 곡해하여 기억하게 될 가능성이 있다.

✅비언어적인 데이터 수집

조사과정을 촬영한 녹화 영상이 있다면 가장 좋겠으나, 사용성 테스트가 아닌 이상 인터뷰 형식의 조사 진행 모습을 비디오로 녹화하는 경우는 드물다. (굳이 그럴 필요까진 없기도 하거니와, 실제 해보면 얻는 내용에 비해 준비 과정에 품이 너무 많이 든다.)

하지만 녹취록 작성을 통해서도 충분히 대화의 맥락과 사용자의 비언어적인 행태를 파악할 수 있다.

✅데이터 정합성을 위한 안전장치

인터뷰를 반드시 2명 이상(진행자와 기록자)으로 구성하고 가능할 경우 관찰자도 포함하는 것과 같은 이유이다.

한 사람의 기억과 해석에 의존해 사용자의 답변을 해석하면 객관적인 데이터를 얻기 어렵다. 우리는 의도하지 않게 상황을 본인의 사고방식에 따라 해석할 가능성이 있기 때문이다.

 

✏️분석하기 Step 2 : 정보 구조화 하기

✅어피니티 다이어그램 Affinity diagram

데이터 정형화 작업을 통해 수집된 데이터들을 사용하기 좋게 잘 다듬어 놓았다면, 이제 그 데이터 더미들 속에서 유의미한 메시지들을 도출할 차례다. 정형화 작업을 한번 거쳤지만 아직도 사실상 불필요한 데이터(garbage data)가 어마 어마하게 틈틈히 박혀서 데이터를 분석하는데 불편함을 유발한다. 때문에 2차 정형화 과정으로 주요 사용되는 방법론이 어피니티 다이어그램이다.

 

✏️분석하기 Step 2 : 정보 구조화를 하는 이유

✅데이터 간 연관성/속성 파악

✅핵심 데이터 파악

✅데이터 사용성 향상

 

✏️어피니티 다이어그램 만들기 

1) Step 1

그룹핑 하기 > 리뷰 > 다시 그룹핑하기(수정)

2) Step 2

그룹의 이름 정하기(by Atribute) > 상위 그룹 정하기 (Optional)

 

✏️분석하기 : Object model = Artifact model

사용자가 과업을 수행하는 과정에 영향을 끼치는 도구(Tool or object)를 도식화 한 것이다.

✅사용하는 하드웨어와 소프트웨어를 모두 기록

✅해석할 때 어떤 행위를 할 때(목적) 어떤 도구를 사용하는구나를 알 수 있음 = 사용자에게 영향을 끼치는 도구 파악

 

✏️Object model = Artifact model을 통해 얻을 수 있는 것

✅사용자가 무엇과 인터랙션을 하는지 알 수 있다.

✅행동 유발의 계기 및 문제점을 발견할 수 있다.

✅특정 artifact의 사용 전후로 인한 변화를 이해할 수 있다.

✅(특히 환경적) 장애 요인을 파악할 수 있다.

 

 

▶UIUX 디자인 툴(Figma)

 

강사님 : 이영주 강사님

 

Chapter 1. Figma소개와 설치

 

1-1.Figma 소개, 1-2.Figma 설치

 

✅기획, 디자인, 프로토타입 등에서 이용 가능

✅협업 용이

✅xd, sketch는 공유할 때 제플린을 이용해야 한다는 불편함이 있음

 

 

Chapter 2. Figma 인터페이스

 

2-1.브라우저모드와 데스크 모드

 

✅draft : 지금 작업중인 파일

✅community : 사람들이 공유한 키트, 아이콘 등을 받거나 커뮤니티에 들어갈 수 있음

✅팀 만들어서 파일 이동 가능

✅Favorite files : 자주 사용하는 즐겨찾기 할 수 있음

 

2-2.에디트 모드

 

✅디자인 - 프로토타입 - CSS 코드

✅?툴로 키보드 단축키 볼 수 있음

❗우왕 프로토타입 신기. 자연스럽게 목업이 입혀지네.

❗CSS 코드 되는 것도 신기하다. 협업 툴로 많이 사용하는 이유가 있군.

 

4.  미리 할 것

4-1. 제로베이스

Task Flow 강의 미리 듣기

피그마 강의 미리 듣기

'사용자를 생각하게 하지마!' 책 읽기

 

4-2. 학교 수업

산업디자인 졸업전시 데이터 제출 - 리플렛, 인스타그램 썸네일 만들어서 제출/ 도록, 웹데이터 작성 

산업디자인 졸업전시 목업 - 퍼티, 서페이스, 사포까지 진행

아이덴티티 디자인 - 디자인 컨셉(로고,색상 등) 진행

타이포그래피 - (붙임) 포함해 재정리

UX디자인 - 스타일 가이드, 웹디자인 메인페이지 완성