[유데미x스나이퍼팩토리] UI/UX 디자이너 인턴형 프로그램 5기 - 2주차(0702)

2주차 - 7/2

---

7/2 특강: 웹사이트의 구성 요소

 

버튼

• 웹사이트는 괜찮은데, 모바일 사이즈의 경우 최소 44*44이상이어야 한다
• 기본, 마우스 호버, 포커스(tab으로 이동했을 때), 비활성화(disable)

풋터

• 모든 페이지의 맨 아래에 위치한 영역
• 사용자가 페이지의 품질을 측정하는 중요한 기준점

 

피츠의 법칙

• 사용자는 오른손을 주로 사용하기 때문에 화면 우측에 중요한 정보를 배치하는 것이 좋다
• 손가락이 닿기 쉬운 중간 부분에 중요한 정보를 배치(우측 중간)

 

드로어 메뉴

• 햄버거 메뉴를 누르면 나온다
• 사용자가 필요할 때만 메뉴를 열어서 사용
• 장점: 좁은 모바일 화면에서 효율적으로 사용 가능

 

모달

• 부정(왼쪽)/긍정(오른쪽)

 

Bottom Sheet

• 텍스트, 이미지, 액션 또는 컨텐츠를 포함한 컨테이너 영역으로 화면 하단에 고정되어 표시

 

 

모달과 팝업의 차이

• 모달은 서비스와 관련이 있는 것
• 팝업은 서비스의 부가 이벤트 같은 것

 

상세화면

• 상품 이미지 -> 상품명 -> 정보 -> 구매 버튼으로 시선이 내려간다
• 좌에서 우, 위에서 아래로 시선이 이동하므로 시각적 흐름에 맞게 배치해서 불필요한 것 최소화
• 상세페이지 내에서 가장 중요한 장바구니, 공유, 구매하기는 우측에 배치하는 것이 좋다

 

장바구니

• 전체선택과 선택삭제 기능 제공 -> 사용자와 서비스의 신뢰 형성이 중요
• 기존의 사용성을 유지해서 보수적으로 설계하는 것이 좋음
• 최대한 신뢰감 형성을 위해 투명하게 정보 제공

이것이 진짜로 문제인가?

• 우리는 어떻게 해결할 것인가?

Define

• Key Finding<AS IS>
• Insight<TO BE>
• Data Modeling: 페르소나, 여정지도, 친화도법(Affinity Diagram)등

 

피그마: 컴포넌트

• command + option + k

 

키파인딩

• 리서치에서 얻은 데이터 중 이후 진행될 디자인에 의미가 있는 발견만 간추린 것.