Designing Simple-Predictable-Comfortable Navigation Part 3

Hovering & Tooltips Interaction Events

Summary:

When we are designing a navigation scheme or a menu, we should consider user interaction events besides the navigation layout, appearance, and links. As the user journey begins with the user interactions with the interface and navigation interface has its own kinds of events.

  

Intro:

In this series, we are exploring various aspects of navigation designing for web and mobile. In the first part of this series, we have seen how navigation symbols take parts in successful navigation designs and in the second part of the series, we had explored the target areas further. Now, in this current third part, we are aiming to dig the most common interaction events in navigation menus or schemes designing.

Generally, four kinds of interaction events take place when the users begin interactions with UI and particularly, on navigation menus or schemes on the web and mobile client devices. They are hovering, clicking, scrolling, and typing. Among these, hovering may not applicable in responsive design on mobile devices in particular. However, we will explore some aspects of hovering interaction events in this post because still half of our users are coming from desktops and laptops like big screen devices where pointing devices are in action, not the touch gestures.

Hovering Interaction Event

Mouse over or hovering event is generally used in case of text links effects, tool tips effects, popup fire-up events, and now in pop up of navigation menu. Good web designers know that hovering event on navigation menu may cause accidental opening of menu when users simply traverse on different parts of the website and crossing the navigation bars.

At user experience point of view, it is annoying users and its has simple clue to stop such accidental opening that is giving a delay of 0.5 seconds when curser arriving on the target area. Of course, designers should take care once the 0.5 seconds over, hovering event should take place within 0.1 second otherwise, your users will get bad impression of your website. The same is true when mouse curser go away from the active areas of the corresponding menu button and menu itself. There should be a delay of 0.5 second to close the menu window and it should accomplish within next 0.1 second.

In mega websites, designers take help of another workaround and it is to create a temporary invisible target area in order to avoid accidental appearing or disappearing of popup menu during traveling to the intended links on window/menu from the main navigation button.

Tooltips

With hovering interaction, event tooltips appear as navigation menu for categories and sub-categories items. This trend is gaining ground due to some obvious benefits of tooltips in UX. However, using tooltips on hovering is not entirely problem free and it might have following issues at UX and Usability point of views.

• It is difficult to know that whether tooltips exist or not
• It is possible for tooltips to obstruct the next items in navigation
• There are possibilities of delay problems if they are too short or too long
• Comparison between items become difficult in tooltip hovering interaction event
• Tooltips are useless in responsive design when mobile devices are client-devices

Conclusion

Based on the above-described pros and cons of hovering interaction event in navigation design, the team of UX experts and web designers at Lujayn, for responsive as well as static website design, take steps carefully and add hovering events in navigation only in selected cases.

Test Usability in Context through Participatory Design

 

Participatory Design Test

Summary:

Responsive websites or mobile apps have different use contexts compared to desktop only versions. Therefore, their testing is always a challenging task. Generally, we take two routes to test, one by general and large scale testing or by broad assumptions while another is the designing of a feature and testing it in its specific ways. In fact, they both are two extreme ends of the testing spectrum, but participatory design of testing can bridge them and offer contextual usability tests.

Introduction:

As we are living in mobile era and almost 50% population use mobile devices to access the web for all purposes including critical shopping. As, the day before yesterday, we were developing websites for desktop users and have used our testing system accordingly. Therefore, we have tough time to offer excellent user experiences and usability on mobile devices in responsive web designing endeavors.

Today we have many advance and appropriate testing systems, methods, and facilities to accomplish our quality maintenance tasks for intricate responsive website development project. For instance, we can run guerilla UX test with the least investment of time and money. Same the way for usability testing, we have participatory design to test our contextual interactions in real-time.

Why We Need Contextual Participatory Test

Yes, contextual testing matters more for the mobile website and application testing. As, we know mobile used in wider and in unexpected use cases and contexts due to its mobility factors against the standalone desktops or laptops with partial mobility. For instance, when a mobile user accesses a website during its commuting route, she has altogether different needs and issues with the website from the other locations like office or home.

If we think on getting out in the field for UX or usability testing with real users in real-time, it becomes impossible to accomplish our project within given timelines. Therefore, we have to simulate much of our contextual experiences in the lab or in the areas of our vicinity in economic and safe ways. In due course, industry has one refined approach for mobile testing and that is participatory design. As, this test takes short time and limited users, as the participants, we can go cost-effective ways without missing much quality credentials.

Steps of Participatory Design Test Session

Step 1 - Intimate Users Regarding Test

At first step, we used to introduce our app and testing points that uncover the actual usage of our app or website or anything creating pains in user experiences. If you successfully brought awareness and put them in right contexts that you want to use product, you would have better cooperation from them.

In this process, you must go in-depth and create questions, which should cover: when, where, how long, what tasks, and how satisfied like categories.

Step 2 – Documentation

Once you soak them in your desired contexts through initial questions, draw a timeline for the beginning and end of the test as well as tell test participants to fill its intermediate steps using documentation techniques. In this documentation process, you can use colorful stickers to overlay their emotions in the range of negative and positive. This way you will capture their happiness and frustration in qualitative as well as quantitative measures.

Step 3 – Sketching Experiences

For this step of test, you have to bring participants in the lab and tell them to recall their field experiences and translate them in some wireframe like designs. Give participant the pen-paper, drawing and cutout equipments, and tap and scissors to stick cutouts on the design of phone and its screens or interfaces, just like we do in prototyping.

Step 4 – Feedback

Now, in this final step, converse with participants after examine their sketches and documents. Place your own imaginative designs on the table or show in modern prototyping tools with interactions and animations. Thus, they will push their boundaries and will provide you valuable feedback on the designs. Thus, they will help you to iterate or refine your development methodologies.

Fortunately, Lujayn has excellent web design and mobile development team with enough experiences in participatory design testing to bring robust outcomes on the table.

Creating the Right Environment and Processes for Collaboration

At present, we are developing very intricate software products for desktop, web, and mobile. The development process demands involvement of a big team of designers, programmers, and others in highly collaborative ways. Thus, creating the right environment and process for the development are challenging for modern project managers as well as software development company. However, payoffs for such hard efforts are highly rewarding and astounding.

In software development companies, it is a general practice of allocating work that they describe features and functionality needs in the software. Unfortunately, never target the final goals of the software and never try to inspire their development teams to think that how users will accomplish their goals. This process involves the development teams around the common vision. 

If we want development team to work around the common vision, we have to foster the culture of collaboration where we have to create an environment and essential self-defending processes. In collaboration culture, each team member would have common understanding of the software and its goals. They have enough space to place their thoughts, opinions, and possible solutions. There would be some discussions, arguments, and finally negotiation or concession on a compromised solution. 

Of course, these all processes will run under the supervision of project manager or team leader who would have vision, experiences, and expertise to lead the teams in right direction with active involvement. In order to foster right collaboration culture, we have created collaborative environment through physical space, virtual spaces, and running discussion or feedback sessions.

Collaboration through Physical Space

In process of creating collaborative environment, we need to mix up team members according to their projects and personality or expertise so they can easily fall in the fruitful discussions. Moreover, we have facilitated their free movements among the other relevant teams or team members to the project by offering open desk, standing table, couches, etc. facilities to they can move around and work whenever needs arise.

The next trait of collaborative environment is to encouraging the flow of ideas and we can do this by allowing them to stick notes, design sketches, prioritization lists of work, etc. encouraging materials on the wall or on the predefined boards. Moreover, we can offer them whiteboards to draw charts or development paths and modify after some discussions.

Finally, we can allow other irrelevant, but software teams or members of staff to run some dialogues informal ways on coffee table, launch or canteen space, etc. places so they can look at the project from entirely different perspectives with the help of people from the outside and can run some guerilla survey for UX and usability if needed.

Collaboration through Virtual Space

Creating physical spaces for collaboration is somewhat costly affairs for many software companies, but modern communication technologies and collaboration software ease our some of the problems in cheaper ways. For instance, we have Campfire, Slack, HitChat, etc. like collaborative communication tools while Basecamp, Trello, Jira, etc. like tools are for collaborative project management. Similarly, GitHub, Bitbucket, etc. are collaborative source-code repository.

Thus, we have enough arsenals to create highly collaborative and effective virtual spaces to work with a team or team members dispersed across the globe and different time zones.

Fortunately, Lujayn has both kinds of collaborative spaces where its in-house web and mobile development teams are working in physical space and its teams of clients are working with its in-house teams in virtual space, particularly in case of B2B clients.