사용자 친화적인 모바일 애플리케이션 디자인을 심리학, 분석 및 HCI를 기반으로 어떻게 만들 수 있을까요? Friflex의 디자인 리드가 기초를 소개합니다.

모바일 트래픽 양은 매년 증가하고 있습니다. DataReportal 보고서에 따르면, 러시아의 인터넷 사용자 중 88.1%가 모바일 장치를 통해 네트워크에 접속합니다. 모바일 애플리케이션의 디자인 과정은 사이트의 모바일 버전을 만드는 것과 유사하지만, 더 진보된 기능을 갖추고 있습니다. 하지만 화면 크기가 작아진 것 외에도 다양한 UX 디자인의 세부 사항을 고려하여 편리한 디지털 제품을 만들 수 있습니다.

UX 디자인이란

UX는 사용자 경험(User Experience)을 의미합니다. 디지털 제품과 상호작용하는 맥락에서, 이는 특정 인터페이스를 사용할 때 사용자가 받는 경험을 의미합니다: 목표를 달성하는지 여부, 작업을 수행하는 데 걸리는 시간, 그리고 특정 작업을 해결하는 데 얼마나 쉬운지 등이 포함됩니다.

만약 시각적 매력이 그래픽 디자인의 기본이라면(색상 조합, 글꼴, 디지털 제품 포장), UX 디자인에서는 사용자 경험을 관리하는 것이 중요합니다. 고객의 문제, 관심사, 콘텐츠 소비 방법 및 사용자 경로를 탐구함으로써 좋은 사용자 경험은 디지털 시스템에 대한 신뢰와 인터페이스와의 상호작용에서 논리적인 연쇄를 바탕으로 구축됩니다. UX 디자인은 심리학, 분석, 디자인 및 HCI (인간-컴퓨터 상호작용) 원칙이 교차하는 지점에서 탄생하며, 이를 통해 디지털 시스템과 상호작용할 때 사람이 가장 긍정적인 감정을 받을 수 있도록 사용자 경험을 설계할 수 있습니다.

개발

UX의 개발 단계에서는 등록부터 목표 동작 완료까지의 전체 사용자 여정을 예측하고 사용자 여정을 작성합니다. 새로운 디자인 뿐만 아니라 독특한 사용 모델을 갖춘 제품을 만들기 위해 다음 구성 요소에 작업할 수 있습니다.

인증 프로세스

사용자들은 서로 다른 애플리케이션을 위해 새 비밀번호를 계속 기억해야 하는 것을 싫어합니다. 그러므로 인증 프로세스가 더 빠르고 쉬울수록, 앱이 정기적으로 사용될 가능성이 높아집니다. WhatsApp의 모바일에서 데스크톱으로 전환할 때 QR 코드를 사용하는 것은 매우 간단해졌습니다.

일회용 비밀번호를 사용하는 것도 삶을 더 쉽게 만들어주며, 이중 인증 형식으로 보안을 강화합니다. 한편 생체 인식 비밀번호와 결제 시스템은 QR 코드와 일회용 비밀번호에 비해 프로세스를 더 빠르게 진행시킵니다.

사용자 여정 맵을 따라가면서 실제 콘텐츠를 기반으로 디자인을 시작하세요. 그 반대로 하면 로렘 입숨(가짜 공백 문자로 채워진 텍스트)과 햄버거 메뉴 안의 숨겨진 메뉴가 너무 많아질 수 있습니다.

내비게이션 모델

모바일 및 웹 인터페이스에서 사용되는 여러 가지 일반적인 내비게이션 유형이 있습니다: 햄버거 메뉴, 탭 바, 케밥 메뉴 등이 있습니다.

오늘 가장 인기 있는 솔루션 중 하나는 햄버거 메뉴입니다.

이것은 숨겨진 네비게이션을 나타냅니다. 이 유형의 장점 중 하나는 적은 공간을 차지하며 페이지를 채우는 데 여유가 있다는 점입니다. 단점으로는 필요한 정보를 찾는 데 시간이 더 걸린다는 점, 공개도가 낮다는 점, 시인성의 결여 및 상호 작용 비용이 높아진다는 점이 있습니다. 햄버거 형태의 숨겨진 기능은 사용성을 저하시킵니다. Facebook, YouTube, Spotify는 탭바를 선호하여 이 유형을 오래 전부터 포기했습니다.

사용자들은 화면에 표시되지 않으면 애플리케이션에 존재하지 않는다고 생각합니다. 사용자 경험에 해를 끼치지 않으면서 앱 인터페이스에서 햄버거 메뉴가 작동하려면 추가 네비게이션을 사용하여 주요 기능을 강조하고 나머지를 숨기세요. CTA(호출 대상 구간) 버튼을 사용하여 열기 비율을 높이세요.

Kebab 메뉴는 햄버거와 동일한 공개 원칙에 따라 작동합니다. 이는 숨겨진 네비게이션 유형을 의미합니다.

이 모델은 메일함 애플리케이션에서 자주 사용됩니다. 이는 모바일 콘텐츠의 정보 구조를 구성하는 데 도움이 되지만 인터페이스와의 상호 작용을 간소화하는 데 도움이 되지는 않습니다. 케밥 메뉴를 사용할 때 가장 흔한 실수는 검색 기능을 숨기는 것입니다. 검색 기능은 핵심적인 탐색 옵션입니다. 화면 상단에 배치하거나 검색 모드에 대한 두드러진 링크를 추가하는 것이 더 좋습니다.

개방형 네비게이션의 한 예로 탭 바가 있습니다. 이는 햄버거 메뉴에 대한 좋은 대체 옵션입니다.

웹 버전 모바일 앱과 달리 별도로 구분된 정보 블록을 화면 하단에 배치하는 것이 가장 좋습니다. 이 구조는 사용자의 여정을 간소화하는 데 도움이 되며, 하단 탭 바는 엄지 손가락으로 쉽게 접근할 수 있습니다. 하단 바에 포함할 수 있는 항목이 상당히 많을 경우 목록을 4~5개의 주요 항목으로 줄이고 나머지는 모달이나 팝업 창에 배치하는 것이 좋습니다. "더 보기" 버튼을 사용하면 확장된 옵션 집합을 유지하고 메뉴를 자르지 않을 수 있습니다.

제스처

왼쪽으로 스와이프하거나 오른쪽으로 스와이프하는 것이 Tinder 앱의 상징이 되었습니다. 제스처를 사용한 평소와는 다른 이동 방식은 사용자의 경로를 최대한 간단하게 만들어줍니다. 표준 앞으로/뒤로 버튼을 비활성화하고 직관적인 제스처를 추가함으로써 정보 표면을 늘리고 한 페이지에 더 많은 콘텐츠를 추가할 수 있습니다. Tinder는 사용자 인터페이스를 신중하면서 직관적이고 사용자 친화적으로 만드는 방법의 좋은 예가 되었습니다.

피드백

메뉴 내 별도의 "문의하기" 버튼을 통해 애플리케이션 운영에 대한 통찰력을 수집하고 부정적인 리뷰 및 등급으로부터 보호받을 수 있습니다. 사용자는 동일한 창을 떠나지 않고 문제를 신고할 수 있습니다.

인터페이스 디자인 팁

간소화

모바일 앱은 사용하기 쉬워야 합니다.

시나리오를 디자인할 때 선택 분기를 최소화해야 합니다. 사용자에게 가능한 옵션만을 제시하고 관련성 있는 옵션만을 제공하는 것이 중요합니다. 인터페이스가 너무 복잡할수록 결정을 내리고 목표 동작을 수행하는 데 더 많은 시간이 소요됩니다.

친숙한 아이콘 통일화

메시지를 보내거나 메인 페이지로 이동하는 것과 같은 애플리케이션의 기본적인 동작을 위해 이미 많은 다른 인터페이스에서 사용되는 통일된 아이콘이 있습니다. 익숙한 디자인 패턴을 사용하여 사용자의 새로운 디지턈 시스템으로의 전환을 용이하게 하세요.

문제 해결 과정 시각화

제이가르닉 효과는 인간 뇌가 중단된, 미완료된 동작을 더 잘 기억한다는 것을 입증합니다. 시각적인 표시자를 활용하여 사용자가 미해결 작업을 완료하도록 동기부여할 수 있습니다: 게임에서는 다음 레벨로 이동하고, 소매 애플리케이션에서는 구매를 완료하도록 유도할 수 있습니다.

UX 디자이너의 작업 도구

UX 디자인은 디자인 생각을 많은 방법으로 보완합니다. 아이디어 생성 과정부터 프로토타이핑 및 분할 테스트까지 UX 디자이너는 제품에 적극적으로 참여합니다. Miro 대화식 화이트보드 플랫폼은 시각적 지도와 다이어그램을 사용하여 계획, 조정 및 논의에 좋습니다.

Miro를 사용하면 마인드 맵, CJM, 사용자 스토리, 스프린트 등을 만들 수 있습니다. Miro의 좋은 대안은 Creative Canvas입니다.

인터페이스를 그릴 때는 주로 Figma나 Sketch가 사용됩니다.

Figma는 특히 모바일 앱 디자인에서 인기가 많습니다. 프로젝트에 30개의 화면이 포함되어 있더라도, 이 프로그램을 사용하면 그 화면들을 한 곳에 모아 놓고 쉽게 전환할 수 있습니다.

피그마의 장점 중 몇 가지는 다음과 같습니다:

• 피그마는 다중 플랫폼 솔루션이므로 특정 OS에 종속되지 않음;
• 일부 제한이 있는 무료 버전이 있음;
• 실시간으로 레이아웃 및 변경 기록을 자동 저장;
• 명령 라이브러리 및 구성 요소와 편리한 작업;
• 대화식 프로토타입 (프로젝트를 링크를 통해 클라이언트에게 보여줄 수 있음);
• 내장된 준비된 구글 폰트.

그러나 프로그램의 단점도 있습니다.

인터넷 연결이 필요합니다. 피그마는 오프라인으로 작업하는 기능은 없습니다: 네트워크 연결이 복구되면 문서가 업데이트됩니다. 그러나 오프라인으로 작업 중인 동안 다른 참가자들은 문서의 변경 사항을 보지 못할 것입니다.

특정 기능이 누락되면 플러그인을 추가하거나 스크립트를 생성할 수 없습니다.

사용자 설정 가능한 단축키. Figma는 Adobe 제품보다 훨씬 작은 단축키 세트를 가지고 있습니다.

Mac 사용자는 Figma 대신 Sketch를 사용하는 것을 고려할 수 있습니다.

Sketch의 장점:

• 다양한 플러그인과 컴포넌트 라이브러리가 있습니다.
• 코드 및 프리셋을 쉽게 내보낼 수 있습니다.

Sketch의 단점:

• 상호작용 프로토타입을 생성할 수 없습니다 (인터페이스 애니메이션을 위해서는 Principle 도구가 필요합니다).
• 대규모 파일 작업 시 속도가 느려집니다 (화면이 많을수록 파일이 무겁습니다).
• 클라우드 협업 기능이 없습니다.

디자인 트렌드는 매우 빠르게 변합니다. 특히 그래픽 디자인은 변화의 영향을 많이 받습니다: 작년 초에는 글래스모피즘이 관련이 있었고, 그 다음으로는 비대칭이었고, 그리고 네온 및 퓨처리즘이었습니다. 시각 요소의 짧은 트렌드는 새로움 효과를 만들어내고 브랜드가 먼지를 털 수 있도록 돕습니다. 시대의 요구에 대응합니다.

UX 디자인에서는, 트렌드는 사용자 행동 습관을 밝혀내는 연구를 기반으로 하기 때문에 보다 긴 수명 주기를 가지고 있습니다. UX 작업을 시작할 때, 입증된 모델에 기반을 두는 것이 좋습니다. 더 간단하고 직관적인 모바일 인터페이스일수록 비즈니스 결과를 더 좋게 달성할 수 있음을 기억해 주세요.

저희 Friflex는 고객들이 저희 애플리케이션을 사용하는 동안 즐거운 시간을 보낼 수 있도록 목표로 합니다. 우리의 전문성을 통해 매우 사용자 친화적인 서비스를 디자인할 수 있으며, 앱을 만들거나 기존 앱을 최적화하는 데 도움을 드릴 수 있습니다.