BLOG_1
LAB 1
Part I
Read the following article:
https://www.invisionapp.com/inside-design/wireframe-prototype-difference/
a.
In ChatGPT, investigate the
disadvantages of using wireframes and prototypes. Copy and
paste the output of ChatGPT into your blog
Disadvantages
of Wireframes
1.Lack of
Detail
· Visual limitations
· Interaction Limitations
2.Miscommunication
· Unrealistic Expectations
· Over-focus on Layout
3.Time-consuming
for Complex Projects
4.Limited
Usability Testing
Disadvantages
of Prototypes
1.High
Resource Demand
· Time and Cost
· Iteration Burden
2.Misleading
Fidelity
· False Confidence
· Neglecting Functionality
3.Overemphasis
on Aesthetics
4.Not
Fully Interactive
5.Increased
Complexity for Testing
b.
Based on the article you read in 3(a), do you
agree?
Yes, I agree. ChatGPT has break down the
disadvantage into more specific sub-points, critically analysing disadvantages.
c.
Mention one fact that you learned from this
research?
While reading any article we have to
critically analyse its content in depth.
1.
In
ChatGPT, research the most common web design mistakes. From your
investigations:
a. Choose three design mistakes
that resonate with you.
1.Unclear
Navigation
2.Cluttered
Design
3.Poor
Search Engine Practices
b. Find an article that corroborates the three design
mistakes that you have identified.
"Web-based Presentation of Information: The Top Ten Mistakes and Why They are Mistakes" by Thomas-Tullis
Part III-
Analysing the UI
1. Analyse the following websites with regard to usability in general (from your point of view)
Technical
University Dublin - https://www.tudublin.ie
-Good
use of colour theme which is easy to read due to good contrast
-Double
line navigation bar with unclear purpose
-Users
are able to switch the language between Gaeilge and English
-Two
search option given leading to different pages
-Availability
of pre-defined filters in courses search options
-Dedicated
organised sections for different categories
-comprehensive
and user-friendly footer section
-Some
sections (for example navigation bar without dropdown menu) are layered that
requires extra clicks to access information.
-Visually
appealing with balance of text and pictures
-Works
well across devices, ensuring mobile compatibility.
Queen’s University - https://www.qub.ac.uk/
-Good use of colour theme
-Simple navigation bar with drop down menu
shown while hovering in the navigation bar panel
-Virtual tour option is given which
-Prominent search bar lack of predefined
filters
-Site adapts well to different devices.
However, too much content makes the page longer for mobile view.
-Dedicated sections for news, events, and
research, providing comprehensive information
-A bit cluttered because of extensive menu
University of Edinburgh - https://www.ed.ac.uk/
-Banner section too big
-Simple and primitive with poor choice of
colour theme
-Not good utilization of space, lot of
white spaces
-Most part of the home page is filled with repetitive
contents
-Search option is given but difficult to
locate, which makes it difficult to access information.
-Layered section and difficult to navigate
2.
Download Window Resizer for
Chrome:
a. What does each website look like on
mobile?
TU Dublin Website:
-Although the website looks adaptable in mobile it is too long. Lack of
collapsable and expandable contents.
-Lots of white spaces on mobile version of website
-Footer section looks longer and is poorly utilized.
Queen’s University Website:
-Website is mobile-friendly.
-Lot of contents which require more scrolling.
-Well-organized collapsible menu.
-Contents loads efficiently.
University of
Edinburgh Website:
-Lack of collapsible and expandable content
-Readable in small screen with large images and clear text
b. What does each website look like on
tablet?
TU Dublin Website:
-Pages adjust well
-Long and space consuming footer section with lot of white-spaces
-“Explore our Disciplines” section is not organised well
-Separate tabs opens when clicked at “Explore our Disciplines” options
which might be inconvenient for some users
Queen’s University Website
-Good utilization of space.
-Readable and responsive collapsible menu.
-Pages adjust well
University of
Edinburgh Website
-In tablet also
banner occupies more space.
-Pages are responsive and adjust well
-Spaces in footer section is not utilized well.
c. What does each website look like on
desktop?
TU Dublin Website
-Web site adjusts well in desktop
-White spaces in right- and left-hand site looks bigger and waste of
space
Queen’s University Website
-Site adapts well in Desktop
-Easy navigation and clear content structure
-Full layout with good balance of text and images
University of Edinburgh Website
-Website doesn’t adjust to the laptop size, is smaller than screen size
3. Analyse all websites using this tool http://wave.webaim.org/
a.
How accessible are each of the three websites?
TU Dublin Website: This website is relatively accessible. It has 2 errors and 9 contrast issues which may hinder readability for users with visual impairments.
Queen’s University Website: This university shows 0 errors, 3 contrast issues and highest number of ARIA elements(508) indicating complex accessibility handling.
University of Edinburgh: This website is the most accessible among three
with 0 errors and only 1 contrast issue and least ARIA elements (23)
b. What are the problems in each
of the three websites?
TU Dublin Website: The main problem in this website is
contrast with contrast errors 9.
Queen’s University Website: The problems in this website is contrast
errors and high number of ARIA alerts.
University of Edinburgh: This website has contrast errors.
c. Are there similar problems in all
three?
-Contrast errors are present in all three websites, which can affect
users with visual impairments
-All websites have alerts, structural elements and ARIA elements, which
might make it more complex for users.
Comments
Post a Comment