brunch

매거진 기획 익힘북

라이킷 36 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 엠케이랩 Jul 07. 2020

서비스 가치를 전달하는 카드 컴포넌트를 기획하십니까?

Better UX

카드는 조직화된 레이아웃으로 정보를 유저에게 효율적이고 심미적으로 전달할 수 있는 매우 훌륭한 컴포넌트입니다. 기획자가 고려한 카드의 설계 목적에 적합한 이미지와 정보의 조합은, 유저들로하여금 여러분이 원하는 행동을 유도해 낼 수도 있습니다. 물론 그 반대의 결과를 만들어 낼 수도 있습니다.

페이스북의 카드 컴포넌트

페이스북과 핀터레스트의 잘 설계된 카드 컴포넌트의 흥행으로 이제는 대다수의 서비스가 카드 컴포넌트를 사용하지만, 간혹 아쉬운 사례들이 보이곤합니다.

여러분의 카드 리스트가 좋은 UX를 제공하고 있는지 아래의 체크리스트를 통해 한 번 확인해보시기 바랍니다. 카드를 기획한뒤에는 제가 늘 체크해보는 내용입니다.

카드 UI 체크리스트

1. 카드들은 단일 주제에 대한 내용을 담고 있는가?
2. 카드에 담긴 정보들의 가치는 유익한가?
3. 디자인 가이드라인을 따르고 있는가?

1. 카드들은 단일 주제에 대한 내용을 담고 있는가?

Material design guide line

각 카드는 한 주제의 정보를 담고 있어야 소비 / 공유에 대해 유저는 더 쉬운 의사결정을 할 수 있습니다. 선택의 기준이 명확해질때 결정이 쉬워지니까요.

우측 카드는 안타까울지경입니다.

2. 카드에 담긴 정보들의 가치는 유익한가?

가장 중요한 내용입니다. 서비스가 지향하는 가치와 혜택을 유저에게 신속하게 전달하여, 특정 행동을 이끌어내기 위해선 카드에 어떤 정보를 담아내야할지 많은 고민이 필요할겁니다. 예시를 한번 살펴보죠.

좌측 : 에어비앤비 숙박 카드 우측 : 데일리호텔 숙소 카드

‘여행'이라는 동일한 카테고리로 앱 스토어에 등록되어있는 에어비앤비와 데일리호텔입니다.

숙박할 수 있는 ‘장소’에 대한 정보가 담긴 카드들이지만, 담고있는 내용은 다릅니다. 더 자세히 봅시다.

에어비앤비 카드 정보 : 썸네일, 호스트 등급, 위치, 평점, 태그, 영문 설명

데일리호텔 카드 정보 : 썸네일, 호텔명, 태그, 정상가격, 할인가격, 쿠폰, 할인율

특정 시간이 지난 후에 상품의 가치가 하락하는 ‘타임 커머스' 비즈니스모델을 보유하고 있는 데일리 호텔은, 객실의 정상가격과 할인율을 동시에 보여줌으로써 원래 필요한 비용보다 저렴하게 이용할 수 있다는 장점을 어필하고 있죠. 태그 역시 데일리호텔은 건물 전체를 구분짓는 방식으로 분류한다면, 에어비앤비는 공간의 특색을 담아낼 수 있는 태그들을 사용합니다.

여담으로 숙소를 찾는 사람에게 가격은 의사결정에 매우 중요한 정보인데 에어비앤비는 어떤 이유에서 가격을 카드에 공개하지 않는걸까요? 현재는 가격 정보를 보기위해선 3번의 액션을 필요로합니다.

1) 카드 클릭하여 상세보기로 이동
2) '예약하기' 버튼 클릭
3) 숙박 날짜를 선택

다른 이유가 더 있을수 있겠지만 제가 알아낸 바로는, 에어비앤비의 호스트들은 스마트 요금으로 가격을 설정할 수 있습니다. 최저 요금과 최고 요금을 설정하여 수요에 따라 요금이 자동으로 조정되는 기능입니다. 그렇기 때문에 날짜 정보를 받아야만 실제 요금을 안내할 수 있는거죠. 만약 에어비앤비가 해당 분야의 선도 기업이고, 그들의 UI가 심미적으로 예뻐서 그들의 레이아웃들을 여러분의 서비스에서 ~~흉내낸다면~~ 구현한다면 깊이 고민을 안해봤다는 반증일테고 빈틈이 생기는걸테죠. ~~일반인 김득구는 그래도 괜찮지만, 기획자 김득구는 그래선 안되겠죠.~~

이쯤되면 카드에 어떤 정보를 담아야할지 고민이 길어질겁니다. 이 경우엔 카드를 먼저 기획하기보다 카드의 상세보기 내용들을 먼저 기획한 다음 카드를 기획하면 과정이 조금 더 수월합니다.

가장 중요한건 역시, 카드를 통해 사용자가 어떤 의사결정을 하게 만들지 치밀하게 설계해야된다는겁니다.

카드에 없는 내용이 상세보기에 있을 수 있지만, 상세보기에 없는 내용이 카드에 있다면 일반적인 기획이 아니거나, 특정한 목적을 달성하기위한 이유였을겁니다.

“A 서비스의 디자인이 예뻐서 이렇게 만들었다.” “B 서비스가 업계 1위니까 참고했다"라는 말을 심심찮게 들을 수 있는데요. 보기 좋은 디자인은 물론이고, 그 곳에 담긴 정보들은 단순한 정보 나열이 아닌 유저의 의사결정을 유도하기위해 누군가 치밀하게 설계한 기획이라는 점 기억하시기 바랍니다.

3. 디자인 가이드라인을 따르고 있는가?

material.io

다른 서비스에서 카드 컴포넌트를 접하더라도, 불편함이 크게 들지 않는건 디자인 가이드라인을 준수했기 때문일겁니다. 우린 많은 컴포넌트에 익숙해져있습니다. 기존과 다른 새로운 방식을 만들어내는게 절대 나쁜건 아니지만, 새로운 작동 방식을 만들어낼때 유저들은 익숙하지 않음을 느낄 수 있다는 점, 그게 부정적인 의사결정으로 연결될 수도 있다는 점 유의하시기 바랍니다.

Material.io 구글의 디자인 가이드라인입니다. material.io

Do / Don't, Layout, 규칙에 대한 설명이 매우 잘 되어있으니 참고하시기 바랍니다.