인터랙션 디자인은 사용자와 시스템 간의 상호작용이 이루어지는 상태를 시각적으로 표시하는 것을 말합니다.
상호작용이 발생하는 순간 시각적인 표시를 제공하면, 사용자는 시스템이 정상적으로 작동하고 있다고 생각하고 시스템에 대한 신뢰를 가질 수 있게 됩니다. 또한 적절한 연출을 통해 사용자의 시선을 끌어 미처 인지하지 못하고 넘어갈 수 있는 요소를 발견하도록 도울 수 있습니다.
Usage
인터랙션 디자인은 상황적 맥락을 고려하여 사용자의 주의를 환기시키는 기능으로 사용합니다.
•
활성 상태의 인터페이스 요소가 동작하는 것에 대해 피드백을 제공하는 경우
•
CTA를 강조하는 경우
•
시각적으로 확실하게 정보를 전달해야 하는 경우
Variants
Micro interaction
상호대상의 트리거가 되는 요소를 대상으로 합니다. 대상 요소의 상태나 사용자 액션에 따라 시각적으로 명확하게 인지가 되도록 표시합니다.
Animated interaction
현재 화면에서 보이지 않는 정보를 노출할 때 사용합니다. 주로 오버레이나 피드백 요소를 노출할 때 사용하며, 적절한 움직임으로 사용자의 주의를 환기합니다.
1.
상세 정보를 추가로 보여줄 때는 드로어가 수평방향으로 열리고 닫히는 모션 애니메이션 연출을 적용합니다.
2.
열릴 때는 slide left, elastic, 500ms로 설정하여 사용자의 주목을 끕니다.
3.
닫힐 때는 slide right, elastic, 300ms 설정을 사용합니다.
4.
작성 양식을 해당 페이지 내에서 제공할 때는 수직방향으로 열리고 닫히는 연출을 적용합니다.
5.
열릴 때는 slide up, elastic, 500ms 설정을 사용합니다.
6.
닫힐 때는 slide down, elastic, 300ms 설정을 사용합니다.
Guidelines
인터랙션 디자인은 사용자의 멘탈 모델에 부합하게 기능해야 합니다.
•
시각적으로 과하지 않아야 합니다.
•
사용자가 인터랙션 반응에 대해 예측할 수 있어야 합니다.
•
전체적인 디자인 톤과 일관성을 가져야 합니다.
•
최소한의 기능으로 제한해서 사용해야 합니다.
•
사용자의 가독성, 접근성을 최우선으로 합니다.
