UX :: 이것이 UX / UI 디자인이다.

이것이 UX / UI 디자인이다.

이것이 UX 디자인이다. 2020 (조성봉)

 

1.1 Ux 디자인이란

UX 정의

"유저가 인지하는 경험의 품질"

1. 유저가. 
2. (어떤 서비스나 물건을) 사용하고.
3. (이성적, 감성적) 판단을 내리는 것.
이라고 볼 수 있다. 

 

UX 디자인에 대한 오해.

1. UX ≠ UI

UX는 총체적 관점, UI는 시각적 관점으로 보면 될 것이다.
즉, UX > UI, GUI, Interaction, IA, Process, contents...+(User의 니즈) 

 

UX 영역

    1. UI

    2. IA

    3. user flow

    4. Interaction

    5. GUI

 

1. UI : 화면구성
2. IA : 정보의 전체 체계 (search, filter, tag, lable 등에 영향)
3. user flow : 사용자가 서비스를 이용하는 흐름. (회원가입, 로그인등의 흐름)
4. Interaction : 사용자와 서비스의 상호작용. (유저의 제스쳐, 서비스의 상태변화)
5. GUI : 비주얼디자인 (브랜드정체정, 개성, 고유의 심미성을 높임)

UI

    1. 인터페이스
    2. 유저 인터페이스
    3. 요소

 

1. 인터페이스 : 소통을 위한 매개체이다.(경험이x)  
2. 유저 인터페이스 : 최종적으로 사용자가 모니터를 볼 수 있는 인터페이스.
위에서 언급한 코드가 해석되어 모니터를 통해 사용자가 인지할 수 있도록 하는 것. 
3. 요소 : 인풋 박스, 리스트 박스, 버튼, 라디오 버튼 체크박스 등등. 

 

GUI

사용자가 더욱 쉽게 각각의 속성을 이해하고 

편리하게 사용할 수 있도록, ui에 색과 형태를 추가하고

변형하는 것 

 

Interaction

제품 또는 서비스를 이용하면서 상호 간의 작용을 쉽게 구현하는 디자인. 

좋은 ui 디자인은 좋은 인터랙션과 
밸런스를 맞춰야 한다.

 

Needs

    1. 인지적 니즈 : 서비스를 인식하고 의미를 찾거나 추측하는 등의 이성적인 경험. 
    2. 감성적 니즈 : 선호도, 즐거움, 스트레스 등과 같은 서비스에 대한 감성적인 경험. 
    3. 신체적 니즈 : 마우스나 키보드 조작, 인식, 습관적인 반응 등의 육체적 경험. 

 

1.3 피라미드

UX 피라미드

    1. functional (유용성)

    2. reliable (신뢰성)

    3. usable (사용성)

    4. convenient (편의성)

    5. pleasurable (감성)

    6. meaningful (의미성)

 

피라미드가 높아질수록 달성하기가 어려워진다.
사용자들의 경험순서를 보여주는것이기도 하다.

1. functional (유용성) - What, 무엇을 제공할까에 대한 고민. (기술과 밀접한 관계)
2. reliable (신뢰성) - 보안이나 인증, 입력화면 행동지원, 콘텐츠의 최신성, 믿을 수 있는 데이터 관리(평점, 리뷰).
3. usable (사용성) - 직관적이고 편리한것. 
4. convenient (편의성) - 사용성을 넘어 유저가 생각지 못했던 서비스까지. (개인화, 추천 등)
5. pleasurable (감성) - 시각적인 분위기와 서비스 콘셉트. 인터랙션과 트랜지션. 
6. meaningful (의미성) - 유저 각자의 라이프스타일에 맞게 의미 부여가 된 서비스는 의미성을 가지게 된다. 

 

1.4 UX 구성요소

UX 구성요소

    1. 동기

    2. 행동

    3. 고충

    4. 니즈

    5. 태도

    6. 맥락 (context)

 

사용자의 경험을 구성하는 요소.
1. 동기 : 왜 이것을 사용하는거지?
2. 행동 : 오. 이런 행동을 하는군.
3. 고충 : 이런 어려움을 격는군.
4. 니즈 : 이런걸 필요로 하는군.
5. 태도 : 긍정적인가. 부정적인가.
6. 맥락 : 어떤 상황에서 이러한 경험들을 하는걸까?

(필드리서치시 유용 : 현장에서 유저의 경험을 인터뷰하거나 관찰)

1.5 여정

UX 여정

    1. 외부탐색.
    2. 접근
    3. 탐색

    4. 조회 (기사, 글, 콘텐츠 등)

    5. 주활동

    6. 부가활동

    7. 인증

    8. 개인화

    9. 이탈

 

사용자가 서비스를 이용하는 과정.
1. 외부탐색 : 서비스를 접근전에 외부에서 이루어지는 탐색. (서비스의 접근동기에 영향)
 - 웹사이트, 랜딩페이지, 포털, 연관 검색어, SNS, 배너광고, 링크 / 버튼, 다른서비스 앱과의 연동, QR태그, 음성인식,
2. 접근 : 탐색을 시작하기 전까지의 과정. 
 - 스플래시 스크린(1초 내외), 로그인(자동로그인, 생체인증, 간편로그인, 생략)
 - 접근권한
 - 이용안내 (onboarding) : 반드시 skip 버튼 필요. 
 - 비회원용 홈화면 : 주요메뉴나 기능 / 이것을 클릭했을때 로그인, 가입화면으로 이동.
 - 로그인 
    - 간편로그인
    - 자동로그인
    - 생체인증 로그인
    - 로그인 생략
(단, 구독형 서비스는 특성상 맴버십이 전제가 되어야 이용 가능 하므로 로그인이 먼저.)
3. 탐색
    a. 홈 화면 콘텐츠 탐색 (scrolling)
    a. 메뉴를 통한 탐색 (browseing)
    a. 검색을 통한 탐색 (searching)
    a. 추천에 의한 탐색
    a. 기타. (뒤로가기 탐색, 외부서비스로 연계탐색)
 - 탐색의 주요 고충. (메뉴를 찾기 어려움, 메뉴명이나 링크, 버튼명에 대한 이해가 어려움 등)
4. 조회
 - 정보(콘텐츠)를 얻는것 그 자체를 목적으로 하거나, 정보를 통해 예약, 구매 등으로 이어진다.
 - 구매 / 예약, 저장/공유 등으로 이어짐. 
 - 큐레이션정보, 통계정보, 사용자리뷰도 포함된다. 
5. 주활동
 - 핵심기능의 실행 : 구매, 예약, 거래 등.
 - 하나 이상의 화면으로 구성 (정보입력, 동의, 확인, 인증 등)
6. 부가활동
 - 유저의 편의를 위해 배치된기능
 - 저장, 즐겨찾기, 공유, 상담, 좋아요. 찜하기 등. 
7. 인증
8. 개인화 
 - 탐색의 수고를 덜어주고 취향과 관심에 맞는 서비스 제공.
 - 추천은 비 목적 의식적인 동기(의지가 없을 때)에서 큰 효과를 발휘.
 - 이용환경을 의도대로 설정. (메뉴 편집, 즐겨찾기, 배경 및 폰트조정)
 - 활동/보유 내역 보여주기.(건강관리 앱, 포인트관리, 마이페이지 등의 대시보드)
 - 알림설정.
9. 이탈
 - 안드로이드의 경우 이탈시에 종료하겠냐는 알림으로 이탈감지가 가능하지만.
 - IOS의 경우는 이탈감지를 알기 어렵다.

 

 

 

2. UX 프로세스

2.1. 기본 프로세스

1.1. 프로세스

    1. 발견 (discover)

    2. 도출 (define)

    3. 구체화 (develop)

    4. 산출 (deliver)

 

1. 발견 : 목표수립, 관련UX분석, 이슈제기, 데스크리서치, 필드리서치
2. 도출 : 키파인딩, UX모델링, 인사이트
3. 구체화 : UX전략, 아이디어도출 및 평가, 시나리오
4. 산출 : IA, userflow설계, interaction, prototype, test, UX가이드라인

 

1.1.1. 발견

 

    1. 목표수립

    2. 관련UX분석

    3. 이슈제기

    4. 데스크리서치

    5. 필드리서치

 

1. 목표수립 : 문제검토와 해결방안을 가설로 수립.
2. 관련UX분석 : 홈 화면이 너무 복잡해. flow가 길고 depth가 깊어.
3. 이슈제기 : 어떻게 해결하면 좋지?
4. 데스크리서치 : 통계분석, 경쟁분석, 문헌조사, 동향조사
5. 필드리서치 : 설문조사, 심층인터뷰, 관찰조사. -> 키파인딩. 

 

1.1.2. 도출 : 발견단계에서 얻은 경험이나 단서를 가지고 서비스의 문제를 정의. 

 

    1. 키파인딩 (what's the problem?)

    2. UX 모델링

    3. 인사이트 (So what?)

 

1. 키파인딩 : 이슈와 연관있고 디자인에 영감을 주는 데이터를 모아 정리.
2. UX 모델링 : 퍼소나, 여정지도, 친화도법
3. 인사이트 : 그래서 뭐? 모델링이 생략되고 키파인딩으로부터 바로 인사이트가 나올수도 있다. 

 

1.1.3. 구체화 :실질적인 UX/UI 디자인 구현

 

    1. UX 전략.

    2. 아이디어 도출 및 평가.

    3, 유저시나리오.  : (서비스 사용 이유-구체적 경험-해결책-얻게되는 결과 및 가치)

       유저시나리오 표현방식 : UI중심. 정황서술 방식, UX여정 중심.

 

1.1.4. 산출

 

    1. IA

    2. 이용흐름

    3. 인터랙션

    4. UI

    5. GUI

    6. UX 테스트

    7. UX 가이드라인

 

※ 참고 :  산출 단계에서는 이 책(이것이UX/UI디자인이다)에서 다양한 예시들을 볼 수 있다.

 

3. 1 최신 UX 방법론

빠르게 변화하는 시대에 민첩한 대응이 중요해지면서
애자일 방법론이 지속적으로 대두되고 있다. (2016년부터 현재까지)
그중 실리콘벨리에서 많이 사용하는 UX방법론에 대해 설명해보고자 한다. 

1. 패러다임의 변화

1.1 (포스트) 애자일 방법론

장점

    1. 민첩하고 빠른 프로젝트 주기

    2. 디자인씽킹의 사용자 여정 중심.

    3. 린 UX의 신속한 서비스 구축 및 반복적인 개선

프로세스

    1. 디자인씽킹

        a. 니즈의 명확성

        b. 리서치 및 관찰

        c. 인사이트

        d. 콘셉트 도출

    2. lean UX

        a. 가설 및 검증

    3. 애자일

        a. 새로운 아이디어 - 피드백 - 구축의 반복

 

1.2. MVP (Minimun Viable Product)

최소의 실행 가능한 서비스 영역

전략 / 콘셉트, 아이디어를 도출 후 가장 핵심적인 아이디어만 묶어서 바로 프로토타이핑 제작. 

 

특징적인 몇 가지 기능에 집중하는 게 아니라, 사용자에게 어떤 가치를 제공할 것인지 집중하면서 그 결과를 프로토타입에 반영하는 것. 

애자일 방법론의 첫 번째 순환주기를 잘 설명하는데 잘 어울린다. 

 

1.3. 디지털 전환시대의 디자인 방법론의 특성

디자인씽킹 - 사용자 여정 중심 경험 디자인, 가치, 혜택에 집중. 

스프린트, 애자일 - 신속한 초기 결과, 반복작업을 통한 개선

MVP - 가치 혜택에 집중, 신속한 초기결과 제시. 

 

3. 2 애자일 + UX

애자일

애자일이란 무엇일까? 하나의 프로젝트 주기를 여러개로 쪼개어 작업하는것을 의미한다. 

    a)장점 : MVP : 빠른 시장성 검증이 가능.

 

스크럼 애자일

    a) 5~9명의 소규모 팀이 합심하여 주기별로 업부를 수행한다. (UI기획자, 디자이너, 개발자, 프로덕트오너 등의 구성으로 되어있다.)

    b) 프로세스 : 스크럼회의 - 프로덕트 백로그 기록 및 관리 

    c) 장점 : 공동의 목표와 이슈를 매일같이 공유하기 때문에 협업의 효과성이 놓음.

                  반복되는 스프린트를 통한 피드백과 학습이 이루어져 사용자의 요구와 환경에 기민하게 대응가능. 

    d) 단점 : 프로젝트 규모가 큰 경우는 실제 적용이 어려움. 제품백로그가 유저기반이 아니라 좋은 결과물을 내지 못하는 경우가 발생.

    백로그

    a) 프로젝트, 스프린트별 개발 내역을 담고 있음. 

    b) 애자일의 가장 중요한 기준이 됨. 

 

애자일 + UX

진행주기 : 인풋(가치) - 아웃풋(MVP) - 아웃풋(개발) - 아웃풋(개발) - 검증. 

디자인씽킹과 애자일을 결합하려 하였으나, 서로 입장차이를 좁히지 못하였음. 

 

포스트 애자일 UX 

린UX + 디자인 씽킹 + 애자일

애자일UX + 디자인스프린트

듀얼트랙 애자일

포스트 애자일

 

AI UX

1. AI UX의 대두와 그 필요성
2. AI UX의 주요 특징
    a) 기존 ux와의 비교
    b) ai 서비스 진행시 ux의 역할
    c) ai 서비스의 ux 여정
    d) 향후 전망
3. ai UX유형과 대표사례
    a) 에이전트 주도형
    b) 도우미형
    c) 최적화형
    d)단순 수행형