[HIG] Alerts

고라니·2024년 2월 5일

HIG alerts

HIG

목록 보기

7/11

Alerts

Alerts를 통해 중요한 정보를 즉시 알릴 수 있다.

문제를 알리거나, 데이터의 손상 경고, 중요한 작업 확인 등을 제공할 수 있다.

Best practices

Alert를 어떻게 사용해야하는지 가이드라인을 살펴보도록 하자.

빈번하게 사용하지 말아라
: alerts는 중요한 정보를 제공하지만 현재 작업을 중단시킨다. 필수 정보와 유용한 동작만을 제공해라.
단순 정보를 제공하는데 사용하지 말아라
: 정보를 제공하지만 즉각적으로 조치를 취할 수 없는 단순 정보 제공이 목적이라면 alerts가 아닌 다른 방법으로 정보를 전달하는 것이 좋다.
취소 가능한 작업에는 사용하지 말아라
: 파일을 삭제하는것은 취소가 가능하다(휴지통에서 꺼내기) 그렇기 때문에 alerts를 사용할 필요 없음. 하지만 '휴지통 비우기'는 취소가 불가하다. 실수로 파괴적인 작업을 하지 않도록 alerts를 사용하여 방지할 수 있다.
앱이 시작될 때 알림을 표시하지 말아라
: 앱 실행시 즉시 새롭고 중요한 정보를 알리고 싶다면 해당 냉용을 쉽게 표현할 디자인을 도입하거나 다른 방법들을 고려해라

핵심 원칙은 알림을 최소한만 사용하고, 각 알림이 중요한 정보와 유용한 동작만을 제공하도록 하는 것이다.
alerts는 현재 작업을 중단시키기 때문에 너무 빈번하게 사용하면 안됨
불필요한 정보를 제공하는 알림이나 빈번한 취소 작업에 대한 알림은 피해야 하며,
앱이 시작될 때 알림을 표시하지 않는것이 좋다고 한다. 다만 문제 발생시 적절한 대체 수단이 필요하다.

Anatomy

alerts는 플랫폼 및 기기마다 다른 디자인을 가지고 있다.

Content

일반적으로 alerts는 제목, 정보(선택), 버튼(최대 3개)을 표현한다.

iOS, iPadOS, macOS, VisionOS에서 alerts는 텍스트 필드가 포함될 수 있다.

macOS, visioOS에서는 아이콘과 액세사리 뷰가 포함될 수 있다.

macOS 알림에서 제한 체크박스(suppression)와 도움 버튼(help button)을 추가할 수 있다.
- 억제 확인란(suppression checkbox): 사용자가 향후 동일한 종류의 알림을 표시하지 않도록 하는 체크박스
- 도움 버튼(help button): 사용자에게 추가 도움말 또는 지침을 제공하는 패널 표현

명확하고 친근한 톤을 사용하여 확실하게 내용을 전달해라
: 일부 심각한 상황을 설명해야 하기 때문에 확실한 상황을 직설적이고 친절하게 전달해야 한다.
명확하고 간결하게 설명하는 제목을 작성
: 제목은 사용자가 신속하게 상황을 이해할 수 있도록 명화하고 간결하게 작성해라. 발생한 문제와 이유를 맥락에 맞게 잘 설명해야 함(Error, 329347 등 명확하지 않는 표현은 x), 너무 긴 제목 또한 피해야 함. 제목이 단편적인 문장(완전한 문장이 아닌 경우)이라면 마침표를 사용하지 말고 대문자로 표현
정보 텍스트를 포함할 필요가 있다면 사용해라
: 추가 정보를 전달하기 위해 정보 텍스트를 사용할 수 있다. 추가할 필요가 있는 경우 최대한 짧고 완전한 문장, 문장 스타일, 대문자, 적절한 마침표 사용해라
alerts 버튼을 설명하지 말아라
: alerts의 텍스트와 제목이 명확하다면 버튼을 설명하지 않아도 명확하게 이해할 수 있다.
발생한 문제를 해결하기 위해 사용자의 입력이 필요한 경우에만 텍스트 필드를 포함해라
: (ex:안전한 텍스트 필드를 제공하여 암호를 받아야 하는 경우)

alerts는 모달뷰로 보여지며 각 픔랫폼 및 기기에서 다르게 보일 수 있다.

Button

간결하고 논리적인 타이틀을 만들어라
: 1 ~2 단어로 버튼 선택의 결과를 표현하는것을 목표로 작성, 알림 텍스트와 직접 관련된 동사 및 동사 구 사용 권장(모두 보기, 답장, 무시 등), "Yes"와 "No"를 피해라, 작업을 취소하는 경우에는 "Cancel"사용, 앞글자에 대문자를 사용하고 마침표사용 x
alerts가 단순히 정보를 제공하는 경우를 제외하고 "OK"를 사용을 피해라
: 사용자에게 어떤 작업을 수행할 것인지 확인하도록 요청하는 경우 "OK"는 모호할 수 있다. 구체적인 버튼 제목을 사용하면 사용자가 버튼이 어떤 동작을 수행하는지 더 잘 이해할 수 있다.
사람들이 기대하는 위치에 버튼을 배치해라
: 사용자가 가장 자주 선택하는 버튼은 일반적으로 행의 뒷쪽, 스택의 맨 위쪽에 배치되어야 한다. 기본 버튼은 항상 행의 뒷쪽이나 스택의 맨 위쪽에 위치해야 한다, 취소 버튼은 일반적으로 행의 앞쪽이나 스택의 만 아래에 배치된다.
사람들이 고의로 선택하지 않은 파괴적(destructive)인 작업을 수행하는 버튼을 식별하기위해 파괴적인 스타일을 사용해라
: 사용자가 의도적으로 선택한 작업에는 파괴적인 스타일을 적용하지 않아야 한다, 반대로 의도하지 않은 파괴적인 작업을 수행할 수 있는 버튼에는 주의를 기울이는 것이 좋다.
(제대로 이해한 것인지 잘 모르겠지만 모르고 파괴적인 작업을 수행하게 될 가능성이 있는 경우 파괴적인 스타일을 적용하여 이를 방지해야 하고, 그렇지 않은 파괴적인 작업에는 따로 파괴적인 스타일을 적용하지 않아도 된다는 의미로 이해했다.)
파괴적인 작업이 있는경우, 사용자가 해당 작업을 취소할 수 있는 안전하고 명확한 "Cancel"버튼을 포함해라
: 'Cancel'버튼은 항상 alerts 작업을 취소하는 데 사용되며, 기본 버튼으로 설정하지 않도록 주의해야 한다.(사용자가 주의하지 않고 버튼을 선택하지 않게 유도하기 위해 기본버튼 사용x), 기본 버튼 alert를 사용할 때는 Cancel대신 Done 사용

Platform considerations

iOS, iPadOS

의도적인 작업과 관련된 선택지를 제공할 때 alert 대신 action sheet를 사용해라
: 예를 들어 편집중인 메시지를 취소할 때 앤션 시트는 세 가지 선택지를 제공한다. 편집, 삭제, 저장. alert도 파괴적인 결과를 초래할 수 있는 작업을 처리하는데 도움이 되지만 추가 선택지를 제공하지 않는다.
가능하면 스크롤이 필요한 알림을 표시하지 말아라
: 텍스트가 길면 스크롤 가능성 생긴다. 메시지를 간결하게 작성하여 스크롤 가능성을 최소화 시켜라

macOS

macOS에서는 앱 아이콘을 자동으로 알림에 표시함 (대체 아이콘이나 심볼 제공도 가능)

macOS에서는 다음을 수행할 수 있다.

반복 알림을 구성하여 동일한 알림의 후속 발생을 억제할 수 있도록 함
: 사용자가 동일한 알림을 반복해서 받는것을 막기 기능
추가 정보를 제공해야 하는 경우 사용자 정의 뷰 추가
: alert에 추가 정보를 제공해야 하는 상황이라면, 기본 alert외에 추가로 뷰를 구성하여 추가적인 내용을 제공받을 수 있음
주의 기호를 절제해서 사용
: 주의 기호는 중요한 상황을 강조하지만, 너무 빈번하게 사용하면 중요성이 약해짐. 정말 필요한 상황에서만 사용. 일상적인 작업이나 데이터 덮어쓰기와 같은 경우에는 사용을 삼가