5원칙. 전환 효과를 사용하라
author - 우뚝솟은비니 | UX 디자이너
Previous Brunch.
『리치 인터페이스 디자인』이라는 책의 6가지 디자인 원칙과 가이드라인을 바탕으로 최근의 모바일 인터페이스 사례를 살펴보고 있습니다.
*gif가 다량 포함되어있습니다. PC나 아이폰 브런치 앱에서만 재생이 되기 때문에 PC 혹은 아이폰 브런치 앱에 접속해서 읽어주시면 감사하겠습니다:)
제5원칙
전환 효과를 사용하라
책에 등장하는 전환 효과의 패턴은 저희에게는 너무 당연하거나 올드한 패턴입니다.
따라서 이번 원칙에서는 패턴과 가이드가 아니라 전환 효과의 목적을 짚어보겠습니다.
'전환 효과의 주목적은
매력적인 인터페이스를 제공하고,
접속을 지속적으로 유지시키고,
커뮤니케이션을 강화하는 것이다.'
이 세 가지 목적 중 필자가 가장 강조하는 것은 커뮤니케이션 강화입니다. 전환 효과는 이야기를 더 설득력 있게 하고, 어려운 맥락을 자연스럽게 이어 주어 사용자의 행위를 더 구체적이고 현실감 있게 만듭니다. 전환 효과가 사용자와 커뮤니케이션하는 방법은 다음과 같습니다.
대상이 서서히 사라지면, 사용자는 주시하지 않았어도 대상이 보였다가 이제는 보이지 않는 상태가 되었음을 알게 됩니다.
대상이 빠르게 나타나거나 사라지면 그 변화가 중요하다는 것을 알 수 있습니다.
대상이 사용자를 향해 다가오면 사용자는 그 변화가 중요하거나 위험하다고 생각합니다.
대상의 크기가 빠르게 작아지다가 사라지면, 즉시 사용자의 주의를 끌 수 있습니다.
이러한 전환 효과가 사용자에게 어떤 메시지를 전달하는지, 우리가 평소에 흔히 접하는 앱들과 함께 더 자세히 알아보겠습니다.
전환 효과를 통해 사용자에게 전달할 수 있는 메시지
1. 화면이 바뀌는 동안 콘텍스트 유지하기
2. 방금 일어난 일 설명하기
3. 대상 간의 관계 설명하기
4. 주의 집중시키기
5. 인지되는 성과 향상 시키기
1. 화면이 바뀌는 동안 콘텍스트 유지하기
네이버 캘린더는 좌상단을 기준으로 확대, 축소되는 전환 효과를 사용하여서 월간 보기에서 주간 보기로 모드가 변경되어도 같은 날짜 안에 있다는 콘텍스트를 인지하게 합니다.
다만, 모드가 바뀌는 시점에 약간의 끊김이 발생하는 것이 보이시나요? 확대 축소의 기준점으로 느껴지는 우상단 일요일의 위치가 달라지는 것 때문인데요, 위치는 고정된 채로 폰트 크기만 부드럽게 줄어들었다면 조금 더 부드럽고 완성도 높은 전환 효과가 되었을 텐데 아쉽습니다.
2. 방금 일어난 일 설명하기
❶G9
G9는 찜 버튼 선택 시 깜찍한 하트 토스트로 시각적 잡음 없이 방금 일어난 일을 설명합니다.
❷Google drive
방금 일어난 일을 설명하는 전환 효과의 극단적 예입니다. 구글 드라이브는 파일이나 폴더를 다중 선택할 때 위와 같은 전환 효과를 사용하고 있습니다. 체크표시만 해도 충분했을 텐데 상단으로 날아가는 효과 때문에 오히려 시각적 잡음을 발생시킵니다.
3. 주의 집중시키기
페이스 북은 어플리케이션 진입 시에 탭 바의 종이 움직이는 모션으로 주의를 집중시킵니다.
4. 인지되는 시간 줄이기
경과시간이 길 때, 사용자의 주의를 다른 곳에 잡아두면 인지되는 시간이 줄어든다는 조사가 있습니다. 사용자는 기다리는 10초 동안에 읽을 것이 있거나 진행 정도에 대한 애니메이션을 보고 있다면 그 시간이 빠르게 지나간다고 느낍니다. 반대로 주의를 분산시키는 요소가 없다면 사용자는 시스템이 제대로 반응하고 있는지 알 수가 없어서 기다리는 시간을 더 길게 느낍니다.
네이버 항공권 서비스는 비행기 모양의 프로그래스 바(Progress bar)와 안내 텍스트를 사용하여 항공권 검색 시에 소요되는 긴 로딩 시간을 지루하지 않게 채우고 있습니다.
coming next.
6원칙. 즉각적으로 반응하라
-
플러스엑스의 UXUI 실무 배우러 가기
UX 상위기획 실무 강의 : 플러스엑스 UX 실무 마스터 패키지
UX 디자인 실무 피그마 강의 : Plus X UX디자이너가 피그마로 화면 설계하는 방식
-
UI 디자인 기초 강의 : 플러스엑스 UI 실무 마스터 패키지
UI 디자인 실무 피그마 강의 : Plus X UI팀의 입문자를 위한 피그마 디자인 매뉴얼
