Generative AI UX Pattern: (3)Product Education

Haeun Jin
Skelter Labs Design Team
14 min readJan 9, 2024

세 번째 주제는 Product Education 패턴입니다. 이번 글은 Generative AI 서비스에서 사용하는 Product Education 패턴의 특징, 유형, 한계 및 개선방향에 관해 이야기하고자 합니다.

Product Education 패턴이란?

Product Education은 사용자가 서비스를 이해하고 효과적으로 활용할 수 있도록 정보를 제공합니다. 과거에는 전자제품 매뉴얼처럼 이미지와 텍스트로 구성된 웹사이트 형태가 일반적이었다면, 현재는 다양한 UI 형태로 서비스 내에 적절한 시점과 위치에서 나타납니다.

특히 Generative AI 서비스에서는 Product Education이 중요한 UX 패턴으로 작용합니다. AI 기술의 발전과 함께 과도기 단계에 진입하면서 사용자가 새로운 환경에 빠르게 익숙해질 수 있도록 Product Education을 적극적으로 활용하고 있습니다.

Product Education 패턴 특징

1. 개념적 측면

1–1. 기술력보다 의미 있는 정보 제공하기

사용자가 AI 기술 원리를 이해할 필요는 없습니다. 전문성과 신뢰성을 강조하기 위해 기술력을 부각하고 싶을 수 있지만, 사용자에게는 사용법과 이점이 더 의미 있는 정보일 수 있습니다.

Google SGE는 이를 잘 보여주는 사례입니다. 이미지와 문구를 활용하여 사용자가 서비스를 직관적으로 이해할 수 있게 도와줍니다. 현재 한국에서 화두가 되는 주제의 대화 이미지를 통해 ‘최신 정보를 기반한 질문에도 잘 대답해 주겠구나’라는 인식을 심어줍니다. 전문적이거나 자세한 설명을 원하는 사용자를 위해 link나 tooltip UI 요소를 제공하는 것도 좋은 접근 방법입니다.

▲ Google SGE 설정 화면 (2023년 12월 기준)

1–2. 올바른 기대치 설정하기

AI에 대한 기대치는 사용자마다 천차만별입니다. 사용자는 자신의 기대와 다른 결과가 도출되면 실망하거나 혼란스러워할 수 있습니다. 이러한 상황을 방지하기 위해, AI가 어떤 일을 할 수 있고 한계가 무엇인지에 대한 정보를 제공하면 올바른 기대치를 설정할 수 있습니다. 이는 1편에 언급한 AI Notice와도 관련이 있으며 AI가 항상 완벽하지 않다는 사실을 인지하게끔 합니다. 특히 이미지 생성형 Generative AI 서비스의 경우, 시각적 결과물을 사례로 제공하면 더욱 직관적인 기대치를 설정하는 데 도움을 줄 수 있습니다.

▲ Microsoft의 이미지 생성형 AI 서비스 Designer

1–3. AI와 사람을 구분하는 affordance 제공하기

사람들은 언어 인터페이스에 인간성을 부여하려는 경향이 강합니다. 사람으로 인식하고 대화를 나누다가 AI라는 것을 뒤늦게 알게 되면 사용자는 혼란과 좌절을 느낄 수 있습니다. 이러한 상황을 방지하기 위해 시스템과 사람, 각 signifier(기표)에 맞는 affordance(어포던스, 행동 유도성)를 제공하여 둘을 명확히 구분하는 것이 중요합니다. affordance는 챗봇의 이름, 인터페이스, 폰트 등 여러 요소에 활용할 수 있습니다.

▲ ‘Make sure your signifiers match your affordances.’ 파트 중 일부 (출처 : LLM Bootcamp — The Full Stack)

2. 행동적 측면

2–1. 첫 행동을 유도하는 Trigger

대화 중심의 LLM(Large Language Model) 기반 Generative AI 서비스를 사례로 살펴보겠습니다. 대화 시작 전 Empty 화면을 Product Education에 활용합니다. 일반적으로 대화를 자연스럽게 유도하는 인사말과 대화 주제를 제시하는 추천 질문으로 구성되어 있습니다. 이는 사용자가 쉽게 대화를 시작할 수 있고, AI가 어떤 답변을 생성할지 기대를 설계하는 강력한 Trigger입니다.

▲ OpenAI ChatGPT, Google Bard의 Empty 화면

2–2. 지속적인 행동을 유도하는 Follow-Up

Trigger를 통해 사용자가 첫 행동을 경험했다면 지속적인 행동을 유도해야 합니다. 이는 대화형 UX(Conversational UX)에서 대화를 이어 나가는 것을 의미합니다. Microsoft Bing과 Google Bard는 이를 잘 보여주는 사례입니다.

Microsoft Bing은 사용자의 질문에 답변을 생성하고 연관된 후속 질문을 제공함으로써, 손쉽게 대화 흐름을 이어 나갈 수 있도록 유도합니다. 그러나 생성된 답변이 사용자의 기대와 다를 수 있습니다. 이럴 때는 후속 질문을 제공하는 것이 무의미해집니다. 이를 보완하기 위해 Google Bard는 여러 개의 답변을 제시합니다. 만약 원하는 답변이 없다면 ‘답안 재생성’ 기능을 통해 새로운 답변을 생성할 수 있습니다. 사용자가 원하는 대화 흐름을 유지할 수 있도록 피드백을 제공하는 방법입니다.

▲ Microsoft Bing의 후속 질문, Google Bard의 다른 답안 보기

Product Education 패턴 유형

Product Education 특징이 어떤 UI 형태로 사용되는지 살펴보겠습니다.

1. 문장 중심의 검색 경험을 학습시키는 Suggested Question(추천 질문)

Product Education 패턴 특징에서 언급했듯이, 대화 중심의 LLM 기반 Generative AI 서비스는 추천 질문이나 서비스 활용 팁을 제공합니다. 이는 사용자가 대화를 시작할 수 있는 Trigger를 제공하고 서비스에 적절한 기대치를 설정하는 데 도움을 줍니다.

또한, Suggested Question은 대부분 문장으로 구성되어 있습니다. 이는 키워드 중심의 검색 경험에서 개인화된 문장 중심의 검색 경험으로 변화하는 환경에 적응할 수 있도록 Seamless한 Nudge를 제공합니다.

▲ Naver cue, L사

2. 사용자의 행동을 방해하지 않고 부가 정보를 제공하는 Tooltip

사용자가 새로운 개념이 완벽히 숙지 되기 전까진 필요할 때마다 쉽고 빠르게 정보를 확인할 수 있어야 합니다. Tooltip을 활용하면 사용자의 행동을 방해하지 않고 정보를 제공할 수 있습니다.

▲ ‘실시간 검색’ 토글 버튼의 Tooltip (W사)

Tooltip은 Generative AI를 설계하는 Backoffice 서비스(e.g : OpenAI Playground, Cohere, Wrtn 스튜디오 등)내에 더 적극적으로 활용됩니다. 사용자의 행동을 방해하지 않고 사용자가 원하는 때에 정보를 제공하며, 이미지를 함께 사용하면 직관적인 이해를 도울 수 있습니다.

러닝커브가 높으면 많은 정보를 일회성으로 제공하는 것(e.g : Modal UI)은 바람직하지 않습니다. 대신 Tooltip을 적절한 위치에 배치한다면 사용자가 필요할 때마다 확인할 수 있어 반복적인 학습이 가능합니다.

▲ OpenAI Playground, Intercom

3. 사용성과 직결된 정보를 제공하는 Notice

Generative AI 서비스에서는 새로운 개념이나 용어를 설명하는 데 Notice가 주로 활용되며, 사용자가 특정 작업을 수행하지 않아도 기본적으로 표시됩니다. 주로 Banner, InfoMessage, Description 형태로 나타나며 사용하는 UI에 따라 한 번만 표시되기도 합니다.

Generative AI 서비스에 점차 익숙해지는 시기가 오면 사용자는 경험했던 학습이 쌓여 당연하게 인식하는 정보가 늘어날 것입니다. 이러한 변화로, 현재 필요하다 판단되는 Notice의 범위가 추후엔 줄어들 수 있습니다. 이처럼 Product Education의 활용 범위는 고정적인 것이 아니라 서비스의 발전 단계와 학습 상태에 따라 변화합니다.

▲ Wrtn, Naver cue, Cohere

Product Education 패턴의 한계와 개선방향

1. 한계

1–1. 사용자가 보지 않는 Notice

사용자는 UI 요소를 모두 꼼꼼히 살펴보지 않는 경우가 많습니다. 빠르게 훑어보거나 텍스트가 길면 읽지 않을 수도 있습니다. 이러한 사용자의 행동 패턴 때문에 중요한 정보를 담은 Notice가 제대로 전달되지 않을 수 있습니다.

1–2. 정보 제공이 제한적인 Tooltip

Tooltip은 보통 마우스 오버나 클릭 시에 보이기 때문에 사용자가 해당 UI 요소에 마우스를 올리지 않으면 정보를 놓칠 수 있습니다. 또한, 대부분 마우스를 올린 상태에서만 Tooltip을 확인할 수 있어서 텍스트 입력 등의 다른 행동을 하며 동시에 정보를 볼 수 없습니다.

2. 개선방향

2–1. Latency를 활용한 정보 제공

*Latency는 결과물을 생성하는 데 걸리는 로딩 시간을 의미하며, Generative AI 서비스는 대체로 일반 서비스보다 더 긴 Latency를 가집니다. (Latency는 다섯 번째 주제에서 자세히 다룰 예정입니다.)

사용자가 아무런 행동을 하지 못하고 대기하는 로딩 시간동안 정보를 제공한다면 사용자의 이목을 집중시킬 수 있습니다. Microsoft의 이미지 생성형 AI 서비스 ‘Designer’는 이를 잘 보여주는 사례입니다. 결과물을 생성하는 동안 Prompt 작성에 관한 몇 가지 팁을 제공합니다. 이 같은 방식으로 Latency를 활용한다면 정보의 인지도를 높일 수 있습니다.

▲ Latency를 활용하여 Prompt 관련 팁을 제공하는 Microsoft Designer

2–2. 마우스 오버 없이도 보이는 Tooltip

마우스 오버 없이도 Tooltip이 보인다면, 사용자는 정보를 놓치지 않고 확인할 수 있습니다.
ChatGPT는 이를 잘 보여주는 사례입니다. 텍스트 입력창을 클릭하면 Tooltip이 고정적으로 보입니다. 텍스트를 입력하는 동안에도 정보를 확인할 수 있습니다. 그러나 이 방식을 모든 Tooltip에 적용하는 것은 바람직하지 않습니다. 사용자가 정보를 지속해서 참고해야 하는 상황을 파악하여 그에 맞게 사용해야 합니다. 또한, 사용자의 행동에 방해가 되지 않는 영역에 나타나야 합니다.

▲ 텍스트를 입력하는 동시에 Tooltip을 볼 수 있는 OpenAI ChatGPT

결론

Product Education 패턴은 사용자가 서비스를 이해하고 잘 활용할 수 있도록 가이드하는 역할을 하며, 서비스 이용 중 겪을 수 있는 어려움을 사전에 예방합니다. 이 패턴은 Generative AI 서비스 전반에 아울러 사용됩니다. 즉, 사용자가 서비스를 처음 진입할 때와, 처음 이용할 때, 이후 지속적으로 서비스를 이용하는 과정에 이르기까지, 각 단계에 필요한 정보를 제공하며 Generative AI 서비스에 점차 익숙해지는 데 중요한 기반을 마련합니다.

그러나 현재 Generative AI는 아직 과도기 단계이므로, 사용자 간의 기본적인 이해도와 학습 상태가 서로 다릅니다. 이를 고려하여 모든 사용자가 쉽게 이해하고 접근할 수 있는 Product Education을 설계하고, 서비스 발전 단계에 따라 지속적으로 개선해 나가는 것이 중요합니다.

▲ Product Education 패턴 핵심 가치

마치며

1. 이번 아티클을 작성하며 자료 조사를 하던 중 User Education과 Product Education 관점을 배웠습니다. 해당 아티클에 따르면 User Education이 부정적인 사고방식은 아니지만, 과도하게 의존하면 사용자가 서비스를 제대로 활용하지 못하는 것을 사용자의 책임으로 돌리는 사고방식으로 이어질 수 있습니다. 서비스를 학습하는 것은 사용자만의 책임이 아닙니다. 서비스를 만드는 Maker도 사용자를 지속적으로 이해하고 그에 맞는 UX를 도출하는 과정에서 끊임없이 학습해야 합니다. Maker의 건강한 사고방식을 지속적으로 인지하기 위해 User Education이라는 단어 대신 Product Education이라는 단어를 사용했습니다.

2. Generative AI 서비스는 새롭고 혁신적입니다. ChatGPT의 등장으로 사람들은 전례 없던 새로운 경험을 하게 됐고, Generative AI 서비스는 계속해서 등장하고 있습니다. 사용자에게 낯설 수 있는 새로운 환경일수록, 익숙하고 범용적인 UX를 제공하는 것이 중요하다고 생각합니다. 러닝커브를 최소화하여 사용자가 AI 서비스를 잘 활용할 수 있도록 돕는 것이 Product Designer의 역할이라고 생각합니다.

3. AI 서비스를 만드는 과정에서 디자인과 AI 기술 사이의 균형을 찾는 것은 항상 큰 고민이었습니다. 때로는 우리 서비스에 적용되는 AI 기술을 완전히 이해하고, 이를 기반으로 디자인을 해야만 올바른 디자인이 나올 것 같다는 생각에 사로잡힌 적도 있습니다.

그러나 Nielsen Norman Group에 따르면 UX 전문가는 AI의 기본 원리를 이해하는 것은 필요하지만, AI의 내부 작동 방식을 모두 이해할 필요는 없습니다. 웹사이트를 디자인하기 위해 HTML이나 JavaScript를 이해할 필요가 없는 것과 같은 맥락입니다. 아티클을 읽고 디자이너도 AI의 기본 원리를 이해해야 한다는 점에 공감했습니다. AI 기술에 대한 이해도가 있어야 서비스를 만들 때 그 가치와 중요성을 고려할 수 있습니다.

만약 기술적인 한계가 있다면, 사용자가 부정적인 경험을 하지 않도록 이를 제품에 어떻게 적용할지 판단해야 합니다. 전문 지식이 높다면 좋지만 부담을 가질 필요는 없습니다. 필요한 지식이 생길 때마다 학습하며 서비스를 만들어 나가는 것이 중요합니다. 스켈터랩스 디자인팀은 사용자가 AI 기술을 통해 긍정적인 경험을 느낄 수 있는 서비스를 만들기 위해, 지속적으로 학습하며 UX를 고도화하는 데 노력을 기울이고 있습니다.

그렇다면, BELLA QNA는 어떤 Product Education 패턴을 제공할까요?

2024년 3월 현재, 벨라 큐나 백오피스는 기업 관리자가 서비스를 이해하고 사용하는 데에 어려움이 없도록 낯선 용어에 관한 정보를 제공하고 있습니다. 백오피스뿐 아니라, 웹사이트 챗봇도 엔드 유저를 고려한 Product Education을 지속적으로 개선해 나가고 있습니다.

▲ BELLA QNA 백오피스에서 제공하는 Tooltip

--

--