이 항목에서는 IUI(유도 사용자 인터페이스)라고 하는 사용자 인터페이스 모델에 대해 설명합니다. 유도 탐색이라고도 하는 IUI 모델은 기능을 설명하고 이해하기 쉬운 페이지로 분리하여 소프트웨어 애플리케이션을 더 간단하게 만드는 방법을 제안합니다. 이 IUI 모델은 Microsoft Money 2000, Windows 제어판 애플릿, Microsoft Visual Studio 2010의 다양한 화면 및 대화 상자, Microsoft Office의 작업 패널 등 다양한 Microsoft 프로젝트에서 분명하게 알 수 있습니다.
소개
IUI는 기능을 설명하고 이해하기 쉬운 페이지로 분리하여 소프트웨어 애플리케이션을 더 간단하게 만드는 방법을 제안하는 사용자 인터페이스 모델입니다. Microsoft는 대형 상용 소프트웨어 애플리케이션인 Money 2000에서 이 모델을 구현했습니다. 비공식 테스트는 사용자가 기존 인터페이스에서처럼 이 모델에서 작업을 빠르게 수행할 수 있으며 작업을 더 쉽게 찾을 수 있음을 시사합니다.
많은 상용 소프트웨어 애플리케이션에는 화면이 컨트롤 집합을 표시하는 사용자 인터페이스가 포함되어 있지만 페이지의 목적과 컨트롤을 사용하여 해당 목적을 달성하는 방법을 추론하기 위해 사용자에게 둡니다.
이 문서에 설명된 원칙은 디자인, 컨트롤 또는 시각적 요소의 특정 고정 집합을 요구하거나 의미하지 않습니다. 일반적으로 그래픽 사용자 인터페이스와 마찬가지로 이 문서의 원칙은 디자인에서 유연성과 창의성을 위한 많은 공간을 남겨 줍니다.
유도 사용자 인터페이스의 일반적인 원칙은 Money 2000에서 가져온 예제와 함께 설명됩니다.
Important
IUI의 전반적인 개념은 초기 단계에 있습니다. 이러한 기술을 사용하는 디자이너는 소프트웨어에 사용할 때 더 많은 것을 배우고 발견합니다. 이 문서의 정보는 이 분야의 연구 및 지식이 증가함에 따라 시간이 지남에 따라 진화할 것입니다. 이 항목에서는 확정적인 포괄적인 지침 집합이 아닌 IUI에 대한 소개를 제공합니다.
IUI 실행 중: 일반적인 디자인 문제 해결
이 섹션에서는 오늘날의 소프트웨어 제품에 대한 일반적인 디자인 문제에 대해 설명하고 IUI를 문제를 해결하기 위한 기술로 소개합니다.
문제: 소프트웨어를 사용하기 어렵습니다.
대부분의 소프트웨어는 사용하기가 너무 어렵습니다. 이 결론은 소프트웨어 디자이너의 유용성 테스트, 일화적 증거 및 개인적인 경험에서 비롯됩니다. IUI의 개념은 연구를 수행하고, 현재 소프트웨어를 사용하기 어렵게 만드는 것에 대해 교육된 추측을 한 다음, 솔루션을 제안함으로써 만들어졌습니다. IUI를 사용하는 디자이너는 디자인의 궁극적인 성공을 결정하기 위해 고객 만족도에 의존해야 합니다.
대부분의 최신 소프트웨어 제품은 다음과 같은 일반적인 이유로 사용하기 어렵습니다.
사용자는 제품의 적절한 정신 모델을 생성하지 않는 것 같다.
대부분의 최신 소프트웨어 제품에 대한 인터페이스 디자인은 사용자가 디자이너가 신중하게 만든 개념적 모델을 이해한다고 가정합니다. 아쉽게도 대부분의 사용자는 탐색을 안내할 만큼 철저하고 정확한 정신 모델을 획득하지 못하는 것 같습니다. 이러한 사용자는 매우 바쁘고 정보로 오버로드될 수 있습니다. 소프트웨어에 대한 개념적 모델을 연구할 시간, 에너지 또는 욕망이 없습니다.
많은 오랜 사용자조차도 일반적인 절차를 마스터하지 않습니다.
디자이너는 새 사용자에게 처음에는 문제가 있을 수 있다는 것을 알고 있지만 사용자가 일반적인 작업을 학습할 때 이러한 문제가 사라질 것으로 예상합니다. 유용성 데이터는 이러한 일이 자주 발생하지 않음을 나타냅니다. 한 연구에서 연구원들은 집에서 사용자를 비디오 테이프로 클릭하여 자동화된 장비를 설치했습니다. 테이프는 손에 작업에 초점을 맞춘 사용자가 반드시 그들이 따르는 절차를 통지하지 않고 경험에서 배울 수 없다는 것을 보여 주었다. 다음에 사용자가 동일한 작업을 수행할 때 정확히 동일한 방식으로 이를 우연히 발견할 수 있습니다.
사용자는 각 기능 또는 화면을 파악하기 위해 열심히 노력해야 합니다.
대부분의 소프트웨어 제품은 개념적 모델을 이해하고 일반적인 절차를 숙달한 소수의 사용자를 위해 설계되었습니다. 고객의 대부분에 대 한, 각 기능 또는 절차는 좌절, 원치 않는 퍼즐. 사용자는 이러한 퍼즐이 컴퓨터를 사용하는 피할 수없는 비용이라고 가정 할 수 있지만,이 부담없이 확실히 행복 할 것입니다.
이러한 문제에 대한 가장 좋은 해결 방법은 소프트웨어 제품의 기능을 보다 자명하고 자명하게 만들기 위한 일반적인 전략을 찾는 것입니다. 사용자는 필요할 때마다 기능을 찾을 수 있어야 하며, 해당 기능을 사용할 때마다 사용할 수 있어야 합니다.
공제 사용자 인터페이스
오늘날 소프트웨어의 대부분의 요소는 다음 스크린샷에서 설명한 대로 사용자가 해당 요소를 연구하고 동작을 추론해야 합니다.
소프트웨어 디자이너를 비롯한 숙련된 컴퓨터 사용자는 이 대화 상자를 통해 사물 목록을 관리할 수 있다는 사실을 빠르게 인식할 수 있습니다. 목록 항목에 대한 정보를 추가, 제거 및 제공할 수 있는 목록 아래의 단추를 이해합니다. 그러나 이 동작은 대화 상자 자체에 명시적으로 명시되어 있지 않습니다.
이제 캐주얼한 사용자의 관점에서 대화 상자를 다시 살펴봅니다. 이 대화 상자에 직면하면 많은 사용자가 "이 작업을 어떻게 해야 하나요?" 하고 묻습니다. 대화 상자가 나타나면 사용자는 중지하고 다음에 수행할 작업을 파악해야 합니다. 첫째, 사용자는 큰 흰색 사각형이 항목으로 채울 빈 목록 상자라는 사실을 추론해야 합니다. 상자의 작은 텍스트 레이블인 "Things"는 모호한 힌트를 제공합니다. 일부 사용자는 편집 텍스트 상자처럼 보이기 때문에 목록 상자에 입력하려고 합니다.
다음으로, 사용자는 목록 아래의 단추가 콘텐츠에 영향을 주게 한다고 추론해야 합니다. 일부 단추는 처음에 비활성화되어 사용자 혼란의 또 다른 원인입니다. 사용자는 컨트롤을 실험하여 대화 상자의 작동 방식을 학습해야 합니다.
사용자는 다른 질문도 할 수 있습니다. "목록에 넣어야 하는 항목은 몇 개입니까? 특정 순서로 항목을 입력해야 하나요? 이 대화 상자가 처음에 표시되는 이유는 무엇인가요? 이게 뭐야?"
사용자는 화면의 목적과 사용 방법을 파악해야 할 때마다 목표에 방해가 됩니다. 이는 궁극적으로 시간과 사용자 만족도의 비용을 나타냅니다. 설상가상으로 사용자는 기능을 사용할 때마다 인터페이스를 통해 퍼즐을 맞추기 때문에 이 비용을 반복해서 지불합니다.
화면에는 용도를 명확하게 설명하는 제목이 있어야 합니다. 디자이너가 화면을 만들 때 명확하게 표현 가능한 목적을 가질 필요가 거의 없습니다. 대신 사용자가 추론해야 하는 더 큰 개념적 모델의 일부일 수 있습니다.
연구에 따르면 소프트웨어의 기본 작업으로 인해 많은 사용자가 혼란스러워하는 것으로 나타났습니다. 제품에서 수행할 수 있는 작업, 작업을 수행할 위치 및 제품을 찾은 후 해당 작업을 수행하는 방법을 이해하는 데 어려움이 있습니다. 기본적인 변경을 통해 소프트웨어를 간소화하는 것은 기존 고객을 보다 완벽하게 만족시키고 새 사용자를 유치하는 강력한 방법입니다.
솔루션: 유도 사용자 인터페이스
소프트웨어를 디자인하는 새로운 방법으로 IUI의 목표는 사용자가 제품의 일부 간에 성공적으로 이동하고 해당 기능을 사용하기 위해 수행해야 하는 불필요한 사고의 양을 줄이는 것입니다. 유도라는 단어는 동사 유도에서 비롯되며, 이는 영향이나 설득에 의해 이끌거나 움직이는 것을 의미합니다.
IUI는 일반적인 웹 스타일 인터페이스의 확장입니다. 웹 환경에서는 상대적으로 느린 연결을 통해 각 정보를 서버로 보내야 하기 때문에 페이지는 단순하고 작업 기반이어야 합니다. 그런 다음 서버는 다음 단계로 응답합니다. 웹 디자인이 좋다는 것은 페이지당 단일 작업에 집중하고 페이지를 탐색하는 것을 의미합니다. 마찬가지로 유도 탐색은 각 페이지의 활동을 하나의 기본 작업에 집중하는 것으로 시작합니다.
잘 디자인된 유도 인터페이스는 사용자가 화면을 살펴볼 때 직면하는 두 가지 기본적인 질문에 답변하는 데 도움이 됩니다.
- 나는 지금 무엇을해야합니까?
- 다음 작업을 수행하기 위해 여기에서 어디로 이동하나요?
이러한 원칙에 따라 설계된 소프트웨어는 기본 전제로 시작하여 이러한 질문에 답변합니다. 명시적 목적이 명확하게 명시된 단일 화면은 그러한 목적이 없는 페이지보다 이해하기 쉽습니다. 화면을 더 쉽게 이해할 수 있는 경우 사용자가 무엇을 해야 할지, 다음에 어디로 가야 할지 더 쉽게 알 수 있습니다.
이 기본 전제는 IUI를 사용하는 소프트웨어를 디자인하기 위한 일련의 네 단계로 확장할 수 있습니다.
- 각 화면을 단일 작업에 집중합니다.
- 작업을 지정합니다.
- 화면 내용이 작업에 맞도록 합니다.
- 보조 작업에 대한 링크를 제공합니다.
이 문서에서는 IUI의 일반적인 원칙을 설명하지만 Money 2000 및 기타 소프트웨어의 예를 보여 줌으로써 이러한 원칙이 실제로 작동하는 것을 보여 줍니다. 이러한 예제는 구현을 위한 엄격한 모델이 아니라 IUI의 특정 식이라고 생각해야 합니다.
위에 나열된 네 단계 외에도 다음 5가지 지침에 따라 인터페이스를 강화할 수 있습니다.
- 일관된 화면 템플릿을 사용합니다.
- 작업을 시작하기 위한 화면을 제공합니다.
- 화면에서 컨트롤을 사용하여 작업을 수행하는 방법을 명확히 합니다.
- 작업을 완료하고 새 작업을 시작하는 쉬운 방법을 제공합니다.
- 다음 탐색 단계를 명확히 합니다.
프로세스
많은 작업을 수행하려면 사용자가 일련의 화면을 탐색해야 합니다. 작업을 수행하는 사용자는 기본 작업을 구성하는 화면 시퀀스에서 벗어나는 보조 작업에 대한 링크를 클릭할 수 있습니다. 사용자가 보조 작업을 완료하면 사용자를 원래 작업의 분기 지점으로 직접 반환하는 쉬운 방법이 있어야 합니다. 사용자는 뒤로 및 앞으로 단추와 같은 기존 탐색 컨트롤을 사용하여 시작한 위치로 돌아가는 데 문제가 있을 수 있습니다.
이 기능을 제공하기 위해 IUI는 작업을 수행하는 프로세스, 화면 또는 일련의 화면이라는 탐색 개념을 정의합니다. 프로세스는 일종의 탐색 서브루틴 역할을 합니다. 사용자는 프로세스를 시작하고 일련의 화면을 작업한 다음 마지막 페이지에서 "완료" 단추를 클릭하여 프로세스를 시작한 페이지로 빠르게 돌아갈 수 있습니다.
유도 사용자 인터페이스를 만드는 단계
이 섹션에서는 IUI를 만드는 데 사용할 수 있는 네 가지 단계를 자세히 설명합니다.
1단계: 단일 작업에 각 페이지 집중
IUI를 디자인하는 첫 번째 단계는 기능 또는 기능 집합을 가져와서 별도의 화면으로 나누는 것입니다. 각 화면은 화면의 기본 작업이라고 하는 단일 작업에 초점을 맞춰야 합니다.
이 아이디어는 간단해 보이지만 이를 따르는 애플리케이션은 거의 없습니다. 대부분의 애플리케이션은 모든 관련 기능이 수행되는 화면을 제공합니다. 이 디자인을 사용하려면 사용자가 수행할 수 있는 작업과 수행 방법을 파악(추론)해야 합니다.
기본 작업은 특정 또는 열린 종료일 수 있습니다. 예를 들어 개인 금융 프로그램에서 특정 작업은 "지불하려는 청구서 선택"일 수 있지만 개방형 작업은 "투자 성과 검토"일 수 있습니다.
기본 작업은 구현 세부 정보 또는 기타 추상 개념을 반영하는 것이 아니라 사용자에게 적합한 작업이어야 합니다. 이 작업은 사용자가 생각할 수 있는 작업이어야 하며, 바람직하게는 자신의 말에 설명되어 있어야 합니다.
예시
이 섹션에서는 Money의 두 가지 릴리스를 비교합니다. 예제에서는 사용자가 재무 계정을 보고 관리할 수 있는 매우 유사한 기능을 보여 줍니다.
IUI 모델은 개인 재정 관리 애플리케이션인 Money 2000을 만드는 동안 개발되었습니다. Money 2000은 이 제품의 8번째 주요 릴리스입니다. Money 2000은 100만 줄이 넘는 코드가 있는 대규모 Windows 프로그램입니다.
Money 2000은 웹 스타일 애플리케이션입니다. 웹 사이트가 아니지만 웹 사이트와 많은 특성을 공유합니다. 사용자 인터페이스는 탐색 스택을 통해 앞뒤로 이동하는 도구를 사용하여 공유 프레임에 표시된 전체 화면 페이지로 구성됩니다. 이 기초에서 Money 2000은 보다 구조화된 사용자 환경을 만드는 새로운 사용자 인터페이스 규칙 집합을 추가합니다.
IUI는 Money 2000의 웹 스타일 디자인에서 처음 사용되었지만 창 및 대화 상자와 같은 기존 인터페이스 요소와 함께 사용할 수도 있습니다.
Money 99에서 사용자는 종종 단일 화면에서 다양한 작업을 수행했습니다. 예를 들어 다음 스크린샷은 Money 99의 모든 계정 관련 기능을 단일 화면에 표시한 계정 관리자 를 보여 줍니다.
이 화면에서는 계정으로 이동하는 일반적인 작업과 계정 만들기 및 삭제와 같은 드문 작업을 그룹화합니다. 이러한 특정 작업은 화면 제목 인 Account Manager에 직접 표현되지 않습니다. 많은 사용자가 이 화면을 그림 1의 샘플 대화 상자처럼 어렵게 간주할 수 있습니다. 두 경우 모두 사용자는 화면의 목적과 사용 방법을 추론해야 합니다.
IUI를 따르는 Money 2000은 거의 동일한 계정 관련 기능 집합을 제공하지만 두 개의 별도 화면에서 제공합니다. 다음 스크린샷은 사용자가 계정을 선택하도록 하는 데 중점을 두는 이러한 화면 중 첫 번째 화면을 보여 줍니다.
Money 2000 화면에는 이전 Money 99 화면과 거의 동일한 수의 시각적 요소가 포함되어 있지만 이제 페이지는 사용자가 계정을 선택하도록 하는 데 전적으로 초점을 맞추고 있습니다. 예를 들어 Money 99 버전에서 사용자는 계정을 열려면 두 번 클릭해야 했습니다. 하나는 계정을 선택하고 다른 하나는 열려 있는 작업을 선택해야 했습니다. Money 2000 버전에서 사용자가 계정을 클릭하는 유일한 이유는 계정을 여는 것이므로 한 번의 클릭으로 충분할 수 있습니다. 이러한 방식으로 화면 수가 늘어나더라도 일반적인 작업을 수행하는 데 필요한 클릭 수는 종종 줄어듭니다.
경우에 따라 사용자는 계정을 추가하거나 제거하려고 합니다. Money 2000에서 이 작업을 수행하기 위해 사용자는 계정 설정에 초점을 맞춘 두 번째 화면(다음 스크린샷에 표시됨)으로 이동합니다.
각 화면의 목적은 Money 2000의 IUI 버전에서 더 명확합니다. 또한 각 화면에는 목적을 달성하기 위해 더 많은 공간이 있습니다. 예를 들어 Money 99 계정 관리자는 화면의 다른 명령에 비해 거의 사용되지 않으므로 계정 삭제 단추에 공간을 거의 주지 않습니다. 반면 Money 2000의 계정 설정 화면은 이 명령을 더 두드러지게 표시하여 보다 검색 가능하고 설명이 가능할 수 있습니다.
단일 작업이란?
화면이 실제로 하나의 작업에만 초점을 맞추고 있는지 어떻게 알 수 있나요? 많은 작업을 지원하는 화면은 해당 목적이 충분히 추상적인 경우 하나의 용도로만 설명될 수 있습니다. 다음은 엄지 손가락의 규칙입니다. 디자이너가 간결하고 의미 있고 자연스러운 소리의 화면 제목으로 해당 목적을 표현할 수 있는 경우 화면은 한 가지 목적에 초점을 맞췄습니다.
Money 2000의 디자이너는 이러한 화면을 깨는 것으로 간주 (사용할계정을 선택하고 돈에 계정을 설정) 더 많은 화면으로. 그러나 각 화면은 이미 간결하고 의미 있고 자연스러운 제목을 가지고 있기 때문에 디자이너들은 화면이 충분히 집중되었다고 믿었습니다. 화면을 디자인할 때 명확하고 간단한 제목을 생각할 수 없는 경우 화면에서 너무 많은 작업을 수행하려고 할 수 있습니다.
2단계: 작업 상태 지정
각 화면의 제목은 기본 작업의 간결하고 명시적인 명령문이어야 합니다. 이는 직접 지침("잔액을 조정하려는 계정 선택") 또는 사용자가 대답할 질문("어떤 계정의 균형을 맞추시겠습니까?")일 수 있습니다.
이것은 종종 연습되지 않는 또 다른 간단한 소리 원칙입니다. 예를 들어 이전 버전의 Money에는 온라인 금융 서비스 관리자 및 잔액 계정과 같은 타이틀이 있는 화면이 있었습니다. 사용자는 컨트롤의 정렬 및 레이블에서 이러한 화면의 목적과 동작을 추론해야 했습니다.
화면이나 페이지의 제목은 매우 중요합니다. 제품이 창, 웹 스타일 페이지, 대화 상자 또는 다른 디자인을 사용하든 제목을 스크롤할 수 없습니다.
사용 가능한 화면에 명확한 제목이 있습니다.
많은 작업을 수행하는 화면에는 추상 또는 복잡한 제목이 필요합니다. 예를 들어 그림 2에 표시된 Money 99 화면을 통해 사용자는 계정으로 이동하고 계정을 설정할 수 있습니다. 이러한 두 가지 목적을 모두 캡처하기 위해 추상 제목 "계정 관리자"가 이 페이지에 제공되었습니다. 사용자는 "계정 관리자" 페이지가 수행할 수 있는 작업에 대한 몇 가지 아이디어를 가질 수 있지만 이 화면에서 가장 일반적인 작업은 단순히 계정을 선택하는 것일 수 있습니다.
일부 화면 또는 명령에는 명확한 제목을 쉽게 제안하지 않는 추상적인 용도가 있습니다. 이러한 화면의 경우 디자이너는 "설정;"과 같이 의도적으로 모호한 이름(예: "QuickStep;") 또는 구현 세부 정보를 표시하는 전문 용어("데이터베이스 압축")를 선택할 수 있습니다. 이러한 종류의 이름은 사용자에게 혼동되거나 오해의 소지가 있는 경우가 많습니다. 또한 이러한 이름은 일반적으로 사용자가 수행하려는 작업을 표현하지 않는 명사이므로 혼동이 가중됩니다.
화면 제목 및 기타 이름은 디자인 프로세스가 끝날 때까지 결정되지 않는 경우가 많습니다. 디자이너는 디자인 및 코딩된 후 작가에게 화면에 적합한 이름을 입력하도록 요청하는 경우가 많습니다. 그 시점에서, 좋은 이름을 찾을 수 없는 경우 의지가 없다, 그래서 팀은 명확하지 않은 이름을 정착해야 할 수 있습니다. 이 결함에 대한 해결책은 디자이너가 디자인 프로세스 초기에 화면 기능 및 타이틀의 명확성에 대해 생각하는 것입니다.
화면 함수 및 제목은 고객이 수행하는 가장 일반적인 작업에 중점을 두어야 합니다. 디자이너는 디자인 팀 자체의 욕구와 함께 가장 많은 수의 고객을 만족시키기 위해 엄청난 양의 기능을 제공하려는 유혹을 받는 경우가 많습니다. 그러나 추가 기능은 항상 복잡성 및 기타 비용을 추가합니다.
화면 제목은 디자인 명확성을 나타냅니다.
IUI 모델에서 디자이너는 디자인 프로세스의 초기 단계에서 화면 제목을 선택합니다. 화면 작동 방식을 정당화하기 위해 제목을 선택하는 대신, 타이틀은 화면이 적합한지 여부를 결정하는 데 사용됩니다. 적합한 제목을 찾을 수 없는 경우 기능이 다시 디자인됩니다. 디자인이 명확하고 간결한 제목을 허용하지 않는 경우(즉, 기능을 설명할 방법이 없는 경우) 디자이너는 이 기능을 포기할 수 있습니다. 다음 스크린샷에서 페이지의 정적 레이블("예정된 청구서 및 예금")을 제공하는 왼쪽의 Money 99 청구서 지불 화면과 명시적 제목이 있는 오른쪽의 해당 Money 2000 화면을 비교합니다("지불하려는 청구서 클릭").
물론 구나 문장에 불과한 화면 제목은 디자인이나 코드보다 쉽게 변경할 수 있습니다. 이러한 사실에도 불구하고 IUI에 대한 경험은 명확한 화면 제목을 일찍 고집하면 더 나은 디자인을 생성하는 것으로 나타났습니다. 타이틀은 제품 디자이너뿐만 아니라 사용자 교육 및 유용성 팀 구성원의 입력으로 선택해야 합니다.
고객이 화면의 목적에 대한 이해를 공유한다고 가정하여 팀 구성원이 이 결정을 연기하려고 할 수 있습니다. 그러나 이 목적에 대해 명확하고 간결한 진술을 해야 하는 경우 의견의 차이가 종종 드러난다. 이러한 차이점을 해결하고 타이틀을 조기에 선택함으로써 디자인 토론이 더 원활하게 진행될 수 있습니다.
타이틀이 선택되면 변경 불가능한 것으로 간주해서는 안 됩니다. 디자이너는 모든 디자인과 마찬가지로 시간이 지남에 따라 화면 제목을 구체화할 가능성이 높습니다. 그러나 선택한 첫 번째 타이틀은 개발 단계에서 가능한 한 강력해야 합니다.
화면 제목을 선택하기 위한 지침
이 섹션에서는 좋은 화면 제목을 선택하는 간단한 기술에 대해 설명합니다. 이 기술을 사용하기 위해 디자이너는 친구가 "이 화면이 뭐야?"라고 묻고 "이 화면은 당신이 있는 화면입니다"라는 문장을 완성하는 명확하고 유용한 응답을 내놓는 것을 상상합니다. 문장을 완성하는 단어가 화면 제목이 됩니다.
Money 2000을 개발하는 동안 팀의 설명서 작성기는 품질과 일관성을 보장하기 위해 화면 제목 지침을 만들었습니다. 예를 들어 이러한 지침은 동사를 사용하고 질문 또는 직접 지침으로 표현된 제목을 제안했습니다. 디자이너는 더 많은 추상화가 허용되고 모호할 수 있는 정적 이름을 피했습니다.
제목을 단순화하기 위해 디자이너는 복합 문장을 피하고 대화형 언어를 사용하려고 시도하여 어색한 용어와 전문 용어를 피했습니다. 디자이너가 연결("and", "or")에 의존하지 않고 작업을 설명할 수 없는 경우 화면이 둘 이상의 작업을 수행하려고 할 수 있으며 사용자가 수행할 작업을 즉시 이해할 수 없을 가능성이 낮습니다.
제목을 신중하게 선택하더라도 제목 영역이 너무 작아서 복잡한 작업을 적절하게 설명할 수 없습니다. 이 문제를 완화하기 위해 작업을 자세히 설명하는 화면의 콘텐츠 영역 맨 위에 간단한 설명 단락을 포함할 수 있습니다.
다음 표에는 Money 99의 화면 제목과 Money 2000의 동일하거나 관련 화면에 대한 타이틀의 몇 가지 예가 포함되어 있습니다.
| Money 99의 화면 제목 | Money 2000의 새로운 화면 제목 | Comment(설명) |
|---|---|---|
| 계정 관리자 |
계정 설정 선택 |
정적 제목이 활성 타이틀로 변경되었습니다. |
| 계정 세부 정보 | 계정 설정 변경 | 정적 제목이 활성 특정 타이틀로 변경되었습니다. |
| 결제 일정 | 청구서 지불 | 모호한 제목은 설명이 있습니다. |
| 온라인 금융 서비스 관리자 | 다시 디자인한 후에는 페이지가 필요하지 않습니다. |
화면 제목을 눈에 띄게 만들기
유용한 화면 제목에 정착하면 사용자의 주의를 끄는 것이 중요합니다. 일부 연구에 따르면 사용자는 교육 텍스트를 거의 읽지 않는 것으로 나타났습니다. 이 문제를 해결하기 위해 화면 제목은 사용자의 관심을 끌기 위해 두드러지고 매력적으로 디자인되어야 합니다. 화면의 시각적 디자인은 사용자에게 제목을 읽어야 하는 가장 중요한 항목임을 알려야 합니다.
3단계: 페이지의 내용이 작업에 적합하게 만들기
IUI의 지침을 따르는 소프트웨어를 만들 때 가장 어려운 디자인 작업에는 일반적으로 기능을 화면이나 페이지로 분리하는 작업이 포함됩니다. 다음 단계는 각 화면에서 기본 작업을 수행하는 데 사용할 컨트롤을 결정하는 것입니다. 이러한 컨트롤은 사용자가 작업을 완료하는 페이지의 콘텐츠를 구성합니다. 화면 제목과 콘텐츠는 프로그램과 사용자 간의 대화의 두 반쪽입니다. 타이틀은 프로그램의 질문을 제기하거나 명령을 제공하며 사용자는 화면의 인터페이스를 통해 응답합니다.
화면 제목이 명확하고 간단한 경우 화면 디자인은 일반적으로 간단합니다. 예를 들어 앞에서 보여 준 Money 2000 화면 중 하나는 "사용할 계정 선택"이라는 제목입니다. 이 제목을 감안할 때 화면에는 사용자가 선택할 수 있는 간단한 계정 목록이 포함되어야 합니다. 또 다른 Money 2000 화면에는 "세금에 포함할 항목 확인"이라는 제목이 있습니다. 당연히 이 화면에는 항목의 검사 목록이 포함되어 있습니다.
사용자는 컨트롤을 사용하여 화면의 기본 작업을 수행하는 방법을 쉽게 파악할 수 있어야 합니다. 사용자가 계정을 선택하라는 지시를 받고 화면에서 계정 목록을 찾을 수 있는 경우 작업에 대한 이해를 확인합니다. 이렇게 하면 사용자가 성공할 가능성이 높아지며 다른 작업 수행에 대한 신뢰도도 높아질 수 있습니다.
화면 콘텐츠 영역
화면 콘텐츠 영역의 정확한 위치와 모양은 소프트웨어 디자인에 따라 달라집니다. Money 2000에서 화면 콘텐츠 영역은 화면 제목 아래와 작업 목록 오른쪽에 있는 모든 영역입니다. 이 지역은 긴 화면에서 스크롤할 수 있습니다. 일부 필수적이지 않은 콘텐츠는 작업 목록 아래의 상태 영역에 표시될 수도 있습니다.
디자이너는 콘텐츠 영역 맨 위에 있는 단락에서 화면의 기본 작업을 자세히 설명하도록 선택할 수 있습니다. 사용자는 이 텍스트를 읽을 필요가 없지만 유용할 수 있습니다. 많은 사용자가 건너뛰고 화면을 성공적으로 사용할 수 있습니다. 제목과 달리 화면을 스크롤할 수 있는 경우 이 설명은 스크롤할 수 있습니다. 자세한 내용은 화면 제목을 선택하기 위한 지침을 참조 하세요.
디자이너가 필수적이지 않은 미리 알림, 경고 또는 기타 상태 정보를 표시하도록 하려는 경우 화면 왼쪽의 작업 목록 아래에 기본 콘텐츠 영역의 왼쪽에 표시될 수 있습니다. 기능적으로 이 상태 영역은 화면 콘텐츠에 대한 추가 영역입니다. 이 영역은 필수 컨트롤을 포함할 만큼 눈에 띄게 되지 않습니다.
페이지에서 명확한 종료 제공
작업을 성공적으로 완료한 후 사용자는 화면을 떠나는 시기와 방법이라는 또 다른 문제에 직면합니다. 기본 작업이 탐색인 화면의 경우 작업 자체를 수행하면 사용자가 다음 화면으로 이동합니다. 다른 화면에서는 사용자가 진행 방법을 알기가 더 어려울 수 있습니다. 예를 들어 사용자에게 필드에 정보를 입력하도록 요청하는 화면에서 사용자는 이동 시기와 방법을 파악하는 데 도움이 필요할 수 있습니다. 이러한 페이지에서 일관된 위치에서 명확한 다음 또는 완료 단추를 제공하는 것이 유용한 경우가 많습니다.
유용성 연구에 따르면 도구 모음의 뒤로 또는 홈 단추와 같은 전역 탐색 단추를 사용할 수 있는 경우에도 사용자가 이러한 단추를 사용하는 것을 선호합니다. 사용자는 종종 명확한 출구가없는 화면에서 불편하며, 읽을 수있는 정보를 제공하는 것이 유일한 목적인 화면조차도 불편합니다.
이 주제에 대한 자세한 내용은 추가 지침 섹션에서 작업을 완료하고 새 작업을 시작하는 쉬운 방법 제공을 참조하세요.
4단계: 보조 작업에 대한 링크 제공
화면을 디자인하는 마지막 단계는 기본 작업을 직접 수행하지 않지만 화면과 관련된 기능인 보조 작업에 대한 링크를 제공하는 것입니다. 예를 들어 화면의 기본 작업이 편지를 쓰는 경우 해당 화면의 보조 작업은 우편 주소를 조회하거나 봉투를 인쇄하는 것일 수 있습니다.
보조 작업은 대화 상자를 표시하거나, 화면 내용의 시각적 표시를 변경하거나, 사용자를 다른 화면으로 이동할 수 있습니다. 보조 작업은 주 작업을 간접적으로 수행하거나 손실된 사용자를 검색하는 위치로 리디렉션할 수 있습니다.
페이지가 컴퓨터와 사용자 간의 대화인 경우 보조 작업을 사용하면 사용자가 컴퓨터의 현재 질문을 무시하고 컴퓨터에 다른 작업을 수행하도록 요청할 수 있습니다. 예를 들어 컴퓨터: "어떤 청구서를 지불하시겠습니까?" 대화 상자를 상상해 보세요. 사용자: "사실 제가 정말로 하고 싶은 일은 얼마 전에 지불한 청구서를 찾는 것입니다."
제품의 일부 화면에는 보조 작업이 없지만 다른 화면에는 몇 가지 작업이 있습니다. 사용자가 검색하기 어려울 수 있는 긴 작업 목록을 만들지 않아야 합니다. 화면에 비교적 긴 보조 작업 목록이 있는 경우 가장 일반적인 작업을 먼저 배치하거나, 별도의 섹션에 그룹화하거나, 시각적으로 강조해야 합니다.
다음 탐색 단계를 명확히 하는 한 이 목록에는 생각할 수 있는 모든 보조 작업이 포함되어서는 안 됩니다. 화면은 많은 보조 작업을 제공하는 대신, 더 많은 작업을 나열하는 자회사 페이지로 이동하는 보조 작업을 제공할 수 있습니다.
보조 작업의 시각적 디자인
보조 작업은 필요한 경우 액세스할 수 있지만 기본 작업에서 사용자를 방해하지 않는 화면의 하위 위치에 나열되어야 합니다. 각 화면에서 이 목록을 일관된 위치에 배치하면 사용자가 필요할 때 목록을 빠르게 찾을 수 있습니다.
화면 왼쪽에 보조 작업 목록을 표시하는 경우 목록 자체는 스크롤할 수 없으며 Money 2000의 Bill Pay 화면의 다음 스크린샷과 같이 페이지와 함께 스크롤해서는 안 됩니다.
추가 지침
이 섹션에서는 이전 섹션에서 설명한 4단계에 따라 IUI를 만들기 위한 5가지 유용한 지침을 설명합니다.
일관된 화면 템플릿 사용
IUI 모델을 따르는 소프트웨어를 디자인할 때는 모든 화면에 대한 가이드로 사용할 템플릿을 만들어야 합니다. 유도 모델은 특정 템플릿을 사용하도록 지시하지 않습니다. 유도 디자인을 만족시킬 수 있는 다양한 변형이 있습니다. 제품에는 모든 화면에 하나의 템플릿만 필요하거나 다양한 용도로 여러 템플릿을 만들 수 있습니다.
좋은 템플릿을 사용하면 새 사용자가 제품의 화면 작동 방식을 빠르게 이해할 수 있습니다. 제품 화면에서 템플릿을 일관되게 사용하면 화면에서 화면으로 좋은 사용자 인터페이스 흐름을 제공합니다. 사용자가 동일한 위치에 동일한 요소가 표시되기를 기대하므로 각 새 화면을 더 빠르게 검색하고 사용하기 시작할 수 있습니다.
작업을 시작하기 위한 화면 제공
IUI로 디자인된 제품은 작업 집합에서 사용자를 시작하도록 설계된 특수 화면을 사용하는 경우가 많습니다. 이러한 화면을 활동 페이지라고 하는 이유는 관련 공통 작업 그룹을 구성하기 때문입니다. 활동 페이지는 사용자에게 시작점을 제공합니다. 활동 페이지는 일반적으로 사용자가 실제로 작업을 수행하는 다른 페이지에 대한 링크를 제공합니다. 활동 페이지는 사용자에게 "지금 무엇을 하고 싶습니까?"라고 질문하고 가능한 답변 목록을 제공합니다. 활동 페이지는 사용자가 이를 인식하는 데 도움이 되는 특별한 템플릿을 따를 수 있습니다.
활동 페이지는 제품에 대한 좋은 기본 시작 페이지를 만듭니다. 사용자가 애플리케이션을 시작할 때 일반적으로 수행하려는 작업을 염두에 두고 있습니다. 일반적으로 제품을 시작하는 이유는 매우 일반적인 몇 가지 작업 중 하나입니다. 제품의 기본 시작 페이지는 일반적인 작업을 시작하는 방법을 명확히 하여 이를 인식합니다.
Money 2000 홈 페이지는 활동 페이지의 예입니다. 기본적으로 사용자는 애플리케이션을 시작할 때 청구서 지불 및 계정 균형 조정과 같은 일반적인 재무 작업에 대한 액세스가 표시되는 이 화면을 볼 수 있습니다.
다음 스크린샷은 Money 2000 홈 페이지를 보여줍니다.
Money는 많은 재무 기능을 제공하기 때문에 가장 일반적인 재무 작업만 홈페이지에 적합합니다. 다른 모든 작업의 경우 홈페이지는 금융 센터라는 활동 페이지의 자회사 집합에 연결됩니다. 돈의 각 주요 영역은 금융 센터를 제공합니다. 이러한 화면은 각 영역 내의 모든 기능에 대한 점프 오프 지점 역할을하는 작업의 다음 계층을 제공합니다.
예를 들어 머니세금 영역에는 제품의 세금 관련 기능이 포함되어 있습니다. 세금 영역은 다음 스크린샷과 같이 세금 센터 페이지에서 이러한 기능에 대한 링크를 제공합니다.
사용 가능한 옵션이 적으면 활동 페이지가 훨씬 더 간단해질 수 있습니다. 다음 스크린샷에서는 Windows 사용자 계정을 관리하는 데 활동 페이지를 사용하는 방법을 보여 줍니다.
화면에서 컨트롤을 사용하여 작업을 수행하는 방법을 명확히 합니다.
이 지침을 따르는 가장 좋은 방법은 적절한 화면 제목을 선택하고 기본 작업의 범위를 가장 일반적인 작업으로 제한하는 것입니다. 페이지에 대한 명확한 제목과 용도에 도착하면 올바른 컨트롤 집합을 선택하는 것이 간단합니다.
작업을 완료하고 새 작업을 시작하는 쉬운 방법을 제공합니다.
사용자가 화면에서 직면하는 마지막 장애물은 언제 어떻게 나갈지 파악하는 것입니다. 사용자는 일반적으로 링크를 클릭하거나 다른 화면으로 이동하는 명령을 수행하여 화면을 떠난다. 이러한 링크는 화면 콘텐츠 영역, 작업 목록 또는 탐색 도구 모음에 나타날 수 있습니다. 사용자는 현재 파일 또는 애플리케이션 자체를 닫아 화면을 나갈 수도 있습니다.
일부 화면의 작업은 사용자가 확인하거나 취소해야 하는 작업을 준비하는 것입니다. 이러한 화면은 일반적으로 작업을 수행하고 커밋하는 하나의 링크와 취소하는 다른 링크를 제공합니다. 사용자가 이러한 옵션을 무시하고 다른 링크를 클릭하면 프로그램에서 덜 파괴적인 옵션을 수행해야 합니다. 화면은 사용자가 이 경로를 사용하면 어떻게 될지를 나타냅니다. 링크를 구하여 더 명확하게 만들 수 있습니다. 예를 들어 "변경 내용 저장"이라는 레이블이 지정된 커밋 단추는 해당 단추를 클릭할 때까지 화면에 적용된 변경 내용이 적용되지 않음을 의미합니다.
사용자가 원할 때마다 나갈 수 있더라도 페이지에서 명확한 종료를 제안하는 링크를 계속 제공할 수 있습니다. 정적 정보를 표시하는 페이지도 마찬가지입니다. 이 주제에 대한 자세한 내용은 페이지에서 명확한 종료 제공 섹션 을 참조하세요.
프로세스 시작 및 완료
이 문서의 목적을 위해 프로세스는 사용자를 둘 이상의 화면으로 데려가는 작업을 처리하는 기술입니다.
사용자가 화면의 콘텐츠 또는 작업 목록에서 링크를 클릭하고 다른 화면으로 이동한다고 가정합니다. 이 페이지는 전체적인 결과를 달성하는 일련의 화면 중 첫 번째 페이지가 될 수 있습니다. 이 일련의 화면이 끝나면 사용자는 프로세스 앞의 화면으로 돌아가려고 합니다. 사용자가 다시 얻을 수있는 적어도 두 가지 방법이 있습니다? 뒤로 단추를 반복해서 클릭하거나 홈페이지로 돌아가서 여기에서 탐색하시겠습니까? 그러나 이러한 방법 중 어느 것도 명백하거나 자연하지 않습니다. 대부분의 사용자는 최종 화면에서 원래 화면으로 직접 반환하는 단추를 찾을 것으로 예상합니다.
IUI 모델은 탐색 단위로 처리되는 프로세스, 화면 또는 일련의 화면 개념을 통해 이 시나리오를 지원합니다. 사용자는 프로세스를 입력하고 화면을 통해 작업할 수 있으며 마지막 화면에서 시작한 위치로 반환하는 단추를 찾을 수 있습니다. 중요한 것은 사용자가 제품의 여러 위치에서 프로세스를 시작할 수 있습니다. 사용자는 프로세스를 시작할 때의 위치에 관계없이 시작된 위치로 항상 반환됩니다.
프로세스 이름
각 프로세스에는 이름이 지정되어야 하며, 이 이름은 프로세스의 각 화면 어딘가에 표시되어야 합니다. Money 2000은 이 방법을 사용합니다. 전체 프로세스의 일부인 각 화면에는 위쪽에 해당 프로세스의 이름이 포함됩니다. 이 프로세스 이름은 덜 중요하기 때문에 화면의 고유한 제목보다 덜 눈에 띄게 표시됩니다. 프로세스 이름은 진행 중인 프로세스를 사용자에게 상기시키고 프로세스의 모든 화면이 단일 기능의 일부라는 개념을 강화합니다. 예를 들어 머니 세금 영역에는 여러 화면에 걸쳐 있는 세금 추정기 프로세스가 포함됩니다. 이 프로세스의 각 화면에는 집합 프로세스 이름과 고유한 화면 제목이 모두 표시됩니다.
프로세스 구현
다른 화면의 다양한 링크에서 동일한 프로세스를 시작할 수 있으며 사용자는 항상 올바른 시작 페이지로 반환됩니다. 링크의 대상이 달라지므로 프로세스의 최종 화면에서 하드 코딩된 링크를 통해 이 동작을 수행할 수 없습니다. 대신 애플리케이션은 뒤로 및 앞으로 명령에서 사용하는 일반 탐색 스택과 관계없이 활성 프로세스 스택을 유지 관리하여 이 동작을 구현할 수 있습니다. 사용자가 프로세스를 시작하면 시작 화면이 프로세스 스택에 푸시됩니다. 사용자가 프로세스의 마지막 화면에서 완료 단추를 클릭하면 애플리케이션이 스택에서 가장 최근 시작 화면을 표시하고 사용자를 해당 화면으로 반환합니다.
사용자가 프로세스에서 화면에서 벗어나면 프로세스 스택에서 프로세스가 활성 상태로 유지됩니다. 사용자는 화면 백업을 완료하여 해당 프로세스를 종료한 다음 계속 진행할 수 있습니다. 이렇게 하면 사용자가 우회하고 백업한 다음 프로세스를 진행할 수 있습니다. 이 동작이 어떻게 작동하는지 확인하려면 World Wide Web에서 온라인 쇼핑 프로세스를 시작하고 사이트를 떠난 다음 뒤로 단추를 누릅니다. 일반적으로 중단한 위치를 선택할 수 있습니다.
완료 단추
화면을 완료하고 프로세스에서 다음 화면으로 이동하려면 화면이 페이지 아래쪽 근처에 단추를 표시할 수 있습니다. 이 단추의 레이블은 "다음", "완료" 또는 이와 유사합니다. 단추가 프로세스를 종료하고 여러 위치에서 프로세스를 호출할 수 있는 경우 완료 단추의 캡션에는 호출 위치의 이름이 포함될 수 있습니다.
탐색 모음
모든 화면에서 사용자는 제품의 현재 영역을 완료하고 다른 항목을 시작하려고 할 수 있습니다. 제품의 다른 부분으로 이동하기 전에 현재 화면을 명시적으로 완료하지 않을 수 있습니다. 탐색 도구 모음은 사용자에게 새 작업을 시작하기 위한 링크 집합을 제공할 수 있습니다. 다른 작업 링크 목록과 마찬가지로 다음 섹션에서 자세히 설명한 다음 탐색 단계를 명확히 하는 원칙을 따라야 합니다.
다음 탐색 단계를 명확히 만들기
모든 기능을 동시에 사용할 수 있는 프로그램은 거의 없습니다. 사용자는 일반적으로 특정 기능을 찾으려면 프로그램을 탐색해야 합니다. 사용자가 원하는 결과에 한 걸음 더 가까이 다가가는 방법을 쉽게 확인할 수 있다면 탐색에 더 성공합니다. IUI를 사용하는 화면은 이 원칙을 염두에 두고 설계되었습니다.
예를 들어 활동 페이지에 사용자가 해당 시점부터 달성하고자 할 수 있는 모든 작업 또는 대상이 반드시 표시되지는 않습니다. 대신 활동 페이지는 사용자가 클릭할 적절한 링크를 쉽게 확인할 수 있도록 충분히 완료된 작업 목록을 제공합니다. 가장 빈번한 작업은 가장 두드러야 하며 탐색의 양이 가장 적어야 합니다. 태스크 빈도가 낮을수록 더 많은 단계가 필요할 수 있습니다.
다음은 Money 2000의 예입니다. 사용자가 내년 소득세 납부의 예상 금액을 확인하는 등 가끔만 수행하는 작업을 수행하려고 한다고 가정합니다. 사용자는 먼저 Money 2000 홈페이지에서 이 기능을 검색하기 시작합니다. 이 기능은 일반적인 작업 목록에 표시되지 않으므로 재무 영역 목록을 검색해야 합니다. 세금 지역은 유망한 소리, 그래서 그들은 그것을 클릭. 세금 센터 페이지에는 원하는 세금 예측 기능에 대한 링크가 포함되어 있으므로 이를 클릭하고 작업을 완료합니다. IUI 원칙을 적용하여 Money 2000을 사용하면 사용자가 원하는 항목을 직관적으로 찾을 수 있습니다.
사용자 지원
이 섹션에서는 IUI를 사용하는 제품에 사용자 지원 텍스트를 통합하기 위한 제안된 지침 집합에 대해 설명합니다.
기본 지원은 다음 스크린샷과 같이 화면에 표시되는 모든 텍스트를 나타냅니다. 기본 지원은 사용자가 화면에 표시되는 모든 정보를 쉽게 이해할 수 있도록 작업 중심 텍스트 단서를 제공합니다. 페이지의 목적과 개체가 서로 관련되어 작업을 수행하는 데 도움이 되는 방식을 이해합니다. 텍스트가 화면에 직접 표시되므로 "어떻게 해야 하나요?"와 같은 초보 질문에 대답하는 정보는 사용자가 아무 작업도 수행하지 않고도 쉽게 액세스할 수 있고 매우 잘 표시됩니다.
보조 지원은 화면에 표시되지 않는 모든 텍스트로 구성되며, 사용자 인터페이스 요소를 클릭하거나 마우스로 가리켜서 액세스하려면 일부 사용자 상호 작용이 필요합니다. 이 콘텐츠는 현재 진행 중인 작업을 수행하는 데 필수는 아니지만 여전히 직접 관련되어 있습니다.
기본 지원
기본 지원에는 다음 구성 요소 중 일부 또는 전부가 포함될 수 있습니다.
화면 제목
예: 그림 변경
화면 제목은 화면에 표시되는 첫 번째 및 가장 중요한 항목입니다. 이 페이지에서 완료할 수 있는 작업을 사용자 고유의 언어로 설명하는 것이 목적입니다. 화면 제목은 작업을 완료하는 방법에 대한 세부 정보를 설명하지 않아야 합니다. 화면 제목에 있는 텍스트는 화면의 핵심 작업만 참조해야 합니다. 엄지 손가락의 규칙으로, 작업에 대한 설명이 더 간단하고 짧을수록 작업이 더 잘 정의될 수 있습니다. 이 항목에 대한 자세한 내용은 2단계: 작업 상태 지정을 참조하세요.
화면 부제
예: 인터넷에서 새 사진을 다운로드할 수도 있습니다.
신중하게 노력하더라도 화면 제목이 복잡한 작업을 적절하게 설명하기에는 충분하지 않을 수 있습니다. 자막을 사용하면 화면의 용도를 자세히 설명할 수 있습니다. 부제목을 사용하여 페이지의 목적을 명확히 하거나, 추가 작업 설명을 제공하거나, 기대치를 설정하는 데 도움을 줄 수 있습니다. 자막을 읽지 않는 사용자는 페이지를 성공적으로 사용할 수 있어야 합니다. 제목과 마찬가지로 부제목은 작업을 완료하기 위한 세부 정보를 설명하지 않아야 합니다.
작업
예: 화면 보호기 변경
작업을 텍스트 링크 또는 사용자 상호 작용이 필요한 그래픽 이미지로 표시할 수 있습니다. 텍스트 링크로 표시되는 명령은 동사를 기반으로 하며 명확하고 간결한 작업으로 작성되어야 합니다.
명령 단추에 대한 레이블
예: 암호 만들기
명령 단추에는 다음 세 가지 유형이 있습니다.
- 취소
- 완료
- Commit
취소 및 완료 단추는 단순히 "취소" 및 "완료"를 레이블로 사용합니다. 커밋 단추는 "확인" 대신 활성 텍스트 레이블을 사용해야 합니다. 예를 들어 "확인" 대신 "암호 만들기"를 사용합니다.
다른 컨트롤에 대한 레이블
예: 암호 입력
라디오 단추, 확인란 및 텍스트 상자와 같은 컨트롤에 대한 레이블은 사용자가 컨트롤의 용도, 사용할 컨트롤 및 작업을 수행하기 위해 제공해야 하는 정보를 정확하게 알 수 있도록 명확하고 간결하게 작성해야 합니다.
"관련 작업" 링크
예: 관련 작업 - 다른 계정 변경
"관련 작업" 링크는 현재 기능과 관련된 다른 작업에 대한 명시적 진입점입니다. 작업 기반 링크로 작성해야 합니다.
"참고 항목" 링크
예: 참고 항목 - 테마 변경
"참고 항목" 링크는 보조 작업입니다. 이러한 작업은 기본 작업과 관련이 있지만 사용자를 현재 컨텍스트에서 제외합니다. 이러한 링크는 일반 작업 링크로 표시됩니다. 보조 작업에 대한 자세한 내용은 보조 작업의 시각적 디자인을 참조 하세요.
보조 지원
보조 지원에는 다음 구성 요소의 일부 또는 전부가 포함될 수 있습니다.
정보 팁
InfoTip을 사용하여 사용자에게 작업 링크 또는 명령 단추에 대한 추가 정보를 제공할 수 있습니다. 예를 들어 작업 링크의 InfoTip은 "계정에 사용할 그림을 선택할 수 있는 페이지를 표시합니다."라고 읽을 수 있습니다. 사용자가 연결된 개체 위로 마우스를 가져가면 InfoTip이 나타납니다. 사용자가 클릭할 수 있는 모든 사용자 인터페이스 요소에 대한 InfoTips를 만들어야 합니다.
"자세한 정보" 도움말 항목
예제: 자세한 정보 - 파일 다운로드
"자세한 정보" 링크는 기능 개요, 개념 정보, 지원 정보 및 절차 정보와 같은 도움말 항목을 엽니다. 혼란을 줄이려면 화면의 "자세한 정보" 도움말 항목 수를 최소화해야 합니다.
부록: Microsoft Money 2000 디자인 및 테스트
이 섹션은 디자이너의 직접 설명에서 수정되었습니다. Money 2000 팀이 IUI 모델을 수용하기 위해 디자인 및 테스트 프로세스를 수정한 방법을 설명합니다.
Money 2000 디자인 및 테스트
유도 탐색 모델을 사용하여 Money 2000을 설계함으로써 팀은 오랫동안 제품에 있던 디자인에 의문을 제기했습니다. 모델의 원칙은 간단하기 때문에 디자인 프로세스에서 모델을 채택하고 그대로 유지하는 것이 쉬웠습니다. 결국, 디자이너들은 모델이 그것 없이 제작할 수 있는 것보다 더 나은 디자인을 만드는 데 도움이 되었다고 믿습니다.
더 명확한 제목 및 디자인
Money 2000의 디자이너들은 화면에 실제로 나타나지 않는 단어를 사용하여 기능을 설명하는 경우가 많다는 것을 알아차렸습니다. IUI 모델에서 화면은 자신을 설명해야 합니다. 예를 들어 팀은 결제 일정이라는 화면 레이블이 청구서 지불용이라고 설명했습니다. 돈 2000에서, 그 화면은 지불 청구서라고 합니다. 해당 목적과 관련이 없는 모든 요소가 자회사 화면으로 이동되어 더 명확한 디자인이 되었습니다.
또 다른 예로 Online Financial Services Manager라는 화면이 있습니다. 팀은 이 화면의 목적에 대한 간단한 설명을 내놓는 데 어려움을 겪었습니다. 한 페이지에 도착할 수 없을 때 이 화면을 제거하고 논리적으로 정의된 페이지에 해당 기능을 배포했습니다.
새 디자이너 지원
팀은 경험이 부족한 새로운 소프트웨어 디자이너에게 IUI 디자인 기술을 쉽게 가르칠 수 있습니다. 이 기술을 통해 모든 환경 수준의 디자이너는 화면 제목을 명확성 테스트로 사용하여 디자인을 평가할 수 있습니다. 제대로 디자인되지 않은 화면에 명확하고 간결한 제목을 배치해야 할 때 디자이너는 페이지에 충분한 타이틀이 없다는 것을 빠르게 인식했습니다. 그들은 문제가 제목에 대한 단어를 선택하는 것이 아니라 결함이있는 화면 디자인에 거짓말을 것을 깨달았다. 이러한 이해를 통해 화면을 다시 디자인하여 보다 명확한 사용자 상호 작용을 지원하고, 따라서 더 명확한 제목을 지원할 수 있습니다.
기록기 포함
디자인이 진행됨에 따라 팀은 설명서 작성자와 편집자가 화면 제목을 만드는 데 참여해야 한다는 것을 깨달았습니다. 작가들은 후반기에만 참여했기 때문에 이전 릴리스에서 좋은 타이틀을 선택할 수 있는 능력이 제한되었습니다. 화면은 일반적으로 디자이너 또는 프로그래머가 임시 작업 제목을 제공했습니다. 이 타이틀은 작가가 최종 화면 타이틀을 마련하라는 요청을 받았을 때 제품 주기 후반까지 사용되었습니다. 그 시점에서 제대로 디자인되지 않은 화면을 재작업하기에는 너무 늦었습니다.
반면, Money 2000 팀은 디자인 프로세스의 초기 단계에서 작가를 참여시켰습니다. 이렇게 하면 디자인에 도움이 될 수 있을 때 화면 제목에 중요한 입력이 추가되었습니다. 화면이 너무 복잡하여 명확한 제목을 허용하지 않으면 기록기에서 페이지를 다시 디자인할 것을 제안할 수 있습니다.
프로젝트가 끝날 무렵, 작가와 디자이너들은 화면 제목이 이전 버전보다 더 명확하고 강하다고 믿었습니다. 또한 작성자는 새 페이지를 더 쉽게 설명할 수 있으므로 제품을 더 간단하게 문서화할 수 있습니다. 모든 팀 구성원은 디자인 단계에서 모든 분야를 포함하면 제품을 더 좋고 쉽게 사용할 수 있다고 생각했습니다.
유용성 테스트
Money 2000을 개발하는 동안 팀은 Money 99의 이전 탐색 구조와 IUI 모델 적용의 결과로 변경된 내용의 차이점을 살펴보기 위해 몇 가지 유용성 테스트를 수행했습니다.
프로토타입 테스트
제품 개발 프로세스 초기에 디자이너는 사용자가 IUI에 어떻게 반응하는지 살펴보기 위해 프로토타입을 만들었습니다. 이 작업은 프로그래머가 제품 자체를 정비하기 전에 모델의 원칙을 구체화할 시간을 허용하기 위해 개발 프로세스 초기에 수행되었습니다.
팀은 Microsoft Visual Basic 및 HTML에서 일반적으로 Money에서 수행되는 개인 재무 활동을 시뮬레이션하는 프로토타입을 만들었습니다. 프로토타입에서 사용자는 제품의 주요 영역을 나타내는 50개 이상의 페이지로 이동할 수 있습니다. 이 분야에서는 금융 계좌를 설정하고, 청구서를 지불하고, 보고서를 보고, 투자 작업을 할 수 있습니다.
11명의 참가자는 Money 99와 IUI 프로토타입 모두에서 동일한 작업 세트를 수행했습니다. 먼저 제품 중 하나를 사용하도록 임의로 할당되었습니다. 참가자 4명은 현재 머니 사용자였고, 4명은 경쟁 제품의 현재 사용자였으며, 3명은 이전에 개인 금융 상품을 사용한 적이 없었습니다.
전반적인 선호도에 따르면 Money의 현재 사용자 4명은 Money 99(집에서 사용했던 버전)를 선호했으며 나머지 7명의 사용자는 현재 버전에 새로운 프로토타입을 선호했습니다. 다른 모든 측정값의 경우 세 그룹의 사용자 간에 차이가 없었습니다. 전반적인 성능 측면에서 사용자는 프로토타입(작업당 1.45회)과 같이 Money 99(작업당 2.82회)를 사용하여 제품의 잘못된 영역에 두 배나 있었습니다. 다른 기본 설정 데이터 및 성능 측정값은 중요하지는 않지만 프로토타입을 선호하는 것으로 나타났습니다. 이 데이터 및 기타 테스트를 기반으로 Money 제품 팀은 Money 2000에 IUI 원칙을 통합하기로 결정했습니다.
제품 테스트
제품에 대한 코드의 대부분이 완료되면 팀은 IUI의 최종 구현을 검토하기 위해 또 다른 유용성 연구를 수행했습니다. 이 테스트에서는 이전에 개인 금융 상품을 사용한 적이 없는 10명의 참가자가 Money 99 또는 Money 2000을 사용하도록 선택되었습니다. 모든 사용자가 동일한 작업을 수행했습니다.
Money 2000 사용자는 작업의 89%를 성공적으로 완료했으며 Money 99 사용자는 작업의 74%만 성공적으로 완료했습니다. 프로토 타입과 마찬가지로, 사용자는 Money 99에 비해 Money 2000에서 탐색할 때 더 빠르지만 크게 다르지 않은 것처럼 보였습니다. 또한, 탐색에 대한 전반적인 주관적 만족도 측정은 돈 99보다 돈 2000에 대한 높은 경향이 있었다.
제어된 테스트
Money 2000은 거대하고 복잡하기 때문에 IUI 적용 효과에 대한 제어된 실험을 수행하는 데 적합하지 않습니다. 대신, 팀은 테스트를 위해 더 제한된 환경을 만들었습니다.
테스트에는 사용자가 화면에 표시된 주식 시장 보고서의 표시를 수정할 수 있는 "주식 시장 뷰어" 애플리케이션이 포함되었습니다. 사용자는 보고서에 포함된 데이터 열, 보고서 열의 순서, 정렬 및 사용된 소수 자릿수를 변경할 수 있습니다. 디자이너는 이 작업에 대한 IUI 접근 방식이 기존의 그래픽 사용자 인터페이스에 비해 어떻게 수행되는지 확인하고자 했습니다.
다음 스크린샷은 테스트에 사용된 기존 사용자 인터페이스를 보여줍니다. 단일 대화 상자는 모든 보고서 사용자 지정 작업을 수행합니다. 많은 애플리케이션은 항목 목록에서 하위 집합을 선택하기 위한 유사한 대화 상자를 제공합니다. 대화 상자에는 두 개의 목록이 있습니다. 왼쪽 목록에는 사용 가능한 모든 보고서 열이 표시되고 오른쪽에는 사용자가 보고서에 대해 선택한 열의 하위 집합이 표시됩니다. 추가 컨트롤은 오른쪽 목록에서 선택한 보고서 열의 순서 및 서식 특성을 수정합니다.
이 작업의 IUI 버전에 대해 팀은 웹 스타일 애플리케이션을 만들었습니다. 각 사용자 지정 작업은 별도의 페이지에 배치되었습니다. 또한 애플리케이션에는 다음 스크린샷에 표시된 기본 페이지가 포함되어 사용자에게 보고서를 사용자 지정하는 방법을 묻습니다.
이 주 페이지에서 링크를 클릭하면 사용자가 추가 페이지로 이동하여 특정 사용자 지정 작업을 수행합니다. 예를 들어 다음 스크린샷은 보고서 열을 선택하는 데 사용되는 페이지를 보여 줍니다.
두 버전의 테스트에서 주체는 지정된 시작 상태(화면에 표시됨)에서 지정된 목표 상태(종이 유인물에 표시됨)로 보고서를 사용자 지정하도록 요청받았습니다. 컴퓨터는 보고서를 사용자 지정하기 위해 시도한 시간과 시도 횟수를 추적했습니다. 컴퓨터는 사용자가 보고서를 성공적으로 사용자 지정했을 때 사용자에게 알렸다.
이 테스트에는 88명이 참여했습니다. 각 참가자는 애플리케이션의 두 버전 중 하나를 사용하여 11개의 보고서 집합을 사용자 지정하라는 요청을 받았습니다. 또한 이러한 참가자 중 72명이 1주일 후에 반환되어 첫 번째 세션에서 동일한 버전을 사용하여 11개 보고서의 다른 집합을 사용자 지정했습니다. 모든 주제는 주로 전자 메일용 컴퓨터를 사용하고, 솔리테어를 재생하고, 웹 서핑을 하는 초보 컴퓨터 사용자로 분류되었습니다.
두 버전의 사용자 또는 관심 있는 다른 변수 간에는 큰 차이가 없었습니다. 사용자는 동일한 속도로 작업을 수행하고, 동일한 횟수만큼 작업을 반복했으며, 두 버전에 대해 전반적인 주관적 만족도 등급이 동일했습니다. 따라서 이 테스트는 IUI가 성능 또는 주관적 등급의 개선 또는 저하를 초래한 측정값을 표시하지 못했습니다.
사용자가 작업을 수행하기 위해 더 많이 이동해야 하는 경우 작업을 수행하는 시간이 더 커야 한다고 주장할 수 있습니다. 이 실험은 이 결과를 제안하지는 않지만 이 작업에 대한 두 가지 다른 접근 방식에 대한 평균 성능 시간 및 관련 표준 편차가 거의 동일하다는 점에 유의해야 합니다.
IUI 사용으로 인한 측정 가능한 개선 사항이 있는지 확인하기 위해 추가 연구가 필요합니다. 최소한 이 테스트는 IUI가 성능 또는 제품 사용량에 해를 끼친다는 증거를 제공하지 않았습니다.
웹 사이트와의 비교
잘 디자인된 많은 웹 사이트는 이 문서에 설명된 IUI 모델과 유사한 원칙을 사용합니다. 이는 웹 작동 방식의 부작용일 수 있습니다. 단일 웹 페이지의 컨트롤 간에 복잡한 상호 작용을 구현하기 어렵기 때문에 디자이너는 새 페이지를 가져오기 위해 서버로 두 번 이상 이동해야 하는 작업으로 작업을 분할하는 경우가 많습니다. 일부 사이트에는 페이지의 용도를 명확하게 나타내는 페이지 제목도 포함되어 있습니다.
기존 애플리케이션의 디자이너에는 훨씬 더 다양한 도구 집합을 사용할 수 있습니다. 이렇게 하면 유연성이 더 높아지지만 복잡하고 혼란스러운 페이지를 만들 수 있는 기회가 늘어나게 됩니다. 유도 사용자 인터페이스를 만들 때 디자이너는 재량에 따라 이 기능을 사용하고 명확성과 단순성을 중시해야 합니다.