Hot answers tagged

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


27

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


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!


18

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


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.


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


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


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


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

From another answer of mine, I highly suggest that you consider using "switches" that minimc real-world switches to clarify state: With these designs the state of the switch is very clear, so the colors can be fit to the application at hand.


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

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


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


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


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


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


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


2

Apple faced a similar issue in their music app--but not with downloads, instead with play order. They solved it by allowing the user to "Play Next" or "Add to Up Next" which is just a queue that the user was allowed to modify. I feel like this is along the same lines of what you're trying to solve: There is a default order of events, but you're allowing the ...


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


2

Never depend on color alone for a critical interface component. Many people, perhaps upwards of 1 in 10, have some form of color-blindness that limits their perception of certain colors. Staring at colors can lead to our eyes/brains inverting colors, where you literally see a totally different color. Green become red, yellow becomes blue. Early astronauts ...


2

Yellow = hot (the sun) and on (electricity, light bulbs, etc.) Blue = cold (ice, sky) and off (calming color)


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


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


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


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


2

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


2

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


2

In this use case it appears to be the users job to consider every case. Then visibility is a reminder and a positive. Accordions / tab panels would mean extra clicks and potentially hide reminders I'm going to assume that that UI is well presented visually. Font size, spacing, etc. Also assume that keyboard control is optimal. Then few things can do A ...



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