국세청 홈택스 메뉴 UX 개선하기

국세청 홈택스 메뉴 UX 개선하기

케이스  |  힌트  |  솔루션·피드백

문제

국세청 홈택스(www.hometax.go.kr)는 연말 정산 및 증명서를 받기 위해 많이 사용하는 사이트이다.

현재 이 사이트의 메뉴는 상단 GNB (Global Navigation Bar)에 커서를 올리면 오른쪽 그림처럼 메뉴가 화면을 덮는 방식으로 만들어져 있다. 이 방식은 GNB아래의 Body 영역에서 텍스트 입력, 버튼 클릭을 하다가 커서가 GNB 영역을 침범하면 메뉴가 화면을 덮어서 Body 부분이 보이지 않는 사용성 문제가 있어서 추천되지 않는 방식이다. 홈택스도 이 문제를 아는 것인지 “메뉴 펼침 중지/사용" 버튼을 달아놓았다. 홈택스 사이트의 메뉴는 어떻게 개선되어야 할지 UX를 기획해 보세요.
(바뀐 메뉴 동작 방식을 설명하면 됩니다.)

케이스 풀이시 고려사항

  • 익숙하게 사용하는 UX 콤포넌트들이 특정 사이트에서는 사용성 문제를 일으킵니다. 이 케이스의 경우는 메뉴 항목이 너무 많기 때문에 화면을 거의 모두 가리는 문제로 나타났습니다. UX 디자이너는 이런 문제를 미리 예측하고 해결하는 역량이 필요합니다.
  • 서비스에서 지원하는 기능이 너무 많다보니 메뉴가 많아진 사이트입니다. 기능(메뉴)이 너무 많을 때의 UX 문제를 다른 서비스들은 어떻게 해결했는지 찾아보세요. 예로 휴대폰이나 마이크로소프트 오피스, 쿠팡 같은 오픈 마켓 등이 많은 기능/컨텐츠를 담기 위한 UX를 가지고 있습니다.  

문제

국세청 홈택스(www.hometax.go.kr)는 연말 정산 및 증명서를 받기 위해 많이 사용하는 사이트이다.

현재 이 사이트의 메뉴는 상단 GNB (Global Navigation Bar)에 커서를 올리면 오른쪽 그림처럼 메뉴가 화면을 덮는 방식으로 만들어져 있다. 이 방식은 GNB아래의 Body 영역에서 텍스트 입력, 버튼 클릭을 하다가 커서가 GNB 영역을 침범하면 메뉴가 화면을 덮어서 Body 부분이 보이지 않는 사용성 문제가 있어서 추천되지 않는 방식이다. 홈택스도 이 문제를 아는 것인지 “메뉴 펼침 중지/사용" 버튼을 달아놓았다. 홈택스 사이트의 메뉴는 어떻게 개선되어야 할지 UX를 기획해 보세요.
(바뀐 메뉴 동작 방식을 설명하면 됩니다.)

케이스 풀이시 고려사항

익숙하게 사용하는 UX 콤포넌트들이 특정 사이트에서는 사용성 문제를 일으킵니다. 이 케이스의 경우는 메뉴 항목이 너무 많기 때문에 화면을 거의 모두 가리는 문제로 나타났습니다. UX 디자이너는 이런 문제를 미리 예측하고 해결하는 역량이 필요합니다.

서비스에서 지원하는 기능이 너무 많다보니 메뉴가 많아진 사이트입니다. 기능(메뉴)이 너무 많을 때의 UX 문제를 다른 서비스들은 어떻게 해결했는지 찾아보세요. 예로 휴대폰이나 마이크로소프트 오피스, 쿠팡 같은 오픈 마켓 등이 많은 기능/컨텐츠를 담기 위한 UX를 가지고 있습니다.


케이스 힌트

이 케이스가 어떤 케이스인지,

어떻게 접근해야 하는지 알 수 있어요.

케이스를 풀기 위한 접근법


  • 웹사이트의 메뉴는 오래된 사용성 문제 중의 하나입니다. 특히 메뉴 항목이 많은 웹사이트에서는 더더욱 문제가 됩니다.
    이 케이스를 대하는 가장 중요한 태도는 완벽한 정답을 찾지는 말라는 것입니다. 왜냐면 아직 해결하지 못한 오래된 문제이기 때문입니다.
  • 가장 먼저 정리할 것은 홈택스 웹사이트를 써보면서 As-Is 문제를 파악하는 것입니다. 첫 화면에서만 메뉴를 눌러보지 말고, 다른 기능(증명서 발급 등)을 사용해 보면서 여러 페이지를 통해 목표를 달성하는 과정을 수행해 보세요. 메뉴가 화면을 덮으면서 생기는 문제는 두 번째 세 번째 화면에서 더 많이 생깁니다.
  • 두 번째로는 ‘메뉴 펼침 중지' 버튼이 효과적인지 파악해 보세요. 이 버튼이 있다는 것은 많은 사용자 불만이 있었다는 증거입니다.
  • 고려 사항에 설명된 대로 메뉴 항목이 많은 웹이나 소프트웨어를 벤치마킹해보세요. 가장 잘 알려진 사례는 아마존 웹사이트입니다. (쿠팡닷컴도 유사) 메뉴 항목이 많을 때에 어떻게 해결하고 있는지 벤치마킹해보세요.
  • 아이디어를 내보세요. 다양한 시도를 하는 아이디어를 내는 것이 좋습니다. 예로 첫 번째 레벨 메뉴만 보여준다거나, 아마존처럼 왼쪽에 보여준다거나, (이렇게 할 수 있는 이유는 검색이 잘되기 때문에 메뉴는 보조적인 수단으로 했기 때문입니다.) 메뉴를 첫 화면이 아닌 경우에는 보여주지 않는 방식을 시도해 보세요.
  • 가장 바람직하다고 생각하는 안을 선택해서 설명하세요. 이 케이스는 문제 해결을 어떤 방식으로 하는지가 더 중요합니다. 과정을 설명하고 이 디자인안을 선택한 이유와 좋아지는 점을 기술하세요.

이 케이스를 풀기 위한 접근법

웹사이트의 메뉴는 오래된 사용성 문제 중의 하나입니다. 특히 메뉴 항목이 많은 웹사이트에서는 더더욱 문제가 됩니다.

이 케이스를 대하는 가장 중요한 태도는 완벽한 정답을 찾지는 말라는 것입니다. 왜냐면 아직 해결하지 못한 오래된 문제이기 때문입니다.

가장 먼저 정리할 것은 홈택스 웹사이트를 써보면서 As-Is 문제를 파악하는 것입니다. 첫 화면에서만 메뉴를 눌러보지 말고, 다른 기능(증명서 발급 등)을 사용해 보면서 여러 페이지를 통해 목표를 달성하는 과정을 수행해 보세요. 메뉴가 화면을 덮으면서 생기는 문제는 두 번째 세 번째 화면에서 더 많이 생깁니다.

두 번째로는 ‘메뉴 펼침 중지' 버튼이 효과적인지 파악해 보세요. 이 버튼이 있다는 것은 많은 사용자 불만이 있었다는 증거입니다.

고려 사항에 설명된 대로 메뉴 항목이 많은 웹이나 소프트웨어를 벤치마킹해보세요. 가장 잘 알려진 사례는 아마존 웹사이트입니다. (쿠팡닷컴도 유사) 메뉴 항목이 많을 때에 어떻게 해결하고 있는지 벤치마킹해보세요.

아이디어를 내보세요. 다양한 시도를 하는 아이디어를 내는 것이 좋습니다. 예로 첫 번째 레벨 메뉴만 보여준다거나, 아마존처럼 왼쪽에 보여준다거나, (이렇게 할 수 있는 이유는 검색이 잘되기 때문에 메뉴는 보조적인 수단으로 했기 때문입니다.) 메뉴를 첫 화면이 아닌 경우에는 보여주지 않는 방식을 시도해 보세요.

가장 바람직하다고 생각하는 안을 선택해서 설명하세요. 이 케이스는 문제 해결을 어떤 방식으로 하는지가 더 중요합니다. 과정을 설명하고 이 디자인안을 선택한 이유와 좋아지는 점을 기술하세요.  


솔루션·피드백

다른 회원은 이 케이스를 어떻게 풀었는지,

어떤 피드백을 받았는지 볼 수 있어요.

강XX 회원님이 제출하신 솔루션 예시입니다.

케이스를 출제한 전문가의 피드백 입니다.

👍 잘한 점

  • 메뉴 사용성에 대해 파악하고 메뉴 항목이 많은 서비스의 벤치마킹을 수행해서 현재 UX의 문제를 해결하기 위한 다른 방안을 찾았습니다.
  • 메뉴 항목을 재구성하는 시도가 아니라 (실제로 항목이 많을 수록 재구성이 어려우며 그 결과도 별로 티가 나지 않습니다), 자주 사용하는 메뉴와 특정 기간에 많이 사용되는 메뉴를 제공하는 다른 방식을 고안하였습니다 (실제로 홈택스 사용자들은 많은 기능 중 본인이 자주 사용하는 메뉴를 반복 사용하며, 특정 기간에 많이 사용되는 메뉴가 있습니다.

📌 부족한 점 

  • 디자인안에서 2뎁스 메뉴와 3뎁스 메뉴가 1뎁스 자리에 나타는 방식을 선택했습니다. 1뎁스의 항목 구분이 명확한 경우에는 사용할 수 있지만, 그렇지 않은 경우에는 추천되지 않는 방식입니다. 오히려 1뎁스 오른쪽에 2뎁스, 3덱스가 같이 보이는게 메뉴 탐색에 나은 방식입니다.
  • 해당 홈페이지에는 이미 방문자별 맞춤 메뉴와 최근 인기 메뉴가 첫화면에 나오고 있습니다. 현재 안 대로라면 이들을 메뉴 안으로 옮기자는 것으로 보이는데 이게 더 나은 생각이라고 보이지는 않습니다.
  • 결과물 정리를 As-Is 문제 > 인사이트 > 아이디어 > UX 프로토타입의 체계로 하고 이들 사이의 연결을 잘 보여주면 (문제와 인사이트의 연결, 인사이트와 아이디어의 연결 등) 더 체계적으로 보입니다.
  • 참고로 메뉴 문제는 실무에서 계속 지속되어온 문제입니다. 메뉴 자체로 해결은 거의 불가능합니다. 그런데 메뉴를 사용하는 이유는 원하는 기능을 찾기 위해서이므로 검색이 더 잘되게 하는 방식으로 해결하고 있습니다. 예로 쿠팡에서 메뉴로 상품을 찾는 사용자는 많지 않습니다. 그 이유는 검색이 잘되기 때문이죠.

📘 총평 


이 케이스는 오래되었으며 어려운 사용성 문제를 해결하는 사례입니다. 그래서 아이디어가 나와도 이미 적용되어있거나 과거에 사용되었거나 하는 경우가 많습니다. 그래서 메뉴 자체 보다는 메뉴를 왜 사용하는지(원하는 기능을 찾기 위해서)로 문제를 재정의하고 이를 검색이나 바로가기 등의 다른 방식으로 해결하는 접근법이 좋습니다. 그리고 나서 재정의한 문제와 이를 해결한 디자인안을 설명하시면 좋습니다. 문제를 재정의해야 하는 다른 케이스를 일곱시에서 해보시면서 문제해결역량을 키우세요.

전문가의 평가: C
S: 감탄할 만한 수준입니다.
A: 실제 상품에 바로 적용할 수 있어요.
B: 부족함이 조금 있습니다.
C: 노력이 필요해요. 

케이스를 출제한 전문가의 피드백 입니다.

👍 잘한 점 
메뉴 사용성에 대해 파악하고 메뉴 항목이 많은 서비스의 벤치마킹을 수행해서 현재 UX의 문제를 해결하기 위한 다른 방안을 찾았습니다.

메뉴 항목을 재구성하는 시도가 아니라 (실제로 항목이 많을 수록 재구성이 어려우며 그 결과도 별로 티가 나지 않습니다), 자주 사용하는 메뉴와 특정 기간에 많이 사용되는 메뉴를 제공하는 다른 방식을 고안하였습니다 (실제로 홈택스 사용자들은 많은 기능 중 본인이 자주 사용하는 메뉴를 반복 사용하며, 특정 기간에 많이 사용되는 메뉴가 있습니다.
📌 부족한 점 
디자인안에서 2뎁스 메뉴와 3뎁스 메뉴가 1뎁스 자리에 나타는 방식을 선택했습니다. 1뎁스의 항목 구분이 명확한 경우에는 사용할 수 있지만, 그렇지 않은 경우에는 추천되지 않는 방식입니다. 오히려 1뎁스 오른쪽에 2뎁스, 3덱스가 같이 보이는게 메뉴 탐색에 나은 방식입니다.
해당 홈페이지에는 이미 방문자별 맞춤 메뉴와 최근 인기 메뉴가 첫화면에 나오고 있습니다. 현재 안 대로라면 이들을 메뉴 안으로 옮기자는 것으로 보이는데 이게 더 나은 생각이라고 보이지는 않습니다.
결과물 정리를 As-Is 문제 > 인사이트 > 아이디어 > UX 프로토타입의 체계로 하고 이들 사이의 연결을 잘 보여주면 (문제와 인사이트의 연결, 인사이트와 아이디어의 연결 등) 더 체계적으로 보입니다.
참고로 메뉴 문제는 실무에서 계속 지속되어온 문제입니다. 메뉴 자체로 해결은 거의 불가능합니다. 그런데 메뉴를 사용하는 이유는 원하는 기능을 찾기 위해서이므로 검색이 더 잘되게 하는 방식으로 해결하고 있습니다. 예로 쿠팡에서 메뉴로 상품을 찾는 사용자는 많지 않습니다. 그 이유는 검색이 잘되기 때문이죠.
📘 총평 
이 케이스는 오래되었으며 어려운 사용성 문제를 해결하는 사례입니다. 그래서 아이디어가 나와도 이미 적용되어있거나 과거에 사용되었거나 하는 경우가 많습니다. 그래서 메뉴 자체 보다는 메뉴를 왜 사용하는지(원하는 기능을 찾기 위해서)로 문제를 재정의하고 이를 검색이나 바로가기 등의 다른 방식으로 해결하는 접근법이 좋습니다. 그리고 나서 재정의한 문제와 이를 해결한 디자인안을 설명하시면 좋습니다. 문제를 재정의해야 하는 다른 케이스를 일곱시에서 해보시면서 문제해결역량을 키우세요.   

전문가의 평가: C
S: 감탄할 만한 수준입니다.
A: 실제 상품에 바로 적용할 수 있어요.
B: 부족함이 조금 있습니다.
C: 노력이 필요해요. 

답안 제출을 망설이지 마세요. 디자인에 정답은 없습니다. 

머뭇거리는 것 보다는 전문가의 1:1 피드백을 받는 것이 역량 향상에 훨씬 도움이 됩니다.

일곱시로 실무 UX 역량을, 특히 채용 과정에서 중요한 문제해결 역량을 쌓아가세요.

답안 제출을 망설이지 마세요. 디자인에 정답은 없습니다. 

머뭇거리는 것 보다는 전문가의 1:1 피드백을 받는 것이 

 역량 향상에 훨씬 도움이 됩니다.


일곱시로 실무 UX 역량을,

특히 채용 과정에서 중요한 문제해결 역량을 쌓아가세요.