티스토리 뷰

UI_UX Design/UI Design 개론

Ch01_3 모바일 환경의 이해

jsBae 2024. 10. 17. 10:09

1인 1스마트폰 시대

모바일 환경의  특징과 발전을 이해하고, UX디자인의 역할을 알아본다.

모바일 UX를 이해하려면
먼저 모바일의 전체적인 환경과 특징을 파악해야 함

모바일 환경의 특징

•하드웨어 구성과의 연관성

•사용자와 24시간 함께 하는 밀접성
•사용자와 상호작용하는 환경
•터치와 제스처, 오디오를 이용한 입력
•기기가 지닌 센서를 적용하는 환경
•휴대성이 극대화된 환경

•모바일 전용 운영체제 탑재

모바일은 DOD display only Device 환경에 의한 터치, 제스처, 각종 센서의 상호작용하는 UX가 중요한다.

종합적인 디자인

 

• 개인화(Personalization)

    • 개인화는 시스템이 사용자 데이터를 분석하여 자동으로 맞춤형 콘텐츠나 서비스를 제공하는 것을 의미한다. 사용자가 스스로 설정하지 않더라도, 시스템이 사용자의 행동, 관심사, 위치 정보 등을 바탕으로 자동으로 콘텐츠를 제공하는 방식이다.
      • 유튜브나 넷플릭스의 추천 알고리즘: 사용자가 시청한 콘텐츠를 기반으로 자동으로 추천 콘텐츠를 제공한다.
      • 쇼핑 앱에서 사용자의 선호에 맞는 상품 추천: 사용자가 이전에 검색하거나 구매한 이력을 바탕으로 자동으로 관련 상품을 추천한다.
    • 맞춤형 (cumstomization)과는 다르다.
    • 보안성이 높다.
    • 개인화(Personalization)

• 맞춤형(Customization)

맞춤형은 사용자가 직접 환경이나 설정을 변경하여 자신의 기기에 맞게 조정하는 것을 의미한다. 사용자가 자신의 필요나 선호에 따라 능동적으로 설정을 변경하여, UI나 기능을 맞출 수 있는 방식이다.

예시:

      • 테마 변경: 사용자가 모바일 기기의 배경색이나 테마를 스스로 설정하는 경우이다.
      • 알림 설정: 사용자가 특정 앱에서 어떤 알림을 받을지 직접 선택하고 설정하는 경우이다.

정리:

    • 개인화(Personalization): 시스템이 사용자 데이터를 기반으로 자동으로 콘텐츠나 서비스를 제공하는 방식이다.
    • 맞춤형(Customization): 사용자가 스스로 직접 설정을 변경하여 기기나 앱을 조정하는 방식이다.

• 편재성(Ubiquity)

  • 이동성, 공간의 제약을 해소(어디서든 정보의 검색이 용)

• 편의성(Convenience)

  • 정보 검색과 통신의 편리성을 제공

• 차별성(Distinction)

  • 개인화된 서비스 제공

• 즉시연결성(Instant Connectivity)

• 지역기반(Localization)- 주변의 유용한 정보 제공

* 맥락에 벗어나는 것을 싫어나고, 복잡한 선택 상활을 꺼린다.

모바일에서의 콘텐츠는 앱의 형태로 등장

앱이란, 알다시피 특정 모바일 운영체제에서 구도되는 어플리케이션, 즉 응용프로그램으로 용도에 따라 앱 스토어를 통해 직접 다운로드하고 설치하여 이용 할 수 있습니다.

누군가가 서비스는 훌륭해 그런데 이용하는데 익숙해지기 힘들더라...
인터랙션의 문제

인터랙션(interaction)이란

둘 이상의 물체나 대상이 서로 영향을 주고 교감을 하는 행동으로 양방향 통신이나 서비스를 가능하게 하는 디자인 요소입니다. _ 디바이스 반응


제스처(Gesture)

이중 제스처는 가장 기본적인 인터랙션이며 특히 모바일과 같이 직접 손으로 제스처하는 NUI 환경에서는 어떤 제스처로 UI를 조작하는지가 중요하다.

이처럼 제스처 방식은 UI 개발 과정에서 자동으로 입혀지는게 아니라서 UX 디지이너는 사용가의 동작-결과 간 기대와 해당 시점에서의 맥락을 고려해 신중하게 설계해야합니다.

 

기본적인 제스처의 종류와 기능

  • 탭(Tap) : 화면을 한 손가락으로 짧고 가볍게 두드리는 동작, 주로 아이템을 선택하고 실행하는 기본 제스처.
  • 더블 탭(Double tap) : 화면을 재빨리 두 번 두드리는 동작, 화면을 축소 또는 확대할 때 주로 쓰이고 현재의 화면에서 빠져나오는 역할. 더블탭은 한번 탭하여 실수로 기능이 실행되는 것을 방지하기 위해 비교적 중요도가 높은 기능에 배치
  • 프레스(Press) : 화면을 2초 이상 손가락으로 길게 누르는 동작. 터치 앤드 홀드. 메뉴나 팝업과 같은 화면의 컴포넌트를 나타나게 하거나 글씨를 확대 또는 복사하는 용도
  • 팬(Pan) : 손가락을 떼지 않고 길게 끄는 동작, 어느 방향으로든 움직일 수 있음. 화면의 오브젝트를 이동할 때, 선을 그릴 때, 다중 개체를 선택할 때, 확대한 이미지 화면을 상하좌우로 움직일 때 사용 
  • 드래그(Drag): 화면의 특정 오브젝트를 손가락으로 길게 끄는 동작, 아이템을 개별 이동할 때 사용. 오브젝트를 특정 영역으로 옮길 때는 드래그 앤드드롭이라고 표현.
  • 스와이프(Swipe) : 한 손가락으로 터치한 상태에서 일정 거리를 손가락으로 밀며 움직이는 동작. 화면을 좌우로 이동하며 탐색할 때 적합하며, 수직 방향으로 이동하는 것은 스크롤이라고도 함.
    - 예를 들어, 메시지 앱에서 채팅 목록을 스와이프하여 대화를 삭제하거나, 홈 화면에서 왼쪽으로 스와이프하여 다른 페이지로 이동할 수 있다.
  • 플릭(Flick) : 화면을 이동하거나 페이지를 넘길 때 사용, 손가락을 터치하면서 수평 또는 수직 방향으로 빠르게 스크롤하는 동작. 스와이프와 유사하지만 좀 더 빠른 움직임.
  • 핀치(Pinch): 두 손가락을 양방향으로 벌리거나 오므리는 동작, 화면 확대나 축소에 사용. 손가락이 움직이는 거리에 따라 확대나 축소 비율이 결정. 예시: 사진을 확대하거나 축소할 때 사용된다. 예를 들어, 지도 앱에서 핀치 제스처를 사용하면 지도를 확대하거나 축소할 수 있다.

이외에도 기기의 종류가 다양해짐에 따라 멑티 터치 제스처나, 드로잉 제스처도 많아져 사용자의 사용작용 경험을 더 풍푸하게 하고 있습니다.

모바일에서의 터치 영역

사용자가 손가락으로 쉽게 조작할 수 있도록 UI 요소를 적절한 크기와 위치에 배치하는 것을 의미한다. 터치 영역이 잘 설계되지 않으면 사용자가 불편함을 느끼거나 조작에 실수를 하게 된다. 모바일 화면은 작은 편이기 때문에, 사용자 손가락의 크기와 터치 정확도를 고려해 터치 영역을 적절하게 설정하는 것이 중요하다.

1. 터치 영역의 크기

  • 터치 정확도는 손가락 크기에 따라 달라지며, 대부분의 성인은 약 7-10mm 정도의 크기를 필요로 한다. 터치 영역이 너무 작으면 사용자가 잘못 누르거나 실수로 다른 요소를 누를 가능성이 크다.
  • 권장 터치 영역: 일반적으로 44 x 44 픽셀(약 9-10mm)이 적당한 크기로 권장되며, 이는 사용자가 한 번에 한 손가락으로 터치할 때 실수를 줄일 수 있는 크기이다.

예시:

  • 버튼: 모바일 앱의 버튼 크기가 너무 작으면 사용자가 실수로 잘못된 버튼을 누를 수 있다. 따라서, 버튼의 크기는 최소 44 x 44 픽셀 이상으로 설정해야 한다.
  • 링크: 텍스트 링크를 터치 영역으로 사용하는 경우에도, 각 링크 사이의 간격을 충분히 확보해 실수로 다른 링크를 누르는 것을 방지해야 한다.

2. 터치 영역의 간격

  • 터치 요소 간 간격은 서로 다른 요소들이 붙어 있지 않도록 충분한 공간을 확보해야 한다. 버튼 사이의 간격이 좁으면, 사용자가 실수로 다른 버튼을 누를 가능성이 크다.
  • 권장 간격: 각 터치 가능한 요소는 8-10 픽셀 이상의 간격을 유지하는 것이 좋다. 이렇게 해야 사용자가 터치할 때 오류 없이 원하는 요소를 정확하게 누를 수 있다.

예시:

  • 네비게이션 바: 모바일 앱 하단의 네비게이션 바에서 각 아이콘 사이에 충분한 간격이 필요하다. 간격이 너무 좁으면 사용자가 원하는 아이콘 대신 다른 아이콘을 터치할 수 있다.

3. 손가락과 화면의 상호작용

  • 엄지손가락은 주로 화면 하단과 중간 영역에서 자주 사용되며, 엄지손가락이 쉽게 닿는 위치에 중요한 UI 요소를 배치하는 것이 중요하다. 이를 **"엄지 영역(Thumb Zone)"**이라고 부르며, 편하게 접근 가능한 영역에 중요한 버튼이나 기능을 배치하면 사용자가 더 쉽게 조작할 수 있다.
Thumb Zone은 사용자가 한 손으로 기기를 잡고 조작할 때, 엄지손가락이 편안하게 닿을 수 있는 영역을 나타낸다.
보통 화면의 중앙 하단에서 중간 정도까지의 영역이 엄지손가락이 쉽게 닿는 범위이며, 화면의 상단이나 모서리 부분은 손이 닿기 어려운 영역이다

예시:

  • 하단 네비게이션: 주요 기능은 화면 하단에 배치하는 것이 이상적이다. 사용자는 화면 상단보다 하단에 더 쉽게 접근할 수 있으므로, 주로 사용하는 메뉴나 버튼은 하단에 배치하는 것이 편리하다.

4. 터치 반응성과 피드백

  • 즉각적인 피드백: 사용자가 터치했을 때 즉각적인 시각적 피드백(버튼이 눌리면서 색상이 변하거나, 클릭 효과)이 필요하다. 터치가 성공적으로 이루어졌다는 것을 사용자가 알 수 있도록 하여, 반응성이 느려지거나 사용자가 혼란을 겪는 것을 방지한다.

예시:

  • 버튼 색상 변화: 버튼을 터치하면 색상이 바뀌거나, 눌림 효과가 나타나야 한다. 이를 통해 사용자는 터치가 성공적으로 실행되었음을 직관적으로 알 수 있다.

728x90
반응형
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
반응형