마법사

참고

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

그 멋진, 기발한 이름에도 불구하고, 마법사는 정말 사용자 인터페이스의 특별한 형태가 아니며, 그들은 유틸리티의 특정 범위를 가지고있다.

마법사는 다단계 작업을 수행하는 데 사용됩니다.

'어떤 종류의 프린터를 설치하시겠습니까?' 프롬프트가 표시된 '프린터 추가' 마법사를 보여 주는 스크린샷.

사용 가능한 프린터를 검색할 때 '프린터 추가' 마법사를 보여 주는 스크린샷

프린터 추가 마법사의 스크린샷

마법사의 여러 단계가 페이지 시퀀스로 표시됩니다.

마법사에는 일반적으로 다음과 같은 유형의 페이지가 포함됩니다.

  • 선택 페이지는 정보를 수집하고 사용자가 선택할 수 있도록 하는 데 사용됩니다.
  • 커밋 페이지는 뒤로 또는 취소를 클릭하여 실행 취소할 수 없는 작업을 수행하는 데 사용됩니다.
  • 진행률 페이지는 긴 작업의 진행률을 표시하는 데 사용됩니다.

최신 마법사 디자인은 효율성에 프리미엄을 적용하여 진행률 페이지를 더 짧은 작업에 대해 선택 사항으로 만들고, 종종 시작과 끝에 기존 시작 페이지축하 페이지 로 분배합니다.

모든 마법사 페이지에는 다음과 같은 구성 요소가 있습니다.

  • 왼쪽 위 모서리에 뒤로 단추가 있고 선택적 최소화/최대화 및 복원 단추가 있는 닫기 단추가 있는 마법사의 이름을 식별하는 제목 표시줄입니다. 제목 표시줄에는 작업 표시줄에서 식별할 수 있는 아이콘도 포함되어 있습니다.
  • 페이지와 함께 사용자의 목표를 설명하는 기본 명령입니다.
  • 선택적 텍스트 및 기타 컨트롤이 있는 콘텐츠 영역입니다.
  • 작업에 커밋하거나 다음 단계로 진행하기 위한 커밋 단추가 하나 이상 있는 명령 영역입니다.

마법사에는 여러 단계가 있지만 이러한 단계는 모두 사용자의 관점에서 단일 작업에 추가되어야 합니다. 이는 "하나의 마법사, 하나의 작업"의 기본 마법사 디자인 원칙입니다.

따라서 이 문서에서 작업은 마법사의 기본 기능입니다(예: 설치 마법사의 작업은 프로그램을 설치하는 것입니다). 하위 작업은 더 큰 작업의 측면입니다(예: 설치 마법사의 하위 작업은 설치할 프로그램을 구성하는 것일 수 있음). 마지막으로, 각 마법사 페이지는 지정된 하위 작업 또는 작업의 단계로 간주됩니다(예: 프로그램 구성과 관련된 2~3단계가 있을 수 있음).

참고:설정, 대화 상자진행률 표시 줄과 관련된 지침은 별도의 문서에 제공됩니다.

올바른 사용자 인터페이스인가요?

마법사는 여러 입력 단계가 필요한 모든 작업에 사용할 수 있습니다. 그러나 효과적인 마법사에는 다음과 같은 추가 요구 사항이 있습니다.

  • 마법사가 단일 원자성 작업을 수행하나요? 단일 작업이 아닌 상호 작용을 사용하지 마세요(단일 작업을 수행하지 않는 한 전체 프로그램은 마법사가 되어서는 안 됩니다). 마법사를 사용하여 독립적인 작업 또는 크게 관련이 없는 단계를 결합하지 마세요.

  • 필요한 질문 수를 줄일 수 있나요? 대부분의 경우 잘 작동하거나 나중에 필요에 따라 조정할 수 있는 허용 가능한 기본값이 있나요? 따라서 페이지 수를 줄일 수 있나요? 그렇다면 단일 페이지(예: 대화 상자)에 표시될 수 있도록 작업을 단순화하거나 입력이 완전히 필요하지 않도록 합니다(작업을 직접 수행할 수 있도록 허용).

  • 필요한 질문을 순차적으로 제공해야 합니까? 몇 가지 가능성이 있지만 선택적 질문이 있나요? 그렇다면 대화 상자 또는 탭 대화 상자를 고려합니다.

    올바름:

    인쇄 옵션 대화 상자 스크린샷

    Microsoft PowerPoint 인쇄 옵션 대화 상자에는 많은 사용자 입력 옵션이 포함되어 있으므로 마법사에 표시할 수 있습니다. 그러나 순차적으로 제공할 필요가 없으므로 대화 상자를 선택하는 것이 좋습니다.

마법사는 비교적 무거운 형식의 사용자 인터페이스입니다. 사용 가능한 적합한 경량 솔루션이 있는 경우 사용하세요!

설계 개념

마법사의 남용

지금까지 마법사는 사용자가 특히 복잡한 작업(서로 다른 위치에 있는 단계 포함)을 수행할 수 있도록 설계되었으며 사용자가 성공하는 데 도움이 되는 기본 제공 인텔리전스가 있다는 점에서 일반 UI와는 달랐습니다. 현재 모든 UI는 작업을 가능한 한 간단하게 만들도록 설계되어야 하므로 이 용도로만 특수한 UI가 필요하지 않습니다.

그러나 마법사는 "마법사"(예: "대화 상자" 및 "속성 창"보다 훨씬 더 창의적임)라고 하기 때문에 마법사가 특별한 UI라는 믿음이 지속됩니다. 대신, 다단계 작업으로 간주하고 그 사실에 특별한 관심을 끌지 않는 것이 좋습니다.

마법사를 만들기 전에 사용자가 프로그램의 기본 흐름에서 실제로 중단되어야 하는지 여부를 고려합니다. 궁극적으로 사용자에게 더 유용하고 효율적으로 느낄 수 있는 더 가볍고 인라인적인 상황별 솔루션이 있을 수 있습니다. 예를 들어 프로그램에서 잘못 디자인된 기능은 마법사가 이를 설명하고 단순화하도록 보증하지 않습니다. 기능 자체의 재설계를 보증합니다. 마법사를 대역폭 지원으로 사용하여 프로그램에 대한 보다 기본적인 문제를 해결해서는 안 됩니다.

마법사에 적절한 함수가 있습니다.

마법사는 사용자 환경을 단순화하는 열쇠 중 하나입니다. 프로그램 구성과 같은 복잡한 작업을 수행하고 일련의 간단한 단계로 분할할 수 있습니다. 프로세스의 각 지점에서 필요한 사항에 대한 설명을 제공하고 사용자가 선택하고 텍스트를 입력할 수 있는 컨트롤을 표시할 수 있습니다.

특정 유형의 다단계 작업은 마법사 양식에 적용됩니다. 예를 들어 Windows에서 여러 마법사에는 연결 기능(인터넷 또는 회사 네트워크 또는 프린터 및 팩스 컴퓨터와 같은 주변 장치)이 포함됩니다.

연결 마법사의 스크린샷

네트워크에 연결하는 것은 마법사에 적합한 Windows의 일반적인 작업입니다.

여기서 마법사의 기능은 알려진 것과 안정적인 것(기본 제공 운영 체제)과 알 수 없는 변수(전화 회사 또는 인터넷 서비스 공급자와의 연결 정렬)를 중재하는 것입니다. 컴퓨팅 에코시스템의 복잡성은 마법사를 사용하여 복잡성을 줄이는 것이 진정으로 유용하기 때문에 충분히 중요합니다.

Windows 마법사와 잘 작동하는 다른 유형의 작업에는 고급 기능(예: 음성 및 필기 인식) 및 풍부한 미디어 환경(예: 영화 제작 및 게시 옵션 구성)이 포함됩니다. 문제 해결과 같은 보다 기본적인 다단계 작업을 위해 마법사를 배포할 수도 있습니다. 즉, 다른 사용자가 매우 다른 방식으로 프로그램을 경험하려는 경우 마법사의 필요성과 여러 사용자 입력 지점에 대한 용량을 나타낼 수 있습니다.

프로그램의 경우 마법사가 제공하는 함수와 해당 함수가 실제로 마법사 배포 수준으로 상승하는지 여부를 결정하는 데 약간의 디자인 시간이 필요합니다.

마법사 길이

디자인 질문은 자연스럽게 페이지와 옵션의 수와 organization 중심으로 발생합니다. 예:

  • 마법사에 대한 최적의 페이지 수가 있나요? 또는 적어도 바람직한 범위?
  • 마법사를 간결하고 간소화하여 사용자가 가능한 한 빨리 완료할 수 있어야 하나요?
  • 더 적은 선택 항목이 필요한 페이지가 더 있어야 하나요? 복잡성이 더 많은 페이지가 더 적습니까? 사용 가능한 디자인은 무엇인가요?
  • 탭 페이지와 같은 UI 규칙을 적용하여 더 빠른 마법사 환경을 엔지니어링할 수 있나요?

Microsoft는 3페이지 이하의 마법사를 간단한 마법사로 설계하고 4개 이상의 페이지 중에서 고급 마법사 디자인을 사용하도록 권고했습니다(1999년 Windows 사용자 환경 지침 참조). 그러나 현재 마법사 디자인 표준은 단순 및 고급 양식(환영 및 축하 페이지 사용)의 주요 차이점 중 하나였던 것을 분배하므로 이러한 범주는 이제 부적절하다고 느끼고 디자인 선택을 결정하는 페이지 수는 임의로 보입니다.

마법사는 작업에 필요한 만큼 길거나 짧아야 합니다. 길이에 대한 고정 지침이 없습니다. 한 페이지 마법사는 실제로 대화 상자로 표시되어야 하므로 두 페이지가 마법사에 대해 가능한 가장 압축된 형식일 것입니다.

올바름:

디스크 만들기 대화 상자의 스크린샷

이 작업에는 마법사로 표시하는 데 낭비되는 옵션이 거의 없습니다. 대화 상자는 이 사용자 인터페이스에 적합한 형식입니다.

스펙트럼의 다른 쪽 끝에 여러 의사 결정 지점 및 분기를 포함하는 마법사가 있고 사용자가 탐색 경로를 추적하지 않는 경우가 자주 있는 경우 실제 제한을 초과하여 마법사의 길이를 줄여야 합니다. 또는 마법사를 몇 가지 고유한 작업으로 분리할 수 있습니다.

마법사에 가장 적합한 길이를 결정할 때는 대상 사용자에게 특히 주의해야 합니다. 가정 소비자 및 사무실 근로자와 같은 최종 사용자를 위한 프로그램은 마법사를 사용하여 복잡성을 숨기는 경향이 있습니다. 마법사는 가능한 한 많은 옵션에 대해 클린, 간단한 페이지 디자인 및 미리 선택된 기본값을 사용하여 최대한 짧습니다. 반면, IT 전문가를 위한 서버 마법사 또는 프로그램은 더 길고 복잡한 경향이 있습니다. 이 대상 사용자 그룹은 구성 결정을 내릴 때 허용 오차가 훨씬 높으며 복잡성이 너무 많이 숨겨져 있으면 의심스러워질 수 있습니다.

기본적으로 마법사가 복잡한 작업을 간소화하는 경우 기술적으로 정교한 대상 그룹에 대해 상대적으로 최소화하고 초보 사용자 기반을 위해 상대적으로 적극적으로 수행해야 합니다.

올바름:

표시 언어 마법사의 스크린샷

이 마법사 페이지는 설치 또는 제거와 같은 간단하고 논리적인 이진 선택으로 인해 잠재적으로 복잡한 주체를 줄이기 때문에 최종 사용자를 위해 잘 디자인되었습니다.

올바름:

'SQL Server 설치' 마법사 '기능 선택' 페이지를 보여 주는 스크린샷

Microsoft SQL Server 2008용 설정 마법사에서 페이지 디자인은 더 바쁘고 다양한 선택 항목에 대해 더 많은 생각이 필요하지만 대상 그룹은 기능 선택을 엄격하게 제어할 것으로 예상되는 데이터베이스 관리자입니다.

마지막으로 특정 작업이 수행될 수 있는 빈도에 주의하세요. 자주 수행되지 않는 작업은 더 긴 마법사를 배포할 수 있지만 빈번한 작업은 확실히 간결함을 선호해야 합니다.

분기

더 긴 마법사의 경우 "업스트림" 제공된 사용자 입력에 따라 페이지 시퀀스가 다를 수 있는 작업 흐름의 분기를 만들어야 할 수 있습니다. 분기는 기본적으로 사용자에게 할당 해제되므로 안정성을 전달하기 위해 사용자 환경을 디자인해야 합니다. 전체 마법사에서 분기를 발생시키는 의사 결정 지점이 두 개 이하이고 단일 분기 내에 중첩된 분기가 두 개 이상 없는 것이 좋습니다.

분기 마법사 내에서 안정적인 사용자 환경을 만드는 방법에 대한 지침은 이 문서의 지침 섹션에서 분기를 참조하세요.

탐색 가이드 제공

탐색 가이드는 작업에 많은 단계가 있고 사용자가 시퀀스에서 자리를 잃거나 완료하는 데 걸리는 시간을 알고 싶을 때 유용할 수 있습니다.

탐색 가이드는 각 페이지의 왼쪽에 있는 열 또는 창에서 목차처럼 보이는 마법사의 페이지 또는 섹션 목록으로 표시되는 경우가 많습니다. 목록은 마법사 전체에서 유지되지만(각 페이지에 동일한 페이지 목록이 표시됨) 사용자가 현재 시퀀스에 있는 위치를 나타내는 시각적 수단이 있습니다(예: 활성 페이지 또는 섹션을 구분하기 위해 굵게 사용).

탐색 가이드는 순차적이거나 순차적이지 않을 수 있습니다. 순차 형식은 알려진 이후 페이지와 함께 과거 페이지를 표시합니다. 단계가 알려져 있고 페이지가 종속된 경우 페이지 대신 단계 측면에서 미래를 제시할 수 있습니다. 그러면 페이지가 알려지면 동적으로 페이지를 채울 수 있습니다. 탐색 순서가 수정되었기 때문에 탐색 가이드는 대화형이 아닙니다.

비순차적 탐색 가이드는 대화형이므로 사용자는 이전에 본 페이지를 직접 다시 방문할 수 있습니다. 선택 사항으로 설계된 페이지의 탐색 순서를 건너뛸 수도 있습니다. 선택적 페이지에는 대부분의 상황에서 허용되는 기본값이 있어야 합니다. 다음 유형의 가이드를 사용하여 다음을 수행합니다.

  • 이전에 본 페이지는 항상 직접 볼 수 있습니다.
  • 필수 구성 요소가 있는 경우 이후 페이지를 볼 수 없습니다.
  • 방문할 수 있는 페이지는 필수 또는 선택적 페이지와 함께 활성 또는 비활성화된 링크 사용과 같이 할 수 없는 페이지와 눈에 띄게 구별되어야 합니다.

사용자는 이 시나리오에서 뒤로 단추의 의미에 대해 혼동할 수 있습니다. 뒤로를 클릭하면 탐색 가이드의 이전 페이지 또는 섹션 또는 마지막으로 본 페이지 또는 섹션으로 이동하나요? 이제 Windows 마법사는 다른 커밋 단추가 있는 오른쪽 아래 모서리가 아닌 마법사 페이지의 왼쪽 위 모서리에 뒤로 단추를 배치하기 때문에 사용자는 웹에서와 마찬가지로 뒤로 기능을 생각합니다. 따라서 가장 좋은 해결 방법은 뒤로 단추에 웹 탐색 의미를 부여하고(뒤로를 클릭하면 마지막 페이지 또는 섹션이 표시됨) 순차 탐색에 마법사 탐색 가이드를 사용하는 것입니다.

페이지 무결성

마법사 디자인에는 탐색 및 분기 환경을 처리하는 방법과 같은 전체 작업 흐름과 관련된 결정뿐만 아니라 마법사를 구성하는 개별 페이지와 관련된 의사 결정도 포함됩니다. 좋은 마법사 페이지를 디자인하기 위한 가장 중요한 원칙은 무결성입니다. 페이지의 콘텐츠는 함께 속해야 합니다.

마법사 페이지는 각 페이지가 개념적으로 함께 중단되어 전체 작업의 한 측면만 처리하는 경우 훨씬 더 사용할 수 있습니다. 기본 명령은 이를 달성하기 위한 기본 수단입니다. 사용자에게 페이지의 목표 또는 목적을 명확하게 식별합니다. 추가 지침 및 페이지의 모든 컨트롤은 모두 기본 명령과 직접 관련됩니다. 마법사 페이지는 사용자에게 몇 가지 생각이 필요한 옵션을 제공해야 하지만 페이지 자체의 무결성에 집중하기 때문에 이러한 노력이 작업처럼 느껴지지 않습니다.

안타깝게도 마법사 디자이너는 사용자가 다음 단추를 빠르게 클릭하는 것을 페이지의 유용성, 단순성 및 무결성의 증거로 착각하는 경우가 많습니다. 궁극적인 마법사 환경은 다음, 다음, 다음, 다음, 마침이 아닙니다. 이러한 환경은 기본값이 잘 선택되었음을 시사하지만 모든 선택 사항이 선택 사항이므로 마법사가 실제로 필요하지 않았음을 시사합니다.

시각적 개체와 텍스트 측면에서 이러한 요소를 맨손으로 구문 분석합니다. 단일 페이지("부리토 마법사")에서 여러 하위 작업을 번들로 묶거나 복잡한 입력 요구 사항을 제시하기 위한 탭에 의존하려는 충동에 저항합니다. 단일 페이지에는 마법사의 전체 태스크에 대한 단일 하위 작업이 포함됩니다.

잘못된 예:

SQL Server 설치 마법사의 스크린샷

상당히 조밀한 사용자 입력의 세 탭이 필요하므로 이 마법사 페이지는 너무 많은 작업을 수행하려고 합니다.

대부분의 경우 마법사 전체에서 각 페이지의 크기를 유지 관리하여 일관된 모양과 느낌을 조성합니다. Windows 마법사는 페이지 크기가 콘텐츠 양과 일치하도록 크기를 조정할 수 있는 페이지를 허용하지만 이 옵션을 사용하는 사람은 몇 가지에 불과합니다.

마지막으로, 시퀀스를 통해 각 마법사 페이지의 구조적 요소를 유지 관리합니다. 예를 들어 왼쪽 위 모서리에서 뒤로 단추를 페이지 또는 두 페이지에 대한 커밋 단추 영역으로 다시 이동하지 마세요. 이러한 수준의 레이아웃 일관성은 사용자가 마법사 내에서 안정감을 느낄 수 있도록 도와줍니다. 이를 페이지의 시각적 무결성에 대한 기준으로 간주합니다.

적절한 수준의 통신 찾기

사용자는 화면에서 큰 텍스트 블록을 읽을 수 있는 허용 오차가 낮으며, UI 표면 내에서는 작업을 통해 신속하게 이동하는 것이 목적입니다.

마법사는 과도하게 통신하는 경향이 있습니다. 그들은 화면에 공간을 많이 차지, 공간을 채우기 위해 드라이브를 장려 하는 것 같다. 그것은 파킨슨 병의 법칙의 변형처럼 : UI 텍스트는 사용 가능한 공간을 채우기 위해 확장됩니다.

이 초과의 한 가지 원인은 중복성입니다. 초기 마법사 디자인에서 사용되는 템플릿으로 인해 제목 표시줄, 제목, 본문 텍스트, 컨트롤 레이블 등과 같은 페이지의 여러 위치에 동일한 언어가 나타날 수 있습니다.

전문 편집기를 고용하여 마법사 텍스트를 무자비하게 정리하는 것이 좋습니다. 개별 페이지에서 불필요한 질문과 옵션을 제거하고 마법사 전체에서 전체 페이지(예: 기존 환영 및 축하 페이지)를 제거합니다. 사용자 또는 팀이 내부적으로 사용하는 기술이나 기능의 전문 용어가 아니라 대상 그룹이 작업을 설명하는 데 사용하는 언어를 사용하여 간결하게 작성된 기본 명령으로 페이지 지점으로 바로 이동합니다. 이 사용자 중심 접근 방식은 프로그램 마법사의 통신을 개선하는 데 매우 중요합니다.

마법사의 어조에 특별한 주의를 기울이세요. 때로는 프로그램의 가장 지속적인 인상이 말하는 것이 아니라 말하는 방식의 결과입니다! 마법사에서 사용자는 프로그램에서 입력을 요청할 때 2인칭 대명사("you")를 자유롭게 사용하여 친숙한 대화형 톤에 익숙해집니다. 자세한 지침은 스타일 및 톤을 참조하세요.

마법사 페이지에서 단어 수를 줄이는 것은 일반적으로 칭찬할 수 있지만 너무 멀리 가지 않도록 주의해야 합니다. 작업이 중요하고 마법사를 보증하는 경우 사용자는 현명한 선택을 할 수 있는 충분한 정보를 가지고 있습니다. 다음 예제에서는 의미를 희생하지 않고 마법사 텍스트를 압축하는 방법을 보여 줍니다.

이전:

cleartype 마법사의 스크린샷, 초안

이후:

cleartype 마법사 스크린샷, 수정됨

이 마법사 페이지의 편집된 버전은 작업 지향 기본 명령을 제공하고, 기본 명령 아래에 불필요한 설명 단락을 제거하고, 검사 상자 레이블을 수정하여 검사 상자의 목적을 명확히 합니다.

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

  1. 작업을 수행하기 위해 적절한 UI를 사용하여 수행하려는 작업을 매핑합니다. 사용자로부터 많은 입력을 수집해야 한다고 생각되는 경우 마법사를 기본값으로 설정하지 마세요.

  2. 마법사의 길이와 구조에 대해 신중하게 생각하세요. 사용자가 프로그램에 대한 기본 작업 또는 관심으로 돌아갈 수 있도록 환경을 최대한 간단하게 유지하기 위해 분기하지 않는 짧은 마법사를 선호합니다.

  3. 마법사에서 각 페이지의 무결성을 확인합니다. 페이지의 내용이 명확하게 함께 속해야 합니다.

지침

일반

  • 대화 상자, 작업창 또는 단일 페이지와 같은 간단한 대안을 먼저 고려합니다. 마법사를 사용할 필요가 없습니다. 모든 UI에서 유용한 정보와 지원을 제공할 수 있습니다.

  • 다단계 작업에 마법사를 사용합니다. 피드백이 있는 단일 단계 작업에는 여러 페이지 대화 상자를 사용합니다. 자세한 지침은 대화 상자를 참조하세요.

    올바름:

    진단 대화 상자 스크린샷

    진단 대화 피드백 스크린샷

    이 예제에서 Windows 네트워크 진단은 진행률 및 결과 페이지로 구성됩니다. 작업은 단일 단계이기 때문에 마법사에서 사용자에게 필요한 탐색 단추가 필요하지 않습니다. 다중 페이지 대화 상자로 효과적으로 표시됩니다.

창 크기

  • 세로 또는 가로 페이지 스크롤 없이 모든 마법사 페이지를 표시할 수 있는 창 크기를 선택합니다. 페이지의 컨트롤에는 스크롤이 필요할 수 있지만 마법사 페이지 자체는 스크롤하지 않아야 합니다.

  • 작업을 편안하게 수행할 수 있을 만큼 큰 창 크기입니다. 페이지 레이아웃이 비좁거나 사용자가 스크롤하거나 크기를 과도하게 조정하도록 요구해서는 안 됩니다.

  • 그러나 창을 지나치게 크게 만들지 마십시오. 창이 크면 작업이 더 복잡해지고 상호 작용을 위해 추가 이동이 필요합니다.

  • 더 많은 화면 공간을 활용할 수 있지만 필요하지 않은 마법사의 크기 조정 가능한 창을 사용합니다. 적절한 최소 크기를 할당합니다. 크기 조정 가능한 창은 페이지가 큰 목록 보기와 같은 크기 조정 가능한 콘텐츠와 상호 작용해야 하는 경우에 유용합니다.

    올바름:

    Visual Studio 설정의 스크린샷, 부분 목록

    Better:

    Visual Studio 설치의 스크린샷, 전체 목록

    이 예제에서 창 크기를 조정하면 사용자가 전체 목록을 볼 수 있습니다.

  • 콘텐츠에 필요한 경우 페이지 크기가 변경되는 동적 크기 마법사를 사용하는 것이 좋습니다. 이렇게 하면 마법사가 다양한 콘텐츠가 있는 페이지 레이아웃을 수용할 수 있습니다.

  • 사용자가 마법사 환경에 대한 안정성 부족으로 변경 내용을 인식할 수 있는 경우 동적보다 정적 크기 조정을 선호합니다. 시각적 안정성은 종종 콘텐츠의 편의를 능가합니다. 대부분의 마법사는 특수한 경우를 위해 예약된 동적 크기 조정을 사용하여 표준 정적 창 크기를 채택해야 합니다.

마법사 길이

  • 마법사를 최대한 간결하고 간소화합니다. 불필요한 옵션과 질문을 제거하고 스마트 기본값을 사용하여 사용자 입력에 필요한 페이지 수를 줄입니다.
    • 예외: IT 전문가 및 기타 기술 사용자는 더 긴 마법사 및 자세한 입력 요구 사항에 대해 더 높은 허용 오차를 갖습니다.
  • 마법사를 최소 두 페이지로 만듭니다. 대신 한 페이지 마법사를 대화 상자로 다시 디자인해야 합니다.
  • 각 페이지의 복잡성을 늘리기만 하면 마법사의 페이지 수를 줄이지 마세요. 예를 들어 사용자 입력이 필요한 세 개의 탭이 포함된 마법사 페이지를 세 개의 별도 페이지로 다시 디자인해야 합니다.
  • 사용자가 전체 시퀀스를 통해 다음을 쉽게 클릭할 수 있도록 각 페이지를 간단하게 만들어 마법사의 페이지 수를 늘리지 마세요. 이는 일반적인 마법사 디자인 결함입니다. 마법사 페이지에 어느 정도의 생각이 필요하지 않은 경우 마법사에 있을 필요가 없을 수 있습니다.

분기

  • 분기보다 분기가 아닌 마법사 디자인을 선호합니다. 분기되지 않는 마법사는 더 간단하고 짧으며 탐색하기 쉬운 경향이 있습니다. 분기 마법사를 사용하면 사용자가 작업의 단계 수와 시퀀스의 위치를 결정하기가 더 어려워집니다.

  • 분기해야 하는 경우 다음 기술 중 하나를 사용하여 사용자가 스스로 지향할 수 있도록 지원합니다.

    • 페이지를 열거합니다. 일반적인 방법은 Y의 X단계 구와 같이 각 페이지의 시퀀스에서 사용자의 위치를 나타내는 것입니다. 엔드포인트(Y)가 안정적인지 확인합니다. 값이 변경되면 사용자의 신뢰도가 떨어지게 됩니다.

    • 하위 단계의 개념 (예: 6단계 2a)을 포함합니다.

    • 각 단계에 여러 페이지가 포함될 수 있는 페이지와 독립적인 단계를 만듭니다. 예를 들어 여행 서비스는 업계에 잘 설정된 전자 상거래 규칙에 따라 마법사 organization 사용할 수 있습니다.

      올바름:

      단계 기반 마법사 organization 스크린샷

      논리 레이블은 분기 마법사의 사용자에게 적절한 방향을 제공할 수 있습니다.

    • 선택적 단계를 열거형 시퀀스에서 영구로 처리합니다. 예를 들어 분기가 몇 가지 선택적 단계를 건너뛰는 경우 다시 열거하지 않고 피드백의 단계도 건너뜁니다. 따라서 사용자가 3페이지와 4페이지를 선택적으로 만드는 2페이지를 선택하는 경우 6의 1, 2, 5 및 6단계를 표시합니다. 5단계와 6단계를 다시 열지 마세요.

    • 마법사가 단일 분기를 사용하고 분기가 작업 초기에 발생하는 경우 해당 시점에서 시퀀스를 시작한 다음 분기가 아닌 접근 방식을 사용하기만 하면 됩니다. 즉, 분기 지점에서 시작하여 분기 끝까지 순서대로 진행됩니다.

  • 분기해야 하는 경우 분기 수를 단일 마법사 내에서 하나 또는 두 개로 제한합니다. 분기("중첩된" 분기) 내에 둘 이상의 분기를 포함하지 않습니다.

커밋 단추

  • 사용자가 작업에 커밋하는 경우 기본 명령(예: 인쇄, 연결 또는 시작)에 대한 특정 응답인 커밋 단추를 사용합니다. 다음(약정을 의미하지 않음) 또는 완료(특정하지 않음)와 같은 일반 레이블을 작업 커밋에 사용하지 마세요. 이러한 커밋 단추의 레이블은 자체에서 의미가 있어야 합니다. 항상 동사를 사용하여 커밋 단추 레이블을 시작합니다. 예외:
    • 저장, 선택, 선택 또는 가져오기와 같은 특정 응답이 여전히 일반적인 경우 마침을 사용합니다.
    • 마침을 사용하여 특정 설정 또는 설정 컬렉션을 변경합니다.
  • 단일 마법사에는 여러 커밋 지점이 있을 수 있지만 단일 지점이 선호됩니다.
  • 필요한 경우 페이지에서 커밋 단추의 이름을 바꾸거나 숨길 수 있습니다. 이러한 유연성은 이전 마법사에서 사용할 수 없는 Windows의 새 마법사 디자인의 한 가지 장점입니다. 커밋 단추를 숨기는 것은 커밋 단추를 사용하지 않도록 설정하는 것과 다릅니다.
  • 양수 커밋 단추를 사용하지 않도록 설정하지 않습니다. 그렇지 않으면 사용자는 커밋 단추가 비활성화된 이유를 추론해야 합니다. 커밋 단추를 사용하도록 설정하고 문제가 발생할 때마다 유용한 오류 메시지를 제공하는 것이 좋습니다. 단추를 사용하지 않도록 설정하는 것은 그 이유가 명백하고 명확하지 않은 경우에만 허용됩니다.
  • 탐색 단추(다음 및 뒤로)와 커밋 단추를 혼동하지 마세요. 다음은 마법사에서 약정 없이 진행하는 것을 의미합니다. 뒤로는 항상 다음 페이지에서 사용할 수 있어야 하며 뒤로를 클릭하면 마지막 다음 단추의 효과가 취소됩니다. 이것이 불가능한 경우 사용자는 약정을 하고 있으며 커밋 단추의 특정 레이블을 통해 표시됩니다. 다음 및 뒤로 단추에 대한 자세한 지침은 탐색을 참조 하세요.

취소 단추

  • 사용자에게 실제로 취소할지 여부를 확인하도록 요청하지 마세요. 이렇게 하면 짜증이 날 수 있습니다. 예외:
    • 작업에는 중대한 결과가 있으며 잘못된 경우 쉽게 수정할 수 없습니다.
    • 이 작업을 수행하면 사용자의 시간 또는 노력이 크게 손실 될 수 있습니다.
    • 작업은 다른 작업과 명확하게 일치하지 않습니다.
  • 사용자가 실수로 취소된 경우 마법사를 다시 시작할 수 있습니다.
  • 취소 단추를 사용하지 않도록 설정하지 마세요. 예외:
    • 취소가 해롭다면 자체 포함 마법사에서 작업을 수행할 때 발생할 수 있습니다.
    • 취소가 불가능한 경우 마법사가 모든 단계를 제어할 수 없는 경우일 수 있습니다.

단추 닫기

  • Follow-Up 및 완료 페이지에 닫기를 사용합니다. 창을 닫으면 이 시점에서 수행된 변경 내용이나 작업이 중단되지 않으므로 취소를 사용하지 마세요. 완료는 명령적 동사가 아니므로 사용하지 마세요.
  • 작업이 수행되면 취소는 닫기(자체 포함 마법사의 경우)가 됩니다. 닫기의 효과는 단순히 창을 닫는 것입니다.

기타 컨트롤

  • 명령 링크는 약정이 아닌 선택 항목에만 사용합니다. 특정 커밋 단추는 마법사의 명령 링크보다 약정이 훨씬 낫음을 나타냅니다.
  • 명령 링크를 사용하는 경우 다음 단추를 숨기지만 취소 단추를 그대로 둡니다.

페이지 사용(대 대화 상자 또는 인라인 UI)

  • 일반적으로 대화 상자 대신 페이지를 사용하는 것이 좋습니다. 사용자는 마법사가 페이지 기반이 될 것으로 예상합니다.
  • 대화 상자를 사용하여 개체 선택기 및 브라우저와 같은 페이지를 완료할 수 있습니다.
  • 대화 상자를 사용하여 전체 페이지에 적용되고 커밋 단추를 클릭하여 발생하는 오류 메시지를 제공합니다.
  • 점진적 공개 및 컨텍스트 UI와 같은 간단한 동적 동작에 인라인 프레젠테이션을 사용합니다.
  • 특정 컨트롤에 적용되는 오류 메시지에 인라인 프레젠테이션을 사용합니다.

마법사 페이지

  • 효율적인 의사 결정에 집중합니다. 필수 요소에 집중할 페이지 수를 줄입니다. 관련 페이지를 통합하고 선택적 페이지를 기본 흐름에서 제외합니다. 사용자가 마법사를 통해 다음을 완전히 클릭하면 처음에는 좋은 환경처럼 보일 수 있지만 사용자가 기본값을 변경할 필요가 없는 경우 페이지가 필요하지 않을 수 있습니다.

  • 단일 용도와 시각적 일관성을 갖도록 각 페이지를 디자인합니다. 자세한 내용은 페이지 무결성을 참조하세요.

  • 시작 페이지를 사용하지 마세요. 가능하면 첫 번째 페이지를 작동합니다. 다음과 같은 경우에만 선택적 시작 페이지를 사용합니다.

    • 마법사에는 마법사를 성공적으로 완료하는 데 필요한 필수 구성 요소가 있습니다.
    • 사용자는 첫 번째 선택 페이지를 기반으로 마법사의 용도를 이해하지 못할 수 있으며 추가 설명이 필요하지 않습니다.
    • 시작 페이지에 대한 기본 명령은 "시작하기 전:"입니다.

    잘못된 예:

    mappoint 설치 시작 페이지의 스크린샷

  • 최신 마법사는 기능 첫 번째 페이지를 선택합니다. 여기서는 할 일이 없지만 다음을 클릭합니다. 왜 사용자가 귀중한 시간에이 토큰 세금을 지불하도록 강요합니까?

  • 사용자가 선택하라는 메시지가 표시되는 페이지에서 가장 가능성이 높은 경우에 최적화합니다. 이러한 유형의 페이지는 지침뿐만 아니라 실제 선택 항목을 제시해야 합니다.

    • 시작 페이지를 사용하지 않는 경우 선택 항목의 첫 번째 페이지 맨 위에 있는 마법사의 용도를 설명합니다.
  • 커밋 페이지를 사용하여 사용자가 작업에 커밋할 때 명확하게 표시합니다. 일반적으로 커밋 페이지는 선택 항목의 마지막 페이지이며, 다음 단추는 커밋 중인 작업을 나타내기 위해 레이블이 다시 지정됩니다.

    • 작업이 위험하거나(보안 또는 시간 또는 돈 손실 포함) 사용자가 선택 항목을 검토해야 할 가능성이 없는 한 사용자의 이전 선택 항목을 요약하는 요약 페이지를 사용하지 마세요.
  • 진행률 페이지를 사용하여 긴 작업의 상태 표시합니다. 성공적으로 완료되면 진행률 페이지가 자동으로 다음 단계로 진행됩니다. 사용자가 확인해야 하는 문제가 있는 경우에만 진행률 페이지에 유지되어야 합니다. 진행률 페이지로 돌아가기를 클릭하면 부작용이 없어야 합니다.

    • 단일 확정 진행률 표시줄을 사용합니다. 다음을 포함하여 확정된 진행률 표시줄 지침을 따릅니다.
      • 완료를 명확하게 나타냅니다. 작업이 완료되지 않은 한 진행률 표시줄이 100%로 이동하지 않도록 합니다.
      • 진행률을 다시 시작하지 마세요. 사용자가 작업이 언제 완료될지 알 수 없기 때문에 진행률 표시줄이 다시 시작되면(작업 단계가 완료되었기 때문일 수 있음) 값이 손실됩니다. 대신 작업의 모든 단계가 진행률의 일부를 공유하고 진행률 표시줄을 한 번 완료하도록 합니다.
    • 진행률 표시줄 위의 현재 단계에 대한 간결한 설명을 제공합니다. 빠른 작업의 경우 이러한 텍스트는 필요하지 않습니다. 진행률 표시줄만으로도 충분합니다. 1분 이상 필요한 작업의 경우 텍스트가 유용할 수 있습니다.
      • 일반적으로 동사로 시작하고 줄임표로 끝나는 문장 조각을 사용합니다. 예: 파일 복사..., 필수 구성 요소 설치......
      • 아래가 아닌 막대 위에 텍스트를 배치합니다.
      • 잘못된 예:
      • 아래 텍스트가 있는 진행률 표시줄의 스크린샷
      • 이 예제에서는 설명 텍스트가 진행률 표시줄 위에 표시됩니다.
      • 불필요한 세부 정보로 진행률 페이지를 어지럽히지 마세요. 이 페이지는 기술 지원을 위한 것이 아닙니다. 사용자용입니다.
      • 잘못된 예:
      • 너무 많은 세부 정보가 있는 진행률 표시줄의 스크린샷
      • 이 예제에서 GUID와 같은 기술 세부 정보는 사용자에게 의미가 없습니다.
  • 마법사를 종료하는 것 말고 아무 것도 하지 않는 축하합니다 페이지를 사용하지 마세요. 마법사 결과가 사용자에게 명확하게 표시되는 경우 최종 커밋 단추에서 마법사를 닫습니다.

    • 사용자가 후속 작업으로 수행할 가능성이 있는 관련 작업이 있는 경우 Follow-Up 페이지를 사용합니다. "전자 메일 메시지 보내기"와 같은 친숙한 후속 작업을 피합니다.
    • 결과가 표시되지 않고 작업 완료에 대한 피드백을 제공하는 더 좋은 방법이 없는 경우에만 완료 페이지를 사용합니다.
    • 진행률 페이지가 있는 마법사는 완료 페이지 또는 Follow-Up 페이지를 사용하여 작업 완료를 나타내야 합니다. 장기 실행 작업의 경우 커밋 페이지에서 마법사를 닫고 알림을 사용하여 피드백을 제공합니다.
  • 입력이 복잡하고 사용자가 검토해야 하는 경우에만 요약 페이지를 사용합니다. 작업에 심각한 위험(예: 재무 전환)이 수반되거나 마법사가 명확하지 않은 사용자 입력에 따라 작업을 수행하는 경우(투명성을 통해 신뢰를 구축하기 위해) 요약 페이지가 이 관련성 표시줄을 충족하지 않는 경우가 많으며 생략할 수 있습니다.

  • 복구가 불가능한 문제로 인해 마법사를 완료할 수 없는 경우 오류 페이지를 사용합니다. 이 페이지에서 기술 전문 용어 사용자가 이해하지 못하는 명확한 언어로 문제가 무엇인지 설명합니다. 또한 사용자가 문제를 해결하기 위해 수행할 수 있는 실용적인 단계를 제공합니다. 자세한 지침은 오류 메시지를 참조하세요.

    • 예외: 복구가 가능한 사소한 문제로 마법사가 완료되면 오류가 아닌 추가 작업으로 문제를 표시합니다. 오류, 실패 또는 문제와 같은 용어가 아닌 긍정적이고 성공 지향적이며 고무적인 언어를 사용합니다. 오류 아이콘을 사용하지 마세요.
  • 약정 없이 다음 페이지로 넘어가는 경우에만 다음을 사용합니다. 뒤로 또는 취소를 클릭하여 효과를 취소할 수 없는 경우 다음 페이지로 진행하는 것은 약정으로 간주됩니다.
  • 뒤로만 사용하여 실수를 수정합니다. 실수를 수정하는 것 외에도 사용자는 뒤로를 클릭하여 작업을 진행할 필요가 없습니다.
  • 탐색을 통해 사용자 선택을 유지합니다. 예를 들어 사용자가 변경한 경우 뒤로를 클릭한 다음 다음을 클릭하면 해당 변경 내용이 유지됩니다. 사용자는 명시적으로 지우기로 선택하지 않는 한 변경 내용을 다시 입력할 필요가 없습니다.
  • 단계를 반복하는 것이 해롭지 않으면 뒤로 단추를 사용하지 않도록 설정하지 마세요.
  • 사용자가 다음 탐색 시나리오에서 선택 항목을 찾아보거나 수정할 수 있도록 허용합니다.
    • 사용자가 입력을 제공하고, 커밋 단추를 클릭하고, 뒤로를 클릭하여 이전 변경 내용을 검토하고, 아무것도 변경하지 않고, 커밋 단추를 다시 클릭합니다. 일반적으로 이 작업이 가능해야 하며 두 번째 커밋은 작업이 이미 완료되었으므로 다음 페이지로 진행해야 합니다.
    • 사용자가 입력을 제공하고, 커밋 단추를 클릭하고, 뒤로를 클릭하여 이전 변경 내용을 검토하고, 변경한 다음, 커밋 단추를 다시 클릭합니다. 일반적으로 가능해야 하며 두 번째 커밋은 변경된 입력을 사용하여 작업을 다시 실행해야 합니다(첫 번째 효과 바꾸기 또는 실행 취소).

도움말

  • 프로그램 도움말의 설명서를 참조할 필요가 없도록 충분한 정보를 제공하도록 마법사 페이지를 디자인합니다. 마법사는 이미 사용자가 원하는 직접 프로그램과의 상호 작용에서 벗어나고 있습니다. 사용자가 외부 도움말을 검색하도록 요구하면 이 상태에서 더 멀리 제거됩니다. 도움말은 규칙이 아닌 예외여야 합니다.
  • 도움말에 액세스 지점을 제공해야 하는 경우 페이지의 콘텐츠 영역 왼쪽 아래에 있는 링크(명령 영역 위)를 사용합니다. 이 링크는 짧아야 하며 일반적으로 사용자가 답변을 원할 가능성이 가장 높은 질문 형식으로 표현되어야 합니다.
  • 올바름:
  • 도움말 링크가 있는 마법사 페이지의 스크린샷
  • 도움말에 대한 이 링크는 다음과 같은 기본 배경 정보가 마법사 페이지를 너무 복잡하게 만들기 때문에 적합합니다.

텍스트

일반

  • 사용자와 사용자의 컴퓨터, 문서, 설정 등을 참조하려면 사용자와 사용자를 사용합니다. 첫 번째 사용자(I, my)를 사용하여 컴퓨터 또는 마법사를 참조하지 마세요. 그러나 사용자가 선택하는 옵션에서 첫 번째 사용자를 사용할 수 있습니다. 예: 검사 상자만 사용합니다.
  • 모든 마법사 페이지에는 기본 명령이 있어야 합니다.

제목

  • 제목 표시줄에 마법사의 이름을 입력합니다. 제목 스타일 대문자 표시를 사용합니다.
  • 제목에는 물음표가 있는 제목을 제외하고 문장 부호가 포함되어서는 안 됩니다.
  • 마법사 제목에 마법사라는 단어를 포함하지 마세요. 예를 들어 네트워크 설정 마법사 대신 네트워크에 연결을 사용합니다.

단추

  • 뒤로 단추에 텍스트를 포함하지 마세요. 레이블이 지정되지 않은 화살표 문자 모양을 대신 사용합니다.

  • 다음 단추에 텍스트를 포함합니다. 다음 단어 외에 문자 모양(예: > 또는 >>)을 사용하지 마세요.

  • 자체에 적합한 특정 커밋 단추 레이블을 사용하고 기본 명령에 대한 응답입니다. 이상적으로 사용자는 레이블을 이해하기 위해 다른 것을 읽을 필요가 없습니다. 사용자는 정적 텍스트보다 명령 단추 레이블을 읽을 가능성이 훨씬 높습니다.

  • 가능하면 커밋 단추 레이블에 마침이라는 단어를 사용하지 마세요. 일반적으로 더 나은 특정 커밋 단추가 있기 때문입니다.

    • 단추를 클릭하면 작업이 아직 수행되지 않았으므로 작업에 커밋되는 경우 기본 명령(예: 인쇄, 연결, 시작)에 대한 응답인 동사로 시작하는 특정 레이블을 사용합니다.

    • 마법사 내에서 작업이 이미 수행된 경우 닫기를 대신 사용합니다.

      예외:

      • 저장, 선택, 선택 또는 가져오기와 같은 특정 레이블이 여전히 일반적인 경우 마침을 사용할 수 있습니다.
      • 작업에서 설정 또는 설정 컬렉션을 변경하는 경우 마침을 사용할 수 있습니다.
  • 동사를 사용하여 커밋 단추 레이블을 시작합니다. 예외는 OK, 예 및 아니요입니다.

  • 문장 스타일 대문자 표시를 사용합니다.

  • 끝에 문장 부호를 넣지 않습니다.

설명서

  • 대부분의 Windows 마법사에는 더 이상 제목에 마법사라는 단어가 없지만 설명서에서 마법사를 마법사로 참조할 수 있습니다. 이 참조는 소문자여야 합니다.
  • 올바름:
  • 네트워크를 처음으로 설정하는 경우 네트워크에 연결 마법사를 사용하여 도움을 받을 수 있습니다.
  • 이전 버전의 Windows에서 일부 레거시 마법사는 제목에 마법사를 포함할 수 있습니다. 이러한 마법사 중 하나를 참조할 때 [X] 마법사를 사용하여 [X] 마법사를 말하지 않도록 하는 것이 좋습니다.
  • 마법사 내의 개별 화면을 페이지로 참조하세요.