Hot answers tagged

70

Basic users first I assume this isn't a color theory app. If this is intended to support quick color selection with a sub-set of power users, a hybrid palette chooser / builder will work well. Make ‘easy’ easy Start with a palette-based chooser with reasonably sized swatches that simplifies the user's job of making a fast selection. Google has ...


59

Designers When it's your working version and you just want some text in there to visualise the overall page balance, and you'll only share it with other designers, then using Lorum ipsum should probably be fine. End users For end users, I would suggest using some other real example text. Yes, you'd have to localise this, but it's quite easy to simply ...


33

It's ok, and it's good! Why? because it creates consistency and builds and reinforces UI patterns for users. Imagine if every other UI of each app was very different. they user would need to re-familiarize themselves whenever they switch between apps. But.. at the same time copying UIs and not thinking about how these can be improved (and try come up ...


30

Font and layout is exactly what Lorem Ipsum is designed to do. It has been used by type setters and printers since the 1500s. The idea is that by not having real words the users focus on the layout. It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is ...


29

If the data is tabular, then I see no reason why one shouldn't go with tables? After all, the whole purpose of table element is for showing such type of data. But if your query is how to make the tabular data look more beautiful, then read this article - http://darkhorseanalytics.com/blog/clear-off-the-table/ In nutshell, it follows the principle of 'Less ...


27

@Mayo has, I think, the answer with the clearest affordance. But, if the discount field is going to be used frequently, an approach that has been proven to work with many professional and productivity application is the polymorphic input box. Applications like Microsoft Word, PowerPoint, Photoshop, AutoCAD, Illustrator, and others use these boxes ...


27

I'm not sure there's any objective answer to this one, because it'll depend too much on the demographics of your clients. I'll give my subjective two cents though! If they're not graphic designers or extremely tech-savvy, I'd want to go for the most intuitive solution, which to me is the second one. In my mind, the thoughts of a user would probably go "I ...


23

There are a few reasons: Robot defense. Content sites (e.g. news sites) sometimes use these buttons to provide a rudimentary defense against content scrapers. By showing only part of the content they prevent scrapers from loading the page and parsing the article. This is obviously very crude, but it is still effective. Affirmation of user intent. ...


18

Here are 3 ways to accomplish a high-precision, trace-style outline without the fat-finger effect. Approach 1: Similar to Kit Grose's excellent answer. A mask gets applied, and you can use brush and eraser to adjust the boundary. The only difference here is, if you need to see the detailed interior of the wound, then the mask works in reverse, i.e. the ...


18

You could use a toggle switch ABSOLUTE | PERCENTAGE and have the user select which one he wants to use. For example: (don't mind the $ sign I did it quickly) and let the user select between the two options. This format works very well in use cases that I deal with. Buyers and bidders have to make numerous (100+) decisions in a day. It's easy to select ...


15

I would flip the problem on its head: instead of tracing around the wound, have the user paint a colour over the wound. Give them two tools; a paintbrush and an eraser. This behaviour is similar to the Quick Mask mode in Photoshop and it works great because you can use a very large brush size at first and then come at the sides with a large eraser to ...


15

It would not be inappropriate to remove a dedicated fast forward (FF) or rewind (RW) button from a digital video UI. What are they designed for? FF and RW buttons were designed to move quickly through physical tape media. In the case of the image below a cassette tape, but they showed up on media before this. There was no practical way to move forward ...


15

All the color pickers you list are based on variations of the HSL / HSV (hue, saturation, lightness / value) color representations. Thus, their main differences are not in color theory, but simply in the placement and shape of the controls. That said, the second color picker in your list has one major disadvantage compared to the others: it doesn't have ...


12

If the goal is to provide a short text sample for the style then use a pangram like "A quick brown fox jumps over the lazy dog". This will show how each letter is rendered.


11

Buttons tend to convey actions, while it looks to me more like these are navigation links. Showing them just as regular links (following whatever style in your app) would be probably be much less imposing both visually and as an action to take. You can also take this a step further, and provide some more useful information instead of simply displaying ...


10

There is consensus within the research community and practicing UX professionals that color definitely has an impact on how a site or application is perceived by the user (paper discussing design factors). The Society for Technical Communications published an article in 2011 entitled Color Matters: Color as Trustworthiness Cue in Web Sites. It's likely the ...


10

It could be default and everybody would understand it, although it's not completely correct, because once the user interacts with the button (for example, it's pressed), then s/he may miss which status was the default. Also, some applications have buttons with different statuses on load (for example, ACTIVE status) , so for that button, the default would be ...


10

I would use there 24 Colors found in 24-pack Crayola Crayons. red, yellow, blue, brown, orange, green, violet, black, carnation pink, yellow orange, blue green, red violet, red orange, yellow green, blue violet, white, violet red, dandelion, cerulean, apricot, scarlet, green yellow, indigo and gray I'm sure some sort of research went into getting ...


10

Since the user won't be looking at the title more than once(users in general) and the marque involves a moving text, I feel that you should go for the other option. Do Marquees Have Good UX?


10

Either is good as long as they are both user initiated. If you can visually pull off ellipsis with tooltip then use that. Just be aware that the tooltip don't extend over the borders of the player, to me that just gives an unfinished touch to it. I don't think user initiated scroll is that distracting because user knows what is about to happen so there is ...


10

@DavidGrinberg has a good point about most users not caring about having more than a small number of colors to choose from. However you can cater to both that group and people who want more choices with an interface supporting progressive enhancement. Microsoft's provided one with Windows for many years. I had trouble finding newer screenshots in English; ...


9

In English it is standard practice to capitalize each word in a heading. It looks "wrong" to native English readers. However this is not necessarily the case in other languages. If your target audience are English speakers then the answer is a clear-cut yes. Capitalize Each Word. (There are exceptions but this works as a general rule.) Here is what to ...


9

The checkbox is not dead To your point, a checkbox is perfectly suited to this purpose. In your example, it's not handled with any finesse but it does get the point across. A good UI designer can help you not only "pretty up" your checkbox, but also reduce the friction of interacting with them. The toggle ain't bad either You have to change your thinking ...


8

I like the way Facebook and other show lists of people. A possibility would be: No selection: One city selected: Two cities: More than two: Hover to see selection without opening (maybe with something more elegant than a title attribute): *Finally, if all options are checked:


8

Edit: The answer has been accepted but I would like to clarify and improvise a few things here. First, as far as visual styles are concerned, it's better to call it realism as against skeuomorphic. Realism would be a pure visual style. Second, flat styles can be misused resulting in bad UX, which does not mean that all flat designs = bad UX. I agree that ...


8

Here are a few ideas. Reduce I'd like to +1 the comment by @DasBeasto: are all of the controls in your form truly necessary? It's entirely possible they are all necessary, but you may also be able to get rid of some edge cases. Put yourself on a UI diet! Does the product need to be everything to every user on every use, or can you cater to all the most ...


8

tl;dr: It's a sheet. The pattern is related to the persistent bottom sheet element on mobile. The MD guidelines actually reference the map example specifically when explaining this approach: On desktop, content ordinarily presented in a persistent bottom sheet might move onto a new sheet of material. On larger screens it may be more appropriate to ...


7

If the text preferences are important, you should not use example text in a different (which includes fictive) language. Languages have different characteristics, and what looks fine for a paragraph of "Lorem ipsum …" is not necessarily ideal for text in other languages. So you should show text in the language the user is setting the preferences for. You ...


7

Choose a text generator that suits your domain and use it instead. Lorem ain't good for layout/typography, it was never meant to (see other answers for why it's not, unless you are in a real printing business, Gutenberg&co-style). If you're after font/typography, use a pangram for the language you are after (hello localization!), like @ratchetfreak said ...


7

The container zoo The terms card, panel, tile, and others are often used interchangeably, so their definitions not precise and can change from company to company or ecosystem to ecosystem. But, there is a loose vernacular definition for the different containers. Why does it matter? Because in practice, naming things is important. Here is an example of ...



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