UI UX 디자인 학습 일지 / Week 2 - 06 : 인터페이스 디자인, 프로토타입
✔︎ UI 플로우를 먼저 작성 후 와이어프레임을 작성, 범위 외 UI 플로우 생략
어떤 디자인을 해야하는지 미리 파악해서 시간 등 계산
✔︎ UI 검증 (사용성 평가)
Usability 관점에서 user가 잘 사용하는지 아래 항목을 통해 검증
- Navigation: 사용자가 이루고자 하는 목적에 도달하는 데 문제가 없이 버튼 들을 잘 제공하고 있는지
- Familiarity: 사용자가 친숙하게 느끼는지, 초기 학습도가 낮은지
- Consistency: 시스템 내 일관적으로 동일한 기능을 제공하는지
- Error Prevention: 사용자가 실수를 잘 하지 않도록 에러를 예방하기 위해 배려하는지 ex. 정말 모두 삭제하시겠습니까?
- Feedback: 피드백을 하여 수행되고 있음을 나타내는 등 신뢰성으로 이어짐
- Visual Clarity: 시각적 명료성, 우리가 의도한 대로 사용자에게 보여지고 있는가, 버튼이 버튼으로 보여서 사용되고 있는지 등
- Flexibility: 유연성, 시스템 자체적으로 얼마나 다양한 기능을 제공하는 구조인가
- Efficiency: 실제적인 효용성을 제공하는가
* Prototype 프로토타입
: "미리 먼저 만들어 보는 것"으로, 최대한 빨리, 자주 테스트 해서 개선 필요한 점을 파악할 수 있음
목적에 따라 맞는 수준의 프로토타입을 제작.
- Lo-fi: 저렴하게 예측 가능토록 제작 할 수 있음
PowerPoint, Balsamiq 등의 툴 사용
- High-fi: Realistic usability, 현실적인 디자인 검증, 인터랙션 개발 리뷰, 시나리오 검증 등을 통해 실제적인 사용성 평가가 가능
inVision, 프래이머, figma 등의 툴 사용, figma는 긴 시나리오는 제작/관리가 어렵다는 단점이 있음
✔︎ 프로토 타입의 제작
1. 제작 목적 정하기
내부 디자인 공유 목적인지 - 디자인 공유, 개발 리뷰, 요구사항 검증 등
테스트 혹은 외부 공유 목적인지 - 사용자테스트, 사용성 평가, 고객 또는 외부 팀에 공유
2. 제작 범위 정하기
하나의 서비스, 앱 처음부터 끝까지 만드는 것이 아님, 시나리오를 바탕으로 scope을 파악
3. 제작 툴 정하기 ex. figma, AdobeXD..
4. 프로토 타입 만들기
Input type-Navigation type-Target destination-Transaction style..
5. 프로토타입 공유
6. 피드백 수집 (프로토타입의 목적-사용자 테스트, 검증, 피드백 수집, 개선사항 도출 등)
* MVP (Minimum Viable Product)
: 최소한의 노력으로 최대한의 유의미한 사용자 피드백을 얻기 위한 최소한의 제품
빠른 시간 내에 빨리 사용자에게 보여주고 유의미한 피드백으로 개선하기 위함
컨셉, 가설만 있는 초기 단계에서 진행하게 됨
Step 1. 핵심 기능 정의
메인 시나리오 범위를 정해, 어느 부분 기반으로 MVP를 진행할지 확인
Step 2. 제품 개발
가설을 확인할 수 있는 수준의 Lo-fi or High-fi 프로토타입 제작/ 혹은 데모 비디오나 컨셉 시나리오 만으로도 가능
Step 3. 검증, 인사이트 도출
사용자 조사 방법 in-depth interview, FGI(Focus Group Interview), Concept Studies 등 의 방식으로 확인
ex. 대표적인 MVP 의 사례: Dropbox 의 데모 비디오 공유
* 사용성 평가
: 우리가 만든 제품이나 서비스를 사용자는 어떻게 사용하는지, 제작의도에 알맞게 불편함 없이 사용하는지를 평가.
ex. 케찹병 usability 실제 사용되며 발생하는 문제점을 개선하기 위한 평가
- 내부 사용자 테스트, UI 분석, 사용자 조사, 경쟁사 비교분석, Feature coverage(사용자가 원하는 기능이 다 들어있는지)
✔︎ 사용성 평가는 제품의 생애주기 모든 시기에 할 수 있음
▪︎ 출시 전 사용성 평가 Post Usability test
- 인하우스 테스트 리뷰 : 발생 할 수 있는 모든 유저케이스를 검토하며 그를 서비스가 전부 커버하는지 확인
- 사용자 테스트 : 미래 사용자 테스트 ex. Happy Path Comparison, Action time(피츠의 법칙), Informative components, Problem solve..
- 전문가 리뷰 : 내,외부 전문가 평가 테스트 (도메인 관련..)
▪︎ 주요 테스트 시나리오 정의 Primary use case
- 주요 시나리오는 제품의 핵심 기능 또는 자주 발생하여 사용성에 큰 영향을 미치는 시나리오 중심으로 선정
▪︎ 사용성 평가 보고서에 포함되어야 하는 내용
- 테스트 개요 Executive summary
- 테스트 참가자 정보
- 주요 발견점 task
- 사용자의 주요 코멘트 quoto user's comments
- 설문, 만족도 평가 등의 결과
- 개선점 정의, 우선 순위 action item for enhancement
✔︎ 사용성 평가 분석 - Google HEART metrics , 1 page UT plan , 게릴라 UT
이론수업을 들을수록 현업에서 실무에 어떻게 적용되는지 경험을 빨리 쌓아보고 싶다는 생각이 든다 !
생활에서 이용하는 웹/앱 화면에서도 UI 가 어떻게 설계되었는지, UX 개선을 위해 어떤 방식이 적용 되었는지 관찰하게 된다.
이렇듯 우리의 실생활에서 무언가를 편리하도록 개선하는 UX 디자인이 공부할수록 흥미롭다 !