Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Design spec: Contacts menu #207

Closed
jancborchardt opened this issue Jun 23, 2016 · 41 comments
Closed

Design spec: Contacts menu #207

jancborchardt opened this issue Jun 23, 2016 · 41 comments

Comments

@jancborchardt
Copy link
Member

Reasoning: We want to integrate contacts more nicely into Nextcloud and allow people to quickly communicate with their friends. This includes text chat, voice/video call, email, sharing and other means.

For this we decided to go for an icon in the top bar between search and the user menu which is always there. Tapping on it will expand the Contacts dropdown. We went with this over a permanent sidebar because it’s less distracting/intrusive and works nicely regardless of active app or form factor. (In Files for example there would otherwise be two sidebars on the right.)

cc @nextcloud/designers @LEDfan @sualko @Henni @karlitschek @schiessle

Normal state
contacts dropdown

With actions expanded
contacts dropdown actions

Detailed specs:

  • The contacts are sorted by last interaction. It’s easiest and most obvious for the first iteration. (Instead of also factoring in frequency etc)
  • On opening the dropdown, the search field will automatically be focused so people can directly type to filter.
  • Below the name the last chat message is shown.
  • Tapping on the area of picture, name, message etc opens a chat window (a panel down below like in the chat app).
  • The most used action with this contact (call, share, mail) is directly shown. Next to it there’s a 3-dot menu with the other actions, just like in Files.
  • In there is an entry »Details« to show the other contact details. This could be done by a modal/card with information from the Contacts app to not break the flow. But as a first iteration, a direct link (in a new tab) to the contact entry in the Contacts app is fine. This card should be a global thing we can show everywhere where there’s a user name + picture.
  • Scrolling will load new contacts via lazy loading. At some point (after say 25 people) there’s a link »Show all contacts …« which will lead to the Contacts app.
@jancborchardt jancborchardt added enhancement design Design, UI, UX, etc. 1. to develop Accepted and waiting to be taken care of high labels Jun 23, 2016
@jancborchardt jancborchardt added this to the Nextcloud Next milestone Jun 23, 2016
@MorrisJobke
Copy link
Member

This card should be a global thing we can show everywhere where there’s a user name + picture.

Check out how discourse does it (by clicking on the avatar):

bildschirmfoto 2016-06-23 um 14 43 21

@enoch85
Copy link
Member

enoch85 commented Jun 23, 2016

Really hot! 🔥

@jancborchardt
Copy link
Member Author

Other examples of these account cards are Diaspora, Facebook and Twitter:
diaspora card
twitter card

@karlitschek
Copy link
Member

@leonklingele

@oparoz
Copy link
Member

oparoz commented Jun 27, 2016

Since having the Contacts app is a requirement for this feature, shouldn't this issue be created there? Surely people who don't have the app installed won't see the new icon.

@Bugsbane
Copy link
Member

Bugsbane commented Jun 28, 2016

Overall, I like it. I like the contacts dropdown concept (much less obtrusive than a full sidebar) and the idea of using it to introduce people to ways they can communicate / share with those users.

It seems to me that there is already a lot of pre-established convention for clicking on an avatar icon bringing up info on the contact, rather than opening chat (which may not be installed anyway, unless this is going into Nextcloud core).

Currently just about every social network, forum and major mobile operating system I can think of brings up the contacts details when you click on a contacts avatar (as opposed to say the last message under their name etc).

Relegating this function to having to click on a three dot menu next to their name, and then on a second "Details" icon seems unnecessarily complex. What about, if clicking:
The avatar / username - brings up the contact details
The last chat message - brings up chat (possibly display a generic message instead of their last message if they haven't been chatted to before).

I'd also suggest that users be able to star contacts and then have those display first, with unstarred, but recently interacted contacts just after, much like how the Android phone app displays contacts.

Also, As long as we're making this dropdown a discovery point for real time chat / video calling, it could be useful to display when users are online and available, possibly with the common small green circle often seen in the bottom corner of many apps to denote being online, and maybe listing those online users preferentially, as in this mockup (click the image - it's tricky to make out with the screenshot shrunk small):
contacts-im

@sualko
Copy link
Member

sualko commented Jun 28, 2016

I like the idea and design 👍 . For our chat it would be helpful, if there is a good api which enables us to inject buttons like chat, call, video etc..

@jancborchardt
Copy link
Member Author

@Bugsbane good suggestions! Especially the online indicator makes sense, if that’s possible. The starring should be integrated of course.

About the clicking-avatar-to-chat: In Nextcloud, communication takes priority over a personal profile at this point. We don’t even have the possibility to view other people’s profiles currently, so there’s nothing to show. ;) For now, opening a chat makes way more sense to directly communicate and collaborate.

@Bugsbane
Copy link
Member

Bugsbane commented Jul 1, 2016

We don’t even have the possibility to view other people’s profiles currently, so there’s nothing to show.

I was assuming that we were using contacts from the contacts app, and so clicking the avatar would show details from the contact in the contacts app. It seems though, that you're thinking that the contacts from this menu are actually other users on the Nextcloud server (and possibly from trusted federated servers?).

Thinking about this, it seems that this actually touches on a much larger interaction issue - namely how contacts in the contacts app (used by the contacts and mail apps) relate to other Nextcloud users (which is presumably what the chat app and Spreed.me app uses). Right now, we seem to have two completely distinct lists of people that the user is exposed to - Nextcloud users and the people in the contacts app.

For example, does it make sense for someone the user knows to have two different contacts, one the user created a contact for in contacts and sent an email to in the mail app, and another for chatting with because they're on the same server in the same group... when both of these contacts are known to Nextcloud (by cross referencing Conacts with the user list) to be the exact same email address or federated cloud ID? If we choose to "smart link" Nextcloud users with contacts in the contacts app, then maybe the contacts app should already be showing people that they would be able to chat with / contact that they haven't added contact for already, but then you get into those contacts either not being synced with Caldav, or people potentially getting contacts they didn't personally create popping up on their phones etc...

I'm not sure what the overall best answer is, but it does seem to me, that users expect to think in terms of a single list of contacts that they know, to varying degrees, and not to have to understand the technical differences between a contact via being in a shared group of a specific Nextcloud server, vs a contact added by sending an email in the mail app.

@crossix
Copy link

crossix commented Jul 6, 2016

I agree with @Bugsbane It would be nice if there were a way to "link" or "smart link" a contact from the contacts list to one that exists in the Nextcloud users area say via the email fields. It's never really made sense to me as to why these two are separate areas with no link in between. I've often wondered if there was a way to expand upon the users area instead of just being able to add / remove users, change passwords, etc; to also include contact info for that user. Yes this could be possible with LDAP, but what if you aren't using LDAP integration?

You wouldn't always have to link contacts (you could still create contacts separately), but if the user existed in the users area give to option to do so.

@icewind1991
Copy link
Member

icewind1991 commented Jul 6, 2016

Since having the Contacts app is a requirement for this feature, shouldn't this issue be created there? Surely people who don't have the app installed won't see the new icon.

Iirc with 9.0 contacts are stored by the dav app (always enabled) with Contacts just providing the web interface

@MariusBluem
Copy link
Member

MariusBluem commented Jul 6, 2016

That is correct. Tables for Calendars and Contacts are created in the DB ... Even if the frontends are not installed 😉

However: I dont think it makes much sense to show this widget, if the app is diabled 😜

@jancborchardt
Copy link
Member Author

In any case we're going a bit deep overboard with this discussion and too much into wall of texts it seems. ;) We have enough to build a great first iteration, so let’s focus on getting that done. :)

@oparoz
Copy link
Member

oparoz commented Jul 8, 2016

Iirc with 9.0 contacts are stored by the dav app (always enabled) with Contacts just providing the web interface

Indeed, but that DB needs to be populated one way or another. I guess that if it's empty, you could show a message, inviting the user to install the Contacts app to be able to quickly share a document from the top bar, but I'm wondering if share should even be there. Wouldn't you start by selecting the document and then share it instead of selecting a contact first from the top bar? (It's not the same as sending a document from a chat)

Also, the specs as described in the OP have another dependency. You need a chat app installed for some of the features to work (show last message, opening a chat window). I'm guessing a lot of the described actions require if-else blocks, but it's not clearly stated and is it the best solution or should a plugin system be put in place, so that apps can add their own actions?

@oparoz
Copy link
Member

oparoz commented Jul 9, 2016

Never mind, this is purely a specs discussion, not an implementation one.

I have 2 comments then:

The most used action with this contact (call, share, mail) is directly shown

I'm not sure this will work. In my experience, automation almost always gets in the way. Sure the action I want will always be in the 3 dots, but then why have 2 icons?

Secondly, you have to be careful with the sub-menus and modal cards on mobile, it can quickly become a pain to use when content auto-scrolls or you have to zoom, etc.
Maybe we could get some screenshots on how it would look on an "typical" HD mobile screen?

@Bugsbane
Copy link
Member

Bugsbane commented Jul 9, 2016

You need a chat app installed for some of the features to work

Contacts is currently slated to be an installed-by-default, core app, right? Is this the case with the chat app also? (Will the default chat app be Spreed?)

@MariusBluem
Copy link
Member

Contacts is currently slated to be an installed-by-default, core app, right? Is this the case with the chat app also? (Will the default chat app be Spreed?)

Uhm... No. I think you need to enable them. Also with Nextcloud 10 😕

Maybe we should move the discussion to our forum, to keep this Issue as clean as possible.

@oparoz oparoz added the spec label Jul 11, 2016
@LEDfan
Copy link
Member

LEDfan commented Jul 14, 2016

So, I have been thinking about this for the last couples of days and here are some thoughts:

  • I'm quite sure we don't need the Contacts app as a dependency. The Contacts are now stored in core, and all the users are stored in the system addressbook anyway.
  • XMPP has it's own "contacts" inside, this is the roster. Currently the roster of OJSXC is created when requested on basis of the userManager. This could be changed to use the Contacts manager. XMPP also support vcards for more information.
  • Currently for OJSXC no chat messages are stored. However this can be implemented (refs See complete history (XEP-0313) jsxc/jsxc#150)
  • If spreed.me would support XMPP as chat backend (which I think could have some great benefits) the chat system inside Nextcloud and inside Spreed.me could be 100% the same. (because they are both using the same XMPP server) XMPP Gateway strukturag/spreed-webrtc#286
  • We should support both the internal XMPP server of Nextcloud and an external XMPP server. The external server should be for bigger and more advance installations of course.

@jancborchardt
Copy link
Member Author

@LEDfan @sualko you should get involved in the planning discussion on integration of the video chat and text chat! :) At nextcloud/spreed#35

@MorrisJobke
Copy link
Member

Something for 12

@MariusBluem
Copy link
Member

Summoning @skjnldsv @Henni @irgendwie for this one. Do you guys know if the contacts app currently supports such URLs? If so, which format should be used? Thanks :)

I think this was done with owncloud/contacts#323, and the format is something like https://localhost/index.php/apps/contacts/#/all/2cbf6908-4a5b-403f-8e68-77165679b3bb 😁
@ChristophWurst

@skjnldsv
Copy link
Member

It's wih the default group: All%20contacts :)

https://localhost/index.php/apps/contacts#/All%20contacts?uid=2587a92d-f70e-4d75-a5ad-938b699669c8

@ChristophWurst
Copy link
Member

It's wih the default group: All%20contacts :)

https://localhost/index.php/apps/contacts#/All%20contacts?uid=2587a92d-f70e-4d75-a5ad-938b699669c8

Yeah I figured that too, but apparently it's localized, so I wasn't sure if this works for all users.

@skjnldsv
Copy link
Member

I can add a redirect to a single uid easily if that's what we need :)

@ChristophWurst
Copy link
Member

Yup, that would be great 🚀

We can either handle this in the contacts app client-code or have a dedicated route where we redirect the request to the according address book.

@jancborchardt
Copy link
Member Author

@ChristophWurst Share should open a filepicker - what do youtl think? :)

@ChristophWurst
Copy link
Member

Really? I did not expect that. So what would happen after I presumably select a random file with the file picker? Are you planning to duplicate the file sharing workflow?

In order to implement this, I need more details. Please describe what and how all the actions should work. Ideally, some mockups would be really helpful here :-)

@jancborchardt
Copy link
Member Author

Ok so first let's talk about if it makes sense. My idea would be:

  1. You click share on a friend
  2. Filepicker opens (problem is, how do you share stuff like contacts or calendars?)
  3. Choosing a file could simply directly share it, with the default permissions. No opening of sharing sidebar etx.

How would you expect the flow @karlitschek @ChristophWurst?

@karlitschek
Copy link
Member

Well. Tricky. Sharing files, calendars, contacts are in deed difficult. Maybe this was a bad idea from me in the first place. ;-) Maybe this menu should do stuff like, send mail, start chat, call, show contact details, ... But probably not sharing. At least I'm also unsure how the flow here should work ;-)

@skjnldsv
Copy link
Member

I say, let's focus on simple actions like chat, call, show contact... And we'll see after the implementation if this is difficult enough and/or worth the work?

@jancborchardt
Copy link
Member Author

@georgehrke will work on making it happen for everywhere an avatar+username is shown. On click, it will simply show the dropdown menu with the actions. :)

@MorrisJobke
Copy link
Member

Implemented with #3233

@alexeyvolkoff
Copy link

Hi, is it any option to limit the list of users in the dropdown to group(s) a user belongs to, or circle?

@beerlao
Copy link

beerlao commented May 24, 2017

Wouldn't it make sense to at least give an option to hide local users in contacts menu or limit them to the same group? Then only contacts from contacts app or the same group would be shown. Otherwise users will be able to see contact details and contact images of other users on the same NC12 instance.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests