[번역] UX의 중요한 요소 - 아이콘
Icons As Part of a Great User Experience
이 글은 Nick Babich 님이 Smashing Magazine에 기고한 'Icons As Part Of A Great User Experience'를 번역한 글입니다.
보통 디자이너들은 심미적으로 심플한 맛을 떨어뜨리는 아이콘 레이블을 사용하는 것을 별로 선호하지 않는 것 같습니다. 레이블 적용은 단순히 심미적인 측면에서만 고려하기보다는, 사용성 면에서 매우 큰 차이를 만들고 있으므로 신중히 고려하여 사용해야 할 것 같습니다. 이 외에도 아이콘의 의미 전달을 도와주는 툴팁이나 팝오버의 사용, 메타포의 표현, 위치, 크기 등에 대해 여러가지 분석자료와 함께 고민해야 할 점을 다루고 있으니 좋은 정보 가져가시길 바랍니다.
Icons As Part of a Great User Experience
오브젝트, 동작, 아이디어 등을 를 시각적으로 표현하는 아이콘은 많은 User Interface에서 필수적인 요소이다. 적절하게 적용되면, 핵심적인 내용과 제품이나 액션의 의도를 커뮤니케이션하며 화면의 공간을 효율적으로 사용하게 해 주고, 심미적으로 아름다운 느낌을 제공하는 등 user interface에 많은 장점을 제공한다. 마지막으로, 대부분의 앱과 웹사이트는 아이콘을 가지고 있으며, 아이콘은 사용자에게 매우 친숙한 디자인 패턴이다.
이러한 장점에도 불구하고, 디자이너가 기능을 인지하기 어렵도록 만들 경우 사용성의 문제를 야기한다. 아이콘의 첫 번째 임무는 사용자를 가고 싶은 곳으로 안내하는 것이다. 그리고 여기서는 그것을 가능하게 하는 요소들에 대해 살펴볼 것이다.
아이콘은 작은 공간에서 많은 컨트롤을 담을 수 있도록 콤팩트하게 디자인되어야 한다. (Image: Adobe)
모든 앱은 앱스토어에서 사용자의 관심을 끌고 홈스크린에서 눈에 띄도록 아름답고 기억에 남는 아이콘을 원한다. (Image: Apple)아이콘의 종류
언급한 것처럼, 아이콘은 오브젝트, 액션, 아이디어에 대한 시각적인 표현이다. 오브젝트, 액션 또는 아이디어가 사용자에게 즉각적으로 인지되지 않는다면, 아이콘에서 사용자가 테스크를 완료하는 것을 방해하는 시각적인 노이즈를 제거해야 한다.
아이콘에는 "universal", "conflicting", 그리고 "unique" 아이콘의 세 가지 종류가 있다. 각각의 타입이 사용자 경험에 어떤 영향을 주는지 알아보기로 하자.
UNIVERSAL ICONS
Home, print, search, shopping cart와 같은 아이콘들은 어떤 아이콘들은 사용자들에게 널리 사용되고 있다.
쉽게 인지되는 아이콘 (Image: Icons8)이런 아이콘들의 유일한 문제는 종류가 그다지 많지 않다는 것이다. 위에 명시된 아이콘 외에 대부분의 아이콘들은 분명하지 않은 의미를 가지고 있으며, 인터페이스에 따라 다르게 해석되기도 한다.
ICONS WITH CONFLICT MEANING
공통적으로 사용되는 아이콘이 서로 부딪히는 의미를 가지고 있을 때 문제가 일어난다. 하트와 별이 훌륭한 예이다. 앱마다 이 아이콘들의 기능이 다양하기도 하고, 이 두 가지 아이콘이 서로 부딪히기도 한다.
Image: UserTesting결론적으로, 아 아이콘들은 정확히 해석하기가 어렵다. 하나의 앱 안에서도, 이런 아이콘들은 사용자가 하나의 결과를 기대할 때 매우 혼란스럽게 할 수도 있다. 사용자들은 이 아이콘들을 이해하기 어려울 것이고 이후의 경험을 신뢰하지 못할 것이다.
여러 가지 의미를 가지고 있는 유명한 아이콘들을 살펴보자.
Image: UserTesting
UNIQUE ICONS
추상적인 아이콘은 시각적으로 전달하는 바가 명확하지 않기 때문에 좋은 아이콘이라고 할 수는 없다. 특이한 오브젝트나 액션을 어떻게 표현할 수 있을까? Game Center app을 위한 애플의 아이콘은 컬러풀한 원의 그룹으로 되어있다. 이 Game Center icon은 무엇을 의미할까? 게임과 어떤 연관성이 있을까?
게임센터 아이콘은 게임의 느낌을 전달하지 못한다.다른 예로, 구글은 Gmail의 인터페이스를 단순화하기로 하면서 모든 기능을 추상적인 아이콘 밑으로 넣어버려 사용자가 구글 캘린더 아이콘을 못 찾아 질문을 올리기도 하는 상황이 벌어지기도 한다.
Desktop의 Gmail 인터페이스아이콘은 표현해야 할 것이 무엇인지 알고 있다면 그것을 명확하게 표현해야 한다. 그러나 처음 사용하는 사용자가 아이콘이 의미하는 것을 인지하기에는 약간의 시간이 필요할 수 있다. 또 다른 문제는 처음 사용하는 사용자는 이해하지 못하는 요소들은 무시하려는 경향이 있다는 것이다. 알지 못하는 것을 신뢰하지 않는 것은 인간의 본성이다.
실용적으로 아이콘을 제작하는 방법
콘텍스트에 적합한 아이콘을 제작하기 위한 간단한 기술과 전략을 알아보도록 하자. 분명히, 아이콘을 선택하는 것도 중요하지만, 아이콘을 테스트하는 것도 매우 중요하다.
추상적이거나 친숙하지 않은 아이콘을 명확히 하기 위해 레이블을 사용하라.
아이콘은 텍스트를 사용하지 않음으로써 공간을 절약할 수 있지만, 아이콘은 수천 가지의 다른 단어를 의미할 수 있다는 것이 문제이다. 사용자가 당신의 추상적인 픽토그램에 익숙하다고 생각한다거나, 아이콘의 의미를 발견하기 위해 시간을 투자할 것이라는 것은 심각한 오해이다.
안드로이드를 처음 사용하는 사용자에게는 기기 하단의 이 아이콘들이 혼란스러울 것이다. (Image: Google)
사용자는 때때로 생소한 인터페이스에 위협을 느낀다. 사용자가 진정 원하는 것은 생소한 앱에서 어떤 액션을 하기 전에 무엇이 일어날지 명확히 아는 것이다. 그것이 사용자가 아이콘을 클릭하기 전에 명확하게 이해할 수 있도록 해주어야 하는 이유이다.
좋은 사용자 경험은 여러 가지 방법으로 측정될 수 있다. 그중에 하나는 사용자가 생각하는 시간을 얼마나 줄일 수 있는지이다. 명확함은 훌륭한 인터페이스의 가장 중요한 요소이다. 대부분의 아이콘을 괴롭히는 모호함을 회피하기 위해, 특히 복잡한 액션이나 모호한 기능을 표현해야 할 경우 아이콘의 의미를 명확히 하기 위한 텍스트 레이블을 포함할 수 있다.
UserTesting은 레이블이 붙은 아이콘과 아닌 아이콘을 비교하기 위해 몇 가지 테스트를 하였다.
- 88%의 사용자가 레이블이 붙은 아이콘을 누를 경우 무엇이 일어날지 정확히 예측하였다.
- 레이블이 없는 아이콘에서는 그 비율이 60%로 줄었다. 레이블이 없는 아이콘이 독특하게(일반적이지 않게) 생겼을 경우, 겨우 34%의 사용자만이 아이콘을 누른 다음의 상황을 예측할 수 있었다.
universal 아이콘의 경우에도, 레이블이 포함된 경우가 일반적으로 안전했다.
레이블이 있는 아이콘이 훨씬 더 사용하기에 좋다. (Image: Google)
아이콘만 적용하는 것이 적합한 경우
모든 사용자가 일반적으로 사용하는 아이콘에 익숙한 것은 아니므로 아이콘만 적용하는 것은 사용자가 사용하기 어렵게 만드는 위험성을 갖고 잇다. 반면에, 숙련된 사용자는 모든 아이콘에 텍스트 레이블이 달려있는 인터페이스가 복잡하게 느껴질 수도 있을 것이다. 어떻게 모두를 만족시킬 수 있을까? Michael Zuschlag이 언급한 것처럼, 아래 사항 중 2-3개에 해당되는 상황인 경우 아이콘만 적용해도 될 것 같다.
- 공간이 매우 제한적일 경우 (예 : 텍스트만 쓰기에 매우 좁을 경우)
- 표준화된 아이콘을 적용할 경우 (예 : 일반적으로 사용되는 픽토그램)
- 아이콘이 실제 사물의 형상이나 시각적인 특성을 명확히 표현할 경우 (예 : 페이지 배경을 Red로 변경하는 아이콘을 붉은색 사각형 아이콘으로 표현)
툴팁이나 팝오버를 고려하라
어떤 디자이너는 레이블이 아이콘의 목적에 맞지 않고 인터페이스를 복잡하게 만든다고 생각한다. 레이블을 사용하지 않기 위해 툴팁을 사용하기도 한다. 그러나, 툴팁은 텍스트 레이블을 대체하기에는 매우 빈약하다. 텍스트 레이블은 절대 이미지로 된 툴팁이 필요하지 않다는 것이 텍스트가 아이콘보다 낫다는 것에 대한 좋은 예이다. 툴팁의 다른 중요한 약점은 터치스크린에 적용하기가 어렵다는 것이다.
다른 일반적인 테크닉은 튜토리얼이나 코치 마크, 또는 팝오버 힌트를 사용하는 것이다. 그러나, 사용자는 튜토리얼을 바로 꺼버릴 것이고, 다음번에 앱을 실행시킬 때는 배운 것을 바로 잊어버렸을 것이다. 툴팁처럼, 튜토리얼은 직관적인 디자인을 대체할 수 없고, 오히려 역효과가 날 수도 있다. "당신의 앱의 튜토리얼 화면은 실패한 아이콘 디자인의 목록일 뿐이다"라고 Matthew at CocoaLove가 말한 것처럼.
Swarm 앱은 사용자를 교육하기 위해 popover를 사용한다. (Image: Mobile Patterns)아이콘과 버튼 레이블
레이블이 적용된 아이콘은 제대로 된 위치에 적용되어 있다면 정보를 찾기 쉽게 만들어준다. 자연스럽게 읽힐 수 있는 곳에 아이콘을 위치해야 한다. UX movement에서 논의가 되었던 것처럼, 아이콘의 위치를 선정하기 위해서는 두 가지 사항을 고려해야 한다.
· 시각적으로 스캐닝하는 것을 도와주는 목적이라면, 사용자는 아이콘을 레이블보다 먼저 보기를 원한다. 아이콘을 레이블 왼쪽에 위치하여 레이블보다 먼저 보이게 하라.
· 아이콘을 레이블 heading과 body의 중앙에 놓지 말고 heading과 정렬하라. 아이콘이 먼저 눈에 띄어야 페이지를 더욱 쉽게 스캔할 수 있다.
(Image: UX Movement)Data Table의 아이콘
숫자가 적용된 테이블에서는, 값이 좋은지, 보통인지, 안 좋은지 보여주는 요소로서 아이콘이 필요할 경우가 있다. 숫자 다음에 아이콘이 올 때 적절한 공간은 왼쪽과 오른쪽 중 어디일까? Don Nickel이 설명한 것처럼, 일반적으로 숫자의 왼쪽에 아이콘이 위치하면 보통 데이터의 종류(intent)를 나타내고, 오른쪽에 아이콘이 위치하면 데이터의 상태(quality)를 나타낸다고 한다. 버튼 레이블의 아이콘과 마찬가지로, 아이콘의 위치는 자연스럽게 읽히는 순서를 따라야 한다. 아이콘 위치에 대한 두 가지 경우가 있다.
· 상태를 나타내는 아이콘은 라인의 끝에 나타난다. 아래의 예시처럼, 사용자는 주제를 먼저 보고, 주제에 대한 값을 보고, 마지막으로 값에 대한 상태를 볼 것이다.
(Image: Stack Exchange)
· 아이콘 자체가 주제라면, 라인이 시작하는 부분에 나타나야 하고, 다른 요소들은 뒤에 이어져야 한다.
(Image: Stack Exchange)
아코디언(Accordion) 메뉴의 아이콘
아코디언 메뉴는 긴 리스트를 한 그룹으로 뭉치는 기능을 하는 UI 패턴이다. 메뉴를 내비게이션 하는데 유용하다.
(Image: Viget)디자이너가 아코디언 메뉴를 사용할지 결정하는 것에 앞서, 디자이너는 아코디언 메뉴를 디자인하는데 아이콘을 어떻게 적용해야 하는지에 대해 고민이 될 것이다.
· 어떤 아이콘을 사용해야 하는가? 사용성의 관점에서, 아이콘이 정말 필요한가?
· 아이콘이 메뉴 아이템의 어느 쪽에 위치해야 하는가?
Lance Gutin은 다양한 종류의 아이콘을(V아이콘, +/- 아이콘, 삼각형 아이콘)다른 위치(왼쪽 또는 오른쪽)에 적용하는 실험을 하였다. 두 가지 위치에 대한 세 가지 아이콘, 그리고 아이콘이 없는 컨트롤 그룹의 7가지 케이스로 분석을 해 보았다.
클릭 위치에 대한 테스트 결과 (Image: Viget)결과 분석에서 두 가지 중요한 발견을 언급했다.
· 아이콘 위치에 대한 가장 설득력 있는 데이터이다. 메뉴 아이템의 우측에 아이콘이 적용된 경우, 많은 사용자가 텍스트 레이블보다 아이콘을 클릭하는 것을 선호했다. 일부 사용자는 아이콘과 레이블이 다르게 기능한다고 생각했다고 볼 수 있다. 우측에 위치한 아이콘의 작은 사이즈와 레이블과의 거리가 테스크를 수행하는 시간을 길게 만들었다.
· 아이콘 선택 속도에서는, 왼쪽에 위치한 + 아이콘이 적용된 아코디언 메뉴를 사용자가 가장 빠르게 선택한 것으로 측정되었고, 90%의 참여자가 다른 페이지로 이동하지 않고 메뉴가 펼쳐질 것이라고 예측했다 그러나, 대부분의 경우에서 테스크를 수행한 속도가 통계적으로 차이 나지 않았고, 어떤 것도 실질적으로 다르다고 볼 수 없었다.
이 연구결과가 우리가 모두 아코디언 메뉴의 왼쪽에 + 아이콘을 적용해야 한다는 것을 의미하지는 않는다. 그러나, 우측에 아이콘을 적용한다면, 아이콘이 손가락이나 마우스로 클릭하기 쉽도록 충분히 크게(최소한 44x44 px) 적용되어야 한다.
햄버거 아이콘은 신중하게 적용해야 한다.
햄버거 아이콘이라 불리는 세 줄로 된 아이콘은 특히 모바일 웹에서 메인 메뉴 버튼으로 일반적으로 적용되고 있다.
Google’s Material Design website그러나 햄버거 아이콘을 적용할 때에는 두 가지 중요한 사항을 고려해야 한다.
· Jon Rundle의 아티클에 기반한 A/B 테스트는 사용자의 나이와 햄버거 아이콘의 인지의 관계를 보여준다. 이 아이콘은 나이 든 사용자에게는 익숙하지 않다. 그래서 사용자의 관점에서, 주요 사용자가 누구인지 먼저 알아보아야 한다.
(Image: Edgar Anzaldúa)· Nielsen Norman Group의 연구결과는 햄버거 아이콘이 여전히 명확한 의미를 전달하지 못한다고 보고 있다. James Foster의 연구는 햄버거 아이콘이 "Menu"라는 단어만큼 만큼 명확하지 않다는 것을 확실히 보여준다. 따라서 "Menu"라는 단어를 사용하는 것(그리고 버튼처럼 보이게 만드는 것)이 사용자에게는 더 도움이 될 수 있다.
Original (baseline); variation 1 (“Menu” + border); variation 2 (“Menu” + hamburger icon + border); variation 3 (“Menu” without border). (Image: Sites for Profit)
(Image: Sites for Profit)
행동 유도를 최대화할 수 있도록(Maximum affordance) 디자인하기
유저인 테 페이스 요소를 디자인할 때, 사용성의 원칙(일관성, 행동 유도성 등)을 고려하라. 행동 유도성(Affordance)은 중요한 콘셉트이며, 아이콘이 직관적이어야 한다는 것을 의미한다.
· 단순(simple)하고 도식적으로(schematic)
대부분의 경우에, 아이콘은 창조의 분야에 속하지 않는다. 새로운 아이콘을 디자인한다면, 사물의 기본적인 특성에 초점을 맞추되, 실제적인 디테일은 최소화하여라. 그래픽적인 디테일이 적을수록, 인지가 쉬워진다.
둘 중 하나의 아이콘을 선택해야 한다면, 단순한 것을 선택하라.
· 친숙한(familiar) 아이콘을 선택하라
사용자의 아이콘에 대한 이해는 이전 경험에 기반한다. 인터페이스에 아이콘을 적용해야 한다면, 우선 리써치를 하라. 경쟁제품에 사용된 아이콘이나 시스템 아이콘과 같은 타겟팅된 플랫폼에 사용된 아이콘을 조사하여라. 왜냐하면 당신의 사용자들은 그런 아이콘들을 가장 잘 인식할 수 있기 때문이다.
· 플랫폼에 특화된 아이콘을 그대로 사용하지 말라
Android나 iOS 앱을 만들 때, 다른 플랫폼에서 사용되는 아이콘을 그대로 가져오지 말라. 플랫폼은 일반적으로 공유, 문서 생성, 삭제 등 공통 기능에 대한 아이콘 셋을 제공한다. 앱을 다른 플랫폼에 적용할 때, 기존 플랫폼에 특화된 아이콘들은 적용하려는 플랫폼에서 사용되는 아이콘에 맞게 교체해야 한다.
Icons for common functionality in Android (top) and iOS (bottom)
모바일에서 터치하기 좋게 만들어라
사용자는 손가락을 이용하여 터치 인터페이스를 조작한다. UI 컨트롤은 손가락 터치에 잘 반응할 수 있도록 충분히 크게 제작되어 사용자에게 의도하지 않은 동작을 일으키거나 매우 작은 버튼으로 인해 사용자를 방해하지 않도록 해야 한다. 아래 이미지는 일반적인 성인의 손가락의 너비는 11mm인 반면, 아기의 손가락은 8mm라는 것을 보여준다. 어떤 농구선수의 손가락은 19mm가 넘기도 한다.
사용자는 가끔 두꺼운 손가락을 가진 것을 자책하기도 하지만, 터치 타깃이 아이의 손가락보다 작은 경우도 있다. (Image: Microsoft)
터치스크린의 적당한 타깃 사이즈는 7~10mm이다. 아래는 Apple과 Google의 각 플랫폼에서 추천 크기를 보여준다.
· Apple은 최소 타깃 사이즈를 44x44 pixel로 추천한다. 스크린 밀도에 따라 물리적인 픽셀 사이즈가 다르므로, Apple의 픽셀 정의는 320x480 pixel 3.5inch 디스플레이에서 가장 적합한 크기이다.
· Google은 터치 타깃을 최소한 48x48 dp로 추천한다. 48x48 dp 터치 타깃은 실제로 스크린 사이즈에 관계없이 약 9mm의 크기이다. 대부분의 경우에, 아이콘들은 균형 있는 정보 밀도(information-density)와 사용성을 확보하기 위해 8dp 이상의 공간을 두고 배치되어야 한다.
터치 타깃은 사용자 인풋에 반응하는 영역을 포함한다. (Image: Material Design)
이 터치 영역에서, 아이콘은 24dp이고, 터치 타깃은 48dp이다. 이 값은 Android app에 적용된다. (Image: Material Design)
이 타깃 사이즈뿐만 아니라, 터치 타깃 사이의 충분한 공간도 중요하다. 터치 타깃 사이의 최소 공간을 유지하는 이유는 사용자가 다른 아이콘을 터치해서 다른 액션을 유발하는 것을 방지하기 위해서이다. 이것은 "Save"나 "Cancel"과 같은 아이콘이 같이 있을 때 매우 중요하다. 이러한 경우에는 최소한 2mm의 여백이 있어야 한다.
아이콘을 테스트해 보아라
아이콘은 신중하게 디자인되어야 한다. 항상 사용성의 관점에서 테스트하여라. 실제로 처음 사용해보은 사용자가 어떻게 UI와 인터렉션 하는지 관찰하여라. 그러면 아이콘이 얼마나 명확하게 디자인되어있는지 알 수 있을 것이다.
· 가독성(recognizability) 테스트
사용자에게 아이콘이 무엇을 의미한다고 생각하는지 물어보아라. 사용자가 동작을 하며 궁금해하면 안 된다. 사용자는 아이콘의 의미를 알기 위해 노력하며 방해받고 싶어 하지 않기 때문이다.
·기억 용이성(memorability) 테스트
기억하기 어려운 아이콘은 효과적이지 않다. 몇 주 전에 아이콘의 의미를 이야기 해준 사용자에게 그 아이콘의 의미를 기억하는지 물어보아라.
결론
아이콘 디자인은 UI 디자인의 핵심이다. 인터페이스의 사용성을 완성시킬 수도 있고 망칠 수도 있다. 모든 아이콘은 목적을 달성하는데 기여해야 한다. 아이콘은 추가적인 노력 없이 사용자가 원하는 것을 할 수 있도록 도와줘야 한다. 올바르게 디자인된다면, 아이콘은 사용자가 직관적으로 워크플로우를 따라갈 수 있도록 해 준다. 사용자를 생각하도록 하지 말아라. 앱에서 명확성(clarity)이 우선이 되게 만들어라!
추천 아티클
“On Icons,” iA
“Myth #13: Icons Enhance Usability,” Zoltán Gócza, UX Myths
원문 출처 : "Icons As Part Of A Great User Experience, " Smashing magazine
