버튼 문구가 곧 상태였다

상품 상태별 테스트 케이스를 봤다. 구매 버튼의 문구가 상태마다 다르다.

Open Table of contents

상황 — 상태마다 다른 버튼 문구

케이스에는 이렇게 적혀 있다.

판매종료   구매하기 → "판매종료"
매진       구매하기 → "매진"
응모종료   구매하기 → "응모종료"
응모 대상  구매하기 → "응모하기"

구매하기 자리의 버튼이 상태에 따라 다른 글자를 보여준다.

판매종료 와 매진 과 응모종료 는 누를 수 없는 상태다. 살 수 없는데도 버튼이 자리에 그대로 남아 있는 셈이다.

살 수 없으면 버튼을 감추는 쪽이 만들기는 단순하다.

[숨김]     버튼이 없음
[문구 변경] 버튼이 있는데 다른 글자

감추면 사용자 쪽에서는 이렇게 된다.

화면에 들어옴
    ↓
버튼이 없음
    ↓
"왜 없지? 로딩 중인가?"

구매하기 가 없으면 왜 못 사는지를 모르고 화면이 덜 그려진 것인지도 갈리지 않는다.

문구가 있으면 이유가 그 자리에서 읽힌다. 버튼이라는 자리가 조작 수단이면서 동시에 상태를 알리는 자리가 된 셈이다.

네 문구가 각각 다른 것을 말한다.

판매종료   판매 기간이 끝남
매진       재고가 없음
응모종료   응모 기간이 끝남

앞의 둘이 특히 다르다.

[판매종료]  다시 안 팔릴 가능성
[매진]      재입고될 가능성

사용자가 다음에 할 수 있는 것이 갈린다. 판매종료 는 다른 상품을 보는 쪽이고 매진 은 기다리는 쪽이다.

응모하기 만 누를 수 있는 상태인데 이것도 구매와는 다른 행동이다. 같은 자리의 버튼이 상태에 따라 아예 다른 일을 한다.

매진 상태에만 항목이 하나 더 있다.

찜하기 버튼 → "찜 하시면 추가수량 발생 시 알려드립니다" 말풍선

찜하기 로 재입고 알림을 걸도록 유도하는 안내다.

앞의 구분과 그대로 이어진다.

[매진]      재입고 가능 → 알림을 걸어 두게 함
[판매종료]  다시 안 나옴 → 알림이 의미 없음

문구만 바꾸는 것이 아니라 그 상태에서 무엇을 할 수 있는지까지 다르게 둔 것이다. 판매종료 에 같은 말풍선을 띄웠으면 오지 않을 알림을 기다리게 했을 것이다.

표시는 상세 화면만이 아니다.

매진 → 목록 이미지에 "SOLD OUT" 문구 노출

SOLD OUT 을 목록에서 미리 보면 들어갔다 나오는 헛걸음이 준다.

그러면 아예 목록에서 빼는 길도 있다.

[목록에서 제외]  살 수 있는 것만 보임. 깔끔
[표시하고 노출]  있었다는 걸 앎. 재입고 알림을 걸 수 있음

매진 은 재입고 가능성이 있으니 노출하는 쪽이 맞아 보인다.

판매종료는 빼도 될 것 같은데 문서에는 그 상품이 목록에 나오는지가 안 적혀 있다. 빼느냐 두느냐가 상태마다 갈릴 텐데 그 판단이 케이스에 없다.

가격 자리에서도 같은 방식이 보인다.

일반    할인율 / 특별가 노출
찬스딜  할인율·특별가 대신 "찬스딜" 문구 노출

할인율 과 특별가 가 있어야 할 자리에 문구가 들어간다.

찬스딜은 응모 방식이라 가격 개념 자체가 다르다.

[일반]   얼마에 산다
[찬스딜]  응모해서 당첨되면 받는다

화면 구조는 같은데 특별가 자리에 넣을 숫자가 없다. 비우면 어색하고 0을 넣으면 틀리니 문구를 넣는 쪽이 자연스럽다.

정리하면 같은 자리를 상황에 따라 다르게 쓰는 방식이다.

[버튼]    상태에 따라 다른 문구
[가격 자리]  유형에 따라 문구 또는 숫자

이런 화면은 문구가 계속 는다. 구매하기 자리의 넷에 말풍선과 찬스딜 문구와 얼럿까지 한 화면에 열 개가 넘는다.

코드 곳곳에 흩어져 있으면 어느 상태에 무엇이 나오는지 찾아다녀야 한다. 공유 문구 는 설정으로 빠져 있었는데 버튼 쪽까지 뺄지는 다른 문제다. 자주 안 바뀔 테니 코드 안에서 한곳에 모으는 정도가 맞아 보인다.