The objective of the small business revisited assessment was to make improvements to the small business website made in term 1. There are lots of things we have learned between the duration of these two assessments so the article will contain an analysis of the initial website and the changes implemented.
Analysis of the small business website
My choice of website for the small business assessment out of the four options was a butcher’s website. It was made using only HTML and CSS with the mobile-first approach design. As it is supposed to be a brick-and-mortar shop, the main focus was informing users about the store and its location rather than selling the products as if they were online.
The website contains three pages; the home page, a product page, and an about page. The home page contains information on their product specialties and their store location with opening times. The product page is just a list of products and the About page includes information on the staff members.
Main Changes to Implement
In the revised version, the site would be including the use of PHP and JavaScript along with the change in the overall theme of the site. Some critical issues like the navigation bar, the logo, and the format of the code to cut the amount of CSS written are to be fixed.
Logo
A small change in the logo (left) is removing the light text which would be barely visible in small sizes and making it transparent so the logo fits in with the navigation bar.
Color Palette
The initial color palette was to utilize greens and reds which are very common colors used for meat products with a lighter background color. But I was not satisfied with trying to make these two colors work with each other. Looking at the original website, the green color did not have much impact on the design, and felt like it was there as a second thought.
So, the purpose of the second color palette is to design the site to look premium which goes with the business brand phrase ‘purveyor of the premium meat’. Using beige color with contrast to a dark background and using the red color but more saturated. The darker background helps in making the colors pop out more compared to the white background.
The darker red has also higher contrast with the white color that meets the WCAG AA requirements. So, this solves the issue of some legibility that was on the original website.
Fonts
To give the website the ‘premium’ feel, the fonts need to be also changed as the heavy sans-serif does not achieve that. Changing to a serif font like the Cormorant Garamond for the headings which give the fancier look while still being very legible for smaller headings and using a simple font like Noto Sans for body text.
PHP
The main use of PHP in the revisited website is to reuse the code repeated on all other pages like the head, header, and footer elements. In places where the text may be different for each page like the page title, the PHP variables are used for it. This makes the code leaner and any changes can be made in that one file instead of going through all files.
JavaScript
JavaScript is used to add the functionality of toggling the navigation bar in mobile devices and also display the current day with opening and closing times.
Consistent Code
The addition of PHP includes files means the code needs to remain consistent on all the pages. The header tag in the original version contained texts and images besides the navigation bar for the landing page, but it was not the same for the other pages. Therefore, moving them to the main element and using a header for navigation only makes it reusable. Keeping the semantics fairly similar within each page also helps in the consistency of the overall design with fewer CSS lines. For comparison, the CSS for the revisited website has 100 lines fewer than the original.
Design Changes
First, the navbar had to be changed due to the readability on larger screens, and with JavaScript, a toggle menu can be implemented for mobile screens.
Fig: Small Business Navbar
Since the image and heading content have been moved to the main element, the navbar can be designed to be clearer without any image distracting it. Also adding an indication of the page that the user is currently on.
Fig: Small Business Revisited Navbar
Fig: Small Business Revisited Mobile Navbar
The last main change is on the landing page which is to change from displaying their best product to the store image with the business name and address. And pushing the image below the text so it does not obstruct the readability and the user can properly view both the store and text.
Fig: Original Landing Page
Fig: Revised Landing Page
The main content of the home page has fewer images as they are also already being used on the product page.
Fig: Original Main Content Fig: Revised Main Content
The rest of the content remains the same with some changes in font sizes and spacing throughout the different viewport sizes.
404 Error Page
A custom error page for the small business revisited website is also included when the users end up on a URL that does not exist. The main content is used to display the text while reusing the header and footer to keep the look identical to other pages.
Mobile device use has sharply increased, and for most people, it now serves as their primary method of internet access. As a result, responsive web design is required for the website. This entails building webpages that can adapt to multiple devices’ diverse screen widths.
Images that are responsive can change their size and resolution to fit multiple screen sizes and resolutions, giving users the best viewing experience possible across all platforms, including desktops, laptops, tablets, and smartphones. Responsive images are essential in web development for generating adaptable websites and designs that can change to fit different screen sizes. Displaying images in the appropriate size and resolution for each user’s device is the main goal of employing responsive images, which improves website performance and user experience.
It is a method to display an image from multiple images provided to the browser depending on the screen size. We can make several different files and using HTML we can deliver different files to different screen sizes.
Why should we use responsive images?
Responsive images are essential in today’s world where users are accessing websites on a variety of devices. Failure to use responsive images can lead to several negative impacts on user experience and website performance.
Poor Image Quality
Without responsive images, images on the website may appear too small or too large on certain devices, making them difficult to see or understand. In some cases, high-resolution images used on smaller devices may look blurry or pixelated, negatively affecting the user experience.
Slow Loading Times
Large images not optimized for smaller screens can take a long time to load on mobile devices, leading to slow page load times and frustrated users. This can result in users leaving the website before it even loads, leading to lost traffic and potential revenue.
Cropped Image
When the same image is used for all devices, it may result in images being cropped awkwardly or important details being lost, which can harm the overall visual impact of the website. This can make the website look unprofessional and unappealing, leading to a negative impression on the user.
Negative Impact on SEO
When a website has slow loading times due to non-responsive images, it can negatively impact the website’s search engine optimization (SEO). Google and other search engines take page loading times into account when ranking websites, and a slow-loading website may rank lower than a faster-loading website.
Blurry or pixelated images
If high-resolution images are used on smaller devices, they may appear blurry or pixelated. This negatively impacts the user experience as it reduces the quality of the image and makes it harder to read or see important details. This can lead to users leaving the website and not coming back.
What are the advantages of responsive images?
Accessibility
Websites that are accessible to all users, regardless of their device, are more likely to reach a wider audience. Responsive images help to ensure that images on a website are accessible to all users, regardless of their device.
User Experience
By ensuring that the images on the websites are optimized for all types of devices, responsive images can help improve the viewing experience of the user and give them a better user experience while scrolling through a website.
Mobile usage
With more and more people accessing the internet via mobile devices, it’s important that websites are designed to be mobile-friendly. Responsive images help to ensure that images on a website are optimized for smaller screens and slower connections, improving the user experience for mobile users.
Page speed
The user experience of a website depends heavily on how quickly it loads, and slower loading times might increase the bounce rate. By supplying the appropriate size image to the device being used rather than big images that may take longer to load, responsive images aid in increasing page speed.
SEO
Google and other search engines place a strong emphasis on mobile-friendliness, and websites that are not mobile-friendly can suffer in search rankings. Responsive images help to ensure that a website is optimized for all devices, which can help to improve its search ranking.
Use cases
Resolution Switching
According to the screen size and resolution of the device, a technology called “resolution flipping” is utilized to serve images in various resolutions. This method enables websites to serve lower-resolution images for smaller screens and better-resolution images for larger screens, hence optimizing graphics for various devices. Websites can increase site performance and user satisfaction by utilizing resolution switching because it allows for picture device optimization. The <srcset> and <sizes> elements in HTML, which enable developers to specify several image sources and sizes according to the user’s device, are frequently used to execute this strategy.
Srcset width descriptor
Srcset is used for providing one or multiple image sources and when using srcset width descriptor the image URL is followed by the width of the original image. The browser will use the width as a reference to select the appropriate image. In the example below, we have three identical images but with widths of 480 pixels, 680 pixels, and 1024 pixels, and we use ‘w’ for the unit instead of pixels.
Sizes
According to the screen size and resolution, the sizes attribute in HTML aids the browser in selecting the best image to display. It functions by giving the browser a set of requirements or guidelines, expressed as media queries and slot width, to choose the picture. The slot width works as a container where the image is going to be placed. E.g., if the sloth width is 480px then the image with 480 pixels of width or less from the srcset is going to be selected by the browser.
In the absence of a media query, the default setting will be used. The sizes feature can be used to optimize images on a website, enhancing both user experience and website speed by giving the browser details about the size and resolution of the device.
If it is not supported by the browser, it will use the image source from src attribute.
In the example, we have provided three different sizes with two media conditions. In the first condition, if the width of the screen is more than 1024 pixels, the slot width will be 40vw which means 40 percent of the viewport. This means devices with 1024 pixels width will use the small image (480px width) as 40 percent of 1024 is 409 pixels.
When the width crosses 1200 pixels, 40 percent would be greater than 480 pixels and hence the browser will pick the next larger picture which is the image with 680 pixels.
So, using viewport width as a unit adds a bit more dynamic as by only using one condition it’s possible to make the browser select different images.
For the second condition, any device with a width between 680 pixels and 1024 pixels will have a slot width of 680 pixels. The browser will then select the second image as its width (680 pixels) matches with slot width.
For the last value as it does not have a media condition, it will work as the default value if the media condition does not match. Since the slot width is 100vw, the browser will select the image with the same width as the viewport width. Therefore, devices with 480 pixels width or less will be shown the small resolution image.
Art Direction
Art direction is a technique used by designers to display specific images based on screen sizes. This technique allows designers to create different versions of an image and display them depending on the user’s screen size. For example, a landscape image may be displayed on wider screens, while a cropped image focusing on the details may be displayed on mobile screens.
The art direction technique can be implemented using the <picture> element with the <source> and <img> elements. The <picture> element allows designers to define different versions of an image using the <source> element. Each <source> element can include a different image source along with media queries that define the screen size and resolution that the image should be displayed for.
The <img> element is required for the art direction technique to work, and it acts as a fallback if the browser does not support the <picture> element. The <img> element can include a default image source that will be displayed if none of the <source> elements match the user’s screen size and resolution.
Art direction is a powerful technique that allows designers to create responsive images that adapt to different screen sizes and resolutions. By using the <picture> element with the <source> and <img> elements, designers can create visually compelling websites that provide a great user experience on any device.
In the code above, there are two media conditions one for the larger screens to use a landscape picture and the other for smaller screen sizes to use the cropped image.
For the second condition with a min-width of 768px or when none of the media conditions is met, the image sourced will be the cropped version of the original image.
Conclusion
In contemporary web design, responsive images are no longer a luxury but rather a necessity for creating a seamless user experience. Their implementation is crucial in ensuring optimal accessibility, usability, and visual aesthetics across different devices with varying screen sizes and resolutions. By utilizing responsive images, web developers can improve the loading speed of their websites, reduce bandwidth usage, and enhance search engine optimization (SEO) strategies, resulting in cost savings and a more competitive online presence. Consequently, incorporating responsive images into a comprehensive web design strategy should be considered a fundamental component of modern website development.
User Experience (UX) focuses on the user’s understanding and delivering a seamless experience of all the services provided by the company to the end-user. The UX design is not only about making the product easier to use but also integrating other experiences like marketing campaigns or any other aspects of branding to deliver solutions addressing the needs.
During term 1 of MA Web Design and Content Planning, the two sessions of the User Experience Design module covered UX Research and UX Design which help me understand the importance of researching in designing a good product. As I mostly focused on the coding part of the development, these sessions helped me understand the approaches taken in UX design.
User Experience Research
The first workshop conducted by Steph Troeth was about User Experience Research (UXR) and it covered the steps involved in conducting and analyzing user research. User research is the study of our targeted user’s needs and pain points in order to design products suitable for them. So, we need to gather data from the users in a structured approach.
Research Objectives
Firstly, we need to set a research objective to state a clear goal of your end product and help be on the same page with the whole team. Setting a research objective will also benefit in selecting an appropriate methodology. Steph provided three examples of research objectives which were close-ended, semi open-ended, and open-ended and exploratory. Open-ended research is suitable when you are in the early phase of discovering the problems while close-ended is appropriate when the product is in development and requires user testing.
Methodology
For the research methodology, Steph listed different methods in the class like qualitative vs quantitative research and attitudinal vs behavioral research. Different research methods can be applied at different stages of the design process to keep in check the user’s needs and filter the important problems.
Qualitative vs Quantitative Research Qualitative research is used to comprehend concepts or thoughts for an in-depth knowledge of the topic. These are usually done through interviews with open-ended questions, conversations with the users and focus groups, or ethnographic studies. As it does not involve any numerical data, it requires a lot of interpretation. Quantitative research is research where data can be measured numerically and in graphs to find out patterns of the users or test the assumptions. These can be conducted through a survey with close-ended questions. A large group of respondents results in a more reliable insight.
Attitudinal vs Behavioral Research In attitudinal research, you ask the users about their thoughts exploring more on the “why” questions in the form of an interview or customer feedback. Whereas in behavioral research, you observe the user’s interaction and behavior with the product for e.g., A/B testing, or using tools like google analytics. These researches can then be conducted in various ways which Steph went on to explain further. They can be moderated or unmoderated, in-person or remote, testing in a lab, 1-1 or group sessions, and assumptions and hypotheses.
Research Methods
After learning about the objectives and methodologies, we need to choose a method to collect the required data. Some of the useful ones that I got to learn during the workshops are listed below:
Usability Testing The goal of usability testing is to simulate a scenario with the users where they complete a set of tasks. With this method, you can observe if the users face any difficulties while performing the tasks.
Concept Testing It is used to test an idea during the early phases of design to evolve further and test its viability. It can be taken in various forms depending on the design phase and is one of the most used research methods.
Participatory Design Research Participatory design is also called co-design sessions, where you work closely with the users to come up with a solution. It can either be done in a group or 1-1 sessions. It helps us in recognizing mental models and use cases, pain points, triggers and motivations, and so on.
Guerilla Research This method is taken in the streets and provides strangers to test a small prototype and give their thoughts. It helps in targeting a broader audience but is only suitable when the problem and objective of the research are specific.
Rapid Iterative Research RITE (Rapid Iterative Testing & Evaluation) means the prototype goes through many updates with each problem identified during testing to find solutions as fast as possible.
Sampling
During the research, we need to figure out the number of people to speak to and the profiles they have. So, near the end of the first workshop, Steph explained the process of selecting user profiles and how we can find out users to research for our project. We were later tasked to create a survey in a group and take turns in interviewing the members from the other group. It was a valuable practice to learn about properly generating questions for the survey and doing interviews.
User Experience Design
The second workshop was about UX Design with Chris How where he explained UX design and the double diamond process, analysis and synthesis, ideation and sketching, and prototyping with lots of on-hand practical sessions.
The double diamond method focuses both on the problem and solution to help designers find creative and innovative ideas. It consists of four stages: Discover, Define, Develop, and Deliver. But it is important to note that it is a hypothetical visual model to understand the design process and the process itself can be full of uncertain patterns.
Discover The first stage is to do research and explore the problem and the target audience. Just like following the diamond shape, the main focus is to be open and wide to different types of ideas. This can be accomplished through activities like mind mapping and brainstorming.
Define The second stage is the convergent part of the diamond where the ideas researched are narrowed down to reach a broad understanding of the problem and leads to the second diamond where the product design takes place. User profiles/stories are a common tool used during this stage.
Develop The third stage is the first step in the second diamond or the solution diamond. Like the discovery stage, it takes a divergent approach where designers build prototypes based on the targeted user profiles. Some tools that can be used during this stage are storytelling and journey mapping.
Delivery The fourth and final stage is to finalize the prototype and begin testing. After the delivery, the team collects user feedback to improve the product. Surveys are one of the examples for testing.
Analysis and Synthesis
After gathering the research, it needs to be analyzed and synthesized to turn the data into valuable insights by visualizing the data, sorting, or categorizing. Chris listed out four ways that we can visualize the data during the workshop and we were tasked to create some of them during the sessions using the data gathered in the last workshop with Steph. So, the ways we learned to visualize the data were:
Personas The first method was to create personas of the people from the research interviews to represent their attitudes and behaviors. This does not have to match exactly with each person but it is a way to help designers and other team members to visualize the type of users they will be designing the product to.
Job Statements Job statement works by setting the outcome that the users would be able to achieve by using the product. The method is not about the solution to the problem but rather figuring out the result.
User Journey Map A user journey map is a visual diagram that represents the user experience of your site from the initial discovery to the several visits to the website. It helps in understanding how the user interacts with the site and provides the user’s perspective in browsing through your site. This process allows designers to gain insights into pain points and the feelings of the user to further optimize the user experience.
Empathy Map The final method that Chris explained and also what we practiced was on an empathy map. The empathy map is divided into four quadrants (says, thinks, does, feels) with a sketch of the user in the center to give an idea to the designers and the team on who the targeted user is. In the task, Chris had us divide the paper into tasks, pain points, feelings, and overall goals. The tasks include what action the user takes, pain points are what the user is thinking throughout their experience, feelings are the user’s emotional state and finally, the goals are well the user would like to achieve.
Ideation and Sketching
In ideation and sketching, we turn our insights from the research into interfaces. There were a few exercises to help us get better at sketching. Mapping the system is one of the activities that we can do to understand the whole flow of the site we are designing. During the session we designed UI flows where you identify each page of the system and the function of that page. You write down what the user may see on the system and draw a line underneath and write what the user can do below the line. This is a fast and easy technique to sketch the flow of the system without having to get into too many details of the page.
Prototyping
The final stage is the prototyping of the insights we gathered from the research. We did the low-fidelity concept sketching in three steps using the Krazy eight technique. First, we do a rapid sketching of eight ideas with just enough clarity to understand the intent of the diagram. Then after reviews and critiques from group members, we do a second round of sketching to improve on the ideas.
We also learned the SCAMPER (substitute, combine, adapt, modify, put to other use, eliminate, and rearrange) technique to help us focus on the improvements that can be done in the third sketching.
Major Project Overview
My project will be to help people interested in the programming field but who are not much aware of the different languages and frameworks that are used in the specific field. As someone who studied BSc IT, I have gone through a similar situation of not knowing what technologies I needed to learn, and even after knowing it, there are currently so many options that a beginner might feel overwhelmed by it. Hence, for that reason, I wanted to create this website where the user has an end goal of the field they want to choose like web, mobile, or even game development. And it will list the languages and frameworks used in that field while also comparing them and helping users decide on the appropriate one. Though for now, it will be only focused on web developments to keep the project feasible within the course year.
Planning
For the research, I will be trying to incorporate both quantitative and qualitative research with methods like usability testing, concept testing, and surveys. The research will mostly be done through remote testing and will be conducted with my friends that usually ask me for help regarding the coding parts and reach out to other people through their help as well. My target audience would be users around their 20s or late teens as I feel that these are the age groups currently interested in this field.
As stated earlier, the project would be focused on web development and I may have some experience with web development, but I still need to do research on my own on other web development frameworks for the content to be trustworthy. The basic content would be about HTML, CSS, and JavaScript then even further advanced information would include JavaScript frameworks like ReactJS, Vue, and Angular while also covering Laravel and Django. I will collect the information for them from the online community and my friends who have experience working on it.
To keep the flow of the project coherent, I will approach the project with the double diamond strategy while designing the user profiles, empathy maps, or maybe even journey maps. For the designing or prototyping aspect, I will be using Figma to design low-fidelity interfaces to get opinions from the surveys and then proceed with high-fidelity prototypes.
Colors can have a big impact when creating a website. It can be used not only to make the sites attractive but also to portray the overall nature of the company or the person. So, these are the three websites that I believe have good color schemes.
1)Bird
Bird website uses turquoise as its primary color to highlight the main points with less saturated variation for backgrounds. The company deals with environment friendly straws that are not made with plastics to protect the ocean so, the color fits perfectly with their objective. The rest are neutral colors to complement the primary color which makes the final product look balanced.
2) Polars
Polars goes with more vibrant and bold gradient of blue to pink for their website with variation of dark gray for the backdrop. By using the gradient theme on highlighting major elements/icons with dark background, it gives a modern feel to it.
There are various objects that can come to mind when talking about well-designed things. It could be something that you use regularly and feel that its intended function works perfectly or something that you could have seen outside for displays. For me, these are the things that are straightforward yet perfectly designed.
1) Egg Separator
When you go through recipes especially baking-related usually it requires you to separate the egg whites and yolk as they both can have different purposes. There are a few ways you could do it, for example, you break the shell in two and toss the yolks from one half of the shell to another to only let the whites drop off. Or do the same process but using the hands but it could get very messy and troublesome in both ways.
In order to make this process easy and free of the mess we can use this cute ceramic egg separator. With a chick face design of the egg yolk separator, you can break open the egg on top and easily take out the whites from its beak. You can also just put it on the shelf or the table and be aesthetically pleasing to look at.
2) Cup Carrier
The cup carrier has a simple design yet it holds quite a value. It makes holding hot cups easy especially when they are hot. Coffee cup sleeves can solve the problem but only when it’s one or two cups at most. But an extra helping hand is required when it’s more than two cups but with a carrier like this, you can carry four or even more depend on the design with just a single hand. The cardboard material is recyclable.
3) Peeler
A peeler is a common kitchen tool to have in every household for peeling potatoes, carrots, apples, and so on. You can use a paring knife to peel them but using a peeler saves lots of time and even prevent cutting more than skins. There are different types of peelers but I prefer the Y-shaped that has the blade perpendicular to its handle as seen in the figure. It provides more control and speed and most of them have eye-gougers on the side of the blade to remove any black spots from the fruits or vegetables.
