모바일 UX 디자인 원칙

좋은 디자인 좋은 디자인이죠? 사실이지만 해당 디자인의 매체에 따라 특수한 고려 사항이 적용됩니다. 데스크톱 컴퓨터에서 실행되도록 만든 앱과 같은 디자인 원칙은 일반적으로 가장 효과적인 모바일 UX 디자인 규칙과 약간 다릅니다.

"모바일 UX 디자인"과 같은 포괄적인 범주 내에서도 앱 디자인과 모바일 웹사이트 디자인 사이에는 차이점이 있습니다. 사용자가 앱을 다운로드할 때 웹사이트의 모바일 버전만 원하는 것은 아닙니다. 그들은 앱을 다운로드하는 데 소비한 시간(및 휴대전화에서 차지하는 공간)을 정당화할 수 있는 독특한 경험을 원합니다. 사용자는 가치가 없다고 생각하는 앱을 삭제하는 데 주저함이 없습니다. 다운로드한 앱의 75%가 한 번만 열립니다.

일반적으로 모바일 디자인은 간과할 수 없습니다. 전 세계적으로 더 많은 사람들이 데스크톱 컴퓨터보다 모바일 및 태블릿 장치에서 인터넷에 액세스합니다. 이러한 사용자를 무시하는 것은 더 이상 UX 디자이너가 정당화할 수 있는 일이 아닙니다. 모바일 디자이너는 디자인 프로세스의 모든 단계에서 모바일 UX 모범 사례를 고려하는 것이 중요합니다.

사용자를 최우선

이것은 말할 필요도 없지만 모든 디자인 프로젝트에서 사용자가 항상 최우선이어야 하며 사용자 요구는 모바일 장치에서 훨씬 더 중요하고 더 구체적입니다. 디자이너가 모바일 사용자의 요구를 충족시키지 않으면 해당 사용자는 다른 웹사이트, 앱 또는 방해 요소로 매우 빠르게 이동할 것입니다.

다음은 모바일 사용자의 특정 요구 사항을 충족하기 위해 디자이너가 수행할 수 있는 몇 가지 작업입니다.

직관적인 탐색

모바일 사이트 및 앱의 탐색은 데스크톱 사이트보다 직관적이어야 합니다. 사용자는 모바일 앱이나 웹사이트를 탐색하는 방법을 즉시 식별할 수 있어야 합니다. 이것은 인식 가능한 디자인 패턴(예: 햄버거 메뉴)과 인식 가능한 아이콘(홈 화면의 "홈" 아이콘, 메시징을 위한 채팅 풍선 등)을 통해 달성할 수 있습니다.

사용자가 탐색 방법에 대해 생각해야 하는 경우 웹 사이트에서 이탈하거나 앱을 닫고 더 간단한 솔루션을 찾을 가능성이 더 큽니다.

모든 장치에서 원활한 경험 만들기

사용자가 앱, 모바일 웹사이트 또는 데스크톱 웹사이트에서 콘텐츠에 액세스하는지 여부에 관계없이 사용 간에 원활하게 전환되어야 합니다. 디자인 요소는 서로 미러링되어야 합니다(예: 디자이너는 앱에 파란색을 사용하고 웹사이트에 빨간색을 사용해서는 안 됩니다).

원활한 경험은 웹사이트나 앱을 사용하는 사람들을 더 쉽게 만들 뿐만 아니라 브랜드에 대한 신뢰를 구축합니다.

사용자 목표에 집중

모바일 앱이나 웹사이트에 대한 개인의 목표는 전체 데스크톱 사이트에 대한 목표와 다를 수 있습니다. 예를 들어 레스토랑 앱에서 방문자는 메뉴 보기, 예약하기, 길 찾기 등 몇 가지만 하고 싶어할 것입니다. 대부분의 경우 휴대전화에서 전체 비즈니스 이력을 조회하지 않습니다. 이러한 종류의 콘텐츠는 메뉴나 하위 메뉴에 숨겨져 있을 수 있습니다.

사용자가 모바일 앱에서 실제로 무엇을 하고 싶어하는지 생각해 보세요. 디자이너가 종종 간과하는 한 가지 중요한 사항은 기본 작업에 로그인이 필요하다는 것입니다. 예를 들어 은행 앱은 앱에서 무엇이든 하기 위해 로그인을 요청하는 경우가 많습니다. 그러나 가장 가까운 ATM의 위치를 ​​찾는 것과 같은 작업은 사용자가 로그인할 필요가 없습니다. 이러한 기능에 쉽게 액세스할 수 있도록 하는 것은 UX를 개선하는 좋은 방법입니다.

개인화 허용

모바일 앱의 경우 개인화는 사용자 경험을 개선하는 데 중요합니다. 개인화는 또한 마케팅 목표를 달성하는 데 도움이 될 수 있습니다. 관련된 모든 이해 관계자에게 윈-윈입니다.

개인화는 사용자가 찾고 있는 콘텐츠로 이동하고 자신과 관련이 없는 콘텐츠에서 멀어지게 해야 합니다. 또한 사이트에서 방해 요소를 제거하고 구매 프로세스와 같은 구성 요소를 간소화하며 마케팅 메시지가 방문자가 실제로 원하는 것과 동기화되도록 할 수 있습니다.

그러나 너무 많은 개인화는 쉽게 빠질 수 있습니다. 개인화 수준은 사용자가 앱 및 회사에 대해 가지고 있는 신뢰 수준과 일치해야 합니다. 사람들은 웹사이트에 그들이 생각하고 있었던(또는 이야기하는) 광고를 표시했지만 검색조차 하지 않은 경우 얼마나 자주 당황하거나 이상하다고 느끼나요? 물론 이는 고급 광고 알고리즘의 예측 특성일 뿐이지만 이러한 수준의 개인화는 여전히 방문자를 불안하게 만들 수 있습니다.

항상 일을 더 쉽게 만드십시오

사람은 모바일 장치에서 웹사이트나 앱을 방문할 때 가능한 한 빨리 당면한 작업을 완료하기를 원합니다. 필요한 작업을 가능한 한 쉽게 완료하는 것은 디자이너에게 달려 있습니다. 각 작업에 절대적으로 중요하지 않은 모든 것을 제거하는 것은 좋은 출발점입니다. 모바일 인터페이스에서 필요한 작업을 더 간단하게 만드는 것도 핵심입니다.

예를 들어, 많은 전자 상거래 앱과 사이트는 이제 신용 카드 정보 입력을 위한 카메라 옵션을 제공합니다. 카드 번호를 입력하는 대신 쇼핑객이 신용 카드에 카메라를 대면 앱이 자동으로 번호를 읽습니다.

양식 필드에 입력 유형 지정과 같은 기타 사항(예: 이메일 주소가 예상 입력인 경우 기본 키보드 화면에 @ 기호 및 ".com" 팝업)

좋은 온보딩 관행

모바일 앱에는 좋은 온보딩이 필수적입니다. 그러나 "좋은"의 정의는 앱의 종류에 따라 크게 다릅니다. 할 일 목록이나 웹 브라우저와 같이 사용하기 쉬운 앱은 최소한의 온보딩이 필요합니다. 고유한 기능을 지적하는 몇 개의 스플래시 화면은 대부분의 사용자가 시작하는 데 필요합니다.

그러나 금융 서비스나 프로젝트 관리를 위한 앱과 같이 더 복잡한 앱에는 더 포괄적인 온보딩이 필요합니다.

확립된 제스처 사용

이것은 말할 필요도 없지만 모바일 디자이너는 사람들이 이미 장치에서 사용하는 데 익숙한 제스처를 고려해야 합니다. 확대/축소 또는 스와이프와 같은 기능은 대부분의 사용자에게 직관적이 되었으며 가능한 한 항상 사용해야 합니다.

디자이너가 기존 제스처에서 벗어나기로 결정한 경우 온보딩 프로세스 중이나 사용 사례가 처음 나타날 때 사용자에게 이러한 이탈을 알리는 것이 중요합니다.

모바일 레이아웃 디자인

모바일 레이아웃을 디자인하는 것은 다른 종류의 레이아웃을 디자인하는 것과 완전히 다르지는 않지만 디자이너가 고려해야 할 몇 가지 고려 사항이 있습니다.

가장 큰 고려 사항 중 하나는 터치스크린 대상의 크기입니다. 마우스나 트랙패드는 정확히 클릭할 수 있지만 손가락 끝은 훨씬 덜 정확합니다. 이상적으로 타겟은 모바일 장치 화면에서 7-10mm여야 합니다. 이렇게 하면 너무 조심스럽게 조준하지 않고도 손가락 끝으로 대상을 탭할 수 있습니다.

고려해야 할 관련 영역은 손 위치 컨트롤과 모바일 장치의 "엄지 영역"입니다. 한 손으로 휴대전화를 잡고 있을 때 엄지손가락으로 쉽게 액세스할 수 있는 휴대전화 화면 영역입니다. 대부분의 대화형 콘텐츠(특히 클릭 유도문안)를 이 영역에 배치하는 것은 긍정적인 사용자 경험을 만드는 데 매우 중요합니다.

모바일 디자인은 최대한 복잡하지 않도록 하는 것이 중요합니다. 미니멀리즘은 모바일 앱과 관련하여 디자이너의 친구입니다. 데스크톱 UI의 모든 것을 크기의 일부에 불과한 화면에 넣으려고 하면 디자인이 비좁아 보이고 압도적일 수 있습니다.

목표에 집중하고 탐색 옵션(메뉴 및 하위 메뉴가 도움이 될 수 있음)을 최소화하고 일반적으로 사용자가 필요한 작업을 수행하는 데 필수적이지 않은 요소를 제거하면 보다 능률적이고 사용자 친화적인 UI를 만들 수 있습니다.

화면 상의 혼란을 제거하는 동안 디자이너는 몇 가지 주요 디자인 고려 사항을 간과해서는 안 됩니다. 이러한 고려 사항 중 하나는 다양한 디자인 요소가 충분한 대비를 갖도록 하는 것입니다. 사람들은 종종 이상적이지 않은 조건에서 모바일 장치를 봅니다. 밝은 햇빛과 같은 것들은 화면의 요소를 보기 어렵게 만들 수 있지만 고대비는 요소를 더 잘 보이게 하는 데 도움이 됩니다.

타이포그래피는 또 다른 주요 고려 사항입니다. 모바일 디자인에서 명확한 타이포그래피 계층 구조를 갖는 것이 중요합니다. 제목과 헤더는 쉽게 알아볼 수 있어야 하며 일반적으로 글꼴은 더 ​​커야 합니다. 아무도 휴대 전화에서 큰 텍스트 블록을 읽으려고 화면을 곁눈질하는 것을 즐기지 않습니다. 명확한 머리글, 글머리 기호 또는 번호 매기기 목록, 짧은 단락은 모두 모바일 텍스트를 더 읽기 쉽게 만듭니다.

마지막 UI 고려 사항은 전환 및 애니메이션의 사용입니다. 애니메이션은 사용자가 방금 취한 조치가 무엇이든 했다는 중요한 신호가 될 수 있습니다. 애니메이션과 모바일 앱의 화면 또는 기능 간의 명확한 전환은 보다 만족스러운 사용자 경험을 만드는 피드백의 핵심입니다.

모바일 UX 모범 사례

위의 모든 사항은 모바일 앱과 웹사이트를 디자인할 때 중요한 고려 사항입니다. 그러나 최상의 사용자 경험을 보장하기 위해 따라야 할 추가적인 모바일 UX 모범 사례가 있습니다.

속도에 집중

광범위한 4G 데이터 가용성에도 불구하고 모바일 네트워크는 여전히 일반적으로 Wi-Fi 또는 광대역 서비스보다 느립니다. 그리고 세계의 많은 지역에서 4G가 존재하지 않으며 모바일 사용자는 3G 또는 느린 데이터 속도에 갇혀 있습니다.

즉, 모바일 웹사이트, 특히 모바일 앱은 빨라야 합니다. 앱이 로드될 때마다 다운로드할 필요가 없는 콘텐츠를 앱에 포함하면 앱이 더 빨라집니다. 필요할 때만 콘텐츠를 로드하는 것처럼(필요할 콘텐츠를 예상하고 미리 로드하면 앱이 사용자에게 더 빠르게 표시될 수 있음)

사용하지 않을 콘텐츠를 로드하지 않고 데이터를 사용하는 것과 사용자가 다음에 필요로 할 콘텐츠를 미리 로드하여 속도에 대한 인식을 만드는 것 사이의 균형을 맞추는 작업입니다.

속도에 대한 환상을 만들고 조급한 사용자를 달래는 한 가지 방법은 콘텐츠가 로드될 때까지 자리 표시자를 사용하는 것입니다. Facebook의 모바일 앱은 이 작업을 수행하며, 앱이 열리자 마자 세련된 와이어프레임 로드가 효과적으로 표시되어 다운로드할 때 로드되는 게시물을 위한 공간을 확보합니다. 이 전환 화면은 콘텐츠가 실제로 로드되기 전에 콘텐츠에 문제가 발생했음을 사용자에게 알립니다.

사용자에게 피드백 제공

사용자가 모바일 앱에서 작업을 수행할 때 피드백을 제공하는 것은 긍정적인 사용자 경험의 중요한 측면입니다. 앞서 언급했듯이 애니메이션과 전환은 피드백을 제공하는 한 가지 방법입니다.

촉각 및 오디오 피드백도 모바일 장치에서 가능합니다. 특정 작업이 수행될 때 터치 피드백을 제공하는 것은 모바일 게임 및 오류 메시지에서 특히 인기가 있습니다. 오디오 피드백은 모든 종류의 앱에서 널리 사용되는 기능입니다. 그럼에도 불구하고 많은 사람들이 전화기를 항상 무음 상태로 유지하기 때문에 디자이너는 오디오 피드백에 의존해서는 안 됩니다.

데이터 입력 최소화

또 다른 주요 모바일 UX 모범 사례는 필요한 데이터 입력량을 최소화하는 것입니다. 이것은 이전에 다루었지만 사람이 모바일 앱에 입력해야 하는 데이터가 많을수록 작업을 포기할 가능성이 높아집니다.

4개 또는 5개의 필드가 있는 양식을 작성하는 것은 데스크톱이나 랩톱 컴퓨터에서는 큰 문제가 아닐 수 있지만 모바일 장치에서는 이러한 4개 또는 5개의 필드만으로도 사용자를 외면하기에 충분할 수 있습니다. 목적. 모바일 장치에서 작성되는 양식의 모든 단일 필드가 필수인지 확인하십시오. 그렇지 않은 것을 제거하십시오.

이것은 사람들에게 처음부터 가입하는 대신 기존 계정(예: Facebook, Google 또는 Twitter 계정) 중 하나를 사용할 수 있는 옵션을 제공하면 전환을 크게 향상시킬 수 있는 영역 중 하나입니다. 사용자가 새 등록 양식을 작성하지 않고 클릭만 하면 액세스 권한이 부여되는 경우 그렇게 할 가능성이 더 큽니다. 이러한 보조 앱에만 의존하지 마십시오. 일부 사용자는 여전히 자신의 계정을 연결하는 것을 신뢰하지 않으며 양식을 작성하는 데 시간이 걸립니다.

결론

이러한 확립된 모바일 UX 디자인 원칙을 따르면 모바일 사이트를 방문하거나 모바일 앱을 사용하는 사람들에게 더 나은 전반적인 사용자 경험을 제공할 것입니다. 디자이너는 사용자 친화적이고 직관적이거나 간소화된 앱이나 사이트를 선택하기 전에 사람들의 관심을 끌 시간이 몇 초밖에 없습니다.

멋진 모바일 디자인이 점점 보편화되고 있으며 사용자가 모바일 앱에서 기대하는 바에 대한 기준이 더욱 높아졌습니다. 디자이너는 더 이상 모바일 디자인을 나중에 생각하는 것으로 볼 수 없으며 대신 다른 형식의 디자인에 하는 것처럼 많은 시간, 고려 사항 및 리소스를 투자해야 합니다.

Toptal Design 블로그에 대한 추가 정보:

• 모바일 UX 디자인 - 모범 사례, 제약 조건 및 개발자와의 작업
• 이러한 모바일 앱 온보딩 영감으로 사용자 유지
• 모바일 사용성을 위한 기본 가이드
• 모바일 인터페이스에 대한 경험적 원리
• 모바일 경험을 위한 전자상거래 UX