Tag Info

New answers tagged

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


0

There is no rhyme or reason as to the layout here. Consider grouping your buttons into logical groupings, perhaps emphasizing some over others based on priority of use.


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

If all the buttons are required to be shown show them as a drop down menu with actions(like the hamburger icon and the drop down using it) and if not change the buttons contextually(which is easy with the basic JS)


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


0

In the article "The origins of the use of [x] in UI design" you can read: The use of [x] for close and [o] for open could come from the Japanese symbols batsu and maru. Batsu (x) is the symbol for incorrect, and can represent false, bad, wrong or attack, while maru (o) means correct, true, good, whole, or something precious. Batsu and maru are ...


0

By "process" I assume you mean screens/pages that require the user to fill in information? The "Getting Started" setup process for the OS itself is probably as native as you could get (I'm not sure how WP7's setup process is, as that's what you tagged, but WP8 should be what you're looking for). I don't recall it having an indicator, though. When you upgrade ...


0

As thousandtyone and ECM mentioned, many tag controls, like the one on this site, simply allow the adding of a new tag unless you've picked one from the suggestions. I'm particularly fond of way Jira handles it (slightly more usable than the SE way because it says '(New label)':


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

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


0

Users are not just the (for lack of a better term) end-user of the system. There are many other users involved: developers, business, as well as end-users. Talk to end-users about the existing product, discover their pain points, needs and goals. Use this information as your leverage. Prototyping can help quickly vet ideas outside of the dev cycle. Prove ...


0

If you can get access to people, I'd spend an afternoon chatting to users to understand what the system is suppose to do.


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


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


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


0

The first option is better because it makes very clear that there is a very clear developer option that the user can see. Furthermore, when a user activates the developer option, they most certainly want to use it. Further, with the big button to switch between the two modes, the user can effortlessly switch between the two modes without going through the ...


0

You should also check out the site UI Patters. You might find inspirations that would spark you with ideas of what you could do, but also (and sometimes more importantly) what not to do :) You could also check out Dribble for inspiration. Finally, you should read this post about "The Laws of Sh!&^y Dashboards" ... it's a great read Also, I don't ...


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


0

You can use it if you make sure touch enabled users can still use it. Also, make sure the page won't reload when users try to enable the hover drop down with a click. I've seen some examples where users tried to click which caused the page to reload and resulted in no drop down.


0

There's an option to keep both. Some users will find it very useful to have a hover feature, especially on a desktop. While for the others, mainly the touch screen users - You can make the following adjustments in your CSS: http://stackoverflow.com/questions/2851663/how-do-i-simulate-a-hover-with-a-touch-in-touch-enabled-browsers


0

If you're creating for desktop, it's ok to enable it. Just don't forget to add a little delay on it so the user's screen don't start showing lists nonstop on passing the mouse fast, that can be annoying.


0

When taking a Mobile First approach, your navigation would be determined by your product being used on a phone. If this is the case, drop downs would be a poor choice. Not only do hover States not exist in mobile, but they increase complexity (typically unnecessarily). This scales to desktop where ideally you would share the same navigation hierarchy ...


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.


0

I came here to read some other opinions on the topic. My personal opinion is that autosave is fine ONLY & ONLY IF it is backed up with undo feature. I remember once I had very negative experience in Google maps when I accidentally moved a pointer from one position to another. I tried to find undo button and at that moment app reports "Your changes were ...


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


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


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.


0

Arrow pointing down is the right way. I am sure the focus here was the arrow direction, I am just covering related points: There are a couple of incorrect usages in this sample. The top rectangles are like switches with bulbs embedded inside them. When you press, they should light up. Here, they become dark. The untouched buttons are brighter. Maybe ...


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


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


11

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


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.


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


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


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



Top 50 recent answers are included