brunch

You can make anything
by writing

C.S.Lewis

by UX 컨설턴트 전민수 Feb 08. 2017

아이콘 아웃라인이 도움이 되는 이유

today

Today UX 아티클


UX Movement에 올라온 Anthony의 글 '유저가 보다 빠르게 훑어보는 데 뚜렷이 다른 아이콘 아웃라인이 도움이 되는 이유' 원저자의 허락을 받아 번역한 글입니다. 


아이콘은 유저가 인터페이스를 보다 효율적으로 사용할 수 있도록 도와주는 시각적 단서입니다. 인터페이스 상의 단어를 하나씩 읽는 대신, 유저는 자신이 하려는 태스크를 표현하는 아이콘을 훑어볼 수 있습니다. 


하지만, 아이콘에 뚜렷이 다른 아웃라인(outline)을 사용하지 않으면, 아이콘을 훑어보는 것이 생각보다 오래 걸리게 될 수도 있습니다. 만일 아이콘을 빠르고 쉽게 훑어볼 수 있게 만들고 싶다면, 통일된 아웃라인보다는 서로 뚜렷이 다른 아웃라인을 사용해야 합니다.  



통일된 아웃라인은 아이콘을 비슷해 보이게 만듭니다. 전부 비슷해 보이면, 유저가 훑어볼 때 어떤 아이콘도 눈에 띄기 어려울 수 있습니다. 대신, 아이콘 그림 자체에 더 집중해야 합니다. 아이콘 주변에 있는 것들이 시각적 노이즈가 될 수 있기 때문입니다. 유저의 시각적 경로(visual path)가 아이콘에 머물기 전에 배경 테두리를 거치게 될 겁니다. 


뚜렷이 다른 아웃라인은 시각적 노이즈 없이 각 아이콘의 독특한 모양을 보여줍니다. 이는 곧 유저가 배경 테두리의 방해 없이 아이콘을 즉시 볼 수 있다는 뜻입니다. 


유저가 훑어볼 때, 이런 뚜렷이 구분되는 아웃라인은 정확한 아이콘을 찾은 것인지 판단하는 작은 단서가 됩니다. 


만일 다시 아이콘을 찾아야 한다면, 보다 빠르게 찾을 수 있을 겁니다. 아이콘의 독특한 모양으로 아이콘을 인식할 수 있을 것이기 때문입니다. 


이러한 개념은 텍스트를 전부 대문자로 쓰는 것이 얼마나 읽기 어려운지에 대해서도 똑같이 적용됩니다. 텍스트를 전부 대문자로 쓰면, 각 단어의 독특한 모양 및 유저가 훑어보는 데 도움이 되는 시각적 단서를 잃게 됩니다. '


모양의 대비는 아이콘과 텍스트 모두에서 중요한 특성입니다. 인터페이스를 아름답게 해 주고 이용하기 쉽게 만들어 주는 것들입니다. 유저가 더 빨리 훑어볼 수 있게 해주려면 뚜렷이 다른 아웃라인을 아이콘에 사용하세요. 그렇게 하면 아름다운 아이콘의 모양이 낭비되지 않을 겁니다. 


감사합니다.




전민수 UX 컨설턴트 소개
(UX 실무 경력: 27년차 UX 전문가: LG전자, 서울시청 등 약 300회 이상 UX 컨설팅 수행)
(UX 강사 경력: 23년차: 삼성전자, SK텔레콤, KT 등 약 1,000회 이상 UX 강의 진행)

https://brunch.co.kr/@ebprux/1332


[실시간 Live 강좌] (PM/PO/UI/UX/리서치) 수강생 모집 중 

(이비피알유엑스 라이브클래스에서 매월 최소 1개에서 최대 4개  강좌 (온라인) 줌 Live 강좌 진행) (PM/PO/UI/UX/리서치/UX 방법론&프로세스 프레임웍)

https://ebprux.liveklass.com/


[VOD 강좌] (PM/PO/UI/UX/리서치) 수강생 모집 중  

(인프런에서 총 20개 VOD UX 강좌를 오픈했습니다)

(PM/PO/UI/UX/리서치/UX 방법론&프로세스 프레임웍)

https://www.inflearn.com/users/196290






브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari