UI 상호작용 최적화를 위한 7가지 규칙

‘인터랙션 디자인’은 UX 디자인 프로세스와 밀접하게 연결된 새로운 유행어 중 하나이다. 현재에는 인터페이스 요소가 두 정적인 상태의 사이를 즉시 전환하는 것으로는 이제는 충분하지 않다. 오늘날 ‘슬라이드(Slide)’, ‘바운스(Bounce)’ 및 ‘리바운드(Rebound)’와 같은 단어가 잘 만들어진 사용자 인터페이스 작동 방식에 적용돼왔다.

그러나 상호작용의 세계에서 – 값 비싼 시계의 경우 – ‘ 팬시(Fancy) ‘가 반드시 ‘우아함(Elegant)’을 의미하는 것은 아니다. 아래의 멋진 시계의 복잡성에 대해 궁금할 수 있지만 실제로 착용하고 싶은 사람은 거의 없을 것이다. 자연스러운 우아함은 인터페이스 디자인의 장식보다 단연 압승이다.

우리가 창의적이라면 웹/앱을 더욱 현대적이고 매력적으로 보이게 하기 위해 멋진 상호작용을 만들고 싶은 유혹을 받기 쉽다. 물론 우리는 이 접근 방식이 전체 사용자 경험을 망칠 수 있는 가장 확실한 방법의 하나라는 것 또한 알고 있다.

따라서 사용자가 거의 알아차리지 못할 정도로 부드럽고 눈에 잘 띄는 애니메이션에 집중하는 것이 중요하다는 것을 알게 된다. 애니메이션이 스포트라이트에서 벗어나 대신 사용자가 하려는 작업을 지원할 때이다.

그렇다면 그게 왜 중요할까?

Apple은 왜 보통 빨리 재활용 쓰레기통에 버려지는 포장에 많은 시간과 돈을 소비하는가? 고급 자동차 회사가 문이 닫히는 소리를 조정하는 이유는 무엇인가?

사소하고 중요하지 않은 세부 사항은 훌륭한 디자인에 불균형적인 영향을 미칠 수 있고 UX를 “좋은” 에서 “멋진”으로 끌어올릴 수 있기 때문이다.

아름답게 디자인된 ‘마이크로인터랙션’으로 웹/앱을 풍부하게 만들면 더 유용할 뿐만 아니라 사용자에게 긍정적인 감정을 불러일으킬 수 있다(예 : Apple 상자 열기). 그러한 감정을 경험한다는 것은 더 많은 도파민이 소비된다는 것을 의미하며 이는 말 그대로 웹사이트/애플리케이션에 더 중독되는 데 도움이 된다.

그렇다면 ‘마이크로인터랙션(Microinteraction)’을 정의하는 것은 무엇인가?

사용자가 입력 (예 : 클릭, 드래그, 입력)을 하면 웹/앱이 반응한다. 이것이 바로 상호작용이다. 이것은 사용자가 귀하의 웹/앱과 통신하는 방법이므로 대화의 일부이다. 사용자가 웹/앱에서 행동하는 방식의 흐름을 설계할 때 항상 사용할 수 있는 몇 가지 다른 유형의 상호작용이 있다.

탐색 상호 작용(Navigation interactions) :
사용자가 완전히 새로운 페이지(page) / 상태(state)에 도달하는 경우
모달 상호 작용(Modal interactions) :
웹/앱의 현재 상태가 정지되고 그 위에 일부 임시 상태가 표시되는 경우(예 : “라이트 박스“갤러리 또는 확인 대화 상자).
마이크로인터랙션(Microinteractions) :
페이지 내의 단일 요소만 사용자 입력에 반응하도록 하려는 경우 (예를 들어 드롭 다운 메뉴를 표시하거나 제품에 대한 자세한 정보를 표시).

이러한 마이크로인터랙션(Microinteraction)을 최적화시키는 규칙은 무엇일까?

웹/앱에서 사용자에게 깊은 인상을 주기 위해 함께 작동하는 인터랙티브 인터페이스 요소가 콘서트처럼 느껴져야 한다. 우아함은 그러한 인상을 주는 핵심 기준이다. 순수하게 기술적인 용어로 우아함을 정의하는 것은 매우 어렵지만 우아한 상호 작용을 만드는 데 도움이 되는 몇 가지 논리적 접근을 적용할 수 있다.

규칙 # 1 – 순간 이동 금지(No teleportation)

적용 방법은 간단하다. 페이지의 요소를 변경할 때 항상 전환을 사용하게 된다. 즉, GUI에 즉각적인 스냅 컷이 없어야 한다. 나타나거나 사라지거나 변형되는 모든 요소는 easing 또는 animation으로 구현되어야 한다.

이를 통해 사용자는 원하는 영역에 비전(vision)을 집중할 수 있다. 물론 이것은 우아함과 일관된 흐름의 느낌을 만든다.

규칙 # 2 : 토글(Toggles)이 버튼( Buttons) 보다 낫다.

집에서는 일반적으로 동일한 스위치를 사용하여 조명을 켜고 끈다. 사이트의 토글 컨트롤에도 동일한 개념이 적용된다. 컨트롤 토글이 주어진 요소의 새 상태를 트리거하면 동일한 컨트롤이 해당 상태를 롤백해야 한다.

또한 Fitts의 법칙에 따라 이러한 제어는 켜짐과 꺼짐 상태 사이를 빠르게 전환하기 위해 거의 제로에 가까운 노력을 필요로 한다.

규칙 # 3 : 트리거(Trigger)는 근처에 있어야 한다.

전환에는 항상 일종의 트리거가 필요하다. 상호작용 시 사용자는 일반적으로 해당 트리거 요소에 집중한다. 이는 전환(Transition)이 트리거 시점 또는 그 부근에서 시작되어야 함을 의미한다. 트리거 요소에서 너무 멀리 떨어진 곳에서 전환을 시작하면 사용자가 쉽게 놓칠 수 있고 흐름이 중단된다.

또한 전환(Transition)은 일반적으로 트리거에서 사용자의 주의를 집중하려는 위치로 전파되어야 한다. 트릭은 간단하다. 사용자의 시선을 방아쇠에서 다음 단계로 이동해야 하는 지점으로 안내한다. 이렇게 하면 사용자가 집중력을 잃지 않고 원하는 위치에 올바르게 이동할 수 있다.

규칙 # 4 : 자연스러운 전환 타이밍 사용

전환 타이밍은 애니메이션이 재생되는 시간을 정의한다. 타이밍의 가장 큰 문제는 바로 적용할 수 있는 마술 지팡이(magic wand)가 없다는 것이다. 너무 오래 전환하면 사용자가 동일한 상호작용을 자주 또는 빠르게 반복하는 데 어려움이 있다.

반면에 너무 짧으면 부자연스럽거나 사용자가 완전히 놓칠 수 있다. 불행히도, 여러분들이 할 수 있는 일은 독수리의 눈과 직감으로 전환을 평가하는 것이다. 효과적인 조언으로 모든 전환에 동일한 타이밍을 주지 않는 것이다. 그냥 즐기고 적절한 균형을 찾기 바란다. 참고로 0.05 초의 차이도 영향을 미치기 때문이다.

규칙 # 5 : 전환 롤백(Transition rollbacks)은 사용자의 통제력을 깨지 않아야 한다.

때로는 사용자가 전환 중에 빠르게 마음을 바꾸는 경우가 있다. 이러한 경우 전환 응답 성이 매우 중요하다. 사용자가 마지막 상호작용을 취소하면 (예 : 트리거 버튼을 두 번 클릭) 전환 애니메이션이 즉시 반전되어야 한다. 그렇지 않은 경우 사용자는 즉시 제어 감을 잃는다. 또한 사용자가 뭔가 잘못되었다고 생각하게 만든다.

규칙 # 6 : 시리즈의 다음 작업에 항상 자동 초점(auto-focus)

이 팁은 사용자가 일련의 작업을 수행하는 상호작용을 대상으로 한다. 이러한 시퀀스를 디자인할 때는 항상 불필요한 상호작용을 피하고 항상 시퀀스의 다음 컨트롤에 초점을 맞춰야 한다. 이러한 종류 상호작용의 가장 기본적인 예는 양식을 열고 사용자가 수동으로 클릭할 필요가 없도록 첫 번째 필드에 마법처럼 초점을 맞추는 것이다.

규칙 # 7 : 작업이 끝나면 항상 사용자에게 알림 처리

사용자는 상호작용이 완료되는 시기를 항상 인식할 수 있어야 한다. 완료 시 상호작용이 명백한 방식으로 변경되지 않는 경우 사용자에게 “이봐, 끝났어!”라는 시각적 피드백을 구현하는 것을 항상 고려해야 한다. 이를 건너뛰는 상황에서 사용자는 동일한 작업을 여러 번 반복하는 경향이 있음으로 실수를 하고 소중한 것을 손상시킬 수도 있다.