Re-Imagining Website Navigation System for User Portfolio Management

Re-Imagining Website Navigation System for User Portfolio Management

Mr. Shrey Solanki, Ms. Tanvi Kokate, Prof. Prita Patil

Computer Engineering Department,

Mumbai University, Vidyalankar Institute of Technology, Mumbai

Abstract- An organised and transparent navigation system acts as a map to direct visitors to various pages and information on the site. It is fundamental in encouraging visitors to stay, peruse the content and have a positive user experience, which subsequently leads to more sales and brand loyalty for the business.

An aesthetic navigation makes the website look more attractive and effective. Navigation has an immense impact on how a website is viewed by users or visitors. Design of web navigation has a greater impact on success of website. It almost certainly has an impact on traffic, SEO ranking, user experience, conversions, sales, and so forth. Hence, a good navigation is very useful to boost website design. A well-organized navigation bar will provide the user with the instant knowledge of the website. The user is more likely to explore the site if the navigation is easy and intuitive.

Keywords User experience, User Interface, Portfolio Management, Website Navigation

1. INTRODUCTION

   The web browser is extensively used for information seeking on the Internet today. The huge information space on the web can sometimes cause a user to feel entangled when loaded with massive amount of information all at once. This can further lead to confusion among users, especially when not assisted properly. Users report frustration when they cant locate some information or if they are not familiar with the web design. This is where an efficient navigation plays an important role. A good navigation system improves the quality of information seeking. [6]

   Structure of website navigation is very important as it has a greater impact on sales, user experience and SEO (Search Engine Optimization) rankings. It not only includes sketching pages but also includes greater level of abstraction. It is not at all easy to design and organize a website.

   Portfolio management is a critical issue which should be skilled by position sizing and resource allocation. Traditional and generic portfolio strategies require a navbar as a model input, which is not a trivial task in the real-world applications. The most used navigation system is a navigation bar which either has a fixed position on a screen or disappears when a user scrolls away. A navigation bar takes up a large space, having a pre-set importance in every layout including frameworks. The concern reflecting as a restriction for a major percentage of the users. [12]

   To solve the above limitations and provide a better solution for the portfolio management to the developers, we then develop a NavDot. This enhanced navigation feature ensures a maximized screen usability without taking up a huge space.

2. LITERATURE REVIEW

   1. Automation

      An automation [17], is a replacement of manual operations with computer procedures and other machinery. An automation is required to increase productivity, reduce production time, increase manufacturing flexibility, reduce costs, eliminate human error, reduce labor shortage, high degree of accuracy, performing tasks that are beyond human capabilities of size, weight, speed, endurance, etc.

      A Library Automation System implemented in University of Toronto Library in 1963-1972[17] and University of Illinois at Urbana-Chamnpaign1965-2000[18], Automated System for Educational Assessment developed in Nigeria,e-Learning System [19], Automated Project Grading and Instant Feedback System [20]are the well known examples of Automated Systems those have achieved automation in their manual processes and enhance their overall performance. An automation is achieved by converting paper based system into paperless system [21]. The popular models used in paperless systems are Single Copy model and Form oriented Model [21].

   2. UI of a Website

      A user interface (UI) is the interaction between a system and a user via commands or procedures to run the system, input data, and use the contents [23]. User interfaces can be found in systems such as computers, mobile devices, games, and so on, as well as application programs and content utilization. UI is an interface where the user interacts with the computer application effectively [15].

   3. UX of a Website

      From a non-expert perspective, the goal of this paper is to investigate how user experience (UX) effects user pleasure when engaging with digital culture heritage online collections. UX is a study on the all aspects that comprehend users interaction with an interface or a system, which include the influence of usability, usefulness and emotional impact during interaction and savoring the memory after interaction. Users' contentment and discontent are triggered by UX aspects, according to the findings. User satisfaction is

      subjective and dependent on users needs, expectations and existing experiences [14]. UX is an HCIrelated concept that is widely applied not only in software and hardware development, but also in services, products, processes, society and culture [15].

   4. Website Navigation

      It was recognized that the style of a navigation menu played an important role in an information system, especially in the case with huge amount of information distributed in the same level of a hierarchy. A good navigation style can definitely help user find information easily. To propose a solution for the circumstance where a large number of menu items should appear on the same level. [2]

   5. E-Portfolio

      An eminent benefit of portfolio management is the consistent collection of project requests in a central information repository. Comparability can be achieved by adopting a common request form for all project kinds and following a standardized acceptance and review process. [22] Through periodic reflections, e-portfolios give extensive possibilities for metacognition, which may help students achieve a variety of goals and skills. Reflection on work saved in e-portfolios can help learners develop personal and academic identities as they finish complicated projects and reflect on their talents and development. It also helps students integrate learning across courses and time, which facilitates integration. E-portfolios are a valuable resource for both students and instructors to track the progress of essential goals throughout time. E-portfolios are a valuable resource for both students and instructors to track the progress of

      essential goals throughout time. [16]

3. PROPOSED WORK

   The work flow of the system goes as follows:

   The proposed system is described as:

   1. Front-end Design

   2. Enhancing UI UX of Website Navigation Features

   3. Back-end Module for User Portfolio Management

   Here is the brief description about each of them.

   1. Front-end Design

      The design of any front-end is based on how would a user interact with the website giving them an easy and attractive user experience. It is important to keep a user on the hook by its uniqueness and still not to overlook the concepts a user would be used to. An e-portfolio could be successfully developed with the help of HTML (Hypertext Markup Language), CSS (Cascading Stylesheet) and JS (JavaScript) considering various aspects like design, work experience, about and the navigation throughout the website.

      Lets have a deeper look:

      Design: An excellent User Interface willcreate an instant attraction to your website while a well thought out User Experience will put a lasting impact on your users mind. It is therefore vital to get both of them right to build a relationship with a user. Consistent choice of colors, graphics and branding would help users associate with the developer.

      Website Navigation: A well planned and transparent navigation system acts as a road map to direct visitors to various pages and information on your site. It is critical for enticing people to remain, read your information, and have a pleasant user experience. A simple and minimal navigation through the website would appeal to the user. The most abundant navigation technique is a navigation bar.

      This work proposes a more efficient technique to implement enhancements to portfolio websites while focusing on website navigation. The enhancement is generated by selecting an element of most importance- the navbar and proposing a different and more optimum navigation system to save space, improving usability and enhancing the user experience.

   2. Enhancing UI UX of Website Navigation Features

      This procedure begins with a fixed dot approach replacing the fixed navbar approach. The developer or the designer are greeted with some options to place a navigation dot. A navigation dot is a small circle enclosing an arrow icon representing an expansion in that particular direction.

      The eight options:

      1. Top Left

      2. Top Right

      3. Bottom Left

         developers. Navigation dot allows them to choose from various layout option that best suit their purpose.

         V. RESULTS AND DISCUSSION

      4. Bottom Right

         Post a suitable selection, the navigation dot is programmed at the location with an additional hover feature. The same is implemented with a simple drop-down menu code provided in HTML5. The navigation dot would expand revealing the navigation options in form of icons or short terms.

   3. Back-end Module for User Portfolio Management

   The back-end module would be developed with a database management system using mySQL storing work data and contact information about one. The same would be dynamically applied to the website and creating e-portfolios along with all the enhancement features to apply design thinking in the most efficient manner.

   The main purpose of an e-portfolio is to create an impact on a recruiter, which requires the process of design thinking and a smooth user experience. This technique re-imagines the importance of the same.

4. IMPLEMENTATION AND ANALYSIS

With this implementation we are able to implement following features in our proposed system. The features are:

• More space: By abandoning the standard navigation bar a designer would be greeted with a good amount of space to welcome more content. This would allow a greater canvas of creativity without restrictions for the website header. The need of reserving space in every layout for every website would be considered history.

• Minimal: The navigation dot is a circle housing an arrow which could be placed at any of the four corners of a website as per the requirement of the user.

• Aesthetic: The overall target for a UX Designer is to achieve an aesthetic look and feel to a website. This approach takes a huge leap towards the same with respect to website navigation. A simple hover of a curser expands to dot revealing the menu options for the visitor.

• Ability to implement shortcuts: The navigation dot has an additional feature, along with a hover option it could also act as a button for the visitor to either take them back to the top of the website or as any other link in the imagination of the developer.

• Ability to choose from multiple layouts: The traditional navigation bar sticks with the same layout in every framework, restricting front-end

Fig. 1. Regular Navigation Bar on e-portfolio

Fig. 2. Fixed Navigation bar on e-portfolio

Fig. 3. Proposed Navigation Dot

Fig.4. Expansion of Navigation Dot at hover

Fig. 5 Representation of saved space

Fig. 6. Expansion of Navigation Dot

With the above implementation, the comparison between existing system and proposed system can be given as:

Thus, with this implementation we are not just proposing an e-portfolio management but we are also reimagining the website navigation system.

VI. CONCLUSION

Not only the proposed system is web based technical solution to create e-portfolio with the advancement in navigation features that attracts a visitor.

FUTURE SCOPE

The proposed work can be enhanced by adding more navigation and security features.

ACKNOWLEDGEMENT

We would like to show our gratitude to the Prof. Prita Patil, Department of Computer Engineering, Vidyalankar Institute

of Technology for sharing their knowledge with us during the course of this research.

REFERENCES

1. International Journal of Engineering Science Invention Research & Development; Vol. I Issue IX March 2015 www.ijesird.com e-ISSN: 2349-6185

2. A Study on Web Page Layout and Navigation-Bar Locations for Product Exhibition on Different Platforms Li-ChiehChen, Chun-Jan Huang.

3. International Journal of Engineering Science Invention Research & Development; Vol. I Issue IX March 2015 www.ijesird.com e-ISSN: 2349-6185

4. Pearrow M. Web Site Usability Handbook, Charles River Media, Rockland, MA, USA (2000).

5. Kim K. Information-seeking on the Web: effects of user and task variables. Library and Information Science Research, 23(3), 233-255 (2001).

6. Head M, Archer N, and Yuan Y. World Wide Web navigation aid. International Journal of Human-Computer Studies, 53(2), 301-330 (2000).

7. Hodkinson C, Kiel G, and McColl-Kennedy JR. Consumer web search behavior: diagrammatic illustration of wayfinding on the web. International Journal of Human-Computer Studies, 52(5), 805-830 (2000).

8. Burrell, A. and Sodan, A.C. (2006) Web Interface Navigation Design: Which Style of Navigation-Link Menus Do Users Prefer? Proceedings of the 22nd International Conerence on Data Engineering Workshops, pp 1-10.Atlanta, GA, USA.

9. Johnson, J. (2008) GUI Bloopers 2.0 : Common User Interface Design Donts and Dos, Morgan Kaufmann Burlington, MA.

10. Forlines, C., Shen, C., Wigdor, D., Balakrishnan, R. (2007). Direct- touch vs. mouse input for tabletop displays. In Proceedings of CHI 2007. pp 647-656.

11. Lazar, Bessiere, Ceaparu, Robinson, & Shneiderman, 2003; Levene, 2010; Nah & Davis, 2002

12. J. -H. Syu, M. -E. Wu and J. -M. Ho, "Portfolio Management System with Reinforcement Learning," 2020 IEEE International Conference on Systems, Man, and Cybernetics (SMC), 2020, pp. 4146-4151, doi: 10.1109/SMC42975.2020.9283359.

13. International Journal of Engineering Science Invention Research & Development; Vol. I Issue IX March 2015 www.ijesird.com e-ISSN: 2349-6185

14. Z. Zahidi, Y. P. Lim and P. C. Woods, "Understanding the user experience (UX) factors that influence user satisfaction in digital culture heritage online collections for non-expert users," 2014 Science and Information Conference, 2014, pp. 57-63, doi: 10.1109/SAI.2014.6918172

15. International Journal of Applied Engineering Research ISSN 0973- 4562 Volume 12, Number 20 (2017) pp. 9931-9935 © Research India Publications. http://www.ripublication.com 9931 A Study on Understanding of UI and UX, and Understanding of Design According to User Interface Change Heonsik Joo*

16. https://www.aacu.org/publications-research/periodicals/benefits-e- portfolios-students-and-faculty-their-own-words

17. International Journal of Engineering Science Invention Research & Development; Vol. I Issue IX March 2015 www.ijesird.com e-ISSN: 2349-6185

18. Prof. Godswill Obioma , Prof. Ismail Junaidu , Dr. Grace Ajagun , The Automation of Educational Assessment in Nigeria: Challenged and Implications for Pre-Service Teacher Educaion,Annual Conference of the International Association for Educational Assessment (IAEA) held at the Dan Panorama Hotel, Tel-Aviv, Isreal October 20th 25th, 2013

19. M. Jou,J.K. Shiau and H.W. Zhang,Application of Web Technologies in Automationon Technology Education, International Journal of Computers and Applications, Vol. 31, No. 4, 2009

20. Xiang Fu, Boris Peltsverger, Kai Qian, Lixin Tao, Jigang Liu, APOGEE Automated Project Grading and Instant Feedback System for Web Based Computing, Computer Science and Information Technology, 2nd IEEE International Conference 2009.

21. Gerald Weber, Defining the Paperless Workplace with the Paper Metaphor -Not a Contradiction in Terms, Conference: Proceedings of

    the Fourth Australasian Workshop on Health Informatics and Knowledge Management – Volume 120

22. V. Stantchev, M. R. Franke and A. Discher, "Project Portfolio Management Systems: Business Services and Web Services," 2009 Fourth International Conference on Internet and Web Applications and Services, 2009, pp. 171-176, doi: 10.1109/ICIW.2009.32.

23. Shrey Solanki , Omkar Birmole, 2021, Advancing System Authentication & Improving User Sign Up Process for Banking Applications, INTERNATIONAL JOURNAL OF ENGINEERING RESEARCH & TECHNOLOGY (IJERT) Volume 10, Issue 09 (September 2021),