brunch

You can make anything
by writing

C.S.Lewis

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

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

today

Today UX 아티클


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


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


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



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


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


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


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


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


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


감사합니다.



라이브클래스 (줌 Live) UX 스터디 신청 프로그램 안내



1. 줌 Live!!! (실무자) 프로덕트 디자이너를 위한 UX 실무 과정: 총 26회, 총 78시간 (월/수/금 PM 8:30-11:30) 


2. 줌 Live!!! (취준생) UX 포트폴리오 부트 캠프 과정: 총 21회, 매주 토/일 PM 8:00-11:00 (OT 1회, 이론 10회, 포플 피드백 10회)


3. 줌 Live!!! (예비 입문자) 프로덕트 디자이너를 위한 사용성에 대해 깊이 파고 들고, 프로덕트 역량 키우기 UX 스터디: 총 5회(이론 4회+과제 피드백1회), 총 15시간 (토 오전 10시-오후 1시)


4. 줌 Live!!! (예비 입문자) 프로덕트 디자이너를 위한 UI와 인터랙션 원칙에 대해 깊이 파고들기 UX 스터디: 총 5회(이론 4회+과제 피드백1회), 총 15시간 (토 오후 3시-6시)


5. 줌 Live!!! (예비 입문자) 프로덕트 디자이너를 위한 HCI와 UX 정의에 대해 깊이 파고들기 UX 스터디: 총 5회(이론 4회+과제 피드백1회), 총 15시간 (일 오전 10시-오후 1시)


6. 줌 Live!!! (예비 입문자) 프로덕트 디자이너를 위한 UX 프로세스 깊이 파고들기 UX 스터디: 총 5회(이론 4회+과제 피드백1회), 총 15시간 (일 오후 3시-오후 6시)


7. 줌 Live!!! (예비 입문자) 프로덕트 디자이너를 위한 UX 리서치 기초 뼈대 튼튼히 만들기 UX 스터디: 총 5회(이론 4회+과제 피드백1회), 총 15시간 (화 오후 8시30분-오후 11시30분)


8. 줌 Live!!! (예비 입문자) 프로덕트 디자이너를 위한 UX 원칙&디자인 가이드 뼈대 만들기 UX 스터디: 총 5회(이론 4회+과제 피드백1회), 총 15시간 (목 오후 8시30분-오후 11시30분)





라이브 클래스 PM VOD 패키지(리서치/분석/전략/설계)


178여개 UX 강좌(총 300시간) PM VOD 패키지 98% 할인 이벤트!!!! 매일 하루에 딱 한명만!!!! 선착순 1명!!!! 

https://ebprux.liveklass.com/



매거진의 이전글 챗봇 UI Tips

작품 선택

키워드 선택 0 / 3 0

댓글여부

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