Is there a current method of indicating to users that a link won't take them off site? - user-experience

It's currently impossible for a user to tell if clicking on something will load something in their current page or take them to a new page. I feel that this is why many sites use hoverable dropdown menus, so that they don't have to click anything. This can be messy, though, if you don't intentionally hover over something and forms the habit of hovering over things and expecting a result.
There should be a standard way to identify links as external or internal. Maybe a little hover effect or symbol used in the link?
Is there anything like this, and if not, should there be?


I believe by "internal" you mean that the link does some javascript thing, and does not load a new page.
I think an effective way to indicate an immediate action is by using a button style, rather than a standard looking link. A blue underlined link somehow seems much more likely to jump to a new page than something that looks like a button.
Give the button an appropriate label and/or symbol that indicates an instant action. For example, a button that expands a section open might use a little triangle that rotates as the expanding happens.
You can also establish a consistent style for "internal" actions, use a particular color or style for links that don't take the user to a new page. Sometimes I use blue for normal links and a shade of purple for internal ones.
In general, I find it isn't that important to specify. If a user sees a link or button that like it will get them what they want, they will click it. It is up to you as the designer of the website to decide if the most appropriate action is a new page, or an action on the current page. Unless the user is going to lose some work they have done, going to a new page shouldn't be a problem. If it really took the user by surprise, they can always go back. In my experience, users don't worry about it either way.

Related

Hiding the Hamburger while in shell using template10

Sorry if my query's a bit noobish, a uwp beginner here.
I'm trying to morph the hamburger template from template10 and an existing project of mine. Basically, I'd like to have a certain page with the hamburger menu being invisible, and display my own navigation buttons on the page (an intro page). Upon navigation away to any other page the menu will be visible again.
I tried changing Hamburger's visibility state as an experiment, but it seems to be affecting the content as well. Is what I'm talking about possible with this control and I'm missing something obvious? Or I'd have to manage shell usage in app.xaml and load my intro page without the shell?
Many thanks for the creation of the t10 btw (Jerry, Daren and everyone else), me being confused in this thing doesn't at all diminish my appreciation

There are a few options for you here. IsPaneOpen will only work for you depending on the DisplayMode you choose. But if I were to guess, it's HamburgerMenu,.IsFullScreen that you are really wanting to use here.

You can change the SplitView mode to Inline and set IsPaneOpen to false. That will hide the Pane.

How to create a user-impaired accessible website: surfing without a mouse?

I have created a webpage using Backbone.js and Marionette.js that mostly consists of a bootstrap accordion view that displays a list of items when the accordion header is clicked. Each item can also be clicked, which will show a hidden div of detailed information that pertains to that particular item.
I would like to make this site accessible to people who might not be using a mouse (Maybe they're visually impaired and using a screen reader? Maybe they just don't like clicking things? Either way.) I'm thinking that this would mean being able to press the Tab key to get to the accordion, pressing Space or Enter to open the accordion, Tabbing down (or down arrow key?) through the list items, and then using Space or Enter to show the selected item's hidden div.
I'm finding it difficult to find information on how to add a feature like this, since searches like "How to make an accessible website that can be used without a mouse" mostly turns up blogs on what a developer should do to add accessibility to a page, and not much on how to do it.
Currently, the page doesn't really respond to any keyboard buttons. Any tips or resources you could share would be extremely appreciated. I've been fiddling with ARIA role tags, but I'm either not doing it right or it's not the answer here.

You have to use tabindex
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.tabIndex
Screen readers automatically read whatever element is the activeElement

Custom Magnific Popup Arrows

So this is going to be kinda silly, but I don't like the arrows for Magnific Popup, and I want to use some png arrows that I created, even moreso I don't want them the default way where they are miles apart, and I don't want them to obstruct content (cause I am using Magnific Popup to gallery some ajax). I really want them bound in div/big square buttons on the side of the image (the height of the image as well) like the first example here:
and those big black bars on a tv
I have no idea where the code is to change this, or how to edit the basic construction of the lightbox but I really want to change the arrows (and the x) if someone could direct me to the code where I can do this I will be glad to do it but I feel like I am working blind.
Alternatively, if anyone knows any other lightboxes that allow you to position and design your own arrows and close button, and have a gallery of ajax based items (that is responsive and scrolls) I will gladly switch (I basically want to be behance ha ha)
(also is there anyway we can generate a swipe effect to go through a gallery?)
Feel free to tell me to go to hell if it is impossible :D
Thanks.

How to remove whole Site Actions menu for specific users?

I have been doing research, and I havent found a way to remove the WHOLE site actions menu for "non-content editors" in sharepoint. I have researched this:
<SharePoint:SPSecurityTrimmedControl ID="SPSecurityTrimmedControl2" runat="server" PermissionsString="ManageSubwebs">
but this only hides certain links in the site actions menu, what if I want to hide the whole thing so you cant even see 'site actions' in the upper left hand corner of the page for certain users. The content editors should be able to see this menu, but non-content editors should not be able to see this menu at all.

Try changing PermissionsString to "ManageWeb"... it will hide for all users who doesn't have ManageWeb role... How are you going to categorize "certain users" in your question, if it is by role, you can quickly have a look at msdn

i know its a bit of a cheat way round, but i used this from codeplex... you can sepecify what users see it through groups http://spribbonvisibility.codeplex.com/
the only issue is it does remove the users name from top right, and leaves no menu there...

What is the best way to layout/design a long complex web form to collect user input

I need to design a web form which landlords can use to add rental listings. There are 8 mandatory text boxes and 2 optional text boxes, 11 drop-down lists, 12 checkboxes and one large text area. Any suggestions about how to arrange them in a way that is clean, and uncluttered? My concern is, if the form looks lengthy, they may not want to fill it. So far I have divided the elements on the page into sections, however the page still looks cluttered.

I would suggest that you use 2 pages instead of 1. On the first page, show the 8 mandatory text boxes and follow them with an additional checkbox which makes the 2 optional text boxes appear on being clicked. This means that the user will opt-in for the optional checkboxes making it more acceptable and natural to her. Next, place a submit button which would take the user to the second page.
Put all the 12 checkoxes and the text area on the second page. On page 2, tell the users very clearly that this is the last page they need to fill. They will be less disinclined now since all they need to do is to place a few more clicks.

You may want to split the process of getting all of this data from the user into multiple parts. Conventionally, that would be multiple pages of forms. The problem with that is that it's annoying for the user to have to watch their browser reload the whole page as they move through the form.
A more popular methodology now is to use AJAX to present the larger form in multiple pieces without having to reload the entire page.
In both cases you will need to keep state between each page load or AJAX request so that the back button behaves sanely and the user's previous input reappears as they move backwards (and forwards) through the form.
Unless you have some kind of nifty state-keeping mechanism already written that is generic enough to work for any given form set you may decide to use, welcome to the pain in the ass that is web development.

How about a wizard-style layout?
Break the sections out into separate pages, so components are submitted separately. Make it clear how many sections there are, and how far through the form the user is. Be careful to track the user's progress either in the session, or by keeping state in the form.
This approach makes giving error messages a bit less threatening to users (you never show them the error message "Please correct the following 34 errors").
Edit: Having seen the current form layout, I actually think what you've got at present is very clear, and nicely done.

Do submitters have account profiles that you can use to populate the contact details? If so, I would drop the contact details from the form for creating a listing, and add a review screen that shows all of the information, and gives links for specifying alternative contact details or amending other information. Users then see one screen, plus a review screen with a big "Publish This Listing" button. Amazon's order process uses a good review screen.

Breaking the input into multiple sections is a good idea.
I also like to make most of the input fields invisible, and make them visible as more information is entered. I start with the most important info to be entered first (e.g., name), and as each item is entered, I make further input fields visible. I also give focus to the next logical field that the user is expected to enter as he goes along.
You can use other tricks like highlighting the next field to enter (i.e., changing the background color or surrounding borders of the input field label) to make it even more obvious to the user.
Grouping related fields into separate boxes (with visible borders) may make the info seem less cluttered, too.
This approach makes it look less overwhelming to the user, and makes it more obvious to him what he needs to enter, from start to finish.

Frankly, 33 fields on a single page does not sound all that long for describing a rental listing, especially when 23 of the fields (checkboxes and dropdowns) can default to the most common values. With your current layout, the form almost all fits above the fold. That ain’t bad.
I’d be very cautious about splitting it into separate pages (e.g., as a wizard). First of all, that will take the user longer, because now you’re adding navigation and re-orientation time. Second of all, it will seem to take longer; the user will be like, “Geez, I have fill out a multi-page form?” Thirdly, users can’t tell how much work is expected of them when some of it is hidden on other pages (or by AJAX tricks). Some will not fill out the form at all assuming the worse. Others will abandon it part-way through because they either didn’t plan enough time for it, or just got tired of hitting Next indefinitely. You can mitigate this last problem by saying up front how many pages there are, and showing the user’s progress through them, but that just accentuates the fact that it’s multi-page, and therefore “long.”
IMO, all it needs is some lighter graphic design. I’d drop the “reverse video” section titles and the green background on alternating sections and make it all white. Use color and/or bold text for the section titles. You can combine the Property Description section label with the field label to reduce clutter and redundancy. Consider putting the Pets and Parking fields on the same line as Laundry then spreading the Unit Details fields out vertically so the mis-alignment of the fields is not so noticeable. Alternatively, size the Unit Detail fields so that they are better aligned. Maybe you can drop the “How do you want to be contacted?” field. I’d expect that if users don’t want to be contacted by one of the means, they simply don’t fill out that field.
Other than that, be sure your users understand the importance of these fields –why filling them out helps them find the right renters. Users don’t mind filling out a lot of fields if it’s clear that each benefits them. It’s when users feel like they're disclosing a lot of data to benefit you that they get resentful and reluctant. The importance of the fields you have seems self-evident to me, but maybe you should include a link that explains the purpose and value of the fields.
Finally, make sure there’s not too much clutter and competition from the “standard” page elements (e.g., sidebar menus, legal information).

Resources