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.