처리 후에도 메시지가 여전히 관련성이 있는지 확인하세요.
권장 조치를 취한 후 화면으로 돌아갑니다. 문제가 해결되면 배너를 업데이트하거나 사라져야 합니다. 오래된 정보로 인해 사용자가 계속 걱정하지 않도록 하세요.
배너 디자인 시스템
중요한 정보를 올바른 맥락에 배치하세요.
체크리스트 내용
검토 진행 상황
01
구조와 의미
사용 맥락에 따라 정보와 프레젠테이션을 비교합니다.
02
상호 작용 및 유용성
작업을 시도하고 상태를 변경한 후 작업을 계속하세요.
진행 상황은 이 브라우저에 자동으로 저장됩니다.
안내
검토 방법
예시
활용 예시
계정 정보를 추가해야 합니다
"계속하려면 정보를 입력하세요" 배너에는 올바른 누락된 섹션으로 이동하는 버튼이 있습니다. 추가 후에는 배너가 다시 나타나지 않습니다.
변형 및 사용 사례
메시지 수준
정보, 경고, 오류 및 성공을 동일한 색상의 레이블이나 아이콘으로 구분합니다.
색상을 제거할 때 배너를 읽으십시오. 사용자는 여전히 주의를 기울여야 하는지 아니면 더 많은 것을 알아야 하는지 알고 있습니다.
예시 '미완료 결제'에는 경고 아이콘과 확인 작업이 있습니다.
메시지 구조
방금 일어난 일을 먼저 설명한 다음 영향과 간단한 치료 단계를 설명합니다.
긴 형식의 메시지와 동적 측정항목을 사용해 보세요. 모바일에서 중요한 작업을 숨기지 마세요.
예시 "세션이 곧 만료됩니다. 다시 로그인하기 전에 초안을 저장하세요."
포함된 작업
올바른 이벤트 처리 작업의 우선순위를 지정하고 메시지가 필요하지 않은 경우 닫기 옵션을 추가할 수도 있습니다.
작업을 클릭한 다음 돌아갑니다. 문제가 해결되면 더 이상 오류 배너가 표시되지 않습니다.
예시 연결 끊김 알림의 '다시 연결' 버튼을 눌러도 홈 페이지로 연결되지 않습니다.
페이지와 대조
눈에 띌 만큼 메시지를 눈에 띄게 유지하되 페이지의 주요 콘텐츠를 훼손하지 않도록 하세요.
배너를 어두운 배경과 테마에 배치하세요. 텍스트, 링크 및 버튼을 읽을 수 있어야 합니다.
예시 테두리와 아이콘이 있는 경고 배너. 설명에서는 여전히 읽기 쉬운 글꼴 크기를 사용합니다.
의미에 따른 기호
아이콘을 사용하여 메시지 유형을 나타내고 텍스트 레이블을 정보의 기본 소스로 유지합니다.
아이콘을 숨기고 다시 읽으세요. 메시지는 독립적이어야 하며 의미를 잃지 않아야 합니다.
예시 자물쇠 아이콘은 "아직 편집 권한이 없습니다"라는 문장과 함께 표시됩니다.
알림 위치
영향을 받는 영역 근처에 알림을 배치합니다. 세션 전체 공지 사항은 페이지 상단에서 확인할 수 있습니다.
페이지를 스크롤하고 키보드를 엽니다. 배너는 해당 영역의 처리 버튼을 가리지 않아야 합니다.
예시 필터 오류는 결과 옆에 있습니다. 서비스 유지관리가 최우선입니다.