디자이너가 지켜야할 8가지 모바일 UX 법칙

매일 점점 더 많은 제품이 모바일 우선으로 설계되고 있습니다. 그 이유는 간단합니다. 우리는 거의 모든 곳에서 휴대폰을 휴대할 수 있는 세상에 살고 있습니다. 이것이 항상 일반적인 것은 아닙니다.

오늘날 디자이너들은 일반적으로 모니터가 표시하는 수많은 정보를 훨씬 더 작은 화면에 맞추는 데 어려움을 겪고 있습니다. 또한 설계자는 시장에 지속적으로 등장하는 다양한 모바일 장치 구조(예: 곡면 화면, 노치 디스플레이 등)를 따라잡아야 합니다.

 

그렇다고 해서 모바일용 디자인이 불가능하다는 생각에 속지 마십시오. 조사를 했으니 그럴 필요가 없습니다. 내 경험과 연구를 통해 모바일 디자인의 다음 큰 프로젝트에 도움이 되는 간단한 요령과 기술 목록을 만들었습니다. 바로 시작하겠습니다.

1. 기본 작업에 액세스할 수 있도록 유지
접근성은 가능한 한 많은 사람들이 제품을 사용할 수 있도록 만드는 것입니다. "모든 사람을 위한 디자인"을 염두에 두고 사람들이 문자 그대로 모바일 장치를 잡는 다양한 방법을 고려하는 것이 중요합니다 .

사람들이 휴대전화를 물리적으로 잡는 방법에는 크게 세 가지가 있습니다(아래 시각화 참조). 목표는 기본 작업을 설계하여 이러한 영역 내에 위치하도록 하는 것입니다.

2. 가독성을 고려하라
모바일 장치는 데스크톱에 비해 화면이 작기 때문에 작은 모바일 UI에 많은 정보를 맞추는 것이 어려울 수 있습니다. 좋은 가독성은 디자인의 다른 요소와 결합되어 훌륭한 UX를 제공합니다.

3. 긴 스크롤 문제를 피하십시오
긴 스크롤은 긴 텍스트 블록을 읽는 동안 사용자가 집중할 수 있는 좋은 방법입니다. 그러나 다른 경우(예: 사용자에게 작업을 완료하라는 메시지가 표시되는 경우) 연구에 따르면 스크롤을 많이 할수록 흥미를 잃거나 좌절하는 경향이 있습니다.

'탭하여 확장' 기능이 있는 카드를 사용하거나 작업을 화면으로 나누어 화면을 가능한 한 짧게 유지하십시오.

4. 글꼴 유형 및 크기
서로 다른 글꼴은 서로 다른 감정을 불러일으키는 동시에 쉽게 읽을 수 있습니다. 글꼴을 잘못 선택하면 디자인이 망가질 수 있기 때문에 대부분의 디자이너는 다른 것보다 올바른 서체를 선택하는 데 많은 시간을 할애합니다. 다음은 글꼴과 관련하여 염두에 두어야 할 몇 가지 중요한 팁입니다.

서체: 모든 크기에서 가독성과 유용성을 유지하기 위해 다양한 크기와 두께에서 잘 작동하는 서체를 선택하십시오.
글꼴 크기: 읽기 쉬운 글꼴 크기를 사용합니다. Apple과 Google은 사용자가 확대/축소 없이 일반적인 시청 거리에서 읽을 수 있도록 최소 ~11포인트를 권장합니다.
색상 대비: 대비 체커를 사용하여 글꼴과 배경 간의 색상 문제를 방지합니다. 또한 색상 간의 균형에 도달하기 위한 이상적인 비율을 나타내는 60-30-10 규칙을 사용합니다.
영화 앱 - 와이어프레임 앱 클린 컨셉 iOS 최소 UI UX 와이어프레임 와이어프레임
영화 앱 - 와이어프레임
도르 잔 불라지
1⃣ 와이어프레임이 당신을 더 나은 디자이너로 만들어줄까요?⁣⁣ ⁣⁣ 와이어프레임은 창작 과정에서 필수적인 단계입니다. 우리는 항상 사용자가 사이트를 통해 이동할 수 있는 방법에 대한 느낌을 얻기 위해 웹 사이트 개념과 모바일 앱 화면을 스케치합니다.

5. 충분한 간격과 여백을 허용합니다.
화면이 작다고 해서 반드시 더 작은 텍스트나 더 적은 공간을 사용해야 한다는 의미는 아닙니다. 텍스트나 다른 요소가 겹치지 않도록 합니다. 줄 높이 또는 요소 간격을 늘려 가독성을 높입니다.

또한 매일 새로운 기술이 등장하고 있으며 디자이너로서 최신 정보를 유지하는 것이 중요합니다. 예를 들어, 곡선형 전화 디스플레이는 원치 않는 터치를 피하기 위해 몇 픽셀씩 패딩을 증가시키는 것을 의미합니다(~16pt는 장치에 권장되는 최소 패딩).

6. 손가락에 친숙한 버튼 디자인
작은 터치 컨트롤 때문에 우발적인 탭이 자주 발생합니다. 이 문제점을 피하려면 손가락으로 정확하게 탭할 수 있도록 최소 10-12mm(40px) 크기의 컨트롤을 만드십시오.

이 팁이 얼마나 중요한지 이해하는 데 도움이 되도록 모바일 환경에서 볼 수 있는 광고에 대해 생각해 보십시오. 광고의 경우 버튼이 매우 작고 눈에 잘 띄지 않으며 도달하기가 매우 어렵습니다. 물론 이러한 CTA의 목적은 우리 모두가 싫어하는 우발적인 터치를 방지하는 것입니다.




7. 탭 바를 깨끗하고 깨끗하게 유지하십시오.
탭 표시줄은 모든 앱의 일부이므로 디자인할 때 매우 주의해야 합니다. 지금은 창의력을 발휘할 때가 아닙니다 .

명확하고 깔끔한 탭 표시줄을 디자인하고 더 나은 사용자 경험을 위해 가능하면 모든 탭에 이름을 지정하십시오. 사용자가 아이콘의 목적을 쉽게 인식하고 이해할 것이라고 110% 확신하는 경우에만 아이콘을 사용하십시오. 아이콘이 요구 사항인 경우 해당 구조에는 가능한 한 적은 디자인이 포함되어야 합니다.




8. 친숙한 내비게이션 바 사용
iOS 탭 표시줄 또는 Android 탐색 창과 같은 탐색 메뉴에 표준 시퀀스를 사용해 보십시오. 바퀴를 재발명하려고 하지 마십시오. 사용자는 이러한 일반적인 패턴에 익숙하므로 앱이 사용자에게 더 직관적일 것입니다. 이는 이러한 플랫폼에서 다르게 설계된 다른 요소에도 적용됩니다.