Prototyping
Prototyping is experimental, permitting designers to implement ideas for testing or fine-tuning and usually comes after wireframing.
The benefit to prototyping is that it will save the client, and the web designer, both time and money before actual development begins. Prototyping conserves time and money in the long run. Benefits
A prototype helps identify flaws in the design. It is best to find flaws before the development (coding) process begins. A second benefit to prototyping is the opportunity to gather feedback before coding, and well before rolling out the website launch. Prototyping gives the web designer a tangible example of the website for stakeholders to see before coding begins. This will help communicate ideas and ensure that all stakeholders are on the same page with website aesthetics and performance. How does prototyping save time and money?
Prototyping allows for the early detection and correction of design flaws, reducing the time and cost associated with revisions during later stages of development. It prevents investment in features that may not work as intended, thus saving resources that would otherwise go towards fixing complex issues after product launch. What is the most prominent misconception people have about prototyping?
A common misconception is that prototyping is a time-consuming and costly process that delays development. In reality, prototyping significantly speeds up the development process by clarifying requirements and reducing changes during the later stages of development. How does prototyping help with gaining feedback?
Prototyping provides a tangible version of a product or feature that stakeholders can interact with, allowing for practical evaluations and feedback. This real-world input is crucial for validating user requirements and functionality before committing to full-scale development, thus ensuring the final product meets the intended user needs and preferences.
Common Patterns of User Activity
Knowing how to analyze common patterns of user activity on interfaces, including breadcrumbs, progressive disclosure, and pattern libraries, is an important part of the prototyping process.
Attention to user activity can help improve the aesthetic design and functions of the prototype (and thus the actual website when it is developed later). Breadcrumbs show where any given page sits on a hierarchical path. For example: Home > Classes > Web Design 101 User Testing breaks down into two different users: Regular Users - Users who are not as familiar with web design or web functionality. Extreme Users - these users would be more critical of the overall design and functionality of the prototype. They may clue a designer in to the issues or hang-ups that a regular user will be grappling with but may not say anything about. For example, if one were to prototype a supermarket, the extreme user would be someone who frequents the supermarket every day. Two different Types of User tests Usability Testing - Usability testing asks, “Can users use the product?” This is associated with heuristic analysis. seek to identify common usability problems of user interfaces. Concentrates specifically on how easy and intuitive the product is to use. It is a subset of user testing that zeros in on ease of use, efficiency, and satisfaction related to the user interface and interaction design. User testing - Involves testing the product with real users to gather feedback on various aspects such as functionality, design, and user satisfaction. It aims to understand how well the product meets the needs and expectations of its users. 5 different tools to help analyze user activity
Web Analytics and Event-Tracking Tools Heatmapping and Click-Tracking Tools A/B and Split Testing Tools MockUp and Wireframing Tools 7-step prototype process
Here is a concise outline of the 7-step prototype process as detailed in the article on Qualaroo:
Collect and Analyze User Information: Gather user data to understand expectations and requirements. Build the Prototype: Create a prototype based on the collected user information, refined from any preliminary models. Decide What to Test: Define specific elements or features of the prototype that need testing. Create a Preliminary Design: Develop an initial design that outlines the prototype's look and functionality. Prepare Test Scenarios and Questions: Design scenarios and draft questions that will be used to guide the testing process. Initiate User Evaluation: Conduct testing with users to collect feedback and identify strengths and weaknesses. Refining and Tweaking: Use the insights gained from user feedback to refine and improve the prototype.
Pattern Library
How is a pattern library defined? A pattern library is a collection of reusable design elements or 'patterns' that are used frequently across a website.
These elements include navigational structures, buttons, forms, and other user interface components, each documented for consistent application. How do pattern libraries help the web designer? Pattern libraries streamline website development by providing a reference of predefined design components, ensuring consistency across the website, making maintenance easier, and enabling faster development as elements do not need to be redesigned or recoded.
What components might you expect to see in a pattern library? Typical components in a pattern library include UI elements such as buttons, form inputs, navigational menus, typography settings, icons, and responsive layout structures.
Each component is detailed with specifications on how it should be used and coded.
What is Progressive Disclosure? Progressive disclosure is a design strategy that defers advanced or rarely used features to a secondary screen, enhancing application learnability and reducing user errors.
This approach prioritizes simplicity by highlighting essential actions and relegating less frequently used ones to deeper layers within the application. How does Progressive Disclosure Help a User? It helps by reducing clutter and focusing the user's attention on the most pertinent tasks.
This prevents users from feeling overwhelmed by too many choices and functionalities at once, making applications easier to navigate and understand. How does Progressive Disclosure Benefit a Web Designer? For designers, progressive disclosure allows for cleaner interfaces that are more adaptable to user needs.
It simplifies the initial interactions, improving user engagement and satisfaction, while also providing flexibility to include more complex interactions as needed without disrupting the overall design flow. It is an interaction design pattern that sequences information and actions across several screens. Ex. Used to assist users with completing a lengthy sign-up form without feeling overwhelmed.
Forms
Forms play a significant role in web design, and how they are designed can impact the user's experience.
Web Forms
Web forms are the primary way communication flows from the end user to the system and are typically created through labels and controls.
Various types of controls allow users to interact with forms such as free text fields, radio buttons, and checkboxes. Typically collects user input information and sends it to the website’s server. Text input fields: These let users enter data. Checkable items: This includes controls such as checkboxes and radio buttons, which allow users to select an option based on the corresponding label. Buttons: There are three types of buttons in HTML: submit, reset, and button. Reset: Resets the form back to defaults Button: Can be customized using JavaScript File Picker: Used to send files to a server
HTTP GET
The HTTP GET method is used to pull or retrieve data, which is typically pulled from a database. It is best practice to only use the HTTP GET method when retrieving data that is not sensitive.
GET requests can be cached GET requests remain in the browser history GET requests can be bookmarked GET requests should never be used when dealing with sensitive data GET requests have length restrictions GET requests are only used to request data HTTP POST
HTTP POST is the method used to send data to a receiving application, and it is how most common HTML forms work. The data sent to the server with POST is stored in the body of the HTTP request.
POST requests are never cached POST requests do not remain in the browser history POST requests cannot be bookmarked POST requests have no restrictions on data length
Data Validation and Cleaning
Regardless of the method a user employs to submit data, it should be validated and sanitized. Validation simply states that the data element has the correct format.
Ex. Ensuring an email address includes the @ symbol, or that a zip code only contains numbers. There are two forms of validation: client-side and server-side. While it is best to use both, server side should always be used, because nothing that comes from the client side should be inherently trusted—even if validation checks are in place. Data sanitization, on the other hand, is about ensuring the data is safe.
Website Frameworks
Frameworks are a set of features, layouts, and other tools to get the website-building process started.
A framework is essentially a set of files such as CSS, HTML, JavaScript, and other files that control a website's structure, functionality, and layout
Knowing the capabilities of a framework before implementing it is important because it will save time and prevent issues in the future. There are many popular options when looking at frameworks,
Two of the most popular frameworks are Bootstrap and Foundation. Both are Front-end framework systems and are excellent programs. Bootstrap is an open-source project that uses a collection of CSS, HTML, and JavaScript files to create pages and applications Foundation uses CSS and HTML files to create responsive web designs. Known for being faster in creating, but also known for being more difficult. documentation and support Here are the answers based on the article from Citrusbug about web development frameworks:
What are some examples of development frameworks? How would someone choose a framework? Choosing a framework depends on specific project requirements including the complexity of the project, the scalability needed, the developer's familiarity with the technology, and the specific features that the framework offers which might be beneficial for the project. What are some of the examples of features with each framework? Angular: Offers a comprehensive solution for building complex client-side applications. It supports two-way data binding, modular development, and robust template building. React: Known for its virtual DOM that enables high performance, it's used for building dynamic and responsive user interfaces. It has a component-based architecture which makes it reusable and efficient. Django: A Python-based framework that emphasizes rapid development and clean, pragmatic design. It comes with built-in features for developing secure websites and integrates with major databases. Express: A minimal and flexible Node.js web application framework, providing a robust set of features for web and mobile applications, including robust routing and server-side logic. Vue.js: Features an incrementally adoptable architecture that focuses on declarative rendering and component composition. It's lightweight and straightforward to integrate with other projects and libraries. Node.js: Not a framework, but a runtime environment that allows for the development of server-side and networking applications. Node.js applications are written in JavaScript
UI Library
A UI library is a set of prepared and pre-configured code snippets, scripts, and tools that can be used to create UI apps, elements, and other web applications.
They work within the framework to provide a template that a developer can start from. Beginning a project with a pre-planned foundation is a lot easier than starting from scratch. Two different types of UI Libraries: Jquery - is a JavaScript library known for creating web apps and other website functions. jQuery also works with Kendo UI. is a lightweight UI library based on jQuery. When looking at jQuery, one of the most prominent features is its size. jQuery works better on mobile platforms due to its reduced size. Therefore, it has an advantage over its opponent, React. jQuery offers interaction behavior controls that set how a website will behave and interact when being used. is also a JavaScript library used to build websites, plugins, apps, and other website functionalities Biggest advantage is it’s support of 3rd-Party applications. More capable of handling complex tasks.
Content management system (CMS)
Content Management Systems are software platform to develop and publish content, specifically websites. CMS is a software platform used to develop and publish content, specifically websites.
Content management systems are software that are used to create, organize, and publish data onto the internet.
Used when creating a website or a blog. Content management solutions offer database storage to keep data up-to-date with real time changes and modifications. Allow for the creation and editing of websites with little to no coding knowledge. Ex. WordPress, Drupal, and Joomla.
Publishing
Importance of Website Publishing Tools:
Assist with deployment and are crucial for web design and implementation. Include code editors, web IDEs, prototyping tools, and FTP clients. Code Editors:
Allow developers to see, modify, and visualize their creations. Various options available, offering different user experiences. Web Integrated Development Environments (IDEs):
All-in-one solutions containing text editors, compilers, debuggers, syntax highlighters, and GUIs. Streamline the coding process by integrating essential development tools. Prototyping Tools:
Facilitate the creation of website mockups to identify potential issues early. Essential for testing and refining website designs before final deployment. FTP and SSH Clients:
FTP clients enable easy uploading of files to web servers. SSH clients allow remote system management, crucial for accessing systems from any location. HTTP and Browser Developer Tools:
HTTP is a protocol that enables internet communication, essential for web interaction. Browser developer tools help diagnose issues, offering features like HTML/CSS inspection, network usage monitoring, and performance optimization. Integration and Usage:
Tools work together to enhance web development workflows. Web IDEs offer more features than code editors but may be more complex. Prototyping tools must be used in conjunction with other development tools to be effective. FTP clients are used for file management and server maintenance, not for website creation. Browser tools focus on troubleshooting and fine-tuning website functionality.
Hosting and Domains
Shared Hosting:
Multiple websites are hosted on a single server, sharing hardware, network, and storage. Suitable for beginners due to simplicity but not ideal for larger organizations due to resource limitations. Virtual Private Server (VPS) Hosting:
Unit 8: Designing an Interactive Webpage User Interface
