Fill icon VS Outlined icon

아웃라인과 솔리드 아이콘 둘중에 어떤 것이 더 빠르게 인식될까요??

한윤석 (두블링 DOBLING, UI/UX 디자이너)

현재 1년차 주니어에서 미래 프로 디자이너를 꿈꾸는 사람으로써 같은 상황의 모든 신입, 주니어, 초보, 입문, 예비 디자이너들을 위해 매주 제가 경험한 디자인 인사이트를 업로드 합니다.

UI디자인을 하던 중 요즘에 좋아요 아이콘은 더 인식이 쉽도록 oulined 아이콘에서 눌렀을 때 좋아요가 표시됨과 함께 fill로 채워진 solid 아이콘으로 보여진다는 것을 알게되었습니다. 많은 서비스에서 그런식으로 사용을 하더라구요.

그래서 궁금증에 생겼습니다! 과연 사용자들은 fill icon과 oulined icon 중 어떤 것을 먼저 쉽게 인식할까요?

Fill icon VS Oulined icon 중 어떤게 인식이 더 빠를까?

선호도의 문제가 아니다.

아이콘의 기능

저의 의견은 oulined icon이나 solid icon의 아이콘의 유용성에 따라 다를 수 있습니다. 이콘의 모양, 색상 및 기능은 또한 아이콘이 올바르게 인식되는지 여부를 결정합니다.

아이콘들은 기차역, 공항, 호텔, 쇼핑몰 또는 기타 공공 장소에서 흔히 볼 수 있습니다. 아이콘은 사람들에게 지침을 제시하고 텍스트 대신 바로 인지할 수 있는 방향성을 보여줍니다.

아이콘을 사용하는 주요 목적은 다양한 유형의 정보를 빠르게 전달하는 것입니다. 텍스트를 사용하여 모든 개념을 표현할 수 있지만, 사용자가 아이콘을 한 번 보고 메시지를 빠르게 받을 수 있기 때문에 아이콘과 텍스트를 일치시키는 것이 최신 트렌드가 되었습니다. 아이콘은 다른 여러 가지 이유로 인해 사용자 친화적인 것으로 간주됩니다.

Outlined icon

이 oulined icon은 사용자가 특징적인 단서를 쉽게 알아차리거나 이해할 수 있도록 하는 것이 중요하며, 일부 시나리오에서 solid 아이콘과 함께 사용할 때 이러한 단서의 가시성이 증가합니다.

즉, Outlined icon은 디테일하고 세부적인 또 다른 solid 비슷한 아이콘과 겹쳐지지않는 것을 나타낼때 solid icon보다 효과가 좋습니다.

위 이미지처럼 뾰족하고 디테일한 열쇠를 나타낼떄 solid icon보다 효과적입니다.

Solid icon(fill icon)

Solid icon은 물리적 물체를 나타내거나 물리적 물체가 수행한 작업을 나타내는 경우, 아이콘의 '빈' 스타일링 대신 '솔리드' 스타일링을 선택하는 것이 좋다.

최근 연구에 따르면 실제로 우리가 현실에서 사용하는 물리적 물체를 나타내는 아이콘을 사용할때 solid가 효과적이라는 연구결과가 있습니다. 집이나 핸드폰 아이콘입니다.

결론

솔리드 스타일은 솔리드 아이콘이 아웃라인 아이콘보다 더 잘 알아볼 수 있다는 믿음으로 인해 아이콘을 만들 때 아웃라인 스타일링보다 선호됩니다. 이 개념은 일부 시나리오에서 정확할 수 있다. 예를 들어, 이 아이콘들은 사용자의 '작업 속도'를 증가시킬 수 있기 때문에, 더 빠른 인식률을 원한다면 고체 아이콘이 더 유용합니다. 그러나, '아웃라인 아이콘'은 미묘한 특징적인 단서가 있다면 쉽게 알아볼 수 있다. 다양한 유형의 아이콘에 적합한 스타일을 선택할 때 다음 사항을 염두에 두어야 할 수도 있습니다.  

선택된 스타일링은 특징적인 단서를 두드러지고 쉽게 식별할 수 있도록 해야 합니다.

윤곽 아이콘은 더 넓은 내부 간격과 미묘한 단서가 있다면 더 잘 알아볼 수 있습니다.

아이콘의 내부 간격이 좁으면 솔리드 아이콘을 빠르고 쉽게 인식할 수 있습니다.