• 거의 모든 화면은
  버튼, 폼, 메뉴, 링크, 대화상자, 알림, 아이콘, 체크박스·라디오 버튼, 탭, 검색이라는 상호작용 알파벳으로 구성되며, 수십 년간 축적된 관례가 사용자의 학습 비용을 줄임
• 각 요소는 행동 실행, 입력 수집, 이동, 시스템 피드백, 의미 전달이라는 역할이 다르므로
  버튼과 링크, 체크박스와 토글처럼 겉모습과 기능의 문법을 뒤섞지 않아야 함
  Fitts의 법칙, 인지 우선 원칙, 지각된 어포던스에 따라 목표물을 크고 가깝게 만들고, 선택지를 보이게 하며, 조작 가능한 요소는 그렇게 보여야 함
• 총
  86개 사용성 지침은 불필요한 필드와 알림 삭제, 결과 중심 레이블, 오류 복구 안내, 표준 아이콘 사용, 키보드·터치·색각 접근성 보장 같은 구체적인 설계 판단으로 이어짐
• 생성형·에이전트 인터페이스에서도 사람은 버튼, 필드, 탭으로 승인·일시정지·검사·실행 취소를 수행하므로, 동적인 화면일수록
  익숙하고 일관된 컨트롤이 필요함

GUI를 구성하는 상호작용 알파벳

• 약 10개의 표준 요소만으로 거의 모든 GUI를 구성할 수 있음

• 버튼은
  명령을 실행함

• 폼·체크박스·검색은 입력을 받음

• 메뉴·링크·탭은 사용자를 이동시킴

• 대화상자·알림은 시스템의 응답을 전달함

• 아이콘은 다른 요소가 쓰는 상징을 제공함

• GUI는 Windows, Icons, Menus, Pointer의 결합인
  WIMP를 통해 명령 시퀀스에서 작업 공간으로 발전함

• Jakob의 법칙에 따르면 사용자는 대부분의 시간을 다른 사이트와 앱에서 보내므로, 새 제품도 이미 아는 방식으로 작동하기를 기대함

• 디자인 관례는 여러 제품이 함께 축적하는
  공동 자산임

• 표준 돋보기 아이콘은 집단 학습을 강화함

• 데스크톱 탐색을 햄버거 메뉴로 감추거나 링크를 버튼처럼 꾸미면 다른 인터페이스가 의존하는 관례까지 약화시킴

1. 버튼: 결과를 실행하는 컨트롤

• 버튼은 클릭하거나 탭했을 때 하나의 명령을 실행하며, 구매·저장·전송·삭제처럼 화면이 아닌 실제 상태를 바꿈
• 잘못된 탐색은 뒤로 가기로 복구할 수 있지만 잘못 누른 버튼은 금전, 파일, 메시지에 직접 영향을 주므로
  결과 중심 레이블이 중요함
• Xerox Star와 Macintosh는 물리적 버튼의 테두리와 음영을 빌려 조작 가능성을 드러냈으며, 이는 지각된 어포던스(perceived affordance)에 해당함
• 2013년 무렵 확산한 평면 디자인은 테두리와 그림자를 제거해 명령과 장식의 구분을 어렵게 만듦
• 레이블은
  OK

대신 Save Invoice

, Place Order

, Delete 3 Files

처럼 동사와 결과를 포함해야 함

• 1954년 발표된
  Fitts의 법칙에 따르면 포인팅 시간은 거리에 따라 늘고 목표 크기에 따라 줄어듦

• 자주 쓰는 목표는 크고 가까워야 함

• 터치 목표는 최소
  1×1cm여야 함

• 화면 가장자리에 붙은 메뉴는 포인터가 경계를 넘어갈 수 없어 사실상 더 큰 목표가 됨

• 분할 버튼(split button)은 큰 영역에서 기본 명령을 실행하고 작은 영역에서 변형 명령 메뉴를 엶

• 두 영역 사이에 구분선을 표시해야 함

• 작은 메뉴 영역도 충분한 크기를 확보해야 함

• 지배적인 기본 명령이 없다면 일반 메뉴 버튼을 써야 함

• 일시적으로 사용할 수 없는 버튼은 숨기지 말고 기본색의 흐린 버전으로 표시하며, 비활성화된 이유와 활성화 방법을 알려야 함

버튼 설계 지침

• 형태, 배경 대비, 눌림 상태를 통해
  누를 수 있게 보여야 함
• 모든 레이블은 2~4단어의 결과 중심 동사구로 작성함
• 화면마다 시각적으로 지배적인 기본 행동은 하나만 둠
• 자주 쓰는 행동은 크고 가까이 배치하고 터치 목표 크기를 지킴
• 모든 누름에
  0.1초 이내로 반응함
• 비활성 버튼은 흐리게 표시하고 사용 조건을 안내함
• 행동에는 버튼, 탐색에는 링크를 사용함
• 버튼은 필드와 콘텐츠 뒤, 읽기 흐름이 끝나는 지점에 배치함

2. 입력 필드와 폼: 주의를 전환으로 바꾸는 구조

• 폼은 결제, 가입, 잠재 고객 확보가 이뤄지는 곳이므로 사용성이 매출에 직접 연결됨

• 모든 필드에는 입력 중에도 남아 있는 외부 레이블이 필요함

• 자리표시자(placeholder)는 타이핑을 시작하면 사라지므로 레이블을 대신할 수 없음

• 전화번호의 괄호·공백·하이픈처럼 다양한 입력 형식을 받아들이고 코드에서 정리해야 함

• 오류는 문제가 있는 필드 옆에서 평이한 언어로 알려야 하며, 사용자가 이미 입력한 데이터는 보존해야 함

• 날짜에는 날짜 선택기, 장바구니 항목 제거에는 휴지통처럼 사용자의
  정신 모형에 맞는 전용 컨트롤을 사용함

• 가장 강력한 폼 개선 방법은 필드 삭제임

• 선택 필드도 읽기, 해석, 적용 여부 판단, 생략 가능성 확인이라는
  필드 세금을 부과함

• 실제 부담보다 사용자가 느끼는 부담이 이탈을 더 잘 예측함
  3 questions, 40 seconds

처럼 예상 부담을 정확히 표시하면 막연한 두려움을 구체적인 거래로 바꿀 수 있음

• 실제로 5분 걸리는 폼을 1분이라고 안내하면 브랜드 신뢰를 잃음

• Expedia는 예약 폼의 선택 항목
  Company

를 삭제한 뒤 연간 1,200만 달러를 추가로 얻었다고 보고함

• 고객이 이 필드에 은행명과 은행 주소를 넣어 결제 검증에 실패하던 문제를 제거함

폼 설계 지침

• 꼭 필요하지 않은 필드는 모두 삭제함
• 각 필드 밖에 지속적으로 보이는 레이블을 둠
• 다양한 입력 형식을 허용하고 정규화는 컴퓨터가 처리함
• 오류를 해당 필드 옆에 표시하고 입력값을 보존함
• 날짜 선택기 등 작업에 맞는 특수 컨트롤을 사용함
• 관련 필드를 묶어
  단일 열로 배치해 읽기 순서의 모호함을 없앰
• 제출 버튼은
  Submit

대신 Place Order

처럼 결과를 표시함

• 이메일 입력 도중 오류를 내지 말고 필드에서 벗어났을 때 검증함

3. 메뉴: 정보 구조를 화면에 드러내는 요소

• 메뉴는 필요할 때 나타나는 명령 또는 탐색 목록으로, 공간을 절약하면서 사용자가 명령을 기억하지 않고 보이는 선택지를 인지하게 함

• 메뉴는 제공 가능한 선택지 전체를 보여준다는
  완전성의 약속을 내포함

• 가능성 공간을 열거할 수 있으면 메뉴를 사용함

• 선택지가 사실상 무한하면 검색을 사용함

• 사용자가 열지 않을 레이블 아래에 들어간 기능은 존재하지 않는 것과 같음

• Xerox Star는 1981년 고정 드롭다운 메뉴를 도입했고, Apple Lisa는 1983년 메뉴 바를 화면 상단에 붙임

• 이후 계단식 메뉴, 전자상거래용 메가 메뉴, 모바일 햄버거 메뉴, Microsoft Office Ribbon으로 확장됨

• 메가 메뉴는 예시를 함께 보여주어 카테고리의
  정보 향기를 강화할 수 있음

• Ribbon은 1,000개가 넘는 명령을 그룹과 레이블이 있는 아이콘으로 정리하려는 사용자 테스트 기반 설계였음

• 메뉴 구조는 정보 아키텍처를 직접 보여줌
  Solutions

, Resources

같은 모호한 분류는 기능 발견을 방해함

• 보이는 항목은 작업 기억에 보관할 필요가 없으므로 7±2 제한을 적용할 이유가 없음

• 짧고 모호한 메뉴보다 길고 명확한 메뉴가 나음

• 상단과 측면 탐색은 모두 사용자가 아는 표준 패턴이며 어느 쪽이든 사용할 수 있음

• hover 기반 계단식 메뉴는 하위 항목으로 대각선 이동할 때 이웃 항목을 지나며 닫힐 수 있고, 깊이가 늘수록 실패 가능성도 커짐

• 햄버거 메뉴는 공간이 부족한 모바일에서는 타협안이지만 데스크톱에서는 탐색을 불필요하게 숨김

메뉴 설계 지침

• 카드 소팅과 트리 테스트로 확인한 사용자 어휘를 카테고리명에 사용함
• hover보다 클릭으로 열도록 하며, hover가 필요하면 짧은 지연과 대각선 이동 허용 영역을 둠
• 계단식 메뉴는
  2단계까지만 허용함
• 데스크톱에서는 최상위 탐색을 직접 표시함
• 메뉴에서 현재 위치를 명확히 표시함
• 중요도와 작업 빈도로 정렬하고, 정확한 이름을 알고 찾는 경우에만 가나다·알파벳순을 사용함
• 가장 빈번한 2~3개 명령은 메뉴에서 꺼내 버튼으로 표시함

4. 링크: 목적지를 약속하는 웹의 기본 단위

• 링크는 클릭하면 다른 위치로 이동하는 텍스트 또는 이미지임
• Vannevar Bush는 1945년 문서 사이의 연관 경로를 구상했고, Ted Nelson은 1963년
  hypertext

라는 말을 만들었으며, Doug Engelbart는 1968년 작동하는 링크를 시연함

• Tim Berners-Lee는 1991년 웹을 내놓았고 NCSA Mosaic은 1993년 링크를 파란색과 밑줄로 표시해 지속되는 관례를 확립함
• 링크는 클릭할 수 있다는 시각적 약속과 목적지가 무엇인지 알려주는 언어적 약속을 함께 제공함
• 목적지를 예측하게 하는
  정보 향기가 중요하며 Click here

, Learn more

는 목적지 정보를 제공하지 못함

• 사용자는 링크의 처음 약
  11자만 읽는 경우가 많으므로 의미 있는 단어를 앞에 둬야 함
• 링크는 장소로 이동하고 버튼은 행동을 실행하므로 두 시각 언어를 혼합하지 않아야 함

링크 설계 지침

• 본문 링크에는 색과 밑줄을 함께 사용해 색각이나 화면 품질에 의존하지 않게 함
• 링크가 아닌 요소에는 링크 서식을 사용하지 않음
• 정보를 전달하는 단어를 앞부분에 배치함
• 목적지를 예측할 수 있고 문맥 밖에서도 이해되는 링크 문구를 사용함
• 링크가 많은 화면에서는 방문 여부를 구분해 재방문과 길 찾기를 지원함
• 링크를 버튼처럼, 버튼을 링크처럼 꾸미지 않음
• 기본적으로 같은 탭에서 열고 예외는
  (PDF)

처럼 링크에 표시함

5. 대화상자: 정당화되어야 하는 작업 중단

• 대화상자는 질문, 결정, 확인이 필요할 때 주 작업 흐름을 중단하는 보조 창임

• 모달 대화상자는 닫을 때까지 다른 작업을 막음

• 비모달 대화상자는 작업을 계속할 수 있게 함

• Macintosh는 1984년 메시지와 OK·Cancel 버튼으로 대화상자 문법을 정립했지만, 결과 중심 레이블이 더 명확함
  Delete 3 Files

와 Keep Files

는 결과를 직접 전달함

• 구독 취소 질문 아래
  Cancel

버튼을 두면 취소 행위인지 대화상자 닫기인지 모호해짐

• 모달은 작업 기억을 끊으므로 차단이 필요한 결정, 되돌릴 수 없는 결과, 진행에 필수적인 입력에만 사용해야 함

• 사소한 행동마다 확인하면
  확인 피로가 생겨 중요한 경고도 반사적으로 닫게 됨

• 되돌릴 수 있는 행동에는 확인보다 실행 취소가 적합함

• 1990년대 후반 팝업 광고, 2018년 이후 쌓인 쿠키 동의 벽, 방문 즉시 나타나는 뉴스레터 오버레이는 사용자의 작업을 침범함

• 분석 도구는 구독한 3%를 기록하지만 불쾌감을 느낀 97%는 기록하지 못할 수 있음

• 비용은 몇 주 뒤 구독 취소와 이탈로 나타나 원래 오버레이에 귀속되지 않을 수 있음

• 오버레이를 사용한다면 전환뿐 아니라 비용도 측정해야 함

대화상자 설계 지침

• 실제로 진행을 막아야 하는 결정에만 모달을 사용함
• 버튼에는
  OK

가 아니라 결과를 적음

• 안전한 선택을 기본값으로 만들고
  Esc

는 항상 취소로 작동하게 함

• 대화상자 하나에는 1~2문장으로 질문 하나만 담음
• 되돌릴 수 있는 행동에는
  실행 취소를 제공함
• 작업을 계속할 수 있으면 비모달을 사용함
• 방문 직후 오버레이를 표시하지 않음
• 대화상자 위에 다른 대화상자를 쌓지 않음

6. 알림과 오류 메시지: 시스템의 응답

• 알림, 통지, 오류 메시지는 어떤 일이 발생했거나 진행 중이거나 실패했음을 전달함
• 형식에는 인라인 검증, 배너, 배지, 토스트가 있음
• 토스트는 2000년 무렵 MSN Messenger 알림이 작업 표시줄에서 토스터의 빵처럼 올라오며 얻은 이름임
  Message sent

같은 확인에는 적합함

• 사용자가 조치해야 하는 오류를 4초 뒤 사라지게 해서는 안 됨

• 오류 메시지는 평이한 언어로 문제와 위치를 정확히 밝히고 복구 방법을 알려야 하며, 사용자를 탓하지 않아야 함
  Abort, Retry, Ignore?

, PC LOAD LETTER

, An error occurred

처럼 맥락과 해결책이 없는 문구는 도움이 되지 않음

• 남성 약
  12명 중 1명은 적록 색각 이상이 있으므로 빨간색만으로 오류를 표시하지 말고 아이콘과 문구를 함께 사용해야 함
• 불필요한 알림과 배지는 사용자가 중요한 알림까지 무시하도록 학습시킴

알림과 오류 설계 지침

• 원시 오류 코드만 보여주지 말고 평이한 언어를 사용함
• 잘못된 필드, 파일, 단계를 정확히 가리킴
• 한 문장으로 복구 방법을 안내함
  illegal

, fatal

, invalid user

처럼 사용자에게 책임을 돌리는 표현을 피함

• 단순 확인은 토스트, 수정할 때까지 남아야 하는 오류는 인라인, 재앙적 상황만 모달로 처리함
• 아이콘, 색, 문구를 함께 사용함
• 기본 알림량을 줄이고 사용자가 조정할 수 있게 함

7. 아이콘: 관례를 압축한 작은 그림

• 아이콘은 객체, 행동, 상태를 나타내는 작은 그림으로 공간을 절약하고 번역 없이 사용할 수 있으며 도구 모음을 빠르게 훑게 함
• David Canfield Smith가 1975년 GUI 의미의
  icon

을 만들었고, Xerox Star는 1981년 상용화했으며 Susan Kare는 1984년 Macintosh 아이콘을 제작함

• 휴지통과 플로피 디스크 저장 아이콘은 원래 물체가 사라진 뒤에도
  관례 자본으로 남았음

• 돋보기, 집, 톱니바퀴, 휴지통 정도만 널리 인식되며 나머지는 사용자가 의미를 추측해야 함

• 공간이 허용되면 아이콘에 텍스트 레이블을 붙여야 함

• 레이블이 붙은 아이콘은 학습 기회임

• 레이블 없는 아이콘은 사용자를 시험함

• 반복 학습된 뒤에야 돋보기처럼 독립적으로 사용할 수 있음

• 표준 아이콘을 새로 그리면 수십 년간 쌓인 집단 학습을 소모하므로, 새 상징이 잃는 의미보다 더 많은 의미를 제공할 때만 정당화됨

• favicon은 Internet Explorer 5가 1999년 도입했으며 원래 크기는
  16×16픽셀임

• 탭이 15~20개를 넘어 제목이 잘리면 favicon이 사이트를 식별하는 유일한 단서가 될 수 있음

아이콘 설계 지침

• 아이콘에 텍스트 레이블을 붙이고 공간이 없으면 툴팁을 제공함
• 검색과 설정처럼 표준 은유가 있으면 그대로 사용함
• 사용자 5명에게 아이콘만 보여주고 의미를 물어 인식 가능성을 검사함
• 같은 계열로 보이되 작은 크기에서도 서로 구분되는 실루엣을 사용함
• 유행을 이유로 학습된 아이콘을 다시 설계하지 않음
• favicon은 16×16픽셀에서도 보이는 하나의 강한 형태와 브랜드 색으로 단순화함
• 레이블 없는 아이콘 버튼은 보편적으로 인식되는 소수에만 사용함

8. 체크박스, 라디오 버튼, 토글

• 체크박스는 독립적인 선택을 켜거나 끄며 여러 항목을 동시에 선택할 수 있음

• 라디오 버튼은 상호 배타적인 집합에서 정확히 하나를 선택하게 함

• 이름은 하나를 누르면 이전 버튼이 튀어나오던 자동차 라디오 프리셋에서 유래함

• 사각형은
  여러 개 선택

, 원은 하나만 선택

이라는 수십 년간 학습된 문법을 전달하므로 서로 바꿔 쓰면 안 됨

• 라디오 그룹은 한 번 선택하면 선택 전 상태로 돌아갈 수 없음
• 선택하지 않기가 유효하면
  None

을 제공함

• 설문 편향 문제가 없다면 가장 안전하거나 흔한 값을 기본 선택함

• iPhone이 2007년 대중화한 토글은 변경이 즉시 적용되는 설정에 사용함

• 저장 버튼으로 확정해야 한다면 체크박스를 사용함

• 토글과
  Save

버튼을 함께 두면 적용 시점이 모호해짐

선택 컨트롤 설계 지침

• 독립 항목에는 체크박스, 상호 배타적 선택에는 라디오 버튼을 사용함
• 선택지는 수직으로 쌓아 레이블 연결을 명확히 함
• 레이블 전체를 클릭 가능하게 만들어 작은 컨트롤의 목표 영역을 넓힘
• 라디오 그룹에는 적절한 기본값과 필요한 경우
  None

을 제공함

• 부정문과 이중 부정을 피하고 긍정문으로 선택지를 작성함
• 설정이 즉시 적용될 때만 토글을 사용함
• 예·아니요는 라디오 버튼 2개가 아니라 체크박스 하나로 나타냄
• 선택지가 2~4개면 드롭다운 대신 라디오 버튼으로 모두 보여줌

9. 탭: 같은 수준의 병렬 콘텐츠

• 탭은 한 화면 영역을 여러 병렬 패널이 공유하고 한 번에 하나만 보여주는 구조임

• 파일 서랍의 돌출된 레이블에서 유래했으며 1990년대 초 소프트웨어 대화상자에 들어옴

• 제품 세부 정보, 리뷰, 사양처럼
  같은 유형과 수준의 콘텐츠에 적합함

• 선택된 탭은 해당 패널에 붙어 보이고, 나머지는 클릭할 수 있지만 덜 두드러져야 함

• 탭은 한 줄만 사용해야 함

• 1990년대 중반 Microsoft 대화상자의 다중 행 탭은 뒤쪽 탭을 누를 때 행이 재배치되어 공간 기억을 무너뜨림

• 탭은 자유로운 이동을 약속하므로 순차적 결제 단계에는 적합하지 않으며 단계 표시가 있는 마법사를 사용해야 함

• 비교할 데이터를 탭으로 나누면 사용자가 정보를 기억하며 왕복해야 하므로 표로 함께 보여줘야 함

• 탭 콘텐츠는 사용자가 장소로 인식하므로 각각 고유 URL을 가져야 북마크, 공유, 뒤로 가기가 가능함

탭 설계 지침

• 탭은 항상 한 줄만 사용함
• 레이블은 평이한 1~2단어로 제한함
• 선택, hover, 비선택 상태를 서로 다르게 표시하고 선택 탭을 패널과 연결함
• 같은 유형과 수준의 콘텐츠에만 탭을 사용함
• 가장 많은 사용자가 먼저 필요로 하는 탭을 기본으로 엶
• 비교해야 하는 콘텐츠를 여러 탭으로 분리하지 않음
• 플랫폼이 허용하면 각 탭에 고유 URL을 부여함

10. 검색: 사용자의 언어로 목표를 받는 인터페이스

• 검색은 텍스트 필드와 돋보기로 표시한 제출 행동을 결합해 사용자가 탐색 구조 대신 자신의 말로 목표를 입력하게 함

• 검색 우선 사용자는 방문 즉시 검색창으로 향하고, 다른 사용자에게는 메뉴가 실패했을 때의 탈출구가 됨

• GUI가 명령어를 보이는 선택지로 대체했어도 검색은 무한한 의도를 언어로 다룰 수 있어 살아남은
  명령줄임

• AI 어시스턴트의 프롬프트 필드도 같은 입력 형태이며, 오래된 검색 상자가 새로운 컴퓨팅 패러다임으로 이어짐

• 검색 로그에는 사용자의 목표, 어휘, 철자가 그대로 남음

• 검색량이 많지만 결과가 나쁜 질의는 수요순으로 정렬된 사용성 개선 목록이 됨

• 검색창은 전체 질의를 볼 만큼 넓어야 하며 페이지 상단에 숨기지 않은 필드로 제공해야 함

• 오타, 복수형, 동의어를 허용하고 검색 결과 페이지 자체도 독립적인 UI로 설계해야 함

검색 설계 지침

• 콘텐츠가 많은 사이트의 모든 페이지 상단에 열린 검색창을 표시함
• 검색창은 최소
  27자 너비로 만듦
• 돋보기로 제출을 표시하고 Enter 키도 지원함
• 오타, 복수형, 동의어를 허용해 의도를 찾음
• 결과 페이지에서도 질의를 검색창에 유지해 바로 수정하게 함
• 결과 제목, 일치 이유를 보여주는 요약, 규모가 커질 때의 필터를 제공함
• 지원 섹션을 포함해 사용자가 사이트 일부라고 여기는 콘텐츠를 모두 색인함
• 검색 로그를 매월 분석해 검색량은 많지만 결과가 나쁜 질의를 수정함

보너스 1. 창과 스크롤

• 창은 여러 애플리케이션이나 문서를 한 화면에 함께 두는 이동 가능한 경계 영역이며 WIMP의
  W

임

• 겹치는 창은 1970년대 Xerox PARC에서 등장했지만, 오늘날 웹 앱 설계자는 대개 브라우저 탭이라는 창을 상속받음

• 새 창을 예고 없이 열면 웹의 역방향 장치인
  뒤로 가기가 깨지므로 드물게 사용해야 함

• 스크롤바는 콘텐츠를 이동하는 컨트롤인 동시에 현재 위치와 남은 양을 보여주는 지도임

• 사용자가 스크롤하더라도 관심은 상단에 집중되므로 콘텐츠 순서가 곧 중요도 순위가 됨

• 반복되는 실패 유형은 세 가지임

• 스크롤재킹은 속도나 방향을 바꿔 사용자의 근육 기억을 침해함

• 가늘거나 보이지 않는 스크롤바는 남은 분량을 감춤

• 무한 스크롤은 필요한 바닥글을 계속 밀어내고 위치 감각을 약화시킬 수 있음

창과 스크롤 설계 지침

• 기본적으로 같은 창이나 탭에서 콘텐츠를 엶
• 스크롤 속도와 방향을 가로채지 않음
• 모든 스크롤 가능 영역에 스크롤바를 표시함
• 목록 아래 필요한 요소가 없다면 무한 스크롤을 쓸 수 있고, 바닥글이 중요하면
  Load More

를 사용함

• 중요한 콘텐츠를 위쪽에 배치함
• 불필요한 새 창을 포함해 뒤로 가기를 깨뜨리는 동작을 피함

보너스 2. 포인터와 커서

• 포인터는 사용자의 손을 화면에 투영하고, 커서 모양은 현재 위치에서 클릭했을 때 수행될 행동을 알림
• Doug Engelbart의 마우스는 1964년 제작되고 1968년 시연됐으며 Macintosh가 1984년 대중화함
• 화살표, 링크용 손, 드래그용 손, 텍스트 편집용 I-beam이 기본적인 시각 언어를 형성함
• 정밀 선택 십자선, 확대 돋보기, 색상 선택 스포이트, 대기 스피너도 특수 작업을 전달함
• 클릭할 수 없는 장식에 손 커서를 표시하면 행동에 대한 잘못된 약속이 됨
• 터치스크린에는 hover가 없으므로 툴팁, hover 메뉴, hover로만 나타나는 컨트롤은 모바일과 태블릿에서 접근할 수 없음

포인터와 커서 설계 지침

• 플랫폼의 표준 커서를 사용하고 임의로 다시 꾸미지 않음
• 실제 클릭 가능 요소에만 손 커서를, 편집 가능한 텍스트에만 I-beam을 표시함
• 대기 시간이
  1초를 넘으면 작업 중 표시를 제공함
• 중요한 정보나 행동에 접근하는 유일한 수단으로 hover를 사용하지 않음
• 키보드 사용자를 위해 보이는 포커스 표시를 제공하며, 포커스 외곽선은 키보드의 커서 역할을 함

익숙한 알파벳으로 설계해야 하는 이유

• 10개 기본 요소와 2개 보너스 요소가 40년 넘게 살아남은 것은 인지 우선 원칙, 지각된 어포던스, Fitts의 법칙, 제한된 인내심 같은 인간 특성에 맞기 때문임
  86개 지침은 세 가지 원칙으로 압축됨

• 사용자가 기억하게 만들지 않음

• 사용자가 추측하게 만들지 않음

• 사용자가 기다리게 만들지 않음

• 혁신은 새로운 체크박스를 만드는 데 쓰기보다 콘텐츠와 서비스에 집중해야 함

• 생성형 인터페이스가 화면을 즉석에서 만들더라도 사람은 여전히 버튼, 필드, 탭을 읽고 조작함

• 동적 화면은 공간 기억을 약화시키므로 익숙한 위젯이 방향 감각을 회복시킴

• 에이전트 시스템에서는 기존 컨트롤이 직접 조작뿐 아니라
  승인, 일시정지, 검사, 실행 취소를 담당함

• 좋은 표준 컨트롤은 사용자가 요소 자체를 의식하지 않고 작업에 집중하게 하며, 인터페이스에서 사라진 듯 느껴지는 상태가 가장 높은 평가임

댓글과 토론