brunch

라이킷 13 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by egg fly Sep 12. 2022

버튼에도 브레이크가 필요한가요?

혼란스러운 카트라이더 버튼의 색상과 위치

제가 유일하게 몇 년 동안 꾸준히 플레이하고 있는 게임이 카트라이더인데요. 곧 레벨 72로 이쯤 되면 눈감고도 뭐가 뭔지 알 수 있어야 되는데... 가끔 오작동 난 것처럼 저를 버벅거리게 만드는 것이 있습니다.

카트라이더 게임 모드 선택 화면. 카트라이더 출처

01. 일관성 튜닝

게임을 하다 보면 우리에게는 종종 두 가지의 선택지가 주어집니다. 계속할래? 그만할래? 저는 미션이 끝나야지만 비로소 게임을 종료하는 악착같은 플레이어 타입인데요. 카트라이더에서도 사용자에게 두 가지의 선택지가 주어지곤 합니다. 그리고 이 선택지가 바로 저를 버벅거리게 만든 주범입니다. 우선 A/B 테스트로 이번 마이크로 기획의 개요 먼저 보시죠. 아래 두 이미지 중에 어떤 방식의 버튼을 제공하는 것이 더 좋은 사용자 경험을 만들 수 있을까요?

카트라이더 게임 종료 후 화면. 카트라이더 출처

아마 게임 특성에 따라 적절한 버튼의 위치는 다를 텐데요. 좌측 이미지와 우측 이미지는 다른 모드의 게임입니다. 좌측 이미지는 '시나리오 모드'의 게임으로 다음 단계로 넘어가는 미션에 도전하여 퀘스트를 클리어하는 게임입니다. 그리고 우측 이미지는 신규 트랙이 오픈되었을 때 기록을 계속적으로 경신하거나 퀘스트를 완료하여 포인트와 보상을 획득하는 게임입니다.

물론, 게임 특성에 맞춰서 버튼을 배치하는 것도 중요하겠지만 일관성 또한 중요합니다. 지금 두 버튼을 보면 동일한 성격의 버튼임에도 불구하고 위치도 다르고, 색상도 다릅니다. 이는 예시를 든 두 게임만 그런 것이 아닙니다. 현재 카트라이더 게임에서 제공되는 일부 버튼의 리스트를 정리해 보았는데요. 일부 서비스만 봐도 일관성이 부족하다는 것을 알 수 있습니다.

카트라이더 일부 게임 버튼 리스트. 카트라이더 출처

한눈에 봤을 때 버튼이 일관성 있게 제공되어 보이시나요? 카트라이더에서는 '구매'나 '게임시작' 등의 버튼이 노란색인 걸로 보아, 아마 노란 버튼이 주요 버튼인 것 같습니다. 그런데 위 이미지에서는 강조는 커녕 오히려 뒤죽박죽입니다. 색상을 통일하거나 위치라도 동일하게 제공하면 좋을 텐데 말이죠.

추측하건대, 노란 버튼은 시인성을, 우측에 위치한 버튼은 동작 편의성을 강조한 것이 아닐까 싶습니다. 가정1. 하지만, 카트라이더에서 제공하는 다양한 게임 중에 사용자가 하나의 게임만 플레이하지는 않을 것입니다. 가정2. 그렇다면 이런 일관되지 않은 경험은 사용자에게 혼란과 불편을 줄 수밖에 없습니다. 아무리 눈에 쉽게 띄고 동작하기 편리해도 사용자가 원했던 버튼이 아니라면 무용지물이라는 것이죠.

물론 버튼을 하나씩 뜯어보면, 다 그럴만한 이유가 있습니다. 아케이드 모드는 캡쳐 기능이 있는 좌측 '저장하기' 버튼이 강조되고 있는데요. '돌아가기'는 12초 카운트가 되다가 자동으로 대기방에 돌아가지기 때문에 따로 강조하지 않은 것 같습니다. 대신, 8282의 민족답게 우측에 버튼을 위치시켜 편의를 제공한 것 같고요.

또, 신규 트랙 챌린지나 타임어택의 경우에는 '돌아가기'가 좌측에 위치되어 있습니다. 기록을 계속 경신하는 게임이기 때문에 '다시 도전' 버튼의 편의를 고려한 것이죠. 물론 사용자가 원치 않은 편의일 수도 있습니다. 가정3. '돌아가기' 버튼을 클릭하는 비율이 다른 버튼에 비해 높다면 말이죠.

02. 가정과 가설

위에서 언급한 가정을 정리하면 다음과 같습니다.

가정
1. 최소 2개 이상의 게임모드를 플레이하는 사용자의 비율이 높다.
2. 사용자가 게임 종료 후 버튼 클릭 시, 종종 실수로 클릭하거나 버튼 이용에 불편을 느끼고 있다.
3. '돌아가기'의 클릭률이 다른 버튼에 비해 높게 나타난다.

개선 방향을 잡아줄 가설은 다음과 같습니다.

가설
1. '돌아가기' 버튼의 일관된 경험을 제공하면 사용자 경험 또한 개선될 것이다.
2. 버튼에 새로운 규칙을 적용하면, 추후 버튼이 추가되어도 유연한 사용자 경험을 제공할 수 있을 것이다.

03. 마이크로 포인트

(1) 돌아가기 버튼은 파란색!

'돌아가기' 버튼, 그리고 성격이 유사한 '계속' 버튼은 어떤 게임에서든지 일관된 경험을 제공하도록 기획하였습니다. 이때 색상과 위치, 두 가지 다 '돌아가기' 버튼의 기준이 되도록 말이죠! 우선 '돌아가기'는 파란 버튼으로 통일하였습니다.

게임을 포함한 다른 기능에서도 노란 버튼과 파란 버튼이 활용되는데, 앞서 말씀드린 것처럼 보통 중요한 버튼은 노란 버튼입니다. 그런데 단독으로 파란 버튼이 쓰일 때도 있습니다. 이런 경우는 보통 파란 버튼 자체가 목적이 아닌, 노란 버튼을 만나기 위한 수단으로 쓰입니다. 예를 들어, 퀘스트 '완료하기' 버튼은 파란색이고, 퀘스트 완료 후에 보상을 얻는 '받기' 버튼은 노란색입니다. '돌아가기' 버튼 또한, 또 다른 게임을 플레이할 수 있는 수단의 역할이라고 볼 수 있습니다. 즉, '돌아가기' 자체가 목적이 아니기 때문에 파란 버튼이 적합하다고 보았습니다.

카트라이더 완료하기/받기 버튼. 카트라이더 출처

(2) 돌아가기 버튼은 우측!

'돌아가기' 버튼을 무조건 우측에 배치하지는 않았습니다. 단, 파란 버튼이 2개 이상일 경우에는 그중에 가장 우측에 배치하는 것으로 기획하였고, 이것을 규칙으로 잡았습니다. 그러면 사용자는 자연스럽게 파란 버튼 중에 가장 우측에 있는 버튼을 '돌아가기' 버튼으로 인식할 것입니다. 물론 이러한 기획에는 A/B테스트가 필요할 테지만요!