[231228]UXUI디자인 입문 6주차 강의정리/HW_레퍼런스 분석

12/28

*강의정리*

1. 레퍼런스 분석
   : 여러가지 사례를 상세히 분류해 도움이 될 만한 부분 찾아보는 과정
    세부요소를 관찰하면서 좋은 점 나쁜 점, 그 이유 찾고 생각해보기
   - 왜 하나?
   : 분석 과정에서 디자인에 대한 영감을 얻고 좋은 디자인을 구분하는 지식 쌓을 수 있음
   - 하는 방법?
   : 페이지(홈, 마이페이지, 장바구니 등)>모듈(리스트, 네비게이션 등)>엘리먼트(버튼, 뱃지, 탭 등)>파운데이션(색상, 폰트, 아이콘 등) 으로 나누기
   BUT, UI요소->화면으로 나누어보자!!!
     UI요소들을 디자인 원칙에 대입하여 사용성이 높은지, 심미적으로 아름다운지 등 다양한 관점에서 디자인 평가해보기
     핵심은 주장과 그에 맞는 논리적 근거를 찾는 것!(다양한 이론 사용)
     분석 후 도움이 될 것 들을 그룹화하여 정리해보기->나쁜 사례를 개선할 수 있는 방법 생각해보기
     
2. UX/UI 디자인 패턴
   :디지털 제품, 주로 앱이나 웹에서 자주 사용되는 디자인 요소를 말한다.
   - 보편적인 범위 내에서 디자인하고 동작하는 것이 좋음 왜냐? 사용자는 기존 경험과 학습 내용을 바탕으로 행동하기    때문
   - 자주 사용되는 패턴: 온보딩/로딩/검색/회원가입/리스트/카드/캐러셀
   1) 온보딩
     사용자가 제품을 처음 만나는 과정=서비스를 처음 만나는 사용자가 기능을 잘 이해하고 가치를 느낄 수 있도록 돕는    과정
     제품에 대한 첫인상을 긍정적으로 만들기!
     >튜토리얼: 조작법이나 설명을 넣는 방식 (추천X) - 사용자 입장에서 제한 당하는 느낌 튜토리얼이 필요 없을 정도로    직관적이게 디자인하기 
     >가치 보여주기: 얻을 수 있는 가치를 몇 개 화면으로 보여주는 방식- Skip버튼 넣기, 캐러셀로 자동으로, 동영상도 굿
     >개인화 설정하기: 개인화가 핵심 기능인 서비스에서 사용되는 유형(스포티파이 시작화)
   2) 로딩
     화면이 그려지는 동안 사용자가 기다려야 할 때 보여주는 화면
     가능한 빨리, 로드 중이고 시간이 얼마나 걸릴지 명확히 전달, 기다리는 동안 볼 거리 제공도 굿
     종류1) 스피너 아이콘, 애니메이션 활용
     종류2) 프로그레스 바: 진행 상황을 알려주어야 할 때 사용
     종류3) 스켈레톤: 화면에 가장 먼저 노출되어 실제 페이지 예측할 수 있음, 주객전도 주의!, 가장 단순하게 구성
   3) 검색
     :사용자가 원하는 정보를 빠르게 찾을 수 있도록 키워드로 정보 찾는 방법
     Tip-원하는 결과를 보여줄 수 없을 때 다른 행동 유도하기, 추천 콘텐츠/다른키워드 검색 유도/자동 완성 기능으로 오    타 방지 등 
     종류1) 기본 검색 화면: 제품에서 차지하는 검색의 중요도에 따라 서비스마다 위계가 다름
     종류2) 연관 상품 추천/연관 검색어 노출/최근 본 상품
     종류3) Empty view: 검색 결과가 없을 때_어떻게 채울 지 고민해보
     
3. [레퍼런스 분석 1] 핀테크/금융
   돈과 관련이 있기 때문에 법, 정책 영향 많이 받음, 구체적 가이드라인/화면에 대해 관련 기관의 심의를 받아야 할 수도있다.
   1) 핀테크: 토스, 네이버페이, 카카오페이 등
   2) 금융기관 은행사: 신한은행, 카카오뱅크, 저축은행 등
   3) 금융기관 카드사, 증권사, 보험사: 현대카드, 나무증권, 삼성화재 등
   비교해볼 것-금융자산 연결, 자산/소비 분석, 신용대출 비교 등
4. [레퍼런스 분석 2] 콘텐츠
   콘텐츠 종류(영상, 오디오, 텍스트, 웹 등)의 특성에 따라 제품 차이가 크다
   Tip - 체류 시간을 늘리는 UXUI를 찾는데 집중해보자
     1) 마음에 드는 콘텐츠가 많을수록
     2) 콘텐츠에 몰입해서 소비할 때
5. [레퍼런스 분석 3] 커머스
   전자상거래인 이커머스를 말하며, 온라인에서 판매 및 거래가 이뤄지는 플랫폼
   제품의 지표, UXUI가 상품으로 인한 영향을 크게 받는다.
   Tip - 탐색->구매로 이어지는 사용자 여정에 집중
   
   

*HW. 레퍼런스 분석하기: 카카오톡*

 

1️⃣ 화면 구조 분석

카카오톡에서 5개의 메인 탭 화면이 각각 어떠한 구조로 되어있는지 나눠보세요

 

2️⃣ 디자인 원칙 기반 분석

좋은 사례 2개와 나쁜 사례 2개, 총 4개의 사례를 찾아서 디자인 원칙에 근거하여 작성해 보세요.

 

3️⃣ [심화] 개선점 1개 이상 찾기

찾은 사례에 대해 개선 방향을 1개 이상 생각하여 적어보세요.