Hot answers tagged

44

Why is nav-menu visible when you are scrolling up? In content focused sites and pages, the users expect to scroll down if there is an engagement. If user is not scrolling down but up, it can be accepted as "not engaged user". Providing other options for engagement is the main goal of this behavior. The same pattern can be also seen in mobile safari app. ...


18

Mobile focused design This sometimes called the scroll up bar and is a product of mobile-focused design. It is a compromise between having a fixed navigation bar that is always on screen and flowing navigation bar that is only on the top of the page. The fixed navigation bar has the downside of taking up a significant portion of the smaller mobile screen, ...


12

Many people do this because other people do this and no other reason. Their purported reason might be to give maximum space to their content while minimizing the header which they read about somewhere. I agree with you, though. Having the header expand when scrolled up is annoying. It wouldn't bother me if it waited till you got to the top before doing ...


10

If you had 20 links, it would take you longer to scan for the attachment button than it would with two links and an expansion button. They are just optimising the most common use case. You should always optimise for very common actions over rare actions. How much more common or rare they need to be is a judgement call which should be based on data and ...


8

Yes, it is confusing, as you have no visual indicator that you have finished the document. The legal issue it the real problem here. In a strict legal sense, you can not be considered to have agreed to part of a document that was hidden from you. This is like someone adding pages to the back of a page in a document that you did not know was there. It is ...


6

I do not see how the + sign has anything to do with Google+. :) It is just a matter of balancing the importantance/"commoness" of actions. By each thing you make directly visible, everything else becomes a little less visible. Google simply pushes the simplicity factor to the edge in their visuals, like always. For example, it might be faster for some to ...


6

The intent behind this functionality is to support the user's assumed intent: If the user is scrolling down, they must be reading the content -- so help them by getting the header out of the way. If they are scrolling up, they must be done reading, and are trying to get back to the navigation at the top of the page -- so help them by bringing the header ...


6

Progressive disclosure is what you want http://uxpatterns.org/affordances/progressive-disclosure/ By knowing which controls are often used and which are only rarely or almost never used, you are already done with the important part. Removing screen elements that are infrequently used reduces clutter and information complexity and makes the remaining ...


5

A common and effective technique is to make users type the action to complete it. The example below, from Podio, is a bit extreme in my opinion, but the chances of someone accidentally deleting a workspace are pretty low.


5

The requirement for running pages without CSS enabled is there to ensure that your pages make sense when the user is reading them via a non-visual device such as a screen reader. The problem here is that some screen readers do actually read what is on the screen while some read the underlying HTML. The first kind usually produce a chaotic stream of garbage ...


3

Well, they want the navigation menu to be always present so users can quickly switch through pages. The designers aim to increase pageviews and time on site. Thats why they put the sticky header. However, I found 1 A/B test where the results were not very impressive: only 11% more page views on tablets, on desktop and mobile devices there were no ...


3

Maybe quite complex, but you could detect the behavior of the user : after he/she has switched 3-4-5 times from one tab to the other, you could display something like a tooltip next to the tabs, that informs them that they can also perform that action quicker by using the CTRL + ... shortcut. You could also include in that tooltip a link to the page that ...


3

This previous UX SE question on affordances for scrolling might be helpful. Maybe you could size the line-height and the window height so that half a line of text is visible as a visual clue that there's more to read. Or provide a link to a separate page with the full terms? You'll have to ask a lawyer what's required to keep yourself from being legally ...


3

What about using the method most websites or applications use for credit card information and show the last or first few characters of the values, with the rest as blobs or stars. This could be in the placeholder attribute for a form field, or perhaps as normal text, with an edit button next to it, which swaps the text to a form field. Try this fiddle for ...


3

First of all: Do not hide features This will frustrate people and make them angry Design Approach The feature is normally accessible where you want to find it (For example Main database settings when deleting a database or Account-Settings if deleting an account) You can use a red Button and other visual clues to make clear that the decision the user needs ...


2

I've noticed several apps using this. The most popular of them is Youtube. This half hidden hamburger icon has one more advantage that has to do with a discussion about the placement of the hamburger icon. There have been questions on this website and some other places on the internet about where to place the hamburger icon, on the left or the right. A ...


2

Wow. I can't even reply to comments to my own response until I get 50 rep points? Talk about usability... @aames, all good questions. I fully understand the situation with your code base. Having worked at Salesforce in both a UX and Dev capacity, particularly around accessibility, I know what it's like dealing with legacy code and developers who don't ...


2

Andrew is exactly right (I can't comment yet, not enough rep points). The idea of CSS disabled is not meant as an actual browsing experience but to ensure that your content makes sense semantically and in the order it's presented because that's how, the better, screen readers evaluate the content. On the idea that the same group suggesting display:none is ...


2

I'm going to go ahead and suggest diminishing returns may be a reason not to force people to register. Unless there is an underlying monetary business model that you cannot get away from, and even if that is the case there are reasons for loss leading, say an answer forum, giving away the first answer and blurring subsequent searches. Back to the original ...


2

You could have options that appear with a 'right-click'. Much quicker to click than move the mouse across the screen to a specific area, hence why lots of software has controls both in the menu and under a right-click: Another example would be MS Word whereby there are certain controls that only appear after a certain action e.g. copying things into a ...


2

Affordance In the most simple terms, affordance can be seen as: The perception of something hints possible interactions. Neither in the original (affordance) nor in the corrected (perceived affordance) sense this has much to do with Don Norman's affordance. Progressive disclosure What you suggest here is a form of progressive disclosure (Lidwell, ...


2

No. These two things are similar but incompatible and comparing them isn't going to work. A game aims to challenge the player, to make things just hard enough that they feel rewarded when they overcome the obstacles, but not so frustrating that they give up. The player interacts with the game because they want to and because they enjoy the challenge or ...


2

If you're going to use a dropdown menu as part of your search bar, try looking and gmail and the way they do it for greater clarity and maybe a solution for on mobile. My gut would say to have a feature – the dropdown, inside the search bar once its tapped for a more detailed search if a regular search just wont surfice.


1

Well I guess that when you decide that you need to hide navigation (for whatever reason), you also have to find a way to show it again. This designer choose to hide navigation on multiple scroll down. And then I guess it seemed logical to show it again on scroll up. But it certainly could have been made nicer. Like to leave some kind of navigation on top ...


1

As Julien said, detecting behaviour is a good option but it also is resource intensive. keyboard shortcuts are by its nature hidden methods, mainly used by regular/power users of the system. At least two sites which I know Twitter and Gmail offer a shortcut key menu on press of ? For example, Twitter shows an overlay listing all the possible keyboard ...


1

This is an interesting problem. Technically, anything pulsing, either in size or in color, will do (Slack is using a pulsing circular macro icon to attract users' attention to certain parts of the UI), but if there are several new annotations, all pulsing in the background, it can be annoying. Location of the annotation is important. Annotation are ...


1

Why don't you try visibility:hidden <-> visibility:visible instead of display:none <-> display:block . That way there will be no scrolling of remaining questions. There will be empty space with the No option but with some styling it (probably) won't look too awkward. It may even serve as a hint that there is something more to the question than the ...


1

The "less clickable space" doesn't matter here, since it's on the edge of the screen and the user has "virtual" space to click. From "Designing mobile interfaces" (O'reilly, 2008): Buttons at the edges of screens with flat bezels may take advantage of this to use smaller target sizes. The user may place her finger so that part of the touch is on the ...


1

There are various ways that you can indicate to the user that they can scroll horizontally. If you have a collection view of tiles you can design the app so that the tile dimensions don't fit completely in the frame. e.g. 3.5 tiles can be shown with the 4th tile partially visible. Another option is to display page/scroll indicators at the bottom of the ...


1

It's seems to be inspired by a Mobile UX where the UI streamlined to what is essential. I think it's a great example of UX patterns convergence.



Only top voted, non community-wiki answers of a minimum length are eligible