[UX 특강(조엘 마쉬)] 실용 레이아웃 디자인 (목차, #17~24)

#17

여러분이 쓴 글자 하나 하나, 여러분이 만든 픽셀 하나하나를 모든 사용자들이 신나게 봐줄 거라고 생각하기 쉽습니다. 그런 망상에서 그만 나오세요. 실제 사용자는 그렇게 하지 않으니까요. 실제 사용자는 훑어봅니다. 훑어본다는 건 뭔가 시선을 잡았을 때만 멈춰서 읽어본다는 뜻이죠. 그러니 이번 글에서는 훑어보기 패턴에 대해 알아봅시다.

Z 패턴, F 패턴, 시각적 계층

웹사이트나 앱을 사용하는 건 그때마다 조금씩 다른 경험처럼 느껴지겠지만, 실제로 사람들이 어떤 디자인을 보는 방식은 꽤나 그럴싸하게 예측할 수 있습니다…

* Z 패턴

제가 생각할 수 있는 가장 지루한 디자인부터 생각해보죠. 한 면 가득 글자로 빼곡한 신문 페이지입니다. 기사는 하나 뿐이고, 제목 없고, 이미지도 없고, 줄바꿈이나 인용 단락도 없습니다. 그냥 글씨가 그것도 다단 형태로 이쪽 구석부터 저쪽 구석까지 꽉 채워져있습니다.

이런 디자인에선 (여러분이 절대로 이런 건 안 만들었으면 좋겠어요.) 사용자들이 일반적으로 위에 표시한 것처럼 “Z” 형태로 훑어봅니다.

지루해요! Zzzzzzzzzz…. (제가 저거 보면서 뭐 했는지 아시겠죠?)

지난 다섯 편의 글에서 시각 디자인의 원리에 대해 설명한 건, 여러분이 이 레이아웃을 더 낫게 만드는 방법을 알기 바랐기 때문이에요.

아하!

큰 제목을 넣거나 (시각적 무게감) 시선이 따라 움직이게 일단으로 처리하거나 (선의 긴장) 더 작은 세부로 나누면 (반복), 사람들이 유명한 F 패턴에 근접하게 됩니다.

위의 컬러 그림은 눈 추적 결과를 “히트 맵”이라는 형태로 보여줍니다.눈 추적은 사람들이 어디를 보는지를 기록하는데, 사람들이 오래 보는 것일 수록 히트맨에서 좀 더 “뜨겁게” 표시됩니다.

비슷한 레이아웃 = 비슷한 결과.

F 패턴은 한때 닐센 노먼 그룹의 창립자를 유명하게 해주기도 했어요. 그 이후 한동안 “도약”급 작업을 내놓진 않았지만, 여전히 읽을만한 보고서를 많이 내놓고 있어요.

* F 패턴은 이런 식으로 동작합니다.

왼쪽 위에서 시작. 여기까진 Z패턴과 같아요.

텍스트의 첫 줄 또는 제목을 읽거나 훑어봄.

뭔가 흥미로운 걸 볼 때까지 단락의 왼쪽 편을 따라 쭉 훑어내려감.

흥미로운 건 좀 더 자세히 읽어봄.

계속 훑어내려감.

이런 방법을 계속 하다 보면 히트맵은 E자나 F자 모양을 띄게 됩니다. 그래서 그런 이름이 붙었죠.

***

* 이게 왜 중요할까요?

특정 페이지의 어떤 부분은 “자연스레” 시선이 많이 가는데, 그 페이지의 다른 부분은 대부분 무시하게 된다는 걸 알아채셨을 지도 모르겠군요. 레이아웃에서 “강한” 지점, “약한” 지점이라고 부르는 게 그런 뜻이에요.

왼쪽 위에 있는 버튼은 오른쪽 위에 있는 버튼보다 클릭을 잘 받아요. 그 다음이 왼쪽 아래, 그리고 다음이 오른쪽 아래죠. 어느 쪽이든 모퉁이에 있는 게 가운데 어딘가에 아무렇게나 처박힌 것보다는 클릭을 많이 받아요. … 뭔가 그 가운데에 묘수를 부리지 않았다면 말예요.

콘텐츠의 각 “블럭”과 각 단도 각자의 F 패턴을 가질 수 있다는 걸 알아두면 더 좋아요. 한 페이지에 F 패턴이 하나만 있어야 하는 건 아녜요. 하지만 이건 좀 더 어려운 얘기니 다음 언젠가 해보죠.

****

* 시각적 계층

중요한 텍스트 표시하려고 타이포그래피 쓰고, 버튼 강조하려고 특정 색깔을 쓰고, 중요한 것에 시각적 무게감을 더 주면, 시각적 계층이 생겨나요. 즉, 사람들이 쉽게 훑어볼 수 있는 디자인이 되는 거죠. 로봇처럼 처음부터 끝까지 쭉 훑어보는 게 아니라, 우리 눈은 중요한 곳에서 다음 중요한 곳으로 건너 뛰거든요.

시각적 계층이 좋아 보이기 때문에 좋다고 말하는 디자이너들도 있지만, 실제로는 훑어보기 더 쉽기 때문에 더 좋게 느껴지는 거에요.

* 다른 형태의 눈 추적 결과 유형도 보고 싶나요? 핀터레스트에 제가 모아 놓은 눈 추적 게시판을 보세요!

다음 글에서는 눈 추적에서 영감을 받은 생각들을 계속할 거에요. 목표에 따라 어떻게 다르게 디자인을 사용하는지 배워보죠. 둘러보기 vs 찾기 vs 발견하기. 기대해주세요.

 

#18

사이트나 앱은 사용하는 사람도, 각각의 사용하는 이유도 다릅니다. 잘못된 행동에 맞춰 디자인하면 바라는 결과를 얻지 못합니다. 이 글에서는 다음 내용을 배워보죠.

둘러보기 vs 찾기 vs 발견하기

위의 제목은 실제 세상에서는 여러 의미로 쓰일 수 있으니, 이번 글의 목적에 맞게 다시 정의해볼게요.

‘둘러보기’는 이케아에 가서 “아이디어만 얻으려고” 모든 전시실을 둘러본 다음 몇가지 자질구레한 걸 사들고 나오는 것입니다.

‘찾기’는 이케아에 가서 여러분의 말도 안 되게 작은 아파트에 맞는 새로운 소파를 찾는 것입니다.

‘발견하기’는 원하던 소파를 찾고 그 소파에 쏙 들어가는 기발한 협탁도 하나 사는 겁니다. 왜냐면 진짜 멋지게 기발하고 쏙 들어가거든요. 여러분의 인생에 꼭 필요했던 것처럼 말예요.

****

* 둘러보기

여러분이 온라인 스토어를 방문했습니다. 거기 상품이 멋져보이거나, 트렌드를 좆고 싶었다거나, 마침내 2,000$ 짜리 핸드백으로 삶을 완성하는 그 날을 꿈꾸며 간 거라면, 여러분은 둘러보는 중입니다.

둘러보는 사용자는 이미지 대부분을 빠르게 훑어봅니다. 하나씩 차례로, 왼쪽 위부터 시작해서 말예요. 몇 개 건너뛰는 것도 있지만, 그 정돈 상관없어요. 사용자가 매력있게 느낀 사진은 좀 더 주의를 끌게 됩니다. (어쩌면 심지어 클릭해줄 지도 모르죠!)

둘러보기에 맞춰 디자인하려면: 훑어보기 쉽게 만들고 콘텐츠를 빠르고 시각적으로 유지해야 합니다. 페이지를 온갖 똥으로 가득 채우진 마세요. 제품이 감정적으로 호소할 수 있는 면에 집중하세요. 그게 스타일이라면 사진에 집중하세요. 그게 성능이라면 (보트 엔진이나 총처럼) 해당 정보를 라벨로 명확하게 표시해주세요. 그게 브랜드라면 로고를 뚜렷하게 보여주고요. 그게 세공이라면 손으로 한땀 한땀 만든 세부를 확대해보여주세요. 기타 등등.

***

* 찾기

누군가 뭔가 마음에 담아둔 것을 찾으려고 한다면, ‘둘러보기’와 비슷해보일 수 있습니다. 하지만 눈 추적 연구에 따르면 실제 행동은 매우 다르다고 해요. 이들은 사냥을 합니다.

찾는 사용자는 수없이 많은 제품이나 사진을 무시할 것입니다. 여러분의 레이아웃이 잘 조직되어 있다면 이 사용자들이 선택지들을 헤치며 체계적으로 찾을 수 있을 것입니다. 이들은 단 하나라도 놓치고 싶어하지 않아요!

핀터레스트 스타일의 레이아웃은 이런 사용자에게는 맞지 않습니다. “삐뚤빼뚤”하고 아무렇게나 뜨거든요. 하지만 선택지를 “필터링”할 수 있는 건 가끔 쓸만합니다.

찾기에 맞춰 디자인하려면: 속성에 집중하세요. 사용자가 찾는 게 갈색 머리칼, 파란 눈의 러시아 신부라면 이런 속성이 있는 사진마다 멈춰서 볼 겁니다. 하지만 금발은 방해가 될 뿐이겠죠.

대부분 사용자에게 가장 “핵심적”일 속성을 강조하세요. 다른 건 더하지 마시고요. “어수선해”보일까봐 걱정하지 않아도 좋습니다. 정보가 유용하다면 “어수선한” 게 아니니까요. 여기는 미술관이 아니에요.

사용자가 원하는 것을 찾으면, 사용자는 더 많은 정보를 얻으려고 (또는 구매하려고) 클릭하게 될 겁니다. 러시아 신부의 이름, 추가 사진들, 연상의 으스스한 남자들에 대해 어떻게 생각하는지 등은 흥미있는 지점들이 될 수 있겠지만, 그녀의 신발 크기는 어떤지 와플을 얼마나 좋아하는지 같은 건… 음, 별로 중요하지 않겠죠.

****

* 발견하기

자, 여러분이 골동품 카주를 끝내주게 잘 준비해놨다고 칩시다. 사용자들이 그걸 찾고 있지는 않지만, 만약 찾게 되면 살 것 같다고 가정해봅시다. 사용자들이 어떻게 발견하도록 하겠습니까?

‘사람들은 이런 식으로 새로운 걸 발견할 거야.’라는 여러분의 생각은 아마도 실제 사람들이 새로운 걸 발견하는 방식과는 반대일 것입니다. UX의 괴짜 세상에 오신 것을 환영합니다.

여러분은 아마도 다음 두 가지 실수를 저지를 것입니다.

1) 해당 제품을 선전하는 여러분 자체 사이트의 메인 메뉴에 넣거나 “배너”를 만들어 붙일 겁니다.

2) 여러분의 가장 충성스러운 사용자들이 가장 먼저 발견하리라 예상하겠죠. 그 사람들이 지금 디자인에서 가장 오랜 시간을 보내고 있으니까요.

두 가지 모두 틀렸습니다.

#1: 사용자들은 뭔가를 찾을 때만 메뉴에 있는 걸 클릭합니다. 그렇게나 간단한 거에요. 메뉴에서 “발견하는” 사람은 거의 없습니다. 배너도 통하지 않습니다. 왜냐면 배너는 한 번도 통한 적이 없으니까요. 인터넷을 써보긴 하신 거에요? 난데없이 새삼스레 사람들이 배너에 열광할 이유가 있나요?

#2: 경험이 많은 사용자일수록, 새로운 것을 찾아 덜 뒤져봅니다. 실제 세상에서 사이트나 앱에서 뭘 할 수 있는지 알려고 뒤적거리는 건 초짜들 뿐입니다. 경험 많은 사용자들은 자신이 원하는 걸 알고, 어떻게 얻는지도 압니다. 뭐하러 뒤져보겠어요?

“그걸 좋아하신다면, 이것도 좋아하실 걸요…”

사용자가 새로운 걸 찾기를 바라기보다는, 사용자들이 이미 찾는 것을 찾게 해주세요. 새로운 것을 거기에도 덧붙여서 (관련성 있게 해야겠죠.), 사람들이 “발견”할 수 있게 해주세요. 여러분 입장에선 마치 새로운 걸 감춰놓는 기분이 들겠지만, 실제로는 올바른 사람들에게 제대로 보여주고 있는 것입니다.

레딧 같은 사이트라면 사람들은 최고 추천 글을 보러 오는 것이지 새 글을 보러 오는 게 아닙니다. 하지만 새 글에 아무도 추천을 날리지 않는다면, 최고 추천 글도 없어지겠죠! 그래서 레딧은 최고 추천글 목록에 새 글(여러분이 좋아하는 분류에서 뽑아서요.)을 몇 개 끼워넣습니다. 이렇게 하면 새 글도 사람들에게 보이게 되고, 추천도 받고, 삶의 순환을 다시 한 번 시작할 수 있죠.

****

사용자를 이해할수록 어디에 맞춰 디자인해야 할 지 잘 알게 됩니다. 망할 사용자 연구 좀 하시라고요!

****

다음 글에서는 페이지 레이아웃 디자인 실무의 첫걸음을 해볼 겁니다. 페이지 프레임웍 – 내비게이션과 푸터. 기대해주세요.

 

#19

여러분은 이제 목표를 세웠고, 사용자를 연구했고, 정보 설계를 계획했습니다. 이제 이 계획들을 실헌할 때입니다, 아싸! 그러니 이 글에서는 다음 내용을 배워보죠.

페이지 프레임웍 – 내비게이션, 푸터, 기타 등등

와이어프레임을 페이지마다 하나씩 하고 싶겠지만, 그러지 마세요! “두 번 재고 한 번에 잘라라” 같은 얘기에요.

보통은 문신을 새길 때처럼 와이어프레임을 만들어야 해요. 커다란 것부터 시작해서 진행하면서 세부를 추가하는 거죠.

이 경우에 커다란 부분이란 모든 페이지에 나타날 요소들입니다. 내비게이션과 푸터 말이죠.

****

* 푸터

푸터는 보통 메인 내비게이션에 넣기에는 너무 일반적이거나 너무 별 것 아닌 정적인 링크들의 모음입니다. 푸터 디자인이 뛰어난 사이트도 있지만 (대단하죠.), 사용자가 해당 사이트를 조작할 때에 필요한 링크들이라면 푸터에 넣어서는 안 됩니다.

여러분 자신에게 물어보세요: “무한 스크롤되는 페이지가 하나라도 있을까?” 그렇다면 푸터에 들어간 모든 것들을 다른 곳 어딘가에서도 쓸 수 있게 해주세요. 언어 변경 메뉴가 푸터에 있는데, 언어를 바꾸려고 할 때마다 푸터가 도망간다면… 엿이나 드세요.

****

* 내비게이션

메뉴는 최소한 두 가지 종류가 있어요. 메인 메뉴와 서브 메뉴요.

메인 메뉴: 정보 설계를 제대로 했다면, 어떤 게 메인 메뉴에 들어가야 할 지 이미 알고 있을 겁니다. 사이트 맵에서 홈페이지 바로 아래에 있는, 즉 첫번째 레벨에 있는 링크들 말이에요.

메뉴가 좌우 방향인지 상하 방향인지 상관없이, 아이템은 가장 인기있는 것부터 가장 인기적은 것 순으로 놓아야 해요. (인기 순위는 사용자 흥미 측정자료에 맞춰하세요. 여러분이 얼마나 좋아하는지에 맞춰 하는 게 아니에요.)

메뉴를 처음 만드는 거라 자료가 없으면, 최대한 추측해서 순서를 정하고 개발자에게 나중에 메뉴 순서를 바꾸기 쉬웠으면 좋겠다고 말해놓으세요. 사이트에 실제 트래픽이 들어오기 시작하면, 추측했던 순서와 실제 인기도가 맞는지 확인하세요. 안 맞다면 고치고요.

서브 메뉴: 서브 메뉴는 사이트맵에서 사용자가 어떤 페이지에 머무르든지 간에 그 페이지 “아래에” 있는 페이지들의 목록입니다. 잠깐, 여러분 사이트맵 만든 것 맞죠? 휴. 좋아요. 아주 잠깐이지만 깜짝 놀랐다고요.

서브 메뉴에서 중요한 건, 링크가 늘 바뀌더라도 서브 메뉴는 모든 페이지에서 같은 위치에 있는 것이 이상적이라는 거에요. 그렇게 하면 사용자들은 어디에서 서브 메뉴를 찾아야 할 지 금방 알 수 있거든요.

* 서브 메뉴를 거대하게 만드는 건 절대 좋은 생각이 아닙니다.

메가 메뉴가 가장 최선의 방책이라고 논쟁하려는 사람을 볼 때마다 늘 놀라게 돼요. 그 말은 정보 설계(& 정보 설계자)가 구리다는 뜻이거든요.

메뉴 하나에 모든 걸 집어넣는 건, 전우주에서 가장 게으른 디자인입니다. 좀 더 노력하세요. 

메뉴는 데이트 같은 거에요. 선택지가 7-8개 이상 필요하다면 누군가의 마음을 아프게 하는 거에요. 어쩌면 그게 여러분의 마음일 수도 있겠고요.

****

* 간단 요약

콘텐츠를 만들기 전에, 여러분 앱의 모든 페이지와 화면에서 내비게이션과 푸터가 돌아가게 만들어놓으세요. 나중에 제게 감사하게 될 겁니다.

****

다음 글에서는 페이지 디자인의 커다란 문제를 다뤄볼게요. 폴드, 이미지, 제목. 기대해주세요.

 

#20

여러분은 커리어 내내 UX 디자인에 대해 뻔한 질문을 갖게 될 것입니다. 그 중 일부는 그런 질문을 할 때가 오지 않더라도, 생각해야만 해요. 그러니 이 글에서는 다음 내용에 대해 조금 배워보죠.

폴드, 이미지, 제목

****

* 폴드

구세대 UX 디자이너들이 가장 잘못 생각하는 것 중 하나가 바로 “폴드”입니다. 혹시 못 들어보신 분들을 위해 설명하면, 폴드는 사용자가 스크롤하기 전에 화면에 보이는 부분이에요.

폴드 위쪽에 있는 모든 것들이 최대로 잘 보입니다. 하지만 연구에 따르면 사용자의 60-80% 정도는 폴드 아래에 뭔가 있을까 싶어 스크롤한다더군요.

폴드 위쪽에 있는 거라면 무엇이든간에, 사용자에게 폴드 아래에 뭐가 있는지 말해줘야 합니다. 폴드 아래에 뭐가 있는지 모른다면 사용자는 스크롤을 내릴 만큼 흥미가 동하지 않을 지도 몰라요.

조심하세요: 요새는 페이지 가장 위쪽에 거대한 배경 이미지를 넣는 게 유행입니다. 그 배경이 폴드에서 딱 끊어지면, 사람들은 스크롤하지 않고 떠나버릴 지도 몰라요. “아래로 스크롤해보세요”라는 그래픽을 넣어야 할 정도라면, 지금 디자인이 약한 거죠.

폴드에 대해서는 이 곳을 좀 더 참고하세요.

****

* 이미지

이미지는 작동과 무관하다고 여기는 UX 디자이너들이 많은데요. 하지만 이미지는 사용자의 시선을 유도할 수 있습니다. 그러니 잘 생각해봐야돼요.

특히 인물 이미지는 레이아웃 위의 어떤 다른 것보다도 주의를 잡아끕니다.

일반론이지만, 이미지에 감정이 풍부할수록 사람들을 더 잡아끕니다.

* 유용한 팁: 인물 이미지를 쓴다면, 이미지 속 인물의 시선이 사용자가 바라봤으면 하는 방향을 향하도록 해보세요. 얼마나 달라지는지 알면 놀랄 겁니다.

위에 있는 두 히트맵 모두 레이아웃은 동일합니다. 이미지가 다른데, 하나는 아기가 제목을 보고 있고, 다른 하나는 독자를 보고 있죠.

두 이미지의 결과를 보면, 사용자들은 아기의 얼굴에 굉장히 집중합니다. 하지만 두번째 이미지에서만 텍스트 콘텐츠와 제품 사진, 로고에도 시선이 쏠리고 있죠.

여러분은 어떤 이미지를 고르시겠습니까?

****

* 제목

인물 이미지 외에, 우리 눈은 레이아웃에서 가장 크고 대비가 강한 텍스트 조각에 가장 끌립니다. 그러니 디자인에 커다란 제목을 넣는다면, 동시에 사람들이 훑어보기 시작할 시점을 선택한 셈입니다.

그러므로, 가장 중요한 콘텐츠 바로 위에 제목을 놓는 것이 중요합니다. 제목 바로 아래의 콘텐츠가 그렇게까지 중요한 게 아니라면 불필요하게 사람들의 주의를 너무 끌어버리는 거죠. (동시에 다른 콘텐츠에서 뺏어오는 거죠.) 콘텐츠가 그렇게 배열되지 않았다면, 사용자들은 제목을 읽고선 다음 시선을 줄 곳을 찾을 것입니다.

****

* 간단 요약

스크롤 하기 전에 주의를 기울일만한 걸 주세요.

스크롤 아래 쪽에도 내용이 있다는 걸 확실하게 보여주세요.

감정을 더하고, 사용자의 시선을 이끌 수 있는 이미지를 선택하세요. 

제목 위치를 통해 사용자에게 뭐가 제일 중요한지 알려주세요.

****

버튼은 왼쪽에 있어야 할까요, 아님 오른쪽에 있어야 할까요? 다음 글에서는 드디어 이 질문에 대해 답할 수 있는 규칙에 대해 배워보겠습니다. ‘인터랙션의 축’ 기대해주세요.

 

#21

사이트나 앱은 사용하는 사람도, 각각의 사용하는 이유도 다릅니다. 잘못된 행동에 맞춰 디자인하면 바라는 결과를 얻지 못합니다. 이 글에서는 다음 내용을 배워보죠.

인터랙션의 축

이 얘기는 말도 안 되게 단순해요.

인간의 집중력은 아주 한정적이에요. 우리는 한 번에 하나에만 집중할 수 있어요. 다람쥐든, 가슴이든, 덕 다이너스티든 한 번에 하나요. 그래서 콘텐츠 한 덩어리에 집중하고 있으면, 다른 콘텐츠는 잘 안 보이게 됩니다.

안 믿기신다고요? 이걸 보세요. 

****

* 가장자리를 찾으세요.

이번 특강에서 배운 시각 원리들을 모든 디자인에서 쓰게 될 겁니다. 잠시 한 발 뒤로 물러나서 여러분의 레이아웃을 보세요. 레이아웃 곳곳에 “선”이나 “가장자리”, “블록”을 만든 게 보이나요?

이런 것들은 텍스트나 이미지 아니면 줄지어선 것들의 가장자리에 맞춰 정렬되어 있을 겁니다.

이런 가장자리를 가리켜 인터랙션의 축이라고 합니다. 눈은 이 축을 따라 쭉 이동합니다. 축이 뭔가에 방해받거나 끝날 때까지요.

사용자의 시선은 거의 항상 인터랙션의 축에 집중하게 됩니다. 축을 따라 움직이다 멈추게 되면, 다음 인터랙션의 축으로 폴짝 건너뛰죠.

****

* 그러므로

뭔가를 클릭하게 하고 싶으면, 인터랙션의 축 위나 주변에 놓으세요. 클릭 안 했으면 싶은 것들은 다른 곳에 놓고요.

축에서 멀리 있는 요소일수록 사람들이 덜 보게 됩니다. 뭔가를 안 보게 되면 클릭할 수 없죠.

그게 다에요!

****

다음 글에서는 사용성 중 가장 어려운 부분을 진땀 빼며 파헤쳐봅시다. 폼. 기대해주세요.

 

#22

디자인하다 보면 사용자가 정보를 입력하는 방법을 디자인해야하는 상황이 옵니다. 시간 문제죠. 그러니 이 글에서는 폼에 대해 후다닥 돌아보겠습니다.

폼

****

폼은 사용성 측면에서 가장 오랜 시간을 들이게 될 곳 중 하나입니다. 사용자들은 입력 폼에서 혼란을 겪고, 실수하고, 관둬버리는데, 사용자 입력 받는 건 여러분의 사이트에서 가장 중요한 부분 중 하나이기도 하죠.

사용자 입력이 여러분의 디자인에서 가장 중요한 곳 중 하나가 아니라면, 대체 왜 폼을 쓰려는 겁니까? 사용자들이 폼에서 혼란을 겪고, 실수하고, 관둔다는 얘기, 제가 했었나요?

****

* 긴 페이지 하나 vs 짧은 페이지 여럿?

폼에 관한한 UX 디자이너든 마케터든 똑같이 던지는 질문이 있습니다. “얼마나 길면 너무 긴 걸까?”

폼을 되도록 짧게 만들자는 게 일반론이긴 하지만, 말이 된다면 여러 페이지로 나누는 것도 주저하지 마세요. 사용자가 중간에 그만두더라도 단계별로 정보를 저장하고 싶을 때에도 괜찮거든요.

중요한 건 폼이 단순하게 느껴지도록 만드는 것입니다. 연관 질문들은 같이 묶어두세요. 정말 필요한 질문이 아니면 빼버리세요. 딱 필요한 만큼만 페이지를 쓰세요. 더 많아도 안 되고, 더 적어도 안 됩니다.

****

* 입력 유형

폼의 목적은 입력을 받는 것, 즉 사용자한테 정보를 받는 것입니다. 정보를 모으는 방법엔 꽤 여러가지가 있습니다. 표준 텍스트 필드를 사용하든, 엄청나게 변형시킨 슬라이더를 사용하든, 가장 양질의 응답을 받을 수 있는 입력 유형을 골라야 합니다.

표준 입력 유형 모음입니다.

새롭고 예쁜 HTML5 입력 모음입니다.

염소 품종 모음입니다.

예를 들어, 사용자가 가장 좋아하는 염소 색깔을 고르게 하는 상황을 생각해봅시다. 체크 박스나 라디오 버튼, 둘 모두 선택지 목록에서 사용자가 원하는 것을 고르게 하는 방식입니다. 하지만 체크 박스는 복수 응답이 가능한 반면, 라디오 버튼은 하나만 골라야 하죠.

좀 더 온전한 응답을 받고 싶다면 체크 박스를 쓰세요. 좀 더 엄선한 응답을 받고 싶으면 라디오 버튼이 좋을 겁니다.

****

* 라벨과 보조 설명(instruction)

라벨과 보조 설명을 실제로 어떻게 적는지는 다음 글에서 다룰 거에요. 지금은 라벨의 기능에 대해 얘기해봅시다.

입력에 라벨을 붙일 때는 (안 그러면 사용자가 뭘 입력하라는 건지 어떻게 알겠어요?) 짧고 명확하고 알아보기 쉽고 입력 받는 곳에 가깝게 두세요. 그럼 라벨 관련 문제의 99%가 해결될 겁니다.

질문이 낯설거나 복잡하면 보조 설명을 적어줘야 할 때도 있습니다. 그럴 땐 설명을 좀 더 붙여주면 도움이 돼요. 몇 글자 안 된다면 라벨과 입력 영역 부근에 두세요. 글자 수가 제법 된다면 폼 안에 넣지 말고 폼 옆에 두세요. 지금 뭘 하고 있느지 알고 있는 사용자의 흐름을 방해하지 않을 수 있게요.

Luke W.가 쓴 Web Form Design이라는 책을 강력 추천합니다.

****

* 사용자 실수 예방/조치

폼이 있으면 실수가 생기기 마련입니다. 실수가 되도록 안 일어나게, 이미 생긴 실수는 되도록 우아하게 다루는 게 우리가 할 일입니다.

입력 받는 곳을 약간 똑똑하게 만들어두면 실수를 막을 수 있습니다. 예를 들어 전화 번호를 입력하는 텍스트 필드라면, “(OOO) OOO-OOOO”, “OOO OOO OOOO”, “OOOOOOOOOO”, “OOO.OOO.OOOO” 등을 모두 처리할 수 있도록 해주세요. (이 문제는 개발자에게 얘기하세요.)

입력 예시를 보여줘도 실수가 줄어들 수 있습니다. 텍스트 필드에 미리 써놔도 되고 보조 설명으로 적어도 됩니다.

사용자가 질문을 건너 뛰거나 실수할 때, 이를 알려줘서 고칠 수 있게 해야 합니다. 입력값이 올바른지 확인할 수 있는 종류의 질문이라면, 입력값이 올바른지 틀린지에 따라 체크 마크나 “X”표를 띄울 수 있습니다. 이를 인라인 에러 핸들링이라고 부릅니다.

비밀번호 입력칸도 인라인 방법을 써서 타이핑하자마자 “약한지”, “강한지”를 보여주죠.

사람들의 이름처럼 입력값이 올바른지 확인할 수 없을 때는 인라인 에러 핸들링을 쓰지 마세요.

사용자가 “다음”이나 “완료”를 클릭하면, 폼에서 빠뜨린 질문이나 실수가 없는지 확인할 수 있습니다. 문제가 있으면, 해당 부분을 시각적으로 아주 명확하게 표시해주세요. 어디를 빠뜨렸는지, 왜 틀렸는지 말이죠.

유용한 팁: 에러는 입력 폼의 가장 아래에서 확인할 수 있게 해요! 뭐가 잘못된 건지 스크롤을 올려봐야 한다면, 안 할 거에요.

****

* 속도 vs 실수

조금 어려운 얘기일 수 있겠지만, 완전 쓸모있을 거에요.

“이름”, “이메일”처럼 정말 흔한 걸 물어보나요, 아님 “벨벳 아트 중 어떤 걸 가장 좋아하시나요?”처럼 좀 덜 흔한 걸 물어보나요?

흔한 질문의 경우, 왼쪽 정렬로 입력 폼의 위에 라벨을 붙이면 사용자가 아주 빠르게 볼 수 있습니다. 모든 게 인터랙션의 축에 있거든요.

흔치 않거나 복잡한 질문의 경우, 입력 폼의 왼쪽(같은 줄)에 라벨을 붙이면 사용자가 좀 더 천천히 보게 되지만 실수도 조금 줄어듭니다.

대부분의 경우 입력 폼의 “완료” 버튼은 왼쪽, 즉 인터랙션의 축에 놓으세요.

뭔가 정말 파괴적이거나 치명적인 행위에 대한 입력 폼이라면, 버튼을 오른쪽에 놓으세요. 그럼 반사적으로 버튼을 누르는 대신 버튼이 어디있는지 찾느라 잠시 멈추게 됩니다.

****

휴, 한 회 분량 치곤 정말 많았네요. 잘했어요!

다음 글에서는 라벨, 보조 설명, 지시문를 어떻게 쓰는지 배울 거에요. UX 카피라이팅. 기대해주세요.

 

#23

겉보기엔 같은 카피라이팅이지만, UX 사람들과 진짜 카피라이터들은 서로 중요하게 생각하는 게 달라요. 우리의 관심사는 특별한 종류의 글쓰기이고, 감수성 같은 건 생각하지 않아요. 오늘 배울 것은…

지시문, 보조 설명, 라벨

****

사용자와 소통하기 위해 쓰이는 글에 UX 디자이너가 끼어들어야 할 곳이 네 군데가 있습니다. 그 때가 아니라면 콘텐츠 작가가 쓰게 두는 게 좋아요. 그 네 곳이란…

지시문

보조 설명

라벨

좀 더 긴 설득문

이 글에서는 앞의 세 개를 다룹니다. 네 번째 건 나중에 글을 하나 따로 쓸게요.

****

* 지시문

지시문은 제목이나 버튼 위에 또는 주변의 텍스트로서 사람들에게 무엇을 할 지 알려주는 텍스트에요. “바로 다운로드하세요!”, “무료로 계정을 업그레이드하세요!” 같은 것 말이죠. 이런 상황에서 UX 문구를 잘 쓰면 얼마나 효과 있는지 알면 깜짝 놀랄 겁니다.

좋은 지시문을 만드는 공식은 이렇습니다. (역주: 영어 기준의 원문을 한글 어순에 맞게 다소 수정합니다.)

긴급한 시간 또는 장소 + 이득 + 동사

긴급: “바로” 같은 시간을 얘기할 수도 있고 “여기에서” 같은 장소일 수도 있습니다. 상황에 맞다면 “무료”라는 표현도 긴급한 분위기를 만들어낼 수 있습니다.

이득: 사용자가 행위 결과 얻을 것입니다. (동사에 포함되어 있지 않다면)

동사: 사용자들이 하게 될 행위입니다.

이 공식에 대해 좀 더 자세하게 설명한 글입니다. 여기에서 지시문 작성법을 보세요.

****

* 보조 설명

사용자가 뭘 해야 하는지 100% 확실하지 않다면(또는 확실하다 해도), 사용자를 도와야 합니다. 이전 글에서 입력 폼 얘기하면서도 좀 다뤘는데요. 폼이 보조 설명이 가장 필요한 곳이기 때문이에요.

보조 설명은 짧고 의미 분명하고 직설적이어야 합니다. 어려운 용어 안 돼요. 업계 용어 안 돼요. 살짝 꼰 농담이나, 풍자, 웃기는 것도 안 돼요. 너무 장황하거나 부드럽지 않게 하세요.

해야 하는 걸 정확히 얘기하세요. 가장 단순한 표현을 쓰세요. 똑똑한 애든, 언어를 막 배우기 시작한 사람도 알 수 있게 쓰세요. 괜히 멍청하게 쓰지 말고, 그냥 명확하게 쓰세요.

나쁜 예: “다 됐으면 조기 클릭할 수 있는데 눌러보셔!”

나쁜 예2: “데이터 요구 영역에 모두 입력하세요. 성공적으로 제출하시면 계정 생성 과정을 시작합니다.”

멍청한 예: “와! 입력 참 잘 하시네요! 뛰어난 데이터 입력가처럼 모든 걸 다 타이핑했다면, 앞으로 가서 저 아래의 예쁜 노란 버튼을 클릭하세요! 거의 다 됐답니다. 짜잔!”

좋은 예: “모든 질문에 답해주세요. 다 끝나면 이 페이지 가장 아래의 “완료”라고 쓰인 노란 버튼을 눌러주세요.”

****

* 라벨

라벨을 멋드러지게 쓰거나 독특하게 만들고 싶은 욕구가 들겠지만, 항상 참도록 노력하세요. 생각할 수 있는 가장 일반적이고 쉽고 기본적인 라벨을 쓰세요. 라벨에 대해 답이 여러 종류 나올 수 있다면, 아직 뜻이 분명하지 않은 거에요.

나쁜 예: “당신의 마음이 머무는 곳…”

안 좋은 예: “당신이 사는 곳”

좀 더 좋은 예: “주소”

최고의 예: “집 주소”

버튼 라벨도 마찬가지에요. 디자이너들이 많이 놓치는 부분이지만요.

제목과 보조 설명을 읽지 않아도, 무슨 버튼인지 이해할 수 있나요? 그렇지 않다면 라벨에 좀 더 신경쓰세요.

나쁜 버튼 라벨: “확인”, “네”

좋은 버튼 라벨: “계정 삭제”, “바뀐 내용 저장”

****

하지만, 이런 텍스트 얘기는 방법은 꽤 쉬운데, 실제 상황에서는 좀 더 정치적으로 복잡해지는 부분이기도 해요. 크리에이티브 디렉터나 카피라이터, 클라이언트가 여러분이 써놓은 텍스트를 보고 “좀 더 멋지게 써야겠어.”라고 말하면 “아니오“라고 답하셔야 합니다.

꼭 그래야 한다면 A/B 테스트로 증명하세요. 하지만 실제 사용하는 곳이고 동작에 관련된 텍스트라면 절대로 물러서지 마세요. 사용자가 필요한 “경험”이 멋지고 재미있는 게 아니라 단순하고 명확한 것일 때도 있답니다.

****

다음 글은 페이지 디자인 실무의 마지막이에요. 1순위 버튼과 2순위 버튼. 기대해주세요.

 

#24

와이어프레임 관련 마지막 글입니다. 인터랙티브 디자인에서 가장 중요한 편이기도 하죠.

1순위 버튼, 2순위 버튼

위에 버튼 두 개를 예로 들었습니다. (아, 클릭하지 마세요.) 일반적인 얘기지만 버튼 스타일은 이 두 가지면 됩니다. 사용자 행위 대부분이 다음 두 가지 중 하나거든요.

1) 1순위 액션: 우리 목표에 도움이 되는 것

2) 2순위 액션: 그렇지 않은 것

****

* 1순위 버튼

사용자가 할 수 있는 액션 중 생산적인 것들이 있습니다. 회원 가입, 구매, 콘텐츠 작성, 저장, 보내기, 공유 등등 말예요. 이전에는 없던 것을 생산하는 겁니다. 이런 건 1순위 액션이고, 우리 입장에선 사용자가 되도록 많이 하길 바라는 것입니다.

1순위 액션을 실행하는 버튼, 즉 1순위 버튼은 되도록 잘 보여야 합니다. 이전 글들에서 다룬 원리를 사용하면 됩니다.

1순위 스타일: 배경과 대비가 높게 합니다. (아주 다른 색이나 그림자)

레이아웃에서 위치: 인터랙션의 축 위나 부근에 놓아, 사용자들이 반사적으로 먼저 볼 수 있게 합니다.

****

* 2순위 버튼

사용자가 할 수 있는 액션 중 비생산적인 것들이 있습니다. 취소, 건너뛰기, 재설정, 제안 거절 등등 말예요. 이런 액션들은 뭔가를 없애거나 새로운 걸 만들지 못하게 합니다. 이런 건 2순위 액션이고, 우리 입장에선 사용자가 하지 않기를 바라지만, 사용성 때문에 선택할 수 있게 합니다.

그러므로 2순위 액션을 실행하는 버튼, 즉 2순위 버튼은 덜 눈에 띄게 만들어 우연히 또는 “반사적으로” 클릭하지 않도록 해야 합니다.

2순위 스타일: 배경과 대비가 낮게 합니다. (비슷한 색이나 그림자)

레이아웃에서 위치: 인터랙션 축에서 멀리 떨어뜨려, 사용자들이 애써 찾을 때만 발견할 수 있게 합니다.

****

* 중요도가 높으면 예외!

비생산적인 액션이라도 중요할 때가 있습니다. 계정 삭제 같은 것 말예요.

이런 액션은 스타일을 1순위 스타일로 하되, 레이아웃에서는 2순위 위치에 놓으세요. 사용자가 이 버튼을 찾기를 바라는 동시에 실제 액션을 하기 전에 어떤 액션인지 생각해보기를 바라기 때문이에요.

이런 버튼에는 해당 행위의 중요도를 나타내는 색깔(빨강, 주황, 노랑, 등등)을 주는 것도 좋습니다.

****

* 특별한 버튼

여러분 사이트나 앱에 대표격인 액션이 하나 있고, 해당 액션의 주목도를 높여야 할 떄가 있습니다. 이런 액션에 맞춰서 특별한 버튼을 디자인하세요. 그래서 전체 디자인에서 두드러져 보일 수 있도록 말이죠. (패턴 파괴)

아마존의 “장바구니에 담기 (Add to Basket)” 버튼, 핀터레스트의 “핀하기 (Pin it)” 버튼, 페이스북의 예전 “좋아요 (Like)” 버튼이 모두 이런 식으로 디자인됐죠.

****

다음 글에서는 방향을 바꿔서, UX 디자인에서 가장 강력한 부분으로 들어가볼게요. ‘사용자 심리 – 조건 형성’ 기대해주세요.

 

출처

https://thehipperelement.com/post/75476711614/ux-crash-course-31-fundamentals

https://imseongkang.wordpress.com/2014/04/28/uxcrash31korean/