Skip to content

  • Projects
  • Groups
  • Snippets
  • Help
  • Sign in / Register
Minds Frontend
Minds Frontend
  • Project overview
  • Repository
  • Issues 399
    • List
    • Boards
    • Labels
    • Service Desk
    • Milestones
  • Merge Requests 52
  • CI / CD
  • Security & Compliance
  • Packages
  • Wiki
  • Snippets
  • Members
  • Collapse sidebar
  • Graph
  • Charts
  • Create a new issue
  • Jobs
  • Commits
  • Issue Boards
  • Minds
  • Minds FrontendMinds Frontend
  • Issues
  • #2163

Closed
Open
Opened 3 weeks ago by Michael Bradley@michaelfbradley
Report abuse New issue

Refactor PRO settings

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

Edited 3 weeks ago by Mark Harding

Related issues
0

Related merge requests
1
  • Refactor PRO settings
    !638
    Pro Beta #release
    Avatar for Bill Ottman
    Avatar for Jack Ottman
    Avatar for Xander Miller
  • Discussion 9
  • Designs 0
  • Michael Bradley @michaelfbradley changed milestone to %Pro Beta #release 3 weeks ago

    changed milestone to %Pro Beta #release

  • Michael Bradley @michaelfbradley added Platform::Browser scoped label 3 weeks ago

    added scoped label

  • Bill Ottman
    Bill Ottman :dragon_face: @ottman · 3 weeks ago
    Owner

    Looks great.

  • Mark Harding @markeharding added Status::Scheduling scoped label 3 weeks ago

    added scoped label

  • Mark Harding @markeharding added Product::Pro scoped label 3 weeks ago

    added scoped label

  • Michael Bradley @michaelfbradley changed the description 3 weeks ago

    changed the description

  • Michael Bradley @michaelfbradley changed the description 3 weeks ago

    changed the description

  • Michael Bradley
    Michael Bradley @michaelfbradley · 3 weeks ago
    Developer

    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.

  • Mark Harding @markeharding changed title from Review of Minds PRO Settings [WIP] to Refactor PRO settings 3 weeks ago

    changed title from Re to Re

  • Mark Harding @markeharding added Status::Backlog scoped label and automatically removed Status::Scheduling label 3 weeks ago

    added scoped label and automatically removed label

  • Mark Harding @markeharding added Sprint::10/23 - Quiet Quail scoped label 3 weeks ago

    added scoped label

  • Mark Harding @markeharding assigned to @omadrid and unassigned @michaelfbradley 3 weeks ago

    assigned to @omadrid and unassigned @michaelfbradley

  • Mark Harding @markeharding changed time estimate to 1w 3 weeks ago

    changed time estimate to 1w

  • Olivia Madrid @omadrid added Status::InProgress scoped label and automatically removed Status::Backlog label 2 weeks ago

    added scoped label and automatically removed label

  • Olivia Madrid
    Olivia Madrid @omadrid · 2 weeks ago
    Developer

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

  • Olivia Madrid @omadrid added 1d of time spent at 2019-11-06 2 weeks ago

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

  • Olivia Madrid @omadrid mentioned in merge request !638 (merged) 2 weeks ago

    mentioned in merge request !638 (merged)

  • Michael Bradley
    Michael Bradley @michaelfbradley · 2 weeks ago
    Developer

    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-
  • Mark Harding @markeharding added Sprint::11/06 - Rolling Rabbit scoped label and automatically removed Sprint::10/23 - Quiet Quail label 2 weeks ago

    added scoped label and automatically removed label

  • Olivia Madrid
    Olivia Madrid @omadrid · 2 weeks ago
    Developer

    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.

  • Michael Bradley
    Michael Bradley @michaelfbradley · 2 weeks ago
    Developer

    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.

  • Olivia Madrid
    Olivia Madrid @omadrid · 1 week ago
    Developer

    @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.

    Edited by Olivia Madrid 1 week ago
  • Bill Ottman
    Bill Ottman :dragon_face: @ottman · 1 week ago
    Owner

    I tend to think it should not be capitalized.

  • Olivia Madrid
    Olivia Madrid @omadrid · 1 week ago
    Developer

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

  • Mark Harding @markeharding added Status::Review scoped label and automatically removed Status::InProgress label 6 days ago

    added scoped label and automatically removed label

  • Mark Harding @markeharding closed 2 hours ago

    closed

  • Mark Harding @markeharding removed Status::Review label 2 hours ago

    removed label

Please register or sign in to reply
Assignee
Olivia Madrid's avatar
Olivia Madrid @omadrid
none
Epic
None
Pro Beta #release
Milestone
Pro Beta #release
Time tracking
Spent 1d
Est 1w
None
Due date
None
3
Labels
Platform::Browser Product::Pro Sprint::11/06 - Rolling Rabbit
None
Weight
None
Confidentiality
Not confidential
Lock issue
Unlocked
5
5 participants
user avatar
Olivia Madrid
user avatar
Mark Harding
user avatar
Bill Ottman
user avatar
Michael Bradley
user avatar
Jack Ottman
Reference: minds/front#2163