Lab 1

Lab 1

Part I – Beginning Web Development

Question 3a: Wireframing vs. prototyping by Will Fanguy

Interesting analogy, according to Fanguy(2018): wireframes are the skeleton and prototypes are moldable skin. To Fanguy wireframes represents information, outline of structure, layout, overall direction and description of the UI. Prototypes however, are simple working model of an app or webpage. Both have different fidelity levels or detail.

Question 3b: 10 Most Common Web Design Mistakes to Avoid in 2019 by Muhammad Abdullah

Interesting advice on web design according to Abdullah(2019), A webpage must load in 5 seconds or less otherwise people will leave. It must also be mobile friendly because people access the Internet more with their mobile devices than with laptops or computers.

Question 4a: Term/Technology No.1 - Low Fidelity vs High Fidelity

Wang(2020) described the term fidelity for prototyping. Hand-drawn sketches are low fidelity and interactive mockups of high fidelity. She explained that at a minimum for low fidelity you need to allow navigation from one screen to the next and at a minimum for high fidelity must have ability to add motion and transitions.

Question 4a: Term/Technology No.2 - Google Insights

According to Ciurkot(2018) Google Speed Insights is a great tool from Google that shows you where your website lacks when it comes to performance. It can be used as a recommendation to improve some significant aspects of your site such as image optimisation.

Question 4b: Designers to follow on Twitter

The people I followed on twitter are:

  1. The Net Ninja (Teaches Udemy course in design and frameworks)
  2. Paul Smith (Designer & contributor to BBC)
  3. Luana Cavalcanti (Designer & founder of Ladies that UX Dublin)

Part III – Analysing the UI

Summary

TU Dublin, Youtube and Udemy's website scored poorly on speed. This should be the focus of improvement. Colour scheme, font size, icon and symbols were all sufficient with TU Dublin's content scattered throughout its navigation. For TU Dublin navigation should be focus on improvement after speed is improved.

Both Ready Mobi and Wave Accessibility analysis were carried out highlighting javascript placement and empty buttons as main issues to resolve. Full details including screenshots can be found below.

Methodology

This analysis looked at the usability of TU Dublin, Youtube and Udemy's website.

Usability is important in web design because it ensures users get to the content they are looking for easily so a framework to review these sites was used to focus on this.

The framework is based on the General, Graphical and Structural Evaluation (GGSE) framework recommended by Nazir (2018). Google PageSpeed Insights was used as recommended by Abdullah (2019), with Ready Mobi and Wave Accessibility analysis conducted afterwards.

Question 1. General Usability Analysis

General analysis Structural analysis GUI analysis
TU Dublin title tag reads 'Home' and landing page reads 'our future is full of infinite possibilities'. YouTube only has its name as the home tag and landing page is a call to action to listen to music, even though it's a video website.

Udemy has "Learn anything on your schedule" and landing states "Learn on your schedule. Study any topic, anytime. Explore thousands of courses starting at €14.99 each". Udemy's purpose is clear, TU Dublin and YouTube are not.

Language used for both TU Dublin and Youtube assumes you are familiar with their site. Udemy's landing page text is understandable and clear. Using Google PageSpeed Insights response time for TU Dublin which scored 58 on mobile. Udemy scored 56 and Youtube is 47 on mobile. All are not adequate response times. Both YouTube and Udemy provide concise information. TU Dublin is scattered throughout its navigation.
TU Dublin navigation does not link to all important features as there are two many. Its main features are broken up into student users and staff users.

Youtube navigation is clearly pointing user to trending feature Udemy points users to categories of course or how they can teach their own.

All have elements of unnecessary scrolling but this was not significant. Control forms are in correct place on all websites either to allow the user to quickly search or funnel them into important features.
Colour scheme, font size, icon, control forms and symbols are appropriate on all sites.

Question 2a. Ready Mobi Analysis

The following are what the websites look like, how well they scored and why on Ready Mobi.

TU Dublin

Youtube

Udemy

Question 2b. Webaim Analysis

The following are how well each website was accessible are each of the three, what problems there are on Webaim Analysis. Udemy had empty button links, Youtube and TU Dublin had similar Broken ARIA references.

Tu Dublin

WAVE Report
Full Tu Dublin Results

Youtube

WAVE Report
Full Youtube Results

Udemy

WAVE Report
Full Udemy Results

Discussion & Conclusion

All sites had good Colour scheme, font size, icon and symbols with TU Dublin's content scattered throughout its navigation. All sites scored poorly on speed. This should be the focus of improvement. Ready Mobi showed that Javascript placement, cache control and ETag <etag_value> support were all issues to resolve. Wave Accessibility results showed mainly showed empty buttons, empty header, empty labels and empty links with Youtube scoring the worst.

References

Will Fanguy (21st March 2018) Wireframing vs. prototyping: What’s the difference?, Available at: https://www.invisionapp.com/inside-design/wireframe-prototype-difference/ (Accessed: 28th September 2020).

Muhammad Abdullah (2nd October 2019) 10 Most Common Web Design Mistakes to Avoid in 2019, Available at: https://wparena.com/common-web-design-mistakes-to-avoid/ (Accessed: 28th September 2020).

Kitty Wang (22nd September 2020) What Is Rapid Prototyping?, Available at: https://marvelapp.com/blog/rapid-prototyping/ (Accessed: 29th September 2020).

Marzena Ciurkot (08th January 2018) Google Speed Insights – Get it right!, Available at: http://digitalmediafacts.com/google-speed-insights-get-it-right/ (Accessed: 29th September 2020).

Nazir, Aiman & Zafar, Iqra & Shaheen, Asma & Maqbool, Bilal & Qamar, Usman. (2018). GGSE-Website Usability Evaluation Framework. Available at: https://wparena.com/common-web-design-mistakes-to-avoid/ (Accessed: 29th September 2020).

Muhammad Abdullah (2nd October 2019) 10 Most Common Web Design Mistakes to Avoid in 2019, Available at: https://wparena.com/common-web-design-mistakes-to-avoid/ (Accessed: 28th September 2020).

Show Comments