UI의 시각적 인식, 아이콘(Icon) vs 카피(Copy)

Design Information/Design Resources

by 김현욱 a.k.a. 마루 2021. 1. 11. 07:00

우리의 눈은 순식간에 엄청난 양의 정보를 얻을 수 있는 강력한 도구입니다. 또한 너무 많은 노력을 기울일 필요가 없습니다. 대부분의 데이터는 무의식적으로 흡수됩니다. 그리고 그것은 시각적 인식 문제를 디자인 영역, 특히 사용자의 문제를 해결하고 요구를 충족시키는 제품 디자인에서 가장 중요한 관심사로 두었습니다.

우리는 인터페이스 아이콘의 가장 중요한 이점을 설명하는 기사에서 아이콘의 역할에 대한 아이디어를 이미 공유했습니다. 오늘의 기사는 Quora의 질문 "UI에서 사람들이 단어보다 아이콘을 더 빨리 인식하는가?"에서 시작된 한 측면을 다루고 있습니다. 우리의 아이디어를 답변으로 공유한 후 독자들을 위해 확장 버전을 제공하기로 결정했습니다.

UI 아이콘 디자인

속도의 측면(The aspect of speed)

시각적 인식은 사람들이 정보를 얻고 그것을 뇌에 의해 처리될 수 있는 가장 생산적이고 빠른 방법 중 하나입니다. 그것은 삶의 많은 측면에 영향을 미치기 때문에 사용자를 위한 제품을 만드는 동안 문제를 무시하는 것은 매우 현명하지 못한 일일 것입니다. 따라서 아이콘과 같은 인터페이스에서 높은 기능성의 시각적 요소를 적용하는 측면과 그것들이 제품의 일반적인 효율성에 미치는 영향이 오랫동안 글로벌 디자인 커뮤니티에서 실제 화제가 된 것도 이 때문입니다.

시각적 지각에 대한 과학적 연구에서, 이론적 분석과 일련의 실제 실험을 거친 후 A. Santella는 다음과 같은 결론을 내렸습니다. “시선 추적이 우리의 맥락에서 어느 정도의 추상화에 충분하다는 사실이 흥미로운 점을 만들어 냅니다. 그것은 추상화, 그리고 아마도 다른 예술적 판단의 기초가 되는 이해는 선견지명이 있는 소수의 불가사의한 능력이 아니라 기본적인 시가적 능력임을 시사합니다. 모든 사람이 그릴 수 있는 것은 아니지만 컴퓨터 렌더링에서 추상화를 제어할 수 있는 것과 같습니다.” 일반적으로 사람들은 시각적 표시를 인식하고, 높은 수준의 추상화 이미지로 변형된 데이터를 인식하고 처리할 수 있는 매우 광범위한 능력을 가지고 있습니다. 이것이 디자이너가 솔루션의 유용성과 탐색 가능성을 개선하기 위해 널리 사용하는 중요한 사실입니다.

만약 디자이너가 아이콘 사용에 관심이 있는 유일한 측면이 속도라면, 원래 질문의 아이디어는 긍정적으로 작용할 것입니다. 그렇습니다. 대부분의 경우 사람들은 단어보다 아이콘 및 일러스트레이션(삽화)과 같은 그림 요소를 더 빨리 수정하고 인식합니다. 대부분의 사용자는 본질적으로 시각적으로 움직이는 생물체들이기 때문에 다음과 같은 시각적 인식의 메커니즘이 종종 작동하고 디자인 프로세스에서 되어야 합니다.

인간의 시각은 글로 쓰여진 텍스트보다 훨씬 빠르게 이미지를 인식합니다.
심리학자들의 주장대로, 사람들은 시각적 장면이나 요소에 대한 일반적인 인식을 얻기 위해 약 1/10초의 시간이 필요합니다(텍스트 항목에서는 그 속도가 실제로 불가능합니다).
비주얼(시각 자료)는 훨씬 빠르게 뇌로 전달되고 중요한 정보는 종종 텍스트 인식을 통해 얻어진 것이라 할지라도 시각 이미지로 뇌에 의해 고정되는 경우가 많습니다.
이미지는 배경 및 주변 요소와 결합하여 덜 취약하지만 텍스트는 가독성 측면에 크게 의존합니다.
이미지는 장기 기억에 더 잘 붙는 경향이 있는데, 이는 인터페이스와의 상호작용에서 사람들이 실제로 필요한 것보다 더 많은 데이터를 처리하고 기억할 필요가 없으므로 상호작용은 더 빨라진다는 것을 의미합니다.

또한 인터페이스의 아이콘과 기타 시각적 개체는 다른 나라의 사람들이 앱이나 웹 사이트를 사용하는 경우에 그것을 더 보편적으로 만들 수 있습니다. 그래서 우리는 아이콘을 사용하는 것이 일반적인 이해력을 향상시킨다고 주장할 수 있습니다. 게다가 사진은 난독증이나 미취학 아동과 같은 문자 인식에 자연적인 문제가 있는 사용자들에게 인식의 한계를 뛰어 넘게 합니다.

탭 모음 상호 작용의 GIF

아이콘이 매우 실용적인 가치를 발휘하는 레이아웃의 인기 요소 중 하나는 탭 바입니다. 대화형 요소를 특징으로 하는 이 제품은 공간 용량이 제한되어 있으므로 사용 가능한 상호작용의 시각적 기호인 아이콘이 효율적인 디자인 솔루션이 됩니다. 위에 제공된 개념은 인터페이스 애니메이션이 시각적 요소를 활성화하고 마이크로 상호작용을 향상시킬 수 있음을 보여줍니다.

날씨 아이콘 프레젠테이션

다음은 아이콘이 시각적 수단으로 사용자에게 필요한 정보를 제공하는 방법을 보여주는 또 다른 예입니다. 기상 조건의 상징적 이미지는 이해하기 쉽고 동시에 많은 공간을 절약하고 화면의 모든 레이아웃을 유익하지만 과부하가 걸리지 않게 만들 수 있는 기회를 제공합니다.

많은 경우 기본 상호작용이 몇 초가 걸리는 사용자 인터페이스에서 이 측면은 매우 중요하며 모든 것을 그래픽 자료로 전환하는 데 필수적인 이유입니다. 위에서 언급한 모든 것들은 제품과 빠르고 쉽게 상호작용하는 도구로서 레이아웃의 시각적 요소(예 : 아이콘)의 큰 이점을 제공합니다. 그러나 최종 디자인 결정을 내리기 전에 분석해야 할 몇 가지 측면이 더 있습니다.

의미의 측면(The aspect of meaning)

Tubik Studio에서 디자인된 다양한 디자인 프로젝트와 컨셉을 바탕으로, 우리는 사용자 인터페이스 레이아웃을 만드는 과정에서 속도가 고려하고 분석하는 유일한 이유가 되어서는 안 된다고 깊이 믿습니다. 사람들은 아이콘을 매우 빠르게 인식할 수 있지만 그들이 전송하는 메시지가 명확하지 않고 이중 읽기가 가능하다면 이 속도는 긍정적인 사용자 경험을 가져다 주지 못할 것입니다. 잘못된 이해를 가져 오는 아이콘의 빠른 캡처는 인식으로 정의할 수 없으며 단지 빠른 인식일 뿐입니다. 인식은 속도뿐 아니라 이 아이콘이 사용자에게 가져다 주는 올바른 행동이나 정보를 의미합니다.

전화 통화용 수화기, 메일용 봉투, 검색용 돋보기 등과 같이 널리 알려진 아이콘이 많이 있습니다. 확실히, 이러한 아이콘을 사용하면 UI 기능 대신 카피를 사용하는 것보다 훨씬 빠르게 인식할 수 있습니다. 그럼에도 불구하고 아이콘의 이미지가 명확하지 않은 경우에는 그 사용법을 신중하게 고려해야 합니다. 아이콘이 목표와 일치하지 않고 할당된 의미라면 인식 속도는 중요하지 않습니다. 그렇기 때문에 텍스트가 아이디어나 데이터를보다 명확하게 전달하는 경우가 있으며 때로는 아이콘이 텍스트로 지원되는 경우 이중 스키마를 사용하는 것이 더 효과적입니다.

iPad 앱 상호작용

다음은 카피와 아이콘의 상호지원을 보여주는 개념입니다. 이 기술은 한 번의 상호작용 중에 여러 가지 인식 요소를 활성화하고 클릭 유도 문안 요소에 대해 더 높은 수준의 인식성을 제공합니다. 아이콘으로 옮겨진 기호를 즉시 이해하는 사람들은 텍스트에 큰 관심을 기울이지 않을 것입니다. 빠른 카피 인식에 문제가 있는 사람들도 마찬가지입니다. 그러나 아이콘과 함께 카피를 사용하면 이미지의 의미를 잘못 해석할 수 있는 사람들에게 오해나 잘못된 상호작용의 위험이 줄어 듭니다.

아이콘이 카피와 함께 자주 사용되는 또 다른 경우는 다양한 사이드 메뉴입니다. 인터페이스 아이콘의 일반적인 스타일 개념에 따라 단순한 획 아이콘에서 정교하고 세부적인 아이콘에 이르기까지 다양한 수준의 복잡성을 암시할 수 있습니다.

블로그앱

이 블로그 앱의 디자인 컨셉은 아이콘이 어떻게 다목적 시각적 요소가 될 수 있는지 보여줍니다. 제시된 인터페이스에서 그들은 블로그 게시물에 대한 카테고리의 제목을 지원합니다. 카테고리의 텍스트 표현은 멋지고 기억에 남는 이미지로 시각적으로 지원됩니다. 동시에 카피는 다른 사용자가 이미지의 다른 의미를 볼 수 있는 가능성을 제거합니다. 또한 이 경우 아이콘은 카테고리에 대한 색상 마커를 제공하는 또 다른 중요한 기능을 지원합니다. 이 기술은 사용자가 앱과의 상호 작용을 더 빠르고 쉽게 만들며 동시에 사용 성과 탐색을 향상시킵니다.

어쨌든 레이아웃에 아이콘, 텍스트 또는 둘 다를 적용하는 결정은 대상 고객에 대한 사려 깊은 분석과 상호작용을 통해 얻어야 하는 목표 및 전환을 이해하는 데 기반해야 합니다.

인터페이스에 아이콘을 적용하는 이유

위에서 언급한 요점을 요약하면 인터페이스에서 아이콘을 사용하는 몇 가지 일반적인 이유를 정의할 수 있습니다.

데이터 인식 속도 향상
시각적 이미지를 통한 요소의 기억력 향상
시각적 마커를 통한 탐색 개선
긴 단어나 문구가 아이콘으로 대체될 때 화면 또는 페이지의 공간 절약
카피 자료 지원 및 추가 시각적 설명 제공
일반적인 문체 개념과 그 조화로운 표현을 넓은 관점에서 지원.

PassFold 프로젝트를 위한 사용자 인터페이스 디자인 솔루션

고려할 사항

분명히 모든 사용자를 만족시키고 기존의 모든 인지 체계를 고려하는 것은 불가능하지만 여전히 시각적 인식이 높은 디자인 측면에서 고려해야 할 몇 가지 일반적인 측면이 있습니다.

대상 청중 (신체적 능력, 연령, 문화적 배경, 일반 개발 및 교육 수준)
일반적인 사용자의 읽기 능력
일반적인 제품 사용 환경
글로벌 또는 로컬 제품 확산 수준
선택한 그래픽에 대한 인식 수준
그래픽이 제공하는주의 산만 / 집중 수준

언급된 모든 요점은 시각적 데이터 인식의 품질과 효율성에 영향을 미치는 인간의 인지 능력을 다룹니다. 디자이너의 경우 다음 사항을 염두에 두는 것이 중요합니다.

사용자가 레이아웃의 요소를 볼 수 있도록 하는 것만으로는 충분하지 않으며, 의미를 인식하고 메시지를 빠르게 이해하도록 만드는 것이 중요합니다. 카피와 아이콘은 어떤 것이 더 강한 지 확인하기 위해 서로 우위를 다투지 않아야 하며 더 나은 사용자 경험을 위해 서로를 지원해야 합니다.

UI 애니메이션 레스토랑 앱 레스토랑 메뉴 GIF