반응형
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
키파인딩
- 리서치에서 얻은 데이터 중 이후 진행될 디자인에 의미가 있는 발견만 간추린 것.
반응형