Wireframing Patterns

Product Management User Experience

• A list or table page: A collection of items displayed in a structured format. This pattern is used for browsing, searching, and selecting items.
• A detail page: Zooms in on a single item from a list, providing comprehensive information about that item.
• A form page: Designed for input, enabling users to provide information or make selections. Forms are integral for collecting user data and facilitating interactions.
• A confirmation modal: A speed bump so the user knows what action they are taking.

Some other elements that may come to mind include list objects, detail objects, form objects, modals, etc — but for the basics, this is about it.

That makes it perfect for creating draft specifications with AI Assistants.

All four are very predictable patterns that we can generate data or user stories against, even as a combined prompt. All you really need to do is figure out what data points you need to display—you can even use an AI Assistant to propose that — and then you’re good to go.

Let’s get started.

List Pages and Table Pages

Table pages are the bread and butter of most applications because they efficiently present large datasets in a structured format. They enable users to quickly scan, sort, and filter information, enhancing data comprehension and analysis.

Table pages also facilitate data management tasks like editing, deleting, or adding entries, making them essential for organizing and interacting with complex information within an application’s interface.

Common Features

• Keyword search: This feature allows users to find specific items by typing relevant words or phrases.
• Filters: Filters help users narrow down a list of items based on specific criteria to refine their search.
• Columns: Columns organize data into vertical sections, making it easier to scan and compare different attributes, expecting users to read and analyze information in a structured layout. Some of them are hyperlinked to go to another page, usually a detail page.
• Rows: Rows show data horizontally to display individual records or items. Additionally, they enable actions to be taken on an item.

Other Features

• Addresses: United States street addresses should include a city, state, and ZIP code.
• Dates: Should be formatted as YYYY-MM-DD.
• Phone numbers: Should be formatted as (000) 000-0000.
• Currency: Should be formatted in U.S. currency format.

Table Prompt

Create a table with 10 rows for a customer relationship management system with business development representatives as the user persona. List accounts as the use case. Suggest fields and include long-form addresses and expiration dates as fields. Include fake data that is realistic and ethnically diverse by U.S. standards. Return in table format. List possible filters in table format. List possible keyword search elements in table format. List possible sort elements (ascending, descending) with default sort selected in table format. List possible keyword search elements in table format. Add other functions like adding records, deleting records, managing columns, managing filters, and pagination (25, 50, and 100 rows) as requirements.

Add User Story Prompt

Write this after the above prompt.

Create from the previous answer: user stories for this table in “as a,” “I want to,” “so that I can,” “I’ll know this is done when” format as a list; include all validation as acceptance criteria.

Add Code Prompt

Write this after the above prompts.

Create from the previous answers: accessible HTML that displays this table. Hyperlink the first column.

Detail Pages and Panels

Detail pages provide information about a specific record so the user can understand the entire context. They offer in-depth views of data, allowing users to examine, edit, or interact with individual entries.

They are either a full page or an overlay panel on a table page.

Common Features

• Keyword search: This feature allows users to find specific items by typing relevant words or phrases.
• Filters: Filters help users narrow down a list of items based on specific criteria to refine their search.
• Columns: Columns organize data into vertical sections, making it easier to scan and compare different attributes, expecting users to read and analyze information in a structured layout. Some of them are hyperlinked to go to another page, usually a detail page.
• Rows: Rows show data horizontally to display individual records or items. Additionally, they enable actions to be taken on an item.

Other Features

• Addresses: United States street addresses should include a city, state, and ZIP code.
• Dates: Should be formatted as YYYY-MM-DD.
• Phone numbers: Should be formatted as (000) 000-0000.
• Currency: Should be formatted in U.S. currency format.

Detail Prompt

Create a list with 50 fields organized in five categories for a custom relationship management system with business development representatives as the user persona. List accounts as the use case. Suggest fields and include long-form addresses and expiration dates as a field in proper data format. Include fake data that is realistic and ethnically diverse by U.S. standards. Return in table format.

Add User Story Prompt

Write this after the above prompt.

Create from the previous answer: user stories for this in “as a,” “I want to,” “so that I can,” “I’ll know this is done when” format as a list; include all validation as acceptance criteria.

Add Code Prompt

Write this after the above prompts.

Create from the previous answers: accessible HTML that displays the form; JavaScript that validates data entered by the user, including the validity of all data types.

Form Pages and Panels

Form pages are vital in applications as they allow users to input data. They implement validation rules, guide users through complex processes, and capture essential information.

They are either a full page, a modal, or an overlay panel in a table page.

Common Features

• Form title: The form title is a descriptive heading that identifies the purpose or content of a form and its fields.
• Form fields with descriptions: Fields and descriptions are the form inputs that include explanatory text beneath or alongside each field. This helps users understand what information is required and how to fill out the form correctly, improving usability and reducing errors. Not all fields need descriptions.
• Form field constraints and error messages: The field constraints ensure valid input for form fields, like requiring specific formats or value ranges; one of the best examples is date format. Error messages appear when users violate these rules, guiding them to correct their input.
• Form field types: Form field types define input formats in web forms. Common types include text, text area, password, email, number, checkbox, radio, date, file, and select. They determine data validation, user interaction, and the visual presentation of form elements.

Other Features

Other suggestions I would make are adding fields that might be missed in the first suggestion.

• Addresses: United States street addresses should include a city, state, and ZIP code.
• Dates: Should be formatted as YYYY-MM-DD.
• Phone numbers: Should be formatted as (000) 000-0000.
• Currency: Should be formatted in U.S. currency format.
• States, provinces, and countries: Should be listed as dropdowns.

Form Prompt

Create a form for a customer relationship management system with business development representatives as the user persona. Account management as the use case and with the tasks of entering a new account or updating an account. Suggest fields and include long-form addresses with states and countries as a suggestion. The field name in normal format, field label, field description, placeholder label, field form element, data type, required as yes or no, field minimum length, field maximum length, realistic fake data, and possible error messages in comma-separated format, with each error message in quotes. Return the result in table format.

Add User Story Prompt

Write this after the above prompt.

Create from the previous answer: user stories for this in “as a,” “I want to,” “so that I can,” “I’ll know this is done when” format as a list; include all validation as acceptance criteria.

Add HTML Prompt

Write this after the above prompt.

Create from the previous answers: accessible HTML that displays the form; JavaScript that validates data entered by the user, including the validity of all data types. Include: email validation; phone number conversion to (000) 000-0000 format; date conversion to YYYY-MM-DD format; all state and province values as a single dropdown, U.S. listed first; and country values as dropdown.

Confirmation Modals

Confirmation modals prevent accidental actions by prompting users to verify their intent before executing important or irreversible operations. They are typically used for actions on a table page or a detail page.

Common Features

• Title: Describes the action that will be taken, usually in verb/noun format.
• Copy: Establishes the consequences of an action in an affirmative tone, helping prevent unintended actions.
• Calls to action: This clarifies the user’s choices and guides them toward making informed decisions efficiently.

Modal Prompt

Create a confirmation modal for deleting an account. Create a title in verb/noun format, include a message about the action that is affirmative about the outcome (i.e., without a question), and add appropriate calls to action that are a single word as a verb. The primary action should be last and include language from the title.

Add User Story Prompt

Write this after the above prompt.

Create from the previous answer: user stories for this in “as a,” “I want to,” “so that I can,” “I’ll know this is done when” format as a list; include all validation as acceptance criteria.

Add Code Prompt

Write this after the above prompts.

Create from the previous answers: HTML that displays the confirmation modal, including copy.