8장 작업하기: 동작과 명령 - 사용자를 끌어들이는 UX/UI의 비밀

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

 

지금까지 구조, 레이아웃, 페이지 요소 등을 살펴보았다면, 이번 장에서는 사용자가 할 일을 처리하기 위해 쓸 수 있는 동작과 명령 등을 고민해본다.

• 새로 만들기, 삭제하기
• 특정 값 입력하기
• 시작, 일시중지, 취소, 완료하기
• 복사하기, 잘라내기, 붙여넣기
• 드래그 앤 드롭

 

사용자는 익숙한 인터랙션 방식으로 작업하고 싶어한다는 점을 기억하자. 인터랙션에서 만큼은 독창성을 발휘하기보다 관습을 따르는 것이 좋다. 예를 들어, 대부분의 사용자는 기존의 경험을 기반으로 다른 앱에서도 동일한 패턴으로 메뉴를 이동하고 버튼을 클릭한다. 

만약 인터랙션이 사용자가 예상한대로 일어나지 않는다면, 인터페이스를 통해 '대상을 직접 조작하고 있다'는 사용자의 몰입이 깨지고 만다.

같은 맥락에서 인터랙션 패턴은 사람들의 행동을 그대로 모방하는 경우가 많다. 예를 들어, 드래그 앤 드롭 기능은 현실에서와 같이 원래 위치에서 타겟이 되는 대상을 집어 들었다가 목표지점에 내려놓는 방식을 따른다.

 

👉 마우스 인터랙션

호버 Hover

마우스 커서를 대상 위에 올리는 동작이다. (터치스크린에는 맞지 않다.)

호버했을 때만 기능이 나타나도록 한다면, 기본적으로 표시되는 화면을 더 간결하게 유지할 수 있게 할 수 있다. 각 아이템에서 2개 이상의 기능을 실행할 수 있을 때 주로 사용한다.

단, 사용자가 마우스를 올려보기 전까지 기능을 발견할 수 없어, 사용자가 기능을 찾기 어렵다는 단점이 있다. 시각 장애가 있거나 마우스를 쓰지 못하는 사용자를 위한 접근성 고려도 필요하다.

 

한번 클릭하기 Click

대상 위에 커서를 옮기고 마우스 왼쪽 버튼을 한번 누르는 동작이다.

Windows 또는 MacOS 같은 객체지향 운영체제에서는, 인터랙션을 원하는 대상을 한 번 클릭하면 대상이 선택된다. 이는 후속 인터랙션을 위한 준비작업으로도 볼 수 있다. 수 많은 아이템 중 바로 '이 아이템'을 대상으로 후속 작업을 진행하겠다는 것을 시스템에게 알려준 셈이다.

 

더블 클릭하기 Double-Click

대상 위에 커서를 옮기고 마우스 왼쪽 버튼을 빠르게 연속으로 두번 누르는 동작이다.

앱 아이콘을 더블클릭하면 앱을 실행할 수 있고, 디렉토리를 더블클릭하면 디렉토리를 열어 볼 수 있다. 문자를 더블 클릭하면 문자를 수정할 수 있기도 하다.

 

👉 키보드 인터랙션

단축키 Shortcut

특정 명령을 미리 맵핑해놓은 키를 누르는 동작이다. 

예를 들어 cmd 버튼이나 c 버튼 자체는 복사하는 것과 전혀 상관없지만 cmd + c를 누르면 미리 맵핑된 '복사하기'라는 명령이 실행된다. 단축키는 숙련된 사용자들에게 신속한 사용경험을 제공할 수 있다.

 

탭 이동 Tab Order

키보드 좌측 상단 즈음에 위치한 'tab'키를 누르는 동작이다.

탭 키를 이용해 사용자는 화면에서 선택할 수 있는 모든 옵션을 하나씩 이동할 수 있다. shift + tab 으로 이전 옵션으로 되돌아갈 수도 있다. 보이스오버기능을 이용해야하거나 키보드나 마우스 조작이 어려운 사용자에게 유용한 방식이다.

 

👉 모바일 인터랙션

모바일에서는 주로 터치 제스처를 사용하여, PC 처럼 복잡한 방식보다 개체에 하나씩 적용하는 단순한 방식이 선호된다.

 

탭 Tap

대상을 짧게 누르는 동작을 의미한다.

탭을 하면 앱을 실행하거나, 버튼을 클릭하거나, 이미지를 선택하는 등의 작업을 수행할 수 있다.

 

스와이프 Swipe

화면을 위아래로 밀어내거나, 좌우로 미는 동작을 의미한다.

스와이프를 하면 화면을 스크롤 하거나, 캐러셀에서 목록 이동하거나, 다른 탭으로 이동할 수 있다. 목록에서 한 아이템을 스와이프하면 해당 아이템 보관이나 삭제 기능이 나타나기도 한다.

 

핀치 Pinch

두 손가락을 화면에 댄 채로 간격을 넓혀서 화면을 확대하거나 좁혀서 화면을 축소하는 동작을 의미한다.

 

회전

가속도계 등 센서를 이용해 작동한다.

미디어를 볼 때 기기를 돌렸을 때 화면 방향이 자동으로 돌아가게 한다면, 사용자가 별도의 조작을 하지 않아도 미디어를 원하는 크기로 볼 수 있다.

 

흔들기

역시 가속도계 등 센서를 이용해 작동한다.

기기를 흔들어 QR코드나 결제 앱을 실행 시키는 것도 흔한 방식이다.

 

👉 어포던스 Affordance

Afford 는 '~할 여력이 있다.'는 뜻으로, 특정 작업을 실행할 수 있는 것처럼 보이는 디자인 특성을 의미한다. 

 

어포던스 예시

• 혼자만 다른 아이콘
• 본문 글자와 다른 스타일의 글자
• 호버했을 때 반응하는 것
• 그림자, 하이라이트 등으로 조작할 수 있어보이는 개체

 

잘못된 어포던스 예시

• 누를 수 있는 버튼 처럼 튀어나와있는데, 누를 수 없는(눌러도 반응 없는) 요소
• 누르면 홈페이지로 이동할 것 같지만 아무일도 일어나지 않는 로고 이미지
• 밑줄 효과가 있어서 링크 같아보이는데 아무 링크도 연결되지 않은 그냥 텍스트
• 초록 버튼인데 알고보니 삭제버튼
• 흐리게 회색 처리되었는데 알고보니 누를 수 있는 단어

(참고: https://www.linkedin.com/pulse/keep-obvious-pradeep-kumar)

 

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