공구마켓 - 모바일 글쓰기 UIUX분석 (01.22

🧡 UIUX/사이드프로젝트-공구마켓

공구마켓 - 모바일 글쓰기 UIUX분석 (01.22 - 01.23)

widely design 2022. 1. 28. 21:41

2022. 01. 22 (토) - 글쓰기페이지(게시물작성) UI/UX 분석

- 필수입력사항을 따로 표시하지 않았다.

- 필수입력사항을 입력하지 않고 완료 버튼을 누를 시 하단에 토스트 팝업 생성 '제목을 입력해주세요!'

- 사진은 1개만 선택 가능

- 타이틀 없이 내용만 쓰면 됨

- 내용 미작성 > 완료 클릭 > 토스트팝업 중앙 생성 "내용을 작성해주세요."

- 4장 이상 선택 시 슬라이드로 넘겨진다.

but

1. 딱 네 장까지만 보여서 사용자가 당황할 수 있을 것 같다.

→ 다섯 번 째 사진이 조금 보이게

→ 숫자로 사진 개수 표시 (ex. 3/10장)

→ 가로 스크롤바

→ 하단으로 사진 나열

- 필수입력사항을 표기하였다. (주조색 응용을 잘하는 것 같다)

- 필수입력사항 기입 전까지 게시물 등록하기 버튼 비활성화하였다.

but

1. 해시태그가 왜 '필수입력사항'인지 의문점을 가졌다.

2. 게시물 등록하기 버튼을 스크롤을 내려야 찾을 수 있다.

→ 푸터에 고정해놓으면 더 편리하지 않을까?

3. 내용 입력 후 아래가 있는지 보이지 않음

→ 간격을 조절하여 조금이라도 보이게 하여 사용자가 아래가 있는 것을 인지하도록 하면 좋을 것 같다.

- 필수입력사항을 표기하였다.

- 중고거래에 필요한 위치, 가격, 물건상태 등 잘 들어간 것 같다.

- 위에서 말했던 단점들을 보완한 경우 같다.

아래 내용이 더 있는 것을 예측 가능하고,👍

사진도 2.5개를 보이게 하여 슬라이드가 활성화된 것을 알 수 있고,👍

'12/12' 로 입력된 사진 개수도 표시해준다.👍

완료 버튼을 푸터에 고정시켜 사용자가 게시물 업로드를 보다 더 신속하게 할 수 있다.👍

꼭 필요한 사항들만 필수입력사항으로 설정해놓았다.👍

- 필수입력사항 미입력 > 완료버튼 클릭 > 하단 토스트 팝업 생성 "상품 사진을 등록해주세요"

mobile과 다른 점을 찾자면

- 사진이 슬라이드가 아닌 바둑판 형식으로 추가된다. (큰 pc화면에서는 한 번에 볼 수 있어서 더 좋은 것 같다!)

- 등록하기 푸터가 고정되어 있다.

but

문제점을 굳이 꼽아보자면..

1. 엄청 길다.

(이유는 예측할 수 있다. 클릭시 카테고리 페이지로 넘어가는 mobile 화면과 달리, 한 화면 안에서 해결해야하는 pc화면)

→ 작은 입력사항을 한 줄에 두 개로 합치기

→ 주의사항과 같은 긴 글들을 '자세히 보기'와 같은 버튼으로 대체하기

2. 이중성(?)

pc화면에서 상품이미지 입력칸 하단에 주의사항이 있지만, mobile화면에서는 존재하지 않는다.

이유가 뭘까...?

그리고 pc화면에서 어떻게 하면 잘 녹여낼 수 있을까?

생각해봐야지!

필수입력사항 미입력 > 완료버튼 클릭시

팝업이 아닌, 입력사항 아래 요구사항을 띄우고, input창에 변화를 준다.

공구마켓 로그인/회원가입 디자인할 때 사용한 방법이다.

쿠팡을 보고 참고하였는데, 번개장터에서도 쓰이고 있었다니!!

알아갈수록 재미를 느끼게 되는 UX인 것 같다.

그리고 어려워서 .. 모르는 게 많은 것 같아서 속상하기도 하다.

그리고 원래 QA를 해야하는 상황인데

데이터베이스 연결이 문제로 못 했다 ㅜㅜ

2022. 01. 23 (일) - 게시물 작성페이지 디자인 및 회고

위에서 참고했던 것들을 토대로

장점을 부각, 단점을 보완하여 디자인하였고

사용자가 필수로 입력해야하는 사항을 인식할 수 있도록

'좌측상단 * + 주조색으로 표시' 해주었다.

'등록하기 버튼'은 하단에 고정할 수 있게 해두었다.

그리고

오후10시 회의시간

일정을 못 맞춘 문제에 대해 다같이 회고시간을 가졌다.

다들 자존감이 내려간 것 같아 맘이 아팠다..

화이팅해봅시다용!