{"id":44235,"date":"2023-04-12T04:28:03","date_gmt":"2023-04-12T11:28:03","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=44235"},"modified":"2026-03-12T03:12:28","modified_gmt":"2026-03-12T10:12:28","slug":"chat-user-interface-design","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/chat-user-interface-design\/","title":{"rendered":"Chat User Interface Design\u00a0\u2013 A Quick Introduction to Chat UI"},"content":{"rendered":"\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"512\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/04\/Chat-User-Interface-Design-1024x512.png\" alt=\"Chat User Interface Design\" class=\"wp-image-44238\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/04\/Chat-User-Interface-Design-1024x512.png 1024w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/04\/Chat-User-Interface-Design-600x300.png 600w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/04\/Chat-User-Interface-Design-768x384.png 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/04\/Chat-User-Interface-Design.png 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>User-friendly and accessible chat UI design is essential for modern applications, as it significantly impacts the user experience and overall satisfaction with the product or a service. With the right approach and tools, you can create a chat user interface that enhances communication and engagement for your application.<\/p>\n\n\n\n<p>Design accurate prototypes replicating the final messaging app experience, including fully functioning forms and advanced interactivity. <a href=\"https:\/\/www.uxpin.com\/sign-up\" target=\"_blank\" rel=\"noreferrer noopener\">Sign up for a free trial<\/a> to build your first interactive prototype with UXPin.<\/p>\n\n\n\n<section class=\"try-uxpin-banner\">\n    <div class=\"try-uxpin__container\">\n        <div class=\"try-uxpin__left\">\n            <p class=\"try-uxpin__heading\">Build advanced prototypes<\/p>\n            <p class=\"try-uxpin__text\">Design better products with States, Variables, Auto Layout and more.<\/p>\n            <a href=\"https:\/\/www.uxpin.com\/sign-up\" target=\"_blank\" rel=\"noopener\">\n                <button class=\"try-uxpin__button\">Try UXPin<\/button>\n            <\/a>\n        <\/div>\n        <div>\n            <img decoding=\"async\" src=\"https:\/\/uxpin.com\/studio\/wp-content\/themes\/uxpin-juggernaut\/img\/cta-banner-signup.png\" class=\"try-uxpin__image\" alt=\"Try UXPin\">\n        <\/div>\n    <\/div>\n<\/section>\n\n<style>\n.try-uxpin-banner {\n    margin: 40px 0px;\n}\n\n.try-uxpin__container {\n    display: flex;\n    max-width: 689px;\n    height: 210px;\n    padding: 20px;\n    padding-left: 24px;\n    border: 2px solid black;\n    border-radius: 4px;\n    align-items: center;\n    justify-content: space-between;\n    background-color: white;\n    box-shadow: 10px 10px black;\n}\n\n.try-uxpin__left {\n    width: 54%;\n}\n\n\n.try-uxpin__heading {\n    font-size: 28px !important;\n    font-weight: bold;\n}\n\n.try-uxpin__left p {\n    margin: 10px 0px !important;\n    color: black !important;\n}\n\n.try-uxpin__text {\n    margin: 0 !important;\n    font-size: 18px !important;\n    line-height: 22px !important;\n}\n\n.try-uxpin__button {\n    width: 135px;\n    height: 44px;\n    background: black;\n    margin: 10px 0px;\n    padding: 10px 20px;\n    border: none;\n    border-radius: 2px;\n    color: white;\n    font-size: 16px;\n    text-align: center;\n}\n\n.try-uxpin__button:hover {\n    cursor: pointer;\n}\n\n.try-uxpin__image {\n    max-width: 320px !important;\n    height: 200px;\n    margin-right: -21px;\n    margin-bottom: -6px;\n}\n\n@media (max-width: 760px) {\n    .try-uxpin__container {\n        height: auto;\n        margin: 10px;\n        align-items: left;\n    }\n}\n\n@media (max-width: 500px) {\n    .try-uxpin__container {\n        flex-direction: column;\n    }\n\n    .try-uxpin__left {\n        width: 100%;\n        align-items: normal;\n    }\n}\n\n<\/style>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-what-is-chat-ui\">What is Chat UI?<\/h2>\n\n\n\n<p>Chat UI (User Interface) is the design and layout for a chat application. These applications range from peer-to-peer messaging like WhatsApp and Slack to web chat (live chat) between company representatives and users, like Intercom and Zendesk.<\/p>\n\n\n\n<p>Web chat applications are typically found on websites and digital products and enable users to chat with a company representative or leave a message for a response via email.<\/p>\n\n\n\n<p>Web chat UIs have evolved significantly over the last decade and now have many features beyond communication, including documentation, FAQs, and other widgets. Organizations use these chat applications to streamline customer service and give users a user-friendly support experience.<\/p>\n\n\n\n<p>Peer-to-peer chat has also come a long way. People use apps like WhatsApp, Slack, Facebook Messager, and social media DMs for personal and professional conversations, including video calling and the ability to send images, documents, videos, and other attachments.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-chat-app-ui-design-elements-patterns\">Chat App UI Design Elements &amp; Patterns<\/h2>\n\n\n\n<p>Here are some key elements to consider when designing an intuitive, user-friendly chat app.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-input-field\">Input field<\/h3>\n\n\n\n<p>Input fields are vital for chat applications because they allow users to type and send messages. Chat inputs must be easy to access (with both mouse and thumb\/finger) and allow multiline editing. If the text remains on one line, the user can&#8217;t see the entirety of their message for review and editing purposes before sending.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-send-button\">Send button<\/h3>\n\n\n\n<p>The chat app must have a button or icon to send a message. The device&#8217;s keyboard (web or mobile) is also helpful for submission, like the &#8220;Enter&#8221; key on a desktop keyboard, so users don&#8217;t have to reach for their mouse and click &#8220;Send.&#8221;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-message-bubbles\">Message bubbles<\/h3>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"683\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/04\/messenger-alert-group-min-1024x683.jpg\" alt=\"messenger alert group min\" class=\"wp-image-44240\" style=\"width:750px\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/04\/messenger-alert-group-min-1024x683.jpg 1024w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/04\/messenger-alert-group-min-450x300.jpg 450w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/04\/messenger-alert-group-min-768x512.jpg 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/04\/messenger-alert-group-min.jpg 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><a href=\"https:\/\/www.news18.com\/news\/tech\/messenger-app-on-android-and-ios-getting-new-shortcuts-heres-how-it-works-4924721.html\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Source<\/a><\/figcaption><\/figure>\n\n\n\n<p>Message bubbles help users distinguish their message from others. These bubbles are particularly helpful for group chats with multiple users. Apps usually use different colors for the sender and receiver&#8217;s messages so users can differentiate between them.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-timestamps\">Timestamps<\/h3>\n\n\n\n<p>Timestamps indicate the date and time when a message was sent or received. These UI elements are crucial for users to derive timelines, context, and timing and can help resolve disputes.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-avatars\">Avatars<\/h3>\n\n\n\n<p>Avatars or profile pictures had a human touch to chat UIs, reminding users of the person they&#8217;re communicating with. These\u00a0<a href=\"https:\/\/www.adobe.com\/express\/create\/avatar\">avatar generators<\/a>\u00a0are particularly helpful for group chats with many users, as it allows people to differentiate members simply by their avatar, making messages easier to scan. Today, many platforms integrate <a href=\"https:\/\/www.synthesia.io\/post\/best-ai-avatar-generator\">leading AI avatar generators<\/a> to automatically create unique, realistic, or stylized profile images for users<\/p>\n\n\n\n<p><a href=\"https:\/\/www.synthesia.io\/features\/avatars\">Talking digital avatars<\/a> take this a step further by adding voice or animation, creating a more interactive and engaging experience for users<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-typing-indicators\">Typing indicators<\/h3>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"342\" height=\"303\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/04\/chat-indicator-min.png\" alt=\"chat indicator min\" class=\"wp-image-44242\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/04\/chat-indicator-min.png 342w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/04\/chat-indicator-min-339x300.png 339w\" sizes=\"auto, (max-width: 342px) 100vw, 342px\" \/><figcaption class=\"wp-element-caption\"><a href=\"https:\/\/stackoverflow.com\/questions\/45914994\/in-chat-app-how-to-implement-typing-indicator-using-firebase\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Source<\/a><\/figcaption><\/figure>\n\n\n\n<p>Typing indicators tell users when someone is entering a message. These UI elements are helpful if the user is expecting a reply or to avoid sending multiple messages simultaneously.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-error-handling-for-chat-user-interface-design\">Error Handling for Chat User Interface Design<\/h2>\n\n\n\n<p>Error handling is crucial for chat UIs. It lets users know when something is wrong and how to fix it. These error messages can also avoid misunderstandings and conflicts. For example, imagine you send an important message, and it fails to send, but the app doesn&#8217;t inform you.<\/p>\n\n\n\n<p>Here are some tips for UX designers regarding error handling for chat UIs:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Appropriate placement:<\/strong> Position error messages close to relevant <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/user-interface-elements-every-designer-should-know\/\" target=\"_blank\" rel=\"noreferrer noopener\">UI elements<\/a> so users can identify the issue. For example, a bold red exclamation mark and failed error message draw attention to the bubble that didn&#8217;t get sent.<\/li>\n\n\n\n<li><strong>Actionable feedback:<\/strong> Provide <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/what-is-ux-writing\/\" target=\"_blank\" rel=\"noreferrer noopener\">clear instructions<\/a> about the failure and its cause. For example, &#8220;Unable to send! Poor network connection&#8221; informs users there may be an issue with their WiFi or data.<\/li>\n\n\n\n<li><strong>Retry mechanisms:<\/strong> Implement functionality for users to fix a problem quickly, i.e., offering a <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/button-design\/\" target=\"_blank\" rel=\"noreferrer noopener\">&#8220;Resend&#8221; button<\/a> next to the error to avoid retyping the message.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-designing-chat-uis-for-chatbots\">Designing Chat UIs for Chatbots<\/h2>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"301\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/05\/testing-user-behavior-prototype-interaction.png\" alt=\"testing user behavior prototype interaction\" class=\"wp-image-35213\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/05\/testing-user-behavior-prototype-interaction.png 750w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/05\/testing-user-behavior-prototype-interaction-700x281.png 700w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-set-clear-expectations\">Set clear expectations<\/h3>\n\n\n\n<p>Inform users that they&#8217;re talking to a chatbot immediately with its purpose, capabilities, and limitations so they understand what to expect. There&#8217;s nothing more frustrating than typing a long message only to be greeted by a chatbot that can&#8217;t understand the problem.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-quick-responses-and-actions\">Quick responses and actions<\/h3>\n\n\n\n<p>Offer suggestions, prompts, and examples to help users navigate the conversation and fully leverage the <a href=\"https:\/\/sleekflow.io\/blog\/chatbot\" target=\"_blank\" rel=\"noreferrer noopener\">chatbot&#8217;s capabilities<\/a>. For example, instead of &#8220;how can I help you?&#8221; provide a list of categories to narrow down the user&#8217;s problem and offer suggestions within each category to get a solution faster with as little typing required as possible.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-create-a-conversational-flow\">Create a conversational flow<\/h3>\n\n\n\n<p>Design the conversational flow to feel natural and engaging, like the user is speaking with another human. AI models like <a href=\"https:\/\/openai.com\/product\/gpt-4\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">ChatGPT<\/a> and <a href=\"https:\/\/www.ibm.com\/watson\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">IBM&#8217;s Watson<\/a> are excellent at mimicking conversational flow and providing succinct, helpful responses.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-ask-for-feedback\">Ask for feedback<\/h3>\n\n\n\n<p><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/best-design-feedback-tools\/\" target=\"_blank\" rel=\"noreferrer noopener\">Feedback<\/a> can help enhance chatbot experiences and refine language models. Ask users to review the chatbot&#8217;s performance and report issues at the end of the conversation to iterate and improve its functionality and user experience.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-chat-ui-design-accessibility\">Chat UI Design Accessibility<\/h2>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"301\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/02\/accessibility.png\" alt=\"accessibility\" class=\"wp-image-33901\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/02\/accessibility.png 750w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/02\/accessibility-700x281.png 700w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/figure>\n\n\n\n<p><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/8-website-accessibility-best-practices-to-improve-ux\/\" target=\"_blank\" rel=\"noreferrer noopener\">Accessibility<\/a> is vital for designing inclusive chat user interfaces that accommodate users with various disabilities, including visual, auditory, cognitive, and motor impairments.<\/p>\n\n\n\n<p>Here are some guidelines for designing accessible chat user interfaces:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Support for assistive technologies:<\/strong> The first step is to ensure chat UIs are compatible with assistive technologies, including screen readers, magnifiers, and <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/voice-user-interface\/\" target=\"_blank\" rel=\"noreferrer noopener\">speech recognition software<\/a>, so that <strong>all users<\/strong> can engage in conversations.<\/li>\n\n\n\n<li><strong>Use high-contrast colors:<\/strong> Choose colors that create sufficient contrast for users with visual impairments or color blindness to read text. UXPin offers <a href=\"https:\/\/www.uxpin.com\/docs\/editor\/accessibility-features\/\" target=\"_blank\" rel=\"noreferrer noopener\">built-in accessibility tools<\/a> to help designers test UIs on the fly without leaving the design canvas.<\/li>\n\n\n\n<li><strong>Use legible text:<\/strong> <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/website-design-for-scannability\/\" target=\"_blank\" rel=\"noreferrer noopener\">Legibility<\/a> is vital for chat UIs. Designers must choose a readable typeface with sufficient text size. Using native fonts is the best option to avoid readability issues.<\/li>\n\n\n\n<li><strong>Keyboard navigation:<\/strong> Ensure that users can operate and navigate chat UIs using their keyboard. This functionality helps <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/8-website-accessibility-best-practices-to-improve-ux\/\" target=\"_blank\" rel=\"noreferrer noopener\">users with cognitive disabilities<\/a> and makes it easier for screen readers to use chat UIs.<\/li>\n\n\n\n<li><strong>ARIA (Accessible Rich Internet Applications):<\/strong> Utilize ARIA attributes to provide context and information for users who rely on assistive technologies.<\/li>\n\n\n\n<li><strong>Clear and concise instructions:<\/strong> Provide users with straightforward instructions and <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/content-design-system\/\" target=\"_blank\" rel=\"noreferrer noopener\">use plain language for labels<\/a>. For example, there&#8217;s no need to get creative with naming the &#8220;Send&#8221; button, as this will confuse people.<\/li>\n\n\n\n<li><strong>Offer customization:<\/strong> Allow users to <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/how-to-customize-ui-patterns-for-the-perfect-fit\/\" target=\"_blank\" rel=\"noreferrer noopener\">customize chat UIs<\/a>, most importantly text size, font (serif or sans serif), and color schemes so they can adapt the interface to meet their preferences.<\/li>\n\n\n\n<li><strong>Touch target size:<\/strong> Ensure that touch targets for interactive elements are large enough and users with motor impairments can use them.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-frameworks-to-develop-a-chat-ui\">Frameworks to Develop a Chat UI<\/h2>\n\n\n\n<p>Here are popular tools and frameworks product teams can use to develop chat user interfaces with less effort.<\/p>\n\n\n\n<p>Many of these <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/storybook-frameworks-build-component-libraries\/\" target=\"_blank\" rel=\"noreferrer noopener\">frameworks<\/a> are compatible with UXPin Merge, meaning designers can import the code components into UXPin&#8217;s design editor for prototyping and testing with end-users.<\/p>\n\n\n\n<p><em>Learn more about <\/em><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/code-to-design-guide\/\" target=\"_blank\" rel=\"noreferrer noopener\"><em>code-to-design product development<\/em><\/a><em> and how to get started.<\/em><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-gifted-chat\">Gifted Chat<\/h3>\n\n\n\n<p><a href=\"https:\/\/github.com\/FaridSafi\/react-native-gifted-chat\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Gifted chat<\/a> is a <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/react-native-vs-reactjs\/\" target=\"_blank\" rel=\"noreferrer noopener\">React Native<\/a> app UI kit for web and mobile chat applications. The comprehensive solution includes customizable UI components and features, including avatars, timestamps, UI templates, and other essential chat interface elements.<\/p>\n\n\n\n<p>React Native is compatible with UXPin Merge through the <a href=\"https:\/\/www.uxpin.com\/merge\/storybook-integration\" target=\"_blank\" rel=\"noreferrer noopener\">Storybook Integration<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-react-chat-ui\">React-Chat-UI<\/h3>\n\n\n\n<p>React-Chat-UI is a <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/react-native-vs-reactjs\/\" target=\"_blank\" rel=\"noreferrer noopener\">ReactJS<\/a> chat UI library with customizable components for building and scaling chat applications.<\/p>\n\n\n\n<p>ReactJS is compatible with UXPin Merge through the <a href=\"https:\/\/www.uxpin.com\/merge\/storybook-integration\" target=\"_blank\" rel=\"noreferrer noopener\">Storybook<\/a> and <a href=\"https:\/\/www.uxpin.com\/merge\/git-integration\" target=\"_blank\" rel=\"noreferrer noopener\">Git Integration<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-vue-advanced-chat\">Vue-advanced-chat<\/h3>\n\n\n\n<p><a href=\"https:\/\/github.com\/antoine92190\/vue-advanced-chat\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Vue-advanced-chat<\/a> is compatible with all Javascript frameworks, most notably Vue, Angular, and React. The comprehensive chat UI library includes advanced features like featuring message threading, file uploads, <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/internationalization-vs-localization-in-app-design\/\" target=\"_blank\" rel=\"noreferrer noopener\">internationalization<\/a>, and more.<\/p>\n\n\n\n<p>Vue, Angular, and React are compatible with UXPin Merge through the <a href=\"https:\/\/www.uxpin.com\/merge\/storybook-integration\" target=\"_blank\" rel=\"noreferrer noopener\">Storybook Integration<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-how-to-design-a-chat-user-interface\">How to Design a Chat User Interface<\/h2>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"300\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/05\/design-prototyping-collaboration-interaction.png\" alt=\"design prototyping collaboration interaction\" class=\"wp-image-35209\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/05\/design-prototyping-collaboration-interaction.png 750w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/05\/design-prototyping-collaboration-interaction-700x280.png 700w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/figure>\n\n\n\n<p>Here is a simple <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-frameworks\/\" target=\"_blank\" rel=\"noreferrer noopener\">design framework<\/a> for developing a chat interface.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-research-and-analysis\">Research and analysis<\/h3>\n\n\n\n<p>Start by <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/ux-research-plan\/\" target=\"_blank\" rel=\"noreferrer noopener\">defining your target<\/a> and their needs. If you&#8217;re designing a web chat interface, you&#8217;ll have two primary users, each with different needs, the chat host (customer service representative) and the end user.<\/p>\n\n\n\n<p>You&#8217;ll also need to determine whether this is a mobile or web app. If you&#8217;re designing a <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/cross-platform-experience\/\" target=\"_blank\" rel=\"noreferrer noopener\">cross-platform application<\/a>, you&#8217;ll need desktop and native (<a href=\"https:\/\/www.uxpin.com\/studio\/blog\/ios-vs-andoid-ui-design-for-mobile\/\" target=\"_blank\" rel=\"noreferrer noopener\">iOS or Android<\/a>) chat UI elements, which will require prototyping and testing multiple screen sizes and operating systems.<\/p>\n\n\n\n<p>Once you know who you&#8217;re building your chat UI for, you can list the <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-review-template-balancing-desirability-viability-feasibility\/\" target=\"_blank\" rel=\"noreferrer noopener\">key requirements and features<\/a>. Studying <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/user-analysis\/\" target=\"_blank\" rel=\"noreferrer noopener\">competitors<\/a> and seeing how they use design patterns, solve usability issues, and implement error messages is also a good idea.<\/p>\n\n\n\n<p>Meeting with developers and discussing the chat app&#8217;s technical requirements is critical. Are you designing from scratch, using one of the above frameworks, or using an <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/top-react-component-libraries\/\" target=\"_blank\" rel=\"noreferrer noopener\">open-source component library<\/a> like <a href=\"https:\/\/www.uxpin.com\/merge\/mui-library\" target=\"_blank\" rel=\"noreferrer noopener\">MUI<\/a> or <a href=\"https:\/\/www.uxpin.com\/merge\/fluent-ui-library\" target=\"_blank\" rel=\"noreferrer noopener\">Fluent UI<\/a>?<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-sketching-and-wireframing\">Sketching and wireframing<\/h3>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"300\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/11\/prototyping-paper-pencil-lo-fi.png\" alt=\"prototyping paper pencil lo fi\" class=\"wp-image-32492\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/11\/prototyping-paper-pencil-lo-fi.png 750w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/11\/prototyping-paper-pencil-lo-fi-700x280.png 700w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/figure>\n\n\n\n<p>Use your UX research to guide the design process. Sketch your wireframe layouts and <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/paper-prototyping-the-practical-beginners-guide\/\" target=\"_blank\" rel=\"noreferrer noopener\">create paper prototypes<\/a> to explore different <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/creating-perfect-user-flows-for-smooth-ux\/\" target=\"_blank\" rel=\"noreferrer noopener\">user flows<\/a>.<\/p>\n\n\n\n<p>Share your wireframes with stakeholders for <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/feedback-loops-in-design\/\">feedback<\/a> and <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-iteration-process\/\" target=\"_blank\" rel=\"noreferrer noopener\">iterate<\/a> until you have a paper prototype incorporating the UI elements and features your chat UI needs.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-digital-wireframes-and-mockups\">Digital wireframes and mockups<\/h3>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"300\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/11\/lo-fi-prototyping-wireframe_1.png\" alt=\"lo fi prototyping wireframe 1\" class=\"wp-image-32258\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/11\/lo-fi-prototyping-wireframe_1.png 750w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/11\/lo-fi-prototyping-wireframe_1-700x280.png 700w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/figure>\n\n\n\n<p>Convert your paper prototypes to digital wireframes to test basic interactivity and navigation. <a href=\"https:\/\/www.uxpin.com\/wireframing\" target=\"_blank\" rel=\"noreferrer noopener\">Digital wireframing<\/a> is also helpful for designing each chat screen&#8217;s structure and the project&#8217;s information architecture.<\/p>\n\n\n\n<p>Once you have completed the wireframing process, add your content, typography, and color to <a href=\"https:\/\/www.uxpin.com\/mockups\" target=\"_blank\" rel=\"noreferrer noopener\">create high-fidelity mockups<\/a> resembling the final aesthetic, notably:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Background, chat bubbles, and text colors\u2013what color scheme will you use, and how do the colors contrast for readability?<\/li>\n\n\n\n<li>It&#8217;s also crucial to consider how emojis, GIFS, and other graphics will render in your chat bubbles and whether the colors mask these elements.<\/li>\n\n\n\n<li>Conduct accessibility tests for <a href=\"https:\/\/www.uxpin.com\/docs\/editor\/accessibility-features\/#contrast-checker\" target=\"_blank\" rel=\"noreferrer noopener\">color contrast<\/a> and <a href=\"https:\/\/www.uxpin.com\/docs\/editor\/accessibility-features\/#color-blindness-simulator\" target=\"_blank\" rel=\"noreferrer noopener\">color blindness<\/a> to ensure users with visual impairments can read \u200cchat messages.<\/li>\n\n\n\n<li>Test your mockups in light and dark modes to ensure the UI elements, error messages, and content remain visible.<\/li>\n\n\n\n<li>Remember to design mockups for desktop and mobile app notifications and consider how these will render on multiple devices and operating systems.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-prototyping-usability-testing\">Prototyping &amp; usability testing<\/h3>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"301\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/03\/testing-observing-user-behavior-1.png\" alt=\"testing observing user behavior 1\" class=\"wp-image-32153\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/03\/testing-observing-user-behavior-1.png 750w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/03\/testing-observing-user-behavior-1-700x281.png 700w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/figure>\n\n\n\n<p>Chat UIs require a lot of interactivity and data capture from inputs\u2013functionality you can&#8217;t get with image-based tools like <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/interactive-figma-designs\/\" target=\"_blank\" rel=\"noreferrer noopener\">Figma<\/a> or <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/bring-sketch-files-life-iteration-iteration\/\" target=\"_blank\" rel=\"noreferrer noopener\">Sketch<\/a>. UXPin is a code-based design tool, meaning UI elements function in prototypes as in the final product.<\/p>\n\n\n\n<p>Designers can build a fully functioning chat UI, allowing users to send and receive messages for a realistic prototyping experience. These advanced prototypes also provide stakeholders with an accurate representation of design concepts, so they can provide meaningful, actional feedback to iterate and improve.<\/p>\n\n\n\n<p>You must also conduct accessibility tests to ensure the prototype passes <a href=\"https:\/\/www.w3.org\/TR\/WCAG20\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Web Content Accessibility Guidelines<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-design-handoff\">Design handoff<\/h3>\n\n\n\n<p>Prepare your prototypes, mockups, and documentation to hand off to developers. UXPin&#8217;s <a href=\"https:\/\/www.uxpin.com\/docs\/sharing\/spec-mode\/\" target=\"_blank\" rel=\"noreferrer noopener\">Spec Mode<\/a> provides devs with an intuitive user interface to <a href=\"https:\/\/www.uxpin.com\/docs\/sharing\/spec-mode\/#inspecting-properties\" target=\"_blank\" rel=\"noreferrer noopener\">inspect element properties<\/a>, <a href=\"https:\/\/www.uxpin.com\/docs\/sharing\/spec-mode\/#distance-measurement\" target=\"_blank\" rel=\"noreferrer noopener\">measure distances<\/a>, <a href=\"https:\/\/www.uxpin.com\/docs\/sharing\/documentation\/\" target=\"_blank\" rel=\"noreferrer noopener\">review documentation<\/a>, read the <a href=\"https:\/\/www.uxpin.com\/docs\/sharing\/spec-mode\/#style-guide\" target=\"_blank\" rel=\"noreferrer noopener\">style guide<\/a>, and download assets.<\/p>\n\n\n\n<p>Teams can also collaborate using <a href=\"https:\/\/www.uxpin.com\/docs\/sharing\/comments\/#comments-on-preview\" target=\"_blank\" rel=\"noreferrer noopener\">UXPin&#8217;s Comments<\/a>, tag\/mention team members, and assign comments as actionable tasks they can resolve once completed.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-chat-app-design-with-uxpin\">Chat App Design with UXPin<\/h2>\n\n\n\n<p>Create a real-world chat app prototype using UXPin&#8217;s advanced prototyping features.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Use advanced components from built-in libraries <a href=\"https:\/\/www.uxpin.com\/merge\/mui-library\" target=\"_blank\" rel=\"noreferrer noopener\">MUI<\/a> or <a href=\"https:\/\/www.uxpin.com\/merge\/fluent-ui-library\" target=\"_blank\" rel=\"noreferrer noopener\">Fluent UI<\/a>, including date pickers, data visualizations, dropdown menus, and more.<\/li>\n\n\n\n<li>Connect external apps and services using the IFTTT API.<\/li>\n\n\n\n<li>Create dynamic interactivity with UXPin&#8217;s <a href=\"https:\/\/www.uxpin.com\/docs\/editor\/states\" target=\"_blank\" rel=\"noreferrer noopener\">States<\/a>, <a href=\"https:\/\/www.uxpin.com\/docs\/editor\/interactions\/\" target=\"_blank\" rel=\"noreferrer noopener\">Interactions<\/a>, <a href=\"https:\/\/www.uxpin.com\/docs\/editor\/variables\/\" target=\"_blank\" rel=\"noreferrer noopener\">Variables<\/a>, and <a href=\"https:\/\/www.uxpin.com\/docs\/editor\/expressions\/\" target=\"_blank\" rel=\"noreferrer noopener\">Expressions<\/a>.<\/li>\n\n\n\n<li>Add <a href=\"https:\/\/www.uxpin.com\/docs\/editor\/data-and-content\/#generate-data-from-google-sheets\">real data<\/a> from Google Sheets, CSV, or JSON files.<\/li>\n<\/ul>\n\n\n\n<p>Design your chat user interface using the world&#8217;s most sophisticated design tool.  <a href=\"https:\/\/www.uxpin.com\/sign-up\" target=\"_blank\" rel=\"noreferrer noopener\">Sign up for a free trial<\/a> to build your first chat prototype.<\/p>\n\n\n\n<div class=\"wp-block-button is-style-fill\"><center><a class=\"btn btn-flat btn-large btn-content-width\" href=\"https:\/\/www.uxpin.com\/sign-up\" target=\"_blank\" rel=\"noopener\">Try UXPin for free<\/a><\/center><\/div>\n","protected":false},"excerpt":{"rendered":"<p>User-friendly and accessible chat UI design is essential for modern applications, as it significantly impacts the user experience and overall satisfaction with the product or a service. With the right approach and tools, you can create a chat user interface that enhances communication and engagement for your application. Design accurate prototypes replicating the final messaging<\/p>\n","protected":false},"author":3,"featured_media":44238,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,4],"tags":[],"class_list":["post-44235","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-ui-design"],"yoast_title":"","yoast_metadesc":"Read our tips on Chat UI design and create an interactive prototype of a chat experience. Here's everything you need to know.","acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.4 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Chat User Interface Design\u00a0\u2013 A Quick Introduction to Chat UI | UXPin<\/title>\n<meta name=\"description\" content=\"Read our tips on Chat UI design and create an interactive prototype of a chat experience. Here&#039;s everything you need to know.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.uxpin.com\/studio\/blog\/chat-user-interface-design\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Chat User Interface Design\u00a0\u2013 A Quick Introduction to Chat UI\" \/>\n<meta property=\"og:description\" content=\"Read our tips on Chat UI design and create an interactive prototype of a chat experience. Here&#039;s everything you need to know.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.uxpin.com\/studio\/blog\/chat-user-interface-design\/\" \/>\n<meta property=\"og:site_name\" content=\"Studio by UXPin\" \/>\n<meta property=\"article:published_time\" content=\"2023-04-12T11:28:03+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-03-12T10:12:28+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/04\/Chat-User-Interface-Design.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"600\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"UXPin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@uxpin\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"UXPin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"11 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/chat-user-interface-design\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/chat-user-interface-design\\\/\"},\"author\":{\"name\":\"UXPin\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\"},\"headline\":\"Chat User Interface Design\u00a0\u2013 A Quick Introduction to Chat UI\",\"datePublished\":\"2023-04-12T11:28:03+00:00\",\"dateModified\":\"2026-03-12T10:12:28+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/chat-user-interface-design\\\/\"},\"wordCount\":2019,\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/chat-user-interface-design\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2023\\\/04\\\/Chat-User-Interface-Design.png\",\"articleSection\":[\"Blog\",\"UI Design\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/chat-user-interface-design\\\/\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/chat-user-interface-design\\\/\",\"name\":\"Chat User Interface Design\u00a0\u2013 A Quick Introduction to Chat UI | UXPin\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/chat-user-interface-design\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/chat-user-interface-design\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2023\\\/04\\\/Chat-User-Interface-Design.png\",\"datePublished\":\"2023-04-12T11:28:03+00:00\",\"dateModified\":\"2026-03-12T10:12:28+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\"},\"description\":\"Read our tips on Chat UI design and create an interactive prototype of a chat experience. Here's everything you need to know.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/chat-user-interface-design\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/chat-user-interface-design\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/chat-user-interface-design\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2023\\\/04\\\/Chat-User-Interface-Design.png\",\"contentUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2023\\\/04\\\/Chat-User-Interface-Design.png\",\"width\":1200,\"height\":600,\"caption\":\"Chat User Interface Design\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/chat-user-interface-design\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Chat User Interface Design\u00a0\u2013 A Quick Introduction to Chat UI\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\",\"name\":\"Studio by UXPin\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\",\"name\":\"UXPin\",\"description\":\"UXPin is a web-based design collaboration tool. We\u2019re pleased to share our knowledge here.\",\"sameAs\":[\"http:\\\/\\\/www.uxpin.com\",\"https:\\\/\\\/x.com\\\/@uxpin\"],\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/author\\\/hello\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Chat User Interface Design\u00a0\u2013 A Quick Introduction to Chat UI | UXPin","description":"Read our tips on Chat UI design and create an interactive prototype of a chat experience. Here's everything you need to know.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.uxpin.com\/studio\/blog\/chat-user-interface-design\/","og_locale":"en_US","og_type":"article","og_title":"Chat User Interface Design\u00a0\u2013 A Quick Introduction to Chat UI","og_description":"Read our tips on Chat UI design and create an interactive prototype of a chat experience. Here's everything you need to know.","og_url":"https:\/\/www.uxpin.com\/studio\/blog\/chat-user-interface-design\/","og_site_name":"Studio by UXPin","article_published_time":"2023-04-12T11:28:03+00:00","article_modified_time":"2026-03-12T10:12:28+00:00","og_image":[{"width":1200,"height":600,"url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/04\/Chat-User-Interface-Design.png","type":"image\/png"}],"author":"UXPin","twitter_card":"summary_large_image","twitter_creator":"@uxpin","twitter_misc":{"Written by":"UXPin","Est. reading time":"11 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.uxpin.com\/studio\/blog\/chat-user-interface-design\/#article","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/chat-user-interface-design\/"},"author":{"name":"UXPin","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e"},"headline":"Chat User Interface Design\u00a0\u2013 A Quick Introduction to Chat UI","datePublished":"2023-04-12T11:28:03+00:00","dateModified":"2026-03-12T10:12:28+00:00","mainEntityOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/chat-user-interface-design\/"},"wordCount":2019,"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/chat-user-interface-design\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/04\/Chat-User-Interface-Design.png","articleSection":["Blog","UI Design"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.uxpin.com\/studio\/blog\/chat-user-interface-design\/","url":"https:\/\/www.uxpin.com\/studio\/blog\/chat-user-interface-design\/","name":"Chat User Interface Design\u00a0\u2013 A Quick Introduction to Chat UI | UXPin","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/chat-user-interface-design\/#primaryimage"},"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/chat-user-interface-design\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/04\/Chat-User-Interface-Design.png","datePublished":"2023-04-12T11:28:03+00:00","dateModified":"2026-03-12T10:12:28+00:00","author":{"@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e"},"description":"Read our tips on Chat UI design and create an interactive prototype of a chat experience. Here's everything you need to know.","breadcrumb":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/chat-user-interface-design\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.uxpin.com\/studio\/blog\/chat-user-interface-design\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.uxpin.com\/studio\/blog\/chat-user-interface-design\/#primaryimage","url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/04\/Chat-User-Interface-Design.png","contentUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/04\/Chat-User-Interface-Design.png","width":1200,"height":600,"caption":"Chat User Interface Design"},{"@type":"BreadcrumbList","@id":"https:\/\/www.uxpin.com\/studio\/blog\/chat-user-interface-design\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.uxpin.com\/studio\/"},{"@type":"ListItem","position":2,"name":"Chat User Interface Design\u00a0\u2013 A Quick Introduction to Chat UI"}]},{"@type":"WebSite","@id":"https:\/\/www.uxpin.com\/studio\/#website","url":"https:\/\/www.uxpin.com\/studio\/","name":"Studio by UXPin","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.uxpin.com\/studio\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e","name":"UXPin","description":"UXPin is a web-based design collaboration tool. We\u2019re pleased to share our knowledge here.","sameAs":["http:\/\/www.uxpin.com","https:\/\/x.com\/@uxpin"],"url":"https:\/\/www.uxpin.com\/studio\/author\/hello\/"}]}},"_links":{"self":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/44235","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/comments?post=44235"}],"version-history":[{"count":8,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/44235\/revisions"}],"predecessor-version":[{"id":58492,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/44235\/revisions\/58492"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media\/44238"}],"wp:attachment":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media?parent=44235"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/categories?post=44235"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/tags?post=44235"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}