가이드가 있는 둘러보기 디자인

  • 릴리스 버전: Yokohama
  • 업데이트 날짜 2025년 01월 30일
  • 읽기6분
  • 다음 팁을 사용하여 사용자를 위한 효과적인 가이드가 있는 둘러보기를 만들 수 있습니다.

    가이드가 있는 둘러보기 계획

    가이드가 있는 둘러보기의 상세 정보를 설명하기 전에 다음 질문에 답하십시오.
    • 투어의 목적은 무엇입니까? 사용자가 기능을 더 잘 이해할 수 있도록 자세한 사용자 인터페이스 설명을 제공하는 설명선을 사용하시겠습니까? 아니면 사용자가 새 인시던트를 만드는 방법과 같은 작업을 수행하는 방법을 배우기를 원합니까? 투어 계획을 시작하기 전에 이러한 질문을 고려하고 조사를 수행하여 전체 목표를 개별 단계로 적절하게 세분화할 수 있도록 하는 것이 중요합니다.
    • 투어는 어디에서 이용할 수 있나요? 사용자가 매일 수행할 수 있는 작업(예: 항목 서비스 카탈로그 주문, 인시던트 생성)을 완료하도록 안내하려면 프로덕션 인스턴스에서 둘러보기를 사용할 수 있도록 하는 것이 합리적입니다. 시스템에서 실제 기록을 생성하지 않고 이러한 작업을 탐색할 수 있도록 사용자를 교육하려는 경우, 대신 교육 목적으로 비프로덕션 인스턴스에서 둘러보기를 사용할 수 있도록 설정하는 것이 좋습니다. 두 시나리오 모두 유효합니다.
    • 투어 이름을 무엇으로 해야 할까요? 둘러보기를 생성할 때 둘러보기 이름을 입력하라는 메시지가 나타납니다. 사용자가 둘러보기의 목적을 이해할 수 있도록 이름이 고유하고 직관적이어야 합니다 . 예를 들어, 가능한 둘러보기 이름으로 "새 인시던트 생성" 또는 "인시던트 목록 검토"를 사용합니다.
    • 사용자가 페이지 또는 작업에 대해 이미 알고 있는 내용에 대해 어떤 가정을 하고 있습니까? 둘러보기에 참여할 수 있는 모든 사용자의 이해 수준이 동일합니까? 이 정보를 사용하여 둘러보기를 수행하는 모든 사용자가 컨텐츠를 이해할 수 있도록 둘러보기를 시작할 때 얼마나 많은 설명을 제공할지 결정할 수 있습니다.
    • 둘러보기의 목적이 작업을 수행하는 것이라면 둘러보기에 참여하는 각 사용자가 다른 기록을 생성하도록 지침을 개인화하려면 어떻게 해야 합니까? 예를 들어, 둘러보기에서 사용자가 시설이라는 그룹을 만드는 과정을 안내하는 경우 설명선에서 그룹 이름 필드에 고유한 값을 할당하도록 지시하여 후속 사용자에게 중복 이름 오류가 발생하지 않도록 할 수 있습니다.
    투어를 계획할 때 다음과 같은 추가 질문에 답할 수도 있습니다.
    • 둘러보기를 어느 페이지에서 시작해야 합니까?
    • 목표를 달성하는 데 중요한 단계는 무엇입니까?
    • 사용자가 한 단계에서 다음 단계로 이동하려면 어떻게 해야 합니까?

    가이드가 있는 둘러보기 계획

    홈페이지를 탐색 서비스 포털 하는 것이 목적인 가이드가 있는 둘러보기에 대한 다음 샘플 계획을 검토합니다.

    제공해야 하는 주요 정보와 가이드가 있는 둘러보기를 생성할 때 사용할 필드 값을 참고하십시오.
    • 둘러보기 이름: 서비스 포털 개요
    • 목표: 사용자가 홈페이지의 주요 요소를 탐색하는 방법을 잘 이해하고 있어야 합니다.서비스 포털
    • 포털 이름: 서비스 포털
    • 시작 페이지: 서비스 포털: ID 인덱스
    • 역할: 모두
    표 1. 샘플 가이드가 있는 둘러보기 계획: 서비스 포털 홈페이지 개요
    단계 호출 트리거
    소개
    • 제목: 서비스 포털 개요
    • 텍스트: 새 서비스 포털 홈페이지의 가이드가 있는 둘러보기에 오신 것을 환영합니다.
    다음 버튼
    1
    • 이 요소를 가리킵니다. 무엇을 도와드릴까요?
    • 배치: 아래
    • 텍스트: 먼저 어떻게 도와드릴까요? 검색창으로 시작합니다. 원하는 항목을 찾을 수 없는 경우 여기에 입력하거나 검색 아이콘을 클릭하거나 키보드에서 Enter 키를 누릅니다. 지금은 먼저 몇 가지 다른 영역을 살펴보겠습니다.
    다음 버튼
    2
    • 이 요소를 가리킴: 주문하기
    • 배치: 상위
    • 텍스트: 새 휴대전화 등을 주문하려면 주문하기를 선택합니다.
    다음 버튼
    3
    • 이 요소를 가리키는: 지식베이스
    • 배치: 상위
    • 텍스트: 지식베이스를 검색하려면 지식베이스를 선택하십시오.
    다음 버튼
    4
    • 이 요소를 가리킵니다. 도움말 보기
    • 배치: 상위
    • 텍스트: 문제에 대한 도움말을 보려면 도움말 보기를 선택합니다.
    다음 버튼
    5
    • 이 요소를 가리키는: 커뮤니티
    • 배치: 상위
    • 텍스트: 동료에게 질문을 하려면 커뮤니티를 선택합니다.
    다음 버튼
    6
    • 이 요소를 가리키는: 제목 표시줄의 Knowledge
    • 배치: 왼쪽
    • 텍스트: 지식 베이스를 확인하고, 무언가를 주문하고, 기록한 요청을 살펴보고, 제목 표시줄에 있는 다른 옵션도 확인할 수 있습니다.
    다음 버튼
    7
    • 이 요소를 가리킵니다. 사용자 이름
    • 배치: 왼쪽
    • 텍스트: 본인의 프로파일을 보거나 본인의 이름을 클릭하여 로그아웃합니다.
    다음 버튼
    8
    • 이 요소를 가리키는: 로고 왼쪽 위
    • 배치: 아래
    • 텍스트: 회사 로고를 클릭하여 홈페이지로 서비스 포털 다시 이동합니다.
    다음 버튼
    결론 텍스트: 축하합니다! 이제 홈페이지에 서비스 포털 대한 전반적인 이해를 이해했습니다. 완료를 클릭하여 둘러보기를 종료합니다.

    트리거 선택

    둘러보기의 목적이 사용자에게 페이지의 기능을 소개하여 사용자가 사용자 지정 대시보드와 같은 제품에 익숙해질 수 있도록 하는 것이라면 다음 버튼을 트리거로 사용합니다. 기록 생성과 같은 작업을 수행하는 것이 목적이라면 다음 사항을 고려하십시오.
    • 참조 필드 또는 날짜 필드와 같은 조회 요소로 필드를 채우려면 조회 창을 여는 트리거를 사용하지 마십시오. 조회 창이 열리면 둘러보기가 종료됩니다. 다음 트리거 중 하나를 사용합니다.
      • 다음 단추: 사용자가 값을 입력하거나 조회하여 선택한 후 다음을 클릭합니다.
      • 요소 값 변경 트리거: 사용자가 값을 선택하고 필드 외부를 클릭하면 트리거가 다음 단계로 이동합니다.
    • 일부 UI 요소의 경우 요소 트리거 오른쪽 클릭을 사용할 수 있습니다. 일반적으로 오른쪽 클릭 동작은 메뉴를 여는 데 사용되지만 오른쪽 클릭 메뉴 옵션에는 설명선을 배치할 수 없습니다. 마우스 오른쪽 버튼 클릭 메뉴 옵션을 설명하려는 설명이 포함된 가이드가 포함된 둘러보기에서 이 트리거를 사용할 수 있습니다. 설명선 텍스트에 설명 정보를 입력하고 사용자에게 요소를 마우스 오른쪽 단추로 클릭하여 메뉴를 보도록 지시합니다. 다음은 이러한 유형의 설명선의 예입니다.

      필드 옵션을 보려면 마우스 오른쪽 버튼을 클릭하도록 사용자에게 지시하는 설명선 예시

      사용자가 요소(이 경우 필드 레이블)를 마우스 오른쪽 단추로 클릭하면 이 지침이 사라지고 다음 지침이 나타납니다.

    • 엘리먼트 트리거 위에 마우스를 올려놓는 것은 엘리먼트 트리거를 우클릭하는 것과 비슷합니다. 사용자가 요소를 가리키면 설명선이 사라집니다. 예를 들어, 필드 레이블을 가리킬 때 힌트가 나타나는 것을 시연하면 힌트 텍스트가 나타나기 전에 설명선 단계가 사라집니다. 이러한 유형의 트리거는 가이드가 있는 둘러보기 흐름을 방해하는 것처럼 보일 수 있습니다.

    설명선 사용

    요소와 상호작용하려면 요소 위에 설명선을 배치해야 합니다. 요소를 대상으로 선택하면 파란색으로 강조 표시됩니다. 다음 예제에서는 설명선이 상황에 맞는 메뉴 아이콘을 가리키는 것처럼 보이지만 헤더 표시줄이 파란색으로 강조 표시됩니다.

    그림 1. 상황에 맞는 메뉴의 잘못된 설명선 배치
    설명선의 잘못된 배치

    이 예에서는 상황에 맞는 메뉴에 대한 설명선의 올바른 배치를 보여 줍니다. 컨텍스트 메뉴 아이콘이 파란색으로 강조 표시됩니다.

    그림 2. 상황에 맞는 메뉴의 올바른 설명선 배치
    설명선의 올바른 배치
    다음 팁도 도움이 될 수 있습니다.
    • 탭이 포함된 폼에 설명선을 배치하는 경우 사용자가 탭을 볼 수 있도록 열려 있지 않을 수 있다는 점을 고려해야 합니다. 둘러보기의 나머지 부분을 진행하기 전에 먼저 탭을 열도록 사용자에게 지시하는 새 설명선을 작성합니다.
    • 동적 컨텐츠와 연결된 필드에 대한 설명선을 최소화합니다. 사용자가 연결된 둘러보기 요소를 찾을 수 없는 경우 지연된 페이지 새로 고침으로 둘러보기가 중간에 종료될 수 있습니다.
    • 팝업 창을 통해 사용자를 안내할 때 팝업 아이콘 위나 근처의 원래 페이지에 설명선을 추가합니다. 설명선은 팝업 창에 추가할 수 없으므로 설명선 지침 내에서 사용자에게 팝업 창에 대한 단계를 안내합니다.
    • 설명선의 색은 표준 플랫폼 UI에서 정적이지만 에서 설명선을 서비스 포털사용자 지정할 수 있습니다. 이 기능을 사용하여 설명선과 페이지 간의 모양과 느낌을 일관되게 유지하는 것이 좋습니다 서비스 포털 . 페이지에서 만드는 서비스 포털 Guided Tours에 대한 자세한 내용은 Guided Tours 요청을 참조하세요.

    둘러보기 자동 시작

    사용자가 첫 페이지 방문 시 둘러보기를 수행하도록 하려면 둘러보기를 자동으로 시작합니다.

    하나의 시작 페이지에서 여러 둘러보기를 자동으로 시작하도록 선택할 수 있습니다. 이 경우 각 둘러보기에 자동 실행 순서를 연속적으로 적용하여 사용자가 두 번째 페이지 방문 시 두 번째 둘러보기를 시작하고 세 번째 페이지 방문 시 세 번째 둘러보기를 시작하는 식으로 진행할 수 있습니다. 소개 둘러보기로 사용자를 시작하고 후속 둘러보기를 통해 복잡성 수준을 높이거나 다른 중점 영역을 추가하려는 경우 이 옵션을 사용합니다.