-
-
Notifications
You must be signed in to change notification settings - Fork 2.6k
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
New message composition UI/UX #60
Comments
A bit hacky (expensive jQuery method) but a good start. I think most of the people use https://github.com/thedersen/backbone.validation for that kind of things. |
I feel like I saw someone (maybe @mcginty?) mention updating the Android TextSecure to Google's Material Design Guidelines so I figured I'd give it a shot with the browser version. Here's a WIP picture. I'll probably re-do this once we get the dependencies figured out and de-minify the manifest.css file. |
@James-Firth yeah, I've started work iterating on TextSecure's material rework. Small note based on the material guidelines from what currently have: I think there must only be one FAB per view, and it can barf out multiple options once hovered (see inbox.google.com). |
@mcginty Sweet, I'm excited to see that UI rework :) Hm, yeah that makes sense since creating a new thread/new group convo is similar enough to group under one initial FAB. Just as a note with the new material designed Google Maps they use multiple FABs in one view. Just something to consider for other UI decisions. http://imgur.com/a/X9TC1 |
Yeah, I just noticed that too. It seems more justifiable on their end though since the FABs serve totally different purposes, whereas ours would be two composition buttons. |
Yeah, I agree. Bit swamped with school work but I'll post new pics when I have a chance to make more changes in a few weeks. |
Have you considered using "panels"? It's the window style used by Hangouts. It's not enabled by default in Chrome (yet), you need to enable it here: chrome://flags/#enable-panels But it greatly improves the simplicity and usability of the chat experience. I've been working on a mockup to try it out: It's enabled by default in Chrome Canary, so I am hoping it will be available in the stable release soon. It drastically improves the experience when maintaining chats with several people because the windows are always on top, but can be minimized to stay out of the way of your browsing. |
Personally I think both style have advantages so it's something worth discussing. I like Hangouts most of the time but sometimes the panel system can be annoying. I wonder how difficult it would be to make it a setting to split each convo into a panel or to have them all in one (Skype used to do this in their desktop app). |
I was mocking that up too. It's possible, but my mock is in emberjs at the
|
In regards to the button, how about a single button for [new chat] and then allow for multiple contact selection in the next dialog to determine the single/group nature? |
@tstirrat Panels are nice, but it seems like we would have to convert to a chrome packaged app to use them: https://groups.google.com/a/chromium.org/forum/#!topic/chromium-extensions/oh-ztVT6Xok ...Not that would be a bad thing, mind you. As a packaged app, in lieu of waiting for panels support we could forge ahead with the frameless windowing api already available to chrome apps: https://developer.chrome.com/apps/app_window |
panels have the following functionality built in:
From a usability point of view the packaged I suppose we could write the app so that it uses panels (if enabled in chrome flags) , otherwise it uses I have a basic mockup working here with panels, these fall back to Thinking purely out aloud here. Could we have a step in the initial registration flow that suggests the user enable the chrome flag.. or is that the worst idea in the world.. ? Edit: Couldn't find a way to check for a chrome flag, but we can at least check for the ability to create panels: var hasPanels = false;
chrome.windows.create({ type: 'panel', width: 0, height: 0 }, function (win) {
hasPanels = (win.type === 'panel');
chrome.windows.remove(win.id);
}); |
Some more testing on
|
Been playing around with some ideas in Sketch. Note. I'm not a designer.. just a JS guy. But hopefully this can kick off some more discussion about UI. Other designs needed:
Some questions:
|
@tstirrat that UI looks good. Feedback:
Overall though I like it. I used to be a designer, but I should note I switched entirely to programming a couple of years back so my skillset is not current. |
Icons are just a FontAwesome pack I found on github for sketch. Personally
|
@liliakai is there a plan for TextSecure and Signal branding to converge? Or should I be basing this on TextSecure colors/logo? |
Yes, the plan is to converge on signal branding.
|
Those mocks look nice. Don't forget that group chats can have an optional associated photo that should be displayed on the group chat view as well as in the conversation list. I like the idea of defaulting the group photo to a collage of contact photos, but consider the edge cases of more than a few members or when no one has a photo... |
@liliakai sure, I imagine it will replace the mosaic icon on the main window. In the group chat window, I am not sure showing the group icon has much purpose. Some updates: edit: turns out no one likes the inset shadow.. it will be removed. |
I've made a few assumptions. Can you confirm if these are all correct?
Some other thoughts.. Where will the contacts come from? It will be horrible to expect them to add a phone number manually, and then browse/select an image from their desktop machine. Would we eventually integrate into Google/iCloud contacts for this? TextSecure on android gives you the contact list with the TextSecure users at the top.. That works really well. |
We'll need to do some kind of contact import, perhaps from Google/Apple or perhaps directly from your phone, though the details there are still TBD. |
Correct. |
Was playing around with some ideas on the flow for the first time setup: The buttons here are placeholders. they are ugly. but I was mostly trying to work out if a single page or 2-step flow works here. (my pref is on 2 page flow) Do you think the code verification can work inside a panel like this? or better in a main chrome tab? |
Draft of the "new chat" flow: I imagine this will start with in a newly created panel (which will sit to the left of the main window)
Some caveats:
|
I think it makes more sense in a tab. The smaller popup panels are perfect for active conversations, definitely, but for pretty much anything else (contact/conversation management, settings page, etc...) it's really nice to have the extra breathing room provided by a tab, in much the same way that you can search, view, and manage your old Hangouts chats in Gmail.
Yes, almost. Except in the group case, it should be possible to create two different groups with the same member lists but different group names/topics. For instance, I might have a long lived group chat called "Besties" with Alice and Bob. Then I start a new group with Alice and Bob called "Cryptoparty planning committee", to which we can later invite Carol... |
@tstirrat the designs look awesome. I'm writing a panelled version of the interface right now, have you implemented any of the above or are they still at the mock stage? Don't want to reinvent the wheel if you've already started working on this. |
@rileyjshaw Great! Feel free to work on anything you want. I haven't done any more than the mockups in Sketch. I'll upload the Sketch file and link it here tonight so you have the master to work from. I've been busy with some other commitments, so haven't got any further on it, yet. |
@tstirrat awesome, thanks! |
The new-message form is functional but ugly and needs an improved phonenumber validation UX.
The text was updated successfully, but these errors were encountered: