[제로베이스]UIUX디자인스쿨 4주차_03

Chapter 8. UX 디자이너 되기

8-1 UX 디자이너에게 필요한 기본 개념 Part 1

 

A/B test

AS is to BE

or Which do you prefer A or B?

 

process

1. 가설 수립 : CTA button에 따라 클릭 카운트가 달라질 것 같다.
2. 변수 설정 : 무엇을 다르게 적용할 것인가 결정. 예를 들어 UI text만 변경(버튼의 위치, 디자인은 동일), 바뀌는 부분이 많아지면 어떤 이유 때문에 좋은 영향이 있었는지 구체적으로 알 수 없다. 
3. A/B시안 제작
4. 조사 설계

• 기간 : 2주(mm/dd-mm/dd)
• 대상 : 랜딩 페이지에 접속하는 아시아 유저
• 테스트방식 1 : 랜딩 페이지에 접속한 유저에게 랜덤으로 6개 시안 노출
• 테스트방식 2 : 지역별로 각 시안을 2주동안 노출

✏️ 지역별, 시간대별 등 현실적인 상황에 따라 누구에게 어떤 기준으로 보여줄 것인지 테스트 방식 결정

• 지표 KPI : 랜딩페이지 접속 후 CTA를 통해 회원가입 페이지로 이동한 유저의 비율 

🧐 지표 KPI가 뭐지? Key Performance Indicator, KPI)는 전략적 목표를 달성하기 위해 계획대로 진행 중인지를 파악할 수 있는 지표

 

유의사항

1. 가설 수립 : 명확한 가설은 A/B테스트를 통한 정확한 인사이트를 얻기 위한 필수조건, 가설 없이 여러 디자인 시안을 단순 비교 했을 경우, 특정 디자인이 트래픽을 증가시켰더라도 '왜' 증가했는지 해석할 수 없기 때문

2. 통제변수 설정 : 두개의 시안을 제작한다고 가정했을 때, 변수(=서로 다르게 만들 부분)는 하나만 적용하는 것이 좋음. 변수가 여러 개일 경우 어떤 요인이 사용자의 행동에 영향을 끼쳤는지 파악하기 어렵기 때문임

 

😍 여기서 내가 카카오톡 선물하기 피드백이 이해가 간다. 나는 한 화면에서 버튼의 위치나 크기를 변경한 게 아니고 아예 다른 Task flow에 적용하여 디자인한 것을 제출했었는데 멘토님이 A/B테스트는 한 화면에서 다른 시안을 만드는 것이라고 피드백을 주셨다. 나는 잉? 선물하기 기능을 쓸 수 있는 새로운 대안을 제시했고 시안이 2개인데 이것도 A/B테스트 아닌가 의문이 들었다. 아니란다 예진아~ 이렇게 강의로 확인사살 당해서 속이 시원하다!! 이래서 진도에 맞게 강의를 들어야 하는구나..하 밀린 거 빨리 다 봐야겠다. 

 

3. 테스트 실시 시점 : 테스트는 가능한 동시에 실시하는 것을 권장. 시안별 테스트 시점이 다를 경우, 시간 자체가 변수가 되어 디자인 평가에 영향을 끼칠 수 있기 때문(예를 들어 그사이 트렌드가 바뀌는 것이 데이터에 영향을 줄 수도 있다.) 

 

GOMS(Goals, Operation+Method+Selection rules) 목표 + 조작 + 방법 + 선택규칙

사용자 인터페이스의 평가를 정량적으로 분석하기 위해 목표, 조작, 방법, 선택규칙의 첫글자를 딴 용어이다. 컴퓨터와 상호작용을 하나의 문제해결 행위로 보고 카드, 모란, 뉴웨링 제시한 모델링 분석 기법으로 수학적이고 실험적인 방법이다. 다양한 센서를 사용해서 사용자의 행동을  매초단위로 추적해서 데이터를 얻는다. 

 

어포던스 Affordance = 행동유도

기표를 통해 직관적으로 사용 방식을 인지할 수 있게 하는 것. 

약한 어포던스 Weak affordance 직관적이지 못한 UI로 텍스트 설명이 필요한 경우로써 사용자의 빠른 태스크 수행을 저해한다. 

 

메타포 Metaphor

현실에서의 오브젝트를 아이콘이나 로고에 반영해서 사용자가 해당 기능을 쉽게 이해할 수 있음

예시 : Pinterest 내가 보고 싶은 자료들을 Pin한다는 의미라는 것을 직관적으로 알 수 있다. 플로피디스크가 현재까지 '저장'의 의미로 쓰이는 것

 

Heuristic evaluation 전문가 평가(UI 전문가 또는 특정 도메인의 전문가)

다음은 닐슨 노먼 그룹에서 제공하는 UXUI 전문가의 관점에서 평가해야 하는 요소 10가지이다.

시스템 상태의 시각적 표현 현실에서 익숙한 단어와 문구 사용자에게 통제권 제공 일관성과 기준 기억보다는 직관 에러 예방 자유롭고 효율적인 사용 환경 심미성 에러 해결 도움말

8-2 UX 디자이너에게 필요한 기본 개념 Part 2

Design Constraint 디자인 제약 사항

1. Restriction 디자인을 하는데 존재하는 제약조건
2. Limitation 사용자를 위해 설정하는 제약조건

법률적/사회적 요구사항에 의한 디자인 제약

퍼포먼스를 위한 디자인 제약

플랫폼 특성에 의한 디자인 제약

Cognitive Workload 인지부하

1. 과도한 자극
2. 너무 많은 정보량
3. 알 수 없는 아이콘

좋은 디자인은 인지부하가 낮은 디자인

= 직관적으로 수행할 수 있게 설계

• 인지부하란 과업을 수행하는데 필요한 정보를 처리하는데 드는 비용을 말한다.
• 인지 과부하는 사용자가 과업수행을 포기하거나 잘못된 판단을 내리도록 한다.
• 시각적 혼란을 피하기 위해 표준화되고, 일반화된 메타포를 사용한다.
• 한번에 표시하는 정보의 양을 잘 고려해야 한다.
• 많은 정보를 표시해야 할 경우, 정보의 그룹핑과 강약조절을 반영한다.
• 많은 사용자 입력을 요구할 경우 단계별 입력(Wizard UI)를 고려한다.
• 강조를 위해 너무 많은 중복메뉴를 제공하는 것은 지양한다. 

 

Fitt's Law 사용자가 목표로 하는 위치에 얼마나 빠르게 도달하는지에 대한 법칙

시작점에서의 거리와 목표의 크기에 따라 결정되며 행동의 범위가 정확할 필요가 없을 경우 수행 속도는 더 빨리진다. 

 

Hick's Law 선택 가능한 양과 선택에 걸리는 시간에 대한 법칙

사용자가 선택지가 많을 수록 선택에 소요되는 시간이 증가한다. 따라서 한번에 적은 양의 옵션을 제공하거나 계층화 구조로 제공하여야 한다. 하지만 숙련도가 높은 사용자에게는 오히려 한꺼번에 많은 정보를 제공하는 것이 효과적일 수 있다.