navigation – Navbars that hide when scrolldown and show when scrolling up

This pattern plays a big role on mobile devices, where vertical screen space is scarce.

I suggest using Chrome on iOS (perhaps on Android, too). The way the URL bar behaves is exactly this feature, but feels very natural and gives you a great, full screen reading experience.

My guess is it works a lot better on mobile since scrolling happens much more often and is more intuitive than on the desktop.

This way it becomes second nature to swipe the content towards where you suspect your desired element is – and the URL bar is always at the top, reachable within half a second no matter how far down you are.

Here’s how it looks like in Safari:
Safari URL bar on iOS

Definitely less so on the desktop, where we not only have the screen space available to show chrome and give a good reading experience, but where scrolling to get to crucial elements feels very forced.

In case you want to use this feature in your project, there’s a jQuery plugin for that: http://eduardomb.github.io/scroll-up-bar/

navigation – The “is-active” class is added to the main-menu links only when the site is accessed by an anonymous user

I use this simple template (menu–main.html.twig) to render the main menu I created.

<ul>
    {% for item in items %}
    <li>
        {{ link(item.title, item.url) }}
        {% if item.below is not empty %}
            <div class='submenu'>
                {% for subitem in item.below %}
                    {{ link(subitem.title, subitem.url) }}
                {% endfor %}
            </div>
        {% endif %}
    </li>
    {% endfor %}
</ul>

Drupal is nice enough to add an is-active class to the currently active link, which is good and worked fine for a bit.

Recently, it stopped working properly and I have no idea why. Currently it is only applying an is-active class to the menu links when I am not logged in. When I log in, there is only a menu link that gets that class applied to it when active.

The menu links are identical, apart title and destination on the Edit Menu Link menu, so I’m very confused.

Can anybody offer suggestions for things to try to help solve this problem?

Add layered Navigation filter as In stock availability magento2.4

I want to add "Stock availability" as layered navigation filter. but I can’t find this attribute in attribute set.

enter image description here

navigation – Usability research on sticky headers?

Sticky headers may seem like a new concept, but they are not much different from frames (visually).

To my knowledge, there is unfortunately no direct research on sticky headers. Hopefully others can share their insights from their own user research…

As a best practice, I would include sticky elements when they are useful (i.e. recognition rather than recall). See Vanguard as an example: https://personal.vanguard.com/us/funds/vanguard/all?sort=name&sortorder=asc

Be careful not to use too much screen real estate. If the user is scrolling down, then they are likely interested in the content. I like the idea of decreasing the size of the header as the user scrolls down. If you have a large logo, you can use a smaller version as the user scrolls and shrink the header a bit. Also make sure that page scrolling works if the user is using the space bar or scroll bar; when using those scrolling methods, the last one or two lines of text are typically displayed at the top of the page.

The most important best practice is something you already should be doing: Make the header useful and understandable. If the header is useless to begin with, then the sticky header will just be an annoyance.

Sticky elements can also be used to draw attention to CTAs (calls to action) that can appear on the far left or right if the user scrolls down (again, make sure not to interfere with content). We have found success using sticky elements for contact us, help desk, and “back to top” links.

kotlin – Android Compose Navigation avnd ViewModel lifecycle

I am just starting with Compose. For the first look, for me, it all appears like a copy of SwiftUI, which I love. But when I started to really use it, I quickly ran into many issues. Apparently, I need to find the proper way how to use it to benefit from it…

Here is one of my issues.

package org.test.android.kotlin.compose.ui

import android.os.Bundle
import android.util.Log
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.*
import androidx.compose.material.Button
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.Dp
import androidx.lifecycle.MutableLiveData
import androidx.lifecycle.ViewModel
import androidx.lifecycle.viewmodel.compose.viewModel
import androidx.navigation.compose.NavHost
import androidx.navigation.compose.composable
import androidx.navigation.compose.rememberNavController
import org.test.android.kotlin.compose.ui.theme.MbiKtTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MbiKtTheme {
                val navController = rememberNavController()
                Navigator.route.observe(this, { route -> navController.navigate(route) })
                Surface(color = MaterialTheme.colors.background) {
                    NavHost(
                        navController = navController,
                        startDestination = "setup"
                    ) {
                        composable(route = "setup") {
                            SetupScreen()
                        }
                        composable(route = "progress") {
                            ProgressScreen()
                        }
                    }
                }
            }
        }
    }
}

// This is unnecessary here in this simple code fragment, but a MUST for large modular projects
object Navigator {
    val route: MutableLiveData<String> = MutableLiveData()
}

class SetupViewModel : ViewModel() {
    init {
        Log.d(toString(), "Create")
    }

    override fun onCleared() {
        Log.d(toString(), "Destroy")
    }

    override fun toString(): String {
        return "SetupViewModel"
    }
}

@Composable
fun SetupScreen(model: SetupViewModel = viewModel()) {
    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(all = Dp(8f))
    ) {
        Text(text = "Setup")
        Spacer(modifier = Modifier.weight(1f))
        Button(onClick = { Navigator.route.value = "progress" }, modifier = Modifier.fillMaxWidth()) { Text(text = "Register") }
    }
}

class ProgressViewModel : ViewModel() {
    init {
        Log.d(toString(), "Created")
    }

    override fun onCleared() {
        Log.d(toString(), "Cleared")
    }

    override fun toString(): String {
        return "ProgressViewModel"
    }
}

@Composable
fun ProgressScreen(model: ProgressViewModel = viewModel()) {
    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(all = Dp(8f))
    ) {
        Text(text = "Progress")
        Spacer(modifier = Modifier.weight(1f))
        Button(onClick = { Navigator.route.value = "setup" }, modifier = Modifier.fillMaxWidth()) { Text(text = "Abort") }
    }
}

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    MbiKtTheme {
        SetupScreen()
    }
}

My reality is, of course, much more complex, I did my best to simplify it all as much as possible, but this already demonstrates the problem I have:

  • Navigate between the two screens (composables) and rotate the screen
  • And observe the Created/Destroyed messages from both view models in the LogCat
  • In the first place: Destroyed is never called when navigating from one screen to another (clearly because the activity stays alive), which is totally not acceptable in large projects
  • Subsequently, as soon as you navigate at least once to the other screen (just tap the button), the view models start to be recreated with every screen rotation, which is also totally not acceptable

I know that compose is not mature yet (I have seen some components still in “alpha” release). So it may be a bug in compose itself.

Or it may be just my missunderstanding of how to use Compose in large scale and modular projects…

Any ideas?

(Just for completeness, I double checked I am using the latest currently available versions of everything.)

Website navigation through art/image – User Experience Stack Exchange

I am building my first website and it is to display my drawings. I would like users to be able to navigate to different parts of the site by clicking different parts of a image. When the cursor is not hovering over a certain portion of the image, I would like there to be no indication that is it’s purpose. I am simply looking for a link to a guide that explains how to do this or the names of some of the best tools for the job, I can take care of the rest, myself.

interaction design – How to hide main navigation?

I’m designing an application where the main nav is on the left. This is because there isn’t enough space if I put the main nav on top (to fit both the main nav and the utility nav).

So this is how the navigation looks like:

enter image description here

When the user clicks into the ‘accounts’ tab, there will be a list of accounts shown. One of the main features of the accounts page is the ability to filter accounts (by name, email, etc). So the accounts page looks like this:

enter image description here

The filtering navigation is also vertical, and I’m having trouble figuring out how to fit it on the page. One idea was to put a fly-out right nav, like this:

enter image description here

But it seems really cluttered (and potentially confusing?)

Another idea I had was to completely hide the main navigation, and allow the option to switching out the main nav to the account filtering nav, like this:

enter image description here

But it seems like bad UX to hide the main navigation.

I’ve also considered having a navigation that drops down from the top, but I don’t like the idea of having to open and close the nav every time you make changes to filtering (its a tool that is used a lot).

This is an example of how the filter looks, expanded:

enter image description here

All advice appreciated! Thank you!

navigation – Is there a way to disable the option for menu links?

For our unified Drupal platform, we require all of our sites main menu items to be a page and any sub-pages to show a path following the parent menu item. So if “About Us” (with a path of /about-us) is a top level menu item, it must be a page. And the page “History” under that will have a path of /about-us/history. “About Us” cannot be a <nolink> with History as a child. How can I prevent users from using the <nolink> option for menu links? The core link module includes in the description to the user of how to include the <nolink> option. That shows that if it supports internal and external links. Well, I don’t want to exclude one of those for menu links in general. I’m thinking I’m going to have to do a form alter, plus some type of validation, but I’m not sure what.

navigation – What are the specs for a top bar in a web application (1440px) according to Material Design?

I’m new to UX design. As a fun project, I’m designing a calendar web application while referring to Material Design. I can’t seem to find anything about the top bar specs for web apps on the Material Design Website. What is the height of this top bar (for a 1440px screen)? Is it the same as top bar navigation on a mobile app? Looking at Google Photos seems to be around 88px…

Help would be much much appreciated.

accessibility – Should keyboard focus restart at the top of the site after navigation in a single page app?

In a traditional website, the entire webpage is reloaded after a navigation event, so the user’s focus always restarts at the top of the document—in our case, that means the first Tab press would focus “Skip to Main” for users navigating via keyboard.

However, ours is a single page app, and single page apps only reload a portion of the page during navigation events. If the user is focused on an element that persists between views (e.g. a navigation element), by default, the focus will remain on that element. I’m worried this might seem strange for the focused element to persist when the view changes.

My team is trying to determine, should this focus be reset as it would be in a traditional site, or leave the focus where it is, perhaps on a navigation element that persisted between views?