UX : 사용자의 판단을 좌우하는 레이아웃 디자인

안녕하세요 센드타임 임건입니다!

오늘은 제가 좋아하는 디자이너님이 쓰신 사용자를 사로잡는 UX·UI 실전가이드(김성연) 책을 읽고 개인적인 의견과 개인 경험을 담아 글을 작성했습니다. 해당 책에서 일부 발췌한 부분들도 있습니다.

UX, HR, 프로덕트 개발 등의 이야기를 좋아하는 저의 센드타임 링크에도 커피챗하러 놀러와주시면 감사하겠습니다 :)

🎨 디자인은 중립적이지 않다는 사실.

지금 이 시대의 사람들은 평소 수많은 서비스를 하루에 수없이 많이 접속하고 사용하기를 반복합니다.

사용자는 서비스들에서 버튼, 정보 등의 여러 선택지를 끊임없이 마주하는데요. 이 버튼을 누를지말지, 이 정보를 볼지 말지 결정하는데 자신의 생각에 따른 선택과 판단으로 서비스를 경험하고 있습니다.

그런데 정말로 사용자의 생각과 의지에 따른 선택을 통해 서비스 안에서 활동할까요?

이번 글에서 다루려는 핵심 질문이에요.

그렇지 않습니다. UI/UX 디자이너가 크기, 색, 질감, 공간감, 형태, 레이아웃 등의 시각적 위계를 발생시키는 요소들을 이용해 설계한 우선순위 안에서 사용자의 선택이 시작됩니다. 이 사실을 부정할 수 없다는 것을 다음에서 얘기해보려 해요. 사용자는 어쩔 수 없이 디자이너가 제시한 우선순위대로 정보를 참고하며 선택의 여부를 결정하게 되는 것입니다.

"인간의 진화 과정 중 편향을 유발할 수 있는 수많은 인지적 요소들이 뇌에 남아 매번 이성적인 판단을 내리기 어렵다. 특히 앱의 홈 화면처럼 사용자와 처음 맞닥뜨리는 인터페이스는 사용자의 판단에 많은 영향을 끼친다. 이를 행동경제학에서는 닻 내리기 효과 또는 앵커링 효과라 한다."

(사용자를 사로잡는 UX·UI 실전가이드 306p 중)

📷 사람이 드러나기를 꿈꾸는 인스타그램 디자이너

1.레이아웃은 서비스가 추구하는 가치를 결정한다.

아래 사진의 인스타그램 UI를 딱 5초만 보고 올라와보세요. 그리고 눈을 감고 잠시 생각해봐요. 어떤 정보가 눈 앞에 아른거렸나요? 그 잠깐 동안 보였던 정보가 어떤거 였나요?

혹시 큰 이름과 인스타그램 계정의 팔로워와 팔로잉 수치이지 않았나요? 이 디자인에서는 레이아웃 배치와 Text의 굵기를 이용해 포스트, 팔로워, 팔로잉 수의 시각적 위계를 높여 놓았습니다. 그렇기에 해당 정보에 눈이 가장 먼저 가서 머무를 확률이 높게 된 것입니다.

그런데 생각해봐요. 인스타그램을 만드는 디자이너들이 중요시 여기는 가치가 인스타그램의 팔로워와 팔로잉 수치일까요? 아니에요. "팔로워가 많은 사람들이 가치있는 사람이다"로 느끼게 하려는 것이 아니라 인스타그램은 누구나 기억할 수 있는 순간들을 만들고 기록해 나중에 사람들의 삶을 돌아보게 해 더 가치있게 만드는 목표를 가지고 있어요.

하지만 위와 같은 디자인에서는 인스타그램의 팔로잉, 팔로워 수치에 집중하게 되고, 이는 높은 팔로워의 사람을 보고 "와 저 사람은 대단한 사람이구나", "주위에 좋은 사람들이 엄청 많겠다", "사람들에게 많은 관심을 받고 있는 사람이구나" 라는 추측과 함께 자신의 삶을 비교하고 결핍을 찾게 만듭니다.

그래서 인스타그램의 디자이너 Ian Spalter는 리디자인을 통해 숫자가 아닌 사람이 드러나게 하고자 했다고 해요.

아래의 인스타그램 UI도 딱 5초만 보고 다시 올라와봐요. 그리고 다시 눈을 감고 생각해봐요.

어떤 정보가 눈에 가장 먼저 들어왔나요?

이전에 가장 먼저 보이던 팔로워, 팔로잉 수치가 아닌 Maxi Blue와 이 사람에 대한 자기소개가 가장 먼저 보이지 않았나요? 기존의 팔로워/팔로잉 영역의 시각적 위계를 레이아웃 이동과 크기 조절을 통해 낮춤으로써 팔로워/팔로잉 수치보다 이름과 직업같이 사용자에 대한 것들을 더 돋보이게 만들었어요.

이처럼 레이아웃은 사용자의 시선흐름을 결정하고, 그 결정으로 인해 서비스가 사용자에게 전달하려는 가치가 달라질 수 있어요. 아주 사소한 변화처럼 보이지만 하나의 서비스가 전세계적으로 사용되는 이 시대의 맥락에서는 전 세계인들에게 변화된 큰 가치를 전달한다고 생각해요.

그렇기에 우리 메이커들은 디자인할 때 항상 조심하고 조심해야 한다 생각해요.

아래 사진을 통해 다시 리디자인 Before / After을 비교해봐요.

<사진 출처 :: 다큐멘터리 Abstract: 디자인의 미학>

💳 저렴한 물건 판매 VS 값 비싼 물건 판매

2.레이아웃은 사용자의 판단 기준에 영향을 준다.

사진 출처 :: Designus 인스타그램 바로가기

-> 정말 좋은 디자인 내용들이 많으니 팔로우 하시고 보는거 추천드려요!

지난 달 말에 나온 디자이너스 문제에요. 과연 A안과 B안 중에 어떤 디자인이 더 옳은 디자인일까요? 둘의 차이점은 각 상품 컴포넌트에서 가격 정보의 위치가 상품 사진 바로 다음인지, 마지막인지에요.

실제 사용자 데이터를 추출해보기 전까지는 정확한 정답을 바로 알 수는 없어요. 하지만 상품의 가치보다 싼 가격을 강조해서 사용자들이 사게끔 하는 생필품 종류들이면 A 시안이 더 좋고, 상품의 설명과 가치를 드러내야하는 것들이라면 B 시안이 더 좋지 않을까 싶어요. 이렇게 배치 순서에 따라 드러내는 사용자 판단에 들어오는 우선순위의 가치가 달라져요.

🖱️ 사용자가 버튼을 누르게 만드려면?

3.레이아웃은 사용자의 행동을 유도한다.

사진 출처 :: Designnas 인스타그램 바로가기

-> 여기도 정말 좋은 디자인 내용들이 많으니 팔로우 하시고 보는거 추천드려요! 아까 Designus 랑 한끗차이로 이름이 달라요 ㅎㅎ

여러 분들은 어떤 시안이 더 좋다고 생각이 드나요? 저는 시선의 흐름에 따라 첫번째로 컨텐츠를 확인한 후에 사용자가 "어 더 보고싶은데..?" 라는 생각이 들 때 아래에 '커리큘럼 상세 보기' 가 나오면 시선의 흐름상 자연스러워서 매끄러운 사용자 경험이 될 것 같다고 생각을 했어요. 이처럼 좀더 사용자의 행동을 시선의 흐름과 맥락에 맞게 좀더 잘 유도할 수 있어요.

📄 F패턴과 Z패턴!

이 모든 이유는 레이아웃이 사용자 시선의 흐름을 결정하기 때문이다.

사용자들은 사이트를 자세히 확인하지 않고 읽지 않고 스캔을 합니다. 무언가가 눈에 들어올 때만 봅니다. 그렇기에 사이트를 디자인할 때 F 패턴이나 Z패턴을 이용하면 사람들의 눈이 따라갈 올바른 정보의 길을 만들 수 있습니다

F패턴과 Z패턴은 잘 정리해준 글이 있어서 해당 글을 공유드립니다.

F패턴과 Z패턴(by 정윤선): https://brunch.co.kr/@blackindigo-red/38

🖥️프로젝트 디자인에 직접 응용하기

예전에 잠깐 사이드 프로젝트로 아래와 같이 "웨비나를 모아주는 사이트"를 친구하고 간단하게 프로토타이핑을 해봤었어요.

대충 이렇게 간단한 사이트인데요! 이 웨비나 카드 하나를 담는 카드 컴포넌트를 디자인할 때 처음에 나온 시안은 이렇게 생겼었습니다.

그런데 이렇게 디자인을 했더니 문제가 되었던 점이 있었어요. 카드만 스윽 보고 나서는 사용자가 어떤 팀/사람이 웨비나를 개최하는 것인지, 언제 이 웨비나가 개최되는 것인지 파악할 수가 없었던 점이에요. 물론 이런 내용보다 썸네일과 웨비나 내용이 눈에 더 잘 들어오는 효과가 있긴 했어요. 그래도 주최자/날짜가 더 중요한 정보라 생각해서 정보의 배치 순서를 바꿔봤어요.

이렇게 바꾼 결과 사이트를 스캐닝하면서 스윽 넘어가는 사용자 분들도 어떤 사람/회사가 주최하는지, 날짜를 좀더 쉽게 파악할 수 있게 되었어요. 그래서 주최자와 날짜만을 보고서도 웨비나에 참여할지 결정할 수 있는 디자인이 되었어요!

이렇듯이 레이아웃 배치는 사용자의 판단 흐름을 결정하게 되는 것 같아요. 여러분들이 만드는 프로덕트는 여러분 소수가 만들지만 그 프로덕트가 널리 퍼졌을 때 사용하는 사용자들은 엄청나게 많다는 것을, 그렇기에 좀더 신중하게 더 중요한 가치를 사용자에게 남길 수 있는 프로덕트를 만들어나가는 디스콰이엇 메이커분들이 되었으면 더 좋겠습니다 :)

긴 글 읽어주셔서 감사드립니다.