Tag Info

Hot answers tagged

5

This was most likely a JavaScript bug (Try disabling plugins or using another browser) Going through the same configuration screen, the price banner is fixed to the bottom of the browser window. Unless of course you are using a monitor in portrait mode or have a screen large enough to display the whole page.


5

You'll find fields with a little "clear" button in them all over the web. Like this:


4

If you don't find any guidelines (which I didn't) and the labels you need are widely used, you can take big sites as Google, Facebook, Twitter, Youtube as an example, just search for the Spanish version of this sites, they have neutral Spanish translations. I'm a native Spanish speaker so I can tell you some of the most used: User: Usuario / Nombre de ...


4

Here is one approach favored by my End Users, have an underlined option stating 'Clear' when the field already has an icon within (calendar in my example). Having an X clear button within the edit field is good, but coloring it red might mean error after the User types in a text. The common theme across apps/web is to use a lighter grey/grey colored X ...


3

This example tested well with all types of users It helps if you try it out yourself by clicking the above link but here are the two things that make the X more intuitive and discoverable as a clear button... Only show the X if there is something to clear Place the X inside the input instead of next to it


3

It would help to know what exactly we a assigning a quality to here, but if its something such as internet quality or video quality you could use "signal bars" Alone they don't provide much meaning but the idea is relative to others you can see the difference in quality. This same concept can be used with other measurable items such as movie or books ...


3

I would go for something like this: download bmml source – Wireframes created with Balsamiq Mockups Note that: You show the user all his options The user can clearly see that the option on the right side have the best price. With the text "Currently selected price" you give the user the impression that HE are selecting the PRICE, not that the ...


3

Many websites utilize "pricing windows" (unofficial term) to segregate what price applies to what service. I have created a basic mockup for you based on your question: Examples: Soundcloud GoDaddy


3

In this case, the primary content is not being placed below the footer, the primary content (pricing information) is being placed above the rest of the page content using the position:fixed property. Per MDN: Do not leave space for the element. Instead, position it at a specified position relative to the screen's viewport and don't move it when ...


3

The price bar is not placed below the footer - it's pinned to the bottom of the browser window. On the page that I checked - the 12" Macbook - it took me 14 turns of my scroll wheel to get to the footer of the page, and the price bar was visible the whole time. This means that I could have begun my purchase at any point, wherever I was on the page.


3

Welcome to the site, 67172! There's one conventional pattern showing relations involving tables, which is usually called master-detail. This is restricted to a single list of items and details for the selected item (which might be a table again). Obviously, this is too simple for your case. You'll need to be creative yourself. My first question is about ...


3

Immediately looking at your design there are no visual clues on draggable elements. The first thing I would do is add some sort of visual aid to these elements to guide the user You could even take this further by adding visual cues to the overall container However I do think the overall layout is the actual issue of confusion (unless I misunderstood ...


3

This has been widely discussed, you can take a look a this NNGroup related article, I will sum it up: Drawbacks of using no labels Disappearing placeholder text strains users’ short-term memory. Without labels, users cannot check their work before submitting a form. When error messages occur, people don’t know how to fix the problem. ...


2

I would recommend two spinners with "From" and "To" labels (or "between"/"and")- this allows for good keyboard control, accessibility, tabbing/form navigation, but also preserves the ability for the user to enter arbitrary values unlike a dropdown: download bmml source – Wireframes created with Balsamiq Mockups


2

Is the application specifically for taxi companies? Further to that is the app for drivers receiving jobs? If so, using location based jobs can make this process simpler. The operator only sees jobs relevant to them. As an aside, the UI contains elements not used by the operator. If they are not needed, remove them. Otherwise, could I get more info on the ...


2

I personally agree with @SNag on this one in that the sort indicator is not, in actuality, an arrow at all, but rather a visual indicator of the way the list will be sorted. To offer further support of this, I present a screenshot from Mac OS 8 (circa 1997) that uses a similar metaphor, but one that is clearly and intentionally differentiated from an arrow: ...


2

It's a tough call. Typically I'd say it's better to use a label for the very reasons you outline - i.e. that the placeholder or watermark is transient and disappears as soon as you enter something else. In a recent survey of about 60 sign up forms on most popular English language websites, I found that: 26 used placeholders 27 did not use placeholders 6 ...


2

I work for a company that offers services for non profits to raise money, and we don't always show a thermometer (that's what we call it) to show how much money has been raised. It depends on the case. That said, the reasoning for using a thermometer is simple: show publicly how much out of the goal has been raised. This provides donors a clear ...


1

https://developer.apple.com/library/prerelease/ios/documentation/UserExperience/Conceptual/UIKitUICatalog/UIDatePicker.html http://developer.android.com/guide/topics/ui/controls/pickers.html They are just called date pickers in iOS guidelines. Android generally terms them Pickers for both date and time. These are just customizations of already existing ...


1

It's known as picker or spinner. First example looks like a custom designed one, but it can be done with this tutorial, your second example is the native iOS6 picker (now it has changed to a flat look)


1

The modal part looks correct, although more info is needed. For example, if you're simply adding the summary data to a data container (in this case a modal) you could simply use a box container and drag and drop the summary data (buttons? Text? Actions?) As for your other elements, they are tabbed content. The first one even shows a vertical tabbed content ...


1

A diamond icon might be misleading because it's not commonly used to indicate an objects quality. To represent "high quality" using only the Font Awesome icon pack I would stick to the traditional check-marks, stars, thumbs-up and certificate icons.


1

Modals and popovers are used together all the time. If you do decide to do this, it's good practice to: Ensure that the triggering elements do not look the same. Ensure that the rest of the interface is relatively calm as both modals and pop-ups are quite intrusive. For example, if button opens the terms & conditions modal, then don't use a button ...


1

I would say it depends on the scope. For a single text field you could simply use an x such as the one provided by Font Awesome (here) If you are clearing all information from the form it'd be better to use a button that has a different color to the submission button. For instance if the submission button is the color green, a good differentiating color ...


1

You could also have a sticky element that expands into a form when clicked rather than redirecting to a new page.


1

I think this is a great idea; it saves space, lets the user get to it when desired, and increases engagement. To answer your questions regarding justification, simply look at Stack Exchange sites. Nearly everywhere you navigate to in the interface, the "Ask a Question" button persists. Something similar on your site should be effective, if implemented ...


1

Gmail has a very nice hybrid solution for this, that adds some more powerful options: In Gmail, the checkbox itself is clickable and behaves like a normal checkbox header, and any click on the button outside the checkbox opens the dropdown menu. Even though the button isn't really aligned with the column, it still feels like its header. Probably ...


1

If users are going to be doing this frequently, then they will want to do it quickly and the same way each time. First, the input form should display the formatting, so that users only have to type in numbers, like so: ___.___.___.___/___ Second, I'd recommend that the user be able to configure their preferred method for entering the numbers, and the ...


1

As someone who recently finished designing an interface in which drag-and-drop was the primary method of accomplishing the task, I agree with the points that Jason and BatlaDanny made about clueing the user in on what they are supposed to do. Written instruction is great but, if possible, a transition animation would do wonders especially for those who don't ...


1

Jason has written a decent answer for emphasising dragging by adding visual cues which you should implement, but the problem is a more deeper than this. From your wireframes, I'm inferring that the interface is a website and not a mobile app. And on desktop interfaces, dragging, swiping and other gestures are not so obvious or intuitive and herein lies your ...



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