Tag Info

Hot answers tagged

46

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


34

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


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


25

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


25

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


19

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


17

The idea behind this bar can be traced back to Gestalt's law of similarity which states: Elements within an assortment of objects are perceptually grouped together if they are similar to each other. This is why you shall see two columns in (a) and two rows in (b). The latter also demonstrates that colour wins over shape (in this specific example at ...


15

You should always use the word which is common among the users, no matter if it is the technically correct one or not. In Why the electronic land registry failed, Lauesen gave a very vivid example of this. This is a story of a large system which had to be made mandatory for use in real estate purchases in the whole of Denmark. The requirements were ...


15

The biggest advantage of radial or pie menus is their speed. To quote this article. Radial Menus Are Fast Radial menus are faster to access than list-based menus in every kind of pointer-based UI, including cursor, stylus, and touch. One big part of that is because every option is spaced at the same distance from the pointer. That’s classic ...


14

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


13

I'm assuming we are talking about a desktop app here. Further, I don't really know the type of app you are building, but can offer some help in studying the needs of the user without getting bogged down with the question of "how many clicks does it take to get to a good UX". Most of your examples seem to be on text editors; so, we'll go with that. My ...


12

A possible solution would be to do it like JIRA does. Normal: While hovering over it: When clicked on it:


11

The difference between touch and mouse is much deeper than just the size of the controls. It requires another way of thinking: • Swipe rather than scroll (which requires you to rethink the role of scrollbars) • Pinch rather than click to zoom. • Cursor remains invisible (because under your finger). This makes operations much more direct but also less ...


10

Is it even neccessary to show how many children are left to be approved at all? How many administrators will be doing the approvals? If it is more than one then the task will probably be split up anyway (please correct me if I'm wrong) so instead of showing the progress bar you could do one of the following: on approval of one listing ask the admin if ...


10

To find an alternative that solves the problems with the Pinterest layout, step one is identifying what specifically the problem with the Pinterest layout is. The big design compromise with the pinterest layout and your example is lack of *heirarchy* - relying entirely on the imagery in equally-weighted items to catch the eye. This underlies your problem ...


9

I agree with WebDevelopteer, having different categories of things in the same column is not very intuitive. But you can go a different way. This is a (very) quick idea. How about having the verification icon first, and only once it's been clicked and verified it shows you the Primary selection as a different button? The verification button would have two ...


9

If the client really wants a typed "signature", and you're interested in making it look like a printed document, how about something like this? A highlighted signature box with a standard signature line and some instructional placeholder text. On clicking, the user gets a flashing cursor, a button to commit the change, and a way to cancel out of the ...


9

This can happen to a product that goes through a long and gradual evolution, where the changes may seem subtle, and subsequently are not properly vetted out. If you look at the old Gmail's icons, there was much better distinction between Back and Reply buttons. This is how the "Back" Button looked like in 2011 Gmail. And this is how the "Reply" icon ...


8

You are at least making a dedicated effort to involve users at an early stage, which is great. As for the skimming behaviour, eye tracking studies have shown that these typically follow the same pattern on the screen. Jakob Nielsen has done a ton of research on it. It strikes me however that there's a mismatch between your assumptions of what is "nothing ...


8

You could use the token-field design pattern for displaying and selecting the multiple options. This has the advantage of letting the user see all the items they have already selected while they select more, not just the options that match the current filter. Some token-field implementations also implement the type-ahead filter design pattern you have. ...


8

Create a clear visual hierarchy 52 weeks of UX tuts plus This basically breaks down into making the most important parts of the page the most obvious through various techniques such as size, colour, contrast, use of whitespace, proximity to other items, etc. The most important parts of the page are usualy the headings, content and primary navigation (or ...


8

Showing the actions only on hover is the way that 37Signals do it in many of their products, and so far I haven't seen any problems with it, other than it not being usable on touch devices. That is a big downside if your customers are likely to be using touch devices. With the prevalence of iPads, this is becoming a bigger concern. Another possible method ...


8

If your app is really just two screens of content, then you can try treating each screen as a pane in a horizontal carousel where you can swipe between them. Take a look at the iOS weather app as an example.


8

Without knowing the full details I would think of a common pagination like < 5 / 23 > The previous/next arrows should be bigger than the text - and touchable. Although the swipe still should be the main interaction to go from one page to the other. I guess this would make things perfectly clear. Although you'll loose the option to directly jump to a ...


8

Jacob Nielsen recommends straightforward naming conventions over "clever" ones. Don't use clever phrases and marketing lingo that make people work too hard to figure out what you're saying. For example, the "Dream, Plan, & Go" category on Travelocity might sound catchy to a marketing person, but it's not as straightforward as "Vacation Planning." ...


8

One of the immediate problems is with scalability, your only ever going to be able to support 26*26 unambiguous users as an absolute maximum although this would require users with initials like QX and ZJ so in reality it will be a smaller set, even if you are global. you rule out tooltips (which are a good idea btw), however, there are some other things you ...


7

A quick search of the Adobe site shows the reasoning for this - albeit for CS5 but I would imagine the reasoning is still the same. (emphasis mine): By default, the Photoshop History panel retains only the last 20 actions. This is a compromise, striking a balance between flexibility and performance. You can change the number of levels in the History ...


7

The solution for this is called visual hierarchy. It's damn hard to achieve. My favourite example is found on the Thinking With Type website. There are a few rules which help you to reach a visual hierarchy (Gestalt Principles, C.R.A.P. rules, etc), but in general, the person who understand this is called a graphics designer and the person who really ...


7

Your second mockup is spot-on. This system consists of 3 elements: record name (email), status switch/indicator, and an action (remove/edit). In addition the possible statuses (unverifified/verified/default) can be changed only progressively upward (i.e. no skipping or downgrading). Thus, there's absolutely no need to have a separate column for validation ...


7

First of all you will want to use card sorting to figure out which functionality goes in the same group. After that you want to keep the most used functions directly visible in the toolbar itself and the rest can be hidden in drop down menus. How to decide what functionality is most used? Well, for that you will have to evaluate the core functionalities of ...



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