[디자인] UI 디자인의 5가지 절대 규칙

여러분은 웹 디자이너 이십니까? 

웹디자이너라면 곧, UI 디자이너 라는 말과 같습니다. 그리고 미래에는 웹 디자이너라는 말보다 UI 디자이너라는 호칭을 더 많이 쓸 것입니다. 오늘날의 웹페이지가 네이게이션과 메뉴정도 만을 남긴 간단한 인터페이스라면 우리가 앞으로 격게될인터페이스는 아마 지금보다 더 유동적이고 개인에 최적화된 것들을 요구할 것입니다. 

피할 수 없이 받아들여야만 하는 이 흐름은, 우리가 UI 작업을 더욱 세밀하게 해야한다는 것을 의미합니다. 그렇다면 이러한 UI작업을 하는데 있어 절대 잊지 말아야 절대 규칙들은 무엇이 있을까요. 프리모아가 UI 디자인의 7가지 절대 규칙을 준비해 보았습니다.

1. 명확성의 법칙(Law of clarity)

고객은 확실한 의미전달이 되지 않는다면 그 인터페이스를 사용하려 하지 않습니다. 쉽게 말해 특정 기능을 가진 아이콘이 그 기능의 아이덴티티를 반영하지 않는다면? 궁금증에 눌러보기도 하겠지만 대부분 그 기능을 제외하고 익숙한 기능들만 쓰게 됩니다. 

지메일의 경우, 업데이트 이전에는 페이지 상단에 명확한 텍스트 형식의 네비게이션 바를 달았었습니다. 이를 클릭하면 구글 캘린더, 구글 드라이브, 구글 시트 등 여러 구글 서비스를 한번에 사용할 수 있게 되어있었습니다. 그런데 구글은 갑자기 애매모호한 아이콘 하나로 모든 것을 단순화 하고자 하였습니다. 결과적으로 사람들은 그 아이콘을 알아보지 못했고, 지메일은 유저들의 원성을 들어야만 했습니다. 

사람들은 자신들이 이해하지 못하는 것들은 대부분 바로 지나쳐버립니다. 그건 인간의 자연적인 본능이죠. 어떤 기능인지 추측할 수 없는 인터페이스는 피하세요. 다들 그게 무엇인지 굳이 알고 싶어하지 않을 겁니다.

2. 우선순위의 법칙(Law of preferred action)

작업의 우선순위가 무엇인지 알 수 있다면 유저는 훨씬 사용하기 수월해집니다. 

위의 트위터(Twitter) 화면을 보면 새로운 유저는 이 화면을 보면 무엇부터 해야 할지 모릅니다. 

물론 순서대로라면 트위터에 글부터 써야 할겁니다. 하지만 오른쪽 상단에 위치하는 ‘새 트위터 작성하기’ 버튼은 상당히 명확하지 않습니다. 또한, 왼쪽 사이드바에 있는 ‘새 글 입력창’은 배경색에 묻혀 버립니다. 디자인적 시각으로 바라봤을 때 트위터는 유저들이 검색과 왼쪽 상단의 네비게이션 메뉴를 자주 활용하기를 바랍니다. 

온전히 디자인적 시각으로만 바라보았을 때, 트위터에서는 아무래도 유저들이 검색을 하기를 바라거나 왼쪽 상단의 네비게이션 메뉴를 사용하기를 바라는 것 같습니다. 저 요소들이 가장 유명하니까요.

유저들로 하여금 다음에 무엇을 해야 할지 고민하게 만들어서는 안 됩니다. 우선순위는 반드시 확실해야만 합니다.

3. 콘텐츠의 법칙(Law of context)

유저가 콘텐츠 글을 쓰다가 수정을 하고 싶을 때 내용의 설정(인터페이스 버튼)이 문맥상 그 내용에 가까운 곳에 있어야 합니다. 

여러분은 페이스북(Facebook)에서 이름을 어떻게 수정하시나요? 오른쪽 상단의 설정에 들어간 후, 계정 설정에 들어가서, 이름을 찾아서 클릭하고, 수정 버튼을 누를 겁니다. 링크드인(LinkedIn)에서는 어떻게 이름을 수정할 까요? 이름 옆에 연필 모양 버튼을 클릭하면 끝입니다.

유저들은 항상 사용자 인터페이스의 동선이 불편하 않기를 원합니다. 실생활에서도 마찬가지입니다. 전자레인지에서도 계란찜을 만들고 싶다면 계란찜 버튼이 있으면 좋고 해동이 필요하면 해동버튼이 있는게 좋습니다. 만약 전자레인지가 계단을 내려가서 지하실 문을 열고, 전기통을 열어서 그안에 G-35 버튼을 클릭하여 팝콘 프로그램을 가동해야 한다면? (페이스처럼 이름 바꾸는 작업과 비슷하다고 할 수 있습니다)

유저들을 위해 최대한 간단하게 배치하셔야 합니다. 수정,변경, 혹은 설정이 가능한 요소라면 설정 버튼을 문맥상 바로 그 옆에다 둘 수 있도록 해야 합니다.

4. 기본 설정의 법칙(Law of defaults)

유저들은 거의 대부분 기본설정에서 변경을 하지 않습니다. 사람들은 핸드폰을 새로 샀을 때 기본 설정을 하나 하나 자신에게 맞춰 바꾸지 않습니다. 이처럼 대부분의 유저들은 기본설정에서 큰 변화 없이 그대로 사용을 하게 됩니다.

핸드폰 전화가 왔을 때 벨소리, 그 벨소리가 어떤 제목을 가졌는지는 몰라도 누구나 한번쯤은 들어본 벨소리일 것입니다. 단순히 그 벨소리가 핸드폰 기본 벨소리임에도 불구하고 많은 사람들이 그 벨소리를 바꾸지 않았기 때문에 지구상에서 가장 유명한 벨소리가 되었죠. 마치 윈도우즈를 시작했을 때의 시작 소리처럼 말입니다. 

기본설정을 무엇으로 잡아놓느냐에 따라 강력한 효과를 발휘할 수 있습니다. 기본설정은 눈에 띄지는 않지만 이미 우리 세상의 많은 부분을 지배하고 있습니다. 그러므로 반드시 기본 설정이 최대한 간편하고 효율적일 수 있도록 해야합니다. 아마 대부분 사람들이 그것을 바꾸지 않은 채 그대로 사용할 테니까요. 

5. 유도의 법칙(Law of guided action)

웹사이트의 목적에 따라서 유저들의 행동을 어떻게 유도할 것인지 당신은 설정 해야 합니다. 쉽게 말해 프리모아 처럼 프로젝트 의뢰를 남기는 웹사이트의 경우 견적의뢰 페이지가 유도의 법칙에 적용되는 부분일 것이며, 웹사이트 군대 군대에 견적의뢰로 넘어가는 단축버튼과 아이콘이 심어져 있을 것입니다. 

또 다른 예로 링크드인에서 추천 기능을 만들었을 때 유저들은 스스로 이 기능을 알아내기를 바라지 않습니다. 대신 그들의 눈에 명확하게 띄는 추천 배너를 오른쪽 상단에 나타나게 하였습니다. 여기에 사람들은 기본적으로 서로 추천하는 것을 좋아한다 라는 사실이 더해져서 결국 이 기능을 성공적으로 고객이 인지할 수 있도록 안착시켰습니다. 

여기서 배울 수 있는 것은 유저가 무엇을 하기를 바란다면, 유저들에게 물어봐야 한다는 것입니다. 이는 프리모아의 경영신념이기도 하는데요. 고객의 불편과 불만으로 부터 새로운 기능과 핵심 서비스가 숨겨져 있다고 생각하며 항상 고객에게 불편한 점을 묻고는 합니다. 

이상 프리모아의 WILL 이었습니다.

감사합니다.

본문은 99 Designs의 Peter Vukovic가 작성한 '7 unbreakable laws of user interface design'을 원작자의 동의하에 번역 및 게시한 글입니다.

원문: 7 unbreakable laws of user interface design by Peter Vukovic