이미지에 대체텍스트 속성이 없습니다; 파일명은 GettyImages-1219732941-1024x683.jpg 입니다.

 

UX분야를 새로 배우는 사람 또는 오랫동안 UX분야에서 일하고 있지만 리프래시를 원하는 사람에게 이 UX원칙들은 디자이너로써 사용자를 놀라게 하고 즐겁게 해 줄 훌륭한 경험을 디자인할 수 있도록 도와줄 것이다.

모든 훌륭한 UX 디자이너들은 디자인의 전 과정에 걸쳐 이 모든 콘셉트들을 의식적으로 또는 무의식적으로 염두에 두고 작업을 한다. 이 글을 읽고 나서 당신이 이미 따르던 원칙들과 앞으로 업무에 활용해보고 싶은 원칙들 사이에서 연결점을 찾을 수 있기를 바란다.

당신의 제품과 솔루션이 사용자 중심적이고, 뛰어난 사용성을 가지고 있고, 사용자의 생활을 더 낫게 해 주기를 원한다면, 다음의 UX원칙을 따라라.

 

사용자 중심(User-Centerd)

 

“나 자신이 아닌, 사용자를 위해 디자인해야 한다.”

당신이 원하는 것, 프로덕트 매니저가 원하는 것, 또는 개발자가 원하는 것들에 의해 흔들리지 않는 것이 매우 중요하다. 이 글에서 가장 중요한 부분이라고 할 수 있다. 물론 비즈니스의 니즈와 사용자의 니즈 사이에서 균형점을 찾는 것도 중요하다. 그러나 사용자의 니즈가 우선시 되고 충족될 수 있다면, 비즈니스 측면에서도 좋은 결과가 분명히 따라올 것이다.

 

단순함(Simple)

 

“사용자 인터페이스는 농담과 같다. 농담을 설명해야 한다면, 좋은 농담이 아닌 것이다.” – Martin LeBlanc

나는 이 문장을 약 3년 전에 내 책상 뒤의 벽에 걸어 놓았다. 이 문장을 읽는 사람들은 재미있게 느껴질 수도 있지만, 나는 진지하다. 단지 재미만을 위해 걸어놓지는 않았다. 단순함은 훌륭한 UX를 디자인할 때 가장 중요한 요소이다. 사용자가 혼란스럽거나 압도되는 순간, 사용자가 해당 화면을 떠날 확률은 매우 높아진다. 당신의 사용자는 당신의 제품에서 무언가를 평소보다 더 쉽게 수행하려고 사용하는 것이다. 단순하게 만들어서 사용자에게 쉽게 느껴지게 해야 한다. 그렇지 않으면 사용자는 떠날 것이다.

 

일관된(Consistent)

“일관성은 가장 중요한 사용성의 원칙 중 하나이다. 사물이 항상 똑같은 방식으로 동작한다면, 사용자는 무슨 일이 일어날지 걱정하지 않아도 된다.” – Jakob Nielsen

나는 UX를 잘 모르는 동료와 일한 적이 있었는데, 어떤 아이콘을 특정 부분에 사용하기를 고집해서 프로젝트에 참여한 많은 사람들을 곤란하게 하는 사람이었다.  그 사람의 주장은 “그 아이콘을 이 곳에 사용했기 때문에, 저곳에도 다시 사용할 필요가 있다”는 것이었다. 그 사람은 일관성을 주장하는 것처럼 보이지만, 완전히 잘못된 것이었다. 다른 곳에 쓰였던 그 아이콘의 의미는 ‘카트 안에 있는 아이템’을 의미하는 것이었고, 우리가 찾는 아이콘의 의미는 ‘대기하고 있는 아이템’이었다. 그 사람의 주장대로 적용을 했다면 그 아이콘은 의도에 맞게 인지되지 않았을 것이다. 다른 곳에서 사용했던 아이콘을 완전히 다른 것을 의미하는 곳에 다시 사용하는 것은 사용성의 재앙에 가깝다. 사용자는 똑같은 아이콘을 클릭했는데 다른 동작이 수행된다면 매우 혼란스러울 것이고, 아이콘의 의미를 신뢰하지 못할 것이다.

이것이 일관성이 중요한 이유이다. 당신이 만드는 UI패턴들이 제품 전체에 걸쳐 일관된 동작을 하도록 만들어져 있다면 사용자가 액션을 취했을 때 맨탈모델의 기대에 맞는 동작을 하게 되고 신뢰감을 얻게 될 것이다.

 

확인과 피드백(Confirmation and Feedback)

 

이미지에 대체텍스트 속성이 없습니다; 파일명은 GettyImages-1203678686-1024x665.jpg 입니다.

“시스템, 어플리케이션, 웹사이트를 디자인할 때 사용자에 의해 행해지는 액션에는 리액션이 있어야 한다는 것을 명심하라. 사용자에게 적합한 타이밍에 올바른 피드백을 제공하여 항상 액션에 대한 정보를 제공하는 것이 중요하다.

사용자가 제품을 탐색하고 테스크를 완료할 때, 사용자는 테스크가 완료되었는지에 대한 피드백을 원한다. 그러한 피드백이 없다면 사용자가 테스크를 다시 수행해야 하는지에 대해 혼란을 주면서 좌절감을 주게 된다. 사용자에게 피드백과 확인을 제공해야 하는 것을 인식하면서 디자인하는 것이 아주 중요하다. 구글 Material Design의 “Snackbar”가 사용 흐름을 막지 않으면서 테스크가 완료되었는지 알려줄 수 있는 좋은 예이다.

 

관용(Forgivenss)

 

“관용적인 디자인은 사용자가 실수를 하는 것을 방지해 준다.”

자동 수정 기능은 관용적인 디자인의 좋은 예이다. 가끔 귀찮게 느껴지기도 하지만, 제품의 검색 창에서 뭔가를 잘못 입력했다고 생각해 보자. 아무 결과도 출력하지 않는 대신, 사용자가 찾으려고 했던 것이라고 생각하는 검색 결과를 보여준다. 사용자는 검색바에 입력하려고 했던 것을 다시 입력할 필요가 없는 것이다. 사용자가 실수를 할 수 있다는 것을 이해하고 실수를 쉽게 만회할 수 있는 방법을 제공하는 것은 사용자를 유지하는 데 있어 중요한 부분이다. 구글은 Gmail에서 이것을 아주 잘하고 있다. 메일을 다 쓰기 전에 실수로 메일을 보냈을 때, Gmail은 전송을 취소할 수 있는 약 5초간의 시간을 줘서 메일을 다시 보내기 전에 수정할 수 있는 기회를 준다.

 

접근성(Accessible)

 

“UX가 모든 사용자를 고려하지 않는다면, Some User Experience로 불려야 하지 않을까?
또는 SUX로? (Sucks와 동일한 발음)” – Billy gregory

접근성에 대해서 초보자라면, 접근성이란 시력이 좋지 않은 사람, 시각 장애인 또는 색맹, 청각 장애인 등의 다양한 사용자들을 포함하는 모든 사용자가 사용할 수 있도록 만드는 것을 의미한다. 접근성은 다양한 방법으로 수행할 수 있고, 여러 가지 접근성 표준의 수준이 존재한다. 접근성의 좋은 예는 아이템을 누를 때 크게 읽어주는 프로그램이나, 휠체어를 타고 있는 사람을 위해 높이를 조절할 수 있는 주문 키오스크, 색맹을 위해 중요한 에러 메시지와 같은 중요한 메시지에서는 색상 차이를 사용하지 않는 소프트웨어 등이 있다. 어떤 제품을 디자인하건 접근성을 생각하고 디자인하는 것은 필수적이라고 할 수 있다.

 

소화할 수 있는(Digestible)

 

“컴퓨터처럼, 인간의 뇌는 처리할 수 있는 능력에 한계가 있다.” – Kathryn Whitenton

소화할 수 있는 UI란 단순하게 하나씩 처리할 수 있게 해주는 것을 의미한다. 사용자의 인지 부하를 최소화하도록 디자인하는 것이 중요하다. 제품이 수많은 정보를 가지고 있다면, 정보를 작은 단위로 나누어 사용자가 쉽게 다룰 수 있도록 제공하라. 그리고 제품 전체에 걸쳐 계층구조를 구성하고 정보의 우선순위를 제공하여 쉽게 소비할 수 있도록 만들어라. 시각적인 방해물, 불필요한 정보, 이미지를 피하고 폰트를 의미 없이 다양하게 사용하지 말아라. 사용자가 앞에 놓인 모든 정보를 처리하느라 인지능력에 부하가 걸린다면 압도적으로 느끼게 될 것이고 결국엔 인터렉션을 포기할 것이다.

 

친숙한(Familiar)

 

이미지에 대체텍스트 속성이 없습니다; 파일명은 GettyImages-1203594189-1-1024x683.jpg 입니다.

“사용자에게 새로운 동작을 학습하게 하는 것은 물론, 기존의 동작을 변경하여 수행하도록 하는 것도 정말 어려운 일이다.” – Khoi Vin

사용자는 일상의 과제를 더 나은 방식으로 수행하거나 삶을 더욱 편리하게 하고 재미있게 하기 위해 제품을 사용한다. 직관적인 사용자 경험을 만들려면 그 경험을 사용자에게 친숙하게 만들어야 한다. 사용자가 무엇을 원하는지 물어보기 전에 사용자를 연구하고, 실제로 수행하는 행동을 어떻게 하는지 관찰하라. 훌륭한 UX 디자이너는 제품을 사용자가 현재 사용하는 방식에 맞춰 자연스럽게 만든다. 영감을 위해 다른 유사한 제품을 조사해 보아야 한다. 특정 인터렉션에 대해 이미 널리 사용되고 있는 패턴이 있다면 자신을 혁신적이라고 부르기 위해 바퀴를 다시 발명할 필요는 없는 것이다. 사용자가 어떤 방식에 익숙하고, 그 방식이 잘 동작한다면 그것을 사용하라.

 

탐색하기 쉬운(Navigable)

 

“내비게이션은 갈 수 있는 곳을 보여줄 뿐 아니라,
지금 어디에 있는지도 보여줄 수 있어야 한다.”

원하는 곳으로 갈 수는 있지만 점점 길을 잃어버리게 되는 것만큼 나쁜 것도 없다. 이것은 UX에서 항상 일어나는 현상이다. 인터넷은 무한하기 때문에 제품을 탐색하기 쉽게 만들지 않는다면 사용자는 토끼굴을 파 들어가다가 쉽게 사용을 포기할 것이다. 사용자가 앞뒤로 이동할 수 있는 방법을 하나 이상 만들어서 현재 위치하고 있는 곳과 원하는 곳으로 어떻게 가는지 알 수 있도록 해주어야 한다. 무엇을 디자인하느냐에 따라 달라지기 때문에 이를 위해 모든 경우에 맞는 한 가지 원칙은 없다. 그러나 복잡한 내비게이션을 위해 브래드크럼을 사용하거나, 브라우저의 뒤로 가기 버튼 외에 뒤로 가기 버튼을 추가로 제공하는 것, 그리고 숨겨진 메뉴 옵션을 피하는 것 등이 좋은 방법들이라고 할 수 있다.

직관적이고 단순한 내비게이션을 어떻게 만들지 모르겠다면, 제품의 UX를 만들기 전에 사용자를 대상으로 card sorting이나 tree testing을 해 보아라.

 

데이터에 의한(Data-Driven)

 

“데이터가 없다면, 당신은 그저 어떤 의견을 가진 한 사람일 뿐이다.” – W. Edwards Deming

이 단순한 원칙을 위해 이용한 인용문은 내가 무슨 일을 하던지 염두에 두었고, 내가 가장 좋아하는 문장이 되었다. UX 디자이너가 되기 위한 가장 큰 도전 중에 하나는 UX를 하지 않는 사람들로부터 피드백을 받는 것이다. Data-driven UX를 하면 어떤 목표를 위해 디자인할 때 당신과 팀의 의견이 목표에 부합하는 것인지 체크할 수 있고, 디자인을 사용자 중심으로 만들 수 있다.

이것은 당신이 사용자라고 생각하는 사람들로 퍼소나를 만들어서 그것을 데이터라고 부르는 것을 의미하지 않는다. 어떤 디자인을 하던지, 인구통계학상의 사용자를 조사하고, 경쟁제품을 분석하고, 사용자를 인터뷰해서 그들이 무엇을 원하는지 밝혀야 한다. 데이터로 만들지 않는 디자인은 재료 없이 만든 케이크와 같은 것이다.

 

제어할 수 있는(Control)

 

이미지에 대체텍스트 속성이 없습니다; 파일명은 GettyImages-1225753006-1-1024x683.jpg 입니다.

디자인은 인간의 행동과 연결되어야 한다. 디자인은 행동을 녹여내야 한다. – Naoto Fukasawa

제품을 사용할 때 사용자에게 적당한 제어권을 주는 것은 사용자를 행복하게 만드는 훌륭한 방법이다. 사용자가 아이템을 그리드 또는 리스트로 볼 수 있게 하거나, 다크 또는 라이트 모드를 선택할 수 있도록 하는 것이 좋은 예이다. 

사용자가 그들의 입맛에 맞게 사용 환경을 제어할 수 있는 능력이 주어졌을 때 제품을 지속적으로 사용하게 된다.

 

도움을 주는(Helpful)

 

“사용자가 우리의 소프트웨어를 좋아하기를 원한다면, 제품이 호감이 가는 사람처럼 행동하도록 디자인해야 한다. 존경스럽고, 관대하고, 도움을 주는 사람처럼.” – Alan Cooper

디자인을 직관적으로 만들어서 사용자가 많은 생각 없이 제품을 다룰 수 있기를 원할 것이다. 그러나 때때로 사용자는 도움이 많이 필요할 때가 있다. UI를 진짜 사람처럼 만들어서 도움을 줄 수 있도록 만들어라. 당산의 사용자가 말하는 언어를 사용해서 로봇이 아닌 사람처럼 사용자와 대화하라. 마법사, AI 봇, 툴팁 오버레이 등을 이용해서 사용자가 필요할 때 설명을 제공하라. (그러나 사용자가 방해받기 원하지 않는다면 넘어갈 수 있도록 해주어야 한다.) UI를 최대한 심플하게 만들 수 있지만, 당신의 제품과 같은 제품에 전혀 익숙하지 않은 특정 사용자에게는 복잡하게 느껴지는 제품일 수도 있다. 디자인할 때 사람과 같이 커뮤니케이션하면서 도움을 주어야 한다는 것을 염두에 두어라.

기술과 사람의 니즈가 항상 변하는 것처럼, 원칙과 패턴도 변할 것이다. 그러나 이 진화하는 분야에서도 이 원칙들을 따른다면 사용자를 우선적으로 고려하여 디자인할 수 있고, 사용자에게 즐겁고 실용적인 경험을 제공할 수 있을 것이다.

 

원문 출처 : https://uxdesign.cc/principles-for-better-ux-1eb3e03d23f3

 

 

 

김준범님이 브런치에 게재한 글을 편집한 뒤 모비인사이드에서 한 번 더 소개합니다.