Improve UX and UI

[szaimen]

• https://cloud.nextcloud.com/f/8503837
• https://cloud.nextcloud.com/s/ZSiGiHa3g3g3Fpy
• improve UX and UI #4588

AIO setup design review

02.04.2024: Simon (moderator), Jan (participant in usability test), Nimisha (notes), Christian

Overall

• 1st task:
  • Didn't read any of the "How to use this"
  • Question: "sudo docker run" what results? (explained in the section below: Explanation of the command
  • Didn't understand "If your firewall/router has..."
  • Use "All-in-one setup" instead of "Nextcloud AIO setup"
  • "Note down password" notice should be bold/warning sign
  • "Password" --> "Passphrase"
• /containers: Not sure why it opens a separate page because the password is only shown once otherwise
• overwhelming because no navigation or outline, can be organised better --> short Overview and
• two buttons: [New AIO instance] [Restore AIO instance]
• Link color should be NC blue instead of default link blue
• domain should be prefilled out of scope because many cases where the pre-filled domain is simply wrong
• loading spinner is old style, it doesn't have to be blocking the whole page currently not better possible but adjusted the color of the spinner
• error message notification isn't shown permanently? remove the timeout and add an [x] button to close notification
• "Make sure that this server..." can be in an infobox
• visual confirmation of the port status would be nice, like the admin dashboard for now out of scope because this would mean a big refactoring
• optional containers page: show save changes button as a disabled button
• Timezone change: prefill field with user's estimated timezone
• list of timezones can be a dropdown with search for now out of scope
• when starting containers, show modal with loading feedback and the sentence "...may take 5-10 mins..."
• After starting containers: glitchy reload button
• After all have started, on tab focus, the page can reload currently out of scope but added instructions how to inspect contianer logs
• UN and PW can have a copy button
• Backup: "why is it in a sub directory?" because you would not want to use the root directory in many cases and would always want to copy the subfolder
  • wording: "All important data of your Nextcloud AIO instance will get backed up, master container (2 words)
  • reset backup button can be secondary
  • Clicked away "containers will be stopped" warning --> maybe use a modal in NC with the primary button "Stop containers and start backup" our of scope because we don*t have a modal component in AIO and would mean too much effort for now
• 2nd task: would be nice to have a link to how to reset the instance at the end of the page
• 3rd task: "borg password?" maybe use "encryption password"
  • "make double-sure" --> "ensure"
  • Reload button can be shown all the time with a line "Automatically reloading in 5..." like a countdown out of scope because Ii dislike the idea
  • "Backup currently running" --> "Backup being restored"
  • Restoring taking a while... maybe some progress indicators like the last 3 lines of the logs in a codeblock, and when it's done show a continue button? out of scope for now because of performance reasons
  • "Click here to view" or "Click here to reveal" unnecesssary, just show UN PW upfront it is shown upfront, only if you continue with other things it gets hidden
• Overall design can be updated to reflect current NC UI with the rounded corners, etc.
• allow to go back if accidentall entered a backup instead of the domain?

[Martinligabue]

The backup restore could be more flexible about the path, and less punitive if an incorrect password is entered. For example, check if the path given is off by one level, or not restart if the password is wrong, just let it try again.

[szaimen]

I've added this to the list in #5251 now