Tag Info

New answers tagged

0

https://play.google.com/store/apps/details?id=com.ecg.close5 Install this app and check it out. It is a classifieds app with a similar use case. They have just added options like - within 5 miles, 10 miles, 15 miles, etc. Similarly, you can divide your results based on region, and at the same time display the number of items found in each division. For ...


0

The flow you're describing is a user trying to buy an iPhone. He want local results first, but will consider driving a bit further away as well. First thing that comes to mind is don't filter by location, sort by distance. However, I think sorting by price will be an overwhelming preference here, so that's out. Seeing as the process is one-directional, ...


0

I think your approach is a bit convoluted, you could simply ask the user to add locations and/or within certain ranges. For example: or some quick mock using your own site: or you could use ranges or whatever, just be direct and concise and try not to confuse the user with if else conditionals, that is something you need to take care in your backend, ...


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

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


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


4

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


4

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


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

The positioning of drag source elements and drop targets largely depend on the culture. In countries that read left to right put the source elements on the left since that is where they will look first. See this answer to a similar question For your specific use case I would try and do it without using drag and drop as this interaction is hard to get ...


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


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

I personally feel drag and drop interfaces can cause a considerable amount of friction. Have you considered a list of available choices with visibility toggles for edit and view mode? Could easily translate to smaller touch interfaces whereas drag and drop will not. Maybe something along these lines?


0

The way you're question is currently worded, you're asking us to define what constitutes "modern" right this instant, which is like defining "what date it is". The answer will change over time. If you'd have to define modern as a principle, it'd be defined by anything contemporary. This is a list that's as endless as infinity. Aesthetics (colors, shapes, ...


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


0

If the measurements are standard, maybe you can remove the editing cells functionality in favor of multiple selection from a predefined range. To make the process easier, I would recommend using a table that allows reordering of the columns, so an european user can place Italy as the first column, making it easier to ignore the rest. Or have the capability ...


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


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.


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.


0

If you look around all these sales blogs, you'll realize that the general rule is that, you won't make a sale until an average of 8 attempt/follow up... or the rule of advertising where they say you have to see an advertisement 6 times before it sticks (actual number may be different. I forgot the exact number off the top of my head). They obviously can't ...


0

For what I get from your mockups, I think your problem is the lists are not connected, but the elements inside those lists may (or may NOT) connect to another element, thus lists are hard to connect. If you take a closer look, you're trying to connect elements from left list to resources that may fit into the following statuses: true the activity contains ...


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

Why do you present an extra list with the ressources, where only a few of them will be enabled/ highlighted and most are disabled? This doesnt make sense. I would recommend to skip the ressources extra list and just put the dedicated ressources at the end of every article. Thus the connection is clear, it is in focus and chances are high users will click on ...


0

This is a great question. I don't think you need to make drastic changes to your UI since the behavior you are describing seems easy to learn if repeated a few times. I would just add a tiny help icon next to the field and when the user clicks or hovers it, display a small tooltip with the instructions.


0

I am not sure I completely understand your question but I think the two options are: wrap the text on multiple lines by using a multi-line input field truncate the text if it's longer than a maximum size and add a signifier for that. I have seen the three dots (...) used a lot.


0

In my opinion, the fact that it is an arrow, a triangle or a chevron is more up to design. The important fact it is the symbol is the same for all pages and not used for another usage. I personnaly find interesting text + symbol, like


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


0

Using the physical world, car analogy Wireframe = form and shape of the car, to visualise what and where, kept static in the showroom Prototype = a car that can be taken for a test drive ; post which it would go into production


0

The most common example of handling navigating to children on mobile would be the traditional hamburger menu. You can continue expanding as much as required. Note the "+" next to "Image Gallery" which will expand another list of children.


1

How about a slider like this using arrows for the age range.


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


0

Well, you can use http://vanderlee.github.io/limitslider/ or https://api.jquerymobile.com/rangeslider/ that will provide the exact feature you're looking for. Plus, if you take a look to the second link, you'll see the select boxes at beginning and end of the slider, which leads to this: are you looking to use a slider for aesthetics or usability. If you ...


0

Sliders aren't as intuitive or widely used as dropdowns. I recommend using a dropdown. As you know what your age range is, you can explicitly state it like this.


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


0

Is the user required to enter every field for every question? If not, consider using progressive disclosure to make the initial cognitive load on the user a little lighter. For instance, if the initial state of your screen was just a list of questions and text-entry boxes for comments, it would make the task very clear to the user. As the user decides to ...


0

What about this: In your figure it's pretty confusing because you could think the computer from network A isn't allowed to communicate with it's own network. putting computer AA to network B with denied permission is a more clearly way to recognize what going on, since the heading "Access list" is an universal term.


0

Similar to Vitaly's Second option, I think you could look at Apple's Automator as an example.


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


0

Interesting question. As some of the other users i think checkboxes are appropriate to your purpose. For the "Locked/Unlocked" option i'd try to use an image with a two state lock, one locked and one unlocked.


0

What about a multiple-draggable slider? Here is an example another user, Martin, provided in another thread Your users may prefer keyboard input, so you might use this in conjunction with numerical input boxes.


1

Here's a toggle that's just slightly different from your options: The difference being that the only text that is visible is the current state. This changes the mind's dialogue from: Oh, a toggle. I see "yes" and "no", but it looks like the "yes" is colored a bit more vividly so I'm going to conclude that it showing "yes". To this: Oh, a toggle. ...


0

The checkbox is SIGNIFICANTLY better in terms of familiarity/usability. Use checkboxes and make it as aesthetically pleasing as possible. One option is to reinforce the checkbox state by coloring the whole item when in the checked state: download bmml source – Wireframes created with Balsamiq Mockups


9

The checkbox is not dead To your point, a checkbox is perfectly suited to this purpose. In your example, it's not handled with any finesse but it does get the point across. A good UI designer can help you not only "pretty up" your checkbox, but also reduce the friction of interacting with them. The toggle ain't bad either You have to change your thinking ...


2

The problem here as you correctly mentioned is that users are confused. Its because they might confuse with booking the ticket rather than checking the availability of the flights. Most of the use cases are departure and return or day of flight. Your start date and end date is confused with the start of journey and return. Proper labeling is required to ...


1

I propose a simple solution. From my understanding Write, READ are actions and should be shown when the main search has shown results.... Or if you want to show them all the time, then seperate them with surrounding box so they are closer to results... I think this problem as 2 step action.... 1st step) user will search using top level Filters 2nd Step) ...


2

It seems like your interface layout is going to be very similar to most booking sites in regards to the calendar selection. From what you've described it sounds like you just need to label and communicate clearly to the user that the dates being selected will result in a broad search, not an exact match. The word "scan" can be a little misleading. To better ...



Top 50 recent answers are included