De meeste chatbotinterfaces delen dezelfde onderdelen: een invoergebied, een berichtenreeks en bedieningselementen voor elk bericht. Het verschil tussen een goede en een frustrerende chatbot zit vooral in de details van die onderdelen en hun status.
Begin met de lege staat. Een leeg scherm met een tekstvak geeft geen idee wat de bot kan doen. Voeg een korte beschrijving toe en drie of vier voorbeeldprompts waarop mensen kunnen tikken.
Zorg ervoor dat de draad gemakkelijk leesbaar is. Houd de berichtbreedte comfortabel om te lezen, scheid gebruikers- en AI-berichten duidelijk van elkaar, geef opmaak zoals lijsten en code correct weer, en houd het nieuwste bericht in beeld terwijl er nieuwe tekst binnenstroomt, zonder te springen als de persoon naar boven heeft gescrold.
Ontwerp elke staat. Verzenden, bedenken, streamen, klaar, gestopt en mislukt moeten er allemaal anders uitzien. Een denkindicator, vaak een geanimeerd stippenpatroon of bol, vertelt mensen dat het verzoek is ontvangen. Een stopknop tijdens het streamen geeft de controle terug. Fouten moeten aangeven wat er is gebeurd en een nieuwe poging aanbieden.
Voeg besturingselementen toe aan antwoorden: kopieer, genereer, bewerk de vorige prompt en geef feedback. Gebruik voor een stemassistent een duidelijk beeld voor luisteren, denken en spreken, zodat mensen weten wanneer ze moeten praten. ExodeUI, die we maken, heeft gratis geanimeerde orbs voor deze toestanden die draaien in React, Vue, SwiftUI, Flutter en andere frameworks.