사용자 인터페이스 원칙

이 항목에서는 Windows 애플리케이션에 직관적인 사용자 인터페이스 및 사용자 환경 디자인 원칙을 구현하는 방법에 대해 설명합니다.

소개

개발자는 종종 최종 사용자의 관점을 고려하지 못합니다. 개발자는 애플리케이션을 작동하기 위해 열심히 노력하고 있습니다. 고객은 이 요구 사항을 중심으로 소프트웨어 센터에 대한 인식과 작동을 기대하기만 하면 됩니다. 소매 소프트웨어 또는 비기술 사용자가 사용할 소프트웨어를 개발하는 경우 특히 그렇습니다. 개발자는 전체 소프트웨어 디자인 프로세스에서 최종 사용자의 요구 사항을 알고 있어야 합니다.

소프트웨어 애플리케이션은 최대한 쉽게 탐색하고 사용해야 합니다. 소프트웨어가 만들어지는 양에 따라 10개 소프트웨어 애플리케이션 중 약 4개는 최종 사용자가 진정으로 좋아하고 즉시 편안하게 사용할 수 있는 정말 훌륭한 UI를 가지고 있습니다.

기업용으로 대량의 내부 사용 소프트웨어가 만들어집니다. 사내에서 개발되었든, 컨설턴트의 관리 하에 개발되었든, 종종 최소한의 시간, 노력 또는 돈이 더 나은 UI를 만드는 데 투자됩니다. '디자이너' 역할은 개발 주기에서 드물며, 특히 Windows 애플리케이션의 세계에서는 드뭅니다.

보다 외관이 멋지고 기능이 우수한 애플리케이션용 UI를 만들려면 준수해야 하는 몇 가지 기본 규칙이 있습니다. 그것은 당신의 부분에 시간이나 돈의 너무 많은 투자를 필요로하지 않으며, 투자에 좋은 수익을 추가합니다.

더 나아가기 전에 적어도 이 문서의 범위에 대해 사용자 인터페이스와 사용자 환경을 구분해 보겠습니다. 사용자 인터페이스(UI)란 애플리케이션의 시각적 측면과 컨트롤을 나타내는 반면, 사용자 환경(UX)은 UI 및 그 UI와 관련된 애플리케이션의 동작뿐 아니라 이 애플리케이션에서 사용자가 받게 되는 "느낌"까지 포괄합니다. 멋진 UI를 디자인하는 것뿐만 아니라 제대로 작동하는지 확인하는 것도 가능합니다.

여기서는 애플리케이션 디자인 단계에서 쉽게 적용할 수 있는 UX 디자인을 위한 20가지 중요한 규칙에 대해서 설명하도록 하겠습니다. 그 결과 보다 직관적인 기능인 "휴먼 UX"가 포함된 풍부한 애플리케이션이 생성됩니다. 우리 모두가 알고 있듯이 애플리케이션의 Windows Vista 세대는 다르게 보고 동작해야 합니다. 이 항목은 현재 사용자에게 미래의 맛을 제공하면서 향후 애플리케이션을 준비하는 데 도움이 됩니다.

다음 섹션에서는 적절한 UI 디자인의 기본 사항에 대해 설명합니다.

적절한 UI의 기본 원칙

전문가 수준의 UX는 다음 네 가지 요인에 따라 달라집니다.

  • 간격 및 위치 지정
  • 크기
  • 그룹화
  • 직관적인 기능

8.0 이전 버전의 Microsoft Visual Studio에서는 간격 및 크기 조정이 최적이 아니었습니다. 4x4 또는 8x8 그리드가 항상 작동하지는 않습니다. SnapLines를 포함하면서 프로세스가 크게 간소화되었습니다. 레이블을 텍스트 상자에 맞추거나 더 나쁜 것은 이전 버전의 Visual Studio에서 여러 레이블을 해당 텍스트 상자에 맞추는 것이 매우 어려웠습니다. SnapLines는 이 프로세스를 크게 간소화했습니다.

다음 섹션에서는 전문 UX 디자인의 가장 중요한 네 가지 측면을 설명합니다.

간격 및 위치 지정

두 컨트롤 사이의 간격이 중요합니다. 다음 스크린샷은 제대로 디자인 되지 않은 사용자 정보 입력 양식을 보여 줍니다. 위쪽 두 텍스트 상자가 너무 가깝고, 그 아래의 목록이 너무 멀리 떨어져 있으며, 양식에 사용되지 않는 공간이 많이 있습니다.

제대로 디자인되지 않은 양식의 스크린샷

다음 스크린샷에서는 적절한 간격과 적절한 크기의 컨트롤이 있는 보다 전문적인 대화 상자를 볼 수 있습니다. 이전 스크린샷과 같은 형식이지만 SnapLines에서 권장하는 간격을 사용하도록 수정되었습니다. 레이블을 컨트롤의 실제 아래쪽 테두리가 아닌 텍스트 상자의 텍스트 기준선이나 그 옆에 있는 다른 컨트롤에 맞추는 것이 좋습니다. 맞춤에 도달하면 SnapLines가 다른 색으로 바뀝니다(일반적으로 아래쪽 테두리 위에 몇 픽셀).

보다 잘 디자인된 폼의 스크린샷.

간격에 대한 정확한 규칙은 없지만 SnapLines는 적절한 간격에 대해 매우 유용한 지침을 제공합니다. 적절한 간격을 유지하는 데 도움이 되는 다른 도구는 컨테이너 도구 상자 그룹의 레이아웃 컨트롤입니다. TableLayoutPanel은 항목 양식 스타일 대화 상자를 만드는 데도 매우 유용합니다.

크기

크기에도 동일한 고려 사항이 적용됩니다. 도구 상자에서 폼으로 단추를 끌면 높이와 너비가 완벽합니다. 권장되는 최대 너비(매우 중요한 이유 제외)는 원래 너비를 두 배로 늘리기 위한 것입니다.

시작 메뉴의 실행 창 또는 Windows 탐색기 개체의 속성 대화 상자를 보면 단추 크기가 '맞습니다.'입니다. 최종 사용자가 실패하지 않고 주의해야 하는 매우 중요한 함수가 있는 경우 큰 단추를 사용하거나 비표준 색을 장식하는 방법 이외의 다른 방법이 있습니다(나중에 자세히 설명).

다음 이미지에서는 세 개의 단추를 볼 수 있습니다. 첫 번째 단추는 가장 권장되는 크기이며 도구 상자에서 끌거나 두 번 클릭할 때 기본적으로 생성되는 크기입니다. 경우에 따라 추가 텍스트를 사용하여 단추를 더 크게 만들어야 합니다. 두 번째 단추는 크면서도 허용 가능한 크기를 보여 줍니다. 그것은 다른 컨트롤을 배치하기위한 혼란을 만들지 않을 것입니다. 그러나 세 번째 단추는 완전히 허용되지 않는 크기입니다. Windows에서 테마 컨트롤을 그리는 데 사용하는 테마 비트맵을 약간 왜곡하는 것을 볼 수 있습니다. 또한 다른 컨트롤을 직관적으로 정렬하기 어렵게 만듭니다.

왼쪽에서 오른쪽으로 크기가 증가하는 세 개의 단추 이미지

그룹화

일반적으로 애플리케이션에는 많은 컨트롤이 포함되어 있습니다. 적절하고 직관적인 그룹화만으로 이러한 모든 컨트롤을 더 쉽게 사용할 수 있습니다. 함수 기반 또는 분류된 그룹화는 Tab 컨트롤에서 가장 잘 수행됩니다. 예를 들어 '계정', '보고서', '직원', '프로젝트'는 일반적인 비즈니스 애플리케이션에서 탭에 적합한 후보입니다. 형제 그룹화(동일한 최종 결과에 영향을 주는 컨트롤)는 그룹 컨트롤에서 가장 잘 수행됩니다. 이러한 그룹화에는 테두리가 있는 패널을 사용하지 않는 것이 좋습니다. 그룹 컨트롤은 레이블 컨트롤의 추가 가중치를 절약합니다( 특히 하위 컨트롤이 설명이 없는 경우).

그룹 컨트롤 내의 그룹 컨트롤은 하나의 큰 그룹 컨트롤 내에 2개 또는 3개 이하가 없으면 권장되지 않습니다.

직관적인 기능

이는 훌륭한 사용자 환경의 가장 중요한 측면입니다. 직관적인 UX는 설명의 필요성을 줄입니다. 사용자는 컨트롤이 수행하는 작업을 알고 있습니다.

직관적인 디자인에서 중요한 항목은 색 코딩입니다. 테마 애플리케이션의 탐색, 컴퓨터 로그 끄 기 및 컴퓨터 해제 대화 상자 등과 같은 함수에 대한 새로운 소프트 사각형 단추를 제공하는 Windows XP에 좋은 예가 있습니다.

이러한 컨트롤의 색 지정은 해당 단추가 푸시되는 결과의 심각도에 따라 결정되었습니다. 탐색은 'Go' 신호등처럼 녹색입니다. 작업 손실을 초래할 수 있는 종료는 경고 표시처럼 빨간색으로 표시됩니다. 로그오프 또는 최대 절전 모드와 같은 세미 크리티컬 단추는 노란색입니다. 도움말과 같이 사용자의 작업 프로세스에 중요한 영향을 주지 않는 중립 단추는 부드러운 파란색입니다. 스킨 UI를 만들 때 이러한 색 측면을 염두에 두어야 합니다.

색으로 콘텐츠를 인식하는 좋은 예는 Microsoft Office OneNote입니다. 이 애플리케이션의 탭은 전체 Windows XP 스타일 디자인에 무난하게 어울리도록 하면서도 다양한 색으로 설정할 수 있습니다.

또 다른 중요한 측면은 애플리케이션의 텍스트입니다. 최근 Windows 소프트웨어의 서면 지침에 사용되는 언어를 간소화하기 위한 다양한 노력이 있었습니다. 소프트웨어 내 텍스트 사용법은 나중에 설명하지만 다음과 같은 작지만 중요한 세부 정보를 확인하세요.

MSN Messenger의 옵션 대화 상자에 "웹캠 기능 공유"라는 확인란이 있었습니다. 개발자와 기술 친화적 인 사람들은 그 의미를 알고 있지만, 초보 사용자는 아마도 당신이 당신의 채팅의 다른 쪽 끝에 다른 사용자가 웹 캠을 사용하도록 할 수 있다고 생각할 수 있습니다, 너무. 최근 버전에서는 "내 웹캠: 다른 사용자가 웹캠이 있음을 볼 수 있도록 허용"으로 변경했습니다. 이는 기술 지식이 없을 수 있고 간단한 언어에 사용되는 대상 대상에게 적합합니다.

언어가 더 간단해지면 쉽게 이해할 수 있지만, 추가적인 장점도 있습니다. 과학적 연구에 따르면 새로운 것을 이해하려고 할 때 우리의 마음은 더 간단한 언어로 더 쉽게 작동합니다. 종종, 우리의 뇌는 위의 예에서 '웹캠' 또는 '기타'와 같이 눈에 띄는 단어를 이해하기 위해 더 많은 '대역폭'이 할당될 정도로 'it', 'for,' 'that,' 및 기타 일반적인 단어를 너무 빠르고 쉽게 처리합니다.

메시지 상자 제목, GroupBox 캡션 및 기타 텍스트 블록을 사용하면 몇 단어만으로 컨트롤 그룹의 기능을 최종 사용자에게 쉽게 전달할 수 있습니다.

직관적인 것도 친숙함에서 비롯됩니다. 예를 들어 확인 및 취소 단추의 배치는 너무 균일하고 마음에 잘 배치되므로 대화 상자에 이러한 단추가 역방향 순서로 있는 경우(취소, 확인, 확인, 취소 대신 취소) 취소를 누르기만 하면 됩니다. 작업을 수행하기 위해 특정 표준(예: Windows 기반 애플리케이션)을 사용한 후 1년 넘게 습관이 발전합니다. 업계 표준을 따르면(단, 명시되지 않음) 소프트웨어를 더 쉽게 사용할 수 있습니다.

초기 Windows Vista 미리 보기 빌드 중 하나에서 모든 창의 최소화, 최대화 및 닫기 단추가 달라졌습니다. 이전 버전의 Windows(특히 단일 모니터를 사용하는 경우)에서는 화면의 오른쪽 위 모서리에서 커서를 이동하고 클릭하는 습관을 개발합니다. 이로 인해 항상 창이 닫힙니다. 이제 Windows Vista의 이 특정 빌드에서는 닫기 단추와 창의 오른쪽 테두리 사이에 약 8픽셀의 공간이 있었습니다. 여분의 공간은 멋지게 보이게했지만 (단추가 스포츠 한 멋진 네온 애니메이션에 필요할 수도 있음), 사용자가 열린 창을 쉽게 닫을 수 없기 때문에 자극적이었습니다. 마음을 재구성하는 것은 어려울 수 있습니다. 다행히 다음 빌드에서 이 문제가 해결되었습니다. 이제 창의 테두리와 닫기 단추 사이에는 여전히 공간이 있지만 해당 공간을 클릭하면 창이 닫힙니다.

직관적인 디자인의 매우 중요한 요소는 '정신 대역폭'의 양입니다. 즉, 어떤 것을 이해하는 데 시간이 걸릴 수 있습니다. '대역폭' 사용량이 낮을수록 사용자 환경이 향상됩니다.

소프트웨어 애플리케이션 사용 "환경"에 기여하는 사소한 항목들도 있기는 하겠으나 다음 예제에서는 실제 팁과 요령을 사용하여 애플리케이션을 개선하는 팁을 제공합니다.

더 나은 기능적 사용자 환경을 위한 20가지 팁

더 나은 사용자 환경의 목표는 더 간단하고, 쉽고, 기능적인 UI도 멋지게 만드는 것입니다. 이러한 팁은 UI를 보다 효과적으로 형성하는 데 도움이 됩니다.

표준 사용

운영 체제 수준, 브랜드 수준 또는 애플리케이션 수준에 관계없이 모든 소프트웨어 환경의 설정된 표준은 매우 중요합니다. 브랜딩 외에도 표준은 사용자의 마음 속에 속담 스키마 역할을 합니다. 어떤 소프트웨어 애플리케이션을 사용하여 오랜 시간을 작업할 경우 해당 사용자는 소프트웨어와 점점 친숙해지면서 생산성이 자동으로 향상될 것입니다.

표준에 대해 논의하기 전에 먼저 이러한 표준이 정확히 무엇인지 알아보겠습니다. 표준에는 확인 및 취소 단추, 사용자 인터페이스의 셰이프와 같이 대화 상자의 특정 방식으로 컨트롤 레이아웃에서 Windows XP 대화 상자와 같이 창 위쪽의 둥근 모서리, 아이콘 스타일, 다른 그래픽의 스타일, 응용 프로그램의 대화형 동작 등 모든 것이 포함됩니다.

만약 애플리케이션이 일반적인 애플리케이션이 아닌 경우 다른 표준 집합을 따르는 것이 좋습니다. 예를 들어 응용 프로그램이 Office OneNote 2003에 대한 응용 프로그램 또는 추가 기능을 지원하는 경우 Office의 UI 스타일과 대화형 표준, 특히 OneNote 자체를 따르는 것이 좋습니다. 여기에는 표준 도구 모음 대신 Office 스타일 명령 모음을 사용하는 것과 시각적 개체와 동작이 모두 포함됩니다. 개발 중인 애플리케이션이 Microsoft Visual Studio .NET 범주에 속할 경우 별도의 표준 집합을 준수해야 합니다. 실제로 이러한 추가 기능 또는 지원 애플리케이션의 경우 Microsoft와 같은 회사는 서면 지침을 릴리스합니다. 또한 그래픽 및 디자인 개념이 보호되는 지적 속성도 있습니다. 항상 적절한 설명서를 확인하여 이러한 디자인을 만들 수 있는 라이선스가 있는지 확인합니다.

표준의 세 번째 예는 태블릿 PC 환경입니다. 이러한 표준은 운영 체제 지침과 애플리케이션 지침 사이의 경계를 넘습니다. 태블릿 PC SDK 설명서에는 "애플리케이션 계획" 항목에 매우 유용한 정보가 포함되어 있습니다. Office 2003 또는 Visual Studio 지침과 달리 이러한 디자인 권장 사항은 사용자가 애플리케이션과 상호 작용하는 방식과 애플리케이션의 작동 방식에 직접적인 영향을 줍니다. 예를 들어 애플리케이션에 도킹 창이 있는 경우 설명서에서는 화면 방향이 변경되는 시기를 감지하고 도킹 창이 필요에 따라 세로 또는 가로 방향으로 올바르게 다시 구성되도록 하는 것이 좋습니다. 태블릿별로 애플리케이션을 디자인하지 않더라도 다음 지침을 따라야 합니다.

스마트 클라이언트의 등장으로 애플리케이션은 이제 일반 PC, 태블릿 PC, 모바일 또는 울트라 모바일 디바이스, 미디어 센터 PC 등 다양한 하드웨어 간의 경계를 넘어가고 있습니다. 각 상황에서는 다른(또는 추가) 표준 집합을 따라야 합니다.

애플리케이션이 운영 체제 수준 또는 애플리케이션 수준 표준을 공유하는 경우 사용자는 더 쉽게 배우고 사용할 수 있도록 소프트웨어를 사용하여 집에서 더 많은 느낌을 줍니다. 이 결과는 생산성을 직접적으로 향상시킵니다. 사용자는 가능한 한 빨리 새 소프트웨어로 생산성을 높일 수 있기를 원합니다.

중요 단추에 주의 끌기

4~5개의 다른 단추가 있는 경우에도 사용자에게 가장 중요한 단추로 이동해야 하는 경우가 있습니다. 크기, 색 또는 글꼴을 실험하는 경우 표준을 위반하는 것이 좋습니다. 대신 몇 가지 간단한 요령을 사용하여 이 작업을 수행할 수 있습니다.

첫 번째는 다음 이미지와 같이 다른 중요하지 않은 단추를 LinkLabels로 변환하는 것입니다. 이러한 방식으로 사용자는 이러한 링크가 작업을 수행한다는 것을 알고 있지만 표준 디자인 지침을 위반하지 않고 눈에 띄는 단추로 먼저 주의를 기울입니다.

linklabels로 변환된 세 개의 단추 이미지입니다.

두 번째는 다음 이미지와 같이 가로 레이아웃의 경우 왼쪽에, 세로 레이아웃의 경우 맨 위에 있는 중요 단추를 먼저 줄에 배치하는 것입니다. 이는 대상 사용자의 문화권에 따라 변경 될 수 있습니다. 애플리케이션이 오른쪽에서 왼쪽으로 작성된 언어인 경우 문제의 단추를 맨 오른쪽에 배치하면 더 나은 요금을 부과할 수 있습니다.

가로 레이아웃에서 중요한 단추가 맨 왼쪽에 있는 세 개의 단추 이미지입니다.

권장되는 옵션은 기본적으로 포커스를 받도록 설정하는 것입니다. 예를 들어 삭제 확인 대화 상자 에서는 사용자가 실수로 항목을 삭제하지 못하도록 하기 때문에 No 옵션을 강조 표시해야 합니다.

아이콘으로 인식 간소화

아이콘( 특히 Windows XP 및 Office 2003 아이콘 및 도구 모음 비트맵)은 UI 및 사용자가 수행해야 하는 작업을 빠르게 파악하는 데 도움이 됩니다.

예를 들어 메시지 상자에 가장 자주 표시되는 느낌표 아이콘이 표시되면 해당 아이콘 옆에 있는 컨트롤과 관련된 위험 수준을 즉시 알게 됩니다. 마찬가지로 애플리케이션이 제대로 정렬되어 있어도 많은 컨트롤을 배치하는 경우 원하는 컨트롤 집합을 찾는 것이 어려울 수 있습니다.

Windows XP 서비스 팩 2에서는 "자동 업데이트"라는 시스템 속성 제어판 애플릿에 업데이트된 탭이 추가됩니다. 업데이트를 자동으로 다운로드하고, 업데이트를 다운로드하지만, 설치 시기를 결정하고, 업데이트를 사용할 수 있지만 다운로드를 시작하지 않는 경우 사용자에게 알리고, 자동 업데이트를 완전히 사용하지 않도록 설정하는 네 가지 옵션이 있습니다.

새 PC 사용자는 이러한 업데이트가 무엇인지 알지 못할 수 있으며 어떤 옵션을 선택하는 것이 가장 좋은지 모를 수 있습니다. 따라서 Microsoft는 "안전" 옵션을 나타내는 가장 권장 사항 옆에 큰 확인 표시가 있는 녹색 방패 아이콘과 사용자에게 잠재적으로 해로울 수 있는 아이콘 옆에 큰 "x"가 있는 빨간색 방패 아이콘을 배치했습니다. 이는 중요한 상황에서 특히 사용자가 텍스트를 너무 많이 읽을 시간이 없는 경우에 매우 유용합니다.

동일한 시스템 속성 애플릿에서 각 탭에는 여러 작업에 대해 서로 다른 컨트롤이 있는 여러 GroupBoxe가 있습니다. 컨트롤 그룹의 작업을 쉽게 나타내는 상대 그래픽이 각 그룹 옆에 배치됩니다. 이러한 유형의 그래픽 코드는 실제 파일 또는 주차장의 색 코딩과 유사합니다. 또한 잡지 기사에 시각적 개체가 있는 것과 동일한 원칙에 따라 작동합니다. 이는 독자의 관심을 유지합니다.

오른쪽 아이콘을 선택하는 것도 중요합니다. Microsoft는 Visual Studio 2005의 일부로 많은 표준 그래픽을 제공합니다. 이것이 최선의 선택이 될 것입니다. 고유한 아이콘을 만드는 경우 위의 표준 사용 섹션에서 설명한 대로 이러한 그래픽에 대한 운영 체제 수준 또는 애플리케이션 수준 표준을 따르는 것이 좋습니다.

Windows 사용자 환경 상호 작용 지침에는 Windows 스타일 아이콘을 만드는 데 매우 유용한 가이드가 포함되어 있습니다.

머리글로 인식 간소화

머리글은 전체 대화 상자를 단일 문장(선택적으로 그래픽)으로 설명하는 완벽한 방법입니다. 헤더가 탐색 및 명령을 수용하는 데도 도움이 될 수 있습니다. 헤더는 대화 상자가 표시되면 사용자가 가장 먼저 볼 수 있기 때문에 일반 설명 레이블보다 더 효과적으로 작동합니다.

Windows Installer 마법사는 가장 인기 있는 헤더인 맨 오른쪽의 간단한 아이콘일 수 있습니다. 대화 상자를 설명하는 제목 레이블(예: 설치 폴더 선택) 대화 상자의 용도를 설명하는 하위 제목(예: 소프트웨어 파일이 설치될 폴더 선택).

계정 섹션이 있는 일반적인 업무용 애플리케이션이 있다고 가정해 봅시다. Windows Vista에서 지원되는 디자인 패러다임에 따라 헤더(또는 시나리오에서 요구하는 경우 바닥글)에 중요 업무용 정보 및 관련 명령을 제공할 수 있습니다. 사용자가 "Big Company"에 대한 계정 파일을 열었으며 헤더는 다음 스크린샷에 표시된 것과 같습니다.

자세한 바닥글이 포함된 대화 상자의 스크린샷

다음 스크린샷은 대화 상자의 자세한 머리글 예제를 보여줍니다.

자세한 헤더가 포함된 대화 상자의 스크린샷

마찬가지로, 이러한 명령을 헤더로 이동하여 Windows XP 스타일 작업창을 추가하지 않아도 됩니다. 특히 몇 가지 명령만 있으면 수직 공간을 많이 낭비할 수 있습니다.

헤더를 디자인할 때 유의해야 할 몇 가지 사항이 있습니다.

  • 배경색이 대화 상자 배경색과 다른지 확인합니다. 표준 Windows 내장 컨트롤 얼굴 색에 대한 흰색 헤더는 그렇지 않은 경우가 많습니다. 그러나 특별한 테마나 사용자 지정 색이 머리글을 엉망으로 만들지 않으려면 Color.FromKnownColor와 ControlLight 및 ControlDark 색을 사용하여 LinearGradient를 그립니다.
  • 가능하면 헤더의 높이를 150픽셀 미만으로 유지합니다. 일반적으로 100 또는 120의 높이가 수행됩니다. 일반적으로 전체 폼 높이의 1/4 미만인지 확인합니다.
  • 위의 헤더에 표시된 정보에 대한 현재 위치 편집을 추가하려면 LinkLabel을 텍스트 상자로 동적으로 바꾸고 편집이 완료되면 다시 바꿉니다.
  • 글꼴 크기가 10pt를 넘는 제목 레이블이 있는 경우 Arial 또는 Franklin Gothic Medium을 사용합니다. MS Sans Serif는 너무 들쭉날쭉하고 전문적이지 않은 것처럼 보입니다. Franklin Gothic Medium은 Windows XP 디자인 지침 설명서의 권장 사항입니다. Windows Vista를 대상으로 하는 애플리케이션의 경우 시스템 기본 글꼴인 Segoe UI 글꼴을 사용합니다.

사용자 지정 메시지 상자 사용

표준 Windows 메시지 상자에서 사용할 수 있는 옵션은 매우 제한적입니다. 사용자에게 간단한 예/아니요 또는 확인/취소로 대답할 수 없는 질문을 해야 하는 경우 복잡해집니다.

이제 Windows 애플리케이션은 기술적이지 않은 사용자의 양이 많기 때문에 사용하기가 더 단순해지고 있습니다. 경우에 따라 손쉽게 작업을 수행할 수 있도록 단추에 친숙한 텍스트와 몇 가지 추가 컨트롤(예: LinkLabels)을 제공하는 것이 훨씬 간단할 수 있습니다.

Microsoft .NET Framework를 사용하면 사용자 지정 대화 상자를 쉽게 구현할 수 있습니다. 사용자 지정 대화 상자 폼에 몇 가지 속성을 할당하거나 한 줄의 코드로만 폼이 표준 메시지 상자처럼 작동할 수 있습니다. 단추 클릭 이벤트에서 대화 상자의 DialogResult 속성을 DialogResult.Ok 또는 DialogResult.Cancel로 설정합니다. 부모 양식에서 ShowDialog([OwnerForm]) 메서드를 사용합니다. 이 메서드는 DialogResult 값을 반환합니다.

모든 DialogResult 멤버를 사용할 수 있습니다. 이러한 동일한 옵션은 표준 MessageBox.Show 메서드에서 사용됩니다.

또는 대화 상자의 AcceptButton 속성을 btnOK로 설정하고 CancelButton 속성을 btnCancel로 설정할 수 있습니다. 그러면 Enter 키와 Esc 키가 btnOK 및 btnCancel 단추의 각 Click 이벤트에 자동으로 매핑됩니다.

사용자 지정 대화 상자를 만들기 위한 몇 가지 팁은 다음과 같습니다.

  • 복잡한 항목의 경우 적절한 텍스트 레이블 아래에 "자세히 알아보기"라는 LinkLabel을 사용하여 로컬 또는 온라인 도움말에 대한 링크를 제공합니다.
  • 예취소//함 단추 대신 "파일 저장 및 종료", "저장하지 않고 종료", "종료 안 함"과 같이 단추를 클릭한 결과를 명확하게 나타내는 텍스트를 사용합니다. 그러나 가능하면 표준 예/아니요, /Cancel 및 이러한 표준 단추를 계속 사용합니다. 친숙함은 생산성을 향상합니다.
  • 왼쪽(또는 대상 문화권 설정에 따라 오른쪽)에 50픽셀 상당의 여백 공간을 유지하고 대화 상자의 시나리오를 나타내는 아이콘을 추가합니다. 정보 대화 상자인 경우 표준 메시지 상자에서 사용하는 "i" 아이콘을 사용할 수 있습니다. 보안 대화 상자인 경우 잠금 아이콘 또는 키 아이콘을 사용할 수 있습니다. Visual Studio 2005는 훌륭한 고품질 그래픽과 함께 제공됩니다.
  • 항상 이러한 단추에 적절한 키보드 탐색을 제공해야 합니다. 사용자는 메시지 상자의 바로 가기 키(예: Ok의 경우 O, 예의 경우 Y, 취소의 경우 C 등)를 많이 사용합니다. 사용자 지정 대화 상자에서 사용하지 않으면 확실히 성가신 것을 발견할 것입니다.

대체 명령 포함

두 가지 중요한 요인은 대체 입력 방법(좌절 및 지연)의 필요성을 결정합니다. 좌절은 컴퓨터 사용자에게 너무 자주 발생하는 일입니다. 좌절하면 작업을 신속하게 수행하려고 합니다. 추가 클릭 또는 몇 초의 추가 대기는 정말 스트레스를 받고 사람을 격노 - 당신은 그것이 어떻게 알고, 우리 모두가 거기에 있었다. 지연은 현재 사용 중인 키보드 또는 마우스로 작업을 완료해야 하는 경우가 많습니다. 그러나 이러한 두 가지 요인 이외에 대체 입력 방법을 사용하면 사용자가 작업을 쉽게 수행할 수 있습니다.

예를 들어 양쪽에 "추가" 및 "제거"라는 두 개의 단추가 있는 목록 상자가 있는 경우 해당 단추와 유사한 메뉴 명령이 있는 해당 목록 상자의 상황에 맞는 메뉴를 추가해야 합니다. 이렇게 하면 사용자가 가장 적합한 방법을 선택할 수 있습니다. 초보 사용자는 Windows Vista 사용자 환경 지침 상태인 상황에 맞는 메뉴를 많이 사용하고 마우스 오른쪽 단추로 클릭할 수 있는 위치에 있을 것으로 예상합니다.

마찬가지로 텍스트 또는 숫자 입력에 시각적 컨트롤을 사용합니다. 예를 들어 슬라이더는 정수를 지정하는 데 사용되고 달력 컨트롤은 날짜 입력에 사용됩니다. 경우에 따라 입력하여 입력하는 것이 더 편안할 수 있습니다. 슬라이더에 연결된 숫자 업다운 컨트롤을 추가하거나 일정 컨트롤 대신 DateTimePicker를 사용하는 경우 사용자에게 큰 차이를 만들 수 있습니다.

중요한 작업을 처리하는 방법

복구할 수 없는 중요한 함수를 수행하는 경우 일반적으로 메시지 상자를 팝업하여 작업을 확인하는 것이 좋습니다. 한 단계 더 올라가보겠습니다. 다음 스크린샷에서는 비슷한 사용자 지정 메시지 상자를 볼 수 있지만 추가된 이점(진행률 표시줄의 도움으로 시각적으로 표시되는 타이머)을 볼 수 있습니다.

중요한 작업 대화 상자의 스크린샷

사용할 수 있는 몇 가지 시나리오별 변형이 있습니다. 수행할 작업이 매우 중요한 경우(원자력 발전소 오버로드에서 파일 영구적으로 삭제에 이르기까지) 타이머가 실행된 후의 기본 작업은 취소해야 합니다. 대화 상자는 사라지지 않고 텍스트 레이블이 변경되어 작업이 취소되었음을 표시합니다. 사용자는 명령 또는 취소를 확인하도록 선택할 수 있습니다.

항상 중요한 작업을 수행하는 단추가 명확하게 표시되어 있는지 확인합니다. 항상 작업을 정확하게 설명하는 명확한 텍스트를 사용합니다. 작업이 파일 삭제인 경우 "리포지토리에서 파일 제거"를 작성하지 마세요. "리포지토리에서 파일 삭제"를 작성합니다. 파일 목록으로 작업할 때 삭제 메뉴 명령이 파일 목록에서만 제거되는 것이 아니라 하드 디스크 자체에서 선택한 파일을 삭제하는 경우 이 문제의 중요한 특성을 제대로 강조해야 하며 작업이 파일을 영구적으로 삭제한다는 점을 명시적으로 강조해야 합니다.

누군가가 한 번 말했다, "당신은 당신의 최악의 일만큼 좋다." 소프트웨어 애플리케이션도 마찬가지입니다. 앱에 대한 단일 잘못된 환경은 사용자에게 큰 부정적인 인상을 미칠 수 있습니다. 이러한 일이 발생하지 않도록 하기 위해 수행할 수 있는 한 가지 작업은 애플리케이션이 충돌하는 경우 정상적으로 다운되는지 확인하는 것입니다. 데이터 복구를 추가하거나 사용자가 해당 데이터의 복사본을 저장하도록 허용할 수 있는 경우 더 큰 장점이 될 수 있습니다. 애플리케이션에 오류가 발생할 경우 사용자에게 적절히 알려야 합니다. JIT-디버거 또는 중요한 오류 대화 상자는 좋지 않습니다. 충돌을 처리하는 방법에 대해 이야기하는 것은 이 문서의 범위를 벗어나는 반면, 사용자에게 사과하고 상황을 알려주는 간단한 대화 상자(그리고 이 충돌에서 복구하는 방법에 대한 자세한 정보 링크가 있을 수 있음)가 사용자에게 매우 도움이 될 것을 권장합니다.

한 단계 더 나아가고 싶다면, 제가 가장 좋아하는 그래픽 디자인 애플리케이션 중 하나가 하는 일을 할 수 있습니다. 충돌하는 경우 작업 중인 파일의 별도 복사본을 저장할 수 있는 복구 대화 상자가 표시되며, 충돌(물론 개인 정보 선택 사항)에 대한 정보를 입력하고 작성자에게 보낼 수 있는 피드백 대화 상자를 제공합니다.

RadioButtons 또는 ComboBoxes?

언뜻 보기에 일대다 선택을 하는 방법은 그렇게 어렵거나 중요하지 않은 것처럼 보입니다. 경우에 따라 시나리오가 시간에 민감한 작업에 사용되는 애플리케이션인 경우가 있습니다.

실제 예제를 살펴보겠습니다. Microsoft는 최근 그래픽 애플리케이션인 Expression Graphics Designer(예전 코드명은 "Acrylic")의 시험판 버전을 출시했습니다. 저는 이 애플리케이션에서 그래픽 개체 약 20개에 특정 속성을 각각 할당해야 했습니다. 그것은 끔찍한 과정이었습니다. 이렇게 하려면 개체를 선택하고 설정 창을 표시하기 위한 단추를 클릭한 다음 옵션을 설정해야 했습니다. 다음 스크린샷에서 볼 수 있듯이 이러한 옵션 중 하나에서 두 가지 선택 항목을 ComboBox에서 선택해야 했습니다.

식 그래픽 디자이너에 대한 프린지 텍스처 대화 상자의 스크린샷

ComboBox 목록을 드롭다운하고 두 번째 항목(항목 2개 중 하나)을 선택해야 하는 경우 정말 자극적일 수 있습니다. 일반적으로 인식하지 못하는 것은 드롭다운 목록이 표시되는 데 걸리는 시간입니다. 그것은 당신의 시간을 많이 낭비 할 수 있으며 실망 할 수 있습니다. 특히 사용 가능한 공간이 너무 많은 경우 두 개의 RadioButton이 있는 GroupBox에 배치하여 이 문제를 쉽게 해결할 수 있습니다. CorelDRAW, Microsoft Access 등과 같은 애플리케이션에서 비슷한 문제가 발생했습니다.

드롭다운 애니메이션으로 인해 시간을 낭비하는 것 외에도 "정신 대역폭"을 낭비합니다. 두 개의 "항상 볼 수 있는" RadioButtons를 사용하면 커서를 클릭할 위치를 숭고하게 알 수 있습니다. ComboBox를 사용하면 목록을 그린 후에만 처리됩니다. 너무 중요하지 않은 것처럼 보일 수 있지만 실제로는 매우 중요합니다.

특히 선택 항목이 4개 이하인 경우 RadioButtons를 사용하는 것이 더 좋은 경우도 있습니다.

사용자를 방해하지 마세요!

그들의 머리에 총을 넣어 부족, 이것은 개발자가 사용자에 게 할 수 있는 가장 파괴적인 일. 여러분의 애플리케이션이 다른 애플리케이션을 사용하고 있을 때 메시지 상자를 띄우거나 작업 표시줄을 깜빡이게 해서 불필요하게 방해가 될 경우 그 사용자로부터는 감점을 받게 됩니다.

물론 작업 표시줄의 깜빡임은 유용할 수 있으나 애플리케이션의 프로세스를 원활하게 계속하기 위해서는 사용자의 입력이 필요한 경우나 사용자에게 전달할 중요한 내용이 있는 경우에만 사용해야 합니다. 사용자가 작업 표시줄을 자동 숨기기에 유지한 경우 깜박이는 작업 표시줄 단추는 작업 표시줄이 맨 위에 있고 사용자가 깜박이는 단추를 클릭할 때까지 다시 숨기지 않으므로 사용자가 상태 표시줄 또는 기타 낮은 고정 컨트롤에 액세스하지 못하게 할 수 있습니다.

알림 창의 스크린샷

MSN Messenger와 같은 인스턴트 메시징 클라이언트가 유명하게 만든 "알림" 창(그림 10 참조)은 사용자에게 업무 흐름을 방해하거나 방해하지 않고 무언가를 알리기 위한 훌륭한 솔루션입니다. 알림 창을 만드는 빌 바그너에 의해 좋은 기사가있다. 다른 애플리케이션의 알림을 방해하지 않는 것이 좋은 정책(및 매너)입니다. 이러한 창의 방해는 성가시고 비생산적일 수 있습니다. 한 가지 해결 방법은 알림 충돌을 방지하기 위해 운영 체제에서 제공하는 ToastSemaphore Mutex를 사용하는 것입니다.

경우에 따라 알림으로 여러 항목을 표시해야 할 수 있습니다. 3 개 이상의 토스트를 팝업하는 것은 정말 바람직하지 않을 것입니다. 대신, 한 토스트를 터지거나 페이드하여 각각을 순환하는 것이 더 좋을 것입니다. Microsoft Outlook은 사용자에게 들어오는 전자 메일을 알릴 때 유사한 솔루션을 구현합니다.

진행 상태 제공

사용자가 기다려야 하는 작업이 있는 경우가 많습니다. 물론, 이것은 사용자가 단순히 싫어 하는 것 들 중 하나입니다. 그러나 더 나쁜 것은 그들이 무슨 일이 일어나고 있는지 알지 못하고 기다리고있는 때입니다. 경우에 따라 애플리케이션이 웹 서비스 또는 원격 컴퓨터에 연결해야 하거나 큰 데이터 청크를 처리하고 있을 수 있습니다. 어떤 이유로든 사용자가 내부적으로 어떤 일이 일어나고 있는지 알고 있거나 최소한 모호하게 인식해야 합니다. 상황에 따라 이 작업을 수행하는 방법에는 여러 가지가 있습니다.

웹 서비스 또는 네트워크 또는 인터넷 서버에 배치된 것과 같이 멀리 떨어진 개체에 연결하는 경우 간단한 진행률 대화 상자(다음 이미지 참조) 또는 상태 표시줄에 호스트된 진행률 표시줄을 표시하는 것이 좋습니다. 함께 제공되는 레이블은 프로세스의 현재 상태를 설명해야 합니다. 예를 들어 일부 데이터를 처리하기 위해 웹 서비스에 연결하는 경우 "웹 서비스에 연결... " 또는 "기다려주세요, 처리 중... "이 프로세스가 동기적이면 프로세스가 완료될 때까지 사용자가 액세스할 수 있는 모든 컨트롤을 사용하지 않도록 설정하거나 진행률을 모달 대화 상자로 표시하는 것이 좋습니다.

진행률 표시줄 대화 상자의 스크린샷

진행률 표시줄을 사용하고 처리 시간을 알 수 없거나 최대값이 없는 경우 진행률 표시줄 스타일을 선택키 모드로 설정하는 것이 좋습니다.

인기를 끌고 있는 또 다른 방법은 진행률을 표시하는 고정된 '알림' 창입니다. Microsoft AntiSpyware 다운로더/업데이트 프로그램 또는 Norton 바이러스 백신 전자 메일 검사 알림이 좋은 예입니다. 물론 비동기 프로세스에만 사용해야 합니다. 그렇지 않으면 사용자가 당황할 수 있습니다. 이러한 창은 업데이트 다운로드 또는 예약된 작업 수행과 같은 백그라운드 처리에 가장 적합하며 "항상 위쪽"으로 설정해서는 안 됩니다.

마법사를 사용하여 복잡한 단계 간소화

단일 폼에서 수많은 컨트롤에 직면하면 일반적인 사용자가 끝없이 혼동된다고 가정해도 안전합니다. 경우에 따라 많은 중요한 컨트롤이 있는 경우 그룹화, 크기 조정 또는 간격이 부족할 수 있습니다.

마법사는 이러한 시나리오에 가장 적합합니다. 적용 가능한 경우 작업 또는 범주별로 컨트롤을 나누고 별도의 단계에 배치할 수 있습니다. 이렇게 하면 사용자가 포커스를 유지하고 작업에 의해 위협받지 않도록 할 수 있습니다. 도움말 단추를 사용하여 단계별 또는 작업별 도움말을 제공할 수 있습니다. 자세한 내용은 마법사를 참조 하세요.

마법사는 애플리케이션의 초기 구성을 설정하는 데 도움이 되는 좋은 방법이기도 합니다. 대부분의 애플리케이션은 설치가 완료된 직후 또는 처음 사용할 때 이러한 마법사를 사용하여 개인 설정된 구성을 설정합니다. 이러한 초기 마법사는 가능하면 선택적으로 설정해야 합니다. 사용자가 언제든지 취소하면 지정되지 않은 설정이 기본값으로 이동합니다. 마법사를 그래픽으로 만들 수 있는 경우(예쁜 그래픽 사용 섹션 참조) 구성 작업을 훨씬 쉽게 수행할 수 있습니다.

텍스트의 톤을 바로 잡습니다.

Windows 사용자 환경 상호 작용 지침에서는 "텍스트 톤"에 대해 매우 중요한 점이 있습니다. 텍스트 어조란 애플리케이션에서 텍스트가 주는 인상 및 느낌을 말하며, 간단한 도구 설명에서 명령 레이블 컨트롤에 이르기까지 무엇이든 가능합니다.

앞서 MSN Messenger의 웹캠 옵션에서 텍스트 변경에 대해 설명했습니다. 이를 적절한 텍스트 톤이라고합니다. 비기술 또는 초보 사용자를 처리할 때 메시지를 가져오는 것은 다른 측면을 취합니다.

자체 추출 애플리케이션의 텍스트 상자 위에 "대상 경로"를 작성하는 경우 기술 사용자는 "C:\Temp\MyPath"와 같은 항목을 입력한다는 것을 쉽게 알 수 있습니다. 초보 사용자("엄마"라고 생각)는 쉽게 당황할 수 있으며 수동을 참조하거나 기술 지원을 요청하거나 더 나쁜 것을 포기해야 합니다. 좋은 대안은 사용자가 수행할 작업을 지정하는 것입니다. "이러한 파일을 배치할 폴더를 선택하십시오." "찾아보기... " 단추가 해당 텍스트 상자 옆에 있는 "폴더 선택... "

사용자가 수행할 작업에 대한 명확한 설명을 제공하면 도움말 파일의 필요성이 줄어들거나 도움말 파일에 포함해야 하는 세부 정보가 줄어듭니다.

Windows 사용자 환경 상호 작용 지침의 아주 좋은 제안은 모든 소프트웨어에 적용됩니다. 기록기는 텍스트를 대화형으로 유지해야 한다고 명시합니다. 지침은 이를 "다른 사람에게 직접 말하지 않는 단어를 피하십시오"로 정의합니다.

텍스트를 작성하기 위한 몇 가지 팁:

  • 세 번째 사용자의 사용자에 대해 이야기하지 않습니다. "사용자" 대신 "You"라고 말합니다.
  • 가능하면 "이름:" 또는 "전자 메일:" 대신 "내 이름:" 또는 "내 전자 메일 주소:"를 신중하게 사용합니다.
  • 여러 옵션을 제공하는 경우 사용자의 관점에서 텍스트를 작성합니다. 예를 들어 두 개의 RadioButton(예: "허용" 및 "거부") 위에 "이 네트워크에서 [사용자 이름]에 대한 사용 권한 선택"과 같은 레이블 아래에 두 개의 RadioButton이 있는 경우 RadioButton 텍스트를 "[Username]을 허용하려고 합니다." 및 "[Username]을 허용하지 않습니다."로 바꿉니다.
  • 링크에 사용되는 경우에만 텍스트에 밑줄을 긋습니다. 밑줄이 그은 텍스트가 링크가 아닌 경우 사용자를 혼동합니다.
  • 굵은 레이블을 사용하여 중요한 정보에 주의를 기울이지만 신중하게 사용합니다. 굵게 표시된 텍스트가 너무 많을수록 혼동을 일으키며 양식의 전반적인 영향을 줄일 수 있습니다.
  • 확인란에 대한 텍스트를 작성할 때 선택 및 선택 취소 또는 선택을 취소할 때 어떤 일이 발생할지 쉽게 알 수 있는지 확인합니다. 권장되는 옵션은 선택한 확인란의 결과로 텍스트를 직접 작성하는 것입니다. 예를 들어 "파트너에게 유용한 정보를 보내지 마세요" 대신 "파트너로부터 유용한 정보 보내기"를 작성합니다. 나는이 특정 예에 대해 논쟁 많은 마케팅 사람들을 상상할 수 있지만, 난 당신이 내가 무슨 뜻인지 알고 확신합니다.
  • 사용/사용 안 함으로 제어하는 단추와 유사한 컨트롤(일반적으로 명령 단추 모양이 있는 RadioButton)이 있는 경우 올바르게 레이블을 지정해야 합니다. 프로세스를 사용하는 경우 "사용" 또는 "사용 안 함" 대신 "Enabled"를 씁니다. Enabled를 작성하면 현재 상태가 표시됩니다. 단추를 클릭(사용)하고 단추에 "사용"이 표시되면 혼란스럽고 문제가 될 수 있습니다. "사용"은 프로세스가 활성 상태가 아니라고 생각하여 클릭하라는 메시지를 표시할 수 있습니다.

ListView가 더 나은 경우도 있습니다.

선택 작업을 위해 DataGrid 또는 ListBox 또는 ComboBox를 사용하는 경우가 많지만 Windows XP 이상 버전의 Windows에서는 ListView를 사용하면 더 큰 옵션을 제공할 수 있습니다.

ListView 컨트롤의 미세한 점:

  • 아이콘 및 비트맵을 사용하여 항목 인식 속도를 향상합니다.
  • 세부 정보 또는 타일 보기를 사용하여 추가 정보를 표시합니다.
  • Visual Studio 2005를 사용하면 추가 분류를 위한 그룹을 가질 수도 있습니다. 그룹은 모든 보기에 걸쳐 있으며 유연합니다. 그룹을 사용하여 부모 노드보다 자식 노드가 더 많은 계층 뷰(예: TreeView)를 평면화할 수도 있습니다. 이 예제의 좋은 예는 Windows XP의 네트워크 연결 대화 상자입니다. "그룹에 표시"와 함께 보기가 세부 정보로 설정된 경우입니다.
  • ListView 컨트롤을 사용자 지정하려면 OwnerDraw 속성을 설정하고 DrawItem 및 DrawSubItem 이벤트를 사용하여 수동으로 그립니다.
  • ListView 항목의 빠른 현재 위치 편집을 지원합니다.
  • 수동 순서를 쉽게 다시 정렬할 수 있습니다.
  • 사용자가 가장 편한 보기(큰 아이콘, 작은 아이콘, 목록 등)를 선택할 수 있습니다.

이동 경로 컨트롤 및 사이드바를 사용하여 탐색 간소화

"하위 탐색"은 복잡한 UI의 핵심입니다. 복잡한 UI를 사용하여 이스케이프할 수 없는 경우가 있습니다. 이러한 상황에서 가장 좋은 방법은 사용자가 환경을 가능한 한 쉽게 만드는 것입니다. 링크 레이블로 구성된 사이드바 또는 계층 구조 기반 탐색을 위한 TreeView는 현재 대화 상자의 작업에 대한 형제 수준 탐색을 제안합니다. 사용자가 자신이 어디에 있는지 알면서 프로세스 단계 사이를 매우 쉽게 이동할 수 있습니다.

TreeViews 또는 기타 유사하게 복잡한 탐색을 사용하여 계층 구조 기반 탐색을 진행하는 경우 사용자에게 유용한 유틸리티는 이동 경로 제어입니다. Visual Studio는 아직 이에 대한 기본 제공 컨트롤을 제공하지 않지만 직접 만드는 방법에 대한 자세한 내용은 이동 경로 탐색 컨트롤 만들기를 참조하세요. 이동 경로 컨트롤을 사용하면 계층 구조와 관련하여 현재 위치를 쉽게 찾을 수 있습니다.

폼에 이동 경로 탐색이 있는 경우 머리글에 쉽게 병합할 수 있습니다. 헤더에 대한 이전 섹션을 참조하세요.

예쁜 그래픽 사용

모두가 멋진 그래픽을 사용하는 애플리케이션을 좋아합니다. 대부분은 적어도 그렇습니다. 그래픽이 예쁜 UI는 모든 애플리케이션에 대한 논리적인 선택은 아니지만 좋은 인상을 주는 데 도움이 되며 작업하는 데 도움이 될 수 있습니다. 물론 그래픽이 생산성을 저해해서는 안 되지만 올바르게 사용하면 그래픽을 늘릴 수 있습니다.

그래픽이 많지 않아도 되며 반드시 많은 작업이 필요하지도 않습니다. 전문적으로 디자인 된 시작 화면이나 헤더 (우리가 이전에 이야기 한 것과 같이)는 트릭을합니다. 예산이 허용되면 도구 모음, 마법사 등에 멋지게 디자인된 그래픽을 사용할 수 있습니다. 앱이 예쁘고 더 전문적으로 보이게 합니다. 미묘한 효과이지만 전문적인 모습은 자신감과 안정성을 전달합니다. 소매 애플리케이션을 만드는 비교적 작은 회사인 경우 고려해야 할 주요 측면입니다.

항상 전문적으로 디자인된 그래픽을 사용해야 합니다. 로열티 프리 그래픽은 쉽게 사용할 수 있고 저렴합니다. 디자이너를 고용할 수도 있습니다. 그러나 그래픽이 당신의 포르테가 아니라면 직접 시도하지 마십시오. 전문적으로 디자인된 그래픽을 획득하거나 사용할 수 없는 경우 그래픽을 전혀 사용하지 않는 것이 좋습니다.

작은 그래픽의 경우 Visual Studio 2005와 함께 제공되는 아이콘과 비트맵을 항상 사용할 수 있습니다. (이전 버전과 함께 제공된 그래픽은 권장되지 않습니다.)

가능한 경우 크기 조정 가능한 양식 제공

크기 조정 가능한 창은 해상도 독립적 창과 비슷합니다. 해상도 독립적 창은 96DPI 또는 300DPI 화면을 사용하든 동일하게 표시됩니다. 애플리케이션 UI의 해상도 여부와는 관계없이 크기를 조정할 수 있으면 좋습니다. 물론 많은 시나리오에는 적용되지 않지만 좋은 범용 규칙입니다.

창에서 모든 종류의 목록( 특히 ListViews)을 처리하는 경우 더욱 중요해집니다. 크기를 조정하면 사용자가 동시에 더 많은 데이터를 볼 수 있습니다.

예를 들어 크기가 큰 컬렉션에서 이미지를 선택해야 하는 애플리케이션이 있다고 가정해 봅시다. 열려 있는 대화 상자에서는 썸네일 보기를 선택할 수 있지만 대화 상자의 크기는 고정되어 있으며 썸네일 목록에는 한 번에 4개의 축소판 그림만 표시됩니다. 컬렉션에 100개의 이미지가 있는 경우 스크롤 및 찾는 작업(반복 작업)은 매우 피곤하고 효율성이 저하될 수 있습니다. 대화 상자의 크기가 조정 가능한 경우 사용자는 화면이 허용하는 만큼 편안하거나 최소한 크게 만들 수 있으며 작업을 신속하게 완료할 수 있습니다. 목록에 자세한 ListView 또는 DataGrid와 같은 가로 스크롤이 있는 경우 훨씬 더 피곤합니다. 크기 조정 가능한 창은 이러한 상황에서 매우 유용합니다.

사이드바/작업창을 사용하여 추가 기능 제공

앞에서 설명한 헤더와 마찬가지로 사이드바 및 작업창은 추가 기능 및 유틸리티 명령을 제공하는 훌륭한 방법입니다. 예를 들어 Office Word 2003의 작업창은 매우 편리하고 액세스 가능하며 방해가되지 않습니다. 또한 온라인 리소스에 연결할 때 비동기적으로 작동하여 사용자에게 다중 작업 옵션을 제공합니다.

작업창 또는 사이드바를 만드는 것은 도킹 패널을 만드는 것만큼 쉽으며, 제목 표시줄 역할을 하려면 매끄러운 그래픽을 맨 위에 배치할 수 있습니다. 색이 지정된 레이블 컨트롤을 사용할 수도 있습니다. 작업창에 대한 기회는 많습니다!

추가 기능이 있고 사용자에게 비입관적으로 제공하려는 경우 작업창과 같은 위치가 없습니다. 작업창을 "자동 숨기기"로 만들거나 Visual Studio 도구 창처럼 축소할 수도 있습니다.

알림 선택 사항 제공

이전에는 사용자 지정 메시지 상자를 만드는 방법을 알아보았습니다. 애플리케이션의 메시지 상자가 사용자에게 종종 표시될 경우 앞으로 이 대화 상자가 표시되지 않도록 즉, 비활성화하도록 선택할 수 있는 확인란을 추가하면 세심한 배려가 될 수 있습니다. 이러한 옵션은 더 명확한 메시지에 특히 적합합니다.

이 예제의 익숙한 예는 Visual Studio 찾기 대화 상자입니다. 텍스트를 검색하거나 바꿀 때 Visual Studio는 결과를 나타내는 메시지 상자를 표시합니다. 그러나 해당 메시지 상자를 사용하지 않도록 설정하는 옵션도 제공됩니다. 검색할 때마다 Enter 키를 누르거나 확인을 클릭해야 하는 경우 정말 짜증이 날 수 있습니다.

Visual Studio에서 수행하는 또 다른 멋진 일은 대화 상자가 비활성화된 경우에도 상태 표시줄에 해당 작업의 결과를 계속 표시한다는 것입니다.

도구 설명 제공!

때로는 도구 설명으로 많은 시간을 절약할 수 있습니다. 단추, 확인란 및 기타 컨트롤은 모호할 수 있으며 사용자가 수행할 작업을 잘 모르겠습니다. 도구 설명은 한 줄에만 가장 적합한 형태의 상황에 맞는 도움말을 제공합니다. 사용자는 도움말 파일에서 아무것도 검색하거나 다른 창을 열지 않고도 수행할 작업을 신속하게 결정할 수 있습니다.

사람들은 종종 애플리케이션에서 이를 건너뜁니다. 모든 모호한 컨트롤 또는 가능한 경우 ALL 컨트롤에 도구 설명을 추가합니다. 함께 제공되는 레이블 또는 해당 컨트롤의 자체 텍스트 텍스트를 반복하지 말고 해당 컨트롤에 대한 추가 정보를 제공합니다. 텍스트는 단 몇 단어로 컨트롤의 기능을 설명해야 합니다.

작은 것들을 잊지 마세요

작은 것들은 당신을 성가시게 할 수 있지만, 무시하면 당신이 만드는 인상에 영향을 미칠 수 있습니다. 저는 예전에 소프트웨어 업계의 저명한 개발자가 만든 애플리케이션을 사용한 적이 있었습니다. 폼의 테두리 스타일은 조정 가능하도록 설정되어 있었으나 폼 오른쪽의 컨트롤은 고정되어 있지 않았습니다. 이 때문에 업계에서 명성이 있는 개발자가 만든 애플리케이션이었음에도 그다지 전문적인 프로그램이라는 느낌을 받지 못했습니다.

이러한 종류의 "작은 것들"은 전반적인 인상의 핵심입니다. 애플리케이션의 UI 및 UX는 적어도 처음에는 사용자가 애플리케이션을 판단하는 것입니다. UI에서 명백한 버그를 발견할 경우 여러분의 애플리케이션의 기능이나 효율성이 떨어진다고 생각할 수 있습니다.

결론

우리는 단지 작은 부분의 인간의 사용자 환경에 감동했다. 사용자 환경이 더 간단하고 효과적이며 재미있고 사용자에게 친숙해짐에 따라 해당 사용자 환경을 만드는 작업은 훨씬 더 복잡해집니다. 그러나 몇 가지 선견지명과 좋은 계획을 통해 훌륭한 사용자 환경을 만들 수 있습니다.

완벽한 사용자 환경을 만드는 가장 좋은 방법은 특별한 테스트 그룹을 사용하든 직접 UI를 대상으로 하는 유용성 테스트를 수행하는 것입니다. 애플리케이션을 출시하기 전에 사용자 환경을 테스트하는 데 더 많은 시간을 들이면 들일수록 좋습니다. 나중에 많은 문제를 줄일 수 있습니다.

  • Last updated on