Chapter1. UX/UI 제대로 이해하기
UI - 사용자 인터페이스
디자인을 마주할 대상을 고려해 컬러, 타이포그래피, 아이콘 등을 고민하고 실행에 옮기는 작업을 한다.
시각 요소로 제품이나 서비스를 경험하는 사용자의 특정 행동 방식을 형성한다.
좋은 비주얼 디자인은 사용성을 높인다.
인터랙션 - 인간이 제품이나 서비스를 사용하면서 겪는 상호작용
UX-사용자 경험
UX란 사용자가 어떤 제품이나 서비스와 상호작용하는 과정에서 얻는 총체적 경험
UX디자인이란 총체적 경험을 서비스나 제품으로 구현하기 위해 설계하고 실행하는 것
프로덕트 디자이너-제품 중심 조직의 디자이너
- 기능 중심 조직 : 워터폴 방식, 기획팀 → 디자인팀 → 개발팀
- 제품 중심 조직 : 제품 특성에 맞게 조직하는 '제품 중심 조직', 하나의 큰 서비스에서 검색팀, 상세페이지 팀, 탐색팀, 통계팀 등으로 나눔. 프로덕트 오너/프로덕트 디자이너/엔지니어 포함된 스쿼드, 같은 스쿼드에 소속해 있지는 않지만 한 조직의 전문가(디자이너, 개발자) 그룹을 챕터라고 부른다.
- 프로덕트 디자이너는 PO와 함께 시장에서 직접 고객 니즈를 조사하고 제품 개발에 반영한다. 한 번의 개발 과정으로 결과를 내기 보다 기획-디자인-개발 전 과정에 걸쳐 광계자와 긴밀히 협업한다. 그리고 개발 배포 후 시장에서의 사용자 피드백을 바탕으로 제품을 점진적으로 개선하는 역할을 맡는다. 프로덕트 디자이너는 인터페이스를 빼어나게 만드는 것 만으로는 부족하며 종사한 산업군에 대한 깊은 지식(도메인 지식)이 반드시 필요하다.
UX/UI디자인의 진행 과정
더블 다이아몬드 프로세스
01 발견 - 리서치 단계
발견 단계에서는 관련 데이터를 모으고 문제를 탐색한다. (리서치) 리서치의 종류로는 데스크리서치, 전문가 인터뷰, 관찰 조사, 포커스 그룹 인터뷰, 경쟁사 조사 등이 있다. 특히 제품 초기에 예비 사용자를 직접 만나 묻는 인터뷰나 설문은 매우 효과적이다. 사람들이 가지고 있는 문제와 숨은 니즈를 빠르게 발견할 수 있기 때문이다.
02 정의 - 전략 및 컨셉 도출 단계
사용자의 진짜 문제가 무엇인지 파악하고 우선순위를 정하는 단계
어피니티 다이어그램(수집한 정성적 데이털를 그루핑해 라벨링), 페르소나(다양한 사용자의 특성과 요구가 실체가 느껴지는 인물로 의인화), 저니맵(사용자가 서비스에서 느끼는 경험과 다양한 감정을 지도로 시각화). 이 단계에서 주로 서비스의 전략이나 콘셉트를 논의한다.
03 발전 - 와이어프레임 제작 단계
문제를 실질적으로 해결할 방법이나 성공적으로 구현할 방법을 논의한다.
IA(디자인을 위한 정보 구조), 와이어프레임(화면 단위의 레이아웃 설계)
04 전달 - 비주얼 단계
실현가능한 것들을 마지막으로 다듬는 단계. 디자인을 완성한 다음 내부에서 직접 테스트해 보며 오류나 사용자가 어려움을 겪을만한 부분을 미리 발견한다.
Designer's Note - 알아두면 쓸모 있는 UX 용어
| MVP(Minimum Viable Product) | 최소한의 자원, 인력으로 시장에서 검증해볼 수 있는 버전의 제품 |
| W3C | 웹(www)표준을 장려하는 조직. HTML, XHTML, CSS 등 웹 관련 기술 표준을 담당 |
| 피처(Features) | 제품이나 서비스 개발에서 기능 단위. 핵심 기능을 '키 피처', 기능이 덕지덕지 붙어버린 상태가 '피처 크립' |
| 액세서빌리티(Accessibility) | 접근성. 설계한 기능이 고령자나 장애인도 충분히 사용할 만큼 접근성이 좋은지 |
| 피저빌리티(Feasibility) | 실현 가능성. 현재 팀의 자원이 어느정도 인지 파악. 이 자원으로 제품을 제작할 수 있는지 실현가능성 검토할때 사용 |
| 가이드라인(Guideline) | '기준'이나 '지침'을 뜻함. 디자인 시스템이나 코딩가이드. 구글 머티리얼 디자인 |
| VOC(Voice of Customer) | 고객의 소리. 사용자의 리뷰, 불만. |
| 테스크(task) | 사용자가 최종 단계에 도달하기까지 수행해야 하는 절차. |
| UGC(User Generated Content) | 사용자가 직접 생성한 콘텐츠. 직접 촬영해 업로드한 사진 또는 영상 |
| 피델리티(Fidelity) | 시각적으로 최종에 얼마나 가까워졌는가를 판가름하는 충실도. 퀄리티에 따라 로우 피델리티, 하이 피델리티 |
| 어포던스(Affordance) | 행동 유동성. 인터페이스를 보기만해도 다음에 어떤 행동을 해야 할지 즉각적으로 알 수 있어야 한다. |
UI의 구조와 요소
멘탈 모델/멘탈 모델 부조화
멘탈 모델은 사물이 어떻게 작동할 것이라 유추하는 인간의 사고 과정을 구조화한 것. 링크를 클릭하면 새로운 창이 뜰 거라는 기대감. 사람들은 자신의 경험을 토대로 사물의 작동 방식을 이해하려는 습성을 가진다. 멘탈 모델 부조화는 사물의 작동 방식이 예상에서 벗어나는 것을 의미한다.
UI의 요소
출처 : Ant Design Component
'B O O K > Design Study' 카테고리의 다른 글
| 공감의 디자인 - 존 롤코 (2) (1) | 2022.08.25 |
|---|---|
| 사랑받는 제품을 만드는 공감 사용법 (1) (0) | 2022.07.28 |
| UX심리학(3) - 사용자가 서비스를 기억하는 과정 (1) | 2022.04.13 |
| UX심리학(2) - 사용자가 인지하는 원리 (1) | 2022.04.12 |
| UX심리학(1) - 사용자의 주의를 집중시키기 위해 지향할 것 (0) | 2022.04.09 |
댓글