<UX 원칙: 사용자를 행복하게 만드는 101가지 솔루션>을 읽고

읽기 전

프로덕트 론칭 이후에 사용성 개선 작업을 하거나 MAU를 높이기 위한 작업을 했던 때가 있다.

이때 기획, 디자인 단계에서 여러 시도를 해보는데 가끔 UI와 UX사이에서 어느쪽에 비중을 둘 지 고민하고, 어떤 식으로 개선하는 게 나을 지 프론트엔드 개발자로서 의견을 내야 될 때가 있았다.

이럴 때 참 어려웠다. '프론트엔드 개발자'로서 의견을 낸다는 건 어떤 의미일까?

내가 생각하기에 '프론트엔드 개발자'로서 의견을 낸다는 건 적정한 공수를 판단해서 이 일에 드는 대략적인 비용(기간 등)을 알려주고, 보기에 사용성을 해치는 게 명확하다 싶은 부분에 의견을 낸다는 거다.

그러려면 결국 UX를 잘 알아야 된다. 이 버튼이 왜 이렇게 생겨야 되는지, 이 위치에 왜 모달이 뜨면 안 되는지... 등등.

일을 하다보면 데이터가 제법 쌓여서 냄새가 나는 코드를 느끼듯 냄새가 나는 UX들이 보일 때가 있다. 근데 그게 왜 냄새가 나는지는 설명을 잘 못할때가 많았다.

뭔가 이상함이 느껴지는데 설명을 잘 못하겠으면 곤란해진다는 걸 경험으로 깨달은 이후부터 이렇게 UX 책들을 찾아 읽게 되는 것 같다.

내용 정리

02 두가지 이상의 서체를 사용하지 마라

지나치게 많은 서체를 사용하는 것은 과도한 ‘시각적 소음’을 일으킨다.

최대 2개의 서체를 사용하라
하나는 제목 용도이다
다른 하나는 본문 용도이다

07 버튼을 버튼처럼 보이게 만들어라

사용자들은 실생활에서 수도없이 버튼을 사용했기 때문에(ex. 엘리베이터, 오븐, 자동차) 버튼 사용법을 이미 알고있다. 그리고 그런 버튼들은 보통 누를 수 있게 생겼더나 그러지 않으면 안내 텍스트를 추가해 버튼임을 알려주고 있다. 시각적 어포던스(특정 행동을 하게끔 유도하는 성질)를 제공해 사용자가 탭하거나 클릭할 수 있는지를 바로 알게끔 만들어라.

버튼을 버튼처럼 보이게 만들어라
버튼이 아닌 요소를 버튼처럼 보이게 만들지 마라
실생활 경험에서 아이디어를 빌려 와서 UI에 적용하라

09 텍스트만이 아니라 버튼 전체가 클릭 가능하게 만들어라

버튼은 버튼처럼 보여지고 동작해야 한다. 버튼의 어떤 부분을 눌러도 작동해야 한다.
데스크톱에서 마우스를 버튼 위에 올리면 포인터가 손가락으로 바뀌게 만들어라.
버튼이 클릭되었다는 시각적 피드백을 사용자에게 제공하라.

12 슬라이더는 수량화할 수 없는 값에만 사용해야 한다

슬라이더 컨트롤은 구체적인 숫자 값을 설정하는 데 절대 사용해서는 안 된다.
볼륨, 밝기처럼 정성적인 설정을 조정하는 데 슬라이더를 사용하라.
슬러이더 컨트롤은 사용자의 포인팅 기기로 쉽게 잡을 수 있도록 적절한 크기로 만들어라.

19 무한 스크롤을 사용해야 한다면, 사용자의 위치를 기억하고 그곳으로 돌려보내라

사용자가 긴 목록에서 벗어난 경우 사용자의 위치를 기억하라
사용자를 목록의 동일한 지점, 혹은 페이지 번호에서 동일 페이지로 돌려보내라.
가급적 사용자의 방향 감각을 흐트러뜨리지 마라.

20 ‘빈 공간’을 단순한 백지 상태 이상의 것으로 만들어라

빈 공간은 한 차례만 보여지기 때문에(사용자가 콘텐츠를 만들기 전), 사람들을 제품 기능에 익숙해지게 만들면서 동시에 ‘요령을 알고’싶어 하는 기존 사용자들은 더 효과적으로 사용법을 익히게 돕는 이상적인 방법이다.

빈 공간을 활용해서 신규 사용자를 적응시켜라.
사용자에게 태스크 중심의 안내를 제공하라.
기능별로 빈 공간을 제공한다면 구체적인 안내를 제공하라.

24 링크를 링크처럼 보이게 만들어라

링크에 시각적 어포던스를 부여해서 링크처럼 보이게 만들어라.
링크가 아닌 것을 링크처럼 보이게 하지 마라.
사용자가 클릭 가능한 컨트롤을 찾아 헤매게 만듷지 마라.

#25 메뉴 항목을 하위 섹션으로 나눠서 사용자가 긴 목록을 기억할 필요가 없게 하라

마법의 숫자 7. 사람이 목록에서 적정하게 기억하고 효율적으로 조직 가능한 항목의 수에대한 경험적 법칙은 ‘7, + 혹은 - 2다.’ (조지 밀러)

메뉴를 섹션으로 그룹핑하거나 옵션의 복잡도를 줄여서 사용자가 이것들을 기억해 내고나 애쓰지 않게 해야 한다.

사용자는 목록에서 대략 7개의 항목을 읽고, 처리하고 기억해 낼 수 있다.
7개가 넘어가면 사용자의 목록 사용이 힘겨워진다.
유사한 항목들을 섹션으로 묶어라.

34 가급적 기기의 기본 입력 기능을 사용하라

이미 개발된 UI를 사용해서 손쉽게 성공하라.
기기 기본 입력 컨트롤을 사용하는 것은 사용자가 학습해야 할 것을 하나 덜어 준다는 의미다.
이는 모바일 사용자만을 위한 것이 아니다. 데스크톱 소프트웨어도 이러한 입력 방식에 적합한 컨트롤을 사용해야 한다.

38 명확한 요구가 없다면 사용자가 입력한 데이터를 절대 지우지 마라

명시적인 허락 없이는 사용자 입력 데이터를 지우지 마라.
사용자의 시간을 존중하라.
그들의 입장이 돼 봐라. 당신이라면 이 모든 내용을 다시 입력하거 싶은가?

62 링크는 콘텍스트와 분리해도 의미가 통하게 만들어라

‘여기를 클릭하세요’링크는 피하라.
콘텍스트와 관계없이 의미가 통하는 서술적 링크를 사용하라.
이것은 접근성은 물론 검색 인덱싱에도 도움이 된다.

63 헤더와 내비게이션 위에 ‘콘텐츠로 건너뛰기’ 링크를 추가하라

시력이 정상인 사용자들에게 내비게이션 위치는 잘 받아들여지는 패턴이만, 시략에 제약이 있는 사용자들은 웹 페이지 혹은 웹앱에 대해 동일한 ‘멘탈 모델’을 갖고 있지 않을 수 있다.

사이트 맨 위에 ‘콘텐츠로 건너뛰기’(스크린 리더에만 보여져야 함)

사이트 맨 위에 ‘콘텐츠로 건너뛰기’ 링크를 추가하라.
정상 시력의 사용자에게는 CSS 포지셔닝을 사용해서 링크를 감춰라.
모든 페이지에 자동으로 등장하도록 링크를 사이트 혹은 앱 템플릿에 포함시켜라.

64 컬러만 사용해서 정보를 전달하지 마라

컬러는 대다수의 사용자에게 단축키 역할을 하지만, 색맹인 사람들은 불리한 입장에 놓일 수 있다.

정보를 전달하고자 컬러를 마음대로 사용하지 마라.
반드시 다른 지표를 컬러와 함께 제공하라.
컬러는 여전히 사용자에게 중요한 부차적 정보의 출처다.

66 내비게이션 요소에 타당한 탭 순서를 부여하라

시력에 제약이 있거나 움직이는 데 불편한 사용자들은 ‘탭’키를 눌러 ‘포커스’를 이동시키는 방법으로 사이트를 이용하기도 한다.

탭 키를 눌렀을 때 페이지의 이상한 부분으로 포커스가 이동하면 폼 작성이 특히 힘들어진다.

당신의 UI 여기저기에서 탭을 누르면 포커스가 합리적인 방향으로 이동하는지 확인하라.
이는 접근성에 특히 중요하긴 하지만, 모든 사용자가 이동이 용이한 폼의 혜택을 받을 것이다.
보조 기술을 사용해서 디자인을 테스트하라.

75 e-커머스의 표준 패턴을 따르라

지난 20여 년간 소비자가 웹에서 우리가 찾아낸 ‘e-커머스 패턴’은 잘 정제돼 있을 뿐만 아니라 사용자에게 쉽게 이해된다. 고객을 도와서 구매 깔대기(funnel)를 통과하게 만드는 일은 어렵다. 이를 위해서는 불편함이 없어야 하므로 모든 것을 가능한 친숙하게 만들어야 한다.

구매 깔대기에서 불편함을 줄일 수 있는 모든 방법은 전환율을 증가시킨다.
사용자들은 당신의 상점이 그들이 이용했던 다른 상점과 동일하게 작동하길 기대한다.
제품, 장바구니 및 체크아웃의 패턴을 따르라.

86 ‘로그 인’과 ‘로그 아웃’이 아닌 ‘사인 인’과 ‘사인 아웃’을 사용하라

사인 인: 현실 세계에서 실제로 하는 일(ex. 회의에 참석하거나 의사를 만날 때 서명을 하고 들어간다.)

로그 인: 선원이 자신의 이름과 그날 항해한 거리를 적던 항해 일지에서 유래한 것

익숙함을 위해서 당신의 제품에서 ‘사인 인’과 ‘사인 아웃’을 일관되게 사용하라. 이것들은 현실 세계와 연결된다.

제품애서 ‘사인 인’과 ‘사인 아웃’을 사용하라.
익숙함을 위해 이와 같은 태스크를 실제 상황과 관련지어라.
특히, 무서운 ‘로그온’을 피하도록 노력하라.

87 ‘등록’보다 ‘사인 업’이 더 낫다

‘등록(register)’대신에 ’사인 업‘또는 ’가입(join)’을 사용하라.
사용자에게 계정 생성의 혜택을 알려라.
인앱 카피와 컨트롤 레이블에 일관성을 유지하라.

92 알맞은 기본값을 선택하라

사용자의 절대 다수는 설정 메뉴에 진입하지 않으며, 기본 설정 그대로 제품을 사용한다는 점에 유의하라. 대부분의 사용자에게 기본 설정은 유일한 설정이므로 적절하게 선택하라.

당신이 선택한 기본 설정에 관해 신중히 생각하라.
대다수의 사용자는 기본값을 절대 변경하지 않는다.
기본값을 결정할 때 검색 용이성과 사용 빈도 사이에서 균형을 이뤄라.

93 사용자의 기대에 어긋나지 마라

사용자들은 다른 제품들에서의 과거 경험을 갖고 당신의 제품을 찾는다.
당신의 제품이 사용자가 경험한 다른 제품처럼 작동하게 만들어라.
이미 있는 것을 새롭게 만드느라 시간을 낭비하지 마라.

99 브랜드는 다 헛소리다

새로 개시한 스타트업의 브랜드는 아무도 신경쓰지 않는다.

그들은 당신의 제품이나 서비스를 통해 무엇을 할 수 있는지에 관심이 있다.

UX에 집중하고 경험이 브랜드가 되게 하라.

아무도 당신의 브랜드에 신경쓰지 않고, 제품을 통해 무엇을 할 수 있는지에만 관심을 쏟는다.
좋은 UX는 좋은 브랜드보다 더 뛰어나다.
브랜드 가이드가 아니라 사용자를 위해 싸워라.

100 어둠의 세력에 합류하지 마라

당신이 개발하는 소프트웨어의 도덕적, 윤리적 결과에 대해 생각해 보라.
당신도 사용하고 싶은 인터페이스와 경험을 디자인하라.
회사가 아니라 사용자를 위해 싸워라.

101 실제 사용자들과 함께 테스트하라

당신의 제품을 실제 사용자와 함께 초기에 테스트하라.
다양한 연령과 성별을 대상으로 테스트하라.
소규모 그룹으로 테스트해도 커다란 이득을 얻기에는 충분하다.

보너스 - 단순함을 위해 노력하라

작업의 모든 측면에서 단순함과 명확함을 얻으려고 노력하라. 전문 용어는 피하고, 사람들을 편안하게 해주고, 당신이 마주하는 모든 사람들의 UX를 향상시키고자 노력하라. 당신과 접하게 되는 다른 이들에게 즐거움을 제공하라.