We are designing a web site and have run into some UI challenges that would be neatly solved with a tabbed interface. Users will interact with different elements of the site (there are some basic view/edit/copy/paste functions available) and having only one object in one tab visible at a time simplifies things quite a bit.
We are, of course, completely comfortable with tabbed interfaces but what about novice users? I've searched the web for guidance and I haven't found anything definitive. Do you have experience presenting a tabbed interface to novice users and did they have trouble with it? Or, have we reached the point where everyone is comfortable with tabs and we can use them without reservation?
Usability is important-- more so for this project than most. If naive users are confused by a tabbed interface it just won't work and we'll have to find another way.
In his excellent book "Don't Make Me Think" (Sensible.com), Steve Krug discusses the benefits of using a tabbed interface:
They're self evident
They're hard to miss
They're slick
They suggest a physical space
He goes on to describe the keys to successful tabs as demonstrated by Amazon.com:
They were drawn correctly
They were color coded
There was a tab selected when you enter the site.
Obviously, he provides details to each of these bullet items in the book (I won't plagerize him here). The book is definitely worth a look if you want guidelines for creating web sites for novices and experts alike.
Tabs are becoming common place enough that I wouldn't worry about using them, as long as you implement them correctly. Make sure that you make the active tab visually distinct from the other tabs.
Also, try to create the tabs using progressive enhancement so that the content is still there with JavaScript disabled. There are two main ways of doing this:
Load every tab but the first using
AJAX. The tabs themselves should be
links to the content that the AJAX
fetches.
Keep all of your information on the
page, but hide it using JavaScript.
When you cycle through the tabs,
they are populated from the hidden
parts of the page.
A design resource you might find helpful is the YUI Design Pattern Library and their section on tabs.
I think as long as the tabs are visible as such it's understandable by the user. I have seen websites where they present a vertical bar with links that act like tabs but it's not immediately visible to the user and found that very confusing.
I would have to disagree with those are in favor of tabs. In a design test we did for a fairly high-traffic website (over 1mil uniques at the time), we found that tabs have not been used. Tabs were clearly marked, located to the right of the main content area. Based on that experience I would suggest either finding an alternative or, as staticscan suggested run usability tests to figure out which ones work.
Don't think you can decide a-priori what is usable and what isn't. Do usability testing
"It takes only five users to uncover 80 percent of high-level usability problems" Jakob Nielsen
Google usability testing and start learning. It's not hard.
I tend to agree with lothar and ricebowl - people seem pretty familiar with it these days. The most important thing with any GUI element is clarity - the user must innately know what will happen when they press something (they know that clicking an inactive tab will make it active); and in navigation - it must be very clear exactly which tab they are currently on. As lothar said, if it's not immediately visible to the user, it's very confusing. If you address those issues, then it should be fine.
Just wanted to note SmashingMagazine has a new article showcasing tabs: Showcase of Tabs
I think people are used to the metaphor (from binders, or card-indexes and so forth) of tabs. Especially those that use the web for any length of time. I think that, if IE's adopted a metaphor, it implies a common familiarity with that metaphor.
So, no, I'd suggest that they're not confusing and suggest that you go for it. Just, maybe, post a welcome/first-time introduction (or a prominent 'help' link to such an intro) to the use of the tabs.
I've been a developer for an intranet app that used a tabbed interface, generated with HTML and controlled by JavaScript. This was way before IE7 and Firefox. In fact, it was a bit of a novelty on websites in general, too.
Fortunately, a previous developer had discovered that if you made it look like a dialog box - even down to using a grey background, then people usually understood the metaphor. We also loaded all the content for all the tabs in the initial page-load, and had the Save/Cancel buttons outside the tabbed structure. Because of this, most people immediately understood that they could move between tabs (we used JavaScript to hide and show the DIVs) and a Save would save changes to all of them.
If you want to deviate from such an obvious metaphor, then you need to do some usability studies.
A well implemented Tab interface should not confuse users.
In line with what others have said one of the most ipmortant things to consider with Tabs, or any other navigation interface is for it to be obvious where they currently are in the navigation scheme.
Another important point is not to break the browser! Many AJAX or javascript implemtations break the back button. This is a minor annoyance to some and a major inconvieniece to others. Make sure to consider your target audience here.
Personaly I prefer the oldschool method of not preloading all of the tabs but having each tab as its own page and using a templating methodology to manage the navigation interface, be it tabbled or otherwise. This maintains the browser history and works fine with or without javascipt.
Tabs, etc are just tools. How we decide to lay them out and use them is what determines their effectiveness.
What I try to keep in mind is:
1) Keep it close. The things we use the most should be on the front or up close to the top as much as possible and bury the rest based on how often they are used/adjusted.
2) Easy enough for Mom to use. All interfaces are confusing if they are not laid out in a clear and logical manner.
3) Organize how it's used, not how you think it makes sense.* I often use tabs to break up steps in a process, or to break up areas such as basic / advanced options. I group them based on similarity or usage depending on what works better
4) Keep them few Either way I try to stay below the 7-10 range tops as the human brain has a hard time jumping beyond 7-10 digits, so I assume the same for pieces of information. Vertical Accordians might be something you want to look into as well.
I have also embedded tabs within tabs before. Works well but only one layer deep most of the time.
Related
Let's say I have a static website which I try to make accessible.
To this end, I include a "Skip to main content" link at the top.
I also want people to know what they're getting into, so I have a disclaimer message at the top.
The disclaimer message includes a JS-driven "hide" button, but this is not accessible (or visible) to users without JS.
Which do I put first, the link to #main, or the disclaimer message?
(goal 1) I want someone who is a new visitor to the site, with JS disabled, using TTS, to see the disclaimer first.
(goal 2) But if they've been before, It probably won't be helpful for them to hear the disclaimer every time they open a new page.
Is it possible to accomplish both goals?
If it wasn't static, and included a server-side element, I could have the {hide} link be server-side cookie-based, but that is not the case.
Edit: There was a comment, which I now regret flagging, saying that "99.999999% of users" (a statistic I question) have JS enabled, implying that the other 0.000001% do not matter. I disagree with this assessment, because I strongly believe in my goal of accessibility to all 100% of users visiting my site. While perhaps it is never attainable, I will not stop trying.
Is it possible to accomplish both goals?
Since it sounds like the only tools available to you in this case are HTML and CSS, I would say no, it's not. So with that in mind…
I would add the skip link first. You could place the disclaimer between your skip link and your navigation. Though your disclaimer would be repeated on every page, it'd be no different than a nav bar at the top of your page that the user would have to listen to every time – that's why you have the skip link in the first place.
TTS users should be plenty aware that they may be missing important information if they click that link. I'm no legal expert, but I'd be willing to bet that you (or your company) are not going to be suddenly liable for damages because the disclaimer was not the literal first thing a TTS user hears when entering your website.
with JS disabled, using TTS,
100,1% (*) of users using text-to-speech do use Javascript. This includes blind people, people with vision loss, people with cognitive disorders, illiterate people or non native speakers, ...
Also note that, among them, a large part of people with disabilities will view (visually) your webpage. The "skip link" is also useful for people with physical disabilities when mouse navigation is complicated (parkinson disease, hemiplegia, ...).
The other ones (blind people) relying only on audio will not view your webpage visually but will still use a javascript compliant screenreader (Jaws, NVDA, Chromevox, VoiceOver, ...).
For instance, you can see WebAim survey where JavaScript was enabled in the browsers of 100% of respondents.
(*) The 0,1% extra is because Javascript can help improving accessibility.
I know there are several tools available to find unused CSS on a static web page. But in most real world scenarios I encounter, a lot of the CSS is used after some or the other interaction on the page, maybe a new modal opening up or an options popup etc.
In such scenarios, what would you suggest? How do I keep a tab on my ever-growing render blocking CSS?
The only way I guess one could do that is by running regular unused-css-detector type tools in conjunction with Selenium - test known interactions and see whats left unused. But a big assumption here is that I'd need to know all interactions on my page which could use new CSS. Is there a way to achieve my goal without making this assumption?
In an ideal world, I'd be able to post-back all CSS used by a visitor's browser on my page to my server. Then I'd collect data over a month, aggregate, and get a pretty accurate idea about actual unused CSS.
Any good ideas?
I am the author of a tool that is aiming at doing what you are describing. Everywhere I worked, the CSS is this "append-only" thing that is too risky, too time-consuming to clean up. And even when you try, the ROI is so low that it not worth it.
So I am working on a tool that is very similar to what you are describing. The goal is to bring confidence on what can be removed, and to actually do it automatically by submitting pull requests.
A snippet of JavaScript is running in the browser and sends reports of what is being used to a server. Once enough data is accumulated to build some "confidence score", it can create Pull Request automatically to remove selectors that are actually not used.
It is still very early stage, but you are welcome to try it and give some feedback about it.
https://www.bleachcss.com/
I like them more and wonder why they are not more common. Explanations involving caching or SEO make sense to me, but I don't see them as directly driven by user experience considerations. In which way are traditional sites with page reloads better for the user?
Personally I think the best argument for normal page reloads from a user's perspective is that when you do that it's much harder to break many basic browser functions. In general the back/forward buttons work, bookmarking works, copying and pasting links works, history works, page titles work, getting an error page when a server call fails works, everything just works as expected. For free.
I have seen single page application implemented in a way that breaks one or more of the above more times than I can count.
It's naturally not a problem if you get it just right (and then it will in general be nicer to use), but not all sites do.
Just as an example here's a screenshot how a site that is a SPA and justifiedly so (they have a music player that you don't want to interrupt with page loads), broke a basic browser function in a way they might not even have thought of. I was trying to find a song I recently listened to but couldn't remember the exact title... but because of the SPAness the page titles weren't properly reflected in my browser history.
I'm thinking of using a tree view for page navigation in my web application, similar to Windows Explorer. There are a lot of things for administrators to configure in the application so I figured listing all links in a single page in tree form would keep things organized. Related page links are grouped in a "folder", and all folders will show closed initially.
Obviously, this page is for administrators only, so they'd be provided with some training. That being said, is this a good design from user's point of view? Do you see any usability or potential implementation issues?
The best answer involves empirical evidence. A yes or no answer could really vary based on the specific task and your intended audience. Try doing a simple 5 minute usability test with your users. Draw out your page layouts on paper and have a couple of users pretend to use the site (see Paper Protyping). Give them a few simple tasks to complete using your interface and observe what they do.
If they get confused or have trouble with the concept, then it's probably best to find another way to provide navigation.
It totally depends on how your users are using your site. If they're often jumping from one part of the site to a completely different, unrelated place in the site, a tree may be the best way to let them quickly find that "other page" they were looking for.
However, for the vast majority of websites I've ever seen or used, I'd prefer to find what I'm looking for either via Search functionality, or by links on the page I'm looking at that lead me to related data.
What are pros and cons of this technique (see Softfolio for an example). Two things I personally thought of are as follows:
Impossible to tell someone where an item of interest is located (like, you probably won't say "324-th row, second column")
Broken navigation when you return back to an infinitely scrolled page.
What else can you think of? And what do you personally think of this approach in general. Would you use this in you projects?
I think it is "neat" but requires more visual clues as to what is going on... and in many circumstances isn't what the user wants.
If I want to get to "page 7 of the results" I don't want to move to the end of the page 6 times to trigger the reload of additional data. (e.g. in an alphabetical list... If I want "M"'s, don't make me wade through a,b,c,d,e,f,g,h,i,j,k,l
Ensure there is a visual clue of more loading if you do use this (when I press CTRL+END I expect to be at the bottom)
I often find I'm still waiting on these types of pages because the "loading" of the next set of results waits until I'm very near the bottom... thus I often get there before the data is loaded/ready/rendered
(pro) I think this kind of thing would be good for certain scenarios... e.g. when I scroll down my Twitter list... I don't want a "more" button, just load it...
I would prefer better "search" filtering over fancy ajax-infinite scroll results. If I can filter down to 25 results that actually match what I want, then I won't need to scroll!
When results are served randomly, it's a great idea. People are asking, "How do I get back to where I was?". Well, you don't. The results are random, so when you return to page six, you won't be seeing what you did last time.
If you think about it, paging Sortfolio would be a bad idea, because it would imply to its users that the order of its listings are fixed, as many of you have made the mistake of assuming.
For those asking, "How can I return to a result I liked?", well, you click the 'Save to my favorites' link. As for, "How can I share a result with a friend?", you click on the result and grab its URL. Kinda simple really.
I'm not saying this infinity-scrolling business is the way to do it, I'm just saying that some of you guys are unfairly discrediting Sortfolio for usability problems which the site—given its random nature—really needn't concern itself with.
Personally I HATE that example. It makes the site much less usable than if the results were paged.
You're right too, when you hit back, you will have to page by scrolling down again, and while page down works it doesnt work well - I cant remember how many page downs i pressed to get to the site, secondly, what if the ordering changes the number of scrolls would differ anyway - I know paging would too, however its much easier to scan a few pages than keep scrolling.
Lastly, even though I am a developer I scrolled down, and the first few times I actually thought maybe if i leave it long enough it will download all the images/samples...then scrolled down and again the same thing happened AAAAAARG!
I would NEVER use this approach in projects.
I wouldn't use infinite scroll on search results. But it's really nice for casual browsing, or in a random output situation such as psychological test where it's important that items not show up in a constant order. Something like a market preference survey skews towards early choices, so randomizing the order of options is essential.
Where it gets frustrating is when the user leaves a page via a link and then wants to come back. For a browsing situation, I'd probably address that with overlays rather than linking away.
I personally find it gimicky and quite annoying. It diverges from standard navigation techniques that users are used to (such as pagination) and breaks navigating back, which is very annoying (you can't get back to a result without starting again). On top of that it doesn't conform to accessibility guidelines as it is totally reliant on JavaScript to work (which goes against the "progressive enhancement" theory of the modern web). This also has SEO implications as I doubt content "beyond the fold" would be indexed, unless it was linked to directly from elsewhere.
I can see a few limited circumstances where this might be OK, such as a very long text page, but personally I doubt I'd use it in the current form. Kind of reminds me of those Flash sites that are all style and no substance and end up annoying the user rather than enhancing their experience.
I agree this is a mess. If there is a finite list, there should be some kind of pagination mechanism that lets you know where you are.
Alternatively, or in addition, add a filtering mechanism so you can weed out the stuff you don't want to see.
SO provides a handy example of how to do it right.
Actually, It doesn't matter whether we (designers/developers) like it or not. The only thing that matters is the users perception of this. If the user finds it useful, well, then the solution is OK. If the user gets confused and can't accomplish the primary task, then redesign...
I think the cons are that when you hit the back button you lose your place on the page. Could be annoying especially if you are deep within a page.
Etsy discovered the hard way that infinite scroll isn't good for conversions. Recommend reading this article.