Introduction

In the increasingly digital world, it has become ever more critical, that design decisions focus on the user experience (UX). Imagine the negative first impression of an institution, digital product or service, where the user experience is quite frustrating because people cannot find the information they are looking for. One of the biggest causes of user trouble is when objects are not locatable on the website. Whether it is in the form of a breadcrumb menu, a dropdown or tabs, every page needs to have a navigation structure that effectively guides a person to achieve their goals.

»A well-designed business program must make its structure and organization as clear as possible. Users don’t want to waste time-solving the mystery of where resources and information are hidden.« [3] Alan Cooper (2008, May 15)

Without well thought out navigation concept, people will have difficulties and thus a negative experience using the website. Consequently, navigation design is an essential part of developing the product, because it ensures that people can explore and enjoy a product.

Problem Description

Frequently, the webpage of the Fachhochschule Potsdam (Fhp) causes trouble for its audience. As an example, people always get very frustrated to use the main navigation, by the reason it is interacting as a hover menu with users. Every time, when the user is opening the menu, he could not intuitively move the mouse directly to a submenu item, because this will accidentally close the menu. That menu behaviour makes looking for information hard and annoying for everyone. Another significant pain for users is that objects are not locatable. The sites offer categories which are not always comprehensible for students and people with no academic experience because its structure does not match with their mental models. Additionally, users cannot discover some relevant content, because it deeply rooted in the hierarchy of the website or hidden in unfamiliar menu sections. Moreover, when users look for content through the search function, they often can not find the according page because it does not work effectively. These usability issues waste time and energy of people. Navigation on Fhp's website can no longer be an annoying experience and requires optimisation.

Research Question

The thesis addresses the user experience by navigation on websites. The central question to answer is: How can we improve the usability of the Fhp website by adjusting the navigation elements and the information architecture (IA) to the end that we optimise the user experience (UX)?

Thesis Overview

This thesis begins with an introduction of the theoretical principles of user experience (UX) design and relevant tools and methods. It includes the User-Centered design process, factors, which influence the user experience, the definitions of usability, navigation design and information architecture (IA). Then, the research tool will be presented and the methods that have been used in this project. The next chapter presents the developed persona and use cases. It also demonstrates the analysed problems of the current navigation design and information architecture (IA) structure. Additionally, researches about other university sites will be shown. In the following part outlines the concept and the design. This part has different focus points: User experience (UX) design, navigation optimisation and visualisation of (IA) structure. It also discusses the dilemma by developing a new navigation concept. The chapter about the design is concluded with comparisons of the new design implementations and the current navigation experience. The thesis ends with a conclusion of the project by summing up the result, review and reflexion of the work and process, and gives an outlook of further developments.

Summary of Results

The results outline that the webpage has many usability issues which adversely affect the user experience. These problems are based on the user navigation design, the AI structure and that the web design is not responsive. For improving the user satisfaction, this project has developed a new interface for the main menu, submenus and other navigation elements - like the search bar and footer, an alternative landing page navigation besides the current navigation system, as well as adaption of the website’s information architecture. Moreover, all design decision base on the previously developed persona Julia who represents Fhp’s stakeholder group students. After the problem analysis and description of the use cases: Certificate of study, the Library catalogue, Course catalogue, the design process was divided into three phases with different focuses. In the first phase, the primary objective was to design new interfaces for navigation elements. It included the inventions of removing the current hover menu, placing a new navigation bar instead of at the top (above the header image) and aligned its main items horizontal. It also involved the interactive look of the main menu, by adding icons and colour highlights and drop down interaction, as well as developing a more effective search tool, reducing the head bar and footer elements, and reconsidering their functions and essential content. Further, in this phase similar adjustments for the submenu elements was designed, as well as a responsive layout for navigation with mobile devices was developed to offer a holistically UX design concept. All modifications were visualised with design examples of screens. The next process stage focused on the concept of navigation and its usability. Therefore, the primary objects were the navigation structure and its items, of the main menu as well as the submenu of the design department. As results their first level categories were reduced to five items, with a new list order, and got the following new labels: Im Studium, Internationales, Lehre & Forschung, Infos Studienangebot, Fachhochschule (for main menu); Studium & Lehre, Der Fachbereich, Forschung & Projekte, Öffentlichkeit (for submenu of design department). Besides that, the hierarchy, section levels and subitems of both menus were reorganised and with charts documented. To demonstrate these adjustments screens were designed.

Additionally, a dendrogram was developed to illustrate the new arrangement of the page’s areas. This graphic shows that categories »Im Studium« and »Fachhochschule« contain the most content. Accordingly, it visualised the cluster of new IA structure with a five-level hierarchy.
Due to the IA structure, it had been the navigation dilemma discussed. Central considerations were that deep level hierarchies and flat navigation structures had opposed advantages and disadvantages. Navigation concepts with high usability take both sides into account. The forward design decisions consider that argumentation. Also, the idea to offer users of the Fhp’s website an alternative navigation structure beside the main menu was introduced. This second navigation system based on several stakeholder landing pages with flat hierarchies, which guide the users efficient to their objectives onsite. Therefore, we grouped the stakeholders of Fhp’s webpage into the following seven categories: Studierende, Interessenten, International Students, Alumni, Mitarbeiter,  Unternehmen, Presse, and developed a landing page for the target group students (Studierende), as an example of the concept. The principle of this particular page was to offer its stakeholder a navigation interface with reduced options. So, we defined thirteen topic pools, which represent the objectives and needs of students onside, and assigned the most relevant links of the webpage’s content as subitems.
Then, the users' benefits of this navigation system were discussed. All arguments base on the project’s goal to improve the usability of the Fhp homepage, like more effective and efficient navigation, or findability of specific items. In the last process phase, the focus was on developing and visualisation to compare the new navigation concept with the IA structure of the Fhp homepage. This graphic demonstrated the intersection points of the students landing page of the website’s content, and showed the reduced students’ landing page perspective, in comparison with the internal view of the whole menu structure of the institution. Further, three information graphics were designed to outline the optimised navigation flow based on the new navigation concept. As a reference, we described the improved user experience of Julia (persona) in the use cases.

Graphics

Desktop Screens

Redesign of Fhp homepage

Main Menu open

Search function aktive with filters

Footer design

Variations of sub menu and quick search widget

Examples of landing page design for stakeholder students

Design of category page and sub level menus

Mobile Screens

Responsive Fhp homepage and mobile navigation design of main menu

Responsive category page and mobile navigation design of sub menu

Navigation flow by main menu to example page design course catalogue

Examples of responsive landing page design for stakeholder students

Information architecture (IA)

Redesigned IA structure of Fhp website

Comparisons

Current vs redesigned navigation design demonstrated with the use case examples: Certificate of Study, library catalogue and course catalogue

Comparison of navigation perspective of main menu and landing page students

Bibliography

Table of Web Literature

[ 1 ] Boxes and Arrows & Spencer, Donna. (2004, April 7). Card Sorting: A Definitive Guide. 
Retrieved June 5, 2018, from http://boxesandarrows.com/card-sorting-a-definitive-guide/

[ 2 ] CMS WiRE & McGovern, Gerry. (2010, 26. April). Usability: 
Navigation is More Important Than Search. 
Retrieved June 1, 2018, von www.cmswire.com/cms/web-engagement/usability-navigation- 
is-more-important-than-search-007349.php

[ 3 ] Cooper, Alan. (2008, May 15). Navigating isn't fun. 
Retrieved June 4, 2018, from https://www.cooper.com/journal/2008/5/navigating_isnt_fun

[ 4 ] DEX (User Experience Design Blog). (n.d.). How to Develop the Best User Experience Strategy. Retrieved May 20, 2018, from https://designexcellent.com/develop-best-product-ux-user-experience-strategy/

[ 5 ] Garrett, Jesse James. (2000, March 30). The Elements of User Experience. 
Retrieved April 29, 2018, from http://www.jjg.net/elements/pdf/elements.pdf

[ 6 ] Information Architecture Institute. (2013). What is Information Architecture? 
Retrieved June 4, 2018, from https://www.iainstitute.org/sites/default/files/what_is_ia.pdf

[ 7 ] International Organization for Standardization (ISO). (n.d.). ISO 9241-11:2018; 
Ergonomics of human-system interaction - Part 11: Usability: Definitions and concepts. 
Retrieved June 15, 2018, from www.iso.org/standard/63500.html

[ 8 ] International Organization for Standardization (ISO). (n.d.). ISO 9241-210:2010; Ergonomics of human-system interaction -- Part 210: Human-centred design for interactive systems. 
Retrieved June 15, 2018, from https://www.iso.org/standard/52075.html

[ 9 ] Lepore, Traci. (2010, May 17). Sketches and Wireframes and Prototypes! Oh My! 
Creating Your Own Magical Wizard Experience. 
Retrieved May 12, 2018, from https://www.uxmatters.com/mt/archives/2010/05/sketches-
and-wireframes-and-prototypes-oh-my-creating-your-own-magical-wizard-experience.php

[ 10 ] Morville, Peter. (2004, June 21). User Experience Design. 
Retrieved April 29, 2018, from http://semanticstudios.com/user_experience_design/

[ 11 ] Nielsen Norman Group & Budiu, Raluca. (2014, July 6). Memory Recognition and Recall in User Interfaces. 
Retrieved May 20, 2018, from nngroup.com/articles/recognition-and-recall/

[ 12 ] Nielsen Norman Group & Nielsen, Jakob. (1995, May 25). Usability Testing for the 1995 Sun Microsystems' Website & Card Sorting to Discover the Users' Model of the Information Space. Retrieved May 24, 2018, from https://www.www.nngroup.com/articles/
usability-testing-1995-sun-microsystems-website/

[ 13 ] Nielsen Norman Group & Nielsen, Jakob. (2003, April 14). Paper Prototyping: Getting User Data Before You Code.
Retrieved May 24, 2018, from https://www.nngroup.com/articles/paper-prototyping/


[ 14 ] Nielsen Norman Group & Nielsen, Jakob. (2004, July 19). Card Sorting: How Many Users to Test. Retrieved June 20, 2018, from www.nngroup.com/articles/card-sorting-how-many-users-to-test/

[ 15 ] Nielsen Norman Group & Nielsen, Jakob. (2006, April 17). 
F-Shaped Pattern For Reading Web Content (original study). 
Retrieved May 20, 2018, from www.nngroup.com/articles/f-shaped-pattern-reading-
web-content-discovered/

[ 16 ] Nielsen Norman Group & Nielsen, Jakob. (2008, 28. April). 
Right-Justified Navigation Menus Impede Scannability. 
Retrieved June 20, 2018, from www.nngroup.com/articles/right-justified-navigation-menus/

[ 17 ] Nielsen Norman Group & Nielsen, Jakob. (2009, May 11). 
Top 10 Information Architecture (IA) Mistakes. 
Retrieved June 1, 2018, from https://www.nngroup.com/articles/top-10-ia-mistakes/

[ 18 ] Nielsen Norman Group & Whitenton, Kathryn. (2015, November 29). 
Menu Design: Checklist of 15 UX Guidelines to Help Users. 
Retrieved May 20, 2018, from www.nngroup.com/articles/menu-design/

[ 19 ] Nielsen Norman Group & Whitenton, Kathryn. (2013, November 10). 
Flat vs. Deep Website Hierarchies. 
Retrieved May 20, 2018, from https://www.nngroup.com/articles/flat-vs-deep-hierarchy/

[ 20 ] Nielsen Norman Group & Whitenton, Kathryn. (2015, January 4). 
Top 3 IA Questions about Navigation Menus. 
Retrieved June 1, 2018, from https://www.nngroup.com/articles/ia-questions-navigation-menus/

[ 21 ] Smashing Magazin2, & Fadeyev, Dmitry. (2009, September 24). 
10 Useful Usability Findings and Guidelines. Retrieved 20. June, 2018, von https://www.smashingmagazine.com/2009/09/
10-useful-usability-findings-and-guidelines/#6-the-ideal-search-box-is-27-characters-wide

[ 22 ] Step Two DESIGNS & Calabria, Tina (2004, March 2). 
An introduction to personas and how to create them. 
Retrieved May 10, 2018, from https://www.steptwo.com.au/papers/kmc_personas/

[ 23 ] Usability Body of Knowledge. (n.d.). Glossary - Terms and definitions used in the User Experience profession. (n.d.). 
Retrieved April 25, 2018, from http://www.usabilitybok.org/glossary

[ 24 ] Usability Body of Knowledge. (n.d.). Persona. 
Retrieved May 11, 2018, from http://www.usabilitybok.org/persona

[ 25 ] usability.goc. (n.d.). Personas. Retrieved May 18, 2018, from https://www.usability.gov/how-to-and-tools/methods/personas.html

[ 26 ] ]usability.goc. (n.d.). Prototyping. 
Retrieved May 6, 2018, from https://www.usability.gov/how-to-and-tools/methods/prototyping.html

[ 27 ] usability.goc. (n.d.). Use Case. 
Retrieved May 6, 2018, from https://www.usability.gov/how-to-and-tools/methods/use-cases.html

[ 28 ] usability.goc. (n.d.). User Experience Basics. 
Retrieved April 29, 2018, from https://www.usability.gov/what-and-why/user-experience.html

[ 29 ] usability.goc. (n.d.). User-Centered Design Basics. 
Retrieved May 6, 2018, from https://www.usability.gov/what-and-why/user-centered-design.html

[ 30 ] User Experience Professionals Association. (2003, December 17). About UX. 
Retrieved May 4, 2018, from https://uxpa.org/resources/about-ux

[ 31 ] Userfocus ltd, & Travis, David. (2009, August 3). 
How to create personas your design team will believe in. 
Retrieved May 11, 2018, from https://www.userfocus.co.uk/articles/personas.html

[ 32 ] Userfocus ltd. (n.d.). What is user centred design? 
Retrieved June 18, 2018, from www.userfocus.co.uk/consultancy/ucd.html

[ 33 ] UX BOOTH & Lin, Stephanie. (2017, January 31). The Rules for Modern Navigation. 
Retrieved June 4, 2018, from http://http://www.uxbooth.com/articles/
the-rules-for-modern-navigation/

[ 34 ] UX BOOTH & Babich, Nick. (2017, May 2). Best Practices for Search. Retrieved June 4, 2018, from http://www.uxbooth.com/articles/best-practices-for-search/

[ 35 ] UX Booth. (2015, December 22). Complete Beginner’s Guide to Information Architecture. 
Retrieved June 11, 2018, from http://www.uxbooth.com/articles/
complete-beginners-guide-to-information-architecture/

[ 36 ] UX Magazine & Gothelf, Jeff. (2012, May 1). Using Proto-Personas for Executive Alignment. Retrieved May 11, 2018, from http://uxmag.com/articles/ using-proto-personas-for-executive-alignment

[ 37 ] UX Magazine & O' Connor, Kevin. (2011, March 25). Personas: The Foundation of a 
Great User Experience.
Retrieved May 11, 2018, from http://uxmag.com/articles/personas-the-foundation-
of-a-great-user-experience

[ 38 ] UXPA (User Experience Professionals Assoziation). (n.d.). Definitions of User Experience 
and Usability. 
Retrieved April 25, 2018, from https://uxpa.org/resources/definitions-user-
experience-and-usability

[ 39 ] Wikipedia. (2018, February 5). Card sorting. 
Retrieved May 25, 2018, from https://en.wikipedia.org/wiki/Card_sorting#cite_note-Nielsen_1995-1

Table of Literature

[ 40 ] Baxter, Kathy & Courage, Catherine & Caine, Kelly. (2015). Understanding Your Users: 
A Practical Guide to User Research Methods (2nd ed.). Burlington, USA: Morgan Kaufmann Publishers.

[ 41 ] Brown, Dan. (2010). Communicating Design: Developing Web Site Documentation for Design 
and Planning Voices That Matter (2nd ed.). Reinbek, Germany: Kindle.

[ 42 ] Buxton, Bill. (2010). Sketching User Experiences: Getting the Design Right and the Right Design. Burlington, USA: Morgan Kaufmann.

[ 43 ] Garrett, Jesse James. (2010). The Elements of User Experience: User-Centered Design for the Web 
and Beyond (2nd ed.). London, England: Pearson Education.

[ 44 ] Interaction Design Foundation. (n.d.). The Encyclopedia of Human-Computer Interaction
 (2nd ed.). Retrieved from https://www.interaction-design.org/literature/book/the-encyclopedia-
of-human-computer-interaction-2nd-ed

[ 45 ] Interaction Design Foundation. (n.d.). The Basics of User Experience Design (2nd ed.). 
Retrieved from https://www.interaction-design.org/newsletter/confirm?mailing_listID=48&email =wiebke.kloepping%40gmail.com&check=d9de5314531821bd4864756ba1b5e9e5

[ 46 ] Johansson, Maria & Arvola, Mattias. (2007). A Case Study of How Interface Sketches, Scenarios and Computer Prototypes Structure Stakeholder Meetings (Proceedings of the UPA 2003 Conference). Retrieved from http://www.bcs.org/upload/pdf/ewic_hc07_lppaper18.pdf

[ 47 ] Quesenberry, Whitney. (2003). Dimensions of Usability: Defining the Conversation, Driving the Process (Proceedings of the UPA 2003 Conference). 
Retrieved from http://www.wqusability.com/articles/5es-upa2003.pdf

[ 48 ] Saffer, Dan. (2010). Designing for Interaction: Creating Innovative Applications and Devices. New Riders

[ 49 ] Walker, Miriam & Takayama, Leila & Landay, James A. (2002). High-Fidelity or Low-Fidelity, Paper or Computer? Choosing Attributes when Testing Web Prototypes (Vol 46, Issue 5). 
Retrieved from http://journals.sagepub.com/doi/abs/10.1177/154193120204600513

Table of Graphics

[ 50 ] DMA HOMES. (n.d.). User Experience Design Tree Swing Project Projects [Graphic]. 
Retrieved June 1, 2018, from http://dma-upd.org/14-best-photo-of-tree-swing-design-ideas/
user-experience-design-tree-swing-project-projects/

[ 51 ] Garrett, Jesse James. (2000, March 30). The Elements of User Experience [Graphic]. 
Retrieved April 29, 2018, from http://www.jjg.net/elements/pdf/elements.pdf

[ 52 ] Imarklab. (2016, October 4). 6 Principles to Understand Card Sorting and Tree Testing : 
Card sorting [Graphic]. 
Retrieved June 12, 2018, from http://www.imarklab.com/en/2016/10/6-basic-principles-
better-understand-card-sorting-tree-testing/

[ 53 ] Interaction Design Foundation. (n.d.). The 7 Factors that Influence User Experience [Graphic]. Retrieved May 6, 2018, from https://www.interaction-design.org/literature/article/
the-7-factors-that-influence-user-experience

[ 54 ] Kickerstudio. (n.d.). CUBI UX - User Experience Model [Graphic]. 
Retrieved May 22, 2018, from http://www.kickerstudio.com/wp-content/uploads/2013/03/ux.jpg

[ 55 ] Lepore, Traci. (2010, May 17). Sketches and Wireframes and Prototypes! Oh My! Creating Your Own Magical Wizard Experience: Figure 1— The Sketch to Design Continuum [Graphic]. 
Retrieved May 11, 2018, from https://www.uxmatters.com/mt/archives/2010/05/sketches-and-wireframes-and-prototypes-oh-my-creating-your-own-magical-wizard-experience.php

[ 56 ] Morville, Peter & Semantic Studios. (2004, June 21). User Experience Design: 
Three Circles of Information Architecture [Graphic]. 
Retrieved June 11, 2018, from http://semanticstudios.com/user_experience_design/

[ 57 ] Morville, Peter. (2004, June 21). User Experience Design: User Experience Honeycomb [Graphic]. Retrieved June 28, 2018, from http://semanticstudios.com/user_experience_design/

[ 58 ] Nielsen Norman Group & Whitenton, Kathryn. (2013, November 10). Flat vs. Deep Website Hierarchies [Graphic]. 
Retrieved June 15, 2018, from https://www.nngroup.com/articles/flat-vs-deep-hierarchy/

[ 59 ] Optisol Business Solutions. (n.d.). OptiSol approach and underlying principles to UX design: 
The User-Centered Design (UCD) process [Graphic]. 
Retrieved May 9, 2018, from https://www.optisolbusiness.com/insight/optisol-approach-underlying-principles-ux-design

[ 60 ] Perez, Alex. (n.d.). Portrait of Persona Julia Schulz [Graphic]. 
Retrieved May 12, 2018, from https://unsplash.com/photos/vXQza9AUe40

[ 61 ] Usability.gov. (n.d.). The User-Centered Design (UCD) process [Graphic]. 
Retrieved May 23, 2018, from https://www.usability.gov/what-and-why/user-centered-design.html

[ 62 ] UX Booth & Greig, Timothy. (2015, December 22). Complete Beginner’s Guide to Information Architecture: Common Methodologies/ Information Architecture: Research Section,
 showing content levels [Graphic].

[ 63 ] UX Booth & Greig, Timothy. (2015, December 22). Complete Beginner’s Guide to Information Architecture: Data Modeling/ Information Architecture [Graphic] 
Retrieved June 8, 2018, from http://www.uxbooth.com/articles/complete-beginners-guide-to-information-architecture/

[ 64 ] UX Booth & Lin, Stephanie. (2015, December 22). The Rules for Modern Navigation: 
Deep Hierarchy [Graphic]. 
Retrieved June 11, 2018, from http://www.uxbooth.com/articles/the-rules-for-modern-navigation/

[ 65 ] UX Booth & Lin, Stephanie. (2015, December 22). The Rules for Modern Navigation: 
Flat Hierarchy [Graphic]. 
Retrieved June 11, 2018, from http://www.uxbooth.com/articles/the-rules-for-modern-navigation/

[ 66 ] Warfel, Todd R. (n.d.). How to Develop the Best User Experience Strategy: 
UX Process Diagram [Graphic]. 
Retrieved May 12, 2018, from https://designexcellent.com/develop-best-product-ux-user-experience-strategy/