icon picker
UX Suggestions

Last edited 45 seconds ago by Alisina Fakhraei.

edison-bulb
In this document, I suggested some enhancements and changes to the UX/UI (mostly UX). First, I started with some general suggestions, then addressed the form setting tabs, and finally, the block setting tabs.

General Suggestions

Icon to show whether changes have been made successfully (a green loading checkmark icon like in the old dashboard).
Icon for Settings under the settings for each block.
A short video, GIF, or link to a YouTube tutorial would be a great and quick way for users to find help.
The spacing between titles, text, and boxes can be improved as well. I won't delve into this issue for now.

Form Settings

Settings

Overall, there is no grouping between the choices here. I would suggest we reorder some of these, put them in different groups, assign them headlines, and maybe make the groups collapsible too:
[]: Meancos the button In
Also, I rephrased some titles.
Form Availability
-------------------
[ ] Activate Form
Start Date: [Date Picker]
End Date: [Date Picker]
Set Timer: [Time Picker]

Language Options
-------------------
Language: [Dropdown]
[ ] Enable Auto Translation

Submission Feedback
-------------------
[ ] Show Tracking Code After Submit
[ ] Show Final Calculation After Submission

Submission Options
-------------------
[ ] Enable Auto Save

Payment Settings
-------------------
[ ] Enable Payments
Currency: [Dropdown]

Security Settings
-------------------
[ ] Limit One Entry Per IP

Redirection
-------------------
[ ] Redirect After Submission
URL: [Text Input]


Design

I did the same grouping re order, and some enhancement to the titles.
[]: Button *: New addition
Form Layout
-------------------
[ ] Standard Form
[ ] One Question Per Page

Display Options
-------------------
[ ] Display Progress Bar
[ ] Display Form Title
[ ] Randomize Field Order
[ ] Randomize Choices
[Reset to Default Button] *

Styling
-------------------
Text Color: [Color Picker]
Answer Color: [Color Picker]
Button Color: [Color Picker]
Button Text Color: [Color Picker]
Background Color: [Color Picker]
[Reset to Default Button] *

Customization
-------------------
Theme: [Dropdown]
Background Image: [File Upload]
Image Brightness: [Slider]
Corner Style: [Option Selector]
Custom CSS: [Text Input]
[Reset to Default Button] *


Additionally, we could add a small [i] icon to each field here. When the user hovers over it, a tutorial GIF plays.
We could also implement icons for every title and choice here, as they serve as great visual cues.

Logic

Field Properties
-------------------
Field Type: [Dropdown] [i]
Options: [Text, Email, Number, Date, Logic, etc.]
(I assume the drop-down icons are supposed to allow users to change the field type directly from here, but I cannot do it. Additionally, there is a refresh icon appearing here, which is misleading)
[ ] Admin-Only [i]

Logic Settings
-------------------
Logic Map: [Button] [i]
(Navigate to the logic map page)
Mini Logic: [Dropdown] [i]
Options: [Always, Conditional, etc.]
(Set simple logic rules)

Advanced Logic
-------------------
Add Rule: [Link] [i]
(Add a new logic rule)
[Advance Logic Button (center-aligned)] [i]
(Set advanced logic rules for this field)

Advanced Settings
-------------------
ID: [Text Input] [i]
Use numbers, letters, and underscores only.
[Reset to Default Button]

Customization
-------------------
[Expand/Collapse Icon] More Options

Field Properties
Title: Changed "Field Type" to "Field Properties".
Dropdown Options: Added more options like "Text, Email, Number, Date, Logic, etc."
Icons: Added information icons ([i]) next to each setting.
Labels: Changed "Make this field Admin-only" to "Admin-Only".
Additional Text: Added the text "(I assume the drop-down icons are supposed to allow users to change the field type directly from here, but I cannot do it. Additionally, there is a refresh icon appearing here, which is misleading)" after the dropdown options.
Logic Settings
Title: Created a new section "Logic Settings".
Logic Map: Changed the toggle button to a regular button with the label "Logic Map" and additional info text "(Navigate to the logic map page)".
Mini Logic: Added a dropdown with the label "Mini Logic" and options "Always, Conditional, etc." with additional info text "(Set simple logic rules)".
Icons: Added information icons ([i]) next to each input field.
Advanced Logic
Title: Created a new section "Advanced Logic".
Add Rule: Added a link with the label "Add Rule" and additional info text "(Add a new logic rule)".
Button Alignment: Center-aligned the "Advance Logic" button and added additional info text "(Set advanced logic rules for this field)".
Advanced Settings
Title: Created a new section "Advanced Settings".
Label: Kept "ID" unchanged.
Help Text: Simplified to "Use numbers, letters, and underscores only".
Reset Button: Added a "Reset to Default" button.
Icons: Added information icons ([i]) next to the input field.

Additional Suggested Options
Conditional Formatting
Purpose: Allow users to set formatting rules based on logic conditions.
Implementation: Add a section for setting conditional formatting.
Conditional Formatting: [Formatting Settings] [i]
(Set formatting rules based on logic conditions)
Logic Debugging
Purpose: Provide users with tools to debug and test their logic rules.
Implementation: Add a button to access logic debugging tools.
Debug Logic: [Button] [i]
(Access tools to debug and test your logic rules)


Notify

Field Properties
-------------------
Field Type: [Dropdown] [i]
Options: [Text, Email, Number, Date, Notify, etc.]
(I assume the drop-down icons are supposed to allow users to change the field type directly from here, but I cannot do it. Additionally, there is a refresh icon appearing here, which is misleading)
[ ] Admin-Only [i]

Notification Settings
-------------------
Send Email to Respondents: [Toggle] [i]
(Enable sending emails to respondents)
Generate PDF of Submission: [Toggle] [i]
(Generate a PDF of the submission for respondents)
Email Template: [Dropdown] [i]
Options: [Default, Custom, etc.]

Admin Notification Settings
-------------------
Receive Email Notifications: [Toggle] [i]
(Enable email notifications for admins)
Generate PDF of Submission: [Toggle] [i]
(Generate a PDF of the submission for admin)
Send Email to: [Text Input] [i]
Enter email addresses separated by space
Forward Submit Email to: [Text Input] [i]
Enter email addresses separated by space
Admin Email Template: [Dropdown] [i]
Options: [Default, Custom, etc.]

Advanced Settings
-------------------
ID: [Text Input] [i]
Use numbers, letters, and underscores only.
[Reset to Default Button]

Customization
-------------------
[Expand/Collapse Icon] More Options

Field Properties
Title: Changed "Field Type" to "Field Properties".
Dropdown Options: Added more options like "Text, Email, Number, Date, Notify, etc."
Icons: Added information icons ([i]) next to each setting.
Labels: Changed "Make this field Admin-only" to "Admin-Only".
Additional Text: Added the text "(I assume the drop-down icons are supposed to allow users to change the field type directly from here, but I cannot do it. Additionally, there is a refresh icon appearing here, which is misleading)" after the dropdown options.
Notification Settings
Title: Created a new section "Notification Settings".
Send Email to Respondents: Added a toggle with the label "Send Email to Respondents" and additional info text "(Enable sending emails to respondents)".
Generate PDF of Submission (Respondents): Added a toggle with the label "Generate PDF of Submission" and additional info text "(Generate a PDF of the submission for respondents)".
Email Template (Respondents): Added a dropdown with the label "Email Template" and options "Default, Custom, etc.".
Admin Notification Settings
Title: Created a new section "Admin Notification Settings".
Receive Email Notifications: Added a toggle with the label "Receive Email Notifications" and additional info text "(Enable email notifications for admins)".
Generate PDF of Submission (Admin): Added a toggle with the label "Generate PDF of Submission" and additional info text "(Generate a PDF of the submission for admin)".
Send Email to: Added a text input with the label "Send Email to" and placeholder "Enter email addresses separated by space".
Forward Submit Email to: Added a text input with the label "Forward Submit Email to" and placeholder "Enter email addresses separated by space".
Admin Email Template: Added a dropdown with the label "Admin Email Template" and options "Default, Custom, etc.".
Advanced Settings
Title: Created a new section "Advanced Settings".
Label: Kept "ID" unchanged.
Help Text: Simplified to "Use numbers, letters, and underscores only".
Reset Button: Added a "Reset to Default" button.
Icons: Added information icons ([i]) next to the input field.

Additional Suggested Options
Email Scheduling
Purpose: Allow users to schedule when the emails are sent.
Implementation: Add a section to set email scheduling options
Email Scheduling: [Scheduling Settings] [i]
(Set when the emails should be sent)

Conditional Email Logic
Purpose: Allow users to set conditions for sending emails based on form responses.
Implementation: Add a section for setting conditional email logic.
Conditional Email Logic: [Logic Settings] [i]
(Set conditions for when emails should be sent based on form responses)


Form Sharing

Field Properties
-------------------
Field Type: [Dropdown] [i]
Options: [Text, Email, Number, Date, Sharing, etc.]
(I assume the drop-down icons are supposed to allow users to change the field type directly from here, but I cannot do it. Additionally, there is a refresh icon appearing here, which is misleading)
[ ] Admin-Only [i]

Access Management
-------------------
Add New Member: [Text Input] [i]
Enter email address
Permissions: [Dropdown] [i]
Options: [Read, Write, Admin]
Add Member: [Button] [i]
(Add new member to access the form)
Current Members:
- Member 1: [Email] [Dropdown - Role] [Delete Icon]
Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.