Lab 1

 Lab 1 

    3a

Investigating the disadvantages of wireframes and prototypes with ChatGPT

Prompt:

What are the disadvantages of using wireframes and prototypes in web development?

ChatGPT response:

"While wireframes and prototypes are crucial tools in web development for visualizing and testing the user experience, they come with some potential disadvantages. Here are some of the main ones:

1. Lack of Detail (Wireframes)

• Basic Representation: Wireframes are often quite basic and don't capture the finer details of the final design. This can lead to misunderstandings among stakeholders who might expect more polish or assume that the wireframe is an accurate reflection of the final product.

• Misleading Expectations: Because wireframes are often simplistic, clients or team members might misinterpret them as the actual design, leading to unrealistic expectations.

2. Time-Consuming (Prototypes)

• Extra Development Effort: Building interactive prototypes, especially high-fidelity ones, can be time-consuming. The process of creating these prototypes might divert time from actual development work, particularly if the prototype does not end up being an exact reflection of the final product.

• Overcomplicating the Process: In some cases, too much time spent refining a prototype might lead to unnecessary complexity, especially if it's not aligned with the actual project scope.

3. False Sense of Progress

• Focus on Visuals Over Functionality: Sometimes, teams or clients can become too focused on the aesthetics and interactions demonstrated by a prototype, which could divert attention from core functionality or technical constraints that need to be addressed.

• Distraction from Core Development: Since wireframes and prototypes are more concerned with visual flow and interaction, it can shift attention away from backend or database planning and integration that are crucial for the site’s performance.

4. Limited Feedback (Wireframes)

• Low-Fidelity Wireframes Don't Inspire Full Engagement: Low-fidelity wireframes might not evoke the right kind of feedback from clients or users because they're too basic. As a result, they might not be as effective at highlighting potential issues or gathering meaningful input compared to higher-fidelity designs or prototypes.

• Limited to Layout Feedback: Wireframes tend to focus mainly on layout and structure, which limits the feedback to just that aspect. Interaction design, branding, and user emotions might not be fully explored at this stage.

5. Prototypes May Not Be Feasible

• Inaccurate Reflection of Final Product: Prototypes, especially interactive ones, might give users or clients a feel for the final product, but they often cannot fully replicate technical challenges, backend architecture, or integrations. The prototype may suggest features or functionalities that are difficult or expensive to implement in real life.

• Over-Promising: A well-designed prototype can sometimes create unrealistic expectations about how easy or quick a feature can be developed, especially if the prototype is very interactive.

6. Resource Intensive

• Requires Skilled Personnel: Creating detailed wireframes and high-fidelity prototypes requires expertise in design tools and a good understanding of user experience principles. This may not always be available within the team, leading to dependency on external designers or additional learning and time investment.

• Tools and Software: Developing wireframes and prototypes often requires specialized tools like Figma, Sketch, or Adobe XD, which can add an additional cost if not already in place.

7. Over-Reliance on Wireframes/Prototypes

• Not Always Reflective of Real-World Interactions: The interactions and transitions in a prototype might not translate well to real-world performance, especially on different devices or platforms. This means the prototype might not reveal performance bottlenecks or usability issues that emerge in the real environment.

• Too Much Focus on Aesthetics: Designers might over-focus on making a visually attractive prototype, which could detract from usability testing or business goals.

8. Stakeholder Confusion

• Different Interpretations: A wireframe or prototype can be interpreted in many ways. Non-design stakeholders (e.g., clients or developers) might misunderstand the purpose of the wireframe (it’s not meant to be the final design), or they may see the prototype as a finished product, leading to confusion about the project's timeline or scope.

9. Lack of Real User Interaction

• Testing Can Be Limited: While prototypes allow for user testing, they may not always represent how users interact with the final product in real-world conditions. For example, users may interact with the prototype differently from the actual app or site once it's live, due to changes in the environment or underlying functionality.

---

In short, while wireframes and prototypes offer clarity in the early stages of web development, they can also cause misdirection, delays, and unrealistic expectations if not used appropriately. It's important to balance their use with attention to the actual technical work, timelines, and user research."

    3b

Based on the article on the Aha! website, I do not agree with the response from ChatGPT. The article explains how wireframes, mockups and prototypes are separate and useful steps in the design process. The prompt asked for the disadvantages of using wireframes and prototypes in the design process and the response from ChatGPT is lengthy and repetitive. The ChatGPT response included several potential issues that could arise while using these methods but with most of them the real issue is poor communication with clients or excessive time or resources spent on the planning and design. While the Aha! article is an advertisement for their own products it does provide good reasons to use wireframes, mockups and prototypes which ChatGPT has failed to undermine. 

    3c

From this research I have learned that when asked for a response, ChatGPT will provide a lengthy response. In this case it was asked to describe some of the negatives of wireframes and mock-ups and that is what it provided, however, it does not make a particularly strong argument and should be considered as a warning to anyone who is seeking out information from large language models when they do not have a good understanding of the topic to begin with. 

    4a

The 3 web design mistakes which I have chosen after querying ChatGPT are poor navigation structure, lack of mobile optimisation, and slow loading times as they particularly resonate with me. In their article, Evaluating the effects of responsive design on the usability of academic websites in the pandemic, Parlakkiliç (2022) notes the importance of all three of these design features for better user experience. They include navigations principles, such as keeping navigation up to date, using sign boards and including a menu at the bottom of the page (Parlakkiliç 2022, Pp1314). Mobile optimisation is a key concern in Parlakkiliç's article, particularly on the adaptability of different screen types as what might fit one screen could appear distorted or unclear on another (2022, Pp1310). Slow loading times can be frustrating, especially when accessing web pages from a mobile device and Parlakkiliç notes that coding in CSS and choosing smaller visual components will improve the load time and overall speed of the page (2022, Pp1311).

Parlakkiliç, A., 2022. Evaluating the effects of responsive design on the usability of academic websites in the pandemic. Education and information technologies, 27(1), pp.1307-1322.