[240102]개인과제 회고 및 선택과제

1/2

2024년이 되었다. . . .

2024년 화이팅입니다...

오늘은 개인과제를 발전시키면서 선택 과제를 해보는 시간을 가졌다.

 

먼저 과제 해설을 보고 느낀 점?이라고 하면

일단 사용자 분석을 하지 않았단 점을 반성한다. 단순히 인터넷 쇼핑을 하는 사람들이겠지 라고 생각하는 게 아니라

구체적으로 나이, 직업, 이 서비스를 왜 사용하는지 분석을 하고 그것을 적용했어야 한다.

요 코멘트를 보고 내가 놓쳤던 부분을 알 수 있었다. 

• 하단의 네비게이션 각 탭들의 타이틀을 붙이는 것도 고려해봐야 하는 사항
•  선택된 탭과 선택되지 않은 탭의 차이를 주는 것!!! <- 왜 생각을 못했을까! 당연한 건데

 

 

*선택 과제*

[주문결제 창]

1.  내가 생각했던 문제
   1) 쿠폰할인/카드 추가할인/포인트 섹션이 너무 큰 비중을 차지함->근거: 인지부하
   2) 하단 네비게이션 바가 결제창에도 있음->근거: 사용자 관점에서 도움이 되나?
2. 레퍼런스 참고
   다양한 할인 버튼을 한 곳에 그룹화 하여 필요한 부분만 선택적으로 적용할 수 있게 함
   하단 네비게이션 바가 없고 뒤로가기 버튼만 있음
3. 솔루션
   할인 섹션을 분리하는 것이 아니라 하나의 그룹으로 정리-> 근거: 유사성의 원리, 그룹화(힉, 밀러의 법칙)
   하단 네비게이션 삭제, 뒤로가기 버튼만 삽입-> 근거: 피즈의 법칙(클릭미스를 없앨 것)

*개인 학습*

그리드 잡기-카드형 UI에서 많이 사용 

 

*웹 1320기준

12컬럼->110

20/70/20->110

사용영역->1280

썸네일 2개 1280(양옆 간격1320-20-20)-40(사이 여백 간격)/2=620

썸네일 3개 1280-40-40/3=400

썸네일 4개 1280-40-40-40/4=290

썸네일 5개 1280-40-40-40-40/5=224(괜찮음 그리드 무시하고 간격 잡기)

썸네일 6개 1280-40-40-40-40-40/6=180

 

*웹 1440기준

12컬럼->120

20/80/20[썸네일 사이 간격은 40]

 

*웹 1080

12컬럼

10/70/10

사용영역1060

1060-20/2=520

 

15/70/15

사용영역1170