[240704] UI 분석 기반의 디자인 개선

UI 분석 기반의 디자인 개선

 

4단계

선정한 서비스의 핵심 기능 기반으로 디자인 씽킹

 

3. 아이디어 발산

• 사용자의 문제를 해결해 줄 수 있는 아이디어는 어떤 것들이 있나요?
• 왜 그 아이디어가 문제를 해결할 수 있을거라 생각하시나요?
• 어떤 데이터를 근거로 아이디어가 발산 되었는지 인과관계를 함께 정리해 봅니다.

 

어제 사용자가 전자책은 캐시 구매만 가능하다는 점을 미리 인지하지 못한 채, 전자책 결제 화면에서 캐시 충전 창이 띄워지면 당황하고 혼란을 겪을 수 있다는 문제점을 해결하는 과정에서 의견이 갈렸었다. 전자책은 캐시 구매만 가능하다는 문구를 '전자책 상세 정보 페이지에서 미리 알려줘야 한다 vs 결제 창에 문구를 두어야 한다'로 의견이 통일되지 않았었다.  

이 부분에 대해 고민을 하다가 스스로 결론을 내고 어제 퇴실 이후 혼자 자료 조사를 진행해 봤다.

 

우선, 나는 전자책 상세정보 페이지로 문구를 이동시켜야 한다는 입장이었는데 다시 생각해보니 단순히 옮기는 것은 좋지 않은 의견 같았다.

교보문고의 경우, 전자책 구매 버튼을 누르면 바로 캐시 충전 페이지로 이동하지만 다른 서점 어플들의 경우, 결제 페이지로 이동한다. 교보문고 또한, 전자책을 장바구니에서 구매하는 경우에는 결제 페이지로 이동한다.

결제 페이지 UI 디자인을 보면, 일반 도서를 구매할 때와 전자책을 구매할 때 각각의 상황에서 디자인적으로 큰 차이를 느끼지 못했다. 그렇기 때문에 사용자는 전자책 또한, 일반 도서와 같은 방식으로 결제가 가능할 것이라고 생각할 가능성이 높다는 생각이 들었다. 이 점을 고려하면, 전자책은 캐시 결제만 가능하다는 사실을 결제창에서 알려주지 않으면 헷갈릴 수 있을 것 같았다.

 

 

 

이러한 생각을 가지고 예스24 도서와 알라딘 어플을 찾아보았다. 그리고 각 어플에서의 단계를 다시 살펴본 결과 예스 24의 경우, 일반 도서를 구매할 때와 전자책을 구매할 때 버튼의 라벨과 색이 달랐다. 또한, 결제 창의 상단에 전자책 구매 방식에 대한 설명을 볼 수 있는 버튼을 만들어 두었다. 이로써, 전자책의 구매 방식이 일반 도서와 다름을 인지할 수 있도록 했다. 알라딘의 경우, 교보문고와 유사한데 문구에서 차이를 느꼈다. 교보 문고의 경우, 전자책은 캐시 결제만 가능하다는 사실을 알려주지만 그 이유는 명시하지 않았다. 그러나 알라딘은 앱 스토어 정책에 의해 캐시 결제만 가능하다는 상황을 명시하여 캐시 결제에 대한 정당성을 부여한 것처럼 보였다. 

 

예스 24의 사례를 보고 나니, 상품 상세 화면에 '전자책은 캐시 결제만 가능합니다' 라는 문구를 넣지 않아도 캐시 결제임을 드러낼 수 있는 방법이 있을 것이라는 생각이 들었다. 그래서 캐시 결제를 이용하는 다른 서비스의 어플 또한 조사해 보았다. 

 

 

 

첫번째로, 웹툰이나 웹소설 서비스를 제공하는 어플들을 찾아봤는데 대부분 웹툰이나 웹소설 서비스는 캐시를 이용하여 결제를 하는 방식이 진행된 지 오래되어 캐시 충전에 대한 별도의 안내는 없었다. 특이점으로는 시리즈의 경우, 캐시를 쿠키라는 재화로 치환하여 충전할 수 있도록 했다. 

두번째는, 음악 스트리밍 어플 서비스를 설치해 봤는데 웹으로는 대부분 캐시 충전이 가능하지만 어플에서는 기능을 찾기 어려웠다. 

마지막으로 영상 스트리밍 서비스를 알아보았다. 넷플릭스는 개별 구매 서비스가 없었고 티빙은 개별 구매 서비스가 종료된 상태였다. 그래서 다른 어플들을 알아보던 중, 시리즈온과 왓챠를 보게 되었고 다른 점을 찾을 수 있었다. 시리즈온의 경우, 구매하기 버튼에 캐시 아이콘을 트레일링 아이콘으로 추가해 두었다. 그리고 왓챠에서는 구매 옵션에 원화 단위 대신 캐시로 문구를 변경해 두었다. 두 가지 방식 모두 캐시 결제임을 미리 암시할 수 있게 하는 목적으로 보여졌다. 

 

위와 같이 정리한 내용을 팀원들과 공유하여, 어제 미처 끝내지 못했던 문제를 같이 해결했다.

 

---

 

 

4. 와이어프레임 제작(Lo-Fi로 작업)

• 전 단계에서 도출한 아이디어를 어떻게 구체화할 것인지 표현합니다.
• 선(wire)으로 틀(frame)을 잡는다는 뜻으로, 제품 기획 단계에서 페이지를 어떻게 구성할 것인지 구조를 잡기위한 용도입니다.
• 전체 레이아웃과 화면의 인터페이스를 확인하여, 요소들의 상호작용을 확인하기 위한 용도입니다.
• 작성하는데 시간을 많이 사용하지 않으며, 수정하거나 의견을 반영하기 쉬운 단계입니다.
• 와이어프레임은 프로토타입 진행 전 제작해 봅니다.

 

5단계

4단계에서 제작한 와이어프레임을 프로토타입으로 제작

 

1. 팀원들과 파트를 분배하여 피그마 작업을 진행해 봅니다.
   • 작업 분량은 자유롭게 진행해주세요.(도출한 솔루션에 맞게 제작해주시면 됩니다.)
2. 개선된 디자인 프로토타입과 함께 아래 내용들을 담아봅니다.(피그마 파일 내 작업해주세요.)
   1. 왜 이렇게 개선하고자 했는지 목적을 작성해 봅니다.
   2. 개선 방향을 디자인 법칙에 근거하여 설명하고 기대되는 효과를 함께 작성해 봅니다.
   3. 도출한 솔루션이 사용자의 어떤 불편한 점을 해결했는지 작성해 봅니다.
   4. 플로우가 개선되었다면, as-is → to-be 형태로 정리해 봅니다.

 

개선하기로 한 화면 -> 홈 화면(상단 탭, GNB), 상품 상세 화면, 결제 화면의 와이어프레임을 그리고 프로토타입 제작 과정까지 진행했다.

처음 와이어프레임을 그릴 때부터 상단 탭 부분을 어떻게 해야 하나 문제가 많았는데 팀원들끼리 여러 방안을 논의해 보면서 수정 방향을 고민해보았다. 가안만 여러 개 만들고 나서야 프로토타입을 완성할 수 있었다..

 

결국, 우리 조가 선택한 화면은 세번째 화면이었다.

우선, 첫번째 화면은 탭 두 개의 영역 구분이 잘 안되어서 보류했고

두번째 화면은 탭 자체에 너무 집중되는 경향이 있어서 하지 않기로 했다.

그리고 세번째 화면을 최종적으로 선택했는데 상위 탭과 하위 탭을 명확히 구분하기 위해 와이어프레임과는 조금 다른 디자인을 하게 되었다. 두 탭 사이에 검색 창을 넣었고 탭이 전환되어도 고정되는 영역인 검색창까지를 묶어 아래쪽에 연하게 드롭섀도우를 추가해 영역을 분리시켰다. (네번째 화면은 세번째 화면에서 전자책 화면으로 넘어갔을 때의 상태를 보여주기 위해 디자인한 화면이다.)

개인적으로는 상위 탭 부분의 디자인이 약간 아쉽다. 글자가 너무 강한 것 같기도 하고 탭 영역과 검색 창 영역이 잘 어우러지지 않는 느낌이다. 그리고 교보문고와 같이 상위 탭이 10개 이상인 앱에서는 탭의 형태를 유지하는게 좋은 디자인이 맞는지도 약간 의문이긴 했다.

 

그럼에도 팝업 버튼 메뉴로 바꾸자고 하지 못했던 이유는 전자책 구매 과정에서 어려움을 줄이는 것이 목표이기 때문에 전자책 페이지로 이동하는 탭이 보이지 않는 형태로 할 수 없기 때문이었다. 

 

 

개인적인 생각으로는 이 두가지가 더 적합한 형태인 것 같다.

리디의 경우, 홈버튼을 눌렀을 때 바텀시트로 탭을 선택할 수 있게 했다. 이렇게 할 경우, 상단에 탭을 이용하지 않아도 되기 때문에 이중탭의 형태는 피할 수 있다. 단, 기본 홈 화면 없이 홈 버튼을 누를 때마다 탭을 새로 선택해야 한다면 사용할 때 불편할 수도 있을 것 같다.

 

그리고 교보문고와 같이 한 어플에서 다양한 계열사를 보여주는 인터파크의 경우, 브랜드 페이지로 이동하기 이전에 브랜드를 선택하는 홈화면을 따로 만들어 두었다. 이렇게 할 경우, 페이지는 하나 더 늘게 되지만 힉의 법칙에 의해 한 화면 내에 선택지가 줄어 사용하기에 불편함이 적을 것 같다.

 

 

 

 

와이어프레임+as is + to be

 

 

최종 완성본을 올리고 싶은데 맥북이 렉 때문에 피그마가 켜지지를 않는다.. 내일 다시 올려야 겠다