Improving the Usability of Fhp’s Website

Bachelor Thesis Wiebke Klöpping

Abstract

The Fhp website provides access to different kinds of information. Whether users want to learn more about the organisation, look for some info-services, need the course catalogue, or access to a specific department, they depend on the site navigation. Ideally, its interface design should help them to find what they are looking for.

However, the analysis of Fhp website has shown, that the navigation works »well enough«, allowing students to access what they need to – but after some struggle.

For that reason, this project outlines some of these navigation problems, makes suggestions to improve user experience and information architecture. 

Problem Example – Main navigation is absolutely unusable

restructure the information architecture

Card Sorting

At first, I documented all pages of the main navigation and of the design department on cards. 

After that, I organized a workshop with colleges to figure out a new information architecture. We worked with the UX technique card sorting to reduce the chaos of the website’s information structure.

For that reason prioritized the most relevant pages and adapt the structure. The results of our jointly developed information structure has been the basic for the new navigation design.

From Wireframe to Visual Design

First at all, I developed wireframes to connect the website’s information architecture to its visual design. The next step was to design new navigation elements, like head bar, main menu, footer and other features, as well as, the development of a mobile prototype with a responsive layout and navigation concept for small screens.

The  wireframe specified the website’s layout with the new navigation elements and their functionalities. It helped to develop quickly a responsive version for mobile use.

Problems of the Hover Menu

One of the worse things about the current Fhp menu is that it forces the user to move their mouse through hover tunnels to click an item. The hover menu does users more annoying than good because it makes navigation harder and slower.
When the hover menu opens, users cannot move their mouse to the item they want in a straight line. If they do, their mouse will fall off the hover path and close the menu.
Another problem is that items closest to the menu edge are more difficult to click. Users have to slow down their mouse movement otherwise they miss the item and land outside the menu, resulting in a menu close.

Changes of Menu Design

The new menu has a more user-friendly design that opens on click instead of on hover. It only opens when the user has clearly decided to open it and not by default.
Another benefit for the usability is that the menu bar is located on the top of the website’s header. The head is a familiar location for main menus. This location increases the visibility of the menu and the user doesn’t have to scroll down the page.
Moreover, the menu design follows the pattern of the letter F. This pattern increases the readability that the user can briefly scan the main elements of navigation.
Finally, the new menus design looks more interactive by adding arrow icons and colour highlights. These visual hints help the users to realize what items are clickable and which menu category is active.
All design changes make the navigation quicker on the website for the users.

Problems of the Sub Menu

The current submenu design has problems regarding its usability, too. The menu design forces the user also to move their mouse through hover tunnels to click an item. 
In addition, the sub-items are very complicated to read because they are aligned horizontally in a row under the row of the main categories. That alignment displays more block element than separate items.
Further, the menu has many categories with deep sub hierarchies which makes navigation for the user more difficult, too. Thus the user experience of the submenu is very poor.

Changes of Menu Design

To keep the navigation system consistency, I established the same interaction behaviour for the submenu, as the already discussed main navigation.
After clicking on a sub-item of one main category, users currently land on the first article of this subcategory. For that instance, I implemented category landing pages that merely offer links to subpages.
Besides, the submenu items are displayed always on the left side to give users orientation and overview of the subcategory.
Beyond that, I reduced the categories from nine to five main items. This minimalist presentation helps users quickly understand what’s available to select the right section.

Problems of the Footer

The Footer has similar problems like the current main menu and head bar.
The current Footer provides lists with about 24 links. In my perspective, it has too many elements. Some of them are redundant like the link to print the website or links that are in the header bar or man navigation, too.
The main problem is that the user doesn’t get what kind of information the footer provides for him. Even if there are some helpful elements the user will probably don’t recognize them. 

Changes of the Footer Design

Usually, when people are looking for contact and address information of an institution, they often scroll to the footer. Putting pieces of information there is a convenient service for Fhp’s user groups.
Additionally, route directions, city map and links to public transportation make it even more accessible to navigate to the campus. Fellow students wish to get more rapid access to the AStA and Design StRa site during my studies. Therefore, I placed the logos as a feature item in the new footer.
Another useful new element in footers is the »back to top« button. With this button, the user saves time to navigate on the side. It is one of those small details that could enhance the usability a lot.

Problems Poor Mobile Usability

One crucial problem regards the usability of mobile devices because the website is not responsive and optimized for touch screens.
For every participant of my study navigation and reading information with a smartphone had been very frustrating. All in all, the interaction is worse and pieces of information are not readable with small displays. This issue has a significant impact on the users’ satisfaction of the website.

Change the Responsive Design

The new mobile website structure is lean and concise to its desktop version. The layout of the site’s contents is adapted for smaller screens to keep them readable and touchable. A consistent user interaction pattern and graphical interface makes the mobile navigation intuitive and provide a good user experience.

There are just five sections in the head bar menu. The first section is the button to the main navigation. If it is open a vertical list of main categories will be displayed. The user can choose one main category and will be navigated to a deeper hierarchy level. If the user navigates to a subpage a submenu is displayed with similar navigation structure and user interaction.

Regardless on which page and hierarchy level the user the head bar menu is always displayed. Therefore the user can always use the search function, look for the contact information, switch the language or use the stakeholder navigation of the website. Beyond the main navigation, these four functions are available through the mobile head bar menu. Moreover the menu items „quick links“ and „index page“ are a part of the stakeholder menu section. 

About the Idea of LP Navigation

The landing page navigation has seven major categories, which represents seven different target groups (stakeholders) of Fhp institution, but only two vertical levels underneath. The major categories of user groups are Studieninteressierte, Studierende, International Students, Alumni, Mitarbeiter, Unternehmen, Presse. The next levels are pools of specific topics of interests. These pools contain links for objectives – like questions, contact persons, services or other requests that the focus group is usually interested in. For example, students need quick access to the course or library catalogue, frequently have questions about examination times or are interested in news and events of their campus life. 

User’s Benefits of LP Navigation

The new menu has a more user-friendly design that opens on click instead of on hover. It only opens when the user has clearly decided to open it and not by default.
The navigation by particular landing pages with a flat hierarchy will improve the usability of Fhp homepage. One significant user benefit is that its content will be more discoverable for users when it is not buried under multiple intervening layers. I have made the experience that some offerings and activities are so deeply rooted in the hierarchy of the website, that people will never make use of them. 
If categories are ambiguous, locating items into multiple pools improves their findability. I think this option can provide much frustration for the users if researches have shown they associate different categories for one item.
Also, the landing pages only display topics that are relevant to their perspective of the user group. Therefore reduced content and navigation options will make the user experience more effective and efficient. 

The subcategories (landing page pools) can be more specific and do not overlap what makes them easier to understand. Using more descriptive and colloquial terms can improve the intelligibility because labels will be less abstract for the users. 

Due to that, they cover a more extensive range of particular objectives and requests, what makes the page also more usable. For providing that the users do not get overwhelmed with too many categories, the side has enough space for a graphic that illustrates the pools’ topics.