OUGD504: SB3- Evaluation

Studio brief 3 was something I hadn’t been overly looking forwards to, I felt out of my depth when it came to designing a website and completely drowning in the Atlantic when it came to coding. That being said I was certainly pleased with the subject I’d be doing for it- bee conservation; this meant I already had a rough knowledge of how these websites worked as I had been on and off them all summer.

From my research I knew I wanted a flat design style website, cut the overly detailed graphics, keep it simple and about the information first and foremost. Unfortunately though my first attempts at digitally producing my designs didn’t go according to plan. In scamp form my initial ideas looked beautiful but making those scamps a reality was just awful. I always tend to make horrendous mistakes on my first attempts at anything, it’s always a little down heartening and no matter how many times it happens I find it difficult to recover from. ‘Oh I’m an awful designer, look at what everyone else is producing! Why am I so terrible, I’ve learnt nothing!’: but this is just an annoyingly essential phase in my process and once I had some more feedback I was able to go back and reproduce new scamps and new designs that looked a lot better.

I didn’t enjoy coding, I barely understood coding. It was a genuine relief once we were informed it wasn’t an essential part of the submission because I think that would’ve stressed me out far too much.

So as far as the website goes being commercially viable I think I did ok. The designs I ended up with were flexible for different devices and worked on large screens and small, the text I chose was a web safe font, the design wasn’t overly complicated and the images weren’t particularly large so loading time would be quick and despite all these practical characteristics I don’t think it looks boring. It may not be the most interesting site to interact with but it’s there to provide information, not entertain and it suits that purpose well.

Where target audiences are concerned on reflection I don’t think it’s really as attractive to children as I hoped it would be, it is a little plain and dull, but perhaps it would be something that could interest older children and teenagers or even parents as opposed to younger kids. This is a shame because I’ve sort of missed my target audience with the look, the information is in small enough doses to be easily absorbed by kids but the style wouldn’t interest them. Perhaps if I had added a cute little bee character or some interesting animations or even a game it may have better suited them, but live and learn. I think my key problem is I tried to reach too wide of an audience and ended up accommodating some but not all. If I were to do this again I would rethink who my exact audience is.

As a whole I’m happy, could be happier but that’s always going to be the case.

OUGD504: SB3- Final Designs and Website Explanation

As a final way to tie up studio brief three I decided to show how the website would look on other devices as well as giving an explanation of the various elements of the site (links, interaction any changes I want to add) just to guide people through how the site works. 

OUGD504: SB3- Search Engine Optimisation Workshop

What is SEO?

A way of making alternations to a website according to the criteria that search engines use when 'crawling' web content.

Page Authority

How likely a web page will be ranked in a search engine based on SEO, internal hierarchy and sentient relevance.

Domain Authority

How likely a domain (the whole website) will be ranked in a search based on age, popularity and size.

Factors that affect SEO

On Page

Content

HTML

Page/site architecture 

Off Page

Links

Trust

Social

Personal

Violations

Irrelevant/weak content

Spam

Paid for links

Outside advice for producing a site with ideal SEO

Periodic Table of SEO Success

SEO Startup in Under 10 mins

How to apply SEO to my own website (Using Google SEO Starter Guide)

Page title 

Have the page titles give some description about the site and what it does, for none home pages (child pages) have name of website tied in with page title.

e.g home- bee aware - raising awareness and sharing tips for bumblebee conservation

page- what can we do for bees? - bee aware

Starter page titles

Page titles that accurately and briefly explain the content on that page

e.g. conservation tips

Summarise each page

Write short summaries for each page explaining what content is on that page, this can be used in 'snippets' when being searched in google

Unique descriptions for each page

Make each page stand out from the others whilst remaining uniformed under one domain

Improve URL structure

Use descriptive categories and file names that can be searched for, avoid generic URL/page names such as page1.html and don't be over excessive with words.

Create easy to read text

No sloppy text or grammar, use words people are likely to search for.

e.g. running shoes as opposed to athletic footwear

(For sites with more/larger amounts of content) 

No 'deep' resting

e.g. …dir1/dir2/dir3/dir4/dir5.html

Breadcrumb lists to allow access to previous pages

e.g. Home>site>specific page

Plan navigation based on homepage

Divide categories into separate sections, group things together avoid mixing large amount of content from different topics in one page

Style Guide

OUGD504: SB3- Final Crit and Final Developments

Today I received feedback on my web page designs, and although I didn't feel hugely confident in them I received some praise as well as very helpful criticisms. 

The main issue brought to my attention was the use of space and the lack of white space. It was suggested that I work with a larger 'scrolling' page to allow more space for my content and to gain the valuable empty space all designers crave. 

Other tips and hints included using my logo as the 'home' button for every page, removing the coloured bar from the links and leaving them on a white background and use the smaller decorative hexagons I had included as a means to focus user attention and direct a persons gaze across the pages. 

So I went back into illustrator and began playing about, adding in the suggestions given to me.

The results were almost instantaneous and rather pleasing. 

I dropped the hexagonal grid, having used it to space apart my images and factoids I decided to rely on a graph style grid to layout the rest of the page. I chose to keep my content, and most of the design, centred so as not to over crowd the space as I had done with my previous mock ups. 

I also added an extra page, the contact page, because as I rearranged the links, it felt unbalanced having all four at the top (and the logo citing as the home page link) and placing 'external links' alone at the bottom felt equally unbalanced. Adding a new page allowed for better use of the space.

I decided, seeing as my coding abilities are little to none existent, I would be producing GIFs to simulate certain experiences with the site (clicking links, scrolling down pages, etc) and only produce the bare and accessible minimum in code (e.g. font, type size and colour, links and headers etc).

GIF showing hover and clicked versions of a page link

GIF showing hover and click for an external page link

OUGD504: SB3- Digital Developments

Digitising Scamps

After revising my scamps I decided to reproduce these designs in a digital format. And so I began by creating my hexagonal grid in illustrator and creating a top links bar that would appear on every page.

I then began to create and slot in the images for each page. I was able to transform the images from rectangular full size into hexagonal shapes due to the mask tool in illustrator. Like the mask tool in photoshop, it can hide and reveal sections of an image, however it's a lot more strict in illustrator, but this worked to my advantage as I was using very strict straight shapes.

I then got rid of the grid when I began adding text to the page; it was decided during a previous crit that placing the text into hexagonal shapes like with the images would be far too confining and would prove impossible to achieve for pages with a lot of text.

I also added 'Fact Hexagons' with text in a larger size pointing out key factoids for the user who doesn't want to trawl through large amounts of text and smaller hexagons for decoration. 

The Digital Mock ups of Five Pages

OUGD504: SB3- Crits and Further Development

We had another crit today and I presented my scamps and spoke through the general purpose of my webpage. I asked for suggestions concerning the text as I worried that if I were to use the hexagon shapes that the text could be too squashed and confined, it was decided that I would be better off using the hexagons for images and using simple columns and boxes for any text. 

I also pitched my colour ideas, using a honey gold for the hexagons and navy blue for the text, one person came up with the idea to tint all my images with the same honey yellow/gold to make it match up with the hexagons- this is something I will be doing for my further development.

After the crit I went back to my scamps and redrew them out again, this time making column and box spaces for text and hexagons for images. The result I feel is a lot cleaner and makes better use of the space available.

After looking at a website called Built By Buffalo I was inspired to use space between my hexagons so as not to crowd and crunch them all together. This turned out to look a lot nicer in the scamps as well.

OUGD504: SB3- Development 1

After the crit it was decided that I was going to develop my honeycomb idea and that I should use a hexagon grid to layout my web pages. I took the advice suggested to me and went to a site called gridzzly where anyone can make up different styles of grids, even a hexagon style, and print them off.

I used this made up grid to begin setting out my pages, I laid out all five of the pages taking account for required text and image space.

OUGD504: SB3- Crits

For my feedback session I brought in three rough ideas and sketches for page designs. I didn't want to put a lot of time and effort into create full sized scamps until I was certain of which idea to pursue. Here's the feedback I received.

Use the hexagon design (can obtain hexagon grids from Gridzzly.com) 

Look at bee hive slots/frames for further inspiration of hexagon layouts.

Be careful with colour- use half tone pallets, yellow and navy/blue. Don't let the yellow and black become too JCB.

Potential 'popped colour' or colourised techniques in imagery. 

OUGD504: SB3- Seminar: User Experience Design (UXD)

What is User Experience?

UX (User Experience) is not usability, it is the role a product plays in a user's existence.

It is the totality of end users; perceptions include effectiveness (who good is the result?), efficiency (how fast/cheap is the product/service?), emotional satisfaction (how good does it feel?) and the quality of the relationship with the entity that is created for the product or service (expectations, does it create subsequent interactions?)

Hassenzahl and Roto:

People have and use technical products because 'they have things to do'; they need to make phone calls, write documents, shop online or search for information. These are 'do goals' appropriately evaluated by the usability and usefulness measures of their 'pragmatic quality'. Users also have emotional and psychological needs, including needs involving self identity, relatedness to others, and being satisfied with life. these are 'be goals', appropriately evaluated but the emotional impact and phenomenological measures of their 'hedonic quality'. 

User Experience: Comparing regular hand dryers to the Dyson Air blade. 

More hygienic, no dripping water on shoes, better branding, better look.

Other products/services with significant user experiences (in comparison to their rivals)

iTunes vs Windows Media Player

Ebay vs Amazon

Coke vs Pepsi

What is User Experience Design?

The creation and synchronisation of the elements that affect users experience with a particular company, product, service etc. with the intent of influencing their perceptions and behaviour.

The application of user research in the development and production of user interface. User centred design. The purposeful engineering of user experiences through the application of UXD methodology.

Garrett's Model of UXD

1.User need and site objectives: what's the point? What does it need to do?

2.Content Requirements: What needs to be there?

3.Information Architecture: What's the most important content? 

4 and 5. Info, Navigation and Visual Design: Aesthetics, how it needs to look.

The Model of UXD Applied to my Own Webpage

1. To get more people proactively saving bees and to deliver information about bumble bees, bee problems and bee conservation.

2. Information on bee numbers and threats and solutions to these problems.

3. Awareness of danger, what the world would be like without bees.

4/5. A well organised flow of information, show issues first followed by solutions. 

UXD Methods

User Research: What are the users? Goals of particular user groups, attitudes and behaviours while completing goals. Can be obtained through observations, questionnaires, focus groups etc.

Personas: Documents that describe a user based on user research. Personas describe a specific person who acts as an example of a particular group. They are based on goals, behaviours and attitudes of users.

Content Strategy: Based on research, personas as well as the overall brand/project strategies. What is the necessary content? The hierarchy of information? what content reflects brand identity? Use data?

Task Models/Flows and User Journeys: The journey that a user will take through a webpage.

Wire Frames: Content structure/architecture of site, similar to scamp designs.

A/B Testing: A method of testing a variation of a system against the existing system.

Creating a Persona and Task Flow for 'Bee Aware'

Example Persona:

My Persona

Key Goals: 

Wants information

Doesn't want to be bogged down with too much content/text

Wants straight forward, easy to access information

Must Do: 

Break up information/text so as to not clog up a page

Present content in an easy flowing format

Make layout pleasing to look at as well as to support flow of information

Behaviours:

Quick Browser

Make decisions quickly

Doesn't like over complicated pages

Easily distracted

Mustn't Do:

Have lots of plain text on a page

No breaks in content

Make the site difficult to navigate

Make page design dull

My Task Flow

For this who can't read my writing

Home

Click: Info on Bees

Read information on what our world would be like without bees*

Click: Bee Problems

Reads bee problems, lack of flowers, pesticides, intensive farming etc

Read what can be done to help

Do tasks or visit external links to buy seeds or donate money.

*Potential skip straight to what can be done.

OUGD504: SB3- Study Task

For this study task we looked into an example of new media and researched some of the issues surrounding it.

I looked into gaming and why it is that girl gamers are ignored or considered to not exist. My two main references for this research was a book entitled 'Beyond Barbie & Mortal Combat: New Perspectives on Gender and Gaming' and an article on JSTOR called 'Gamer Girls Rising'.

About 38% of video game players and 42% of online game players are female. About 70% of casual gamers are women.

In "Getting Girls into the Game" Tracey Fullerton and her co authors point out that "computer labs in schools or clubhouses are often dominated by boys who tend to elbow out girls and take control of equipment." And Carrie Heeter and Brian Winn, in "Gender Identity, Play Style and the Design of Games for Classroom Learning," report:

When boys play games (or use computers), when there are fewer machines than people, girls step aside. It is difficult to determine whether it is the girls' 'stepping aside' front heir opportunity… or the boys 'crowding out' the girls… Nonetheless, this chemistry seems to exist between males and females pervasively when it comes to using gaming machines. 

In her essay "Becoming a Player" T.L. Taylor notes,

The population that does play games is frequently seen as an anomaly rather than a prime informant for understanding how play works. Researchers, and people in the gaming industry, often talk about trying to capture that demographic of non playing 'Vogue Readers' to the exclusion of looking at the group that actually seems to be succeeding in inhabiting game culture now.

From "Body, Space and Gendered Gaming Experiences: A Cultural Geography of Homes, Cyber Cafes and Dormitories" Holin Lin

The layout of some cyber cafes serve as gender barriers: girls must pass through a room of pool tables to access the back spaces that are reserved for computers. Most girls are not willing to subject themselves to the scrutiny of and comments made by the pool players, and therefore only enter when accompanied by male friends. 

Lin also points out: Women's fear and perceptions of risk are deeply routed in their bodies, and avoiding dangerous places is a common practice for managing the fear of male violence. In contrast, no threat of physical harm exists for players wearing either female or male avatar bodies.

In relation to dormitories Lin says: Gender culture plays a crucial role in shaping gaming dynamics in Taiwanese college dormitories. Being mindful of the needs of others is considered an important feminine virtue, whereas competitiveness and aggressiveness are considered male values. As members of a small minority, female gamers must be more sensitive to their roommates' reactions. Instead of inviting roommates to join them, they play alone and try to cause as little disturbance as possible. Many decide it is better to quit playing than to face further peer pressure.

In "Maps of Digital Desires", Nick Yee explores perceptions of female players in Massive Multiplayer Online (MMO) games, noting barriers in the virtual world:

Men are allowed relatively free access to online games, but a woman's presence in an online game is seen as legitimate only if it occurs via a relationship with a man. Other male players use a female player's relationship with a man as a means to legitimate her actual biological sex, to know whether a player claiming to be female is indeed a woman in real life... These stories imply that physical and social barriers to entry for woman become misinterpreted as a lack of desire to play video games. 

"What games Made by Girls can Tell Us" notes that girls express a dislike for games where female characters are sexualised or portrayed as victims and not heroes. 

We want to be Heroes. What we don't want is to be hyper sexualised, because that's not a comfortable feeling. We do not hyper sexualise the male characters in any way, shape or form… 

Girls cannot be pigeonholed into any one game. Girls are not a genre; they are a market that's just as broad and diverse as any market anywhere. There is no silver bullet. There is no one game you can make for all girls or all women, and to think so is silly and naive.