GUI 디자인을 위한 모범 사례 및 원칙 [닫기]

StackOverflow https://stackoverflow.com/questions/90813

  •  01-07-2019
  •  | 
  •  

문제

가장 실용적이고 사용자 친화적인 사용자 인터페이스 디자인이나 원칙은 무엇입니까?

실제로 정말 유용하다고 생각되는 사례를 제출해 주세요. 무슨 일이 있어도 사용자에게 효과가 있다면 공유해 주세요.

요약/조합

원칙

  1. 키스.
  2. 옵션을 통해 얻을 수 있는 결과를 명확하고 구체적으로 설명하세요.예를 들어, 선택에 따른 동작을 나타내는 동사를 사용합니다(참조:구현1).
  3. 사용자가 달성해야 하거나 원하는 것에 적합한 명확한 기본 작업을 사용하세요.
  4. UI의 모양과 동작을 환경/프로세스/대상에 맞추세요.독립 실행형 응용 프로그램, 웹 페이지, 휴대용, 과학 분석, 플래시 게임, 전문가/어린이, ...
  5. 새로운 사용자의 학습 곡선을 줄입니다.
  6. 옵션을 비활성화하거나 숨기는 대신 사용자에게 대안이 있을 수 있지만 그러한 대안이 있는 경우에만 유용한 메시지를 제공하는 것이 좋습니다.사용할 수 있는 대안이 없으면 옵션을 비활성화하는 것이 더 좋습니다. 그러면 해당 옵션을 사용할 수 없다는 것이 시각적으로 나타납니다. 사용할 수 없는 옵션을 숨기지 말고 마우스 오버 팝업을 통해 비활성화된 이유를 설명하십시오.
  7. 널리 사용되는 성공적인 애플리케이션에서 구현되는 것처럼 일관성을 유지하고 관행과 제어 배치를 준수하십시오.
  8. 사용자의 기대를 이끌고 프로그램이 그러한 기대에 따라 작동하도록 하십시오.
  9. 사용자의 어휘와 지식을 고수하고 프로그래머/구현 용어를 사용하지 마십시오.
  10. 기본 디자인 원칙을 따르십시오.대비(명백함), 반복(일관성), 정렬(외관) 및 근접성(그룹화)입니다.

구현

  1. (paiNie의 답변 참조) "대화 상자에 동사를 사용해 보세요."
  2. 실행 취소 및 다시 실행을 허용/구현합니다.

참고자료

  1. Windows Vista 사용자 환경 지침 [http://msdn.microsoft.com/en-us/library/aa511258.aspx]
  2. 네덜란드 웹사이트 - "Drempelvrij" 지침 [http://www.drempelvrij.nl/richtlijnen]
  3. 웹 콘텐츠 접근성 지침(WCAG 1.0) [http://www.w3.org/TR/WCAG10/]
  4. 일관성 [http://www.amazon.com/Design-Everyday-Things-Donald-Norman/dp/0385267746]
  5. 생각하게 만들지 마세요 [http://www.amazon.com/Dont-Make-Me-Think-Usability/dp/0321344758/ref=pdbbssr_1?ie=UTF8&s=books&qid=1221726383&sr=8-1]
  6. 강력하고 단순하게 [http://msdn.microsoft.com/en-us/library/aa511332.aspx]
  7. 게슈탈트 디자인 법칙 [http://www.squidoo.com/gestaltlaws]
도움이 되었습니까?

해결책

대화 상자에 동사를 사용해 보세요.

사용한다는 뜻이다

alt text

대신에

alt text

다른 팁

저는 할머니를 대상으로 GUI를 테스트합니다.

기본 디자인 원칙을 따르세요

  • 씨ontrast - 다른 것을 만들어 보세요 바라보다 다른
  • 아르 자형epetition - 한 화면과 다른 화면에서 동일한 스타일을 반복합니다.
  • ㅏlignment - 라인스크린 요소 UP!예, 여기에는 텍스트, 이미지, 컨트롤 및 라벨이 포함됩니다.
  • 피근접성 - 관련 요소를 함께 그룹화합니다.주소를 입력하기 위한 입력 필드 세트는 함께 그룹화되어야 하며 신용카드 정보를 입력하기 위한 입력 필드 그룹과 구별되어야 합니다.이것은 기본이다 게슈탈트 디자인 법칙.

절대 "확실합니까?"라고 물어보세요.무제한적이고 안정적인 실행 취소/다시 실행을 허용하세요.

요구사항이 아닌 사용자가 달성하고자 하는 것이 무엇인지 생각해 보세요.

사용자는 시스템에 들어가서 목표를 달성하기 위해 이를 사용합니다.계산을 열면 90%의 시간 동안 간단하고 빠른 계산을 수행해야 하므로 기본적으로 단순 모드로 설정되어 있습니다.

그러므로 응용 프로그램이 무엇을 해야 하는지 생각하지 말고 그것을 할 사용자에 대해 생각하고 아마도 지루할 수도 있으며 그의 의도가 무엇인지에 따라 디자인하고 그의 삶을 더 쉽게 만들려고 노력하십시오.

웹이나 그 문제에 대한 전면적인 소프트웨어 응용 프로그램을 위해 무엇이든 하고 있다면 반드시 읽어야 할 의무가 있습니다.

생각하게 만들지 마세요 - 스티브 크루그

웹앱의 탐색경로:
말해 -> 그 사람 -> 사용자 -> 어디 -> 그 사람 -> 시스템에 있음

동일한 데이터에 대한 여러 경로가 있는 "동적" 시스템에서는 이 작업을 수행하기가 매우 어렵지만 시스템을 탐색하는 데 도움이 되는 경우가 많습니다.

나는 환경에 적응하려고 노력한다.

Windows 응용 프로그램을 개발할 때 다음을 사용합니다. Windows Vista 사용자 환경 지침 하지만 저는 웹 애플리케이션을 개발할 때 적절한 지침을 사용합니다. 왜냐하면 저는 네덜란드 웹사이트를 개발하기 때문에 "Drempelvrij" 지침 이는 웹 콘텐츠 접근성 지침(WCAG 1.0) 월드와이드웹 컨소시엄(W3C)에 의해.

내가 이렇게 하는 이유는 새로운 사용자의 학습 곡선을 줄이기 위해서입니다.

이 책을 읽으면서 GUI 디자인에 대한 확실한 이해를 얻는 것이 좋습니다. 일상 사물의 디자인.주요 인쇄 가능 항목은 다음의 주석이지만 조엘 스폴스키:애플리케이션의 동작이 사용자가 기대하는 것과 다른 경우 그래픽 사용자 인터페이스에 문제가 있는 것입니다.

가장 좋은 예는 누군가가 주위를 바꿀 때입니다. 좋아요 그리고 취소 일부 웹사이트에서는 버튼을 클릭하세요.사용자는 다음을 기대합니다. 좋아요 버튼이 왼쪽에 있고 취소 버튼이 오른쪽에 있습니다.즉, 애플리케이션 동작이 사용자가 기대하는 것과 다르면 사용자 인터페이스 디자인 문제가 발생하는 것입니다.

그러나 어떤 디자인이나 디자인 패턴을 따르든 가장 좋은 조언은 애플리케이션 전체에서 디자인과 규칙을 일관되게 유지하는 것입니다.

가능하다면 사용자에게 선택을 요구하지 마세요(예:구성 대화 상자를 사용하여 포크를 만들지 마십시오!)

모든 옵션과 모든 메시지 상자에 대해 스스로에게 물어보세요.대신에 합리적인 기본 동작을 생각해 낼 수 있을까요?

  • 말이된다?
  • 사용자에게 방해가 되지 않나요?
  • 내가 이것을 사용자에게 부과하는 것이 사용자에게 거의 비용이 들지 않는다는 것을 알 수 있을 만큼 쉽습니다.

내 Palm 핸드헬드를 예로 들어보겠습니다.설정이 정말 미니멀해서 아주 만족스럽습니다.기본 애플리케이션은 조정할 필요 없이 간단히 사용할 수 있을 정도로 잘 설계되었습니다.좋아, 내가 할 수 없는 일이 있고 사실 나는 도구에 적응해야 했지만(그 반대가 아니라) 결국 이것은 내 삶을 정말 더 쉽게 만들어줍니다.

이 웹사이트는 또 다른 예입니다:아무것도 구성할 수 없지만 사용하기가 정말 좋습니다.

합리적인 기본값은 파악하기 어려울 수 있으며 간단한 사용성 테스트는 이를 해결하는 데 도움이 되는 많은 단서를 제공할 수 있습니다.

사용자 샘플에게 인터페이스를 보여줍니다.일반적인 작업을 수행하도록 요청하세요.그들의 실수를 조심하십시오.그들의 의견을 들어보세요.변경하고 반복하십시오.

일상 사물의 디자인 - 도널드 노먼

디자인 지식의 표준이자 전 세계 대학의 많은 HCI 과정의 기초입니다.웹 포럼의 몇 가지 의견만으로 5분 만에 훌륭한 GUI를 디자인할 수는 없지만 몇 가지 원칙을 통해 생각을 올바른 방향으로 이끌 수 있습니다.

--

MC

오류 메시지를 구성 할 때 오류 메시지 가이 3 가지 질문에 대한 답이됩니다 (순서대로).

  1. 무슨 일이에요?

  2. 왜 그런 일이 일어났나요?

  3. 그것에 대해 무엇을 할 수 있습니까?

이는 "휴먼 인터페이스 지침:Apple Desktop Interface "(1987, ISBN 0-201-17753-6)이지만 어디서나 오류 메시지에 사용할 수 있습니다.이 있습니다 업데이트된 버전 Mac OS X용.마이크로소프트 페이지사용자 인터페이스 메시지같은 말을 한다:"...오류 메시지의 경우 문제, 원인 및 사용자 조치를 포함하여 문제를 수정해야합니다. "

또한 고정 된 문자열뿐만 아니라 프로그램에서 알려진 정보도 포함하십시오.예:"발생한 이유"의 경우 오류 메시지의 일부는 "원시 스펙트럼 파일 L : refdataformascotparser Tripleencoding Q1LCMS190203_01Doub Learg.wiff가 존재하지 않습니다"대신 존재하지 않습니다.

이를 악명 높은 오류 메시지와 대조해 보세요."오류가 일어났다."

(Joel에게서 훔친 것 :o) )

옵션을 비활성화/제거하지 마십시오. 오히려 사용자가 옵션을 클릭/선택할 때 유용한 메시지를 제공하십시오.

오늘 내 데이터 구조 교수가 지적했듯이:프로그램이 일반 사용자에게 어떻게 작동하는지 지침을 제공하십시오.우리 프로그래머들은 우리 프로그램이 매우 논리적이라고 생각하는 경우가 많지만 일반 사용자는 아마도 무엇을 해야할지 모를 것입니다.

  1. 눈에 띄지 않고 단순한 애니메이션 기능을 사용하여 한 섹션에서 다른 섹션으로 원활한 전환을 만듭니다.이는 사용자가 탐색/구조에 대한 정신적 지도를 만드는 데 도움이 됩니다.

  2. 작업의 본질을 명확하게 설명하는 짧은(가능한 경우 한 단어) 제목을 버튼에 사용하세요.

  3. 가능한 경우 의미론적 확대/축소를 사용합니다(좋은 예는 Google/Bing 지도에서 확대/축소가 작동하는 방식으로, 특정 영역에 초점을 맞추면 더 많은 정보가 표시됩니다).

  4. 탐색하는 방법을 두 가지 이상 만듭니다.수직 및 수평.여러 섹션 사이를 탐색하는 경우 세로로, 섹션이나 하위 섹션의 콘텐츠 내에서 탐색하는 경우 가로로 표시됩니다.

  5. 항상 구조의 기본 옵션 노드가 표시되도록 유지하세요(화면 크기와 장치 유형이 허용하는 경우).

  6. 구조에 깊이 들어갈 때 항상 눈에 보이는 힌트를 유지하십시오(예:경로 형태 등) 현재 위치를 나타냅니다.

  7. 사용자가 데이터에 집중하게 하려는 경우(예: 기사 읽기 또는 프로젝트 보기) 요소를 숨기세요.- 하지만 5번과 4번 사항을 주의하세요.

강력하고 단순해지세요

아, 그리고 디자이너를 고용하거나 디자인 기술을 배우세요.:)

GUI의 경우 표준은 일종의 플랫폼별로 다릅니다.예:Eclipse에서 GUI를 개발하는 동안 이 링크 적절한 지침을 제공합니다.

나는 위의 대부분을 읽었으며 언급되지 않은 한 가지가 있습니다.

사용자가 인터페이스를 한 번만 사용하도록 의도된 경우 가능하면 사용해야 하는 것만 표시하는 것이 좋습니다.

동일한 사용자가 사용자 인터페이스를 반복적으로 사용하지만 자주 사용하지는 않을 경우 컨트롤을 숨기는 것보다 비활성화하는 것이 좋습니다.사용자 인터페이스가 변경되고 숨겨진 기능이 간헐적으로 사용자에게 명확하지 않거나 기억되지 않는 것은 사용자에게 실망감을 줍니다.

동일한 사용자가 사용자 인터페이스를 매우 정기적으로 사용할 예정인 경우(그리고 작업 회전율이 많지 않은 경우)항상 온라인에 들어오는 신규 사용자는 많지 않음) 컨트롤을 비활성화하는 것은 정말 도움이 되며 사용자는 일이 발생하는 이유에 익숙해지지만 부적절한 상황에서 실수로 컨트롤을 사용하는 것을 방지하고 오류를 예방할 수 있습니다.

단지 내 의견일 뿐이지만, 모든 것은 단일 사용자 세션에 수반되는 것이 아니라 사용자 프로필을 이해하는 것으로 돌아갑니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top