[ 디자인 철학 ]

디자인 요소 계산

 

[ 강의 내용 ]

 

 

[ 표현 - 타이포그라피 ]

디자인 요소를 최소화 시킨 화면

 

- 의미 없이 사용된 색상 표시, 볼드 값, 폰트 크기 조절 등을 쓰임에 맞게 조절하고 통일성을 주는 것이 중요하다.

 

 

[ 표현 - 컬러 ]

 

- 그레이 스케일(회색조)을 사용하여 컬러를 정제했다.

- 포인트 컬러를 활용하여 톤온톤 형태의 버튼을 구성했다.

- 컬러를 정제하여 사용자에게 필요한 내용만 인지할 수 있게 유도했다.

 

 

[ 표현 - 레이아웃 ]

 

- 컨텐츠가 들어가는 모듈과 모듈 사이의 간격 또한 하나의 디자인 요소로 보여진다.

- 최소한의 간격을 사용하는 것이 좋다.

 

 

[ 의도 - 테스트 강약 ]

 

- 텍스트의 강약이나 레이아웃을 통하여 어떤 의미로 사용자들과 커뮤니케이션 할지 달라질 수 있다.

 

 

[ 의도 - 컬러 반영 ]

 

- 클릭 요소 부분과 정보를 전달해야 하는 부분의 구분이 확실해야 하고, 클릭 이벤트가 있는 요소에 포인트 컬러를 반영하여 의미를 명확하게 전달할 수 있다.

 

 

[ 규칙 - 타이포그래피 ]

 

- 1~100가지의 타이포그래피의 사이즈나 굵기가 있다고 하면, 전체 사용하는 것이 아닌 디지털 프로덕트를 구성하기 위한 최적화된 사이즈나 굵기의 개수를 한정적으로 규정하여 사용한다.

- 컨텐츠의 속성과 볼륨에 맞게 매칭되는 타이포그래피를 반영할 수 있어야 한다.

 

 

[ 규칙 - 컬러 ]

그레이스케일과 포인트 컬러 팔레트

 

- 정제된 컬러를 사용하여 사용자에게 전달하는 의미가 명확해질 수 있도록 한다.

 

 

[ 규칙 - 아이콘 ]

 

- 아이콘 타입의 개수도 최소한의 사이즈를 정제하여 사용한다.

- 기본 3~4개의 볼륨을 구분하여 사용한다.

- 프로젝트에 따라 사이즈의 개수가 달라질 수 있겠지만 최대한 정제하여 사용하는 것이 효과적이다.

 

 

[ 규칙 - 그리드 ]

그리드 규칙과 활용

 


[ 규칙 - 모듈 ]

 

- 일관된 모듈 시스템과 컨텐츠의 맥락에 맞는 규칙적인 정보 구성으로 정보의 혼선을 줄이고 고객의 사용성을 높혀서 빠른 컨텐츠 이해를 돕는다.

- 빠른 컨텐츠 이해는 사용자에게 좋은 경험을 얻게 한다.

 

- 이미지 비율과 형식도 규칙적으로 사용하게 되면 디지털 환경에서의 관리의 리소스를 최소화 할 수 있다.

 

 

 

 

 

 

* 이 글은 제로베이스 UIUX 디자인 스쿨 주 3일반 강의 자료 일부를 발췌하여 작성되었습니다.

> 강의 구성

Chapter 7. 퍼소나 알아보기
Chapter 8. 퍼소나 실습
Chapter 9. 사용성 테스트 알아보기
Chapter 10. 사용성 테스트 수행하기1
Chapter 11. 사용성 테스트 수행하기2
Chapter 12. UX리서처의 포트폴리오

 

> 강의 내용 정리

 

[ 퍼소나 알아보기 ]

: 우리 제품이나 서비스를 사용하는 고객군을 대표하기 위해 가상으로 만든 인물

- 서비스 기획, 제품 개발, 디자인 등 많은 분야에서도 활용

- 시간에 따라 변화될 수 있는 존재로 인식해야 한다.

 

 

  < 퍼소나를 위한 문제 정의: 문제 기술의 3요소 >

    1. 서비스의 현재 목표

    2. 서비스에 대해 사업의 이해 관계자가 다루고자 하는 문제

    3. 서비스의 구체적인 솔루션이 아닌 개선을 위한 명확한 요구 사항

 

  < 퍼소나를 위한 비즈니스 가정 >

 

  < 퍼소나를 위한 사용자 가정 >

    1. 사용자는 누구인가?
    2. 그들의 일이나 삶에 있어서 우리 제품이 적합한 곳은 어디인가?
    3. 우리 제품이 풀어야 할 문제는 무엇인가?
    4. 언제 그리고 어떻게 우리 제품이 활용되는가?
    5. 어떤 기능이 중요한가?
    6. 우리 제품은 어떻게 보이고 활용되어야 하는가?

 

  < 프로토 퍼소나 만드는 과정 >

    - 항상 그렇듯, 먼저 가설을 설정하고 이후 실제 리서치를 통해 입증하는 과정을 거친다.
    - 가정단계에서 '프로토 퍼소나'를 정의
      이후 다듬어 완성한 것이 '타겟 퍼소나
    - 프로토퍼소나는 누가? 왜? 우리 제품을 사용하는지/할지에 대해 할 수 있는 최선의 추정
    - 팀원 모두 종이 위에 가볍게 프로토퍼소나를 그려본다.
    - 계속되는 사용자조사를 통해 가정을 입증하면서 프로토퍼소나를 수정
    - 프로토퍼소나는 충분히 조정될 여지가 있고, 아니다 싶으면 버릴 수도 있다.

 

 

[ 퍼소나 실습 ]

 

 

 

 

[ 사용성 테스트 알아보기 ]

사용성 테스트 (Usability Test)
: 사용자에게 특정 과업을 수행하도록 과제(Task)를 부여한 뒤 그 일을 진행하는 과정(행동)을 관찰하는 방법.


- 의도한 서비스 시나리오대로 유저가 행동하는지 아닌지 알 수 있음
- 필수적인 컨트롤 요소를 인지/이해/예측/실행 하는지 알 수 있음
- 이외의 다양한 컨트롤 요소를 인지/이해/예측/실행 하는지 알 수 있음

 

< 사용성 평가(Usability Test)와 유저 테스트(User Test)는 다른 개념이다 >
: 사용자가 000(기능)을 통해 XXX(다음 단계 진행)을 할 수 있는가? 

  할 수 없다면 문제점은 무엇인가?
  고객(User)이 우리가 제공하고 있는 서비스의 구조와 기능을 의도한 대로 인지 / 이해 / 예측 / 실행 할 수 있는가?

- 인지: 사용자가 눈으로 확인/발견 하였는가
- 예측: 무엇을 하는 기능인지, 또는 다음 화면을 어떻게 예상하였는가
- 이해: 사용자가 무엇이라고, 또는 어떤 의미로 이해하였는가
- 실행: 예측과 일치하지 않는 부분 or 일치하지 않는 부분

 

 

< 사용성 테스트의 일반적 과정 >
  1. 참여자를 모집한다
  2. 우리의 서비스를 사용해 보도록 한다
  3. 진행자는 참여자가 길을 잃지 않도록 안내한다
  4. 참관자들은 고객의 행동을 관찰한다
  5. UT가 끝나면 도출된 이슈에 대해 브리핑
  6. 빠르게 개선한다
  7. 반복한다

 

--> 꼭 정석적인 사용성 테스트를 할 필요는 없다

 

<  스티븐 브룩의 사용성 원칙 Top 3 >

✓ 제 1법칙
  사용자를 고민에 빠뜨리지 마라, 모든 페이지는 쉽고 분명해야 한다.
  사용자는 작동방식까지 이해하려 하지 않는다. 
✓ 제 2법칙
  고민없는 명쾌한 클릭이라면 클릭 수는 중요하지 않다.
  고민없는 세번의 클릭이 심사숙고 해야하는 한번의 클릭보다 낫다.
  사용자는 최선의 선택을 하지 않는다. 최소 조건만 충족되면 만족한다.
✓ 제 3법칙
  쓸데없는 말을 줄이고 본론부터 얘기해라 사용자는 페이지를 읽지 않고 훑어본다.

 

 

[ 사용성 테스트 수행하기 ]

단계별로 나눈 사용성 테스트

 

[ 사용성 테스트 문제 정의 ]
: 문제 정의는 사용성 테스트에서도 가장 중요한 부분
  무엇에 대해 테스트 할지, 누구에게 어떻게 질문할지 등을 고려하는 단계


  < 초보자가 문제 정의 단계에서 자주 하는 실수 >
    - 데이터를 그저 반복해서 수집
    - 깊은 분석 없이 일반적이고 피상적인 분석이나 단순한 설문을 진행
    - 질문을 작성할 때 깊이 고민하지 않음

좀 더 명확한 문제 정의를 위해서는
- 내가 해결하고자 하는 문제에 직접 연관된 사람(고객)들을 만나서 인터뷰를 해보자
- 해결하고자 하는 문제의 구조를 분해해보자
- 구체적으로 어떤 데이터를 살펴봐야 할지 고민해보자
- 실제 문제를 분석하기에 앞서 현 상황에서 고객의 상황을 시뮬레이션 해보자
- 고객 행동에 대한 가설을 세워보자

 

*실습을 위한 팁 
: 내가 개선하고자 하는 프로덕트/서비스를 하나 선택하여 그에 대한 문제 정의를 해보고 리서치 계획을 세워보자

 

[ 사용성 테스트를 위한 데스크 리서치 ]
- 데스크 리서치는 서비스와 관련된 외부 상황(트렌드, 시장환경 변화)부터 서비스의 내부 상황(조직, 협업 구조, 서비스 시스템)까지 다방면으로 서비스가 놓여있는 상황을 파악하기 위한 방법론
- 문제 정의 단계에서는 내가 해결하고자 하는 문제에 직접 연관된 사람을 만나봤다면, 데스크 리서치에서는 다른 사람이 리서치 한 것을 찾고 검토하는 것
- 내가 개선하고자 하는 서비스에 대한 <통계 분석 / 트렌드 분석 / 벤치마킹 / 사용성 평가 / VOC분석 등>을 수행하는데, 회사에서 직접 데이터를 얻을 수 없다면 <논문, 기사, 리포트 자료 등> 여러 방면으로 찾아보자


[ 사용성 테스트를 위한 데스크 리서치 ] 
: 최상의 리서치는 <사용자 / 사용자의 환경 / 서비스의 목표> 3가지 관점이 겹치는 지점이다
1. 서비스를 이용하는 사용자는 누구인지 파악해보자
2. 그 사용자가 서비스를 사용하는 환경과 맥락은 무엇인지 파악해보자
3. 서비스가 목표로 하는 것은 무엇인지 파악해보자

 

*실습을 위한 팁
: 내가 개선하고자 하는 프로덕트/서비스에 대한 문제 정의가 어느정도 되었다면 현황을 파악하기 위한 데스크 리서치를 수행해보자

[ 사용성 테스트를 위한 이해관계자 인터뷰 ]
리서처가 이 단계에서 해야할 일
- 이해관계자에게 issue or task 목록 작성을 요청하자
- 이슈 논의는 항상 함께 공유되어야 한다
- 주요한 이슈를 추리고 그 중에서 가장 중요한 것을 함께 논의해보자
- 이해관계자의 기분을 나쁘게 하는 커뮤니케이션은 자제하자
- 논의 전에는 항상 어떤 내용에 대해 이야기 할 것인지 미리 주제를 전달해주자


*실습을 위한 팁 
: 내가 개선하고자 하는 프로덕트/서비스를 직접 만들고 있는 사람을 찾기 어렵다면, 내가 이 서비스를 기획하는 사람이라고 가정하여 이슈 목록을 작성하고 그 중 서비스의 목표에 부합하는 우선순위 이슈를 찾아보자


[ 사용성 테스트 태스크(Task) 작성하기 ]
- 각 화면, 세부영역 별로 <사용자가 할 수 있어야 하는> Task를 작성해보자
- 문제 정의와 데스크 리서치 등에서 수집한 정보를 바탕으로 현재 해결해야 할 문제에 집중
- Task 작성은 처음에는 브레인스토밍을 통하여 아이디어를 수집하고 우선순위 작업을 통해 먼저 확인할 내용을 정리한다

 

 

 

< 리서치 대상자 선별 >
-  리서치 대상자를 <아무나> 해도 된다고 생각하면 안 되고 해결하고자 하는 문제에 집중된 사용자를 찾아야 한다
-  가장 좋은 것은 고객 데이터를 보유하여 인구통계학적 정보나 고객의 행동데이터를 통해 선별하는 것이지만, 그 작업이 힘든 경우는 직접 사용자 그룹을 구분하는 작업을 해보자

리서치 대상 그룹을 4가지 축으로 구분하여 리서치 대상 선별의 우선순위를 살펴보자


- 여기에서 대상 고객은 앞서 문제 정의/데스크 리서치/이해관계자 인터뷰 등의 과정에서 발견한 정보를 기반으로 선정해야 한다

 

*실습을 위한 팁
: 앞서 수집한 정보들을 기반으로 리서치 대상에 적합한 고객들의 특성을 정의해보자(연령대, 서비스 이용 패턴, 고객의 니즈 등

< 리서치 참여자 사전동의 >
: 리서처는 항상 리서치에 참여하는 고객에 대해 사전 동의를 받아야 한다
- 사용성 테스트 시 화면 녹화, 녹음에 대한 동의
- 비밀 유지에 대한 동의
- 개인정보 수집 및 이용에 대한 동의

< 리서치 참여자 모집하기 >
- 참여자 선별 후 대상자에게 참여 여부 / 리서치 일정 / 리워드 등을 안내
- 사용성 테스트 진행 시 필요한 준비를 미리 안내(앱 설치 또는 원격 연결 등)
- 화면을 함께 보면서(미러링) 전화로 진행하는 경우 이어폰을 준비하도록 함
- 조용한 장소에서 진행하도록 요청하며, 이동 중 / 운전 중에는 진행이 불가함을 안내
- 대면으로 진행할 경우에는 조용한 회의실 등에서 주변 소음에 방해받지 않도록 진행

< 진행자(모더레이터)로서 저지르는 실수 >
- 말을 너무 많이 하지 말라
- 디자인을 설명하지 말라
- 참여자의 질문에 답변하지 마라
- 자꾸 인터뷰를 하려고 하지말고 사용성 테스트를 하라
- 대답을 유도하거나 선호도를 묻지 말라

[ 결과 정리 및 리뷰 ]
- 애자일한 사용성 테스트에서는, 각 세션이 끝난 후 발견한 이슈에 대해 짧게 요약을 한다
- 모든 세션이 끝난 후에는 사용성 테스트에 참관한 사람들에게 브리핑을 한다
- 빠르게 다음 사용성 테스트를 준비 할 것인지 아니면 깊은 분석을 할 것인지 의사결정을 진행
- 위 과정이 끝난 이후에는 결과를 분석하여 이후 Action Item을 도출
- 별도의 리뷰 세션을 통해 결과를 리뷰하고 다음 스텝으로 향하자

< 리서치 이후에 해야 할 것들 >
- 다음 리서치 스텝 고려
- 리서치 결과 아카이브
- 참여자 리워드 제공
- 리서치 녹화 및 녹음자료 등 적재
- 유관 부서 이외에도 리서치 결과 공유
- 팀 내 리서치 진행내용 회고

 

 

 

* 이 글은 제로베이스 UIUX 디자인 스쿨 주 3일반 강의 자료 일부를 발췌하여 작성되었습니다.

> 강의 구성

Chapter 1. UX & UX Researcher
Chapter 2. 리서치에 대한 마음가짐
Chapter 3. 사용자를 이해하기
Chapter 4. 비즈니스 관점과 사용자 관점
Chapter 5. 더블 다이아몬드 방법론과 리서치
Chapter 6. 리서치의 방법론들

 

> 강의 내용 정리

 

[ UX&UX Resercher ]

- UX: 사용자 경험(시스템, 제품, 서비스를 직접적으로나 간접적으로나 이용하며 느끼는 '총체적인 경험')

- UXR: 사용자가 느끼는 경험을 관찰, 분석하여 고객의 진짜 문제(Pain-Point)를 찾는 것

- Usability: 사용성(사용 경험을 통해 얻게 되는 '사용자 편의성'

     = 평균적인 능력과 경험을 지닌 사람이 어떤 도구를 통해 무엇을 수행하고자 할 때, 고민이나 망설임 없이 '스스로' 사용법을 알 수 있어야 한다.

 

  < UX 리서처는 하는 일에 따라 역할이 다르다 >

    - 본인이 속한 회사의 방향성이나 상황에 따라 수행하는 리서치의 범위가 다르다

    - 리서처가 되고 싶다면 본인이 하고 싶은 일에 필요한 리서치가 무엇인지 파악하는 것이 좋다.

    - 모든 방법론을 수행하는 것에 대한 부담은 가질 필요 없다.

 

  [ UX 리서처의 목표 ]

   : 고객이 서비스를 편리하게 이용하고, 쾌적한 사용자 경험을 얻을 수 있게 하는 것

 

 

[ 리서치에 대한 마음가짐 ]

1. 문제 이해 단계

  - 데이터를 얻기 전에 이론 또는 가정을 미리 세우는 것은 큰 실수이다.

    이렇게 되면 사실에 맞춰 이론을 수정하는 게 아니라 이론에 맞춰 사실을 왜곡하게 된다.

    '인지부조화'

 

  < 문제를 올바르게 이해하려면 >

    - 문제에 대해 깊이 생각해보기

    - 명확한 리서치 질문을 만들기

    - 질문들을 만들기도 전에 리서치 하지 않기

    - 이전에 해봤던 질문이라도 다시 물어보기(중복체크)

    - (중요)동료와 회사가 이미 가지고 있는 정보를 확인하기

    - 회사의 내부 이해관계자를 인터뷰하기

    - 체크리스트를 작성하여 배경 정보를 체계적으로 수집하기

    - (중요)아무것도 추측하지 않기

 

 

2. 정보 수집 단계

  - 관찰은 UX 리서치의 필수적인 요소이다.

  - 선입견을 가지고 판단하지 말고 그대로를 살피는 능력을 길러야 한다.

  - 관찰한 것을 해석하거나 솔루션에 끼워맞추지 않아야 한다.

 

  < 올바르게 정보 수집을 하려면 >

    - 사람들의 실제 행동하는 것을 관찰하기

    - 관찰 대상보다 내가 더 많이 안다고 생각하지 말기

    - 사람의 행동에 대해 가장 일상적인 것과 중요한 것에 집중하기

    - 사람을 관찰할 때 특정 행동(Task)의 전 후 맥락(Context)을 파악하기

    - 사람들이 불편함을 느끼는 지점(Pain-Point) 찾기

    - 사람들의 행동에 중간에 끼어들지 않기

    - 사소한 행동에도 주의를 기울이기

 

 

3. 가설 설정 단계

  - UX 리서처는 인간의 행동, 기술적 진보, 시장 트렌드 등에 대한 지식을 활용해 리서치에서 수집한 사실들에 가장 잘 맞는 가설을 세워야 한다.

 

  < 파악해야 하는 것 >

    - 목표

    - 수행하는 테스크의 작업 흐름

    - 멘탈 모델

    - 도구

    - 일하고 있는 환경

    - 사용하는 용어

 

 

4. 가설 우선순위 설정&솔루션 도출 단계

  - 가장 중요한 문제에 집중해야 한다.

  - 성공적인 솔루션을 위해 성공 가능성이 낮는 솔루션을 제거한다.

 

  < 소거법을 통해 올바른 솔루션 도출 >

    - 솔루션이 실제 조사 결과에 부합하는지 확인한다.

    - 솔루션 선별은 항상 근거가 있어야 한다.

    - 편향 없는 선별에 집중한다.

 

 

5. 솔루션 도출 이후 단계

  - 항상 결과를 공유하고 내부에 전파하자.

  - 구체적이고 실행 가능한 디자인 제안 사항을 제공하자.

  - 여러가지 프로토타입을 테스트 하도록 계획을 세워 반복하는 것을 제안한다.

  - 리서치 방법론에 대해 내부에 전파할 수 있도록 교육을 실시한다.

 

 

[ 사용자를 이해하기 ]

: 사용자에 대한 4가지 기본 원칙

 

1. 사용자는 당신처럼 생각하지 않는다.

  - 우리는 사용자가 알고 있는 것을 모를 수 있다

  - 프로덕트를 만드는 사람들은 항상 사용자의 기술적 숙련도를 과대평가 하는 경향이 있다.

  

2. 사용자는 자신의 행동에 대한 이유를 잘 알지 못 한다.

  - 사람들은 행동의 이유를 마음 속으로 분석하는 데에 서투르다.

  - 사람들에게 그들에 행동에 대한 이유를 분석해달라고 하는 것은 쓸모가 없다.

 

3. 사용자의 미래 행동을 가장 잘 예측하는 방법은 그들의 과거 행동을 보는 것이다.

  - 여론 조사는 사람들에게 그들의 미래 행동(의도)를 예측하기 위함이다.

  - 출구조사는 사람들에게 과거에 무엇을 했는지(행동)를 묻기 위함이다.

    행동을 조사하는 것(Action Reserch)은  UX 연구원의 분야이다.

 

4. 사용자의 행동은 상황에 따라 달라질 수 있다.

  - 같은 사람이라도 환경이 달라지면 다르게 행동할 수 있다.

  - 사용자가 프로덕트를 어떻게 사용할지 예측하는 방법은 자연스러운 실제 환경에서 그들을 관찰하는 것이다.

 

[ 비즈니스 관점과 사용자 관점 ]

- 회사는 대부분 자신들의 서비스를 과대 평가하는 경향이 있다.

  실제 사용자들의 평가를 통해 이의 간극을 줄여야 한다.

 

  < 회사에서의 UX 성숙도 6단계 >

   1단계: UX의 부재

       - UX가 무시되거나 존재하지 않은 상태

   2단계: 제한적인 UX

       - UX와 관련된 작업이 거의 없고 우연히 이루어지거나 중요도가 떨어짐

   3단계: UX 발현

       - UX와 관련된 작업이 가능하기 시작하고 발전 가능성은 있지만 일관성이 없고 비효율적으로 수행됨

   4단계: 구조화된 UX

       - 조직 전반에 걸쳐 UX와 연관된 방법론이 퍼져있지만, 효과와 효율성의 정도가 서로 다름

   5단계: 종합적인 UX

       - UX와 관련된 일들이 포괄적으로나 효과적으로 수행되고 광범위하게 일어남

   6단계: 사용자 중심 UX

       - 모든 수준에서 UX에 집중하며 통찰력과 사용자 중심 디자인을 이끌어냄

 

 

[ 더블 다이아몬드 방법론과 리서치 ]

- 첫번째 다이아몬드에서는 '맥락적 사용자 리서치'를 수행하며 관찰, 공감, 해석을 한다.

- 두번째 다이아몬드에서는 '반복적 디자인'을 수행하며 개발, 측정, 학습을 한다.

 

1. 발견 단계

   - 문제를 탐색, 발견 하는 단계

   - 진짜 문제가 무엇인지 찾아야 함

   ex) Ethnography, 내부 이해관계자 인터뷰, 설문 등..

 

2. 정의 단계

   -발견한 문제 중 진짜 문제가 무엇인지 이해하고 우선순위를 결정하는 단계

   ex) 발견 단계 리서치 결과 분석, 퍼소나, 고객 여정 지도 등..

 

---> 1, 2 단계 분석

  •        시간을 많이 들이지 않지만 간과해서는 안 되는 과정
  •        뛰어난 사용자 경험을 만들 수 있는 기회가 많은 단계

 

3. 개발(발전) 단계

   - 우선 순위가 높은 문제 해결을 위해 구체적인 개선을 위한 아이디어를 논의하는 단계

   ex) 디자인 컨셉, 디자인 구체화, 프로토타입 제작 및 검증 등..

 

4. 전달 단계

   - 개선 아이디어 중 실현 가능한 것을 최종 안으로 정리 후 배포하는 단계

   ex) 사용성 테스트, 모니터링, 휴리스틱 평가(전문가 평가) 등..

 

---> 3, 4 단계 분석

  •        사용성 테스트 후 수정과 반복을 하는 단계
  •        발견/정의 단계에서는 '현장 리서치', 발전/전달 단계에서는 '사용성 테스트'를 진행해야 한다.

 

[ 리서치의 방법론들 ]

여러가지 방법론 표

 

사용자 경험 연구 방법론을 여러 관점으로 봤을 때 나뉘는 기준 >

     - 행동적 조사

     - 태도적 조사

     - 정량적 조사: 통계적 유의성을 필요로 하기 때문에 최소 30-40명의 대상을 필요로 함

     - 정성적 조사: 사용자의 전체 문제점을 파악하기 보단 큰 문제를 빠르게 찾아내기 위함

     - 맥락적 관점에 따른 기준: 연구자가 준비한 환경에서 진행하는 방법

자주 사용되는 방법론

 

 발견 단계: 사람들이 무엇을 필요로 하는지 이해하고 요구사항을 수집하는 단계

  -  탐색 단계: 문제가 발생하는 부분과 디자인의 범위를 이해하고 사용자 니즈를 파악하는 단계

  -  테스트 단계: 개발 중이나 이후 단계에 대해 해당 서비스를 사용한 사용자가 문제 없이 이용하고 있는지 확인하는 단계

  -  리뷰 단계: 만들어진 테스트까지 진행된 프로덕트에 대해서 배포가 됐으면 사용자들의 피드백을 통해 데이터를 분석하고, 정보들의 패턴과 추세를 모니터링하는 단계

 

 

 

 

 

 

* 이 글은 제로베이스 UIUX 디자인 스쿨 주 3일반 강의 자료 일부를 발췌하여 작성되었습니다.

> 강의 구성

8-1 UX 디자이너에게 필요한 기본 개념: PART 1
8-2 UX 디자이너에게 필요한 기본 개념: PART 2
8-3 UX 디자이너의 포트폴리오

 

> 강의 내용 정리

[ 디자이너에게 필요한 기본 개념: PART 1 ]

 

 1. A/B Test

  -  가설 수립

  -  변수 설정

  -  A/B 시안 제작

  -  조사 설계 (기간, 대상, 방식, 지표 등 포함)

  

 -> 가장 유명한 A/B 테스트로는 넷플릭스가 실행했던 테스트가 있다. 

UI 버튼 텍스트 시안에 따라 클릭 발생률을 조사

 

[ A/B Test Process ]

  -  테스트를 하기 전, 명확한 가설 수립이 가장 중요하다.

  -  명료한 결과를 위해서 하나 이상의 통제 변수 설정이 필요하다.

  -  시간에 의한 변수 발생으로 평가에 영향을 끼치는 것을 대비하여 동시에 테스트 실시한다.

[ GOMS ]

: Goals, Operation, Method, Selection Rules

 수학적이고 실험적인 조사방법이다.

[ Affordance ]

: 행동 유도 (기표를 통해 직관적으로 사용 방식 인지)

밀고 당기는 손잡이 모양에 대한 예시

[ Metaphor ]

: 새로운 개념을 쉽게 받아들일 수 있도록 친숙한 이미지/오브젝트를 사용하는 방법.

  - 친숙하고 직관적이지만 불편함과 불필요함의 단점이 있을 수 있다.

 

[ Heuristic evaluation(a.k.a. 전문가평가) ]

 

 

 

[ 디자이너에게 필요한 기본 개념: PART 2 ]

 

[ Design Constraint 디자인 제약 사항 ]

  - 디자인을 하는 데에 존재하는 제약 조건 ( Restriction )

  - 사용자를 위해 설정하는 제약 조건 ( Limitation )

디자인 제약에 대한 예시

 

[ Cognitive Workload 인지부화 ]

  - 좋은 디자인은 인지부화가 낮고 직관적으로 이해할 수 있어야 한다.

  - 과도한 정보량, 알 수 없는 아이콘 사용, 과도한 자극을 주는 디자인은 인지부화를 줄 수 있다.

분리수거 쓰레기통에 대한 예시

 

    < 인지부화를 관리하기 위한 방법 >

 

[ Fitts's Law ]

: 사용자가 목표로 하는 위치에 얼마나 빠르게 도달하는 지에 대한 것을 수학적으로 계산한 법칙 

 

 

[ Hick's Law ]

: 선택 가능한 양과 선택에 걸리는 시간에 대한 것을 수학적으로 계산한 법칙

   - 사용자에게 제공되는 선택지가 많아질수록 사용자의 선택에 대한 시간은 느려진다.

   - 하지만 사용자가 정보에 친숙하거나 해당 분야에 전문가라면 많은 양의 정보를 제공하는 것이 오히려 좋다.

 

 

 

 

 

 

* 이 글은 제로베이스 UIUX 디자인 스쿨 주 3일반 강의 자료 일부를 발췌하여 작성되었습니다.

> 강의 구성

7-1 프로토타입 Prototype
7-2 프로토타입의 제작과 활용
7-3 MVP (Minimum Viable Product)
7-4 사용성 평가
7-5 사용성 평가 분석

 

> 강의 내용 정리

 

[ 프로토타입 Prototype ]

: 미리 만들어보는 것

  - 어떤 형식으로든 프로토타입의 기능을 할 수 있다.

  - Test early, Test often 더 빨리 더 자주 하는 것에 목표를 둔다.

 

- 프로토타입은 환경에 따라 자유롭게 제작할 수 있다.

  • Lo-fi prototype (초기 컨셉)
    • No time + Early stage = Concept evaluation
    • 관련 툴: 화이트보드, 종이, 펜, PPT, Balsamiq 등
    • 저렴한 제작 비용과 시간 절약 가능
    • 손쉬운 수정
  • Hi-fi prototype
    • Time + (Almost) Final stage = Realistic usability
    • 관련 툴: 인비전, 피그마, 프래이머 등
    • 시간적 여유가 필요할 수 있음
    • 현실적인 디자인 검증 가능
    • 인터랙션 개발 리뷰
    • 시나리오 검증

[ 프로토타입의 활용 ]

  1. 제작 목적 정하기

  2. 제작 범위 정하기

      - 전체 시나리오에서 타켓 유즈 케이스에 해당하는 부분

      - 어느 정도 디자인이 되고 나면 scope를 정하는 게 필요

   3. 제작 툴 정하기

     - 상황에 맞게 Hi-fi / Lo-fi 형태로 프로토타입을 제작한다.

 

   4. 프로토타입 만들기

     - 일광성을 정하여 넘어가는 화면을 제작해본다.

 

   5. 프로토타입 공유하기

 

   6. 피드백 수집

      - 포인트를 찝어서 코멘트를 남길 수 있는 기능이 있어 편리하다.

특정 컴포넌트를 찝어 다양한 사용자들의 피드백을 얻을 수 있음

 

 

[ 프로토타입을 통해 얻는 점 ]

  - 검증

  - 이해, 확인

  - 개선사항 도출

  - 다양한 피드백 수집

  - 사용자 테스트 실행

 

 

[ MVP (Minimum Viable Product) ]

: 최소 기능의 제품.

 최소한의 노력으로 만들어진 제품으로, 최대한의 유의미한 사용자 피드백을 얻기 위한 최소한의 것

Lean UX design process에 기반한 MVP

 

< 보통의 진행 프로세스 흐름 >

 

   - 기능을 먼저 만든다.

   - 기능을 퀄리티 높게 만든다.

   - 사용자에게 테스트 업데이트를 진행한다.

   - 재미요소나 추가 기능 등을 추가한다.

 -> 최소한의 기능으로 전체적으로 보여줄 수 있게끔 만드는 것이 핵심이다.

 

[ MVP Process ]

: 추후에 생길 큰 문제점에 대한 처리를 방지하기 위해 미리미리 대비하고 수정, 보완한다.

  - 프로토타입과 만들어진 형태는 그렇게 다르지 않다.

  - 하지만 목적에 따라 구분될 수 있다. 

    개선 방안과 방향을 바꾸는 Pivot의 두가지로 나뉠 수 있다.

 

< MVP step >

 

   Step1. 핵심 기능 정의

     -  시나리오를 바탕으로 MVP를 정할 수 있다.

     -  주요 기능 기준으로 정의한다.

   Step2. 제품 개발

     -  lo-fi 또는 hi-fi 프로토타입으로 만들어볼 수 있다.

     -  처음부터 높은 수준의 프로토타입을 만들기는 의미가 없다. (오히려 손해일 경우가 많음)

     -  데모 비디오나 컨셉 시나리오 만으로도 가능하다.

     -  실제 사용자를 만나보는 것은 느낌이 다르기 때문에 중요한 부분이다.

   Step3. 검증, 인사이트 도출

 

[ 좋은 사례 찾기 Best practice : Dropbox 사례 ]

: 관련 내용 찾아보기

 

(1) '환경 분석 및 문제 정의'를 통한 컨셉 도출

(2) 컨셉 정의 및 데모 비디오 공유

(3) MVP 데모 비디오 공유를 통해 배운 것

(4) 만족스러운 사용경험을 통한 유저 증가

 

 

[ 사용성 평가 ]

: 사용자가 제품을 제작 의도에 알맞게 편리하게 사용할 수 있는지 검증하는 것.

캐첩으로 보는 UI / UX / Usability의 차이

 

  -  내부 리뷰 및 UI 분석 (휴리스틱 검증)

  -  사용자 조사 및 경쟁사 비교 분석

  -  모든 시점에서 시행할 수 있다.

 

[ 사용자 평가는 언제해야 할까 ]

   -  언제에 대한 정답은 없다. 상황에 맞게 실행할 수 있다.

   -  제품 출시 전

   -  왜 잘 안 되지? (성장 요인 분석)

   -  왜 정체 되어있지? (업데이트 요건 파악)

   -  뭐가 문제? (개선 사항 도출)

 

 

 

[ 주요 테스트 시나리오 정의 (primary use case) ]

: 사용자 테스트에 사용할 주요 시나리오를 도출한다.

이때 주요 시나리오는 제품의 핵심 기능과 자주 발생하여 대부분의 사용성에 큰 영향을 미치는 시나리오를 선정한다.

 

 

[ 사용성 평가에 포함되어야 하는것 ]

 

 -  테스트 개요: 누구를 대상 할 건지? 어떤 순서로 할 건지?

 -  테스트 참가자 정보

 -  주요 발견점

 -  사용자의 주요 코멘트

 -  설문, 만족도 평가 등의 결과

 -  개선점 정의 + 우선순위 

 

[ 사용성 평가 프로세스 ]

 - Research point

  • Happy Path Comparison

 

  • Action time
    • 우리가 예상했던 task 수행 시간 vs 실제 사용자가 소요한 시간
    • 이를 통해 문제 UI 요소 도출
    • 참고: 피츠의 법칙 Fitts’ law
  • Informative components
  • Problem solve

 

 

[ 사용자 평가 분석 ]

 

< 사용자 평가 보고서 >

  - 보고서에 포함되어야 하는 내용

  1. 개요: 데이터 해석을 객관적으로 하기 위해 대상과 순서 등을 기재
  2. 테스트 참가자 정보
  3. 주요 발견점: 어떤 사고의 흐름으로 도출된 생각인지, 의견 포함, 해석, 주석 추가 가능
  4. 사용자의 주요 코멘트: 실제 유저의 톤을 확인을 위해 가공하지 않은 코멘트 사용 (현장성 유지)
  5. 설문, 만족도 평가 등의 결과
  6. 개선점 도출 및 정의 + 우선순위 정의

 

 

 

 

 

* 이 글은 제로베이스 UIUX 디자인 스쿨 주 3일반 강의 자료 일부를 발췌하여 작성되었습니다.

> 강의 구성

6-1 인터페이스 디자인 : UI 컴포넌트와 레이아웃
6-2 인터페이스 디자인: 디자인 환경과 디자인 시스템
6-3 인터페이스 디자인: 프로세스와 요구사항 정의
6-4 인터페이스 디자인: UI 디자인
6-5 인터페이스 디자인: UI 평가

 

> 강의 내용 정리

 

[ UI 컴포넌트와 레이아웃 ]

 - 인터페이스 디자인: 사용자가 시스템을 통해 과업을 달성하기 위해 조작하는 영역

 

 

[ 시스템과의 소통 GUI ]

 - UI (User Interface, User Interaction) : 사용자가 시스템을 통해 과업을 달성하기 위해 조작하는 영역

  UI component = GUI를 구성하는 요소

 

 -  하나의 UI 화면을 이루는 각각의 요소들은 모두 개별의 UI컴포넌트들이 서로 잘 조합되어 전체적인 화면을 구성한다.

어떤 기준에 따라서 화면을 구성해야 할지 이런 기준을 설명하는 것이 디자인 시스템이다 (디자인 가이드라인)

한명의 사용자와 수백명이 만든 어플을 사용할 때, 앱마다의 시스템이 다르면 사용자의 멘탈 모델이 혼란. 테스크 수행시간이 길어지거나 불신이 높아질 수 있는 것을 방지하기위해서 각각 회사만의 디자인 시스템을 가지고있다.

 

[ 디자인 환경과 제약조건 ]

: 디자인이 반영되는 플랫폼의 특성

 

- 디자인적 제약(표준)과 기술적 제약이 발생할 수 있으며 지속 가능한 디자인을 위해 반드시 고려되어야 한다.

- 디자인을 할 때, 개발될 수 있는가도 중요하지만 운영적인 입장에서 꾸준히 용이하게 업데이트 될 수 있는지도 중요한 요소이다. (유지보수)

- 어떤 아이디어가 개발, 유지보수, 업데이트도 가능하지만 사용자가 사용하기 너무 어렵다면 시장에서 사용하기 어렵다.

 

< 디자인 고려요소 >

   -  디자인 시스템 / 디자인 언어 / 디자인 가이드라인

 

< 기술적 고려요소 >

   -  구현 가능성 Implementation possibility

   -  유지보수 가능성 Maintenance: 용이하게 수정, 업데이트 될 수 있는가

   -  사용성 Usability: 사용자가 쓰기 쉬운지

 

 

[ Responsive design VS Adaptive design ]

   -  Responsive design (화면 사이즈에 따라 자동으로 조절) vs Adaptive design (화면 크기가 다른 제품마다 각각 디자인)

   -  번거롭다고 해도 사용자들에게는 최적화된 서비스를 이용할 수 있기 때문에 Adaptive를 사용하는 경우들이 많다. 

 

 

​[ 레이아웃 ]

: 화면에 컴포넌트를 배치하는 규칙

 

[ 디자인 시스템 ]

   -  디자인 언어를 실제 디자인에 반영하기 위한 표준 가이드라인 또는 라이브러리

   -  디자인에 일관성을 주어 제품/서비스에 대한 사용자의 멘탈 모델을 형성하고, 긍정적인 사용 경험을 준다.

 

  • Design : 디자인 가이드라인
  • Component : Material design에서 제공하는 컴포넌트 모음
  • Develop : 개발자 측면에서 필요한 것
  • Resource : 디자인 시스템을 적용한 라이브러리 모음

 

 

 - Material Design Guideline은 가이드라인 내에서 허용 범위를 명시한다.

  • 어떤 경우가 되는지 / 안되는지를 컴포넌트별로 상세하게 안내하고 있다. 
  • 가이드 라인에서 벗어난 디자인 결정을 내릴 때에는, 가이드 라인에서 어디까지 허용하는지, 가이드 라인을 어겼을 때에 불이익은 없는지 등을 꼼꼼하게 체크해야 한다.

 

 [ 인터페이스 디자인을 시작하기 전 ]

   -  목적 ( goal and design concept )

   -  디자인 환경 ( design environment )

   -  주요기능 ( key features and IA )

   -   구조 ( UI flow and wire frames ) 

   -  리뷰 ( dev and stakeholder review )

   -  design sign off

 

 

 

[ 프로세스와 요구사항 정의 ]

   < 우선순위 정의 >

    - 아이디어 도출: 어떻게 사용자를 만족시킬까

    - 아이디어 평가: 좋은 아이디어란 어떤 것일까

    - 개발 우선순위 정하기: 어떤 기능부터 제공해야 할까

 

 

[ UI 디자인 ]

 - 기획에 따른 UI 플로우(=테스크 플로우) 작성 > 범위 외 UI 플로우 생략 > UI 플로우 업데이트 > 리뷰(건너 뛰는 경우도 많음) > 리뷰 결과 반영

 

   1. 기획에 따른 UI플로우 작성

   2.  범위 외 UI플로우 생략

   3.  UI 플로우 업데이트

   4.  리뷰

   5.  결과 반영

 

UI Flow의 예시

 

 

[ UI리뷰 ]

: UI검증, 사용성 평가

 

  -  네비게이션: 우리가 만든 UI가 사용자가 이루고자 하는 목적을 달성할 수 있도록 필요한 정보와 컴포넌트를 잘 제공하는가

  -  친숙도: 사용자들에게 친숙하게 만들어져있는가

  -  일관성: 기능과 방식은 통일되어야 한다.

  -  에러 예방: 사용자가 실수를 하더라도 시스템 측에서 알려주고 있는가

  -  피드백: 스피닝 아이콘이나 모래 시계 등으로 요청한 작업이 수행중이라는 것을 사용자에게 알려주고 있는가

  -  시각적 명료성: 우리가 의도한 대로 사용자에게 보여지는가

  -  유연성: 얼마나 다양한 기능을 지원할 수 있는 유연한 구조인가

  -  효용성: 최종적으로 사용자에게 실제적인 효용성. 베네핏을 제공할 수있는가

 

 

 

 

 

* 이 글은 제로베이스 UIUX 디자인 스쿨 주 3일반 강의 자료 일부를 발췌하여 작성되었습니다.

> 강의 구성

5-1 디자인 컨셉 Design Concept
5-2 정보 구조 설계 (Information Architecture design)

 

> 강의 내용 정리

 

[ 디자인 컨셉 Design Concept ]

: 스케치, 이미지 또는 텍스트로 이루어진 핵심 아이디어

 어떤 새로운 전체 컨셉이 아닌 작은 영역 또는 업데이트에 관한 디자인도 가능하다.

[ 컨셉 디자인의 정의 ]

- 스토리를 기반으로 제품의 방향성을 시각화

- 만들고자 하는 제품의 예상도

- 시장 혹은 이해관계자의 반응을 미리 확인할 수 있음

- 커뮤니케이션을 위한 아이디어의 시각화

[ 컨셉 디자인을 통하여 전달하고자 하는 것 ]

- 표준 등에 대한 위반의 여지는 없는가

- 요구사항은 잘 반영될 수 있나

- 구현이 가능한가

- 디자인 컨셉과 부합하는가

- 스타일 리뷰

[ UX 디자인 컨셉을 잡을 때 고려할 사항 ]

- 목표(Goal)

: 자주 주문하는 메뉴의 식당 중 가능한 빨리 배달 가능한 가게 정보를 제공하여 사용자의 탐색 시간을 줄이고 의사결정에 도움을 준다.

- 범위(Scope)

- 정황(Context)

- 전략(Key Feature)

 

 [ 디자인 컨셉 종류 ]

좌 - Document 방식 / 우 - Diagram 방식

- Document 방식

 : 여러사람들에게 공유하고 프로젝트에 대한 이해가 높지 않을 시 Document 방식이 더 도움이 될 수 있다.

- Diagram 방식

  : 전반적인 건 알지만 구체적인 (어떤 기능, 디바이스, 서비스를 제공할지) 것은 나와 있지 않다. 어떤 컨셉인지만 간단히 알려주는 정도

 
 

[ UX 디자인 컨셉 Map ]

UX 디자인 컨셉 Map

 

- 일반적인 컨셉정의서와는 관점이 약간 다름.

- 우리가 추구하고자 하는 디자인의 컨셉을 기점으로 방사형으로 연관된 노드들을 뻗어나가는것.

- 구체적으로 우리의 컨셉디자인이 어떻게 발현되고 사용자에게 어떤 기능과 베네핏을 주는지 알고자 하는 것이 아닌, 우리 컨셉을 중심으로 사고를 높이는것. (Ex. 우리 서비스에 영향을 주는 것은 이 시장권에 무엇이 있는 지 등등)

 
 
 

[ 디자인 컨셉시 고려사항 ]

 

ex) 휴대폰 제조 상황

Operator: 휴대폰 제조사

Provider: 대리점 / 휴대폰 자체

User: 사용자

= 하나의 서비스가 안정적이려면 3가지요소중 하나도 등한시되거나 하나만 집중되어서도 안된다.

 

디자인 컨셉이 나오기까지 단계

 

 

 

[ 정보 구조(Information Architecture) ]

: 어플리케이션 또는 웹사이트에서 제공하는 정보와 기능의 관계와 순서를 정의하는 것

 

[ 정보구조를 디자인 할 때 생각해야 하는 것 ]​

3요소 : Context, Content, User

- Context : 우리가 이 정보가 어디에 표현되는가?

      = 비즈니스적으로 제공하고 싶은 정보, 작은 공간안에 어떻게 정보들을 효과적으로 정의할 수 있는가

- Content: 정보의 종류,양,형태

      = 텍스트 컨텐츠, 사진 컨텐츠, 영상 컨텐츠 등 : 어떤 형태이냐에 따라 제공 UI, 전달되는 정보의 양, 최적의 정보구조가 어떠한 것인지

- User: 사용자 특성,니즈, 과업의 성격을 고려해야함.

      = 전문가형 소프트웨어와 일반형 소프트웨어는 다르다(ex.일반 사용자와 주식펀드매니저의 시스템의 차이)

- Discoveribility : 얼마나 잘 찾을 수 있게 그룹핑해서 정보를 배치하는 것.

- Flexibility : 정보 구조의 유연함. 컨텐츠가 그때그때 수정되어도 전체적인 organ의 유지가 되어야한다.

 

 

 [ 정보구조의 종류 ]

1) Broad Structure: 사용 의도가 명확한 경우, 전문가용, 제공하는 정보의 연관성이 낮고, 정보량이 많을 경우에 해당

2) Narrow Structure: 다양하게 보여주지는 않지만 깊게 보여줄 수 있다. (주로 모바일에서 사용됨)

Broad Structure와 Narrow Structure의 구조

[ 사용자 검증 : 카드 소팅(Card Sorting) ]

: 하나의 포스트잇에 하나의 메뉴를 적은 후 그룹핑하면서 각각의 사용자들이 그것들을 어떻게 묶는가에 대해 관찰하는 방법

1. 개방형 카드 소팅

   - 사용자를 섭외하여 테이블에 미리 준비한 메뉴 카드를 사용자에게 보여준다.

   - 사용자에게 "서로 어울린다고 생각되는 카드끼리 그룹핑해주세요" 라고 요청한다.

   - 그룹핑이 끝나면 사용자와 함께 각 그룹에 해당하는 이름을 정의한다.

2. 폐쇄형 카드 소팅

   -  사용자를 섭외하여 테이블에 미리 준비한 메뉴 카드를 사용자에게 보여준다.

   -  사용자에게 "서로 어울린다고 생각되는 카드끼리 그룹핑해주세요" 라고 요청한다.

   -  그룹핑이 끝나면 사용자에게 이렇게 분류한 이유와 혹시 그룹 이름을 변경할 수 있다면

어떻게 하고 싶은지 물어본다.

[ 카드 소팅의 장점 ]

   1) 사용자의 멘탈모드를 엿볼 수 있음

     - 카드소팅은 사용자가 각 정보를 어떤 속성으로 이해하고 있는 지 알아볼 수 있는 강력한 도구이다.

동시에 메뉴의 이름(Label)이 이해하기 쉽게 정의되었는 지 확인해볼 수 있다.

   2) 정보구조를 User Friendly 하게 개선 가능

     - 해당 정보를 바라보는 사용자의 언어를 파악할 수 있다.

메뉴명 뿐만 아니라 메뉴간의 계층관계(어떤 메뉴가 어떤 메뉴를 포함해야하는가)에 대한 정보도 파악 가능

   3) 다양한 가능성을 확인할 수 있음

     - 테스트를 5번 하면, 5개의 다른 형태의 정보구조를 얻을 수 있다.

이를 바탕으로 다양한 가능성 속에서 가장 일반적이고 이해가 쉬운 형태를 찾아나갈 수 있다.

 

 

 

 

 

 

 

* 이 글은 제로베이스 UIUX 디자인 스쿨 주 3일반 강의 자료 일부를 발췌하여 작성되었습니다.

 

> 강의 구성

4-1 퍼소나 Persona
4-2 퍼소나의 제작과 활용

 

> 강의 내용 정리

 

[ 퍼소나 Persona ]

: 우리 제품에 대한 일반적인 혹은 타켓 유저에 대한 정의

  우리 서비스가 타겟팅 하는 유저 그룹이 누군가에 따라서 서비스가 달라질 수 있기 때문에 퍼소나를 만드는 과정을 통해 우리의 타켓 유저가 누구인지 확인하는 과정이 필요하다.

 

 

[ 퍼소나가 필터링 되는 과정 ]


[ 퍼소나 = 대표 사용자 ]

    1. 우리의 사용자가 누구인지 정의할 수 있다.

       - 혹여 대상 사용자가 '전체'라 하더라도 우선순위는 반드시 존재한다.

    2. 선택과 집중의 기준이 된다.

       - 모든 사용자의 모든 니즈를 만족하는 mega service 란 없다.

    3. 디자인 의사 결정과 커뮤니케이션에 유용하다.

       - '왜' 이러한 디자인 결정을 내려야 하는지에 대한 기준이 된다.

    4. 사용자의 마음과 시선에서 생각할 수 있다.

       - 몰입연기 Method Acting, 의인화 기법 Stanislavsky Method과 같이 사용자의 관점에서 바라보는 촉매제가 된다.

 

가장 기본적인 형태의 퍼소나

 

[ 퍼소나 만들기 ]

   1. Define a target user type

      - 주요 사용 시나리오 유즈 케이스를 커버할 수 있는 '대표 퍼소나 타입'을 정한다.

      - 각 퍼소나마다의 핵심 니즈를 한 문장으로 작성한다. (한 문장으로도 퍼소나를 파악할 수 있음)

   2. Bio

      - 사용자 조사 결과를 기반으로 퍼소나를 이해할 수 있는 기본 정보를 작성한다. (Factual Information) 이때 서비스 사용과 관계 없는 정보는 생략할 수 있다.

   3. Needs and frustrations

      - 퍼소나의 주요 행동 패턴과 특성을 이해할 수 있는 '핵심 니즈'와 '불편해 하는 것'을 작성한다.

 

   4. Repeated or missing fact check

      - 중복되어 작성되었거나, 사용자의 행동특성 중 누락된 내용이 없는 확인한다. 확인 후 제거하거나 추가하는 작업을 한다.

   5. Add personality

      - 개인 선호도, 기술 사용 능력 등 개인의 특성이 표현되는 정보를 추가한다.

   6. Additional info

      - 사용자 연상에 도움이 되는 예시 이미지나 우선순위는 낮으나 참고가 될 수 있는 정보 등을 추가한다.

    - 퍼소나의 정보에는 어떤 정보든 넣을 수 있지만 부정확한 정보는 넣지 않는 것이 좋다.

    - 퍼소나는 보통 페이지 한 쪽을 넘기지 않는 것이 좋다.

 

 

 

[ 퍼소나의 세분화 ]

 

 

 

 

 

 

* 이 글은 제로베이스 UIUX 디자인 스쿨 주 3일반 강의 자료 일부를 발췌하여 작성되었습니다.

> 강의 구성

3-1 사용자 여정 지도 (User Journey Map)
3-2 사용자 여정 지도의 활용
3-3 테스크 플로우 (Task Flow)
3-4 테스트 플로우 만들기
3-5 스토리 맵 User Story map

 

> 강의 내용 정리

 

[ 사용자 여정 지도 (User Journey Map) ]

: 사용자가 과업을 수행하는 동안 하는 행동, 느끼는 감정, 그리고 상호작용하는 접점(터치 포인트)을 시간 순서로 정의한 것.

과업을 수행하는 동안 사용자가 보고, 듣는 모든 것과 그 곳의 환경 역시 상호작용하는 접점에 해당한다.

 

< User Journey Map을 통해 알 수 있는 것 >

    1. 사용 동기 (Motivations)

        - '커피를 마시고 싶다'가 동기라면 '어느 카페를 갈까? 나 쿠폰 있는데' 라고 살이 붙으면서 목적이 됨.

    2. 시작점 (User Approach)

        - 커피를 마시고 싶다는 생각을 하고 카페 위치를 찾고 걸어가서 카페에 들어가는 과정부터 시작점이라 볼 수도 있고, 앞의 과정을 생략하고 카페에 들어온 이후부터를 시작점으로 정할 수도 있음.

    3. 행동 (Action)

        - 스텝 바이 스텝으로 행동을 기록.

    4. 감정 (Emotions)

        - 스텝마다 사용자가 느끼는 감정도 기록.

    5. 도구 (What they use for)

        - 핸드폰을 보고 주문을 위해 직원과 대화하고 주문 번호가 뜨는 디스플레이를 보는 등 사용자가 상호작용하는 모든 것들을 맵에 기록.

    6. 시간 (Time and Sequence)

        - 유저 져니 맵의 핵심을 사용자의 동기가 발생하고부터 목적을 달성하는 것까지의 과정을 담은 것. 가장 중요한 것이 시간.

 

 

[ User Journey Map의 활용 ]

    1. 팀원 및 이해관계들의 공통된 이해를 도와줌.

    2. 디자인 의사결정에 주요 기준이 됨(퍼소나)

    3. 기회 요인(Opportunity)과 문제점(Problem)을 도찰할 수 있고 특히 선후관계를 파악할 수 있음.

    4. 사용자가 우리 제품을 어떻게 수용하고 있는지 쉽게 파악할 수 있음.

    5. 타 부서와의 협업에 매우 유용한 자료가 됨.

 

 

< User Journey Map의 중요성 >

= 무엇보다 사용자를 공감하기 위한 중요한 도구가 된다. 깊은 공감을 통해 디자인 의사결정 과정에서 보다 사용자 중심의 방향으로 나아갈 수 있다.

 

프로젝트 진행 과정에서 우리가 자주 접하는 실수

1. 우리가 누구보다 우리 사용자를 잘 이해하고 있다. (높은 자신감)

2. 우리 사용자는 이렇게 생각할 거야.(나를 기준으로 해석하면서 확증편향에 빠짐)

3. 사용자 조사 결과를 객관적으로 해석하지 못함

 

User Journey Map의 기본 구조

 

- Zone A: 퍼소나 영역

- Zone B: Experience의 영역.

      ③: step 사용자가 과업을 수행하는 순서

      ④: 액션

      ⑤: 유저의 생각

      ⑥: 사용자의 감정

유저 저니맵의 목적은 궁극적으로 사용자를 이해하고 Insight를 얻기 위함. 

- Zone C: ⑦,⑧번 영역에는 기회요인이나 담장자, 문제점, 떠오른 아이디어 등을 작성함.

 

[ User Journey Map 만들기 ]

   1. 범위 정하기

      - 여정 지도를 작성하는 목적과 범위 정하기

      - 여정의 범위: 제품 전체 또는 특정 기능 또는 세부 Task가 될 수 있음.

      - 여정 지도의 디테일 수준을 정하기

 

   2. 퍼소나 정하기

      - 퍼소나가 정의되어 있더라도 제작 목적에 따라 공통 여정 지도만 제작할 수 있음.

      - 반대로, 특정 기능에 대해 사용자 별로 다른 사용 행태가 예상되는 경우 각각의 여정 지도를 제작하여 비교 분석할 수 있음.

 

   3. 기준 항목 정의

      - 여정 지도에서 단계별로 표시할 정보를 정의한다.

      - 기본적으로 사용되는 항목

                단계 Phase           감정 Emotion             문제점 Problem

                과업 Task              기능 Functions           기회요인 Opportunity

      - 필요에 따라 추가할 수 있는 항목

                접점 Touch Point           장소            공동 작업자 (사용자가 과업 수행시 상호작용하는 사물이나 사람)

 

   4. 프레임에 정보 채워넣기

      - 만들어진 틀 안에 해당하는 정보를 채워넣는다. 이때 시스템 중심이 아닌 사용자 중심으로 한다는 것이 포인트이다. "사용자라면 A를 완료하기 위해 무엇을 의도하고 행동할까"의 관점을 유지한다. 예상되는 사용자의 '다른 선택'이나 '오해' 또는 '실수'로 인해 연이어 발생되는 브랜치 플로우 (Branch Flow)를 정의한다.

 

   5. 리뷰하기

      - 프로젝트 참여자들과 함께 작성된 여정 지도 리뷰하기.

 

 

[ User Journey Map의 활용 ]

 

< User Journey Map을 활용하면 장점 >

- 한마음 한 뜻 : 팀원 모두가 일치된 사용자 모델을 이해

- 문제점의 구체화 : 문제점을 다각도로 부석하여 문제의 원인과 해결방안 모색에 도움을 줌

= 유저 리서치 결과와 여정지도를 비교하여 기존에 파악된 문제점의 상세한 원인과 그 해결방안을 모색하는 자료로 활용될 수 있음.

문제점의 구체화

- 문제점의 구체화를 통해 UI적 문제점을 해결할 수 있다.

- 시스템 / UI적으로는 문제 없는 과정 이더라도, UJM을 통해 개선점을 발견

- 기존 문제점의 상세한 원인과 해결 방안을 모색하는 자료

 

 

[사용자 여정 지도의 특징]

    - 물리적 시간 표현

    -  전략적 사고 (기존 프로세스 단축, 효과정 방안 모색)

    -  조사결과 -> 원인 파악 -> 개선방안 도출 -> 기대 효과

    -  사용자별 특징 포착 (예외 케이스의 중요도가 얼마나 높은가를 판단)

    -  리서치 주안점 도출 (POV, point of view) ; 추가 리서치 필요 부분 발견, 추후 리서치에 필요한 POV 함께 정의

 

Context의 효과적 공유

 

 

[ 태스크 플로우 Task Flow ]

  -  과업 수행의 흐름 (사용자가 Task를 어떻게 수행하는지를 선형적으로 표현한 것)

  -  UI 설계의 중요 단계

 

[ 테스크 플로우와 유저 저니맵의 차이점? ]

  - 형식적으로는 비슷한 면이 많음.

   공통 — 사용자의 행동/목적이 어떤 순서로 어떤 행동을 하며 어떻게 달성하는가를 시간 순서대로 기재

   차이 — 저니맵이 더 큰 개념 (져니맵에서 유저의 특정 행동 - 속성의 플로우를 표현한 것. 시스템 대응 파악)

​  = 저니맵에서 특정한 액션을 선택하여 이 액션의 디테일한 과정과 시스템의 움직임을 태스크 플로우로 작성

Task Flow의 구성
Task Flow의 시스템 스텝별 기능
Task Flow 시스템 스텝별 지원 기능 정리

 

  = Task Flow는 유저가 Task를 완료하기 위한 행동의 연속이다.

 

     -  사용자 과업 정의

     -  퍼소나에 따라 동일 task가 여러개로 정의 가능

     -  시나리오 기반으로 가능한 모든 파생 루트 표시

     -  대략적 콘텐츠와 기능 설명 포함 가능 (주요 기능, 필수 입력 항목 등)

     -  UJM에서 하위 분류 된 플로우

 

[ Task Flow의 이점 ]

   -  UI를 빠르고 저렴하게 현실적으로 바라볼 수 있다.

   -  시스템 개발 관점과 사용자 관점 포괄 가능 (다양한 포지션의 사람들의 타협점과 모색 시작점 파악)

   -  발생 가능한 문제점 미리 발견하고 대응

   -  각 단계별 어떤 정보와 기능이 필요한지 확인

   -  발생 가능한 모든 경우의 수 확인

[ Task Flow의 3요소​ ]

1) Personas : Who ar the users?

2) Goal : What do they want to acomplish?

3) Steps : What are the steps users need to take to archive the goal

 

 

Task Flow를 그리기 위한 플로우차트 컴포넌트

 

 

 

[ Task Flow 만들기 ]

   1. 목적 Goal

      - 신규 개발을 위해

      -  기존 ui 분석을 위해 (기반 데이터에 따라 담는 내용이 달라질 수 있다)

   2.  시나리오 정의 Scope and Use-case

      -  누가, 어떤 목적으로, 언제, 어디서, 무엇으로 사용

   3.  디테일 수준 Level of Detail

      -  작성 목적에 따라 디테일 수준 결정

   4.  작성 방법 Tool

      -  작성 / 수정 / 공유가 용이한 방법 고려

 

   STEP 1. Task의 목표

팬케이크를 만드는 과정으로 예시

 

 

   STEP 2. 사용자의 모든 행동 기술

 

      - 작성할 행동 범위에서 외부적으로 일어나는 인터랙션은 경우에 따라 필수/옵션이 되기도 한다.

 

   STEP 3. 의사결정 요인 추가

     - Decision point / 사용자의 의도와 시스템의 목적에 따라 TF가 나눠지는 시점 추가

 

   STEP 4. 의사결정 요인 추가

     - Remarkable Point 추가 / Pain Point or Opportunity

 

   STEP 5. 확장: Branch Flow 정의

     - What if / 다양한 가능성 검토를 위해, 발생 가능성이 있는 만약을 가정하여 다양한 브랜치 플로우를 작성

 

[ User Flow ]

: Task 시작점이 반드시 시스템이 아닐 수 있다는 점이 차이가 있다. (시스템 외부, 포털서비스 등)

  사용자의 동기 발생 시점부터 시작하는 경우가 많음

  주제를 벗어나지 않는 적정한 범위 안에서 User Flow를 작성한다.

 

 

 

[ User Story Map ]

: 사용자 스토리 맵과 Journey Map과 유사할 수 있으나, '왜 스토리맵을 만드는지 어떤 관점으로 사용자를 보고 어느 시점에 어떤 형태로 디자인에 도움을 줄 수 있는가'를 이해해야 한다.


작게 나누어 스토리를 작성해본다.

   1. Backbone 만들기

     - 사용자에 관련된 우리가 아는 모든 것 (factors)

     - 레고로 집을 짓는다고 가정한다면, 레고 조각 하나 하나를 수집한다고 이해

   2. 이야기 만들기 

   3. 관점 나누기 Share view point

     - 다른 퍼소나와 관점을 갖고 비교하며 스토리텔링 (사고편향 방지&가능한 풍성한 스토리 생성)

 

   4. 추가 작업

   5. Activity(or epic) 기준으로 그룹핑 Group tasks by activity

   6. 우선순위 Start Slicing

     - 중요도와 사용 횟수 등에 따라 에픽들을 분류한다.

 

   7. 세부 작업

   8. 스토리 맵 결과

 

 

 

 

 

* 이 글은 제로베이스 UIUX 디자인 스쿨 주 3일반 강의 자료 일부를 발췌하여 작성되었습니다.

> 강의 구성

2-1 사용자 조사 방법
2-2 사용자 조사 준비
2-3 사용자 조사결과 분석 및 모델링

 

 

> 강의 내용 정리

 

[ 사용자 조사 방법 ]

 사용자 조사란?

: 목적과 환경에 따라 다양한 사용자 조사 방법론을 활용하여 사용자의 드러나는 사용 행태와 비언어적인 요구사항을 도출해내는 조사 (사용자가 어떻게 사용하고 이해하고 어떤 감정을 느끼는지를 통합적으로 조사하는 것)

 

- 사용자 조사의 필요성

  [ 상황 ]

  배달 서비스 어플리케이션을 만들 건데, 만들고자 하는 우리도 배달 서비스의 이용자이니까 사용자 조사 없이 바로 만들면 되는 거 아닌가?

   = 우리가 사용자도 되기는 하지만 이해관계자 입장이다. 하루 종일 배달 서비스 관련 생각만 하고 이미 깊게 이해한 상태이기 때문에 보는 시각이 다른 일반 사용자들과 다르다. 이렇게 되면 대표성도 없어진다. 배달 서비스의 특성상 사용자 층은 다양한데 우리의 생각으로 모든 사용자들의 입장을 편향하게 되는 것으로 디자인 컨셉에 대한 도출 자체가 어긋난다.

 즉, 사용자 조사는 필요하다.

 

 

[ 사용자 조사 방법 ]

- Natural: 사용자에게 개입하지 않고 있는 그대로를 조사

- Laboratory: 연구소처럼 사용자를 조건에 두고 조사

1. Ethnography

: 사용자의 생활을 관찰하고 순수한 데이터를 얻는 가장 자연스러운 방법

 

  - Town Waching: 높은 곳에서 관찰하는 조사

                              (버스 정류장을 관찰하면 어느 시간대에 사람들이 많고 버스를 잡을 때는 어떤 행동을

                              하게 되는지에 대한 데이터를 얻을 수 있다.)

  - Contextual inquiry: 사용자에게 궁금한 점을 인터뷰 

                                    (관찰하고자 하는 행동을 하는 사용자를 관찰한 후 궁금한 점을 나중에 따로 인터뷰 함)

  - Photo diary: 사용자에게 어떤 행동을 했을 때 사진 데이터(기록 데이터)를 모음

 

= Town Watching, Photo diary는 불필요한 데이터가 많아 유의미한 데이터가 없을 수 도 있음

 

 

2. Usability Studies

: 사용자를 조건에 두고 데이터를 얻는 방법

 

  - Usability Test: 사용성 평가, 사용자에게 Tesk를 주고 사용자 행동에 대한 데이터 분석을 함

                            (사용자에게 링크를 주고 또 다른 사용자에게 공유하라는 미션을 주었을 때, 어떤 행동을 하는지 등)

  - Card sorting: 미리 준비해놓은 자료들을 바탕으로 사용자에게 분류해보도록 함

  - A / B Test:2-4개의 디자인을 준비해두고 사용자에게 투표를 받는 형태

 

= 높은 확률로 원하는 데이터를 얻을 수 있지만 질문하지 않은 데이터는 얻을 수 없어 폭이 좁아질 수 있음.

그리고 Card sorting 과 A / B Test 같은 경우는 선택지를 우리가 주는 상황이기 때문에 우리가 준비한 선택지가 완벽하지 않으면 오히려 더 악영향을 미칠 수 있음.

 

 

3. Contextual inquiry

: in Context (사용자가 있는 곳에서) -> do Inquiry (사용자를 연구)

 

 - 사용자를 이해하고 질 높은 데이터를 얻기 위해서 기반 지식을 가지고 있어야 한다. (알지만, 모르는 척)

 - 도재와 장인 관계로 접근 (디자이너와 사용자)

   사용자가 디자이너에게 아무것도 모르는 척 모두 설명하도록 유도

 

Contextual Inquiry Process

 

[ Contextual inquiry 유의사항 ]

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

   - 사용자가 최대한 사용자 주변 환경과 상호작용 하는 것을 활용할 수 있도록 하기 위함

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

   -  말하는 사람의 역할이 우리가 되지 않도록 유지

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

   -  사용자가 생각할 때 너무 당연해서 말 안해도 되는것 까지 얘기해달라고 부탁해야 함

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

   -  중간에 사용하지 않은 기구들을 사용해달라고 한다던지, 사용하지 않는 건지에 대한 질문으로 조사에 어긋날 수 있음

   -  관찰 후 나중에 다시 인터뷰로 질문

5. 목적(goal)을 먼저, 그리고 나서 왜(why), 어떻게 하는지(task process) 조사

   -  모든 내용 관찰 후 이후에 메일이나 인터뷰를 통해 한번 더 설명해달라고 부탁하기

   -  사용자가 행동하는 도중 개입해서 물어보는 것은 사용자가 설명을하기 위해 평소처럼 행동하지 않을 수 있기 때문에 좋지 않음

6. 사용자에게 직접적으로 불만이나 아이디어를 묻는 것 자제

7. 중립적인 자세 유지

8. 그 공간에서 사용자가 어떤 사람/사물과 인터랙션 하는지 관찰

 

 

[ 사용자 조사 준비 ]

 

[ 사용자 조사 설계 프로세스 ]

1. 조사 목적 정의: 어떤 걸 알고 싶은가?

2. 조사 범위 정의: 조사 시간에 대한 낭비가 있을 수도 있으므로 범위를 신중하게 정한다.

3. 조사 방법 정의: 얻고자 하는 데이터가 어떤 것인지 생각해보고 그게 맞는 조사 방법으로 정의한다.

4. 조사 대상자 기준 정의: 대상자에 따라 수집되는 데이터가 달라질 수도 있으므로 신중하게 기준을 정의한다.

5. 조사 대장자 모집

6. 파일럿 테스트

7. 조사 실행

8. 결과분석

 

 

- 원격 사용자 조사의 장점은 참여에 대한 부담이 적어 테스트 진행 시간을 길게 할 수도 있고, 화면 녹화를 통해 간편하게 자료를 수집할 수 있다는 것이 있다.

- 사용자 조사는 프로젝트 초반에 해도 되지만 중간에 공백이 생기거나 의문점이 생겼을 때 해도 무관하다.

 

 

[ 사용자 조사 계획서 ]

 

- 조사 계획서는 필수는 아니지만 계획서를 작성하면서 빠진 점을 더블 체크할 수 있고, 이해 관계자와의 커뮤니케이션에 활용하면 좋다.

 

 

[ 파일럿 테스트 ]

 

- 드레스 리허설: 실제와 똑같이 테스트 해보면서 마지막으로 점검

- 시간 확인: 테스트 예상 시간과 다르게 시간이 오버되는 경우가 있으므로 질문을 수정해야 함.

- 변수 확인: 테스트 도중 변수를 수정할 수 있음

- 기술적 점검: 테스트할 때 오류가 없는지 확인 가능

 

 

 

[ 사용자 조사결과 분석 및 모델링 ]

 

< 사용자 조사 결과를 통해 얻는 것 >

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

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

-  시퀀스에 따른 사용자의 감정 변화 파악

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

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

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

 

 

< 사용자 조사 결과 분석을 통해 얻는 것>

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

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

-  디자인 컨셉/가설 평가

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

 

[ 분석 및 모델링 ]

1. 분석하기

    : 로우 데이터(날것형태) 정형화

       - 오디오 녹음 파일

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

       -  노트 케이커와 관찰자의 노트(*노트테이커를 필수)

       -  설문조사 결과

       -  정량적 측정 데이터(클릭스트림,페이지뷰 등)

2. 녹취록 만들기

    :  녹취록을 만드는 이유

       -  모든 사람이 로우데이터를 사용 할 수는 없다.

       -  기억은 편향적이다. (본인이 원하는 방향으로 곡해하여 기억할 가능성이 있음)

       -  비 언어적인 데이터 수집

       -  데이터 정합성을 위한 안정장치 (한사람의 기억과 해석에 의존 사용자의 답변을 해석하면 객관적 데이터를 얻기 어려움)

3. 정보 구조화 하기

    :  어피니티 다이어그램

       2차 정형화 과정

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

       -  핵심 데이터 파악

       -  데이터 사용성 향상

Affinity diagram 만들기
 

[ 아티팩트 모델 (오브젝트모델) ]

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

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

   -  특정 아키팩트의 사용 전후로 인한 변화를 이해할 수 있다.

   -  장애 요인을 파악 할 수 있다. ( 환경적인 부분에서 특히 그렇다.)

강사님이 강의를 준비하는 과정을 그린 그림

 

 

* 이 글은 제로베이스 UIUX 디자인 스쿨 주 3일반 강의 자료 일부를 발췌하여 작성되었습니다.

 

+ Recent posts