LAB 1

                                    LAB 1

PART 1 

Answers to Question 3

Two interesting observation I found in question 3a was the distinct understanding of the  difference between Wireframe and Prototype.

Wireframe is described as a skeletal framework in which a design is molded into. They are represented in form of sketch, lines, which provide the bases and layout a digital design is laid on. It is less detailed, can be done using pen and paper or specialized software like Wirify by Volkside and Freehand by InVision. While,

Prototype is an essential part of a design process that depicts the possible outcome of a design and details how the design will look like. Prototype is well detailed, more or less like a mockup or model of what is expected of a design. A prototype represents the product but not the final product itself. Softwares like Sketch, Invision are used for prototyping.

Wireframing and Prototyping are two important steps in a design process that helps make designing easy.

3b.

From the video in question 3b, 

Web design mistakes are faults or error experienced by users which creates difficulty in navigating such website. They cause visibility problems, accessibility difficulty and usability challenges making such website unattractive for users, thus diminishing the website value. The mistakes are; mobile design on big screen, Icons without label, inflexible input, slow response time, pop-ups/overlay, icons without label, cant select and copy paste, low contrast or tiny test, layout shift on page load and misleading links.

The design mistakes are categorized into three; deliberate mistakes, the stupid mistake and the lazy mistake. Deliberate mistake, also called the evil mistake, here the designer knows the mistakes and was intentionally left on the website for users. In Stupid mistake, the mistakes are not known due to the inexperience and lack of  proper expert designers, making the website annoying to users. The Lazy mistake on the other hand, designers could identify the mistakes but cant actually get themselves to fix it.

4.

From the article, I found the term Wireframing while from the video I heard the term User Experience. I made some search about them on twitter, here are my findings;

Wireframing, found in an article post by @Datamatics in September, 2020. Titled: Importance of Wireframing in Web and App Development. 

Wireframe was described as a structure or final layout map that shows how the visuals of an app will manifest. Wireframing helps give a better view about an app structure, asides that, it also gives a better understanding and improve user experience. Three types of wireframes was defined which were based on complexity, amount of feature and detailing it entails. They are; Low-Fidelity, Mid-Fidelity and High-Fidelity wireframes. Wireframing is important because it saves time, money, makes designing a lot easier and more efficient. 

 User Experience, twitter search on an article post by @antavo in October, 2019. Titled: How Mobile Apps Help Build Customer Loyalty.

In the article, i learnt that user experience entails how a customer interact with, what he experiences when engaging a product or services provided for a period of time. Customer loyalty is an important aspect of business life which helps drive customer life time value that influence the retailer's ROI (Return On Investment).  Here, customer loyalty is gained by creating customized, personalized, easy to use and engaging customer shopping experience via the native mobile Application which serve as a game changer in the industry.

4b.

@dt265: Lecturer handle, so as to get access to ask questions and seek for guidance on the module

@WeAreTUDublin: The university twitter handle for up to date access to happenings in the university community.

@w3schoolonline: To learn coding.

PART 3   

1. Personal Observation

https://www.tudublin.ie/ : Easy to navigate with good pictorial representations, slower.

https://www.w3schools.com/: Simple to use, straight forward descriptions. Loads very fast

https://www.khanacademy.org/: Loads faster than Tudublin website, Lot of pictures, contrast wasn't good enough.

2. https://www.tudublin.ie/: Wasn't loading

https://www.w3schools.com/:Wasn't loading

https://www.khanacademy.org/:Wasn't loading

3. Using http://wave.webaim.org/:

https://www.tudublin.ie/: Errors = 3, Contrast Error = 25, Alerts = 26, Features = 39, Structural Elements =55, Aria = 366

https://www.w3schools.com/: Errors = 6, Contrast Error = 24, Alerts = 41, Features = 8, Structural Elements =113, Aria = 0

https://www.khanacademy.org/:  Wasn't loading.