brunch

매거진 UX 디자인의 모든 것

라이킷 77 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by UX 컨설턴트 전민수 Feb 06. 2017

챗봇 UI Tips

UX 디자인 배우기 #110

Today UX 아티클

Uxdesign.cc에 올라온 Ish Jindal의 글 How we went about creating Input UI Elements for our Chatbot Platform을 원저자의 허락을 받아 번역한 글입니다.

현재 챗봇은 인간 자연어를 이해할 수 있는 능력이 별로 없습니다. 그리고 이는 대부분의 메시지 앱(Messenger, Kik 등)에서 봇 플랫폼에 그래픽 UI와 텍스트 UI 조합해 사용하고 있는 이유 중 하나입니다. 텍스트 응답뿐만 아니라 버튼, 캐러셀, 이미지 카드 등을 활용하고 있는 걸 생각해보세요.

저희 Tars에서는 봇이 조작할 수 있는 챗봇 채팅 인터페이스를 만드는 데 브라우저를 플랫폼으로 사용하고 있습니다. 저희 챗봇을 한 번이라도 써보셨다면 그래픽 UI와 텍스트를 조합한 접근법을 강력히 지지하게 될 것입니다. 저희는 어려운 과정을 거쳐 다양한 사용자 인터랙션 및 상황을 지원할 수 있는 입력 인터페이스를 몇 가지 만들어냈습니다.

TARS | Create ChatBots with NO programming at all

hellotars.com

Messenger, Kik, Telegram은 개발자들이 하루에도 수백 가지 봇을 효율적으로 활용하고 있는 대규모 플랫폼입니다. 하지만 이러한 메시지 플랫폼들에서는 개발자들이 좋은 유저 인터랙션을 만들어내는 데 도움이 되는 프론트엔드 구성요소를 충분히 제공하지 못하고 있다고 생각합니다.

그래서 저희가 각각의 맞춤형 입력 UI를 어떻게 만들어냈고, 왜 각 UI가 적합한지, 이런 UI가 없으면 사용자 인터랙션에 어떤 악영향이 가는지 얘기해보고자 합니다.

시작해봅시다.

날짜 및 시간 스크롤러

언제 약속을 잡고 싶은지 유저에게 물어봐야 하는 시나리오 상황을 생각해보세요. 같은 정보를 전달받는 데도 여러 방법이 있을 겁니다.

25th Nov, 25th November, Nov 25th, 25/11, 25–11–2016, 11/25/16 모두 기본적으로 같은 것을 뜻하지만 머신이 날짜를 이해하게 만드는 것은 쉬운 일이 아닙니다.

때문에 저희는 유저가 다이얼을 돌려서 날짜를 선택할 수 있는 날짜 및 시간 스크롤러를 만들었습니다.

현재로선 이런 UI를 사용하고 있는 메시징 플랫폼은 보지 못했지만 유저에게 날짜 혹은 시간 입력을 요청할 때 반드시 이용해야 할 방법이라고 생각합니다.

세로로 나열한 버튼들

선택지 수가 제한적인 폼에서는 선택 옵션을 제공하는 것도 생각해볼 수 있습니다. 버튼을 누르는 것은 인터랙션을 빠르게 할 수 있게 해주며 대화의 범주를 제한적으로 유지할 수 있게 해줍니다.

버튼 기반 접근법은 채식 주의자용 피자와 비 채식 주의자용 피자 중 어떤 걸 선택할지 물어볼 때는 적합할 수 있습니다. 하지만 100가지 보험 중 무엇을 선택할 것인지 물어볼 때 쓰기 좋은 UI는 아닙니다.

세로로 나열한 버튼들로 또 할 수 있는 건 무엇이 일까요?

각 옵션 옆에 이미지를 추가하여 시각적으로 눈길을 끌게 만들 수 있습니다.

유저가 옵션을 탭 하면 선택이 보내지도록 만들거나 “보내기”를 누른 후에 선택이 보내지게 만들 수 있습니다. 후자는 유저가 옵션을 실수로 선택한 건 아닌지 재확인해야 할 때 도움이 될 수 있습니다. 챗 플로우에서는 뒤로 갈 방법이 없기 때문에 재확인을 할 것인지 잘 고려해봐야 합니다.

각 옵션마다 세부 정보를 볼 수 있는 ‘빠른 정보조회’ 메뉴를 추가하여 의사 결정 프로세스를 더 좋게 만들어 줄 수도 있습니다.

‘고급 얼굴 관리’와 ‘기본 얼굴 관리’ 사이의 차이를 모든 사람들이 알고 있는 건 아닙니다. 각각에 어떤 서비스가 제공되는지 가격은 어떤지 세부 정보를 제공하면 사용자 경험이 더 나아질 수 있습니다.

버튼 UI를 이용할 때 한 가지 더 중요한 것은 질문을 제대로 만들어야 한다는 겁니다. Leszek이 그의 글에서 설명했듯이 옵션의 범주를 제한하면서도, 개방형 질문보단 콘텍스트를 설정하는 방향으로 질문해야 합니다.

Conversational UI Principles — Complete Process of Designing a Website Chatbot – The Startup

In this article I’ll show you a case study describing an entire process of designing a conversational UI for a B2B website, including…

medium.com

유저가 입력하는 내용 제한하기

저희 챗 인터페이스에 적용한 것 중 가장 잘 한 부분이라고 생각합니다. 그래픽으로 된 입력 UI(버튼, 캐러셀 등)를 제공할 때면 항상 유저가 아무것도 타이핑하지 못하게 만들었습니다.

왜 그랬을까요? 유저가 아무거나 입력할 수도 있는데 챗봇은 그에 대한 준비가 되지 않은 상태이기 때문입니다. 대화가 끊기는 것보다 간단하고 제한적으로라도 대화를 이어가는 것이 준비가 될 때까지는 더 좋습니다.

저희는 이렇게 만들었습니다.

저희 챗봇 인터페이스입니다

이렇게 하지 않으면 다음과 같은 문제가 생깁니다.

간단한 응답을 원할 때 텍스트 입력을 제한하지 않는 페이스북 Messenger 앱

완료 버튼과 패스 버튼

이 두 버튼은 작지만 큰 차이를 가져다주는 버튼을 사용하기로 결정을 내리게 된 이유는 스크립티드 챗봇(scripted chatbots)을 폼(form)의 진화된 형식으로 생각하기 때문입니다.

채팅 인터페이스에서 주소를 알려주거나 상세한 피드백을 줄 때는, 일반적으로 몇 단어를 쓰고 난 다음에 ‘보내기’ 버튼을 누르고 다음 문장을 쓰고 또 보내기를 반복하며 전체 3-4 문장을 답으로 보내게 됩니다. 이때 “완료(done)” 버튼이 있으면, 답을 전부 입력한 다음에 ‘완료’를 눌러서 답장을 전부 적었음을 알려줄 수 있습니다.

이런 옵션이 없게 되면 머신은 첫 문장만 보고 아직 유저의 응답을 다 받지 않은 상태에서 반응을 하게 됩니다.

유저가 질문에 대한 답을 안 하고 넘기고 싶을 때도 있을 겁니다. 이때는 “보내기(send)” 버튼 대신 “패스(pass)” 버튼을 사용하였습니다. 유저가 타이핑을 시작하면 패스 버튼이 보내기 버튼으로 바꿔주면 됩니다.

이메일 주소를 알려주고 싶지 않으신가요? “pass” 버튼을 눌러 질문을 넘기면 됩니다.

자동완성 단어 제안

구글 검색에서 타이핑을 시작하면 선택할 수 있는 옵션을 제안해 주는 자동완성 기능과 비슷한 기능입니다. 긴 옵션 리스트를 가지고 있거나 세로로 버튼을 나열해주는 것이 적절하지 않은 상황에서 특히 유용합니다. 예를 들어 지명 리스트, 자동차 모델명 리스트 등을 생각해보면 됩니다.