피드백
피드백 (Feedback)
사용자가 시스템과 상호작용해야 할 때, 애플리케이션이 현재 무엇을 하고 있는지 이해시키고 사용자의 다음 행동을 안내하며 조작 결과를 이해시키기 위해, 다양한 모드로 정보나 결과를 피드백해요. 디자이너가 피드백을 사용하거나 일부 피드백을 커스터마이징할 때 다음을 주의해 주세요.
출처: 문서
본문
- 모든 단계에서 사용자에게 필요하고, 긍정적이며 즉각적인 피드백을 제공하세요.
- 과도한 피드백은 피하세요. 사용자에게 불필요한 방해가 되지 않도록, 사용자가 즉시 결과를 볼 수 있는 단순한 조작에서는 피드백 프롬프트를 생략할 수 있어요.
프롬프트 메시지 (Prompt message)
사용자 인터페이스가 아무리 잘 되어 있어도 어떤 제품도 사용자 안내와 정보 프롬프트 없이는 운영될 수 없어요. 프롬프트 정보는 사용자에게 무엇을 알아야 하고 어떤 조치를 취해야 하는지 알려 주는 데 사용돼요.
Alert (알림)
비차단(non-blocking) 정보 표시예요. 사용자의 현재 조작을 방해하지 않아요. 보통 페이지의 특정 위치(우선 상단)에 머물러요. 비플로팅 레이어의 정적 표시 형태는 항상 표시되며 자동으로 사라지지 않아요. 사용자가 닫을 수 있어요.
참고: 닫기 버튼은 비즈니스 요구에 따라 추가하거나 숨길 수 있어요.
Notification (공지)
공지 내용이 복잡할 때 사용돼요.
시스템이 적극적으로 푸시하는 중요한 전역 공지 정보가 시스템의 오른쪽 위 모서리에 표시돼요.
Badge (배지)
아이콘이 있을 때는 보통 아이콘의 오른쪽 위 모서리에, 아이콘이 없을 때는 보통 제목 뒤에 있어요.
집계(aggregate) 유형의 메시지 프롬프트로, 보통 공지 아이콘이나 아바타의 오른쪽 위 모서리에 나타나며, 눈에 띄는 시각적 형태로 사용자의 시선을 끌어요.
참고: 비교적 중요하고 사용자와 관련된 정보 프롬프트는 숫자 정밀도 프롬프트(digital precision prompts)를 사용하고, 가중치가 높지 않고 사용자가 특별히 신경 쓰는 메시지가 아니면 빨간 점(red dot)으로 팁을 만들어요.
Help (도움)
Popover
대상 요소에 추가 설명과 관련 동작이 있을 때, 카드에 저장하고 사용자의 조작 행동에 따라 표시할 수 있어요.
참고: Tooltip과 Popover의 차이는 Popover가 링크나 버튼 같은 더 복잡한 콘텐츠를 담을 수 있다는 점이에요.
Tooltip
아이콘, 그래픽, 링크 등 지시된 객체를 정확히 설명하는 데 사용돼요. 마우스를 넣으면 프롬프트가 표시되고, 마우스를 빼면 프롬프트가 사라져요. 그리고 복잡한 텍스트와 조작은 담지 않아요.
프로세스 피드백 (Process feedback)
조작 중에 가능한 한 상태의 피드백을 사용자에게 주고, 즉각적인 응답은 사용자에게 신뢰감을 줘요.
로딩 상태 진행 피드백 (Loading status progress feedback)
사용자가 오래 기다릴 필요가 없을 때 사용돼요.
조작이 완료되는 데 시간이 걸릴 때(보통 2초 이상) 시스템은 즉시 알림을 주고, 로딩 상태나 로딩 진행률 바를 명확히 알리며 사용자와 커뮤니케이션을 유지해야 해요.
조작이 완료되는 데 오랜 시간이 걸릴 때 사용되며, 조작의 현재 진행률과 상태를 보여 줘요.
참고: 로딩 시간이 길다면 취소(cancel) 조작을 제공해야 해요.
입력 피드백 (Input feedback)
조작 중에 다양한 검증 규칙과 폼을 사용해 사용자가 실수를 발견하고 시기에 맞게 고칠 수 있게 해요.
참고: 피드백 텍스트는 설명할 블록 뒤에 이어지고(피드백 내용은 일반적으로 오류 설명) 자동으로 사라지지 않아요(사용자가 해당 상호작용을 수행하면 사라져요).
Popconfirm
상호작용 형태가 전체 화면 중앙 모드 대화상자보다 가벼워요.
대상 요소의 조작에 사용자의 추가 확인이 필요할 때, 대상 요소 근처에 플로팅 레이어 프롬프트를 띄워 사용자에게 질문해요.
결과 피드백 (Result feedback)
조작 중에 가능한 한 상태의 피드백을 사용자에게 주고, 즉각적인 응답은 사용자에게 신뢰감을 줘요.
Message (메시지)
사용자가 오래 기다릴 필요가 없을 때 사용돼요.
조작에 의해 트리거되는 피드백 플로팅 레이어가 상단 중앙에 표시되고 자동으로 사라져요. 사용자의 조작을 방해하지 않는 경량 알림이에요.
중요한 실패 메시지는 대화상자 프롬프트를 사용하고 실패 이유를 알려 주는 것을 제안해요.
중요한 실패 메시지에는 경량 프롬프트를 권장하지 않아요.
피드백 플로팅 레이어의 표시 시간이 짧기 때문에(기본 3초), 더 중요한 실패 공지는 정보 누락을 피하기 위해 대화상자로 알리는 것이 권장돼요.
대화상자 피드백 (Dialog feedback)
조작에 의해 트리거되는 피드백 플로팅 레이어가 페이지 중앙에 위치하고, 확인이나 취소 버튼으로 피드백 내용을 닫을 수 있어요. 피드백 레이어가 나타날 때 사용자는 어떤 조작도 할 수 없어요. 중요한 피드백을 위해 사용돼요.
참고: 실패가 아닌 경우 불필요한 알림 표시를 피하세요. 대화상자는 매우 중요한 정보를 전달할 때만 필요한 강력한 피드백 메커니즘이에요.