Jak vytvořit chatbotové rozhraní

Feb 10, 2026

jak

V polovině 2000s obdrželi virtuální agenti a chatboty služeb zákazníkům spoustu adulace, i když nebyly příliš konverzační, a pod kapotou byly pouze složeny z výměn dat s webovými servery.

V současné době však existuje obrovský počet příkladů "slabých AI" (včetně Siri, Alexa, webových vyhledávačů, automatizovaných překladatelů a rozpoznávání obličeje) a dalších témat, jako je \ t Reagovat web design Jsou brání limelight, chatboty stále způsobují míchání. S významnými investicemi z velkých společností existuje spousta příležitostí zaseknout konverzační rozhraní budoucnosti.

Jak navrhnout chatbot zkušenosti

Někdy dostanou špatnou pověst, ale chatboty mohou být užitečné. Nemusí se cítit jako základní náhrada za standardní webový formulář, kde uživatel vyplní vstupní pole a čeká na ověření - mohou poskytnout konverzační zážitek.

V podstatě zvyšujeme uživatelská zkušenost Cítit se přirozenější, jako je konverzace s expertem nebo přítelem, místo webového prohlížeče point-a kliknutí nebo mobilní gesta. Cílem je, že poskytováním empatických, kontextových reakcí, bude tato technologie vložena přímo v životě lidí.

Sledujte video níže nebo si přečtěte zjistit praktický způsob, jak navrhnout a vybudovat chatbot, založený na skutečném aplikaci projektu-sání v praxi pro návrh služeb.

01. Nastavte osobnost

It’s important to ensure the chatbot’s personality reflects the company it’s representing — Je důležité zajistit, že Chatbotova osobnost odráží společnost, kterou zastupuje

Vzhledem k tomu, že tato praxe slouží přes 110 000 členů globálně, cílem bylo poskytnout rychlé, pohodlné a přirozené rozhraní, přes které by interní zúčastněné strany mohly požádat o efektivní digitální služby, namísto toho, aby museli vyplnit matoucí formy.

Prvním krokem bylo zřídit osobnost Chatbota, protože by to představovalo hlas servisního designu týmu svým zainteresovaným stranám. Postavili jsme na Seminární práci Aarron Waltera Design Personas. . To značně pomohlo našemu týmu rozvíjet rysy osobnosti bota, které pak určily zprávy pro pozdravy, chyby a zpětnou vazbu uživatele.

Jedná se o jemnou fázi, protože ovlivňuje, jak je organizace vnímána. Abychom se ujistili, že jsme měli co nejvíce informací, okamžitě jsme nastavili workshopy zúčastněných stran, abychom nehodili příslušnou osobnost, barvu, typografii, snímače a uživatelský průtok při zapojení s bot.

Poté, co jsme získali veškeré nezbytné schválení - včetně hledání právního poradce - jsme se vydali na převod archaického požadavku do série back- and-Forthly otázek, které napodobovaly konverzaci mezi zúčastněnými stranami a zástupcem našeho týmu projektových služeb.

02. Použijte RivlyScript.

This simple scripting language provides everything you need to design and build a chatbot POC — Tento jednoduchý skriptovací jazyk poskytuje vše, co potřebujete k navrhování a vybudování chatbotu Poc

Věděli jsme, že jsme nechtěli dostat příliš hluboko do jazyka AI Markupu pro zpracovatelskou část - prostě jsme potřebovali dost, abychom skočili zkušenosti.

Rivlycript je jednoduchý chatbot API, která je dostatečně snadná, aby se učila a postačovala pro naše potřeby. Během několika dnů jsme měli logiku dolů, abychom savřela žádost ojektu od bota, a analyzovat ji s dostatečnou obchodní logikou pro potvrzení a kategorizovat, takže by to mohlo být odesláno prostřednictvím služby JONE REST na příslušný interní projektová fronta.

Chcete-li tento základní chatabot pracovat, vedou do Rivescript repo. , klonujte a nainstalujte všechny standardní závislosti uzlů. V repo můžete také získat chuť interakcí, které můžete přidat s různými příklady úryvků.

Dále spusťte web-klientskou složku, která změní bot na webovou stránku spuštěním základního gruntového serveru. V tomto okamžiku můžete zvýšit zkušenosti tak, aby vyhovovaly vašim potřebám.

03. Generovat mozek svého bota

Dalším krokem je generovat "mozek" našeho bota. Toto je specifikováno v souborech s příponou .rive a nahoře již Rivlycript dodává již se základními interakcemi z krabice (například otázky, jako je "Jaké je vaše jméno?", "Jak jste starý? 'A" Co je to vaše? oblíbená barva?').

Když iniciujete aplikaci webové klienta pomocí správného příkazu uzlu, soubor HTML je načten .Rive. soubory.

Dále potřebujeme generovat část mozku Chatbot, který se bude zabývat požadavky na projekt. Naším hlavním cílem je převést výběr projektových úkolů s příjemným otázkám do pravidelného konverzace.

Tak například:

Ahoj, jak můžeme pomoci?
Skvělé, jak brzy musíme začít?
Můžete mi dát hrubou představu o svém rozpočtu?
Řekni mi více o svém projektu ...
Jak jsi se o nás dozvěděl?

Typický přístupný webový formulář by vypadal takto:

 Forma akce = "" & gt;
& lt; fieldset & gt;
& lt; legenda & gt; typ požadavku: & lt; / legenda & gt;
& lt, vstup ID = "volba-jeden" type = "rádio" název = "hodnota požadavku" hodnota = "volba-one" & gt;

S webovými formami jsme velmi obeznámeni s určitými vzory: Klepněte na tlačítko Odeslat, všechny data formuláře jsou odeslány na jinou stránku, kde je požadavek zpracován, a pak se s největší pravděpodobností poděšná stránka Děkuji objeví.

S chatboty jsme schopni vzít interakci podání žádosti a učinit to smysluplnější.

04. Navrhněte hlas

Chcete-li převést tento formulář na konverzační uživatelské rozhraní sloužilo v CLIP klienta Chatbot RivlyScript, musíme převést informační architekturu z pevné k tekutině; nebo polní štítky do stroužků UI.

Pojďme zvážit některé přístupné polní štítky a jejich příbuzný tón otázek:

Žádost: Jak můžeme pomoci? Nejsem si jistý? Myslíte si, jestli se ptám na pár otázek?
Časová osa: Jak brzy musíme začít?
Informace o rozpočtu: Můžete mi dát hrubou představu o svém rozpočtu?
Popis projektu: OK, můžete mi říct souhrnný problém, který má být vyřešen?
Odkaz: Také, kdo vás odkázal?

Dále potřebujeme převést kód webového formuláře do skriptu AI, po velmi uvědomí RivlyScript zpracování logiky Pro obousměrné konverzace:

- Jak můžeme pomoci?

+ *
% jak můžeme pomoci
- Sada oblastech = & lt; var & gt; Jistě, ti to nevadí, jestli se zeptám pár otázek?

+ *
Určitě vám to nevadí, jestli se zeptám pár otázek - jak brzy musím tento požadavek začít?

+ *
% Jak brzy musím tento požadavek spustit
- Sada, když = & lt, var & gt; & gt; můžete mi dát hrubou představu o svém rozpočtu?

+ *
Můžeš mi dát hrubou představu o vašem rozpočtu
- Sada rozpočtu = & lt; var & gt; Ok, můžete mi říct souhrnný problém, který má být vyřešen, komponenty a postižené prostředí nebo celkový popis?

+ *
% OK Můžete mi říct souhrnný problém, který bude řešen komponenty a postižené prostředí nebo celkový popis
- Sada projektu = & lt; var & gt; & gt; také, kdo vás odkázal?

+ *
Také, kdo vás odkázal
- Sada odkazů = & lt; var & gt; & gt; skvělé tady je to, co jsem dostal tak daleko: n Služby potřebné:

05. Žádost podání

Na rozdíl od standardních proměnných formulářů, které jsou odesílány na jinou stránku nebo službu pro zpracování, chatboty mohou potvrdit a odeslat informace zadané uživatelem v okně chatu (nebo mluvené) okamžitě, což znamená, že uživatelé mohou také znovu vrátit dříve zadané hodnoty.

Potřebovali jsme poslat žádost uživatele zadaného do Chatbot UI přes API JSON REST API k externímu serveru projektu projektu.

v Rivescript-js. Máme možnost využít XMLHTTPREQUEST. Objekt pro odeslání požadavku téměř současně, protože data zadána uživatelem:

 & gt; Příjem objektu JavaScript.
 VAR http = nová xmlhttprequest ();

 var a = rs.GetUServar (rs.currentuser (), "oblasti");
 var b = rs.GetUServar (rs.currentuser (), "kdy");
 var c = rs.getuservar (rs.currentuser (), "rozpočet");
 var d = rs.GetUServar (rs.currentuser (), "projekt");
 var e = rs.getuservar (rs.currentuser (), "reference");

 VAR URL = "http: // localhost: 3000 / poslat";

 var params = "oblasti =" + a + "& amp; když =" + b + "&" rozpočet = "+ c +" & "pro Ject =" + D + "& AMP; Reference =" + E;
 console.log (params);

 http.Open ("post", url, true);

 http.setrequestheader ("Content-Type", "Aplikace / X- www-form-urlencoded");
 http.setrequestheader ("připojení", "zavřít");
 http.onreadyStateChange = funkce () {// volání funkce, když se změní stav.
  Pokud (http.readystate == 4 & amp; http.status == 200) {
    Alert (http.Responsetext);
  }
 }
 http.Send (params);

& lt; Objekt

06. Neboj se Chatbot

Brzy, současné způsoby interakce s počítači získat informace, aby získali informace o technologii AI, jako je Chatboty, kde lidé prostě dělají jednoduché hlasové příkazy, jako jsme viděli s tech, jako je Amazon Echo a Google Home.

Společenství webového designu nemusí obávat - všichni bychom měli přijmout přidanou hodnotu této nové technologie.

Mohlo by to být herní měnič pro společnosti, které funguje, nabízí plně škálovatelné služby zákazníkům a zlepšenou inteligenci zákazníků.

Tento článek byl původně uváděn v Čistý časopis Časopis nejprodávanějšího světa pro webové designéry a vývojáře. Přihlásit se zde .

Související články:

Jak se chatboty učí - rozhovor s Giles Colborne
Jak inteligentní web změní naše interakce
Jak konverzační rozhraní inovují bankovnictví

Jak vytvořit chatbotové rozhraní

01. Nastavte osobnost

02. Použijte RivlyScript.

03. Generovat mozek svého bota

04. Navrhněte hlas

05. Žádost podání

06. Neboj se Chatbot

jak - Nejoblíbenější články

Použijte Framer X pro vytvoření interaktivních prototypů

21 kroků k super rychlému javascriptu

Vytvořit webggl 3D přistávací stránka

provést realistické 3d vlasy a kožešiny v 3ds max a v-ray

Barva klasická pohádková scéna s Procreate

Jak malovat zakřivené sklo na vesmírné helmě

Udělejte typografický plakát pomocí Adobe InDesign

Vytvořte jednoduché ilustrace pro web

Kategorie