하루 5분 UX 리뷰

하루 5분 UX 

 

UX는 직독하면 User eXperience 즉, 사용자 경험이다. 목표는 사용자가 쓰기 편한 데에 있다. 

흔히들 UI/UX를 묶어서 말하는데, 이 둘의 공통점은 User이다. 사용자에 포커스가 맞춰져 있다.

사용자가 보기에 심미적으로 우수하고, 사용성이 좋은 앱은 매출 증가에도 영향을 끼칠 수 있다.

나는 디자이너는 아니지만, 프론트엔드 개발자로서 서로 협업을 하기 위해 이에 대한 기본적인 지식이 필요함을 알고있다.

그저 눈에 보여지는 디자인을 화면에 옮기는 것이 아니라 디자인 안에 숨겨진 UX를 이해해야 온전히 디자인을 적용했다라고 얘기할 수 있다. 

 

모두에게 100% 맞는 UX는 없다. 나에게는 이 앱이 편하나 다른 사람에게는 편하지 않을 수 있다. 그럼에도 불구하고 공통적으로 드러나는 몇가지 원칙은 있다. UX에서 중요하게 바라보는 것들! 이를 이해하고 새겨둔다면 추후 협업에 도움이 많이 될 것이다.

 

개인적인 생각으로 이 책은 UX의 큰 흐름을 보기에 좋은 것 같다. 그러나 각 카테고리의 내용이 얕아서 아쉬움을 가졌었다.  가장 유용하게 생각했던 부분은 실무파트였다. 실제로 데이터를 분석하고 테스팅하는 방법이 소개되어있는데, 앞으로도 기억에 남을 것 같다. 

 

혹시라도 전반적인 UI / UX이 궁금하여 들어온 사람이라면 다른 책을 통해 읽고 정리한 포스팅이 있다. 

링크

 

아래에는 이 책의 내용에서 내가 새로 알았거나 중요하다 여겨지는 내용들을 남기고자 한다.

 

---

 

선택이라는 환상

아무것도 선택하지 않는 것도 선택이다

많은 선택권을 제시할수록 사용자는 선택하는 데 어려움을 느낀다. 이러한 상황을 선택의 역설(The Paradox of Choice)이라 한다. 사용자는 결정하지 어려워지면 그냥 이탈할 것이다. 3가지 중 하나는 고를 수 있으나 30가지 중 하나를 택하는 것은 불가능하다.

 

여러 가지를 비교한 뒤 선택할 수 있게 하라

내가 선호하는 쪽이 더 나아 보이도록 비교군을 만들어야 한다.

• 어떤 선택이 '가장 좋은지', '가장 인기 있는지', '가장 멋있는지' 보여주자
• 구독료를 '일 단위', '월 단위' 가격으로 제시하여 비교하게끔 하자
• 어떤 유형의 사람들이 각각의 옵션을 선택하는지 알려주자. ex) 아마추어, 프로 버전
• 프리미엄 버전 대신 무료 버전을 택할 때 어떤 것들을 '잃게 되는지' 목록에 써두자
• 끊임없이 세일하자! '정가'를 표시하여 사용자들이 얼마나 '절약'할 수 있는지 확인시켜주자

 

플로우

사용자를 A에서 B로 이동하도록 하려면 사용자가 목적지에 도달하는 방법을 디자인해야 한다.

클릭 수나 페이지 수를 세지 마라

그랜드센트럴역의 설계자는 사람들이 몇 걸음을 걸어야 하는지, 얼마나 많은 출입구를 지나야 하는지 세지 않았다. 왜일까? 그러한 정보는 중요하지 않기 때문이다. 그보다는 사람들에게 필요한 정보를 필요한 때에 제공해 그들이 언제 어느 쪽으로 돌아가 기차에 올라탈 수 있는지를 알려주는 것이 더 중요하다. 

 

막다른 길을 만들지 마라

사용자가 목적지를 향해 서너 개의 페이지를 거쳤는데 도착한 곳에 다음 단계가 없다는 것을 알게 되면 그냥 포기하거나 당황하거나 화를 낼 것이다.

 

사용자는 뒤로 가지 않는다

사용자는 인내심이 강하지 않다

사용자는 자신이 원하는 것을 찾지 못하면 버튼을 몇 번 더 눌러보다 그대로 떠나버릴 가능성이 크다. 뒤로 가기 버튼을 포함해서 말이다.

 

'뒤로 가기' 버튼을 자주 누르는 건 좋지 않은 신호다

사용자에게 뒤로 가기 버튼이란 '중지' 버튼이나 '아니요' 버튼과 같다. 마지막에 했던 행동을 되돌리고 다른 단계를 시도해보려는 행동이 아니라 이제 더는 뭘해야 할지 완전히 모르겠다는 의미다.

 

루프를 만들어라

사용자가 언제나 앞으로 이동하며 클릭할 수 있다면 그들은 멈추거나 어디로 가야 할지 결정하지 않아도 된다. 

 

적응형 디자인과 반응형 디자인

적응형 디자인

적응형 디자인은 주요 디바이스 몇 개를 골라 각각에 맞게 설계한 디자인을 뜻한다. 적응형 디자인은 반응형 디자인에 비해 만들기가 쉽고 시간이 적게 걸린다. 흔히들 모바일 버전과 웹 버전만을 디자인하고는 반응형 디자인이라 하는데, 잘못 알고 있는 것이다.

 

반응형 디자인

윈도우 사이즈가 달라지면 그에 맞춰 '늘어나고' '조정'되기 때문에 디바이스의 종류와 스크린 해상오와 상관없이 완벽하게 작동한다. 레이아웃이 영원히 늘어나면서도 계속 형태를 유지하는 것은 불가능하다. 그러므로 언제 어떤 기능을 보여주거나 숨길 건지, 디자인이 '틀어지기' 전에 어디까지 늘어나게 할 건지, 그래서 언제 레이아웃을 변경해 해당 사이즈에서 더 잘 보이게 할 건지 등을 결정해야 한다.

 

행동 유도 공식

사람들이 버튼을 클릭하게 만들고 싶다면 다음 문장 공식을 이용하라

동사 + 혜택 + 한정된 시간/장소

 

동사

동사를 제일 처음에 두면 보는 즉시 요점을 알 수 있습니다. (이 부분은 한국어에도 해당이되는지 모르겠다.)

 

혜택

사용자에게 가는 혜택에 집중하자. '회원이 되세요' 에서는 사용자가 얻는 혜택을 알 수 없다. '5킬로그램을 감량하세요, 오늘!' 이라던가 '버전 2를 다움로드하세요, 지금!' 과 같이 사용자가 받을 수 있는 것에 집중하자

 

한정된 시간 혹은 장소

'오늘', '지금, '1분 안에', '여기'와 같은 단어들은 지금 당장 해야 할 것 같은 느낌이 들면서도 금방 할 수 있는 것처럼 느껴진다. ,'이것'과 같은 단어들은 사용자들이 찾는 것이 바로 이 공간! 예를들어 이 버튼이라고 말하는 효과를 준다.

 

와일드 카드

서비스가 많아서 사용자가 보기에 이용하는 데에 비용이 들 것이라 생각할 수 있다. 이 때, '무료'라는 단어를 사용하면 사용자의 불안감을 해소하고 클릭률도 높일 수 있다.

 

설명, 라벨, 버튼

설명은 짧고 분명하며 직접적이어야 한다. 특정 집단이 쓰는 용어는 안 된다. 업계 용어도 안 된다. 재치 섞인 농담이나 풍자, 허튼소리도 안 된다. 너무 장황하거나 완곡한 표현도 안된다. 사용자가 무엇을 해야 하는지 분명히 말하라. 자신이 아는 가장 단순한 단어와 문장을 사용하라. 청중을 총명한 어린이 혹은 모국어가 다른 사람이라고 생각하고 글을 써라. 바보처럼 쓰라는 게 아니다. 그저 간결하게 쓰라는 말이다.

잘못된 예

'당신, 준비가 다 되면 클릭하는 곳으로 천천히 오라고!'

 

잘못된 예 2

'이 영역의 모든 입력은 필수로 요구되는 정보이며 계정을 만드는 과정을 시작하기 위해서는 성공적으로 제출되어야 합니다'

 

어리석은 예

'양식을 정말 잘 채우는군요! 모든 내용을 잘 채워 넣었다면 곧장 아래에 있는 멋진 노란색 버튼을 클릭하세요! 거의 다 왔다고요, 챔피언!'

 

좋은 예

'모든 질문에 답하세요. 작성이 완료되면 페이지 하단에 있는 노란색 완료 버튼을 클릭하세요'

 

 

객관적인 데이터 수집 방법

분석

수많은 회사가 사용자 행동을 추적할 수 있는 서비스를 제공하고 있는데 이를 이용하면 편리하게 분석할 수 있다.

 

A/B 테스트

같은 것을 2가지 버전으로 디자인하고 동시에 출시하라! 실사용자를 대상으로 실시간 테스트를 할 수 있고, 어떤 버전이 더 나은지 확인할 수 있다.

 

시선 추적 장치

사용자가 어디를 쳐다보는지 측정할 수 있다. 이를 통해 디자인이 사용자를 잘 유도하고 있는지 아닌지를 파악할 수 있다. 시선의 움직임은 무의식적으로 일어나는 현상이므로 객관적인 데이터를 제공한다.

 

스크린 캡처와 히트맵

HotJar, ClickTale, LookBack과 같은 소프트웨어는 실제 사용자가 제품을 사용하는 동안 보는 화면을 기록한다. 익명의 사용자가 무엇을 클릭하는지, 마우스를 어디로 움직이는지, 어디까지 스크롤하는지, 어느 페이지로 이동하는지 등을 알 수 있다. 일부 툴은 '히트맵'을 만들어 사용자 그룹이 무엇을 집중적으로 클릭하는지 색깔을 통해 보여준다.

 

검색로그

사람들이 무언가를 검색한다는 것은 그것을 찾을 수 없다는 뜻이다. 로그 기록은 인포메이션 아키텍처와 레이아웃을 개선하는데 매우 중요하게 사용될 수 있다.

 

A / B 테스트

A / B 테스트는 실제 방문자에게 어떤 옵션이 가장 좋은지 묻는 방법이다.

• 테스트 버전의 수는 2개 이상이다.
• 하나의 테스트 그룹은 하나의 버전만 볼 수 있다.
• 각 그룹당 동일한 사람의 수를 배치한다.
• 테스트는 조건을 하나만 바꿨을 때 가장 신뢰할 수 있다.
• (여러조건을 가지게 되면 어떤 이유때문에 이러한 결과가 나왔는지 알 수 없다.)
• 완전히 다른 종류의 페이지를 테스트하는 것은 소용없는 일이다.