원탭 마이크로 상호 작용을 디자인하는 방법

/2019-11-26 10:39:33/
Khase
/변하기 쉬운/

마이크로 인터랙션은 앱과 웹 사이트를 사용자에게 빛나게하는 "비밀 소스"입니다. 이 작은 세부 사항으로 알람 설정, 버튼 누르기 또는 디지털 제품 사용 방법을 더 잘 이해할 수 있습니다.

비밀은 최고의 미세 상호 작용이 사용자가 생각조차하지 않는 요소라는 것입니다. 종종 모바일 화면에서 한 번의 탭으로 즉시 발생합니다. 상호 작용의 작은 특성에도 불구하고 "마이크로"는 이러한 참여가 일상 활동과 더 통합 될 때 사용자에게 막대합니다.

사용자를 기쁘게하는 원터치 마이크로 상호 작용을 어떻게 디자인합니까? 몇 가지 아이디어가 있습니다.

Envato Elements 살펴보기

버튼 애니메이션

메신저에서 페이스 북을 처음 발견했을 때를 기억하십니까? "엄지 손가락"아이콘을 누르면 대화 상자에서 대화 상대에게 자랐습니다. 당신이 웃게 했습니까? 그 작은 움직임이 당신에게 약간의 기쁨을 주었습니까?

간단한 애니메이션, 탭하기 전 또는 탭한 후 미세 상호 작용이 작동 함을 보여주는 것은 사용자가 탭하고 싶은 무언가를 만드는 확실한 방법입니다. 작은 애니메이션은 현재 상황에 대한 정보를 제공하므로 사용자는 피드백 루프에서 자신의 역할에 대해 편안하고 자신감을 가질 수 있습니다.
하지마
애니메이션은 미세 상호 작용 자체만큼 단순해야합니다. 움직임을 간단하고 유동적으로 유지하고 빠르게 시작하고 완료하십시오. IMDb에 등급을 추가하면이 원칙을 따릅니다. 등급 위로 마우스를 가져 가면 각 별 위로 이동할 때 추가 할 별 수를 빠르게 볼 수 있습니다. 클릭하여 완료하고 작업을 확인하십시오.

옵션 제공

UX의 수업은 초등학교와 유치원 연애 편지로 돌아갑니다. 너 나 좋아하니? 예 또는 아니오를 확인하십시오.

동일한 개념을 사용하여 훌륭한 미세 상호 작용을 설계 할 수 있습니다. 사용자에게 두 가지 빠른 선택을 제공하십시오. 동작을 시작하거나 중지하려면 누릅니다. 토글하려면 탭하세요. 사용자는 디지털 경험을 선택하고 제어하려는 느낌을 원하지만 여러 화면으로 화면을보고 싶어하지 않습니다.

즉각적인 조치 작성

사용자가 마이크로 인터랙션과 상호 작용하도록하는 가장 좋은 방법은 무엇입니까? 결과는 즉각적이어야합니다. 원하는 결과는 다음과 같아야합니다.

한 번의 탭으로 발생
0.1 초 내에 원하는 동작 제공

마이크로 상호 작용의 즉각적인 성공은 매우 중요합니다. 이러한 요소의 특성이 작기 때문에 작동 지연이 발생하면 사용자가 성가 시게됩니다. (알람을 끄는 데 3 번의 탭이 필요하거나 회의 중 벨소리가 울리는 데 2 초의 지연이있을 경우 얼마나 실망 스러운지 생각해보십시오.)

Instagram에서 좋아요 (또는 달리) 또는 팔로우를 빠르게 전환하는 것이 가장 좋은 예입니다. 그것은 당신의 마이크로 상호 작용이 얼마나 빠를까요.

반복을위한 디자인

마이크로 인터랙션을 사용자 인터페이스의 다른 인터랙티브 요소와 다르게 만드는 것 중 하나는 반복해서 사용될 것이라는 것입니다. 미세 상호 작용은 일반적으로 한 번만 사용하도록 설계되지 않았습니다. (지난 시간에 Instagram 하트 모양의 버튼을 몇 번이나 탭했습니까?)

이 반복적 인 동작을위한 디자인이지만 반복적 인 동작처럼 느껴지지 않아야합니다. 그것은 많이 들리는 것처럼 들릴 수 있지만 탭의 직관적 특성에 달려 있습니다. 명백하고 자연 스럽습니까? 사용자가 작업에 대해 생각할 필요가없는 경우, 반복적으로 완료되는 것을 찾지 못할 것입니다.

일반적으로 허용되는 사용자 패턴, 애니메이션 및 아이콘 스타일을 사용하면 미세 상호 작용을 디자인하는 방법을 안내 할 수 있습니다. 여기서 바퀴를 재발 명하지 마십시오. 사용자가 한 번의 탭으로 작업을 수행하는 방법에 대해 머리를 긁지 않고도 작업을 쉽게 완료 할 수 있습니다.

읽기 쉽고 관련성있게 만들기

너무 자주 잊혀지는 단계는 다음과 같습니다. 마이크로 상호 작용 내부의 명령을 읽고 관련성이 있어야합니다.

읽기 가능 은 마이크로 상호 작용과 관련된 텍스트 또는 지시 사항을 나타냅니다. 단어를 쉽게보고 스캔 할 수 있어야합니다. 디자인 관점에서, 좋은 서체를 선택하고 단어 주위에 충분한 공간이 있는지 확인하고 글자와 배경 사이에 충분한 대비가 중요합니다. 한 눈에 쉽게 읽을 수없는 압축 된 얇거나 참신한 서체를 피하십시오.

관련성 은 사람들이 말하는 것과 같은 방식으로 읽는 텍스트를 말합니다. 드문 언어 나 어색한 문구는 피해야합니다. 사용자가 입력을 시작함에 따라 사라지는 양식 필드 내의 지침이 좋은 예입니다. 이는 표현에서 사용자가 상호 작용하는 브랜드 나 웹 사이트에 대해 기대하는 톤이나 음성을 사용할 때 특히 그렇습니다.

세부 사항에 초점

마이크로 인터랙션은 인터페이스를 구성 할 많은 디자인 세부 사항 중 하나입니다. 당신은 그들 각각에 특별한주의를 기울여야합니다.

미세 상호 작용은 전체 디자인의 일부처럼 느껴야합니다. 그러나이 작은 행동들도 다른 방식으로 생각해야합니다. 색상 선택에서 사용자가 상호 작용해야하는 요소의 크기에 이르기까지 이러한 세부 사항은 동작을 장려하거나 사용자가 다른 것을 위해 디자인을 포기하게합니다.

다른 디자인 요소와 마찬가지로 앱 또는 웹 사이트 내에서 미세 상호 작용에 대한 스타일 및 디자인 규칙 집합을 만들어 디자인 전체에서 동작이 일관되고 사용자가 쉽게 찾고 참여할 수 있도록합니다. 요소가 작거나 상호 작용할수록 더 중요한 세부 사항이됩니다.

단순하게 유지

백만 번 말하는 것으로는 충분하지 않습니다. 단순하게 유지하십시오. 사용하기 어려운 디자인이 너무 많습니다. 멋지다고 생각할 수도 있지만 사용자는 그렇지 않습니다. 그들은 예측 가능성, 일관성 및 단순성을 좋아합니다.

사용자가 실제로 버튼을 탭할 가능성이 높은 항목과 상호 작용하기가 더 쉽습니다. 이것이 원터치 동작이 중요한 이유입니다. 디자인이 충분히 간단한 지 어떻게 알 수 있습니까? 동작, 간단한 지시 사항 및 시각 자료에 대한 피드백 루프와 명확하게 전달되고 이해하기 쉬운 메시지가있는 정의 된 구조가 필요합니다.

개발을 중단하지 마십시오

마이크로 인터랙션 디자인은 진화 과정입니다. 이것은 새로운 개념이므로 항상 바뀌고 있습니다. 사용자가 탭하고 싶은 것을 만드는 새로운 아이디어와 새로운 방법이 있습니다.

미세 상호 작용의 발전에 발 맞추면 Dan Saffer가 처음 정의한 기본 사항으로 돌아갑니다. (그는 또한“Microinteractions : Designing with Details”주제에 대해 가장 권위있는 책 중 하나를 썼습니다.) Microinteractions에는 트리거 동작으로 시작하는 4 단계 프로세스, 상호 작용 작동 규칙, 사용자가 알고있는 피드백 루프가 포함됩니다. 미래의 상호 작용이 어떻게 작용할 것인지 또는 다음에 일어날 것을 지시하는 일이 발생했습니다. 이를 염두에두고 마이크로 인터랙션 성공의 길을 가십시오.