UI tweaks for mobile usage

[aheusingfeld]

• added tweet-container
• moved meta-data to the top of the tweet
• made buttons significantly larger for better usage on mobiles

NOTE: Would love to remove "conversation" and "in reply to" links!

[aheusingfeld]

@monadan @rstrangh comments very welcome. I hate our icons!

[mvitz]

Have you tried icons from http://fortawesome.github.io/Font-Awesome/icons/?

[aheusingfeld]

@mvitz I actually don't like fontawesome too much but this time it looks quite ok IMHO. What do you think?

[stilkov]

Why put the icons in a line of their own?

[aheusingfeld]

@stilkov I adopted this from the rather strange Twitter mobile theme - was ugly as hell. Fixed in the latest screenshot (see above)

[aheusingfeld]

532f682 is like

[mvitz]

I like the author and date line above the status. But I agree with @stilkov that reply and delete icons look a little bit lost and lonely on the line above the status.

[aheusingfeld]

Ah, now I see...

Why put the icons in a line of their own?

@stilkov They have been there before, I just moved the separating .meta element to the top.

reply and delete icons look a little bit lost and lonely on the line above the status

@mvitz "above the status"? They are located below a status/ post, just as in the normal Twitter web UI. Our action icons are a few pixels larger to make them more accessible on mobile devices - read: we don't have another layout for desktops, yet.

Anyway I'm open ears for more visually appealing ideas!

[stilkov]

Why not put them to the right of the date/time info?

[aheusingfeld]

The font-size of the meta information is only 11px. Therefore the buttons would be way to small on mobile devices - as they are now!

[stilkov]

Add some padding to the meta part or increase the font size? That would avoid the extra line.

[mvitz]

@aheusingfeld I meant below. Unfortunately I don't know the twitter mobile page because I'm using the app. Maybe we should brainstorm about the UI for statuses with a UI expert before making more experiments?

[aheusingfeld]

Maybe we should brainstorm about the UI for statuses with a UI expert before making more experiments

@mvitz I'm totally in love with UI design. Therefore I'm I'm looking for practical experience - and experiments. ;) I wouldn't propose the above UI if I didn't like it!

@stilkov My target is to have the meta info aligned with the top of the image. If we increase the fontsize, we'll also have to increase the font-size of the post. Nevertheless I changed it according to your suggestions, so you can have a look. IMHO the buttons are way too small for primary actions!

[aheusingfeld]

because I'm using the app

@mvitz you're kidding me, right? I just had a look and the app has exactly the same layout with the actions buttons below a tweet!

@stilkov another approach but I still don't really like the idea to have the action buttons at the top. Do both of you do? If so, I'd at least give it a try and let others check the UX "in production". Does that sound legit?

[mvitz]

@aheusingfeld I wasn't kidding you. This morning was the first time I noticed where these icons are in the app. Sorry!

In the screenshot it seems that the delete button is slightly lower than the reply button. But this maybe a problem with my eyes in the morning.

[aheusingfeld]

In the screenshot it seems that the delete button is slightly lower than the reply button. But this maybe a problem with my eyes in the morning.

It is, it's not your eyes! The reply icon's arrow's tail and upper arrowhead tower the X of the delete icon -> the icons don't have the same outlines -> one of the reasons IMHO fontawesome is not awesome!

[stilkov]

At the very least I'm consistent: I switched from Twitter's own app to Tweetbot precisely because of this waste of screen estate :-)=

[aheusingfeld]

Ehm, but Tweetbot doesn't clutter the UI with the icons in the line above! Instead it provides large icons below the tweet - if you happen to know that you have to tap a tweet to make them appear.

My takeaway from this discussion is that we certainly need a separate UI for mobile and desktop. I'd suggest to go with the latest UI for desktops but move the action icons all to the right of the "meta info" row. I'll change the layout for smaller resolutions to something closer to layout no. 2 above which will be closer to Tweetbot and waste fewer screen estate.

Desktop

Mobile

Please merge if you agree. ;)

[aheusingfeld]

Any objections to merging this?