사용자의 아이콘 매핑을 방지하는 방법

 

이전에 모바일 앱을 설계한 적이 있다면 아이콘 버튼이 얼마나 유용하고 널리 사용되는지 알 수 있다. 그러나 여러분이 모르는 것은 사용자가 너무 가깝게 배치되었을 때 얼마나 자주 그들을 오해하느냐 하는 것이다.

아이콘 버튼이 일렬로 정렬되어 있을 때 흔히 나타나는 문제다. 사용자들은 그것들 사이에 패딩이 충분하지 않으면 쉽게 인접한 버튼을 칠 수 있다. 이 실수는 사용자들을 좌절시키고 업무 수행 속도를 늦출 수 있다.

 

 

 

 

1. 아이콘 사이에 추가 패딩 추가

 

사용자가 아이콘과 혼동하지 않도록 하려면 패딩을 추가하십시오. 아이콘 위에 손가락을 올려 패딩이 충분한지 확인하십시오.

인접한 아이콘이 주위에 간격과 함께 보이면 패딩이 충분하다. 손가락 가장자리가 인접한 아이콘에 닿거나 가까이 닿으면 패딩을 더 추가해야 한다.

 

 

 

 

2. 시각적 보조에 서클 패드 사용

 

아이콘 버튼을 두드리는 것을 일반 버튼과 비교한다면, 손가락이 위에 있을 때 일반 버튼의 가장자리가 눈에 띄게 유지된다. 아이콘 버튼을 누르면 가장자리가 사라진다.

 

버튼 가장자리가 보이는지 여부

 

사용자가 버튼 가장자리를 볼 수 없을 때, 그들이 목표물에 부딪혔는지 알기가 더 어렵다. 버튼 가장자리는 터치 정확도를 확인하기 위한 시각적 여유로 작용한다.

사용자에게 시각적 여유가 있는 효과적인 방법은 아이콘을 원형 패드에 배치하는 것이다. 사용자의 손가락이 위에 있을 때 바깥쪽 가장자리가 보이도록 원형 패드를 충분히 크게 만드십시오.

 

원형 패드가 보이도록 크게 디자인

 

서클 패드는 패딩이기 때문에 그 사이에 여분의 패딩을 추가하지 않아도 된다. 사실 원패드가 클수록 패딩이 덜 필요하다.

원형 패드의 크기와 모양은 사용자가 대상의 가장자리를 볼 수 있게 한다. 이것은 그들이 실수로 단추 사이의 공간을 혼동하는 것을 막는다. 원 패드가 없으면 대상 가장자리가 부족하여 버튼 사이의 공간에 손가락이 착지할 가능성이 증가한다.

 

원형 패드 사용의 좋은 예, 아이폰 컨트롤 센터

 

원형패드 사용의 좋은 예가 아이폰의 컨트롤 센터 화면이다. 각각의 아이콘 버튼은 원형 패드와 그 사이에 넉넉한 패딩이 있다. 단추가 너무 많아서, 패딩을 바르게 하는 것은 필수적이다.

원형 패드는 반드시 원 모양일 필요가 없다. 스퀴클 패드(사각형 + 원 모양)도 사용할 수 있다. 둘 다 받아들일 수 있고 또한 똑같이 일한다.

 

 

 

3. 손쉬운 탭

 

아이콘 버튼을 디자인할 때마다 손가락을 사용하여 패딩을 측정하십시오. 충분하지 않으면 인접 아이콘이 보일 때까지 추가하십시오. 사용자의 터치 정확도를 높이려면 원형 패드를 사용하십시오.

아이콘 주위의 패딩은 작업 성능에 영향을 미친다. 아이콘이 매력적으로 보이도록 작업하지 말고 쉽게 탭할 수 있도록 작업하십시오. 그러면 당신의 앱은 보기만 좋은 것이 아니라 사용해도 기분이 좋을 것이다.

 

 

 

---

 

출처 : https://uxmovement.com/mobile/how-to-prevent-users-from-mistapping-icons/