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:
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:
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:
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.
<input>
for that... It's a simple matter of listening for theenter
key with JS.