Edit-View Mode Slider

[spoorun]

Problem:
When Users are dealing with a lot of data, or are viewing contacts only and wary of making unintentional edits, it would be efficient and useful to have a view<>edit slider.

It would save some users a lot of unnecessary grief (for example those who have difficulty with touch screens, those with limited keyboard ability, and those who are scared with IT and don't need to edit contacts regularly).

Solution
There would be a simple slider button, perhaps located in settings so users don't accidentally trigger it.
When in edit mode, all contacts will be immediately editable.
When in view mode, a user will have to click an edit icon (standard pencil icon) to edit that contact, and empty fields would not be visible, nor would the wastebaskets.

Usability
Users are now used to the view/edit paradigms, with well-used conventions in software, webapps, and mobiles, including the pencil edit icon, so this change will be intuitive.

Benefits
This change will be more graceful than the existing interface, since it will remove the clutter of fields and headers that are unnecessary the majority of the time (i.e. when contacts are merely being viewed rather than edited).

For example, currently adding a home address with only the word 'London' entered, still unecessarily dispays all the address subfields. The same applies to the 'Detailed name' field. And even when no email address is entered, the field still displays, empty.

The attachments below show the difference for the same contact between Zimbra's 'View mode' and Nextcloud's only mode (the edit mode).

[spoorun]

Using same contact:
Top: Elegant view mode in Zimbra - easy to see information, minimal irrelevant information to scan, aesthetically pleasing, no accidental editing.
Bottom: Cluttered view of Nextcloud

[skjnldsv]

@irgendwie @Henni We could use the read-only mode for this?
I'm not sure I like the idea of having to click a button to switch to the view I want though.

When I'm using the contact app, this is not to read all of my contacts data. I'm usually editing or searching a specific value. The current edit view is quite good enough for me since seeing the information I'm looking for is as easy on a plain text mode as in an input. For me it's a no. :)

@jancborchardt what do you think?

[spoorun]

Well finding a specific value is harder in our app then in any others used.

Compare Zimbra, Outlook.com, Google contacts, Android, iPhone, IBM - they have consistent places for fields, they have clear headers, and the data present is not cluttered by empty fields awaiting input. They all use a view mode to keep that clarity and an edit mode to make it in fact quicker to enter data - since lots of empty fields are shown, ready for entry.

The edit view might be easier to use for browsing if the headers and layout was cleaned up #305 and the address ' #309 and name #307 layouts were sorted (not showing redundant fields).

At the moment, looking at a contact is one big visual mess, and hard to discern quickly what info is what and where. Other contact apps (both web and mobile) look more consistent and are laid-out better.

[skjnldsv]

I agree with the UI improvments we need, but having a double screen seems a bit too extreme for me.
:)

[jancborchardt]

Default could be viewing the contact, and then there's an editing function on the whole contact.

It's definitely not a global mode slider. We'll simply do it like iOS, Android and Google contacts.

[jancborchardt]

An important thing to keep in mind though is that both views should be symmetric/similar. The layout should be the same, just the presentation a bit different. Like only having input field borders in edit mode.

[spoorun]

We'll get a mockup together and post...

[maprambo]

+1. A design suitable for both editing and reading the information is nearly impossible. Editing by mistake is also an issue for me.

[skjnldsv]

@maprambo hi!
I'm curious about the behavior that makes you edit by mistake. Do you misclick? Or is the autofocus on inputs an issue ? Mobile! Desktop? :)

[maprambo]

Especially on mobile when scrolling

[st3iny]

Closing in favor of #3284.