Lecture 2 - Designing to Guide

If it's above the fold, it's important. Think about where you cut the page, we don't pay for news any more - think about this. How can the web enhance the site, what isn't possible in print?
Full screen video?

We are concentrating on the smart phone and the website not thinking about tablets, look at the differences between the webpage and the mobile site.
Presentation is always vital to get consumers to use your webpage.

"Quartz" the app which tells the latest news through messages. It records your replies as to what you are interested in. Can easily click on links and go into websites.
"clickclickclick.click" Website to check out.
Explore other languages.

User Journeys:

Go through pages and figure out where each page goes.

Prototyping Methods for Web Design:

Paper Prototype - Fast, Easy, People can make suggestions easily. Users can play and draw on the prototype. This is a focus on the userbility not the style of it. This is at the early phase before the style and design comes in.

Clickable Prototypes - eg, InVision, Adobe XD, Marvel, Atomic - Relatively fast and easy if the images work. It can work at multiple stages to test different things. Can be distributed online for presentation and user testing. Can view different pages in the browser and see how things over pages align. Limited function.

HTML, CSS, JavaScript Prototypes - this is a total real website. Will reveal issues whilst making this page. Can test responsive design, transitioning from prototype to 'final' very easily. It's good for sites which already exists.
You will need to have a strong code background for this to work. Once you start coding it is harder to change your design and to move stuff around. Also you can get stuck on coding problems easily.

1 week - Paper
2 weeks - Clickable
The rest on coding.

User testing roles:

Participant - Person brought in to test the design, based on user personae

Operator - Part of the design team, acts as the computer, needs to know what pages connect. Not allowed to talk at all.

Moderator - Part of the design team, only person allowed to talk. Sees if participant is getting distressed and where the protoype is failing. 

Observer - Part of the design team, stands off to the side, takes notes on how the participant is progressing. How long they are spending on each page. Looking at failure states and what the participant is doing. They cannot talk. 

Paper testing video of my Prototype - 

This test was completed error free and I was very happy with the navigation of the current stuff website. 

POP - a mobile paper prototype app.

TO DO:

- Look at News sites, stretch out the pages and see how much information is stretched into the page. 

- Read throughly through the brief 

- How do you think the existing stuff website could be better? 

- User test with six personae

- Lynda HTML AND CSS!