모바일 앱을 디자인할 때 버튼의 크기는 어느 정도여야 하나요?

작은 버튼은 큰 버튼보다 조작하기가 더 어렵습니다. 모바일 인터페이스를 디자인할 때 사용자가 더 쉽게 클릭할 수 있도록 클릭 가능한 타겟을 더 크게 만드는 것이 좋습니다. 하지만 대부분의 사용자에게 편리하려면 이것이 얼마나 "크게" 필요합니까? Silk Road Education의 편집자는 많은 모바일 개발자들도 이 질문에 대한 답을 알고 싶어하며 마침내 각 플랫폼의 UI 디자인 사양에서 답을 찾았다고 믿습니다.

모바일 플랫폼 디자인 가이드라인은 무엇을 말해주는가?

애플의 '아이폰 휴먼 인터페이스 디자인 사양'에는 최소 클릭 대상 크기가 44 x 44 픽셀이라고 명시돼 있다. Microsoft의 "Windows Phone 사용자 인터페이스 디자인 및 상호 작용 지침"에서는 34 x 34픽셀 크기, 최소 26 x 26픽셀 크기를 사용할 것을 권장합니다. Nokia 개발 가이드에서는 대상 크기가 1cm x 1cm 또는 28 x 28픽셀 이상이어야 한다고 권장합니다.

이 지침에는 각 플랫폼의 클릭 가능한 대상에 대한 크기 표준이 나열되어 있지만 표준은 서로 일치하지 않으며 실제 손가락 크기는 손가락 크기보다 큽니다. 평균 크기는 더 작으며 이는 터치 스크린의 클릭 대상 정확도에 영향을 미칩니다.

작은 클릭 대상은 큰 문제를 일으킬 수 있습니다.

너무 작은 클릭 가능한 대상 크기는 보다 정확한 터치 제어가 필요하기 때문에 사용자 경험에 매우 나쁩니다. 사용자는 더 작은 대상을 조작할 수 있도록 손가락 중앙 조작부터 손가락 끝 조작까지 손가락 조작 방식을 조정해야 합니다. 손가락 끝 조작을 사용하는 경우 일반적으로 조작 개체 전체가 적용되므로 사용자가 조작하려는 대상을 구별할 수 없으며 조작 중에 시각적 피드백을 받을 수 없으므로 조작이 효과적인지 알 수 없습니다. 사용자가 손가락 끝을 사용하여 조작해야 할 때 새로운 문제가 발생합니다. 이 조작 방법은 매우 느리고 힘들며 경험도 좋지 않습니다.

문제는 이것뿐만 아니라 대상의 크기가 너무 작아서 잘못된 터치 조작으로 이어질 수도 있다는 점입니다. 크기가 작기 때문에 서로 쉽게 붐비고 사용자가 근처의 대상을 쉽게 만질 수 있어 바람직하지 않은 실행 결과가 발생합니다. 손가락이 너무 크고 대상 크기가 너무 작습니다. 한 손가락의 너비가 두 대상의 너비를 덮을 수 있습니다. 잘못된 위치에서 누르지 않으면 오동작의 원인이 됩니다. 집게손가락은 오류가 발생하기 쉽지만 엄지손가락은 오류가 발생하기 더 쉽습니다. 엄지손가락이 더 크고 서투르기 때문이다. 사용자가 엄지손가락을 기울여 엄지손가락 옆면을 사용하여 조작하는 경우도 있지만 대상 크기가 너무 작아서 실수가 여전히 자주 발생합니다.

모바일 사용자의 일상적인 작업에서 엄지손가락은 매우 자주 사용됩니다. 때때로 사용자는 손을 자유롭게 사용하여 작동할 수 없으며 한 손으로만 휴대폰을 잡고 엄지손가락과 집게손가락으로만 작동할 수 있습니다. 이 시나리오에서는 사용자의 작업 정확도가 제한되므로 작업 오류를 방지하려면 대상 크기를 늘려야 합니다. 이것이 소위 친숙한 터치 경험입니다.

검지 손가락 동작 시 평균 픽셀 너비

MIT 터치 연구소에서는 손가락 끝을 설문조사로 활용하여 감각 기능을 분석하는 연구를 진행했습니다. 연구에 따르면 성인의 검지 너비는 일반적으로 1.6~2cm입니다. 이는 픽셀 단위로 45-57픽셀로 변환되며, 이는 해당 가이드라인의 권장 너비보다 넓습니다.

사용자가 손가락 전체를 대상에 놓을 수 있도록 대상 크기는 45~57px이면 충분합니다. 작동 중에 사용자는 대상의 가장자리도 볼 수 있습니다. 이러한 방식으로 사용자와 제어 대상 간의 피드백과 정보 전달이 매우 명확해지고 사용자는 자신의 작업이 효과적인지 여부도 알 수 있습니다. 크기가 크기 때문에 위치 지정이 더 빠르고 드래그가 더 쉽습니다. Fitts의 법칙에서 언급했듯이 목표가 작을수록 작업 시간이 길어집니다. 작은 타겟은 사용자가 정확한 위치 지정에 집중해야 하기 때문에 사용자의 작업 속도가 느려집니다. 손가락 크기의 타겟은 다릅니다. 이러한 종류의 타겟은 사용자에게 작동하기에 충분한 공간을 제공하고 오류 허용 비율이 높습니다.

엄지손가락 조작의 경우 픽셀 너비

엄지손가락을 사용하여 화면의 대상을 탭하는 사용자도 많습니다. 엄지손가락은 집게손가락보다 넓으며 평균 너비는 약 2.5cm(72픽셀)입니다.

72픽셀의 실제 사용 효과는 훌륭하고 위치 지정이 더 쉽고 조작 편의성이 더 좋습니다. 작동 대상의 가장자리도 볼 수 있습니다. 즉, 사용자는 더 이상 손가락을 조정하고 손가락 끝을 사용하여 작동할 필요가 없습니다. 엄지손가락을 기울이는 대신 엄지손가락 측면으로 대상을 클릭합니다.

'소형 터치 기기의 한 손 조작에 관한 연구: 엄지 조작의 목표 크기에 관하여' 기사에서는 목표 크기를 늘리면 잘못된 조작 횟수가 줄어드는 것으로 나타났습니다. 공간이 많을수록 내결함성이 향상되고 작동이 정밀해지며, 크기가 크기 때문에 대상의 표현력이 강해집니다.

다른 기사 '모바일 터치 디자인: 타겟 선택의 핵심'에서도 같은 견해가 표현되었습니다.

손가락 크기의 목표 크기는 이상적이지만 특별한 경우가 있습니다

목표 크기의 크기를 손가락 크기와 비슷하게 설정하면 이점이 없습니다. 자세히 설명되어 있습니다. 그러나 모든 설계 시나리오에 적합하지는 않습니다. 모바일 장치에서는 공간이 제한되어 있습니다. 즉, 각 대상의 크기가 크면 화면 공간이 충분하지 않고 계속해서 페이지를 넘겨야 하는데 이는 나쁜 경험입니다.

화면 크기를 측정한 다음 비율을 계산하고 "이 크기의 화면에서 적절한 최대 대상 크기는 얼마입니까?"를 파악해야 합니다. 손가락 크기에 맞게 크기를 조정하면 전체 인터페이스의 비율이 끔찍해집니다. 다시 팔로우 비율 조정 후 최대 목표 크기 효과가 거짓이 아니므로 가이드 사양에서 권장 크기만 사용하시면 됩니다.

태블릿 기기의 경우 태블릿이 더 많은 공간을 차지하기 때문에 휴대전화만큼 상황이 복잡하지 않습니다. 클릭 타겟을 배치할 공간이 없다고 걱정하지 마세요. 공간도 충분하고, 크기도 쉽게 늘릴 수 있어 작업 편의성이 향상됩니다. 휴대폰은 클릭 대상의 크기를 조절하는 것이 가장 어렵습니다. 하지만 휴대폰의 공간은 한정되어 있고 조작 오류가 발생하기 쉬우므로 실제 손가락 크기만큼 목표 크기를 설정할 필요가 있다. 디자이너의 과제는 화면에 있는 대부분의 개체를 손가락 크기와 동일하게 만드는 방법을 찾는 것입니다. 하지만 디자이너가 디자인할 때 기능성과 스타일에 더 많은 주의를 기울이게 만드는 이점도 있습니다.

게임 애플리케이션을 위한 엄지손가락 크기의 클릭 개체 디자인

우리가 추측할 수 없는 질문은 사용자가 애플리케이션을 사용할 때 검지 손가락을 더 많이 사용하는가 하는 것입니다. 아니면 엄지손가락을 더 많이 사용하시나요? 따라서 이 점에 대해서는 매우 상세한 연구를 수행한 후 합리적인 목표 규모를 설정해야 합니다. 그러나 앱이 게임인 경우 대부분의 사용자는 엄지손가락을 사용합니다. 이것이 바로 많은 게임 응용 프로그램에서 일부 컨트롤이 일반적으로 엄지 손가락 크기이므로 사용자가 양손으로 더 단단히 잡고 더 정확하게 조작할 수 있는 이유입니다.

결론

타겟 크기를 조정하고 이를 실제 적용 상황과 결합함으로써 모바일 단말기의 적용성을 효과적으로 향상시키는 동시에 사용자 경험도 향상시킬 수 있습니다. . 앱이 게임이든 다른 것이든 상관없습니다. 터치 스크린의 대상은 사용자가 클릭할 수 있는 것입니다. 사용자가 "정확한 작업을 완료하려면 어떻게 클릭해야 하는가"에 대해 생각해야 한다면 상호 작용하기 전에 방법을 생각하고 작업 방법을 조정하고 여러 방법을 사용하여 상호 작용을 완료해야 합니다. 이는 이 제품의 인터랙션 디자인이 좋지 않다는 것을 보여준다. 이 글에서는 터치가 통합된 조작 방식이 되는 시대에 어떻게 친근한 터치 경험을 만들 수 있을지에 대한 개인적인 의견을 공유합니다. 이것이 우리가 직면하게 될 문제입니다. 더 많은 아이디어와 표준화된 표준을 기대합니다.

읽어주셔서 감사합니다!

실크로드는 이 글을 읽고 나면 두 가지 점만 기억하면 된다는 점을 상기시켜 줍니다. 검지로 클릭할 때의 대상 크기는 44 x 44픽셀, 엄지 손가락은 72 x 72픽셀입니다. 따라서 인터페이스를 그릴 때 이 두 가지 차원에 주의하세요.

팁: ICON을 내보낼 때 ICON의 실제 크기가 32×32인 경우 50x50 PNG 투명 배경을 사용하여 ICON을 내보낼 수 있습니다. 핵심은 투명 영역을 추가하는 것입니다. 이렇게 하면 클릭하기가 더 쉬워집니다.