6장 모바일 인터페이스 - 사용자를 끌어들이는 UX/UI의 비밀

2022 우아한스터디 - UX 패턴파인더 스터디

 

한 모바일 경제 리포트에 따르면, 2025년 전세계 모바일 인터넷 사용 인구가 50억에 달할 것이라고 한다.(GSM Association, 2018) 현대의 사용자는 모바일 웹브라우저부터 네이티브 앱까지를 포괄한 다양한 모바일 경험을 하게된다.

이제 모바일 디자인은 플러스 알파가 아닌 기본이 되어가고 있다. 웹사이트를 단순히 압축해 만드는 것보다, 모바일 경험을 우선으로 설계한 다음, 많은 기능을 갖춘 웹을 경험하게 하는 'Mobile First' 방식으로 말이다.

 

 

모바일 디자인 특징

작은 화면 크기

사이드바, 긴 헤더메뉴, 기능이 없는 큰 이미지, 많은 링크를 넣을 만한 여유 공간이 없다. 따라서 디자인의 본질만 남기고 나머지를 발라내야 한다. 첫 화면에 정말 핵심적인 기능만 남기고 부가요소를 가능한 한 제거해야 한다. 

다양한 화면 너비

360px 과 640px 넓이 화면 둘 다에 맞는 디자인을 하기는 어렵다. 로고 그래픽이나 내비게이션 방식을 다르게 만드는 것이 방법을 시도해볼 수 있다.

터치 스크린

모바일웹과 앱은 대부분 터치스크린 기기로 이용한다. 동시에 키패드 기기를 이용한 유스케이스도 반드시 고려해야 한다. 터치 스크린 경험에 집중한 디자인을 하고 싶다면 컨텐츠의 양을 제한하고 레이아웃을 선형적으로 전개하자.

문자 입력하기

터치스크린이나 키패드로 문자를 입력하는 일은 번거로운 일이다. 자동완성 기능을 적극적으로 적용하고, 예상 가능한 입력 필드는 미리 채워두자.

위치 인식

모바일 기기는 사용자와 함께 움직이기 때문에 기기를 정확히 어디서 사용하는지 인식할 수 있다. 이를 활용해 위치정보와 지역기반 데이터를 묶어서 제공할 수 있다. 

물리적 환경의 제약

사용자의 모바일 경험은 언제 어디서든 일어날 수 있다. 따라서 회색 바탕에 회색으로 쓴 글씨는 야외의 강렬한 햇빛 아래에서는 보이지 않을 것이다. 소음이 큰 곳이라면 기기에서 나는 소리를 듣지 못할 것이고, 반대로 갑자기 나는 소리가 민폐가 되는 곳에서 사용할 수도 있다. 흔들리는 버스안에서 작은 글씨를 누르려는 경우, 옆 사람에게 밀려 버튼을 실수로 누르는 경우 등도 고려해야 한다.

집중력의 한계

사용자는 이동 중이거나 다른 일을 하면서 앱을 이용하고 있을 가능성이 높다. 그러므로 사용자가 산만하다고 가정하여, 태스크의 순서를 쉽게 구성하고 언제든지 재진입하기 쉽게 만들어야 한다. 설명 없이 디자인 자체로 이해될 수 있게 해야한다.

 

 

모바일 인터랙션 최적화

• 타이핑은 없애거나 최소한으로 줄인다.
• 원하는 정보에 도달하는데 필요한 탭 횟수를 줄인다.
• 불필요한 데이터로 다운로드 용량을 키우지 않는다.
• 부분적으로 로딩된 화면이라도 최대한 많이 보여줘야 한다.
• 가로스크롤 보다는 세로스크롤을 이용한다.
• 프로그레스 인디케이터로 체감 대기시간을 짧게 만든다.
• 터치툴은 특정 영역을 터치할 때만 표시해서 실수로 툴을 불러오는 일을 줄인다.
• 터치툴이 컨텐츠를 최대한 가리지 않도록 몇 초동안 사용하지 않거나 툴의 경계 밖을 탭하면 사라지게 처리한다.
• 클릭 가능한 UI 요소 주위에 많은 공간을 남겨둔다.
  • 안드로이드 기기: 48dp x 48dp (9mm)
  • iOS 기기: 44pt x 44pt

 

 

내용출처: 사용자를 끌어들이는 UX/UI의 비밀(제니퍼 티드웰, 찰스 브루어, 아인 발렌시아 저)