대학교 2021년 1학기 인간컴퓨터상호작용(HCI) 학부 과목을 수강하며 진행한 프로젝트입니다.
유저 스터디에 사용한 사이트: https://odd-keyboard.web.app/
이번 글에서는 유저 스터디 결과 분석 과정 및 결론을 다룹니다.

3줄 요약

1. 유저들은 게으르다.
2. 사람들은 입력하려는 키의 가운데보다 아래쪽을 더 많이 누른다.
3. 유저 스터디는 재밌다.😎

프로젝트 정리

유저 스터디의 목적

모바일 환경에서 유저가 실제로 터치하는 부분의 좌표 분석

구체적인 목표

1. 키보드를 누를 때 손가락이 실제로 화면과 닿는 부분이 어느 영역인지 알아봅니다.
2. 버튼을 누를 때 어느 부분을 주로 터치하는지 파악합니다.

가설: 키보드 버튼과 일반적인 다른 버튼 모두 가운데 부분을 누를 것이다.

실제로 유저로부터 받은 정보

사용자가 웹사이트의 각 페이지에서 터치한 x, y 좌표

구현한 프로그램

1. 사용자를 관찰하기 위한 리액트 웹사이트 (소스코드 보러가기↗️)
   

2. 결과 분석을 위한 파이썬 애플리케이션 (소스코드 보러가기↗️)
   

결과 분석

응답자: 총 98명

• 약 97%의 유저가 블로그와 같은 "긴 글쓰기"보다는 주로 메신저 앱을 통해 "짧은 글쓰기"를 하는 사람
• 80%가 여자 응답자
• 56%가 20세 ~ 24세의 20대 초중반

키보드 터치에 대한 결과 분석

1. 전반적인 경향

신기한 결과가 나왔습니다. 각 페이지에서 유저들에게 특정 단어를 주고 키보드로 단어를 입력하게 했더니, 대부분 유저들이 실제 키보다 아래쪽을 터치하는 경향을 보였습니다. 제 나름대로 생각해본 원인은 키보드의 위치였습니다.

실험에 사용된 웹사이트에서는 키보드가 항상 스크린의 가운데보다 살짝 위에 위치하게 되어 있었습니다. 정중앙에 위치할수는 있지만 그 아래로는 절대 내려갈 수 없는 구조였죠. 하지만 우리는 보통 휴대폰의 아래쪽을 잡고 받치면서 사용하기 때문에, 힘을 주지 않고 편안한 상태로 있으면 손바닥과 엄지 손가락은 키보드보다 항상 아래쪽에 위치하게 됩니다. 그러다보니 이런 결과가 나온 것 같다고 분석했습니다.

발표 후 피드백 시간에, 교수님께서 이런 연구가 실제로도 10년 전 정도에 이루어졌었고 그 때에도 사용자가 키보드를 누를 때 살짝 아래쪽을 누르는 결과가 나왔다고 말씀하셨습니다. 실험이 제대로 되었구나! 하고 뿌듯했던 순간이었죠.😎

그러면 좀 더 디테일한 결과 분석으로 들어가볼까요?

2. 키 바깥쪽 여백을 터치해도 입력이 될 때 vs. 그렇지 않을 때

사실 사용자 눈에는 거의 비슷해보이지만 이번 실험에 사용된 키보드는 총 4가지였습니다. 그 중 2가지는 키보드 여백을 눌렀을 때에도 입력이 되는 키보드이고, 나머지는 그렇지 않은 키보드입니다. 예를 들어, 'ㄱ'을 입력하려고 할 때 특정 키보드에서는 'ㄱ' 주변을 터치해도 입력한 것으로 처리해서 화면에 'ㄱ'이 나타나는 반면 정확히 'ㄱ' 키를 눌러야만 화면에 'ㄱ'이 나오는 키보드가 있는 것이죠.

아래 그래프는 사용자가 단어 하나를 입력하기 위해 시도한 횟수를 보여줍니다. 가로축은 시도 횟수, 세로축은 시도한 사람 수입니다. 만약 가로축 값이 9, 세로축 값이 10이라면 그 단어를 입력하기 위해 키보드 위를 9번 터치한 사람이 10명이 되는 것이죠. 따라서 입력하기 쉽고 오타가 나지 않을수록 단어 안에 들어가있는 자모 개수만큼 정확하게 시도한 사람이 많을 것입니다.

사진에서 위쪽 3개는 여백을 터치해도 입력으로 인정해준 경우이고, 아래쪽 3개는 여백을 터치하면 아무런 반응이 없는 경우입니다. 위/아래 그래프 경향이 꽤 다르죠?
그래프에 그은 붉은색 세로선은 주어진 단어를 오타 없이 한번에 입력하기 위해 키보드를 터치해야하는 횟수를 표시한 것입니다. '가나다'가 주어졌다면 가로축 '6'에 세로선을 그었을 것입니다. 위쪽 그래프는 대부분 사람들이 오타 없이 한번에 단어를 입력했음을 보여주고 있습니다.
반면 아래쪽 그래프에서는 붉은 선에 걸린 횟수보다 더 많이 시도한 사람들의 흔적이 보입니다. 오른쪽으로 길게 그려진 그래프 꼬리가 이를 의미합니다.

사람들은 키보드의 키 사이사이 여백을 터치할 수 있을 때 원하는 단어를 한번에 입력할 확률이 높아진다는 결론을 내릴 수 있습니다.

즉, 사람들이 항상 키 하나를 정확히 누르기보다는 그 근처의 여백을 자주 누른다는 것을 알 수 있죠. 그러니까 키보드 만드는 사람은 여백도 잘 눌리도록 꼭 체크해줘야겠죠? 실제로 키보드 키가 잘 안눌린다는 직접적인 피드백도 들어왔습니다.

3. 키 하나의 크기가 큰 키보드 vs. 작은 키보드

실험에 사용된 또다른 변수는 키 하나의 크기였습니다.

이렇게 키 하나가 큰 키보드와 작은 키보드를 준비해서 진행했습니다. 하지만 크기 차이에 따른 변화는 거의 나타나지 않았습니다. 아래는 유저가 터치한 x, y 좌표를 산점도 그래프와 상자 수염 그림으로 나타낸 것입니다.

왼쪽 그래프 2개는 키 사이즈가 클때, 오른쪽 그래프 2개는 키 사이즈가 작을 때의 결과물입니다. 우선 각각의 경우에서 왼쪽 산점도 그래프에 공통적인 모양이 보입니다. 점 사이로 가로선이 보이시나요? 사용자들이 짠것도 아니고, 저렇게 수평선이 나타나는 이유가 뭘까요?
이는 스마트폰 스크린이라는 화면 특성 때문입니다. 찾아본 결과 스마트폰 액정이 손가락의 터치를 인식할 때에는 실제로 터치한 영역의 '평균값'을 주로 사용한다고 하는데, 이 때 평균값을 내면서 좌표값이 0.5픽셀 혹은 1픽셀 단위로 끊기게 되는 것이죠. 그래서 그 사이값은 나타나지 않고 그래프에서는 마치 빈 공간처럼 나타나는 것입니다.

오른쪽 그래프에서는 사용자들이 주로 터치한 영역의 평균을 알 수 있습니다. 상자 안에 들어가는 영역이 가장 많은 사용자가 터치한 영역입니다. 주황색으로 표시된 점은 실제 키보드의 정 가운데를 나타냅니다. 이 그래프에서도 사용자가 키보드 키의 가운데부분보다는 훨씬 아래쪽을 터치한다는 사실을 알 수 있습니다.

따라서 키 사이즈에 따른 큰 변화는 없다는 사실을 알 수 있습니다.

버튼 터치에 대한 분석

아래 그림에서 초록색 점은 사용자가 실제로 터치한 좌표를 나타내고 있습니다.

각 페이지별로 점이 많이 몰려있는 부분이 있습니다.

1. "시작하기" 글자의 우측 상단
2. "시작" 버튼의 우측
3. 라디오 버튼의 동그란 아이콘과 우측 가장자리, "결과 보기" 버튼의 가운데보다 좌우로 조금 치우친 자리

우리나라 사람들은 오른손잡이가 대부분이고 (실제로 응답자도 이런 경향을 보이는지 설문조사에 넣었으면 좀 더 정확한 조사가 되었을 것 같다는 아쉬움이 남네요), 휴대폰을 잡고 손에 힘을 주지 않고 편하게 있을 때 손이 어디에 위치하는지 생각해보면 이 결과를 설명할 수 있습니다. 한마디로 각자가 누르기 편한, '손가락과 최대한 가까운 곳'을 주로 누른다고 정리할 수 있습니다.

결론

• 스마트폰 키보드를 터치할 때에는 키의 아래쪽을 더 많이 터치하며, 여백을 터치했을 때 입력으로 받아들이는지 아닌지에 따라 사용감이 크게 달라진다.
• 버튼을 누를 때에는 손과 최대한 가까운 영역을 터치하려 한다.
• 유저 스터디는 재밌다.😎

한학기동안 수업을 들으면서 2번의 유저 스터디와 2번의 시험을 치뤘습니다. 직장 일과 병행하면서 새 프로젝트를 기획하고 구현하는 일이 쉽지는 않았지만 그 과정은 정말 재밌었습니다. 특히 제가 만든 프로그램을 통해 사람들의 반응을 수집하고, 그 반응이 모여 경향을 만들고, 그 경향을 통해 결론을 내리는 일련의 과정들 하나하나 재미없는 부분이 없었습니다. 다음에 기회가 된다면 이런 유저스터디를 꼭 해보고 싶네요.