이러한 모바일 앱 디자인 모범 사례로 사용자를 즐겁게 하십시오.

게시 됨: 2022-03-11

모바일 앱은 연결된 경험의 모음입니다. 이러한 경험을 응집력 있고 마찰 없이 만드는 것이 디자이너의 임무입니다. 이것은 작은 작업이 아닙니다. UI 패턴과 구성 요소는 모든 화면에서 일관되게 보이고 작동해야 합니다. 상호 작용은 직관적이어야 하며 사용자가 원하는 결과와 일치해야 합니다. 전체 앱은 접근성 지침을 통합해야 합니다.

사용자 조사 및 테스트는 앱이 지속적인 성공을 달성하는 데 필요한 미묘한 통찰력을 발견하는 가장 좋은 방법입니다. 그러나 장기적으로 사용자를 즐겁게 하고 유지하는 모바일 앱을 설계하는 데 도움이 될 수 있는 널리 적용 가능한 모범 사례가 있습니다.

온보딩 프로세스 간소화 및 간소화

연구에 따르면 온보딩 자습서가 제공된 사용자는 자습서를 보지 않은 사용자에 비해 작업을 더 어렵게 인식하는 경향이 있습니다. 특정 상황에서 온보딩 화면과 도구 설명은 앱의 주요 기능을 소개하고 사용자가 일상의 일부로 앱에 참여하도록 권장하는 효과적인 방법이 될 수 있습니다. 그러나 사용자에게 3~4개 이상의 온보딩 화면을 검토하거나 미리 너무 많은 정보를 읽도록 요구하는 것은 성가실 수 있습니다. 사용자는 종종 스스로 해결하려고 합니다.

일반적으로 앱의 UI는 튜토리얼이 필요 없을 정도로 즉각적으로 친숙하고 직관적이어야 합니다. 그러나 온보딩 전략을 사용해야 하는 경우 자습서의 단계 수를 제한하고 가능한 경우 사용자가 이미 수행 중인 작업과 관련된 컨텍스트에서만 표시합니다. 또한 도구 설명을 앱의 가장 중요한 몇 가지 기능으로 제한하십시오.

앱 및 데스크탑 버전에서 동일한 기능 제공

모바일 웹 트래픽이 증가함에 따라 대부분의 사용자는 데스크톱에서와 동일한 작업을 모바일 장치에서 수행할 수 있기를 기대합니다. 한 연구에 따르면 대다수의 사용자는 여전히 데스크톱에서 복잡한 작업을 완료하는 것을 선호하지만 Pew 연구에 따르면 미국 성인의 15%가 스마트폰을 인터넷에 액세스하는 유일한 수단으로 사용합니다. 예를 들어, 모바일 뱅킹 앱의 모든 기능에 액세스할 수 없다는 것은 궁극적으로 사용자가 다른 곳에서 비즈니스를 수행하도록 유도하는 좌절의 원인이 될 수 있습니다.

기능 출시 기대치를 관리하는 것은 좋은 앱 리뷰와 나쁜 앱 리뷰의 차이일 수 있습니다. 전체 기능 세트를 구현하기 전에 앱을 시작해야 하는 경우 "곧 출시 예정" 화면을 게시하는 것 이상으로 공개적으로 액세스할 수 있는 기능 로드맵을 만들어 정확한 기대치를 설정하십시오.

알림을 현명하게 사용

알림은 사용자를 유지하기 위한 가장 강력한 도구 중 하나이며, 앱을 다시 입력하고 콘텐츠에 참여하기 위한 시기 적절한 넛지를 제공합니다. 그러나 푸시 알림이 제공하는 콘텐츠와 함께 푸시 알림의 빈도와 타이밍을 고려하는 것이 중요합니다. 너무 많은 핑이나 불규칙한 버스트를 수신하면 사용자가 알림을 완전히 비활성화할 수 있습니다.

알림을 표시할 때 상황에 맞게 유지하십시오. 예를 들어 사용자가 사진을 찍으려고 할 때 카메라에 액세스할 수 있는 권한을 요청합니다. 액세스하기 쉬운 세분화된 알림 설정을 추가하여 사용자가 필요에 맞게 알림을 조정할 수 있습니다. 또한 사용자가 앱과 앱이 제공하는 가치를 경험할 기회를 얻은 후 제품과 세 번째 또는 네 번째 상호 작용할 때까지 알림을 허용하도록 요청하지 마십시오.

주요 모바일 디자인 모범 사례 중 하나는 알림을 아껴서 신중하게 사용하여 사용자를 성가시게 하지 않는 것입니다. 구성 요소를 나타내는 8개의 사각형 그림입니다. 3개에는 알림을 나타내는 숫자가 있습니다. 하나는 숫자 3이고 다른 하나는 숫자 50이고 하나는 481입니다.
알림이 너무 많으면 사용자가 앱을 사용하지 않거나 더 심하게는 앱을 완전히 삭제할 수 있습니다.

웹 보기를 방해 없이 유지

웹 보기를 통해 개발자와 디자이너는 빠르고 저렴하게 반복하고 앱 업데이트 사이에 변경할 수 있습니다. 능숙하게 사용하면 사용자를 앱에 유지하면서 미리 결정된 페이지를 표시하여 개발 시간을 절약하고 UX를 단순화할 수 있습니다.

웹 보기는 사용자에게도 도움이 됩니다. 예를 들어 앱이 카메라와 같은 장치의 하드웨어에 쉽게 액세스할 수 있도록 합니다. 또한 많은 앱은 웹 보기를 사용하여 암호 관리자를 사용하여 로그인한 다음 앱으로 원활하게 다시 리디렉션할 수 있는 사용자를 인증합니다.

그러나 사용자는 기본 앱과 웹 보기 간의 컨텍스트 전환과 관련하여 마찰을 용납하지 않습니다. 작업을 완료하기 위해 앱과 브라우저 사이를 왔다갔다 해야 하는 것은 좋지 않은 사용자 경험입니다.

연결 불량에 대한 앱 최적화

열악한 연결 상태에서 가장 중요한 작업을 처리하도록 최적화되지 않은 앱은 수준 이하입니다. 예를 들어, 사용자가 여행 계획을 예약하거나 전자 상거래 결제를 하는 경우 작업을 저장한 다음 연결이 다시 복구되는 즉시 수행해야 합니다.

앱이 항상 연결을 필요로 하는 경우 끝없는 스피너를 제공하거나 더 나쁜 것은 아무것도 제공하지 말고 계속 진행하려면 연결이 필요하다고 사용자에게 알리십시오. 이중 청구를 두려워하는 사용자는 신뢰를 잃고 궁극적으로 앱을 포기할 것입니다.

한 손에는 지하철 기둥을, 다른 한 손에는 휴대폰을 들고 있는 남자의 사진. 가장 중요한 모바일 UX 모범 사례 중 하나는 인터넷 연결이 거의 또는 전혀 없는 상태에서도 중요한 기능이 계속 작동하도록 하는 것입니다.
평균적인 미국인은 하루에 5-6시간 동안 스마트폰을 사용하므로 때때로 연결이 끊어지는 것은 불가피합니다. 그들이 여전히 앱에서 중요한 기능을 수행할 수 있는지 확인하십시오. (케투 수비얀토)

패턴과 구성 요소의 일관성 유지

시각적 일관성은 디지털 제품의 필수 요소입니다. 시각적 지침을 구현하고 유지하지 못하면 전문성이 결여되고 사용자 간의 신뢰가 무너질 수 있습니다. 경험적 응집력도 똑같이 중요합니다. 예를 들어 버튼, 양식, 메뉴 및 대시보드와 같은 구성 요소 및 패턴은 스타일이 균일해야 할 뿐만 아니라 페이지 유형에 관계없이 앱 전체에서 일관되게 작동해야 합니다.

모바일 앱 디자이너는 보기 모음 이상을 만들고 있습니다. 당신은 UI 시스템의 디자이너입니다. 새 프로젝트를 시작할 때 일관성을 부여하려면 Apple의 휴먼 인터페이스 지침 및 Google의 머티리얼 디자인과 같은 다양한 디자인 시스템을 실험하여 사용자의 기기에 가장 적합한 것이 무엇인지 결정합니다.

UI의 노이즈 줄이기

상자 모양의 UI는 90년대 소프트웨어 디자인에서 계승되었습니다. 이 스타일은 시대에 뒤떨어져 보일 뿐만 아니라 너무 많은 선, 테두리 및 단색 모양을 특징으로 하여 과도한 시각적 노이즈를 생성하고 사용자가 화면의 정보를 처리하기 어렵게 만듭니다.

그러나 사용자가 페이지의 시각적 계층 구조를 이해하는 데 도움이 되는 몇 가지 지원 구조가 필요합니다. 마법의 공식은 없지만 적은 편에 속하고 선, 단색 배경 및 그림자와 같은 지원 구조를 아껴서 사용하십시오. 신중하게 사용하면 컴포지션 내에 충분한 공간이 있는 경우 패딩을 선처럼 명확하게 구분할 수 있습니다.

앱을 완전히 액세스 가능하게 만들기

뉴모피즘은 인터페이스 구성 요소가 미묘한 그림자, 그래디언트 오버레이 및 단색 색상을 사용하여 렌더링되는 디자인 트렌드입니다. 뉴모픽 구성 요소는 촉각적으로 보이고 상호 작용을 유도하기 위한 것이지만 단색 색상에 대한 의존도와 낮은 대비로 인해 명확하게 보기가 어려울 수 있습니다. 또한 뉴모피즘은 시각 장애가 있는 사용자가 거의 접근할 수 없기 때문에 포괄적인 디지털 제품에 대한 수요가 증가하는 추세와 상충됩니다.

또한 뉴모픽 구성 요소는 종종 코딩하기 어렵기 때문에 이러한 미학을 회사의 시각적 지침과 결합하기가 까다롭습니다. 뉴모픽 구성 요소를 사용하기로 결정했다면 적당히 사용하고 제품이 여전히 접근성 표준을 충족하는지 확인하십시오.

두 개의 알림 아이콘입니다. 선호되는 것은 파란색 배경에 흰색 종을 표시합니다. 선호하지 않는 것은 종과 배경 사이의 색상 대비가 거의 없습니다.
뉴모픽 디자인을 사용하는 것은 많은 상황에서 적절합니다. 그러나 뉴모피즘은 낮은 색상 대비도 사용하므로 접근성 문제가 발생할 수 있습니다.

지속적인 학습에 전념

모바일 앱 디자인 모범 사례를 준수하려면 디자인 사이트 및 기사 읽기, 다른 디자이너와 팁 및 요령 거래, 최신 도구 및 프로세스 최신 정보 유지 등의 지속적인 학습이 필요합니다. 이는 또한 새로운 장치와 플랫폼이 제기하는 문제에 직면하고 현재 사용자에게 진정으로 가장 좋은 것을 설계하기보다는 편안한 패턴과 관행에 의존할 때를 인식해야 함을 의미합니다.

편집자 주: 이 이야기에 디자인 통찰력을 제공한 Toptal 네트워크 회원 Damir Kotoric에게 감사드립니다.

Toptal 블로그에서 더 읽어보기:

  • 모바일 UX 디자인 원칙
  • 모바일을 위한 정보 아키텍처 원칙(인포그래픽 포함)
  • 모바일 인터페이스에 대한 경험적 원리
  • 모바일 UX 디자인 제약, 모범 사례 및 개발자와 협력