1. 모바일 환경에서 주로 쓰는 인터페이스에서의 동작
- Tap(탭)
- 모바일 화면을 손가락으로 짧게 누른다.
- 마우스의 클릭에 해당한다.
- 개체를 선택하는 등 가장 많은 기능을 한다.
- swipe(스와이프)
- 화면을 눌러 상하좌우 방향으로 날리듯 긁는다.
- 스크롤에 해당한다. 하지만 모바일 환경에서는 더 다양한 기능을 하기도 한다.
- 목록의 이동이나 설정 등을 불러올 수 있다.
- pinch(핀치)
- 화면을 양 손가락으로 안쪽으로 움직여서 늘리거나 밖으로 움직여서 줄인다.
- 모바일에서 중요한 기능이다. 화면이 작기 때문에 크게 늘려서 볼 수 있다.
- 회전
- 모바일 기기를 가로나 새로로 다시 잡는다.
- 물론, 데스크탑으로는 불가능하다.
- 가속도계와 같은 센서가 모바일 디바이스에는 장착되어 있으므로 움직임을 읽어 화면 방향을 바꿔준다.
- 가로로 돌리면 동영상과 같은 컨텐츠를 즐기기 편하다.
- 흔들기
- 모바일 기기를 흔든다.
- 회전과 같이 모바일 기기에서만 가능하고, 역시 가속도계 등의 센서를 이용한다.
- 음악 플레이앱에서 다른 음악으로 전환하는 등의 기능을 할 수 있다.
2. 모든 환경에서 가능한 인터페이스 동작
- 버튼
- 인터페이스 바로 위로 배치하는 것이 좋다. 유저는 다른 동작이 필요 없이 바로 버튼을 볼 수 있어야 하기 때문이다.
- 가장 쉬운 동작에 해당한다.
- 메뉴바
- 데스크톱 환경에서 많이 사용된다.
- 전체 기능등을 묶어서 한 번에 보여주기 유리하다.
- 팝업 메뉴
- 클릭이나 탭에 따라 짧게 작은 알림을 띄울 수 있다.
- 길면 좋지 않다. 화면을 너무 가려서도 안된다. 사용에 불편할 수 있기 때문이다.
- 드롭다운 메뉴
- 콤보박스등을 누르면 옵션들이 나열된다.
- 동작을 실행하기 보다, 옵션을 바꾸는 것에 사용된다.
- 기능에 사용하지 않는 것이 좋다. 불편하다.
- 툴바
- 아이콘이나 짧은 텍스트를 나열하여 접근성을 높일 수 있다.
- 드롭다운이나 선택기능이 같이 있는 경우도 있다.
- 너무 긴 설명이나 아이콘이 적절히 없을 때는 다른 기능을 사용하는 것이 좋다.
- 링크
- 파란색으로 표시된 텍스트로, 누르면 다른 사이트로 이동하거나 새로운 탭이 열린다.
- 물론, 파란색이 아닐 수 도 있다. 디폴트는 파란색이다.
- 조작 패널
- 항상 화면에서 유저가 볼 수 있는 패널이다.
- 기능이 시작적으로 보이는 것 보다 편할 때 툴바 대신 사용할 수 있다.
- 호버 툴
- 각 항목에서 2개 이상의 기능을 실행 할 수 있을 때, 항목에 마우스를 올리면 버튼을 보여줘서 너무 많은 요소들이 화면에 나오는 경우를 줄일 수 있다.
- 터치 스크린에서는 사용이 쉽지않다.
- 기능이 숨겨져 있기 때문에 유저가 이곳에 호버 툴이 있다는 것을 알 수 있어야 한다.
- 드래그 앤 드롭
- 마우스나 탭으로 요소를 꾹 누른 상태로 다른 위치로 가져다 놓는 것을 말한다.
- 항목들을 이동하거나 복사, 붙여 넣기 등에 사용된다.
- 텍스트 명령
- CLI로 직접 명령어를 입력하여 기기에 명령을 내린다.
- 요즘에는 GUI로 시각적 표현이 되는 경우가 많기 때문에 잘 사용하지 않는다.
- 어포던스
- 버튼 등에 호버 툴이나 드래그 앤 드롭 등의 기능이 있다는 것을 표현하기 위해 쓰이는 기능을 말한다.
- 색을 다르게 한다던가, 호버 스타일 등으로 차별을 두어 표시할 수 있다.
'Coding > UX Insight' 카테고리의 다른 글
동작과 명령의 패턴 (0) | 2022.02.11 |
---|---|
목록 만들기 (0) | 2022.02.09 |
내비게이션 패턴 (0) | 2022.01.25 |
모바일 디자인의 패턴 (0) | 2022.01.24 |
모바일 인터페이스 (0) | 2022.01.21 |