Homepage Paper Prototype

The next step to to produce paper prototypes of the various webpages that will be used for the project, this first page I will focus on is the homepage. 

Website Heatmap

During the process of designing a rough sketch of what the interface could look like I decided to look into website heat maps in order to gather an understanding of the most important areas and features users look at.

The designs place below are very simple outlines of where I would like to place various elements on the homepage. I gathered a group of 5 participants, here I explained what this napkin test was about. The main goal was to ask them what they though of the designs, what they would like to see within the design and how they feel it can be improved. I decided to voice record this test therefore before starting I asked the participants permission to record them. 

Below is the recording of the feedback session undertaken based on the mockup layouts of the websites homepage. 

https://soundcloud.com/user622028656/homepagemockuprecording

Layout 1

• Too traditional
• Login has been placed on a random section (make users think)
• Prefer login section at the top of the page
• Not keen on the profile image section
• Logo is too big

Layout 2

• Logo is too big
• Menu could be placed at the very top providing more space for the content
• Works for an educational website

Layout 3

• Better layout
• Participants like the menu on the side and a large section for the cloud files
• Logo is too big
• If it for a dropbox style of website this one works the best out of all of them

Regarding the logo within the layout the participants all agreed that it took too much space and that a smaller size would be more beneficial as it will allow me to have more space for the rest of the content. Regarding the menu bar it is a question of carrying of various trials, the students were keen on were the menu was placed on the third layout but only if the content was the cloud content. It is too early to know how the cloud content will be placed therefore I cannot stick permanently with this design. 

Now that I have gathered the results from the user testing I need to make adjustments to the overall look based on the feedback they have provided me with. Another step I need to take is to trial colour schemes for the website. Here I need to consider the previous research based on colour and interface design although this will not be designed in large detail until the production process occurs.

Sources

Wiliam. n.d. clicktale_scrollreach. [online] Available at: http://www.wiliam.com.au/content/upload/blog/clicktale_scrollreach.jpg [Accessed: 21 Nov 2013].