최근 우리 디자인 시스템 팀은 업로드 및 다운로드 아이콘의 일부 별칭을 변경해 달라는 요청을 검토했습니다. 사용자에게 아이콘을 표시하는 방법에 대해 약간의 혼란이 있었고 어떤 경우에는 충돌이 있었습니다. 예를 들어 미국의 'X' 아이콘은 '닫기' 또는 '아니요'를 의미합니다. 그러나 일부 문화권에서는 해당 아이콘이 다르게 해석될 수 있습니다. 완료된 작업처럼 "예" 또는 "확인"을 나타낼 수 있습니다. 때로는 프로젝트를 디자인할 때 자신에게 딱 맞는 아이콘을 삽입하기 쉽지만 사용자에게는 익숙하지 않을 수 있습니다. 이러한 탐색을 통해 사용자가 제품에서 아이콘을 접하는 방식, 취하는 조치, 아이콘 이름 지정 또는 별칭 지정에 대한 모범 사례가 무엇인지에 대한 논의가 이어졌습니다. 우리가 디자이너들에게 전달하고 싶은 세 가지 생각은 이러한 대화에서 나왔습니다. 사용자가 맥락을 파악하고 경험에 대한 기대치를 형성할 수 있도록 항상 아이콘과 텍스트를 연결하세요. UI/UX 경험의 맥락에 가장 적합한 아이콘을 결정하려면 사용 사례를 살펴보세요. 표시할 아이콘 종류를 결정할 때 기능을 고려하세요. 사용자를 위해 아이콘을 가장 잘 사용하는 방법을 결정하고 있다면 저희 팀의 조사를 통해 배울 수 있습니다. 맥락이 왜 그토록 중요한지 자세히 살펴보겠습니다. 아이콘과 텍스트 페어링 아이콘은 사용자 인터페이스에서 의미를 전달해야 합니다. 이는 개체, 동작 또는 아이디어를 시각적으로 표현한 것입니다. 따라서 해당 아이콘이 사용자에게 즉시 명확하지 않으면 작업을 완료하는 데 방해가 되는 혼란스럽거나 심지어 실망스러운 시각적 소음으로 줄어들 수 있습니다. 사용자에게 명확성을 제공하려면 아이콘을 올바른 콘텐츠와 연결하면 됩니다. 아이콘과 텍스트를 결합하면 모호함이 제거되고, 명확한 이해가 가능하며, 사용자가 기대하는 경험에 대한 자신감을 심어줄 수도 있습니다. 사용 사례에 따라 아이콘 선택 귀하의 사용 사례에 가장 잘 맞는 아이콘을 선택하는 것이 좋습니다. 그러나 많은 아이콘이 너무 유사해 보이면 혼란스러울 수 있습니다. 특히 대부분의 기호는 본질적으로 보편적이지 않고 서로 다른 지역 간에 동일한 의미를 갖지 않을 수 있기 때문입니다. 예를 들어 인디드의 디자인 시스템에는 화살표 아이콘이 많이 있습니다. 아이콘 자체의 이름이나 별칭을 보지 않는다면 "업로드"에 무엇을 사용하시겠습니까? 6개의 유사한 아이콘은 업로드 아이콘을 만들기 위해 화살표, 상자 및 선을 다양한 조합으로 사용합니다. 맥락이 없으면 이러한 아이콘 간의 차이점을 파악하기가 어렵습니다. 디자인 시스템은 의도된 기능과 관련된 각 아이콘에 대한 별칭과 이름을 제공합니다. 순전히 시각적 디자인만을 기반으로 아이콘을 선택하는 대신 별칭이나 이름을 사용하여 아이콘을 선택한 다음 인터페이스의 적절한 텍스트와 연결하세요. 기능성의 역할 기능은 디자인에 어떤 아이콘을 선택할지 결정하는 중요한 지표이지만 혼란스러울 수 있습니다. 예를 들어 아이콘이 항상 PDF 파일을 표시하는 경우 'PDF 파일' 아이콘을 표시하는 것이 더 낫습니까, 아니면 '다운로드' 아이콘을 표시하는 것이 더 낫습니까? 생각해보면 흥미롭습니다. 더 나은 경험을 만드는 것은 무엇입니까? "PDF 다운로드"라고 표시된 버튼 옆에 "다운로드"라고 표시된 버튼이 있고 두 번째 버튼 아래에 "파일 크기 4.5MB"라는 텍스트가 지정되어 있습니다. 내 생각은? 가능한 한 기대치를 최대한 드러내고 가능한 경우 구체적인 내용을 제공하는 것이 좋습니다. 디자인에서 사용자에게 PDF 파일을 다운로드하라고 요청하는 경우 "PDF 다운로드"라는 단어와 함께 "파일" 아이콘을 표시하는 것이 좋습니다. 이는 사용자에게 작업을 명확하게 할 뿐만 아니라 어떤 아티팩트를 획득할지 명확하게 해줍니다. 더 나아가려면 다운로드하는 데 걸리는 시간을 예상할 수 있도록 사용자에게 파일 크기를 제공하는 것이 좋습니다. zip 폴더에 있는 여러 항목과 같이 작업이 구체적이지 않은 경우에는 다운로드 환경의 항목과 관련이 없을 수 있으므로 다운로드 아이콘의 작업에 집중하겠습니다. 때로는 일어나고 있는 행동에 대해 생각하는 것도 혼란스러울 수 있습니다. 업로드인가요, 다운로드인가요? 사용자가 조치를 취하고 있나요? 아니면 서버 측에 있습니까? 사용자는 이력서를 업로드하지만 서버 측에 있는 경우에는 동일한 작업이 사용자에서 서버로 다운로드됩니다. 그렇다면 이러한 경우에 적합한 아이콘을 결정하려면 어떻게 해야 할까요? 이러한 결정을 내리기 위해 사용하는 전략이 의심스러울 때마다 사용자의 입장에서 실수를 저지르십시오. 그렇지 않으면 혼동될 위험이 있습니다. 단순한 명명법 변경조차도 행동에 대한 기대를 불러일으킵니다. 예를 들어 사용자가 이력서를 '업로드'해야 할까요, 아니면 '첨부'해야 할까요? 업로드와 첨부는 서로 다른 작업이므로 서로 다른 아이콘일 수 있습니다. 인디드에서 하나는 위쪽 화살표 아이콘이고, 다른 하나는 종종 “클립 아이콘”입니다. 당신은 그 경험과 어떤 행동이 일어나고 있는지 생각해 보고 싶을 것입니다. 단계가 있나요? 업로드한 후 첨부하나요? 아이콘을 사용자 작업의 맥락과 가장 잘 일치시키도록 노력하세요. 아이콘만으로는 충분하지 않습니다. 아이콘을 선택할 때 항상 텍스트와 짝을 이루고 아이콘이 다루는 사용 사례를 생각하고 기능을 고려하세요. 이러한 단계는 아이콘 선택 시 혼란스러운 시각적 단서를 생성하는 것을 방지하는 데 도움이 됩니다. 또한 명확한 정보가 제공되면 제품 전환율이 향상되어 제품에 도움이 될 수 있습니다. 이러한 결정을 내릴 때 취해야 할 몇 가지 좋은 조치는 다음과 같습니다. 작업 디자인에서 선택한 명명법을 사용하여 웹사이트 The Noun Project 와 같은 도구가 있는 아이콘을 확인하세요 . 그러면 다른 사람들이 이러한 개념을 시각적으로 어떻게 보는지 상황에 맞게 확인할 수 있습니다. 아이콘이 올바르게 사용되었는지 확인하려면 디자인 시스템에서 아이콘의 이름과 별칭을 살펴보세요. 단지 시각적인 디자인만 보고 선택하지 마세요. 아이콘 선택 시 혼란을 피하기 위해 누가 작업을 수행하고 있으며 예상되는 결과가 무엇인지 이해하세요. 시스템 중심이 아닌 사용자 중심으로 만드세요. 범용 아이콘 과 같이 아이콘 사용에 대해 확립된 패러다임을 활용하세요 . 이러한 범용 아이콘은 검색에 사용되는 '돋보기' 아이콘과 같이 일반적으로 상당히 확립되어 있습니다. 그러나 소수의 아이콘만 사용자가 아이콘이 무엇인지, 어떻게 작동하는지 이해하는 데 설명이 필요하지 않습니다.