28

I love chatting, but sometimes I have to move around, which means I must face the mobile interface for chat. The experience is extremely frustrating. I have mocked up a relatively simple change to the mobile chat interface that alleviates a lot of these problems.

Here is the mobile chat interface as it stands:

enter image description here

Things to note:

  • I can't star things, or see the star list
  • Space is limited, yet the menu button gets a whole bar to itself at the bottom of the screen
  • I can't reply to messages, I have to manually type out my @replies, which is often tedious on a mobile keyboard.
  • Hitting enter does not send, I must hit the send button, which is for some reason undersized.

Here is my proposed improvement:

enter image description here

The menu button is moved next to send. Both buttons are larger. Looking at this now, perhaps this isn't great and menu could be moved to the left of the text box, but still, more vertical space: woo!

The other change is squashing the messages slightly to make room for an action button, which pops up a menu over the message:

enter image description here

This allows me to easily, using finger-friendly buttons, star, reply and flag messages at the sacrifice of a little space.

Some other things to note:

  • Replace the <textarea> with an <input type='text'> so that it will trigger the form on return. I lose the ability to send multi-line messages, but honestly, I don't care.
  • Make the menu a little friendlier, there's room for larger buttons.
  • This is a rough mockup, I'm sure the UI gurus at SE can do a better job with making it look awesome, but I just want to demonstrate that a friendlier interface is possible.
7
  • I would also like an option to edit/delete messages that aren't the last one posted. (Using the option menu maybe?)
    – Ronan
    Commented Apr 9, 2013 at 16:00
  • @RonanForman On this layout there's room for an 'edit' button on the overlay, which could be added to your own messages potentially.
    – fredley
    Commented Apr 9, 2013 at 16:02
  • 5
    I love you. Do you do freelance design work?
    – casperOne Mod
    Commented Apr 9, 2013 at 18:44
  • @casperOne I have been known to in the past...
    – fredley
    Commented Apr 9, 2013 at 18:59
  • RE: The textarea thing: They don't have to make it an <input> for that... It's a simple matter of listening for the enter key with JS.
    – J.Todd
    Commented Jul 2, 2014 at 21:11
  • @jt0dd This is exactly what I've done with ChatSEy
    – fredley
    Commented Jul 2, 2014 at 21:13
  • @fredley oh man.. Why not host that as a web app?
    – J.Todd
    Commented Jul 2, 2014 at 21:17

2 Answers 2

13

Why add buttons? Don't add buttons. There is already a visibly distinguishable area that you could use as a button. It's the message area itself. You're also not handling the situation where somebody posts a monologue (more than one message in a row).

Here's how I'd like chat to behave. This'd also fixes the problem I have with tapping to somebody's user profile accidentally. Happens all the time.

enter image description here

Did you know? Balsamiq Mockups is fun to mess around with! Things is, ideas are cheap, manually adjusting shapes on a canvas is cheaper (also not how CSS works), and implementation matters. I don't think I for one would have the know-how to deliver on this vision :)

7
  • Not like I've been toying with the idea of creating a working mockup for a new mobile chat or anything... shifty eyes But then I say I plan to do a lot of things, so...
    – Tim Stone
    Commented Apr 9, 2013 at 19:19
  • @badp The argument for buttons is that there's visual indication that tapping them might do something. While I love what you've proposed, it scores low on discoverability, at least for the first two steps.
    – fredley
    Commented Apr 9, 2013 at 19:21
  • 1
    @fredley It scores low on discoverability of features that aren't currently available anyway to begin with... if people can make do without them, you don't have to add visual clutter for them.
    – badp
    Commented Apr 9, 2013 at 19:33
  • @badp But I can't do without them!
    – fredley
    Commented Apr 9, 2013 at 19:40
  • @fredley You could have something where the first time someone visits the mobile chat, it pops up a short overlay tutorial type thing, showing them how to perform various actions.
    – SaintWacko
    Commented Apr 9, 2013 at 21:55
  • 2
    @SaintWacko If you have to have a UI tutorial, you have failed.
    – fredley
    Commented Apr 9, 2013 at 22:08
  • 2
    I'm totally cool with power-user features being less discoverable but not in the way. Anyone wondering where these features went is liable to either: look for them on Meta or ask where they are (there's already plenty of SE features you'd have to ask about to know about)
    – Zelda
    Commented Apr 9, 2013 at 22:23
2

So I took this into my own hands and made an app with some of the suggestions above.

enter image description here

4
  • It should be a web app man.. Come on. Why support Android when you can support everything with the same functionality.
    – J.Todd
    Commented Jul 2, 2014 at 21:20
  • There is actually one downside: The damn header of the mobile browser. So yes, your android app has more space.
    – J.Todd
    Commented Jul 2, 2014 at 21:22
  • @jt0dd And how exactly would that work? Chrome on Android does not support extensions or userscripts, so how would I inject the code into the page? Same goes for Apple devices.
    – fredley
    Commented Jul 2, 2014 at 21:26
  • oh, see, I thought you were utilizing a stack exchange api of some sort.
    – J.Todd
    Commented Jul 2, 2014 at 22:21

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .