App UI/UX Review/Feedback

[yahu1031]

Feedback/Review

NOTE: WRT the code.

---

These indications

• Points observed

Enhancement Request

---

Home page:

Info Section(Right side)

• Things look good. Informative, Interactive, But that info can get into Settings/About(Feature Request).
• The info has other component combinations like Text and Buttons. Better make them all same height.
• Update the links for Star on Github and Github Repo- Point it to issues.

Interaction Section(Left side)

• Home Button - Does nothing when I'm already on the home screen.

The user needs to be indicated that (s)he is already on the home screen.

• Save Button - Does nothing when I'm on the home screen.

Better to be disabled on the home screen and no API calls list is empty.
Show some toast when the user interacts with this button.

• New Button - Creates new API call screen(Good).

This can be a little highlighted because this is the main functionality of the app.

---

API call page:

Request Tile(Left side)

• Request tile height is very less.

• Could be increased 20 -> 30.
• Instead of using kHSpacer5, Utilize Expanded in the Row with flex 1(MethodBox), 3(Text) in collection_pane.dart.
• Let the user edit the title of the tile instead of showing the API URI.
• Removing the Material to the tile also looks good (Low priority) - Sample.

API Call Body(Right side)

• URI section height is huge.

• This section can be wrapped with SizedBox with a height of around 45-50.

• Send Button should not grab the user's attention ASA the user sees this section.

• As it is not something very special there, We can use TextButton instead of FilledButton - Sample

• Maintaining the design consistency for dropdowns and the app design.

• The DropdownItems have sharp corners. Instead, we can use some radius - Sample

• In the Request section

• View Code button should not be available/visible if the URI is empty.
• Better to append an empty TextFields instead of showing Add Params and Add Headers for URL Params and Headers respectively. So that UX will automatically improve a little bit. (Low Priority).
• For Body, JSON formatting/highlighting will be an additional good-looking UI. JSON validation will be a bonus.

• In the code section, When the user selects JSON content type, Instead of making body String, utilizing Map and stringifying(parsing) will be a good alternative.

---

[animator]

Thanks for the detailed feedback @yahu1031
I have added my comments below 👇

Feedback/Review

NOTE: WRT the code.

These indications

• Points observed

Enhancement Request

Home page:

Info Section(Right side)

• Things look good. Informative, Interactive, But that info can get into Settings/About(Feature Request).
• The info has other component combinations like Text and Buttons. Better make them all same height.
• Update the links for Star on Github and Github Repo- Point it to issues.

We are working on improving it. Thank you for your suggestions.

Interaction Section(Left side)

• Home Button - Does nothing when I'm already on the home screen.

The user needs to be indicated that (s)he is already on the home screen.

+1

• Save Button - Does nothing when I'm on the home screen.

Better to be disabled on the home screen and no API calls list is empty.
Show some toast when the user interacts with this button.

Save button's purpose is to save the current list of API requests.
We cannot disable it if the list is empty as:
the user can add an API -> then save the current list -> then remove it (now the list is empty) -> would again want to save this state.

User notification is definitely missing in form of a toast and needs to be explored.

• New Button - Creates new API call screen(Good).

This can be a little highlighted because this is the main functionality of the app.

A reason why we described its purpose in the Home Page.

API call page:

Request Tile(Left side)

• Request tile height is very less.

• Could be increased 20 -> 30.
• Instead of using kHSpacer5, Utilize Expanded in the Row with flex 1(MethodBox), 3(Text) in collection_pane.dart.
• Let the user edit the title of the tile instead of showing the API URI.
• Removing the Material to the tile also looks good (Low priority) - Sample.

Apart from renaming requests which we are currently working on, other points you mentioned above are design decisions.

API Call Body(Right side)

• URI section height is huge.

• This section can be wrapped with SizedBox with a height of around 45-50.

• Send Button should not grab the user's attention ASA the user sees this section.

• As it is not something very special there, We can use TextButton instead of FilledButton - Sample

Again, these are design decisions.

• Maintaining the design consistency for dropdowns and the app design.

• The DropdownItems have sharp corners. Instead, we can use some radius - Sample

This is blasphemy. Thanks for catching this error.

• In the Request section

• View Code button should not be available/visible if the URI is empty.

What if the user wants to generate a code with params, headers, body ... but fill in API URL later?
We don't want to deny him/her the chance to generate code by hiding View Code button.

• Better to append an empty TextFields instead of showing Add Params and Add Headers for URL Params and Headers respectively. So that UX will automatically improve a little bit. (Low Priority).

We did take a look into it earlier, but finally went ahead with the current approach as it is less confusing for the user.

• For Body, JSON formatting/highlighting will be an additional good-looking UI. JSON validation will be a bonus.

+1 for JSON validation.
JSON formatting/highlighting while the user is editing (without hampering performance) will require further exploration.

• In the code section, When the user selects JSON content type, Instead of making body String, utilizing Map and stringifying(parsing) will be a good alternative.

+1 As it will make the generated code more pluggable.

[animator]

Hi @yahu1031

Following up on this discussion to share some updates.
We have made significant updates to the UI and addressed most of the issues you pointed out in our latest release.
Please do check it out and let us know your thoughts on the latest iteration of API Dash.

As the core project structure is now stable, I have converted the remaining pointers into issues: #22 #23

Please do feel free to send across a PR 🤗 for these issues or any other issues that are currently open.

Thanks!