[번뜩 1] 버튼인가? 아닌가? 고민해결 UI 개선안
SH 청약 센터
이번에는 새로운 주제를 또 연재해보려고 하는데요,
바로 번뜩 NOTE 입니다:)
아직 맘에 드는 소제목 이름은 아니지만 더 좋은 아이디어가 있다면 바꿀 예정입니다!
사실, 일상 속에서 마주치는 상황이나 UI/UX 적인 부분에서 떠오르는 생각이 있는데요
길게 작성하기 보다는 번뜩이는 생각, 의견을 간단하게 적어서 공유하려 합니다.
이렇게 진행하게 된 이유는 저만의 영감 창고처럼 사용하고 싶기도 한데요
저의 롤 모델은 @thinknote 생각노트님 과 @숭님 입니다.
그럼 오늘의 번뜩 생각 1탄은 바로 UI적인 부분이에요!
SH청약센터는 왜 상태를 버튼처럼 보이게 했을까?
2년전부터 청약의 존재와 부동산의 중요성을 깨닫고 열심히 신청하는 중인데요,
제가 유독 처음부터 헷갈렸던 UI가 있었어요!
어디게요?정답은 청약상태 하단에 있는 '신청완료' 버튼이었어요.
요것이 말이죠~ 물론 마우스를 버튼 위에 호버하면 기본 화살표 형태를 유지합니다.
그리고 우측에 있는 '신청취소'위에 마우스를 호버하면 손가락으로 변경되기도 하고
생상도 지금보다 더 진한 초록색으로 바뀝니다.
하지만 이건 제가 IT 기획자로서 알 수 있고, 이걸 모르는 저의 부모님이나 다른 친구들은
"이거 버튼처럼 생겼는데 클릭 안되네? 맞는거야?" 라고 물어보더라구요.
저만의 혼란스러움은 아니었겠구나 라는 생각이 들었습니다.
물론, 정부사이트이기 때문에 정부에서 가이드한 표준 UI/UX 인터페이스 가이드가 있을 것이고
그 규칙을 따랐을 확률이 높을 것 같아요!
google 검색 결과가이드라인이 생긴 이유는 공통적인 규칙안에서 사용자의 경험을 높이기 위해 만들어졌습니다.
그리고 사이트를 유지보수 할 때마다 빠르고 일관된 방법으로 수정이 가능하기 때문입니다.
저도 과거 공기관의 프로젝트를 진행할 때, 저와 디자이너 마음대로 기획하는 게 아닌
공기관에서 제공하는 웹사이트 가이드라인이 있어서 모두 숙지한 후, 작업했습니다.
그래야 제가 근무하던 회사가 없어도 가이드라인에 맞게 개발했기 때문에
해당 기관 내에 있는 유지보수 팀에서 자유롭게 수정할 수 있기 때문이죠!
개선안에 대한 의견
첫번째로 청약상태의 경우, 클릭이 불가능하고 진행 상태만 알려주는 용도이므로
사각형 박스 형태보다는 초록색 텍스트 색상만 유지해도 사람들이 덜 혼란스러울 것 같아요.
두전째로 청약취소 버튼은 Red(붉은색)으로 바꿔서 직관적으로 '주의'를 주면 어떨까요?
전체적인 컬러는 Green(초록색) 인 건 알겠지만 청약취소는 아주 위험한 선택이기 때문에 눈에 띄게!
저의 개선안그래서 제가 간단하게 Figma를 활용해서 변경해보았습니다.
어떠신가요?
Before -> After사용자 입장에서 버튼처럼 보이지 않고 단순히 상태를 표시했다는 느낌과
오른쪽의 청약취소는 버튼이면서 클릭할 때 주의해야겠다는 생각이 들 수 있는 가장 쉬운 방법이길!