New answers tagged

1

Here is your solution as per my point of view. See the image below.


1

One design options you can look into is using a dropdown call-to-action for your search button. So by default you can present the input elements for one type of search, and when the user selects the other search type you present them with the alternate set of input elements. download bmml source – Wireframes created with Balsamiq Mockups


7

Use a tabbed container for the filters A common and acceptable way to separate filter options, is to user tabs (or versions of tabs) This can often be seen on travel websites, where users can search for several different services. With this method, it's only possible to submit one set of search criteria at one time. Put each set of filters in an ...


0

You can have tool tip on a word I think this will be the only idea to display the short description of one word. But ya you can direct the user by highlighting the word. Fro example you can give blink effect on the word which have short description. I have just highlighted the word here with Red color you can give effect on the word like constant changing ...


0

You can try something like this. It would be subtle and not to flash; even on mobile devices. Image 1 and when user taps on the underlined word, it would display a small prompt. Image 2


1

I don't believe there is a specific design pattern for your exact example. But you want to combine a Tunnel with the Wizard. You might also consider the Good Defaults pattern if you feel there is need to influence the decision of the user.


1

If you're just looking for an icon that denotes a button for users to tap on to check the number of spots left at an event, then perhaps something like these mockups I did up quickly: Depending on the actual purpose of the icon, I would strongly suggest adding an appropriate label. For example, if the idea is that users can tap on the icon to view a ...


2

What is the ideal scenario for test and save buttons? Another way of approaching this is instead of having two separate buttons for 'test' and 'save', is to incorporate the test connection into the save functionality. This way it becomes more of a validation process (the system prevents you from failing) rather than putting the burden on the user to ensure ...


1

To answer one part of your question: Should I allow connection to be saved without testing? A good design would probably be to automatically test when the user presses save (if it hasn't been tested already). A related question is: should you allow the source to be saved even if the test fails? I probably would allow this (with a confirmation dialog ...


2

I worked at Google for 2 years and we had many challenges using the Material design style guide for the non-mobile-only software applications that we were creating. The style guide is clearly for mobile and has no guidelines for how to apply it to non-touch-screen devices (laptop/desktop). Unless you're designing mobile-first, or responsive (assuming ...


1

Additional Menu One of the main sources of potential confusion here is that an individual hyphen in a cell can end up a long way from the icon in the menu bar that lets the user know what it's for. Showing the same menu bar when the user expands a section could alleviate this. 'Frozen Row' or 'Sticky' Menu You might also consider replicating the ...


1

For the specific case of item deletion there's a widely implemented that works as a doublecheck, but in a more intuitive way. Windows has a recycle bin, gmail has a trash folder. When you throw things in a trashbin you can still pick them out and dust them off again. Although some systems have an automatic/periodic clean up moment. So for a non-final ...


24

I think the only way to warn users that a confirmation will follow, is to use a conventional symbol. Because a standard symbol for this purpose does not exist, you have to establish one in your application. You have to use the symbol consistently in all screens of your applications, so that users will create an implicit connection between the symbol and the ...


18

You can add Step Number to let them know that there are other steps ahead. I have attached a snapshot just for reference.


3

Delete is a destructive feature, so if you have not implemented an undo or trashcan feature in your solution, the extra "Are you sure" step is to ensure they really mean to do this, because it will be lost for ever. I recommend you enhance this extra step to explain why you are making sure they really want to do this. You might even want to consider a ...


1

From the article: Where to Place Icons Your Accordion Menu Icons "There are two common icons used for collapsing: the minus and X icon. Users can misinterpret the minus icon because it often represents removal or deletion. Users shouldn’t feel like they are losing menu options when they collapse the menu. The X icon represents collapsing better because ...


1

This seems to be tricky since you have to show so many informations on a very small display. Let's set on the user needs perspective, they probably are interested in comparing same informations about different products (for example comparing the "Screen size" for the 3 products. Your approach let the user see all informations of a single product, so the user ...


1

MATLAB uses commas to delimit columns and semicolons to delimit rows. Thus, a matrix can be displayed and edited in a single string using a combination of these delimiters. String Format: [1,2,3; 4,5,6; 7,8,9] Matrix Format: 1 2 3 4 5 6 7 8 9


33

Status Bar The name for the toolbar itself is the "status bar". Status Bar - a strip along the bottom of a software or Internet application that indicates what is happening with a task or information like date, time, cursor or scroll position, page number, open applications, etc. http://www.dictionary.com/browse/status-bar On a Web ...


5

Why not try an hour glass? Almost everyone understands how an hour glass works, even small children, and it seems to fit your situation unique. The user has an particular amount of time which is represented by the amount of sand in the top half of the hour glass, and as the user consumes that time, the sand moves from the top half to the bottom half, with ...


0

Progress indicator helps to answer the following questions - what part of the whole task done? how far am I from my goal? how fast am I going to my goal? 'Consumption' indicator should help to answer the following: how things are going relatively to highest possible mark? should I do better or can I go slower? If above is what you mean about showing ...


3

Animation Have stripes on the progress bar that are animating to right (presuming your reversed-bar is right aligned). This will give the perception that the bar is moving in that direction, or decreasing. Here is an example: http://cssdeck.com/labs/vdl9fd3x


3

What about a clock? Most people should associate this with the concept of "time consumed".


0

One reason that I've had to implement restrictions on spaces and dashes is that to get a mobile device to pop up the numeric keyboard instead of the full keyboard, it's useful to have a pattern="[0-9]*" property for greater browser support. For the moment, this is part of the only cross browser solution.


-1

There are a few "frameworks" you can use for easier layout and even dynamic data representation. Most popular of these is probably Angular, from google. https://angularjs.org Second most popular is (probably) React from Facebook. They might do what you want.


1

You should go with the simplest design: show only the range of fourteen days, for instance as fourteen boxes. For every day, show the weekday, day, and month (it's important because the range can span across two months). If you want to go with the "standard" calendar design, show one full month (or two if the range spans across two months) with the ...


0

I think in that way the interface looks more like an "OS software" and less like a Web App. We shouldn't not forget that Gmail was one of the first adopted WebApp to really replace email softwares. This UI is getting a bit old. Inbox is using a real pointer on every elements.


2

It will be an attempt to make the app feel more like it is OS native, and less like a website. The UI should be able to provide clear signals about what is interactive and what is not. If a user is relying on the cursor to change to indicate an elements inter-activeness, then the user experience has not been considered enough. In a website the hand ...


0

1) Google's Material design is a good point of inspiration for bold, flat design: https://www.google.com/design/spec/material-design/introduction.html. 2) Look at the top apps already out there. Do some user testing with other people on your team and get everyone to think about what really works or doesn't work. 3) Search for "UI patterns" if you want ...


5

The good and bad of bottom nav Bottom nav was a great idea when Apple first came out with it. Steve was laser-focused on one-handed usability. The bottom nav was designed to accommodate fast and convenient view switching where the mobile use case seemed to demand it. Unfortunately, bottom nav is a hierarchy nightmare when used for an app's main info ...


1

You could just give the user a formatting syntax for defining the matrix, so it can be entered as plain text. It would probably help if you use a multi-line re-sizable text field, then you can have one vector per line, and just have space separated values. You can even format the values with extra spaces between them so that the user can clearly see ...


-1

Concept: Command wizard In this post I'm proposing a CLI that, in your words, is "meant to augment the user's productivity while using a particular tool". My main concept is that the CLI should "appear as a friendly search dialog", feeling familiar to Google.com. So it relies heavily on Google's "established pattern", but uses that pattern in a novel ...


0

It depends on how frequently your users will use the navigation links. If its rarely then hamburger menu is ok. Otherwise top navigation will still do the work but the left most buttons will be a bit harder to tap (see image below). All 3 variants have their advantages and disadvantages, but the important thing is to choose the one that will fit best ...


2

One line answer to this is the Usability of choosing that position. When you hold your mobile in hand, your thumb immediately gets into action and the bottom position is easily accessible to it than the top. In the era of large screen devices it's difficult to hold the phone in hand and access the navigation placed on top. Which is why Apple has changed ...


3

I think you should reconsider the bottom navigation: Bottom navigation is very well established in mobile apps, far more so than top navigation, and there is good reason for this. In most cases i disagree with your point about incorrect information hierarchy - the content takes prime visual position in the interface, and the navigation is simply a tool for ...


3

I tried to guess what the icon meant without looking at the hidden text. The first thing that popped to my mind was "go back in time", so I thought it was to restore a previous backup or a previous configuration. Nope. So, don't always assume the user will know what an icon is for -- especially if the screen already include a few dozens of them. Now, ...


0

A picture is worth a thousand words, at least when it is clear what the picture is (which it never is, as it is subject to interpretation and various domain specific, cultural or personal factors). There's no harm in incorporating words into the design (better still, use text labels), and once the users are used to it then you can either give them an option ...


5

Okay, to start with I'll say that it wasn't clear to me what your icon meant. For me, the first thing that popped into my head was "turn back time" which may have been totally appropriate for something like backup software. Other things that came to mind were "rewind", "replay", "restart", etc. I'm not saying that your icon couldn't signify "view history", ...


4

Understand the intent of user Extract relevant information Good Analysis Converse with user in a natural way Understanding the intent of user is the hard part in natural language and there are certainty rate involved for this(in many cases). In addition to this; each language has its own specific features. Questions and commands are ...


3

The show/hide toggle and the multiple sets of inputs for recording the same type of data seem inefficient. You can save on UI by only having one set of inputs and letting the user specify if the goal is for home or away. User simply starts recording goals, and as they are saved they populate the area below the input UI. 1) If 0-0 - Don't hide the UI ...


0

If the match result is 0:0 should I use on/off slider button to disable the area or should I remove it and let the user to leave this area empty? In my opinion it is good to keep the slider button. The interface will be more clear. But I would think about the header. Maybe "Did anyone score?" would be better then "Who scored?" Or if user has to ...


1

I understood the question now, As per my experience, the drop down menu is not a good practice. In order to remove dropdown we can use a modal. Modal will consists of all widgets, user have to select widget which he wants to show on dashboard. and Click Save. On Dashboard page, Give a link or a button as Personalize, Whenever user click on this button ...


0

Have you tried shifting the values based on the number of digits? In other words, set the vertical offset for the single-digit numbers to remove the empty space and then move the numbers upwards as the number of digits increases. The plus side of this approach is that now, in addition to the visual- length-based sorting already present, height-based ...


1

The design pattern you are looking for is a called a Tree Table. Tree Tables are common in file browsers such as Finder and email clients. Jenifer Tidwell describes a Tree Table at length in Designing Interfaces: What: Put hierarchical data in columns, like a table, but use an indented outline structure in the first column to illustrate the tree ...


0

My personal preference would be: keep the tabs on the left, use background color for the selected tab same as the inner box border color, separate groups of digits, e.g. 1000-054, use a gray x on each tab, which would be highlighted on hover to a red x, and a + sign on the bottom tab there are plenty of inspirations for vertical tabs, close tab, add new ...


12

One option you may try is to make the dark area variable, depending from the number of digits. This way the dark area will also work as a visual cue, indicating the magnitude of the number.


2

Different Interfaces for two different functionality Example case: Car air condition interfaces As many example of car air conditions the first on/off functionality defined with a toggle button (light indicator); while heating adjustment element is defined with (knob and blue-red colors). Colors are not the only variable that you can play when you ...


3

An icon to the left of a unrelated label is clearly not the way to go. If you got the space for it, the best option would be to provide a label to the filter icon. Essentially, you want a clear distinction between your title and the action, either by different alignment (left, right), size, weight or color (opacity).


2

Scaling of text according to the size of the sample, on comparable images, more often than not results badly. Lets try to work around that. Small numbers (as in single digit numbers) might look too isolated and unaesthetic when appearing on a bigger canvas. This can be avoided to an extent by making the ten's place hold a value by default (0 in our ...


20

Are you restricted to using an angled corner? If not, a box would be much more simple & sleek. Otherwise if you are stuck using the angled corner, aligning to the top right rather then center is probably your best bet!



Top 50 recent answers are included