...
| Table of Contents | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
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:
...
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 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.
...
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.
Recipe Overview 2
Summary: What Should Be on the Recipe Refinement Page
The Recipe Refinement Page is a continuation of the recipe recommendation process. It provides an overview of the remaining recipes when the list of filtered recipes has narrowed to 15 or fewer. This page helps the user make a final selection from a more manageable set of options.
...
1. Purpose
Displays the remaining recipes in a clear, visual way to help the user choose.
Ensures the page is only shown if:
The list of filtered recipes has 15 or fewer items.
The user is still actively refining or selecting a recipe.
...
2. Core Layout
The page should have three main components:
Heading:
A clear and prominent heading that informs the user about the narrowed-down recipe list.
Example: "I have found the following recipes that you might like!"
Filters Overview:
Displays the user's active filters or preferences in an easy-to-read format.
Example: Tags or cards summarizing filters like "With rice," "With ginger," etc.
Recipe Cards:
Shows the titles, images, and brief descriptions of the remaining recipes.
Each recipe card should be clickable or interactive to allow the user to select one.
Ensure the cards are visually appealing and easy to differentiate.
...
3. Visual Hierarchy
Heading: At the top, large and bold for immediate clarity.
Filters Overview: Positioned below the heading, styled as tags or cards for quick scanning.
Recipe Cards: Below the filters, arranged in a grid layout to showcase all remaining recipes neatly.
...
4. Additional Features
Dynamic Content:
The recipes displayed should dynamically reflect the current filtered list (15 or fewer).
Each card should include:
Recipe title.
Recipe image.
Optional brief description or taglines.
Styling:
Use modern, clean design elements like cards for recipes.
Add hover effects or clickable behavior to recipe cards for interactivity.
No Manual Navigation:
The page should rely solely on user actions (e.g., recipe card selection) or conversational patterns to progress.
...
Key Requirements
Show Remaining Recipes:
Clearly present the final set of recipes that match the user's preferences.
Interactive Recipe Selection:
Allow users to choose a recipe visually and intuitively through the recipe cards.
Dynamic Display:
Ensure the page only appears under the defined conditions (≤15 filtered recipes).
...
Key Takeaways
The Recipe Refinement Page is a visually driven interface designed to help users make a final recipe choice. By focusing on dynamic content, interactivity, and clarity, the page ensures an engaging and intuitive experience as the user interacts with the agent.