그래픽 표상
인간은 지각에 특화되어 있어서 패턴을 파악하는 것에는 뛰어나지만, 그로부터 정확한 수치 비교는 잘하지 못한다. 인간은 직선적으로 증가하는 선 길이를 판단하는 데 가장 정확하기 때문에 막대 그래프에서의 추정이 가장 정확하다. 그러나 우리가 이미 소리의 크기와 빛의 밝기에 대해 논의한 것처럼 그래프의 적용은 경우에 따라 달라질 수 있다.
정보 자체는 사실이며, 그래프도 기술적으로 정확하게 그려져 있다. 그러나 시각적인 정보는 첫 인상을 지배할 뿐더러 모든 독자가 수치로 된 정보들을 꼼꼼하고 신중하게 분석하기 위해 시간을 소비하지 않는다. 이렇게 광고업계에서는 순간적인 인지로 인한 해석을 의도적으로 이용한다.
심리적 척도와 표상
적절한 그래픽 관계를 구축하기 위해 이용할 수 있는 수많은 심리 원칙들이 있다. 그래프는 정량적인 정보와 정성적인 정보와 정성적인 그림 정보가 결합되었다는 점에서 흥미롭다. 사실 그래프는 추상적이고 해석하기 어려운 수적 관계를 지각적이고 가시적인 그림 관계로 바꿀 수 있기 떄문에 유용하다.
적절성의 원칙: 표상은 과제에서 받아들일 수 있는 정보를 많지도 적지도 않게 정확히 제공해야 한다.
기본적으로 너무 강력한 표상 체계의 문제는 실제 정보에 의해 정당화되지 않는 결론을 이끌어내는 경향이 있다는 말이다. 반면, 너무 약한 표상 양식은 정보가 자연스럽게 표현되지 못하므로 사용자의 정보 처리 어려움이 가중된다. 또한 사용자가 지각적 처리 능력을 발휘하기에 너무 많은 정신적 노력이 강요되어 표상 능력을 저하시킨다는 것이다.
도널드 노먼의 디자인 심리학, 도널드 노먼
UX 디자인에서 ‘표상’은 사용자와 시스템 간의 소통을 위한 핵심 요소입니다. 표상은 정보를 시각적으로 표현하는 방식을 의미하며, 사용자의 이해와 경험에 직접적인 영향을 미칩니다. 오늘은 UX 디자인에서 다루는 표상의 특징과 그 중요성에 대해 자세히 알아보겠습니다.
표상의 정의와 중요성
표상은 복잡한 정보나 개념을 시각적으로 표현하는 방법입니다. UX 디자인에서 표상은 사용자가 시스템을 이해하고 상호작용하는 데 필수적인 역할을 합니다. Nielsen Norman Group의 연구에 따르면, 효과적인 표상은 사용자의 인지 부하를 줄이고 정보 처리 속도를 높일 수 있습니다[1].
표상의 종류
- 그래픽 표상: 차트, 그래프, 아이콘 등
- 텍스트 표상: 문자, 숫자, 기호 등
- 공간적 표상: 레이아웃, 위치, 크기 등
그래픽 표상의 특징
그래픽 표상은 UX 디자인에서 가장 흔히 사용되는 표상 방식 중 하나입니다. 인간의 뇌는 시각적 정보를 빠르게 처리하도록 진화했기 때문에, 잘 설계된 그래픽 표상은 복잡한 정보를 직관적으로 전달할 수 있습니다.
그래픽 표상의 장점
- 패턴 인식: 인간은 시각적 패턴을 빠르게 인식할 수 있습니다. 예를 들어, 막대 그래프에서 데이터의 추세를 한눈에 파악할 수 있습니다.
- 정보 압축: 복잡한 데이터를 간결하게 표현할 수 있습니다. 예를 들어, 인포그래픽은 많은 양의 정보를 시각적으로 요약하여 보여줍니다.
- 기억력 향상: 시각적 정보는 텍스트보다 기억하기 쉽습니다. 이는 브랜드 로고나 앱 아이콘 디자인에 적용됩니다.
그래픽 표상의 주의점
- 정확성 vs 시각적 효과: 때로는 시각적으로 인상적인 그래프가 실제 데이터를 왜곡할 수 있습니다. Nielsen Norman Group은 데이터의 정확한 표현과 시각적 매력 사이의 균형을 강조합니다[2].
- 문화적 차이: 아이콘이나 색상의 의미는 문화에 따라 다를 수 있습니다. 글로벌 사용자를 대상으로 하는 디자인에서는 이를 고려해야 합니다.
- 과도한 정보: 너무 많은 시각적 요소는 오히려 사용자의 인지 부하를 증가시킬 수 있습니다.
심리적 척도와 표상
UX 디자인에서 표상을 효과적으로 사용하기 위해서는 인간의 심리적 척도를 이해해야 합니다. 이는 사용자가 정보를 어떻게 인식하고 해석하는지에 대한 이해를 바탕으로 합니다.
적절성의 원칙
Nielsen의 사용성 원칙 중 “시스템과 현실 세계의 일치”는 표상의 적절성과 밀접한 관련이 있습니다[4]. 이 원칙에 따르면, 표상은 사용자의 실제 경험과 일치해야 하며, 과제에 필요한 정보를 정확히 제공해야 합니다.
예를 들어, 온라인 쇼핑 앱에서 장바구니 아이콘은 실제 장바구니와 유사한 모양을 사용합니다. 이는 사용자의 실제 경험과 일치하는 표상으로, 기능을 직관적으로 이해할 수 있게 합니다.
일상생활의 예시
- 스마트폰 배터리 표시: 배터리 잔량을 숫자로 표시하는 것보다 시각적인 막대 그래프로 표현하면 사용자가 더 빠르게 인식할 수 있습니다.
- 내비게이션 앱의 경로 표시: 복잡한 도로 정보를 단순화된 선과 아이콘으로 표현하여 운전자가 쉽게 이해할 수 있게 합니다.
- 날씨 앱의 아이콘: 날씨 상태를 텍스트로 설명하는 것보다 해, 구름, 비 등의 아이콘으로 표현하면 더 직관적입니다.
표상의 균형 잡기
효과적인 UX 디자인을 위해서는 표상의 강도를 적절히 조절해야 합니다. Nielsen Norman Group은 이를 “미적이고 미니멀한 디자인” 원칙으로 설명합니다[4].
강한 표상의 위험성
너무 강력한 표상 체계는 실제 정보에 의해 정당화되지 않는 결론을 이끌어낼 수 있습니다. 예를 들어, 과도하게 극적인 그래프는 작은 데이터 변화를 과장되게 보이게 할 수 있습니다.
약한 표상의 문제점
반대로, 너무 약한 표상은 사용자가 정보를 처리하는 데 어려움을 겪게 만듭니다. 예를 들어, 복잡한 데이터를 단순한 텍스트로만 제시하면 사용자는 중요한 패턴이나 추세를 놓칠 수 있습니다.
표상의 미래: 인터랙티브 및 동적 표상
기술의 발전과 함께 UX 디자인에서의 표상도 진화하고 있습니다. 정적인 표상에서 인터랙티브하고 동적인 표상으로 변화하고 있습니다.
인터랙티브 데이터 시각화
사용자가 직접 데이터를 조작하고 탐색할 수 있는 인터랙티브 차트나 그래프가 증가하고 있습니다. 이는 사용자가 데이터를 더 깊이 이해하고 개인화된 인사이트를 얻을 수 있게 합니다.
애니메이션과 모션 그래픽
복잡한 프로세스나 변화를 설명할 때 애니메이션을 활용한 표상이 효과적일 수 있습니다. 예를 들어, 앱의 온보딩 과정에서 주요 기능을 애니메이션으로 설명하는 것이 일반적입니다.
결론: 효과적인 표상을 위한 가이드라인
UX 디자인에서 표상은 단순히 정보를 보기 좋게 만드는 것 이상의 의미를 가집니다. 잘 설계된 표상은 사용자의 이해를 돕고, 의사결정을 지원하며, 전반적인 사용자 경험을 향상시킵니다.
효과적인 표상을 위해 다음 가이드라인을 고려해보세요:
- 사용자 중심 접근: 표상을 설계할 때 항상 사용자의 관점에서 생각하세요. 사용자가 어떻게 정보를 인식하고 해석할지 고려해야 합니다.
- 일관성 유지: 시스템 전반에 걸쳐 일관된 표상을 사용하세요. 이는 사용자의 학습 곡선을 줄이고 사용성을 높입니다.
- 문화적 고려: 글로벌 사용자를 대상으로 할 경우, 문화적 차이를 고려한 표상을 사용하세요.
- 테스트와 반복: 표상의 효과성을 실제 사용자와 테스트하고, 피드백을 바탕으로 지속적으로 개선하세요.
- 적절한 기술 활용: 새로운 기술을 활용하여 더 효과적인 표상 방식을 모색하세요. 단, 기술이 목적이 아닌 수단임을 명심하세요.
표상은 UX 디자인의 강력한 도구입니다. 잘 사용하면 복잡한 정보를 명확하게 전달하고 사용자 경험을 크게 향상시킬 수 있습니다. 그러나 잘못 사용하면 오히려 혼란을 야기하고 사용성을 저해할 수 있습니다. 따라서 UX 디자이너는 표상의 특성을 깊이 이해하고, 사용자의 필요에 맞게 적절히 활용하는 능력을 갖추어야 합니다.
우리가 만드는 모든 인터페이스, 모든 제품은 어떤 형태로든 정보를 표상합니다. 그 표상이 얼마나 효과적인지가 바로 우리 디자인의 성패를 좌우합니다. 표상에 대한 깊은 이해와 창의적인 적용은 더 나은 사용자 경험을 만드는 열쇠가 될 것입니다.
참고자료:
[1] https://www.nngroup.com/articles/inclusive-design/
[2] https://aguayo.co/en/blog-aguayp-user-experience/what-are-the-10-usability-principles-by-nielsen/
[3] https://www.nngroup.com/articles/design-principles/
[4] https://www.nngroup.com/articles/ten-usability-heuristics/