🍎 오늘의 진도
● 개인과제(3) 수정 및 보완
● 개인과제(3) 제출
[개인과제] 사용자 문제를 해결할 수 있는 UI 디자인과 프로토타입을 설계하기
중고거래 앱을 위한 UI 디자인의 색감 선정을 위해 앱로고를 먼저 디자인 해보았다. 스케치 아이디어 요소로 인피니티를 이용했으며 무한함을 가깝게 표현하기 위해 우주, 바다, 자기학습을 하는 로봇을 떠올렸다. 이와 어울리는 스페이스그레이, 딥블루를 활용하였다.
1️⃣ 제품 상세 설명(판매자의 게시글)
아래는 제품 상세 설명 화면(구매자가 찾아간 판매자의 게시글)이다. 판매자가 팔고자 하는 제품 사진을 메인으로 보일 수 있게 배치했다. 사진 맨오른쪽 상단에 카메라 아이콘을 추가했다. 판매자가 원하는 대로 사진을 찍어올려도 되지만 신규유저나 판매를 잘 안해본 유저라면 어떤 사진을 찍어야 하는지 쉽지 않다. 또한, 구매자 입장에서 원하는 제품 사진들이 있을 것이다. 데이터 분석하에 가장 도움을 많이 얻은 사진 구도나 설정을 판매자에게 먼저 제시하여(체크리스트로 보여주기) 그에 따라 판매자가 사진을 찍고 난 후, 체크리스트를 하면 자동으로 툴팁의 살펴보기 페이지에 기록된다. 이후에, 구매자는 살펴보기 페이지로 넘어가서 판매자가 어떤 의도를 가지고 사진을 첨부했는지 유추하지 않아도 알 수 있다. 그리고 툴팁으로 배치한건 추가설명이기에 구매자가 읽는 것에 선택권을 주고 싶었다.(시간이 없고 빠른 구매를 원하는 구매자들에게 스크롤되는 개수 줄여주기)
사진 맨하단 정가운데에는 사진을 여러장 첨부했음을 아이콘으로 대체 설명했다.
사진 바로 아래에 '판매자의 프로필'과 '제품 상세 설명란' 그리고 '이 판매자의 판매물품'를 배치했다.
판매자의 프로필을 누르면 더 자세한 판매자의 프로필 페이지로 넘어간다.
프로필에는 즐겨찾기 아이콘을 배치해두어 다음에도 이 판매자를 찾을 것임을 보이도록 했다.
💬 '게시물과 비슷한 상품 비교하기' 멘트 대신에 대체문구를 고민 중이다. 어떤 게시물인지 지칭하는 멘트를 추가하고 싶은데
예시로 '이 게시물과 비슷한 상품 비교하기'가 될 수 있다. 근데 그러면 너무 긴 문장처럼 느껴진다...다른 앱 멘트를 참고해야겠다.
대화하기바에는 좋아요 아이콘, 가격, 가격제안불가 메세지 그리고 대화하기 버튼을 배치했다. 현재 페이지에서 뒤로 넘어가려면 맨상단에 있는 왼쪽 화살표 아이콘을 누르거나 왼쪽에서 오른쪽으로 스와이프를 해야한다. 나가기 전에, 좋아요 아이콘을 한 번 누르게 하려는 시도를 주었다. 또한 양 손 이동 횟수를 줄일 수 있다.
2️⃣ (판매자) 프로필
프로필창 임을 맨상단에 알려주면서 바로 밑에 프로필 상세 설명을 배치했다. 프로필 상세 설명란에 가입 날짜, 동네 인증, 안전 거래 배지, 주의 / 리스크 정보를 넣어 판매자의 신뢰 정보를 담았다.
아래에 무한 배너는 매너 조건들을 충족시키면 인피니티 모양의 색상이 점점 변한다. 빨,주,노,초,파,보,스페이스그레이 순으로 변화한다. 마치 레벨업 하는 기분을 준다. 이걸 통해 판매자는 제품 상세 설명에 "인피니티 초록색 이상인 분들이랑만 거래할게요~" 또는 구매자는 '주황색 이상인 판매자들 제품위주로 봐야겠어'와 같은 새로운 판단 신호가 생긴다.
판매 물품 수와 받은 후기 수를 넣어 구매자가 말뿐인 신뢰가 아닌 실제 사례를 바탕으로 분석과 신뢰감을 얻을 수 있고,
거래 마인드(자기소개)는 앱내에서 제공되는 멘트들이 있는데 판매자가 자신에게 해당되는 거래 마인드들을 클릭하면 자기소개가 완성된다. 자기소개를 통해 판매자는 판매에 대한 자세를 상기시킬 수 있고, 구매자는 어떤 유형(쿨거래를 원하는 판매자, 예쁜 소통을 원하는 판매자)의 판매자인지 직접 채팅으로 느끼거나 후기들을 일일이 보지 않아도 유추할 수 있다. 제공되는 멘트들은 데이터에 의해 선호하는 유형들이 제공되는데 유저의 경험하에 본인작성 멘트도 원할 시 추가해도 된다.
3️⃣ 거래 요청 화면(대화창)
아래는 거래 요청 화면 (대화창)이다. 맨상단에 판매자 닉네임을 표시하여 구매자입장에서 판매자의 채팅창임을 바로 인지시켜주었다. 또한 구매자가 사고자 하는 물품의 타이틀과 가격을 외우거나 게시글로 찾아가서 확인하지 않아도 되는 설명을 닉네임바 바로 하단에 배치했다.
닉네임 오른쪽에 안전 거래 배찌를 두었고(없을 시 공란이다), 바로 아래에는 현재 활동 중(↔현재 휴식 중)임을 텍스트로 설명하였다. 채팅부분에는 맨왼쪽에 위치한 판매자 프로필에 앞서 프로필 화면에서 사용했던 현재 활동 중 아이콘을 붙여두었다. 유저 입장에서 동그라미 아이콘(현재 활동 중이면 초록색 -> 현재 휴식 중이면 회색)이 무엇을 의미하는 바인지 자연스럽게 알릴 수 있도록 했다.
4️⃣ 프로토타입
미리보기를 한 상태이다. 수정을 더 할 예정이라 보완해서 이곳에 계속 가져오겠다. (이러면 안되는데 난 아직 입문자니까😅)
🍎 느낀점 & 내일 할 일
다듬고 싶은 부분이 많다! 그렇지만 일단 제출은 했고, 시간을 들여 더 다듬을 예정이다. 이번을 계기로 다양한 UI 디자인에 대한 데이터를 습득할 수 있어서 좋았다. 그리고 오늘 처음으로 밍글링 대회를 했는데 포인드도 쏠쏠하게 얻을 수 있어서 좋았다. 생각보다 게임이 재미있어서 열정도 생겼다. 다음 대회도 열심히 참여 해야겠다✊🏻
+ 이번 4조 팀원과의 마지막 날이다ㅜㅜㅜㅜㅜ 만남과 이별은 세트라지만 언제나 적응은 어렵다. 하지만 이번 팀원과는 또다른 만남을 추진할 것이고(언제나 인피니트의 추격자 할거야), 언제 어디서나 응원할 것이다! 모두들 지금까지 과제하시느라 강의 들으시느라 회의하시느라 너무너무 수고 많으셨고 그리고 그과정들이 4조와 함께여서 너무너무 즐거웠습니다❣️
저희 또 만나요!!!!(여러번 강조)(두 주먹을 입에 우겨넣으며ㅜㅜㅜ🧻)
위에 두 명은 나영님, 주희님
중간 두 명은 예원님, 민선님
아래 두 명은 나, 매니저님
(이젠 짤만 보면 우리팀 인증미션 아이디어가 떠올라요. 다시 생각해보면 대단한 팀원들,,무슨 주제를 가져와도 다 성공했다😭)
👇🏻 부산여행 가서 환승연애4 마지막화 봤었는데, 거기서 나온 BGM이다. 느낌이 like 4조 마지막 회의 같기에..(이정도면 눈물을 흘리게 하려는 정성) ("그날의 별 - 프롬" / 가사 빼고 Inst Ver로 들어야 하는데 자료가 없다!!_대체 자료 첨부)
https://youtu.be/55-XiNGU_RM?si=FZIe4wpicMSIIAMF