Web and User Interface - Lab 3

Part I – Reviewing this week’s lectures 

Question 1. Select one website that you visit the most. Draw its wireframe and identify its different divs or layers (header, footer, etc)

BBC News wireframe (bbc.com/news)

Above is a wireframe of the BBC News website which I visit at least once a day. My drawing is a bit out of scale. The main advertisement actually accounts for about 40-45% of the total length of the page, pushing the main content down to the bottom of the screen, along with a secondary content section. Beside these there is another space for advertisement, in this case taken up by an ad for Maldron hotels. It's a very image based page, and I usually click the picture above the story to go to the story because it's easier than clicking the text. There aren't plain blocks of text on the page, so I'm not sure where the divs are. Clicking into 'View page source' and searching 'div' indicates that there are many on the page, but it looks quite complex how they are used. 

BBC News (bbc.com/news)

It's quite a long page so the footer is not seen until the very bottom, long after the news and sport headlines have been shown. The footer here is reserved for links to other parts of the BBC as well as legal links to 'Terms of Use', 'Privacy Policy', etc. I wouldn't imagine the average reader of the webpage ever gets down that far to see what's there. 

Question 2: How did you find coding tables? Outline positive or negative observations, providing examples.

One positive is that you can start off with the standard HTML template and a structure is already there for you to start using. One negative is that you may have wanted to arrange the headers and contents etc in a different format  and now you have to go about rearranging them. 

Question 3: Browse some university websites in the USA (observing content, layout, colour, responsiveness …)

I have chosen to look at three USA university websites, and will write about them one by one. I would like to point out that prior to this exercise I had never visited a USA university website.

(a) University of Alaska. alaska.edu/alaska/ 

I picked this one because it was the first that appeared in the list, as they're sorted alphabetically. I hadn't realised the list was going to be 1,900 entries though (!). It's obvious that this website has a blue theme, as the header and footer and various other headings are the same shade of blue. It's quite a plain website, and strikes me as though it could have been designed a decade ago, i.e. 2011. There's nothing wrong with this however, as all the information is clearly and comprehensively laid out. It has a large picture-slider at the top consisting of five different pictures of different courses from the University. None of these are clickable however, which seems to be a bit of an oversight. They're presumably there to make the page look dynamic, but if you click the picture of the musicians it doesn't automatically link you to the Music Department as you would expect to be the case. The rest of the page is mostly black text over a white background which doesn't tax the eyes. 

University of Alaska. Nothing happens if you click this picture, or even the text box

(b) Humboldt State University. humboldt.edu

This university is based in California and assaults the eyes as soon as you log on. The colour scheme is varied and consists of a jarring mix of blue, green and terracotta. These are arranged in horizontal headers at the top of the page; one under the other. You might think that the green header is the most important colour because it is where the name of the university is placed. You would be correct in this assumption as the further down the page you go, you don't see the blue and terracotta colours return to the colour scheme. The same green is used again for the footer. If green were the overall colour they were going for, you would think they would have just made these other headers different shades of green to fit in nicer with the overall look. 

Humboldt State University - Too many clashing colours

As for the rest of the page, it's arranged quite nicely, even if it seems to be from 2011 as was the case with the University of Alaska. Curiously, over half of the entire webpage is devoted to a crammed wall of tiles of posts from the universities official Instagram page. It seems a bit unprofessional to give so much space to this function, even if it does promote the various aspects of college life. I would have thought about half of the space used for this would have been sufficient. 

Instagram content heavily plugged

(c) Harvard University. harvard.edu

The third website I looked at was the Harvard University website, one of the most prestigious universities in the USA or indeed the world. I wanted to see if this famous university would have a completely different look and feel to the other, less well-known establishments, and it does. The moment you arrive onto the webpage you're greeted with a video background of words and lines enlarging and disappearing. Over this is placed a quote which may or may not have something to do with Donald Trump-era "fake news" mis-information. This is almost like an art installation and doesn't seem in keeping with a university webpage. Perhaps the university are so assured of their status that they could display anything here and it wouldn't really matter because people will always compete against each other to attend this famous university. 

Harvard University root page

The further you travel down the page you realise the whole root page is literally devoted to this "art piece" if you can call it that. It almost acts like a public service announcement, trying to inform whoever stumbles upon the page about the dangers of misinformation in an "infodemic" - “an overabundance of information—some accurate and some not—that makes it hard for people to find trustworthy sources and reliable guidance when they need it.” 

It's hard to establish who exactly this content is aimed at, as surely anyone wishing to learn more about Harvard University doesn't need to read any of this. In fact there should be an introductory statement at the top that welcomes people to the Harvard website and gives them an option to click a lick to go to this "art piece" if they wish. It' s quite postmodern to have absolutely nothing about the university on the root page, and in actual fact it's the complete opposite of the previous two university pages I looked at. I applaud Harvard for trying something new, but I think this is a step too far. 

It is only when the 'Menu' button is clicked at the top-right hand corner of the page that anything resembling a traditional university table of contents becomes apparent. From this tab, all the usual information is available, including the programs on offer, the history of the university, and so on and so forth. 

Harvard University. After 'Menu' is clicked 

Question 4: State four features that these websites have in common. You should state which websites you have analysed:

As presented above, I analysed the University of Alaska (UA), Humboldt State University (HSU) and Harvard University websites (HU). 

First Feature: The first I would say I noticed about each of the three websites is that they all had a header and footer of some sort. The UA page had a plain, no-nonsense colour scheme which was consistent and similar throughout. The HSU websites gets off the a rocky start introducing such a clashing group of colours all crammed on top of each other at the header section but once it proceeds down the page becomes slightly more straightforward, if just for the over-reliance on the Instagram content. All in all it gives a sense of cohesion when the footer is styled similarly to the header. HU goes slightly off-piste with its header in that quite a lot of it is invisible through which that art installation video appears. Having said that, it is obvious that it is still a header and consists of the University logo, a Covid information link, a search feature and a link to "Main" which we have found is actually the most important link on the whole page. The HU footer is much more traditional and as you can see below, looks just as you would expect it to. 

The Harvard University header...

...and footer

 

Second Feature: A curious feature I noticed when looking up all three webpages was the .edu domain name at the end of each of their addresses. Apparently it was established in 1985 in the USA with the intention that educational institutions anywhere in the world could adopt it, but in the end most of the institutions that obtained .edu registrations were consigned solely to the States. Since 2001 the domain has been restricted to a select group of postsecondary educational institutions. I've found that most of the Irish third-level institutions just use .ie as their domain name, whereas the UK equivalent use .ac.uk. 

Third Feature: Something that is evident across all three university pages is that the pages change in layout formatting as you travel down the page. By that I mean that it isn't just a uniform layout the whole way down the page. To illustrate my point, take a look at the picture below, which is the beginning of the 'About Humboldt' page from their website:

'About Humboldt' page (Screenshot 1)

This screen consists of a paragraph of text at the top running across the entire length of the page, followed below by a few links to the left and then a large image of the university taken in the year 1914. This adds a historical dimension to the page, reminding people just how old the university is. To the right of the image is a list of statistics relating to the college. If the rest of the page were to follow this format all the way down, i.e. a 70:30 ratio split of image to text, it would be very bland and repetitive. Instead, the designers rightly mix it up a bit and move chunk around, and display content in a natural, scattered way, like in a scrapbook for example. 

'About Humboldt' page (Screenshot 2)

From the picture above, you can see how the format changes the further down the page you go. All three of the websites I looked at employ this "scrapbook" pattern, and it makes the website more enjoyable to use as you can't ever pre-empt what is coming next. 

Fourth Feature: One final feature that all three of the websites have in common is that if you happen to get lost among the many pages of the website, you can always click the university logo at the top-left hand corner of the screen and be brought back to the homepage instantly. This is of importance, especially for websites that might not have been designed very well. Websites should aim to give a breadcrumb map to allow you to see the steps you took that brought you to where you are now, but when this is not possible the very least a website can aim to provide is a quick button to click back to the homepage. These websites have succeeded in providing this. 

Question 5: Browse some university websites in Ireland (observing content, layout, colour, responsiveness …):

For the purposes of this question, I looked at the websites for University College Cork (UCC), Dublin City University (DCU), and the Royal College of Surgeons in Ireland (RCSI). 

(a) University College Cork. ucc.ie/en/

From the moment you arrive at it, the UCC homepage is clearly very vibrant with much use of colour. This can look a bit cluttered or infantile as it's not really clear what the main colour in the colour scheme is meant to be. A picture-slider feature fills up most of the page when you arrive, and flits between three different pictures, each of which you can click to read more. Further down the page it begins to get a bit cluttered up with clickable tiles in the same multicoloured colour scheme as before, before finally becoming clean again down the bottom of the page with two thick banners across the page. These are coloured blue and yellow but go well together and have navigation links laid out within them in a readable style. The responsiveness as a whole across the site is good, and the list of courses offered by the university is very easily accessed and straightforward, being toggled by clicking 'Courses' in the to banner. 

(b) Dublin City University. dcu.ie

The DCU homepage appears at first to be probably slightly older than the UCC website, but this might actually work in its favour as it doesn't suffer from the same stylistic trends UCC opted for which in my opinion will age badly. For example, it doesn't have over-sized, coloured boxes everywhere down the page in the same way as the UCC and TU Dublin websites do. The DCU page gives a sense or orderliness the entire way down the page, with images and tiles appearing in straight lines and obvious locations. The content is displayed over a white background the whole way down the page with no clashing or garish colour schemes appearing anywhere at all. Just as with the UCC page, DCU employs a picture-slider at the top of the page which scrolls through four images displaying the college. These images act as links to their various sections when you click them. One downside to the page would be the DCU Virtual Tour 2020 video at the base of the page which lasts 7mins 11secs. A shorter video introduction would have served the main reception page better I feel, as after about 5 mins of watching it it starts to drag on. 

(c) Royal College of Surgeons in Ireland. rcsi.com/dublin

Just like UCC and DCU, RCSI also chooses to use a large picture-slider for its homepage, which scrolls through four close-up pictures of students studying and working at the college. Of all three of the Irish university websites I have looked at, I would say this one looks the most professional. Nothing seems off-putting or garish about the layout of the page, or the colours (which are kept to a minimum). Everything is displayed against a white background with some red framing around links and images, setting a theme or neat RCSI "brand" to everything (see image below). They have an introductory and inspiring video for prospective students, the content of which is a little over the top, but at 2mins 09secs is the perfect length for such a video. Watching this gives the user a good basis of understanding what studying at the RCSI could be like. All the courses and services on offer are displayed in neat drop-down menus from the header at the top of the page. With a website like this you get the impression that although it might cost a lot to attend the college, the management probably have their priorities in order and put the money towards the quality of the education they provide, and not the needless modernising of their website every year. The look and style of the page feels mature and timeless and encourages trust in the prospective student.

The RCSI 'red theme' works very well

Question 6: State four features that these websites have in common. You should state which websites you have analysed:

Again, for the purposes of this question, I have looked at the websites for University College Cork (UCC), Dublin City University (DCU), and the Royal College of Surgeons in Ireland (RCSI). 

First Feature: The Image Slider. I find this feature very interesting. From my own personal use of websites since about the year 2002 when I was 12, I have subconsciously been noticing little changes in how websites look and feel. I can't put a date on it, but most websites moved to a modern look and feel in about the period 2010-2015? Some websites cling on to an old style and are badly in need of modernising, such as the awful Gaelchultúr  website (shown below) which is a state funded body who provide Irish language courses and learning resources. I encourage anybody to visit this website just to see how bad it is. I completed one of their courses this year and it was very good, but their website does not instil trust at all. In their end of course feedback form I mentioned this was something they should focus on updating. 

gaelchultur.com/en/home.aspx.
A museum piece still operating as of October 2021

Part of this attention I have paid to websites over the years involves noticing trends that appear and fade. The picture-slider featured arrived on the scene in the past 10 years I would say, and it is now commonplace. It is a nice feature but I imagine in the future it will be viewed as lazy designing. The reason designers use it so much is because I would imagine it's quite easy to do, and takes up a lot of space on the page; "filler", if you will. What's curious is that all three of the Irish university websites I have looked at use it, and even some of the North American ones did too. I will be curious too see what replaces it in the future as the next go-to function. Maybe static images will make a return. 

Second Feature: All three of the websites have a 'Search' function located in their banners at the top of the page. All three websites use a magnifying glass icon as the pictorial hint. The most responsive search function across the three websites was the UCC one. It even gives the option to narrow down your search results by 'Website', 'People' or 'Courses' headings. The other universities do not give this option for their search results. 

UCC 'Search' function

Third Feature: I notice all three of the websites have special attention given to their 'alumni' section which aims to help past-students in the world of work. Maybe this is a legal requirement or maybe it's just to be nice, but they all seem to give an alumni link in a prominent position, with the only exception being DCU where you first have to click 'Engagement' where from a drop-down menu you can then find 'DCU alumni'. 

RCSI 'Alumni' link (top right)

UCC 'Alumni' link

Fourth Feature: At the base of each of the three website pages, I see that they each have a footer with what appears to be a sort of 'recap' of many of the headings and links from further up the page. I would imagine most people would find these links from further up the page where they are each displayed more prominently so I'm curious why it must be some sort of designing pattern that is often repeated. Maybe it is just designed like this to sort of 'bookend' the information in the main body of the page so it looks nice. This footer often displays the information in a very matter-of-fact style with no images or stylised links. The most comprehensive information footer is that of UCC, which is is displayed in the image below.

UCC homepage footer 

Question 7: How do university websites in the USA compare to university websites in Ireland? Are there any major differences?

In general the university websites in the USA are largely similar to the university websites in Ireland I would say. On the whole the Irish ones appear to be better designed, with less conflicting colours and more stylistic elements, such as links that enlarge when you hover over them etc. The USA websites seems to be more basic, but that is not always a bad thing. No Irish website promoted its Instagram account as heavily as Humboldt State University did, or had as bad of a colour scheme at the top of the homepage as it did. The Irish websites seemed more keen to attract foreign students than the USA equivalents and this could be indicative of how the Irish pool of prospective students is not as big as it needs to be to keep all our Irish universities filled. It is clear that websites such as that of Harvard's can do whatever they want with their homepage, as the demonstrated with their art experiment, because they will always attract enough students to fill their courses. For the rest of the non-elite university websites, they must maintain a sensible and straightforward approach to encourage people to enrol. All in all I would say there aren't many major differences between university websites in the USA compared to university websites here in Ireland. They all seemed to follow the same prescribed formula more or less, except in the case of Harvard. 

Question 8: Investigate and answer the following: 

(a) What is the meaning of flat design 2.0? What website uses flat design 2.0?

Flat design itself is a counteraction against skeuomorphism. Flat Design 2.0 can be thought of as a more mature version of Flat Design, which add slight aspects of skeuomorphism back into the design. Flat Design 2.0 keeps the minimalistic simplicity of Flat but also incorporates aspects such as subtle three-dimension indicators, highlights and layers. With Flat Design 2.0, designers get to play around with a different set of limitations, namely colour gradients, colour palettes, shadows and depth, and animation. For example, by utilising colour gradient, designers can challenge themselves to creating an exciting "new" upgrade on an existing design, but by maintaining a relatively simple flat design 'look'. However flat a designer chooses to go however, they should always remember to leave the appropriate amount of space, choose accessible colours and use a hierarchy of action and elements on the page. I would say argos.co.uk is an example of a website that uses flat design 2.0. 

(b) What is the meaning of skeuomorphism? What website uses skeumorphism?

A skeuomorphic design is a concept in digital design whereby an object is intentionally given an unnecessary, ornamental design so that it replicate a real-world example. An example of this would include a little icon of a magnifying glass located beside the search bar. Skeuomorphism allows users to draw on their real-world experience of objects and tools to understand how to use certain functions on the web. It creates a feeling of familiarity with the user, allowing them to interact with elements they feel comfortable with. jackjohnsonmusic.com is an example of a website that uses skeumorphism.

A skeumorphic website.

The End of "Web and User Interface - Lab 3"

See you again for "Web and User Interface - Lab 4"