Designing For Web: Study Task 2

Part 1:

We began the session in Groups, where we had to answer the question: What are the common conventions of Navigation and what are the uncommon conventions of navigation?

Mind Map of Group Navigation Conventions

Common:

• Tool Bar
• Drop Down Menu
• Side Bar
• Scroll Bar
• Buttons
• Hyperlinks
• Arrows 
• Search Bar
• Breadcrumbs/Sub Links
• Social Media Links
• Icons
• Tags

Uncommon:

• 360 Degree View
• Navigation within an image
• One Continuous Page (Linear)
• Bottom Toolbar
• Side map
• Fly Out
• Anchors
• Inline Linking 
• Landing Page 

From this, we came up with a list of things as a class that included the most common and uncommon conventions:

Common:

• Search Bar
• Home Button/ Logo
• Menu Position
• Breadcrumbs
• Social Media Links
• Drop Down Menu (Context Dependant)
• Auto Updates Intuitive To User
• Site Map
• Image Link
• Navigation Indicator (Highlight/ Colour Change/ Italics/ Underline)

Uncommon:

• 3D View
• Eye Motion
• Speech/ Voice
• All Content
• Home Page 
• Landing Page
• 360degrees
• Dynamic Content Scrolling

Using this, I was encouraged to think about the question: whether there are any rules of navigation and pagination and whether they matter?

I think there are rules to navigation and pagination, such as the importance of the audience orientation within the site, ease of use and being consistent as it allows for a complete user experience which is why they matter so much. The rules can be bent in regards to whether it is appropriate to the website and to the target audience so that it adds to the experience but generally, by sticking with the normal conventions discussed previously, it is usually found difficult for others to use your website without these rules of navigation.

From this, we had to go onto producing some Flow Diagrams of the 5 pages that we thought about in the previous session.

Attempts At Flow Diagrams

I made a series of Flow Diagrams as I felt that there could be many ways in which I could get my Website and pages to flow together, such as having everything connected to the Home Page or by having a fully linear website or by maybe having an about page which would link all the other contents pages together without the contents pages giving links to each other. These are all things that I can try when I am producing the website to see which would work best.

Part 2:

Using the websites that we researched which we felt were well designed or liked, we had to think of any reasons that they may be poorly designed or took away from the user experience. These had to be categorised based on usability, aesthetic or functionality.

Printed Websites

Usability:

- The Willie's Cacao Shop- Difficult to determine which images have the links and which don't

Aesthetic:

- Peterbrooke- Too dark and purple- takes away from the legibility of the website
- Cadbury's Dairy Milk- Quite Plain with just a Logo

- Z Chocolat- Plain aesthetic may loose interest of audience

Functionality:

- SCHARFFEN BERGER- Difficult to determine where everything is, the purpose of certain aspects and the function of all the aesthetic elements

From looking at these, we had to draw on top of the print outs, dissecting the underlying grid structures of the Home Pages of the Websites, considering similarities and differences between the sites. 

Grid Systems of Websites

A major similarity between the websites is that the information seems to be positioned along the top and bottom of the page leaving a large space in the middle. From this, the middle is usually used for images or centre pieces which intends to draw the audience into the website. This seems to aid the usability of the website as it makes the product the centre of the website so it is clear what the website topic is, orientating the audience. It does provide a clean aesthetic as well, aided by the other similarity of having menus at either the top, bottom or side of the page, helping the navigation of the overall website. A difference between the sites is there approach to inclusivity of the audience and their user experience, with some having a very heavily interactive site and others having minimal interaction yet all accomplishing this in different ways. Another difference is the target audiences for the sites with some being very specific in regards to being for an older, mrs mature audience as it shows simplicity and quality whereas others are for a more younger, mainstream audience which is focused on brand exposure instead.

Study Task:

From the grids that we have been dissecting from the Websites, we have to produce a storyboard of the interface of our website, including the grid layout that we will be using for the website. 

First Initial Storyboard

In regards to my website, I know that my idea is quite a complex one with a lot of pages involved so I produced a Storyboard with a Flow Diagram with my initial vision which was 14 pages long. When looking at it, it seems to be quite an ambitious amount of work to produce in the short timeframe that we have.

2 Storyboards for Potential Websites

Knowing I have a Crit coming up soon, I decided to produce a condensed 5 page version of my vision as well as a design for a 'normal' website layout including Flow Diagrams so that I could get feedback on al 3 areas and select the one which is determined as the most likely within the Crit. From their feedback, I will produce a final storyboard and include a Grid layout which the website can adhere to.