CMPU4063 Lab 1

Part 1 - Beginning Web Development 

3. Read the following two articles and discuss two interesting observations from each article.

3a. http://www.creativebloq.com/web-design/jargon-wireframes-mockups-prototypes-51514898

3b. https://dzone.com/articles/common-mistakes-made-by-web-developers-and-how-to

3a. Observation 1: 

Completing a wireframe, mockup, and prototype for a project is very important. This paper states that completing each phase is important; it saves time in the final phases of a project through reducing chances of mistakes, missing something, predicting problems before they become real problems, and allows stakeholders to give feedback earlier on. (Cao, 2017)

3a. Observation 2

While each stage is important, the same steps will not be best for every project. While this paper encourages working from a wireframe to mockup to prototype, it is also important to take into account what works best for the individual project. Some projects start with a mockup, and some start with multiple lo-fi prototypes; you have to decide what will work best for your project. (Cao, 2017)

3b. Observation 1

It is important to keep up to date with the latest technology. Even if you are experienced, outdated habits can lead to issues when creating a website. Outdated code can cause performance and layout issues and slow down a website, so it is important to keep to the latest standards to make a website run as smoothly as possible. (Roy, 2018)

3b. Observation 2

All mistakes contribute to low search engine results. This paper goes through a few common mistakes when creating a website, from outdated habits, to poor testing, to website builder tool issues; they all lead to the website appearing low down in search engine results. By following correct and up to date procedures, this minimises the chance of poor user experience and compatibility issues, and increases the chance of appearing high up in search engine results. (Roy, 2018)

4. Pick one term/technology from each of the two articles in 3 (one from 3a and one from 3b):

4i. term from 3a:

Low-fideltiy (lo-fi) Prototyping

4ii. term from 3b:

Responsive Web Design (RWD)

4a. search result for term 4i:

@melaniekhal shared an article ‘The Skeptic’s Guide To Low-Fidelity Prototyping’. This article talks about how lo-fi prototyping can be used to discover issues early on, can be built cheaply and easily, and receive feedback on the concepts rather than the little details of a high-fidelity prototype (Busche, 2014). @PropCazhPM shared an article entitled ‘How To Choose The Right Prototyping Tool’, which discusses how the level of fidelity you are aiming for in your prototype affects which tool you should use; how if you want a lo-fi prototype you should choose a tool that minimises control over the design, to stop you from being distracted by the details, such as using pen and paper to focus on the idea itself (Cuello, 2016)

4a. search result for term 4ii:

@theseotrends shared an article on ‘Main Important Features of a Responsive Web Design’. This article talks through the importance of RWD, from positive user experience, to decreased maintenance, to better search engine results (admin, 2018). @Nextwave shared an article on ‘how are responsive web designs important to help grow your business?’, which talks about using RWD on a business website to increase sales, letting customers browse on their phones, and increasing traffic to the website. (Dahbi, 2019)

4b. person 1:

@101babich – Nick Babich, ‘editor-in chief of @uxplanet’. I followed Babich as he shares articles which may be useful throughout this module on topics such as mobile app design, creating mockups, creating better user experiences for websites, and overall design tips.

4b. person 2:

@ResWebDes – Responsive Web Design, or RWD. Their biography reads ‘A collection of resources covering all your questions on #rwd with a newsletter & podcast’. I followed this account as they share many articles and links about responsive web design. They also share websites which are good examples of using RWD, and I think this will be useful. 

4b. person 3:

@TechSkillnet – Technology Ireland Software Skillnet. Their biography reads ‘Training and Development Network for Irish Software and Technology Sector companies’. This is an organisation which provides support and funded training for software and technology staff, and free technology seminars from experts. I followed this account as they often share online articles about relevant topics such as user experience design, understanding customer and user needs, and mobile app design.

Part 3 - Analysing the UI

1. Analyse the following websites with regard to usability in general(from your point of view)

Pinterest (3.1i)

Desktop: 

On desktop, Pinterest immediately asks for a sign in. During the setting up of an account, it asks you to pick several hobbies or interests from a list. Once logged in, you will see five columns of 'pins' which continue to load as you scroll down. These pins are relevent to the interests you initially selected. When you see a pin that interests you, you simply click on it, and it expands to give more options. The options include 'save' which allows you to save the pin to view later, the username of the person who posted it, an option to share a photo, and an option to share a comment. If you click on the pin again, it will open a new tab with the source of the pin. For example, I set up an account, and selected 'crochet' as a hobby. Pinterest then showed some pins relating to crochet, including one which had a picture of crocheted leaves, with words over it stating 'free pattern'. I clicked on this pin, saved it for later, and then clicked it again to show me the website with the free pattern on it. There is also a search bar at the top of the page which you can use to search for specific pins. Overall, Pinterest seems very user-friendly and has a simple layout. The options are very straight-forward, and I found the site easy to use to find what I wanted to find.

Mobile:

The mobile version is very similar to the desktop, except the columns are limited to two instead of five. The mobile version is quick and easy to use.

tudublin.ie (3.1ii)

Desktop:

The homepage of the desktop version of the TU Dublin website has several options. The top bar has two rows. The first row has five options; 'for students', 'for staff', 'library', 'contacts', and 'search'. The second row also has five options; 'study', 'research', 'connect', 'explore', and 'courses'. There is then a search bar below the top bar for searching courses. There are then four more big sections as you scroll down; 'life at TU Dublin', 'facts and figures', 'research at TU Dublin', and 'news and events'. At the bottom of the page are the same options again for 'study', 'research', 'connect', and 'explore', as well as a list of contacts. There is a lot of information on the homepage, a lot of which repeats at least once or twice. I found this to be a bit confusing, as I was not sure where to start, which of the four 'search'/'explore' options to use or if there was a difference between them.

The search option for finding courses does allow you to apply several filters such as part time or full time, location, or duration, which I found were helpful to look for courses. The website does load each page quicky, and there is a lot of information available; I just think it would be less confusing if there were not so many similar options on the initial homepage.

Mobile:

The mobile version is very similar to the desktop except narrower to accommodate mobile browsing. It has all of the same options as the desktop version. I did find that parts of the website were not formatted correctly on mobile, such as the WiFi tutorial, which shows two videos under the 'how to get started' version, but they overlap each other on mobile:

videos overlap on mobile

khan academy (3.1iii)

Desktop:

On desktop, I was immediately asked to create an account, and select courses from a list of categories such as maths, computer science, and science. It then brought me straight to my profile. This page is laid out very simply and clearly, showing  two columns with each course and an option beside each course to start. At the top of the page there is a drop down menu listed all of the courses available, as well as a search bar for searching the site. The side of the page shows another column with options specific to me, such as 'progress' and 'account'. Then at the bottom, there are more links such as 'about' and 'contacts'. This website loads quickly, is nice to look at, and appears easy to use due to it not having too many options and appearing straight-forward.

Mobile:

Again, the mobile version is similar to the desktop version except it s narrower and only consists of one column. The mobile site is simple and easy to use; I had no issues with it.

2. Analyse all websites using this validator http://ready.mobi/

Pinterest (3.2i)

a. The site looks good on high and mid tier mobiles, however desktop and low-tier did not work; they just displayed a message saying 'Whoops! We couldn’t find that page'.

b. Pinterest scorred 2.55 out of 5, which is considered 'performing well'.   

c. The page weight is very low, which helps improve user experience. There were four major fails; ETag support, JavaScript placement, image resizing, and caching control. It also had six minor fails, and twenty-eight passes.

tudublin.ie (3.2ii)

a. The website looks similar across desktop, high, mid, and low-tier mobiles

b. tudublin.ie scored 1.84 out of 5, which is considered 'performing very poorly'. 

c. The page weight is considered too high, which lowers user experience. There were three major fails; JavaScript placement, Stylesheet placement, and CSS measurement. There were also eight minor fails and twenty-seven passes.

khan academy (3.2iii)

a. The site looks like it should on desktop, high tier, and mid-tier phones, but on low-tier it states 'Khan Academy does not support Internet Explorer'.

b. Khan academy scored 0.54 out of 5, which is considered 'performing extremely poorly'

c. This low score is due to there being too many fails, and having a high page weight.  There were six major fails; Etag support, JavaScript placement, frames, CSS measurements, image resizing, and cachig control. There were also eight minor fails and 24 passes.

3. Analyse the all websites using this too http://wave.webaim.org/

Pinterest (3.3i)

a. Pinterest appears very accessable according to this tool due to only having one alert and no errors

b. Pinterest only had one alert; 'no heading structure'. Headings are important as they provide structure to a page and help with navigation for assistive technology users. 

tudublin.ie (3.3ii)

a. TU Dublin has some accessibility issues according to this tool.

b. TU Dublin had six alerts; one 'link to PDF', one 'noscript element', and four 'redundant title text'. Links to PDFs can cause navigation and confusion issues, as they often have accessibility issues.

It also had twenty-six contrast errors; these were all 'very low contrast'. This means that there is very little contrast between foreground and background colours, which may make it difficult for users with low vision to view it.

khan academy (3.3iii)

a. Khan academy has some accessibility issues according to this tool.

b. Khan academy had six alerts; four 'redundant link', and two 'noscrtript element'. Both of these issues lead to additional navigation and also repetition for  users with screen readers.


c . Are there similar problems in all 3?:

All 3 sites have some accessibility issues, though Pinterest appears to be the most accessible and TU Dublin the least. Pinterest and Khan academy's issues relate mostly to accessibility for assistive technology users. TU Dublin also shares this, but also has issues with navigation for other users and also issues with visibility for users with low vision.

References:

Admin. (2018). Main Important Features of a Responsive Web Design. Available: http://www.googleseotrends.com/features-responsive-web-design/. Last accessed 21/09/2019.

Busche, L. (2014). The Skeptic’s Guide To Low-Fidelity Prototyping. Available: https://www.smashingmagazine.com/2014/10/the-skeptics-guide-to-low-fidelity-prototyping/. Last accessed 21/09/2019.

Cao, J. (2017). All you need to know about mockups, wireframes, and prototypes. Available: http://www.creativebloq.com/web-design/jargon-wireframes-mockups-prototypes-51514898. Last accessed 21/09/2019.

Cuello, J. (2016). How To Choose The Right Prototyping Tool. Available: https://www.smashingmagazine.com/2016/09/choosing-the-right-prototyping-tool/. Last accessed 21/09/2019.

Dabhi, J. (2019). How are Responsive Web Designs Important to Help Grow Your Business?. Available: https://techtiptrick.com/responsive-web-designs-importance/. Last accessed 21/09/2019.

Roy, A. (2018). Common Web Development Mistakes and How to Avoid Them. Available: https://dzone.com/articles/common-mistakes-made-by-web-developers-and-how-to. Last accessed 21/09/2019.