222.357 Web Design: 2016

Tuesday, 5 April 2016

Mobile Wireframes

- = improvement to be made

+ = improvements already made

Haiyan

-it has world news in the list which doesn't exists on the new category menu

-Make hamburger lines thinner

-use stuff logo

-Get all 3 articles fitted on screen

-Something to divide the articles

-Fix the video and text buttons proportions and when choosing colours make sure the buttons and bar are very different so the buttons stick out as buttons

+Added another navigation menu > to access the wellington sub-category

- Maybe a solid block in the background for easier reading

- Some indication it is the National arrows menu you are viewing

- x smaller so title gets more space and isn't so squished

- smaller lighter arrow to read on so it doesn't take your focus from the article

- Smaller Pt. size subdeck to give more importance to the article then subdeck
- Match share icon shapes to the other button shapes.

Hemi

+ removed world news

-Make hamburger lines thinner

-use stuff logo

-Header bar smaller so all 3 articles fit on screen not squiahed

-Fix the video and text buttons proportions and when choosing colours make sure the buttons and bar are very different so the buttons stick out as buttons

+Added another navigation menu > to access the sub-category
+Something to divide the articles

- smaller headling pt. size or allow some space for 2 lines per headline. too much squishing on simpsons healine

+ Clearly showed which button is selected

+ autoplay preview activates on click of the play. Clicking the title or images would take you to the article page.

- Add an option to skip the video and play/pause/time sliders above and below the video window

- Add a Replay instead of a play button - assume this screen has appeared because the video has finished

- Match share icon shapes to the other button shapes.

Sarah

-Make hamburger lines thinner

-use stuff logo

-Header bar smaller so all 3 articles fit on screen not squished
- Brighter arrow next to sarahs picture

-Fix the video and text buttons proportions and when choosing colours make sure the buttons and bar are very different so the buttons stick out as buttons

+Added another navigation menu > to access the homepage sub-categories i.e featured, latest, most popular
+ Added the seach button to the homepage nav for quicker access (normally located in the sections menu on mobile version)
+ Something to divide the articles

- Does print edition need to be on the mobile version?

- Where has the search bar gone?

- Text should be the brighter colour arrows less eye-catching colour

+ solid block in the background for easier reading

+ Something to indicate which menu you are viewing

- Stuff Nation page in the background

- random line

+ Something to indicate which menu you are viewing

- Stuff Nation needs to say assignments in same colour as arrow with the arrow on the other side, when arrow is clicked it take you back to stuff nation category from assignments sub-category.

- lighter arrows. heavier headlines.

- Sarah's arrow button is missing

Paper Prototypes

Andrea

Barry

Haiyan

Hemi

Mike

Sarah

Friday, 11 March 2016

Research

Yahoo news (http://news.yahoo.com/ )is apparently the most popular news website - although i can't really see why. It does have a fixed left hand menu as well as a nav bar, and a clear search bar at the top of its home page, but it is far from aesthetically pleasing. everything is blue, black and white, with images as exceptions. It also has an ad section on the right which only scrolls so far, while the other 2/3s is like the facebook news feed - constantly scrolling back in time.

The LA Times was nominated for the webby award for best user experience 2015. I like how the header hides when you scroll down but if you start scrolling back up it reappears to help you navigate quickly to another section.

I'm not fond of the AD behind the main window, it is distracting from the importance of the content.

The watch this section is a good idea. It means people who don't want to read the news, like Hemi, could just go to articles with a video story. They aren't limited to only seeing those articles though.

I don't like how it reloads and auto plays video ads.

The New York Times won the webby award for best news site. Their layout is much more traditional, paying homeage to the print version, which is quite nice in a way. Although it does lack some hierachy using all sans-serif typefaces in similar weights, and the nav bar isn't easy to read. perhaps the homeage could have been implemented in a better way. The sections button is a good idea.

Vice News is very image based. Their top story appears as a full width image, i find this very impactful. I think their ADs get too much space and importants thought - every third item is a banner ad, almost the same size as the stories. They signify you can click on the image to get to the story by changing the headline and the read button to read on hover.

<hover>

Quartz have a very unique minimalist homepage which is quite refreshing, although they don't have as much content either. They are solely business articles and only online. Their choice to display only headlines on thier homepage is an interesting one, seeing as images are what normally draw us in to the story. I liked how they used the hover on the main headline to display the image. Overall this site is less chaotic then the other news sites. could this principal be applied to each section of the full news website as successfully?

Huffington Post have an option they call "quick read". Essentially this is the same as my preview mode only it is activated optionally by clicking on the quick read box that appears in the corner on hover.

For hemi's mobile hover isn't an option, alternately the play icon on the corner could activate the autoplay preview window. Although Hemi has specifically asked for video articles so he does want to watch the video; but other users might not, and they would be forced to watch the video before getting the option to read the article.