New message composition UI/UX

[liliakai]

The new-message form is functional but ugly and needs an improved phonenumber validation UX.

[arnaudbenard]

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.

[James-Firth]

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.

[mcginty]

@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).

[James-Firth]

@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

[mcginty]

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.

[James-Firth]

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.

[tstirrat]

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.

[James-Firth]

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).

[tstirrat]

I was mocking that up too. It's possible, but my mock is in emberjs at the moment. On 9 Nov 2014 7:30 pm, "James Firth" notifications@github.com wrote:

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).

— Reply to this email directly or view it on GitHub https://github.com/WhisperSystems/TextSecure-Browser/issues/60#issuecomment-62336849 .

[tstirrat]

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?

[liliakai]

@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

[tstirrat]

app.window might work. Tho it will require a bunch of manual window management.

panels have the following functionality built in:

• Desktop edge snap
• Minimize (roll down)
• Auto hide when minimized, so they get completely out of the way of most apps.

From a usability point of view the packaged app.window has one benefit I can see - the app is available in the desktop app switcher (CMD-Tab).

I suppose we could write the app so that it uses panels (if enabled in chrome flags) , otherwise it uses app.window. Either way, we'd need to write the manual window management code for app.window ourselves.. :cry:

I have a basic mockup working here with panels, these fall back to popups when the flag is disabled. Popups are pretty much useless.. they have a standard window chrome and cannot be set to alwaysOnTop.

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);
});

[tstirrat]

Some more testing on app.window:

• Only one entry appears in the app switcher even if multiple windows are opened.
• The keyboard shortcut for closing a window (CMD-W on mac) does not work for these windows (but it does for panels)

panels give a much better UX out of the box. Such a shame they aren't enabled by default.

[tstirrat]

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:

• Verify fingerprints view
• Create new chat / add contact to current chat view (plus button)
• Settings view (e.g. to delete chat)

Some questions:

• Signal or TextSecure? will the names converge at some point for iOS and Android?

[dmix]

@tstirrat that UI looks good. Feedback:

1. the shadows are a bit strong behind the messages and header
2. the blue circle around the avatars looks too bright in the list view, grey or avatar might work better
3. icons sizing is a bit inconsistent, this is easily resolved in HTML/CSS implementation. Are you using the material design iconset?

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.

[tstirrat]

Icons are just a FontAwesome pack I found on github for sketch. Personally I don't really like them. I needed something to fill the spaces and outline the potential functionality. I can try a material design set tomorrow while I tweak those other things you mentioned. On 18 Nov 2014 10:49 pm, "Dan McGrady" notifications@github.com wrote:

@tstirrat https://github.com/tstirrat that UI looks good. Feedback:

1. the shadows are a bit strong behind the messages and header
2. the blue circle around the avatars looks too bright in the list view, grey or avatar might work better
3. icons sizing is a bit inconsistent, this is easily resolved in HTML/CSS implementation. Are you using the material design iconset?

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.

— Reply to this email directly or view it on GitHub https://github.com/WhisperSystems/TextSecure-Browser/issues/60#issuecomment-63599470 .

[tstirrat]

Updated shadows and removed blue border:

Still trying to find a better icon for adding a new person to a group chat. Something like glyphicons user-add

[tstirrat]

@liliakai is there a plan for TextSecure and Signal branding to converge? Or should I be basing this on TextSecure colors/logo?

[liliakai]

Yes, the plan is to converge on signal branding. On Nov 19, 2014 8:40 AM, "Tim Stirrat" notifications@github.com wrote:

@liliakai https://github.com/liliakai is there a plan for TextSecure and Signal branding to converge? Or should I be basing this on TextSecure colors/logo?

— Reply to this email directly or view it on GitHub https://github.com/WhisperSystems/TextSecure-Browser/issues/60#issuecomment-63670157 .

[liliakai]

@tstirrat

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...

[tstirrat]

@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.

[tstirrat]

I've made a few assumptions. Can you confirm if these are all correct?

• There is no online/offline status available in the protocol
• There is no "Bob is typing" hint in the protocol (yet?)
• We will not be displaying insecure messages in this client, so a lock icon on each message is pointless. (insecure messages are only sent over SMS?)

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.

[liliakai]

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.

[liliakai]

• There is no online/offline status available in the protocol
• There is no "Bob is typing" hint in the protocol (yet?)
• We will not be displaying insecure messages in this client, so a lock icon on each message is pointless. (insecure messages are only sent over SMS?)

Correct.

[tstirrat]

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?

[tstirrat]

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)

• Initially this will only show existing numbers you've messaged, but eventually we can connect to google/icloud etc for contact matching.
• Pasting or typing a full phone number could auto select the checkbox, to reduce the need for another click when sending a message to a single phone number.
• Warning shows on invalid number (no +xx prefix), all other symbols/spacing are stripped.
• Invalid number warning might need to be reworked when contact searching is in place (can match a partial phone number)
• Once you have checked at least one target contact/number, the message bar down the bottom appears. You can type a message and send immediately. Upon send, it will change into a standard chat panel.
• If the selected recipients are exactly the same as a private message or group that already exists in your history, it can/should send the message AND show the previous history.

Some caveats:

• The warning message color is just a placeholder. Not sure on what to do there yet.
• Checkmark icons are just a font. ugly. will fix.

[liliakai]

Do you think the code verification can work inside a panel like this? or better in a main chrome tab?

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.

If the selected recipients are exactly the same as a private message or group that already exists in your history, it can/should send the message AND show the previous history.

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...

[rileyjshaw]

@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.

[tstirrat]

@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]

https://www.dropbox.com/s/k0s297t3umhqme0/Signal.sketch?dl=0

[rileyjshaw]

@tstirrat awesome, thanks!