brunch

매거진 UX 디자인의 모든 것

라이킷 33 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by UX 컨설턴트 전민수 Sep 07. 2016

UX 디자이너가 알아야 할 이미지 UX설계 원칙

UX 디자인 배우기 #31

Today UX 아티클

※ 이 글은 Adobe Creative Cloud에 게재된 Linn Vizard가 작성한 「8 Tips and Tricks for Using Images toImprove UX」를 원작자의 동의하에 번역 및 게시한 글입니다.

8 Tips and Tricks for Using Images to Improve UX | Creative Cloud blog by Adobe

Some tips and tricks for making sure your photos are as usable as possible, and are contributing to a great user experience.

blogs.adobe.com

UX 디자이너로서 사용성을 고려할 때 내비게이션 플로우나 행동 유도 버튼의 레이블 등을 많이 고민하게 된다고 합니다. 반면 이미지는 프로토타입을 그릴 때도 엑스 박스로 간단하게 처리해 버리는 경우가 흔하다고 합니다.

프로토타입에서 이미지 영역은 엑스 박스로 처리하게 되는데, 그러면 무엇을 위해 이미지를 사용하는지, 이미지로 소통이 될지, 어떤 이미지를 사용할지 제대로 생각하지 못하게 되는 문제가 있다고 합니다.

웹과 디지털 플랫폼에서 이미지가 UX에 미치는 영향은 매우 크다고 합니다. 싸구려 같고 생각 없이 가져온 듯한 스톡 포토그래피(stock photography)는 사이트에 대한 관심을 잃게 만들 수 있다고 합니다. 또한 유저는 광고처럼 보이는 이미지는 그냥 지나쳐 버린다고 합니다.

그렇다면 어떤 사진이 쓸만한 사진일까요? James Chudley은 이렇게 말했다고 합니다:

“가장 편리하고 효과적인 사진은 유저에게 분명하게 의사전달을 하고, 유용하며, 브랜드와 연관성이 있고, 감성적인 반응을 불러일으키며, 디자이너가 의도한 방향으로 유저에게 경향을 미친다”

쌤소나이트 웹사이트는 네비게이션에서 이미지를 활용하여 유저에게 카테고리를 보여준다고 합니다.

Jared Spool은 이미지를 다음 세 가지 유형으로 나눈다고 합니다.

1) 내비게이션 그래픽스: 정보구조 및 탐색 플로우를 서포트 해주고, 유저가 다음에 어디로 가야 하는지 선택하도록 도와줍니다.

2) 콘텐츠 그래픽스: 글에서 얻을 수 없는 추가 정보를 제공해줍니다. (예: 에어비앤비는 머물 곳의 이미지를 제공하고 수익이 두 배가 되었다고 합니다.)

3) 장식용 그래픽스: 정보가 없고 꾸미는 역할만 하는 이미지. 사용자 경험에 별 도움이 안 되므로 최대한 적게 써야 합니다.

다음은 사용성에 도움이 되면서도 사용자 경험에 기여하는 이미지를 선택하는 팁과 요령이라고 합니다.

UX 개선을 위한 8가지 이미지 활용 팁과 요령

이미지와 함께 콘텐츠를 먼저 디자인한다.

일단 최종 이미지를 프로토타입에 넣을 수 없다 해도, 방향을 제시하는 이미지를 넣는 습관을 기르라고 합니다. 이미지의 방향을 어떻게 제시할지 생각해보면 최종 제품의 UX를 개선하는 데 도움이 된다고 합니다.

레이아웃을 고려한다.

잘린 이미지는 피하고, 이용 중인 디자인의 레이아웃과 포맷을 보완해주는 이미지를 선택하는 것이 기본적인 고려사항이라고 합니다. 포맷 비율에 맞는 이미지를 선택하는 것이 사용성 강화에도 도움이 될 것이라고 합니다. 늘린 이미지는 좋지 않다고 합니다.

Othr.com

위 Othr.com은 읽기 쉽고 멋진 텍스트를 얹기 위해 여백이 많은 제품 이미지를 사용한다고 합니다. 이는 설명 문구와 제품의 이미지가 잘 어우러지도록 만들어 좋은 쇼핑 경험을 만들어준다고 합니다.

텍스트를 적절하게 이용한다

이미지 위에 텍스트를 얹는 것은 사용성 측면에서 어려운 도전과제가 될 수 있다고 합니다. 텍스트를 읽기 쉽게 만들기 위해서는 텍스트와 배경 이미지의 명도 대비를 확인해야 한다고 합니다. 일반적으로는 이미지에 글을 쓸 때는 여백이 많은 미니멀한 이미지를 선택하는 것이 가장 좋다고 합니다.

Chemistry.com

Chemistry.com 은 회원가입 쪽을 쳐다보고 있는 이미지를 사용하여 순간적으로 유저의 시선을 끈다고 합니다. 회원가입은 이 페이지의 핵심적인 전환율 지표와 같은 것으로, 이런 테크닉은 유저가 꼭 회원가입 영역을 바라보게 만든다고 합니다.

눈을 이용해 눈길을 끈다.

행동심리학에 따르면 우리는 사진에 등장하는 사람이 눈길을 주는 곳에 눈이 가게 되어있다고 하며, 이는 헤드라인이나 행동유도 요소에 활용될 수 있다고 합니다. 심지어 동물 이미지를 사용해도 된다고 합니다.

포괄적인 이미지보단 구체적인 이미지를

이미지를 선택할 때는 여러분에게 득이 되는 구체적인 이미지를 이용하라고 합니다. 스톡포토그래피가 진부해진 이유는 이미지가 포괄적이면서도 모호한 특성(예. 여자가 샐러드를 들고 웃고 있는 사진)을 가졌기 때문이라고 합니다. AdobeStock Premium과 같은 신규 서비스에서는 보다 현실적이면서 시나리오를 가진 고품질의 이미지를 제공한다고 합니다.

Adobe Stock Premium

Adobe Stock Premium 같은 서비스는 보다 현실에 가까운 다양한 사진을 제공해준다고 합니다. 좋은 사진 UX는 연관성 있고 현실감 있는 이미지에 의존한다고 합니다.

사진으로 이야기를 전한다

스톡포토그래피를 이용할 때는, 여러분이 전달하고자 하는 것에 딱 맞는 이미지인지 아닌지 면밀히 생각해봐야 한다고 합니다.

접근성이 중요하다

이미지와 사진의 접근성은 웹사이트를 최대한 많은 사람들이 사용하기 편하게 만드는 데 중요하다고 합니다. 중요한 정보를 담은 이미지는 이미지와 동일한 정보를 전하는 알트 태그(alt tag)로 서술해야 한다고 합니다. 만일 이미지에 링크가 있다면 알트 태그로 그 링크가 무엇인지도 전달해야 한다고 합니다. 단지 꾸미기 위해 사용된 이미지는 그 정보가 태스크 완료에 전혀 중요하지 않기 때문에 알트 태그가 들어가면 안 된다고 합니다. 알트 태그가 SEO를 높여준다고도 하니 윈윈 전략이라고 합니다.