공구마켓 - 게시물 뷰 페이지 UIUX분석 (01.26 - 01.30)

 

2022. 01. 26 (수) ~ 2022. 01. 27(목) - 게시물 화면 뷰 페이지 UIUX분석

 

 

---

 

 

pc

 

1. 연락하기, 구매 버튼이 아래에 똑같이 배치되어 있다.

→ 하나로 통일

→ mobile처럼 푸터를 고정하면 어떨까?

2. 카테고리와 거래지역도 위와 같이 중복 문제

→ 하나로 통일

3. 연락하기가 있는데 상품문의가 필요할까?

 

mobile

- pc보다 잘 만들어진 ux 같다.

1. 중복되는 것이 없다. (거래지역, 카테고리 태그가 한 번 배치됨)

2. sns 공유가 큰 부분을 차지한다.

→ 공유아이콘 하나 배치 후, 클릭하면 sns로고가 나오게 하면 어떨까

3. 푸터가 고정되어 편리하다.

4. 푸터의 ux writing이 귀엽다. (번개톡, 번개페이)

but

→ pc에는 연락하기, 바로 구매라고 되어있는 것을 통일해주면 좋을 듯 하다.

 

 

---

라우드소싱

pc

1. 게시물 view가 popup형식으로 되어있다.

→ 사진과 글을 함께 보기에 좋은 것 같다.

→ 신박하지만 아직은 조금 낯선 것 같기도 하다. 

2. 좌측 상단에 title과 주최, 분야, 일정이 간결히 써있다.

→ 현재 프로젝트에 활용한다면 카테고리, 일정으로 쓰면 될 것 같다.

3. 콘테스트 참여는 pc에서만 가능하기 때문에 버튼이 없다.

 

 

---

크몽

mobile

1. 문의, 구매, 찜 버튼이 푸터에 고정되어 있다.

2. 상단에 가격이 자세히 나와있다.

→ 응용한다면, 공동구매 '5명일 때 얼마, 10명 이상시 얼마' 같이 배치한다면 재밌고 보기 쉬울 것 같다.

 

 

 

---

 

핫트

1. 게시물뷰화면에 들어가기 전 미리보기 팝업이 보여진다.

2. 사진이 슬라이드로 나열되어 있고 '더보기'클릭시 아래로 내려간다.

3. sns 로고를 배치하지 않고 '공유 아이콘'으로 간결히 표시했다.

( 클릭시 팝업으로 sns아이콘 여러 개를 나열한다.)

4. 페이지에 도착했을 때 누적 판매금액이 얼마에 도달했는지 올라가는 카운팅으로 재미를 더하고 시선을 집중시킨다.

 

 

---

짜잘한 분석

 

< 참고할 것 >

댓글창 , 댓글input, 댓글에 사진삽입기능, 댓글 프로필, 닉네임 표시

신고하기 위치

프로필 위치와 들어갈 내용

푸터에 들어갈 내용

공유하기 위치

해시태그 위치

---

2022. 01. 28 (금) - 게시물 화면 뷰 예시 시안 제작

기획자님이 ~~이런식으로 들어갔으면 좋겠다 싶게 디자인 해보라고 하셔서 제작해보았다.

유저가 마음에 드는 물건을 발견했을 때 손쉽게 연락, 구매할 수 있도록 푸터에 기능을 넣어 고정을 해주었다.

공유버튼은 우측 상단에 배치하였고 클릭시 sns로고들과 링크 복사기능을 들어간다.

사진은 스크롤을 길게 내리지 않도록 좌우 슬라이드를 넣어주었고, pc로 바뀐다면 버튼이 들어간다.

공동구매이기 때문에 마감기간을 빨간색으로 위쪽에 배치하였고

타이틀, 모집인원, 가격, 몇 분 전 게시물인지를 알려주고

프로필과 참여자, 내용 순으로 표시하였다.

프로필에는 구매하는 유저가 신뢰할 수 있도록 닉네임, 위치를 제공하고

프로필을 클릭시 공구를 연 유저의 활동내역을 볼 수 있다.

ex) 청소기 공동구매, 2021-09-15, 참여자 26, 후기 20

아래에는 공구오픈유저가 달은 해시태그를 볼 수 있고

유저가 위치를 원하는 곳을 넣어 구매하는 유저가 어디서 거래하는지 쉽게 확인할 수 있다.

---

기술 생각 안 하고 기획, 디자인한 거라서

추후 많이.. 변경될 예정이다^^!!

 

 

---

2022. 01. 30 (일) - 회원가입 QA

 

다들 시간이 안 맞아서 전체가 QA를 갖는 시간은 가지지 못하였따.

기획자님과 같이 개발자분께 코드를 받아서 실행해서 확인할 수 있었다.

사실.. 처음부터 오류ㅉ떠서 멘붕이었지만 컴공 좀 아시는 기획자님이 도움을 주셔 무사히 완료..

역시 어려운 개발 ,,

 

SLACK QA란에 정리해서 보내놓았다.

수정사항이 너무 많았다..

Because,,

내가 처음부터 반응형디자인을 고려하지 못했던 불찰도 있다..또륵~

그래서 피그마 안 보고도 할 수 있도록 열심히 정리해서 보냈다.

코딩 배운 게 여기에 쓸모가 있다..^^

역시 배움은 나를 돕는다 ㄳ!

 

아 그리고 ............

여태까지 항상 피그마에서 디자인하고 html, css로 코딩해서 보이는 화면이 전부였는데..

내가 작업한 디자인으로 실제 서비스가 돌아간다는 거 설레는 일인 줄은 알았지만

이거..아주 벅찬 일이더군..

디자인한 화면에 내가 하는 행동에 반응을 하는 그.. 뭐라 하지

아무튼 감격스럽다 . . 흑

재밌다. . 열심히 살아야지

---

< 프론티엔드님께 보낸 정리글 >

 

• 통일
  • nav bar {height : 60px} + fixed
  • 입력오류시 input창 아래 에러 뜰 때 하단 여백 생기게
  • 위치popup 이외의 바깥 여백 클릭시 팝업 닫히게
  • 위치popup의 '비활성화 완료버튼' 클릭시 중앙에 "위치를 설정해주세요."

 

• pc
  • "회원가입" {font-size 25px}
  • "회원정보를 입력해주세요." {font-size 16px}
  • input {460x48, font-size 14px}
  • 회원가입 완료 버튼 {460x65, font-size 20px}

 

• mobile
  • "회원가입" {font-size 23px}
  • "회원정보를 입력해주세요." {font-size 16px} - pc와 같음
  • input {327x48, font-size 12px}
  • 회원가입 완료 버튼 {327x55, font-size 15px} + fixed
  • 좌측 상단 뒤로가기 버튼 추가

 

• pc 위치 popup
  • font-size 모두 14px (검색결과도!)

 

• mobile 위치 popup
  • font-size 모두 12px (검색결과도! + input창의 경우 화면크기가 줄었을 때 글씨가 잘리는 문제점)

 

---