web-development-kb-ko.site

텍스트 대 텍스트 링크와 함께 아이콘 대 아이콘을 사용하는 경우는 언제입니까?

웹 응용 프로그램에서 아이콘 대 아이콘을 텍스트와 함께 사용하는 경우와 텍스트 링크 만 사용하는시기에 대한 규칙이 있습니까?

예를 들면 다음과 같습니다.

disk icon

vs.

disk icon 저장

vs.

저장


추가 질문 : disk icon 저장 또는 저장 disk icon 선택할 만한?

172
jmb

아이콘은 레이블로 악영향을 미치므로 교육이나 경험없이 올바르게 해석하기가 매우 어렵습니다. 대부분의 상황에서 사용자는 아이콘 만 사용하는 것보다 텍스트 만 사용하여 올바른 해석을 더 잘 배웁니다. 참조 : Wiedenbeck, S (1999). 최종 사용자 응용 프로그램에서 아이콘 및 레이블 사용 : 학습 및 유지에 대한 경험적 연구. 행동 및 정보 기술, 18 (2), p68-82.

아이콘은 특히 송장 또는 입찰과 같은 추상에 해 롭습니다. 추상적 인 것에는 일반적으로 강한 시각적 이미지가 없기 때문입니다 (송장 및 입찰 모두 종이 문서로 표현 될 수 있지만 어떻게 구별 할 수 있습니까?). 마찬가지로 아이콘은 특히 작업 (예 : 저장, 게시)에 좋지 않습니다. 그림으로 과정을 명확하게 보여주기는 어렵습니다. 예, 아이콘은 작업을 위해 도구 모음에서 항상 사용되지만 도구 모음은 전문가를 대상으로했지만 그럼에도 불구하고 사용자는 종종 혼란스럽게합니다 (평균적으로 Word를 정기적으로 사용한 후 사용자는 6 개의 Word 도구 모음 항목 만 알고 있음 2 년 ).

아이콘은 텍스트보다 공간을 절약 할 수 있지만 인식 비용이 많이 듭니다. 16x16 픽셀과 같은 작은 아이콘의 경우 사용자가 그림의 대상이 아닌 그림의 대상을 인식하기가 매우 어렵습니다. 내가 아는 한 사용자는 저장을위한“디스크”아이콘이 TV 사진이라고 생각했습니다. (그녀는 플로피 디스크가 무엇인지 알기에 충분히 나이가 들었습니다.) 저는 개인적으로 Track Changes 아이콘이 일종의 양식화 된 Rosetta Stone이라고 생각하면서 Word를 사용했습니다. 전문가 사용자는 컨트롤을 선택하기 위해 아이콘 레이블이 아닌 툴바 컨트롤을 기억 된 실제 위치에 의존 하는 것이 더 쉽다는 것을 알게됩니다. 더 큰 아이콘 (예 : 32 x 32 픽셀 이상)은 인식에 도움이 될 수 있지만 명확한 텍스트 레이블을위한 공간을 사용하는 것이 훨씬 좋습니다. 공간이 제한된 경우 아이콘보다 약어 텍스트를 사용하는 것이 좋습니다.

아이콘을 올바르게 얻는 것은 매우 어렵습니다. 광범위한 사용자 테스트 반복없이 새 아이콘을 개발하려고 시도하지 마십시오. 그래도 실패 할 수 있습니다. Microsoft 디자이너는 주요 컨트롤에서 텍스트 레이블 제공 및 사용 전에 Outlook 도구 모음에 대해 해석 가능한 아이콘을 만들기 위해 모든 것을 시도했습니다.

아이콘 레이블은 또한 기술 지원을 어렵게 만듭니다 (예 :“파란색 체크 표시가있는 노란색 시트를 클릭하십시오”및“ '수락'을 클릭하십시오).

일반적으로 다음 세 가지 조건 중 둘 이상이 적용되는 경우에만 아이콘 만 허용되어야합니다.

  1. 공간은 매우 제한적입니다 (즉, 텍스트만으로는 너무 작습니다).

  2. 아이콘이 표준화되었습니다 (예 : 저장 용 플로피 디스크 이미지)

  3. 아이콘은 강력한 물리적 아날로그 또는 시각적 속성 (예 : 프린터 속성에 액세스하는 프린터 아이콘 또는 페이지 배경을 빨간색으로 설정하는 빨간색 사각형)이있는 객체를 나타냅니다.

아이콘을 단독으로 사용하는 경우 도구 설명이 필요하지만 텍스트 레이블을 대체하기에는 적합하지 않습니다. 사용자는 물건을 모색하여 앱을 사용할 필요가 없습니다. 텍스트 레이블에 그래픽 툴팁이 필요하지 않다는 사실은 텍스트가 아이콘보다 낫다는 꽤 좋은 단서입니다.

공간이 있으면 텍스트와 결합 된 아이콘이 가장 좋습니다. (1980 년대 후반부터 이것을 보여주는 연구가 있다고 생각하지만 찾을 수 없습니다.) 텍스트가있는 아이콘을 선택적으로 사용하면 특정 항목이 더 두드러 지거나 시각적으로 흥미를 유발합니다. 또한 항목의 스캔 가능성을 향상시킬 수 있지만 텍스트 레이블이 양호하면이 작업을 수행 할 수 있습니다. 사용자는 실제로 성능이 향상되지 않았더라도 (위에 인용 된 Wiedenbeck, 1999 참조) 아이콘이 있으면 앱이 더 쉽다고 주관적으로 생각하는 것으로 알려져있어 아이콘과 텍스트를 결합해야하는 또 다른 이유입니다.

일반적으로 텍스트 레이블의 위 또는 왼쪽에 아이콘이 표시됩니다. 필자는 이것이 대안보다 본질적으로 더 낫다고 생각하지는 않지만 서로 옆에 컨트롤이 있으면 따라야 할 규칙이므로 사용자는 어떤 텍스트 레이블이 어떤 아이콘과 함께 사용되는지에 대한 경험에 의존 할 수 있습니다.

232
Michael Zuschlag

아이콘의 Nailson/Norman 그룹 에서 :

요약 : 아이콘에 대한 사용자의 이해는 이전 경험을 기반으로합니다. 대부분의 아이콘에 표준 사용법이 없기 때문에 의미를 전달하고 모호성을 줄이기 위해 텍스트 레이블이 필요합니다.

아이콘에는 텍스트 레이블이 필요합니다

거의 모든 아이콘이 직면하는 모호성을 극복하려면 특정 컨텍스트에서 그 의미를 명확히하기 위해 텍스트 레이블이 아이콘과 함께 있어야합니다 표준 아이콘을 사용하는 경우에도 특히 심미적 선호도 또는 제약 조건에 맞게 아이콘을 약간 변경 한 경우 레이블을 포함하는 것이 더 안전합니다.

아이콘 레이블은 사용자와의 상호 작용없이 항상 표시되어야합니다. 탐색 아이콘의 경우 레이블이 특히 중요합니다. 텍스트 레이블을 표시하기 위해 마우스를 가져 가지 마십시오. 상호 작용 비용 을 증가시킬뿐만 아니라 터치 장치에서도 잘 번역되지 않습니다.

웹 사이트 sability.gov 는 사이트 내 모든 페이지에서 방법, 템플릿 및 문서 및 지침에 대한 탐색 아이콘을 사용합니다. [ example w/text & w/o 텍스트 ]. 이 기사를 읽는 각 사람에게 Methods를 나타내는 아이콘을 보내달라고 요청하면 다양한 디자인을 받게 될 것입니다. 우리가 홈페이지 유용성에 대한 디자인 가이드 라인 몇 년 전에 언급했듯이,“탐색 아이콘을 생각해 보려고하면 쉽게 알아볼 수 없거나 직관적이지 않을 것입니다 사용자를 위해” 사이트의 모바일 버전은 어떤 의미를 부여하기 위해 텍스트 레이블이 아이콘과 함께 제공되어야한다는 것을 인식하지만, 호기심 많은 사용자가 마우스를 가리킬 때까지 데스크탑 버전은 이러한 레이블을 숨 깁니다. 스크롤 할 때 사용자가 계속 사용할 수 있도록 이러한 탐색 항목을 페이지 왼쪽에 고정하면 조직에서 중요하고 유용하다고 생각하는 것으로 나타납니다. 그러나 이러한 텍스트 레이블 아이콘을 제거하면 완전히 의미가 없어지고 컨텐츠에 쉽게 액세스 할 수 있다는 목표에 역효과를줍니다.

18
KyleMit

Don Norman이 인용 한 연구에 따르면 아이콘만으로는 효과가 가장 적습니다. 솔로 텍스트는 아이콘보다 잘 작동합니다. 텍스트 + 아이콘이 가장 효과적입니다.

8
Hisham

위의 답변 외에도 할 점이 있습니다.

어떤 종류의 웹 사이트입니까?

웹 사이트를 자주 사용하지 않으려면 아이콘에 레이블을 지정해야합니다. 그렇지 않으면 새 사용자가 UI를 번거롭게 찾을 수 있습니다.

웹 사이트를 Gmail처럼 자주 사용하려는 경우 도구 설명이 잘 표시되는 좋은 아이콘은 텍스트 전용 또는 아이콘 전용 접근 방식보다 낫습니다. 과거에는 텍스트 전용 버튼을 사용했지만 이제는 Gmail에서 아이콘 + 툴팁을 사용하고 있기 때문에 Google 이이 질문에 대해 확신했습니다. 이 새로운 접근 방식은 유용성을 그대로 유지하면서 깔끔한 인터페이스를 제공합니다. Photoshop과 Notepad ++도 비슷한 방식을 사용합니다.

7
jackandjill

사용자가 기본값을 둘 다로 선택하도록합니다.

텍스트 + 아이콘은 처음 사용자가 아이콘을 익히도록 도와줍니다. 그러나 응용 프로그램을 더 많이 사용함에 따라 사용자는 아이콘에 익숙해지고 더 이상 텍스트가 필요하지 않습니다. 아이콘의 의미를 알고 나면 중복 텍스트보다는 더 큰 작업 공간을 선호합니다.

5
Lie Ryan

먼저, 사용자 인터페이스를 디자인 할 때는 사용성 (일관성, 여유도 등)의 원칙을 고려해야합니다. 경제성은 주요 개념 중 하나이며 인터페이스가 직관적이어야합니다. 예를 들어, 아이콘은 Michael의 저장 아이콘에 대해 위에서 인용 한 예와 같은 다음 조치의 의미와 관련이 있어야합니다. 일부 아이콘도 표준화되어 있으므로 의미를 재사용 할 수 있습니다. 요점은 도구 모음 등의 아이콘 만 사용하는 경우 아이콘이 의미를 표현하기에 충분하지 않은 경우 도구 설명을 사용해야하지만 아이콘이 충분히 허용 가능한 경우 레이블이 필요하지 않다는 것입니다. 툴팁으로 충분할 수 있습니다.

어쨌든 시스템이 특정 시스템 용이고 아이콘을 디자인해야 할 때 특별히 아이콘을 디자인하는 것은 어렵습니다. 이 경우 일부 디자인을 제안하고 사용자와 함께 평가할 수 있습니다. 시스템, 시각적 인터페이스 및 아이콘에 대한 사용자의 생각을 아는 것이 도움이 될 수 있습니다. 또한 실제 테스트 후 하루 만에 사용자가 아이콘, 의미 또는 아이콘 또는 사용자가 요청한 조치를 찾을 수있는 가능한 영역을 기억할 수 있는지 평가하기 위해 기억에 남는 테스트를 수행 할 수 있습니다. 또한 아이콘 디자인이 둘 이상인 경우 설문지가 도움이 될 수 있습니다.

반면에 라벨을 넣어야하는 경우 아이콘 아래의 라벨이 더 좋다고 생각합니다. [icon] [label]

“비용은 대상이 어떻게 사용되는지 명백하게하는 대상의 한 측면입니다. 사용자 인터페이스 표시에서 여유를 만드는 기능은 일반적으로 시각적입니다. .. "Rosson, M. B. & Carroll, J. M. (2002) 사용성 공학, Morgan Kaufmann.

또는 시간이 있다면 ...이 문서를 읽을 수 있습니다 : www.cs.swan.ac.uk/~csharold/cv/files/Affordance.pdf

디자인 프로세스 중에 여유를 고려한 경우 레이블이 필요하지 않고 툴팁을 사용하면 아이콘 아래의 레이블을 고려하여 더 많은 디자인을 평가하거나 제안 할 수 있습니다. 최종 사용자와 함께 테스트 할 수있는 버전까지 처음에는 동료가됩니다.

5
user1982

현재 추세 시스템은 시스템 중심의 용어가 아니라 사용자에게 친숙한 단어, 구 및 개념을 사용하여 사용자의 언어를 사용해야합니다. 실제 규칙에 따라 정보를 자연스럽고 논리적으로 표시합니다. 영어를 사용할 때는 항상 글자를 오른쪽에 두십시오. 분명히 아이콘이 주요 매력이 될 것이기 때문입니다. 따라서 사용자는 앞의 글자를 무시할 수 있습니다.

예 : iTunes- 미디어 라이브러리가 포함 된 라이브러리 (음악, 동영상, 프로그램, 아우디 북)로 구성됩니다. 도서관 아래에는 도서관에 넣을 미디어를 더 구입할 수있는 상점이 있습니다.

enter image description here

Google pallet design 및 windows 2D 타일과 같은 최근 트렌드의 경우 아이콘이 제안됩니다. 하지만 아이콘이있는 것이 좋습니다 빠른 마우스 호버 툴팁. 행운을 빕니다.

4
Miller

모든 질문을 읽고 동의하면 추가 견해를 추가하고 싶습니다.

아이콘을 표시하기로 결정하기 전에, 아이콘을 표시하지 않고, 텍스트 주위에 텍스트를 추가하고, 질문에 대답해야하는 텍스트를 추가하지 마십시오 :

  • 아이콘을 어디에 추가 하시겠습니까?
  • 아이콘이 왜 필요한가요?
  • 이 아이콘은 누가 사용합니까?
  • 사용자의 아이콘/콘텐츠/액션에 대한 지식은 무엇입니까?
  • 아이콘을 사용하는 것이 일반적입니까?
  • 사용자 상호 작용을보다 쉽게 ​​하시겠습니까?

이 질문에 대답하려면 몇 가지 사항을 고려해야합니다.

  • 사람들은 매일 스마트 폰을 사용하며 Facebook, Youtube, Google, What 's App, Instagram 등과 같은 가장 유명한 아이콘은 사람들이 알 수 있도록 레이블을 표시해야합니다.

enter image description here

  • Word/Google 문서 도구는 텍스트가없는 아이콘을 몇 년 동안 동일하게 사용하고 있으며 모든 사람들이 이미 무엇을 알고 있지만 마우스 위에도 아이콘을 설명하는 텍스트가 표시됩니다.

enter image description here

  • 지역에 따라 아이콘이 다르게 이해 될 수 있습니다. 예를 들어 영국에서는 전자 상거래에서 바스켓을 사용하는 것이 더 일반적이며 미국에서는 장바구니가 있습니다. 지역 언어의 영향으로 일어나고 있습니다.

  • 복잡한 아이콘으로 인해 오해로 인해 전환이 중단 될 수 있습니다.

enter image description here

그리고 Smashing Magazine 에서 빌린 좋은 비교를 볼 수 있습니다.

enter image description here

모든 답변을 고려할 때 90 %의 경우 아이콘이있는 텍스트를 사용하고 텍스트의 위치는 디자인 컨셉에 따라 다르며 사용자가 쉽게 연결할 수 있는지 여부에 달려 있습니다.

그리고 항상 내 의견에 말한 것처럼 여기에 아무것도 사실이 아니며 테스트하거나 웹 사이트/응용 프로그램에서 사용자를 비교해야합니다.

2
Rafael Perozin

이것은 사용자에 따라 다릅니다. 유용성 관점에서 아이콘과 텍스트를 모두 갖는 것은 합리적인 인구가 아이콘을 수용 할 경우 리콜에 대한 인식을 따르기 때문에 더 나은 결과를 제공합니다. 아이콘 만있는 것은 세계적으로 이해할 수있는 기호 모양에 적용 할 수 있습니다. 텍스트는 항목이 임의적이고 인식 할 수있는 글리프가없는 경우에만 가장 적합합니다. 이러한 항목의 경우 텍스트 만있는 것이 가장 좋습니다. 그러나 사용 된 명명법은 적절한 사용을 위해 테스트되어야합니다.

2
Kernan Kobaya