[UI/UX 원칙 #18] 아이콘 디자인 10가지 UX 원칙 가이드라인

아이콘 디자인 10가지 UX 원칙 가이드라인

닉 바비치의 [아이콘 디자인 10가지 UX 원칙 가이드라인] 소개하고자 합니다.

아이콘은 많은 유저 인터페이스의 기본적인 부분으로, 대상, 액션, 아이디어 등을 시각적으로 표현해줍니다. 제대로 만들면 핵심 아이디어와 제품이나 액션의 의도를 전달해주며, 스크린 상의 공간을 절약해주고 심미적 매력을 높여주는 등 유저 인터페이스에 좋은 이점을 많이 제공해줍니다. 끝으로, 대부분의 앱과 웹사이트에는 아이콘이 있습니다. 사용자에게 익숙한 디자인 패턴이죠.

이러한 장점에도 불구하고, 디자이너가 아이콘 뒤에 숨겨둔 기능을 알아채기 어렵다면 아이콘은 사용성 문제를 일으킬 수 있습니다.

아이콘의 첫 번째 역할은 사용자가 가야 할 곳으로 사용를 안내하는 것이며, 이번 글에서는 그것을 가능하게 하려면 무엇이 필요한지 살펴보겠습니다.

1. 아이콘의 유형

아이콘은 대상, 액션 또는 아이디어를 시각적으로 표현한 것입니다. 만일 그 대상, 액션, 아이디어 자체를 유저가 즉각적으로 분명하게 이해하지 못하면, 아이콘은 ‘시각적 노이즈(visual noise)’가 되어 유저가 태스크를 완료하는 것을 방해하여 못하게 할 것입니다.

아이콘에는 “보편적 아이콘”, “상충되는 아이콘”, “독특한 아이콘” 세 가지 유형이 있습니다. 각 유형과 그것이 사용자 경험에 미치는 영향에 초점을 맞춰봅시다.

1) 보편적 아이콘(Universalicons)  

소수의 아이콘은 사용자들이 거의 보편적으로 알아보는 특권을 누리고 있습니다. 이는 특정 아이콘들이 오랜 시간 동안 반복적으로 사용되었기 때문입니다. 예를 들어, 홈 아이콘, 인쇄 아이콘, 검색 아이콘, 쇼핑 카트 아이콘 등은 많은 웹사이트와 애플리케이션에서 일관되게 사용되어 왔습니다.

이러한 아이콘들은 직관적이고 쉽게 이해할 수 있는 형태로 디자인되어 있어, 사용자들이 특별한 설명 없이도 그 기능을 인식할 수 있습니다. 예를 들어, 홈 아이콘은 일반적으로 집 모양으로 표현되며, 이는 사용자가 '홈' 페이지로 돌아가는 기능을 직관적으로 이해하게 만듭니다.

사용자들이 이러한 아이콘을 인식하고 이해할 수 있는 능력은 사용자 경험을 크게 향상시키며, 인터페이스를 보다 직관적이고 효율적으로 만듭니다. 따라서 보편적으로 인식되는 아이콘을 사용하는 것은 디자인에서 중요한 요소이며, 이는 사용자에게 친숙함과 편리함을 제공하는 데 효과적입니다.

보편적인 아이콘은 소수에 불과하지만, 그 외의 대부분의 아이콘은 모호성을 띠고 있습니다. 이는 다양한 인터페이스와 문화적 배경에 따라 동일한 아이콘이 서로 다른 의미를 가질 수 있기 때문입니다. 예를 들어, 특정 아이콘이 한 웹사이트에서는 '저장'을 의미할 수 있지만, 다른 사이트에서는 '다운로드'를 나타낼 수 있습니다. 이러한 경우, 사용자는 아이콘의 의미를 정확하게 이해하지 못할 수 있으며, 이는 사용자 경험에 혼란을 초래할 수 있습니다.

또한, 아이콘의 디자인이 다르면 동일한 기능에 대한 인식이 달라질 수 있습니다. 예를 들어, '검색' 아이콘이 돋보기 모양으로 일반적으로 사용되지만, 다른 디자인에서는 그 모양이 애매하거나 변형될 수 있어, 사용자가 기능을 혼동할 가능성이 높아집니다.

이처럼 아이콘의 해석이 일관되지 않으면 사용자는 인터페이스에서 원하는 기능을 찾는 데 어려움을 겪고, 결과적으로 사용성이 저하됩니다. 따라서 사용자 인터페이스 디자인에서는 가능한 한 보편적으로 이해되는 아이콘을 사용하는 것이 중요하며, 그 외의 아이콘은 명확한 설명이나 추가적인 시각적 단서를 제공하여 사용자가 혼란을 느끼지 않도록 해야 합니다.

2) 상충된 의미를 가지는 아이콘

문제는 상용되는 픽토그램 중 모순되는 의미를 가진 아이콘을 적용할 때 발생합니다. 하트와 별 모양 아이콘이 좋은 사례로, 이 두 아이콘은 여러 앱에서 다르게 사용되며 각기 다른 기능을 나타냅니다. 예를 들어, 하트 아이콘은 일반적으로 '좋아요' 또는 '즐겨찾기'를 의미하는 반면, 별 아이콘은 '평가' 또는 '북마크'를 나타내는 경우가 많습니다.

이러한 차이로 인해 사용자들은 특정 앱에서 하트와 별 아이콘의 의미를 혼동할 수 있습니다. 같은 아이콘이 다른 맥락에서 서로 다른 기능을 나타내기 때문에, 사용자가 아이콘을 보고 이해하는 데 어려움이 생깁니다. 예를 들어, 어떤 앱에서는 하트가 '좋아요'를 의미하지만, 다른 앱에서는 '저장하기'를 나타낼 수 있습니다.

게다가 하트와 별 아이콘은 서로 경쟁하는 사이이기도 합니다. 같은 기능을 나타내기 위해 두 아이콘이 사용될 경우, 사용자는 어떤 아이콘을 선택해야 할지 혼란스러워질 수 있습니다. 이로 인해 사용자 경험이 저하되고, 사용자가 원하는 기능을 찾는 데 더 많은 시간이 소요될 수 있습니다.

따라서 아이콘의 의미가 일관되지 않고 모순된다면, 인터페이스의 직관성이 떨어지고 사용자에게 불필요한 혼란을 초래할 수 있습니다. 이러한 문제를 해결하기 위해서는 아이콘의 사용 목적을 명확히 하고, 가능하면 동일한 기능에 대해 일관된 아이콘을 사용하는 것이 중요합니다.

여러 의미를 가지고 있는 다른 유명한 아이콘은 다음과 같습니다.

3) 독특한 아이콘

아이콘은 특히 추상적인 개념이나 대상을 표현하는 데 한계가 있습니다. 이는 아이콘이 보통 단순화된 형태로 디자인되기 때문에 강력한 시각적 표현이 부족하기 때문입니다. 추상적인 개념은 구체적인 형태나 색깔로 쉽게 설명하기 어려운 경우가 많아, 아이콘만으로는 그 의미를 명확히 전달하기 힘든 경우가 많습니다.

예를 들어, '행복', '자유', '혁신'과 같은 추상적인 개념을 아이콘으로 표현하려고 할 때, 그 아이콘이 어떤 형태를 가져야 할지 불분명할 수 있습니다. 이러한 개념들은 복잡한 감정이나 상태를 포함하고 있어, 단순한 이미지로는 충분히 전달되지 않을 수 있습니다.

또한, 독특한 대상이나 액션을 설명할 때, 아이콘은 그 대상을 충분히 설명하는 데 필요한 세부 정보를 제공하지 못합니다. 예를 들어, '회의'라는 개념을 아이콘으로 표현하려 할 때, 단순한 사람 아이콘이나 테이블 아이콘만으로는 회의의 맥락이나 중요성을 충분히 전달하기 어렵습니다.

결국, 추상적인 개념이나 독특한 대상을 효과적으로 전달하기 위해서는 아이콘 외에도 텍스트 설명이나 추가적인 시각적 요소가 필요합니다. 이러한 보완 요소들은 사용자가 원하는 정보를 더 명확하게 이해할 수 있도록 도와줍니다. 따라서 아이콘은 구체적인 대상을 표현하는 데 훌륭할 수 있지만, 추상적인 개념을 전달하는 데는 한계가 있다는 점을 인식하는 것이 중요합니다.

예를 들어, 애플이 GameCenter 앱에서 사용한 아이콘은 컬러풀한 원들로 구성되어 있습니다. 이 아이콘이 의미하는 것은 도대체 무엇인가요? 게임과 어떤 관련이 있나요?

또 다른 사례가 있습니다. 구글이 Gmail 인터페이스를 간소화하기로 결정하고 모든 것을 추상적인 아이콘 뒤에 숨겼을 때, 듣자 하니 “구글 캘린더는 어디에 있나요?”와 같은 질문이 쇄도했다고 합니다. 

아이콘이 무엇을 보여주려고 했던 것인지 한 번 알게 되면 아이콘을 완전히 이해할 수 있지만, 처음 이용하는 사용자에게는 이를 이해하는 데 시간이 걸릴 수 있습니다. 이는 사용자가 특정 아이콘의 의미를 알아가는 과정이 필요하기 때문입니다. 처음 사용하는 사람은 아이콘이 가진 의미나 기능을 알지 못하므로, 직관적인 이해가 부족할 수 있습니다.

또한, 처음 이용하는 사용자는 이해할 수 없는 인터페이스 요소를 피하고 싶어합니다. 이는 인간의 본성으로, 사람들은 미지의 것에 대한 불안감이나 두려움을 느끼기 마련입니다. 낯선 아이콘이나 기능이 포함된 인터페이스를 접했을 때, 사용자는 그것이 무엇을 의미하는지 모른 채로 행동하기를 꺼려할 수 있습니다. 이로 인해 사용자는 자신이 알 수 있는 요소만 선택하고, 미지의 요소는 무시하거나 회피하게 됩니다.

결국 이러한 현상은 사용자 경험에 부정적인 영향을 미칠 수 있습니다. 사용자가 인터페이스에서 원하는 정보를 찾지 못하거나 기능을 활용하지 못하는 상황이 발생할 수 있습니다. 따라서 디자인 단계에서부터 아이콘의 명확성을 높이고, 처음 사용하는 사용자에게 직관적으로 이해할 수 있도록 도와주는 요소를 추가하는 것이 중요합니다. 예를 들어, 아이콘 옆에 텍스트 레이블을 추가하거나, 사용자에게 설명을 제공하는 툴팁을 활용하면 이러한 문제를 완화할 수 있습니다.

2. 아이콘 디자인을 위한 실용적인 권장사항

주어진 맥락에 맞는 아이콘 선택을 위한 간단한 테크닉과 전략을 살펴봅시다. 아이콘을 고르는 것은 보통 긴 시간이 걸리는 작업이며, 어떤 선택을 하건 실제 사용자를 대상으로 인터페이스 안에서 아이콘을 테스트하는 것은 매우 중요합니다. 

원칙 1. 추상적이거나 낯선 아이콘을 명확하게 해주기 위해 레이블을 사용한다

아이콘은 텍스트를 줄여줌으로 공간을 절약할 수도 있지만, 그 결과 인식(recognition)을 희생했습니다. 아이콘은 수많은 서로 다른 단어를 표현할 수 있는데, 그게 바로 문제점입니다. 이는 심각한 오해가 될 수 있습니다. 사용자가 추상적인 픽토그램을 익숙해하거나 사용가 그 의미를 알아내는데 부가적인 시간을 들일 것이라고 가정하는 것은 심각한 오해입니다. 

사용자는 보통 익숙하지 않은 인터페이스를 겁내는 경향이 있습니다. 이는 새로운 환경에서의 불확실성과 실패에 대한 두려움 때문입니다. 특히 앱이나 웹사이트에서 사용자들은 특정 액션을 취하기 전에 그 결과가 무엇인지에 대해 명확하게 이해하고 싶어 합니다. 예를 들어, 어떤 버튼이나 아이콘을 클릭했을 때 어떤 일이 일어날지 예측할 수 있어야, 사용자는 안심하고 클릭할 수 있습니다.

이러한 명확한 기대는 사용자가 인터페이스를 탐색하는 데 있어 자신감을 높여줍니다. 만약 사용자가 클릭할 아이콘이나 버튼의 기능을 제대로 이해하지 못한다면, 그들은 불안감을 느낄 수 있으며, 이는 사용 경험을 저해하는 요소가 됩니다. 이러한 불확실성은 사용자가 앱을 포기하거나, 기능을 제대로 활용하지 못하게 만들 수 있습니다.

따라서 디자인 측면에서, 사용자에게 명확한 피드백을 제공하는 것이 중요합니다. 예를 들어, 아이콘에 대한 설명을 추가하거나, 클릭 시 발생할 결과를 미리 알려주는 툴팁을 제공하는 방법이 있습니다. 또한, 아이콘의 디자인이 그 기능을 직관적으로 나타내도록 하는 것도 중요한 요소입니다. 이러한 접근은 사용자가 익숙하지 않은 인터페이스에서도 자신감을 가지고 액션을 취할 수 있도록 도와줍니다. 결과적으로, 명확한 기대를 제공하는 것은 사용자 경험을 향상시키고, 앱에 대한 신뢰를 구축하는 데 도움이 될 것 입니다.

좋은 사용자 경험은 여러 방식으로 측정될 수 있으며, 그 중 하나는 사용자가 얼마나 적게 생각해야 하는지를 평가하는 것입니다. 즉, 사용자가 인터페이스를 사용할 때 복잡한 사고 과정을 거치지 않고도 쉽게 이해하고 사용할 수 있어야 합니다. 이때 명확성(Clarity)은 훌륭한 사용자 인터페이스의 가장 중요한 속성 중 하나로 여겨집니다.

대부분의 아이콘은 그 의미가 모호할 수 있는 특성이 있습니다. 따라서 이러한 모호성을 피하기 위해 텍스트 레이블을 추가하는 것은 매우 효과적입니다. 텍스트 레이블은 아이콘의 기능이나 의미를 특정 맥락에서 명확하게 전달하는 역할을 합니다. 예를 들어, '저장' 아이콘에 단순한 디스크 모양을 추가하는 것만으로는 사용자에게 충분한 정보를 제공하지 못할 수 있지만, '저장'이라는 텍스트 레이블을 함께 제공하면 사용자는 그 아이콘의 기능을 즉각적으로 이해할 수 있습니다.

특히 액션이 복잡하거나 기능이 추상적일 경우, 아이콘만으로는 사용자가 원하는 행동을 명확히 이해하기 어려울 수 있습니다. 예를 들어, '공유' 기능을 나타내는 아이콘은 상황에 따라 다양한 의미를 가질 수 있으며, 사용자가 이 기능을 사용할 때 어떤 결과가 발생할지 예측하기 어려울 수 있습니다. 이럴 때 텍스트 레이블을 사용하면 사용자는 원하는 기능을 보다 쉽게 인식하고, 그에 따른 행동을 결정할 수 있습니다.

결과적으로, 명확성을 높이기 위해 텍스트 레이블을 추가하는 것은 사용자 경험을 향상시키고, 사용자가 인터페이스를 보다 직관적으로 이해하도록 도와주는 중요한 방법입니다. 이는 사용자가 불필요한 고민 없이도 원하는 작업을 수행할 수 있게 하여, 전체적인 사용자 만족도를 높이는 데 도움이 됩니다.

(좌) 레이블 없는 아이콘은 보통 오해하게 만들고 혼선을 야기합니다

(우) 레이블 있는 아이콘은 쉽게 의미를 전달하고 계속해서 이해할 수 있게 해 줍니다.

원칙 2. 아이콘만으로 충분한 경우

모든 사용자가 관습적으로 이용되는 아이콘을 익숙해 하는 것은 아닙니다. 이는 아이콘만 있는 인터페이스를 잠재적으로 더 이용하기 어렵게 만듭니다. 반면 경험이 풍부한 사용는 텍스트 레이블이 어디에나 있는 인터페이스를 지저분하다고 생각할 수 있습니다. 우리는 어떻게 해야 모두를 행복하게 할 수 있을까요? 

다음 세 가지 조건 중 최소 두 가지 조건에 해당하는 경우에만 아이콘만 써도 충분합니다.

(1) 공간이 매우 제한적이다 (예: 텍스트만 넣기엔 너무 좁다)

"공간이 매우 제한적이다"는 상황에서, 아이콘이나 시각적 요소의 사용이 필수적이라는 의미입니다. 예를 들어, 모바일 앱의 인터페이스나 웹사이트의 작은 버튼 영역에서는 텍스트를 넣기에는 공간이 부족할 수 있습니다. 이럴 경우, 단순한 텍스트 대신 아이콘을 활용하는 것이 효과적입니다.

텍스트가 너무 길거나 복잡하면, 공간이 제한된 곳에 넣기 어려워 사용자가 정보를 완전히 이해하기 힘들어질 수 있습니다. 반면, 아이콘은 간단한 형태로 특정 의미를 전달할 수 있어, 제한된 공간에서도 명확한 정보를 제공합니다. 예를 들어, '설정'이라는 긴 단어 대신 기어 아이콘을 사용하면, 공간을 절약하면서도 사용자가 그 기능을 즉시 인식할 수 있습니다.

또한, 아이콘은 시각적으로 빠르게 인식될 수 있어 사용자 경험을 향상시키는 데 효과적입니다. 사용자는 아이콘을 통해 즉각적으로 기능을 이해할 수 있으므로, 공간이 제한된 환경에서도 효과적으로 정보를 전달할 수 있습니다.

결론적으로, 공간이 제한적일 때 아이콘을 사용하는 것은 사용자에게 필요한 정보를 간결하게 전달하면서도, 전체적인 인터페이스의 가독성과 사용성을 높이는 중요한 방법입니다.

(2) 아이콘이 표준화되어 있다 (예: 보편적 아이콘)

"아이콘이 표준화되어 있다"는 것은 특정 아이콘들이 여러 플랫폼이나 애플리케이션에서 일관되게 사용된다는 의미입니다. 예를 들어, 하트 아이콘은 '좋아요'를, 돋보기 아이콘은 '검색'을 나타내는 등, 이러한 보편적 아이콘들은 사용자에게 친숙함을 제공합니다.

표준화된 아이콘은 사용자 경험을 향상시키는 데 중요한 역할을 합니다. 사용자는 다양한 앱이나 웹사이트에서 동일한 아이콘을 보게 되면, 그 기능을 쉽게 이해하고 활용할 수 있습니다. 이는 사용자가 새로운 인터페이스를 접할 때 필요한 학습 시간을 줄여주고, 직관적으로 기능을 인식할 수 있게 합니다.

또한, 표준화된 아이콘은 디자인의 일관성을 유지하는 데도 기여합니다. 여러 플랫폼에서 같은 아이콘을 사용하면, 사용자에게 일관된 시각적 경험을 제공하고, 인터페이스의 통일성을 높여줍니다. 이는 브랜드 인지도와 신뢰성을 증대시키는 데도 긍정적인 영향을 미칩니다.

결국, 아이콘의 표준화는 사용자가 다양한 환경에서 쉽게 기능을 이해하고 사용할 수 있도록 도와주며, 전체적인 사용자 경험을 개선하는 데 중요한 요소입니다.

(3) 아이콘이 강력한 신체적 아날로그 혹은 시각적 속성으로 대상을 표현한다 

아이콘이 강력한 신체적 아날로그 혹은 시각적 속성으로 대상을 표현한다는 것은, 아이콘이 특정 대상을 직관적으로 나타내는 데 효과적이라는 의미입니다. 예를 들어, 페이지의 배경을 빨강으로 설정할 수 있는 빨간 사각형 아이콘은 그 자체로 색상과 형태를 통해 사용자가 어떤 기능을 수행할 수 있는지를 명확히 전달합니다.

이러한 시각적 속성은 사용자에게 즉각적인 이해를 가능하게 합니다. 빨간 사각형 아이콘은 색상과 모양이 조화를 이루어, 사용자가 이 아이콘이 '배경 색상을 빨강으로 변경하는 기능'을 나타낸다는 것을 쉽게 인식할 수 있습니다. 이는 사용자가 복잡한 설명이나 추가적인 정보 없이도 아이콘의 의미를 직관적으로 이해하게 해줍니다.

또한, 강력한 시각적 속성은 사용자가 인터페이스에서 원하는 기능을 빠르게 찾고 사용할 수 있도록 도와줍니다. 시각적으로 분명한 아이콘은 사용자에게 명확한 지침을 제공하며, 이를 통해 사용자는 원하는 작업을 보다 효율적으로 수행할 수 있습니다. 이는 전반적인 사용자 경험을 향상시키고, 사용자가 인터페이스에 대한 자신감을 가질 수 있도록 합니다.

결론적으로, 아이콘이 강력한 신체적 아날로그 혹은 시각적 속성으로 대상을 표현하는 것은 사용자가 기능을 쉽게 이해하고 활용할 수 있도록 도와주는 중요한 요소입니다.

원칙 3. 아이콘의 툴팁이나 팝오버

어떤 디자이너는 레이블이 아이콘의 목적을 무효화하고 인터페이스를 복잡하게 만든다고 믿는 경향이 있습니다. 이들은 아이콘이 그 자체로 충분히 직관적이어야 하며, 추가적인 텍스트가 필요하지 않다고 생각합니다. 따라서 레이블 사용을 피하기 위해 툴팁을 활용하는 경우가 많습니다. 툴팁은 사용자가 마우스를 아이콘 위에 올렸을 때 나타나는 짧은 설명으로, 아이콘의 의미를 보완하는 역할을 합니다.

그러나 툴팁은 텍스트 레이블의 좋은 대안이 아닙니다. 툴팁은 사용자가 아이콘에 마우스를 올려야만 나타나기 때문에, 즉각적인 정보 제공이 어렵습니다. 사용자가 아이콘을 클릭하거나 탭하기 전에 그 기능을 미리 알기 힘들어, 불안감이나 혼란을 초래할 수 있습니다. 반면, 텍스트 레이블은 아이콘 옆에 항상 표시되어 있어, 사용자가 기능을 즉시 인식하고 이해할 수 있도록 도와줍니다.

또한, 텍스트 레이블은 아이콘이 전달하고자 하는 메시지를 명확히 하는 데 매우 효과적입니다. 간단한 아이콘이 여러 의미로 해석될 수 있는 경우, 텍스트 레이블은 그 의미를 분명히 해줍니다. 예를 들어, '공유' 아이콘이 여러 상황에서 사용될 수 있지만, '공유'라는 레이블이 함께 제공되면 사용자는 그 기능을 즉시 이해할 수 있습니다.

결론적으로, 텍스트 레이블은 툴팁보다 사용자가 인터페이스를 보다 직관적으로 이해할 수 있도록 도와주는 중요한 요소입니다. 이는 사용자 경험을 향상시키고, 불필요한 혼란을 줄이는 데 기여합니다.

툴팁의 또 다른 주요 단점은 터치스크린에서 제대로 보이지 않거나 활용하기 어려운 점입니다. 터치스크린에서는 사용자가 마우스를 사용하지 않기 때문에, 아이콘 위에 손가락을 올려놓는 것만으로는 툴팁이 나타나지 않습니다. 이로 인해 사용자는 아이콘의 의미나 기능을 즉각적으로 알 수 없어, 인터페이스를 탐색하는 데 어려움을 겪게 됩니다.

튜토리얼, 코치 마크, 팝오버 힌트와 같은 다른 기술들은 사용자에게 기능을 설명하는 데 종종 사용됩니다. 하지만 이러한 방식도 한계가 있습니다. 많은 사용자들은 튜토리얼을 대충 빠르게 넘기고, 그 과정에서 중요한 정보나 기능을 제대로 이해하지 못하게 됩니다. 결과적으로, 다음에 앱을 사용할 때 이전에 배웠던 내용을 잊어버리는 경우가 많습니다.

이러한 현상은 사용자 경험을 저해하는 요소가 됩니다. 사용자가 필요한 정보를 기억하지 못하면, 앱 사용이 불편해지고, 결국 앱을 떠나게 되는 원인이 될 수 있습니다. 따라서, 효과적인 사용자 인터페이스 디자인에서는 툴팁이나 튜토리얼에 의존하기보다는, 아이콘과 기능을 보다 직관적으로 이해할 수 있도록 돕는 방법이 필요합니다.

결론적으로, 터치스크린 환경에서의 툴팁의 제한성과 사용자 튜토리얼의 비효율성은 사용자 경험을 저해할 수 있으며, 따라서 보다 명확하고 지속적인 정보 제공이 중요합니다.

원칙 4. 아이콘과 버튼 레이블

레이블을 수반하는 아이콘은 적절한 위치에 배치할 경우 정보를 찾고 훑어보는 데 매우 유용합니다. 이는 사용자가 인터페이스를 탐색할 때, 시각적으로 직관적인 흐름을 제공하기 때문입니다. 아이콘과 레이블이 함께 있을 때, 사용자는 아이콘의 기능을 즉시 이해할 수 있으며, 필요한 정보를 빠르게 찾을 수 있습니다.

또한, 자연스러운 읽는 순서에 따라 아이콘을 배치하는 것은 사용자의 시각적 경험을 최적화하는 데 중요합니다. 일반적으로 사람들은 왼쪽에서 오른쪽, 위에서 아래로 읽는 경향이 있습니다. 이 원리를 활용하여 아이콘을 배치하면 사용자는 자연스럽게 시선을 이동시키면서 원하는 정보를 쉽게 찾을 수 있습니다. 예를 들어, 자주 사용하는 기능이나 옵션을 상단 또는 왼쪽에 배치하면 사용자가 처음부터 끝까지 훑어보는 과정에서 쉽게 발견할 수 있습니다.

이러한 디자인 접근은 사용자가 인터페이스를 탐색할 때 불필요한 혼란을 줄이고, 직관적인 경험을 제공합니다. 사용자는 아이콘의 위치와 레이블을 통해 어떤 기능이 어디에 있는지를 쉽게 이해할 수 있으며, 이는 전반적인 사용자 만족도를 높이는 데 효과적 입니다.

아이콘을 시각적으로 스캐닝하는 데 도움이 되도록 디자인하려면, 사용자가 관련된 레이블을 보기 전에 먼저 아이콘을 인식할 수 있어야 합니다. 이를 위해 아이콘을 레이블의 좌측에 배치하는 것이 효과적입니다. 이렇게 하면 사용자는 자연스럽게 왼쪽에서 오른쪽으로 시선을 이동시키면서 먼저 아이콘을 보고, 그 다음에 레이블을 읽게 됩니다.

이러한 배치는 사용자가 아이콘의 시각적 속성을 빠르게 인식하고, 해당 기능을 이해하는 데 필요한 시간을 줄여줍니다. 아이콘이 시각적으로 눈에 띄게 배치되면, 사용자는 그 기능이 무엇인지 즉각적으로 파악할 수 있으며, 레이블은 그 기능에 대한 추가 정보를 제공하는 역할을 합니다. 이 과정은 정보 탐색의 효율성을 높이고, 사용자 경험을 개선하는 데 효과적 입니다.

아이콘을 왼쪽에 배치함으로써 사용자는 시각적으로 더 일관된 흐름을 경험하게 됩니다. 이는 사용자가 인터페이스를 스캔할 때 혼란을 줄이고, 필요한 정보를 더 빠르게 찾을 수 있도록 도와줍니다. 결과적으로, 아이콘과 레이블의 올바른 배치는 사용자에게 직관적인 경험을 제공하며, 앱이나 웹사이트의 전반적인 사용성을 향상시키는 데 중요한 요소입니다.

또한, 아이콘을 헤딩과 바디 중간에 정렬하지 말고 헤딩과 같은 줄에 배치해야 하는 이유는 사용자의 시각적 인식을 최적화하는 데 있습니다. 헤딩과 같은 줄에 아이콘을 배치하면, 사용자는 페이지를 훑어볼 때 자연스럽게 두 요소를 함께 인식할 수 있습니다.

이러한 배치는 정보의 구조를 명확히 하고, 사용자가 원하는 내용을 쉽게 찾도록 도와줍니다. 헤딩과 아이콘이 수평으로 정렬되면, 사용자는 헤딩을 보고 그에 관련된 아이콘을 즉시 확인할 수 있어, 기능이나 내용을 빠르게 이해할 수 있습니다. 이는 정보 탐색의 효율성을 높이고, 사용자가 페이지를 더 쉽게 훑어볼 수 있게 합니다.

반면, 아이콘이 헤딩과 바디 중간에 배치될 경우, 사용자는 시각적으로 혼란스러움을 느낄 수 있습니다. 이로 인해 정보의 관계를 명확히 파악하기 어려워지고, 페이지를 탐색하는 데 시간이 더 걸리게 됩니다.

결론적으로, 아이콘을 헤딩과 같은 줄에 배치함으로써 사용자는 더 직관적이고 효율적인 정보 탐색 경험을 하게 되며, 이는 전반적인 사용자 경험을 개선하는 데 중요한 요소입니다.

원칙 5. 데이터 표에서 사용하는 아이콘

세로로 숫자가 포함된 표는 데이터를 정리하고 시각적으로 표현하는 데 있어 매우 중요한 도구입니다. 이러한 표에서 각 숫자 값이 지니는 의미를 직관적으로 이해하기 위해, 아이콘을 활용하는 것이 효과적입니다. 아이콘은 숫자의 의미를 쉽게 전달하는 역할을 합니다. 예를 들어, 긍정적인 값을 나타내는 웃는 얼굴 아이콘, 중간 정도의 값을 나타내는 보통의 얼굴, 부정적인 값을 나타내는 우는 얼굴 아이콘을 사용하면, 사용자는 표를 한눈에 보고 각 값의 상태를 신속하게 파악할 수 있습니다.

아이콘의 사용은 데이터 분석에 필요한 시간을 단축시키는 데도 효과적입니다. 숫자만을 바라볼 때는 해석 과정이 필요하지만, 아이콘이 함께 제공된다면 사용자는 즉각적으로 그 의미를 이해할 수 있습니다. 또한, 아이콘은 다양한 언어와 문화에서 공통적으로 이해될 수 있는 시각적 요소로 작용하여, 더 많은 사람들이 데이터를 쉽게 인식하고 논의할 수 있게 합니다. 특히, 특정 값이 부정적일 경우 경고 아이콘을 사용함으로써 사용자의 주의를 끌 수 있으며, 이는 문제를 신속하게 인지하고 대응할 수 있도록 돕습니다.

따라서, 세로로 숫자가 포함된 표에 아이콘을 추가하는 것은 데이터의 가독성과 이해도를 높이는 데 매우 유용하다고 할 수 있습니다.

아이콘의 배치는 또한 중요한 의미를 지닙니다. 왼쪽과 오른쪽의 위치에 따라 각각 다른 메시지를 전달할 수 있습니다. Don Nickel의 설명에 따르면, 왼쪽에 위치한 아이콘은 데이터의 의도(intent)를 나타내며, 오른쪽에 위치한 아이콘은 데이터의 특성(quality)을 나타냅니다. 왼쪽 아이콘은 숫자가 어떤 목적이나 의미를 내포하고 있는지를 보여줍니다. 예를 들어, 목표 달성을 나타내는 아이콘이 숫자 왼쪽에 위치할 경우, 사용자는 해당 숫자가 어떤 목표와 관련이 있는지를 쉽게 이해할 수 있습니다. 이는 사용자가 데이터를 해석할 때, 어떤 행동이나 결정을 내릴 수 있는 힌트를 제공합니다.

반면, 오른쪽 아이콘은 숫자의 품질이나 상태를 나타냅니다. 성과의 좋고 나쁨을 보여주는 아이콘이 숫자 오른쪽에 있을 경우, 사용자는 해당 숫자의 상태를 즉각적으로 인식할 수 있습니다. 이는 데이터의 신뢰성이나 유용성을 평가하는 데 도움을 주며, 사용자가 데이터를 기반으로 한 판단을 내릴 때 유용합니다. 왼쪽과 오른쪽 아이콘을 함께 사용하면 데이터의 전체적인 맥락을 보다 명확하게 전달할 수 있으며, 왼쪽 아이콘이 의도를 설정하고 오른쪽 아이콘이 그 의도에 대한 결과나 품질을 나타내므로, 데이터의 의미가 더욱 풍부해집니다.

아이콘의 배치가 자연스러운 읽는 순서를 따라야 하는 이유는 여러 가지가 있습니다. 우선, 사용자 경험(UX) 측면에서 보면, 사용자가 정보를 읽고 해석하는 과정에서 자연스러운 흐름을 유지하는 것이 매우 중요합니다. 아이콘이 읽는 순서에 맞춰 배치되면 사용자는 정보를 더 쉽게 이해하고 기억할 수 있습니다. 특히, 왼쪽에서 오른쪽으로 읽는 문화권에서는 아이콘이 왼쪽에 위치할 때 더 직관적으로 받아들여집니다.

또한, 정보의 일관성도 중요합니다. 일관된 배치 방식은 사용자가 데이터를 해석할 때 혼란을 줄이고, 정보를 빠르게 처리할 수 있도록 돕습니다. 버튼 레이블과 아이콘이 같은 방향으로 정렬될 경우 사용자는 그 관계를 쉽게 파악할 수 있습니다. 아이콘과 텍스트의 배치가 자연스러운 읽기 흐름을 따르게 되면, 사용자의 시선이 자연스럽게 이동하며, 이는 정보의 전달을 매끄럽게 하여 사용자가 필요한 정보를 신속하게 찾는 데 도움을 줍니다.

마지막으로, 인지적 부담을 감소시키는 측면에서도 자연스러운 흐름이 중요합니다. 정보 읽기가 자연스러운 흐름을 따르지 않을 경우 사용자는 추가적인 인지적 노력을 필요로 하게 됩니다. 아이콘이 잘못 배치되면 사용자는 그 의미를 해석하는 데 혼란을 느낄 수 있으므로, 따라서 자연스러운 순서를 따르는 것이 필수적이라고 할 수 있습니다. 이러한 이유들로 인해, 아이콘의 배치는 데이터를 효과적으로 전달하는 데 있어 매우 중요한 요소이며, 사용자가 숫자의 의미를 명확히 이해할 수 있도록 돕는 역할을 하게 됩니다.

아이콘 배치에는 두 가지 가능한 방법이 있습니다.

1) 상태(Status) 아이콘은 줄 제일 끝에 보여야 합니다.

아래 예시 화면에서 볼 수 있듯, 사용자는 주제(subject)를 먼저 보고 그다음에 관련된 값을 본 다음에 최종적으로 값의 상태(status of the value)를 보게 됩니다. 

(1) 정보의 우선순위

사용자는 정보를 읽을 때 자연스럽게 주제(subject)부터 시작하여 관련된 값(value)으로 이동합니다. 이 과정에서 주제의 의미를 이해하고, 그에 따른 값을 확인한 후, 최종적으로 해당 값의 상태를 판단하게 됩니다. 상태 아이콘을 줄의 끝에 두면, 사용자는 정보를 체계적으로 소화할 수 있습니다.

(2) 읽기 흐름의 자연스러움

일반적으로 왼쪽에서 오른쪽으로 읽는 문화권에서는 정보의 흐름이 자연스럽습니다. 주제와 값이 먼저 제시된 후, 마지막에 상태 아이콘이 위치하면 사용자의 시선이 자연스럽게 이동합니다. 이는 정보의 전달을 매끄럽게 하여 사용자가 이해하기 쉽게 만듭니다.

(3) 의사 결정 지원

상태 아이콘은 주제와 값이 주어진 후에 사용자가 최종 결정을 내리는 데 필요한 정보를 제공합니다. 이 순서를 통해 사용자는 주제와 관련된 맥락을 먼저 이해하고, 그 후에 값의 상태를 확인하여 판단을 내릴 수 있습니다. 이는 정보의 해석을 더 명확하게 합니다.

(4) 시각적 강조

상태 아이콘이 줄의 끝에 위치함으로써, 사용자는 그 아이콘에 더 많은 주의를 기울일 수 있습니다. 주제와 값이 먼저 제공되면, 마지막 상태 아이콘은 사용자의 주의를 집중시키고, 해당 값의 중요성을 강조하는 역할을 합니다.

2) 아이콘 자체가 주제(subject)라면, 줄 앞 쪽에 보이고, 나머지는 그다음에 보여야 합니다.      

(1) 주제의 명확한 식별

아이콘이 주제를 나타낼 때, 이를 줄의 시작 부분에 배치함으로써 사용자는 해당 정보의 주제를 즉각적으로 인식할 수 있습니다. 주제가 명확하게 드러나면, 사용자는 이어지는 내용이 무엇에 관한 것인지 쉽게 이해할 수 있습니다.

(2) 정보 구조의 논리성

정보는 일반적으로 주제에서 시작하여 그에 대한 세부 사항으로 이어지는 구조를 가집니다. 주제를 아이콘으로 표현하면, 사용자는 그 주제에 대한 관련 정보를 자연스럽게 이어서 읽어 나갈 수 있습니다. 이는 정보의 체계적이고 논리적인 흐름을 지원합니다.

(3) 즉각적인 시각적 인식

사용자는 아이콘을 통해 정보를 빠르게 인식할 수 있습니다. 주제 아이콘이 앞에 위치하면, 사용자는 그에 따른 값이나 세부 사항을 읽기 전에 주제를 먼저 받아들일 수 있어, 전체적인 맥락을 이해하는 데 도움을 줍니다.

(4) 직관적인 정보 전달

주제 아이콘이 줄의 앞쪽에 있을 때, 사용자는 그 정보가 어떤 주제와 관련되어 있는지를 즉각적으로 파악하게 됩니다. 이는 정보의 직관성을 높여 사용자가 필요로 하는 정보를 더 쉽게 찾을 수 있도록 합니다.

(5) 우선순위의 명확화

주제 아이콘이 줄의 앞쪽에 있으면, 정보의 우선순위가 명확해집니다. 이는 사용자가 주제와 관련된 모든 정보를 중점적으로 고려하게 하며, 나머지 값이나 세부 사항이 그 주제를 보완하는 역할을 하게 됩니다.

원칙 6. 아코디언 메뉴의 아이콘

아코디언 메뉴는 긴 리스트를 관리 가능한 그룹으로 줄여주는 UI패턴입니다. 내비게이션 메뉴에서 쓰기에 유용하며 특히 검색 필터에 쓰면 좋습니다.

(1) 공간 효율성

아코디언 메뉴는 사용자가 선택한 항목에 따라 내용을 확장하거나 축소할 수 있도록 해줍니다. 이로 인해 화면 공간을 절약할 수 있으며, 긴 리스트를 한 번에 보여주지 않고 필요한 정보만 표시함으로써 사용자가 시각적으로 혼란을 느끼지 않도록 합니다.

(2) 정보의 계층적 구조

아코디언 메뉴는 정보를 계층적으로 구성할 수 있게 해줍니다. 사용자는 상위 카테고리를 클릭하여 하위 항목을 펼쳐 볼 수 있으며, 이는 정보의 조직화를 돕고 사용자가 원하는 정보를 더 쉽게 찾도록 지원합니다. 이러한 구조는 내비게이션 메뉴에서 특히 유용합니다.

(3) 사용자 경험 개선

긴 리스트를 아코디언 메뉴로 제시하면 사용자는 원하는 카테고리만 쉽게 접근할 수 있습니다. 이는 사용자의 탐색 과정을 단순화하고, 필요한 정보를 더 빠르게 찾을 수 있도록 돕습니다. 특히 검색 필터와 결합할 경우, 사용자는 필터 옵션을 간편하게 조작할 수 있습니다.

(4) 상호작용의 직관성

아코디언 메뉴는 클릭 또는 터치와 같은 간단한 상호작용을 통해 내용을 확장하고 축소할 수 있어 사용자가 쉽게 사용할 수 있습니다. 이러한 직관적인 인터페이스는 사용자에게 긍정적인 경험을 제공합니다.

(5) 집중력 유지

아코디언 메뉴는 한 번에 많은 정보를 보여주지 않으므로 사용자가 산만해지지 않고, 필요한 정보에 집중할 수 있도록 합니다. 이는 특히 검색 필터를 사용할 때 유용하여, 사용자가 원하는 조건에 맞는 결과를 빠르게 찾아볼 수 있게 합니다.

아코디언 메뉴를 이용할지 말지 결정하는 것 외에도 디자이너들이 보통 아코디언 메뉴를 디자인하면서 힘들어하는 부분이 있습니다. 가장 흔히 하는 질문은 다음과 같습니다.

Lance Gutin은 다양한 유형의 아이콘(V형 아이콘, +- 아이콘, 세모 아이콘)과 위치(왼쪽, 오른쪽)를 가지고 실험을 했습니다. 3가지 아이콘과 2가지 위치, 그리고 아이콘이 없는 경우를 가지고 살펴볼 아이콘을 총 7가지로 만들었습니다.  

결과를 분석하면서 그는 두 가지 중요한 결과를 언급했습니다.

(1) 사용자 선호도

많은 사용자들이 텍스트 레이블보다는 아이콘을 선택하는 경향이 있었는데, 이는 아이콘이 시각적으로 더 매력적이고 직관적이기 때문일 수 있습니다. 아이콘은 빠르게 인식할 수 있는 정보 전달 수단으로 작용하여, 사용자가 원하는 기능을 더욱 쉽게 찾도록 돕습니다.

(2) 기능 간 혼동

일부 사용자는 아이콘과 레이블이 서로 다른 기능을 한다고 인식했을 가능성이 있습니다. 아이콘이 기능을 대표하는 반면, 레이블은 추가적인 정보를 제공하는 것으로 여겨질 수 있습니다. 이러한 혼동은 사용자가 원하는 기능을 선택하는 데에 어려움을 초래할 수 있습니다.

(3) 아이콘 크기와 간격

아이콘이 작은 사이즈로 제공되고, 텍스트 레이블과 아이콘 사이의 간격이 좁으면 사용자는 명확하게 기능을 구분하기 어렵습니다. 이는 사용자가 아이콘을 클릭하거나 선택하는 데 있어 불편함을 느끼게 하여, Task 완료에 소요되는 시간이 증가하게 만듭니다. 특히, 작은 클릭 영역은 실수로 다른 항목을 선택하게 만들 수 있습니다.

(4) 작업 수행 시간 증가

아이콘이 우측에 위치한 아코디언 메뉴를 사용할 때, 사용자는 아이콘과 레이블 간의 관계를 파악하는 데 추가적인 인지적 노력을 기울여야 합니다. 이로 인해 사용자는 원하는 기능을 찾는 데 시간이 더 걸리게 되고, 결과적으로 작업 수행 속도가 느려집니다. 즉, 사용자는 아이콘의 기능을 인식하고 선택하는 과정에서 더 많은 시간을 소모하게 됩니다.

(1) 직관적인 접근성

좌측에 배치된 + 아이콘은 사용자가 메뉴를 확장하려는 의도를 즉각적으로 인식할 수 있도록 도와줍니다. 왼쪽에서 오른쪽으로 읽는 문화권에서는 사용자가 정보를 왼쪽에서 시작하기 때문에, 아이콘이 왼쪽에 있을 때 더 자연스럽고 직관적으로 느껴집니다. 이는 사용자가 메뉴를 빠르게 찾아보고 선택하는 데 도움을 줍니다.

(2) 기대감 및 예측

참가자의 90%가 메뉴가 바뀔 것임을 예상한 것은, 좌측에 있는 + 아이콘이 메뉴의 확장 또는 변경을 암시하는 역할을 하기 때문입니다. 사용자는 아이콘의 위치와 모양을 통해 메뉴의 동작을 직관적으로 이해할 수 있으며, 이는 사용자의 기대감을 높입니다. 기대감이 높아지면 사용자는 더 빠르게 반응할 가능성이 있습니다.

정리하면

이 연구 결과가 우리 모두 아코디언 메뉴에서 좌측에 배치된 +아이콘을 사용해야 한다는 의미는 아니라는 것을 알아야 합니다. 다만, 우측에 아이콘을 때는 충분히 큰 사이즈(최소 44x44 픽셀)로 아이콘을 만들어서 손가락이나 마우스로 누르기 쉽게 만들어야 합니다.  

(1) 사용자 편의성

아이콘의 크기가 적절하게 설정되면 사용자가 손가락이나 마우스로 클릭하기가 쉬워집니다. 특히 모바일 환경에서는 손가락으로 정확하게 클릭할 수 있는 영역이 중요합니다. 최소 44x44 픽셀의 크기는 일반적으로 사용자들이 클릭할 때 실수를 최소화할 수 있는 기준으로 알려져 있습니다.

(2) 접근성과 가독성

충분히 큰 아이콘은 시각적으로도 더 잘 인식할 수 있습니다. 작은 아이콘은 사용자에게 불편함을 주고, 클릭하기 어려워 사용자의 경험을 저하시킬 수 있습니다. 따라서, 우측에 아이콘을 두더라도 명확하고 쉽게 인지할 수 있도록 설계하는 것이 중요합니다.

(3) 일관된 사용자 경험

좌측 아이콘이 아닌 우측 아이콘을 선택할 경우, 사용자 경험의 일관성을 유지하기 위해 크기와 디자인이 중요합니다. 사용자가 다양한 메뉴에서 아이콘을 쉽게 인식하고 사용할 수 있도록 하고, 아이콘의 위치에 따라 다르게 느끼는 불편함을 줄이는 것이 필요합니다.

(4) 상호작용의 직관성

아이콘의 크기가 충분할 경우, 사용자는 메뉴의 기능을 보다 직관적으로 인식할 수 있습니다. 이는 사용자가 메뉴를 탐색하는 동안의 불확실성을 줄여주며, 아이콘이 제대로 작동할 것이라는 신뢰감을 제공합니다.

(5) 디자인의 유연성

좌측 아이콘이 더 선호된다는 연구 결과에도 불구하고, 사용자는 다양한 디자인 선택을 고려해야 합니다. 우측에 아이콘을 배치할 경우, 그에 맞는 최적의 크기와 형태를 선택함으로써 사용자의 편의성을 높일 수 있습니다. 이는 다양한 사용자 요구를 충족시키는 데 효과적입니다.

원칙 7. 햄버거 아이콘을 조심한다

세 개의 가로 줄로 된 일명 “햄버거” 아이콘은 메인 메뉴 버튼으로 관습처럼 사용되고 있습니다. 특히 모바일 웹사이트에서 많이 사용됩니다. 

하지만, 햄버거 아이콘을 이용할지 말지 결정할 때는 두 가지 중요한 요인을 고려해야 합니다.

(1) 세대 간 기술 친숙도

햄버거 아이콘은 모바일 사용자 인터페이스 디자인에서 널리 사용되는 요소로, 주로 젊은 세대가 자주 접하는 디자인 패턴입니다. 반면, 나이가 많은 사용자들은 이러한 디자인에 익숙하지 않을 수 있습니다. 이로 인해 나이가 많은 사용자가 햄버거 아이콘의 기능을 인식하는 데 어려움을 겪을 수 있습니다.

(2) 기술 채택의 차이

나이가 많은 사용자들은 디지털 기술의 발전 속도에 적응하기 어려운 경우가 많습니다. 이들은 전통적인 내비게이션 방식에 익숙할 수 있으며, 햄버거 아이콘과 같은 새로운 UI 요소를 이해하는 데 시간이 걸릴 수 있습니다. 따라서, 이들 사용자에게는 햄버거 아이콘이 직관적이지 않을 수 있습니다.

(3) 사용성 및 접근성

사용성이 중요한 디자인 요소로, 사용자가 쉽게 이해하고 사용할 수 있어야 합니다. 만약 특정 그룹의 사용자가 햄버거 아이콘을 인지하지 못한다면, 이는 사용성 문제로 이어질 수 있습니다. 따라서 나이가 많은 사용자를 포함한 다양한 사용자 집단이 어떤 디자인 요소에 익숙한지를 이해하는 것이 중요합니다.

(4) 사용자 조사 필요성

사용자 집단의 특성을 이해하기 위해, 여러분의 사용자가 누구인지 물어보는 것이 필요합니다. 이를 통해 디자인 결정이 실제 사용자 경험에 기반할 수 있도록 할 수 있습니다. 예를 들어, 젊은 사용자들만을 대상으로 한 디자인은 나이가 많은 사용자에게는 불편함을 초래할 수 있습니다.

(5) 디자인 최적화

사용자의 연령대에 따라 디자인 패턴을 조정하면, 모든 사용자가 쉽게 접근하고 이해할 수 있는 인터페이스를 만들 수 있습니다. 나이가 많은 사용자를 고려하여 햄버거 아이콘 대신 더 직관적인 내비게이션 방법을 선택하는 것이 바람직할 수 있습니다.

(1) 아이콘의 인식 문제

햄버거 아이콘은 직관적인 디자인 요소로 여겨지지만, 모든 사용자에게 동일하게 인식되지는 않습니다. 특히, 사용자가 햄버거 아이콘이 무엇을 의미하는지 명확히 이해하지 못하는 경우가 많습니다. 닐슨 노먼 그룹의 연구는 이러한 아이콘이 사용자에게 혼란을 줄 수 있다고 합니다. 

(2) 레이블의 필요성

햄버거 아이콘은 시각적으로 매력적일 수 있지만, 그 자체로는 기능을 명확하게 전달하지 못합니다. 레이블을 추가함으로써 사용자는 그 아이콘이 어떤 기능을 수행하는지를 즉각적으로 이해할 수 있게 됩니다. "메뉴"라는 단어를 사용하면, 사용자가 클릭했을 때 어떤 결과를 기대할 수 있는지를 명확하게 전달할 수 있습니다.

(3) 명확성의 중요성

사용자가 인터페이스를 사용할 때 명확한 지침이 필요합니다. James Foster의 연구에서 나타난 것처럼, 햄버거 아이콘은 "메뉴"라는 간단한 단어만큼 명확하지 않다는 사실은 사용자 경험에서의 혼란을 초래할 수 있음을 시사합니다. 따라서 명확한 레이블은 사용자에게 더 큰 도움을 줄 수 있습니다.

(4) 버튼처럼 보이게 디자인하기

"메뉴"라는 단어를 사용하고, 버튼처럼 보이게 디자인하면 사용자는 그것을 클릭 가능하다는 인식을 갖게 됩니다. 이는 사용자가 해당 요소가 어떤 기능을 수행하는지를 더 쉽게 이해하게 하고, 클릭할 가능성을 높여줍니다. 

(5) 사용자 중심 디자인

사용자 경험을 최우선으로 고려해야 합니다. 다양한 사용자 집단이 존재하는 만큼, 디자인 요소가 모두에게 명확하게 전달될 수 있도록 하는 것이 중요합니다. 햄버거 아이콘 대신 명확한 레이블을 사용하는 것은 사용자의 이해도를 높이고, 인터페이스의 접근성을 개선하는 데 도움이 됩니다. 

원칙 8. 최대의 어포던스를 가진 아이콘 만들기

유저 인터페이스 요소를 디자인할 때는 사용성 원칙(일관성, 어포던스 등)을 고려해야 합니다. 어포던스는 중요한 개념으로 기본적으로 ‘아이콘은 직관적이어야 한다’와 같은 요소를 의미합니다. 

1) 아이콘을 아이콘은 간단하고 개략적으로 유지한다

(1) 명확한 인식

아이콘은 사용자에게 정보를 전달하는 역할을 합니다. 따라서 아이콘이 지나치게 복잡하거나 현실적인 이미지를 포함하면 사용자가 그 의미를 이해하는 데 어려움을 겪을 수 있습니다. 간단하고 명확한 디자인은 직관적으로 인식될 가능성을 높입니다.

(2) 시각적 혼란 방지

복잡한 그래픽 디테일은 사용자의 시선을 분산시킬 수 있습니다. 아이콘이 너무 많은 요소를 포함하고 있거나 지나치게 화려하다면, 사용자는 본래의 기능이나 의미를 파악하기 어렵게 됩니다. 따라서 시각적 디테일을 최소화하면 정보 전달이 더 효과적으로 이루어질 수 있습니다.

(3) 일관성 유지

아이콘은 여러 곳에서 사용되므로, 디자인의 일관성이 중요합니다. 기본적인 특성에 집중하고 시각적 디테일을 줄이면, 다양한 아이콘 간의 통일성을 유지할 수 있습니다. 이는 사용자에게 더 일관된 경험을 제공하고, 인터페이스의 이해도를 높이는 데 효과적입니다.

(4) 빠른 인식

사용자는 인터페이스를 사용할 때 빠른 인식을 원합니다. 간단한 아이콘은 사용자가 즉각적으로 이해하고 사용할 수 있도록 돕습니다. 복잡한 아이콘은 사용자가 그 기능을 인식하는 데 시간이 걸리게 하여, 전체적인 사용자 경험을 저하할 수 있습니다.

(5) 다양한 사용자 고려

사용자마다 아이콘에 대한 이해도가 다를 수 있습니다. 따라서, 가능한 한 많은 사용자가 쉽게 인식할 수 있도록 간단하고 직관적인 디자인을 선택하는 것이 중요합니다. 이는 다양한 연령대나 기술 수준을 가진 사용자에게 모두 접근 가능하도록 합니다.

2) 익숙한 아이콘을 선택한다

(1) 경험의 축적

사용자는 다양한 디지털 제품과 서비스에서 아이콘을 접하며 경험을 쌓아갑니다. 이 경험은 사용자가 특정 아이콘의 의미를 인식하고 이해하는 데 중요한 역할을 합니다. 따라서, 이미 널리 사용되는 아이콘에 익숙한 사용자는 새로운 인터페이스에서도 비슷한 아이콘을 쉽게 이해할 수 있습니다.

(2) 사용자 리서치의 필요성

인터페이스에 아이콘을 도입하기로 결정을 내린 경우, 경쟁사와 타겟 플랫폼에서 사용되는 아이콘을 조사하는 것이 필수적입니다. 이를 통해 사용자가 이미 알고 있는 아이콘의 형태와 기능을 파악할 수 있으며, 이러한 기존 아이콘을 활용하면 사용자 경험을 개선할 수 있습니다.

(3) 일관성 유지

경쟁사와 플랫폼에서 흔히 사용되는 아이콘을 참고하면, 디자인의 일관성을 유지할 수 있습니다. 사용자가 이미 알아보는 아이콘을 사용하는 것은 혼란을 줄이고, 사용자에게 친숙함을 제공합니다. 

(4) 시스템 아이콘 활용

시스템 아이콘은 운영 체제나 소프트웨어에서 표준화된 아이콘입니다. 이러한 아이콘은 일반적으로 사용자에게 친숙하며, 사용자가 즉각적으로 이해할 수 있는 기능을 제공합니다. 따라서, 시스템 아이콘을 활용하면 사용자가 쉽게 인식할 수 있는 요소를 디자인할 수 있습니다.

3) 특정 플랫폼에 특화된 아이콘은 이용하지 않는다

(1) 플랫폼 일관성

각 플랫폼(안드로이드, iOS)은 고유한 디자인 가이드라인과 사용자 인터페이스(UI) 규칙을 가지고 있습니다. 이러한 가이드라인은 사용자에게 친숙한 경험을 제공하기 위해 설계되었습니다. 따라서, 특정 플랫폼의 UI 요소를 다른 플랫폼에 그대로 가져오면 일관성이 떨어지고, 사용자가 혼란을 느낄 수 있습니다.

(2) 아이콘 세트의 표준화

플랫폼에서는 공유, 문서 생성, 삭제 등과 같은 공통된 기능에 대해 표준화된 아이콘 세트를 제공합니다. 이러한 아이콘은 해당 플랫폼의 디자인 언어에 맞춰 최적화되어 있으며, 사용자가 기능을 쉽게 이해하고 사용할 수 있도록 돕습니다. 따라서, 타 플랫폼의 아이콘을 사용할 경우 사용자가 기능을 인식하는 데 어려움을 겪을 수 있습니다.

(3) 사용자 경험 최적화

사용자는 특정 플랫폼에서 기대하는 UI 스타일과 상호작용 방식을 가지고 있습니다. 앱을 개발할 때, 타깃 플랫폼의 UI 요소를 사용하면 사용자의 기대에 부응할 수 있으며, 이는 사용자 경험을 최적화하는 데 효과적입니다. 반대로, 다른 플랫폼의 UI를 사용할 경우 사용자가 혼란스러워 할 수 있습니다.

(4) 호환성 문제

다른 플랫폼의 UI 요소와 아이콘을 사용할 경우, 디자인이 일관되지 않거나 호환성 문제가 발생할 수 있습니다. 이는 앱의 기능성에 악영향을 미칠 수 있으며, 사용자에게 부정적인 인상을 남길 수 있습니다.

원칙 9. 모바일 앱에서 터치하기 좋은 타깃으로 만든다

사람들은 손가락을 이용해 터치 기반 인터페이스와 상호작용합니다. UI 컨트롤은 타깃이 작아 사용자가 의도하지 않은 액션을 하게 되어 사용자가 좌절하지 않도록 충분히 크게 만들어야 합니다. 아래 이미지는 성인 남성의 평균 손가락 너비를 보여줍니다. 아기들은 8mm 정도 되는 반면 성인은 대략 11 mm 정도 됩니다. 어떤 농구 선수들은 손가락 너비가 19mm 이상이라고 합니다!

사람들은 보통 스스로 “뚱뚱한 손가락”을 가졌다고 말합니다. 하지만 아기 손가락 조차 대부분의 터치 스크린보다 더 넓습니다.

터치스크린에서 권장하는 타깃 사이즈는 7에서 10mm 정도입니다. 아래는 애플과 구글이 각각의 플랫폼을 만들 때 권장하는 사항입니다. (“iOS Human Interface Guidelines” 와 MaterialDesign을 참고하세요.)

하지만 타깃 사이즈만 중요한 것이 아닙니다. 터치 타깃 사이의 충분한 공간 역시 중요합니다. 터치 타깃 사이의 최소 거리를 유지해야 하는 주된 이유는 사용자가 잘못된 아이콘을 터치해서 잘못된 액션을 하는 것을 방지해주기 때문입니다. 특히 “저장”과 “취소” 같은 아이콘의 경우 서로 바로 옆에 위치하기 때문에 이런 점이 굉장히 중요합니다. 이런 경우 두 타깃 사이에는 최소 2mm 정도의 간격을 두는 것이 굉장히 중요합니다.

원칙 10. 아이콘을 테스트한다

아이콘은 조심스럽게 다뤄져야 합니다. 언제나 앱의 사용성을 테스트 해야 합니다. 처음 이용하는 실제 사용자가 UI를 어떻게 이용하는지 관찰합니다. 아이콘이 충분히 명확한지 아닌지 판단하는 데 도움이 될 것입니다. 

1) 아이콘의 인식 가능성(recognizability)을 테스트합니다

(1) 직관적인 이해

아이콘은 사용자가 기능이나 정보를 빠르게 이해하고 사용할 수 있도록 돕는 시각적 요소입니다. 사용자가 아이콘이 무엇을 표현하는지 즉각적으로 인식할 수 있어야 하며, 이를 위해 아이콘은 명확하고 직관적으로 디자인되어야 합니다. 인식 가능성이 낮으면 사용자는 아이콘의 의미를 파악하는 데 어려움을 겪게 됩니다.

(2) 사용자의 인지 부담 감소

사용자가 아이콘을 보고 그 의미를 고민해야 한다면, 이는 인지적 부담을 증가시킵니다. 사용자는 인터페이스를 사용할 때 빠르고 쉽게 원하는 기능에 접근하기를 원합니다. 아이콘이 명확하게 인식되지 않으면, 사용자는 시간을 낭비하게 되고, 이는 전체적인 사용자 경험을 저하시킬 수 있습니다.

(3) 효율적인 탐색

인식 가능성이 높은 아이콘은 사용자가 인터페이스를 탐색할 때 더 효율적으로 기능을 찾을 수 있게 합니다. 아이콘이 무엇을 의미하는지 명확하게 전달되면, 사용자는 필요한 작업을 신속하게 수행할 수 있으며, 이는 사용자 만족도를 높이는 데 도움이 됩니다.

(4) 테스트의 필요성

아이콘의 인식 가능성을 테스트하는 것은 디자인이 실제 사용자에게 효과적으로 전달되는지를 확인하는 중요한 과정입니다. 테스트를 통해 사용자가 어떤 아이콘을 어떻게 인식하는지 파악함으로써, 디자인을 개선하고 사용자 요구에 맞출 수 있습니다.

2) 아이콘의 기억 가능성(memorability)을 테스트한다

(1) 효율성의 중요성

기억하기 어려운 아이콘은 사용자가 다시 사용할 때 혼란을 초래하고, 필요한 기능을 찾는 데 시간을 낭비하게 만듭니다. 사용자가 아이콘의 의미를 기억하지 못하면, 인터페이스 탐색이 비효율적이 되며, 이는 전체적인 사용자 경험을 저하시킬 수 있습니다.

(2) 사용자의 인지적 부담 경감

사용자가 자주 사용하는 아이콘의 의미를 기억할 수 있다면, 인터페이스를 탐색할 때 인지적 부담이 줄어듭니다. 기억하기 쉬운 아이콘은 사용자가 빠르게 작업을 수행할 수 있도록 도와주며, 이는 사용자 만족도를 높이는 데 효과적입니다.

(3) 테스트의 필요성

아이콘의 기억 가능성을 테스트하는 것은 디자인이 얼마나 효과적으로 사용자의 기억에 남는지를 평가하는 중요한 과정입니다. 몇 주 후에 아이콘의 의미를 기억하는지를 확인함으로써, 디자인의 강점과 약점을 파악하고 개선할 수 있는 기회를 제공합니다.

(4) 장기적인 사용자 경험

사용자들이 시간이 지난 후에도 아이콘의 의미를 기억할 수 있다면, 이는 해당 아이콘이 효과적으로 설계되었다는 증거입니다. 기억하기 쉬운 아이콘은 사용자들이 반복적으로 앱이나 웹사이트를 사용할 때 긍정적인 경험을 제공합니다.

======================
안녕하세요! 전코치입니다 😊

제가 운영하는 링크드인 프로필을 공유합니다. 함께 지식과 경험을 나누고, 네트워크를 확장해보아요! 여러분의 소중한 1촌이 되어주시면 감사하겠습니다.

👉 링크드인 프로필 바로가기

여러분의 많은 관심과 연결을 기다립니다!✨