타스크: 사용자 인터페이스 디자인
이 타스크는 사용성에 중점을 두고 GUI 디자인을 수행하는 방법을 설명합니다.
목적
  • 사용성에 대한 추론 및 사용성 향상을 지원하는 사용자 인터페이스의 디자인 생성
관계
기본 설명

사용자 인터페이스를 디자인할 때 기존 사용자 인터페이스 프로토타입은 물론 요구사항을 도출하는 동안 작성된 임의의 스토리보드, 프로젝트 가이드라인의 사용자 인터페이스 가이드라인을 명심하십시오. 이 타스크의 결과로 스토리보드 정제가 필요하다고 판단되면 시스템 분석가가 이런 갱신을 수행합니다(타스크: 이해 당사자(stakeholder) 요청 도출 참조).

단계
관련 사용자의 특성 설명

시스템과 상호작용하여 현재 반복에서 고려되는 요구사항을 수행할 사용자(사람)의 특성을 설명하십시오. 상호작용의 주요 부분은 이런 사용자를 포함하므로 기본 사용자를 설명하는 데 초점을 맞추십시오. 이 정보는 아래의 후속 단계에 중요합니다.

시스템 분석가와 협업하여 액터 설명에 대한 변경사항이 특성 설명을 반영해야 하는지 여부를 판별하십시오. 세부사항은 중간 산출물 가이드라인: 액터, 특성을 참조하십시오.

기본 사용자 인터페이스 요소 식별

현재 반복에서 고려되는 요구사항(특히 유스 케이스 및/또는 스토리보드)를 주시하여 시스템 사용자 인터페이스의 기본 창을 식별하십시오. "기본 창"은 사용자가 가장 많은 요소(시스템에 대한 사용자의 사고 모델의 중심인 해당 사용자 인터페이스 요소)와 상호작용할 창을 의미합니다. 기본 창에는 메뉴가 포함되며, 하위 창이나 양식이 포함될 수도 있습니다. 기본 창은 사용자가 탐색하는 창입니다. 비기본 창이 결국 기본 창의 파트가 될 수도 있습니다.

주 기본 창은 사용자가 응용프로그램을 실행할 때 열리는 창이어야 합니다. 일반적으로 응용프로그램이 실행되는 동안 항상 열려 있으며, 사용자는 여기서 "사용 시간"의 상당 부분을 소비합니다. 항상 열려 있고 사용자와 시스템과의 첫 번째 접촉점을 구성하므로 시스템에 대한 사용자의 사고 모델을 강제하는 주요 수단입니다. 주 기본 창을 일반적으로 "홈 페이지"라고 합니다.

다른 사용자 인터페이스 요소와 공간적 관계 속에서 또는 함께 표시되어야 하는 경우 사용자 인터페이스 요소를 동일한 기본 창으로 함께 그룹화하십시오. 그러나 화면 영역이 제한되어 있기 때문에 항상 이렇게 할 수 있는 것은 아닙니다. 평균 오브젝트 볼륨은 동시에 잠재적으로 표시되어야 하는 오브젝트 수를 나타내므로 이 단계에 중요한 입력입니다. 오브젝트가 너무 많으면 동일한 창에 모두 표시할 수 없을 수도 있습니다. 대신, 기본 창은 오브젝트에 대한 압축 표시를 포함할 수 있으며 각 오브젝트(또는 오브젝트 세트)에 대해 독립된 기본 창을 정의할 수 있습니다.

다음은 기본 창에 대한 일부 권장사항입니다.

  • 시스템에 대한 사용자의 사고 모델의 중심인 창
  • 사용자가 대부분의 사용 시간을 소비할 창
  • 유스 케이스 초기화를 제공하는 창

기본 창 수 및 기본 창 간의 탐색 경로 수를 최소화하는 것이 목적임을 명심하십시오.

탐색 맵 정의

식별된 기본 창 세트 및 스토리보드를 기반으로 시스템의 탐색 맵을 정의하십시오.

탐색 맵은 기본 사용자 인터페이스 요소 및 탐색 경로를 포함해야 합니다. 사용자 인터페이스 요소를 통해 가능한 경로를 모두 포함할 필요는 없고 기본 경로만 포함하면 됩니다. 탐색 맵의 목적은 시스템의 사용자 인터페이스의 로드 맵 역할을 하는 것입니다.

탐색 맵에서 "최상위" 사용자 인터페이스 요소의 가장 명백한 후보는 주 기본 창(사용자가 대부분의 사용 시간을 소비하는 창)입니다.

탐색 맵은 사용자가 특정 화면이나 일부 기능에 도달하려면 "몇 번 클릭"해야 하는지를 명확히 해야 합니다. 일반적으로, 기본 창에서 "한 번의 클릭"만으로 응용프로그램의 가장 중요한 영역에 도달하기를 원합니다. 창 탐색 경로가 너무 길면 불필요한 상호작용 오버헤드가 늘어나는 것은 물론 사용자가 시스템에서 "길을 잃는" 상황이 발생할 가능성이 높습니다. 이상적으로는 주 기본 창에서 모든 창이 열려 최대 창 탐색 길이가 둘이어야 합니다. 창 탐색 길이가 셋을 넘지 않도록 하십시오.

또한 탐색 맵은 프로젝트 가이드라인에 설명된 바와 같이 시스템의 사용자 인터페이스에 대한 사용법 은유를 고수하고 반영해야 합니다.

탐색 맵에 다양한 표시를 사용할 수 있습니다. 몇 가지 예를 들면 다음과 같습니다.

  • 계층적 "트리" 다이어그램(다이어그램의 각 레벨은 특정 사용자 인터페이스 요소에 도달하기 위해 갖는 클릭 수를 표시함)
  • 사용자 정의 아이콘이 있는 자유 양식의 그래픽
  • UML 클래스 다이어그램(사용자 인터페이스 요소에는 클래스가 사용되고 탐색 경로에는 연관이 사용됨)

어떤 표시를 사용할지 선택하는 방법은 프로젝트 가이드라인에 지정되어 있습니다.

사용자 인터페이스 요소의 디자인 상세화

지금 상위 레벨 사용자 인터페이스 디자인이 완료되었습니다.

  • 기본 창이 식별되었습니다.
  • 사용자 인터페이스 요소 및 탐색 경로가 정의되었습니다(탐색 맵).

이제 사용자 인터페이스 요소의 세부 디자인을 수행할 수 있습니다. 다음은 사용자 인터페이스 요소 디자인의 다른 측면입니다. 각각에 대해서는 아래에 설명되어 있습니다.

기본 창의 시각화 디자인

기본 창(특히, 주 기본 창)의 시각화는 시스템의 사용성에 중대한 영향을 미칩니다. 이 시각화를 디자인하는 것은 포함된 사용자 인터페이스 요소의 어느 파트(특성)를 시각화해야 하는지 결정하는 것입니다. 스토리보드 이벤트 플로우를 사용하여 표시할 특성의 우선순위를 결정할 수 있습니다. 사용자가 사용자 인터페이스 요소의 많은 다른 특성을 보아야 할 경우, 기본 창 보기를 여러 개 구현할 수 있습니다(각 보기는 서로 다른 특성 세트를 시각화). 또한 이 시각화를 디자인하는 것은 모든 시각적 차원을 사용하여 포함된 사용자 인터페이스 요소의 특성을 시각화하는 방법을 살펴보아야 함을 의미합니다. 세부사항은 가이드라인: 사용자 인터페이스(일반)의 "시각적 차원" 섹션을 참조하십시오.

가능하면 기본 창에 표시될 "공통 분모"를 요소 전반에서 식별하십시오. 일부 차원에서 공통 분모를 시각화하면 사용자는 요소를 서로 관련시키고 패턴을 보기 시작할 수 있습니다. 이렇게 하면 사용자 인터페이스의 "대역폭"이 대폭 늘어납니다.

예제:

다음과 같은 측면을 표시하려는 고객 서비스 시스템이 있다고 가정해 보십시오.

  • 시간의 경과에 따른 고객의 불만사항 및 문의사항
  • 시간의 경과에 따라 고객이 구입한 제품
  • 시간의 경과에 따라 고객에게 보낸 송장의 수

여기서 공통 분모는 "시간"입니다. 따라서 불만사항/문의사항, 구입한 제품과 송장 수를 동일한 가로 시간 축에 나란히 표시하면 사용자가 이들이 어떻게 연관되어 있는지(연관된 경우) 패턴을 볼 수 있습니다.

기본 창의 사용자 조치 디자인

여기서는 기본 창에 대해 호출할 수 있는 사용자 조치 "구현" 방법을 결정합니다. 일반적으로 기본 창의 사용자 조치는 메뉴 표시줄에 메뉴 항목으로 제공되며, 팝업 메뉴 및 도구 모음을 통해 대체 및 보충으로 제공됩니다.

각 기본 창에 대해 메뉴 및 메뉴 옵션을 정의하십시오. 예를 들어, 문서 편집기에는 잘라내기, 복사와 같은 결합력 있는 조작을 그룹화하는 편집 메뉴가 있습니다.

일부 사용자 조치는 사용자와의 복잡한 상호작용을 필요로 할 수 있으므로 전용 보조 창이 있어야 합니다. 예를 들어, 문서 편집기에서 문서에 대한 인쇄 조작의 경우 복잡한 상호작용으로 인해 독립된 대화 상자 창이 있어야 합니다.

아주 많은 오브젝트를 창에서 시각화할 경우, 이런 오브젝트를 포함하는 사용자 조치를 디자인해야 할 수도 있습니다. 이러한 사용자 조치의 몇 가지 예를 들면 다음과 같습니다.

  • 다중 오브젝트 검색
  • 다중 오브젝트 정렬
  • 다중 오브젝트의 브라우징 계층 구조
  • 다중 오브젝트 선택

세부사항은 가이드라인: 사용자 인터페이스(일반)를 참조하십시오.

기타 기능 디자인

필요한 동적 동작을 사용자 인터페이스에 추가하십시오. 대부분의 역학은 선택-작동 패러다임과 마찬가지로 대상 플랫폼에 의해 제공되며 두 번 클릭, 오른쪽 마우스 단추의 팝업 메뉴 등으로 열립니다. 그러나 다음을 포함하여 몇 가지 결정해야 할 사항이 있습니다.

  • 창 관리 지원 방법
  • 입력 커서 위치, 화면 이동 막대 위치, 열린 창, 창 크기, 상대적 창 위치 등 세션 간에 저장할 세션 정보
  • 기본 창에 단일 문서 인터페이스(SDI)를 지원할지 복수 문서 인터페이스(MDI)를 지원할지 여부

또한 다음을 포함하여 사용성을 향상시킬 수 있는 기타 공통 기능을 평가하십시오.

  • "마법사"를 포함하여 "온라인 도움말"을 제공해야 하는지 여부
  • 시스템을 안전하게 탐색하기 위해 "실행 취소" 조작의 사용 여부
  • 사용자 이벤트를 모니터하고 조치를 적극적으로 제안하기 위해 "에이전트"를 제공해야 하는지 여부
  • 연관을 시각화하기 위해 "동적 강조표시"를 제공해야 하는지 여부
  • 사용자 정의 "매크로"를 지원해야 하는지 여부
  • 사용자 구성이 가능해야 하는 특정 영역이 있는지 여부

세부사항은 가이드라인: 사용자 인터페이스(일반)를 참조하십시오.

특성
다중 발생
이벤트로 구동됨
진행 중임
선택사항
계획됨
반복 가능함
자세한 정보