성공과 정서적 반응의 메시지
1) 성공 메시지
UX- 피드백 "성공" (성공 상태 피드백) 은 양식 발송, 지불 완료, 등록 확인, 설정 저장 등 성공적인 조치 후 사용자가받는 긍정적 인 피드백입니다.
이 미세 순간은 UX 심리학의 강력한 도구입니다. 통제 감각을 향상시키고 노력을 보상하며 행동 습관을 강화합니다. 행동 설계 측면에서, 그것은 제품에 대한 신뢰와 충성도를 구축하는 "도파민 반응 순간" 입니다.
좋은 성공 메시지는 세 가지를 수행합니다
1. 결과를 확인합니다. 사용자는 모든 것이 올바르게 끝났다는 것을 의심하지
2. 감정을 만듭니다. 기쁨, 만족, 완전성.
3. 다음 단계를 지정하십시오. 지금 할 수있는 일-공유, 반환, 계속.
2) 성공 메시지의 종류
3) UX 성공 메시지의 기본 원칙
1. 세부 사항. 정확히 무슨 일이 있었는지: "문서가 확인되었습니다", "지불이 승인되었습니다".
2. 맥락. 사용자의 단계를 고려하십시오: regivened
3. 시간. 메시지는 확인 직후 지체없이 나타납니다.
4. 간결함. 1-2 줄의 텍스트 + 이해할 수있는 CTA.
5. 시각적 강화. 색상, 애니메이션, 틱 아이콘, 사운드 또는 진동 신호.
6. 정서적 균형. 행동이 일상적인 경우 과도한 "축제" 가 없습니다.
7. 다음 단계. 사용자를 "막 다른 골목" 으로 두지 마십시오. 논리적 인 연속을 제안하십시오.
4) 성공 메시지의 구조
템플릿:- 제목 (선택 사항): 짧은 확인 ("완료!", "성공적으로 저장").
- 텍스트: 결과를 구체화합니다.
- CTA: 다음 관련 조치.
- 시각화: 긍정적 인 결과를 강조하는 가벼운 애니메이션/아이콘.
- 표시 시간: 토스트의 경우 2-4 초 또는 모달 창을 클릭하기 전에.
5) 다른 시나리오에 대한 패턴
5. 1 등록/승인
"환영합니다! 계정이 생성되었습니다 확인을 위해 메일을 확인하십시오 "
"성공적으로 서명했습니다. 당신이 그만 둔 곳을 데리러 "
5. 2 개의 지불/재충전
"지불이 수락되었습니다! 자금은 15 분 이내에 크레딧됩니다. "
"보충이 성공했습니다. 잔액이 업데이트되었습니다 "
5. 3 KYC/검증
"문서가 확인되었습니다. 모든 기능을 사용할 수 있습니다 "
"행복한 행사를 축하합니다! 계정이 완전히 검증되었습니다 "
5. 4 개의 설정/저장
"변경 사항이 저장되었습니다".
"설정이 업데이트되었습니다. 새 값은 다시 시작하면 적용됩니다 "
5. 5 보너스/성과
"행복한 행사를 축하합니다! 50 FS 보너스를 받았습니다 "
"게임 위크 작업을 완료했습니다! [보상 받기] "
6) 정서적 메시지 디자인
성공 메시지는 인터페이스의 감정적 환경의 일부입니다. 그들은 시스템의 "활기" 느낌을 형성합니다.
정서적 반응 도구:- 마이크로 애니메이션: 진드기, 색종이 조각, 부드러운 깜박임의 부드러운 모습.
- 색상: 녹색/청록색-안전 및 수용과의 연관.
- 소리/진동 (모바일): 시각적 위상과 일치하는 짧은 신호.
- 톤: 마케팅 행복감 대신 차분한 자신감.
7) UX 균형: 합리적이고 감정적
모든 성공이 같은 것은 아닙니다. 사용자 인식은 두 가지 수준으로 나뉩니다
합리적인 UX: "조치가 완료된 것을 봅니다".
정서적 UX: "시스템이 저의 기여에 감사했습니다. 만족합니다".
대량 제품 (뱅킹, 카지노, 거래 플랫폼) 에서는 감정의 기울기가 허용됩니다
일상 활동 → 중성 양성 신호;
중요한 업적 → 정서적 강조 (그림, 소리, 보너스).
가장 중요한 것은 본질을 "효과" 로 대체하지 않는 것입니다. 감정은 성공에 대한 인식을 높이고 방해하지 않아야합니다.
8) 감정의 현지화와 문화
다른 언어는 기쁨과 "형식" 을 다르게 표현합니다.
영어로 "잘 했어요!" 셀라 바 산스 디어; 독일어에서는 "Erfolgreich abgeschlossen" 보다 더 적합합니다.
터키어 및 아랍어 인터페이스에서는 과도한 느낌표를 피하는 경우가 많습니다.
지역화에서는 같은 길이의 선, 같은 감정의 힘이 중요합니다.
번역가를위한 저장 톤 맵: 시나리오에 따라 허용되는 "기쁨" 수준.
9) 성능 지표
성공 메시지에서 CTA의 CTR (다음 사용자 수).
반응 시간: 자동 숨기기 전에 메시지가 닫혀 있는지 여부.
반응 수 (기능 재사용).
다음 단계의 오류율은 피드백의 명확성을 나타내는 지표입니다.
UX 인터뷰: "조치가 완료되었다는 것을 알고 있습니까? ”.
- 구의 변형 ("준비" 대 "성공").
- 그림/아이콘의 존재.
- CTA의 존재.
- 감정의 톤 (중립 대 지원).
10) 반 패턴
흐름을 차단하는 과부하 된 애니메이션.
진지한 단계에서 지나치게 즐겁거나 "유치한" 톤.
정확히 완료된 내용을 나타내지 않고 중립 "OK".
명백한 연속이있는 경우 CTA가없는 메시지.
상태와 색상 불일치 (예: 성공에 대한 빨간색 배경).
장기 작업 중 확인 부족 (사용자가 확실하지 않음).
11) 시험판 점검표
- 활동이 완료된 것이 분명합니까?
- 정확히 무엇을합니까?
- 메시지가 지나치게 감정적이지 않습니까?
- 다음 단계에 CTA가 있습니까?
- 색상과 아이콘 일치 성공 패턴?
- 2-4 초 동안 보이는 메시지 (또는 동작 전)?
- 어둠과 모바일 테스트?
- 현지화가 의미와 톤을 변경 했습니까?
12) 예 전/후
지불:- 전에: "OK"
- 후에: "+ 지불이 수락되었습니다! 기금은 계정으로 인정되었습니다. [역사보기] "
- 이전: "등록 완료"
- 후에: "환영합니다! 계정이 생성되었습니다 확인을 위해 메일을 확인하십시오 "
- 이전: "변경 사항 저장"
- 이후: "+ 설정이 업데이트되었습니 새로운 설정이 이미 적용되었습니다 "
- 이전: "문서 확인"
- 후에: "+ 모든 것이 준비되었습니다! 검증이 통과되었습니다. 결론과 보너스가 제공됩니다. "
13) 설계 시스템 템플릿
성공한 메시지 구성 요소:jsx
<SuccessMessage title = "Done!"
message =" Your payment was successful."
icon="check-circle"
duration={3000}
primaryAction = {{label: "View history," onClick: openHistory}}
tone="positive"
/>14) 빠른 문구 패턴
짧은 치트 시트
구체적으로 성공을 확인하십
약간의 감정을 더하십시오-재생이 없습니다.
시각적으로나 텍스트로 긍정적 인 점을 강조하십시오.
다음 단계를 제안하십시오.
속도, 가독성 및 문화적 균형을 확인하십시오.