On this page, we will specify what kind of information must specifically be on each page. It is up to you to then update the ones we provide. The files are under sic_framework/services/webserver/templates.
Start Page
The Start Page is the initial screen users see before interacting with the conversational agent. It provides context and allows the user to initiate the conversation. Here's what it should include:
1. Purpose
Introduces the user to the conversational agent.
Sets the stage for interaction by explaining what the agent can do.
Provides a clear way for the user to begin the conversation.
2. Core Layout
The page should have four main parts:
Title:
A prominent heading to grab the user’s attention.
Example: "Welcome to YourAgentName!"
Introductory Text:
Briefly explains the purpose of the agent.
Example: "You are about to interact with our agent, YourAgentName. It can help you find a recipe to your taste."
Instruction Text:
Provides a simple and clear instruction for the user.
Example: "When you're ready, press the Start button below to begin."
Start Button:
A button labeled "Start" that allows the user to begin the conversation.
Positioned clearly and styled to stand out.
3. Visual Hierarchy
Title: At the top, bold and centered to draw immediate attention.
Text: Below the title, informative but concise, to set expectations.
Instruction: Positioned above the button, clearly visible and easy to understand.
Button: Large and centrally placed to ensure it’s the main call-to-action.
4. Additional Information
The start page can also provide additional optional information, such as:
A short description of the agent's functionality.
Any instructions or disclaimers for using the agent.
Key Takeaways
The start page is simple but functional, ensuring users know what to expect and providing them with an easy way to begin their interaction. It sets the tone for the user experience while focusing on clarity and usability.
Welcome Page
Summary: What Should Be on the Welcome Page
The Welcome Page is displayed after the user clicks the "Start" button on the Start Page and serves to greet the user and transition them into actively interacting with the conversational agent.
1. Purpose
Provides a welcoming message for the user.
Introduces the conversational agent.
Prepares the user to begin speaking with the agent via a microphone icon.
Ensures the user transitions naturally into a conversational mode without needing buttons to navigate further.
2. Core Layout
The page should have three main parts:
Title/Greeting:
A friendly message to greet the user, such as "Welcome!" or "Hello there!"
Optionally include the agent's name (e.g., "I’m YourAgentName, here to help you!").
If the agent’s name is not available, provide a fallback message (e.g., "Welcome to your personal assistant!").
Introduction Text:
A short description of the agent’s capabilities or purpose.
Example: "I’m here to assist you in finding the perfect recipe. Let’s get started!"
Microphone Icon:
A prominent microphone icon that signals the user can start talking.
Clicking the icon activates the microphone and begins the interaction.
Avoid adding any buttons for navigation; progression should be via voice interaction.
3. Visual Hierarchy
Title/Greeting: Placed prominently at the top, bold and centered for immediate visibility.
Text: Below the greeting, concise and informative.
Microphone Icon: Large and centered below the text, acting as the primary call-to-action.
4. Additional Features
Styling: Make the page inviting with clean design elements and spacing. Use colors and fonts that create a friendly and approachable tone.
Fallbacks: Handle cases where the agent’s name is not set, ensuring a default greeting is always shown.
Interactive Elements: The microphone icon should be easy to find and visually engaging to encourage interaction.
Key Takeaways
The Welcome Page serves as the bridge between the user’s initiation of the conversation and the agent’s active engagement. It sets a friendly tone, introduces the agent, and makes it clear that the user can begin speaking to the agent immediately by interacting with the microphone icon. Keep the design simple, clear, and welcoming.
Recipe Overview 1
The Recipe Overview Page is designed to help users engage with the agent about finding recipes that match their preferences. Its purpose is to initiate the recipe selection process and provide feedback on the user’s requests and filters.
1. Purpose
Serves as the central interaction page for recipe recommendations.
Displays the user's active filters and allows them to refine their preferences.
Provides a microphone button for the user to communicate with the agent.
Keeps the user informed about the recipe selection process (e.g., whether more filtering is needed).
2. Core Layout
The page should have three main components:
Title/Heading:
A prominent heading that invites the user to start engaging with the recipe selection task.
Example: "What recipe are you looking for?"
User Filters:
A section that displays the user's active filters or feature requests.
Example: "Filters applied so far: Vegetarian, Less than 30 minutes, Italian cuisine."
Dynamically updates as the user adds or refines their preferences.
Microphone Button:
A microphone icon that allows the user to continue the conversation by speaking to the agent.
This should remain a central and clear call-to-action.
3. Visual Hierarchy
Title: Large and bold at the top of the page.
Filters Section: Positioned below the title and styled to make it easy for the user to review their active filters.
Microphone Button: Positioned prominently, with enough space to make it easy to interact with.
4. Additional Features
Condition for Displaying the Page:
The page should only be shown when the recipe selection pattern is active and when the filtered list of recipes has more than 15 matches.
Instructions:
Optionally include a short message encouraging the user to refine their filters if too many recipes are found.
Example: "Please tell me more about your preferences to narrow down the options."
Dynamic Content:
Show the filters or features the user has applied in a structured and easy-to-read format.
Key Requirements
Minimal Navigation:
The page should not include buttons for navigating away. Interaction should occur via the microphone button.
Dynamic Content Updates:
The displayed filters should reflect the user's requests in real time, pulled from the agent's memory.
Clear and Simple Design:
Use a clean and inviting layout that encourages interaction.
Key Takeaways
The Recipe Recommendation Page is a functional and user-focused interface that connects the user’s spoken preferences with the agent’s filtering capabilities. It must provide clear feedback on the current state of the recipe search while allowing users to refine their search through conversation, keeping interaction intuitive and seamless.