Evangelos Kapros's profile

News web app spec design

This is the design of a few screens for a news web, tablet, or mobile app. The UI has 3 modes, which leverage 3 different kinds of UX. The brief was to simulate a "coffee & newspaper" experience
 
Note: column widths and font sizes are used for display purposes and don't necessarily represent a proposed size unless explicitly said so.
1. On the Run
 
This mode is the "kernel panic" mode: lunch-break frenzy, early bird or late owl scanning, even "where is this article I was looking at the other day; I'd better find it fast ’cause I need it like now" needs are covered.
 
More and more people are on the move: we are becoming digital nomads. Many want to catch up with the latest tech but they always have to go somewhere. A quick-to-browse list is perfect for them.
 
We learn from Cognitive Psychology that people cannot handle too many choices. A simple list view eliminates visual noise and lets the user concentrate in finding the article they want too, thus enhancing the usability effectively and efficiently.
 
This view is also perfect for mobile browsers.
A Fast Read
 
A modal window lets the user read their favourite articles and easily go back to the list, with a single keystroke or tap.
 
This behaviour minimises the distractions and lets the user focus on the text, not on the navigation.
2. Peace of Mind
 
This mode is the relaxed mode: it's the long awaited weekend, the user has all the time of the world in their hands, and is in exploratory mood. Maybe even wants to mark some pieces to read later.
 
Relax. Browse through tiles with big titles and thumbnails, putting your mind at ease. Research evidence has shown that 4 items per row are optimal for your memory.
 
Still, you can fav or share articles at your favourite social networks from this very screen–why have to actually open the article itself?
 
Click on the arrow at the bottom to load more articles. Then just scroll up and down to browse.
 
Take your time to see what this is all about.
 
The footer of each item can show when and where this article appeared, or any other information. Similarly, the header can show the date or the source of publication.
 
Default view for tablets, too.
A Reading Experience
 
"Content is King". Or maybe, Queen. That's the single most important UX mantra. This view does just that: highlights the content and nothing else.
 
No confusing controls, settings, or other activities; everything apart from the content keeps the same usage pattern and thus doesn't break the user experience.
 
If necessary, apart from the title of the article, the inner menu can show information about publication time.
3. The best of two worlds
 
This mode is as follows: there is enough time to read something right now, but actually with the purpose to learn something to work on. Even leisurely, but still not looking for the interesting, rather for the useful.
 
Combines clean design with rapid news finding. Three independently scrollable areas provide high detail but also allow to focus on the part you need most: either a rapid scan of the articles or the article itself.
 
The left column can contain other navigation ways apart from sources or topics categories. For example, a sensible category would be the user's favourite articles.
 
Sources can provide a visual cue apart from their name in the left column. One can automatically parse the fav.ico of the source to display; for now, I've just used random icons to demonstrate the design.
 
50% of the screen width to find it: 50% to read it.
Why it works
 
The theory behind this design: control. Recent HCI research (CHI 2012) has shown that maybe displaying all information might seem aesthetically suboptimal, but actually leads to quicker scanning by the users' eyes. That means high findability of information.
 
In our case, that is achieved by displaying the navigation, a selection of articles, an article, and the settings icons at the same time.
 
It feels like a dashboard.
That's all folks! For now, that is. I hope you enjoyed the designs! :)
News web app spec design
Published:

News web app spec design

This is the design of a few screens for a news web, tablet, or mobile app. The UI has 3 modes, which leverage 3 different kinds of UX. The brief Read More

Published: