Hot answers tagged gui-design
I'm not exactly sure how your app works, but from what I understood, I would use a color like grey for the OFF buttons and a brighter color (the primary color of the application perhaps) for the ON buttons to avoid your problem. Also I'd make use of icons to serve as an indication for Hot/Cold.
Red can be used for ON, most sockets use this color when they are on : I would recommend BRIGHT RED for ON and DARK BLUE for OFF. The brightness difference between the bright red and dark blue will also indicate ON/OFF. Also use round shape because it resembles more with LED lights, used for power ON/OFF in many devices.
Do not use colors to indicate that the system is ON or OFF, use instead a linguistic code, while use an iconic code to comunicate the HOT/COLD state. Here I used a thermometer with different colors (i did not use the snowflake icon since it communicates more a sense of active cooling -like a freezer-, rather than a passive dispersion of heat -like some ...
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 ...
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 ...
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!
You can add Step Number to let them know that there are other steps ahead. I have attached a snapshot just for reference.
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.
My advice would be to lose the On/Off labeling. It's just adding a layer of confusion. If ON == Cold && OFF == HOT, just label them HOT/COLD. They are referring to the same state. Then you could just use a switch/toggle. In this example(See below), I would change the words "On/Off"" to "Hot/Cold" and update the colors accordingly.
In construction the color for warnings is Bright Orange. Orange + could do the trick.
I would like to point out that for ON/OFF there are unicode symbols, see: http://unicodepowersymbol.com/ ⏻ Power: U+23FB ⏼ Toggle Power: U+23FC ⏽ Power On: U+23FD ⭘ Power Off: U+2B58 In my opinion, the color code green = ON and red = OFF is not very widespread, and therefore the risk of confusion is low. As far as my ...
The kettle is not hot immediately when it turns on. It needs to heat up first, so your hot/cold nomenclature is misleading. Just make it an on/off switch. Or better, equip the kettle with a thermostat.
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 ...
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", ...
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 ...
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 ...
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 ...
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.
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, ...
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).
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 ...
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 ...
What about a clock? Most people should associate this with the concept of "time consumed".
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
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 ...
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 ...
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 ...
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 ...
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 ...
Yellow = hot (the sun) and on (electricity, light bulbs, etc.) Blue = cold (ice, sky) and off (calming color)
Only top voted, non community-wiki answers of a minimum length are eligible