움직이는 배너가 만드는 새로운 사용자 경험
플로팅 UI의 힘: 방해 없이 행동을 유도하는 기술
움직이는 배너가 만드는 새로운 사용자 경험_01모바일에서 다양한 서비스를 이용하다 보면 한 번쯤은 화면 위를 따라다니는 플로팅 배너를 마주하게 된다.
처음 플로팅 배너가 등장했을 때만 해도 사용자의 흐름을 방해하는 요소로 인식었다. 그러나 이제는 많은 서비스에서 자연스럽게 활용되는 UI 패턴이 되었고 플로팅 배너가 없으면 화면이 허전하게 느껴질 정도이기에 이번 사례를 분석해보게 되었다.
이번에는 플로팅 배너는 어떤 목적으로 활용되고 있고, 어떤 형태의 UI들이 있는지를 사례를 살펴보며, 이 UI가 사용자 경험에 어떤 영향을 주는지 알아보고자 한다.
특히 스크롤 시 함께 움직이거나, 특정 액션에 반응하는 플로팅 배너를 중심으로 사용성 측면에서 불편함은 없는지, 그리고 사용자의 행동을 얼마나 자연스럽게 유도하는지에 초점을 맞춰서 살펴보려고 한다.
최근에는 모바일과 PC 사용성의 일관성을 유지하기 위해 동일한 플로팅 UI를 양쪽 환경에 모두 적용하는 사례도 있고, 반대로 같은 목적이라도 디바이스 특성에 맞춰 서로 다른 UI로 제공하는 경우도 많다.
이번 글에서는 그중에서도 모바일 환경을 중심으로, 플로팅 배너가 어떻게 설계되고 활용되는지 구체적인 예시를 통해 살펴보려고 한다.
움직이는 배너가 만드는 새로운 사용자 경험_02플로팅배너를 기획할때 제일 먼저 고려할 것은,
스크롤 다운/업에 따른 UI변화를 줄것인지 또는 고정UI로 노출할지에 대한 부분이다.
제공할 정보가 많다면, 스크롤 다운/업의 차이를 두면 좋겠지만 너무 현란하거나 화려하면 오히려 사용성이 좋지않을 수 있기에 어떤 정보를 노출하는지에 대해 검토 후 UI를 선택하는 것이 좋다.
광고, 이벤트 목적이라면 변화하는 플로팅배너를 주로 사용한다.
단기간에 많은 사용자들에게 임팩트있게 제공하고 노출하는 효과를 보기 위해서는 고정UI보다 움직이는 배너가 클릭율을 더 높인다는 검증을 진행한적이 있다.
11번가와 GS SHOP홈쇼핑 서비스에서도 그런 목적으로 혜택을 강조하는 용도로 사용하였다.
스크롤 플로팅배너 설계할때 고려할 점
첫번째는, 인터랙션 정의입니다.
"처음에 노출되었을때 / 스크롤 다운 상태 / 스크롤 다운하다 멈춘상태 / 스크롤 다운해서 맨하단에 멈문상태 / 스크롤 업 상태 / 스크롤업해서 제일 상단에 멈문상태" 이때의 인터랙션과 노출정보를 모두 고려하여 설계를 진행해야 한다.
두번째는, 디바이스별 차이를 살펴본다.
하이브리드앱 또는 모바일웹이라면 모든 디바이스에서 동일하게 노출하면 되지만, 네이티브앱이라면 iOS,Android의 차별화를 제공하면 좀 더 최적화된 서비스를 제공할 수 있을 것이다.
세번째는, 서비스 노출범위를 지정해야 한다.
메인화면에서만 노출할 것인지, 하단바텀메뉴바가 노출되는 모든화면에 적용할지를 고려해야 한다.
보통은 메인화면에 노출하는 경우가 많다.
대부분의 서비스는 어떤 화면에 진입하든, 메인으로 통하게끔 설계하기에 메인을 거치고 자주 방문하게 하기에 메인에만 집중해서 노출하는 경우들이 많다.
움직이는 배너가 만드는 새로운 사용자 경험_03메세지를 포함한 플로팅배너 예시를 찾아보았다.
상담, 채팅, 1:1 문의, 찜, 최근본상품 등의 기능을 노출하는 목적으로 플로팅배너가 둥둥 떠있는 형태를 보았겠지만 신규가입회원에게 할인혜택 제공, 라이브 방송알림, 첫방문혜택 등을 제공하기 위한 목적으로 메시지를 담아서 노출하는 플로팅배너도 쉽게 찾아볼 수 있다.
뷰티, 패션 등을 포함해서 장보기 서비스에서 많이 사용하는 편이다.
가시성을 중요시한다면 추천하고 싶고, 생각보다 사용성을 해치지않기에 서비스에 잘 녹여서 풀어본다면 활용하기 좋다고 생각한다.
움직이는 배너가 만드는 새로운 사용자 경험_04팝업UX디자인에 살펴볼때 이야기했던 모달팝업의 다른 UI 형태로 살펴보려고 한다.
메인화면 진입시, 모달팝업과 바텀시트 UI를 많이 사용하는 편인데, 이때 조금 더 특별한 차별화를 생각한다면 위와같은 형태로 고려해볼 수 있다.
딤드상태에 올려진 모달팝업의 배경을 투명하게 해서 비주얼이 강조되게 구성한 부분 또 모달팝업을 펼쳐서 스와이프로 정보를 확인할 수 있도록 설계하였고 디자인은 짙은 컬러 사용으로 딤드상태에서 강조될 수 있도록 표현한 것이 강약조절을 신경쓴것처럼 보인다.
그러나 광고라고 인지해서 내용을 확인하지않고 닫을 수 있기에 처음 노출되는 배너의 디자인과 메세지, 노출되는 정보의 성격이 중요하다고 생각한다.
배너는 잘 노출하면 사용자에게 유용한 정보로 인식되지만 광고와 혜택이 많이 노출되기에 광고로 인지되는 순간 클릭하지않고 화면을 이탈하기에 적절하게 균형을 이루면서 사용성을 해치지않는 디자인으로 설계하는 것이 중요하다.
배너디자인 설계할때, 기획적인 요소와 디자인적인 부분의 예시를 시리즈로 짧고 간결하게 정리하고 있으므로 팝업디자인에 내용도 찾고 있다면 아래글 참고하시길
