Design review

[skjnldsv]

Overall

• Add "Import contacts" next to "New contact" on empty view #3311
• Possibly look into supporting favorites, same as Android does it?
  Sort favorite contacts first in list #105

Papercuts and bugs

1. In social media dropdown: "Other ... ial media" is ellipsized --> "Other" In social media dropdown: "Other ... ial media" is ellipsized #3316
2. Settings > "enable/disable" --> "Enable", don’t change on edit
   • Should not be possible to disable if it’s the last writable address book
   • Directly reflect state change also for disabling

• create new group could be inline like in deck (right now there's the create whatever component but it's in a tooltip looking thing)
• menu stayed focused but settings closes when you toggle enable/disable --> keep everything open
• little shift in "Title" field when any field is filled and is saving
• displayed name and name under the "Detailed name" property are not synced?
• obscure field (eg: anniversary) is more easily visible than (what I think to be) a more commonly used field (eg: group)

Navigation

• Marco brought up possibly hiding the AppNavigation by default to keep it simpler – quite contentious issue because this would possibly make it not obvious what Contacts can do. But other considerations:
  • We would show it by default still, but remember the hidden/shown state
  • Specs for moving the "New contact" button to the contacts list https://github.com/nextcloud/server/issues/16934#issuecomment-542201187
    ➡️ To be managed on the vue components globally
• Group actions: Wording of "Download" should rather be "Export" Group actions: Wording of "Download" should rather be "Export" #3318
• Vue component issue: counter of group member sticks to side, and has an "unread" circle around it

Contact list

• When we have the edit/view mode distinction, we could add an "Edit" button directly in the list
  Edit-View Mode Slider #311
• Multiselect would be nice, like in Files

Search

• When you search and then select a contact, the Contacts app loads completely new even if you are already in it
• The unified search results show a generic contacts silhouette icon instead of the avatar placeholder for contacts without avatar

Detail view

• We should move from only edit mode to View by default and per-person editing, like other
• "New contact" does not look changeable, more like a heading
  • should be focused on creation
  • ideally should be displayed as 'invalid' when empty and prevent syncing to the server if empty
• Change "New contact" wording to "Name" Change "New contact" wording to "Name" #3319
• To be even more obvious, we could make "Name", Organization and Title look more like actual input fields
• For the shown properties like Phone, Email etc, they should not show in the "Add new property" dropdown but directly like "+ Add phone number" Set focus into new added property #1646 & Allow to add more properties directly from property #655
• "Address book" does not need to show if there is only one address book (regression from adding "Recently contacted)
  • Should be sorted second-to last, directly before the "Add new property"
• Avatar handling:
  • Add cropper tool Crop photo for the contact picture #1662
  • Menu icon should be 3-dot menu instead of image icon
• Actions menu in top right for each contact should have: Add to group, Add to favorites, Download, Share, Delete (similar to mail)

Layout improvements

• Responsive columns --> fixed to maximum 2 instead of 6 (Will be fixed to a single column)
• Always grouped the same way, with properties not jumping between columns
  • e.g. always having phone and mail as first items on the top of the left column
  • Always at the end of the right column: Address book, groups
• Design improvements to "Add new property"  #3304
• Expand and collapse when there are multiple unique fields under one property, e.g. name
  • name (expanded): firstname, lastname, suffix, nicknames, additional names, phoenetic f name, phoenetic l name
  • name (collapsed): first name, lastname, { whatever else field is filled }

Settings

• Move to modal Create modal window for contacts settings #3032
  • Improve handling of multiple address books #1703 (comment)
  • Add subheadings, 3 sections:
    • Settings
    • Address books
    • Import & export
• Move "Sorting" to the top of the "Settings" list Create modal window for contacts settings #3032
• Ideally add a subline to each of the address books saying e.g. "250 contacts, 10 groups" to indicate what address books are, Possibly explain what an address book is Add a subline to each of the address books, explain what an address book is #3320

Import

• "Import from Files" button should be single line, Remove margin from buttons. Improve the design of import buttons #3321
• Short sentence on what are supported filetypes
• Ability to cancel import would be nice
• Once done, replace contacts icon with checkmark
• Close button wording instead "Finish" done(its fixed during icon migration, hard to find the pr)
• Better feedback on failed import
  Show more details about the failing reason of an import #990
  • E.g. possibility to download the ones which failed
• Select first contact after import➡️

Circles integration

• "Change level" levels could directly go into the main popover menu, instead of the substep
• All of them need a confirm step, with confirm button labeled accordingly "Transfer ownership to name"
• Slight space between roles and delete
• Roles / Wording
  • Transfer ownership (possibly have additional icon or sentence in confirmation modal, maybe even have the button be red)
  • Admin
  • Moderator
  • Member
  • Remove from group
• 2-step "Add new circle" flow (similar to Talk)

  • Opens a modal directly for putting in the name

  • Has a very short explanation on what "Circles" are, below the Circle name input

    Circles allow you to create groups with other users on a Nextcloud instance and share with them.

• "Add members" button: Alignment of text is centered, would look better left-aligned to member names
• "Add members" dialog could include emails: Placeholder would then be "Add users, groups, mails, …"
• For later maybe: Possibility to add people to a circle from their Contacts page, e.g. via the 3-dot-menu
• For later: Think about how to do the "Add new circle", possibly instead add a new entry directly below the heading and have the name input inline.

Profiles integration

• Ability to add Contact from Profile page
  • A is on B's profile and wants to add them to contacts --> click "Add to contacts"
  • A has B in their contacts and wants to add B's Profile to B's contact info -->
    • go to B's profile, click Add to contacts
    • go to B's contact and paste B's profile URL in the right field
• A does not have Contacts enabled (is this possible?) --> "Add to contacts" button not shown
• Enhancement: If contact with similar name (or email) already exists ask if it’s the same and details should be added.
• Future dreams: Federated contacts, where you can add people to your contacts just using their Profile links

Acceptance criteria

• Single column
• Responsive design
• Fix jumping of properties
• Read-only/edit switch

Work packages for Nextcloud 27

• Spread out todos into atomic chunks of work
• Design improvements to "Add new property"  #3304
• Single column layout #3305
• Implement read-only/view mode for contact details view #3284
• Update Contacts documentation for design changes documentation#10019

[jancborchardt]

Updated with the notes by @nimishavijay and me from the additional 2 design reviews we had beginning of 2021. :)

[nimishavijay]

So @jancborchardt and I went through this list and thought that having a view/edit mode would be a good place to start, along with some more minor visual changes mainly in the content.

View mode:

• None of the fields are editable in view mode
• They can be edited by clicking on an "Edit" button which takes you to Edit mode
• Fields which are not filled are not shown
• Don't show groups unless the contact is in a user created group (so "Recently Contacted" and other automatically created groups wouldn't be shown)
• Don't show address books in view mode as it's kind of an obscure field
• Convert "Title" and "Company" fields to read more nicely in view mode, for eg. Analyst at Company
• Left align name and title + company (Alice Smith, Analyst at Incorporated GmbH) with the text in the left column (Phone, 1234123412, Address, etc)
• Right align icon of each property (phone icon, email icon, etc) with type of property ("Home" in phone, "Home" in email, etc)
• More whitespace between the type of property ("Home" in phone) and value of property (1234123412)
• Updated icons using Material Design Icons for property icons (phone icon, email icon, etc) and items in action menu (download, QR code, delete)

Edit mode:

• In edit mode, users can edit the properties and save using the "Save" button
• Fields in the header (name, title, company) should look like input fields with the appropriate placeholder when they are empty
• Groups are shown even if the contact is not a part of any group yet so that they can be easily added
• Address book is shown in edit mode but as read-only (ie, similar to ow it would be shown if it was in view mode)
• "Add new property" wording is changed to "More info" and is made the primary color and bolded so that it is more eye-catcing
• The properties that already exist (Phone, email, address) have an option to add another value using a "+" icon on the right (eg. add another phone number for work)
• Since the properties that already exist can be added like above they don't need to be included in the dropdown for adding a new property

This could be a good place to start, moving forward we could make changes to more sections.

[arnowelzel]

By the way - also see #2699 where I created a set of custom CSS rules which can be used with the CustomCSS app to modify the layout of the contacts app.

I am also willing to participate and provide an updated layout for the app itself and not only as workaround using CSS, but before doing so it would be nice to learn what plans you may have already.

[ChristophWurst]

There are no plans for the items in this ticket. They can be picked up at any time. Ideally they are tackled in individual fixes to keep the changes trackable and reviewable.

[caplod]

I am also willing to help.
The layouts from nimishavijay are looking great.
How can we go on with this?

[arnowelzel]

I am also willing to help. The layouts from nimishavijay are looking great. How can we go on with this?

The first step would be to get a working development environment up and running, so one can work on this.

Also see https://nextcloud.com/developer/ and the links to the tutorials like "Setting up a development environment".

The contacts app can also just be checked out out from Github and built locally. Experience in Vue.js is also helpful.

[GretaD]

I will start from the more complicated ones by opening a separate issue for them, if the points above dont have an open issue, it means im not working on it. So, if someone wants to pick up the easy ones, feel free to do so

[RokeJulianLockhart]

@GretaD, if you're able to edit this issue, you can easily create new ones simply by clicking on them.

[arnowelzel]

I will start from the more complicated ones by opening a separate issue for them, if the points above dont have an open issue, it means im not working on it. So, if someone wants to pick up the easy ones, feel free to do so

Can you link the issues here, so it is easy to find them? Thank you!

[ChristophWurst]

@GretaD, if you're able to edit this issue, you can easily create new ones simply by clicking on them.

Thanks for the tip. Unfortunately those tickets are not very useful. Github just takes the single of the checklist here and creates an empty ticket with a subject. Therefore we prefer to create proper tickets manually and replace the checklist items with a ticket link.

Can you link the issues here, so it is easy to find them? Thank you!

We will link the tickets as per above.

@GretaD maybe you can tackle this preparation work first. Then we have a set of small tickets and distribute them across a bunch of people. Most work should be independent and can be worked on in parallel.

[nimishavijay]

Worked on updated mockups with @jancborchardt and came up with this:

Mobile view:

Includes 2 bigger enhancements which can be worked on separately as well:

• Single column layout Single column layout #3305
• Improved Add new property Design improvements to "Add new property"  #3304

Enhancements related to view/edit mode, including points from the original design review and previous mockups:

• Use vue components
• When a new contact is created:
  • It should be in edit mode
  • The name field should be focused and selected

View mode:

• None of the fields are editable in view mode
• They can be edited by clicking on an "Edit" button which takes you to Edit mode
• Fields which are not filled are not shown
• Don't show address books in view mode as it's kind of an obscure field
• Convert "Title" and "Company" fields to read more nicely in view mode, for eg. Analyst at Company

Edit mode:

• In edit mode, users can edit the properties and save using the "Save" button
• Fields in the header (name, title, company) should look like input fields with the appropriate placeholder when they are empty
• Fields that are not set are not shown
• Groups are always shown even if the contact is not a part of any group yet so that they can be easily added. It can be the second-to-last item
• Address book is shown in edit mode but as read-only (ie, similar to how it would be shown if it was in view mode). It can be the last item
• The properties that already exist (Phone, email, address) have an option to add another value using a "+" icon on the right (eg. add another phone number for work)
• Positions of all elements should remain consistent when editing (currently, "Title" field position shifts slightly when syncing to server)
• If contact name is empty:
  • Should default to "New contact" on saving
  • Or the save button should be disabled
• Order of newly added properties:
  • The newly added properties should appear in the same order as their position in the list of properties (If new "Phone" property is added, it will always show up as the first item, "Mail" is always second item, etc)
  • Scroll to the newly added property

Nice to have/future enhancements

• Switch between view and edit mode should not cause jumping around of text. The text is placed such that on changing to edit mode, the position of the text itself changes as little as possible, and only a border appears around the text indicating an input field.
• Switching between view and edit mode should not change the position of the Edit/save button either, esp. in mobile
• Avatar color should not change frequently when you are typing the name. Use UID to determine avatar color not displayName
• Don't show groups unless the contact is in a user created group (so "Recently Contacted" and other automatically created groups wouldn't be shown)
• View mode has quick actions and shared items

cc @jancborchardt and @GretaD :)

Moved into #3284

[st3iny]

The mockups look gorgeous! I extracted them to a separate issue at #3306. It may even be possible to split it up further and I'll have a look at that.

EDIT: Oops, there already is a ticket at #3305.

[GretaD]

I am also willing to help. The layouts from nimishavijay are looking great. How can we go on with this?

Hello and thank you for offering to help :),
I created some first good issue tickets from the long list: good first issue Good for newcomers
Feel free to pick up one that nobody is assigned yet and let us know if you need help to start. If you are an experienced dev and want to pick up a ticket that is a bit more complicated, that is also fine and very much appreciated, but please let us know here which one you want to pick, so together with the design team we can agree on how to approach it(if its not clear yet from the mockups). 😄

[ChristophWurst]

moved this from 🏗️ In progress to ☑️ Done

Because all major changes for Nextcloud 27 are done. The rest of the design improvements are done during stabilization phase when time allows.

[jancborchardt]

Closing as done, lots have changed since the review and it’s best to do a separate follow-up review. :)

[punkyard]

hi,
let me put my 20 cents in the subject again
It's a while I have posted request or remarks on Contacts
as you may see, there is nothing below the roll down menu for adding new fields in to a contact details
plus it takes a second click to access another restricted list

I suggest to unfold this roll down menu to a fixed list of all field types
one click on a field type and it is added to the contact details

thanks for your work and concern