Hot answers tagged

44

My first suggestion is to separate your destructive actions from the constructive actions. As a user can accidentally click the wrong icon due to a visual error, they can accidentally click the wrong icon just because their mouse was not exactly where they thought it was. Keep the actions that are destructive and can cause panic (such as accidentally ...


23

There are a couple of reasons: If there is a generally accepted icon for that feature. Examples, save, cut, copy etc. If the feature is borrowed from another application which has an app-icon. For example, sharing on facebook can use the Facebook icon. Context of use, if a lot of the similar icons are displayed together, the icons will lose their purpose. ...


22

I don't think there's an "official" methodology for this, but I've noticed a pattern across a number of programs. Many programs - especially IDEs - have a number of commands that can be accessed both through drop-down menus and through toolbar buttons. An icon is required for a toolbar button, and the same icon is usually used for that command in the drop-...


20

Simple answer: When you want that information/functionality to be visible/accessible at all times and the page has a long scrolling content. Screen space is a resource to be used wisely. One, because usually you have more information than can fit in one screen, and, two, everything that is on the screen imposes a cognitive load on the user. So you just have ...


16

The straightforward answer to this is: it depends. But compared to the sticky bar, it is hard to fail the pit bar. Terminology Static bar - is a (navigation) bar that scrolls with the rest of the page. Sticky bar - is a bar that sticks to the top of the view and is always visible. AKA fixed bar (Bootstrap terminology) or absolute bar (CSS). Pit bar - ...


14

Consider doing away with the Remove All icon altogether and ensuring that there's a Select All function. That way a user's intent to Remove All is actioned using the same tools they use to action Remove Some and Remove One.


12

There's a third option similar to the one used on this page: the message tray icon that is only activated when it has some content with the corresponding number. Advantage: The message tray can contain any type of message or alert: not just a type but any It doesn't disappear when there is no any alert, it simply occupies the same place, it's a way of ...


11

To my knowledge it was not a design issue but a technical one in win 95. The taskbar should be at the top, but many of the win 3.1 app use absolute positioning on screen. And the top left 0,0 used to be in application "space" in win 3.1. There was too many issues with a taskbar at the top. It was decided to put it at the bottom to lower bugs. Nowadays every ...


9

Both! Since you're not opening Excel as a software, you're making an Excel formatted file. But if this was a general action as optional exporting to a number of different output formats looking like "Export to [Excel|Text|Access|SharePoint]", I'd use just an export-icon since the next dialogue would let me make a choice of which output format to use for my ...


9

If you want to follow Apple's Human Interface Guidelines then you have to think of another pattern, because last year they announced that hamburger menus are not a welcomed sight in iOS applications: And again, I’m not going to say that there’s no place for these controls categorically. I think there are some apps that could maybe use one. But I will say ...


8

Keeping it as far away from where applications have their menu makes a clear distinction to the user that each is for controlling something very different. Applications are controlled by menus at the top, the system is controlled by menus at the bottom. Mac has also experimented with this dual concept. For instance the application dock is at the bottom, ...


8

Learn, don’t justify Here's your problem: How can i justify my assumption Don't justify it — test it. User experience is about discovering the answer, not enforcing it through academic stubbornness. What if the alternative performs better for some reason you didn't foresee. Users are a complex animal. I suspect your resistance to change is ...


7

I'd recommend to think of the different interaction. Currently your interaction model is "verb-noun", where "verb" is an action upon some object, which is called "noun". First user pick "verb" then apply it to the "noun". There is other interaction model, "noun-verb". It means user picks object first then selects available actions on it. These interaction ...


7

I think you'd be surprised how smart users are, most of them are able to quickly distinguish native controls from web controls. That being said, as long as you don't deliberately try to make your controls look like part of the browser you should be ok (this is an anti-pattern that malware often uses to imitate system controls). In the Facebook and BBC ...


6

I found the answer. It's a "Smart App Banner" https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/PromotingAppswithAppBanners/PromotingAppswithAppBanners.html


6

One problem with your first example is in deciding which message to summarize. In your example, there appear to be two messages (one informative: there's an update available; one error/warning: connection issue). By showing an summary of the informative message, you are actively hiding the presence of the warning message (the user might not want to update ...


5

You can try showing a confirmation question like "Are you sure you want to delete ALL the items?" and the answers "Yes, delete ALL", "No".


5

Fixed/Floating header: It always shows navigation no matter what height a page has. As a social engaging site, FB always wants users to engage with deep ocean of information and a quick cue to return any time from any location It also help user in terms of usability,accessibility and aesthetically. SO site doesn't have it but they might incorporate it in ...


5

Complexity is a relative term. It depends on the context of the user and the tasks they are trying to complete using your interface. For example, the instrument panel of a Cessna 182 will look very complex to a non-pilot: Similarly, the instrument panel of a Boeing 787 will look very complex to a private pilot that has only ever flown a 182: The question ...


5

Users just don't need to do anything to hide the control bar. As there is no reason to move the cursor until users want to interact with the controls, BY using Progressive Disclosure technique MS teams automatically hide for us to give a complete view of a video if the user is not moving their mouse. Here persistence UI trains user mind to look for ...


4

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 ...


4

My answer refer to the icon only, not other stuff for the prevention of mistake. It seems that your trash cans are too close to each other. Search for the 'save all' icon, you'll find the floppy disks are much more distant from each other.


4

System "tray" is a place for system notifications. Though some applications may notify you (on new email or new instant message) and you can click on this notification to quickly respond to it (read, answer), it is definitely not the place where you should look for application to start a new task (for example, to compose new email). Even Windows guides warn ...


4

The best implementation of this that I have seen is from OkCupid. When searching for matches, there are a number of filters that can be added (via the advanced tab), which you only see once you have chosen them. The two bottom ones are examples of advanced filters, and can be removed by selecting the 'x'. This has been tried and tested on millions of ...


4

The decision to use sticky navigation should be based on the primary activities of the user. If the user is likely to use the navigation quite a bit then it may make sense to accept some of the tradeoffs mentioned by @obelia. With SE, for instance, the primary activity might be to read and respond to questions. Most of that happens within the context of a ...


4

It's a close call, good question. You have to choose between supporting the primary task (writing) by not distracting attention using monochrome icons and making the secondary task (format text) easier to search. In my opinion, it's easier to visually search between colorful icons and choose your formatiing option. However, it deemphasizes the primary ...


3

A sticky bar has the advantage of always being visible. It has the disadvantage of always taking up part of the viewport and leaving less area for the content. This isn't much of an issue on a large desktop screen, but on a smaller phone screen can be problematic. Another disadvantage of a sticky bar on the top is that when one pages down, the reduced ...


3

What decides whether a top bar should be fixed? Three considerations which are important. How tall will the bar be? A stationary bar which is only 20 pixels high is much less likely to be bothersome than one which is 200 high - regardless of what is shown on it or whether it's useful. Many users have smaller resolution screens than developers, this causes ...


3

This is purely a matter of visual cognition - if the visual design makes it easy to group related elements, there is no problem putting anything anywhere, including buttons on a tab space. So long users can interpret the tabs as tabs and buttons (or other elements) as such, there shouldn't be a problem. In the top example, the distinction is fairly clear - ...


3

Select then act Spreadsheets lend themselves to selecting the area to act upon then editing or choosing your action. In the case of tagging cells or ranges, as a user I would expect to select my range then apply the tag, not the other way around. There are likely some actions that blur the lines (eg cetain types of large area formatting), but those cases ...


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