brunch

You can make anything
by writing

C.S.Lewis

by 김준범 Jun 18. 2020

8가지 Mobile UX 법칙

모든 디자이너가 알아야 할 8가지 Mobile UX 법칙

8 mobile UX best practices every designer should consider




1. Keep main actions accessible

가능한한 많은 사람들이 앱을 사용하기 쉽게 만들기 위해서는 접근성이 고려되어야 한다. "모든 사람을 위한 디자인"을 염두해 두고 사람들이 모바일 디바이스를 잡는 여러가지 방식에 대해 고려해야 한다.

사람들이 핸드폰을 잡는 방식은 크게 세 가지가 있다. 주요 액션은 손가락이 닿기 쉬운 영역에 위치해야 한다.


2. Consider readability 

모바일 디바이스는 데스크탑에 비해 화면이 작기 때문에 많은 정보를 담는 것이 어려울 수 있다. 여러 요소를 가독성이 좋게 배치해야 것은 좋은 UX를 만들 수 있다.


3. Avoid the long-scroll problem

긴 스크롤은 사용자가 긴 블럭의 텍스트를 읽을 때 사용하는 좋은 방법이다. 그러나 어떤 경우에는,(예를 들면 사용자가 테스크를 완료해야 할 때) 스크롤을 많이 할 수록 사용자가 흥미를 잃거나 좌절하는 경우가 많다는 연구 결과가 있다.

카드에 '탭하여 확장하기' 기능을 적용하여 화면을 가능하면 짧게 만들거나 테스크를 여러 스크린으로 쪼개라.


4. Font type & size

서로 다른 폰트들이 모두 좋은 가독성을 제공하더라도 모두 다른 느낌을 전달할 수 있다. 폰트를 잘못 선택하면 디자인을 해치게 되므로 많은 디자이너들이 다른 것보다 폰트 선택에 많은 시간을 소요한다. 폰트에 관해 몇가지 중요한 팁이 있다.


Typeface(글꼴) : 모든 사이즈에서 가독성과 사용성을 확보할 수 있도록 다양한 크기와 무게에 어울리는 글꼴을 선택하라.


Font-Size : 읽을 수 있는 크기로 사용하라. Apple과 Google은 일반적인 거리에서 줌을 하지 않고 가독성을 유지할 수 있도록 11point 이상의 크기를 추천하고 있다.


Color Contrast : 폰트와 배경 간에 색상 차이를 확보할 수 있도록 대비를 유지하라. 60-30-10의 규칙에서 색상 사이의 벨런스를 유지할 수 있는 이상적인 색상을 참고할 수 있다.



5. Allow enough spacing and padding

화면이 작다고 해서 작은 텍스트를 쓰거나 여백을 좁게 써야 하는 것은 아니다. 텍스트나 다른 요소들이 겹쳐 보이게 하지 말아라. 행간이나 여백을 크게 줘서 가독성을 확보하라.

새로운 기술이 매일 나타나고 있다. 디자이너로써, 항상 새로운 기술을 따라가야 한다. 예를 들면, curved 디스플레에는 잘못된 터치를 방지하기 위해 좌우 여백을 더 줘야 한다. (최소한 16pt를 줘야 한다.)


6. Design finger-friendly buttons

터치 컨트롤을 작게 만들면 잘못된 터치를 유발하기 쉽다. 이러한 pain point를 방지하기 위해, 터치 컨트롤은 최소한 10~12mm(40px)크기로 제작하여 손가락으로 정확하게 터치할 수 있도록 하라.


7. Keep tab bars clear and clean

Tab  bar는 명확하고 깔끔하게 만들어라. 그리고 이름을 명확하게 지어라. 사용자가 아이콘만 보고 이해할 수 있다고 110%확신할 수 있을 때만 아이콘을 사용해라. 아이콘을 사용할 때는, 가능한한 간결하게 디자인하라.


8. Use familiar navigation bars

iOS의 tab bar나 Android의 drawer처럼 표준 navigation menu를 사용하라. 사용자는 각각의 플랫폼에서 정의된 패턴에 익숙하기 때문에, 표준 메뉴를 사용하면 더 직관적인 UI가 될 것이다. 각각의 플랫폼마다 다르게 디자인된 요소들을 따라야 한다.





원문 출처 : https://dribbble.com/stories/2020/05/12/8-mobile-design-tips?fbclid=IwAR0Rpwjou3QPy717gP8_oYueZsuTs43wRvH3LFVI3QDZB7vBRST9ATjWgqM





작가의 이전글 CTA버튼의 최적의 위치
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari