design and icon parity with the official signal clients

[Trolldemorted]

trafficstars

would be a nice thing to have, obviously.

[Trolldemorted]

Ok, let's go:

Signal Android has:

• the thread list view
• Android's edit/create contact view
• the edit/create group view
• the thread view
• the message detail view

Signal-Windows has:

• the MainPage Since we want a responsive design, the MainPage has to cover the functionality from both the thread list and the thread. Depending on the window width we should hide one of them, and add a back button if the thread list is invisible, which switches the visibility of the thread list and thread. Both need to trigger actions:
  • thread list needs: search, add contact, add group, export (?)
  • thread needs: search in chat, edit contact/group, leave group, set disappearing messages, notification settings. I suggest a context menu behind a hamburger menu, as this is too much for individual buttons.
• the AddContactPage It can also edit contacts, despite the name. Since editing and adding is more or less the same anyways, i suggest we use one page for that. #45 is looking great!

Our setup pages are a bit different from Signal-Android, so lets keep them separated:

• the StartPage We support both registering as a master device and provisioning as a slave device. It should offer a choice between these two, and provide a brief description that non tech-savvy users will understand.
• the RegisterPage Should guide you through the registration process
• the LinkPage Should guide you through the linking process

[golf1052]

This sounds good. I only recently acquired an Android phone (no SIM, still using my 950) so I just did some poking around the app.

I figure our app should look somewhat similar to other UWP messaging apps. Looking at Facebook Messenger and Skype:

• When the app window is wide enough show both the contacts list and the chat window for the selected contact
• If it is too small (or on a phone) show either the contacts list or the chat window for the selected contact. The user can then switch between the two.

Neither of these apps edit contacts this way. I would think the best way to edit a contact would be with a UI element somewhere on the thread view. I think this makes the most sense instead of what we have right now. For example how would it work if you have a group view? If you have the edit contact UI element in the thread view then that solution would work for both single and group chats.

All the other ideas look good. I'll attempt to start mocking things up this weekend.

[Trolldemorted]

Do you mean an element in the thread view that opens the edit contact page, or realizing the entire edit/add contact functionality inside the thread view?

[golf1052]

OK here are some page designs. These aren't completely finished yet but they should give a rough idea of what things should look like. I haven't included the account/group management pages yet.

The logo is a placeholder for now.

https://xd.adobe.com/view/40b2673c-075b-4755-8ee8-32006d658c4d

[Trolldemorted]

Nice!

I have asked a couple of my friends, this is our feedback:

• center the username & number in the title?
• color the title like the contact's messages?
• what do we do with multiline input? expand the input textbox a little?
• hamburgers/waffle/3dots for the thread list and the thread view?
• before we can display a qrcode, we have to generate keys and talk with the signal server - this might take a while (or fail), so we should have to display something in the meanwhile
• we could be nice and also display the tsdevice string under the qrcode for signal-cli users
• slave devices can have a custom name, the link page should contain a textbox to enter one
• do we want a connected/disconnected indicator somewhere on the mainpage?
• the thread list searchbar looks a little strange, maybe we should increase its width?

[golf1052]

Updates: https://xd.adobe.com/view/40b2673c-075b-4755-8ee8-32006d658c4d

Changes

• Increased the width of the conversation list
• Added add contact page design
  • I want the add contact page view and the edit contact page view to be separate. If the pages were the same how would we distinguish (in code) if we wanted to create a user or if we were editing a user? I feel like it would be cleaner with two separate pages. On Signal Android it looks like contact editing is partially linked with the system. We should maintain a contact system separate from the system. Only allowing the user to edit only name and number is fine for now.
• Added placeholder for create group page design
  • I noticed with Signal Android when creating a group chat the app wants you to use contacts it already knows about. Playing around with Messenger and Skype they are very similar. They all let you select from a listview with checkmarks on selected contacts. They also let you search using a textbox at the top of the view. Because of all this I think that the user should only be able to create group chats with known contacts (contacts in the app). Adding a way for users to create contacts on the fly on this screen would be hard to do in a UI. If a user wanted to create a new contact for a group chat they would first create the contact then they would add that contact to a group chat.

Regarding your comments

center the username & number in the title?

done

color the title like the contact's messages?

done

what do we do with multiline input? expand the input textbox a little?

yep we should expand the text input box up to a maximum height

hamburgers/waffle/3dots for the thread list and the thread view?

I want to try and avoid adding a hamburger menu but what do you think needs to be in it?

before we can display a qrcode, we have to generate keys and talk with the signal server - this might take a while (or fail), so we should have to display something in the meanwhile

will add next revision

we could be nice and also display the tsdevice string under the qrcode for signal-cli users

done

slave devices can have a custom name, the link page should contain a textbox to enter one

done, the signal desktop app does this on the page after the QR code making sure the user knows what number they are connecting to

do we want a connected/disconnected indicator somewhere on the mainpage?

will add next revision

the thread list searchbar looks a little strange, maybe we should increase its width?

increased the width of the entire conversation list

[Trolldemorted]

• add/edit contacts The backend must be able to handle the difference anyway, because we can have contact updates for both existing and non-existing contacts ariving at any time. Handling this in the frontend should be easy: just write the current phone number, name and icon and color to AddContactPageViewModel before navigating and rename "add" to "save"

• add/edit group We could go the same way here. Provide the viewmodel with current state, "lock" every group member that is already in, and otherwise clear title, icon, and memberships before navigating

• conversation settings Signal-Android has different pages for editing contacts and editing contacts' conversation settings (mute, notification sounds, vibration, color, view safety number, block). Should we do that too?

• thread page hamburger It needs to be able to trigger:

  • open disappearing messages page/dialog
  • view all sent/received media with an option to delete items (?)
  • edit contact (?)
  • open contact conversation settings (see abve)
  • reset session (i think we definitely need at least this before we release a beta version)
  • call (in the future)
  • verify safety numbers magic for non-group conversations

• thread list page hamburger It needs to be able to trigger:

  • add/edit contact page
  • add/edit group page
  • mark everything as read
  • import/export page (later)
  • submit debug log (?)
  • link new device page (later)
  • global settings page/dialog for e.g. default ring/vibration settings, language, linked devices, wifi-restrictions for media types, font sizes, automatic trimming of conversations

If we don't need a hamburger i'd be happy to drop it, but i don't think there is an easy way to offer all of this in an intuitive way without it

[golf1052]

More updates: https://xd.adobe.com/view/40b2673c-075b-4755-8ee8-32006d658c4d

The settings icon on the main page will control the global settings.

[golf1052]

I'm going to start redoing the UI with the designs I did. The only things that are missing from the designs are the Create Group Page and the Global Settings Page.

[Trolldemorted]

Great! The group editing and global settings are no showstopper for a windows store beta release, archieving feature parity with Signal-Android will take a while.

Is the 3 dots button the uwp-ish way of settings menu? I have seen screenshots of hamburger and waffle buttons, but i am using uwp apps very rarely.

Other things that came to my mind during the last few days:

• is the gear button uwp-ish?
• we need a way to attach files to a message
• Signal-Android is putting the conversation search bar next to the "signal" badge, and fades the badge if you are searching. Do we want to copy that? We might be wasting precious height on small devices

attachment stuff:

• attachments should not always start automatically
• attachment download should be startable
• attachment download should be canceable
• attachment download progress should be displayed
• attachment file name should be visibile
• attachment save/export button/element should be fancy
• images should be displayed
• audios and videos should offer playing

Long term stuff:

• we need a text search button
• we need a UI for text search that feels comfy on desktops and phones
• we need a call icon
• we need a "you are being called"-page, or a popup
• we need a "you are calling" page

[golf1052]

I've started the redesign, it's viewable in the redesign branch. There's also a new logo idea. Only updated the StartPage and RegistrationPage for now. Also any page that I update I'll make sure it resizes correctly on mobile as well.

Responding to a few things from above.

Is the 3 dots button the uwp-ish way of settings menu?

It really depends. The places I'm using it, it makes sense to use 3 dots.

is the gear button uwp-ish?

It should be, the Groove Music app also uses it to identify the settings menu icon.