Tag Info

Hot answers tagged

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


15

On Agile From the various Agile-related concepts, I'd like to highlight two: It meant to combat requirements volatility (frequently evolving or changing requirements or their priority). It increases time to market. Agile, when used in the right context (and followed by the word), is nothing short of magic. The cost of changes within a properly managed ...


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


11

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


7

First, you are not causing any problems, you're doing the best you can with what you have and asking for help shows you have a good head on your shoulders. So I won't sugar coat any of my answers otherwise I don't believe I'd be doing you any justice. First, throw out the term agile. I've been in the environment you are in and they call it agile because ...


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.


3

The main problem seems to be the amount of buttons not the kind of their appearance. The goal is, that your user finds the right button fast. A visual hint would help, but if the icons ar not self-explanatory, the users would have to learn their meaning which only helps if they use this form often. Anyway, each time the user has to scan all buttons to find ...


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 think the industry has reached a point where UI/UX design needs to be done in a way that is both holistic and also systematic. By this I mean that companies looking to develop new products and services in the digital channel needs to invest time and effort in a design framework or a similar structure that allows you to combine the visual, content and ...


2

The answer was staring right back at you when you were typing the question and tagging it :). Did you check out the stack exchange tag question screen? It's slick because it lets you select multiple tags by typing and clicking. It also lets you add a tag without leaving the screen.


1

It might be best to try an alternative layout for the buttons rather than icons as knowing what an icon means outside of the staple well known ones, for things like Play, Pause, Save, Delete etc. is not always easy. It might be more worthwhile spending time on a good translator and using something like i18n for internationalisation.


1

Gmail handles this in a very straight forward way. When you select a message and ask to tag it, you are presented with a list of all existing tags: If you select the "Create new" option you get a popup: But if you just start typing in a label into the search that does not exist, you get the option to create it without the popup: This last method is ...


1

To answer your questions first: the "Add New" button needs to be immediately visible, regardless of the user's screen size or the list's length. That being said, at the top of the list seems to be the most logical (or KISS) choice. What I'd argue is equally important is to make that button really stand out (using color, size, whitespace...). As for the ...


1

Depends a lot on which kind of thing you work on. For example if it is primarilly targeted on mobile, do not enable dropdowns on hover. On the other hand, in case your thing is a desktop application and you have a strong reason (like complexity, lack of mobile users, speed of use, enough hit area in design etc. ) - go for it.


1

"User experience" means nothing without research of and validation by your own actual users! With, at the very least, usability testing of your site or application. In other words, the only general consensus to be had about what's good UX and what isn't comes from testing your web application with actual users in their actual environments. Here's an ...


1

I think the core problem is the arrow or triangle. Most important is for the tab to stand out from its fellows as the selected tab. Beyond that is the principle of connection to the content. One way is to have the content background colour seamlessly flow onto the tab, as shown in Mervin Johnsingh's examples. If you must have a different coloured ...


1

One interpretation of the arrow up in your rendering (alternative B) is that the body of the text is like a speech-bubble. This makes it look like it comes from the header, which feels more natural than an arrow in my opinion. But as many have said, it is probably better to give the tab the same color as the content in that case.


1

You rightly call the process as user onboarding. There are many ways to do onboarding where tool-tips or balloon-tips are most common for web applications or desktop applications. In contrast, coach marks are used in Mobile devices. Whitney Hess defines it as: Onboarding is the process by which you can help users overcome the cold-start problem a >blank ...



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