사용자 인터페이스 텍스트

참고 항목

이 디자인 가이드는 Windows 7용으로 만들어졌으며 최신 버전의 Windows용으로 업데이트되지 않았습니다. 지침의 대부분은 여전히 원칙으로 적용되지만 프레젠테이션과 예제는 현재 디자인 지침을 반영하지 않습니다.

UI 화면에 사용자 인터페이스 텍스트가 나타납니다. 이 텍스트에는 컨트롤 레이블 및 정적 텍스트가 포함됩니다.

  • 컨트롤 레이블은 컨트롤을 식별하고 컨트롤에 직접 또는 옆에 배치됩니다.
  • 대화형 컨트롤의 일부가 아니기 때문에 호출되는 정적 텍스트는 정보에 입각한 결정을 내릴 수 있도록 사용자에게 자세한 지침 또는 설명을 제공합니다.

참고: 스타일 및 톤, 글꼴 및 코몬 컨트롤 레이블과 관련된 지침은 별도의 문서에 제공됩니다.

사용 패턴

UI 텍스트에는 다음과 같은 몇 가지 사용 패턴이 있습니다.

사용 설명
제목 표시줄 텍스트
제목 표시줄 텍스트를 사용하여 창 또는 대화 상자의 원본을 식별합니다.
screen shot of folder options title bar
이 예제에서 제목 표시줄 텍스트는 창을 식별합니다.
기본 지침
눈에 띄는 기본 명령을 사용하여 창 또는 페이지에서 수행할 작업을 간결하게 설명합니다.
지침은 특정 문, 명령적 방향 또는 질문이어야 합니다. 좋은 기본 지침은 UI 조작에만 집중하기보다는 사용자의 목표를 전달합니다.
screen shot of question: do you want latest help?
이 예제에서 기본 명령 텍스트는 사용자 고유의 이점이나 관심사에 대한 질문으로 사용자를 직접 연결합니다.
추가 지침
필요한 경우 추가 지침을 사용하여 창 또는 페이지를 이해하거나 사용하는 데 도움이 되는 추가 정보를 제공합니다.
보다 자세한 정보를 제공하고, 컨텍스트를 제공하고, 용어를 정의할 수 있습니다. 추가 지침은 단순히 다시 표현하지 않고 기본 명령에 대해 자세히 설명합니다.
screen shot of text on switching to admin account
이 예제에서 추가 지침은 기본 지침에 제시된 정보에 대한 응답으로 수행할 수 있는 두 가지 가능한 작업 과정을 제공합니다.
컨트롤 레이블
컨트롤 바로 또는 옆에 레이블을 지정합니다.
screen shot of desktop clock options
이 예제에서 컨트롤 레이블은 사용자가 선택하거나 수정할 수 있는 데스크톱 클록 설정을 식별합니다.
추가 설명
컨트롤 레이블의 경과입니다(일반적으로 명령 링크, 라디오 단추 및 검사 상자의 경우).
Screenshot that shows a security-settings dialog box.
이 예제에서 추가 설명은 선택 사항을 명확하게 설명합니다.

설계 개념

소프트웨어 개발자는 종종 텍스트를 제품 설명서 및 기술 지원으로 강등된 것으로 간주합니다. "먼저 코드를 작성한 다음, 개발한 내용을 설명하는 데 도움이 되는 사람을 고용하겠습니다." 그러나 실제로 중요한 텍스트는 UI가 구상되고 코딩되므로 프로세스의 앞부분에서 작성됩니다. 이 텍스트는 결국 다른 기술 쓰기 유형보다 더 자주 그리고 더 많은 사람들이 볼 수 있습니다.

이해할 수 있는 텍스트는 효과적인 UI에 매우 중요합니다. 전문 작성자 및 편집자는 UI 텍스트에서 소프트웨어 개발자와 함께 디자인 프로세스의 필수적인 부분으로 작업해야 합니다. 텍스트 문제는 종종 디자인 문제를 드러내기 때문에 텍스트에서 일찍 작업하게 합니다. 팀에서 디자인을 설명하는 데 문제가 있는 경우 개선이 필요한 것은 설명이 아닌 디자인인 경우가 많습니다.

UI 텍스트에 대한 디자인 모델

UI 텍스트와 UI 표면의 배치에 대해 생각할 때 다음 사실을 고려합니다.

  • 집중적이고 몰입형 독서를 하는 동안 사람들은 (서양 문화에서) 왼쪽에서 오른쪽으로, 위에서 아래로 순서대로 읽습니다.
  • 소프트웨어를 사용하는 경우 사용자는 UI 자체에 몰두하지 않고 작업에 몰두합니다. 따라서 사용자는 스캔하는 UI 텍스트를 읽지 않습니다.
  • 창을 스캔할 때 사용자는 실제로 필터링할 때 텍스트를 읽는 것처럼 보일 수 있습니다. 필요한 사항을 인식하지 않는 한 UI 텍스트를 실제로 이해하지 못하는 경우가 많습니다.
  • 창 내에서 다른 UI 요소는 다양한 수준의 주의를 받습니다. 사용자는 컨트롤 레이블을 먼저 읽는 경향이 있으며, 특히 현재 작업을 완료하는 것과 관련이 있는 것으로 보입니다. 반면 사용자는 필요한 경우에만 정적 텍스트를 읽는 경향이 있습니다.

일반 디자인 모델의 경우 사용자가 텍스트를 왼쪽에서 오른쪽으로, 위에서 아래로 신중하게 읽는다고 가정하지 마세요. 대신 사용자가 전체 창을 빠르게 검색하여 시작한 다음 대략 다음 순서로 UI 텍스트를 읽는다고 가정합니다.

  • 중앙의 대화형 컨트롤
  • 커밋 단추
  • 다른 위치에서 찾을 수 있는 대화형 컨트롤
  • 기본 명령
  • 추가 설명
  • Window title
  • 기본 본문의 기타 정적 텍스트
  • 각주

또한 사용자가 무엇을 해야 할지 결정하면 즉시 읽기를 중지하고 그렇게 할 것이라고 가정해야 합니다.

중복성 제거

중복 텍스트는 중요한 화면 공간을 사용할 뿐만 아니라 전달하려는 중요한 아이디어 또는 작업의 효율성을 약화합니다. 그것은 또한 독자의 시간의 낭비, 그리고 더 많은 그래서 스캔은 규범 컨텍스트에서. Windows는 사용자가 한 번 잘 수행해야 하는 작업을 간결하게 설명하기 위해 노력합니다.

각 창을 검토하고 컨트롤 내 및 전체에서 중복 단어와 문을 제거합니다. 중요한 텍스트는 피하지 마세요. 필요한 경우 명시적이어야 하지만 중복되지 말고 명확한 설명을 하지 마세요.

과도 통신 방지

텍스트가 중복되지 않더라도 모든 세부 사항을 설명하기에는 너무 간단할 수 있습니다. 텍스트가 너무 많을 경우 읽기가 권장되지 않습니다. 눈은 아이러니하게도 더 많은 것보다 적은 의사 소통의 결과로 바로 건너 뛰는 경향이있다. UI 텍스트에서 필수 정보를 간결하게 전달합니다. 일부 사용자 또는 일부 시나리오에 대한 자세한 정보가 필요한 경우 더 자세한 도움말 콘텐츠에 대한 링크를 제공하거나 용어 설명에 대한 용어집 항목에 대한 링크를 제공합니다.

오답입니다:

screen shot of dialog box with 6 paragraphs

이 예제에서는 텍스트가 너무 많아 쉽게 검색할 수 없습니다. 디자이너가 의도한 것은 아니지만 텍스트가 너무 많아서 사용자가 아무 것도 읽지 않고 다음을 클릭할 가능성이 높습니다.

읽지 못하게 하는 텍스트를 방지하려면 모든 단어 수를 계산하도록 텍스트를 작성합니다. 빼기 항목을 추가하지 않으므로 간단하고 간결한 텍스트를 사용합니다.

반전된 피라미드 사용

학술 저술은 일반적으로 사실의 기초를 낳는 "피라미드"구조 스타일을 사용, 그 사실과 함께 작동하고, 피라미드 같은 구조를 형성하는 결론에 구축. 반면, 언론인들은 결론부터 시작하는 "반전된 피라미드" 스타일을 독자가 가져야 하는 근본적인 "테이크아웃"으로 사용합니다. 그런 다음 독자가 스캔하는 데 관심이있을 수있는 점진적으로 더 많은 세부 사항을 채웁니다. 이 스타일의 장점은 바로 지점에 도달하고, 독자가 선택한 모든 지점에서 읽기를 중지하고 여전히 필수 정보를 이해할 수 있다는 것입니다.

반전된 피라미드 구조를 UI 텍스트에 적용해야 합니다. 필수 정보를 사용하여 바로 이동하여 사용자가 언제든지 읽기를 중지하고 도움말 링크를 사용하여 피라미드의 re기본der를 표시할 수 있습니다.

screen shot of message on joining windows program

이 예제에서 필수 정보는 기본 명령 텍스트의 쿼리에 있으며 추가 유용한 정보는 추가 지침에 있으며 도움말 링크를 클릭하여 세부 정보를 사용할 수 있습니다.

5가지 작업만 수행하면...

  1. 텍스트 문제로 인해 디자인 문제가 자주 표시되기 때문에 텍스트를 일찍 작업합니다.
  2. 스캔할 텍스트를 디자인합니다.
  3. 중복 텍스트를 제거합니다.
  4. 이해하기 쉬운 텍스트를 사용합니다. 과도하게 통신하지 마세요.
  5. 필요한 경우 도움말 콘텐츠에 대한 링크를 제공하여 자세한 정보를 제공합니다.

지침

일반

  • 중복 텍스트를 제거합니다. 창 제목, 기본 지침, 추가 지침, 콘텐츠 영역, 명령 링크 및 커밋 단추에서 중복 텍스트를 찾습니다. 일반적으로 기본 지침 및 대화형 컨트롤에 전체 텍스트를 그대로 두고 다른 위치에서 중복성을 제거합니다.

  • 큰 UI 텍스트 블록을 사용하지 않습니다. 이 작업을 수행하는 방법은 다음과 같습니다.

    • 텍스트를 짧은 문장과 단락으로 청크 분할합니다.
    • 필요한 경우 유용한 정보로 도움말 링크를 제공합니다.
  • 개체가 수행하는 작업을 명확하게 전달하고 구분하는 개체 이름 및 레이블을 선택합니다. 사용자는 개체가 실제로 무엇을 의미하는지 또는 다른 개체와 어떻게 다른지 파악할 필요가 없습니다.

    오답입니다:

    screen shot of list of unnamed monitors

    Better:

    screen shot of list of specific network adaptors

    잘못된 예제에서는 개체 이름이 전혀 구분되지 않습니다. 더 나은 예는 제품 이름별로 강력한 차별화를 보여줍니다.

  • 사용자가 작업과 관련된 특정 텍스트를 읽도록 하려면 대화형 컨트롤에 배치합니다.

    • 용인되는:
    • screen shot of formatting warning using ok button
    • 이 예제에서는 사용자가 확인 중인 내용을 설명하는 텍스트를 읽지 않을 가능성이 있습니다.
    • 더 나은:
    • screen shot of formatting warning and format button
    • 이 예제에서는 적어도 사용자가 디스크의 서식을 지정하려고 한다는 것을 이해할 수 있습니다.
  • 문장 사이에 하나의 공백을 사용합니다. 아니 두.

텍스트 글꼴, 크기 및 색

  • 링크 및 기본 지침에 대해서만 파란색 텍스트를 사용합니다.
  • 검색 결과의 URL에 대해서만 녹색 텍스트를 사용합니다.

Windows의 기본값은 다음과 같은 글꼴과 색입니다.

패턴 테마 기호 글꼴, 색
first column: title bar text
CaptionFont
9pt. 검정(#000000) Segoe UI
first column: main instructions
MainInstruction
12pt. 파란색(#003399) Segoe UI
first column: secondary instructions
지침
9pt. 검정(#000000) Segoe UI
first column: normal text
BodyText
9pt. 검정(#000000) Segoe UI
first column: emphasized text
BodyText
9pt. black (#000000) Segoe UI, bold 또는 italic
first column: editable text
BodyText
상자에 있는 9pt. 검정(#000000) Segoe UI
first column: disabled text
사용 안 함
9pt. 진한 회색(#323232) Segoe UI
first column: link
HyperLinkText
9pt. 파란색(#0066CC) Segoe UI
first column: links (hover)

9pt. 연한 파란색(#3399FF) Segoe UI
first column: group header

11pt. 파란색(#003399) Segoe UI
first column: file name (in content view)

11pt. black (#000000) Segoe UI
first column: document text
(없음)
9pt. 검정 (#000000) 칼리브리
first column: document headings
(없음)
17pt. 검정 (#000000) 칼리브리

자세한 내용과 예제는 글꼴 및 색을 참조하세요.

기타 텍스트 특성

굵게

  • 사용자가 읽어야 하는 텍스트에 주의를 기울이려면 굵게 굵게 사용합니다. 예를 들어 라디오 단추 옵션 목록을 검색하는 사용자는 각 옵션에 대한 추가 정보를 추가하는 텍스트에서 눈에 띄게 레이블을 굵게 표시할 수 있습니다. 너무 많은 굵게를 사용하면 그 영향이 줄어듭니다.

  • 레이블이 지정된 데이터를 사용하면 굵게 사용하여 데이터 전체에 더 중요한 것을 강조합니다.

    • 데이터 형식을 보다 쉽게 검색하고 이해할 수 있도록 대부분의 일반 데이터(숫자 또는 날짜와 같이 데이터가 레이블 없이는 의미가 거의 없는 경우)의 경우 굵은 레이블과 일반 데이터를 사용합니다.

    • 대부분 자체 설명 데이터의 경우 사용자가 데이터 자체에 집중할 수 있도록 일반 레이블과 굵은 데이터를 사용합니다.

    • 또는 더 중요한 정보를 강조하기 위해 굵게를 사용하는 대신 어두운 회색 텍스트를 사용하여 덜 중요한 정보를 강조 해제할 수 있습니다.

      screen shot of windows explorer thumbnail view

      이 예제에서는 굵게를 사용하여 데이터를 강조하는 대신 진한 회색을 사용하여 레이블을 강조 해제합니다.

  • 모든 글꼴이 굵게를 지원하는 것은 아니므로 텍스트를 이해하는 것이 중요해서는 안 됩니다.

기울임꼴

  • 텍스트를 문자 그대로 참조하는 데 사용합니다. 이 용도로 따옴표를 사용하지 마세요.

    정답입니다:

    용어 문서와 파일은 종종 서로 바꿔서 사용됩니다.

  • 텍스트 상자 프롬프트 및 편집 가능한 드롭다운 목록에 사용합니다.

    screen shot of search text box

    이 예제에서는 검색 상자의 프롬프트에 기울임을 텍스트로 지정합니다.

  • 이해를 돕기 위해 특정 단어를 강조하기 위해 아쉽게 사용합니다.

  • 모든 글꼴이 기울기를 지원하는 것은 아니므로 텍스트를 이해하는 것이 중요해서는 안 됩니다.

굵은 기울기

  • UI 텍스트에는 사용하지 마세요.

Underline

  • 링크를 제외하고 사용하지 마세요.
  • 강조에 사용하지 마세요. 기울기 대신 사용합니다.

문장 부호

기간

  • 컨트롤 레이블, 기본 지침 또는 도움말 링크의 끝에 배치하지 마세요.
  • 추가 지침, 추가 설명 또는 전체 문장을 구성하는 다른 정적 텍스트의 끝에 배치합니다.

물음표

  • 모든 질문의 끝에 배치합니다. 마침표와 달리 모든 유형의 텍스트에 물음표가 사용됩니다.

느낌표

  • 비즈니스 애플리케이션에서는 사용하지 마십시오.
    • 예외: 느낌표는 다운로드 완료("완료!")의 컨텍스트에서 사용되며 웹 콘텐츠("새로 만들기!")에 주의를 환기하는 데 사용됩니다.

쉼표

  • 세 개 이상의 항목 목록에서 항상 목록의 다음 항목 다음에 쉼표를 배치합니다.

콜론

  • 외부 컨트롤 레이블의 끝에 콜론을 사용합니다. 일부 보조 기술은 컨트롤 레이블을 식별하기 위해 콜론을 찾기 때문에 접근성에 특히 중요합니다.
  • 콜론을 사용하여 항목 목록을 소개합니다.

타원

  • 타원은 불완전함을 의미합니다. 다음과 같이 UI 텍스트에서 줄임표를 사용합니다.

    • 명령: 명령에 추가 정보가 필요함을 나타냅니다. 추가 정보가 필요한 경우에만 작업이 다른 창을 표시할 때마다 줄임표를 사용하지 마세요. 자세한 내용은 명령 단추를 참조 하세요.

    • 데이터: 텍스트가 잘렸음을 나타냅니다.

    • 레이블: 작업이 진행 중임을 나타냅니다(예: "검색...").

      팁: 사용되지 않는 공간이 있는 창이나 페이지에서 잘린 텍스트는 레이아웃이 좋지 않거나 기본 창 크기가 너무 작다는 것을 나타냅니다. 잘린 텍스트의 양을 제거하거나 줄이는 레이아웃 및 기본 창 크기를 위해 노력합니다. 자세한 내용은 레이아웃을 참조하세요.

  • 타원을 대화형으로 만들지 마세요. 잘린 텍스트를 표시하려면 사용자가 컨트롤의 크기를 조정하여 더 많은 텍스트를 보거나 점진적 공개 컨트롤대신 사용할 수 있도록 합니다.

따옴표 및 아포스트로피

  • 텍스트를 문자 그대로 참조하려면 따옴표 대신 기울기 서식을 사용합니다.

  • 혼동을 방지하기 위해 필요한 경우에만 창 제목과 컨트롤 레이블을 따옴표로 묶고 대신 굵게 사용하여 서식을 지정할 수 없습니다.

  • 따옴표의 경우 큰따옴표(" "); 작은따옴표를 사용하지 마세요.

    정답입니다:

    "Sparky의 고양이 폴더"를 삭제하시겠습니까?

    오답입니다:

    'Sparky의 고양이 폴더'를 삭제하시겠습니까?

대문자 적용

  • 제목에 제목 스타일 대문자, 다른 모든 UI 요소에 문장 스타일 대문자 표시를 사용합니다. 이렇게 하면 Windows 톤더 적합합니다.

    • 예외: 레거시 애플리케이션의 경우 대문자 스타일이 혼합되는 것을 방지하기 위해 필요한 경우 명령 단추, 메뉴 및 열 머리글에 제목 스타일 대문자를 사용할 수 있습니다.

      screen shot of generic property sheet

    이 제네릭 예제에서는 속성 시트에 대한 올바른 대문자 및 문장 부호를 보여 줍니다.

    screen shot of generic dialog box

    이 제네릭 예제에서는 대화 상자의 올바른 대문자 및 문장 부호를 보여 줍니다.

  • 기능 및 기술 이름의 경우 대문자화에 보수적이어야 합니다. 일반적으로 주요 구성 요소만 대문자로 지정해야 합니다(제목 스타일 대문자 사용).

    정답입니다:

    Analysis Services, 큐브, 차원

    Analysis Services는 SQL Server의 주요 구성 요소이므로 타이틀 스타일 대문자화가 적절합니다. 큐브 및 차원은 데이터베이스 분석 소프트웨어의 일반적인 요소이므로 대문자로 사용할 필요가 없습니다.

  • 기능 및 기술 이름의 경우 대문자로 일관해야 합니다. 이름이 UI 화면에 두 번 이상 표시되는 경우 항상 같은 방식으로 표시되어야 합니다. 마찬가지로 프로그램의 모든 UI 화면에서 이름이 일관되게 표시되어야 합니다.

  • 도구 모음, 메뉴, 스크롤 막대, 단추 및 아이콘과 같은 일반 사용자 인터페이스 요소의 이름을 대문자로 표시하지 마세요.

    • 예외: 주소 표시줄, 링크 표시줄.
  • 키보드 키에 대문자를 모두 사용하지 마세요. 대신, 표준 키보드에서 사용하는 대문자를 따르거나 키보드에 키가 레이블이 지정되지 않은 경우 소문자를 따릅니다.

    정답입니다:

    스페이스바, 탭, Enter, Page Up, Ctrl+Alt+Del

    오답입니다:

    스페이스바, 탭, Enter, PG UP, Ctrl+Alt+DEL

  • 강조를 위해 모든 대문자를 사용하지 마세요. 연구는이 읽기 어렵다는 것을 보여 주었다, 사용자는 "비명"으로 간주하는 경향이있다. 경고의 경우 경고 아이콘과 상황에 대한 명확한 설명을 사용합니다. 예를 들어 모든 대문자로 WARNING이라는 용어를 추가할 필요가 없습니다.

자세한 내용은 특정 UI 구성 요소 지침의 "텍스트" 또는 "레이블" 섹션을 참조하세요.

날짜 및 시간

  • 날짜 및 시간의 형식을 하드 코딩하지 마세요. 날짜 및 시간 형식에 대한 사용자가 선택한 로캘 및 사용자 지정 옵션을 준수합니다. 사용자는 지역 및 언어 제어판 항목에서 이러한 항목을 선택합니다.

    screen shot of date format: monday, july 06, 2009screen shot of date format: 06 july 2009

    Microsoft Outlook의 다음 예제에서는 긴 날짜의 두 형식이 모두 올바릅니다. 지역 및 언어 제어판 항목에서 사용자가 선택한 다양한 선택이 반영됩니다.

  • 추가 정보가 있으면 도움이 되는 시나리오에 긴 날짜 형식을 사용합니다. 긴 형식에 충분한 공간이 없는 컨텍스트에는 짧은 날짜 형식을 사용합니다. 사용자는 길고 짧은 형식으로 포함할 정보를 선택하지만 디자이너는 시나리오 및 컨텍스트에 따라 프로그램에 표시할 형식을 선택합니다.

    screen shot of format with start and due dates

    이 예제에서 긴 날짜 형식은 사용자가 작업 및 마감일을 구성하는 데 도움이 됩니다.

세계화 및 지역화

세계화는 모든 국가, 지역 또는 문화권에서 사용할 수 있는 문서 또는 제품을 만드는 것을 의미합니다. 지역화는 국가/원본 지역이 아닌 로캘에서 사용할 문서 또는 제품을 조정하는 것을 의미합니다. UI 텍스트를 작성할 때 세계화 및 지역화를 고려합니다. 프로그램은 다른 언어로 번역되고 사용자 고유의 문화권과는 매우 다른 문화권에서 사용될 수 있습니다.

  • 변수 내용(예: 목록 보기 및 트리 뷰) 이 있는 컨트롤의 경우 유효한 가장 긴 데이터에 적합한 너비를 선택합니다.

  • 지역화될 모든 텍스트(숫자가 아님)에 대해 30% (짧은 텍스트의 경우 최대 200%)에 충분한 공간을 UI 화면에 포함합니다. 한 언어에서 다른 언어로 번역하는 경우 텍스트 줄 길이가 변경되는 경우가 많습니다.

  • 런타임에 부분 문자열에서 문자열을 작성하지 마세요. 대신 번역기에서 모호성이 없도록 전체 문장을 사용합니다.

  • 하위 컨트롤, 포함된 값 또는 해당 단위 레이블을 사용하여 문장이나 구를 만들지 마세요. 문장 구조는 언어에 따라 다르므로 이러한 디자인은 지역화할 수 없습니다.

    오답입니다:

    screen shot of text box within a check box label

    정답입니다:

    screen shot of text box after a check box label

    잘못된 예제에서 텍스트 상자는 검사 상자 레이블 내에 배치됩니다.

  • 번역할 때 해당 텍스트가 함께 기본 않을 수 있으므로 문장의 일부만 링크로 만들지 마세요. 따라서 링크 텍스트는 그 자체로 완전한 문장을 형성해야 합니다.

    • 예외: 용어집 링크는 문장의 일부로 인라인으로 삽입할 수 있습니다.

자세한 내용은 Go Global Developer Center를 참조하세요.

제목 표시줄 텍스트

  • 창 유형에 따라 제목 표시줄 텍스트를 선택합니다.
    • 최상위 문서 중심 프로그램 창: "문서 이름 프로그램 이름" 형식을 사용합니다. 문서 이름이 먼저 표시되어 문서 중심적인 느낌을 줍니다.
    • 문서 중심이 아닌 최상위 프로그램 창: 프로그램 이름만 표시합니다.
    • 대화 상자: 대화 상자가 제공된 명령, 기능 또는 프로그램을 표시합니다. 제목을 사용하여 기본 지침의 목적인 대화 상자의 목적을 설명하지 마세요. 자세한 지침은 대화 상자를 참조 하세요.
    • 마법사: 마법사 이름을 표시합니다. "wizard"라는 단어는 마법사 이름에 포함되지 않아야 합니다. 자세한 지침은 마법사를 참조 하세요.
  • 최상위 프로그램 창의 경우 제목 표시줄 캡션 및 아이콘이 창 위쪽 근처에 눈에 띄게 표시되는 경우 중복성을 방지하기 위해 제목 표시줄 캡션 및 아이콘을 숨길 수 있습니다. 그러나 Windows에서 사용하기 위해 내부적으로 적합한 타이틀을 설정해야 합니다.
  • 대화 상자의 경우 제목에 "dialog" 또는 "progress"라는 단어를 포함하지 마세요. 이러한 개념은 암시되며 이러한 단어를 해제하면 사용자가 더 쉽게 타이틀을 검색할 수 있습니다.

주 지침

  • 기본 명령을 사용하여 지정된 창 또는 페이지에서 사용자가 수행해야 하는 작업을 간결하게 설명합니다. 좋은 기본 지침은 UI 조작에만 집중하기보다는 사용자의 목표를 전달합니다.

  • 명령적 방향 또는 특정 질문의 형태로 기본 명령을 표현합니다.

    오답입니다:

    screen shot of program name as main instruction

    이 예제에서 기본 명령은 단순히 프로그램의 이름을 명시합니다. 사용자가 수행할 작업 과정을 명시적으로 초대하지는 않습니다.

    예외: 오류 메시지, 경고 메시지 및 확인은 기본 지침에 다른 문장 구조를 사용할 수 있습니다.

  • 가능하면 특정 동사를 사용합니다. 특정 동사(예: 연결, 저장, 설치)는 일반 동사(예: 구성, 관리, 설정)보다 사용자에게 더 의미가 있습니다.

    • 제어판 페이지 및 마법사 페이지의 경우 특정 동사를 사용할 수 없는 경우 동사를 완전히 생략하는 것이 좋습니다.

      용인되는:

      로캘, 지역 및 언어 입력

      더 나은:

      로캘, 지역 및 언어

    • 오류 메시지 및 경고와 같은 대화 상자의 경우 동사를 생략하지 마세요.

  • 추가가 UI의 컨텍스트에서만 중복되거나 명백한 경우 기본 명령 텍스트를 사용할 의무가 없다고 생각하지 않습니다.

    screen shot of save as dialog box

    이 예제에서는 UI의 컨텍스트가 이미 매우 명확합니다. 기본 명령 텍스트를 추가할 필요가 없습니다.

  • 한 문장만 간결하게 사용해야 합니다. 기본 명령을 필수 정보로 구문 분석합니다. 자세한 내용을 설명해야 하는 경우 추가 지침을 사용하는 것이 좋습니다.

  • 문장 스타일 대/소문자를 사용합니다.

  • 명령문인 경우 최종 기간을 포함하지 마세요. 명령이 질문인 경우 최종 물음표를 포함합니다.

  • 진행률 대화 상자의 경우 진행 중인 작업을 간략하게 설명하는 구를 사용하여 줄임표로 끝납니다. 예: "그림 인쇄..."

  • 팁: 창 또는 페이지에서 수행할 작업을 설명할 때 친구에게 무슨 말을 할지 상상하여 기본 명령을 평가할 수 있습니다. 기본 명령으로 응답하는 것이 부자연스럽거나, 도움이 되지 않거나, 어색할 경우 명령을 다시 작업합니다.

자세한 내용은 특정 UI 구성 요소 지침의 "기본 지침" 섹션을 참조하세요.

추가 지침

  • 필요한 경우 추가 지침을 사용하여 다음과 같은 창 또는 페이지를 이해하거나 사용하는 데 도움이 되는 추가 정보를 제공합니다.
    • 프로그램 또는 시스템이 시작된 경우 창이 표시되는 이유를 설명하는 컨텍스트를 제공합니다.
    • 사용자가 기본 명령에 따라 작업하는 방법을 결정하는 데 도움이 되는 적격 정보입니다.
    • 중요한 용어를 정의합니다.
  • 필요하지 않은 경우 추가 지침을 사용하지 마세요. 간결하게 수행할 수 있는 경우 기본 명령과 모든 것을 전달하는 것을 선호합니다.
  • 약간 다른 표현으로 기본 명령을 반복하지 마세요. 대신 추가할 항목이 없으면 추가 지침을 생략합니다.
  • 전체 문장 및 문장 스타일 대문자를 사용합니다.

컨트롤 레이블

  • 모든 컨트롤 또는 컨트롤 그룹에 레이블을 지정합니다. 예외:

    • 프롬프트를 사용하여 텍스트 상자 및 드롭다운 목록에 레이블을 지정할 수 있습니다.

    • 점진적 공개 컨트롤은 일반적으로 레이블이 지정되지 않습니다.

    • 하위 컨트롤은 연결된 컨트롤의 레이블을 사용합니다. 스핀 컨트롤은 항상 하위 컨트롤입니다.

    • 기본 명령을 다시 표시하는 컨트롤 레이블을 생략합니다. 이 경우 기본 명령은 액세스 키를 사용합니다.

      용인되는:

      screen shot of text box with instruction and label

      이 예제에서 텍스트 상자 레이블은 기본 명령의 재시도일 뿐입니다.

      더 나은:

      screen shot of text box with instruction only

      이 예제에서는 중복 레이블이 제거되므로 기본 명령이 액세스 키를 사용합니다.

  • 레이블 배치:

    • 풍선, 검사 상자, 명령 단추, 그룹 상자, 링크, 탭 및 팁은 컨트롤 자체에 의해 직접 레이블이 지정됩니다.
    • 드롭다운 목록, 목록 상자, 목록 보기, 진행률 표시줄, 슬라이더, 텍스트 상자 및 트리 뷰는 위, 왼쪽 또는 왼쪽으로 플러시됩니다.
    • 점진적 공개 컨트롤은 일반적으로 레이블이 지정되지 않습니다. 펼침 단추는 오른쪽에 레이블이 지정됩니다.
  • 링크를 제외한 각 대화형 컨트롤 에 고유한 액세스 키를 할당합니다. 자세한 내용은 키보드를 참조 하세요.

  • 레이블을 간략하게 유지합니다. 그러나 레이블에 한두 단어를 추가하면 명확성에 도움이 될 수 있으며 경우에 따라 추가 설명이 필요하지 않을 수 있습니다.

  • 일반 레이블보다 특정 레이블을 선호합니다. 이상적으로 사용자는 레이블을 이해하기 위해 다른 것을 읽을 필요가 없습니다.

    오답입니다:

    screen shot of ok command button

    정답입니다:

    screen shot of publish command button

    올바른 예제에서는 커밋 단추에 특정 레이블이 사용됩니다.

  • 라디오 단추와 같은 레이블 목록의 경우 병렬 구문을 사용하고 모든 레이블에 대해 길이를 동일하게 유지합니다.

  • 레이블 목록의 경우 옵션 간의 차이점에 레이블 텍스트를 집중합니다. 모든 옵션에 동일한 입문 텍스트가 있는 경우 해당 텍스트를 그룹 레이블로 이동합니다.

    오답입니다:

    screen shot of labels with duplicate first phrases

    정답입니다:

    screen shot of first phrase moved to group label

    올바른 예제에서는 동일한 입문 구문을 레이블로 이동하므로 두 옵션이 더 클린 다르게 구분됩니다.

  • 일반적으로 긍정적인 관용구를 선호합니다. 예를 들어, 사용하지 말고, 알리지 말고 알립니다.

    • 예외: "이 메시지를 다시 표시 안 함"이라는 검사 상자 레이블이 널리 사용됩니다.
  • 지정된 형식의 모든 컨트롤에 적용되는 명령 동사를 생략합니다. 대신 컨트롤에 대한 고유한 항목에 포커스 레이블을 지정합니다. 예를 들어 사용자가 텍스트 상자 컨트롤에 입력해야 하거나 사용자가 링크를 클릭해야 한다는 것은 말할 필요도 없습니다.

    오답입니다:

    screen shot of label: 'type your name'

    정답입니다:

    screen shot of label: 'your name'

    잘못된 예제에서 컨트롤 레이블에는 해당 형식의 모든 컨트롤에 적용되는 명령 동사가 있습니다.

  • 경우에 따라 레이블을 제어하는 다음 괄호 주석이 유용할 수 있습니다.

    • 옵션이 선택 사항인 경우 레이블에 "(선택 사항)"을 추가하는 것이 좋습니다.
    • 옵션을 강력하게 권장하는 경우 레이블에 "(권장)"를 추가합니다. 이렇게 하면 설정이 선택 사항이지만 어쨌든 설정해야 합니다.
    • 고급 사용자만을 위한 옵션인 경우 레이블에 "(고급)"을 추가하는 것이 좋습니다.
  • 레이블 뒤의 괄호 안에 단위(초, 연결 등)를 지정할 수 있습니다.

    screen shot of label: initial size (mb)

    이 예제에서는 측정 단위가 메가바이트(MB)임을 보여 줍니다.

자세한 내용은 특정 UI 구성 요소 지침의 "텍스트" 또는 "레이블" 섹션을 참조하세요.

추가 설명

  • 컨트롤에 레이블에서 전달할 수 있는 것보다 더 많은 정보가 필요한 경우 추가 설명을 사용합니다. 그러나 간결하게 할 수 있는 경우 컨트롤 레이블과 모든 것을 전달하는 것을 선호할 필요가 없는 경우 추가 설명을 사용하지 마세요. 일반적으로 추가 설명은 명령 링크, 라디오 단추 및 검사 상자에 사용됩니다.

  • 필요한 경우 컨트롤 레이블에서 굵게를 사용하여 추가 설명이 있을 때 텍스트를 더 쉽게 검색 할 수 있습니다.

    screen shot of security-settings dialog box

    이 예제에서는 라디오 단추 레이블이 굵게 표시되어 검색하기 쉽습니다.

  • 그룹의 한 컨트롤에 추가 설명을 추가한다고 해서 그룹의 다른 모든 컨트롤에 대한 설명을 제공해야 하는 것은 아닙니다. 필요한 경우에만 설명을 사용할 수 있는 경우 레이블에 관련 정보를 제공합니다. 일관성을 위해 레이블을 다시 지정하는 추가 설명은 없습니다.

    screen shot of three radio buttons

    이 예제에서는 그룹의 두 컨트롤에 추가 설명이 포함되지만 세 번째 컨트롤은 그렇지 않습니다.

  • 추가 설명이 명령 링크를 따르는 경우 보조 텍스트를 두 번째 사용자로 작성합니다.

    예: 명령 링크: 무선 네트워크 설정 만들기 및 USB 플래시 드라이브에 저장

    추가 설명: USB 플래시 드라이브를 사용하여 라우터로 전송할 수 있는 설정이 만들어집니다. USB 플래시 드라이브 구성을 지원하는 무선 라우터가 있는 경우에만 이 작업을 수행합니다.

  • 전체 문장과 문장 부호를 사용합니다.

커밋 단추 레이블

다음 표에서는 가장 일반적인 커밋 단추 레이블 및 해당 사용량을 보여 줍니다.

단추 레이블 사용 시기
확인
  • 대화 상자에서 변경 내용 또는 커밋을 작업에 적용하고 창을 닫습니다.
  • 소유자 속성 창에서: 보류 중인 변경 내용(창이 열린 이후 또는 마지막 적용)을 적용하고 창을 닫습니다.
  • 소유 속성 창에서: 변경 내용을 유지하고, 창을 닫고, 소유자 창의 변경 내용을 적용할 때 변경 내용을 적용합니다.
  • 속성 시트와 같이 작업별로 지정되지 않은 창과 함께 사용합니다.
  • 특정 작업을 수행하는 데 사용되는 창의 경우 동사(예: 인쇄)로 시작하는 특정 레이블을 대신 사용합니다.
  • 사용자가 변경할 수 없는 창의 경우 Close를 사용합니다.
  • Enter

예/아니요
예는 예 또는 아니요 질문에 대한 긍정적 응답인 반면, 아니요는 부정적인 응답입니다.
  • 예 및 아니요 단추를 사용하여 예 또는 아니요 질문에만 응답합니다. 예 또는 아니요 질문에 대해서는 OK 및 Cancel을 사용하지 마세요.
  • 예 및 아니요 단추보다 특정 응답을 선호합니다. 예 및 아니요를 사용하는 데는 아무런 문제가 없지만 특정 응답을 더 빨리 이해할 수 있으므로 효율적인 의사 결정을 내릴 수 있습니다.
  • 그러나 특정 응답의 구문이 길거나 어색한 것으로 판명되면 예 및 아니요 응답을 사용하는 것이 좋습니다.
  • 아니요 응답의 의미가 명확하지 않은 경우 예 및 아니요 단추를 사용하지 마세요. 그렇다면 특정 응답을 대신 사용합니다.
  • 예 및 아니요는 항상 쌍으로 사용되어야 합니다.
  • Y 및 N
  • 취소
  • 대화 상자에서 모든 변경 내용 또는 작업 진행 중 카드 이전 상태로 되돌리기(눈에 띄는 부작용을 남기지 않음) 창을 닫습니다.
  • 속성 시트에서: 모든 보류 중인 변경 내용(창이 열렸거나 마지막으로 적용된 이후 변경)카드 창을 닫습니다.
  • 제어판 항목: 모든 변경 내용 또는 작업 카드 이전 상태로 되돌리기 작업이 시작된 허브 페이지로 돌아갑니다. 이러한 허브 페이지가 없으면 제어판 항목 창을 대신 닫습니다.
  • 보류 중인 모든 변경 내용 또는 작업이 해제될 수 있고카드 부작용을 취소할 수 있는 경우에 사용합니다.
  • 카드 수 없는 변경 내용은 Close를 사용합니다. 중지할 수 있는 진행 중인 작업의 경우 중지를 사용합니다. 처음에 변경하거나 작업을 해제할 수 있는 경우카드 취소를 처음 사용한 다음 취소할 수 없으면 닫기 또는 중지로 변경할 수 있습니다.
  • Esc
  • 닫기
    창 닫기. 변경 내용이나 부작용은 카드 않습니다.
  • 변경 내용이나 부작용을 분리할 수 없는 경우카드 사용합니다. 기본 창에 대해 취소 대신 닫기를 사용합니다.
  • 사용자가 변경할 수 없는 창에 사용합니다.
  • Alt+F4, Ctrl+F4
  • Stop
    현재 실행 중인 작업을 중지하고 창을 닫습니다. 진행 중인 작업이나 부작용은 카드 않습니다.
  • 진행 중인 작업과 부작용이 일반적으로 진행률 표시줄 또는 애니메이션과 함께 카드 수 없거나 해제되지 않을 때 사용합니다.
  • Esc
  • 적용
    소유자 속성 시트에서: 보류 중인 변경 내용(창이 열렸거나 마지막 적용 이후 적용됨)을 적용하지만 창을 열어 둡니다. 이렇게 하면 사용자가 속성 시트를 닫기 전에 변경 내용을 평가할 수 있습니다. 소유 속성 시트에서: 사용하지 마세요.
  • 속성 시트에서만 사용합니다.
  • 속성 시트에 사용자가 의미 있는 방식으로 평가할 수 있는 효과가 있는 설정(하나 이상)이 있는 경우에만 적용 단추를 제공합니다. 일반적으로 적용 단추는 설정이 표시되도록 변경할 때 사용됩니다. 사용자는 변경 내용을 적용하고, 변경 내용을 평가하고, 해당 평가에 따라 추가 변경을 수행할 수 있어야 합니다. 그렇지 않은 경우 단추를 사용하지 않도록 설정하는 대신 적용 단추를 제거합니다.
  • A
  • 다음
    마법사 및 다단계 작업: 작업에 커밋하지 않고 다음 단계로 진행합니다.
  • 마법사 및 다단계 작업에서만 사용하여 약정 없이 다음 단계로 진행합니다.
  • [뒤로]를 클릭하여 [다음] 단추의 효과를 항상 취소할 수 있습니다.
  • N
  • 마침
    마법사 및 다단계 작업에서 창을 닫습니다. 작업이 아직 수행되지 않은 경우 작업을 수행합니다. 해당 작업이 이미 수행된 경우 변경 내용이나 부작용이 카드 않습니다.
  • 마법사 및 다단계 작업에서만 사용합니다. 그러나 일반적으로 더 나은 더 구체적인 커밋 단추가 있기 때문에 마침을 사용하는 것이 좋습니다.
    • 단추를 클릭하면 작업이 아직 수행되지 않은 경우 기본 명령에 대한 응답인 동사(예: 인쇄, 커넥트, 시작)로 시작하는 특정 레이블을 사용합니다.
    • 마법사 내에서 작업이 이미 수행된 경우 대신 Close를 사용합니다.
  • 그러나 다음과 같은 경우 마침을 사용할 수 있습니다.
    • 저장, 선택, 선택 또는 가져오기와 같은 특정 레이블은 여전히 일반적입니다.
    • 이 작업에는 설정 또는 설정 컬렉션 변경이 포함됩니다.
  • Enter
  • 수행
    해당 없음.
  • 사용하지 마세요. 명령으로 수행되는 작업은 문법적으로 잘못되었습니다.
  • 해당 없음.