행동과 레이블

목표

사용자가 control을 누르기 전에 무엇이 일어나는지 예측하게 한다. 행동 레이블은 화면 설명을 반복하지 않고 실제 결과, 대상과 필요한 경우 범위를 말한다.

기본 형식

가능하면 대상 + 행동 또는 자연스러운 행동 결과를 사용한다.

• 초안 저장
• 검증 실행
• 운영 기준본 발행
• 필터 초기화
• 실패한 작업 다시 실행
• 커리큘럼 목록으로 돌아가기

대상이 주변 문맥에서 완전히 명확하면 짧게 쓸 수 있다. 반복 row나 screen reader 이름에서는 대상을 다시 포함한다.

주 행동 선택

• 한 화면 또는 결정 영역에는 가장 높은 강조의 행동 하나만 둔다.
• 주 행동은 사용자가 현재 목표를 완료하는 가장 가까운 다음 단계다.
• 보조 행동은 outline, ghost, menu 또는 link로 위계를 낮춘다.
• 위험 행동은 일상적인 주 행동과 분리한다.
• 다음 단계가 아직 없으면 disabled primary를 장식처럼 두기보다 필요한 조건을 먼저 설명한다.

행동 유형

실행

현재 데이터를 바꾼다.

• 초안 저장
• 검토자 추가
• 연결 해제

이동

다른 위치로 간다.

• 실행 기록 보기
• 커리큘럼 목록으로 돌아가기

가능하면 link semantics를 사용한다.

선택

현재 option이나 view를 바꾼다.

• label은 option 자체를 말하고 selected semantics를 제공한다.
• 선택과 저장이 별도라면 그 사실을 명확히 한다.

요청

실제 완료가 아니라 background 작업을 접수한다.

• 분석 시작
• 발행 요청

접수 뒤 완료라고 말하지 않는다.

모호한 레이블 바꾸기

취소가 실제 진행 중 작업을 취소하는지 dialog만 닫는지 혼동될 수 있으면 결과를 구체적으로 쓴다.

처리 중 레이블

• 원래 동사를 유지하고 현재 진행형으로 바꾼다.
• 저장 중…, 검증 중…, 발행 요청 중…
• button 폭이 크게 바뀌지 않도록 일반·pending 레이블 길이를 함께 검토한다.
• 처리 중에는 중복 실행을 막는다.
• label 변화만 유일한 상태 알림이 되지 않도록 필요한 경우 status text를 제공한다.

Disabled 행동

• 비활성 이유를 사용자가 현재 화면에서 해결할 수 있는지 판단한다.
• 해결 가능하면 가장 가까운 조건과 위치를 설명한다.
• 권한 제한이면 요청 또는 담당자 경로를 제공한다.
• tooltip에만 이유를 두지 않는다.
• disabled control을 focus할 수 없는 경우 인접 설명이 독립적으로 읽혀야 한다.
• 사용할 수 없는 행동이 사용자에게 전혀 필요 없는 정보라면 숨김을 검토한다.

Icon 행동

• icon-only는 공간 제약이 분명하고 의미가 널리 이해되는 반복 행동에 제한한다.
• 항상 aria-label 또는 눈에 보이는 tooltip을 제공한다.
• 접근 가능한 이름에 대상을 포함한다. 예: 신규 입사자 온보딩 더보기.
• 서로 비슷한 icon으로 destructive와 일반 행동을 구분하지 않는다.
• 핵심 주 행동은 가능한 한 눈에 보이는 텍스트 레이블을 쓴다.

범위와 개수

• bulk action에는 대상 개수를 포함한다: 선택한 12명에게 다시 발송.
• 전체와 현재 filter 결과 범위를 구분한다.
• 부분 선택이 있으면 모두의 의미를 명확히 한다.
• 실행 후 일부 실패가 가능한 행동은 결과 summary를 준비한다.

좁은 화면

• 레이블을 icon으로 무조건 축약하지 않는다.
• 주 행동을 먼저 보존하고 보조 행동을 menu에 모은다.
• full-width button은 행동 중요도와 form 흐름에 맞을 때만 사용한다.
• 고정 action bar가 콘텐츠와 오류를 가리지 않게 한다.
• 긴 레이블이 반복되면 용어 체계를 줄이되 결과 의미를 잃지 않는다.

접근성

• native button과 link를 역할에 맞게 사용한다.
• 접근 가능한 이름만 읽어도 결과와 대상을 이해할 수 있어야 한다.
• toggle은 aria-pressed, selected control은 해당 semantic 상태를 제공한다.
• keyboard shortcut은 기본 control을 대체하지 않는다.
• focus-visible을 제거하지 않는다.
• 새로운 window, download, 외부 이동처럼 예상 밖 결과가 있으면 미리 알린다.

예제

<PageHeader
  title="신규 입사자 온보딩"
  actions={
    <>
      <Button variant="outline">미리보기</Button>
      <Button>초안 저장</Button>
    </>
  }
/>

<Button
  disabled={!canPublish}
  aria-describedby={!canPublish ? 'publish-requirements' : undefined}
>
  운영 기준본 발행
</Button>
<p id="publish-requirements">
  질문 2개의 기준 답안을 입력하고 검증을 통과하면 발행할 수 있어요.
</p>

피해야 할 사용

• 확인, 다음, 완료만으로 결과를 숨김
• 동일한 강조의 주 행동 여러 개
• 이동에 button, 실행에 link를 의미 없이 사용
• pending 중 원래 작업과 무관한 처리 중 사용
• disabled 이유를 hover tooltip에만 제공
• icon만 보고 핵심 행동을 추측하게 함
• bulk action에서 대상 범위와 개수 생략
• page header와 workflow bar에 같은 행동 중복

검토 체크

• 레이블만 읽어도 결과와 대상을 예측할 수 있다.
• 한 영역의 가장 강한 행동이 하나다.
• 실행, 이동, 선택, 요청에 맞는 semantic control을 쓴다.
• pending 레이블이 원래 동사를 유지한다.
• disabled 이유와 해결 경로가 hover 없이 보인다.
• icon-only 행동에 대상이 포함된 접근 가능한 이름이 있다.
• bulk action의 개수와 범위가 명확하다.
• 위험 행동이 일상적인 주 행동과 분리돼 있다.
• 좁은 화면에서도 주 행동의 텍스트를 유지한다.

관련 항목

• 목소리와 태도
• 확인 문구
• WorkflowBar
• PageHeader