[ 서비스 기획 & UX ] UIUX원칙 : 3 MicroInteraction 6가지 원칙 가이드라인.

 

 

 

 

 [ 서비스 기획 & UX ] UIUX원칙 : 3

  MicroInteraction 6가지 원칙 가이드라인.

 

---

 

 

∇ 마이크로 인터렉션 6원칙.

목 차

1. 시스템 상태를 보여줍니다.
2. 버튼과 컨트롤을 분명해 보이게 만들어줍니다.
3. 의미 있는 전환효과를 만듭니다.
4. 사용자가 시작할 수 있도록 도와줍니다.
5. UI상의 변화를 강조합니다.
6. 재밌는 디테일들을 추가합니다.
7. 마이크로 인터렉션을 디자인할 때 고려해야 할 사항들.

 

---

1. 시스템 상태를 보여줍니다.

---

      "시스템 상태"를 유저(사용자)에게 인지시키는 것은

       ' 제이콥 닐슨'이 언급한 것처럼 첫번째 휴리스틱 평가 지침입니다.

 

 

     ex ) 데이터업로드, 다운로드 프로세스, 새로고침 등에서

                애니메이션 효과를 활용하면  어떤 작업이 이우러질 지 사용자가 빠르게 이해할 수 있습니다.

 

           

데이터 다운로딩 모션

---

2. 버튼과 컨트롤을 분명해 보이게 만들어줍니다.

---

      버튼이나 컨트롤을 만들 때는 사용자가 인풋을 주면 비주얼이나 모션 반응을 통해 명료성을 높여줄 수 있습니다.

         

 

 

 

---

3. 의미 있는 전환 효과를 만듭니다.

---

    MicroInteraction을 이용하면 페이지 사이에 시각적 연결 고리를 만들 수 있고 UI에 명료성을 부여합니다.

 

    모션 효과가 들어간 디자인은 즐거움과 정보를 동시에 전달하면서, 사용자의 이목을 효과적으로 끌어낼 수 있는데,

      이는 특히 많은 정보들을 한정된 스크린 상에 담아 보여줘야 하는 '스마트워치'나 '모바일 디바이스'에서 중요합니다.

 

     

모핑 되는 아이콘 : 상황이 바뀌면 모양도 바뀜.

 

IOS의 UI의 전환 효과

 

색상과 고정 요소를 적절히 활용하여 시각적으로 연결

 

 

 

---

4. 사용자가 시작할 수 있도록 도와줍니다.

---

  'MicroInteraction은 정보를 보여주고

  사용자가 효율적으로 자신의 목표점에 도달할 수 있도록(프로덕트 사용목적) 도와줍니다.

 

     예를 들어, 온보딩 페이지에서 가장 주요한 기능과 컨트롤을 강조하여 

                            유저를 가이드하고 교육시킬 수 있습니다.

 

매끄러운 온보딩 뷰

 

---

5. UI상의 변화를 강조합니다.

---

마이크로인터렉션은 사용자의 이목을 끌고 올 수 있기 때문에

알림 기능과 같은 중요한 디테일에 사용됩니다.

 

알림 기능[ 이미지 : Arjun Kani]

 

---

6. 재밌는 디테일들을 추가합니다.

---

   마이크로 인터렉션은 기본적으로 전환될 때 사용하지만,

           유저에게 즐거움을 주는데도 사용할 수 있습니다.

 

 

---

7. 마이크로 인터렉션 디자인을 할 때 고려해야 할 사항들

---

     √ 마이크로 인터렉션을 눈에 거슬리지 않으면서 제대로 가능하게 만듭니다.

     √ 오래 지속되어야 함을 염두하고 만듭니다.

     √ KISS [ Keep it Simple, Stupid ] 원칙을 따릅니다.

     √ 타깃 사용자와 콘텍스트에 대해 알고 있는 지식을 활용해서 보다 정교하고 효과적으로 만듭니다.

     √ 다른 UI 요소들과 시각적 조화를 이룰 수 있도록 만듭니다.

 

 

' 마이크로 인터렉션은 작은 디테일에 집중하는 것이 크고 강력한 결과를 줄 수 있음'을 보여줍니다.