Cloudron makes it easy to run web apps like WordPress, Nextcloud, GitLab on your server. Find out more or install now.


    Cloudron Forum

    • Register
    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular

    Solved Dashbard UX enhancement suggestions

    Feature Requests
    userinterface
    12
    62
    3312
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • marcusquinn
      marcusquinn @robi last edited by

      @robi OK, so:

      [dot dot dot button always showing, up arrow when available]

      Admin (when applicable)
      Info
      Settings
      Update (when applicable)
      Logs

      We're not here for a long time - but we are here for a good time :)
      Jersey/UK
      Work & Ecommerce Advice: https://brandlight.org
      Personal & Software Tips: https://marcusquinn.com

      1 Reply Last reply Reply Quote 3
      • infogulch
        infogulch last edited by

        Agree 3-dot menu >>> hover for mobile. Even on desktop I sometimes found myself confused which icon is which and misclicking (e.g. click info for logs, & vv) when I'm only half paying attention; a menu with text label would solve that nicely.

        I like the update button idea.

        1 Reply Last reply Reply Quote 1
        • jdaviescoates
          jdaviescoates @robi last edited by

          @robi said in Dashbard UX enhancement suggestions:

          I'd add an update action button so we don't have to do extra clicks to update apps.

          +1

          I'd still really like to see a filter for apps that have an update available too.

          I use Cloudron with Gandi & Hetzner

          1 Reply Last reply Reply Quote 1
          • nebulon
            nebulon Staff @hexbin last edited by nebulon

            @hexbin

            While you're at it, could you check why the focus on the tiles (keyboard navigation) has no visual effect?

            hm at least in firefox here the a tag element does get the system default focus outline. The tabfocus order is a bit strange though, as it also cycles through the action buttons which are hidden withou hover at the moment.

            hexbin 1 Reply Last reply Reply Quote 0
            • hexbin
              hexbin last edited by

              @infogulch said

              when I'm only half paying attention

              Important point that makes me nervous about stop/restart buttons too easily to be (mis)clicked.

              Please do also have in mind that you lovely people here are power users. We should always cross-check ideas with a persona who is a non-frequent administrator.

              That is one reason why I tend to find non-disruptive changes. Mapped to the (absolutely valid) requirement to reduce searching for the fuctions (stop / restart) - would it be feasible to have redundant additional links on several tabs?

              d19dotca 1 Reply Last reply Reply Quote 0
              • hexbin
                hexbin @nebulon last edited by hexbin

                @nebulon said

                at least in firefox here the a tag element does get the system default focus outline

                4af0906d-45ab-4fbd-9dd2-45fd5ea055b8-grafik.png

                Technically correct - but aren't we kinda hard trying to make that invisible? 😆

                (Spoiler: it's the chat tile that has the focus)

                nebulon 1 Reply Last reply Reply Quote 2
                • d19dotca
                  d19dotca @hexbin last edited by

                  @hexbin said in Dashbard UX enhancement suggestions:

                  makes me nervous about stop/restart buttons too easily to be (mis)clicked

                  I think that's a fair concern. That's actually part of why I was suggesting earlier the option of an Actions dropdown menu... it'd do two things: 1) keep the number of buttons down and more importantly 2) prevent mis-clicks since to restart or stop you'd need to make two separate clicks because they'd be covered by a general Actions button that needs a click too.

                  I guess it may not hurt to also have an "Are you sure?" prompt, but I think 3 clicks (at least how I"m envisioning it) seems maybe a bit much too.

                  My two cents:

                  • If we go with a parent Actions button that covers the Stop and Restart buttons from mis-clicks, then it's good as-is at that point.
                  • If we keep both the Stop and Restart buttons in the top button row though where they can be easily misclicked, then I think we should have an "Are you sure" type of pop-up to prevent those misclicks.

                  🙂

                  --
                  Dustin Dauncey
                  www.d19.ca

                  1 Reply Last reply Reply Quote 1
                  • nebulon
                    nebulon Staff @hexbin last edited by

                    @hexbin said in Dashbard UX enhancement suggestions:

                    Technically correct - but aren't we kinda hard trying to make that invisible?

                    Ah I see, indeed this is way to sublte here. As such our stylesheet does not configure that, so it appears to be a bad match with the current custom and system style.

                    1 Reply Last reply Reply Quote 0
                    • robi
                      robi last edited by

                      Ideally we'd rarely have to visit troubleshooting tools and start/stop buttons as the app monitor would handle that more intelligently for us.

                      Until then, making things more obvious and adding additional distinguishing visual elements such as the triangle pointing right and square box for start and stop respectively.

                      Life of Advanced Technology

                      1 Reply Last reply Reply Quote 1
                      • nebulon
                        nebulon Staff last edited by

                        Regarding the fix for the app item action items, which are currently shown on hover, we have done a few tests with the three dots icon and a dropdown. It didn't make too much sense to us and also it kindof looked strange and not very intuitive.
                        Now the current version is a bit simplified from this. It will show a single button in the top-right corner as suggested here. This is always shown now for admins. Clicking that will bring up the app configure/info view which has an improved toolbar on the top right, containing all the actions.
                        This change has the same amount of clicks required as the dropdown now and also works better on mobile/tablet.

                        Screenshot_2021-04-07 Bonsai.png

                        Screenshot_2021-04-07 Bonsai(1).png

                        You can see the stop/pause action also being more prominent up there now.

                        d19dotca 1 Reply Last reply Reply Quote 6
                        • nebulon
                          nebulon Staff last edited by

                          Also the grid item focus is now adjusted to look like, but I am not yet sure if I keep it as such

                          35952f6e-21f1-47fc-ad00-facf5d5cd6f9-image.png

                          @hexbin the actual system and browser native focus is still untouched and I think given that we haven't done any visual focus handling, you will see similar issues on other products unless you adjust your system settings for the native style. I also think that not interfering with the native one here is correct, as if I adjust my system for example to have a style with high contrast (this is on linux gnome) then the native focus rendering is also adjusted well, which I think is what we want.

                          marcusquinn hexbin 2 Replies Last reply Reply Quote 3
                          • marcusquinn
                            marcusquinn @nebulon last edited by

                            @nebulon Nice. If it's a button now, rather than a drop-down, that makes more sense to use an icon representing the destination.

                            Personally, I'd prefer the single-cog icon here and for the Service menus, if you'd consider that?

                            • https://fontawesome.com/v4.7.0/icon/cog

                            We're not here for a long time - but we are here for a good time :)
                            Jersey/UK
                            Work & Ecommerce Advice: https://brandlight.org
                            Personal & Software Tips: https://marcusquinn.com

                            nebulon 1 Reply Last reply Reply Quote 2
                            • nebulon
                              nebulon Staff @marcusquinn last edited by

                              @marcusquinn agreed, using the single cog now

                              1 Reply Last reply Reply Quote 3
                              • hexbin
                                hexbin @nebulon last edited by hexbin

                                @nebulon Awesome improvements!

                                given that we haven't done any visual focus handling

                                Unfortunately it's a very widespread bad habit among web designers to unconsciously style only :hover states. By omitting :focus, accessibility is actively reduced. Not blaming anyone. You might want to check if your CSS files serve this finding.

                                The defaults are not always a good fallback. Not many people actually know that they could adjust their system (not even many among those who rely on assistive technologies). When we avoid touching the way the defaults do the styling (e. g. outline) we can still do a lot for accessibility 😉

                                nebulon 1 Reply Last reply Reply Quote 1
                                • hexbin
                                  hexbin last edited by hexbin

                                  Now that we've satisfied some basic power users' needs - mind if I get back to the original motivation (description field, login type)?

                                  At least once a week I have to tell an app-using team member that it's not their fault and to stop blaming themselves (no, you are not "too stupid").

                                  It would be such a blessing to help non-admins help themselves.

                                  marcusquinn 1 Reply Last reply Reply Quote 6
                                  • nebulon
                                    nebulon Staff @hexbin last edited by

                                    @hexbin said in Dashbard UX enhancement suggestions:

                                    The defaults are not always a good fallback. Not many people actually know that they could adjust their system (not even many about those who rely on assistive technologies). When we avoid touching the way the defaults do the styling (e. g. outline) we can still do a lot for accessibility

                                    so we are on track here, I've added the darker outline, but the native one is still inset of that. I have not restyled this (not visible in the screenshot, as real focus went to the screenshot tool 😉 )

                                    1 Reply Last reply Reply Quote 0
                                    • ?
                                      A Former User last edited by

                                      @nebulon That looks so much cleaner! Thanks for your hard work! 😄

                                      1 Reply Last reply Reply Quote 1
                                      • d19dotca
                                        d19dotca @nebulon last edited by d19dotca

                                        @nebulon said in Dashbard UX enhancement suggestions:

                                        You can see the stop/pause action also being more prominent up there now.

                                        It's looking like a great improvement, thanks for the hard work and for taking all our feedback into consideration.

                                        Just two quick questions:

                                        1. Is there any intention to add the Restart button too, or is it only a stop button (which I assume then translates to a start button when stopped) for now? I suppose the restart button isn't as necessary now since it's also in the File Viewer area which is generally when we'd need to restart an app anyways after editing a file. Though I still like the idea of sticking to how operating systems UI are done, where the shutdown and restart buttons are next to each other.

                                        2. Is there an "are you sure" pop-up when clicking/tapping the shutdown/pause button to avoid miss clicks?

                                        Bonus question: Should the shutdown/pause button perhaps be the "Power-off" icon instead of the "Pause" icon? I guess it could work either way, just thinking the Power Off one may make a little bit more sense at a glance.

                                        --
                                        Dustin Dauncey
                                        www.d19.ca

                                        1 Reply Last reply Reply Quote 1
                                        • marcusquinn
                                          marcusquinn @hexbin last edited by

                                          @hexbin wondering if login-type icon might be better in the top-left now to balance the cog top-right?

                                          We're not here for a long time - but we are here for a good time :)
                                          Jersey/UK
                                          Work & Ecommerce Advice: https://brandlight.org
                                          Personal & Software Tips: https://marcusquinn.com

                                          hexbin 1 Reply Last reply Reply Quote 2
                                          • hexbin
                                            hexbin @marcusquinn last edited by

                                            @marcusquinn Sounds like a good idea. I'm sure we can trust the wonderful Cloudron team with design decisions (and weighing those against technical feasability).

                                            As long as they can make this happen - nag, nag 🙂

                                            1 Reply Last reply Reply Quote 1
                                            • nebulon
                                              nebulon Staff @hexbin last edited by

                                              @hexbin ok I did some attempt there and we now show such an icon with a tooltip for non-admins. Admins should know already, as well as they can get that info in the app detail view. Always showing them felt a bit too cluttered.

                                              cd711b7e-121c-4798-92af-1a29be099096-image.png

                                              marcusquinn hexbin jdaviescoates 4 Replies Last reply Reply Quote 9
                                              • marcusquinn
                                                marcusquinn @nebulon last edited by

                                                @nebulon Very nice! Can you post the text for each? I like wording things, and context helps 🙂

                                                We're not here for a long time - but we are here for a good time :)
                                                Jersey/UK
                                                Work & Ecommerce Advice: https://brandlight.org
                                                Personal & Software Tips: https://marcusquinn.com

                                                1 Reply Last reply Reply Quote 0
                                                • hexbin
                                                  hexbin @nebulon last edited by

                                                  @nebulon Aaaawesome! The tooltip solution is closer to where it's needed, good. (But be aware of possible accessibility implications.)

                                                  1 Reply Last reply Reply Quote 0
                                                  • hexbin
                                                    hexbin @nebulon last edited by

                                                    @nebulon Any progress with the description field yet?

                                                    1 Reply Last reply Reply Quote 0
                                                    • nebulon
                                                      nebulon Staff last edited by

                                                      The tooltip text will be finalized in weblate due to translation, will push this in a bit.

                                                      For the description, we won't do this right now as it has various text-length issues and we already have tags and the option to give descriptive names, which already indicated in this thread can also be used to clarify to some extent. In the end this would be just the same with the same visual space limitations as the app name field, so I am not sure where the benefit is, besides limiting space even further due to more fields.

                                                      1 Reply Last reply Reply Quote 0
                                                      • jdaviescoates
                                                        jdaviescoates @nebulon last edited by

                                                        @nebulon great stuff!

                                                        but re:

                                                        Admins should know already, as well as they can get that info in the app detail view. Always showing them felt a bit too cluttered.

                                                        Personally I'd like to see it as an Admin too (if you've got loads of apps it's hard to remember how each is set-up) 🙂

                                                        I use Cloudron with Gandi & Hetzner

                                                        d19dotca 1 Reply Last reply Reply Quote 2
                                                        • d19dotca
                                                          d19dotca @jdaviescoates last edited by

                                                          @jdaviescoates Agreed. Likely not an issue for a server with only a few apps, but can be a quick time saver for that at-a-glance info when hosting many of them. I'd personally like to see a toggle that allows this for admins so that it's not there for people who don't want to see them. But that can always be second iteration. haha.

                                                          --
                                                          Dustin Dauncey
                                                          www.d19.ca

                                                          1 Reply Last reply Reply Quote 1
                                                          • hexbin
                                                            hexbin last edited by

                                                            I love you 💙

                                                            1 Reply Last reply Reply Quote 2
                                                            • marcusquinn
                                                              marcusquinn last edited by

                                                              The Running / Stopped text sticks out more like a sore thumb now 🙂

                                                              We're not here for a long time - but we are here for a good time :)
                                                              Jersey/UK
                                                              Work & Ecommerce Advice: https://brandlight.org
                                                              Personal & Software Tips: https://marcusquinn.com

                                                              1 Reply Last reply Reply Quote 0
                                                              • marcusquinn
                                                                marcusquinn last edited by

                                                                I tend not to use this on mobile, but still using rollover suggests that issue isn't covered with this update?

                                                                We're not here for a long time - but we are here for a good time :)
                                                                Jersey/UK
                                                                Work & Ecommerce Advice: https://brandlight.org
                                                                Personal & Software Tips: https://marcusquinn.com

                                                                1 Reply Last reply Reply Quote 0
                                                                • First post
                                                                  Last post
                                                                Powered by NodeBB