아이콘은 버튼레이블의 어느 쪽에 배치해야 하는가
UX 디자인 배우기 #71
Today UX 아티클
※ 이 글은 UX Movement에 올라온 Anthony가 작성한 「Where to Place Icons Next to Button Labels」를 원작자의 동의하에 전문 번역 및 게시한 글입니다.
버튼 레이블 옆에 놓인 아이콘은 리스트에 있는 항목 옆에 붙은 글머리 기호(bullet points)와 같습니다. 두 가지 모두 제대로 배치하기만 하면, 보다 쉽게 정보를 찾고 훑어볼수 있게 해줍니다.
아이트래킹 연구 결과에 따르면 유저는 왼쪽부터 시작해서 세로로 훑어본다고 합니다. 시각적 스캐닝에 도움을 주는 용으로 아이콘을 사용하려면, 유저가 버튼 레이블을 보기 전에 아이콘을 보여줘야 합니다. 버튼레이블 왼쪽에 아이콘을 놓게 되면 유저가 아이콘을 먼저 볼 수 있습니다. 만일 아이콘을 버튼 레이블 오른쪽에 놓게 되면, 마지막에 보게 되기 때문에 유저가 훑어보는 데 별 도움이 되질 않습니다.
만일 유저가 레이블을 먼저 보게 된다면 아이콘은 장식 외에는 어떤 목적도 수행하지 못하게 되는 겁니다. 아이콘이 버튼 레이블을 묘사해야지, 그 반대가 되어서는 안됩니다.
본문 텍스트가 있는 버튼 레이블에서도 아이콘은 잘못 배치되곤 합니다. 유저는 왼쪽 상단에서부터 아래로 훑어봅니다. 즉, 아이콘은 본문 텍스트가 있는 버튼 레이블의 왼쪽 상단에 배치되어야 한다는 뜻입니다.
아이콘을 시각적 스캐닝에 도움을 주는 용도로 사용하려면, 아이콘을 버튼 레이블과 줄을 맞춰 배치해야지 버튼 레이블과 본문 텍스트의 중간에 배치하면 안됩니다. 그러면 유저가 아이콘을 먼저 보게 되어 쉽게 훑어볼 수 있게 될 겁니다.
아이콘과 글머리기호는 같은 역할을 합니다. 글머리 기호는 페이지에 있는 나머지 텍스트로부터 관심을 끌기 때문에 효과적입니다. 아이콘 역시 인터페이스에 있는 나머지 텍스트로부터 관심을 끌기 때문에 효과적입니다.
만일 유저가 버튼 레이블을 쉽게 찾을 수 없다면, 사이트를 돌아다니는데 어려움을 겪게 될 것입니다. 훑어보기 쉬운 곳에 아이콘을 배치하면, 유저가 적은 노력과 적은 시간을 들이고도 버튼을 찾을 수 있을 겁니다.
전민수 UX 컨설턴트 소개
https://brunch.co.kr/@ebprux/1332
[실시간 Live 강좌] (PM/PO/UI/UX) 수강생 모집 중
(이비피알유엑스 라이브클래스에서 매월 Live 최소 1개에서 최대 4개 UX 강좌 (온라인) 줌 Live 강좌 진행하고 있습니다)
[VOD 강좌] (PM/PO/UI/UX) 수강생 모집 중
(인프런에서 총 20개 UX 강좌: 인터넷/VOD 오픈했습니다)
https://www.inflearn.com/users/196290
