2016년 UX 디자이너의 가장 일반적인 5가지 실수

디자인

디자인은 끊임없이 진화하는 분야입니다. 2016년 크게 인기를 모았던 디자인 트렌드를 돌이켜 보면 마이크로인터랙션, 미니멀한 디자인, 감각적인 타이포그래피, 선명한 색상, 온보딩 등을 들 수 있습니다. 그러나 트렌드라고 해서 항상 좋은 것만은 아닙니다. 디지털 마케터가 최신 디자인 트렌드를 무작정 수용할 경우 자칫 UX에 부정적인 영향을 초래할 수 있습니다. 대개의 경우 디자이너는 트렌디하고 시각적으로 매력적인 창작물을 제작하길 원하지만 진행 과정에서 쉽게 유용성 측면을 간과할 수 있습니다.

제품을 디자인할 때 사용자 경험을 가장 먼저 염두에 두어야 하는 것은 지극히 당연하며 디자인 트렌드를 반영할 때는 세련되게 보이는 것과 기능적인 측면 간에 균형을 찾는 것이 중요합니다. 필자는 디자이너가 2016년 트렌드를 반영하는 과정에서 발생한 가장 흔한 UX 시행착오를 살펴보고, 향후 프로젝트에서 동일한 실수를 범하지 않기 위한 팁을 소개하고자 합니다.

 

실수 1: 낮은 대비에서 얇은 글꼴 사용

 

얇은 글꼴은 현재 가장 유행하는 서체이며 최근 많은 웹 사이트와 앱에서 사용되고 있습니다.

얇은 글꼴이 주는 매력은 우아함, 참신함, 세련미 등입니다. 디자인에 얇은 글꼴을 사용하는 것은 사용자에게 앱이나 사이트가 모던하고 세련된 것임을 보여줄 수 있는 가장 일반적인 방식입니다.

iOS용 애플(Apple) 날씨 앱에 사용된 얇은 글꼴

다양한 장점에도 불구하고 얇은 글꼴은 유용성 측면의 문제를 야기할 수 있습니다. 낮은 색상 대비에서 굵기가 얇은 서체를 사용하면 문자를 거의 읽을 수 없게 됩니다.

문제가 되는 이유

얇은 글꼴을 작은 본문 텍스트에 사용하면 문제가 커집니다. 아래 예제에서 볼 수 있듯이 문자가 세련되어 보이고 심미적으로 유저 인터페이스를 돋보이게 하지만 특히 시력이 좋지 않은 사용자의 경우 읽기가 어렵습니다.

배경에 있는 문자를 읽기가 어려운 경우의 예

이러한 문제는 소형 디바이스에서 가독성 문제가 보다 많이 야기되기 때문에 모바일 화면에서 특히 자주 발생합니다. 또한 사용자가 실외에 있는 경우 자연광 때문에 화면의 대비가 더욱 낮아질 수 있습니다.

문자 크기가 작거나 중간 정도의 얇은 글꼴은 가독성이 좋지 않음. 이미지 출처: 유저테스팅

해결 방법

글꼴은 보기에만 좋아서는 안 됩니다. 무엇보다도 읽을 있어야 합니다. 애플의 iOS 휴먼 인터페이스 가이드라인에는 다음과 같은 내용이 있습니다.

사용자가 앱에서 단어를 읽을 없다면 서체가 아무리 아름다워도 무용지물이다.

글꼴이 잘 보이도록 하려면 다음의 간단한 규칙을 따르면 됩니다.

  • 텍스트와 배경 사이에 충분한 대비 효과가 있어야 합니다. WC3 WCAG를 유용한 리소스로 참조할 수 있습니다. WC3에 따르면 텍스트와 배경 사이의 대비 비율은 적어도 4.5:1이어야 한다고 되어 있습니다. 이 가이드라인에서는 시력이 낮은 사용자가 화면에 있는 텍스트를 쉽게 보고 읽기 위한 지침을 제공합니다.
  • 사용자 테스트를 고려합니다. 실제 사용자가 모든 디바이스 즉, 데스크탑 컴퓨터, 랩탑, 태블릿 및 스마트폰에서 서체에 만족하는지 확인합니다.

 

실수 2: 지나치게 많은 정보로 사용자의 부담 가중

 

화면 면적은 중요한 리소스이며 제한적이므로 신중하게 사용되어야 합니다. 이 중요한 공간을 활용할 때 디자이너는 보통 정보나 기능으로 채우게 됩니다. 그러나 사용자가 너무 많은 정보를 담은 사이트를 방문하거나 앱을 사용하게 되면 머지않아 흥미를 잃게 되고 경험을 이탈하게 될 것입니다.

YouTube는 사용자에게 혼란을 주거나 무엇을 볼지 결정하기 힘들게 만들 정도로 너무 많은 데이터를 제공하고 있음

문제가 되는 이유

정보가 과다한 페이지에는 사용자의 관심을 얻기 위한 항목으로 가득 차 있습니다. 버튼, 이미지, 텍스트 행을 추가할 때마다 화면은 더욱 복잡해집니다. 그러나 화면 면적의 경우 사용자의 집중력은 제한될 있습니다. 콘텐츠가 너무 복잡하고 레이아웃이 너무 빽빽하다면 사용자는 제공된 정보를 효과적으로 처리할 수 없을 것입니다.

iOS용 메이시스 앱의 이전 버전. 사용자는 내용이 빼곡하고 복잡한 페이지에서 콘텐츠를 읽고 싶어 하지 않음

해결 방법

인지 부하를 없애려면 (1) 모든 콘텐츠를 검토하여 사용자의 목적 실현에 절대적으로 필요하지 않은 요소를 제거해야 하며 (2) 다음 지침에 따라 사용자가 손쉽게 이해할 수 있도록 정보를 제공해야 합니다.

  • 읽기 위해서가 아닌 훑어볼 있도록 작성할 . 짧은 문장과 단락, 글머리 기호 목록, 제목, 굵게 표시한 키워드를 사용합니다.
  • 여백을 활용할 것. 여백이란 디자인 요소 또는 페이지 레이아웃 사이나 주변의 빈 공간을 말합니다. 여백은 단순한 빈 공간 그 이상을 의미하며, 디자이너에게는 콘텐츠 자체만큼 중요합니다. 여백은 가독성을 높이고 콘텐츠의 우선순위를 정할 뿐만 아니라 시각적 레이아웃에서 중요한 역할을 합니다.

넉넉한 여백은 숨 쉴 수 있는 여유로운 공간을 생성하고 UI를 덜 복잡하게 보이게 함. 이미지 출처: 코코랩스

 

실수 3: 분명하지 않은 제스처에 숨겨진 동작과 옵션

 

앞서 언급했듯이 인터페이스에 너무 많은 정보를 담으면 사용자는 인지 부하 상태가 될 수 있습니다. 시각적으로 복잡하지 않은 화면을 만들기 위해 많은 디자이너는 제스처 기능을 적용해 시각 컨트롤을 제거하고 있습니다.

제스처 기반의 인터페이스로 구성된 iOS용 알람 시계 앱 라이즈(Rise). 이미지 출처: 더넥스트웹(Thenextweb)

그러나 주요 인터페이스 요소와 옵션을 숨기면 인터페이스는 깔끔하게 정리할 수 있지만 동시에 사용자의 이해어렵게 만들 수도 있습니다.

문제가 되는 이유

제스처는 멋진 기능이지만 단점도 있습니다. 사용자가 미리 제스처 기능이 있다는 것을 알고 있지 않은 이상 숨겨진 컨트롤은 사용되지 않을 것입니다. 옵션을 숨길수록 사용성이 줄어들 것입니다. 예들 들어 구글 맵(Google Map)에서 한 손으로 확대/축소할 수 있는 간단한 방법이 있다는 것을 알고 계십니까?

구글 맵에서 확대/축소하기 위해 한 손가락으로 화면을 두 번 누른 다음 길게 누른 상태에서 위아래로 밀면 된다는 기능은 잘 알려져 있지 않음. 이미지 출처: 기즈모도(Gizmodo)

해결 방법

탁월한 UX의 기본 규칙 중 하나는 사용자가 원하는 콘텐츠를 얻기 위해 누르는 횟수를 줄이는 것입니다. 최신 앱이나 사이트를 디자인할 때 여전히 고려해야 하는 가장 중요한 원칙이 바로 가시성인 것도 같은 이유입니다. UI에 제스처 기능을 추가하려면 인터페이스에 시각적 단서를 포함하여 사용자가 분명히 알 수 있도록 해야 합니다. 이러한 힌트를 통해 제스처 기능을 사용자에게 안내할 수 있어야 합니다. 시각적 단서를 인터페이스에 포함하여 제스처 기능을 사용자에게 안내하는 방법을 살펴보려면 루크 로블르스키(Luke Wroblewski)의 탁월한 실용적인 솔루션을 참조하십시오.

애니메이션을 통해 시나리오를 보여줌으로써 사용자가 곧바로 사용 방법을 알 수 있도록 하는 푸딩 몬스터(Pudding Monsters)

 

실수 4: 레이블이 없는 추상적인 아이콘

 

한정된 화면 면적 때문에 텍스트 레이블을 가능한 한 아이콘으로 대체하여 공간을 절약해야 한다고 생각하기 쉽습니다. 픽토그램은 공간을 덜 차지하고 설명이 따로 필요 없으면서도 기능을 잘 표현합니다. 또한 아이콘은 디자인에 심미적 효과를 더해줍니다.

iOS용 에어비엔비(Airbnb) 앱의 레이블이 없는 아이콘

이러한 잠재적 이점에도 불구하고 아이콘은 종종 유용성 문제에 봉착하게 됩니다. 특히 디자이너가 실제로 주요 기능을 인지하기 어려운 아이콘 뒤에 숨기는 경우가 이에 해당합니다.

문제가 되는 이유

사용자가 추상적인 아이콘에 이미 익숙하여 잘 알고 있거나 아이콘을 일일이 확인하고 이해하기 위해 시간을 투자할 것이라고 생각한다면 큰 오산입니다. 실제로 사용자는 보통 익숙하지 않은 인터페이스에 부담감을 느낍니다. 사용자가 실제로 원하는 것은 익숙하지 않은 앱에서 행동을 취하기 에 어떤 일이 일어날지를 명확하게 아는 것입니다.

블룸.fm(Bloom.fm) 앱 하단 탭에 있는 아이콘은 처음 방문하는 사용자에게는 혼란을 줄 수 있음

해결 방법

아이콘은 사용자가 클릭하거나 눌러보기 에 명백하게 예측할 수 있도록 설정해야 합니다. 대부분 사용자가 보편적으로 이해할 수 있는 몇 가지 아이콘이 있는데 홈, 인쇄, 장바구니 아이콘을 예로 들 수 있습니다.

쉽게 알아볼 수 있는 아이콘. 이미지 출처: 아이콘즈8(icons8)

복잡하고 추상적인 기능은 항상 적절한 텍스트 레이블을 통해 표시해야 합니다.

텍스트 레이블을 통해 복잡한 옵션을 설명한 예

 

실수 5: 온보딩에 사용되는 정적인 인트로 화면

 

온보딩은 사용자와 앱 간의 첫 만남입니다. 사용자에게 앱의 가치를 이해시키는 동시에 앱의 모든 기능을 알릴 수 있어야 합니다. 그러나 튜토리얼은 종종 과다한 정보를 제공하고 신규 사용자는 제대로 시작하기도 전에 앱의 “가치” 또는 지침을 너무 많이 받고 있다고 느낍니다.

정적인 인트로 화면의 예. 이미지 출처: 비핸스(Behance)

문제가 되는 이유

정적 온보딩이 효과적이지 않은 가장 흔한 상황 두 가지는 다음과 같습니다.

  • 사용자가 이미 앱의 핵심 가치 사항에 대해 잘 알고 있으며 가능한 빨리 사용을 시작하고 싶어 하는 경우

iOS용 호퍼(Hopper) 앱의 온보딩. 많은 사용자는 이 인트로를 건너뛰고 앱을 바로 시작하고자 함

  • 디자이너가 튜토리얼을 정적으로 만들면 튜토리얼은 지침 설명서처럼 보이거나 받아들여집니다. 유저 인터페이스에는 기능을 설명하기 위해 많은 내용이 필요하므로 사용자의 더 많은 관심이 요구됩니다. 사용자가 튜토리얼을 마치더라도 완료하자마자 모든 내용을 잊어버리기 쉽습니다.

튜토리얼이나 단계별 지침을 정적으로 디자인한다면 사용자와의 원활한 소통이 어려움. 이미지 출처: 스매싱매거진(Smashin Magazine)

해결 방법

온보딩 흐름은 사용자에게 더욱 유용하도록 디자인할 수 있습니다. 인터랙티브한 점진적 온보딩을 통해 처음 사용자의 참여를 유도할 수 있습니다. 점진적 온보딩은 사용자의 요구에 맞게 창이 표시되므로 기능을 손쉽게 기억할 수 있습니다.

듀오링고(Duolingo)는 점진적 온보딩의 좋은 예입니다. 온보딩을 통해 앱 사용 방법을 설명하지 않고도 사용자가 (로그인 없이도) 앱을 열고 선택한 언어로 신속하게 시험을 치도록 합니다. 사람들은 직접 해보면서 배우는 것을 선호하기 때문입니다.

사용자가 앱을 사용할 때 정보를 제공하는 점진적 온보딩

 

결론

 

디자인 패턴과 미적 요소는 끊임없이 변화하지만 사용자는 근본적으로 동일한 경험을 원합니다. 사용자는 너무 많은 노력이나 머리를 쓰는 일 없이 작업을 완료하고 싶어 합니다. 디자인은 때때로 장식적인 개념과 혼동되기도 하지만 디자인의 실질적인 목적은 사용자가 원하는 것을 할 수 있도록 돕고 문제에 대처하기 위함입니다. 디자인은 디자이너가 아닌 사용자를 위한 것입니다. 따라서 사용자를 위해 디자인해야 하며, 사용이 간단한 제품일수록 사용될 가능성이 높습니다.

 

 

 

디자인. 프로토타입. 공유. 모두가 가능한 하나의 올인원 앱 Adobe XD.

웹사이트 및 모바일 앱을 디자인하고  프로토타이핑하고 공유할 수 있는 최초의 올인원 툴인 Experience Design CC(베타)를 사용하면 아이디어 구상에서 프로토타이핑에 이르는 과정을 신속하게 진행할 수 있습니다. 베타 버전을 테스트해 보시고, 여러분의 피드백을 공유해 주십시오.  다운로드 받기 

 

 

 

 

저자: 닉 배비치

닉 배비치(Nick Babich)는 개발자로, 기술에 열정적이며 UX에 큰 애착을 가지고 있습니다. 그는 지난 10년 동안 전문 소프트웨어 개발 업계에 몸담았으며 그의 다양한 관심 분야 중 광고, 심리학 및 영화에 조예가 깊습니다.

 

 

 

 


디자인

Posted on 02-02-2017


토론에 참여