마이크로인터랙션 베스트 사례
[번역][ 우리가 몰랐던 어제 해외 UI/UX 소식
Today UX 아티클
babich.biz에 올라온 Nick Babich의 글 Best Practicesfor Microinteractions을 원저자의 허락을 받아 번역한 글입니다.
마이크로인터랙션(microinteractions)은 하나의 태스크를 성취하는 데 중점을 둔 미묘한 모먼트(moments)입니다. 우리 주변에 있는 거의 모든 애플리케이션을 보면 마이크로인터랙션으로 가득 차 있습니다. 다음은 몇 가지 사례입니다.
물건이 장바구니에 담긴 것을 확인해줄 때
내용을 업데이트하기 위해 당겨서 새로고침 할 때
특정 액션을 확인해 주는 인터페이스 애니메이션(예: 토글 버튼)
이 모든 작은 순간들이 마이크로인터랙션을 구성하게 됩니다. 우리는 보통 이런 것에 집중하지 않지만, 그 존재를 느낄 수는 있습니다. 이런 작은 순간들이 합쳐져서 유저 인터페이스를 기계적이라기보다는 인간적으로 느껴지도록 만들어주어 사용자 경험을 향상하여 줍니다.
이번 글에서는 마이크로인터랙션에 쓸 수 있는 5가지 유용한 테크닉을 설명하고 몇 가지 유용한 사례를 소개하고자 합니다.
1. 습관 루프(habitloop)를 만든다.
마이크로인터랙션은 유저가 실제로 상호작용하도록 독려하는 힘을 가지고 있습니다. 마이크로인터랙션은 습관 루프를 형성하는 데 도움을 주는 강력한 무기입니다. 습관은 사람이 같은 행동을 반복할 때 형성되며 다음 세 가지 요소로 구성됩니다.
신호(cue) – 행동을 시작하게 하는 계기
루틴(routine) – 그 단서에 대한 반응으로 행동을 취하게 됨
보상(reward) – 루틴을 완료함으로 얻게 되는 이익, 행동을 완료하게 되는 이유
Image credit: wikia페이스북에서 메시지가 오면 보내는 알림은 습관 루프의 좋은 사례입니다. 하얀색으로 변한 아이콘과 빨간색 벳지(신호)는 새로운 메시지를 나타내며, 친구와 채팅을 하기 위해(보상) 유저가 아이콘을 클릭하게 만듭니다(루틴). 시간이 지나고 나면, 유저는 빨간 뱃지를 보면 자동적으로 아이콘을 클릭하게 됩니다.
마이크로인터랙션은 중독성있는 앱을 만드는 비밀스런 재료입니다.팁: 보상은 강력하게 동기부여를 해줍니다. 보상이 강력할수록, 습관은 더 견고해집니다.
2. 테마와 연결시킨다
마이크로인터랙션은 디자인에 자연스럽게 녹아들어야 합니다. 모든 인터랙션(마이크로인터랙션, 매크로 인터랙션 모두)이 잘 어울리는 통일성 있는 테마를 만들어야 합니다. 다음 두 가지 간단한 원칙을 따르면 됩니다.
연속성(continuity): 대상의 서로 다른 상태 사이의 전환을 애니메이션으로 만들어서 전환 효과가 끊어지지 않게, 매끄럽게 이어지도록 만듭니다.
Image credit: Cam Runcie예측가능성(predictability): 잘 만든 마이크로인터랙션은 유저가 적절한 기대치를 설정하고 정보를 이해할 수 있게 해줍니다.
Image credit: Leo Zakour
Image credits: Matt D. Smith3. 움직이는 피드백을 사용한다
애니메이션은 제대로 사용하면 사용자 경험에 굉장한 기여를 할 수 있습니다. 기능적 애니메이션과 재미용 애니메이션 모두 피드백을 제공하는 데 사용할 수 있습니다.
기능적 애니메이션은 인지부하를 줄여주고 변화를 인지하지 못할 위험을 방지해주며 공간적 관계(spatial relationship)를 보다 잘 상기할 수 있도록 도와줍니다.
Image credit: Tamino Martinius재미용 애니메이션은 마이크로인터랙션을 보다 즐겁게 만들어주며 해당 액션으로 유저의 관심을 끌어주고 유저 인터페이스에 생명을 불어넣어 줍니다.
Image credit: Chris Bannister
팁: 수명(longevity)을 염두에 둬야 합니다. 이 애니메이션은 100번을 사용해도 짜증이 나는 애니메이션인가요? 아니면 보편적으로 명확하고 방해가 되지 않는 애니메이션인가요?
4. 유머를 이용한다.
인터랙션에서 사용하는 유머는 그 스케일이 어떠냐와 상관없이 사용자 경험에 감정적 반응을 끌어들일 수 있는 분명한 방법입니다. 예를 들어, 대량 이메일 작성 및 전송 웹서비스인 MailChimp에서는 처음 이메일을 만들고 스케줄을 설정하는 프로세스 전반에 걸쳐 기대하지 않은 유머와 재미를 더해 유저에게 보상을 해줍니다. 작고 재미있는 깜짝 선물을 사용자 여정에 추가함으로 MailChimp는 이메일 보내기를 훨씬 더 재미있게 만듭니다.
MailChimp에서는 이메일 캠페인을 승인하는 상황에 긴장을 풀어주기 위해 가벼운 유머를 사용하였다.디자인은 어떤 형태로든지 감정을 소통해야 합니다.
팁: 사람의 말투를 사용하세요. UI가 기계처럼 느껴지지 않고 따뜻하게 느껴지게 만드는 빠른 방법은 사람의 말투를 이용해 카피를 작성하는 것입니다.
5. 원하지 않은 인터랙션은 피한다
시각적 단서와 애니메이션이 적절한지 반드시 확인해야 합니다. 마이크로인터랙션을 지나치게 많이 넣어 UI를 만들거나 지나치게 복잡한 인터랙션을 만드는 것은 흔한 실수입니다. 아래는 후자의 사례입니다. 아름답지만 실용적이지 않은 인터랙션이죠.
사용자가 채팅을 스크롤할 때마다 물방울이 화면 위를 날아다니게 만드는 것은 시간이 지나면 좀 짜증날 수도있습니다. Image credit: Jakub Antalík기억하세요. 마이크로인터랙션에서는 적을수록 좋은 것입니다. 무엇이든지 없애서 더 깔끔한 UI를 만들 수 있다면 확실히 좋은 아이디어입니다. 그러니 마이크로인터랙션을 디자인할 때는 그 마이크로인터랙션 이유저에게 해줄 수 있는 실용적인 면에만 집중해야 합니다.
팁: KISS 원칙을 디자인에 사용하세요. 마이크로인터랙션은 작고 간단해야 합니다. 마이크로인터랙션은 매크로인터랙션(macrointeraction)이 되지 않게 하세요.
결론
UX에서는 여러분이 유저를 어떻게 다루고 그들이 제품을 사용했을 때 무엇을 느끼느냐가 중요합니다. 부차적인 디테일이라 할지라도 세밀한 관심을 기울여야 합니다. 모든 디테일에 집중하는 것이 인간-컴퓨터 인터랙션을 성공적으로 이용하기 쉽게 만들어 내는 데 중요하기 때문입니다.
라이브 클래스 PM VOD 패키지(리서치/분석/전략/설계)
178여개 UX 강좌(총 300시간) PM VOD 패키지 98% 할인 이벤트!!!! 매일 하루에 딱 한명만!!!! 선착순 1명!!!!
