Metro Style - News Feed (Mobile)
Doing the UI design for a News App, we were looking at different ways to visualize the news feed as cards. 'Metro style' (for want of a better name) helps in content discovery and works great with infinite scolling.
Here is a UI Mockup, inspired by Pinterest and Guardian.
Varying the width and height of cards helps in creating a visual variety. The top story is highlighted as a special card, followed by other news articles. The news feed also has tweet, quote and event cards to break the monotony.
News Feed as Cards in Metro Style
But, the Metro Style does not offer any other user interaction on a card except for clicking the card.
So, we went out on a leg to experiment with a version that can include more user interactions per card. This was more of a thought experiment for us. The favorite and share icons are grouped together. And clicking on the card would open the Web View showing the article. But having three user actions per card in a Metro Style can be tricky.
Here are a few changes we effected:
#1 Article cards will be full-width cards. Top/Prominent stories will have a full-width image too
#2 The primary user action will be clicking on the card to read the article
#3 Secondary user actions - favorite and share - will always be on the right side of the screen.
#4 Quote and tweet cards are more for variety. Tweet cards need different user actions (re-tweet) which will be triggered when the twitter icon in the card is clicked.
A Hybrid Metro style that has three user actions, per card
P.S: Though we later chose a different UI design for the News Feed, this served as an interesting experiment to understand how well Metro Style can accommodate user actions.
