Categories
Content Management

SBW Revisited Report

New Updations

  • Shop open and close indicator
  • PHP- Modularity using server-side includes
  • Contact form as an additional feature
  • Proper HTML and CSS Validations
  • Accessibility features implementation
  • Improved SEO features
  • Responsiveness, Mobile friendly implementation
  • Custom error pages

The first small business website was built using a desktop-first strategy, and it only works on standard desktop sizes. The main goal was to create a site that had a polished appearance and feel while also giving the intended audience the feel of a premium branded bakery website. The colour design for the logo was chosen to be related to the sweets. The entire page’s colour palette is based on the logo. The complete webpage layout was constructed with a suitable amount of white space and an attempt to achieve acceptable aesthetic balance after multiple iterations and re-designs.

I went with a font that is both readable and high-end. Only two font faces were used throughout the website to preserve consistency. Text colours are chosen to create a high level of contrast and legibility. Because the initial version of the small company website was almost effective in delivering the website’s stated function, I decided not to make any significant design changes. Concentrate on the most significant small content and minor design modifications and additions rather than major design changes. Even if the original copy had some flaws, such as putting an article in the footer, using a section tag instead of a div tag, putting a button inside an anchor tag, and so on. Although almost all of the photographs had alt tags, there were no decent explanatory descriptions, which was another issue that needed to be addressed. These were the most significant aspects to consider while revamping the small business website’s major edition.

Shop open and close indicator

With the aid of Java-script, I have developed an indicator as a new update that the website user will be able to understand if the Bakery is open today or not, as well as the hours of operation. This is placed in the homepage’s title area so that the user sees it first when the page loads.

PHP- Modularity using server-side includes

I used the same code for navigation, footer, header and other elements on every page of the initial small company website. I used PHP server side includes for the head, header, and footer sections of the new small business revamped website to boost code reusability and make it modular. The title is supplied as a variable in the head section, along with the PHP include. Using PHP includes for a smart navigation menu in the header allowed the small company website’s other subpages to have the same and consistent menu.

Responsive Design

The website was not responsive at first, and it had troubles with different screen sizes. The revised version now has a mobile-friendly design with toggle navigation. Another issue I had was the logo showing up on mobile views, which I was able to fix by using the display: none attribute.

Breakpoints for responsiveness have been established at 1200px, 992px, 768px, and 576px, allowing for a beautiful and responsive design across a variety of devices. It was also tested on a real mobile device to ensure that the mobile layout was user-friendly and functioning.

Custom 404 page implantation

Creating a custom 404 error page with.htaccess was another time-consuming step for me. The colour scheme for Richardson’s bakery’s website now includes a custom 404 page with a link to the homepage.

Animation

I attempted to develop a small java-script based animation for the homepage banner image in order to draw the user’s attention to the image and inform him that he is visiting a bakery website. It’s also an experiment in learning how to use java-script to animations.

Summary

The design of this website was primarily focused on increasing business, user experience, and website reach. The website is largely accessed by mobile devices by the target population. The mobile-friendly responsive design will contribute to the consumers’ delight. The overall user experience will be improved by using SEO-friendly coding approaches and other accessibility strategies. Small coding errors were discovered and corrected, which helped to clean up the website and increase its general efficiency.

It is simple to design a website, but adhering to all of the concepts and theories I have studied thus far is more difficult. Things we overlook can have a big impact on a website’s functionality, performance, purpose, usability, and user experience. In order to build clean websites that fulfil all user expectations, it is vital to continue to study and refresh our skills in all essential areas of web development, including content generation, design, coding, and implementation while following to all standards. There’s still a lot to learn, and I’m doing so every day.

Categories
Content Management

Content Management

Page load speed is a UX consideration. How can we check the speed of our pages and improve it?

Page speed is always defined as the time it takes for a web page to load in a specified length of time. The page speed is also considered an important factor for the user because the faster pages always provide a better on-page User experience. Additionally, the efficiency of faster pages is highest as compared with moderate and lower speed pages. The loading speed of pages can be determined by various factors such asa server of site, image compression and total file size of a page. Therefore, the loading speed of pages is also a major concern for users. This report is going to illustrate the way for checking the speed of any pages. Moreover, suitable and possible strategies to improve the page loading speed will also be recommended at the end of this report.

Effect of page speed on User Experience

The page speed creates a huge influence on the interest and experience of the user while using a website. It has been identified that nearly half of the users of a website expects a site to be loaded in 1 or less than 1 second. However, if the loading of the website takes more speed than most of the users shift to other websites. This highlights the importance of page speed on the experience of the user. It is worth mentioning that page speed signifies the speed of a website to be loaded efficiently and show relative information regarding the search data. However, high speed of page loading helps the user to stay connected with the information shown on the website. In case, where the loading takes more time than the user tends to shift to an alternative website.

Ways to check the load speed of any page.

This section is going to discuss the ways to check the loading speed of a web page. Pingdom, Google pageSpeed, GTMetrix, Light House, Dotcom-Monitor Website Speed Test, BrowserStack SpeedLab

These are some of the most effective tools for determining a web page’s loading speed. The usability of these may now be described as follows:

Pingdom

https://tools.pingdom.com/

This tool always scans a web page and then identifies all the affective issues that are the main reason for slowing down the loading time. With the help of this particular tool, the uptime and interactions can be easily measured. Simultaneously, the page size, request number and performance grade can also be cracked on a web page by this tool which helps developers to take the necessary steps to increase the loading speed. Based on this particular tool 1.55 seconds is the suitable loading speed of a page.

Google pageSpeed

https://pagespeed.web.dev/?utm_source=psi&utm_medium=redirect

This particular tool is owned by Google which takes the evil of a web page and performs a few tests to analyse the loading speed of it and send it to the developer. It is an open-source and free tool that always helps to analyse the overall performance of a web page. The proper identification of low page loading issues can also be performed by this tool with the help of real-world data andthe Chrome User experience report dataset. Based on this particular tool 0-2 seconds is the suitable loading speed of a page.

GTMetrix

https://gtmetrix.com/

GTMetrix is a page speed and performance analysis tool. It provides Pagespeed and WiSlow scores and generates scores for our pages. It’s a free application that we’ve discovered may be used to generate thorough information regarding the performance of a website. It assigns scores to the pages and makes ideas for how to improve them.

Light House

https://developers.google.com/web/tools/lighthouse

Google Lighthouse is a free, open-source tool for improving the speed, performance, and overall experience of your website. It’s easier to improve the quality of your web pages when you generate Lighthouse reports. Lighthouse is also an automatic tool for analysing a website’s performance. Lighthouse, on the other hand, is used with Google Chrome’s DevTools. Because everything is in one tab, it’s easier and faster to check a website’s performance figures, test for improvements, and make changes.

Dotcom-Monitor Website Speed Test

https://www.dotcom-tools.com/website-speed-test

The Dotcom-Monitor website speed test tool analyses websites from various geographic areas at the same time, which is ideal for marketers that want a deeper understanding of their worldwide website performance. Every location examined comes with a detailed report, and performance data show which components of your website are the fastest and slowest.

BrowserStack SpeedLab

https://www.browserstack.com/speedlab

In this group of page load speed testing tools, BrowserStack SpeedLab is unusual in that it delivers load times for many browsers and devices. To boost accuracy, it uses BrowserStack’s Real Device Cloud to assess webpage speed.

Strategies to improve the page load speed

After analysing all the cause factors of low page loading speed and its impact on the User experience, this section is going to discuss a few improving strategies. The main purpose of all these strategies is to enhance the page loading speed. Therefore, all those strategies can be discussed as-

Strategies to enhance the loading speed of a page

Selection of performance-optimized hosting

The performance can be measured by the loading speed of a page. In order to get a minimal monthly rate a certain number of web developers usually choose mediocre hosting. This mediocre or cheap hosting cannot share necessary resources between a server and multiple webpages, ultimately increasing the overloading rate of a server and straining up the loading times. Therefore, the selection of performance-optimized hosting always provides a designed powerful platform that reduces the chances of webpage draining. The decrease of website draining usually enhances the resource sharing between webpage and server which develop the loading speed and that can be measured by the Time to First Byte (TTFB) tool.

Compression and optimizing images

Images always enhance the webpage appearance along with the quality of content. However, the presence of large images in web pages is also a major reason for delaying loading time, and the metric for measuring such incidents is DOM processing time. In order to resolve this issue, compressing and optimizing large images is the best way to increase loading speed. This particular way changing of file format, enables lazy loading and then compresses large images by lossless compression. Additionally, the use of WP Smush plugins also performs this optimization by reducing the weight and file size without affecting the quality of the web page. It has been identified that with the help of this particular strategy the loading speed of a page always increased from 25% to 80%.

Reduce redirects

The presence of various redirects always prolongs the HTTP request and its response process which ultimately increases the loading time. In the case of moving to another domain, the presence of unnecessary redirects, and unnecessary plugins make the page loading time lower significantly. Therefore, reducing the number of redirects from the webpage with the help of a redirect mapper tool can build strong internal links between two different domains. Additionally, it also makes both domains the top-level domain (TDL) which ultimately develop the page loading speed.

Enable Browser caching

Browser caching can be considered the most effective way of caching the leverage of web pages which improve the page loading speed. This technique always enables a browser to save various types of information such as stylesheet JavaScript files and images efficiently. This efficient storing of effective information eliminates the necessity of reloading the entire page at every time. Moreover, the particular way also employs cache preloading that maximizes the page loading speed by creating lightning-fast loading time. WP Rocket is the premium plugin that always performs this browser cache enabling aspect which can improve the loading speed hugely.

Use of asynchronous CSS and JavaScript files

Web pages are always made with several CSS and JavaScript files. Based on the loading of these files the loading speed of the entire page is always measured. The synchronous loading of a page always loads all the files once at a time based on the storing sequence. For this, the browser often encounters all those files and scripts which stop the loading of major elements on the page. That’s why web developers should use asynchronous loading that always allows a user to load multiple files at the same time. In addition, this asynchronous process also eliminates render-blocking resources that speed up the performance and loading time of a page.

Leverage a CDN

The content delivery network (CDN) is always considered as a network of services that can improve the loading speed of a page significantly. The leverage of a CDN is always used to deliver static content copies from the server to users across the globe. This particular technique always reduces the travel distance of data requests between the browser andthe host server. In addition, this particular technique also eliminates network latency along with producing lower TTFBs that increases the loading speed of a page.

Now, it can be said that all these are the most suitable and effective techniques or strategies that can increase the loading speed of a web page which will ultimately provide a comfortable user experience.

Conclusion

Thus, it can be concluded that this entire report has been formulated based on the phrase “page load speed is a UX consideration”. Due to this reason, the effect of loading speed on user experience has been critically identified and discussed in this report. After analysing all these reasons and their impact on user experience a few mitigation strategies also has been provided in this report which will help the global web developers to improve the loading speed of their web pages.

Reference List

Asrese, A.S., Walelgne, E.A., Bajpai, V., Lutu, A., Alay, Ö. and Ott, J., (2019) March. Measuring web quality of experience in cellular networks. In International Conference on Passive and Active Network Measurement (pp. 18-33). Springer, Cham.

Abazari, A., Monsef, H. and Wu, B., (2019) Coordination strategies of distributed energy resources including FESS, DEG, FC and WTG in load frequency control (LFC) scheme of hybrid isolated micro-grid. International Journal of Electrical Power & Energy Systems, 109, pp.535-547.

Budiman, E., Puspitasari, N., Wati, M. and Widians, J.A., (2019) July. Web performance optimization techniques for biodiversity resource portal. In Journal of Physics: Conference Series (Vol. 1230, No. 1, p. 012011). IOP publishing.

Chen, T., Drennan, J., Andrews, L. and Hollebeek, L.D., (2018) User experience sharing: Understanding customer initiation of value co-creation in online communities. European Journal of Marketing.

Analysis of User Satisfaction on Website Quality of the Ministry of Agriculture, Directorate General of Food Crops. In 2021 9th International Conference on Cyber and IT Service Management (CITSM) (pp. 1-7). IEEE.

Ula, M., Adek, R.T. and Bustami, B., (2021) Emarketplace Performance Analysis Using PIECES Method. International Journal of Engineering, Science and Information Technology1(4), pp.1-6.

Categories
Article

User Experience Design & ME

User Experience Design is an approach to designing that considers all the aspects of a product or service from the perspective of the user. A successful user experience is dependent upon UX research and UX design. This article will explain some key concepts and methods used in my Major Project.

“Gardening for the wellbeing of people in India”

Gardening can improve mental health, focus, and concentration. It can make you feel more peaceful and content. And those who enjoy gardening may also find it beneficial. On my website, I try to emphasize the importance of the connection with nature.

  • Importance of nature
  • How to care for indoor plants
  • How a beginner can start gardening

According to studies, 55% of the world’s population lives in urban areas. And 35% report high levels of anxiety. This state is expected to worsen by 2050. The effects of living in a 24/7 connected society are taking their toll.

UXD

UX stands for user experience and refers to how people feel from beginning to end when interacting with a product. To plan how something looks and works to make the activity of using it easy and enjoyable. The core UX design is all about the user. Products that don’t have good UX design aren’t considering the user’s needs. Taking into account the user’s needs and motivation giving them a great user experience leads to more exciting and valuable products and services. The reason when it gives users a good experience, they are more likely to share and come back.

Methodology

Research Methods

The first step of the research process should not be to neglect existing research that may already exist and has already been learned. There are two types of data we can collect at the beginning of a new research phase: quantitative and qualitative.

  • Quantitative research is basically anything measurable how many users visited my website, what percentage of visitors made a purchase both methods as they are sometimes called in the industry help me to put a number on the usability to my product, they also allow me to compare different designs and determine if one version performs significantly better than the other.
  • Qualitative research on the other hand focuses on the reasons or motivations behind these actions why did the user click why didn’t they purchase my product, can think of quantitative data is fixed while qualitative data is more descriptive and open ended a further distinction to make is between how qualitative and quantitative studies go about collecting data.

Studies that are qualitative in nature are based on direct observation, for example you will get our data about the user’s behaviours or attitude by observing and directing in actions quantitative studies together this data indirectly through an online survey.

  • Attitudinal research gets the user to report certain information about themselves, this helps to understand people stated beliefs expectations and perceptions, for example, I might conduct are an interview with a user to find out their opinions on certain concepts or to discover their motivations for using a certain app. It is especially used for gleaning insights that wouldn’t be apparent when observing the user perhaps the wiser if I simply watch them interacting with a product and its current state.
  • Behavioural research, the holy grail of UX design. It refers to any direct observation method and seeks to understand what people do in a given situation the rest of the evasion is extremely valuable as it gives me an authentic science of how people interact with the product in the red world methods. 

Research Canvas

We have just outlined some methods of research we can use. Let’s now look at the many methods we can use. During our user research methodology, it’s essential that we use a method or, a combination of methods to achieve the desired outcomes. When making decisions based on user research, we can consider the following methods:

  • Usability Testing is a great way to get start getting familiar with knowing how to conduct research as well as getting feel for speaking with users and knowing what to design for. Usability study its help me to watch my users complete some tasks using my site. It help me to understand how users perform on an interface and its my opportunity to understand why something isn’t working. The purpose is to find out how my site work and how the users like it.
  • Concept testing is based on early work by social-psychological, Robert Zajonc(1960) on cognitive structure in human communication. It is widely used in UX research to gather user feedback at the start of the design cycle by asking for their opinions and thoughts about the idea or concept. I have created some concepts for testing and set up a space for the candidates. It helps to understand how the feedback changes over a particular type of audience. Then categorized the feedback which of them would be low, medium or high importance. 
  • Participatory Design refers to an approach in which all parties active in the design process, including employees, customers, end-users, partners, designers, and researchers.  Participatory design can assist in determining which tools and techniques are relevant in specific circumstances. In addition, creative ideas can emerge as a result of this process. By finding gaps, holes, and voids that warrant further inquiry, a framework points in the direction of the future. Participatory design can be better connected to research practices if a framework outlines the tools and techniques to be used. The framework can also facilitate connections between academics and practitioners. A framework can be quite useful as a teaching tool as well as quite practical.
  • Guerrilla testing is an approach to gathering user feedback where you take a design or prototype out into the public domain and ask passers-by for their opinion. Due to its simplicity, new ideas can be tested quickly and at a low cost, making it a valuable UX testing method.

My guerrilla testing allows me to ask anyone what they think about your product or service. Recruiters do not have to wait for people to match their specifications nor do users have to deal with travel costs. Guerrilla testing is also a great way to do ad hoc user research. Practice moderation skills by conducting a competitive analysis for ideas similar to your own. And while they may not be your user, they are a user of something. It’s very likely that they have used some piece of technology.

  • Researchers conduct Rapid Iterative Research (RITE) when they work with users and designers to generate fixed prototypes that can be edited on the fly during experiments. Instead of waiting for the study to end, the prototype is updated once a usability issue is identified with participants. Updates to the prototype can be done before the next test, and the process can be repeated over and over until it is completed. Researchers should use low- and mid-fidelity prototypes at the beginning of RITE to let them change their designs and contents easily in response to feedback.
  • Contextual Research method where the researchers perform semi-structured interviews to obtain information about how customers are using products and services in their environment. This allows the researchers to better understand what the problem is and uncover the why. It has a greater understanding of users since observing them in their natural environment. It can get highly detailed information to supplement the high-level information from another form of research. 

Contextual enquires are time and resource-intensive by visiting a user in their home or place of work. It expected more effort time and money than other types of research. It is also harder to find participants who are willing to let them into their homes or workplace.

Double Diamond

The double Diamond approach is essentially a design thinking concept. It is a good framework that can guide me through the process. It allows me through the process it allows to get from an idea through validation design. It is good at helping to understand when to think divergently or convergently. This is happening twice in this model—once to confirm the problem definition and once to create the solution. The divergent sections concentrate on opening the project up to as many thoughts and opinions as possible; the convergent on making decisions based on those thoughts and opinions.

Crafting of Questions

A great deal depends on the quality of the questions when conducting UX research, as with any other kind of research. Quantitative surveys or qualitative interviews both come with subtle factors that can make the results unintentionally skewed in some way.

Ask The right questions – In this step of research the goal is really to understand people’s kind of current reality, what is their current state, what are the problems they are facing in their everyday life and not hypothetical problems. But we want to hear about real problems that happened last week, last month, earlier today and then we also want to understand the desired future world. So if they could have a world where this problem didn’t exist. In my survey I created to understand this though a key thing is asking the right questions to the right people. And surveys sometimes get a bad response and I think to became people tend to not part the effort and thought to using very articulate questions. Because the quality of the answer that you get back is directly related to the quality of the questions.

Analysis & Synthesis

Quick Analysis

The human-centred design method referred to as Rose, Thorn and Bud is an excellent way for a team to reflect and give feedback on an experienced idea of the site is establishing specific guidelines that offer feedback that is positive, negative as well as to identify where opportunities lie is helpful because it narrows down feedback that is specific and actionable for a team to move forever with. Rose Thorn Bud is a balanced and anonymous way o reflect on an experience idea product or service while this method is more common during a critique feedback session. Rose thorn bud can also function as a personal reflection tool.

Rose represented by pink stickies shows were positive, strength and successes. Thorn represented by blue stickies shows where there are negatives, weaknesses and challenges. And Bud or green stickies shows were opportunities, potentials and areas for growth lie.

Personas

Persona is a profile that represents the primary users according to Nielson Norman group personas are fictional representations of and generalizations of a cluster of the target users who exhibit similar attitude goals and behaviours in relation to the product.

Personas will help me to determine who am I creating products or service for this allows me to be able to navigate design and feature decisions to meet the needs motivations and desires of my core customers also by creating a persona. It will be able to settle disputes amongst the product and design, since I have a better way of understanding my primary customer’s needs and expectations.

User Journey Map

A user journey map is a visual interaction of an individual’s relationship with an organization, service, product or brand. It helps me to explore answers to the ‘‘what if’’ that arise during research and conceptual design. They should include items like personas, time line, the emotions being felt by customers, touchpoints and channels, where the interactions are taking place.

Empathy Map

An empathy map is a tool to understand what the users are thinking feeling, seeing, hearing and saying. It is used to visualize and articulate what is currently known about the users and create a shared understanding of their needs to make sure to make before decisions before creating an empathy map. It is a one-on-one conversation to understand my users taking and motivation to gather the users feeling. The interview requires a lot of open-ended questions, such as how does this make them feel what do they like or dislike about that, throughout the interview. I will ask them to elaborate on their answers in essence this is an unstructured conversation. It is used to establish a common ground between members of the product team and priorities the user’s needs. The nap will guide me on what additional research is needed to create a full persona. It is a quick method to understand my user’s behaviours and attitudes.

Ideation & Sketching

Ideation is the process of producing a large number of ideas in a free-thinking environment. We ideate in the design thinking process once we’ve finished our discovery study and created our problem statement, which is commonly expressed as a how-might-we statement.

Sketching is a wonderful way to get ideas down on paper, whether it’s for describing ideas to co-workers or brainstorming new solutions individually or in groups. From strategy to design to user flows to sketching, you may offer your opinions on everything.

Prototyping

Prototyping is an iterative process in which design teams turn abstract concepts into concrete forms, ranging from paper to digital. To capture design concepts and test them on people, teams create prototypes of varied degrees of detail. You may modify and validate your designs with prototypes so that your company can release the proper products.

Testing

User testing with users can be done with prototypes to validate the design flow and user experience. Testing takes up a significant portion of UX researchers’ daily routine in several e-commerce organisations. It enables them to keep improving the product.

Categories
Journal

Three Designed Objects

What is good design?

Most people think that design is about making things look pretty – a decoration. Art. But design is as much an art as it is a science. Cold and calculated process. Sometimes the detriment of pretty. Yet, the design is not allowed to fail. Design is for everyone and no one in particular. As well as design in general, is a complex yet subtle process, it’s more than making things pretty.

Water Bottle

Water Bottle

This is a 750-milliliter capacity water bottle. It is a pure design stainless steel insulated water bottle. it has a nice brushed finished body. The bottle right there quiets a tall structure. And the bottom design as well its flat finishing and it is horizontally brushed across the length of the water bottle. And there is a branding name called PE Birds on the bottle. It uses BPA-free materials for its installation. So it is safe from any kind of toxicity, and stainless steel itself is naturally antibacterial.

The design of the cap is very unique and in terms of the quality of the cap, the material is hard plastic. And the top lid makes it easy to carry with fingers or loop onto bags with a snap ring or something like that. And the wide-open mouth and twist opening lid help the total leakproof. The zipper is about half an inch narrower than the mouth of the bottle. So it is easy to sip from. Whether it is filling with ice water or some other beverage, this insulation will keep it cold or hot for a long period. So it gives a nice design good look a thorough look right around this stainless steel insulated water bottle.

Trolley Bag

Trolley Bag

Travel bags are available in a huge variety of styles and designs. A maximum capacity of carry-on build ith a unique charging capability with two external USB ports to recharge smartphones up to four times. And the power bank is fully removable and complies with airlines standards. it designed the cable as an all-in-one cable to recharge android and iPhone devices and also recharge the luggage itself. It has not four but eight wheels for a 360degree super smooth glide designed to wheel effortlessly on multiple terrains. it extremely light just 6.8pound / 3kg. The zipper puller clicks into the integrated combination lock. The external shell is 100 polycarbonate. And mainly it is equipped with a standard TSA anti-theft lock, mute carters, and the telescopic handle is made of 100 aircraft grade anodized aluminium reinforced impact-resistant corners scratches and stain-resistant top inside and easy grab handles. Their category components are built into an embedded checklist. So you never forget anything. The other compartment with a specialized stretch mesh. and the compression straps keep everything in place and minimize wrinkling.

spray Bottle

Spray Bottle

A spray bottle is a kind of container where you can store liquids to clean anything by spraying. the bottle has a very good and helpful design. The extra-long tube will help you to avoid wasting liquids and can spray the last drop in it. The changeable nozzle is so good which is built with an original no leak mechanism. it can contain about 900ml of liquid that will lengthen your spraying time because most of us do not like to put liquid several times for a single task. The four-finger spraying trigger ensures the ultimate comfort while using because the fingers will not be tired. it helps to hold the bottle comfortably for its size, and it may take less effort. And it will increase usability while spraying. it is a translucent container and clear enough to see the fluid. Well, there is an adjustable nozzle that enables different types of splashing features such as a strong stream, mist and light mist so on, and the materials are used to manufacture the container is BPA free.