WORK ABOUT LAB CONTACT
contact@yellow-finger.com
02.2205.4128
Do your icons mean what you think they mean?
당신의 아이콘들이 당신이 생각하는 것을 의미하나요?
Do your icons mean what you think they mean?
A designer’s guide to creating and testing icons that users understand.
사용자가 이해할 수 있는 아이콘을 만들고 테스트하기 위한 디자이너 안내서입니다.
요약 :)
아이콘은 일반적으로 작은 그림이므로 사용자가 제품을 이해하는 데 있어 아이콘의 무게 를 간과하기 쉽습니다 .

우리는 대부분의 사용자가 설정 을 의미하는 톱니바퀴나 알림 을 의미하는 벨 과 같은 일반적인 아이콘 에 익숙하다는 것을 당연하게 여깁니다 .

그러나 우리 산업이나 제품에 특정한 사용자 지정 아이콘을 만들어야 할 가능성이 있으며 사용자가 그 의미를 즉시 인식할 것으로 기대할 수는 없습니다.
더보기→

출처.
Chris Ayres. (2022.10.25). Medium. Do your icons mean what you think they mean?. 2022.10.26. https://uxdesign.cc/do-your-icons-mean-what-you-think-they-mean-fa6f255d56ab
아이콘은 일반적으로 작은 그림이므로 사용자가 제품을 이해하는 데 있어 아이콘의 무게 를 간과하기 쉽습니다 . 우리는 대부분의 사용자가 설정 을 의미하는 톱니바퀴나 알림 을 의미하는 벨 과 같은 일반적인 아이콘 에 익숙하다는 것을 당연하게 여깁니다 . 그러나 우리 산업이나 제품에 특정한 사용자 지정 아이콘을 만들어야 할 가능성이 있으며 사용자가 그 의미를 즉시 인식할 것으로 기대할 수는 없습니다. 마음에 가장 먼저 떠오르는 모양을 그려 텍스트 레이블 옆에 놓고 텍스트에 의존하여 무거운 작업을 수행하고 싶을 수 있습니다. 우리는 그보다 더 잘할 수 있습니다! 아주 간단한 사용자 설문 조사 를 수행하여 아이콘의 인지도와 명확성을 높여 보겠습니다 . 면책 조항: 이 기사는 자신의 연구를 수행하려는 디자이너를 대상으로 합니다. 연구원 여러분, 이것은 당신에게 너무 기초적일 수 있습니다. 시작하기 전에 이 연구를 수행하기 위해 우리는 목표 청중에게 다가갈 수 있는 설문 조사 플랫폼 을 사용할 것입니다. 설문조사에서는 항상 참가자에게 실제 크기 의 아이콘을 표시합니다. 아이콘이 제품에서 24px x 24px인 경우 이 연구에서도 해당 크기여야 합니다. 우리는 그들이 모양을 인식하는지 알고 싶고, 그들에게 훨씬 더 큰 것을 보여주면 너무 쉽게 만들고 결과를 왜곡할 수 있습니다. 참가자에게 표시되는 아이콘이 모두 흰색 배경에 표시된 동일한 어두운 회색 음영인지 확인합니다. 색상은 디자인에 감정이나 특정 함축을 더할 수 있으므로 해당 측면을 완전히 제거하는 것이 가장 좋습니다. 또한 흰색과 짙은 회색은 접근성 대비 목적으로 적합합니다. 그래, 조사하자. 이상적으로는 동일한 메시지를 전달하려는 아이콘이 이미 세 개 이상 있으므로 서로 테스트할 수 있습니다. 그러나 적절한 기호를 생각하는 데 문제가 있으면 항상 ... 1. 제품 청중으로부터 아이디어 얻기 설문 조사 참가자에게 적합한 아이콘이 무엇이라고 생각하는지 묻는 것부터 시작하겠습니다. 그렇게 하려면 지원 이미지가 필요하므로 제품의 가상 버전의 와이어프레임을 조롱하고 아이콘이 있어야 하는 위치에 큰 빨간색 물음표를 표시합니다. 흑백 화면은 브랜드 편견을 제거할 뿐만 아니라 물음표를 더욱 돋보이게 하는 데 도움이 됩니다. 메뉴가 열려 있는 패션 소매 모바일 웹사이트의 와이어프레임. 내부 옵션 중 하나는 아이콘이 있어야 하는 위치 위에 빨간색 물음표가 있는 거래입니다. 이런 종류의 설문조사 질문에 적합한 일반 와이어프레임의 예입니다. UserZoom 에 따르면 이와 같은 질문은 먼저 컨텍스트를 설정한 다음 참가자에게 작업을 요청하기 전에 필요한 모든 정보를 제공해야 합니다. 이를 바탕으로 다음은 이 시나리오에 적합한 질문의 예입니다. 이것을 자유롭게 복사하고 필요에 따라 수정하고 자신의 설문조사에 붙여넣으십시오. 여기 이미지 는 메뉴가 열린 패션 소매 웹사이트를 보여줍니다. 섹션 제목 위에 작은 기호를 사용하여 의미 에 대한 컨텍스트를 제공합니다 . 예를 들어, 홈 섹션 위에 집 아이콘이 있고 검색 섹션 위에 돋보기 기호가 있습니다. 거래 섹션 의 기호는 빨간색 물음표로 숨겨져 있습니다. 거래 라는 단어 위에 어떤 기호가 표시될 것으로 예상할 수 있습니까? 그러한 개방형 질문이 낮은 품질의 응답을 생성할 가능성이 높지만 괜찮습니다! 답변의 일반적인 패턴이나 주제를 메모하고 이를 기반으로 새로운 아이콘 배치를 디자인합니다. 2. 그것이 무엇을 의미한다고 생각하는지 물어보세요 이제 테스트할 적절한 아이콘 세트가 있습니다. 스크립트를 뒤집고 이전 설문 조사와 반대로 수행해 보겠습니다. 참가자에게 시각적 컨텍스트 외부의 아이콘을 보여주고 그것이 무엇을 의미한다고 생각하는지 물어봅니다. 이 연구는 이러한 아이콘이 의미를 전달하기 위해 자신의 모양에만 의존하기 때문에 이러한 아이콘의 강도를 실제로 테스트할 것입니다. 작은 사각형에 가격표 아이콘입니다. 이 설문조사의 각 질문에는 아이콘의 실제 크기 스크린샷만 필요합니다. 다음은 이 설문조사와 함께 할 수 있는 좋은 질문입니다. 이 질문은 짧고 참가자를 이끌지 않고도 충분한 맥락을 제공 합니다 . 기호를 봐주세요. 당신이 패션 소매 웹사이트에서 그 심볼을 보았다고 상상해 보십시오 . 그 상징이 무엇을 나타낸다고 생각 하는가? 각 아이콘에 대해 이 이미지와 질문 형식을 반복합니다. 각 아이콘을 다른 페이지에 표시하고 페이지 순서를 무작위로 지정 하여 설문조사 편향을 제거 하는 것이 가장 좋습니다 . 결과가 나오면 사람들이 같은 아이디어에 대해 다른 단어를 염두에 둘 것이기 때문에 통과 기준에 대해 상당히 자유로울 수 있습니다. 답변이 일반 우산 범주에 속하는 한 셀 수 있습니다. 예를 들어 위의 거래 아이콘의 경우 사람들은 "세일", "할인" 또는 "프로모션"으로 응답할 수 있으며 모두 수용 가능합니다. 3. 가장 강력한 아이콘 비교 범위를 좁힐 시간입니다. 최고 성능의 아이콘을 선택형 질문에서 서로 겨루어 보겠습니다. 참가자에게 아이콘이 의미하는 바를 알려주므로 참가자가 비교 대상을 완전히 이해할 수 있습니다. 세 개의 작은 아이콘 - 가격표, 별표, 번개 모양이 각각 A, B, C로 표시되어 있습니다. 이 설문조사의 모든 아이콘은 사용자에게 한 번에 표시됩니다. 다음은 패션 소매 웹사이트 의 거래 페이지 를 나타내는 데 사용할 수 있는 몇 가지 기호입니다 . 이미지를 보고 거래 를 가장 잘 나타내는 이미지를 선택하세요 . 물론 이 설문조사에서 가장 많은 표를 얻은 아이콘이 최선의 선택이라고 볼 수 있습니다. 그러나 일부 다른 아이콘이 크게 뒤처지지 않았을 가능성이 있으며, 그렇다면 절대적으로 확신하기 위해 조금 더 테스트해야 합니다. 4. 발산하고 다시 수렴 이전 연구의 주요 두 아이콘이 Price tag 와 Star 라고 가정해 보겠습니다 . 각 아이콘에 대해 만든 시각적 디자인이 최선의 선택이라고 가정해서는 안 되므로 드로잉 보드로 돌아가 각 아이콘 유형의 몇 가지 변형을 디자인하는 것이 좋습니다. 이 설문조사에서는 세 가지 질문을 사용하여 어떤 개념이 가장 효과적인지 잘 알 수 있습니다. 세 가지 설문조사 질문에 각각 아이콘이 포함되어 있습니다. 질문 1에서는 사용자가 별표 아이콘을 선택했습니다. 질문 2에서는 사용자가 가격표 아이콘을 선택했습니다. 질문 3에서는 이전에 선택한 아이콘이 모두 표시됩니다. 이 설문조사의 3단계는 가장 강력한 시각적 디자인과 함께 가장 강력한 개념을 사용하고 있음을 확인합니다. 질문 1 한 개념의 변형(이 예에서는 Star )을 표시하고 의미를 가장 잘 나타내는 것이 무엇인지 묻습니다. 패션 소매 웹사이트 에는 현재 제공되는 제안을 볼 수 있는 거래 섹션이 있는 경우가 많습니다. 패션 소매 웹사이트 의 탐색 을 볼 때 다음 중 거래 라는 단어 옆에 표시될 것으로 예상되는 작은 기호 는 무엇입니까? 질문 2 이전과 똑같은 질문을 반복하되 다른 개념의 변형을 보여줍니다(이 예에서는 가격 태그 ). 질문 3 설문조사 소프트웨어의 논리 옵션을 사용하여 참가자에게 처음 두 질문에서 선택한 아이콘을 제시하고 마지막으로 같은 질문을 합니다. 5. 현장에서 작동하는지 확인 지금쯤이면 성공적인 아이콘을 찾았을 것입니다. 하지만 실사를 수행하고 클릭 테스트 를 사용하여 사용자가 제품에서 인식하는지 확인하겠습니다 . 우리는 제품의 고화질 모형을 만들고 페이지의 아이콘 옆에 있는 레이블을 제거하고 참가자에게 생각하는 위치를 탭하도록 요청하여 이를 수행할 수 있습니다. 메뉴가 열린 패션 소매 모바일 웹사이트. 내부 버튼에는 텍스트 레이블이 없습니다. 텍스트 레이블이 없는 페이지는 참가자가 아이콘의 의미에 대해 생각하게 합니다. 당신이 패션 소매 웹사이트를 방문하고 있으며 현재 판매 중인 새 신발 을 구매 하려고 한다고 상상해 보십시오 . 찾고자 하는 사이트 영역을 탭하세요. 설문 조사 소프트웨어는 얼마나 많은 사용자가 대상 영역과 상호 작용했는지 알려 주므로 얼마나 많은 사용자가 성공했는지 백분율로 확인하여 아이콘을 인식할 수 있고 찾을 수 있는지 알 수 있습니다. 작업을 얼마나 성공적으로 수행했는지, 얼마나 어려웠는지에 대한 질문으로 클릭 테스트를 따르는 것이 좋습니다. 참가자가 1에서 7까지의 척도로 응답할 수 있는 Likert 척도 를 사용하여 이를 수행할 수 있습니다 . 후속 질문 1 - 자신감 올바른 거래 버튼 을 탭했다고 얼마나 확신 하십니까? 후속 질문 2 — 난이도 거래 버튼 을 찾는 것이 얼마나 쉬웠 습니까? 이 질문에 대한 참가자의 응답은 아이콘이 의미를 효과적으로 전달했기 때문에 발견되었는지 또는 페이지에 더 나은 옵션이 없었기 때문에 발견되었는지 알려줄 것입니다. 지금 무엇? 이 가이드는 순서대로 나열되어 있지만, 때때로 결과에 따라 시간순으로 따라가는 것이 이해가 되지 않는다는 것이 현실입니다. 설문 조사에서 식별 가능한 '승자'가 없었기 때문에 한두 단계 뒤로 물러나야 한다는 사실을 종종 알게 될 것입니다. 설문조사 유형 중 일부를 혼합하고 일치시키는 것을 두려워하지 마십시오. 이제 때때로 결과에 따라 알아야 할 사항을 찾기 위한 실험이 필요할 것입니다. 당신의 호기심이 당신을 인도하도록 하십시오.