[Human Interface Guidelines] Alert

이 글은 Apple의 Human Interface Guidelines를 보고 작성한 글입니다. 

 

경고는 현재 앱과 기기의 상태와 관련된 중요한 정보를 전달한다. 또한 종종 피드백을 요청하기도 한다.

구성 요소

• title
• optional message
• one or more buttons
• optional txt field

→ 이런 요소를 제외하면 시각적인 모양은 정적이며 커스터마이즈할 수 없다.

 

Alert를 사용할 때 주의할 점

• Minimize alerts

경고의 경우 사용자 경험을 망칠 수 있다. 따라서, 구매 확정이나 파괴적 행동(삭제 같은), 문제 공지 같은 중요한 상황에서만 사용해야 한다. 경고 빈도가 낮다면 오히려 사람들은 경고를 심각하게 받아들인다. 각 경고에선 중요한 정보와 유용한 선택을 제공해라.

• Test the appearance of alerts in both orientations

경고는 가로, 세로 모드에서 각각 다르게 등장해야 한다. 경고 메세지의 경우 방향과 무관하게 스크롤 없이 잘 읽힐 수 있도록 최적화해야 한다.

Alert Titles and Messages

• Write short, descriptive, multiword alert titles

화면에서 글씨가 적다면 훨씬 읽기 좋다. 제목에는 추가 텍스트를 통해 설명하지 않도록 시도해라. 왜냐하면 한 단어 제목일 경우 유용한 정보를 거의 제공하지 않으므로, 질문을 하거나 짧은 문장을 사용해라. 만약 제목이 완전한 문장일 경우 대문자와 적절한 종료 구두점을 사용해라. 만약 완전한 문장이 아닐 경우 대문자를 사용하고 종료 구두점은 사용하지 마라.

• If you must provide a message, write short, complete sentences

스크롤을 하는 것을 방지하기 위해 한, 두 문장으로 메세지를 유지해라. 문장 스타일의 대문자와 적절한 구두점을 사용해라.

• Avoid sounding accusatory, judgmental, or insulting

비난 , 판단, 모욕은 피해라. 사람들은 경고가 위험하며 문제가 있는 상황임을 알고 있다. 사용할 수 있는 가장 친절한 톤을 사용하는 한 부정적이고 직접적으로 전달하는 것이 긍정적이고 모호한 것보다 좋다.

• Avoid explaining the alert buttons

만약 경고 텍스트와 버튼 이름을 명확히 작성했다면 이 버튼이 어떤 일을 하는지 설명할 필요가 없다.

Alert Buttons

• Generally, use two-button alerts

두가지 버튼을 가진 Alert는 두가지 대안 중에서 선택을 할 수 있도록 한다. 만약 단일 버튼으로 정보를 알린다면 상황에 대한 아무런 제어를 할 수 없다. 세가지 이상의 버튼이 들어가면 복잡해지고, 스크롤이 필요해질 수도 있다. 이 것은 좋지 못한 사용자 경험을 제공한다. 만약 2가지가 넘는 선택지가 필요하다면 Action sheet를 활용하는 것을 고민해봐라.

• Give alert buttons succinct, logical titles

가장 좋은 button title 1~2개의 단어로 버튼을 눌렀을 때의 결과를 보여주는 것이다. 모든 버튼 title처럼 제목 스타일의 대문자를 사용하고, 마침표는 사용하지 마라. 가능한 범위 내에서 동사나 동사구를 사용해라. yes 와 no 는 사용하지 않는 것이 좋다.

• Place buttons where people expect them

일반적으로 사람들은 탭을 할 때 오른쪽을 한다. 따라서 '취소' 버튼은 언제나 왼쪽에 있다.

• Label cancellation buttons appropriately.

경고 작업을 취소하는 버튼은 항상 Cancel로 레이블이 지정되어 있어야 한다.

• Identify destructive buttons

만약 Alert의 버튼이 파괴적인 액션(삭제)을 한다면 시스템에 맞게 적당한 형식을 갖춰라. 여기에 취소 버튼까지 제공한다면 사람들은 안전하게 파괴적인 액션에서 나올 수 있다. 취소 버튼을 볼드 처리해라.

• Allow people to cancel alerts by exiting to the Home screen.

경고가 표시되는 동안 홈 화면에 접근하면 앱이 종료되야 한다. 이것은 취소 버튼을 누르는 것과 동일한 효과를 가진다. 즉, 특정한 작업을 수행하지 않고 Alert에서 나갈 수 있는 것이다. 만약 Alert에 취소 버튼이 없다면 앱을 나갈 수 있는 취소 액션을 수행하는 것을 고려해봐라.

 

그렇다면 Alert는 어떻게 생성할 수 있을까?

예제코드

func showExistStockAlert(message: String) {
    let alert = UIAlertController(title: nil, message: message, preferredStyle: .alert)
    let okAction = UIAlertAction(title: "확인", style: .cancel, handler: nil)
        
    alert.addAction(okAction)
        
    present(alert, animated: true, completion: nil)
}

<UIAlertController의 매개변수>

• title: 경고창이 누르면 나오는 제목
• message: 경고창을 누르면 중간 부분에 나오는 내용(메세지)
• preferredStyle: .alert / .actionSheet 2가지로 되어 있다. 
  • .alert (이미지 출처: Apple Human Interface Guidelines)
  
  • .actionSheet (이미지 출처: Apple Human Interface Guidelines)
  

 

<UIAlertAction의 매개변수들>

• title: 경고 창이 나오고 누를 수 있는 alert button의 이름을 의미한다.
• style: 스타일은 .default / .cancel / .destructive가 존재한다.
  .default: 일반적인 파란색 button으로 나온다.
  .cancel: bold 처리된 파란색 button으로 나온다.
  .destructive: 빨간색 button으로 나온다.
• handler: 버튼을 누르고 발생할 action에 대해 작성한다. nil을 누르면 그냥 꺼지게 된다.

<Present>

present(어떤 것을 띄워줄지 작성, animated: 어떻게 화면에 표시될 것인지 정해줌 (False면 정말 화면에 띡! 하고 나옴), completion: 표시되고 어떤 일을 할지 정해줌)