Web and User Interface - Lab 1
Part I – Beginning Web Development
1. Create a blog to document your Web & User Interface lab work.
2. (a) Wireframing versus prototyping.
(First observation): The main difference between wireframing and prototyping is the ‘fidelity’ of each – that is, how closely the test examples of each match what the final webpage product will look like. Wireframing can be done by using a pen and paper and can be thought of as the 'skeleton view' of how a webpage will eventually look, showing outlines of structure and layout of the page. Simplicity is key.
(Second observation): Prototypes are the next stage in the product design process and show colour, animations and the content the page will have. It looks like a more finished product but it is still not finished fully. They allow a user to test a webpage’s interface and interactions.
2. (b) The 10 Most Common Web Design Mistakes.
(First observation): Simplicity, as well as minimalism, is the key to successful web design. Text is more important than videos, and a video-heavy page will take longer to load, encouraging the user to move on to an alternate page. Conversely too much text is also a bad strategy. Use lists with bullet-points instead of including a huge block of text. It holds the viewers attention. Colour and contrast are important in choosing the text and background colours for your webpage. People will leave the site if it is difficult to read.
(Second observation): Webpages must be mobile-friendly. People are accessing the internet more on their mobile devices now than their laptops or computers. Header tags are vital to allow navigating through the webpage easier. Make sure all the links work, as otherwise people will lose faith in the legitimacy of your webpage and feel it is not maintained properly. They could also be led to thinking it could be a scam if some of the links don't work.
3. (a)
(Term from 2. (a) = "wireframing"): ‘How to Draw a Wireframe (Even if You Can’t Draw)’ by Kelley Gordon, June 2021. The first rule is that messy is completely fine and expected. To prevent becoming far too detailed with your sketch, you can limit the space available to draw in, or use thicker pens to make tiny detailing impossible so that you can focus more on the bigger picture. That's what wireframing is all about. Wireframes are given context by adding navigation and search bars to the drawing. There are a limited number of ways in which these are traditionally shown – horizontal or vertical navigation bars, or even hidden navigation bars that pop out when you click on them. 'Search bars' are generally indicated by little magnifying glass icons. For the ‘Web and User Interface’ module of the MSc in 'Geographic Information Science' these will be of use to us when we get to designing webpages.
 |
| A screenshot from the NNGroup article "How to Draw a Wireframe (Even if You Can’t Draw)" by Kelley Gordon (June 20, 2021) |
 |
| This is how the above blog paragraph would appear on a mobile... |
 |
| ...compared to how it would look on a desktop. |
Part II – Starting Coding
1. Display “Hello World” using HTML:
Part III – Analysing the UI
1. Analyse the following websites with regard to usability in general (from your point of view)
The first thing I notice about the page is that it looks very modern, and was probably designed (or re-designed at least) within the pat 2-4 years. There are large boxes of different colours dotted around the page acting as links with crisp, no-nonsense lines and sharp edges. This reminds me of the current fashion of having geometric shapes on things, or converting natural pictures of animals (a stag, for example) into a geometric shape composed of triangles and rectangles of different sizes. At the moment in 2021 it's fashionable, but for me it looks quite clinical and sterile and I would expect it will look dated within the next 20 years as trends move on, and probably a return to natural curves and softer edges becomes fashionable again.
 |
| An example of the recent geometric trend. |
The TU Dublin page contains all the necessary information you would expect to find on a webpage of its kind, and has helpful drop-down menus for headings 'Study', 'Research', 'Connect' and 'Explore'. Upon opening the page, probably the most eye-catching link is the one for 'CAO HUB' at the top right-hand. When this is clicked it's obvious a lot of attention has been put in to developing this section as the entire page opens to a expensive-looking video panning around different aspects of the TU Dublin campus(es) and has 'Begin your Journey' in large text inviting the user to click it. When clicked, this opens a whole slew of new tabs to be clicked, exploring aspects of TU Dublin for prospective students. I would say the management at TU Dublin spent considerable money in getting this section of the website to look very young and very modern, with the aim to attracting new students to TU Dublin over competing students. The Trinity college website (tcd.ie) looks quite plain in comparison, which makes you wonder if the style and glamour of the TU Dublin website is trying to make up for something - 'style over substance' for example. Also, the Trinity college website probably doesn't need to try as hard, considering the reputation the college has earned over the years as Ireland's premier university.
In terms of usability, I would have to say that it's quite a messy website. It's full of wrong-turns and dead-ends and although I know where to click now to get the things I need, at the beginning I found it quite unnecessarily clunky to use. For example the large, coloured boxes design style used everywhere takes up so much space, and users have to scroll through them to find what they need.
 |
| An example of the cumbersome design |
All in all the website doesn't seem very cohesive and it's obvious that not all of the dit.ie functions have been fully merged with the TU Dublin site. For example, the TU Dublin Brightspace webpage pictured below is still hosted at a DIT address, and the user is warned that it will be archived shorty(!). To reduce confusion, this really should have been completed before students came back to college in September 2021, but with Covid-19 and all the confusion that surrounds it I can forgive them for taking some time.
 |
| Note the domain name at the top of the page (dit.ie/brightspace), even though the banner clearly says TU Dublin. |
YouTube is a website we are all familiar with at this stage, being the go-to page for videos online. It's where most people without Spotify go to hear music (myself included). It's very easy to navigate, and if you're logged in, will recommend videos for you based off previous videos you've watched. It doesn't seem to change it's design very often (maybe about once every 4 years) and in that sense is quite dependable.
I have been uploading videos to YouTube since about 2008, and must say that the part of the website where creators manage their videos has increased in complexity year-on-year. There are several pages you must click through now after you upload a video to note everything, whereas before there was just one. It allows you to look at statistics for your videos, which is very interesting, and also shows how people are finding your videos. If, for example, a video gets a peak of views on a given day, you can see that most traffic for your video came from twitter that day, meaning somebody must have tweeted it. It does not give the option to see the exact tweet though, unfortunately.
When the user is logged in, YouTube has many features down its sidebar, such as 'Home', 'Explore, 'Subscriptions', Library', 'History', 'Your Videos', 'Watch Later' and 'Liked Videos'. Realistically however, I would imagine most people do not use these. Most people simply open YouTube to play the song it is they want, or the video it is they want, and then close it soon after. The search bar is probably the single most important space on the YouTube page, as it is essentially 'Google' for videos. It is hard to see how anyone would have difficulty figuring out how to use this page (pictured below) as it seems to simple. Every single bit of space is used to serve some purpose and there is very little gratuitous design "fluff" such as that seen on the Tu Dublin page for example.
 |
| Note the search bar at the top of the screen. |
Udemy opens onto a fresh, clean page that seems to inspire peace and clarity in the user. We see a search bar in the header which invites us to "Search for anything". The design seems minimalist and clean, with very little clutter or pop-banners pestering you to pay money for anything.
 |
| What the visitor sees first. |
Shortly down the page and the visitor starts to get hit with a selection of codes and courses and prices and reviews (see below) and various intricate detail such as that which you would find on a page like Amazon or Ebay. Essentially, udemy is an online shop and what it is selling is online educational packages.
 |
| The detail of udemy's products becomes clear. |
Earlier this year I signed up to Udemy on the basis of a recommendation from a friend with the purpose of trying to learn some Java. I paid 14 euro for a 'Java Programming for Complete Beginners' and pursued it for a few months. It was structured very well and and the videos were easy to follow and work through in your own time, but eventually it took a backseat as other things in my life took precedence. Below is a screenshot from the 'My Learning' section on Udemy which is what the user sees after they have purchased a course. It is laid out in a very comprehensive way, and it is clear which video you are currently watching and how many are left. Just to give some context, this particular course consists of 372 videos totalling some 31 hours so could easily become confusing if it were not laid out so clearly and simply. It also has a little trophy symbol at the top of the page with a circle around it that gradually becomes filled-in as you continue through the course. Those who complete the course are entitled to print a certificate at the end. All in all it's a very easy to use website.
 |
| The 'My Learning' section on Udemy |
 |
| The course content page. (Note the sliding bar on the right-hand side of the page detailing the Sections and Steps) |
2. Analyse all websites using this validator http://ready.mobi/
(a) What did they look like?
The TU Dublin webpage looked quite good on ready.mobi, although those large blocky boxes looked ridiculous on a smartphone screen, literally taking up the majority of the screen to display one box. Ready.mobi did not give a visualisation of how YouTube would look across the different devices (I'm not sure why). Ready.mobi loaded visualisations for Udemy but unfortunately these stalled on some security-check Captcha required to access the page proper. As a result nothing could be actually seen from the Udemy webpage itself.
(b) How did they score?
The TU Dublin webpage scored badly on ready.mobi, attaining a score of just 0.68. YouTube fared much better, attaining a score of 2.66. Udemy scored highest, with a rating of 3.41.
(c) What are the main problems with each of the three websites?
The main problems with each of the three websites were 'JavaScript Placement' and 'CSS Measurements'
3. Analyse the all websites using this tool http://wave.webaim.org/
(a) How accessible are each of the three websites?
- TU Dublin's website returned 3 Errors, 28 Contrast Errors and 13 Alerts.
- YouTube returned 8 Errors, 0 Contrast Errors and 60 Alerts.
- Udemy returned 2 Errors, 1 Contrast Error and 4 Alerts.
(b) What are the problems in each of the three websites?
'Empty Headings' and 'Empty Buttons' seem to be the most common problems shared across the three websites - these both appearing in the 'Errors' section. TU Dublin's page was littered with contrast errors. Wave.webaim explained how 'adequate contrast of text is necessary for all users, especially users with low vision'. This would hinder such users in their use of the page. In comparison, YouTube had no faults in this area, whilst Udemy just had one. Mistakes that appeared in the 'Alerts' section across the board included 'skipped heading levels' and 'redundant links'.
(b) Are there similar problems in all three?
There are similar problems in all three, namely 'empty headings', 'empty buttons', 'skipped heading levels' and 'redundant links'.
Comments
Post a Comment