brunch

매거진 UX 디자인의 모든 것

라이킷 101 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by UX 컨설턴트 전민수 Nov 27. 2016

9가지 필수 UI 디자인 원칙

UX 디자인 배우기 #81

Today UX 아티클

Webflow Blog에 올라온 JohnMoore Williams 글 9 essential UI design principles을 원저자의 허락을 받아 번역한 글입니다.

9 essential UI design tips | Webflow Blog

Memorize these 9 guidelines if you want to build elegant, easy to use, and human-centered user interfaces.

webflow.com

웹사이트는 링크로 연결된 페이지들의 묶음 그 이상입니다. 사람과 브랜드가 만나고, 소통하고, 서로에게 영향을 주는 공간, 즉 인터페이스입니다.

인터랙션은 방문자에게 경험을 만들어주며, 웹 디자이너로서 여러분이 해야 할 일은 그 경험을 최대한 좋게 만드는 것입니다.

그리고 그렇게 하는 핵심은 사람을 가장 먼저, 가장 중요하게, 항상 생각해야 한다는 것입니다.

웹 디자인이 상대적으로 새로운 분야이긴 하지만, 다행스럽게도 인간-컴퓨터 상호작용(HCI) 분야의 과학적 연구에 많은 신세를 지고 있습니다. HCI 리서치에서 가져온 다음 9가지 유용한 가이드라인은 여러분이 웹사이트나 앱을 디자인할 때 오디언스에게 집중할 수 있도록 도와줄 것입니다.

인터페이스의 레이아웃과 기능성에 초점을 맞추는 ‘인터페이스 디자인’은 좀 더 큰 그림에 초점을 맞추는 ‘사용자 경험 디자인’의 부분 집합과 같습니다. 사용자 경험 디자인은 인터페이스뿐만 아니라 전체적인 경험을 다룹니다.

"핵심은 사람을 가장 먼저, 가장 중요하게, 항상 생각해야 한다는 것"

오디언스를 파악한다

무엇보다도 여러분의 웹사이트 혹은 제품을 사용하는 사람을 잘 알고 있어야 합니다. 애널리틱스 앱이 줄 수 있는 모든 인구통계적 데이터를 파악하고 있어야 한다는 뜻입니다.

하지만 더 중요한 것은 그들이 필요로 하는 것이 무엇이고, 그들의 목표 성취를 방해하는 것이 무엇인지 아는 것입니다.

그 정도 수준의 공감을 하려면 면밀한 통계적 분석 그 이상이 필요합니다. 여러분의 웹사이트를 사용하는 사람들이 누구인지 알아가야 합니다. 그들을 면대면으로 만나서 대화를 해야 하며, 여러분의 제품을 (그리고 다른 회사의 제품을) 이용하는 모습을 관찰해야 하며, “이 디자인에 대해 어떻게 생각하십니까?” 보다 깊이 있는 질문을 던져야 합니다.

그들의 목표는 무엇인가요? 그들이 목표를 이루는 데 방해가 되는 것은 무엇인가요? 어떻게 하면 그런 방해를 극복하거나 피할 수 있도록 웹사이트가 도와줄 수 있을까요?

오디언스가 원하는 것을 아는 것에서 멈추면 안 됩니다. 더 깊이 파고 들어서 그들이 필요로 하는 것을 알아내야 합니다. 결국 욕구라는 건 니즈에서 뻗어 나오는 것입니다. 만일 사람들의 마음속 깊은 곳에 있는 니즈를 찾아낼 수 있다면, 보다 근본적인 요구사항을 채워주면서도 그들이 원하는 것을 채워줄 수 있을 것입니다.

데이터를 분석하고 오디언스와 대화를 나누면서 발견할 수 있는 인사이트들은 모든 의사결정을 정보를 바탕으로 내릴 수 있도록 도와줄 것입니다. 사람들이 인터페이스를 사용하는 방식부터 시작해서 인터페이스에서 어떤 내용을 강조해야 하는지 까지 알 수 있습니다.

사람들이 인터페이스를 이용하는 방식을 알아낸다

인터페이스를 디자인하기 전에, 사람들이 그것을 어떻게 이용할 것인지 분명히 알아내야 합니다. 이 부분은 터치 기반 디바이스의 유행이 점점 더 커지면서 여러분이 생각하는 것보다 훨씬 중요한 문제가 되었습니다. Tinder만 봐도 알 수 있습니다. 그 앱의 사용자 경험은 말 그대로 ‘간단한 스와이프의 편의성과 충동성’으로 규정할 수 있습니다.

사람들은 웹사이트와 앱을 두 가지 방식으로 사용합니다: (제품의 요소와 상호작용함으로) 직접적으로 사용하거나 (제품 외부에 있는 요소와 상호작용함으로) 간접적으로 사용하는 것이죠.

직접 인터랙션의 사례

버튼 누르기

카드 넘기기(swiping)

손가락으로 아이템 드래그해서 놓기

간접 인터랙션의 사례

마우스로 가리켜서 클릭하기

자판이나 단축키 이용하기

폼 빈칸에 입력하기

와콤 태블릿에 그림 그리기

때로는 인터랙션이 너무 쉬워서 문제이기도 하죠.

유저가 누구이고 그들이 어떤 디바이스를 사용하는지는 의사결정에 많은 영향을 미치게 됩니다. 만일 나이가 있는 유저나 손을 잘 쓸 수 없는 유저를 위해 디자인을 한다면, 스와이핑에만 의존하고 싶진 않을 것입니다. 만일 주로 키보드를 통해 앱과 상호작용하는 작가나 개발자들을 위해 디자인을 한다면, 마우스로 작업하는 시간을 최소화하기 위해 모든 명령어를 키보드 단축키로 만들어 지원하고 싶을 것입니다.

예상할 수 있게 해준다

사이트나 앱에 들어가는 많은 인터랙션은 어떤 결과를 낳게 됩니다. 한 번 버튼을 클릭해서 돈이 송금될 수도 있고, 웹사이트가 닫힐 수도 있고, 할머니의 생신 케이크에 대해 악플을 달게 될 수도 있습니다. 무슨 일이 생길 수 있는 상황이면 언제나 불안감도 공존하게 됩니다.

그러니 사람들에게 클릭을 하고 나면 무슨 일이 벌어지게 될 것인지 클릭하기 전에 제대로 알려줘야 합니다. 이는 디자인이나 카피를 통해 할 수 있는 일입니다.

디자인으로 예상할 수 있게 도와주기

유저가 해야 하는 액션을 수행할 수 있는 버튼을 강조합니다.

널리 사용되는 심벌을 (가령 삭제 버튼에 휴지통을, 무언가를 더할 때 더하기 표시를, 검색에는 돋보기 모양을) 적절한 카피와 함께 사용합니다.

관련된 의미를 뜻하는 색상을 고릅니다. (녹색은 “go” 버튼으로, 빨간색은 “stop”버튼으로) 하지만 의미를 전달하기 위해 색상에만 의존할 수는 없음을 알고 있어야 합니다. 색맹 유저는 색상을 보고 의미를 파악할 수 없기 때문입니다.

카피로 예상할 수 있게 도와주기

명확한 버튼 카피를 씁니다.

아무것도 안 된 상태에서는 방향을 알려주거나 행동을 유도하는 카피를 제공합니다.

경고를 하고 정말 할 것인지 물어봅니다.

영구 삭제와 같이 돌이킬 수 없는 결과를 낳는 행동의 경우, 정말 확실히 할 것인지 물어보는 것이 좋습니다.

InVision에서는 휴지통 아이콘을 클릭해도 화면에서 바로 지워지지 않습니다. 대신, 정말로 할 것인지 물어보면서 지워진 파일은 다시 복구할 수 없음을 알려줍니다.

4. 실수를 예측한다

실수하는 것은 인간이고, 용서하는 것은 신이다. Alexander Pope, “An Essay on Criticism”

사람들은 실수를 하지만, 그렇다고 (항상) 그 결과 때문에 시달릴 필요가 없습니다. 인적 오류의 영향을 줄이는 데 도움을 주는 방법은 두 가지입니다.

실수를 하기 전에 미리 방지한다.

실수를 한 후에 고칠 수 있는 방법을 제공한다.

이커머스 사이트나 폼 디자인을 보면 실수를 방지하는 테크닉을 많이 볼 수 있습니다. 입력란을 다 채우기 전까지 버튼은 활성화되지 않게 만듭니다. 이메일 입력란은 이메일을 제대로 입력했는지 안 했는지 감지하게 만듭니다. 쇼핑카트를 비우고 싶은지 팝업으로 다시 확인하기도 합니다.

실수를 미리 예상해주면 보통 실수를 저지른 후에 고치려고 해주는 것보다는 덜 불만을 느끼게 해줍니다. 왜냐하면 “다음” 혹은 “완료” 버튼을 눌러 태스크를 완료했다고 느끼기 전에 실수를 방지해주기 때문입니다.

그렇긴 하지만 때로는 사고가 일어나도록 그냥 둬야 할 때도 있습니다. 바로 이런 경우에 상세한 오류 메시지가 제대로 역할을 하게 됩니다.

오류 메시지를 쓸 때는, 두 가지를 설명해줘야 합니다.

1. 문제를 설명해줍니다.

예: “화성에서 태어났다고 하셨는데 그곳은 아직 인류가 개척한 곳이 아닙니다.”

2. 어떻게 해결할 수 있는지 설명해줍니다.

예: “지구에서 태어난 곳이 어딘지 입력해주세요.”

오류가 나지 않은 상황에도 똑같이 적용할 수 있습니다. 예를 들어, 제가 뭔가를 지웠는데 다시 복구할 수 있다면, “휴지통에 가셔서 ‘복구’를 클릭하시면 지웠던 항목을 복구하실 수 있습니다.” 같은 카피를 써주는 겁니다.

오류 예상하기라는 원칙은 포카 요케(poka-yoke) 원칙이라고도 합니다. 포카 요케란 “실수 방지”를 뜻하는 일본어 용어입니다.

피드백을 준다 – 빠르게

현실에서는 주변 환경이 피드백을 줍니다. 우리가 말을 하면 다른 사람이 대답을 해주고 (보통은 그렇죠) 고양이를 쓰다 들어주면 고양이가 그르렁 거리는 소리를 내죠. (물론 고양이의 기분에 따라 달라지겠지만요)

하지만 디지털 인터페이스에서는 피드백을 주는 데 실패하는 경우가 많습니다. 페이지를 새로고침 해야 하는지, 노트북을 다시 시작해야 하는지 아니면 옆에 있는 창을 쓰면 되는지 알려주지 않은 채로 내버려 두는 거죠.

로딩 중에는 애니메이션을 보여주세요. 버튼을 눈에 띄게 만들고 눌렀을 때 반응이 바로 오게 만들어주세요. 그렇다고 과한 효과를 주는 것도 좋지 않습니다. 여러분과 유저가 모두 잘했다고 할 만한 일을 유저가 제대로 했다면 하이파이브를 보여주는 것도 괜찮습니다. (MailChimp처럼 말이죠.)

MailChimp는 유저가 스케줄을 잡거나 이메일을 보내면 동시에 피드백과 독려를보여줍니다.

무엇이든 빠르게 보여주는 것이 좋습니다. Usability.gov에서는 1초 이상 딜레이 되는 것을 서비스 일시 중단으로 보고 있습니다. 10초가 넘어가면 장애가 있는 것으로 봅니다. US 인구의 절반 가량은 3초 이상 걸려버리면 이탈해버린다고 합니다.

만일 페이지가 5초 이내로 로딩되는 데 진행 바가 보이지 않으면, 실제로 로딩 시간을 더 길게 느낀다고 합니다. 그 대신, 진행 상황을 반영하지 않는 진행 바를 보여주세요. 가령 Mac의 악명 높은 “바람개비 모양”같은 건데, 그렇게 만들지는 말고 로딩 시간이 더 빠르게 느껴지도록 시각적 속임수를 써서 만드는 겁니다.

각 요소의 배치와 크기를 신중하게 고민한다

HCI의 기본 원칙인 피츠의 법칙에 따르면,

“타깃을 획득하는 데 걸리는 시간은 타깃과의 거리와 타깃의 크기에 따라 달라진다”라고 합니다.

다른 말로 하면, 더 가깝고 큰 타깃일수록 더 빠르게 커서(혹은 손가락)가 올라간다는 겁니다. 이는 인터랙션과 UI 디자인에서 모든 상황에 적용할 수 있겠지만, 세 가지 가장 중요한 것은:

1. 버튼 및 다른 “클릭 타깃” (아이콘이나 텍스트 링크 등)
이는 메뉴 및 링크 리스트에서 매우 중요한 부분으로, 공간이 좁으면 사람들이 계속해서 잘못된 링크를 클릭하게 될 수 있습니다.

2. 가장 흔하게 하는 액션의 버튼을 더 크고 눈에 띄게 만듭니다.

3. 내비게이션(이 부분이 직관에 어긋난다고 생각할 수도 있지만, 실제로는 유용한 방법입니다) 정확도에 대한 필요를 줄여주기 때문입니다. 클릭 타깃을 빗나갈 수도 있다는 걱정을 할 필요가 없어지는 거죠.

요소의 배치와 사이즈에 대해 생각하면서 동시에 인터랙션 모델을 염두에 둬야 합니다. 만일 사이트에 세로 스트롤링 대신 가로 스크롤링이 필요하다면, 그런 흔하지 않은 인터랙션에 대한 단서를 사람들이 어떻게 찾을 수 있을지, 어디서 찾을 수 있을지 고민해봐야 합니다.

표준을 무시하지 않는다

굉장히 창의적인 디자이너들은 무언가를 새롭게 만들어내는 걸 좋아합니다. 하지만 이게 항상 최선의 아이디어는 아닙니다.

왜 그럴까요? 익숙한 인터랙션이나 인터페이스를 새롭게 개조한 버전은 인지적 부하를 더 일으킬 수 있기 때문입니다. 사람들이 이미 학습한 프로세스에 대해 다시 생각해 보게 만드는 것이죠. 물론, 원하면 새롭게 만들 수도 있지만, 반드시 그것이 디자인을 개선해줘야 합니다.

이는 왜 Google Docs의 메뉴바가 마이크로소프트 워드의 비스타 이전 버전과 거의 비슷한지 설명해줍니다.

마이크로소프트 워드에서 비스타 이전에 쓰던 메뉴바

구글 독스의 메뉴바, 2015

이는 왜 Pocket이 몇 년 전에 안드로이드 앱에서의 아키하이브 버튼의 위치를 바꾸어야 했는지 설명해주기도 합니다.

하나의 버튼을 안드로이드의 디자인 패턴에 맞춰 일관성 있게 바꾸는 것 만으로도 새로운 유저가 Pocket을 계속 이용하겠다는 의사를 보여주는 경향이 23% 늘었다고 합니다.

2013년도 가을까지 이 아키하이브 버튼은 스크린의 상단 왼쪽에 있었습니다. 안드로이드 디자인 스펙에 따르면 “Up” 버튼이 있어야 하는 위치였죠. Pocket은 사람들의 읽기 경험에 집중하고 싶었지만 기존의 하드웨어 컨트롤을 따라하고 싶진 않았습니다. 하지만 이런 일관성 없는 배치는 새로운 유저가 실수로 읽고 있던 글을 닫고 저장하게 만들었습니다. 실제로 예상했던 건 리스트로 돌아가는 것이었는데 말이죠.

이 작은 변화만으로도 “[신규 유저]가 Pocket을 계속 이용하고자 하는 의사가 23% 늘었다”라고 합니다.

인터페이스를 학습하기 쉽게 만든다

단순화를 얘기할 때, 사람들은 하버드의 심리학자 George Miller의 논문, “The Magical Number Seven, Plus or Minus Two: Some Limits on our Capacity forProcessing Information”을 언급하곤 합니다. 이 논문을 보면 사람들은 단기 기억으로 5개에서 9개 정도를 기억할 수 있다고 합니다.

즉, 무언가 더 단순할수록 단기 기억으로 기억하기가 더 쉽다는 말입니다. 그러니 가능하다면 인터페이스를 효율적이고 효과적으로 이용할 수 있게 하려면 유저가 기억해야 하는 것의 숫자를 제한해야 합니다. 가령 정보를 소화 가능한 작은 덩어리로 쪼개면 됩니다.

이 아이디어는 Tesler의 ‘복잡성 보존의 법칙(Conservation of Complexity)’ 과도 일맥상통하는데, 이 법치에 따르면 UI 디자이너는 인터페이스를 최대한 심플하게 만들어야 합니다. 애플리케이션의 복잡함을 인터페이스의 단순함 뒤에 숨겨야 한다는 뜻입니다. 이 법칙을 따르는 데 실패한 제품으로 유명한 사례가 바로 마이크로소프트의 워드입니다.

대부분의 사람들은 워드에서 몇 가지 (예: 타이핑) 작업만 하는 반면, 어떤 사람들은 워드의 기능을 전부 활용해서 파워풀하게 쓰기도 합니다. 하지만, 같은 워드를 켜서 같은 UI를 보는 평균적인 사용자들은(즉 파워 유저가 아님) 전혀 이용하지 않을 옵션들의 다양함 때문에 압도당하고 맙니다.

이는 ‘단계적 공개(progressive disclosure)’라는 개념으로 이어지는데, 고급 기능은 보조 인터페이스에 집어넣으라는 뜻입니다. 이는 웹사이트의 홈페이지에서 흔하게 볼 수 있습니다. 제품이나 기능을 짧은 카피로 설명한 다음에 사람들이 더 자세한 내용을 볼 수 있는 페이지로 가는 링크를 제공하는 것이죠. (이는 모바일 디자인 모범사례에서도 마찬가지로, 견고한 내비게이션을 만드는 것은 언제나 도전과제입니다.)

팁: “더 알아보기”나 그와 비슷한 구체적이지 않은 텍스트를 링크나 버튼에 사용하지 마세요. 왜 그럴까요? 그렇게 하는 것은 무엇에 대해 “더 알아볼 수 있는지” 알려주지 않기 때문입니다. 보통, 사람들은 자신이 원하는 곳으로 갈 수 있는 링크를 찾아 페이지를 스캔하는데, “더 알아보기”가 15번 반복되어 봤자 아무런 도움이 되지 않습니다. 특히 스크린 리더기를 사용하는 유저들에겐 더 그렇습니다.

의사결정은 단순화한다

우리에게 소리를 지르는 듯한 웹사이트가 너무 많습니다. “배너”가 갑자기 화면 전체를 덮는 광고로 변하는 것이죠. 모발이 팝업으로 뜨면서 블로그를 구독해달라고 애원하기도 합니다. 읽어볼 기회도 주지 않고 말이죠. 비디오 광고가 갑자기 켜지면서 강제로 몇 초간 보이기도 합니다. 보는 동안 위젯이나 플레이아웃, 툴팁 등을 전혀 이용하지 못하게 만들면서 말이죠.

저는 때때로 차분한 웹을 갈망합니다. 힉스의 법칙만으로도 그런 웹을 만들 이유는 충분합니다. 이 법칙에 따르면 더 많은 옵션을 보여줄수록 사람들은 결정을 하기 힘들어한다고 합니다.

이는 우리가 만드는 거의 모든 것에 영향을 미치게 됩니다.

전반적인 레이아웃

내비게이션 메뉴

가격 페이지

블로그 인덱스

콘텐츠 피드

리스트는 계속 이어지겠지만, 결론은 ‘디자인을 단순하게 만들수록, 우리가 원하는 결정을 유저가 더 빠르고 쉽게 내릴 수 있다’는 것입니다. 이는 랜딩 페이지와 뉴스레터가 아닌 이메일에 행동 유도 요소가 딱 하나만 있어야 하는 이유이기도 합니다.

팁: 때로는 사람들이 속도를 늦추거나 옵션을 선택하기 전에 고민해보게 만들어야 하기도 합니다. 이는 Pinterest, Dribbble, 그 외 많은 블로그의 디자인이 실제로 제대로 작동하는 이유이기도 합니다. 결국, 선택할 수 있는 옵션이 많을수록, 선택해야 할 옵션을 찾기가 어려워집니다.

Webflow 사이트에서 볼 수 있는 훌륭한 인터랙션 디자인

Webflow를 이용하는 많은 디자이너들은 이런 가이드라인을 적용해서 직관적이고 매력적인 인터랙션을 만들고 있습니다. 다음은 몇 가지 사례입니다.

원형으로 펼쳐지는 내비게이션

Waldo Broodryk은 모바일 및 데스크탑 친화적인 재미있는 움직이는 메뉴를 만들었습니다. 페이지가 로드되면 우측 하단에 “Menu”가 뜹니다. 한 번 클릭하면 갈 수 있는 페이지들이 쭉 펼쳐지고, 메뉴 버튼은 X로 바뀌어서 메뉴를 닫거나 내용에 다시 집중할 수도 있습니다.

명확하면서도 매력적인 디자인의 훌륭한 조합으로 피츠 법칙을 잘 활용한 사례입니다. 즉, 가장 클릭하기 쉬운 스크린 가장자리에 링크를 배치한 것입니다.

Do you buy that girl a drink?

디자이너 Shane Hurt는 그 여성에게 술을 한 잔 살 건지 말 건지 결정하는 데 도움을 줄 수 있는 놀라운 인터랙티브 의사결정 나무(decision tree)를 만들었습니다. 이 디자인에는 많은 내용이 담겨 있지만, 당장 눈앞에 놓인 태스크에 집중을 하게 됩니다: 지금 앞에 있는 질문에만 답하고, 그 답에 따라 움직여지는 것이죠. 인터페이스를 깔끔하게 유지하는 좋은 방법이었어요, Shane.

유니클로 리디자인

home

uniqlo-responsive.webflow.io

디자이너 Tim Noah는 어느 날 유니클로 사이트에서 쇼핑을 하다가 내비게이션 시스템이 매우 복잡하고 독특하다는 점을 발견했습니다. 거기서 영감을 얻어 그는 “다시 만들되 좀 더 모바일과 태블릿 친화적인 방식으로 만들어봐야겠다”는결정을 했다고 합니다.

그가 한 디자인에서 제가 가장 좋아하는 부분은 유니클로의 멀티 레벨 내비게이션을 바꾼 방식입니다. 기존에 데스크탑 웹사이트에서는 여러 번 클릭을 하고 페이지를 거쳐야 했던 것 들을 한 페이지짜리 경험으로 바꾸었습니다.(공정하게 말하자면, 유니클로도 모바일 사이트는 그렇게 만들어져 있습니다. 데스크탑 사이트의 반응형 버전에는 반영하지 못했고 모바일 서브도 메인만 그렇게 했습니다.)

노트: 이 리다지인은 개인 프로젝트로 유니클로와 아무런 관련이 없습니다.