<UI/UX 디자인 원리와 프로세스의 핵심>
출처 : 책 <뉴욕 프로덕트 디자이너가 알려주는 UX 디자인 입문 A to Z>
위키북스 사
에릭(박의준) 지음
ISBN 9791158393328
인터넷 유저 경험(UX)에 관한 통계
- 사용자는 웹사이트를 방문했을 때 평균적으로 3초 이내에 사이트를 떠난다
- 사용자가 서비스를 처음 사용할 때 갖게 되는 첫인상의 94%는 디자인과 관련된 것이다
- 88% 이상의 사용자는 웹사이트가 사용하기 불편하면 다시 사용하지 않는다
- 60%의 사용자들은 웹사이트를 사용할 때 자신의 원하는 정보를 찾지 못한다
- 오직 47%의 웹사이트만이 사용자의 행동을 유도하는 메인 버튼을 적절하게 디자인하고 있으며, 3초 안에 사용자로 하여금 해당 버튼을 찾을 수 있게 해놓았다
p.30
02. 디자인 원리 기본
2.1 디자인 원리 알아야 하는 이유
1. 디자인 할 때 실제로 도움 줌. 한 분야의 오랜 시행착오 끝에 얻은 인사이트임. 실행착오를 줄이고 빠르게 수준을 높일 수 있음.
2. 논리를 더해 줌. 함께 협업한 사람들에게 자신의 기획물과 디자인을 객관적으로 설득하는데 도움 됨
2.2 일관성의 원리
인터페이스는 일관적이어야 한다.
디자이너, 개발자: 디자인 시스템 미리 정리하면 업무 효율 극대화
유저: 페이지별로 달라지면 불편해보임. 반면 페이지 별로 공통점이 있으면 익숨함을 느낌. 익숙함 -> 예측 가능 -> 혼란이 적음.
예를 들어 버튼의 위치와 방향은 항상 일관되게 한다.
스마트폰 사례
- 아이폰: 정책상 탭바는 하단에 위치 권고
- 안드로이드: 탭바는 상단에 위치 권고
2.3 행동 유도성의 원리
행동 유도성(affordance)는 사용자가 제품 봤을 때 직관적으로 어떻게 사용할지 알 수 있게 해주는 것. 설명서 없이도 고민하지 않고 사용할 수 있도록.
2.4 멘탈 모델과 콘셉트 모델
멘탈 모델(mental model) : 사용자가 가지고 있는 기대치. 훈련, 경험, 지식으로 형성.
- 예시로 전통적인 책에서 다음 장 보려면 종이를 실제로 넘겨야 함.
- 기존 아이폰 초기 모델의 카메라 앱은 기존 스마트폰 경험이 부족한 유저들의 멘탈 모델을 고려하여 사실적인 느낌을 강조한 디자인. 이렇게 사실적으로 디자인하는 것을 Skeuomorphism이라 부름.
콘셉틑 모델(concept model) : 제품이 제공하는 경험이나 인터페이스.
- 예시로 전자책에서 종이 넘기는 손동작으로 하면 다음 장 표시되도록 구현.
- 아이폰을 사람들이 많이 사용하면서 카메라앱 모양을 실제적인 느낌을 살리지 않아도 충분히 이해하는 수준이 되었기에 점점 추상화되는 플랫한 디자인으로 바뀌기 시작함.
2.5 대응의 원리
대응(mapping)의 원리는 통제 장치(controller) 작동 시 인터페이스나 디스플레이 등 결과물을 사용자가 예측 가능하게 디자인하는 것을 칭함.
- 핸들을 왼쪽으로 꺾으면 좌회전, 우측으로 꺾으면 우회전하는 것
- 구글 아이포토 우측에 타임라인 표시
2.6 슈퍼마켓에서 배우는 정보 설계
Information Architecture는 수 많은 정보 가운데 사용자가 원하는 정보를 쉽게 전달할 수 있도록 정보를 카테고리 별로 잘 정리하는 것.
- 슈퍼마켓
- 캔 음식
- 냉동 식품
- 신선 식품
- 야채
- 과일
- 사과
- 귤
기존 제품들을 그루핑하면 소비자가 쉽게 파악 가능하다.
신발 브랜드 올버즈(allbirds)
- For Everyday
- For running
- For lounging
2.7 사용자 의도
사용자 의도(User Intent).
분류
- 사용자 의도 높음 : 목적 의식 있고 구매의도 높음. 사용자가 어떤 제품을 사기 위해 웹사이트에 들어왔을 때 자신이 무엇을 할 지 잘 알고 있음. 태크스 완료 위해 구체적 절차 밟아나갈 수 있음. 사과가 먹고싶어서 슈퍼 신선코너에 가는 경우.
- 사용자 의도 낮음: 모호한 목표는 있지만 구체적 실행 능력 부족. 배고픈에 뭘 먹어야 할지 몰라서 일단 슈퍼 들름.
사용자 의도 낮은 경우, 사용자가 서비스가 뭐고 뭘 파는지 파악하기 어려울 수 있음. 이를 위해
구조 분석
카테고리와 함께 실제 판매중인 제품들을 보여주는 것이 관건.
상단
- 최상단(Hero) 영역 : 페이지에서 스크롤 안내려도 볼 수 있는 가장 중요하고 비싼 지점.
- 상단: 제품 카테고리 영역: 생활용품, 패션, 미용, 식재료 등 분류와 대표 사진으로 낮은 의도 사용자가 이 웹사이트는 무엇을 파는지 개괄적으로 알 수 있게 보여줌. 의도가 낮은 사용자의 경우 카테고리 구분 통해 자신이 원하는 제품 빠르게 찾을 수 있음.
하단
- 추가 학습. 특별 아이템 같은 것을 소개 가능.
마지막
- 실제 판매중인 상품 보여줌.
2.8 UX 디자인 원리 공부 팁
- 실제 서비스 사례 보고 좋은 점, 불편한점 분석해보기
- UX 관련 서적 읽기
- 기사/칼럼 등 꾸준히 보기. 닐슨 노먼 그룹 추천 (https://www.nngroup.com/reports/how-people-read-web-eyetracking-evidence/)
03. UI디자인을 위한 디자인 원리
3.1 유사성의 원리 (게슈탈트)
3.3 근접성의 원리(게슈탈트)
가까이 있는 요소 끼리 연관성 있다고 봄.
3.4 3초 룰과 스캔 용이성
사용자는 웹사이트 방문시 평균 3초 내 웹사이트 첫인상 형성. -> 3초 내 머물지 떠날 지 결정.
이를 위해 스킨 용이성이 중요. 필요 정보를 빠르고 쉽게 못 얻으면 바로 떠난다. 중요한 정보가 눈에 잘 들어오게 만드는 것이 핵심. 정보의 중요성에 따라 디자인 요소를 차별화할 필요가 있음.
3.5 CTA(Call-To-Action) 중요성
CTA는 사용자가 다음 단계로 가는 행동을 할 수 있도록 제공하는 버튼이나 링크 말함.
마켓컬리의 경우 ‘장바구니 담기'를 CTA로 활용.
디자이너가 화면 디자인 시 고려해야 할 두 가지
- 사용자의 학습 : 페이지 최초 방문 시 페이지에 대한 정보 습득. 이미지와 제품 정보를 통해 내가 구매를 고민하고 있는 제품이 어느 카테고리에 있는지 파악.
- 사용자의 행동: 원하는 정보 얻고 구매 의사 결정을 할 때 어떤 행동을 해야하는지 명확하게 알려줄 필요가 있음. 이를 위해 CTA 버튼이 뚜렷해야 하고 관련 문구도 명확해야 한다. 슈퍼마켓의 경우 장을 다 봤을 때 계산대가 어디있는지 바로 파악할 수 있어야 한다.
CTA가 여러 개일 경우 메인과 서브로 위계 질서를 만들어 강약을 조절하면 된다.
CTA는 매우 중요한 요소이기 때문에 A/B테스트가 중요하다. 어떤 회사는 A/B테스트 중 CTA 테스트에 20%를 할애하기도 함.
3.6 디자인 시스템 이해하기
디자인 시스템은 재사용 가능한 구성 요소와 패턴을 사용해서 커져가는 제품의 디자인을 관리하기 위한 표준을 의미. 디자인 시스템은 제품의 규모가 커져서 디자인해야 할 화면이 많아지더라도 시각요소의 일관성을 유지하는 데 도움이 된다.
재사용 가능한 요소들을 ‘컴포넌트'로 정의해서 복붙 가능하게 사용.
04. 유저 리서치 UX의 핵심, 사용자 이해하기
4.1 유저 리서치란 무엇인가?
UX디자인이란? 사용자가 겪는 문제를 사용자 관점에서 해결하는 것.
유저 리서치란? 유저가 가진 문제를 해결하기 위해 UX유저 리서치는 사용자의 피드백을 받기 위한 모든 활동
4.2 유저 리서치의 장점
- 사용자 행태(behavior)와 사용자가 그렇게 행동하는 이유 파악할 수 있다. 인터뷰, 통계 등
- 가설 검증 가능하다. 프로토타입(시제품) 만들 시 사용자에게 실제로 도움 줄 수 있을지 유저 리서치 통해 알 수 있음.
- 실패 리스크 줄이고 비용 절감 가능. 리서치 없이 제품을 만들면 리스크가 큼.
- 디자인 근거 제공하고 이해관계자의 동의와 승인 이끌어냄. 왜 도움되는지 설득 용이
- 새로운 기회 포착 가능
4.3 유저 리서치의 종류와 목적
분류방식1. 정성 조사와 정량 조사
정성 조사
- 주관적, 사용자 생각, 의견의 깊이 있는 인사이트 얻기 좋음.
- 제품 사용하면서 어떤 불편함, 왜 사용하지 않는지
- 예) 1:1 심층 인터뷰, 사용성 테스트
정량 조사
- 사용자에 대한 객관적 데이터 얻을 수 있음.
- 양적을 많은 데이터 수집하는 것이 필요
정성, 정량 조사는 상호보완적
분류방식2. 무엇을 생각하는가? 무엇을 하는가?
Why, 어떤 의도를 가지고 있는가 : 사용자가 무엇을 원하고 생각하고 느끼는가
What, 무엇을 하는가: 사용자가 하는 행동은 어떤 의미인가.
| 무엇을 생각하는가 | 무엇을 하는가 | |
| 정성조사 | 1:1 심층 인터뷰, 고객센터 | 사용성 테스트, 고객의견 |
| 정량조사 | 설문조사 | 애널리틱스, A/B테스트 |
4.3.1 사용자 생각과 의도 파악 유저 리서치 기법
1:1 심층 인터뷰
1:1 In-Depth Interview. 인터뷰 통해 웹사이트, 앱, 제품 등에 대한 사용자의 생각 들어볼 수 있다. 사용자의 일상에서 어떤 어려움이 있는지, 특정 제품을 왜 사용하는지, 제품 사용 시 어떤 불편함이 있고, 어떤 개선 아이디어가 있는지.
대상자의 생각과 행태, 행태에 대한 생각을 최대한 이해하는 것. 응답의 이면과 그에 대한 맥락을 이해해야 한다.
5~7명 정도가 적당.
한 사람 집중적으로 인터뷰하면 대중 앞에서 이야기하기 어려운 개인적인 이야기 할 수 있다.
단, 데이터가 적어 일반화하거나 정량화하기 어렵다는 단점이 있다.
인터뷰 가이드
일대일 심층 인터뷰 전 스크립트(대본) 정리한 가이드 문서 미리 만들어두는 것이 좋다. 인터뷰 목적을 비롯해 사용자에게 어떤 질문을 해야 할지 정리해 둔다.
인터뷰 결과 분석하고 보고하고 보고받는 이해관계자들을 고려해서 가이드를 설계하면 좋다.
일대일 심층 인터뷰 계획서 포맷
프로젝트 기간:
제목:
참여팀원: (인터뷰 진행자, 노트 작성자 등)
프로젝트 배경: (인터뷰 진행 이유, 프로젝트 개요 등 이해관계자들이 쉽게 알 수 있도록 한두 문장으로 요약)
프로젝트 목표: (인터뷰 통해 배우고자 하는 부분 or 얻고자 하는 정보)
가설: (인터뷰 통해 검증하고자 하는 부분)
인터뷰 참여자: (인터뷰 참여자는 몇 명이고, 어떤 성격의 참여자들을 리크루팅했는지 요약)
대본: (본격적으로 인터뷰 할 때 이야기할 내용 대본으로 정리)
- 프로젝트 소개
- 질문1
- 2
- 3
- 4
- 5
- …
- 마무리 멘트
일대일 심층 인터뷰 언제 하는 것이 좋을까?
프로젝트 시작 초기에 진행. 아직 사용자에 대한 이해 부족하고 사용자 완전히 정의하지 못한 경우 제품 설계 시 어떤 타깃 사용자를 고려해 제품을 만들지 알아야 한다. 일대일 심층 인터뷰는 타깃 정의에 도움되며, 정의서로 페르소나(persona) 제작 가능.
질문은 어떻게 하는 것이 좋은가?
중요한 것은 가능성을 열어 두는 것. 우리가 발견하지 못한 사용자의 더 중요한 문제가 있을 것.
- 사용자의 배경 이해하기 : 풍부한 인사이트 얻는데 도움이 됨.
- 육하원칙 활용해 열린 질문 하기
- 사용자가 생각하는 일반적인 프로세스가 아닌 실제 경험 물어보기
- 후속 질문하기
설문 조사(Survey)
사용자들에게 질문을 보내서 그들의 경험을 배우고 피드백을 모으는 유저 리서치 기법.
정량적인 데이터 얻는 기법. 데이터는 아이디어, 문제, 사용자의 특성, 행동 등에 대한 정량 데이터를 얻을 수 있음. 다른 유서치 기법에서 나온 결과를 보조하는 역할. 사용성 테스트와 함께 활용 시 효과 극대화.
코멘트, 제안 등으로 정량 데이터 얻을 수 있음. 예를 들어, 어려움 1~5 선택(정량)하고 어렵다면 어떤 부분이 어렵습니까(정성)라고 물을 수 있음.
설문조사 하는 방법
- 인터셉트 설문 조사: 제품 사용 중 특정 사용 시점에서 설문조사하기. Qualaroo 솔루션 사용 가능.
- 이메일/SNS 설문 조사: 포괄적인 주제에 대해 질문 가능. SNS 또는 특정 사용자군이 모여 있는 그룹이나 카페 등에서 설문조사를 진행할 수 있다.
4.3.2 사용자 행태 파악하는 유저 리서치 기법
사용성 테스트
UX 디자인이 가설 설정하고 그것을 검증하는 과정이라 했을 때, 사용성 테스트(Usability Test)는 가설을 검증하기 위해 진행하는 기법. 사용성 테스트를 위해 가설이 준비되어야 있어야 함. 가설에는 사용자, 문제, 해결책이 포함되어야 함.
사용자 초대해서 프로토타입 보여주거나 실제 제품을 써보게 하고 특정 태스크 수행하면서 그들의 행동을 관찰하고 생각 들어보는 방식으로 진행.
참여자 수는 5명 내외.
진행가이드
사용성 테스트 계획서
프로젝트 기간:
제목:
참여한 팀원:
프로젝트 배경:
프로젝트 목표:
가설: (테스트를 통해 검증하고자 하는 사항 기술)
테스트 참여자: (인터뷰 참여자는 몇 명이고, 어떤 성격의 참여자들을 리크루팅했는지 요약)
대본:
- 프로젝트 소개
- 마인드셋 설정(당신이 ~의 상황이라고 가정해주세요)
- 질문 및 태스크
사용성 테스트의 목적과 사용자가 시간순으로 어떤 태스크 수행해야 하는지, 태스크 수행에 관한 관찰 결과에 따라 어떤 질문을 해야 할지 정리할 필요가 있다.
영상 기록이 필요하다.
언제?
사용성테스트는 프로젝트 시기 언제나 할 수 있다. 완성도에 따라 다른 피드백을 받는다.
수행은 어떻게?
어떤 특정 결과나 대답 유도하지 않고 자연스러운 수행 결과를 관찰하는 것이 중요하다.
- 사용자 배경 이해하기
- 태스크와 질문의 흐름을 자연스럽게 구성
- 한 번에 하나씩 수행하게 하기
- 육하원칙(언제, 어디서, 누가, 어떻게, 왜, 무엇을)을 활용해서 열린 질문하기
A/B 테스트
기존안(A)과 개선안(B)을 동시에 사용자가 사용할 수 있는 환경을 만들어 어떤 안이 더 효과가 있는지 측정하는 것이다. 기본적으로 정량 조사에 기반함. A안, B안 중 어떤 것이 더 구매율을 높이거나 화면 전환율이 높은지 등 어떤 지표를 통계적으로 측정해서 객관적으로 효과 비교.
구글 옵티마이즈 활용하면 간단한 요소 위치 변경, 카피라이팅 문구 테스트 가능하다.
주의할 점
- 한 번에 하나씩 테스트하기. 색상과 위치 동시에 변경하기 보다는 색상 하나만 변경하는 것이 좋다.
- 명확한 성공 지표 설정하기: 메인 버튼 디자인 변경 -> 버튼 클릭률
애널리틱스
제품을 어떻게 사용하는지 사용자 활동 추적해서 통계 데이터 얻는 툴. 구글 애널리틱스, 믹스패널 등이 있음.
어떤 화면에 몇 명 방문자(트래픽), 어떤 경로를 통해 다른 화면으로 몇 명이 이동했는지(화면전환율) 등 확인 가능.
4.3.3 그 밖의 유저 리서치 기법
고객센터의 고객 피드백
상담 내용 중 제품 개선에 도움되는 내용이 많음. 고객 센터의 데이터를 UX디자이너가 접근하여 제품 개선에 활용할 수 있도록 파이프라인 구축 필요.
그 외 별점 및 리뷰에서도 파악 가능.
다이어리 기법
특정 연구 주제에 대해 사용자가 자신이 하는 행동, 활동, 생각, 느낌 등을 기록해서 정성적인 데이터 수집하는 유저 리서치 기법.
계획
어떤 사용자에게 기록을 요청할 것인지, 연구 주제는 무엇인지, 어떤 순간에 기록하고, 기간은 어떻게 할 지.
4.3.4 페르소나
페르소나란?
페르소나는 타깃 사용자층을 설명하고 이를 팀원과 함께 공유하기 위해 만든 가상의 인물을 말한다. 만드는 이유는 디자이너와 조직, 회사가 명확하게 타깃으로 삼고자 하는 사용자에 대해 함께 공감하고 그것을 토대로 제품과 사용자를 향한 메시지를 만들기 위함.
왜 사용하는가?
- 선택과 집중 도와줌 : 모두를 위한 디자인은 누구를 위한 디자인도 못된다.
- 우리가 어떤 문제 해결하고 있는지 팀원들과 문제의식 공유 할 수 있음
언제 만들어야 하나?
언제든 만들 수 있으나 지속 개선하는 것이 중요함.
05. 사용자 끌어당기는 UX는 어떤 프로세스를 통해 만들어질까?
5.1 디자인 씽킹을 통해 이해하는 UX 디자인 프로세스
디자인 씽킹 <-> 기술/솔루션 중심 접근법
- 디자인 씽킹: 어떤 문제를 해결하기 위해 제품 사용자를 가장 중심에 두고 혁신을 이루어내고자 하는 방법론. 소프트웨어 산업
- 기술/솔루션 중심 접근법: 기술 활용해 사람들이 사용할 만한 무언가를 만들어 보자. 반도체 산업.
디자인 싱킹 5단계
- 공감(Empathize)
- 정의(Define)
- 아이디어 도출(Ideate)
- 프로토타입(Prototype)
- 테스트(test)
5.2 공감 단계
공감단계 진입 전 목표 설정
- 프로젝트 시작 시 목표 세움. 회원 가입율 높이거나 상품 구매율 높인다 등. “상세페이지 유입 사람은 하루 평균 10,000명. 실 구매는 200명(2%). 이번에 상품 페이지 개선해서 2%에서 3%까지 올려보자. “
- 유저 리서치 해서 쏘비자에 대해 파악
공감 단계에서 할 수 있는 유저 리서치
- 사용자 데모그래픽 조사: 어떤 사람인지, 연령대, 지역, 성별 등 파악. 구글 애널리틱스 주로 활용. 이를 통해 페르소나 정의하는데 활용 가능.
- 1:1 심층 인터뷰
- 사용성 테스트
- 애널리틱스
5.3 정의 단계
문제 정의
사용자와 문제를 정의하기 위해 노력을 기울였는지, 어떤 활동을 했는지 파악하는 것이 중요하다. 회사에서 디자이너 채용 시 이를 주의깊게 바라봄.
현업에서 일하면서 느낀 것은 멋진 디자인 결과물 만드는 것보다 좋은 문제를 찾는 것이 훨씬 어렵다. 문제가 제대로 정의되지 않으면 아무리 멋지고 예쁜 완성품도 사용자에게 의미가 없다.
함께 일할 사람, 함꼐 문제를 찾고 해결책을 고민할 사람을 뽑는다.
여러 문제들이 있으면, 어떻게 문제를 선택하는가? 포스트잇으로 나열하고 팀원 투표를 통해 해도 가능하다.
타깃 사용자 정의
나이, 직업, 사는 지역 , 라이프스타일 등 제품 기획 영향 줄 수 있는 요소를 구체적으로 정의.
내부 상황 확인
- 리소스 : 디자인 및 개발 사이즈가 얼마나 크고 인력이 많이 필요한가?
- 효과: 얼마나 많은 사용자들에게 도움을 줄 수 있는가?
5.4 아이디어 도출 단계
최대한 많고 다양하게 아이디어 발산하는 것이 필요. 이후 장단점 따져 가려내고, 필요 시 아이디어 통합, 발전 가능.
여러 직군 사람들과 함께 참여. 수렴보다는 발산이 핵심.
5.4.1 아이디어 도출 방법
- 브레인라이팅: 정제되지 않는 날것 아이디어 뽑을 때 주로 활용. 정해진 시간 내 여러 가지 아이디어를 포스트잇과 같은 종이에 적음. 내성적일 수도 있는 참여자들에게 생각을 이끌어 낼 수 있음. 다 적고 각자 자신의 아이디어에 대해 말하게 하고, 비슷한 성격을 가진 아이디어는 그루핑할 수 있음.
- 경쟁 사례 데모: 아이디어 구체화할 때 자주 활용. 주어진 문제 해결하고 있는 다양한 사례들을 참여자들과 함께 살펴보는 방법. 이를 통해 문제 해결 방식이 어떤 것이 있고, 어떻게 구현되는지 파악할 수 있음. 미팅 이전 사전 사례 조사 필요. 참석자들은 그 사례에 대한 장점, 단점, 활용점을 공유함.
- 크레이지8: 8개 스케치. A4 용지 3번 접어 나눈 8구획. 1분에 1개 아이디어 그리기.
5.4.2 아이디어 좁히기
아이디어를 최대한 도출했다면 이를 좁혀서 우선순위를 정해야 한다.
아이디어 좁히는 방법
- 팀 프로젝트 : 단순 투표, 투자자 관점에서의 투표 등으로 아이디어 선정
- 개인 프로젝트 : 아이디어 장/단점 비교하여 아이디어 선정
아이디어 < 스토리
- 아이디어 그 자체보다 그 아이디어가 나온 앞뒤 과정이 더 중요함.
- https://okky.kr/articles/1314279 이 분이 쓰신 내용에도 이런 내용이 있는데 참고할 만하다.
- 아이디어가 나오게 된 배경, 어떤 문제를 해결하기 위해 나온 아이디어이며, 그 문제를 어떻게 발견했는지 알아야 아이디어의 명분을 얻을 수 있다
- 면접관 입장에서 독창성보다는 아이디어가 나온 전후 배경에 대한 스토리를 잘 풀어내는 지원자에게 훨씬 더 후한 점수를 준다
5.5 프로토타입 단계
도출된 아이디어들 중 테스트할 것들로 좁혀졌다. 그 아이디어를 테스트해보기 위해 만드는 것이 프로토타입 또는 시제품이라 한다.
프로토타입은 완성도에 따라 3가지로 분류한다
- 로우파이(Low-Fidelity) 프로토타입: ‘스케치’ 방법. 명쾌하고 직관적으로 커뮤니케이션 가능. 로우파이는 짧은 시간 내에 빠르게 만들어내는 정도의 수준.
- 미드파이(Mid-Fidelity) 프로토타입: ‘와이어프레임’ 방법. 화면 내 버튼, 링크 등을 흑백 버전으로 표현 권고. 화면 사이 이어주는 화살표(워크플로) 표현. 앱 기능과 구동 방식에 대해 커뮤니케이션 하는 것이 핵심.
- 하이파이(High-Fidelity) 프로토타입: ‘UI 디자인' 방법. 하이파이는 출시 제품과 거의 흡사.
효율적인 업무를 위해 기능(로우파이, 미드파이)부터 먼저 논의한 후 세부 디테일한 디자인(하이파이)으로 넘어가는 것이 필요.
5.5.1 로우파이
5.5.2 미드파이
유저플로우
유저플로우란 웹이나 앱에서 어떤 태스크 완료하기 위해 밟아야 하는 단계를 정의한 것이다. 유저가 처한 상황, 숙소 상세 페이지에서 어떤 정보를 추가로 원하는지 어떤 방향으로 가고싶어 하는지 경우의 수를 정리한 문서가 유저 플로우.
5.5.3 하이파이
UI디자인의 목적은 프로토타입 후 바로 출시하거나 사용자에게 테스트를 하기 위함이다.
5.5.4 디자인 핸드오프
출시 확정된 디자인 산출물을 디자인 핸드오프라 한다. 색상 코드, 폰트 크기, 구성요소 간 간격 등 픽셀 단위 등 세부 값까지 모두 포함되어 있다.
5.6 테스트 단계
5.6.1 개발 전 테스트
사용성 테스트
사용자에게 프로토타입 사용하게 하여 관찰함. 어려운 점, 어떤 생각을 하는지 등 파악하기 좋음.
5.6.2 출시 후 테스트
업데이트 기능 또는 제품이 사용자의 이용률이나 구매율에 얼마나 영향을 미쳤는지 수치를 파악하고, 처음 설정한 목표 달성 여부를 확인하는 기회이다.
애널리틱스
- 애널리틱스를 통해 정량 데이터로 과학적 인사이트 얻을 수 있음
A/B 테스트
- 기존 버전과 수정 버전을 비교.
사용성 테스트
- 출시 이후 사용성 테스트를 통해 정성 데이터 수집하여 정량 데이터로부터 얻은 인사이트를 보완.
5.7 디자인은 반복에 의한 개선이다
공감 - 정의 - 아이디어 도출 - 프로토타입 - 테스트
(디자인 씽킹의 단계를 이터레이션한다)
10.1 추천도서
- 린 스타트업, 인사이트
- 사용자를 생각하게 하지 마!, 인사이트
- 도널드 노먼의 디자인과 인간심리, 학지사
- 사용자 경험 스케치, 인사이트
- UX/UI의 10가지 심리학 법칙
- 어떻게 성곡했나, 알에이치코리아
- 단순함의 법칙, 유엑스리뷰
10.2 디자인 원리
휴리스틱 평가 10항목
- 상태에 대한 노출
- 익숙함
- 복구 가능성
- 일관성
- 오류 예방
- 기억의 부담 줄이기
- 효율성
- 심미성과 미니멀 디자인
- 명확한 오류 문구
- 사용자 도움
10.3 트렌드 조사 레퍼런스
Behance
Dribble : 정해진 사이즈 이미지 공유
Mobbin.design : 스마트폰 앱 디자인
Pttrns : 스마트 기기 리소스
댓글