사용자 인터페이스 콘텐츠 작성에 대한 권장 사항
Power Platform Well-Architected 경험 최적화 체크리스트 권장 사항에 적용됩니다.
XO:09 | 내용은 쉽게 이해되고 명확한 방향을 제시해야 합니다. 작업 완료를 촉진하는 친근하고 일관되며 전문적인 어조를 사용하십시오. |
---|
이 가이드에서는 사용자 경험에 맞는 효과적인 콘텐츠를 제작하기 위한 권장 사항을 설명합니다. 콘텐츠는 사용자 인터페이스의 주요 커뮤니케이션 수단으로, 시각적 요소만으로는 복잡한 아이디어를 전달할 수 없는 강력한 힘을 가지고 있습니다. 애플리케이션에서 사용하는 단어는 사용자가 프로세스를 안내하거나 중요한 시스템 정보를 공유하는 등 사용자가 애플리케이션을 탐색하고 인식하는 방식에 영향을 미칩니다.
주요 디자인 전략
사용자 인터페이스 디자인의 일부인 콘텐츠를 작성하는 것은 예술이자 과학입니다. 이러한 카피라이팅 모범 사례와 시각적 디자인 모범 사례를 결합하면 사용자 경험이 향상됩니다.
스캔 가능한 콘텐츠 만들기
비즈니스 애플리케이션을 사용할 때 사람들은 UI의 기능이나 화려한 언어에 흥미를 느끼지 않습니다. 작업 완료에 중점을 둡니다. 짧고 스캔 가능한 블록을 작성하여 그들을 도와주세요. 텍스트를 더 짧은 문장과 단락으로 나눕니다. 지나치게 과장된 언어를 사용하지 마세요. 사용자는 특정 목표를 염두에 두고 UI를 방문하는 경우가 많으며, 콘텐츠는 이러한 목표를 달성할 수 있도록 원활하게 안내해야 합니다.
간결하게 작성하세요. 내용은 간단하고 요점이 명확해야 합니다. 간결하다는 것은 제한적이라는 뜻이 아니라 효율적이라는 의미입니다. 의미를 유지하면서 가능한 한 적은 단어를 사용하십시오. 콘텐츠의 모든 단어가 목적에 맞는지 확인하세요. 필요한 정보만 적시에 제공하세요. 콘텐츠가 너무 많으면 읽을 가능성이 낮아진다는 점을 기억하세요. Mark Twain의 조언, "글쓰기는 쉽습니다. 잘못된 단어를 지우기만 하면 됩니다."를 따르십시오.
가장 중요한 정보인 가치 제안부터 시작하세요. 공간이 허락한다면 중요한 순서대로 세부 내용을 담은 간단한 단락 한두 개를 추가하세요. 더 많은 내용을 말하고 싶으면 "자세히 보기" 링크를 사용하세요. 때로는 메시지 본문을 먼저 작성한 다음 헤드라인을 작성하는 것이 더 쉽습니다.
가능하면 특정 동사를 사용하세요. 특정 동사는 일반적인 동사보다 사람들에게 더 의미가 있습니다. "가져오기", "업데이트", "선택" 또는 "변경"과 같은 특정 단어를 사용하여 사용자가 사용 가능한 옵션이나 필요한 작업을 빠르게 이해할 수 있도록 도와주세요. 여러 의미가 있는 단어를 제거하면 혼란을 피하고 모호성을 줄일 수 있습니다.
상황에 맞게 작업에 중점을 맞춰 작성
사람들이 알아야 할 사항을 알려주십시오. 콘텐츠는 사용자에게 작업을 수행하거나 UI 내에서 현명한 결정을 내리는 데 필요한 필수 정보를 제공해야 합니다. 사용자는 콘텐츠를 통해 상호 작용을 안내하고 자신의 요구 사항을 충족하는 명확하고 관련성 높은 정보를 기대합니다. 콘텐츠는 혼란이나 실망감을 유발해서는 안 됩니다.
세분화된 콘텐츠는 자연스러운 흐름을 만들어냅니다. 사용자, 수행된 작업 또는 다음에 예상할 수 있는 작업에 초점을 맞춥니다. 실망감과 인지적 부담을 피하려면 관련이 없거나 즉각적인 작업에 방해가 되는 정보를 포함하지 마세요.
작업이나 기능보다 이점을 먼저 생각하세요. 이 접근 방식은 이점을 먼저 설명함으로써 작업을 신속하게 완료하는 사용자의 능력을 향상시킵니다. 행동을 완료하면 어떤 긍정적인 결과가 나올까요? 작업을 수행하라고 말하기 전에 이점을 설명하고, 이유를 설명하기 전에 작업을 요구하지 마십시오.
작업 수준 콘텐츠의 경우 방해적인 방식으로 회사 브랜드를 자랑하는 데 집중하지 마세요. 예를 들어, "Microsoft Connector 셔틀 서비스가 오후 2시 15분에 캠퍼스 위치에 편리하게 도착합니다"를 쓰지 않고 "셔틀은 오후 2시 15분에 도착합니다"를 선택합니다.
일반 언어로 말하세요
불필요한 전문 용어나 기술 용어를 사용하지 않고 타겟 대상 그룹이 쉽게 이해할 수 있는 간단하고 명확한 언어를 사용하세요. 사용자는 콘텐츠를 쉽게 이해할 수 있어야 하며, 혼란이나 오해의 가능성을 줄이고 궁극적으로 참여도를 높일 수 있어야 합니다. 읽기 수준을 고등학생 이하로 유지하세요. 적절한 읽기 수준을 유지하면 접근성과 포괄성이 향상되어 더 넓은 범위의 사용자를 수용할 수 있습니다.
25단어 이하의 문장을 포함하세요. 문장은 짧고 간결해야 합니다. 충분한 정보를 담은 짧은 문장은 이해를 돕기 때문에 내용을 더 쉽게 읽고 이해할 수 있습니다.
전문 용어와 약어를 사용하지 마세요. 대부분의 소프트웨어 엔지니어조차도 단순하고 비기술적인 언어를 선호합니다. 오류 메시지에서 전문 용어를 피하는 것은 특히 중요합니다. 많은 일반적인 문구는 구어체이며 모든 사람에게 의미가 없을 수도 있다는 점을 기억하는 것도 중요합니다.
지나치게 기술적인 단어를 더 간단한 단어로 바꾸세요. "구성", "활성화" 또는 "유효하지 않음"과 같은 단어는 불필요하게 기술적인 표현입니다. 단순하게 유지하세요. 사용자에게 익숙한 약어만 사용하세요. 각 페이지의 첫 번째 언급에 약어를 명시하고 괄호 안에 참조(예: "call to action (CTA)")를 포함합니다.
이중 부정 표현을 피하세요. 이중 음성은 인지 부하를 증가시킵니다. 이는 사람들이 메시지를 해독하는 데 추가 시간을 소비하게 만듭니다. 직접적이고 긍정적인 작업에 집중하세요.
정중하고 친근한 어조 사용
예의를 갖추되 지나치게 자만해서는 안 됩니다. 사람들은 프롬프트가 주어지고 행동하기를 기대합니다. UI 전체에서 "부탁합니다"를 사용하는 것은 불필요합니다. "부탁합니다" 및 "미안합니다"와 같은 용어는 부담스러운 작업, 귀하의 실수로 인한 작업 또는 심각한 결과를 초래하는 작업에 대해 아껴서 사용하십시오. 그러나 UI 콘텐츠에서 무례하거나 주제넘거나 오만하거나 냉소적인 태도를 취하는 것은 결코 좋은 습관이 아닙니다.
사용자에게 직접 말하는 것처럼 작성하세요. "당신"을 사용하면 사용자에게 초점을 맞춰 친근한 어조를 지원하고 수동태를 방지하는 데 도움이 됩니다. 대명사와 그에 수반되는 보조 동사를 생략하고 동사로 문장을 시작하세요. 이번에도 "당신" 또는 "당신의"를 사용하여 연결을 만드는 데 집중하세요.
인지 부하를 줄이기 위해 1인칭 소유격("내 대시보드")과 2인칭 언어를 혼합하지 마세요.
제품이나 애플리케이션이 사용자를 대상으로 하는 경우 "우리" 또는 귀하의 조직 이름을 사용하십시오. 누가 말하고 행동하는지 명확히 하여 혼란을 피하십시오. 예를 들어, "저는 이 결과를 찾았습니다" 대신 "우리는 이 결과를 찾았습니다"를 사용하세요. "우리"를 사용하면 UI가 더욱 인간적인 느낌을 주고 시스템 오류에 대한 책임을 보여줌으로써 모든 단계에서 사용자의 중요성을 강조할 수 있습니다. 그러나 사용자의 요구 사항을 방해할 수 있으므로 "우리"라는 표현은 과도하게 사용하지 마세요. 사용자에게 초점을 맞추기 위해 "우리"라는 표현은 시스템 오류, 상태 업데이트 및 기타 시스템 관련 문제에 사용하십시오.
"it's", "you're", "that's", "don't"와 같은 일반적인 축약형을 사용하여 친근하고 격식 없는 어조를 만드세요. 회사 이름을 소유격 형태로 사용하거나 축약형으로 사용하지 마십시오. "There'd" 및 "what're"와 같은 모호한 축약형은 피하세요. UI에서 약어와 철자 단어를 혼합하면 불일치가 발생하고 신뢰도가 떨어질 수 있습니다. 일반적인 축약형 대신 철자 단어를 사용하면 불필요한 형식이 발생합니다.
문체의 일관성 유지
경험 전반에 걸쳐 특정 작업을 나타내려면 하나의 단어나 문구를 일관되게 사용하세요. 예를 들어, 인터페이스의 한 영역에서 예약 확정 프로세스를 '예약'이라고 부르는 경우 다른 영역에서는 '계획' 또는 '일정'이라고 부르지 마세요. 일관성을 유지하려면 조직 전체에서 단어 사용을 확인하세요. 팀이 참조할 수 있는 스타일 가이드에 대해 합의된 용어 목록을 만드세요.
적절한 대소문자를 사용하세요. 예를 들어, UI 전체에서 문장 대/소문자 구분을 사용하여 문장의 첫 번째 단어만 대문자로 사용하고 고유 명사(사람 이름, 장소 및 일부 제품 이름)는 항상 대문자로 사용하는 데 동의합니다. 부제목, 버튼, 하이퍼링크의 경우 구두점 없이 문장 대소문자를 구분합니다. 의심스러우면 대문자로 사용하지 마십시오. 직위(최고 재무 책임자), 조직 이름 또는 부서(인사 관리), 브랜드 제품 또는 프로그램, 사람 및 장소 이름에는 제목 케이스를 사용합니다. 어떤 상황에서도 모두 대문자를 사용하는 것은 권장되지 않습니다. 텍스트를 강조해야 하는 경우 대문자 대신 크기, 글꼴 두께, 색상과 같은 다양한 서체 스타일을 사용하는 것이 좋습니다.
올바른 문장 구조에 우선 순위 두기
사람들이 귀하의 애플리케이션에 어떻게 반응하고 느끼는지는 부분적으로는 글의 질과 귀하가 전달하는 전체적인 목소리와 어조에 따라 달라집니다. 일반적으로 글을 쓸 때 문 또는 문장 구조에는 네 가지 유형이 있습니다. 일반적으로 UI 콘텐츠는 콘텐츠의 목적과 제품의 성격에 따라 4가지 중 3가지를 사용합니다.
- 선언 문을 정기적으로 사용하세요. 구성 요소의 기능에 대한 설명은 선언문을 사용할 수 있는 경우의 예입니다.
- 명령문을 자유롭게 사용하세요. 사용자에게 변경 내용을 검토한 다음 제출하도록 요청하는 것과 같은 프롬프트 및 명령입니다.
- 의문 문에는 주의하세요. 이는 질문입니다. 사용자가 선택해야 하는 경우 제품 흐름에서 허용됩니다. 솔루션을 찾거나 사용자의 요구 사항을 명확히 하는 데 도움이 될 수 있습니다.
- 감탄 문은 과도하게 사용하면 긍정적인 영향이 줄어들므로 자제해서 사용하세요.
능동태를 사용할 상황 알기
능동태에서 주어는 문장의 동작을 수행합니다. 예를 들어, "몇 글자 입력"과 같이 입력합니다. 수동태에서 피험자는 행동을 받아들입니다. 예를 들어, "몇 글자를 입력해야 합니다."
수동태는 배우를 모호하게 하거나 생략하여 문장을 덜 직접적으로 만들고 때로는 모호하게 만듭니다. 명확성과 권위가 부족합니다.
다음 표에서는 능동 음성과 수동 음성을 보여 줍니다.
능동태 | 수동태 |
---|---|
"변경 내용을 저장하려면 '제출' 버튼을 클릭하세요." | "'제출' 버튼을 클릭하면 변경 사항이 저장됩니다." |
"업데이트를 받으려면 이메일 주소를 입력하세요." | "이메일 주소를 입력하면 업데이트를 받게 됩니다." |
"드롭다운 메뉴에서 기본 설정 언어를 선택하세요." | "기본 설정 언어는 드롭다운 메뉴에서 선택할 수 있습니다." |
"연락처 정보로 양식을 작성하세요." | "양식에 연락처 정보가 입력되어야 합니다." |
"계속 진행하기 전에 계약 조건을 검토하세요." | "계속 진행하기 전에 계약 조건이 검토되어야 합니다." |
"원본 크기로 보려면 이미지를 클릭하세요." | "이미지를 클릭하면 원본 크기로 표시됩니다." |
이러한 각 예에서 능동태는 사용자(주어)가 취해야 할 작업을 지정하여 명확한 지침을 제공합니다. 이러한 명확성은 더 나은 방향을 제시하므로 사용자가 더 효율적으로 수행해야 하는 작업을 이해하는 데 도움이 됩니다. 수동태 예에서는 작업자가 표시되지 않으므로 누가 해당 주제에 대해 작업을 수행해야 하는지 불분명합니다. 사용자는 조치를 취해야 할 때를 알고 있어야 합니다.
수동태는 메시지를 부드럽게 하거나 오류가 발생할 때와 같이 너무 직접적이지 않도록 하는 데 사용할 수 있습니다. 예를 들어, 비난이나 책임을 전가하는 것보다 일어난 일에 대한 정보를 전달하는 데 초점을 맞추는 경우 수동태를 사용합니다. 실패는 누구의 잘못이든 상관없이 실망스러운 일입니다. 절대로 사용자를 비난하거나 비난하는 암시를 하지 마십시오.
다음 표에서는 오류 메시지의 능동 음성과 수동 음성을 보여 줍니다.
능동태 | 수동태 |
---|---|
"비밀번호를 잘못 입력하셨습니다." | "비밀번호가 잘못 입력되었습니다." |
"파일을 찾지 못했습니다." | "파일이 발견되지 않았습니다." |
"양식을 제출하셨습니다." | "양식이 제출되었습니다." |
"요청을 처리하는 동안 오류를 발견했습니다." | "요청을 처리하는 동안 오류가 발생했습니다." |
"변경 내용을 저장했습니다." | "변경 내용이 저장되었습니다." |
모범 사례와 표준을 보려면 능동태를 활용하세요. 그러나 일반적인 지침(특히 피해야 할 사항을 권장하거나 오류 메시지를 표시하는 경우)에는 수동태를 사용하세요.
보조 기술에 필요한 콘텐츠에 유의
접근성에는 장애가 있는 사용자를 포함한 모든 사용자가 콘텐츠를 인식하고, 작동하고, 이해할 수 있도록 보장하는 것이 포함됩니다. 이미지에 대한 설명 대체(alt) 텍스트와 같은 기능을 사용하면 보조 기술에 의존하는 사용자가 UI 콘텐츠에 액세스하고 쉽게 이해할 수 있습니다. 대체 텍스트는 일반적으로 화면 판독기에 대한 텍스트 설명을 제공하기 위해 이미지와 함께 사용되지만 비디오, 오디오 파일, 차트, 그래프 및 단추나 아이콘과 같은 대화형 구성 요소와 같은 웹 페이지의 텍스트가 아닌 요소에도 사용할 수 있습니다.
대체 텍스트를 작성할 때 이미지의 목적과 내용을 전달하는 간결하고 설명적인 텍스트를 제공하세요. 명확하고 유익하며 이미지의 맥락과 관련이 있어야 합니다. 지나치게 기술적인 언어나 불필요한 세부 사항은 피하세요. 이미지의 주관적인 해석을 피하면서 핵심 개체, 동작, 시각적 요소 등 필수 정보를 전달하는 데 중점을 둡니다. 화면 판독기에서 효율적으로 읽을 수 있도록 간결하게 유지하십시오. 대체 텍스트의 최대 길이에 대한 표준 권장 사항은 약 125자입니다. 중립적인 어조로 작성하고 내용이 문법적으로 올바른지 확인하세요.
해외 대상 그룹을 위한 글쓰기
전 세계적으로 사용되는 애플리케이션에 대한 콘텐츠를 작성할 때 문화적 다양성과 민감도를 고려하여 다양한 배경의 사용자에 대한 포괄성과 관련성을 보장하세요. 글로벌 대상 그룹이 쉽게 이해할 수 있는 문화적으로 중립적인 언어를 사용하세요. 구어체, 속어 또는 문화 관련 언급을 피하세요. 이렇게 하면 실수로 다른 지역이나 언어적 배경을 가진 사용자를 제외하거나 불쾌감을 주는 일이 발생하지 않습니다. 사용자 참여와 이해력을 향상시키기 위해 각 타겟 대상 그룹의 언어 및 방언 기본 설정에 맞게 번역된 인터페이스의 현지화된 버전을 제공합니다.
해외 대상 그룹의 콘텐츠를 디자인할 때 문화적 규범, 가치 및 선호도를 이해하세요. 다양한 문화에는 사용자 행동과 기대에 영향을 미치는 뚜렷한 의사소통 스타일, 에티켓, 사회적 규범이 있습니다. 사용자의 공감을 불러일으키는 인터페이스를 만들려면 색상 상징, 아이콘, 각 문화에 따른 콘텐츠 표현 형식 등의 요소를 고려하는 것이 필요합니다. 다양한 문화적 맥락에서 사용자에게 의미 있는 아이콘, 이미지 등의 시각적 요소를 선택하세요. 특정 상징은 보편적인 의미를 가질 수 있지만 다른 상징은 문화적 규범과 신념에 따라 해석이 크게 다를 수 있습니다. 디자인 및 현지화 과정에서 현지 전문가와 협력하거나 사용자 테스트를 수행하면 귀중한 인사이트를 얻을 수 있으며 인터페이스가 타겟 대상 그룹의 문화적 뉘앙스와 선호도를 반영하는지 확인할 수 있습니다.