눌러도 아무 일이 없는 버튼이 있었다

관리자 화면 상단에 HTML 검색창이 있었다. 검색어를 넣고 눌러도 아무 일이 없다.

코드를 보니 action 이 빈 문자열이고 받는 쪽도 없었다. 화면 틀에 있던 것을 그대로 두었다.

Table of contents

없는 기능이 있는 것처럼 보였다

문의를 받고 나서 세어 봤다. 동작 안 하는 요소가 여섯 개였다.

상단 검색창
알림 아이콘 (숫자가 항상 0)
도움말 링크 (빈 페이지)
인쇄 버튼 (레이아웃 깨짐)
엑셀 내려받기 (오류)
설정 메뉴 하나 (빈 화면)

전부 HTML 에는 있고 동작은 안 한다. 있는 것처럼 보이면 사용자가 쓰고 안 되면 문의한다.

안 될 때 사용자는 자기가 잘못 쓴 것으로 여기고 몇 번 더 시도한다. 없는 기능은 없는 것보다 있는 것처럼 보이는 편이 나쁘다.

셋 중 하나로 정했다

각각에 대해 셋 중 하나를 정했다. 필요한 기능이면 만들고 필요 없으면 HTML 에서 빼고 나중에 만들 것이면 준비 중임을 보인다.

여섯 개를 나눴다.

정하지 않고 두는 것만 피하면 됐다.

비활성 표시를 어떻게 할지 정했다

준비 중인 것을 어떻게 보일지 정했다.

<li class="disabled">
  <a href="#" onclick="return false;">
    권한 관리 <span class="badge">준비중</span>
  </a>
</li>

disabled 클래스로 회색이 되고 onclick 이 막아 안 넘어가며 준비중 표시가 있다. 이러면 사용자가 있다는 것을 알면서도 아직 안 되는 것을 안다.

입력 요소라면 CSS 로 회색을 입히는 것에서 끝내지 않고 disabled 를 붙였다. 모양만 바꾸면 여전히 눌리고 값도 함께 넘어가는데 disabled 가 붙으면 초점도 안 잡히고 폼을 보낼 때 값이 실리지 않는다고 규격에 적혀 있다.

아무 표시 없이 눌리는 것과 표시하고 안 눌리는 것은 사용자가 받는 인상이 완전히 다르다.

언제까지 준비 중인지

badge 에 준비중이 몇 년째 붙어 있는 경우를 많이 봤고 그렇게 안 되게 했다. 준비 중인 항목을 목록으로 적고 예정 시점을 넣었다.

docs/pending-features.md

권한 관리      2016 Q4 예정
대시보드 개편   미정  ← 미정이면 지우는 것을 검토

미정이 붙으면 지울지 다시 본다. 언제 만들지 모르는 것을 화면에 남길 이유가 없고 나중에 생겼을 때 보여 주는 편이 낫다.

검증 — 전수로 눌러 보기

여섯 개 말고 더 있는지 봤다. 화면마다 눌러 보는 것이 제일 확실했다.

상품 목록     버튼 8개, 링크 14개 → 이상 없음
주문 목록     버튼 11개, 링크 9개 → '반품 처리' 오류
회원 목록     버튼 6개, 링크 12개 → '메일 발송' 미구현

주요 화면 12개를 열어서 button 과 a 를 전부 눌렀고 두 개가 더 나왔다. 시간이 걸리는 작업이지만 한 번 해 두니 상태가 파악됐다.

내부 링크가 없는 페이지로 가는 경우도 있어서 목록을 뽑아 하나씩 확인했다.

$links = [];
foreach (glob(APPPATH . 'views/**/*.php') as $f) {
    preg_match_all('/href=[\'"]([^\'"#]+)[\'"]/', file_get_contents($f), $m);
    $links = array_merge($links, $m[1]);
}
$links = array_unique($links);

내부 경로만 골라서 CodeIgniter 컨트롤러와 메서드가 있는지 확인했다.

foreach ($links as $l) {
    $parts = explode('/', trim($l, '/'));
    $ctrl = ucfirst($parts[0] ?? '');
    $file = APPPATH . "controllers/{$ctrl}.php";
    if (!file_exists($file)) echo "없는 경로: {$l}\n";
}

file_exists 에서 네 개가 걸렸고 옛 화면으로 가는 링크였다. 코드에서 찾는 것만으로는 화면에 보이는 것을 다 잡지 못하므로 이 대조는 눌러 보는 것과 함께 했다.

정리

• 동작하지 않는 요소를 남기면 사용자가 눌러 보고 문의한다
• 없는 기능은 없는 것보다 있는 것처럼 보이는 편이 나쁘다
• 요소마다 만들지 지울지 비활성으로 둘지 정한다
• 정하지 않고 두는 것만 피하면 된다
• 비활성은 회색 처리와 준비중 표시를 같이 한다
• 회색으로 칠하는 것과 disabled 를 붙이는 것은 다르다
• 준비 중인 항목에 예정 시점을 적고 미정이면 지우는 것을 검토한다
• 화면을 열어 클릭할 수 있는 것을 전부 눌러 본다
• href 를 뽑아 대상 컨트롤러가 실제로 있는지 대조한다