알림 디자인에 대한 종합 가이드

종합적으로 알림이라고 하는 디지털 제품의 주변 메시지는 사용자 경험에 해를 끼쳐서는 안 됩니다. 대신 사람들이 목표를 달성하는 데 도움이 되는 경험에 기여해야 합니다. 제품 디자인 프로세스 초기에 알림 디자인을 해결하면 더 나은 결과를 얻을 수 있습니다.

한 그룹의 건축가가 3층짜리 집을 설계하고 몇 달 동안 청사진을 작성하는 작업을 한다고 상상해 보십시오. 인상적이다! 아름다워! 그러나 다이어그램이 거의 완성될 무렵, 그들 중 한 명이 외칩니다. “ 잠깐! 사람들은 1층에서 3층으로 어떻게 가나요? "그들은 계단을 잊어 버렸습니다!

마찬가지로 제품 디자이너는 작지만 중요한 UX 개선 사항을 마지막으로 생각하는 경향이 있습니다. 비어 있는 상태와 마찬가지로 디자이너는 알림 디자인(경고, 오류 메시지, 확인, 공지, 승인)을 끝까지 남겨두는 경향이 있습니다. 개발자가 “ 오류를 어떻게 처리합니까? ” 나중에 생각하기 때문에 이러한 접근 방식은 종종 UX를 손상시키는 조잡한 "frankendesigns"를 생성합니다.

이러한 시나리오를 피하려면 알림 디자인에 대한 통합 접근 방식을 사용하여 사용자 경험을 향상 하는 것이 가장 좋습니다. 설계자가 모든 정보를 손쉽게 얻을 수는 없지만 제품 설계 수명 주기 동안 포괄적인 알림 프레임워크를 설계하면 예상치 못한 사용 사례에 대해 제품을 준비하는 데 도움이 됩니다.

알림 디자인을 시작할 때 염두에 두어야 할 필수 디자인 원칙은 사람들이 작업을 수행하는 데 방해가 되지 않도록 도와야 한다는 것입니다. 초기에 제품 프로토타입을 테스트하고 상호 작용을 지원하는 데 주변 장치 메시징이 가치가 있는 사용 사례를 매핑하는 것이 필수적입니다. 그러나 사용자와 의사 소통하는 가장 좋은 방법은 다양하며 몇 가지 주요 요소에 따라 다릅니다.

• 전달되는 정보의 유형
• 정보의 긴급성—즉시 확인해야 하는지 여부
• 정보의 결과로 사용자 조치가 필요한지 여부

알림의 스타일과 동작을 제외하고 UX 카피로 알림 의 톤 을 설정해야 합니다. 알림의 모든 문구는 명확하고 간결하며 유용해야 합니다. 잘 설계된 알림 시스템은 접근성을 염두에 두고 설계되었으며 다양한 언어를 수용할 수 있는 유연성을 갖추고 있습니다.

알림에 사용되는 용어는 비슷한 경향이 있지만 팀과 프로젝트마다 약간씩 다릅니다. 알림 프레임워크의 용어(무엇이라고 부름)를 결정하고 모든 사람 이 무엇을, 어디서, 어떻게 사용하는지에 대한 근거를 동기화하는 것은 디자이너의 책임입니다.

더 나은 알림 디자인을 통한 더 나은 사용성

알림은 제품 사용성에 필수적인 기능을 합니다. " 시스템 상태의 가시성 "은 Nielsen Norman Group의 "사용자 인터페이스 디자인을 위한 10가지 사용성 휴리스틱" 목록에서 1위입니다. 규칙은 " 시스템은 합리적인 시간 내에 적절한 피드백을 통해 사용자에게 항상 진행 상황에 대해 알려야 합니다. "

알림 시스템은 디지털 제품 UX의 많은 부분을 차지하므로, 알림 시스템이 없으면 제품은 마치 무언가가 빠진 것처럼 느껴질 것입니다. '시스템 상태의 가시성'과 피드백이 없다면 대시보드 없이 자동차를 운전하는 것과 같다.

자동차의 대시보드는 자동차의 운영 체제에 대한 가시성을 제공하고 안전하고 안정적인 작동을 보장하도록 설계된 게이지, 아이콘 및 조명으로 가득합니다. 우리가 운전할 때 엔진 온도, 배터리 상태, 오일 압력, 조명, 브레이크, 에어백 등에 대한 판독 및 알림 클러스터가 계속 정보를 제공합니다. 회전을 원할 때 방향 지시등에 깜박이는 표시등이 있고 딸깍하는 소리와 함께 피드백을 제공합니다. 연료 탱크가 부족할 때 표시하는 연료 탱크 게이지도 있습니다.

디지털 제품과 동일한 방식으로 작동합니다. 시스템 상태 및 피드백의 가시성은 사용성 측면에서 기본이며 사용성은 훌륭한 사용자 경험의 기반입니다.

유용한 알림 프레임워크 구축

알림 프레임워크를 잘 설계하려면 알림을 "신호 강도"의 관점에서 생각하는 것이 도움이 될 수 있습니다. 어떤 주변 메시지에 더 많은 주의가 필요한가요? 예를 들어, 잠재적으로 파괴적인 상호 작용에는 "더 큰" 알림이 필요하고 비파괴적인 상호 작용에는 "조용한" 알림이 필요합니다.

사람들에게 적절한 양의 알림을 보내는 것은 균형을 유지하는 작업 이며, 이를 과도하게 사용하면 위험이 따릅니다. 제품은 부정적인 피드백을 많이 받을 수 있으며, 최악의 경우 제품을 포기할 정도로 사람들을 소외시킬 수 있습니다. 따라서 디자이너는 UX를 신중하게 고려하고 목적이 잘 정의된 메시지만 보내야 합니다. 사용자에게 모든 알림 또는 적어도 일부 알림을 끌 수 있는 유연성을 제공하는 것도 좋은 생각입니다.

알림 디자인에 대한 초기 접근 방식은 높음, 중간, 낮음의 세 가지 수준, 즉 "심각도 수준"으로 분류해야 합니다. 그런 다음 알림 유형 은 경고, 경고, 확인, 오류, 성공 메시지 또는 상태 표시기와 같은 세 가지 수준의 특정 속성에 의해 추가로 정의되어야 합니다.

알림 속성이 식별되면 프레임워크를 구성할 다양한 알림의 분류를 만들 차례입니다. 다음은 완전한 목록이 아닙니다. 알림 유형은 제품, 사용 사례 및 기타 변수에 따라 다릅니다. ( 참고 : 언급한 바와 같이 팀마다 다양한 용어를 사용합니다. 예를 들어 우리는 파괴적인 상호 작용을 진행하기 위해 사용자 승인이 필요한 알림을 "확인"이라고 부릅니다. 일부 팀은 "확인"을 다음 용어로 사용할 수 있습니다. 성공 메시지.)

높은 관심

• 경고(즉각적인 주의 필요)
• 오류(즉시 조치 필요)
• 예외(시스템 이상, 작동하지 않음)
• 확인(진행하려면 사용자 확인이 필요한 잠재적으로 파괴적인 작업)

중간 주의

• 경고(즉각적인 조치가 필요하지 않음)
• 감사의 말(사용자 작업에 대한 피드백)
• 성공 메시지

저주의

• 정보 메시지(수동 알림이라고도 함, 볼 준비가 된 항목)
• 배지(일반적으로 아이콘에 표시되며 마지막 상호작용 이후 새로운 것을 의미함)
• 상태 표시기(시스템 피드백)

훌륭한 알림 UX 디자인하기

훌륭한 UX로 제품을 디자인하려면 디자이너는 알림이 도움이 될 수 있는 모든 사용 사례 목록을 만들어야 합니다. 대부분의 경우 공정할 수 있고 디자이너가 고려하지 않았을 수 있는 극단적인 경우 문제를 해결하는 데 도움이 될 수 있으므로 이 프로세스를 개발자와 협력하여 수행하는 것이 좋습니다.

디자이너는 또한 알림이 UX를 향상시키는 가치를 제공할 수 있는 사용자 테스트 중 모든 상호 작용을 기록해야 합니다.

목록이 준비되면 다음 단계는 원하는 주의 수준과 속성에 따라 알림을 분류하는 것입니다. 다시 말하지만 알림은 방해가 되어서는 안 되므로 신중하게 수행해야 합니다. 이 과정에서 물어볼 몇 가지 질문은 다음과 같습니다.

• 알림을 트리거하는 것은 무엇입니까?
• 어떤 유형의 피드백이 전달되고 있습니까?
• 알림은 어디에 어떻게 표시됩니까?
• 즉각적인 상호 작용이 필요한 알림은 무엇입니까?
• 알림이 지속적입니까 아니면 비지속적입니까?

다음으로 색상 코딩 및 아이콘을 결정하고 디자인 시스템(또는 스타일 가이드)에 넣어야 합니다. 이 프로세스를 진행할 때 디자이너 는 알림이 표시되는 모든 인스턴스 를 고려하고 모든 배경에서 올바르게 렌더링되는지 확인해야 합니다.

알림 위치도 중요합니다. 인터페이스를 모호하게 하는 것을 피하기 위해 명백한 것을 언급할 위험이 있지만 알림은 UI의 상단이나 하단 또는 모서리 근처에 나타나야 합니다. 또한 디자인이 반응형인 경우 디자이너는 다양한 뷰포트를 사용하여 알림 모양을 테스트해야 합니다. 반응형 모바일 양식과 함께 오류 메시지가 표시될 수 있는 경우 특히 중요합니다.

알림 프레임워크를 설계하는 것은 쉽지 않습니다. 다양한 시나리오에서 발생하는 많은 작은 세부 사항을 고려해야 합니다. 접근성과 가독성을 넘어 미래의 현지화를 염두에 두어야 합니다. 영어로 완벽해 보이는 알림 시스템은 독일어나 일본어 플랫폼에서 사용하면 완전히 무너질 수 있습니다.

알림 동작을 정의 할 때 추가 질문:

• 경고 또는 경고가 지속되어야 하는 경우 디자이너는 사람들이 초기 화면을 벗어난 후에도 계속 액세스할 수 있도록 하려면 어떻게 해야 합니까?
• 알림 아카이브를 볼 수 있는 위치에 배지가 있는 알림 아이콘을 통합해야 합니까?
• 알림이 지속되지 않는 경우 사라지기까지 얼마나 걸리며 사라지기 전에 무시할 수 있는 옵션이 있어야 합니까?

모바일 앱의 경우 인앱 알림뿐만 아니라 푸시 알림(시스템 수준, 앱 외부)도 세심하게 설계해야 합니다. 대부분 방해가 되므로 알림의 사본 과 알림을 보낼 수 있는 권한을 요청 하는 방법 과 시기 를 확인하는 것이 중요합니다. 너무 많이 사용하면 사람들이 앱을 사용하지 못하게 할 수 있습니다. 불필요한 알림이 너무 많으면 사용자가 짜증을 내고 알림을 무음으로 만들거나 앱 사용을 완전히 중단할 수 있습니다.

또한 디자이너는 앱을 열지 않고도 생산성을 높일 수 있는 실행 가능한 알림 을 고려해야 합니다. 사용자가 앱을 실행하지 않고도 작은 작업을 수행할 수 있도록 하는 것은 UX를 향상시키는 강력한 도구가 될 수 있습니다.

모바일 푸시 알림의 경우 UX 모범 사례는 사람들이 앱을 조금 탐색할 기회가 있을 때까지 모든 종류의 알림(사람의 위치에 대한 액세스 요청, 푸시 알림 보내기 등)을 지연하는 것입니다.

훌륭한 UX를 위한 알림 모범 사례

다음 모범 사례를 준수하면 사람들이 알림을 중단이 아니라 가치를 제공하는 것으로 인식하게 되어 사용자 경험이 향상 됩니다. 알림 시스템을 디자인하고 디자인 시스템에 적용하기 전에 다음과 같은 기본적인 모범 사례를 고려하십시오.

• 앞에서 설명한 세 가지 주의 수준으로 알림을 분류합니다. 그런 다음 해당 세 가지 수준 내에서 다양한 알림 형식의 분류를 정의합니다.
• 알림 시스템에 대한 스타일 가이드를 생성할 때 알림이 릴리스될 모든 언어로 알림의 최대 문자 길이를 지정하십시오.
• 다양한 콘텐츠 유형과 텍스트 길이를 수용할 수 있는 적응성과 유연성에 특히 주의하십시오.
• 세 가지 주의 수준에 대해 일관된 색 구성표와 일관된 도해법을 만듭니다.
• 유용한 정보를 제공하는 간결하고 읽기 쉬운 알림을 만듭니다.
• 무엇 을 보낼지 언제 보낼지 신중하게 고려하십시오. 모바일에서는 사람들이 소외되지 않도록 새로 다운로드한 앱에 대한 알림 전송을 지연합니다. 컨텍스트와 사용 사례를 자세히 살펴보세요.
• 경고, 경고 또는 기타 주의가 높은 상태에서 중간 수준의 상태 업데이트인지 여부에 관계없이 더 적은 수의 알림을 표시하는 측면에서 오류가 발생했습니다. 대신 사람들이 보고 싶을 때 액세스 할 수 있는 목록에 넣습니다(UI에서 아이콘 배지로 표시됨).
• 알림을 "다시 표시하지 않음"으로 표시하는 옵션이 있는 시스템을 고려하십시오.
• "스낵 바"와 같은 비지속적 승인은 최소 4초에서 최대 8초 후에 화면에서 사라져야 하며 더 빨리 닫고 적절한 경우 "실행 취소"할 수 있는 옵션이 있습니다.
• 모바일에서 주의가 높은 알림의 경우 가능한 경우 사운드 및 햅틱 피드백을 고려합니다.
• 가독성을 위해 알림과 알림이 표시되는 배경 간의 적절한 대비를 확인합니다. 유동적이고 반응이 빠른 디자인의 경우 알림 아래에서 배경이 바뀔 수 있습니다.

오류 메시지에 대한 모범 사례

• 오류 메시지는 간단하고 직접적이어야 하며 가급적이면 실행 가능해야 하며 읽기 쉽고 빠르게 이해할 수 있는 언어로 작성되어야 합니다.
• " 수신된 응답 성공이 거짓입니다. "
• " 오류가 발생했습니다." 대신 문제에 대한 간결하고 명확한 설명을 제공하십시오. "
• 사람들을 비난하거나 그들이 뭔가 잘못했다고 말하는 것을 피하십시오. 예를 들어 “ 불법 명령입니다. "
• 사람들이 문제를 해결할 수 있도록 상황에 맞는 건설적인 오류 메시지를 제공합니다.
• 필드를 빨간색으로 바꾸어 오류를 표시하지 마십시오. 장애인이 이용할 수 있도록 하지 않습니다. 색맹이 볼 수 있는 다른 시각적 신호를 포함하는 것이 항상 가장 좋습니다.
• 양식의 입력 필드에 인라인 유효성 검사를 사용합니다.
• 사람들이 문제를 해결할 때까지 오류 메시지가 사라지지 않아야 합니다.

요약

알림은 사람들이 목표를 달성하는 데 도움이 되는 경험에 기여하며 다른 디지털 제품 구성 요소처럼 취급되어야 합니다. 그러나 알림은 양방향으로 차단될 수 있습니다. 잘 처리하면 UX를 높이고 참여를 도울 수 있지만 제대로 실행하지 않으면 성가신 위험이 있습니다. 올바른 균형을 잡는 것이 중요합니다.

알림을 나중에 고려해서는 안 됩니다. 이를 적절하게 수행하기 위해 설계자는 사용 사례를 조기에 해결하고 제품 설계 수명 주기 동안 다양한 형식을 정의하고 광범위하게 테스트해야 합니다.

알림을 디자인하는 올바른 방법에 대한 간략한 요약:

• 나중에 생각하는 것이 아니라 일찍 알림 디자인을 시작하십시오.
• 세 가지 주의 수준(높음, 중간 및 낮음)으로 알림을 분류합니다.
• 색상 코드를 지정하고 아이콘을 할당하고 배치를 결정합니다.
• 영구 또는 비영구, 팝업, 배너, 대화 상자 등 유형별로 분류합니다.
• 그것들을 디자인 시스템에 통합하십시오.

알림을 사용하는 시기 와 방법 을 이해하는 것은 뛰어난 사용성을 제공하고 제품 메시지의 일관성을 구축하는 데 필수적입니다. 적절한 순간에 표시되어야 하는 주변 메시지를 신중하게 평가함으로써 디자이너는 제품의 효율성을 높이고 UX를 향상시킬 수 있습니다.

당신의 생각을 알려주세요! 아래에 귀하의 생각, 의견 및 피드백을 남겨주세요.

• • •

Toptal Design 블로그에 대한 추가 정보:

• 가장 중요할 때 원격으로 작업하는 방법
• 원격 작업을 쉽게 전환하는 방법
• 모바일 앱 디자인 모범 사례 및 실수
• 전자 상거래 웹 사이트 디자인에 대한 궁극적인 가이드
• 채팅 충돌 – 챗봇이 실패할 때