Conversation UI (Sneak Peek)

Here’s a very preliminary UI design for messaging. It’s modelled (read: stolen) from the stock MMS XML. I’m going to change what the status text says since the full date is just a placeholder. The icons signify “Sent via” and “Received via”. Here I’m messaging myself. Take a look at how long it takes to receive a sent message. Yeah, it’s much faster than Samsung’s implementation.

Edit: just noticed Google Voice incoming has wrong date. Beta indeed

I also find showing the contact picture EVERY message is ridiculously redundant while the service icon is both informative and provides a comfortable minimum spacing for touch input. The spinner in the top left changes the destination.

Oh yeah, dark theme is beautiful. Light looks boring by comparison.

Oh and that “Settings” text will be replaced by your standard “Gear” icon but I haven’t got around to doing so. From there I’ll add the “Add” button for MMS stuff.

You can get back to contacts by pressing back, the “up/home” button on the top left or, since this is a view pager, swiping to the left.

This was posted via my phone just now.


EDIT: I’ve made some more changes you can see here as per suggestions in these comments. I’m including a screenshot here since this post hit Reddit recently.

landscape example

29 thoughts on “Conversation UI (Sneak Peek)

  1. Izokronus

    The icons are actually a great idea. Maybe in the future you could use your own icons with a unified theme, because the current icons look a tad out of place, especially on the dark background. I’m hesitant to make any judgements about aesthetics though, since obviously this is a really early release.

    P.S. I chuckled at your GVoice messages from 43 years ago,

  2. LeoBloom

    I do agree that using the contact picture may be redundant but these icons make the conversation look a bit awkward – like I am communicating with GV as opposed to using GV to communicate.

    Perhaps, you could leave the contact pictures but have a smaller icon attached to each message’s contact picture to show what service was used?

    1. ShortFuse Post author

      Well, it’s the complexity of merging IM services. With one person that has a Google Voice and an SMS number, you have 8 different communications.

      Supposed your cell phone number ends in 1111 and your GVoice number ends in 2222.

      The person you’re contacting’s cell phone number ends in 3333 and GVcoie ends in 4444.

      SMS to SMS, SMS to GV, GV to SMS, GV to GV
      1111 to 3333, 1111 to 4444, 2222 to 3333, 2222 to 4444

      SMS to SMS, SMS to GV, GV to SMS, GV to GV
      3333 to 1111, 3333 to 2222, 4444 to 1111, 4444 to 2222

      It gets really complicated. In this case, this contact (me) has two cell phone numbers, SMS and GV. And I have two methods of communication. It works out being Sources * Destinations * 2.

      This means, per outgoing message, you have all this
      Who you’re sending it to (Contact Picture)
      The sending Service (SMS or GVoice)
      What the receiving service is (SMS)
      What the destination address is (the phone number)

      Per incoming message you have:
      Who you’re receving it from (contact picture)
      The receiving service (SMS or GVoice)
      The sender address (which phone number)

      You have to admit, it’s very complex. It is literally impossible to include all that data and yet not be bloated.

      I’m planning on using the status text to say “Sent via GV at 3:14PM” or something like that. From there the icon will be redundant. I’ll have to find a balance and maybe make it completely dynamic. What if the person has TWO cell phone numbers (like this example).

      Also, this doesn’t work for Group Messaging. Group Messaging would have to switch to contact picture.

      1. LeoBloom

        I see that it is a bit more complex that I assumed.

        The “sent via” idea is good, instead of using the icon over and over. I’m wondering if it would be a good idea to have the app default sending the reply to the app that the sender used to send the last message, for a more seamless talking experience.

        1. ShortFuse Post author

          Yeah, it can be set it up like this:

          IM Service Switching
          A. Automatically switch based on last received message
          B. Warn me before sending a message
          C. Never switch

          I think B would be default, with a little checkbox that includes the option “Always automatically switch”.

          B would be after you hit send, the app would warn you if it looks like you’re sending to the wrong person. This won’t be per message, but rather once per switch.

          I’m excited to see this working with more services, specifically Reddit and Steam.

      2. Muze

        I think part of the goal of unified messaging is that we don’t WANT any of that information, it should happen in the background.

        I love the way this looks by the way. I’m too excited.

  3. Shane

    I’m seriously in love with you. I’m counting the moments and checking this site fervently for some sort of, any sort of release. :)

  4. izokronus

    I do agree with LeoBloom that the icons look as redundant as contact pictures would. Maybe color coding would be better? Something like this instead would be more appealing (I just threw this together in PS in a few minutes).

    Or if you wanted to include contact pictures:

    (blurred out your number this time)

    I personally prefer contact pictures. Any way you decide, though, great work so far!

    1. ShortFuse Post author

      Yeah, that is slimmer. The only issue would be that not all services have a unique color system. I’ll figure something out. Thanks for the suggestion.

        1. ShortFuse Post author

          True. Right now, I’m thinking SMS as holo-green, GV as holo-blue (their default colors), google talk as white, reddit as red, steam as gray. Facebook as dark blue.
          This would just be default.

          I wanted to include Skype but that’s pretty close to Google Voice’s blue. Skype is last anyway. It’s just the only messaging mobile+desktop messaging services for iOS, Android, Mac OS and Windows I can think of.

          Edit: Google+ would orange. Why does Google even have Google+ messenger!?

          1. Kris

            Wait…shouldn’t Reddit be orange and Google+ be red? Wouldn’t that make more sense according to the color schemes of those services?

  5. Kelaos

    Can’t wait for that public beta you’ve mentioned!

    As for constructive criticism:

    I agree the status text is a good idea to differentiate messaging platforms.

    However I’m actually a fan of having the contact picture on each message, like LeoBloom suggested perhaps you could overlay a small icon that shows which platform it used though?

    Either way in the end options are best so people can pick what they want.

  6. Evan

    If the sender only has one number ever used (GVoice) and only ever sends to one recipient per number, my question is why should I care what service it’s being sent by, so long as it’s the right one?

    What I’m saying is that I could care less about seeing it’s being sent from Voice, so long as it’s being sent by Voice. There’s only one contact I ever text with my real/T-Mobile number (a shortcode). If I never use my phone number, would it be possible to disable this view in settings/something/somewhere?

    1. ShortFuse Post author

      Yes. In Settings, you can modify all the visual aspects of a message. You can check on/off things you don’t want. It’ll have a little preview window to see what your final UI looks like.

      For more advanced users, you can include your own .xml and .9.png for a full blown customization.

  7. Fuzzy Dunlop

    I agree that the contact pic on each message is redundant, but is there going to be some kind of contact display pic in the convo thread?

  8. Andrew Baker

    I think you should still show contact pictures within the thread because the icons really seem out of place, yes contact pictures are redundant, but they just work. If a user wants to know what the message was sent via, they should tap on the message like the stick messaging app and it’ll display all the regular information along with which services it had used. Thanks for your work though. Much appreciated, cheers.

  9. Korben Rusek

    I prefer swiping left and right to do like Google talk does–switching between recent conversations. You just have to update the spinner between conversations.

    Swiping to go back the the conversation list is unintuitive/weird to me. Unless it instead reveals a conversation list panel.

    Either way, I can easily get used to this method, so no big deal.

    1. LeoBloom

      I don’t have very much experience with Google Talk’s implementation but if you have upwards of 3 conversations going on at any given time, it seems that it would be faster to get to them by swiping once to the conversation list and then selecting the contact you wish to speak to.

    2. ShortFuse Post author

      Far left is contacts. So we’re talking about
      Contacts => Conversation => Conversation => Conversation

      It’s just an extra panel and you don’t have to fish for the back or up button. You can slide. It’s better for one handed use. I see no drawback whatsoever. Google Talk forces you go press back to get to your contacts. This gives you the option to slide as well. Pressing the back or up button will send you back to index 0, which is pretty much the same thing.

      1. Muze

        does it follow the sliding menu format? that is, will swiping from the far left edge always bring us to the contact list while swiping left to right from the middle of the screen will go left one conversation?

        1. ShortFuse Post author

          That sounds kinda complicated and somewhat unreliable.

          It’s just a view pager where the first page is the contacts. Press back to get to contacts or go all the way to the left. I guess when you use it, you’d understand. The Android home screen is a view pager, as is Google Play app.

  10. Jamin T.

    Wow, it’s so great to finally see a UI! Just a little something to think about: if you’re going to stick with icons to differentiate services, it would probably be best to make them monochrome. For a dark background, they’d be white, for a white background they’d be grey or black. I’m sure you’re probably not thinking at that stage of design so early in the UI development, but here’s a little mockup anyway:

  11. ryan

    I love this idea; it’s the number one thing I miss about webOS.

    Regarding contact pictures vs. service icons, I appreciated that webOS used contact pictures. Contact pictures give a me the quickest, fail-safe way to determine which person said what (vs. remembering which side my text is on.) The whole point of an integrated messaging app is to care less about what service you use and more about who you’re talking to.

    I also found that once a conversation was started on a service (indicated by a horizontal rule with a service icon) my conversations generally continued to use that service until the conversation was over; one service indication was enough. izokronus’s colored edges also seem like another nice, unobtrusive way to indicate service.


Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>