Week 1: Learning Outcomes and Lab 1 work

Hello world!
Welcome to my blog for my Web and U.I. class.

Twitter Tasks

Our first task was to join twitter and follow our lecturer. So, I reopened my old twitter account (https://twitter.com/Potpan__)  and followed @dt265. 

I also followed:

@TOG_Dublin    
A Community Hackerspace in Dublin, Ireland. Specialising in coding, electronics, crafting, making.
@xkcd    
Hilarious nerdy comic that often features mathematics and programming

@selator
Software developer, posts a lot about SW development

@machine_person
Python and sql developer

@Jeffrey_Roe
Engineer, director of TOG

@wireframe
Nice design company!

Observations

Wireframing vs. prototyping: What’s the difference?

Wireframes are essentially a layout or base of the design. They indicate the structure of what you are displaying/ building. It is important to have the layout down before you start populating the site, as this will help fix initial problems/ issues without having to change the whole thing at a later stage.

Prototypes are for testing as the design goes on. They are great for doing small experiments on (i.e. a form display). The prototype will also give an idea of what the final product will look like and are great to bring into design meetings for discussion with others..

Source: https://www.invisionapp.com/inside-design/wireframe-prototype-difference/

The 10 Most Common Web Design Mistakes

Non-Responsive Websites
The website needs to work with both phone and desktop. This is because the majority of users access the website via their phone these days. It goes the other way around as well, a desktop site cannot look the same either, as it will look too simplistic and have too few functions.

Colour & Contrast

Colour is key on a website/ displaying info. At the end of the day the end user needs to be able to read/ use the website i.e. it needs to be functional. Not contrasting enough or contrasting too much can be sore on the eye or illegible. Some end users cannot distinguish colours (colourblindness) so in terms of accessibility this is also important. Also needs to be considered in terms of branding/ marketing (ex. TU Dublin = blue)

Source: https://wparena.com/common-web-design-mistakes-to-avoid/

Research via Twitter

Wireframing research via Twitter

Search term: Wireframe

1. Nice design company that I now follow:
https://twitter.com/wireframe

2. Article:
https://medium.com/@toluoshiyemi/wireframing-for-beginners-c80439a403bb

Via https://twitter.com/_ToluO_/status/1300857530894233602

From article:
1. Sketching physically is a great tool. Sketch for end product i.e. an app – sketch in the shape of a mobile phone
2. Research/ user persona/ solution identified to start
3. Use keys/ abstractions when initially drawing a wireframe i.e. a block instead of a paragraph of text
4. Grids are your best friend here
5. Remember that a wireframe is an experiment/ not a final product so don’t be too precious with it.

Slow-loading websites research via Twitter

Search term: Slow loading website article

1. Article on Google Chrome
https://blog.chromium.org/2019/11/moving-towards-faster-web.html

From Article:
1. Slow sites may become “badged” to alert users. This is to improve the google chrome experience
2. Resource: PageSpeed Insights
https://developers.google.com/speed/pagespeed/insights/

For checking page speeds on your site.
3. Resource: Lighthouse

https://developers.google.com/web/tools/lighthouse/

Gives personalized advice on improving your websites performance and best practice.

Analysis of Websites

From my own point of view

https://www.tudublin.ie

TU Dublin is quite a nicely laid out website. On the top right hand corner it has all the shortcurts for students, staff and library. I do feel these could be coloured or more obvious but they are functional. The site features large coloured banners for different areas throughout the homepage.

https://www.youtube.com/

Youtube features a command bar on the left hand side with all the functions and usability tucked away there, which is quite a nice feature I feel. On the right hand side are a selection of videos, relating to what was watched before and interest. I generally find this shows me videos that I am interested in, so also a good feature. The search bar is at the top of the site. While functional, it could be a bit brighter I feel.

https://www.udemy.com/

Udemy I found to be the most usable and functional site of all three. The search bar was clear, categories could be opened and closed easily and were neatly at the top of the page. The light background made for the clearest experience in terms of readability of text. Courses from different disciplines were easy to find and well labelled with clear buttons.

Using the following validator: http://ready.mobi/ 

Youtube

What did they look like? Nothing displayed for the appearance section.
Score? 3/5 (2.66)
Main problems?

The page weight is too large. The major fails here were listed as:
CSS Measurements
Javascript Placement
Etag Support
Caching Control.

TU Dublin

What did they look like?

Desktop Layout: Clear Layout, defined headings that span the page, two columns of information, often sub- divided into further columns in a visually pleasing manner.

Phone Layout is the same as the desktop except that the headings are now more box shaped (pleasing to the eye still)  and the columns are reduced from two to one, which works better on phones. One thing I will say is the phone scroll seems to be quite long which users may find offputting. There also seem to be visually quite a large gaps between the headings which I am not mad about but its better than a crowded page.

Nice functionality via a banner pops down as you scroll down the page for both Desktop and High Tier phone.

For Mid Tier and Low Tier phones the banner is fixed (except for an up scroll) which is fine as well although not as nice. For the Low Tier phone the banner takes up 1/3^rd  of the screen which blocks information/ makes it less functional.

Colour (Same across all versions of site)
Good use of colour. Blue is the brand colour of TU Dublin and this is seen throughout.

Orange and red are used for important headings, this is clever as they on the opposite end of the colour wheel to blue and really pop as a result.

The background is left white which is nice in terms of legibility as all the text overlaid is generally a dark blue or a grey. The headings are also coloured white on top of red/orange which visually links in with the background while standing out.

Subtle greys indicate the bottom of the page which looks well.

How did they score?

3.4 out of 5


What are the main problems?

Main issues with TU Dublin were listed as: JavaScript Placement, Frames, CSS Measurements

Udemy

What did they look like? 

All sites had a banner of a photograph along with the Udemy logo over the top. The desktop site had more functionality with a search bar and categories tab, which was appropriate for desktop as there is too little space on the High tier and Mid tier phone. It was forbidden or unviewable on the low tier phone entirely. 

The desktop site had a 4 column grid with pictures, whereas the High and Mid tier phones had a 2 column grid, switching down to 1 column near the bottom, no pictures and only buttons/ text which worked very well.

In terms of colour they have kept it simple with a white background, grey, blue and black for text and banners, with good contrast when text was overlaid over a colour ( ie white text over a blue button). Simple, effective and functional use of colour overall. The same design principles were applied to buttons on the site, no shadows or crazy colours. Just text with a simple button outline.

How did they score?

3.36 out of 5

What are the main problems?

Main issues of udemy were listed as: ETag Support, JavaScript Placement, CSS Measurements, Image Resizing, Caching Control

Accessibility

Using the following validator: http://wave.webaim.org/

In terms of accessibility the websites had the following features as shown in the table: 
 

Youtube	TU Dublin	Udemy
119 Features - 118 null or empty alt texts 1 language	29 Features 10x alt text 7x linked image with alt 10x form label 2x language	32 Features  7 X Alternative text 1 X Null or empty alternative text 10 X Linked image with alternative text 10 X Form label 2 X Languages
132 Structural Elements  3x H1 tags 5x H2 tags 55x H3 tags 54x Unordered Lists	56 Structural Elements 1 X Heading level 6 X Heading level 2 22 X Heading level 3 7 X Heading level 4 16 X Unordered list 1 X Inline frame 1 X Header 1 X Main content 1 X Footer	46 Structural Elements 1 X Heading level 1 16 X Heading level 2 15 X Heading level 3 1 X Heading level 4 8 X Unordered list 1 X Inline frame 2 X Navigation 1 X Footer
541 ARIA- (role,state or property) 68x ARIA 150x ARIA label 185x ARIA tableindex 3x Aria alert or live region 10x Aria button 61x aria hidden 1x aria expanded 7x aria popup	114 ARIA 40 X ARIA 26 X ARIA label 6 X ARIA description 26 X ARIA tabindex x2 X ARIA alert or live region 13 X ARIA hidden 1 X ARIA popup	398 ARIA 45 X ARIA 44 X ARIA label 1 X ARIA description 266 X ARIA tabindex 10 X ARIA alert or live region 26 X ARIA hidden 1 X ARIA popup

Youtube analysis
Youtube had the most features (however most of the features were defunct/ null), structural elements and ARIA. It appears to be well structured with plenty of h-tags and lists to organise information. It had more than one H1 tag, and having searched online for a clear answer, I am not sure whether this is a problem or not. I would have thought that having more than one H1 tag would be an issue for SEO. It also had only one language which is disppointing for such a big platform. Most of the features listed were null/ empty. However it did have plenty of ARIA and different types of aria present throughout the page, such as buttons, popups and labels for most features.

TU Dublin analysis

TU Dublin was a highly accessible site, with plenty of alt text for features, images, form labels and it also had two languages. It was highly well structured, with a classic single h1 tag, and h2 h3 and h4 all present. Things were organised in unordered lists which really helps a site to be easy to read for accesibility. Its well structured in that is also contains a frame, header, maincontent and footer. Structure of information makes sites easier to comprehend so this is only good. With 114 Aria this site is also highly accesible, filled with labels, alerts and tableindexes.

Udemy analysis

Udemy was very accessible as well, it had many features, with alt text, form labels and two languages. It was a highly structured site, with a classic single h1 tag, and h2 h3 and h4 all present. Things were also organised in lists - very easy to read in terms of accessibility and organisation, and the website was also built on an inline frame. It had 398 ARIA making it highly accesible, filled with labels, alerts and tableindexes.

What are the problems in each of the three websites?

The problems in each website can be summed up in the following table:

Youtube	TU Dublin	Udemy
22 Errors	1 Errors	14 Errors
0 Contrast Errors	43 Contrast Errors	1 Contrast Errors
64 Alerts	12 Alerts	28 Alerts

Are there similar problems in all three?

No. Youtube had many errors and alerts, mainly down to empty labels, empty headings, empty buttons, redundant texts and redundant links. In terms of features it disappointingly had 118 null alt texts which is not great for accessbility. t also had only one language which is disppointing for such a big platform.

TU Dublins main problems were in the large amount of contrast errors on the page (43).

Udemy had the least amount of overall issues, mostly empty labels/ headings and redundant or the same alt texts.