미세한 정보 : 훌륭한 사용자 경험을 만드는 작은 매력.

아름다운 웹 사이트를 만들뿐만 아니라! 고객이 입력했습니다. "혼란스러운". 버튼을 누릅니다. "어떻게 조용해?

이렇게 느낀 적이 있습니까? 웹 사이트를 잘 디자인하려고합니다. 레이아웃은 완벽하고 완벽하지만 다른 사람들이 시도하면 시도합니다. 대신, 피드백은 "웹 사이트는 여전히 보입니다"라고 말합니다. "이 버튼을 누르고 무슨 일이 일어 났습니까? 확실하지 않습니다." 또는 잠시 전에 한 행동이 성공했는지 또는 실패했는지 확실하지 않은 사용자는 혼란스러워합니다.

이 문제는 많은 사람들이 간과하는 "산을 덮는 머리"와 같습니다. 우리는 큰 전체 그림에 전념하고 있습니다. 사용자의 사용자 경험 (사용자 경험)은 끄덕임이나 웹 사이트에 응답하는 대화로 구성된 작은 세부 사항으로 인해 발생한다는 것을 잊어 버릴 때까지 동일합니다. 조용하다면 반응이 없습니다. 벽과 대화하는 것과 다르지 않아 사용자가 확실하지 않다고 느끼고 클릭하여 웹 사이트를 곧바로 닫을 수 있습니다!

삽화에 대한 프롬프트 : 비교 이미지. 한쪽은 여전히 사용하는 웹 사이트 화면입니다. 활발하게 사용자는 혼란스러워 버튼을 가리키고 있습니다. 다른 쪽은 같은 화면이지만, 눌린 후 버튼에서 작은 애니메이션이 발생합니다. 사용자는 행복하게 웃었다.

"아름다운"웹 사이트가 "지루한"및 "혼란스러운"이유는 무엇입니까?

웹 사이트가 아름답게 보이거나 "건조한"경험을 제공하거나 "혼란스러운"이 사용자와 시스템 간의 "대화"에서 발생합니다. 우리는 "상호 작용 (대화식)을 잊어 버릴 때까지"데이터 프리젠 테이션 (프레젠테이션) "에 중점을 둔 경향이 있습니다.

상상하다:

• 응답 부족 (피드백 부족) : 사용자가 "바구니에 제품 추가"버튼을 클릭하면 아무 일도 일어나지 않았습니다. 확인 메시지 없음 숫자가 이동하거나 증가하는 바구니 아이콘이 없습니다. 사용자의 마음의 첫 번째 질문은 "어 ... 압박을 받았습니까?"입니다. 그리고 아마도 반복적으로 누르십시오. 또는 더 나쁜 것은 웹 사이트가 파산 한 후 세상을 떠났다고 생각합니다.
• 정적 디자인 : 웹 사이트는 단지 "디지털 브로셔"가되어 아름답지만 활기차는 아닙니다. 정보, 클릭 또는 작업을 보려면 스크롤이 얼어 붙어 사용자가 머무르거나 다시 돌아 오기를 원하는 매력이 부족합니다.
• 명확하지 않은 상태 변경 : 사용자는 파일을 업로드 할 때와 같이 현재 시스템이 현재 수행하는 작업을 모릅니다. 로드 바나 애니메이션이 없으면 진행 상황을 알려주십시오. 사용자는 웹 사이트가 탁월하다고 생각한 다음 새로 고침을 누르면 모든 것이 끊어집니다!

Micro-Inaction 이라는 세부 사항에주의를 기울이는 것을 잊어 버린 것은 일반 웹 사이트를 기억에 남고 진정으로 사용하기 쉬운 경험으로 변경하는 열쇠입니다.

그림을위한 프롬프트 : 간단한 인포 그래픽 이미지는 디자이너 One Side Miss 전용 레이아웃, 색상, 글꼴 (큰 그림)의 두뇌를 보여줍니다. 스파크가있는 아이콘과 같이로드 아이콘, 체크 마크 아이콘과 같은 작은 아이콘으로 버려진 다른 쪽. 그러나 희미한 회색으로 만들어졌습니다.

"조용한"웹 사이트를 계속하자 ... 결과는 "지루한"것보다 더 무섭습니다.

응답이 부족한 웹 사이트를 갖는 것이 사용자에게 지루해지는 것이 아니라 비즈니스 목표에 예기치 않게 직접적인 영향을 미칩니다. 오랫동안 남아 있다면 이러한 문제는 웹 사이트를 먹기 시작합니다.

• Boundce rate (후면 속도) 더 높음 : 사용자가 들어 오면 혼란스럽고 혼란스러워하거나 웹 사이트를 사용하기가 어렵다고 생각합니다. 그들은 즉시 뒤로 버튼을 누를 준비가되었습니다. 이 신호는 귀하의 웹 사이트가 품질이 충분하지 않을 수 있도록 Google로 전송됩니다.
• 전환율 (목표 요율) 낮은 : 고객 방문을 변경할 수있는 기회 (예 : 회원 신청, 주문)는 줄어들면서 지불 프로세스의 약간의 불확실성만으로도 줄어 듭니다. 고객이 바구니를 쉽게 떠날 수 있습니다. 변환을 증가시키기 위해 웹 플로에서 UX/UI를 업데이트하는 것은 드문 일입니다.
• 브랜드의 신뢰성은 감소합니다. 단단 해 보이고 응답하지 않는 웹 사이트. 브랜드를 비전문가로 보이게하십시오. 세부 사항에주의를 기울이지 않고 소비자의 눈에는 구식이 있습니다.
• 사용자는 다시 돌아오고 싶지 않습니다 : 나쁜 경험. 웹 사이트를 사용하여 좌절감을 느끼면 정상적인 경험보다 더 잘 기억 될 것입니다.

알다시피, 웹 사이트의 "침묵"은 당신의 성능에 시끄 럽습니다. 작은 세부 사항을 통해 좋은 경험을 만드는 것은 단순한 "아름다운 것"이 아니라 필요한 "투자"입니다.

그림을위한 프롬프트 : 2 개의 그래프 이미지 2 개의 그래프 이미지는 "Silent Web"이라는 첫 번째 막대와 비교하여 높은 바운스 속도로, "웹 사이트에 응답하는 웹 사이트"라는 다른 낮은 변환율은 눈살을 찌푸리고 웃는 얼굴 아이콘이 낮은 바운스 속도, 전환율이 낮습니다.

해결책 : 웹을 깨우십시오. "미세한 국제", 큰 작은 매력

이 모든 문제의 해결책은 "Micro-International"(Micro-Integration)을

가능한 한 쉽게 설명하고 싶다면 미세한 정보가 작은 반응입니다. 이는 사용자가 웹 사이트 또는 응용 프로그램에서 행동 할 때 발생합니다. 이는 작업을 확인하고 시스템 상태를 알려주고 사용자를 자연스럽게 탐색하는 데 도움이되는 세부 사항입니다. 사용을 더 매끄럽고 더 만족스럽게 만듭니다

Nielsen Norman Group 의 전문가들은 이를 사용자와의 의사 소통의 핵심으로 정의했습니다. 간단한 예를 상상해보십시오. 우리는 매일 만나는 것 :

• "Ting"사운드가 포함 된 모바일 진동 메시지를 보내려고 눌러
• 소셜 미디어에서 "좋아요"를 누를 때 퍼지는 심장 모양의 애니메이션.
• 앞으로 달려 가서 우리에게 "로드, 잠시 기다려라!"
• 잘못된 정보를 작성할 때 진동 통과 채널

이것들은 아름다운 애니메이션 일뿐 만 아니라 "피드백"입니다. 중요한 것은 우리가 시스템이 "듣기"와 "응답"이라고 느끼게하여 혼란을 줄이고 엄청난 자신감을 키울 수 있도록 도와줍니다. 고객이 클릭하고 구매할 수 있도록 웹 플로우의 UX/UI 디자인 . 이 원리를 마음으로 사용하십시오

삽화를위한 프롬프트 : 아름다운 인포 그래픽은 심장 박동 아이콘, 크로스 아이콘과 같은 미세한 소득의 예로 4-5 아이콘을 보여줍니다.

진짜의 예 : 매일 만나는 미시적 인 행동 (그러나 알지 못했습니다!)

여러 번 소액 국제 최선의 방법은 거의 눈치 채지 못할 때까지 원활하게 작동한다는 것입니다. 그러나 그것은 분명히 차이를 만듭니다. 예제를 살펴 보겠습니다. 그것은 작은 매력을 사용하는 데 성공합니다

1. 새로 고침 : X (Twitter) 또는 Facebook과 같은 소셜 미디어에서 피드의 상단에 있고 손가락을 사용하여 화면을 끌어 내면 로딩 아이콘이 있습니다. "새 콘텐츠로드"및 어딘가에 암초 버튼을 클릭하지 않고 대기하는 동안 좋은 느낌을줍니다.

2. "좋아요"를 누르는 애니메이션 : 좋아요 버튼은 단순한 버튼이 아닙니다. Instagram에서 하트 버튼을 누르거나 매체의 박수를 누르면 작은 애니메이션이 있습니다. 귀엽고 만족스러운 것은 즉시 사용자의 느낌에 보상을 받았습니다. 감정적 표현을 더욱 활기차게 보이게합니다

3. 오류 피드백을 형성하십시오 : 빨간 메시지 대신 "잘못을 채우십시오". 많은 현대 웹 사이트. 예를 들어, Framer 채널을 "떨리는"채널을 채우는 것을 권장합니다.

4. 바구니를 추가 할 때 디스플레이 : "카트에 추가"버튼을 누를 때 주요 전자 상거래 웹 사이트. 버튼이 올바른 표시로 변경 될 수 있습니다. 또는 바스켓의 숫자와 함께 바스켓 아이콘으로 실행되는 제품 이미지 인 작은 애니메이션이 즉시 업데이트 된 것은 명확한 확인이며 사용자가 "제품이 이미 바구니에 있고 계속 쇼핑을하거나 지불 할 수 있습니다."

이 모든 것이 정상적인 사용을 매끄럽고 기억에 남는 상호 작용으로 바꾸는 데 도움이되는 작은 세부 사항임을 알게 될 것입니다.

예를 들어 프롬프트 : GIF 이미지 또는 4 개의 짧은 비디오, 예를 들어, 첫 번째 채널이 새로 고침으로 가져오고, 두 번째는 애니메이션이고, 눌러, 채널 3은 네 가지가 부정확 할 때 흔들리는 형태입니다.

따르고 싶어요, 시작하는 방법? 웹 사이트를 깨우기위한 간단한 점검 목록.

여기에서 많은 사람들이 시도하고 싶은 것을 읽으십시오. 자신의 웹 사이트와 함께 사용하는 소액 인입 행사는 Deity 프로그래머가 될 필요가 없다는 것입니다. 시작할 수 있습니다! 이 간단한 체크리스트를 사용해보십시오. 귀하의 웹 사이트를 탐색하십시오.

1. "키 터치 포인트 식별)를 찾으십시오. 사용자가 웹 사이트에서해야 할 일을 나열하십시오.
   • 버튼 클릭 (Call -to -Action)
   • 충전 및 양식 제출
   • 항해
   • 바구니에 제품 추가 (카트에 추가)
   • 데이터로드 대기 (로딩 상태)
2. "무엇을 알고 싶습니까?" 각 터치 포인트에서 사용자는 무엇을 계속하고 싶어합니까?
   • 버튼을 클릭 할 때 : "클릭"(예 : 색상 변경 버튼, 그림자 또는 작은 애니메이션)을 확인하고 싶습니다.
   • 양식을 보낼 때 : 나는 "성공적으로 전송"또는 "오류가 있습니다"(예 : 녹색 확인 메시지, 형태를 흔들고 잘못된 지점을 말하고 있음)를 알고 싶습니다.
   • 다운로드를 기다릴 때 : "시스템이 작동하지 않는다는 것을 알고 싶습니다. (예 : 로딩 스피너 또는 아름다운 진행률 바)
3. 간단한 것으로 시작하고 시작은 단순하고 미묘합니다. 즉시 복잡한 애니메이션을 만들 필요가 없습니다. 작은 변화는 많은 차이를 만들 수 있습니다
   • 호버 상태 : 버튼이나 링크가 색상을 변경하거나 사용자가 마우스를 재생할 때 조금 움직입니다.
   • 성공 메시지 : 사용자가 양식을 보낸 후 명확하게 감사합니다.
   • 포커스 상태 : 충전 채널이 더 두드러진 테두리를 갖습니다.
4. 올바른 도구를 사용하십시오 : 복잡한 코드를 작성하지 않고도 이러한 물건을 만들 수있는 내장형 대화식 도구가있는 웹 플로우 플랫폼. 또는 개발자와 함께 일하는 경우 개발자가 이러한 아이디어를 전달하여이를 충족시킬 수 있습니다.

핵심은 모든 사용자의 작업이 "의미"응답을 얻는 것입니다. 이것은 사용자 경험을 엄청나게 향상시키는 데 도움이 될 수 있습니다.

삽화 프롬프트 : 아름다운 체크리스트 이미지. 각 항목의 아이콘이있는 위의 4 단계 요약 (예 : 마우스 아이콘, 물음표 아이콘, 시작 로켓 아이콘, 아이콘, 도구)

사람들이 궁금해하는 질문 (그리고 대답은 분명합니다!)

웹 사이트에 움직임 요소를 추가하는 것에 대해 이야기 할 때 항상 질문과 우려 사항이 있습니다. 미세한 행동에 대한 인기있는 질문을 수집했습니다.

Q1 : 미세한 정보를 입력하십시오. 이 웹 사이트에서 웹 사이트 속도가 느려질까요?
A : 항상 그런 것은 아닙니다. 올바르게 마이크로 인플레이션을 수행하면 CSS 애니메이션 또는 SVG로 대부분의 마이크로 정보가 생성되며, 이는 매우 가볍고 거의로드 속도에 영향을 미치지 않습니다. 문제는 큰 GIF 파일, 무거운 비디오 파일을 사용할 때만입니다. 또는 필요한 것보다 더 복잡한 스크립트는 마음이 올바른 기술을 선택하는 것입니다.

Q2 : 좋은 코드를 작성해야합니다. 할 수 있습니까?
A : 항상 필요한 것은 아닙니다! 내가 말했듯이 WebFlow와 같은 No-Code/Low Code 플랫폼에는 강력하고 사용하기 쉬운 상호 작용 도구가 있습니다. 코드를 터치하지 않고 호버 효과, 스크롤 트리거 애니메이션 또는 애니메이션을 클릭 할 수 있습니다. 그러나 매우 복잡한 것을 원한다면 UX/UI 전문가를 것이 좋습니다.

Q3 : 웹의 "애니메이션"과 어떻게 다른가요?
A : 차이점은 "목표"입니다. 일반적인 애니메이션은 앞뒤로 움직이는 배경과 같은 장식 (장식) 일 수 있지만 소기업은 항상 "기능"애니메이션 (기능적) 일 것입니다. "Trigger"(사용자 조치)에 대한 응답으로 발생하고 "피드백"(응답)에 의미를 다시 제공합니다.

Q4 : 많이 입는 것, 더 좋을까요?
A : 아니요! 미세한 국제 기업을 너무 많거나 더 화려하게 사용하면 사용자의 집중력을 성가 시게하고 방해합니다. 모든 단어에 개입하는 사람들과 마찬가지로 규칙은 "미묘함"또는 "약점이 핵심"입니다. 경험을 향상시키는 데 도움이됩니다. 현장과 경쟁하지 않기 위해. UX에 적합한 다크 모드 디자인은 동일한 소프트 해상도 원리를 사용합니다.

삽화를위한 프롬프트 : 2 개의 만화 캐릭터가 이야기하고 있습니다. 첫 번째는 질문을합니다. (자국이 있습니까? 머리 위에) 다른 대답은 자신감이 있습니다. (더 밝은 램프 아이콘이 있습니다). 배경은 코드 및 디자인 도구의 상징입니다.

요약 : 웹 사이트를 깨울 때입니다!

우리는 미시적 인 Actions의 세계를 여행했습니다. 이미 "특수 효과"또는 "장식"이 아니라 좋은 사용자 경험의 "정신"이라는 것을 알 수 있습니다. 작은 세부 사항입니다. 그것은 웹 사이트를 "멋지고 기억에 남는"웹 사이트와 함께 "그냥 사용하는"웹 사이트의 차이를 만듭니다.

Micro-International에주의를 기울이는 것은 사용자에게 신뢰를 구축하는 데 도움이되는 모든 세부 사항을 "관리"하는 것을 보여주는 것입니다. 사용자를 매끄럽게 탐색하고 건조한 상호 작용을 활기찬 대화로 변환하면 브랜드가 전문적이고 현대적으로 보이게합니다.

그러니 기다리지 마세요! 돌아가서 웹 사이트를 탐색합시다. 오늘은 생명을 더할 수있는 작은 지점을 찾으십시오. 클릭 후 "메시지"버튼을 약간 활기차게 만드는 것일 수도 있습니다. 그것은 사용자에게 미소와 인상을주기에 충분합니다.

이제 웹 사이트를 "조용한 브로셔"에서 "채팅 준비가 된 조수"가되기 위해 웹 사이트를 변경할 때가 되었습니까? 하자!

삽화를위한 프롬프트 : 영감을 준 마지막 이미지는 사용자의 손입니다. 화면의 버튼을 클릭하십시오. 그리고 그 버튼에서 나오는 아름다운 빛의 줄이 단 한 번의 클릭에서 발생하는 훌륭한 경험을 전달합니다. "모든 클릭 수가 문제"라고 짧은 메시지로.

‍