슬라이드 애니메이션으로 방문 페이지의 사용성을 향상시키기 위한 실용적인 제안

(협찬 포스트입니다.) 오랫동안 UI 애니메이션은 디자이너들에게 뒷전이었습니다. 오늘날에도 많은 디자이너들은 애니메이션을 즐거움을 주는 것으로 생각하지만 반드시 사용성을 향상시키는 것은 아닙니다. 이 관점을 공유한다면 이 기사는 당신을 위한 것입니다. 애니메이션이 랜딩 페이지의 사용자 경험을 어떻게 향상시킬 수 있는지 논의하고 Slides 프레임워크를 사용하여 만든 애니메이션의 가장 좋은 예를 제공하겠습니다.

Slides 프레임워크는 웹사이트를 만들기 위한 사용하기 쉬운 도구입니다. 누구나 몇 분 안에 세련된 랜딩 페이지를 만들 수 있습니다. 미리 정의된 슬라이드 목록에서 적절한 디자인을 선택하기만 하면 됩니다.

애니메이션이 랜딩 페이지의 유용성을 지원하는 4가지 방법

랜딩 페이지 디자인은 단순한 시각적 표현 그 이상입니다. 그것은 상호 작용에 관한 것입니다. 상호 작용 디자인의 세부 사항은 현대 웹 사이트에서 근본적인 차이를 만듭니다. 애니메이션 효과는 상호 작용을 강화할 수 있습니다. 랜딩 페이지의 사용성을 높이려면 애니메이션이 단순한 장식이 아닌 기능적 요소여야 합니다. 명확한 기능적 목적을 수행해야 합니다. 다음은 애니메이션이 사용성을 향상시킬 수 있는 몇 가지 일반적인 방법입니다.

1. 내러티브 만들기

모든 디자이너는 스토리텔러입니다. 웹사이트를 만들 때 우리는 방문자에게 이야기를 전합니다. 그리고 애니메이션을 사용하여 훨씬 더 매력적인 이야기를 할 수 있습니다.

애니메이션은 콘텐츠에 생명을 불어넣는 데 도움이 될 수 있습니다. 이러한 애니메이션의 좋은 예는 Ikonet에서 찾을 수 있습니다. 거기에 있는 애니메이션은 사용자가 페이지를 스크롤하고 회사에 대해 배울 때 계속 참여하게 합니다.

애니메이션은 방문자가 주목하고 행동해야 하는 것에 대한 주의를 환기시키는 데 사용할 수도 있습니다. 예를 들어 중요한 텍스트 섹션이나 클릭 유도문안이 있는 경우(그냥 나타나게 하는 대신) 밀어 넣으면 방문자가 어디에 초점을 맞춰야 하는지 이해하는 데 도움이 될 수 있습니다. 아래 Preston Zeller의 예를 살펴보십시오. 페이지에 요소가 표시되는 방식은 사용자가 해당 영역에 집중하도록 합니다. 이 애니메이션의 가장 큰 장점은 방해가 되지 않고 중요한 정보에 주의를 집중시킨다는 것입니다.

2. 피드백 제공

인간-컴퓨터 상호 작용은 사용자 입력과 시스템 피드백이라는 두 가지 기본 사항을 기반으로 합니다. 모든 대화형 개체는 적절한 시각적 또는 오디오 피드백으로 사용자 입력에 반응해야 합니다.

아래에서 Slides 프레임워크를 사용하여 만든 사용자 정의 확인란 효과를 볼 수 있습니다. 사용자가 토글 상태를 변경할 때 보게 되는 미묘한 튀는 애니메이션은 상호작용의 느낌을 강화합니다.

Slides를 사용하면 멋진 호버 애니메이션을 만들고 사용자가 개체와 상호 작용하도록 장려할 수 있습니다. 베리 비주얼을 살펴보세요. "메시지 보내기" 또는 오른쪽 상단의 햄버거 메뉴에 마우스를 가져가면 멋진 애니메이션 효과가 나타납니다. 이러한 요소가 상호 작용한다는 느낌을 줍니다.

Buf Antwerp는 호버 애니메이션 피드백이 사용자 경험을 어떻게 향상시킬 수 있는지 보여주는 또 다른 훌륭한 예입니다. 방문자가 타일 위로 마우스를 가져가면 반투명 오버레이가 나타나고 텍스트가 항목에 대한 추가 정보를 제공합니다.

3. 관계 만들기

랜딩 페이지에 애니메이션을 추가하기에 좋은 위치는 변화의 순간입니다. 너무 자주 변화의 순간은 갑작스럽습니다. &mdahs; 예를 들어 사용자가 링크를 클릭하면 갑자기 새 화면이 나타납니다. 갑작스러운 변경은 사용자가 처리하기 어렵기 때문에 이러한 변경은 일반적으로 컨텍스트의 손실을 초래합니다. 뇌는 새 컨텍스트가 이전 컨텍스트와 어떻게 연결되는지 이해하기 위해 새 페이지를 스캔해야 합니다.

급격한 변화의 다음 예를 고려하십시오.

부드러운 애니메이션 전환이 사용자를 화면의 다른 부분으로 안내하는 다음 예와 비교하십시오.

두 번째 예에서 애니메이션은 급격한 변화를 방지합니다. 즉, 간격을 채우고 두 단계를 연결합니다. 결과적으로 방문자는 두 단계가 함께 속해 있음을 이해합니다. 이 원칙은 두 개체 사이에 상위-하위 관계가 있는 경우에도 동일하게 적용됩니다.

단계 간에 전환을 생성할 때도 적용됩니다. 아래 예에서 슬라이드 간의 부드러운 전환은 페이지의 관련 없는 부분을 분리하는 대신 시퀀스의 감각을 만듭니다.

4. 지루한 작업을 재미있게 만들기

일상적인 경험에 장난스러운 요소를 도입하는 방법을 상상하기 어려울 수 있습니다. 그러나 가장 예상치 못한 곳에 약간의 놀라움을 추가함으로써 친숙한 상호 작용을 예상치 못한 것으로 기억할 수 있는 것으로 바꿀 수 있습니다.

Tympanus의 3D Room Exhibition을 방문하면 이전에 방문했던 다른 갤러리 웹사이트처럼 보입니다. 그러나 웹 사이트에 대한 인상은 페이지와 상호 작용하는 즉시 변경됩니다. 커서를 이동하면 페이지가 이동하며 이 효과는 3D 공간감을 만듭니다. 이 느낌은 한 페이지에서 다른 페이지로 이동할 때 강화됩니다. 3D 공간 내에서 한 방에서 다른 방으로 여행하는 것처럼 보입니다.

이제 3D 효과보다 훨씬 더 친숙한 웹 양식에 대해 이야기해 보겠습니다. 누가 양식 작성을 좋아합니까? 아마 아무도. 여전히 양식 작성은 웹에서 가장 일반적인 작업 중 하나입니다. 그리고 이 지루한 활동을 재미있는 운동으로 바꾸는 것도 가능합니다. 형태로 사용되는 Darin Senneff의 설인 캐릭터를 살펴보십시오. 사용자가 비밀번호를 입력하기 시작하면 마스코트가 눈을 가립니다. 이러한 애니메이션 효과는 처음 볼 때 많은 즐거움을 선사합니다.

마지막으로 중요한 것은 스크롤링 경험을 시각적으로 더 흥미롭게 만들 뿐만 아니라 독자에게도 도움이 되도록 할 수 있다는 것입니다. 다음은 페이지에서 스크롤되는 콘텐츠에 따라 지도를 따라 경로가 애니메이션되는 대화식 여정인 스토리텔링 지도입니다. 이 아이디어는 텍스트, 시각 자료 및 위치를 함께 묶습니다. 방문자는 정보를 읽고 지도의 맥락에서 볼 수 있습니다.

랜딩 페이지 애니메이션을 위한 6가지 모범 사례

애니메이션이 유용한 곳을 식별하는 것은 이야기의 절반에 불과합니다. 디자이너는 또한 애니메이션을 적절하게 구현해야 합니다. 이 섹션에서는 전문가처럼 애니메이션을 적용하는 방법을 알아보겠습니다.

1. 한 번에 여러 요소에 애니메이션 효과를 적용하지 마십시오.

몇 개의 개체가 동시에 애니메이션되면 사용자의 주의가 산만해집니다. 인간의 두뇌와 눈은 움직이는 물체에 주의를 기울이도록 고정되어 있기 때문에 사용자의 초점은 한 요소에서 다른 요소로 이동하고 두뇌는 방금 일어난 일을 파악하는 데 추가 시간이 필요합니다(특히 움직임이 매우 빠르게 발생하는 경우). 따라서 애니메이션을 적절하게 예약하는 것이 중요합니다.

전환 안무의 개념을 이해하는 것이 중요합니다. 인터페이스가 변경될 때 방문자의 초점을 유지하는 조정된 동작 시퀀스입니다. 독립적으로 움직이는 요소의 수를 최소화합니다. 몇 가지 일만 동시에 발생해야 합니다(일반적으로 두세 개 이하). 따라서 세 개 이상의 개체를 이동하려는 경우 개별적으로 애니메이션을 적용하지 않고 일부 개체를 그룹화하여 단일 단위로 변환합니다.

슬라이드는 웹 디자이너에게 탁월한 이점을 제공합니다. 즉, 디자인에서 모션을 과도하게 사용하는 것을 방지합니다. Slides에서 사용할 수 있는 각 애니메이션 효과는 최상의 방법으로 콘텐츠를 전달하도록 신중하게 설계되었습니다.

2. 애니메이션은 랜딩 페이지의 성격과 충돌해서는 안 됩니다.

디자인에 애니메이션을 추가할 때마다 개성이 도입됩니다. 이 성격은 주로 사용하기로 선택한 애니메이션 효과에 따라 달라집니다.

사람들은 제품과 상호 작용할 때 특정 기대치를 가지고 있습니다. 은행 서비스의 랜딩 페이지를 디자인하고 사용자의 개인 정보를 수집하는 양식을 소개하기 위해 튀는 애니메이션을 사용하기로 결정했다고 상상해 보십시오. 많은 사용자는 양식이 기대와 상충하기 때문에 세부 정보 제공을 주저합니다.

Slides 프레임워크를 사용하면 스택, 젠, 필름, 카드 및 확대/축소와 같은 10가지 애니메이션 스타일 중에서 선택할 수 있습니다. 다양한 효과를 실험해보고 귀하의 경우에 가장 적합한 것을 선택하십시오.

3. 시간을 지켜라

애니메이션을 디자인할 때 타이밍이 전부입니다. 애니메이션의 타이밍은 좋은 상호 작용과 나쁜 상호 작용의 차이를 의미할 수 있습니다. 애니메이션 작업을 할 때 일반적으로 시간의 3분의 1을 적절한 애니메이션 효과를 찾는 데 보내고 나머지 2/3는 애니메이션이 부드럽게 느껴지도록 하는 적절한 타이밍을 찾는 데 사용합니다.

일반적으로 애니메이션을 짧게 유지합니다. 애니메이션은 사용자가 작업을 완료하는 데 방해가 되어서는 안 됩니다. 가장 아름답게 실행된 애니메이션이라도 사용자의 속도를 늦추면 정말 짜증나기 때문입니다. UI 애니메이션의 최적 속도는 200~500밀리초입니다. 1초 미만 지속되는 애니메이션은 인스턴트로 간주되는 반면 5초보다 긴 애니메이션은 지연된 느낌을 전달할 수 있습니다.

애니메이션 효과를 생성할 때 하나의 매개변수는 애니메이션이 인식되는 방식에 직접적인 영향을 미칩니다. CSS 용어로 이징 또는 타이밍 기능입니다. 이징은 디자이너가 움직임을 보다 자연스럽게 만드는 데 도움이 됩니다.

Slides 프레임워크를 사용하면 웹 디자이너가 여유를 사용자 지정할 수 있습니다. "효과 설정" 섹션에서 다른 효과와 함께 이징을 찾을 수 있습니다.

4. 접근성에 대해 생각하기

애니메이션은 양날의 검입니다. 한 그룹의 사용자에게는 사용성을 향상시키고 다른 그룹에는 문제를 일으킬 수 있습니다. Apple의 iOS 7 출시는 후자의 최근 사례입니다. iOS 7은 애니메이션 효과로 가득 차 있었고 출시 직후 iPhone 사용자는 애니메이션 전환으로 인해 현기증이 났다고 보고했습니다.

디자이너로서 당신의 책임은 시각 장애가 있는 사람들이 당신의 디자인과 어떻게 상호 작용할 것인지 생각하는 것입니다. 애니메이션에 대한 WCAG의 지침을 확인하고 디자인이 지침과 일치하는지 확인하십시오. 사용자가 애니메이션 또는 모션의 양을 최소화하려는지 여부를 추적합니다. 특별한 CSS 미디어 기능인 "prefers-reduced-motion"은 시스템이 사용된 애니메이션이나 모션의 양을 최소화하도록 사용자가 요청했는지 여부를 감지합니다. "감소"로 설정하면 움직임과 애니메이션의 양을 최소화하는 것이 좋습니다(예: 필수적이지 않은 움직임을 모두 제거).

또한 사용성 테스트를 수행하여 시각 장애가 있는 사용자를 포함한 모든 사용자가 디자인과 상호 작용하는 데 문제가 없는지 확인합니다.

5. 디자인 결정의 프로토타입 및 테스트

애니메이션은 가지고 노는 것이 재미있습니다. 너무 많은 움직임으로 사용자를 압도하는 디자인으로 끝나기 쉽습니다. 불행히도 훌륭한 애니메이션을 위한 은총알은 없습니다. "그만하다"에 대한 명확한 기준을 설정하기는 어렵습니다. 애니메이션 효과의 프로토타입, 테스트 및 최적화에 시간을 할애할 준비를 하십시오.

다음은 테스트 중에 고려해야 할 몇 가지 팁입니다.

• 다른 하드웨어에서 테스트합니다.
  화면 크기, 화면 밀도, GPU 성능 등 많은 하드웨어 요소가 애니메이션 성능에 큰 영향을 미칠 수 있습니다. 결과적으로 고화질 화면의 사용자는 이전 화면의 사용자와 완전히 다른 경험을 할 수 있습니다. 성능 병목 현상을 방지하기 위해 애니메이션을 디자인할 때 이러한 요소를 고려하십시오. 느린 하드웨어를 탓하지 마십시오. 모든 종류의 장치에서 잘 작동하도록 애니메이션을 최적화하십시오.
• 모바일에서 테스트합니다.
  대부분의 웹 사이트는 데스크톱에서 구축 및 테스트됩니다. 모바일 경험과 애니메이션 성능은 종종 사후 고려 사항으로 처리됩니다. 일부 애니메이션 기술은 데스크톱에서는 잘 작동하지만 모바일에서는 잘 작동하지 않기 때문에 모바일에서 테스트가 부족하면 모바일 사용자에게 많은 문제가 발생할 수 있습니다. 부정적인 경험을 피하기 위해 디자인이 데스크탑과 모바일 모두에서 제대로 작동하는지 확인하십시오. 모바일에서 일찍 그리고 자주 테스트하십시오.
• 느린 속도로 애니메이션을 봅니다.
  애니메이션(특히 복잡한 애니메이션)이 최고 속도로 실행되면 문제를 알아차리기 어려울 수 있습니다. 애니메이션 속도를 낮추면(예: 10분의 1 속도) 이러한 문제가 분명해집니다. 애니메이션의 슬로우 모션 비디오를 녹화하고 다른 사람들에게 보여주어 다른 관점을 얻을 수도 있습니다.

Slides 프레임워크를 사용하면 몇 분 안에 고화질 대화형 프로토타입을 만들 수 있습니다. WYSIWYG 편집기를 사용하여 애니메이션 효과를 만들고 디자인을 게시하고 데스크톱 및 모바일 장치 모두에서 작동하는 방식을 확인할 수 있습니다.

6. 애니메이션은 나중에 생각해서는 안 됩니다.

많은 디자이너가 애니메이션을 사용자 인터페이스에 과부하를 주고 더 복잡하게 만드는 불필요한 기능으로 생각하는 데는 이유가 있습니다. 대부분의 경우 디자이너가 디자인 프로세스의 마지막에 애니메이션을 디자인을 위한 립스틱, 즉 애니메이션을 위한 애니메이션으로 도입할 때 사실입니다. 목적 없는 무작위 움직임은 방문자에게 큰 도움이 되지 않으며 쉽게 주의를 산만하게 하고 짜증나게 할 수 있습니다.

의미 있는 애니메이션을 만들기 위해서는 프로젝트 초기에 애니메이션이 자연스럽게 어울릴 영역을 생각하는 시간을 가져보세요. 이런 식으로만 애니메이션이 사용자 흐름에 자연스러워집니다.

결론

좋은 기능의 애니메이션은 방문 페이지를 더 매력적일 뿐만 아니라 더 유용하게 만듭니다. 올바르게 완료되면 애니메이션은 일련의 섹션에서 랜딩 페이지를 주의 깊게 안무되고 기억에 남는 경험으로 전환할 수 있습니다. Slides 프레임워크는 웹 디자이너가 애니메이션을 사용하여 명확하게 의사 소통하는 데 도움이 됩니다.