정신건강 앱 1차 배포 후 사용성(Usability) 개선을 위한
터치영역(Touch Targets)과 인터렉션(Interaction) 보완하기
[1차 배포 인원]
디자이너 팀장 1명, 개발 팀장 외 개발자 2명
[사용성 개선 프로젝트 인원]
디자이너 팀장 1명, 개발자 2명
🚩 Goal:
*터치영역과 인터렉션 보완을 통한 모바일 앱 사용성 개선하기
✅ Objectives:
- 사용자가 한손으로 모바일 앱을 사용할때 터치가 어색한 영역 수정 및 보완하기
- Page to page의 슬라이드 시 어색한 인터렉션 수정 및 보완하기
- Button 혹은 UI Element가 나타나거나 Touched될때 어색한 정적인 인터렉션 동적으로 수정 및 보완하기
Due Date:
~ April 28, 2025
사용성 개선을 위한 터치영역(Touch Targets)
📌 1. 사용성 개선을 위해 터치영역(Touch Targets)을 보완하는 이유는?
잘 만들어진 어플은 사용하면서 어색함없이 부드럽게 화면이 넘어가고 터치되는것이 당연하게 여겨지게 됩니다.
마치 당연한 이 동작들은 개발할때 사용자의 터치영역과 행동을 모두 고려해 만들어졌기 때문이라는 사실 아시나요?
처음 앱개발을 하는 경우, 각각의 페이지들과 UI를 만들기 급급해 터치영역을 신경쓰지 못하는 경우가 많습니다.
저희 팀도 처음으로 앱 개발 프로젝트를 진행했고 MVP라고 하기에는 너무 큰 규모의 어플을 단기간에 배포해야해서 터치영역에 크게 신경쓰지 못한 부분이 있었습니다.
디자이너로서 QA를 진행하던 도중 잘 눌리지 않는 아이콘들이나 리스트 아이템인데 텍스트만 터치영역으로 잡혀있는 경우, 버튼의 텍스트만 터치영역으로 잡혀있는경우, 뒤로가기 아이콘은 특히 화면의 코너에 위치해 있어 더 터치하기 어려운 경우 등 어색한 인터렉션을 경험했고 보완이 필요하다 판단했습니다.
이를 개발인원과 상의해 개선하기로 하고 Android와 iOS의 터치영역 가이드를 고려하여 터치영역 QA 요구사항 Sheet를 전달했습니다.
🔎 권장 최소 터치 타겟
플랫폼 별로 권장하는 최소 터치 타겟의 크기는 각각
Android 48px*48px,iOS 44px*44px을 제시하고 있습니다.
Android(https://m2.material.io/design/layout/spacing-methods.html#containers-and-ratios)
iOS(https://developer.apple.com/kr/design/tips/)
👆🏻 모바일 터치 영역 참고
The Thumb Zone: Designing For Mobile Users:
(https://www.smashingmagazine.com/2016/09/the-thumb-zone-designing-for-mobile-users/)
💎 디자인QA 요구사항 Sheet
개발자에게 전달한 디자인QA 요구사항 Sheet에서는 24px의 뒤로가기 아이콘이
1. 자주 사용된다.
2. 화면 왼쪽 상단에 위치해 엄지와의 거리가 멀다.
는 것을 고려해 48px로 터치영역을 지정했습니다.
사용성 개선을 위한 인터렉션
📌 2. 사용성 개선을 위해 인터렉션(Interaction)을 보완하는 이유는?
최근들어 국내에서는 '토스'앱에서 마이크로 인터렉션을 선보이며 모바일 앱의 인터렉션에 대한 관심도가 급증하고 있습니다. 인터렉션은 모바일 앱의 기능 중 '필수'로는 잘 여겨지지 않는 경우가 많습니다.
하지만 인터렉션을 통한 동적인 플로우는 사용자를 더 즐겁고 편안하게 만들어 주며 '좋은 경험'을 선사할 수 있죠. 좋은 인터렉션은 때때로 사용자가 앱에 더 오래 머무르게 하며 앱의 사용도를 증가시키고 관심도를 증가시킬 수 있습니다. 반대로 나쁜 인터렉션은 사용자에게 불쾌감을 주기도 하고 어색함을 느끼게도 하며 이탈을 유발할 수 있어요.
🙄 그렇다면 나쁜 인터렉션이란 무엇일까요?
예를 들어 화면1에서 화면2로 넘어가는 Slide-in이라는 인터렉션이 부드럽게 작동하지 않고 깜빡거림을 주거나 갑자기 전환되거나 너무 느리게 전환되는 경우, 사용자는 이것을 '오류' 혹은 '대기'라고 느낄 수 있어요. 이런경우 이탈률이 높아지겠죠.
좋은 인터렉션은 사용자의 관심을 끌고 다음행동으로 매끄럽게 이어지도록 유도합니다.
예를 들면 같은 한 화면의 UI 리스트를 보더라도 정적인 한 화면을 보는것 보다 일반적으로 글을 읽는 왼쪽상단 -> 오른쪽 하단 순서대로 UI가 순차적으로 드러나고 강조하는 UI에 마이크로 인터렉션을 주어 사용자의 눈길을 끌고 다음 행동을 일부러 유도할 수도 있겠죠. 정적인 재미없는 화면보다는 동적인 재미있는 화면이 더 좋은건 당연하지 않을까요?
물론 어플의 목적에 따라서 다를 수는 있겟지만 요즘같이 빠르고 재밌는것을 추구하는 시대에 사용자의 흥미를 끌 수 있다면 좋은 시도라고 생각합니다.
마무리하며
저희팀에서 1차 배포한 정신건강 어플을 QA해본 결과, 페이지와 페이지간의 전환 인터렉션 중
깜빡임,너무 빠르거나 혹은 너무 느림,전환하는 두화면이 서로 셔플되는 현상을 경험했어요. 또 다음 화면이 보이게 될때 정적으로 모든 UI가 동시에 보이는것 보다는 순차적으로 동적인 애니메이션을 주고 사용자의 관심을 유도하는 방향으로 개선해보려고 해요🤔.
