94

MD guidelines aren't rules The Google Design team wanted to provide a good selection of colors for app devs who can't think in color. It's a solid palette (the whole UI framework is great), but it doesn't have everything for every scenario. Don't be afraid to part with them. Working off of your blue background, I quickly landed on an "alerting" color that ...


77

The historical reason is that that's what the spacebar does in more, the lowest common demoninator (and probably oldest) of text pagers. In more, it makes sense to map the largest key on the keyboard to the most common action: show the next page. In the glory days of more, you couldn't count on mouse scrollwheels, page down buttons, or sometimes even arrow ...


71

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.


70

Because of: Familiarity: Everyone has more or less learned to use it and a lot of users don't even need to take a look at at individual keys to type. Although not physically, it's present and has the same layout across devices. Usefulness: You can perform an incredible HUGE variety of task just with a keyboard. Accessibility: It provides an accessible ...


53

There is no good way Here's the design logic: Backgrounds are perceived by users as backgrounds, i.e. inert and uninteractable. This is obvious. In order to communicate to users that the background is tappable, you need to tell them that. The most reliable way of doing this is to sign it, i.e. Tap to continue. Note that trying to do something fancy like ...


53

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.


52

By the usability point of view, the optimal choice would probably be #2, since it leaves no doubt about the binding between the book title and its cover (see the Gestalt's Proximity Principle). An example from www.barnesandnoble.com : However, you should pick a vertical ratio limit in order to avoid too high rows: if a cover is too tall, you should fix ...


48

There is at least a single benefit for those not using a mouse - Normally you are able to tab between input elements using the keyboard, this is an indicator as to which element currently has your focus.


44

Rewobs answer is already excellent, but for a deeper understanding it's valuable to consider what alternatives we have. Chorded keyboard Already in the mother of all demos in 1968 an alternative input device was proposed: the chorded keyboard (though the concept is even older). The idea is that instead of moving your fingers to dedicated keys one at a ...


44

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


43

This one tested well with both the technical and non-technical users and can generate pretty much any possible database query... The benefits are that it's very clear and a user can drag and drop (or delete) any expression or group of expressions in the tree. The down side is how much space it consumes.


37

Don't use meaningless imagery just for decorative purposes. They'll get ignored, it's clutter, it needs to be downloaded by the end-user which means the site will be slower to load... There are numerous reasons not to use such images when they don't have any purpose. However I think you are overlooking one option: Typography. Good typography can be ...


36

By using text + image. You can use something like this: Bonus points for adding a subtle animation that catches even more attention.


35

Create a repository with actions from where they can be dragged to days. The question is what happens when you try to drag an item to a day that is already occupied. Replace the item and send the previous one to the repository Swap both items. In this case, if you start with a preset for every day you don't even need the repository.


32

The spacebar is the largest key of your keyboard, and is consequently the easiest one to interact with. For that reason, apps tend to use the spacebar for: a simple action: where no input, precision or direction is involved. a repeated action: the spacebar is the easiest to press several times in a row. a "forgivable" action: if you accidentally press it, ...


31

Usually this is done using a table view, which is basically a list of items as well, only with a checkmark instead of a radio button. Sometimes such lists are on a new 'page' in the navigation structure. How this fits in your navigational structure depends on the context.


30

Yes, and it's called finger-friendly. Smaller touch targets are harder for users to hit than larger ones. When you’re designing mobile interfaces, it’s best to make your targets big so that they’re easy for users to tap. But exactly how big should you make them to give the best ease of use to the majority of your users? Many mobile developers have ...


30

1 is the better option as you are not making the user do a set of actions that would lead to error message. It's better to avoid the chance of an error occurring rather than let the user do the error and agitate the user that they did something wrong. you could disable the dates and show a tool tip if the user tries to select the disabled dates


29

The style of shapes can alter the look and feel of the application and thus change the user experience. Apple got praise with their rounded corner movement showing that a different style shape can lead to a better User Experience. Lets look at examples Which image is easier to follow? Which Image would you prefer to look at (aka is easier on ...


26

Another option is to use a semi-transparent layer on top of the images for text which allows you to control the colour and hue of all the images so you can have a more consistent looking portfolio (if desired). The Verge uses a lot of colour gradients which may of may not be to your taste, but it can be an effective way of combining both text whilst being ...


24

What's the issue with giving the user a predefined region of space with some sort of indicator that that space is where they should tap to continue - a button with an appropriate continue icon (the right-ward arrow is popular), for instance? From a UX perspective, you're removing a level of complexity by removing an unnecessary choice, namely where on the ...


24

Think about what it means to be staring at that loading spinner: The user doesn’t want to do any of this. He has no interest in managing his utilities. It’s something he might have to do from time to time, but he’s hardly happy about it. This had better be a smooth experience. The system has failed. Few people go straight to support without a problem ...


21

I don't have any evidence that this is the reason the spacebar is used for page down, but back in the day when IBM was setting PC design standards (that still heavily influence the design today), the original IBM AT 84-key keyboard from 1981 (IIRC) did not have page up/down or dedicated arrow keys (they shared the number pad): The standard 101-key keyboard ...


21

Their usefulness scales beautifully with experience and developed skill Someone who knows only a little bit of numbers and letters can use a keyboard for a variety of tasks, even without knowing about the importance of the "shift key". As each button on the keyboard is labeled clearly with what each key will output when pressed, a person can guess quite ...


21

Both. As others have said, it's better to disable past dates to minimise the risk of bad data, however you should also factor in that sometimes things don't work as expected and still validate the data. If you just blindly accepted the input, what would happen if the user found a way of entering a date in the past? If they find a bug and exploit it, then ...


21

In many sports apps when you check the standings table you only get limited data (such as no. of games, points) and when you want to see all columns (no. of goals, wins, etc.) you need to rotate the screen to landscape mode. Multiple times I've seen a solution like in the UEFA European qualifiers app - a logo with an explanatory text above or below the table....


20

This is a pretty broad question, but if you're looking for some resources, here are a few I would suggest: Apple iOS UI Design Dos & Don'ts Apple: Designing for iOS7 Android Design Guidelines Designing Mobile Interfaces by Steven Hoober and Eric Berkman Mobile Design Pattern Gallery: UI Patterns for Mobile Applications by Theresa Neil Microinteractons: ...


19

These are called 'Dark patterns' and these can be used in many different ways to influence users behaviour. Social networks as you mentioned put the logout button in a separate menu, Facebook in particular hide the 'deactivate' option very deeply in a settings structure. Some people also believe that you can never delete your Facebook account, when in ...


19

Show your error message on a neutral-colored box. download bmml source – Wireframes created with Balsamiq Mockups


18

To have a less formal tone to your users, if this is a learning application (asserted from screenshot), I would use what you really write in your question: Your next step: That way you would get users feel more relaxed and more focused on learning.


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