241217 UXUI - 1

개론

• UX user experience (사용자 경험) : 전체
• UI interface (사용자 인터페이스) : 접점
• Usability(사용성) : 측정
  - 효과(Effectiveness), 효율성(Efficiency), 만족도(Satisfaction)를 가지고 특정 목표를 달성할 수 있는 정도나 범위
  - 사용 편의성(Ease of use) 및 학습성(Learnability)
• UCD (User Centered Design) : 철학
  - 철학적 접근 방법이자 디자인 사상
  - 시스템, 기능중신, 직관적, 연구중심

• UX user < CX customer < BX brand
• Design Thinking : 비즈니스 전략에 대한 요구를 충족시키기 위해 디자이너의 감수성과 작업방식을 이용하는 사고방식 ( 협업 + 공감 )
  
  
  
• 비즈니스 모델 캔버스
  
  
  
• 린 캔버스
  
• 제품, 고객, 시장 리스크
  

유저 리서치

페르소나

• 사용자 세분화 : 목적, 불만사항, 니즈 등을 X, Y축으로 구분
  - 사진, 이름, 직업
  - 나는 누구? (평소 생활 : 전기) , 관심사, 사고방식
  - 제품 사용 이유, 사용을 꺼려하는 이유
  - 숙련도 , 목표 , 사회활동
  

조사

유의점

• 인터뷰 : 집단사고 (Ground think)
  - 흔히 집단 구성원들간에 강한 응집력을 보일 때 발생
  - 의사결정시에 만장일치에 도달하려는 분위기로 인해
  - 현실적인 다른 대안들을 외면하게 되는 왜곡되고 비합리적인 사고방식
• 포트 저널 : 호손효과 (Hawthorne effect)
  - 다른 사람의 시선을 인식할 때, 본래 의도나 천성과 다르게 행동하는 현상
  - 사전동의하에 카메라 설치 후, 하루 이틀후면 조사대상도 무신경해짐
  - 이때부터 무의식적인 사용자의 실제 행동관찰 가능
• 온라인 설문조사 : 리커트 척도 (Likert Scale)
  - 설문조사에 사용되는 심리검사 응답척도의 하나 : 반대되는 질문(R)을 숨겨놓음
  - 응답자가 제시된 문장에 대해 얼마나 동의하는지를 답변하도록 함 : 그냥 무조건 5점, R도 5점 X

UX 데이터 모델링

친화도 분석

이해관계자 관계 표시

공감지도 (생각)

여정지도 Jouney Map

• 퍼소나 > 단계와 개요 > 스토리보드 > 터치포인트 및 채널 > 백스테이지 > 스토리보드 > 만족도 > 문제 및 원하는 것 > 해결 방안 및 아이디어

서비스 디자인 (참고용)

• 서비스의 품질과 서비스 제공자와 그 고객 사이의 상호작용을 개선하기 위해 서비스의 인력, 인프라, 통신 및 구성요소를 계획하고 구성하는 활동
  - 인간중심 : 서비스에 영향 받는 모든 사람들의 경험을 고려
  - 협업 : 다양한 배경과 역할을 담당하는 이해관계자들이 디자인 프로세스에 활발히 참여
  - 반복 : 반복적인 실험과 검증을 통해 접근
  - 순서 : 관련 행동들이 순차적으로 시작
  - 실제 : 요구사항은 실제리서치에서 발견,프로토타입 역시 실제 현실에서 구현
  - 전체 : 전체 서비스와 비즈니스의 관점에서 이해관계자의 요구사항을 만족

디자인 노하우

기능 구조화

• 정보구조 IA : 분류와 계층 , 네비게이션 , 검색 , 레이블링
• 사이트 맵
• 플로우 차트
• 유저 플로우
• 레이블 : 카드 소팅
  - 오픈 / 클로즈드 카드 소팅 : 네이밍 가능여부
  • 멘탈모델

사용성 분석

• 사용성 테스트 (Usability Test)
  - 대면 / 비대면
  
  

• 평가 (Evaluation)
  - 휴리스틱 평가 (Heuristic) : 체험적이고, 경험적인. 최소 3명, 평균 5명 평가자

  1. 제품 상태의 가시성 : 제품은 현재의 상태에 대해 사용자에게 적절한 반응을 적시에 제공해야 한다.
  2. 제품과 사용자 현실 세계의 조화 : 제품은 사용자에게 친숙한 언어로 사용자와 소통해야 한다.
  3. 사용자에게 자유와 주도권 제공 : 제품은 사용자가 실수를 해도 언제든지 취소 또는 재실행 할 수 있는 방법을 제공해야 한다.
  4. 일관성과 표준성 : 사용자가 혼란스럽지 않도록 제품이 사용하는 정보 표현방법, 인터페이스등이 일관성이 있어야 한다.
  5. 오류방지 : 사용자가 실수할 수 있는 상황을 제거하여 미연에 사용자 실수를 방지해야 한다.
  6. 보는 것만으로도 이해할 수 있는 디자인 : 사용자가 제품을 이용하는데 기억에 의존하지 않도록 직관적으로 디자인되어야 한다.
  7. 유연성과 효율성 : 제품은 초보자나 숙련자 모두 유연하게 사용할 수 있아야 한다.
  8. 심미적이고 단순한 디자인 : 제품은 불필요한 정보를 배제하여 가능한 단순하고 미학적으로 아름다운 디자인을 제공해야 한다.
  9. 사용자가 오류를 인식하고 진단하고 복구할 수 있도록 지원 : 제품을 사용하는 사용자들이 스스로 상황을 인식하고 대처할 수 있는 방법을 제공해야 한다.
  10. 도움말과 설명서 : 제품은 도움말, 매뉴얼 등을 제공하여 사용자가 쉽게 사용할 수 있도록 해야 한다.

  

벤치마킹

• 비즈니스
• 정보구조
• 사용성
• SEQ (single ease question) 을 통한 벤치마킹 : 동일한 테스크를 완료한 후 전반적으로 얼마나 어렵거나 쉬웠는지를 측정하여 여러 회사를 비교 분석

모바일 UX

픽셀 밀도

• 옛날 일반 디스플레이 72ppi 기준
• PT ( Point ) = DP ( Density-Independent Pixel )
  PPI ( Pixel per Inch ) = DPI ( Dot per Inch )
• 4배수 xxxxhdpi

앱 아이콘

• ios 20 x 20 x @3x
• and 48 x 48 (3x)

UX/UI 디자인 심리학

00의 심리학 법칙

게슈탈트 심리학

디자인 시스템

구성 요소

• 레이아웃 : 간격 , 그리드시스템
• 스타일 : 컬러 , 아이코노그라피 , 타이포그라피
• 컴포넌트 : 버튼, 폼 등의 UI요소
• 패턴 : 내비게이션, 검색 등의 패턴
• 컨텐츠 : 용어 , 보이스톤
• 사용성 : 접근성 , 글로벌 서비스 원칙
  

vs

• 스타일 가이드
  브랜드 요소가 UI에 적용되는 방법을 제공 ( 컬러, 아이코노그라피, 타이포그라피 제공)
• 컴포넌트 라이브러리
  팀내에서 사용되는 공통 스타일과 컴포넌트 제공 (디자인 툴을 통해 자동 동기화되며 추가적으로 코드 제공)
• 디자인 시스템
  엘러먼트, 컴포넌트, 영역 등을 문서와 코드로 제공 (디자인 원칙과 규칙 등을 추가적으로 제공)
  https://adele.uxpin.com/

디자인 데이터 전달

디자인 핸드오프 hand-0ff

• 좌표, 크기, 컬러 / 플로우 / 레이아웃 / 에셋 / 인터랙션 / 코멘트

제플린

오버플로우