2022/03/14 Project를 위한 UX/UI

괴발새발자 2022. 3. 14. 17:08

UI는 UX의 일부이다.

콘텐츠
- 사용자에게 다양한 형태의 콘텐츠와 관련 정보를 제공
- 사용자의 생각 방식(멘탈 모델)에 맞는 카테고리와 효과적인 검색 도구 설계가 중요
- 예시 : 넷플릭스
태스크
- 사용자의 업무를 처리하는 것을 목적
- 초보 사용자와 숙련 사용자를 모두 고려
- 예시 : asana, 노션 등
마케팅 캠페인
- 일정 기간 동안 특정 사용자들로부터 설문에 대한 데이터를 얻거나 홍보를 목적
- 사용자에게 명확, 즉각적인 가치 제안, 흥미 유발
- 예시 : 전시 사이트 (seoul.designfestival.co.kr) 등
브랜딩
- 회사와 회사 제품에 관심을 가진 사용자 간의 긍정적 관계를 촉진시키는 것을 목적으로 함
- 현재 사용자, 잠재 사용자, 사업 파트너, 미디어, 구직자 고려
- 예시 : 회사 사이트 등
커머스
- 앞 4가지의 UX 특성을 모두 사용
- 유용한 콘텐츠와 편리한 기능 제공이 필요
- 예시 : 쿠팡 등
온디맨드
- 태스크, 마케팅, 브랜딩 제품 유형의 특성을 포함. 필요할 때만 사용
- 빠르게 원하는 태스크를 수행할수 있도록 함
- 예시 : 카카오택시 등
소셜
- 댓글, 피드 등 태스크 중심의 제품 특성을 포함
- 즐거운 기능 제공하는 동시에 강력한 보안 기능을 제공해야함
- 예시 : 인스타그램 등

요구 사항 수집
- 사용자-비즈니스-기술
정보 구조(IA)
- Information Architecture : 사용자들이 제품을 쉽게 사용할 수 있도록 이해하기 쉬운 이름과 같은 속성으로 메뉴를 그룹 짓는 것
- 사이트맵 : 연습으로 다른 사이트 사이트맵을 참고, 작성해볼 것
User Flow
- 사용자가 제품을 사용하는 모든 과정을 다이어그램으로 보여주는 것
- 미리 체크할 때 유용함. 전체적인 것을 눈으로 볼 수 있음. 불필요한 것을 정리할 수 있음
- 다이어그램 모양은 국제 표준으로 정해져있음. 일관성 있게 작성하는 것이 좋음
- 페이지별 작성 가능
Wireframe
- 비주얼 디자인을 고려하지 않고 스크린을 순서대로 나열하고 연결하는 작업
- Low Fidelity Wireframe : 펜, 종이 등을 이용해 러프한 스크린 레이아웃 그림. 사이즈, 컬러 등을 고려할 필요 없음
- Mid Fidelity Wireframe : 좀 더 구체적으로 피드백을 교환해야할 때. 여전히 사이즈, 컬러 등을 고려할 필요가 없음. 버튼이나 링크 표시
- High Fidelity Wireframe: 실제 제품에 가깝게 작업. 그래픽 작업이 시작된다고 볼 수 있음. 화면에 모두 번호 붙어있음.
Prototype
- Wireframe에 액션(상호작용)이 추가된 작업
- 시제품이 나오기 전 개발 검증 단계. 미완성 버전의 중요한 기능이 포함되어 있는 초기 모델