목적 있는 상호 작용 설계

목적이 있는 인터랙션 디자인의 핵심 원칙, 인터랙션이 해결할 수 있는 디자인 문제, 그리고 이를 프로세스에 적용하는 방법을 알아보세요.

사용자 경험에서 인터랙션 디자인과 애니메이션을 생각할 때 멋진 것으로 착각하기 쉽습니다. 종소리와 휘파람 또는 "웹사이트에 감탄을 불러일으키는" 무작위 비행 물체와 같은 것입니다. 일시적인 즐거움을 줄 수도 있지만 곧 일반 사용자에게는 짜증이 날 수 있습니다.

이러한 유형의 무익함을 해결하기 위해 의미 있는 상호 작용을 설계하는 핵심 원칙, 일반적인 설계 문제를 해결하는 방법, 설계 시스템 및 프로세스에 이를 도입하는 방법을 살펴보겠습니다. 상호 작용은 더 이상 "있으면 좋은" 범위에서 삭제되는 마무리 터치가 아니라 전체 사용자 경험의 필수적인 부분이어야 합니다.

의미 있는 인터랙션 디자인의 4가지 핵심 원칙

1. 장애물 생성 피하기

전체 화면에 애니메이션을 적용하는 데 2~3초가 소요되는 "햄버거 메뉴"를 생각해 보십시오. 사용자가 사이트를 탐색할 때마다 기다려야 합니다. 사용자의 작업 시간을 더 길게 만드는 것은 경쟁사의 웹사이트나 앱으로 사용자를 반송할 수 있는 확실한 방법입니다.

그러나 상호 작용의 진행을 지연시키는 것이 도움이 될 수 있는 일부 경우가 있습니다. 상호 작용이 복잡한 경우 속도를 늦추면 사용자에게 더 나은 컨텍스트와 피드백을 제공할 수 있습니다. 다음은 상호 작용 및 애니메이션을 지연할 수 있는 몇 가지 예입니다.

• 새 사용자를 새 인터페이스에 온보딩합니다. 건너뛰기 옵션으로 장애물을 줄이십시오.
• 원인과 결과를 보여주는 인터페이스를 드래그 앤 드롭합니다. 너무 빠르면 사용자는 해당 파일이 어디로 갔는지 궁금해할 수 있습니다.
• 장바구니에 제품을 추가합니다. 이것은 체크아웃에 대한 장기간의 장벽을 생성해서는 안 되지만 사용자에게 작업이 성공적이었다는 것을 알 수 있도록 충분한 피드백을 제공해야 합니다.

일반적으로 간단한 상호 작용은 신속해야 하고 복잡한 상호 작용은 사용자가 컨텍스트를 이해할 수 있을 정도로만 지연되어야 합니다.

2. 메시지에 모션 맞추기

Apple이 iOS에서의 모든 상호 작용이 빠르고 날카로울 것이라고 결정했다면 당신이 Apple 제품을 사용하는 것처럼 느껴지겠습니까? Alton Towers 앱을 사용 중이고 천천히 페이딩되는 애니메이션과 Ken Burns 스타일의 풍부한 전환을 본다면 재미있고 흥분되는 마법의 장소나 M&S TV 광고처럼 느껴지겠습니까?

상호 작용이 움직이는 방식은 항상 사용자에게 적절하게 느껴지도록 목표로 하는 톤을 나타내야 합니다. 이는 경험을 더욱 몰입적이고 일관되게 만듭니다. 어린이를 위한 엔터테인먼트 사이트라면 다소 엉뚱하고 화려할 수 있습니다. 고급 부티크라면 느리고 세련되고 세련되게 유지하십시오.

3. 목적을 부여하라

인터랙션 디자인은 사용자 경험을 향상시킬 수 있는 잠재력이 너무 커서 목적 없이 남용하고 사용하고 싶은 유혹이 많습니다. 플래시 웹사이트를 기억하십니까?

조금 더 스크롤하여 인터랙션 디자인이 해결할 수 있는 8가지 과제를 살펴보십시오. 상호 작용이 이러한 패턴을 따르지 않는다면 사용자를 기쁘게 하는 것 외에 다른 목적이 없을 가능성이 큽니다.

4. 보이지 않게 만들기

인터랙션을 디자인하는 데 투자한 시간을 감안할 때 상당히 가슴 아픈 일처럼 들리지만, 눈에 띄지 않는다면 아마도 그들이 멋진 일을 했기 때문일 것입니다. 우리는 기술이나 인터페이스가 잘못되거나 뭔가 투박하게 느껴질 때 사용하는 데 더 많은 주의를 기울이는 경향이 있습니다. 일이 순조로우면 사용자는 콘텐츠에 집중할 수 있습니다.

Facebook, Pinterest, Twitter 및 Google 제품과 같이 널리 사용되는 앱 및 웹사이트에서 인터랙션 디자인 고려 사항의 양은 이해할 수 없습니다. 그러나 누군가가 당신에게 지적할 때까지 당신은 결코 정말로 알아차리지 못할 것입니다. 그들은 디자인을 보이지 않게 하여 경험을 즐기고 제품, 서비스 또는 콘텐츠와 더 강한 정서적 유대를 구축할 수 있습니다.

인터랙션 디자인으로 해결할 수 있는 6가지 디자인 과제

1. 오리엔테이션 및 컨텍스트

이는 화면 공간이 제한되어 있는 모바일 디자인의 경우 특히 어려운 문제입니다. 모든 것을 공개하면 사용자는 인지적으로 과부하됩니다. 중요한 것은 보여주고 덜 중요한 것은 숨기는 것이 우리가 추구하는 것입니다. 그러나 경험의 일부를 숨깁니다. 따라서 의미 있는 상호 작용을 사용하여 사용자에게 사물이 있는 위치를 시각적으로 가르칠 수 있으므로 기억하기 쉽고 직관적입니다.

다음은 상호 작용을 사용하여 컨텍스트를 만드는 몇 가지 예입니다.

• 구글 폰트 배경색 체인저. 색상은 페인트 통 아이콘 안에 있는 것처럼 느껴집니다.
• 면화국에서 장바구니에 담기 및 결제 과정을 진행합니다. 새 장바구니 페이지로 이동하는 것이 아니라 보이는 페이지의 오른쪽에 있는 회전 목마와 같습니다.

2. 원인과 결과 입증

이에 대한 고전적인 예는 끌어서 놓기 인터페이스입니다. 미디어 개체를 집어서 "드롭 영역"으로 이동하면 사용자가 이를 집어 들었고 항목을 놓기에 적합한 위치로 이동했음을 알리는 피드백이 있어야 합니다. 일단 그들이 그것을 놓으면 사용자에게 작업이 성공했음을 알리는 유효성 검사가 있어야 합니다. 이것은 색상 변경, 긍정적인 확인 메시지 또는 음향 효과를 통해 수행할 수 있습니다.

3. 피드백 제공

이 예에서는 결제 버튼을 사용하겠습니다. 훌륭하고 빛나는 "지금 지불" 버튼을 클릭했지만 처리 중이기 때문에 클릭했는지 여부에 대해 혼란스러워하는 제대로 실행되지 않은 전자 상거래 게이트웨이가 몇 개나 있습니까? 그것은 그것이 하는 일이라고 말하지 않았습니다. 따라서 인터랙션은 버튼의 상태를 변경할 수 있고 약간의 애니메이션으로 사용자에게 "결제가 처리 중입니다"라고 말한 다음 주문 확인 페이지로 이동하기 전에 "결제가 수신됨"을 사용자에게 알릴 수 있습니다. 더 이상 10초 동안 무슨 일이 일어나고 있는지 궁금해하고 인터넷이 끊겼는지 묻지 않아도 됩니다.

4. 주요 정보 강조

동일한 화면 보기 내에서 일부 콘텐츠의 우선 순위가 더 높은 경우 이를 홍보하기 위해 색상과 타이포그래피를 사용하면 디자인 시스템의 일관성이 깨지거나 과도하게 사용되면 부적절해 보일 수 있습니다. 상호 작용은 레이아웃을 손상시키지 않으면서 중요한 콘텐츠를 강조하는 데 도움이 될 수 있습니다.

피트니스 앱을 생각해 보십시오. 대시보드를 처음 로드할 때 오늘의 주요 활동과 통계를 보고 싶습니다. 간단한 애니메이션을 사용하면 화면에 표시되는 항목의 양을 희석하지 않고 이 콘텐츠를 가져올 수 있습니다.

5. 성과에 대한 인식 만들기

속도는 이탈률과 관련된 공통 요소이기 때문에 인기 있는 주제이며 그럴 만한 이유가 있습니다. 페이지 속도 최적화를 최대화했는데 페이지를 로드하는 데 여전히 약간의 시간이 걸리는 경우가 있습니다. 사용자에게 아무것도 표시하지 않거나 로딩 아이콘을 표시하는 대안이 있습니다.

스켈레탈 로딩은 와이어프레임 형식으로 예측 가능한 레이아웃을 표시하는 데 사용할 수 있으므로 페이지가 로드되기 전에 사용자는 대략적으로 어디를 보고 인터페이스와 상호 작용할 수 있는지 알 수 있습니다. 심리적으로는 아무 일도 일어나지 않는 것보다 페이지가 더 빨리 로드되는 것처럼 느껴지지만 실제로는 동시에 로드됩니다.

또한 로딩 시간을 대기 시간을 분산시키는 친근한 메시지로 사용자에게 무슨 일이 일어나고 있는지, 어떤 일이 일어나려고 하는지를 교육하는 기회로 사용할 수 있습니다.

6. 브랜드 개성 추가

캐릭터 주도 브랜드는 상호 작용을 도입하여 경험에 개성을 부여함으로써 큰 ​​이점을 얻을 수 있습니다. 마스코트의 인간적 특성을 활용할 수 있습니다. 브랜드에 시각적 요소가 없을 때 속도와 빈도를 사용하여 개성을 추가할 수 있습니다. Google과 Google의 기발한 도트 프리로더 또는 음성 명령 활성화를 생각해 보세요. 간단하면서도 친근하고 재미있는 접근 방식을 제공합니다.

사용자와 정서적인 관계를 구축하는 것은 정기적인 방문을 유도하는 좋은 방법입니다. 인터랙션 디자인은 기술이 더 인간 중심적이라는 느낌을 줄 수 있습니다. 이는 항상 목표로 삼기에 좋습니다.

디자인 프로세스에 상호 작용 도입

저충실도 스케치 및 구성 요소

인터랙션 디자인 도구

• Keynote: 아이디어를 전달할 수 있는 조잡하고 간단한 방법을 찾고 있다면 Keynote가 가장 좋습니다.
• Adobe Animate: Adobe에 모든 것을 보관하고 다른 도구와 원활하게 교차할 수 있습니다. 이것은 일러스트레이션 애니메이션에 이상적입니다.
• Tumult Hype: Sketch 인터페이스에 익숙하고 타임라인에 대한 방법을 알고 있다면 Tumult와 함께 집에 있는 것입니다.
• Framer: 이것은 애니메이션을 JavaScript와 일치시키는 고급 기능을 갖춘 특수 제작된 상호 작용 디자인 도구입니다.
• 원칙: 멋진 Sketch 링크를 통해 Principle은 상호 작용을 위한 필수 요소가 되었습니다. 배우기 비교적 간단하고 이를 통해 달성할 수 있는 것은 훌륭합니다.
• 원자성: 데이터, 논리 및 변수를 추가하여 상호 작용을 최종 빌드만큼 실용적으로 만듭니다. 이것은 약간의 코딩 지식이 있는 고급 디자이너를 위한 것입니다.
• Invision Studio: 아직 초기 단계지만 Invision Studio는 Principle과 몇 가지 훌륭한 기능과 유사점이 있습니다. 이것이 프로토타이핑 및 협업 시장을 지배할 만큼 충분히 발전할지 여부는 시간이 말해줄 것입니다.

자세한 인계 참고 사항

개발자 노트를 남기는 것은 고도로 협업적인 환경에 있는 경우 논쟁의 대상이 되지만, 원격으로 작업하는 경우 좋은 양도와 함께 아이디어 및 프로토타입에 대한 자세한 메모를 통해 상호 작용이 빌드에 반영되도록 할 수 있습니다.

데모 및 영감 라이브러리 컴파일

디자인 시스템에 추가

상호 작용과 관련된 일반적인 문제(적절하게 테스트됨)를 성공적으로 해결한 경우 처음부터 다른 작업을 수행하는 데 시간을 투자하지 않고 유사한 시나리오에서 재사용할 수 있도록 디자인 시스템 또는 패턴 라이브러리에 가져옵니다.

웹 디자인 및 사용자 경험(UX)에 대한 도움이 필요하시면 지금 저희에게 연락하십시오.

사용자 경험에 대한 도움이 필요하면 주저하지 말고 저희에게 연락하십시오.