사용자 인터페이스를 설계할 때의 기본 원칙

 

화면을 기획하다 보면 기능 설명에는 문제가 없는데 막상 써 보면 어딘가 불편한 경우가 있어요.
그럴 때 원인을 따져 보면 거창한 문제가 아니라 기본 원칙 몇 가지를 놓친 경우가 많았습니다.
이번 글에서는 제가 화면을 점검할 때 가장 자주 꺼내 보는 세 가지, 일관성, 피드백, 단순함을 정리해 보려고 해요.
디자이너가 아니라 기획자 입장에서, 기획서를 쓰고 검토하는 단계에서 쓸 수 있는 질문 위주로 적겠습니다.
예시는 모두 제가 가정해서 만든 화면입니다.

 

일관성은 같은 의미라면 같은 모양과 같은 말, 같은 위치로 보여 주는 것입니다.
사용자는 화면을 처음 볼 때마다 규칙을 배우는데, 규칙이 화면마다 바뀌면 배운 것을 쓸 수 없어요.
기획서에서 일관성을 점검하는 질문은 단순합니다.

• 같은 동작을 가리키는 단어가 화면마다 다르지 않은가 (저장, 완료, 확인이 섞여 있지 않은가)
• 주요 버튼의 위치와 색이 화면마다 같은가
• 같은 종류의 정보가 같은 순서로 나오는가

가정해서 예약 앱을 생각해 보면, 어떤 화면에서는 "예약하기"이고 다른 화면에서는 "신청하기"라면 사용자는 둘이 같은 동작인지 다른 동작인지 고민하게 돼요.
일관성은 용어 사전과 화면 템플릿을 만들어 두면 상당 부분 해결됩니다.
화면 요소를 부품 단위로 정해 두는 방법도 있어요.
버튼, 입력창, 알림창처럼 자주 쓰는 요소의 모양과 문구 규칙을 한 장에 모아 두면, 화면이 늘어나도 같은 기준으로 기획할 수 있습니다.
기획자가 이 문서를 직접 만들지 않더라도 디자이너와 함께 합의해 두면 검토가 훨씬 빨라져요.
다만 일관성만 지키다 보면 예외가 필요한 화면까지 억지로 맞추게 될 수 있으니, 왜 다르게 하는지 설명할 수 있을 때만 예외를 두는 게 좋겠습니다.

 

사용자가 무언가를 했을 때 시스템이 반응을 돌려주는 것이 피드백입니다.
반응이 없으면 사람들은 안 눌린 줄 알고 다시 누르거나, 이탈하거나, 중복으로 결제하기도 해요.
피드백은 크게 세 시점으로 나눠서 생각합니다.

• 누르는 순간: 버튼 상태가 바뀌거나 눌렸음을 보여 주는 표시
• 처리하는 중: 진행 중임을 알리는 로딩 표시, 가능하면 예상 시간
• 끝난 뒤: 성공인지 실패인지, 다음에 할 수 있는 일

특히 실패 상황의 피드백이 중요하다고 느꼈어요.
"오류가 발생했습니다"라는 문장만으로는 사용자가 무엇을 해야 할지 알 수 없습니다.
무엇이 잘못됐는지, 어떻게 고치면 되는지를 같이 적어 주면 이탈이 많이 줄어드는 것 같았어요.
가정 사례로, 회원가입에서 비밀번호 조건이 맞지 않을 때 조건을 입력창 바로 아래에 보여 주는 것과, 가입 버튼을 누른 뒤 한 번에 알려 주는 것은 체감이 크게 다를 겁니다.
처리 시간에 대한 감각도 중요해요.
누르자마자 반응이 있어야 하고, 오래 걸리는 작업이라면 대략 얼마나 걸릴지 알려 주는 편이 사용자를 덜 불안하게 합니다.
기획서에는 화면 상태를 기본, 처리 중, 성공, 실패 네 가지로 나눠 적어 두면 빠뜨리는 경우가 줄어요.

 

단순함은 화면을 적게 만든다는 뜻이라기보다, 사용자가 지금 해야 할 일에 집중하게 한다는 뜻에 가까워요.
기획자는 기능을 더하는 사람이다 보니, 덜어 내는 일을 의식적으로 해야 한다고 생각합니다.
저는 한 화면을 점검할 때 이렇게 물어봅니다.

• 이 화면의 핵심 목적은 한 문장으로 말할 수 있는가
• 목적과 관계없는 요소가 같은 비중으로 놓여 있지 않은가
• 처음 보는 사람도 첫 행동이 무엇인지 알 수 있는가
• 입력 항목 중 나중에 받아도 되는 것은 없는가

예를 들어 가정한 가입 화면에 입력 항목이 열 개라면, 가입에 꼭 필요한 항목만 남기고 나머지는 가입 후 프로필에서 받을 수 있는지 검토해 볼 수 있어요.
단순함은 정보를 숨기는 것이 아니라 우선순위를 정해 보여 주는 일이라서, 덜어 낸 것은 나중에 찾을 수 있는 자리에 두면 됩니다.
선택지가 많을 때는 한 번에 다 보여 주기보다 단계를 나누는 방법도 있습니다.
다만 단계를 너무 쪼개면 오히려 번거로워지니, 한 단계에 하나의 결정만 받는지를 기준으로 삼으면 좋아요.

 

원칙을 알아도 실제로는 서로 부딪히는 순간이 있어요.
피드백을 충실하게 주려고 안내 문구를 늘리면 화면이 복잡해져 단순함이 깨집니다.
일관성을 지키려고 모든 화면에 같은 구성을 넣으면 불필요한 요소가 늘어납니다.
이럴 때 저는 우선순위를 이렇게 둡니다.

• 사용자의 실수를 막거나 되돌리는 것은 피드백이 먼저
• 처음 배우는 사람이 헤매는 것은 일관성이 먼저
• 숙련된 사용자가 반복하는 흐름은 단순함이 먼저

정답이라기보다 제가 쓰는 기준인데, 기준이 있으면 팀에서 논쟁이 생겨도 같은 말로 이야기할 수 있어요.

 

세 원칙은 새로운 이야기가 아니지만, 바쁠 때 가장 먼저 잊히는 것들이라고 생각해요.
그래서 기획서 검토용 체크리스트에 한 줄씩 넣어 두고 있습니다.
새 화면을 기획한 뒤 이 세 가지로 한 번씩 훑어보는 습관만 들여도 효과가 컸어요.
기획서 맨 끝에 일관성, 피드백, 단순함 점검란을 두고, 해당 없음이면 그 이유도 적어 보는 식입니다.
남은 질문은 원칙을 지켰는데도 사용자가 헤매는 경우예요.
그런 경우에는 원칙이 아니라 사용자의 기대, 즉 머릿속 모델이 다른 것일 수 있어서, 직접 지켜보며 확인하는 방법을 더 배우고 싶습니다.