Tag Info

Hot answers tagged

66

I would go with this kind of UI, reasoning: Users only select the dates that he/she is applying leave for without having to think about first day of leave and first day of work. Leave balance is not displayed on the same screen as it might get too cluttered and might confuse the users. For "leave balance" checking, I would suggest to make it accessible ...


58

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


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


22

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


21

Try to distinguish between what users want and how they want it done. Taking your example above, users wanting one vs. two input boxes is all about the how. The what is being able to paste comma-separated coordinate pairs vs. not having to press comma. (Or, for some users, being able to simply press comma rather than having to click a second input box.) In ...


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


15

You can't please everyone Most changes or additions will leave some people behind. They may catch up later, they may hate you forever. Shoot for net gain in the experience. If you avoid negative feedback, you avoid progress. It helps to keep a destination in your sights. Focus on an established list of goals for the long term vision of the product and the ...


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


13

I’ve considered the question recently due to travelling and booking hostels. The same problem appears there, since whether you book the night or the day can be confusing indeed. For usability reasons, the left one is a better choice since the user doesn’t have to do the maths. In this case, the best way to help the user is to be clear in the definition of ...


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.


9

The focus state should be more obvious than the hover state A mouse over or :hover state is a more direct interaction (i.e. the user is controlling the mouse cursor directly over the button they want to click) The :focus state, on the other hand, requires a separate scan of the entire page in order to determine which component is currently being targeted. ...


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


6

The way Airbnb does it is great. When picking you would have the "First day of leave, First day of work" option. And when tapped, the calendar shows in an infinite scroll starting today and onward, in your case you could even color differently the days that don't count as leave days. They mark the leave days in the calendar nicely, even if they start one ...


5

Here is another option that might work depending on the situation. It has the added benefit of not needing to be localized into different languages... credit: Facebook placeholder loading card


5

It's not a lot of information. Amazon already do something similar. It's quite informative.


5

If you want a logical way to display it, I'll go trough that And by the way, care about typo size if you go responsive, that's quite low here.


4

Honestly, as long as your :hover state & :focus state are very clearly showing exactly which item will have action the taken on it, I can't see any reason to style them separately. :focus is essentially a keyboard hover. The previous answer is correct in saying that a :focus element should contain a box around it, but as long as the outline property ...


4

Add text for clarity and images for quick recognition UX is more about solving problems and making things easier for people and not about pretty icons. Images should enhance an already functional UI. Although this may be way off base from what your application is trying to do this would be more intuitive to first time users...


4

Your solutions (both of them) are quite reasonable and can be used together. Showing the best matches at the top is best when almost always the desired result is in the top few. User research will tell you if you should show the top 1, 2, 3, 5, or whatever. You can add a link to the best matches that jumps the user down into the document-ordered search ...


4

You can use an offset pointer/cross-hairs above the center of the touchpoint with an appropriate width. This will make allow you to see where the line is being drawn, not being obscured by your finger or hand.


4

Interesting question. Yes, grammars do exist for UI design, but no, I haven't seen one as high level as what you are describing. Templating systems like jinja2 and django implement grammars for domain-specific languages (DSL's) which are well adapted to describing UI's. But these grammars are highly specialized and more focused on concrete implementation ...


4

I would propose a third option. Make the button and image clickable It has become a convention that images are clickable on websites and in applications. My personal experience with this is during my time at a webshop where user research pointed out that almost 70% clicked the image of the product in a list of products in order to navigate to the product ...


3

In my experience, Lorem Ipsum is beloved of typography fans, and unknown to the common man - aka, the client. So, if you want to avoid a discussion with the client about why the text is garbled, and why you selected this placeholder text rather than some text saying "this is placeholder text" and then properly exercising as many code points and ligatures as ...


3

While »Lorem Ipsum« is great for the early design stage it is nearly always worth to change the blind text to localized dummy text (Yes, this is additional work which seems not necessarily needed. But it shows you're paying attention to details.) The trick is to use text which looks like a normal reading text – this is very important! While most people ...


3

Why waste the opportunity to promote your clients, company, or products? I realize you're trying to give them something without meaning so they won't focus on the words, but if you give them the same positive words about your product every time, they will read the message once then quickly overlook it from that point forward. "You are a balanced and wise ...


3

This is just plainly bad design. There is no tricky explanation as to why some of your users fail at performing the task. This is a fantastic example of how skeuomorphism doesn't work everywhere. The core purpose of skeuomorphic design is to present users with controls that they can recognize from the physical world and can interact using similar gestures ...


3

The visual metaphor here is an ON/OFF toggle switch It starts out in the OFF position to the left and can be turned ON (illuminated) by moving the lever over to the right. (the fact that this can only be done with a click is simply poor implementation) Read more about this pattern and how to improve upon it in this thread... Should a toggle button show ...


3

Accommodate both! In this case, your users told you exactly what they were missing in the old version (in this example, easy copy/paste). So create a new way that meets both sets of requirements. Generally speaking, say the old way offered Features A and B, and the new way still supported Feature B, lost feature A, but added feature C. Users said they ...


3

I identified two approaches: 1. Make a list of the 3 best matches at the top of the page, redirecting to the elements in context This technique you’re referring to is called “Best bets”, and can take many shapes and form. BBC used this on their search page before but have for some reason taken it away. But in your case, I think it’s a good idea. ...



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