[Front][UI] 환불 페이지 UI고민

sunJ0120 commented 3 months ago

/

현재 환불 플로우 입니다!

다음과 같이 바꿔 보았는데, 저도 불확실한 부분이 많아서, 수정할 부분이 있을지 의견을 구하고 싶습니다.

1번 페이지 설명

기존에는 문의 유형이 있고, 1000자 이내로 구성된 페이지 였습니다.

이렇게 바꿔본 이유는 다음과 같습니다.

이 페이지가 애초에 "잘못 입력하셨나요?" 버튼을 통해 들어오는 페이지인 만큼 문의 유형 자체가 "환불"로 고정이 되어 있기 때문에 문의 유형을 작은 글씨로 적어놓기 보다는, 이 부분을 없애고 글씨 크기를 전반적으로 키우는 방향을 적용했습니다.
취소 사유의 경우, 나잇대가 높으신 분들은 글을 쓰기 힘들어 하시므로 1000자 보다는 100자로 줄여서 문의 내용을 받는게 서버에 전송하기도 좋을 것 같아 100자로 줄여봤습니다.

2번 페이지 설명

환불의 경우, 두 가지 경우가 있을 수 있다고 생각합니다. A. 애초에 잘못 보내어 환불이 필요한 경우 B. 액수를 잘못 보낸거라 "금액 수정"과 같은 환불이 필요한 경우(이런 경우, 관리자가 정보를 받으면 그 금액으로 수정해서 보내주는 방식을 사용하는 것으로 알고 있습니다)

그래서 두 가지 중 선택을 해야 할 것 같아서 중간 화면을 추가했습니다.

여기서 그냥 전체 환불을 원할 경우, 바로 송금 취소 요청을 하고 시간을 수정하고 싶은 경우, 3번 화면으로 이동합니다.

3번 페이지 설명

시간을 수정하고 싶을 경우. "원래 보내고자 했던 시간"을 입력 받아야 하기 때문에 그 시간을 받는 화면을 만들었습니다. 저희가 매듭 -> 시간으로 바뀌었기에 time picker를 적용했습니다.

송금 취소 요청 이후에 대한 고민...

송금 취소중인 거래의 경우, 상세내역에서 -> 환불 버튼이 눌리지 않도록 하거나, 다른 거래와 구분해서 표시해야 할 것 같아서 다음과 같이 구성해보았습니다.

sunJ0120 commented 3 months ago

고민점

전체적으로 수정할 부분이 있을까요?
보낸 시간을 취소 vs 보낸 시간을 수정 -> 이 부분 말이 너무 헷갈려서 고민입니다..혹시 다른 아이디어 있으실까요?
송금 취소 중인 거래의 경우, 저렇게 좀 희미하게 표현하는 방식 -> 누르면 문의 내역으로 이동하는 방식이 괜찮을까요? 아니면 다른 방향이 있을지 의견 구하고 싶습니다

ytjdud commented 3 months ago

1번 페이지

1번 페이지는 일반 문의에만 넣는 것으로 알고 있습니다. 송금 취소 관련페이지에 저 페이지 까지 넣으면 어르신들이 이미 할말은 다 했는데 뭘 또 적어야 하는지 모른다는 교수님의 작년 어플 피드백이 있었습니다. 따라서 송금 취소에는 1번 페이지를 삭제하는 것이 좋을 것 같습니다.

2번 페이지

수정 / 취소로 나뉜 건 좋을 것 같습니다. 다만 화면에

홍길동님에게 보낸
1000 시간을
수정하고 싶으신가요?
취소하고 싶으신가요?
버튼 : 수정할래요!
버튼 : 취소할래요!

와 같이 중복되는 말은 줄이는 게 좋을 것 같습니다.

3번 페이지

저 숫자 돌리는 걸 time picker 라고 하나요? 아무튼 맞다면.. 숫자 돌리는 방식을 모르실 것같아 직접 입력하는 방식이 좋을 것 같습니다.

추가

송금 취소 문의를 해도 문의에 대한 수정이 진행 될 수 있으니 아예 막으면 안 될 것 같습니다. 기존에 한 문의를 화면에 보여주고 수정할 부분을 수정하게 해야할 것 같습니다. 백엔드 api 도 답변 완료 전이면 수정할 수 있게 구현해둔 상태입니다.

ytjdud commented 3 months ago

3번 페이지에 대한 추가 의견

수정은 초록색, 취소는 빨간색으로

글자와 버튼 모두 같은 색상으로 통일하여 쉽게 알아볼 수 있게 만들면 좋을 것 같습니다.

노면 색깔 유도선처럼요

sunJ0120 commented 3 months ago

오 좋은것 같습니다! 의견 감사합니다:)

sunJ0120 commented 3 months ago

2번 페이지 수정 사항 반영 완료입니다!

1.

a. 문의중인 거래 내역에 표식을 따로 해야할까요? 우선 임시로 로딩 말풍선 이모지를 넣어보았습니다. b. 문의중인 거래 내역은 클릭을 허용하되, "잘못 보내셨나요?" 버튼 대신, 문의 내역으로 이동할 수 있게끔 버튼을 구성하려고 합니다!

시간의 경우, 분 단위는 무조건 30분 단위로 끊으라고 하셨어서, 시간 입력은 키보드로 받되,("시간"을 입력하는 칸을 누르면 커스텀 키보드가 반응형으로 올라오게 만드려고 합니다.), 분은 30 분 or 00분(입력하지 않) 두 가지로 나뉜 alert를 띄우고자 합니다.

잘못 입력할 수 있으므로 이 부분은 무조건 30분 단위로 끊어 달라고 하셨어서 일단 이렇게 만들어 봤는데, 두 파트 입력 방식이 달라지는게 약간 고민입니다.. 혹시 괜찮을까요?

ytjdud commented 3 months ago

1번

말씀주신 이모지나 아니면 회색을 입히는 방법도 있습니다. 관리자가 해결 했을 시에는 기존 거래에 대해서는 가운데줄을 긋는 건 어떨까요?

2번

이부분은 애매한게 행정학과 교수님께서 1시간/ 1.5시간으로 입력을 받되 화면에는 1.5시간 (1시간 30분) 이런식으로 보여달라고 말씀하신거 기억하시나요? 그래서 00시간 30분으로 받아야할지 0.5 시간으로 받아야할지 잘 모르겠습니다.. 어플 내 크레딧 기획이 애매해서 사용자 편의성도 고려하지 않은 것같고, 안그래도 알파플젝 디자이너분도 애를 먹고 있는 상황입니다..

일단 만드신 디자인에서는 시간은 키보드 / 분은 버튼이 좋습니다~ 다만 입력하지 않습니다 는 00 분 이라고 하는게 더 확실해보이는데 어떻게 생각하시나요?

sunJ0120 commented 3 months ago

확인했습니다!

1번

넵! 관리자 해결 시 줄 긋는 것도 적용하겠습니다:)

2번

저도 이 부분이 헷갈려서...ㅠㅠ 화면 상에서 .5시간으로 받으면 어르신들이 헷갈려 하실 것 같아 우선 30분 단위로 만들고, 피드백에 따라 고치려고 합니다! 입력하지 않습니다 -> 00분으로 바꾸는게 더 명확할 것 같습니다! 00분으로 바꿔서 진행하겠습니다:)

Heo-jieun commented 3 months ago

제 생각에 교수님이 .5단위로 말씀하신 것은 시간을 숫자의 개념으로 표기하기 위해서 그렇게 표현하신것 같아요. 그래서 선정님이 설계하신 UI처럼 30분 단위로 시각화 해도 괜찮을 것같습니다.

kookmin-sw / capstone-2024-45