Utilizing UI/UX Principles for Complete Usage of Component in User Interface Design

Utilizing UI/UX Principles for Complete Usage of Component in User Interface Design

Chethan K S, Gururaja S

Department of Computer Applications

St. Joseph Engineering College, Mangalore, India

ABTRACTION-In user interface (UI) design based on components, certain features like shopping cart pages are included by default but not used. Particularly when they are empty or ill-integrated with the user flow. This paper discusses ways of improving the functionality and user interaction of such underutilized components using proven UI and user experience (UX) design guidelines. Nielsen's usability heuristics, and Hick's Law

Keywords: User Interface, User experience, Component, User Behaviour.

1. INTRODUCTION

   These days, the count of websites is growing slowly day by day in this generation. Each and every business is creating its own website by thinking that their sale would be increase. Now a days people are more interested in online shopping compared to offline shopping. From recent years there has been an evident move towards online platforms for instance, booking food through Zomato, Swiggy, or Uber Eats, and buying clothes or vegetables through Amazon, Flipkart, and other such platforms.

   Website design is usually linked to graphical presentation, but it is actually based in the technology domain too [1]. This can easily be seen in Amazon's homepage layout. Though not ideal, it always has an automated slider banner containing hypertext links for user interaction. Gupta [3] also stressed that beginning a business within a competitive marketplace is very challenging. No matter how good the product is, without any advertisement and promotion, it is hard to attract potential buyers.

   These days, it is the latest craze to design and develop innovative and original websites, but it is often forgotten that usability and psychology of a person are major concerns while designing websites. It is not all about looks factors like user behavior, decision-making, and responsiveness of the interface affect a lot [6][7]. To overcome this, reference can be taken as to how already successful sites have been designed, and thus user experience (UX) is also enhanced

   along with creative adaptation of proven design patterns.

   As per Nielsen (2006) [12], individuals view and engage with various sites differently. His eye- tracking test revealed that users tend to follow typical visual scanning patterns, some section have more attention than the other. In line with Hick's Law [7][9], including unnecessary items or too many options raises cognitive load, making decisions slower and user experience inferior. Simplification is thus not only cost- effective but also vital.

   Knowledge of these principles allows one to recognize what aspects are actually beneficial to a website and how parts can be utilized to the fullest, instead of remaining void or unused. This paper emphasizes the key design requirements for e-

   commerce and portfolio sites, and delves into the manner in which user viewpoint can be directed, even when users fail to discover what they are originally looking for. It also touches upon how to successfully attract and hold onto user interest throughout browsing.

2. METHODOLOGY

   1. Method of Research

      Information found for this literature report was collected from a number of already published research articles. The articles were chosen through the identification of the most popular elements applied in web design. A thorough online search was carried out through such platforms as Google Scholar and other scholarly tools in an effort to accelerate the process of accessing related and trustworthy sources.

   2. Description of Method of Research

      For a novice, development of a website or mobile app is not an easy taskparticularly when it involves making design decisions to make the website distinguishable. Mostly, simple requirements for developing an efficient and user- friendly

      website are ignored. This paper provides a set of research findings that assist in establishing what UI/UX elements are best suited and usable in actual practice.

      Data from the research was gathered by platforms like Google Scholar, IEEE Xplore, and ScienceDirect.Research paper were searched by using keywords such as "UI/UX design," "component usability," "Hick's Law," "user behaviour," and "website layout studies."

      The findings were kept up-to-date by considering only articles published from the year 2010 to the year 2025. Priority was assigned to peer-reviewed journals, conference proceedings, and real-world business application-based case studies.

   3. Limitations.

   Limited Component Coverage: All UI/UX components were not covered in this research. Only fundamental and common components were targeted to ensure the scope of the research is not large.

   are improved upon by their application along the F-shaped reading pattern [12] to raise visibility and engagement. Moving the search bar to the top center of the screen adheres to eye-tracking findings and enhances usability.

   In smaller sites, a simple hero area with strong imagery, plenty of whitespace, and a good call-to- action button worked best. Not only this will improve the section but also grab the attention of users.

   1. Product and Search Page Structure

      On product and search result pages, applying brief, collapsible descriptions was found to enhance retention of information without overwhelming the design. This provides the balance between readability and depth of content.

      Statements such as "Only 1 left" or "1K+ bought" were found to enhance user urgency, prompting quicker decision-making. Excessive application of this type, e.g., on smaller sites, can erode user trust if not supported by actual data.

   2. Device-Responsive Layout Behaviour

   1. RESULTS

      The findings of this paper of literature present information regarding how different website components are viewed and utilized by users. They also demonstrate which components need design improvement or functional rethinking. The emphasis in this research was laid on the three major aspects: the home page, product view, and the cart page. The results show prevalent problems like flawed conceptual execution, space misuse, and component underutilization, all impacting the overall user experience and conversion potential.

      1. Cart Page

         The shopping cart feature is often underutilized or neglected, particularly on small to medium-sized sites. Sometimes, the user finds an empty cart with no advice or value and is then prompted to drop-off. Research indicates that incorporating features like recently viewed items, last purchases, or price decrease alerts can increase perceived usefulness and drive retention.

         Moreover, eliminating product ratings within the cart page minimizes cognitive friction. By reducing unnecessary information at the point of purchase, users will be less likely to change their minds, resulting in a greater completion rate.

      2. Home Page

      Good home page design incorporates the utilization of features like a hero area, ad banners, and auto- sliders. These

      The study assessed both desktop and mobile layouts independently. On mobile devices, designs that used the full screen width and displayed larger product cards led to higher user engagement.

      For desktop versions, product tiles tended to be cramped within the middle content contaner, with unused side margins. These may be used to good effect for passive content like advertisements, floating cart previews, or quick link buttons, adding value without encroaching upon the primary content area.

   2. DISCUSSION

      This research shows that the little details in the user interface and experience really make a big difference in how people interact with and feel about websites, especially the smaller ones. by using some solid usability rules like Nielsens tips and Hicks Law, they spotted where things could be better on the web and figured out how to make them work smoother. the findings back up the idea that every part can be a key player in making experiences and conversions happen if you plan it right

      1. Home Page

         The home page is a very important part of website design. It is essential not only for the admin but also for the user, as it gives a clear starting point to every website. If the home page is not well-designed, people will not be able to remember the website. As the saying goes, first impression is the best

         impression. If the first page provides good interaction, it will catch the users attention more effectively.

         Through the study of how people view content (based on the F-pattern), it is seen that users often start from the top-left part of the content, move horizontally to the right, and then vertically down the left side, forming an "F"-like structure. This was observed in the eye-tracking tests conducted by Dr. Jakob Nielsen and Kara Pernice [12][15].

         Figure 1 Business to customer website on the left and Google search engine on the right (Nielsen 2006) .

         Knowing what people see first helps focus design attention on those key areas. In websites like Amazon and Flipkart, the top area is filled with a search bar and automatic sliders, which invite users to click as soon as they visit. From Hick's Law, which states that the time to make a decision grows with the number of and sophistication of alternatives [7][9]. Amazon and Flipkart do not provide a direct Add to Cart button for sliders because they wish to encourage users to look more and linger longer, with higher exposure to their product offerings.

         Figure 2 Amazon Home Page[17]

         While big businesses can afford this approach, small or mid- scale businesses can design a simpler home page with a hero section that includes a strong image, a clear title, and a button to direct users to their main service or product. After the hero section, they can display best-sellers, customers' reviews, and a brief about section. A restaurant website can gain visits with

         a hero section including a logo or food picture, followed by popular items. Aminimalistic design with quick loading speed is better [5]. As it Shown in figure 2 of order eats website for a small business restaurant Shan Sweets Richmond[16]. In here home page itself is order section where user directly add items and cart section is shown on right side.

         Figure 3 OrderEats Home Page [16]

         To improve the use of the navigation bar, the Serial Position Effect can be utilized, where it has been asserted that the first and the last items in a series are remembered more effectively [14]. Thus, having the logo at the extreme left and a login/cart section at the extreme right is conducive to recall and usability.

      2. Product Review and Item Placement

         Placing a product and ensuring users view it is not easy. On desktop view, due to the wide resolution, product visibility can become challenging. Most e- commerce websites tackle this by placing items in smaller containers, while filling the left and right sides with filters and ads, ensuring that the page layout is fully utilized [13].

         When similar products are shown, the Von Restorff Effect becomes useful. This effect predicts that When there is multiple item of same kind the one with that has different spec will be highlighted [14]. Using this principle helps grab attention and reduces user confusion. An e-commerce website should display clear product images, even at small sizes. People remember visuals more than text, and it helps them browse faster. Users should also be able to zoom in to examine product details, so using high- quality images is essential [1].

         A product image of an e-commerce website could be mistaken by the online shopper as advertisement if it looks like it does not belong to the rest of the page by either a different colour or a highly formatted text. Figure 3 shows a good example of how the right side of the Pioneer website was almost completely ignored, because the test subjects mistook the product images displayed as advertisement.

         (Nielsen & Pernice 2006, 283 284.)

         extra one

   3. CONCLUSION

      Figure 4. Right side of Pioneer b2c website was almost ignored. (Nielsen & Pernice)

      Research also finds that users usually don't pay much attention to the right side of the screen so, putting key stuff like filters or important product details on the left side works better. the right side's good for stuff that's not super important, like wishlist things, cart stuff, or deals, which can still grab attention without being too much.In right advertisement section can be used which will generate income to owners

      5.3 Cart Section

      The cart section is one of the most underutilized components on many websites. Users are able to access the cart even when its empty, and often, the design lacks proper UI elements or guidance. According to Jakob Nielsens heuristic, Help users recognize, diagnose, and recover from errors, error

      messages should be expressed in plain language, clearly state the issue, and suggest a solution [8].

      For an empty cart, the page should either display a friendly alert message or intelligently repurpose the spacethis avoids confusion and reduces unnecessary backend coding. A more functional empty cart page could show previously viewed items, best sellers, or discounted products to encourage further browsing and purchases [3].

      Figure 5 Empty Amazon Cart Section[17]

      For food ordering apps, it's smart to recommend drinks or extra stuff when you're adding things to your cart. people usually forget to grab their drinks at the start, but when they see them at the checkout, they're more likely to throw in an

      This study shows how important it is to get the design of the user interface and experience right for websitesit really makes a difference for small and medium-sized businesses in keeping users happy and engaged. when they checked out the home page, product view, and shopping cart, they found some usual problems like not enough room, too much info, and not enough focus on what users need

      Using Law like Hicks Law, the F-shaped way people read, and the Von Restorff Effect, designers can make things easier for users to decide, keep their eyes on the right spots, and get more hooked.Real- world websites such as Amazon and Flipkart serve as successful examples from which emerging businesses can draw design inspiration.

      Ultimately, even basic componentswhen designed with intention and backed by psychological insightscan significantly improve user flow and business outcomes. This paper emphasizes that every component on a website should be purposefully built, fully utilized, and psychologically aligned to achieve both usability and conversion.

      IDENTIFY	SIMPLIFY	GUIDE
      Home Page Design is poor.	Use a simple Hero section acting as a banner or advertisement.	Make the search bar sticky, place the logo or image on the right.
      Unrealted Section like about us ,contact	Remove About Us or Contact sectionsthat dont required in home page.	Use F-pattern layout for placing with key elements present in visible areas.
      Unused Cart section	remove extra info like product ratings keep it clean and easy to view.	Show previously viewed or suggested items that related to current item.
      Poor design in product page	Use title with descriptions, short texts, and clean picture.	Highlight product with catchy words like 1K bought,few remaining.

   4. REFERENCES

1. Bacso, P., & Pereira, D. Q. M. (2014). Web design and usability issues:

   How people read webpages. Retrieved from https://www.academia.edu

2. Sairanen, V. J. (2024). Strategy for acquiring the first users on the Shopify App Store [Bachelor's thesis, Metropolia University of Applied Sciences]. Theseus. https://urn.fi/URN:NBN:fi:amk- 202305229404

3. Gupta, S. (2013). Online shopping cart application (Master's thesis). North Dakota State University of Agriculture and Applied Science. https://library.ndsu.edu/ir/bitstream/handle/10365/ 27612/Gupta_ndsu_0157N_11000.pdf

4. J. Yang and M. P. Papazoglou, Web Component: A Substrate for Web Service Reuse and Composition, Tilburg University, Infolab, PO Box 90153, 5000 LE, Tilburg, Netherlands.

5. Neustroeva, U. (2025). Designing a mobile-first website in Figma: A case study of Element Beauty Salon [Bachelor's thesis, LAB University of Applied Sciences]. Theseus.

6. https://www.theseus.fi/bitstream/handle/10024/890 038/Neustroeva_Uliana.pdf?sequence=2

7. MarvelApp. (n.d.). Psychology principles every UI/UX designer needs to know. https://marvelapp.com/blog/psychology-principles- every- uiux-designer-needs-know/

8. Laws of UX. (n.d.). Hick's Law.

   https://lawsofux.com/hicks-law/

9. Nielsen Norman Group. (n.d.). 10 usability heuristics for user interface design. https://www.nngroup.com/articles/ten-usability- heuristics/

10. UX Planet. (n.d.). Design principles: Hick's law & quick decision- making. https://uxplanet.org/design- principles-hicks-law-quick- decision-making- Interaction Design Foundation. (n.d.). UX design

11. what it is, and how to doit right. https://www.interaction- design.org/literature/topics/ux-

    design

12. Johnson, J. (n.d.). Quote on designing for user experience. As cited in UX literature. University of San Francisco, Department of Computer Science.

13. Nielsen, J. (2006). How people read on the web: The eyetracking evidence.

    https://www.nngroup.com/articles/f-shaped- pattern-reading-web- content

14. Lagun, D., Hsieh, C., Webster, D., & Navalpakkam, V. (2014). Towards better measurement of attention and satisfaction in mobile search. In Proceedings of the 37th International ACM SIGIR Conference on Research & Development in Information Retrieval (pp. 113 122).

15. http://www.mathcs.emory.edu/~dlagun/pubs/attenti on_mobile_sigir2014.pdf

16. Djamasbi, S., Hall-Phillips, A., & Yang, R. (2014). SERPs and ads on mobile devices: An eye tracking study for Generation Y. http://digitalcommons.wpi.edu/cgi/viewcontent.cgi? article=1001&context=uxdmrlpubs

17. Nielsen, J. & Pernice, K. 2006. Eyetracking web usability. New Riders Press, California.

18. Shan Sweet Richmond. (n.d.). OrderEats. Retrieved July 10, 2025, from https://ordereats.com.au/menu-shan-sweets-marion

19. Amazon. (n.d.). Amazon India Website. Retrieved July 10, 2025, from

https://www.amazon.in/