Minds PRO Setting UX Review

I know that no designs were ever created for PRO settings, however, after a call with @jotto141 and @ottman they asked that a quick UX pass be done. There's probably quite a lot contained within this review, but time permitting, it would be super if these points could be actioned.

General Feedback

• The styling attached form styling will be used throughout the platform moving forward. It's a little basic for now, but it will evolve.
• Each section, General, Tags etc should be URL accessible. i.e. the tab selection should be persisted in the URL.
• Form validation should be clear. Any message should be displayed inline, detailing specific information for the relevant field.
• Once a form is saved correctly, a notification should be displayed on-screen. Currently, there is no visual confirmation. I've included a new toast notification design, but perhaps there an existing notification implementation that can be used. See Ref F
• Display any input descriptors clearly. See Ref D.
• The design has provision for both a title and subtitle. See Ref B
• The view pro channel should be in the same position throughout. See Ref E
• See basic form style guide here. Very basic for now, but it will evolve with time. (https://invis.io/KWU1X9IEB2U#/390489084_Pro_Settings_-General-_Comments_Copy)

Pages

PRO Settings - General

• https://invis.io/KWU1X9IEB2U#/390484231_Pro_Settings_-General-
• https://invis.io/KWU1X9IEB2U#/390489085_Pro_Settings_-General-_Comments

Pro Settings - Theme

It would be super if users could assign colours by inserting a HEX value.

• https://invis.io/KWU1X9IEB2U#/390504143_Pro_Settings_-Theme-

Pro Settings - Hashtags

The following includes a simple matrix type design that can be used for hashtags, as well as footer links.

• https://invis.io/KWU1X9IEB2U#/390517358_Pro_Settings_-Hashtags-

cc @jotto141 @ottman @markeharding

changed milestone to %Pro Beta #release

added scoped label

Looks great.

added scoped label

added scoped label

changed the description

changed the description

Added designs for General, Theme & Hashtags - see original comment for links.

These three should give an appropriate structure for the other pages.

The Hashtags design contains a matrix design than can be used again in Footer.

changed title from Re to Re

added scoped label and automatically removed label

added scoped label

assigned to @omadrid and unassigned @michaelfbradley

changed time estimate to 1w

added scoped label and automatically removed label

@michaelfbradley any thoughts on the current 'assets' tab?

added 1d of time spent at 2019-11-06

mentioned in merge request !638 (merged)

Hi @omadrid - The assets tab content could benefit from a cleanup.

I'm not sure if you're aware, but numerous pages have been done up for Pro settings.

I didn't have the time to go through each page one by one, but there should be enough detail within for most of the Pro section. Have you set aside time to implement the general Pro layout?

========================================

PRO Settings - General

• https://invis.io/KWU1X9IEB2U#/390484231_Pro_Settings_-General-
• https://invis.io/KWU1X9IEB2U#/390489085_Pro_Settings_-General-_Comments

Pro Settings - Theme

It would be super if users could assign colours by inserting a HEX value.

• https://invis.io/KWU1X9IEB2U#/390504143_Pro_Settings_-Theme-

Pro Settings - Hashtags

The following includes a simple matrix type design that can be used for hashtags, as well as footer links.

• https://invis.io/KWU1X9IEB2U#/390517358_Pro_Settings_-Hashtags-

added scoped label and automatically removed label

Hey @michaelfbradley thanks, I've seen the mockups from the links provided in this issue's description. PRO settings layout is in place, am working on the form elements now.

I asked about the assets tab because it's so different from the other tabs and is therefore the only one that is difficult to use deductive reasoning to implement. For now I guess I'll just leave it more or less as it is, unless you can find time to make any suggestions.

Hey @omadrid - No problem. I'll spend a little time on this, and will have a design for you by the end of the day.

@michaelfbradley great, much appreciated.

A few more questions:

• I'm seeing a mixture of "PRO" and "Pro". Are these supposed to be consistently one way or the other? UPDATE: replaced "PRO" with "Pro"
• Theme colors - I'm supposed to get rid of the color picker entirely and just allow hex input, correct?
• there might be a delay between the time when the user clicks the save button and the changes are written to the database. I'm assuming the toast notification should only appear after the changes have been confirmed as successful. Should anything happen during this delay?
• When the browser window shrinks, what is supposed to happen to the ratio of widths of the text input fields on the left and the spacing/tooltip/descriptor 'column' on the right? Are the text fields fixed width? %? UPDATE: made right column fixed 160px and inputs stretch to fill empty space
• Where do the little blue-text descriptors go on mobile? UPDATE: slotted them on top of the input fields
• validation states: should something happen only when there's an error? (don't do anything to indicate that there is no problem, correct?)

In general I'm making a lot of assumptions for smaller browsers because these mockups are only for desktop, so please let me know if there are any specific things that must happen on mobile/tablet.

I tend to think it should not be capitalized.

Cool, will change all "PRO" to "Pro"

added scoped label and automatically removed label

closed

removed label