Tag Info

Hot answers tagged

48

The visual appeal of those sites is undeniable. However, they have serious problems in terms of usability: All control is taken away from the user. All of these sites force everyone to view a multi-page glossy ad, whether they want to or not. What if I just want to buy your product? What if I want to quickly get your contact information? Forget about ...


22

Which relationship do you want to emphasize? Use that to inform your decision. The down arrow in your image indicates a relationship of "is title of" or "is detailed by" or even "has child", whereas the up arrow indicates a relationship of "is detail of" or "has title" or even "has parent". I suspect the down arrow is more common and thus familiar to more ...


20

Adding to Will's answer, if you're looking for a non directional highlight, here is a great example from Google's material Design Material design guidelines on using Tabs The tab corresponding to the visible content is highlighted. Tabs are grouped together and the group of tabs are in turn connected with their content. Keeping tabs adjacent ...


14

How about this for a starting point for discussion? It's still table-based, but I think it communicates the ideas you're trying to get across. Have a think about some more challenging scenarios and let me know if you think something like this has legs. I'd be happy to evolve the idea with you.


14

This design loses all novelty the instant you realize it's a slideshow. However, as a slideshow, it wins in these areas: having a single direction to swipe/scroll makes it easier to figure out "where do I go from here" than something like Prezi (where the "next" direction can be anywhere, even into/out of the page) a smooth transition from one page to the ...


12

My recommendation would be for option A as you are providing a visual indicator from the tab text to the content below stating that this is the highlighted tab and the related content for it is below as shown in the screenshot below This will hold good even if you move on to the other tabs as the users will scan the content from left to right and with the ...


12

I was going to post some answer about the user being too hasty or inept at using websites but after looking at your website I would like to gently point out some observations: Home-page posts appear mashed together and it takes more cognitive load than I am willing to spend in order to understand it. It also looks like there is some important info in some ...


11

They both look wrong and unecessary. For a tabbed interface the colour of the tab should be the colour of the selected page.


8

This is a very common problem. Many companies and other large organizations that offer a lot of support solve this by essentially requiring you to go through FAQ-like content before they even provide you with any way to contact them directly. Some take this to such lengths that it is very annoying for those of us who actually have a question not answered ...


7

If you are going to use a skeuomorph you should avoid unnecessary and baroque decoration Here's some originals from my current desktop (the wooden one) to help us understand what it is we are trying to represent to the user: Arrows don't add anything to this visual metaphor, they only serve to distract and confuse. As an example of this deleterious ...


6

Interface design, historically, was based on physical things from the real world in order to increase familiarity for the user, and hence trivially communicate how the interface should be expected to work through analogy. This is why we call things like "folder", "desktop", etc, by those names. In a tabbed interface, the analogy is to a folder with tabs, ...


5

Option B is breaking the horizontal line between tabs and content. #it just feels unpleasant. Option A is a complete menu plus an arrow dictating the flow direction telling you to read the content, feels good. Maybe try another option C without arrows, but A is good.


5

dan1111 has pointed out potential issues with this design, but I think that it's quite a robust idea if executed correctly. Case example is the Mac Pro introductory website. This garnered a lot of attention when it came out, providing a good way to introduce users to the new product. Things they did well: 1. It looks great Black backing, appropriate font ...


3

My rule of thumb is to use custom dialogs whenever possible. Lately, I've been using jQuery's modal dialog for this, but that's just because we're already using jQuery on our current project. This allows you to customize the look and feel to match the rest of your site. It also allows you to modify button text appropriately. For example, with the OS dialog, ...


3

What @JonW is saying is key here. You should always have your content in mind when designing a UI, therefore if the names are long, you most definitely should have a long field instead of a short one to accommodate them. That being said, and assuming you have already thought about this and your current situation impedes you from doing so, I found that the ...


3

Present the risk/event relationship as a two-dimensional table You have presented the problem as one of cross-reference, therefore you should solve it by presenting the data in a cross-reference format. A simple table with descriptors of each event and risk will directly connect the two for your users. Checkmarks or some other indicator token can indicate ...


3

This is known as a Dark Pattern; a user interface designed to trick people. From the DarkPatterns.org website: A Dark Pattern is a type of user interface that appears to have been carefully crafted to trick users into doing things, such as buying insurance with their purchase or signing up for recurring bills. In this particular case you are confirming ...


3

You could dynamically show related questions from the FAQ when the user types in the contact form (this assumes you have a contact form instead of telling the users to send an email directly). You probably need to implement some sort of fuzzy search or look for certain keywords for this to work effectively. Stack Exchange does a similar thing in the Ask ...


2

A "down" arrow points to the headline, which directs a user's eyes and attention to follow it toward the text below. If your goal is to get them to read the text, that's a good visual cue. The "up" arrow has the opposite effect, pulling the reader's eye back to the nav bar. Option 2 has me constantly going back to read "Item" instead of the headline or ...


2

I do not comprehend why zooming is suppressed. The whole purpose of zooming is to read what is on the site. If our eyes cannot read small print we need to zoom to prevent severe eyestrain. If it is suppressed to make sure we see the ads - keep in mind that we will not bother using the site at all if the print is too small. Also, why are so many people ...


2

Tabular data is traditionally difficult to read this becomes even more of an issue when additional layers of complecity are added in. I would suggest to look at the basic information you would like to convey and move away from tabular data (if your design efforts are not constrained of course) Based on my undertanding the main building blocks are : A- ...


2

As JonW rightly pointed out, trying to define the fold is going to be a challenge with the surfeit of devices out there and you would be stuck trying to fit in as much content in a relatively small space (irrespective of the fold dimensions you choose). You could make a strong case that your form page design is like a single page design which basically ...


2

I get a lot of "above the fold" with a fairly arbitrary minimum height in my workplace as well (ours is based on the screen height of company-distributed laptops). What we've gotten away with arguing is, as long as the key element (form in this case) appears partially on the page, it will be obvious to the user that they need to scroll to see the full ...


2

Long-Page Scrolling Design The paucity of answers show that the industry hasn't settled on a term yet, but my personal preference is Long-Page Scrolling Design. This has been around for at at least a couple of years, being identified as a trend by Usability101.net as early as June 2012. What could conceivably have started out as a way to facilitate super ...


2

This is not a good choice to offer the user. A few problems: The user might change their mind about whether they want to share it, but they will be locked into a choice. The user has to remember what setting they chose. If they forget and accidentally share a non-sharable file, it has destructive consequences. (Yes, you could have your program visually ...


2

I saw this question, made some sketches, got distracted, came back to see that @dan1111 had described the majority of the fixes. In fairness though, all that's happening here is the application of some design conventions. The biggest variation is regarding the addition/editing of cases. I've proposed that the inputs mirror the data in the table. This could ...


2

A few suggestions: Cases should be rows, not columns. As bdimag already mentioned, there are some display problems with the current format, particularly when you can add an arbitrary number of cases. In addition, I would say that making the cases be rows would be more intuitive to the users. Add/edit cases in a pop-up overlay. The current "add case" ...


2

These single page apps were in trend which led the way to a few frameworks with which the similar view can be achieved in a better way. The point is the user has to use a loads of scroll either to go to top (unless the link to top is provided) or to scroll to the bottom and they might be clueless about the category they are going through except to say ...


2

IMO, a responsive website hides no content and adds no content no matter what. It simply rearranges the content to fit on a screen better. If a webpage has location capability, why use it only on the mobile version? What if I'm on a laptop? When I use a website, I expect it to behave the same way no matter what I'm using it on.


2

I would recommend an "accordion" style form. Namely: Select a provider: [ Provider drop down v ] Or [ Add a new provider ]. When the user clicks the button (or the hyperlink, whatever you prefer), the form slides apart to reveal the new provider form. That information is submitted at the same time the main form is submitted, and you can handle the sequence ...



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