What is meta? ×
Meta Stack Exchange is where users like you discuss bugs, features, and support issues that affect the software powering all 134 Stack Exchange communities.

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.
share|improve this question
    
I would also like an option to edit/delete messages that aren't the last one posted. (Using the option menu maybe?) –  Ronan Forman Apr 9 '13 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 Apr 9 '13 at 16:02
4  
I love you. Do you do freelance design work? –  casperOne Apr 9 '13 at 18:44
    
@casperOne I have been known to in the past... –  fredley Apr 9 '13 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. –  CuriousProgrammer Jul 2 at 21:11
    
@jt0dd This is exactly what I've done with ChatSEy –  fredley Jul 2 at 21:13
    
@fredley oh man.. Why not host that as a web app? –  CuriousProgrammer Jul 2 at 21:17

2 Answers 2

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

share|improve this answer
    
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 Apr 9 '13 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 Apr 9 '13 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 Apr 9 '13 at 19:33
    
@badp But I can't do without them! –  fredley Apr 9 '13 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 Apr 9 '13 at 21:55
2  
@SaintWacko If you have to have a UI tutorial, you have failed. –  fredley Apr 9 '13 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) –  Ben Brocka Apr 9 '13 at 22:23
up vote 1 down vote accepted

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

enter image description here

share|improve this answer
    
It should be a web app man.. Come on. Why support Android when you can support everything with the same functionality. –  CuriousProgrammer Jul 2 at 21:20
    
There is actually one downside: The damn header of the mobile browser. So yes, your android app has more space. –  CuriousProgrammer Jul 2 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 Jul 2 at 21:26
    
oh, see, I thought you were utilizing a stack exchange api of some sort. –  CuriousProgrammer Jul 2 at 22:21

You must log in to answer this question.

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