좋은 업무처리

프로세스를 만드는

디자인 원칙

작은 디테일 변화만 주어도 사용자 경험을 바꿀 수 있어요

UX컨설팅 프로젝트를 수행하다 보면 다양한 금융사를 고객으로 만나게 돼요. 하나은행, 삼성화재, 신한라이프 등 은행부터 보험까지 다양한 분야를 경험했어요. 그러다 보니 자연스럽게 디지털 금융 서비스에 대한 개선 경험이 많아요.

금융 서비스의 UX컨설팅 프로젝트에서 업무처리 프로세스 개선은 항상 따라오는 컨설팅 범위 중 하나예요. 짧게는 송금부터, 길게는 보험 상품 가입까지 우리는 모바일에서 다양한 업무처리 프로세스를 만나게 되는데요. 적금 가입, 카드대금 납부, 보험금 청구 등이 대표적 예시라고 볼 수 있죠.

서비스는 다 달라도, 업무처리 프로세스에 대해 공통적으로 발견되는 불편함이 있었어요. 프로젝트마다 늘 비슷한 문제점을 발견하다 보니, 이제는 업무처리 프로세스를 개선하는 내부적인 원칙이 생기기 시작했어요. 이런 문제에는 이런 해결법을 적용하자고 말이죠. UX컨설팅 프로젝트를 수행하면서 얻은 3가지의 디자인 원칙에 대해 알려드릴게요.

어떻게 하면 업무처리를 더 쉽고 편하게 만들 수 있을까요? UX컨설팅 프로젝트를 수행하면서 얻은 3가지의 디자인 원칙에 대해 알려드릴게요.

1. 떠올리기 쉽게 물어보기

어떤 타이틀이 더 쉽게 느껴지시나요? 오른쪽이 더 쉽게 느껴지지 않았나요?

프로세스 진행 중 선택이나 입력에 고민이 필요한 순간이 있습니다. 그럴 땐 타이틀을 질문형으로 전달하는 것이 더 이해하기 쉽습니다. “어제 먹은 점심 메뉴를 입력해 주세요”와 “어제 점심 메뉴로 무엇을 드셨나요?”라는 문장을 비교해 보세요. 차이가 느껴지시나요?

물론 모든 타이틀을 질문형으로 쓸 필요는 없습니다. 고민 없이 선택(입력)할 수 있는 항목이라면, ‘~을 선택(입력)해 주세요’라는 표현도 좋습니다. ‘휴대폰 번호를 입력해 주세요’ 처럼요.

질문형으로 바꾼 것 외에도 단어의 변경이 있었어요. ‘최초’는 ‘처음’으로, ‘진료일’은 ‘병원에 방문한 날’로 표현이 바뀌었죠. 물론 최초라는 단어와 진료일이라는 단어가 그렇게 어렵지는 않아요. 하지만 어려운 용어에만 풀어쓰기가 필요한 것은 아니에요. 더 많은 사람이 쉽게 이해할 수 있는 쉬운 단어가 있다면, 더 쉬운 단어를 선택하는 것이 좋아요.

그런데 단어를 더 쉽게 바꾸고 보니 문장의 길이가 늘어났어요. 하지만 문장의 길이가 늘어났다고 문장이 더 어려워지는 것은 아니에요. “수익자를 선택해 주세요”라는 문장과 “보험금 받는 분을 선택해 주세요”라는 문장을 비교해 보세요. 뒤의 문장이 더 길어졌지만, 더 이해하기 쉬운 문장으로 바뀌었죠.

이렇듯 짧은 문장이 더 어려울 수 있어요. 그러니 풀어쓰는 것을 걱정할 필요가 없답니다.

2. 선택하기 쉽게 제시하기

이 화면을 보고 어떤 생각이 드시나요?

위의 화면을 넘어가려면, 3개의 질문을 읽고 각 질문에 대답을 해야 해요. 각 질문에 모두 답을 하고 나서야 이 화면의 목적을 깨닫게 돼요. ‘내 차량에 추가 장착된 부속품 여부를 확인하는 거였구나!’ 하고요. 화면에서 무엇을 생각하고 선택해야 하는지 화면을 처음 봤을 땐 쉽게 읽히지가 않죠.

보여드렸던 화면을 바꿔봤어요. 이제 화면의 목적이 한눈에 보이나요?

먼저, 앞서 설명드린 원칙을 활용해 타이틀을 질문형으로 바꿨어요. 차량에 추가로 장착된 것이 있는지 떠올리기 쉽도록요. 그리고 예, 아니오 버튼을 모두 덜어내고 체크박스로 대신 구성하여, 중요한 정보가 한눈에 보이도록 만들었어요. 위의 예시로 알려드리고 싶었던 건, 사용자가 한눈에 내가 무엇을 선택해야 하는지 알 수 있도록 제시해야 한다는 거예요.

위의 화면이 어떻게 느껴지시나요?

한 화면에 선택해야 하는 정보가 너무 많다고 느껴지지 않나요? 한 화면에 입력할 게 많으면 실제로도 불편해요. 하나를 입력하면 다음 항목을 직접 찾아야 하거든요. 입력필드를 찾고, 누르고, 입력하고. 다시 찾고, 누르고, 입력하고. 혹시라도 중간에 잘못 입력한 게 있다면요? 번거로운 과정이 반복되죠.

이 문제를 해결하는 방법은 단순해요. 하나의 페이지에 최소 단위의 선택 항목만 전달하면 돼요. 위의 화면을 최소 단위 별로 하나씩 쪼개어 볼게요.

어떤가요? 더 편하게 느껴지시나요?

한 화면에 최소 단위의 선택 항목만 전달하면, 사용자는 선택에 집중할 수 있어요. 무엇을 떠올려서 무엇을 선택하면 되는지 쉽게 이해할 수 있기 때문이에요.

“화면 하나씩 보면 더 쉬워진 것 같은데, 대신 화면 수가 늘어나잖아요. 결과적으로 과정이 더 길어져서 불편한 거 아닌가요?”

당연히 모든 과정이 분리될 필요는 없어요. 우리가 휴대폰 번호를 어딘가에 입력할 때 통신사 선택 칸이 바로 옆에 붙어있는 것처럼요. 연속된 속성의 정보는 한 번에 묶어서 제공해야 해요. 그러나 위의 예시인 보험금 청구처럼 하나하나의 기억을 떠올리는데 시간이 걸리는 경우, 하나씩 차근차근 밟아나가는 게 좋아요. 사용자가 다음 선택 항목을 직접 찾지 않아도 되고, 선택 하나에 집중한 만큼 더 쉽게 선택할 수 있기 때문이죠. 그럼에도 과정이 길어지는 것이 걱정된다면, 그 걱정을 줄이는 한 가지 방법이 더 있어요. 바로 다음 원칙으로 알려드릴 ‘대신 눌러주기’에요.

3. 버튼 대신 눌러주기

어떻게 하면 사용자의 터치가 필요한 행위를 최소화할 수 있을까요? 혹시 우리가 터치를 대신해 줄 순 없을까요?

버튼 ‘대신 눌러주기’를 활용한다면 물리적으로 길어 보이는 과정도, 체감 단계를 줄여 짧게 만들 수 있어요.

인증번호처럼 정답이 정해진 항목은 정확한 번호를 입력했다면 사용자가 확인 버튼을 누르기 전에 다음으로 넘어갈 수 있어요. 사용자가 확인 버튼을 누르지 않아도, 번호가 맞는지 틀렸는지 알 수 있기 때문이죠. 결과적으로 인증번호 확인 단계에선 확인 버튼을 노출할 필요가 없어요. 정확한 인증번호를 입력하면 자동으로 넘어가게 하면 되죠.

자릿수가 정해진 항목은 자동으로 다음 입력 필드로 넘겨줄 수 있어요. 예를 들면 주민등록번호 같은 경우 앞자리는 6자리로 정해져 있죠. 사용자가 앞자리 6자리를 모두 입력했을 때, 자동으로 뒷자리 입력 필드를 눌러주고 키패드를 꺼내준다면 필요한 터치를 최소화할 수 있어요.

무엇을 대신 눌러줄 수 있을까를 고민하다 보면, 체감 단계를 줄일 수 있는 지점을 발견할 수 있을 거예요. 그렇게 되면 화면 수가 늘어나 물리적 단계가 늘어나더라도, 사용자의 체감 단계는 훨씬 줄어들어요.

위의 원칙들은 좋은 디자인에 도움을 줄 순 있지만, 당연히 절대적 규칙은 아니에요. 원칙은 언제든 상황이나 관점, 트렌드에 따라 바뀔 수 있기 때문이죠.

사용자의 더 나은 경험을 위해 계속 고민하는 진정성이야 말로 어찌 보면 가장 중요한 대원칙이에요. ‘이 정도면 됐지’가 아닌 ‘더 나은 건 없을까?’하는 고민으로부터 시작되는 진정성, 알릭은 언제나 그 진정성을 잃지 않으려 노력해요. 좋은 디자인은 사용자를 향한 진정성이 우선될 때 따라오는 것이라고 믿거든요.

Wireframe

Tips

Written by

조현승

UX Consultant

좋은 업무처리 프로세스를 만드는

디자인 원칙

작은 디테일 변화만 주어도 사용자 경험을 바꿀 수 있어요

UX컨설팅 프로젝트를 수행하다 보면 다양한 금융사를 고객으로 만나게 돼요. 하나은행, 삼성화재, 신한라이프 등 은행부터 보험까지 다양한 분야를 경험했어요. 그러다 보니 자연스럽게 디지털 금융 서비스에 대한 개선 경험이 많아요.

금융 서비스의 UX컨설팅 프로젝트에서 업무처리 프로세스 개선은 항상 따라오는 컨설팅 범위 중 하나예요. 짧게는 송금부터, 길게는 보험 상품 가입까지 우리는 모바일에서 다양한 업무처리 프로세스를 만나게 되는데요. 적금 가입, 카드대금 납부, 보험금 청구 등이 대표적 예시라고 볼 수 있죠.

서비스는 다 달라도, 업무처리 프로세스에 대해 공통적으로 발견되는 불편함이 있었어요. 프로젝트마다 늘 비슷한 문제점을 발견하다 보니, 이제는 업무처리 프로세스를 개선하는 내부적인 원칙이 생기기 시작했어요. 이런 문제에는 이런 해결법을 적용하자고 말이죠. UX컨설팅 프로젝트를 수행하면서 얻은 3가지의 디자인 원칙에 대해 알려드릴게요.

어떻게 하면 업무처리를 더 쉽고 편하게 만들 수 있을까요? UX컨설팅 프로젝트를 수행하면서 얻은 3가지의 디자인 원칙에 대해 알려드릴게요.

1. 떠올리기 쉽게 물어보기

어떤 타이틀이 더 쉽게 느껴지시나요? 오른쪽이 더 쉽게 느껴지지 않았나요?

프로세스 진행 중 선택이나 입력에 고민이 필요한 순간이 있습니다. 그럴 땐 타이틀을 질문형으로 전달하는 것이 더 이해하기 쉽습니다. “어제 먹은 점심 메뉴를 입력해 주세요”와 “어제 점심 메뉴로 무엇을 드셨나요?”라는 문장을 비교해 보세요. 차이가 느껴지시나요?

물론 모든 타이틀을 질문형으로 쓸 필요는 없습니다. 고민 없이 선택(입력)할 수 있는 항목이라면, ‘~을 선택(입력)해 주세요’라는 표현도 좋습니다. ‘휴대폰 번호를 입력해 주세요’ 처럼요.

질문형으로 바꾼 것 외에도 단어의 변경이 있었어요. ‘최초’는 ‘처음’으로, ‘진료일’은 ‘병원에 방문한 날’로 표현이 바뀌었죠. 물론 최초라는 단어와 진료일이라는 단어가 그렇게 어렵지는 않아요. 하지만 어려운 용어에만 풀어쓰기가 필요한 것은 아니에요. 더 많은 사람이 쉽게 이해할 수 있는 쉬운 단어가 있다면, 더 쉬운 단어를 선택하는 것이 좋아요.

그런데 단어를 더 쉽게 바꾸고 보니 문장의 길이가 늘어났어요. 하지만 문장의 길이가 늘어났다고 문장이 더 어려워지는 것은 아니에요. “수익자를 선택해 주세요”라는 문장과 “보험금 받는 분을 선택해 주세요”라는 문장을 비교해 보세요. 뒤의 문장이 더 길어졌지만, 더 이해하기 쉬운 문장으로 바뀌었죠.

이렇듯 짧은 문장이 더 어려울 수 있어요. 그러니 풀어쓰는 것을 걱정할 필요가 없답니다.

2. 선택하기 쉽게 제시하기

이 화면을 보고 어떤 생각이 드시나요?

위의 화면을 넘어가려면, 3개의 질문을 읽고 각 질문에 대답을 해야 해요. 각 질문에 모두 답을 하고 나서야 이 화면의 목적을 깨닫게 돼요. ‘내 차량에 추가 장착된 부속품 여부를 확인하는 거였구나!’ 하고요. 화면에서 무엇을 생각하고 선택해야 하는지 화면을 처음 봤을 땐 쉽게 읽히지가 않죠.

보여드렸던 화면을 바꿔봤어요. 이제 화면의 목적이 한눈에 보이나요?

먼저, 앞서 설명드린 원칙을 활용해 타이틀을 질문형으로 바꿨어요. 차량에 추가로 장착된 것이 있는지 떠올리기 쉽도록요. 그리고 예, 아니오 버튼을 모두 덜어내고 체크박스로 대신 구성하여, 중요한 정보가 한눈에 보이도록 만들었어요. 위의 예시로 알려드리고 싶었던 건, 사용자가 한눈에 내가 무엇을 선택해야 하는지 알 수 있도록 제시해야 한다는 거예요.

위의 화면이 어떻게 느껴지시나요?

한 화면에 선택해야 하는 정보가 너무 많다고 느껴지지 않나요? 한 화면에 입력할 게 많으면 실제로도 불편해요. 하나를 입력하면 다음 항목을 직접 찾아야 하거든요. 입력필드를 찾고, 누르고, 입력하고. 다시 찾고, 누르고, 입력하고. 혹시라도 중간에 잘못 입력한 게 있다면요? 번거로운 과정이 반복되죠.

이 문제를 해결하는 방법은 단순해요. 하나의 페이지에 최소 단위의 선택 항목만 전달하면 돼요. 위의 화면을 최소 단위 별로 하나씩 쪼개어 볼게요.

어떤가요? 더 편하게 느껴지시나요?

한 화면에 최소 단위의 선택 항목만 전달하면, 사용자는 선택에 집중할 수 있어요. 무엇을 떠올려서 무엇을 선택하면 되는지 쉽게 이해할 수 있기 때문이에요.

“화면 하나씩 보면 더 쉬워진 것 같은데, 대신 화면 수가 늘어나잖아요. 결과적으로 과정이 더 길어져서 불편한 거 아닌가요?”

당연히 모든 과정이 분리될 필요는 없어요. 우리가 휴대폰 번호를 어딘가에 입력할 때 통신사 선택 칸이 바로 옆에 붙어있는 것처럼요. 연속된 속성의 정보는 한 번에 묶어서 제공해야 해요. 그러나 위의 예시인 보험금 청구처럼 하나하나의 기억을 떠올리는데 시간이 걸리는 경우, 하나씩 차근차근 밟아나가는 게 좋아요. 사용자가 다음 선택 항목을 직접 찾지 않아도 되고, 선택 하나에 집중한 만큼 더 쉽게 선택할 수 있기 때문이죠. 그럼에도 과정이 길어지는 것이 걱정된다면, 그 걱정을 줄이는 한 가지 방법이 더 있어요. 바로 다음 원칙으로 알려드릴 ‘대신 눌러주기’에요.

3. 버튼 대신 눌러주기

어떻게 하면 사용자의 터치가 필요한 행위를 최소화할 수 있을까요? 혹시 우리가 터치를 대신해 줄 순 없을까요?

버튼 ‘대신 눌러주기’를 활용한다면 물리적으로 길어 보이는 과정도, 체감 단계를 줄여 짧게 만들 수 있어요.

인증번호처럼 정답이 정해진 항목은 정확한 번호를 입력했다면 사용자가 확인 버튼을 누르기 전에 다음으로 넘어갈 수 있어요. 사용자가 확인 버튼을 누르지 않아도, 번호가 맞는지 틀렸는지 알 수 있기 때문이죠. 결과적으로 인증번호 확인 단계에선 확인 버튼을 노출할 필요가 없어요. 정확한 인증번호를 입력하면 자동으로 넘어가게 하면 되죠.

자릿수가 정해진 항목은 자동으로 다음 입력 필드로 넘겨줄 수 있어요. 예를 들면 주민등록번호 같은 경우 앞자리는 6자리로 정해져 있죠. 사용자가 앞자리 6자리를 모두 입력했을 때, 자동으로 뒷자리 입력 필드를 눌러주고 키패드를 꺼내준다면 필요한 터치를 최소화할 수 있어요.

무엇을 대신 눌러줄 수 있을까를 고민하다 보면, 체감 단계를 줄일 수 있는 지점을 발견할 수 있을 거예요. 그렇게 되면 화면 수가 늘어나 물리적 단계가 늘어나더라도, 사용자의 체감 단계는 훨씬 줄어들어요.

위의 원칙들은 좋은 디자인에 도움을 줄 순 있지만, 당연히 절대적 규칙은 아니에요. 원칙은 언제든 상황이나 관점, 트렌드에 따라 바뀔 수 있기 때문이죠.

사용자의 더 나은 경험을 위해 계속 고민하는 진정성이야 말로 어찌 보면 가장 중요한 대원칙이에요. ‘이 정도면 됐지’가 아닌 ‘더 나은 건 없을까?’하는 고민으로부터 시작되는 진정성, 알릭은 언제나 그 진정성을 잃지 않으려 노력해요. 좋은 디자인은 사용자를 향한 진정성이 우선될 때 따라오는 것이라고 믿거든요.

Wireframe

Tips

Written by

조현승

UX Consultant